/* ============================================================
   AskSummu Design System — "Anthracite" dark futuristic theme
   One shared layer loaded last on every page. Reskins the whole
   site via CSS variables + component restyles. No markup required,
   but new futuristic component classes are supported too.

   Palette
     anthracite base   #1A1C1F   panels  #141619 / #202329
     card surface      #202329   raised  #262A30
     text near-white   #EEF2F7   body    #A2AAB4   faint  #6B7480
     electric blue     #4C8DFF   hover   #6EA6FF
     cyan energy       #2FD8EE
     brushed gold      #D9B36A   (awards / premium only)
   ============================================================ */

:root{
  --bg:#1A1C1F !important;
  --bg2:#141619 !important;
  --bg3:#202329 !important;
  --text:#EEF2F7 !important;
  --muted:#A2AAB4 !important;
  --faint:#6B7480 !important;
  --blue:#9aa7b6 !important;
  --blue-h:#c2c9d4 !important;
  --cyan:#c2c9d4 !important;
  --purple:#8b93a1 !important;
  --frost:#d6dbe3 !important;
  --teal:#c2c9d4 !important;
  --gold:#D9B36A !important;
  --graphite:#0F1114 !important;
  --anthracite:#131722 !important;
  --line:rgba(255,255,255,.08) !important;
  --line2:rgba(255,255,255,.14) !important;
  --card:#202329 !important;
  --card-bg:#202329 !important;
  --panel:#202329 !important;
  --nav-bg:rgba(20,22,25,.72) !important;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.4), 0 18px 46px -22px rgba(0,0,0,.8) !important;
  --shadow-h:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 12px rgba(0,0,0,.5), 0 30px 64px -24px rgba(0,0,0,.9) !important;
  --glow-blue:0 0 0 1px rgba(160,168,180,.4), 0 14px 40px -14px rgba(150,158,170,.4);
  --glow-cyan:0 0 0 1px rgba(190,196,208,.4), 0 14px 40px -14px rgba(190,196,208,.4);
  --edge:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%);
  --r:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --cl-theme:dark;
}

html, body{ background:var(--bg) !important; color:var(--text) !important; }

/* subtle film grain over the whole page — futuristic engineered texture */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:overlay;
}
@media (max-width:768px){ body::before{ opacity:.02; } }

