/* My Movie Case — marketing site
   Mesh-gradient palette mirrors the app (cyan → blue → purple → deep indigo). */

:root {
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.66);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --cyan: #2AE2EC;
  --violet: #5900F0;
  --card: rgba(255, 255, 255, 0.055);
  --card-border: rgba(255, 255, 255, 0.12);
  --maxw: 1040px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  background-color: #160a33;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(0,217,208,0.55), transparent 60%),
    radial-gradient(ellipse 70% 55% at 90% 8%,   rgba(14,167,255,0.50), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 45%,  rgba(142,0,172,0.55), transparent 60%),
    radial-gradient(ellipse 75% 60% at 8% 52%,   rgba(65,2,166,0.55),  transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 102%, rgba(37,0,101,0.90),  transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 62%,  rgba(89,0,240,0.32),  transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Header ---- */
header { padding: 28px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .logo { width: 40px; height: 40px; border-radius: 10px; display: block; }
.brand .name { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }

/* ---- Hero ---- */
.hero { text-align: center; padding: 56px 0 40px; }
.hero .logo-lg { width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45); display: block; }
.hero h1 {
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(90deg, #ffffff 0%, #BFA6FF 60%, var(--cyan) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .tagline { font-size: clamp(18px, 2.6vw, 24px); font-weight: 600; color: var(--ink); margin-top: 18px; }
.hero .sub { font-size: 17px; color: var(--ink-dim); max-width: 560px; margin: 16px auto 0; }

/* ---- App Store badge / pill ---- */
.cta { margin-top: 34px; display: flex; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: rgba(255,255,255,0.10); border: 1px solid var(--card-border);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* ---- Features ---- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 36px 0 12px; }
.feature {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; padding: 26px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.feature .ic { font-size: 26px; margin-bottom: 12px; display: block; }
.feature h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.feature p { color: var(--ink-dim); font-size: 15.5px; margin-top: 7px; }

/* ---- Privacy / article content ---- */
.article {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 24px;
  padding: clamp(26px, 5vw, 52px); margin: 24px 0 0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.article h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.article h2 { font-size: 21px; font-weight: 700; margin-top: 32px; }
.article p, .article li { color: var(--ink-dim); margin-top: 12px; font-size: 16px; }
.article ul { margin-top: 8px; padding-left: 22px; }
.article a { color: var(--cyan); text-decoration: none; }
.article a:hover { text-decoration: underline; }
.article .updated { color: var(--ink-faint); font-size: 14px; margin-top: 8px; }
.article table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.article th, .article td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.10); vertical-align: top; }
.article th { color: var(--ink); font-weight: 700; }
.article td { color: var(--ink-dim); }

/* ---- Footer ---- */
footer { padding: 48px 0 56px; text-align: center; color: var(--ink-faint); font-size: 14px; }
footer .links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
footer a { color: var(--ink-dim); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 680px) {
  .features { grid-template-columns: 1fr; }
}