/* home.css: home page only (hero, proof strip, chapters, plans, studio, CTA).
   Owner: Task 2. Shared components are in site.css. */

/* hero: the default state is the final static state (no JS, reduced motion) */
.hero{ position:relative; background:var(--indigo); color:var(--white); }
.hero-stage{ position:relative; overflow:hidden; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; display:none; }
.hero-live .hero-canvas{ display:block; }
.hero-inner{ position:relative; z-index:2; }
.hero-copy{ padding-top:calc(var(--nav-h) + 32px); }
.hero h1{ font-size:clamp(30px,8.4vw,66px); line-height:1.06; max-width:13ch; }
.hero-sub{ margin-top:16px; color:var(--peri); max-width:38ch; }
.hero .badges{ margin-top:24px; }
.hero .rating{ margin-top:16px; }
.hero-visual{ position:relative; display:flex; justify-content:center; padding:32px 0 64px; }
.hero .phone{ --w:260px; }
.qr-home{ display:none; }
.hint{ display:none; position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; align-items:center; gap:10px; font-size:14px; color:var(--peri); white-space:nowrap; margin:0; }
.hint i{ width:8px; height:8px; background:var(--pink); display:block; animation:blink 1.6s steps(2,end) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* scanner UI drawn in CSS (from the concept, lines 154-177) */
.scanner{ position:absolute; inset:0; color:#fff; background:
  radial-gradient(60% 40% at 30% 30%, #3b3f62 0%, transparent 70%),
  radial-gradient(70% 50% at 80% 80%, #2a2d48 0%, transparent 70%),
  linear-gradient(#17182b, #0d0e1c); }
.scanner .bar{ position:absolute; top:13cqw; left:0; right:0; text-align:center; font:600 5.2cqw/1 var(--text); }
.scanner .status{ position:absolute; top:5cqw; left:9cqw; font:600 4.2cqw/1 var(--text); }
.viewfinder{ position:absolute; left:50%; top:46%; width:66cqw; aspect-ratio:1; transform:translate(-50%,-50%); }
.viewfinder i{ position:absolute; width:16cqw; height:16cqw; border:1.1cqw solid var(--pink); transition:border-color .35s; }
.viewfinder i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:3cqw; }
.viewfinder i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:3cqw; }
.viewfinder i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:3cqw; }
.viewfinder i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:3cqw; }
.vf-target{ position:absolute; inset:12%; }
.vf-target svg{ display:block; width:100%; height:100%; }
.sheet{ position:absolute; left:4cqw; right:4cqw; bottom:4cqw; padding:6cqw; border-radius:7cqw; background:#fff; color:var(--deep); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.sheet small{ display:block; font:500 3.6cqw/1.2 var(--text); color:var(--slate); }
.sheet b{ display:block; margin-top:1.6cqw; font:600 5.6cqw/1.15 var(--text); }
.sheet .safe{ display:flex; align-items:center; gap:2cqw; margin-top:3.4cqw; font:500 3.6cqw/1.25 var(--text); }
.sheet .safe svg{ width:5cqw; height:5cqw; flex:none; }
.sheet .open{ margin-top:4.4cqw; height:11cqw; border-radius:3.4cqw; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; font:600 4cqw/1 var(--text); }

/* live state (hero.js, motion allowed) */
.hero-live .hero-qr-static{ visibility:hidden; }
.hero-live .viewfinder i{ border-color:#fff; }
.hero-live .found .viewfinder i{ border-color:var(--pink); }
.hero-live .sheet{ transform:translateY(120%); }
.hero-live .found .sheet{ transform:none; }

@media (min-width:992px){
  .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:100vh; min-height:100svh; }
  .hero-copy{ padding:calc(var(--nav-h) + 40px) 0 40px; }
  .hero-visual{ padding:calc(var(--nav-h) + 40px) 0 60px; }
  .hero .phone{ --w:300px; }
  /* short desktop scroll sequence: 140svh in total */
  .hero-scroll .hero{ height:140vh; height:140svh; }
  .hero-scroll .hero-stage{ position:sticky; top:0; height:100vh; height:100svh; }
  .hero-scroll .hero-inner{ height:100%; min-height:0; }
  .hero-scroll .hero-visual{ height:100%; padding:0; }
  .hero-scroll .hint{ display:flex; }
  .hero-scroll .qr-home{ display:block; position:absolute; left:50%; top:calc(50% + var(--nav-h) / 2); width:min(400px, 30vw, 52vh); aspect-ratio:1; transform:translate(-50%,-50%); }
  .hero-scroll .hero-phone{ position:absolute; left:50%; top:50%; --w:min(300px, calc((100vh - var(--nav-h) - 80px) * .46));
    transform:translate(-50%, calc(-50% + var(--nav-h) / 2 + var(--rise, 105svh))); will-change:transform; }
}

/* plans */
.plans-grid{ display:grid; gap:16px; margin-top:36px; }
@media (min-width:768px){ .plans-grid{ grid-template-columns:1fr 1fr; } }
.plan{ border:1px solid var(--line); border-radius:20px; padding:28px; }
.plan h3{ font-size:22px; }
.plan-pro{ background:var(--deep); border-color:rgba(255,28,141,.45); }
.plans-foot{ margin-top:20px; color:var(--peri); max-width:60ch; }
.plan-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.plan-tag{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--peri); }
.plan-tag i{ width:10px; height:10px; display:block; background:var(--pink); }
.plan-sub{ margin-top:8px; color:var(--peri); font-size:16px; }
@media (min-width:992px){ .plan{ padding:36px; } .plan h3{ font-size:26px; } }

/* studio fallback code (no JS) */
.studio .studio-static{ display:block; width:100%; height:auto; border-radius:14px; }

/* faq grid */
.faq-grid{ display:grid; gap:32px; }
.faq-more{ margin-top:20px; }
.faq-more a{ color:var(--blue); font-weight:600; }
@media (min-width:992px){ .faq-grid{ grid-template-columns:.8fr 1.2fr; gap:80px; } }

/* final CTA with the store code (desktop only) */
.cta-grid{ display:grid; gap:32px; align-items:center; }
.cta-qr{ display:none; }
@media (min-width:992px){ .cta-grid{ grid-template-columns:1fr auto; gap:80px; } .cta-qr{ display:block; } }

/* proof strip (concept lines 207-213) */
/* ---------- proof strip ---------- */
.proof{ background:var(--indigo); padding:56px 0 64px; }
.proof ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.proof li{ background:var(--indigo); padding:22px 18px 24px; }
.proof strong{ display:block; font:600 clamp(22px, 5.8vw, 40px)/1 var(--display); letter-spacing:-.03em; white-space:nowrap; }
.proof span{ display:block; margin-top:10px; font-size:15px; line-height:1.35; color:var(--peri); }
@media (min-width:992px){ .proof ul{ grid-template-columns:repeat(4,1fr); } .proof li{ padding:32px 28px; } }

/* feature story (concept lines 216-221 and 231-232) */
.story{ background:var(--indigo); padding:24px 0 40px; }
.story-head h2{ font-size:clamp(26px, 6.6vw, 48px); line-height:1.08; max-width:15ch; }
.story-grid{ margin-top:40px; }
.chapter{ padding:36px 0 56px; border-top:1px solid var(--line); }
.chapter h3{ font-size:clamp(23px, 5.8vw, 34px); line-height:1.12; max-width:16ch; }
.chapter p{ margin-top:16px; color:var(--peri); max-width:42ch; }
.chapter .phone{ --w:min(250px, 66vw); margin:36px auto 0; }
.sticky-phone{ display:none; }

@media (min-width:992px){
  .story{ padding:40px 0 80px; }
  .story-grid{ display:grid; grid-template-columns:1fr 420px; gap:80px; margin-top:24px; }
  .chapter{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:64px 0; border-top:0; }
  .chapter .phone{ display:none; }
  .sticky-phone{ display:flex; flex-direction:column; align-items:center; position:sticky; top:calc(var(--nav-h) + 4vh); height:calc(100vh - var(--nav-h) - 8vh); justify-content:center; }
  .sticky-phone .phone{ --w:min(320px, calc((100vh - var(--nav-h) - 8vh - 90px) * .46)); }
  .sticky-phone .screen > div{ position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .sticky-phone .screen > div.is-on{ opacity:1; transform:none; }
  .rail{ display:flex; align-items:center; gap:14px; margin-top:28px; font-size:15px; color:var(--peri); }
  .rail ol{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
  .rail li{ width:12px; height:12px; border:1.5px solid var(--slate); transition:background .3s, border-color .3s; }
  .rail li.is-on{ background:var(--pink); border-color:var(--pink); }
  .rail li.is-done{ background:var(--peri); border-color:var(--peri); }
}

/* ---------- generator teaser ---------- */
.gen{ background:var(--mist); color:var(--deep); padding:64px 0 80px; }
.gen-grid{ display:grid; gap:40px; align-items:center; }
.gen h2{ font-size:clamp(26px, 6.6vw, 46px); line-height:1.08; max-width:16ch; }
.gen p{ margin-top:16px; color:var(--slate); max-width:42ch; }
.gen .btn{ margin-top:28px; }
.gen .btn:hover{ background:var(--deep); }
.types{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; max-width:44ch; }
.types li{ padding:6px 12px; border-radius:8px; background:#fff; border:1px solid #DDE0F2; font-size:15px; color:var(--deep); }
.studio{ background:#fff; border-radius:28px; padding:22px; box-shadow:0 1px 0 #DDE0F2, 0 30px 60px -40px rgba(37,40,81,.45); max-width:440px; width:100%; justify-self:center; }
.studio canvas{ display:block; width:100%; aspect-ratio:1; border-radius:14px; background:#fff; }
.controls{ margin-top:18px; display:grid; gap:14px; }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--mist); border-radius:12px; padding:4px; }
.seg button{ min-height:40px; border:0; background:transparent; border-radius:9px; font:500 15px/1 var(--text); color:var(--slate); cursor:pointer; }
.seg button[aria-pressed="true"]{ background:#fff; color:var(--deep); font-weight:600; box-shadow:0 1px 3px rgba(37,40,81,.15); }
.swatches{ display:flex; gap:10px; align-items:center; }
.swatches button{ width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #DDE0F2; cursor:pointer; }
.swatches button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--deep); }
.swatches span{ margin-left:auto; font-size:14px; color:var(--slate); }
.studio-cap{ margin-top:14px; font-size:14px; line-height:1.45; color:var(--slate); }
@media (min-width:992px){ .gen{ padding:110px 0 120px; } .gen-grid{ grid-template-columns:1fr 440px; gap:96px; } }