/* ═══════════════════════════════════════════════════════════
   TRAKVEN — round 4 polish
   hero cascade · zoom lightbox · thin frames · responsiveness · perf
   ═══════════════════════════════════════════════════════════ */

/* ── PERF: lighter ambient graphics ── */
.grain{opacity:.32}
.hero .aurora-blob{filter:blur(64px)}
@media(max-width:760px){ .grain{display:none} .aurora-blob{filter:blur(48px)!important} }

/* ── HERO CASCADE (3 phones incl. timeline + anchored badges) ── */
.hero-cascade{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center}
.hc-aura{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:540px;height:540px;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 32% 36%,rgba(124,58,237,.20),transparent 55%),
    radial-gradient(circle at 70% 40%,rgba(14,165,233,.18),transparent 55%),
    radial-gradient(circle at 52% 72%,rgba(249,115,22,.16),transparent 58%);
  filter:blur(20px);animation:hcAura 14s ease-in-out infinite}
@keyframes hcAura{0%,100%{transform:translate(-50%,-54%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(8deg)}}
.hc-floor{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:380px;height:64px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,20,60,.26),transparent 70%);filter:blur(20px);z-index:0}
.hc-phone{position:absolute;will-change:transform}
.hero-cascade .shot-device{width:240px;border-radius:42px;box-shadow:0 40px 80px -24px rgba(20,16,40,.55),0 14px 34px -14px rgba(20,16,40,.42)}
.hero-cascade .shot-device img{animation:none}
.hc-front{z-index:3;transform:translateX(-6px);animation:hcFrontFloat 10s cubic-bezier(.45,0,.55,1) infinite}
.hc-right{z-index:2;transform:translate(156px,38px) rotate(7deg) scale(.84);animation:hcRightFloat 10s cubic-bezier(.45,0,.55,1) infinite}
.hc-left{z-index:1;transform:translate(-156px,24px) rotate(-7deg) scale(.82);opacity:.97;animation:hcLeftFloat 10s cubic-bezier(.45,0,.55,1) infinite}
.hc-right .shot-device img{animation-delay:.5s}
.hc-left .shot-device img{animation-delay:.95s}
@keyframes hcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hcFrontFloat{0%,100%{transform:translate(-6px,0)}50%{transform:translate(-6px,-4px)}}
@keyframes hcRightFloat{0%,100%{transform:translate(156px,38px) rotate(7deg) scale(.84)}50%{transform:translate(156px,34px) rotate(7deg) scale(.84)}}
@keyframes hcLeftFloat{0%,100%{transform:translate(-156px,24px) rotate(-7deg) scale(.82)}50%{transform:translate(-156px,20px) rotate(-7deg) scale(.82)}}