a{ color:var(--blue); }
a:hover{ color:var(--blue-h); }
::selection{ background:rgba(160,168,180,.32); color:#fff; }

/* keep body content above the fixed circuit layer (z-index:0) */
.cl-host{ z-index:0 !important; }
body > nav, body > header, body > footer, body > section, body > .trust,
body > .wrap, body > main, body > .page, .site-footer{ position:relative; z-index:2; }

/* ---------- backgrounds ---------- */
.bg, .bg-wrapper{
  background:
    radial-gradient(ellipse 80% 55% at 50% -12%, rgba(160,168,180,.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 92% 8%, rgba(190,196,208,.06), transparent 60%),
    linear-gradient(180deg, #1D2024 0%, var(--bg) 42%, var(--bg2) 100%) !important;
}
.aurora, .bg-orb-1, .bg-orb-2, .bg-orb-3{ mix-blend-mode:screen !important; opacity:.6 !important; }
.a1,.bg-orb-1{ background:radial-gradient(circle, rgba(160,168,180,.14), transparent 70%) !important; }
.a2,.bg-orb-2{ background:radial-gradient(circle, rgba(190,196,208,.10), transparent 70%) !important; }
.a3,.bg-orb-3{ background:radial-gradient(circle, rgba(217,179,106,.07), transparent 70%) !important; }
.grid, .bg-grid{
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/64px 64px !important;
  opacity:.7 !important;
}
.vign, .bg-vignette{ background:radial-gradient(ellipse 92% 84% at 50% 46%, transparent 55%, rgba(0,0,0,.55) 100%) !important; }
.dust{ display:none !important; }
.mouse-glow{ background:radial-gradient(circle closest-side, rgba(160,168,180,.16), transparent 75%) !important; mix-blend-mode:screen !important; }

/* ---------- cursor ---------- */
.c-dot{ background:var(--frost) !important; box-shadow:0 0 12px rgba(190,196,208,.7) !important; }
.c-ring{ border-color:rgba(190,196,208,.45) !important; }
.c-ring.big{ border-color:var(--frost) !important; box-shadow:0 0 18px rgba(190,196,208,.35) !important; }
.scroll-progress{ background:linear-gradient(90deg, #c2c9d4, #8b93a1) !important; box-shadow:0 0 12px rgba(190,196,208,.5) !important; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ color:var(--text); }
.section-head h2, .sec-head h2, .head h2, header h1, .hero-copy h1, h1.grad, .grad-text,
.splash-title, .ic-title, .hdr h1, .page-title, .t-title{
  color:var(--text) !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
  text-shadow:0 1px 0 rgba(0,0,0,.4) !important;
}
.hero h1 em, .hero-copy h1 em{
  color:transparent !important;
  background:linear-gradient(100deg, var(--blue) 0%, var(--cyan) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.tm{ color:var(--gold) !important; }
.section-sub, .sub, .lead, .tagline, .hero-lead, .sec-sub, p{ color:var(--muted); }

/* ---------- kicker / eyebrow with connective node + accent line ---------- */
.sec-kicker, .hero-kicker, .kicker, .hdr-kicker, .eyebrow, .section-sub-tag{
  color:var(--cyan) !important; letter-spacing:.16em !important;
}
.sec-kicker{
  display:inline-flex !important; align-items:center; gap:12px;
  background:none !important; border:none !important; padding:0 !important;
}
.sec-kicker::before{
  content:""; width:26px; height:1px; flex:none;
  background:linear-gradient(90deg, var(--cyan), rgba(190,196,208,0));
  box-shadow:0 0 8px rgba(190,196,208,.6);
  transform-origin:left; animation:cl-line-in .9s var(--ease) both;
}
@keyframes cl-line-in{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }
.hero-kicker{
  background:rgba(160,168,180,.10) !important;
  border:1px solid rgba(160,168,180,.28) !important;
  box-shadow:0 0 0 1px rgba(160,168,180,.05), 0 10px 30px -16px rgba(150,158,170,.5);
}
.hero-kicker i{ color:var(--gold); }

/* ---------- generic card system ---------- */
.card, .event-card, .sig-card, .product-card, .vcard, .feature-card, .explore-card,
.central-card, .contact-card, .t-item, .t-card, .highlight-item, .cat,
.stat-card, .info-card, .value-card, .focus-card, .preview-card,
.build-card, .ach-card, .trust-card, .stat-c, .invest-card, .hv-main{
  position:relative;
  background:linear-gradient(180deg, #24272D 0%, var(--card) 100%) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:none !important;
  color:var(--text);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease) !important;
}
/* thin luminous top edge */
.card::before, .build-card::before, .ach-card::before, .feature-card::before,
.product-card::before, .event-card::before, .t-item::before, .explore-card::before,
.central-card::before, .value-card::before, .trust-card::before, .stat-c::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--edge); opacity:.6; mix-blend-mode:screen;
}
/* soft light sweep on hover */
.card::after, .build-card::after, .ach-card::after, .feature-card::after,
.product-card::after, .t-item::after, .explore-card::after, .value-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(160,168,180,.10) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .7s var(--ease); z-index:3;
}
.card:hover, .event-card:hover, .sig-card:hover, .product-card:hover, .vcard:hover,
.feature-card:hover, .explore-card:hover, .t-item:hover, .cat:hover, .t-card:hover,
.build-card:hover, .ach-card:hover, .value-card:hover, .central-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--shadow-h), var(--glow-blue) !important;
  border-color:rgba(190,196,208,.4) !important;
}
.card:hover::after, .build-card:hover::after, .ach-card:hover::after,
.feature-card:hover::after, .product-card:hover::after, .t-item:hover::after,
.explore-card:hover::after, .value-card:hover::after{ transform:translateX(120%); }

/* card inner text */
.card p, .event-card p, .sig-card p, .product-card p, .feature-card p, .t-item p, .build-card p, .ach-body p{ color:var(--muted); }
.event-card h2,.event-card h3,.event-header h2,.stat .num,.highlight-item h3,
.t-item h2,.t-item h3,.t-card h3,.sig-card h3,.sig-card h4,.product-card h3,
.feature-card h3,.explore-card h3,.cat h3,.card h3,.vcard h3,.contact-card h3,
.central-card h2,.central-card h3,.value-card h3,.focus-card h3,.info-card h3,
.stat-card .num,.stat-card h3,.build-card h3,.ach-body h3,.feature-title{ color:var(--text) !important; text-shadow:none !important; }

/* card icon tiles */
.build-card i, .feature-card i, .value-card i, .focus-card i{
  background:linear-gradient(180deg, rgba(160,168,180,.20), rgba(160,168,180,.06)) !important;
  color:var(--cyan) !important;
  box-shadow:0 0 0 1px rgba(160,168,180,.22), 0 6px 18px -8px rgba(150,158,170,.5) !important;
}

/* featured / award cards: brushed gold accent + corner brackets */
.featured-item, .featured-award, .sig-lead, .trust-card{
  border-color:rgba(217,179,106,.38) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 48px -22px rgba(217,179,106,.35) !important;
}
.trust-card i{ background:rgba(217,179,106,.12) !important; color:var(--gold) !important; box-shadow:0 0 0 1px rgba(217,179,106,.25) !important; }
.trust-card b{ color:var(--text) !important; }
.trust-card small{ color:var(--muted) !important; }
.corner-card{ position:relative; }
.corner-card::before, .corner-card::after,
.corner-card > .ck-tl, .corner-card > .ck-br{ pointer-events:none; }

/* ---------- buttons: futuristic energy pills ---------- */
.btn, .cta, .cat-btn, button[class*="btn"], a[class*="btn"], .btn-p, .btn-s,
.btn-primary, .cta-primary, .nav-cta{
  border-radius:12px; letter-spacing:.01em;
}
/* primary — blue energy */
.btn-p, .btn-primary, .cta-primary, .nav-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #c9cfd8, #9aa2b0) !important;
  color:#12141a !important; border:none !important;
  box-shadow:0 0 0 1px rgba(190,196,208,.5), 0 10px 26px -10px rgba(0,0,0,.6) !important;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.btn-p::before, .btn-primary::before, .cta-primary::before, .nav-cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .6s var(--ease);
}
.btn-p:hover, .btn-primary:hover, .cta-primary:hover, .nav-cta:hover{
  background:linear-gradient(180deg, #dfe3ea, #b6bdc9) !important;
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(220,226,235,.7), 0 16px 40px -12px rgba(0,0,0,.7) !important;
}
.btn-p:hover::before, .btn-primary:hover::before, .cta-primary:hover::before, .nav-cta:hover::before{ transform:translateX(130%); }
.btn-p:active, .btn-primary:active, .nav-cta:active{ transform:translateY(0) scale(.985); }
.btn-p > *, .nav-cta > *{ position:relative; z-index:1; }

/* secondary — luminous outline + energy fill */
.btn-s{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.03) !important;
  color:var(--text) !important;
  border:1px solid var(--line2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), color .25s !important;
}
.btn-s::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 140% at 50% 120%, rgba(190,196,208,.22), transparent 60%);
  opacity:0; transition:opacity .3s var(--ease);
}
.btn-s:hover{
  border-color:rgba(190,196,208,.55) !important; transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(190,196,208,.3), 0 14px 34px -14px rgba(190,196,208,.5) !important;
}
.btn-s:hover::before{ opacity:1; }
.btn-s:active{ transform:translateY(0) scale(.985); }
.btn-s > *{ position:relative; z-index:1; }

