:root{--bg:#050505;--bg-alt:#070707;--glass:rgba(255,255,255,.03);--glass-border:rgba(255,255,255,.08);--glass-hover:rgba(255,255,255,.06);--text:#fff;--muted:rgba(255,255,255,.65);--accent:#d4af37;--accent-strong:#f9e2af;--accent-secondary:#f7c14c;--line:rgba(212,175,55,.2);--shadow:0 30px 60px rgba(0,0,0,.8);--radius-xl:32px;--card:rgba(255,255,255,.03)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,Inter,sans-serif;background:#050505;color:var(--text);line-height:1.7;overflow-x:hidden;min-height:100vh}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body:before{background:radial-gradient(circle at 75% 15%,rgba(212,175,55,.18),transparent 50%),radial-gradient(circle at 10% 80%,rgba(249,226,175,.12),transparent 55%)}
body:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath fill='rgba(255,255,255,0.03)' d='M0 158h2v2H0zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zM0 118h2v2H0zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zM0 78h2v2H0zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zM0 38h2v2H0zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2z'%3E%3C/svg%3E") repeat}
a{color:inherit;text-decoration:none;transition:all .3s}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.nav{position:sticky;top:0;background:rgba(5,5,5,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:1000}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{font-weight:800;font-size:24px;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.links a{display:none}
.links a.lang-toggle{display:inline-flex;padding:8px 20px;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);font-size:14px;font-weight:700;letter-spacing:.5px}
.links a.lang-toggle:hover{background:var(--accent);color:#050505;transform:translateY(-1px);box-shadow:0 5px 18px rgba(212,175,55,.35)}

.hero{padding:140px 0 110px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center}
.hero-copy .eyebrow{font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.h-title{font-size:clamp(36px,5vw,48px);line-height:1.04;margin-bottom:20px;font-weight:900;letter-spacing:-1px;background:linear-gradient(120deg,#f9e2af,#d4af37);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;display:inline-block;max-width:100%}
@media(max-width:600px){.h-title{white-space:normal}}
.hero .h-sub{font-size:21px;color:var(--muted);margin-bottom:32px;max-width:560px}
.glass-panel{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:transform .5s ease,background .5s ease}
.glass-panel:hover{background:var(--glass-hover);transform:translateY(-6px)}
.hero-card h3{font-size:26px;margin:12px 0 18px}
.hero-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px;color:var(--muted)}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--glass-border);font-size:13px;color:var(--accent-secondary);font-weight:600;background:rgba(103,167,255,.1)}
.story-meta{list-style:none;display:grid;gap:10px;margin:20px 0}
.story-meta li{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}
.story-text{font-size:15px;color:var(--text);background:rgba(255,255,255,.04);border-radius:18px;padding:16px 20px;line-height:1.8}
.story-tag{margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-secondary)}

.trust-badges{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.trust-badges .badge{padding:8px 18px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--muted);background:rgba(255,255,255,.05)}

.cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.app-store-badge{display:inline-flex;align-items:center;gap:14px;padding:14px 26px;border-radius:18px;background:#050608;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 40px rgba(0,0,0,.45);min-width:230px}
.app-store-badge small{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.app-store-badge strong{font-size:22px;line-height:1;font-weight:700}
.app-store-badge svg{width:26px;height:26px}
.app-store-badge:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.ghost-link{font-weight:600;color:var(--accent);position:relative;padding-right:26px}
.ghost-link:after{content:"→";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .3s}
.ghost-link:hover:after{transform:translate(6px,-50%)}

.section{padding:96px 0}
.section-title{font-size:38px;font-weight:900;text-align:center;letter-spacing:-.8px;margin-bottom:16px}
.subheading{text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.32em;font-size:12px;margin-bottom:14px}
.section p.section-lead{text-align:center;max-width:760px;margin:0 auto 42px;color:var(--muted)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.feature-card{padding:32px;border-radius:var(--radius-xl);border:1px solid var(--glass-border);background:linear-gradient(145deg,rgba(8,8,8,.95),rgba(5,5,5,.85));box-shadow:var(--shadow);position:relative;overflow:hidden}
.feature-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(212,175,55,.08),rgba(249,226,175,.05));opacity:0;transition:opacity .4s}
.feature-card:hover:before{opacity:1}
.feature-card .icon-chip{display:inline-flex;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:var(--accent);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.feature-card h3{font-size:24px;margin-bottom:12px}
.feature-card p{color:var(--muted);margin-bottom:16px}
.feature-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--text);font-size:15px}
.feature-card ul li{display:flex;gap:10px}
.feature-card ul li:before{content:"•";color:var(--accent);margin-top:-2px}

.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:36px}
.insight-card{padding:30px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(8,8,8,.95),rgba(15,15,15,.7));box-shadow:0 25px 45px rgba(0,0,0,.65);position:relative;overflow:hidden}
.insight-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at top,var(--accent-secondary) 0%,transparent 65%);opacity:.15}
.insight-card h3{font-size:22px;margin-bottom:10px}
.insight-card p{color:var(--muted);font-size:15px}
.insight-card .metric{display:flex;align-items:center;gap:16px;margin:22px 0}
.insight-card .metric strong{font-size:30px;font-weight:800;color:var(--accent)}
.insight-card .metric span{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.mini-chart{height:90px;margin-bottom:12px}
.mini-chart svg{width:100%;height:100%}
.mini-chart path{stroke:var(--accent-secondary);stroke-width:3;fill:none;stroke-linecap:round}
.mini-chart .fill{fill:rgba(212,175,55,.12)}
.mini-chart circle{stroke:var(--accent);stroke-width:6;fill:none}
.mini-chart rect{fill:rgba(247,193,76,.25)}
.mini-chart line{stroke:var(--accent-secondary);stroke-width:4}

/* Legacy feature charts */
.feature-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.feature-chart{display:flex;flex-direction:column;gap:24px;background:var(--card,rgba(255,255,255,.03));border:1px solid var(--line);padding:40px;border-radius:32px;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.feature-chart:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at top,var(--accent-light,rgba(212,175,55,.4)) 0%,transparent 60%);opacity:0;transition:opacity .4s}
.feature-chart:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.feature-chart:hover:before{opacity:.35}
.feature-chart h3{font-size:26px;color:var(--accent);font-weight:800}
.feature-chart .feature-desc{font-size:16px;color:var(--muted);line-height:1.7}
.chart-wrap{margin:15px 0;background:rgba(0,0,0,.45);border-radius:24px;padding:30px;border:1px solid rgba(212,175,55,.15);min-height:180px;display:flex;align-items:center;justify-content:center}
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.meta{display:flex;flex-wrap:nowrap;gap:12px;margin-top:auto;justify-content:space-between}
.meta span{flex:1;text-align:center}
@media(max-width:600px){
  .meta{flex-wrap:wrap}
  .meta span{flex:none;text-align:left}
}
.meta span{padding:7px 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted);background:rgba(212,175,55,.08);font-weight:500;white-space:nowrap}
.feature-chart:hover .meta span{border-color:var(--accent);color:var(--accent)}
.bar-track{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;width:100%;margin:12px 0}
.bar-fill{height:100%;background:linear-gradient(90deg,#d4af37,#f9e2af);width:0;transition:width 1.8s cubic-bezier(.34,1.56,.64,1)}
.reveal.active .bar-fill{width:var(--target-width)}
.animate-path{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.5s cubic-bezier(.4,0,.2,1)}
.reveal.active .animate-path{stroke-dashoffset:0}
.val-count{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

.story-card{display:grid;gap:24px;margin-top:40px}
.story-card .glass-panel{padding:36px}
.story-card h3{font-size:28px;margin-bottom:12px}
.story-card .story-example{font-size:17px;color:var(--muted)}

.link-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:36px}
.link-grid a{font-size:18px;font-weight:700;color:var(--accent);position:relative;padding-bottom:4px}
.link-grid a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.link-grid a:hover:after{transform:scaleX(1)}

.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:48px}
.compare-card{border-radius:var(--radius-xl);border:1px solid var(--glass-border);padding:32px;background:rgba(6,18,35,.85);position:relative}
.compare-card.mine{border-color:rgba(127,224,199,.35);box-shadow:0 30px 60px rgba(12,62,53,.45)}
.compare-card h3{font-size:22px;margin-bottom:18px}
.compare-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--muted)}
.compare-card ul li{display:flex;gap:10px}
.compare-card ul li:before{content:"";width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--accent-secondary)}
.compare-card.other ul li:before{background:#ff6b6b}

.legal-card{text-align:center;align-items:center}
.legal-card .btn{justify-content:center}

.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;border-radius:18px;font-weight:700;font-size:15px;border:1px solid transparent;transition:all .3s}
.btn.primary{background:var(--accent);color:#050505;box-shadow:0 20px 40px rgba(212,175,55,.3)}
.btn.primary:hover{transform:translateY(-3px)}
.btn.secondary{border-color:var(--glass-border);color:var(--text)}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent)}

.footer{padding:80px 0;border-top:1px solid var(--glass-border);color:var(--muted);text-align:center;font-size:15px;margin-top:40px}
.footer-links{margin-bottom:24px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.footer-links a:hover{color:var(--accent)}

.doc{padding:60px 0 120px}
.doc h1{font-size:48px;margin-bottom:30px;letter-spacing:-1.5px}
.doc-section{margin-top:40px}
.doc-back{margin:20px 0 30px}
.doc-back a{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid var(--glass-border);color:var(--accent);font-weight:600;font-size:14px;text-transform:none}
.doc-back a:hover{border-color:var(--accent);color:var(--text)}

/* Animation */
.reveal{opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal.active{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .h-title{font-size:40px}
  .hero{padding-top:120px}
  .glass-panel{padding:28px}
  .cta-row{flex-direction:column;align-items:flex-start}
  .app-store-badge{width:100%;justify-content:center}
}

@media(max-width:600px){
  .hero-copy .eyebrow{letter-spacing:.3em}
  .section{padding:80px 0}
  .feature-card{padding:24px}
}