:root{
  --bg:#F8F8F6;--surface:#FFF;--border:#EAEAE6;--border2:#D5D5CF;
  --text:#141412;--text2:#5C5C57;--text3:#98988F;
  --accent:#2563EB;--accent-lt:#EFF6FF;--accent-dk:#1D4ED8;
  --green:#16A34A;--green-lt:#F0FDF4;
  --purple:#7C3AED;--purple-lt:#F5F3FF;
  --orange:#D97706;--orange-lt:#FFFBEB;
  --red:#DC2626;--red-lt:#FEF2F2;
  --teal:#0D9488;--teal-lt:#F0FDFA;
  --slate:#0F172A;--slate2:#1E293B;--slate3:#334155;
  --radius:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.10);
  --font-display:'Plus Jakarta Sans',sans-serif;
  --font-body:'DM Sans',-apple-system,sans-serif;
  --font-mono:'DM Mono',monospace;
  --max-w:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#D5D5CF;border-radius:3px}

/* ── Navbar ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:0 24px;height:64px;display:flex;align-items:center;background:rgba(248,248,246,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,234,230,.7);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.06)}
.nav-inner{width:100%;max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text);letter-spacing:-.03em}
.nav-brand-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),#6366F1);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(37,99,235,.3);flex-shrink:0}
.nav-brand-icon svg{width:15px;height:15px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:7px 14px;border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s}
.nav-link:hover{color:var(--text);background:rgba(0,0,0,.04)}
.nav-actions{display:flex;align-items:center;gap:8px}
.btn-nav-login{padding:7px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:600;color:var(--text2);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.btn-nav-login:hover{border-color:var(--border2);color:var(--text)}
.btn-nav-cta{padding:7px 18px;border-radius:var(--radius-md);font-size:13px;font-weight:600;color:#fff;background:var(--accent);border:none;cursor:pointer;transition:all .15s;font-family:var(--font-body);box-shadow:0 1px 4px rgba(37,99,235,.25)}
.btn-nav-cta:hover{background:var(--accent-dk);box-shadow:0 3px 12px rgba(37,99,235,.35);transform:translateY(-1px)}
.nav-mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius);color:var(--text2);flex-direction:column;gap:4.5px;align-items:center;justify-content:center}
.nav-mobile-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:all .25s}
.nav-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(248,248,246,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:16px 24px 20px;flex-direction:column;gap:4px;z-index:490}
.nav-mobile-menu.open{display:flex}
.nav-mobile-link{padding:10px 14px;border-radius:var(--radius);font-size:15px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s}
.nav-mobile-link:hover{color:var(--text);background:rgba(0,0,0,.04)}
.nav-mobile-divider{height:1px;background:var(--border);margin:8px 0}
.nav-mobile-actions{display:flex;gap:8px;padding-top:4px}
.nav-mobile-actions .btn-nav-login,.nav-mobile-actions .btn-nav-cta{flex:1;text-align:center;padding:10px 16px;font-size:14px}

/* ── Hero ── */
.hero{min-height:100vh;display:flex;align-items:center;padding:100px 24px 80px;background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(37,99,235,.07) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-10%;left:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.05) 0%,transparent 70%);pointer-events:none}
.hero-inner{width:100%;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:var(--accent-lt);border:1px solid rgba(37,99,235,.2);font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:22px;letter-spacing:.02em}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}
.hero-title{font-family:var(--font-display);font-size:52px;font-weight:900;line-height:1.08;letter-spacing:-.04em;color:var(--text);margin-bottom:20px}
.hero-title em{font-style:normal;background:linear-gradient(135deg,var(--accent),#6366F1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:17px;color:var(--text2);line-height:1.65;margin-bottom:36px;max-width:480px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.btn-hero-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:var(--radius-md);font-size:15px;font-weight:700;color:#fff;background:var(--accent);border:none;cursor:pointer;transition:all .18s;font-family:var(--font-body);box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-hero-primary:hover{background:var(--accent-dk);box-shadow:0 6px 20px rgba(37,99,235,.4);transform:translateY(-2px)}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--radius-md);font-size:15px;font-weight:600;color:var(--text2);background:transparent;border:1.5px solid var(--border);cursor:pointer;transition:all .18s;font-family:var(--font-body)}
.btn-hero-ghost:hover{border-color:var(--border2);color:var(--text);background:var(--surface)}
.hero-trust{display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--text3);flex-wrap:wrap}
.hero-trust-item{display:flex;align-items:center;gap:6px}
.hero-trust-item svg{width:14px;height:14px;stroke:var(--green);stroke-width:2.5;fill:none}
.hero-visual{position:relative}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-lg);animation:floatY 4s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hero-card-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text)}
.hero-card-badge{background:var(--green-lt);color:var(--green);font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;display:flex;align-items:center;gap:4px}
.hero-card-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green)}
.hero-stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.hero-stat{background:var(--bg);border-radius:var(--radius-md);padding:12px 14px;border:1px solid var(--border)}
.hero-stat-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.hero-stat-val{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.hero-stat-sub{font-size:10.5px;color:var(--text3);margin-top:3px}
.hero-domains{display:flex;flex-direction:column;gap:8px}
.hero-domain-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}
.hero-domain-name{font-size:12.5px;font-weight:600;color:var(--text)}
.hero-domain-meta{font-size:11px;color:var(--text3);margin-top:1px}
.hero-domain-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.badge-r{background:var(--accent-lt);color:var(--accent)}
.badge-g{background:var(--green-lt);color:var(--green)}
.hero-float{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow-md);animation:floatY2 5s ease-in-out infinite}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-float-1{bottom:-20px;left:-36px;animation-delay:.8s}
.hero-float-2{top:-16px;right:-24px;animation-delay:1.6s}
.hero-float-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.hero-float-val{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.03em}
.hero-float-sub{font-size:10.5px;color:var(--text3)}

