/* ==========================================================================
   home.css — Public landing page (login.php) ONLY.
   Premium dark trading-platform marketing homepage. Loaded exclusively by
   login.php, so global selectors here never reach the rest of the app.
   No backend/JS contract touched: the real login form lives in #loginModal.
   ========================================================================== */

.home {
  --bg0:#050816; --bg1:#0B1220; --bg2:#101B35; --bg3:#151A45;
  --surface:#111827; --card:rgba(20,25,45,.72); --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  /* Accents matched to the dashboard: teal -> blue -> indigo, semantic green/red */
  --primary:#0D9488; --secondary:#2563EB; --accent:#4F46E5;
  --bull:#16A34A; --bear:#DC2626;
  --text:#FFFFFF; --text-2:#94A3B8; --text-3:#64748B;
  --grad:linear-gradient(135deg,#0D9488 0%,#2563EB 55%,#4F46E5 100%);
  --grad-soft:linear-gradient(135deg,rgba(13,148,136,.16),rgba(79,70,229,.16));
  --font-head:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --nav-h:68px;
}

/* ---- LIGHT theme (default) — matched to the dashboard's soft gradient ----- */
.home[data-home-theme="light"] {
  --surface:#FFFFFF; --card:rgba(255,255,255,.88); --glass:rgba(15,23,42,.035);
  --line:rgba(15,23,42,.09); --line-2:rgba(15,23,42,.14);
  --text:#0F172A; --text-2:#475569; --text-3:#64748B;
}
/* Background: same blue/teal radial washes + soft canvas the dashboard uses */
.home[data-home-theme="light"] .home-bg {
  background:
    radial-gradient(1100px 640px at 82% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 560px at 6% 108%, rgba(13,148,136,.09), transparent 60%),
    linear-gradient(180deg, #F7F9FC 0%, #EFF4FB 42%, #E9F0FA 74%, #E6EEF8 100%);
}
.home[data-home-theme="light"] .home-bg .grid {
  background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
}
.home[data-home-theme="light"] .home-bg .orb { opacity:.5; filter:blur(84px); }
.home[data-home-theme="light"] .home-bg .orb.a { background:radial-gradient(circle,rgba(13,148,136,.30),transparent 70%); }
.home[data-home-theme="light"] .home-bg .orb.b { background:radial-gradient(circle,rgba(79,70,229,.22),transparent 70%); }
.home[data-home-theme="light"] .home-bg .orb.c { background:radial-gradient(circle,rgba(37,99,235,.24),transparent 70%); }
.home[data-home-theme="light"] .home-bg .particles i { background:#2563EB; box-shadow:0 0 8px rgba(37,99,235,.55); opacity:.32; }
.home[data-home-theme="light"] .home-bg .wave { opacity:.22; background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(37,99,235,.05) 38px 39px); }
/* Surfaces that hardcoded dark tones */
.home[data-home-theme="light"] .mock .panel { box-shadow:0 26px 60px -24px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,.7); }
.home[data-home-theme="light"] .mock .chip { background:rgba(255,255,255,.92); box-shadow:0 16px 40px -16px rgba(16,24,40,.25); }
.home[data-home-theme="light"] .modal-content { background:#FFFFFF; border-color:var(--line-2); color:var(--text); box-shadow:0 40px 100px -28px rgba(16,24,40,.35); }
.home[data-home-theme="light"] .login-modal .form-control { background:#FFFFFF; border-color:#D5DCE6; color:var(--text); }
.home[data-home-theme="light"] .login-modal .form-control:focus { border-color:var(--secondary); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.home[data-home-theme="light"] .login-modal .badge-logo { box-shadow:0 10px 26px -8px rgba(37,99,235,.4); }
.home[data-home-theme="light"] .cta-band { background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(79,70,229,.12)); border-color:var(--line-2); }
.home[data-home-theme="light"] .cta-band::before { background:radial-gradient(600px 300px at 50% 0%,rgba(13,148,136,.16),transparent 70%); }
/* Mobile menu drawer (var-driven, theme-aware) */
.home-oc { background:var(--surface); color:var(--text); }
.home-oc .offcanvas-title { color:var(--text); }
.home-oc .btn-link { color:var(--text-2) !important; font-weight:600; }
.home-oc .btn-link:hover { color:var(--secondary) !important; }

.home, .home * { box-sizing:border-box; }
.home {
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--bg0); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; scroll-behavior:smooth;
}
.home h1,.home h2,.home h3,.home h4,.home h5 { font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin:0; }
.home a { text-decoration:none; color:inherit; }
.home section { position:relative; z-index:1; }
.home .mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.home .container { width:min(1200px,92%); margin-inline:auto; }
.home .grad-text { background:var(--grad); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position:220% center; } }
.home .eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); padding:.4rem .8rem; border:1px solid var(--line-2); border-radius:999px; background:var(--glass); }

