/* ════════════════════════════════════════════════════════════
   HLD SEO Agency — brand layer (2026-09-21)
   Loaded after redesign.css. Dark graphite + violet, Sora display.
   Content/markup untouched: this file only re-skins.
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --canvas:#0B0A12; --surface:#13111D; --surface2:#1A1726; --ink:#F3F1FA; --cream:#E9E5F5;
  --accent:#A78BFA; --accent-strong:#8B5CF6; --accent-deep:#7C3AED; --fuchsia:#D946EF;
  --subdued:#5E5873; --line:rgba(243,241,250,.09); --line-strong:rgba(167,139,250,.35);
  --bg:#0B0A12; --bg-elev:#13111D; --bg-card:#13111D;
  --border:rgba(243,241,250,.09); --border-strong:#A78BFA;
  --text:#F3F1FA; --text-2:#A9A4BF; --text-3:#6E6886;
  --accent-2:#A78BFA; --accent-soft:rgba(167,139,250,.12);
  --grad:linear-gradient(120deg,#8B5CF6 0%,#A855F7 45%,#D946EF 100%);
  --grad-text:linear-gradient(100deg,#C4B5FD 0%,#A78BFA 40%,#E879F9 100%);
  --glow:0 10px 40px -10px rgba(139,92,246,.55);
  --radius:16px; --radius-sm:10px;
  --serif:'Sora','Inter',system-ui,sans-serif;   /* display face (was DM Serif) */
  --display:'Sora','Inter',system-ui,sans-serif;
}

/* ---- Base ---- */
body{background:var(--canvas)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(900px 520px at 85% -10%,rgba(139,92,246,.16),transparent 60%),
             radial-gradient(700px 480px at -10% 40%,rgba(217,70,239,.07),transparent 60%)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.04}
