/* Landing page only (legal pages keep styles.css). Always dark: navy night + orange glow, matches the app brand. */
:root { --navy:#0B1F3A; --navy2:#16345C; --orange:#FF6B1A; --orange2:#FF9A55; --teal:#12A594; --ink:#050B16; --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.10); --txt:#EAF0FA; --mut:#A9B6CC;
  --soft:rgba(255,255,255,.06); --navglass:rgba(5,11,22,.55); --floatbg:rgba(18,30,52,.62); --strong:#fff; --txt2:#dbe5f5; --gridline:rgba(255,255,255,.035); --bg1:#17386a; --bg2:#0e2a52; color-scheme:dark; }
/* Light theme: toggled by the sun/moon button (html[data-theme="light"]), same choice as the web app (localStorage "dhTheme"). */
html[data-theme="light"] { --ink:#F4F6FA; --card:rgba(255,255,255,.78); --line:rgba(11,31,58,.12); --txt:#111A2B; --mut:#4A5568;
  --soft:rgba(11,31,58,.05); --navglass:rgba(244,246,250,.72); --floatbg:rgba(255,255,255,.8); --strong:#0B1F3A; --txt2:#2b3a55; --gridline:rgba(11,31,58,.06); --bg1:#d6e4ff; --bg2:#ffe3d1; color-scheme:light; }
html[data-theme="light"] .stars { display:none; }
html[data-theme="light"] .blob { opacity:.4; }
html[data-theme="light"] .float, html[data-theme="light"] .tile { box-shadow:0 10px 30px rgba(11,31,58,.10); }
html[data-theme="light"] .step .n { color:#fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body.land { margin:0; background: var(--ink); color: var(--txt); font: 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; overflow-x: hidden; }
.land a { color: inherit; }
.land .wrap { width:min(1160px, 100% - 40px); margin-inline:auto; position:relative; }
.land h1,.land h2,.land h3 { color:var(--strong); margin:0 0 .45em; line-height:1.08; letter-spacing:-.03em; font-weight:800; }
.land h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.land h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.land p { margin:0 0 1em; }
.mut { color: var(--mut); }
.grad { background: linear-gradient(100deg,#FF6B1A,#FFB36B 40%,#FF6B1A 80%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }

/* ---------- background: aurora + grid + stars ---------- */
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; background: radial-gradient(1200px 700px at 70% -10%, var(--bg1) 0%, transparent 60%), radial-gradient(900px 600px at 0% 30%, var(--bg2) 0%, transparent 55%), var(--ink); }
.blob { position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; will-change: transform; }
.b1 { width:520px; height:520px; background:#ff6b1a; left:-120px; top:8%; opacity:.28; animation: drift1 22s ease-in-out infinite alternate; }
.b2 { width:620px; height:620px; background:#2a63c9; right:-160px; top:-8%; opacity:.38; animation: drift2 26s ease-in-out infinite alternate; }
.b3 { width:480px; height:480px; background:#12a594; left:35%; top:55%; opacity:.16; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(180px,120px) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-200px,160px) scale(.9); } }
@keyframes drift3 { to { transform: translate(-160px,-120px) scale(1.25); } }
.grid-bg { position:absolute; inset:0; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%); }
.stars { position:absolute; inset:0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 15%, #fff7, transparent), radial-gradient(1px 1px at 40% 70%, #fff6, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff7, transparent), radial-gradient(1px 1px at 10% 85%, #fff6, transparent); animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:.35; } to { opacity:1; } }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:20; backdrop-filter: blur(14px) saturate(1.4); background: var(--navglass); border-bottom:1px solid var(--line); }
.nav .bar { display:flex; align-items:center; gap:22px; min-height:70px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; font-size:1.1rem; }
.logo { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--orange),#D94F00); display:grid; place-items:center; box-shadow:0 0 24px rgba(255,107,26,.55); }
.logo svg { width:24px; height:24px; fill:#fff; }
.nav .links { margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav .links a { text-decoration:none; color:var(--mut); font-weight:600; transition:color .2s; }
.nav .links a:hover { color:var(--strong); }
@media (max-width:760px) { .nav .links a.hide-sm { display:none; } .nav .links { gap:12px; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border-radius:16px; font-weight:700; font-size:1rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition: transform .2s, box-shadow .2s, background .2s; position:relative; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background:linear-gradient(135deg,#FF7A2E,#FF5A0A); color:#fff; box-shadow:0 8px 30px rgba(255,107,26,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:hover { box-shadow:0 12px 44px rgba(255,107,26,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.glass { background:var(--soft); border-color:var(--line); color:var(--strong); backdrop-filter: blur(8px); }
.btn.glass:hover { background:var(--card); }
.btn.small { min-height:42px; padding:0 20px; border-radius:12px; }
.btn svg { width:20px; height:20px; fill:currentColor; }
.land a:focus-visible, .btn:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }

/* ---------- hero ---------- */
.hero { padding: 70px 0 40px; overflow-x: clip; }
.hero .grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:40px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:999px; background:var(--soft); border:1px solid var(--line); font-size:.9rem; color:var(--mut); margin-bottom:22px; }
.dot { width:9px; height:9px; border-radius:50%; background:#2EE59D; box-shadow:0 0 0 0 rgba(46,229,157,.7); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 12px rgba(46,229,157,0); } 100% { box-shadow:0 0 0 0 rgba(46,229,157,0); } }
.hero .lead { font-size:1.22rem; color:var(--mut); max-width:33em; }
.cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; color:var(--mut); font-size:.95rem; }
.trust span::before { content:"✓ "; color:#2EE59D; font-weight:800; }

.stage { position:relative; min-height:460px; perspective:1000px; }
.glowring { position:absolute; left:50%; top:52%; width:440px; height:440px; margin:-220px 0 0 -220px; border-radius:50%; background: radial-gradient(circle, rgba(255,107,26,.5), rgba(255,107,26,0) 65%); filter: blur(12px); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.14); opacity:.7; } }
.car { position:absolute; left:50%; top:50%; width:min(600px, 118%); transform: translate(-50%,-50%); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); animation: hover 6s ease-in-out infinite; }
@keyframes hover { 50% { transform: translate(-50%,-53%); } }
.road { position:absolute; left:-10%; right:-10%; bottom:44px; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); }
.streaks i { position:absolute; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,154,85,.9)); animation: streak 2.4s linear infinite; opacity:0; }
.streaks i:nth-child(1){ top:34%; width:120px; animation-delay:0s; } .streaks i:nth-child(2){ top:46%; width:80px; animation-delay:.7s; } .streaks i:nth-child(3){ top:58%; width:150px; animation-delay:1.3s; } .streaks i:nth-child(4){ top:68%; width:90px; animation-delay:1.9s; }
@keyframes streak { 0% { left:100%; opacity:0; } 15% { opacity:1; } 100% { left:-30%; opacity:0; } }
.float { position:absolute; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:18px; background:var(--floatbg); border:1px solid var(--line); backdrop-filter: blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.45); font-size:.92rem; animation: bob 5s ease-in-out infinite; will-change: transform; }
.float b { display:block; font-size:.98rem; } .float small { color:var(--mut); }
.float .ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#FF7A2E,#D94F00); }
.float .ic svg { width:22px; height:22px; fill:#fff; }
.f1 { left:-2%; top:6%; animation-delay:0s; } .f2 { right:-3%; top:20%; animation-delay:-1.6s; } .f3 { left:2%; bottom:6%; animation-delay:-3s; } .f4 { right:0; bottom:10%; animation-delay:-2.2s; }
@keyframes bob { 50% { transform: translateY(-12px); } }
@media (max-width:900px) { .hero .grid { grid-template-columns:1fr; } .stage { min-height:380px; } .f2,.f4 { display:none; } }

/* ---------- marquee ---------- */
.marq { margin-top:50px; border-block:1px solid var(--line); background:var(--soft); overflow:hidden; padding:16px 0; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marq .track { display:flex; gap:44px; width:max-content; animation: scroll 38s linear infinite; font-weight:700; letter-spacing:.04em; color:var(--mut); white-space:nowrap; }
.marq span::after { content:"•"; margin-left:44px; color:var(--orange); }
@keyframes scroll { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
section.sec { padding:96px 0; position:relative; }
.eyebrow { color:var(--orange2); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; margin-bottom:14px; }
.head { max-width:640px; margin-bottom:44px; }

/* bento */
.bento { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(190px,auto); gap:18px; }
.tile { position:relative; border-radius:26px; padding:26px; background:var(--card); border:1px solid var(--line); overflow:hidden; isolation:isolate; transition:transform .3s, border-color .3s; }
.tile::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,107,26,.22), transparent 45%); opacity:0; transition:opacity .3s; }
.tile:hover { transform:translateY(-4px); border-color:rgba(255,154,85,.45); }
.tile:hover::before { opacity:1; }
.tile h3 { font-size:1.25rem; margin-bottom:.35em; } .tile p { color:var(--mut); margin:0; font-size:.98rem; }
.t-a { grid-column:span 3; grid-row:span 2; } .t-b { grid-column:span 3; } .t-c { grid-column:span 3; }
.t-d { grid-column:span 2; } .t-e { grid-column:span 2; } .t-f { grid-column:span 2; }
@media (max-width:900px) { .bento { grid-template-columns:1fr 1fr; } .t-a { grid-column:span 2; grid-row:auto; } .t-b,.t-c { grid-column:span 2; } .t-d,.t-e,.t-f { grid-column:span 1; } }
@media (max-width:560px) { .bento { grid-template-columns:1fr; } .t-a,.t-b,.t-c,.t-d,.t-e,.t-f { grid-column:auto; } }
.chipicon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; background:linear-gradient(135deg,rgba(255,122,46,.25),rgba(255,107,26,.08)); border:1px solid rgba(255,154,85,.35); }
.chipicon svg { width:24px; height:24px; fill:var(--orange2); }

/* live feed demo inside tile A */
.feed { margin-top:22px; display:grid; gap:10px; mask-image:linear-gradient(#000 70%,transparent); -webkit-mask-image:linear-gradient(#000 70%,transparent); }
.row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:var(--soft); border:1px solid var(--line); animation: slidein .8s both; }
.row:nth-child(2){ animation-delay:.2s; } .row:nth-child(3){ animation-delay:.4s; } .row:nth-child(4){ animation-delay:.6s; }
@keyframes slidein { from { opacity:0; transform:translateX(30px); } }
.thumb { width:62px; height:44px; border-radius:10px; flex:none; background:linear-gradient(135deg,#27406b,#0f2140); display:grid; place-items:center; }
.thumb svg { width:44px; fill:rgba(255,255,255,.75); }
.row b { display:block; font-size:.98rem; } .row small { color:var(--mut); }
.live { margin-left:auto; font-size:.75rem; font-weight:800; color:#2EE59D; display:flex; align-items:center; gap:6px; }
.row .live::before { content:""; width:7px; height:7px; border-radius:50%; background:#2EE59D; animation: ping 1.8s infinite; }
/* tile visuals */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips i { font-style:normal; padding:7px 14px; border-radius:12px; border:1px solid var(--line); background:var(--soft); font-size:.88rem; font-weight:600; }
.chips i.on { background:linear-gradient(135deg,#FF7A2E,#FF5A0A); border-color:transparent; box-shadow:0 0 22px rgba(255,107,26,.5); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 36px rgba(255,107,26,.85); } }
.ring { position:relative; width:64px; height:64px; margin:6px 0 16px; display:grid; place-items:center; }
.ring::before,.ring::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--orange); animation: wave 2.2s ease-out infinite; }
.ring::after { animation-delay:1.1s; }
@keyframes wave { from { transform:scale(.6); opacity:.9; } to { transform:scale(1.7); opacity:0; } }
.ring span { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#FF7A2E,#D94F00); display:grid; place-items:center; z-index:1; animation: shake 2.2s ease-in-out infinite; }
.ring svg { width:24px; fill:#fff; }
@keyframes shake { 0%,60%,100% { transform:rotate(0); } 65%,75%,85% { transform:rotate(-14deg); } 70%,80%,90% { transform:rotate(14deg); } }
.stack { position:relative; height:84px; margin-top:12px; }
.stack i { position:absolute; width:96px; height:66px; border-radius:14px; border:1px solid rgba(255,255,255,.2); box-shadow:0 10px 24px rgba(0,0,0,.45); transition:transform .4s; }
.stack i:nth-child(1){ left:0; background:linear-gradient(135deg,#3a5c93,#1b2f55); transform:rotate(-8deg); } .stack i:nth-child(2){ left:34px; background:linear-gradient(135deg,#ff9a55,#c24a0a); transform:rotate(2deg); } .stack i:nth-child(3){ left:72px; background:linear-gradient(135deg,#2c8d84,#12493f); transform:rotate(10deg); }
.tile:hover .stack i:nth-child(1){ transform:rotate(-14deg) translateX(-8px); } .tile:hover .stack i:nth-child(3){ transform:rotate(16deg) translateX(8px); }
.bolt { font-size:2.2rem; margin:2px 0 8px; filter:drop-shadow(0 0 14px rgba(255,200,60,.8)); animation: pulse2 1.6s ease-in-out infinite; }
@keyframes pulse2 { 50% { transform:scale(1.18); } }
.themes { display:flex; gap:10px; margin-top:16px; } .themes b { width:54px; height:36px; border-radius:11px; border:1px solid var(--line); } .themes b:first-child { background:#F4F6FA; } .themes b:last-child { background:#0A0F1A; }

/* ---------- how it works ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; counter-reset:s; }
.steps::before { content:""; position:absolute; left:8%; right:8%; top:34px; height:2px; background:linear-gradient(90deg,var(--orange),rgba(255,107,26,.1)); transform-origin:left; animation: grow 1.4s .2s both; }
@keyframes grow { from { transform:scaleX(0); } }
.step { position:relative; padding:0 4px; }
.step .n { width:68px; height:68px; border-radius:22px; display:grid; place-items:center; font-weight:800; font-size:1.5rem; background:linear-gradient(135deg,#17386a,#0B1F3A); border:1px solid rgba(255,154,85,.5); box-shadow:0 0 30px rgba(255,107,26,.3); margin-bottom:18px; position:relative; }
.step p { color:var(--mut); }
@media (max-width:800px) { .steps { grid-template-columns:1fr; } .steps::before { display:none; } }

/* ---------- pro ---------- */
.pro { position:relative; border-radius:32px; padding:48px; overflow:hidden; background:linear-gradient(135deg,rgba(255,107,26,.16),rgba(42,99,201,.18)); border:1px solid rgba(255,154,85,.35); display:grid; grid-template-columns:1.2fr 1fr; gap:34px; align-items:center; }
.pro::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(255,107,26,.5),transparent 65%); filter:blur(20px); animation: breathe 6s ease-in-out infinite; }
.pro > * { position:relative; z-index:1; }
.badge { display:inline-block; background:linear-gradient(135deg,#FF7A2E,#FF5A0A); color:#fff; font-weight:800; border-radius:10px; padding:3px 14px; font-size:.85rem; letter-spacing:.08em; margin-bottom:14px; box-shadow:0 0 22px rgba(255,107,26,.6); }
.pro ul { margin:0 0 4px; padding:0; list-style:none; } .pro li { padding-left:30px; position:relative; margin:.6em 0; color:var(--txt2); } .pro li::before { content:"✓"; position:absolute; left:0; color:#2EE59D; font-weight:800; }
@media (max-width:800px) { .pro { grid-template-columns:1fr; padding:30px; } }

.cta2 { text-align:center; }
.cta2 .box { border-radius:32px; padding:64px 24px; border:1px solid var(--line); background:radial-gradient(600px 260px at 50% 0%, rgba(255,107,26,.25), transparent 70%), var(--card); }
.cta2 .cta { justify-content:center; }

footer.foot { border-top:1px solid var(--line); padding:44px 0; color:var(--mut); background:var(--soft); }
footer.foot .cols { display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between; }
footer.foot a { color:var(--strong); } footer.foot ul { list-style:none; margin:0; padding:0; } footer.foot li { margin:.35em 0; }

/* ---------- reveal ---------- */
.rv { opacity:0; transform:translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:.08s; } .rv.d2 { transition-delay:.16s; } .rv.d3 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .rv { opacity:1; transform:none; } html { scroll-behavior:auto; } }

/* theme toggle: a single sun / moon icon button */
.tt { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--soft); color:var(--strong); display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .2s; padding:0; }
.tt:hover { background:var(--card); transform:rotate(12deg); }
.tt svg { width:22px; height:22px; fill:currentColor; }
.tt .sun { display:none; } html[data-theme="light"] .tt .sun { display:block; } html[data-theme="light"] .tt .moon { display:none; }
html[data-theme="light"] .grad { background-image: linear-gradient(100deg,#E5530C,#FF7A2E 45%,#D94F00 80%); background-size:200% auto; }
html[data-theme="light"] .eyebrow { color:#D94F00; }