/* ---------- Animated atmosphere ------------------------------------------- */
.home-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(1000px 650px at 10% 110%, rgba(139,92,246,.15), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 38%, var(--bg2) 72%, var(--bg3)); }
.home-bg .grid { position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(circle at 50% 18%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 18%,#000,transparent 78%); animation:gridPan 24s linear infinite; }
@keyframes gridPan { to { background-position:52px 52px,52px 52px; } }
.home-bg .orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.home-bg .orb.a { width:420px; height:420px; top:-60px; left:6%;  background:radial-gradient(circle,rgba(0,229,255,.5),transparent 70%); animation:float1 20s ease-in-out infinite; }
.home-bg .orb.b { width:480px; height:480px; top:30%; right:-40px; background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%); animation:float2 26s ease-in-out infinite; }
.home-bg .orb.c { width:360px; height:360px; bottom:-80px; left:40%; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 70%); animation:float1 30s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(28px,-34px,0) scale(1.08);} }
@keyframes float2 { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-30px,26px,0) scale(1.1);} }
.home-bg .wave { position:absolute; left:0; right:0; bottom:8%; height:240px; opacity:.4;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,229,255,.05) 38px 39px); mask-image:linear-gradient(transparent,#000,transparent); }
/* floating particles */
.home-bg .particles { position:absolute; inset:0; }
.home-bg .particles i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--primary); opacity:.5; box-shadow:0 0 8px var(--primary); animation:rise linear infinite; }
@keyframes rise { from { transform:translateY(20px); opacity:0; } 10%{opacity:.6;} 90%{opacity:.5;} to { transform:translateY(-105vh); opacity:0; } }

/* ---------- Buttons ------------------------------------------------------- */
.home .btn-grad, .home .btn-glass, .home .btn-line {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  padding:.85rem 1.5rem; border-radius:14px; border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease; -webkit-tap-highlight-color:transparent; }
.home .btn-grad { color:#fff; background:var(--grad); box-shadow:0 10px 28px -8px rgba(37,99,235,.45); }
.home .btn-grad:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 16px 40px -8px rgba(37,99,235,.6); filter:brightness(1.04); }
.home .btn-glass { color:var(--text); background:var(--glass); border-color:var(--line-2); backdrop-filter:blur(10px); }
.home .btn-glass:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 0 0 1px rgba(0,229,255,.3),0 12px 30px -10px rgba(0,229,255,.4); }
.home .btn-line { color:var(--text); background:transparent; border-color:var(--line-2); }
.home .btn-line:hover { border-color:var(--primary); color:var(--primary); }
.home .btn-sm { padding:.55rem 1rem; font-size:.86rem; border-radius:11px; }
/* ripple */
.home .ripple::after { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  opacity:0; transform:scale(.2); transition:transform .5s, opacity .6s; }
.home .ripple:active::after { opacity:.25; transform:scale(2.4); transition:0s; }

/* ---------- Navbar -------------------------------------------------------- */
.home-nav { position:fixed; inset:0 0 auto 0; z-index:50; height:calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top); display:flex; align-items:center; transition:background .3s ease, box-shadow .3s ease, border-color .3s; border-bottom:1px solid transparent; }
.home-nav.scrolled { background:rgba(5,8,22,.72); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom-color:var(--line); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.home[data-home-theme="light"] .home-nav.scrolled { background:rgba(244,247,252,.8); }
.home-nav .inner { width:min(1280px,94%); margin-inline:auto; display:flex; align-items:center; gap:1rem; }
.home-brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.home-brand .logo { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad); color:#fff; font-size:1.1rem; box-shadow:0 6px 18px -4px rgba(0,229,255,.6); }
.home-nav .links { display:flex; gap:.25rem; margin-inline:auto; }
.home-nav .links a { padding:.5rem .85rem; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--text-2); transition:color .15s, background .15s; }
.home-nav .links a:hover { color:var(--text); background:var(--glass); }
.home-nav .actions { display:flex; align-items:center; gap:.6rem; }
.home-nav .icon-btn { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--text-2); background:var(--glass); border:1px solid var(--line); cursor:pointer; transition:.15s; }
.home-nav .icon-btn:hover { color:var(--text); border-color:var(--line-2); }
.home-nav .hamb { display:none; }
.home .lang-dd .dropdown-menu { background:var(--surface); border:1px solid var(--line-2); }

