/* Homepage only. Colours come from style.css (light/dark tokens). */
.home{--accent:#8A5A12;--paper:#FEE4BD}
@media (prefers-color-scheme:dark){.home{--accent:#D4AF57;--paper:#2A2418}}
.home section,.hero{max-width:1040px;margin:0 auto;padding:56px 16px}
.home h2{font-size:1.7rem;line-height:1.2;margin:0 0 .6em}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding-top:40px}
.brand{display:flex;align-items:center;gap:10px;font:600 1rem/1 system-ui,sans-serif;margin:0 0 24px}
.brand img{border-radius:10px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin:0 0 .4em}
.lede{font-size:1.15rem;color:var(--muted);margin:0 0 28px;max-width:34em}
.hero{grid-template-columns:1fr 1fr!important}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.3rem)}
.hero .badges img{height:56px}
.hero-proof{display:block;margin-top:26px;padding:12px 16px;border-left:3px solid var(--accent);background:var(--card);
  border-radius:0 10px 10px 0;color:var(--ink);text-decoration:none;font:1.05rem/1.4 system-ui,sans-serif;max-width:30em}
.hero-proof b{color:var(--accent)}
.hero-proof span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.phone{margin:0;justify-self:center;text-align:center}
.device{position:relative;padding:11px;border-radius:50px;background:#1C1B19;
  box-shadow:0 0 0 2px #3A3833,0 30px 70px rgba(40,25,5,.35),inset 0 0 0 1px #000}
.device::before{content:"";position:absolute;top:21px;left:50%;transform:translateX(-50%);width:86px;height:24px;
  border-radius:14px;background:#000;z-index:5}
.device::after{content:"";position:absolute;right:-4px;top:150px;width:3px;height:70px;border-radius:0 3px 3px 0;
  background:#3A3833;box-shadow:-310px -40px 0 #3A3833,-310px 40px 0 #3A3833}
.screen{position:relative;width:280px;aspect-ratio:270/587;border-radius:40px;overflow:hidden;background:var(--card)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:shot 12s infinite both}
.screen img:nth-child(2),.phone figcaption span:nth-child(2){animation-delay:4s}
.screen img:nth-child(3),.phone figcaption span:nth-child(3){animation-delay:8s}
@keyframes shot{0%{opacity:0;transform:translateY(14px)}5%{opacity:1;transform:none}31%{opacity:1;transform:none}
  36%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
.phone figcaption{position:relative;height:1.4em;margin-top:16px;font:600 .95rem system-ui,sans-serif;color:var(--muted)}
.phone figcaption span{position:absolute;inset:0;opacity:0;animation:cap 12s infinite both}
@keyframes cap{0%{opacity:0}5%{opacity:1}31%{opacity:1}36%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .screen img,.phone figcaption span{animation:none}
  .screen img:first-child,.phone figcaption span:first-child{opacity:1}}

.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badges img{height:48px;width:auto;display:block}
.badges .soon{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default}
.badges .soon img{filter:grayscale(1);opacity:.4}
.badges .soon-label{font:600 .72rem/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.badges{align-items:flex-start}

.proof{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 16px!important}
@media (min-width:1072px){.proof{margin:0 auto!important}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 24px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat b{display:block;font-size:1.6rem;line-height:1.1;color:var(--accent)}
.stat span{font:.85rem/1.3 system-ui,sans-serif;color:var(--muted)}
.chart{width:100%;height:auto;display:block}
.chart text{font:12px system-ui,sans-serif;fill:var(--muted)}
.chart .g{stroke:var(--line);stroke-width:1}
.chart .l{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round}
.chart .a{fill:var(--accent);opacity:.1}
.label{font:.95rem/1.5 system-ui,sans-serif;color:var(--ink);background:var(--bg);border-left:3px solid var(--accent);
  padding:12px 14px;margin:20px 0 0;border-radius:0 8px 8px 0}

.how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.how li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.how li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:var(--card);font:700 .95rem system-ui,sans-serif;margin-bottom:12px}
.how b{display:block;margin-bottom:4px}


.open{background:var(--paper);border-radius:16px;margin:0 16px!important;text-align:center}
@media (min-width:1072px){.open{margin:0 auto!important}}
.open p{max-width:40em;margin:0 auto;font-size:1.1rem}
.cta{text-align:center}.cta .badges{justify-content:center}.cta p{color:var(--muted)}
main.small{padding-top:0}
.navlink{margin-left:auto;font:600 .9rem system-ui,sans-serif}


@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:28px;text-align:left}
  .hero{min-height:0;grid-template-columns:1fr!important}
  .hero{gap:14px!important;padding-top:20px!important}
  .hero-text{display:contents}
  .brand{order:0;margin:0}.hero h1{order:1;margin:0;font-size:2.1rem}.phone{order:2}.hero .badges{order:3;justify-content:center}
  .hero-proof{order:4;margin-top:4px}.lede{order:5;margin:0;font-size:1rem}
  .screen{width:150px;border-radius:24px}
  .device{padding:7px;border-radius:31px}
  .device::before{top:13px;width:46px;height:13px;border-radius:8px}
  .device::after{top:80px;height:40px;box-shadow:-169px -22px 0 #3A3833,-169px 22px 0 #3A3833}
  .phone figcaption{margin-top:10px;font-size:.85rem}
  .hero .badges img{height:48px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .how ol{grid-template-columns:1fr}
  .stat b{font-size:1.25rem}
  .chart text{font-size:19px}
  .home section,.hero{padding:40px 16px}
}