.hc-pill{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:4;
  font-size:10.5px;font-weight:800;letter-spacing:.2px;color:#fff;padding:5px 12px;border-radius:100px}
.hc-pill-ov{background:linear-gradient(135deg,#7C3AED,#9333EA);box-shadow:0 8px 20px rgba(124,58,237,.45)}
.hc-pill-tl{background:linear-gradient(135deg,#7C3AED,#6D28D9);box-shadow:0 8px 20px rgba(124,58,237,.4)}
.hc-pill-hb{background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 8px 20px rgba(16,185,129,.4)}

.hc-badge{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);
  border-radius:18px;padding:12px 15px;box-shadow:0 20px 40px -12px rgba(20,16,40,.34);will-change:transform}
.hc-badge b{display:block;font-family:var(--font-head);font-size:13.5px;font-weight:800;letter-spacing:-.2px;line-height:1.1}
.hc-badge small{font-size:10.5px;color:var(--ink-3);font-weight:600}
.hcb-emoji{font-size:24px;filter:drop-shadow(0 3px 6px rgba(249,115,22,.35))}
.hcb-ring{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
  background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 8px 18px rgba(16,185,129,.45)}
.hc-streak{top:4%;left:-2%;animation:hcFloat 6s ease-in-out infinite}
.hc-done{bottom:8%;right:-3%;animation:hcFloat 6.6s ease-in-out infinite .4s}

@media(max-width:1100px){
  .hero-cascade{height:540px;transform:scale(.96)}
}
@media(max-width:760px){
  .hero-cascade{height:480px;transform:scale(.82)}
  .hc-badge{transform:scale(.92)}
}

/* ── ZOOM LIGHTBOX ── */
.shot-device img{cursor:zoom-in}
.zoom-overlay{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,18,.78);backdrop-filter:blur(10px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);cursor:zoom-out;padding:30px}
.zoom-overlay.open{opacity:1;pointer-events:auto}
.zoom-frame{border-radius:38px;background:#15151c;padding:5px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 130px rgba(0,0,0,.6);transform:scale(.88) translateY(14px);transition:transform .4s var(--ease-out);overflow:hidden}
.zoom-overlay.open .zoom-frame{transform:none}
.zoom-frame img{display:block;height:min(86vh,860px);width:auto;border-radius:34px}
.zoom-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);
  font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px}
.zoom-close{position:absolute;top:24px;right:26px;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;
  transition:background .2s}
.zoom-close:hover{background:rgba(255,255,255,.22)}

/* ── RESPONSIVENESS: nav ── */
@media(max-width:760px){
  .nav-cta{margin-left:auto}
  .nav-inner{gap:14px}
}

/* ── RESPONSIVENESS: clean vertical cross-device sync ── */
@media(max-width:760px){
  .sync-flow{grid-template-columns:1fr;gap:0;max-width:330px}
  .sync-beam{transform:none;height:96px;width:100%;margin:6px 0}
  .beam-track{top:0;bottom:0;left:50%;right:auto;width:3px;height:auto;transform:translateX(-50%);
    background:linear-gradient(180deg,#F97316,#0EA5E9 50%,#10B981)}
  .packet{display:none}
  .sync-hub{margin:0 auto}
  .hub-ring{left:-13px;top:-13px}.hub-ring.hr2{left:-28px;top:-28px}
  .sync-status{position:static;transform:none;margin:10px auto 0;width:max-content}
}

@media(prefers-reduced-motion:reduce){.hc-phone,.hc-badge{animation:none!important}}


/* Finance clarity — subtle premium privacy footnote */
.finance-disclaimer{display:flex;align-items:flex-start;gap:9px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--ink-3)}
.finance-disclaimer ion-icon{flex:none;font-size:16px;color:#0EA5E9;margin-top:1px}
.finance-disclaimer b{color:var(--ink-2);font-weight:700}

/* Finance screenshot tab switcher (Tracker / Savings / Analytics) */
.feature-visual.has-fintabs{flex-direction:column;align-items:center;justify-content:flex-start;gap:0}
.fin-tabs{justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.fin-tabs .an-tab{align-self:center}

/* Requested landing-page refinements */
.hero-title{line-height:1.08;overflow:visible}
.title-script{line-height:1.12;padding-bottom:.1em;margin-bottom:-.1em;overflow:visible}
.feature-visual.has-fintabs{gap:30px}
.fin-tabs{margin:0}
.has-fintabs .phone-feature{animation:financeFloat 7s ease-in-out infinite}
@keyframes financeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@media(max-width:760px){
  .feature-visual.has-fintabs{gap:26px}
}
/* Accessibility and legal-page polish */
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#111827;color:#fff;font-weight:700;text-decoration:none}.skip-link:focus{transform:none}:where(a,button,[role="button"]):focus-visible{outline:3px solid #2563eb;outline-offset:4px}.store-badge{cursor:default}.tl-toggle-label{border:0;background:none;font:inherit;cursor:pointer;padding:4px 6px}.legal-page{min-height:100vh;background:#fffaf5;color:var(--ink)}.legal-shell{width:min(860px,calc(100% - 36px));margin:0 auto;padding:130px 0 72px}.legal-shell h1{font-family:var(--font-head);font-size:clamp(38px,7vw,64px);letter-spacing:-.04em;margin:0 0 10px}.legal-shell h2{font-family:var(--font-head);font-size:24px;margin:38px 0 10px}.legal-shell p,.legal-shell li{font-size:16px;line-height:1.75;color:var(--ink-2)}.legal-shell a,.footer a{color:#6d28d9}.legal-meta{margin-bottom:38px;color:var(--ink-3)}

/* ── AI Beta badges & note ── */
.beta-pill{display:inline-flex;align-items:center;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:900;
  letter-spacing:.6px;text-transform:uppercase;color:#7C3AED;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.32)}
.beta-note{display:flex;align-items:flex-start;gap:9px;margin:2px 0 18px;padding:11px 13px;border-radius:12px;
  background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.18);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.beta-note ion-icon{flex:none;font-size:17px;color:#7C3AED;margin-top:1px}
.beta-note b{color:var(--ink)}
.ai-beta-tag{position:absolute;top:14px;right:14px;z-index:5;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:900;
  letter-spacing:.6px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#7C3AED,#9333EA);
  box-shadow:0 8px 20px rgba(124,58,237,.45)}
.nav-ai{display:inline-flex;align-items:center;gap:5px}
.nav-beta{font-size:8.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#7C3AED;
  background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);border-radius:999px;padding:1px 6px}

/* Mobile presentation: keep the explanation before its supporting screenshot. */
@media(max-width:760px){
  .feature-inner,.feature-inner.reverse{display:flex;flex-direction:column;gap:36px}
  .feature-inner .feature-copy{order:1}
  .feature-inner .feature-visual{order:2}
  .feature-copy{text-align:left}
  .feature-copy .feature-tag{margin-left:0;margin-right:0}
  .feature-copy .feature-lead{margin-left:0;margin-right:0}
  .feature-h br{display:none}
}

/* Lightbox controls need strong contrast without the browser's blue tap box. */
.zoom-close{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;z-index:2;
  background:rgba(17,24,39,.88);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.zoom-close:focus{outline:none}
.zoom-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:760px){
  .zoom-overlay{padding:18px}
  .zoom-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:48px;height:48px;
    font-size:29px;line-height:1;background:#111827;color:#fff}
  .zoom-frame img{max-width:calc(100vw - 36px);height:auto;max-height:84vh;object-fit:contain}
  .zoom-hint{display:none}
}

/* On phones the sync illustration stacks vertically, so data travels vertically too. */
@media(max-width:860px){
  .sync-stage{max-width:320px;width:100%;gap:42px;margin:44px auto 48px}
  .fly-layer{display:block;overflow:visible}
  .fly-chip{display:inline-flex;left:50%;top:18%;max-width:190px;overflow:hidden;text-overflow:ellipsis;
    animation-name:flyMobile;animation-duration:var(--dur,4.4s)}
  .fly-chip.rev{animation-name:flyMobileRev}
}
@keyframes flyMobile{
  0%{left:50%;top:20%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  47%,55%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  90%{opacity:1}
  100%{left:50%;top:80%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
}
@keyframes flyMobileRev{
  0%{left:50%;top:80%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  47%,55%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  90%{opacity:1}
  100%{left:50%;top:20%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
}
@media(prefers-reduced-motion:reduce){.fly-layer{display:none!important}}