/* ---------- Hero ---------------------------------------------------------- */
.hero { padding:calc(var(--nav-h) + 4.5rem) 0 5rem; }
.hero .grid2 { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero h1 { font-size:clamp(2.4rem,1.6rem + 3.4vw,4.2rem); }
.hero .sub { color:var(--text-2); font-size:clamp(1rem,.95rem + .3vw,1.18rem); margin:1.3rem 0 2rem; max-width:34ch; line-height:1.6; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero .trust { display:grid; grid-template-columns:repeat(4,auto); gap:1.6rem 2.2rem; margin-top:2.6rem; }
.hero .trust .t-val { font-family:var(--font-head); font-weight:800; font-size:1.5rem; }
.hero .trust .t-lbl { color:var(--text-3); font-size:.78rem; margin-top:.15rem; }

/* hero dashboard mockup — container floats (translateY), panel tilts (rotate) */
.mock { position:relative; perspective:1200px; animation:bob 7s ease-in-out infinite; will-change:transform; }
.mock .panel { background:var(--card); border:1px solid var(--line-2); border-radius:22px; padding:1.1rem; backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease; will-change:transform; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
/* chart line draws itself on load */
.mock .chart path.line { stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.6s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset:0; } }
.mock .m-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.mock .m-pair { display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:700; }
.mock .m-pair .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(247,147,26,.18); color:#F7931A; }
.mock .m-price { text-align:right; }
.mock .m-price .p { font-family:var(--font-mono); font-weight:700; font-size:1.15rem; }
.mock .m-price .c { font-size:.8rem; color:var(--bull); }
.mock .chart { height:150px; border-radius:14px; background:linear-gradient(180deg,rgba(0,229,255,.05),transparent); border:1px solid var(--line); overflow:hidden; position:relative; }
.mock .chart svg { width:100%; height:100%; display:block; }
.mock .chart .scan { position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(var(--primary),transparent); box-shadow:0 0 12px var(--primary); animation:scan 4s linear infinite; }
@keyframes scan { from{ left:-2%; } to{ left:102%; } }
.mock .m-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.8rem; }
.mock .m-cell { background:var(--glass); border:1px solid var(--line); border-radius:13px; padding:.7rem .8rem; }
.mock .m-cell .k { font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.mock .m-cell .v { font-family:var(--font-mono); font-weight:700; margin-top:.2rem; }
.mock .bs { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.7rem; }
.mock .bs button { border:0; border-radius:12px; padding:.7rem; font-family:var(--font-head); font-weight:800; color:#fff; cursor:default; }
.mock .bs .buy { background:linear-gradient(135deg,#00E5A8,#00C853); }
.mock .bs .sell { background:linear-gradient(135deg,#FF7A7A,#FF4D4F); color:#fff; }
/* floating stat chips */
.mock .chip { position:absolute; background:rgba(10,15,30,.85); border:1px solid var(--line-2); border-radius:14px; padding:.6rem .8rem;
  backdrop-filter:blur(10px); box-shadow:0 16px 40px -12px rgba(0,0,0,.7); display:flex; align-items:center; gap:.55rem; font-size:.82rem; }
.mock .chip .dot { width:9px; height:9px; border-radius:50%; }
.mock .chip.c1 { top:-18px; right:8%; animation:bob 6s ease-in-out infinite .4s; }
.mock .chip.c2 { bottom:6%; left:-22px; animation:bob 8s ease-in-out infinite .8s; }
.mock .chip .mono { font-weight:700; }

/* ---------- Ticker -------------------------------------------------------- */
.ticker { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(8,12,28,.5); padding:.85rem 0; overflow:hidden; }
.home[data-home-theme="light"] .ticker { background:rgba(255,255,255,.5); }
.ticker .track { display:flex; gap:2.4rem; width:max-content; animation:marq 36s linear infinite; }
.ticker:hover .track { animation-play-state:paused; }
@keyframes marq { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker .tk { display:flex; align-items:center; gap:.7rem; font-size:.92rem; white-space:nowrap; }
.ticker .tk .sym { font-family:var(--font-head); font-weight:700; }
.ticker .tk .px { font-family:var(--font-mono); color:var(--text); }
.ticker .tk .ch { font-family:var(--font-mono); font-size:.82rem; padding:.1rem .45rem; border-radius:7px; }
.ticker .up { color:var(--bull); background:rgba(0,200,83,.12); }
.ticker .down { color:var(--bear); background:rgba(255,77,79,.12); }

/* ---------- Section scaffolding ------------------------------------------ */
.sec { padding:5.5rem 0; }
.sec .head { text-align:center; max-width:640px; margin:0 auto 3rem; }
.sec .head h2 { font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); }
.sec .head p { color:var(--text-2); margin-top:.9rem; font-size:1.05rem; line-height:1.6; }

/* glass cards grid */
.cards { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.glass-card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.6rem; overflow:hidden;
  backdrop-filter:blur(12px); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.glass-card::before { content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s; }
.glass-card:hover { transform:translateY(-7px); box-shadow:0 26px 60px -22px rgba(0,0,0,.7); }
.glass-card:hover::before { opacity:.9; }
.glass-card .ico { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:1.4rem; margin-bottom:1rem;
  background:var(--grad-soft); color:var(--primary); border:1px solid var(--line-2); }
.glass-card h3 { font-size:1.18rem; margin-bottom:.5rem; }
.glass-card p { color:var(--text-2); font-size:.92rem; line-height:1.6; }

/* ---------- Why / comparison --------------------------------------------- */
.compare { background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; backdrop-filter:blur(12px); }
.compare table { width:100%; border-collapse:collapse; }
.compare th, .compare td { padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; }
.compare thead th { font-family:var(--font-head); color:var(--text-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.compare thead th:nth-child(2) { color:var(--primary); }
.compare td.us { color:var(--bull); font-weight:700; }
.compare td.them { color:var(--text-3); }
.compare tr:last-child td { border-bottom:0; }
.compare .feat { font-weight:600; }

/* ---------- Pricing ------------------------------------------------------- */
.price-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.price-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.8rem; backdrop-filter:blur(12px); transition:transform .25s, border-color .25s; }
.price-card:hover { transform:translateY(-6px); border-color:var(--line-2); }
.price-card.featured { border-color:transparent; box-shadow:0 0 0 1.5px transparent; background:
  linear-gradient(var(--card),var(--card)) padding-box, var(--grad) border-box; border:1.5px solid transparent; }
.price-card .tier { font-family:var(--font-head); font-weight:700; color:var(--text-2); }
.price-card .amt { font-family:var(--font-head); font-weight:800; font-size:2.4rem; margin:.4rem 0; }
.price-card .amt small { font-size:.9rem; color:var(--text-3); font-weight:600; }
.price-card ul { list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.6rem; }
.price-card li { color:var(--text-2); font-size:.92rem; display:flex; gap:.5rem; align-items:center; }
.price-card li i { color:var(--primary); }
.price-badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--grad); padding:.25rem .6rem; border-radius:999px; margin-bottom:.8rem; }

/* ---------- Preview ------------------------------------------------------- */
.preview-frame { border-radius:24px; border:1px solid var(--line-2); overflow:hidden; background:var(--card); backdrop-filter:blur(12px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8); padding:.7rem; }
.preview-frame .bar { display:flex; gap:.4rem; padding:.5rem .7rem; }
.preview-frame .bar i { width:11px; height:11px; border-radius:50%; background:var(--line-2); }
.preview-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:.7rem; padding:.4rem; }
.preview-grid .pv { background:var(--glass); border:1px solid var(--line); border-radius:14px; min-height:90px; padding:.9rem; }
.preview-grid .tall { grid-row:span 2; min-height:200px; }

/* ---------- Testimonials -------------------------------------------------- */
.testi-track { display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none; }
.testi-track::-webkit-scrollbar { display:none; }
.testi { scroll-snap-align:center; flex:0 0 min(420px,86%); background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.6rem; backdrop-filter:blur(12px); }
.testi .stars { color:#FBBF24; margin-bottom:.7rem; }
.testi p { color:var(--text); font-size:1.02rem; line-height:1.6; }
.testi .who { display:flex; align-items:center; gap:.7rem; margin-top:1.1rem; }
.testi .av { width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-weight:800; }
.testi .who .n { font-weight:700; } .testi .who .r { color:var(--text-3); font-size:.82rem; }

/* ---------- FAQ ----------------------------------------------------------- */
.home .accordion { --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--line); --bs-accordion-color:var(--text);
  --bs-accordion-btn-color:var(--text); --bs-accordion-active-color:var(--primary); --bs-accordion-active-bg:var(--glass);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(0,229,255,.2); border-radius:16px; overflow:hidden; max-width:820px; margin-inline:auto; }
.home .accordion-item { background:var(--card); border-color:var(--line); }
.home .accordion-button { font-family:var(--font-head); font-weight:700; background:transparent; }
.home .accordion-button:not(.collapsed) { background:var(--glass); box-shadow:none; }
.home .accordion-body { color:var(--text-2); }

/* ---------- CTA ----------------------------------------------------------- */
.cta-band { text-align:center; border-radius:28px; padding:4rem 2rem; position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(139,92,246,.14)); border:1px solid var(--line-2); }
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%,rgba(0,229,255,.2),transparent 70%); }
.cta-band h2 { font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); position:relative; }
.cta-band p { color:var(--text-2); margin:1rem auto 2rem; max-width:50ch; position:relative; }

/* ---------- Footer -------------------------------------------------------- */
.home-foot { border-top:1px solid var(--line); padding:4rem 0 2rem; position:relative; z-index:1; background:rgba(5,8,22,.4); }
.home[data-home-theme="light"] .home-foot { background:rgba(255,255,255,.4); }
.foot-grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2.4rem; }
.foot-grid h5 { font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:1rem; }
.foot-grid a { display:block; color:var(--text-2); font-size:.92rem; padding:.3rem 0; transition:color .15s; }
.foot-grid a:hover { color:var(--primary); }
.foot-about p { color:var(--text-2); font-size:.92rem; line-height:1.6; margin:.9rem 0 1.1rem; }
.foot-soc { display:flex; gap:.6rem; }
.foot-soc a { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--text-2); }
.foot-soc a:hover { color:var(--primary); border-color:var(--line-2); }
.foot-bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); color:var(--text-3); font-size:.85rem; }