h1 em,h2 em,h3 em,.hx__h1 em,[data-words] em,.proof__statement em,.statement em,.auth__quote em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
::selection{background:var(--accent-strong);color:#fff}
.eyebrow,.section__eyebrow{color:var(--accent);letter-spacing:.18em;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before,.section__eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- Buttons: pill, gradient primary ---- */
.btn{border-radius:999px;padding:14px 28px;font-weight:600}
.btn--primary,.btn--solid{background:var(--grad);border:1px solid transparent;color:#fff;box-shadow:var(--glow)}
.btn--primary:hover,.btn--solid:hover{background:var(--grad);color:#fff;filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 14px 44px -10px rgba(168,85,247,.7)}
.btn--ghost{background:rgba(243,241,250,.03);border:1px solid var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:rgba(167,139,250,.12);border-color:var(--accent);color:var(--ink)}

/* ---- Nav ---- */
.nav.is-stuck{background:rgba(11,10,18,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.brand__img{height:32px}
.nav__links>a,.nav__dd>summary{transition:color .15s}
.nav__links>a:hover,.nav__dd>summary:hover{color:var(--ink)}
.nav__cta{border-radius:999px!important;background:var(--grad)!important;border:0!important;color:#fff!important;box-shadow:var(--glow)}
.nav__cta:hover{filter:brightness(1.1)}
.nav__dd-panel{border-radius:var(--radius);background:rgba(19,17,29,.97);backdrop-filter:blur(14px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(167,139,250,.12)}
.nav__dd-panel a{border-radius:8px}

/* ---- Hero ---- */
.hx__bg img{filter:saturate(.6) brightness(.88) contrast(1.05)}
.hx__bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(160deg,rgba(91,33,182,.62) 0%,rgba(38,20,72,.45) 55%,rgba(162,28,175,.4) 100%)}
.hx__scrim{background:
  linear-gradient(100deg,rgba(11,10,18,.95) 0%,rgba(11,10,18,.62) 46%,rgba(11,10,18,.12) 100%),
  radial-gradient(900px 600px at 80% 20%,rgba(139,92,246,.25),transparent 65%),
  linear-gradient(180deg,transparent 40%,rgba(11,10,18,.85) 88%,var(--canvas) 100%)}
.hx__bg::after{background:
  linear-gradient(100deg,rgba(11,10,18,.95) 0%,rgba(11,10,18,.66) 46%,rgba(30,16,58,.28) 100%),
  radial-gradient(900px 600px at 80% 20%,rgba(139,92,246,.28),transparent 65%),
  linear-gradient(180deg,transparent 40%,rgba(11,10,18,.85) 88%,var(--canvas) 100%)}
.hx__h1{font-size:clamp(2.7rem,6.4vw,6.4rem);letter-spacing:-.045em;line-height:.98;max-width:15ch}
.hx__ambient b{color:var(--ink)}
.hx__cue span{border-radius:999px;border-color:var(--line-strong)!important}

/* ---- Numbers / stats ---- */
.stat__fig,.results__big,.kpi__num{font-family:var(--display);font-weight:700;letter-spacing:-.05em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc__stat{font-family:var(--display);font-weight:600;letter-spacing:-.02em;color:var(--text-2)}
.svc__title,.results__label{font-family:var(--display);font-weight:650;letter-spacing:-.03em}
.svc__row{border-radius:14px}
.svc__row:hover{background:linear-gradient(90deg,rgba(139,92,246,.09),rgba(139,92,246,.02))}
.svc__title .u::after{background:var(--grad);border-radius:2px}

/* ---- Cards ---- */
.results__grid{border:0;gap:18px}
.results__card{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:var(--radius);border-right:1px solid var(--line)}
.results__card:last-child{border-right:1px solid var(--line)}
.kpi{border-radius:var(--radius)}
.net__card,.work__card,.faq-item,.about-media,.page-hero .card,.card{border-radius:var(--radius)}
.net__card{background:linear-gradient(180deg,var(--surface2),var(--surface));transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.net__card:hover{border-color:var(--line-strong);box-shadow:0 20px 50px -24px rgba(139,92,246,.6)}
.net__card--cta{background:var(--grad);border-color:transparent;box-shadow:var(--glow)}
.net__card--cta:hover{background:var(--grad)}
.net__card--cta .net__idx,.net__card--cta .net__name,.net__card--cta .net__cat{color:#fff}
.net__card--cta .net__metric{color:rgba(255,255,255,.82)}
.process__line i,.proof__bar,.net__progress i{background:var(--grad)}
.process__n{font-family:var(--display);font-weight:700}

/* ---- Forms ---- */
.field input,.field select,.field textarea{background:rgba(11,10,18,.7);border-radius:12px;border-color:rgba(243,241,250,.1)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-strong);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.seg__opt span{border-radius:999px}
.seg__opt input:checked + span{background:var(--grad);border-color:transparent;color:#fff}

/* ---- CTA band ---- */
.cta2__bg img{filter:saturate(.4) brightness(.9)}
.cta2__bg::after{background:radial-gradient(800px 420px at 50% 60%,rgba(139,92,246,.25),transparent 70%),linear-gradient(180deg,var(--canvas),rgba(11,10,18,.55),var(--canvas))}

/* ---- Footer ---- */
.footer{background:linear-gradient(180deg,var(--canvas),#0E0C17);border-top:1px solid var(--line);position:relative}
.footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.6),transparent)}
.footer h4{font-family:var(--sans);font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--text-3);font-weight:600}
.footer__col a:hover,.footer__contact a:hover{color:var(--accent)}
.footer__contact a{color:var(--ink)}

/* ---- Custom cursor / accents from anim.js ---- */
.hb-cursor{border-color:var(--accent)!important}

/* display copy: Sora has no italic — gradient replaces the serif italic */
h1,h2,h3{font-weight:700}
.testi__q{font-family:var(--display);font-style:normal;font-weight:600;letter-spacing:-.03em}
[data-words]{font-family:var(--display);font-weight:600;letter-spacing:-.035em}
.results__note,.cta2__sub{font-style:normal}