/* Home page only. Base tokens, nav, store button, footer and dock come from site.css. */

/* ---------- Hero ---------- */
.h-hero{position:relative;padding:64px 0 40px;overflow:hidden;isolation:isolate}
.h-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 70% at 78% 45%,rgba(90,220,240,.13),transparent 70%),
    linear-gradient(transparent 0 calc(100% - 1px),rgba(255,255,255,.035) 0) 0 0/100% 48px,
    linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.035) 0) 0 0/48px 100%;
  mask-image:linear-gradient(#000 60%,transparent);-webkit-mask-image:linear-gradient(#000 60%,transparent)}
.h-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.h-hero h1{font-size:clamp(2.6rem,5.8vw,4.5rem);line-height:1.02;margin-bottom:24px}
.h-hero .lede{margin-bottom:34px;font-size:1.22rem}
.get{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.qr{display:flex;align-items:center;gap:14px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:14px;background:rgba(21,33,44,.6)}
.qr img{width:64px;height:64px;border-radius:6px}
.qr span{font-size:.9rem;line-height:1.35;color:var(--muted)}
.qr b{display:block;color:var(--white);font-weight:600}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;color:var(--muted);font-size:.95rem;list-style:none}
.trust li{display:flex;align-items:center;gap:9px}
.trust svg{width:18px;height:18px;color:var(--edge);flex:none}

/* Device composition */
.devices{position:relative;height:620px;--rx:0deg;--ry:0deg;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.glow-cube{position:absolute;right:4%;top:6%;width:300px;height:300px;perspective:900px;opacity:.9}
.glow-cube .cube{--s:170px;margin:65px auto 0;animation-duration:34s}
.phone{position:absolute;width:272px;aspect-ratio:9/19.3;border-radius:46px;padding:11px;background:linear-gradient(145deg,#4a5866,#1b242d 40%,#0b1117);box-shadow:0 0 0 1px #5d6b78 inset,0 40px 80px rgba(0,0,0,.55),0 0 60px rgba(90,220,240,.12)}
.phone .screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#0c151d;display:flex;flex-direction:column}
.phone .screen::before{content:"";position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#000;z-index:2}
.p-front{left:6%;top:30px;z-index:2;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.p-back{right:0;top:56px;transform:rotate(6deg) scale(.9);transform-origin:bottom left;z-index:1;filter:brightness(.82);animation:riseBack 1.1s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@keyframes riseBack{from{opacity:0;transform:rotate(10deg) scale(.88) translateY(50px)}}

/* App screen contents (rendered in HTML, swap for real screenshots when ready) */
.app{padding:46px 16px 0;flex:1;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--steel)}
.app-top{display:flex;justify-content:space-between;align-items:center}
.app-top b{font-family:var(--display);font-size:19px;color:var(--white);font-weight:600}
.app-seg{display:flex;background:#16222d;border-radius:8px;padding:2px;font-size:10px}
.app-seg i{font-style:normal;padding:3px 8px;border-radius:6px;color:var(--muted)}
.app-seg i.on{background:var(--edge);color:var(--ink);font-weight:600}
.app-field{background:#16222d;border:1px solid #233241;border-radius:10px;padding:7px 10px;display:flex;justify-content:space-between;align-items:baseline}
.app-field span{color:var(--muted);font-size:10.5px}
.app-field b{color:var(--white);font-weight:500;font-variant-numeric:tabular-nums;font-size:13px}
.app-field b small{color:var(--muted);font-weight:400;font-size:10px;margin-left:3px}
.app-result{margin-top:4px;border-radius:14px;padding:12px;background:linear-gradient(160deg,#143041,#0f1f2b);border:1px solid rgba(90,220,240,.35)}
.app-result span{display:block;color:var(--muted);font-size:10.5px}
.app-result strong{display:block;font-family:var(--display);font-weight:600;color:var(--white);font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums;margin-bottom:6px}
.app-result strong small{font-family:var(--body);font-weight:500;font-size:11px;color:var(--edge);margin-left:4px}
.app-result strong:last-child{margin-bottom:0}
.app-table{border:1px solid #233241;border-radius:10px;overflow:hidden}
.app-table div{display:flex;justify-content:space-between;padding:7px 10px;border-bottom:1px solid #1f2d3a}
.app-table div:last-child{border-bottom:0}
.app-table span{color:var(--muted);font-size:10.5px}
.app-table b{color:var(--white);font-weight:500;font-variant-numeric:tabular-nums}
.app-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 18px;border-top:1px solid #1d2b37;background:#0f1922}
.app-tabs i{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:3px;color:#6c7a88;font-size:8.5px}
.app-tabs i::before{content:"";width:16px;height:16px;border-radius:5px;border:1.5px solid currentColor}
.app-tabs i.on{color:var(--edge)}

/* ---------- Before / after ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.vs > div{padding:36px}
.vs h3{margin-bottom:18px;font-size:1.3rem}
.vs ul{list-style:none;display:grid;gap:14px}
.vs li{display:flex;gap:12px;align-items:flex-start}
.vs li svg{width:20px;height:20px;flex:none;margin-top:3px}
.vs .old{background:var(--ink);color:var(--muted)}
.vs .old h3{color:var(--steel)}
.vs .old svg{color:#6d7b89}
.vs .new{background:linear-gradient(160deg,#122a38,#0f1d28);border-left:1px solid var(--line)}
.vs .new svg{color:var(--edge)}
.vs .new li{color:var(--steel)}
.vs-time{display:flex;align-items:baseline;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.vs-time b{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.vs .old .vs-time b{color:var(--muted)}
.vs-time span{font-size:.95rem}

/* ---------- Feature grid (varied sizes, each with a real piece of the app) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.tile h3{font-size:1.25rem;margin-bottom:6px}
.tile p{color:var(--muted);font-size:1rem}
.t-feeds{grid-column:span 4;flex-direction:row;align-items:center;gap:28px}
.t-feeds > div:first-child{flex:1}
.t-threads{grid-column:span 2}
.t-mrr,.t-cool,.t-units{grid-column:span 2}
.t-hist{grid-column:span 6;flex-direction:row;align-items:center;gap:28px}
.t-hist > div:first-child{flex:1}
.mini{background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px;font-variant-numeric:tabular-nums}
.mini-big{display:grid;gap:12px;min-width:220px}
.mini-big span{display:block;color:var(--muted);font-size:.85rem}
.mini-big b{font-family:var(--display);font-weight:600;color:var(--white);font-size:2.1rem;line-height:1}
.mini-big b small{font-family:var(--body);font-size:.85rem;color:var(--edge);margin-left:6px;font-weight:500}
.mini-rows div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.mini-rows div:last-child{border-bottom:0}
.mini-rows span{color:var(--muted)}
.mini-rows b{color:var(--white);font-weight:500}
.gauge{width:100%;max-width:200px;margin:0 auto}
.hist{display:grid;gap:8px;min-width:min(420px,100%)}
.hist div{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.hist span{color:var(--steel)}
.hist small{display:block;color:var(--muted);font-size:.82rem}
.hist b{font-family:var(--display);color:var(--white);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hist svg{width:16px;height:16px;color:var(--signal);flex:none}

/* ---------- Maker ---------- */
.maker-short{max-width:44em}
.maker-short p{color:var(--muted);font-size:1.15rem;max-width:40em}
.maker-short .quote{color:var(--white);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:14px}

/* Live phone updates */
.app em{font-style:normal}
.app-field.hit{animation:hit 1s ease-out}
.app-result em.hit{animation:flash 1s ease-out}
@keyframes hit{0%{border-color:var(--edge);background:#17323f}100%{border-color:#233241;background:#16222d}}
@keyframes flash{0%{color:var(--edge);text-shadow:0 0 14px rgba(90,220,240,.7)}100%{color:var(--white);text-shadow:none}}

/* Units tile */
.units-tile{display:grid;gap:10px;justify-items:start}
.units-val{display:flex;align-items:baseline;gap:8px;font-family:var(--display);color:var(--white);font-size:1.7rem;line-height:1}
.units-val small{font-family:var(--body);font-size:.9rem;color:var(--edge)}
.switch{margin-top:6px;font:inherit;display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 0}
.switch i{width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:transform .2s}
.switch[aria-checked="true"] i{background:var(--edge)}
.switch[aria-checked="true"] i::after{transform:translateX(20px);background:var(--ink)}
.switch[aria-checked="false"] span:first-child,.switch[aria-checked="true"] span:last-child{color:var(--white)}

/* ---------- Final CTA ---------- */
.end{padding:100px 0;background:radial-gradient(60% 80% at 50% 100%,rgba(90,220,240,.12),transparent 70%),var(--panel);border-top:1px solid var(--line)}
.end .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.end h2{margin-bottom:16px}
.end p{color:var(--muted);font-size:1.15rem;max-width:30em;margin-bottom:30px}
.end-icon{display:grid;place-items:center}
.end-icon img{width:180px;height:180px;border-radius:40px;box-shadow:0 0 0 1px rgba(90,220,240,.3),0 0 90px rgba(90,220,240,.35)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .h-hero{padding:36px 0 24px}
  .h-hero .wrap{grid-template-columns:1fr;gap:0}
  .devices{height:520px;max-width:520px;width:100%;margin:28px auto 0}
  .bento{grid-template-columns:1fr 1fr}
  .t-feeds,.t-hist{grid-column:span 2}
  .t-threads,.t-mrr,.t-cool,.t-units{grid-column:span 1}
  .end .wrap{grid-template-columns:1fr;text-align:center}
  .end p{margin-left:auto;margin-right:auto}
  .end .get{justify-content:center}
  .end-icon{order:-1}
  .end-icon img{width:120px;height:120px;border-radius:28px}
}
@media (max-width:640px){
  .qr{display:none}
  .devices{height:470px}
  .phone{width:220px;border-radius:38px;padding:9px}
  .phone .screen{border-radius:30px}
  .p-front{left:0}
  .glow-cube{right:-8%;top:0;width:220px;height:220px}
  .glow-cube .cube{--s:120px;margin-top:50px}
  .app{padding:40px 12px 0;gap:8px;font-size:11px}
  .app-result strong{font-size:24px}
  .app-top b{font-size:15px}
  .vs{grid-template-columns:1fr}
  .vs .new{border-left:0;border-top:1px solid var(--line)}
  .vs > div{padding:26px 22px}
  .bento{grid-template-columns:1fr}
  .t-feeds,.t-hist,.t-threads,.t-mrr,.t-cool,.t-units{grid-column:span 1}
  .t-feeds,.t-hist{flex-direction:column;align-items:stretch}
  .tile{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .p-front,.p-back,.app-field.hit,.app-result em.hit{animation:none}
  .devices{transition:none}
}