/* ── Stats strip ── */
.stats-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 24px}
.stats-strip-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;border-right:1px solid var(--border)}
.strip-item:last-child{border-right:none}
.strip-num{font-family:var(--font-display);font-size:36px;font-weight:900;color:var(--text);letter-spacing:-.04em;line-height:1}
.strip-label{font-size:13px;color:var(--text2);margin-top:6px}

/* ── Generic section ── */
section{padding:96px 24px}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-lt);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.section-title{font-family:var(--font-display);font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--text);line-height:1.1;margin-bottom:14px}
.section-subtitle{font-size:16px;color:var(--text2);max-width:540px;line-height:1.7}
.section-head{margin-bottom:52px}
.section-head.center{text-align:center}
.section-head.center .section-subtitle{margin:0 auto}

/* ── Problem section ── */
#problem{background:var(--slate);padding:88px 24px}
#problem .section-label{color:#93C5FD;background:rgba(147,197,253,.12);border:1px solid rgba(147,197,253,.2)}
#problem .section-title{color:#F1F5F9}
#problem .section-subtitle{color:#94A3B8}
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prob-card{background:var(--slate2);border:1px solid var(--slate3);border-radius:var(--radius-lg);padding:26px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.prob-card:hover{border-color:#475569;transform:translateY(-3px)}
.prob-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#38bdf8,rgba(56,189,248,.3))}
.prob-icon{width:44px;height:44px;border-radius:12px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.prob-icon svg{width:22px;height:22px;stroke:#38bdf8;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}
.prob-title{font-family:var(--font-display);font-size:14.5px;font-weight:700;color:#F1F5F9;margin-bottom:8px;letter-spacing:-.02em}
.prob-desc{font-size:13px;color:#94A3B8;line-height:1.65}
.prob-tag{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:#38bdf8;background:rgba(56,189,248,.1);padding:3px 10px;border-radius:20px;letter-spacing:.03em}

/* ── How it works — Animated bot panel ── */
#how{background:var(--surface)}
.how-panel-wrap{max-width:960px;margin:0 auto;position:relative}
.how-panel-wrap::before{content:'';position:absolute;top:-28px;left:50%;transform:translateX(-50%);width:65%;height:56px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(37,99,235,.07) 0%,transparent 70%);filter:blur(10px)}
.how-panel{position:relative;background:#07101f;border-radius:24px;overflow:hidden}
.how-panel::before{content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:2;padding:1px;background:linear-gradient(to bottom,#1e3a5f 0%,rgba(30,58,95,0) 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html:not(.dark) .how-panel{box-shadow:0 4px 40px rgba(0,0,0,.15)}
html.dark .how-panel{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 8px 40px rgba(0,0,0,.6)}
.how-panel-body{padding:20px 20px 24px;position:relative;z-index:1}
.how-topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #111827}
.how-topbar-l{display:flex;align-items:center;gap:8px}
.how-topbar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#38bdf8;animation:howDotPulse 2s ease-in-out infinite}
@keyframes howDotPulse{0%,100%{box-shadow:0 0 5px rgba(56,189,248,.4)}50%{box-shadow:0 0 14px rgba(56,189,248,.9)}}
.how-topbar-name{color:#d0d0d0;font-size:13px;font-weight:600;font-family:var(--font-display)}
.how-topbar-r{font-size:11px;color:#777;font-family:var(--font-mono);transition:color .4s}
.how-col-hdrs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.how-col-hdr{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;font-size:12.5px;font-weight:500;transition:opacity .6s,background-color .6s,border-color .6s;border:1px solid transparent}
.hchdr-blue  {color:#5f89ff;background:rgba(95,137,255,.07);border-color:rgba(95,137,255,.2)}
.hchdr-yellow{color:#38bdf8;background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.2)}
.hchdr-green {color:#bfdbfe;background:rgba(191,219,254,.07);border-color:rgba(191,219,254,.2)}
.hchdr-blue:not(.how-dim)  {background:rgba(95,137,255,.14);border-color:rgba(95,137,255,.4)}
.hchdr-yellow:not(.how-dim){background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.4)}
.hchdr-green:not(.how-dim) {background:rgba(191,219,254,.14);border-color:rgba(191,219,254,.4)}
.hchdr-icon{width:14px;height:14px;flex-shrink:0}
.hchdr-badge{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center}
.hchdr-badge svg{width:9px;height:9px}
.how-cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.how-col{border-radius:12px;padding:10px;transition:opacity .6s,border-color .6s,box-shadow .6s;min-height:110px;border:1px solid transparent}
.how-col-blue  {background:rgba(95,137,255,.03);border-color:rgba(95,137,255,.12)}
.how-col-yellow{background:rgba(56,189,248,.03);border-color:rgba(56,189,248,.12)}
.how-col-green {background:rgba(191,219,254,.03);border-color:rgba(191,219,254,.12)}
.how-col-blue:not(.how-dim)  {border-color:rgba(95,137,255,.4);box-shadow:0 0 20px rgba(95,137,255,.12)}
.how-col-yellow:not(.how-dim){border-color:rgba(56,189,248,.4);box-shadow:0 0 20px rgba(56,189,248,.12)}
.how-col-green:not(.how-dim) {border-color:rgba(191,219,254,.4);box-shadow:0 0 20px rgba(191,219,254,.12)}
.how-mob-card{display:flex;flex-direction:column;gap:8px}
.how-mob-tid{font-family:var(--font-mono);font-size:10px;color:#999;letter-spacing:.02em}
.how-mob-main{display:flex;justify-content:space-between;align-items:center;gap:6px}
.how-mob-label{font-size:12.5px;font-weight:600;color:#fff;font-family:var(--font-display);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how-mob-val{font-size:12.5px;font-weight:700;flex-shrink:0}
.how-mob-foot{font-size:10.5px;color:#555;line-height:1.4}
.how-float{position:absolute;top:0;left:0;border-radius:12px;overflow:hidden;background:#050d1a;border:1px solid #1a2d45;box-shadow:0 8px 24px rgba(0,0,0,.65);transition:transform .65s cubic-bezier(.4,0,.2,1);will-change:transform}
.how-float-bg{position:absolute;inset:0;transition:opacity .65s;pointer-events:none}
.hfbg-blue  {background:linear-gradient(to bottom,#07101f,#040c18 33%,#060e1c 66%,#0c1f3a)}
.hfbg-yellow{background:linear-gradient(to bottom,#07101f,#040c18 33%,#060e1c 66%,#0a1e35)}
.hfbg-green {background:linear-gradient(to bottom,#07101f,#040c18 33%,#060e1c 66%,#0e2040)}
.how-float-inner{position:relative;padding:14px;display:flex;flex-direction:column;gap:10px}
.how-float-tid{font-family:var(--font-mono);font-size:10.5px;color:#ccc;letter-spacing:.03em;line-height:1}
.how-float-row{display:flex;justify-content:space-between}
.how-float-sub{font-size:10.5px;color:#555}
.how-float-main{display:flex;justify-content:space-between;align-items:center;gap:8px}
.how-float-label{font-size:13px;font-weight:600;color:#fff;font-family:var(--font-display);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how-float-value{font-size:13.5px;font-weight:700;font-family:var(--font-display);transition:color .65s;flex-shrink:0}
.how-float-foot{font-size:10.5px;color:#555;line-height:1.4}
.how-step-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.how-step-card{padding:13px 14px;border-radius:12px;transition:opacity .6s,border-color .6s;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055)}
.how-step-card:not(.how-dim){border-color:rgba(255,255,255,.12)}
.how-step-card strong{display:block;font-size:12.5px;color:#c8cdd6;font-family:var(--font-display);margin-bottom:5px;line-height:1.3}
.how-step-card p{font-size:11.5px;color:#5a6070;line-height:1.6;margin:0}
.how-dim{opacity:.3}

/* ── Features ── */
#features{background:var(--bg)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:all .2s;position:relative;overflow:hidden}
.feat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border2)}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .2s}
.feat-card:hover::before{opacity:1}
.feat-card:nth-child(1)::before{background:linear-gradient(90deg,var(--accent),rgba(37,99,235,.3))}
.feat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--green),rgba(22,163,74,.3))}
.feat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--orange),rgba(217,119,6,.3))}
.feat-card:nth-child(4)::before{background:linear-gradient(90deg,var(--teal),rgba(13,148,136,.3))}
.feat-card:nth-child(5)::before{background:linear-gradient(90deg,#6366F1,rgba(99,102,241,.3))}
.feat-card:nth-child(6)::before{background:linear-gradient(90deg,var(--accent-dk),rgba(29,78,216,.3))}
.feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;flex-shrink:0}
.feat-icon-blue{background:var(--accent-lt)}
.feat-icon-green{background:var(--green-lt)}
.feat-icon-orange{background:var(--orange-lt)}
.feat-icon-teal{background:var(--teal-lt)}
.feat-icon-indigo{background:#EEF2FF}
.feat-icon-slate{background:#F1F5F9}
.feat-icon svg{width:22px;height:22px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
.feat-icon-blue svg{stroke:var(--accent)}
.feat-icon-green svg{stroke:var(--green)}
.feat-icon-orange svg{stroke:var(--orange)}
.feat-icon-teal svg{stroke:var(--teal)}
.feat-icon-indigo svg{stroke:#6366F1}
.feat-icon-slate svg{stroke:#475569}
.feat-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.02em}
.feat-desc{font-size:13.5px;color:var(--text2);line-height:1.65}

/* ── Pricing ── */
#pricing{background:var(--surface)}
.pricing-static-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.p-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:28px;position:relative;transition:all .2s}
.p-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.p-card.popular{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-lt)}
.p-popular-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--accent),var(--accent-dk));color:#fff;font-size:10.5px;font-weight:700;padding:4px 14px;border-radius:20px;white-space:nowrap;letter-spacing:.04em}
.p-tier{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.p-price{font-family:var(--font-display);font-size:32px;font-weight:900;color:var(--text);letter-spacing:-.04em;line-height:1;margin-bottom:4px}
.p-price span{font-size:14px;font-weight:400;color:var(--text3)}
.p-period{font-size:12px;color:var(--text3);margin-bottom:8px}
.p-per-article{font-size:12px;color:var(--green);font-weight:600;background:var(--green-lt);display:inline-block;padding:2px 9px;border-radius:20px;margin-bottom:18px}
.p-divider{height:1px;background:var(--border);margin:18px 0}
.p-features{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.p-features li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text2)}
.p-check{width:16px;height:16px;border-radius:50%;background:var(--green-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.p-check svg{width:9px;height:9px;stroke:var(--green);stroke-width:2.5;fill:none}
.p-btn{width:100%;padding:11px;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font-body);border:none}
.p-btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)!important}.p-btn-outline:hover{background:var(--accent-lt)}
.p-btn-solid{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25)}.p-btn-solid:hover{background:var(--accent-dk);box-shadow:0 4px 14px rgba(37,99,235,.35);transform:translateY(-1px)}

/* ── Cost comparison ── */
.compare-wrap{margin-top:48px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.compare-head{padding:20px 24px;border-bottom:1px solid var(--border)}
.compare-head-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:4px}
.compare-head-sub{font-size:13px;color:var(--text3)}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th{padding:12px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);text-align:left;background:var(--surface);border-bottom:1px solid var(--border)}
.compare-table th:not(:first-child){text-align:center}
.compare-table td{padding:14px 20px;font-size:13.5px;color:var(--text2);border-bottom:1px solid var(--border)}
.compare-table td:not(:first-child){text-align:center}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr.compare-row-highlight td{background:rgba(37,99,235,.03)}
.compare-method{font-weight:600;color:var(--text)}
.compare-price{font-family:var(--font-display);font-weight:700;color:var(--text);letter-spacing:-.02em}
.compare-price.good{color:var(--accent)}
.compare-price.bad{color:var(--red)}
.compare-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.02em}
.compare-badge-green{background:var(--accent-lt);color:var(--accent)}
.compare-badge-red{background:var(--red-lt);color:var(--red)}

/* ── FAQ ── */
#faq{background:var(--bg)}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s}
.faq-item.open{border-color:var(--border2)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;cursor:pointer;gap:16px;user-select:none}
.faq-q-text{font-size:15px;font-weight:600;color:var(--text);line-height:1.4}
.faq-icon{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;color:var(--text3);font-size:14px;font-weight:400}
.faq-item.open .faq-icon{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 18px;font-size:14px;color:var(--text2);line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ── CTA ── */
.cta-section{background:linear-gradient(135deg,#1E3A8A 0%,var(--accent) 55%,#4F46E5 100%);padding:96px 24px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;left:-20%;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.cta-section::after{content:'';position:absolute;bottom:-40%;right:-15%;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.cta-inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.cta-title{font-family:var(--font-display);font-size:42px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.1;margin-bottom:12px}
.cta-sub{font-size:16px;color:rgba(255,255,255,.75);margin-bottom:8px;line-height:1.65}
.cta-note{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:36px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.btn-cta-white{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--radius-md);font-size:15px;font-weight:700;color:var(--accent);background:#fff;border:none;cursor:pointer;transition:all .18s;font-family:var(--font-body);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.btn-cta-white:hover{box-shadow:0 8px 28px rgba(0,0,0,.2);transform:translateY(-2px)}
.btn-cta-outline{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);cursor:pointer;transition:all .18s;font-family:var(--font-body)}
.btn-cta-outline:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}

/* ── Footer ── */
footer{background:#0F172A;color:#94A3B8;padding:48px 24px 32px}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:36px}
.footer-brand{font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:12px;letter-spacing:-.03em}
.footer-brand-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),#6366F1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.footer-brand-icon svg{width:14px;height:14px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.footer-desc{font-size:13.5px;line-height:1.7;max-width:280px}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:13.5px;color:#94A3B8;transition:color .15s;cursor:pointer}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1E293B;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-copy{font-size:12.5px}
.footer-tagline{font-size:12px;color:#475569}

/* ── Side nav dots ── */
.side-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:400;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.side-dot{position:relative;width:7px;height:7px;border-radius:4px;background:var(--border2);border:none;cursor:pointer;padding:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.side-dot:hover{background:var(--accent);transform:scale(1.4)}
.side-dot.active{background:var(--accent);height:22px;width:7px}
.side-dot::before{content:attr(data-label);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;font-weight:600;font-family:var(--font-body);color:var(--text2);background:var(--surface);border:1px solid var(--border);padding:3px 10px;border-radius:6px;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .15s}
.side-dot:hover::before{opacity:1}

/* ── Scroll to top ── */
.scroll-top-btn{position:fixed;bottom:26px;right:14px;z-index:400;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none}
.scroll-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 14px rgba(37,99,235,.3)}
.scroll-top-btn svg{width:14px;height:14px;stroke:var(--text2);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.scroll-top-btn:hover svg{stroke:#fff}

/* ── Fade-in animation ── */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:1024px){
  .problem-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:48px}
  .hero-title{font-size:38px}
  .hero-subtitle{margin:0 auto 36px}
  .hero-actions{justify-content:center}
  .hero-trust{justify-content:center}
  .hero-visual{display:none}
  .features-grid{grid-template-columns:1fr 1fr}
  .pricing-static-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .stats-strip-inner{grid-template-columns:1fr 1fr}
  .strip-item:nth-child(2){border-right:none}
  .strip-item:nth-child(3){border-right:1px solid var(--border)}
  .strip-item{padding:16px 12px}
  .how-panel-body{padding:14px}
  .how-col-hdrs,.how-cols,.how-step-cards{grid-template-columns:1fr;gap:8px}
  .how-float{display:none!important}
  .how-col{min-height:0}
  .nav-links,.nav-actions{display:none}
  .nav-mobile-toggle{display:flex}
  .compare-table th:nth-child(3),.compare-table td:nth-child(3){display:none}
  .side-nav{right:auto;left:50%;top:auto;bottom:16px;transform:translateX(-50%);flex-direction:row;gap:5px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 14px;border-radius:50px;border:1px solid var(--border);box-shadow:var(--shadow-md)}
  .side-dot{width:7px;height:7px}
  .side-dot.active{width:22px;height:7px}
  .side-dot::before{display:none}
  .scroll-top-btn{bottom:74px;right:14px}
}
@media(max-width:600px){
  .hero-title{font-size:30px}
  .section-title{font-size:28px}
  .features-grid{grid-template-columns:1fr}
  .problem-grid{grid-template-columns:1fr}
  .stats-strip-inner{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
  .cta-title{font-size:30px}
  section{padding:64px 20px}
  #problem{padding:64px 20px}
  .compare-table th:nth-child(4),.compare-table td:nth-child(4){display:none}
}

/* ── THEME TOGGLE BUTTON (nav) ── */
.nav-theme-btn{width:34px;height:34px;border-radius:var(--radius-md);background:transparent;border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0}
.nav-theme-btn:hover{background:rgba(0,0,0,.04);color:var(--text);border-color:var(--border2)}
.lnd-moon{display:block}
.lnd-sun{display:none}

/* ── DARK MODE — html.dark — selaras dengan login page (#090909 palette) ── */
html.dark{
  --bg:#090909;--surface:#0e0e0e;--border:#272727;--border2:#333333;
  --text:#ffffff;--text2:#B8B8B8;--text3:#555555;
  --accent:#60A5FA;--accent-lt:rgba(96,165,250,.10);--accent-dk:#3B82F6;
  --green:#34D399;--green-lt:rgba(52,211,153,.12);
  --orange:#FBBF24;--orange-lt:rgba(251,191,36,.12);
  --red:#F87171;--red-lt:rgba(248,113,113,.12);
  --teal:#2DD4BF;--teal-lt:rgba(45,212,191,.12);
  --slate:#141414;--slate2:#090909;--slate3:#0e0e0e;
  --shadow:0 1px 3px rgba(0,0,0,.6);
  --shadow-md:0 4px 16px rgba(0,0,0,.7);
  --shadow-lg:0 12px 40px rgba(0,0,0,.8);
}
html.dark body{background:var(--bg);color:var(--text)}
html.dark ::-webkit-scrollbar-thumb{background:#272727;border-radius:3px}
html.dark ::-webkit-scrollbar-thumb:hover{background:#333333}

/* Nav dark */
html.dark .nav{background:rgba(9,9,9,.92);border-bottom-color:#272727}
html.dark .nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.7)}
html.dark .nav-link:hover{background:rgba(255,255,255,.05)}
html.dark .btn-nav-login{background:var(--surface);color:var(--text2);border-color:var(--border)}
html.dark .btn-nav-login:hover{border-color:var(--border2);color:var(--text)}
html.dark .nav-mobile-menu{background:rgba(9,9,9,.98);border-bottom-color:var(--border)}
html.dark .nav-mobile-link:hover{background:rgba(255,255,255,.05)}
html.dark .nav-theme-btn{border-color:var(--border);color:var(--text2)}
html.dark .nav-theme-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
html.dark .lnd-moon{display:none}
html.dark .lnd-sun{display:block}

/* Hero dark */
html.dark .hero{background:var(--bg)}
html.dark .hero-card{background:var(--surface);border-color:var(--border)}
html.dark .hero-stat{background:var(--bg);border-color:var(--border)}
html.dark .hero-domain-item{background:var(--bg);border-color:var(--border)}
html.dark .hero-float{background:var(--surface);border-color:var(--border)}
html.dark .hero::before{background:radial-gradient(circle,rgba(59,130,246,.10) 0%,transparent 70%)}
html.dark .hero::after{background:radial-gradient(circle,rgba(99,102,241,.07) 0%,transparent 70%)}

/* Stats strip dark */
html.dark .stats-strip{background:var(--surface);border-color:var(--border)}
html.dark .strip-item{border-right-color:var(--border)}

/* Section labels */
html.dark .section-label{background:var(--accent-lt)}

/* Problem section dark */
html.dark #problem{background:#060606}
html.dark .prob-card{background:#0e0e0e;border-color:#272727}
html.dark .prob-card:hover{border-color:#444444}

/* How it works dark */
html.dark #how{background:#0a0a0a}
html.dark .how-panel-wrap::before{background:radial-gradient(ellipse at center,rgba(96,165,250,.14) 0%,transparent 70%)}

/* Features dark */
html.dark #features{background:var(--bg)}
html.dark .feat-card{background:var(--surface);border-color:var(--border)}
html.dark .feat-card:hover{border-color:var(--border2)}
html.dark .feat-icon-indigo{background:rgba(99,102,241,.12)}
html.dark .feat-icon-slate{background:rgba(71,85,105,.12)}
html.dark .feat-icon-slate svg{stroke:#94A3B8}

/* Pricing dark */
html.dark #pricing{background:var(--surface)}
html.dark .p-card{background:var(--bg);border-color:var(--border)}
html.dark .p-card.popular{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-lt)}
html.dark .compare-wrap{background:var(--bg);border-color:var(--border)}
html.dark .compare-table th{background:var(--surface);color:var(--text3);border-bottom-color:var(--border)}
html.dark .compare-table td{border-bottom-color:var(--border)}
html.dark .compare-table tr.compare-row-highlight td{background:rgba(59,130,246,.04)}

/* FAQ dark */
html.dark #faq{background:var(--bg)}
html.dark .faq-item{background:var(--surface);border-color:var(--border)}
html.dark .faq-item.open{border-color:var(--border2)}
html.dark .faq-icon{border-color:var(--border2);color:var(--text3)}

/* Side nav dark */
html.dark .side-dot{background:rgba(255,255,255,.18)}
html.dark .side-dot::before{background:var(--surface);border-color:var(--border)}
html.dark .scroll-top-btn{background:var(--surface);border-color:var(--border)}
@media(max-width:900px){
  html.dark .side-nav{background:rgba(9,9,9,.95);border-color:var(--border)}
}