/* ===== 1kt modern layer + full theme coverage =====
   Loaded last on every page. Maps Tailwind accent classes to the
   active theme and adds a modern look on top of the existing styles. */
:root{
  --bg:#07090f; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08); --txt:#e8eaf0; --mut:#9aa3b5;
  --font-h:'Space Grotesk',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b)!important; color:var(--txt);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(var(--ar),.18), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(var(--ar),.10), transparent 60%),
    var(--bg)!important;
  background-attachment:fixed!important;
  -webkit-font-smoothing:antialiased;
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,.font-display{font-family:var(--font-h)!important;letter-spacing:-.02em;line-height:1.12}
h1{letter-spacing:-.035em}
p{line-height:1.7}
::selection{background:rgba(var(--ar),.35);color:#fff}
a{transition:color .2s}
:focus-visible{outline:2px solid var(--al)!important;outline-offset:2px}

/* Cards */
.glass-card,.card,.feature-card,.pricing-card,.stat-card,.snippet-card,.bg-slate-800\/50,.bg-gray-800\/50,.bg-slate-900\/50{
  background:linear-gradient(180deg,var(--surface-2),var(--surface))!important;
  border:1px solid var(--line)!important; border-radius:18px!important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s!important;
}
.glass-card:hover,.card:hover,.feature-card:hover,.snippet-card:hover{
  transform:translateY(-4px)!important; border-color:rgba(var(--ar),.35)!important;
  box-shadow:0 20px 50px -20px rgba(var(--ar),.35)!important;
}

/* Buttons & inputs */
button,.btn,a[class*="rounded"]{transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary,.cta-button,button[type="submit"]{
  background:linear-gradient(135deg,var(--a),var(--al))!important; color:#fff!important;
  border:0!important; border-radius:12px!important; font-weight:600;
  box-shadow:0 8px 24px -8px rgba(var(--ar),.55)!important;
}
.btn-primary:hover,.cta-button:hover,button[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(var(--ar),.7)!important}
input:not([type=checkbox]):not([type=radio]),textarea,select{
  color:var(--txt);
}
input:focus,textarea:focus,select:focus{border-color:var(--a)!important;box-shadow:0 0 0 4px rgba(var(--ar),.18)!important;outline:none!important}

/* Nav */
nav,.navbar{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.gradient-text,.text-gradient{background:linear-gradient(120deg,#fff 10%,var(--al) 55%,var(--a))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* Code blocks */
pre,code{font-family:'JetBrains Mono',ui-monospace,monospace}
pre{border:1px solid var(--line);border-radius:14px!important}

/* Theme switch smoothness */
html.theme-anim *{transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s!important}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Mobile */
@media (max-width:640px){
  h1{font-size:clamp(2rem,9vw,2.75rem)!important}
  button,a.btn,.btn{min-height:44px}
  .glass-card,.card{border-radius:16px!important}
}

/* Theme dropdown polish */
.theme-picker-dropdown{background:rgba(12,14,22,.92)!important;backdrop-filter:blur(16px)}
.theme-picker-option.active{background:rgba(var(--ar),.18)!important;color:#fff}

/* Tailwind accent classes follow the theme */
.bg-purple-500\/10{background-color:rgba(var(--ar),.1)!important}
.text-purple-300{color:var(--al)!important}
.hover\:text-purple-300:hover{color:var(--al)!important}
.text-purple-400{color:var(--al)!important}
.border-purple-500\/20{border-color:rgba(var(--ar),.20)!important}
.bg-violet-500\/10{background-color:rgba(var(--ar),.1)!important}
.text-violet-500{color:var(--a)!important}
.bg-indigo-500{background-color:var(--a)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.text-indigo-400{color:var(--al)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.bg-blue-500{background-color:var(--a)!important}
.bg-blue-500\/10{background-color:rgba(var(--ar),.1)!important}
.bg-blue-600{background-color:var(--a)!important}
.hover\:bg-blue-700:hover{background-color:var(--ad)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}
.text-blue-300{color:var(--al)!important}
.hover\:text-blue-300:hover{color:var(--al)!important}
.text-blue-400{color:var(--al)!important}
.hover\:text-blue-400:hover{color:var(--al)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}
.border-blue-500\/20{border-color:rgba(var(--ar),.20)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}
.from-blue-500{--tw-gradient-from:var(--a)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-500{--tw-gradient-to:var(--a)!important}
.shadow-blue-500\/25,.hover\:shadow-blue-500\/25:hover{--tw-shadow-color:rgba(var(--ar),.25)!important}
.to-blue-600{--tw-gradient-to:var(--a)!important}

/* =====================================================================
   Polish layer — refinements on top of the existing design (nothing here
   changes layout or structure): navbar, hero, cards, footer, dashboard.
   ===================================================================== */

/* --- Navbar: sliding highlight + accent glow once scrolled --- */
.navbar-links{position:relative}
.nav-slider{position:absolute;top:4px;bottom:4px;left:0;width:0;opacity:0;border-radius:999px;pointer-events:none;z-index:0;
  background:rgba(var(--ar),.2);box-shadow:inset 0 0 0 1px rgba(var(--ar),.4);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.navbar-links.has-slider > .nav-link{position:relative;z-index:1}
.navbar-links.has-slider > .nav-link.active,
.navbar-links.has-slider > .nav-link:hover{background:transparent;box-shadow:none}
.navbar-links.has-slider .nav-more{position:relative;z-index:2}
.navbar-pill.scrolled{border-color:rgba(var(--ar),.35)!important;box-shadow:0 12px 36px -10px rgba(var(--ar),.4)!important}
.nav-more-dropdown.open{animation:tpop .16s ease}
@keyframes tpop{from{opacity:0;transform:translateY(-4px)}}

/* --- Home hero: faint grid, CTA shine, users pill --- */
.hero-grid{position:relative}
.hero-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 50% 40%,#000 15%,transparent 75%)}
.cta-button{position:relative;overflow:hidden}
.cta-button::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.cta-button:hover::before{transform:translateX(120%)}
.users-pill{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:8px 20px 8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--mut);font-size:.9rem}
.users-pill[hidden]{display:none}
.users-pill b{font-family:var(--font-h);font-weight:800;font-size:1.05rem}
.users-av{display:flex}
.users-av i{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;background:linear-gradient(135deg,var(--a),var(--al))}
.users-av i:first-child{margin-left:0}
.users-av i:nth-child(2){background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.users-av i:nth-child(3){background:linear-gradient(135deg,#10b981,#34d399)}

/* --- Cards: cursor spotlight (glass cards) + FAQ hover --- */
.glass-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(var(--ar),.16),transparent 70%)}
.glass-card:hover::after{opacity:1}
.faq-item{transition:border-color .2s,background .2s}
.faq-item:hover{border-color:rgba(var(--ar),.35)!important}

/* --- Footer: clean layout --- */
.ft{position:relative;padding:56px 0 30px;background:linear-gradient(180deg,transparent,rgba(var(--ar),.05))!important;border-top:1px solid var(--line)!important}
.ft::before{content:"";position:absolute;top:-1px;left:50%;width:min(520px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--al),transparent)}
.ft-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ft-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-h);font-weight:700;font-size:1.35rem}
.ft-logo img{width:42px;height:42px;border-radius:50%}
.ft-brand p{color:var(--mut);margin:16px 0 0;max-width:320px;font-size:.95rem}
.ft .footer-col-title{margin:0 0 20px;font-size:.78rem;letter-spacing:.16em}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ft-list a{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:.96rem;transition:color .2s}
.ft-list a:hover{color:var(--txt)}
.ft-list i{font-size:1.15rem;width:22px;text-align:center;color:var(--mut)}
.ft-social{display:flex;flex-wrap:wrap;gap:10px}
.ft-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--mut);font-size:1.15rem;transition:transform .2s,border-color .2s,color .2s,box-shadow .2s}
.ft-icon:hover{transform:translateY(-3px);color:var(--c,var(--al));border-color:var(--c,var(--al));box-shadow:0 10px 22px -10px var(--c,var(--al))}
.ft-bottom{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);text-align:center;color:var(--mut);font-size:.88rem}
.ft-bottom p{margin:0}
.ft-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;row-gap:10px}
.ft-dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.ft-live{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e;font-size:.78rem;font-weight:600}
.ft-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:ftpulse 2s infinite}
@keyframes ftpulse{50%{opacity:.35;transform:scale(.8)}}
.ft-heart{color:#ef4444}
.ft-by{color:var(--al);font-weight:600}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr;gap:34px}.ft-dot{display:none}.ft-row{flex-direction:column;gap:12px}}

/* --- Dashboard: quick-jump chips --- */
.dash-chips{position:sticky;top:76px;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:8px 2px 12px;margin:-6px 0 14px;scrollbar-width:none}
.dash-chips::-webkit-scrollbar{display:none}
.dash-chips button{flex-shrink:0;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(15,23,42,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--mut);font:600 .82rem var(--font-b);cursor:pointer;transition:all .15s}
.dash-chips button:hover{color:var(--txt);border-color:rgba(var(--ar),.5);background:rgba(var(--ar),.18)}
#userPanel,#auditSection,#socialSection,#referralSection,#ipSection,#plans,#terms{scroll-margin-top:130px}

@media (prefers-reduced-motion:reduce){
  .nav-slider,.cta-button::before,.ft-live i,.nav-more-dropdown.open{animation:none!important;transition:none!important}
}

/* =====================================================================
   Home page — matches the approved mockup
   ===================================================================== */
.hero-badge{padding:7px 16px;border-radius:999px;background:rgba(var(--ar),.1);border:1px solid rgba(var(--ar),.3);color:var(--al);font-size:.85rem;font-weight:600}
.grad-accent{background:linear-gradient(120deg,var(--txt) 10%,var(--al) 55%,var(--a))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.trust-line{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.82rem;color:var(--mut)}
.trust-line span::before{content:"✓ ";color:var(--al);font-weight:700}
.users-pill{margin-top:20px}

#features,#faq{padding-top:90px;padding-bottom:90px}
#features .mb-20,#faq .mb-20{margin-bottom:56px}

/* feature cards */
.feat-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;color:var(--al);background:rgba(var(--ar),.14);border:1px solid rgba(var(--ar),.3);transition:transform .3s}
.glass-card{border-radius:24px!important;padding:38px 32px!important;background:linear-gradient(180deg,var(--surface),transparent)!important}
.glass-card:hover{transform:translateY(-6px)!important;border-color:rgba(var(--ar),.4);box-shadow:0 24px 50px -24px rgba(var(--ar),.55)!important}
.glass-card:hover .feat-ico{transform:scale(1.1) rotate(-4deg)}
.glass-card h3{font-family:var(--font-h);font-size:1.5rem!important;letter-spacing:-.02em}

/* FAQ: bordered boxes, accent + that turns into x */
.faq-item{padding:0 24px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--surface)!important}
.faq-item:hover{background:rgba(var(--ar),.04)!important}
.faq-item > div:first-child{padding:20px 0}
.faq-item h3{font-family:var(--font-h);font-size:1.1rem!important;font-weight:600;letter-spacing:-.01em}
.faq-toggle{color:var(--al)!important;font-size:1.5rem!important;line-height:1}
.faq-answer{padding-top:0!important}
.faq-answer.open{max-height:500px;opacity:1;padding-bottom:20px}
.faq-answer a{color:var(--al)!important}
.faq-item:has(.faq-answer.open){border-color:rgba(var(--ar),.4)!important;background:rgba(var(--ar),.05)!important}

/* One continuous page background: sections must not repaint the old navy gradient */
:not(body).gradient-bg{background:none!important}