/* gold — premium CTA */
.btn-gold{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #E5C783, #C79A4E) !important;
  color:#221803 !important; font-weight:700; border:none !important;
  padding:15px 28px; border-radius:12px;
  box-shadow:0 0 0 1px rgba(217,179,106,.6), 0 12px 30px -12px rgba(217,179,106,.7) !important;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(229,199,131,.8), 0 18px 44px -14px rgba(217,179,106,.85) !important; }

/* magnetic wrapper hook (JS sets --mx/--my) */
.magnetic{ transition:transform .25s var(--ease); }

/* ---------- spec chips ---------- */
.chip, .badge, .pill, .cat-tag, .t-date, .t-cat, .spec-chip{
  background:rgba(160,168,180,.10) !important;
  color:var(--frost) !important;
  border:1px solid rgba(160,168,180,.24) !important;
  text-shadow:none !important;
}
.badge-gold, .award-badge, .medal, .ach-tag:not(.blue){
  background:rgba(217,179,106,.12) !important;
  color:var(--gold) !important;
  border-color:rgba(217,179,106,.38) !important;
}
.ach-tag.blue{ background:rgba(190,196,208,.10) !important; color:var(--frost) !important; border-color:rgba(190,196,208,.24) !important; }

/* ---------- navbar ---------- */
.nav{ background:var(--nav-bg) !important; border-bottom:1px solid var(--line) !important; backdrop-filter:blur(16px) saturate(1.2) !important; }
.nav-logo{ color:var(--text) !important; }
.nav-links a{ color:var(--muted) !important; }
.nav-links a:hover{ color:var(--text) !important; }
/* dark-only: hide the theme toggle */
.theme-tog{ display:none !important; }