/* ---------- Login modal --------------------------------------------------- */
.home .modal-content { background:linear-gradient(160deg,#0E1530,#0A0F22); border:1px solid var(--line-2); border-radius:22px; color:var(--text);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8); }
.login-modal .badge-logo { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin:0 auto .8rem; background:var(--grad); color:#fff; font-size:1.5rem; box-shadow:0 10px 26px -6px rgba(0,229,255,.55); }
.login-modal .form-control { background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--text); border-radius:12px; min-height:46px; }
.login-modal .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.18); background:rgba(255,255,255,.06); }
.login-modal .form-label { color:var(--text-2); font-size:.85rem; font-weight:600; }

/* ---------- Reveal on scroll (blur reveal) ------------------------------- */
.reveal { opacity:0; transform:translateY(26px); filter:blur(8px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.reveal.in { opacity:1; transform:none; filter:blur(0); }

/* Staggered hero entrance: choreograph children once container is in view */
.stagger > * { opacity:0; }
.stagger.in > * { animation:heroIn .75s cubic-bezier(.2,.7,.2,1) both; }
.stagger.in > *:nth-child(1){ animation-delay:.05s; }
.stagger.in > *:nth-child(2){ animation-delay:.16s; }
.stagger.in > *:nth-child(3){ animation-delay:.27s; }
.stagger.in > *:nth-child(4){ animation-delay:.38s; }
.stagger.in > *:nth-child(5){ animation-delay:.49s; }
@keyframes heroIn { from { opacity:0; transform:translateY(22px); filter:blur(9px); } to { opacity:1; transform:none; filter:blur(0); } }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width:991.98px){
  .home-nav .links { display:none; }
  .home-nav .hamb { display:grid; }
  .home-nav .actions .d-desk { display:none !important; }
  .hero .grid2 { grid-template-columns:1fr; gap:2.4rem; }
  .hero .mock { order:-1; }
  .hero .trust { grid-template-columns:repeat(2,1fr); gap:1.3rem; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:1.8rem; }
  .preview-grid { grid-template-columns:1fr; }
  .compare { overflow-x:auto; }
}
@media (max-width:575.98px){
  .sec { padding:3.8rem 0; }
  .hero { padding-top:calc(var(--nav-h) + 2.5rem); }
  .hero .trust { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .mock .chip.c2 { left:0; }
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .home *, .home *::before, .home *::after { animation:none !important; }
  .home .panel, .home .chip { animation:none !important; }
  .reveal { transition:none; opacity:1; transform:none; }
}