/* ---------- stat / metric blocks ---------- */
.stat-c{ text-align:center; background:linear-gradient(180deg, #24272D, var(--card)) !important; }
.stat-c .n, .stat-card .num{ color:var(--text) !important; }
.stat-c .n .suf{ color:var(--cyan) !important; }
.stat-c .l{ color:var(--muted) !important; }

/* ---------- recognition timeline ---------- */
.rec-line{ border-left:1px solid var(--line2) !important; }
.rec-dot{ background:var(--bg) !important; border-color:var(--cyan) !important; box-shadow:0 0 10px rgba(190,196,208,.5) !important; }
.rec-dot.gold{ border-color:var(--gold) !important; box-shadow:0 0 10px rgba(217,179,106,.5) !important; }
.rec-item b{ color:var(--text) !important; }
.rec-item span:not(.rec-dot){ color:var(--muted) !important; }

/* invest / dark band */
.sec-alt{ background:var(--bg2) !important; }
.sec-dark{ background:linear-gradient(180deg, #12151C, var(--anthracite)) !important; color:var(--text) !important; }
.invest-card{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; border:1px solid var(--line2) !important; }
.invest-card h3{ color:var(--text) !important; }
.invest-card p{ color:var(--muted) !important; }
.ip i{ background:rgba(217,179,106,.14) !important; color:var(--gold) !important; }
.ip b{ color:var(--text) !important; }
.ip span{ color:var(--muted) !important; }
.invest-card .mail{ color:var(--cyan) !important; }

/* section divide seam (soft light gradient between panels) */
.sec + .sec, .sec-alt, .sec-dark{ position:relative; }
.sec-alt::before, .sec-dark::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(160,168,180,.35), rgba(190,196,208,.35), transparent);
  opacity:.7;
}

/* ---------- forms ---------- */
input, textarea, select{
  background:rgba(255,255,255,.04) !important; color:var(--text) !important;
  border:1px solid var(--line2) !important; border-radius:12px;
}
input::placeholder, textarea::placeholder{ color:var(--faint) !important; }
input:focus, textarea:focus{ border-color:var(--frost) !important; outline:none; box-shadow:0 0 0 3px rgba(190,196,208,.2) !important; }

/* ---------- footer ---------- */
footer, .footer, .site-footer{ background:var(--graphite) !important; color:#B9C0CA !important; border-top:1px solid var(--line) !important; }
footer a, .footer a{ color:#9FB4E4 !important; }
footer a:hover, .footer a:hover{ color:var(--cyan) !important; }
footer h3, footer h4, .footer h3, .foot-brand{ color:var(--text) !important; }
.foot-social a{ background:rgba(255,255,255,.05) !important; color:#C6CCD4 !important; }
.foot-social a:hover{ background:rgba(190,196,208,.15) !important; color:var(--cyan) !important; }

/* ---------- intro covers / splash: keep as dark branded moments ---------- */
.intro-cover, .splash-screen{ background:radial-gradient(circle at 50% 40%, #23262C, var(--graphite) 78%) !important; }
.intro-cover .ic-title, .splash-screen .splash-title{
  background:linear-gradient(110deg, #F2F4F7, #B9C6E6 45%, #7E8DA6) !important;
  -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
}
.intro-cover .ic-sub, .splash-screen .splash-subtitle{ color:var(--cyan) !important; }

/* chrome pills */
.back-home a, .home-pill, .nav-pill{
  background:rgba(255,255,255,.04) !important; color:var(--text) !important;
  border:1px solid var(--line2) !important; box-shadow:var(--shadow) !important; backdrop-filter:blur(8px) !important;
}
.back-home a:hover{ border-color:rgba(160,168,180,.5) !important; }

/* pcb skin retint (dark board) */
.pcb-skin{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px) !important;
  opacity:.8 !important;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--bg2); }
::-webkit-scrollbar-thumb{ background:#2E333A; border-radius:6px; border:3px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover{ background:#3B424B; }

/* brand wordmark letters */
.ch{ color:var(--gold) !important; text-shadow:none !important; }

/* team / about / store / explore hardcoded literals → dark equivalents */
.rb-num, .sig-name, .t-card h4, .f-head span, .pc-name, .rm-title,
.roadmap-head h2, .notify h3, .nf-head h3, .notify-card h3{ color:var(--text) !important; }
.sig-role, .tk-txt, .sig-ic{ color:var(--muted) !important; }
.sig-lead .sig-role, .sig-lead .sig-verified{ color:var(--gold) !important; }
.sig-lead .sig-role::after{ background:linear-gradient(90deg, var(--gold), rgba(217,179,106,0)) !important; }
.sig-lines a{ color:var(--cyan) !important; }
.sig-ic:hover{ color:var(--cyan) !important; }
.sig-rail{ background:rgba(255,255,255,.03) !important; border-color:var(--line) !important; }

/* ---------- generous section spacing ---------- */
section{ scroll-margin-top:80px; }

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .sec-kicker::before{ animation:none; transform:scaleX(1); }
  .card::after, .build-card::after, .ach-card::after{ display:none; }
}