/* ============================================================================
   STIRSHAKEN.AI — CINEMATIC LAYER v2
   ----------------------------------------------------------------------------
   Loads AFTER style.css. Override layer only: it restyles selectors that
   already exist in the markup. No class names, IDs, routes, form actions or
   JS hooks are changed.

   WHAT CHANGED FROM v1, AND WHY
   v1 ran FOUR ambient systems at once (animated grid + drifting orbs +
   particle canvas + scanlines), plus a scanner sweep, a travelling timeline
   pulse and three spinning orbit rings. Everything glowed, everything looped,
   forever. When everything is emphasised, nothing is — and it burned CPU
   permanently for no informational gain.

   v2 keeps ONE ambient field (a restrained network grid), makes motion
   RESOLVE instead of loop, and spends the freed budget on the Services
   centrepiece. Richer to look at, lighter to run.

   Brand unchanged: purple #7C3AED / #9F5FF1 on #050816, Syne + DM Sans.
   Every surface, border and glow below is derived from those colours.

   CONTENTS
     1. Tokens — colour, elevation, motion, rhythm
     2. Typography scale
     3. Ambient field (the one that survived)
     4. Motion primitives + reveal system
     5. Navbar
     6. Buttons + focus
     7. Surfaces
     8. Hero
     9. Sections
    10. Components
    11. CTA banner + footer
    12. Forms
    13. Reduced motion + responsive
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS — all derived from the existing brand. No new hues.
   -------------------------------------------------------------------------- */
:root{
  /* Brand — unchanged source of truth */
  --c-purple:        #7C3AED;
  --c-purple-light:  #9F5FF1;
  --c-purple-bright: #A855F7;
  --c-purple-deep:   #6D28D9;

  /* Surfaces — a real elevation ladder, tinted with the brand rather than grey */
  --s-base:  #050816;
  --s-1:     rgba(255,255,255,.028);
  --s-2:     rgba(255,255,255,.045);
  --s-3:     rgba(255,255,255,.07);
  --s-tint:  rgba(124,58,237,.07);

  /* Borders — three weights, so hierarchy comes from structure, not glow */
  --b-hair:  rgba(255,255,255,.07);
  --b-soft:  rgba(159,95,241,.18);
  --b-live:  rgba(159,95,241,.42);

  /* Illumination — used sparingly, and only where it means something */
  --glow-sm: 0 0 20px -6px rgba(124,58,237,.55);
  --glow-md: 0 0 36px -10px rgba(124,58,237,.55);
  --lift-1:  0 10px 30px -18px rgba(0,0,0,.85);
  --lift-2:  0 26px 60px -30px rgba(0,0,0,.9);
  --lift-3:  0 40px 90px -40px rgba(0,0,0,.95);

  /* Status — the product's own language (StirShield already speaks these) */
  --ok:   #10B981;
  --warn: #F59E0B;
  --err:  #EF4444;
  --focus:#C4B5FD;

  /* Motion tokens — one language, reused everywhere */
  --t-fast:   .18s;
  --t-base:   .28s;
  --t-slow:   .55s;
  --t-reveal: .7s;
  --e-out:    cubic-bezier(.16,1,.3,1);   /* settles — for entrances */
  --e-inout:  cubic-bezier(.65,0,.35,1);  /* symmetric — for toggles */
  --rise:     22px;
  --stagger:  70ms;

  /* Rhythm */
  --sec-y:   clamp(64px, 8vw, 112px);
  --measure: 68ch;
}

/* ----------------------------------------------------------------------------
   2. TYPOGRAPHY — same faces (Syne + DM Sans), a real scale.
   v1 sized type ad hoc and blurred headlines with a 60px purple text-shadow.
   Blur is the opposite of authority, so it is gone.
   -------------------------------------------------------------------------- */
h1,.hero h1{
  font-size:clamp(2.15rem, 1.35rem + 3.1vw, 4.05rem);
  line-height:1.04;
  letter-spacing:-.028em;
  font-weight:800;
  text-shadow:none;
  text-wrap:balance;
}
/* Inner page heroes are a level down from the homepage. They were rendering at
   the same size, which made every subpage feel like a landing page and pushed
   the real content below the fold. */
.page-hero h1{
  font-size:clamp(1.9rem, 1.2rem + 2.1vw, 3.1rem);
  line-height:1.06;
  letter-spacing:-.024em;
  font-weight:800;
  text-shadow:none;
  text-wrap:balance;
}

.hero-sub,.page-hero p{
  font-size:clamp(1rem, .95rem + .28vw, 1.16rem);
  line-height:1.62;
  color:#A8B4C6;
  max-width:52ch;
  text-wrap:pretty;
}
.section-title{
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.7rem);
  line-height:1.1;
  letter-spacing:-.022em;
  font-weight:800;
  text-shadow:none;
  text-wrap:balance;
}
.section-subtitle,.section-sub{
  font-size:clamp(.98rem,.95rem + .2vw,1.08rem);
  line-height:1.62;
  color:#94A3B8;
  max-width:60ch;
  text-wrap:pretty;
}
.service-name,.blog-title,.faq-question,.why-feature h3{
  letter-spacing:-.012em;
  text-wrap:balance;
}
.service-desc,.blog-excerpt,.why-feature p{
  line-height:1.6;
  color:#94A3B8;
  text-wrap:pretty;
}

/* The gradient wordmark stays — tightened, no drop-shadow smear. */
.gradient-text{
  background:linear-gradient(112deg,#fff 0%,#EDE4FF 28%,var(--c-purple-light) 68%,var(--c-purple-bright) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:none;
}

/* Section label — a channel marker, not a pill of glow */
.section-label{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 13px;border-radius:100px;
  background:var(--s-tint);
  border:1px solid var(--b-soft);
  color:var(--c-purple-light);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:none;
}
.section-label::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--c-purple-light);box-shadow:0 0 7px var(--c-purple-light);
}

/* ----------------------------------------------------------------------------
   3. AMBIENT FIELD — the one that survived.
   A single fixed network grid with a soft brand wash. No particles, no orbs,
   no scanlines. It does not animate, so it costs nothing to keep on screen
   and never competes with content for attention.
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 760px at 82% -10%, rgba(124,58,237,.17), transparent 58%),
    radial-gradient(900px 680px at -8% 16%,  rgba(109,40,217,.12), transparent 55%),
    var(--s-base);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,58,237,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.055) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 55% 30%, #000 22%, transparent 76%);
          mask-image:radial-gradient(ellipse 78% 62% at 55% 30%, #000 22%, transparent 76%);
  /* NOTE: no animation. v1 drifted this forever for no informational gain. */
}
/* v1 leftovers — explicitly neutralised so nothing can re-enable them. */
body::after{content:none}
#cin-particles{display:none !important}
.cin-scan{display:none !important}

/* ----------------------------------------------------------------------------
   4. MOTION — the reveal system.
   One device, used everywhere: content rises and settles once. It does not
   loop. Stagger is driven by a custom property, so any container can sequence
   its children without bespoke CSS.
   -------------------------------------------------------------------------- */
.has-js [data-aos]{
  opacity:0;
  transform:translateY(var(--rise));
  transition:opacity var(--t-reveal) var(--e-out),
             transform var(--t-reveal) var(--e-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-aos].aos-animate{opacity:1;transform:none;will-change:auto}

.has-js .stagger > *{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.stagger.in > *{opacity:1;transform:none}

/* ----------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar{transition:background var(--t-base) var(--e-inout), box-shadow var(--t-base) var(--e-inout)}
.navbar.scrolled{
  background:linear-gradient(180deg, rgba(6,9,20,.93), rgba(6,9,20,.80));
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid transparent;
  box-shadow:0 1px 0 var(--b-soft), 0 14px 40px -30px rgba(0,0,0,.9);
}
.navbar.scrolled::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,95,241,.55),transparent);
}
.nav-link{position:relative;transition:color var(--t-fast) var(--e-inout)}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--c-purple-light);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-logo-img{filter:none}   /* §7: never glow or distort the logo */

/* ----------------------------------------------------------------------------
   6. BUTTONS — hierarchy from weight and contrast, not from glow
   -------------------------------------------------------------------------- */
.btn-primary,.btn-outline,.btn-ghost,.btn-check,.nav-btn-start,.nav-btn-portal{
  transition:transform var(--t-fast) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.btn-primary,.btn-check,.nav-btn-start{
  background:linear-gradient(135deg,var(--c-purple),var(--c-purple-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--lift-1);
}
.btn-primary:hover,.btn-check:hover,.nav-btn-start:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-1), var(--glow-sm);
}
.btn-primary:active,.btn-check:active,.nav-btn-start:active{transform:translateY(0)}
.btn-outline{border:1px solid var(--b-soft);background:var(--s-1)}
.btn-outline:hover{border-color:var(--b-live);background:var(--s-2);transform:translateY(-1px)}
.btn-ghost:hover{color:#fff;background:var(--s-1)}

/* Focus: one visible ring everywhere. WCAG 2.2 — never removed. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:8px;
}

/* ----------------------------------------------------------------------------
   7. SURFACES — one system. §18: not every item needs its own rounded card.
   -------------------------------------------------------------------------- */
.service-card,.glass-card,.benefit-card,.info-card,.why-feature,
.blog-card,.testimonial-card,.faq-item,.stat-card,.mini-stat{
  background:linear-gradient(168deg, var(--s-2), var(--s-1));
  border:1px solid var(--b-hair);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--lift-1);
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out);
}
.service-card:hover,.benefit-card:hover,.blog-card:hover,.why-feature:hover{
  transform:translateY(-3px);
  border-color:var(--b-soft);
  background:linear-gradient(168deg, var(--s-3), var(--s-2));
  box-shadow:var(--lift-2), var(--glow-sm);
}
/* A single quiet signature: a luminous top edge on hover. */
.service-card{position:relative;overflow:hidden}
.service-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-purple-light),transparent);
  opacity:0;transition:opacity var(--t-base) var(--e-out);
}
.service-card:hover::after{opacity:1}
.service-icon{
  background:linear-gradient(140deg, rgba(124,58,237,.35), rgba(159,95,241,.14));
  border:1px solid var(--b-soft);
  box-shadow:none;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.service-card:hover .service-icon{transform:translateY(-1px);box-shadow:var(--glow-sm)}

/* ----------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero,.page-hero{background:transparent;overflow:hidden}
.hero .mesh-bg::before{
  width:820px;height:820px;
  background:radial-gradient(circle, rgba(124,58,237,.22) 0%, transparent 66%);
  filter:blur(6px);
}
.hero .mesh-bg::after{
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(159,95,241,.13) 0%, transparent 70%);
}
.hero-eyebrow{background:var(--s-tint);border-color:var(--b-soft);box-shadow:none}
.trust-badge{
  background:var(--s-1);border-color:var(--b-hair);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.trust-badge:hover{border-color:var(--b-soft);background:var(--s-2)}
.trust-badge-icon{box-shadow:0 0 10px rgba(16,185,129,.45)}

/* Hero scorecard — settles once on load, then holds still. v1 bobbed forever. */
.hero-banner-wrap{
  border-radius:20px;
  box-shadow:0 0 0 1px var(--b-soft), var(--lift-3), 0 0 70px -30px rgba(124,58,237,.5);
  animation:none;
}
.hcc-card{
  background:linear-gradient(162deg, rgba(124,58,237,.16), rgba(7,10,24,.78));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.floating-card{
  background:rgba(7,10,24,.86);border-color:var(--b-soft);
  box-shadow:var(--lift-2);
  animation:none;
}
/* The live dot is the ONE thing that still pulses — because it means "live". */
.hcc-live-dot{box-shadow:0 0 9px rgba(52,211,153,.85)}

.score-ring{filter:none}
.score-ring::after{content:none}   /* v1 spun a ring around it forever */

/* Orbit rings: reduced to one, slowed right down. Reads as a network field
   rather than a spaceship dashboard. */
.cmd-orbit span:nth-child(2),
.cmd-orbit span:nth-child(3){display:none}
.cmd-orbit span:nth-child(1){
  border-color:rgba(159,95,241,.13);
  animation:cin-spin 70s linear infinite;
}
@keyframes cin-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cmd-node{
  background:var(--c-purple-light);
  box-shadow:0 0 10px 1px rgba(159,95,241,.7);
  animation:cin-verify 3.4s var(--e-inout) infinite;
}
/* A verification pulse, not a decorative twinkle. */
@keyframes cin-verify{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%    {opacity:1;  transform:scale(1.15)}
}

/* ----------------------------------------------------------------------------
   9. SECTIONS
   -------------------------------------------------------------------------- */
.stats,.checker,.services,.how-it-works,.why-us,.blog-preview,
.testimonials,.faq,.cta-banner,.section{
  background:transparent !important;position:relative;
}
.section,.services,.how-it-works,.why-us,.faq,.testimonials,.blog-preview{
  padding-top:var(--sec-y);padding-bottom:var(--sec-y);
}
/* Hairline seam between sections — structure instead of glow */
.services::before,.why-us::before,.faq::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1200px,92%);height:1px;
  background:linear-gradient(90deg,transparent,var(--b-hair) 20%,var(--b-hair) 80%,transparent);
}

/* ----------------------------------------------------------------------------
   10. COMPONENTS
   -------------------------------------------------------------------------- */
.stats-grid{
  background:var(--s-tint);border-color:var(--b-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--lift-2);
}
.stat-card{background:rgba(8,11,26,.6)}
.stat-card:hover{background:rgba(124,58,237,.07)}
.stat-number.purple,.mini-stat-num,.kpi .num{filter:none}

/* Compliance checker — the scanner sweep is gone. A quiet top rail remains. */
.checker-box{
  background:linear-gradient(165deg, rgba(124,58,237,.09), rgba(7,10,24,.6));
  border-color:var(--b-soft);
  box-shadow:var(--lift-3), inset 0 1px 0 rgba(255,255,255,.05);
}
.checker-box::before{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--c-purple-light),transparent);
  filter:none;
}
.checker-box::after{content:none}   /* was: cin-scanner sweep, infinite */

/* Timeline — the travelling pulse is gone; the connector reads as a path */
.timeline::before{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--b-live),var(--b-live),transparent);
  filter:none;
}
.timeline::after{content:none}      /* was: cin-travel, infinite */
.timeline-num{
  box-shadow:0 0 0 1px var(--b-soft), var(--lift-1);
  transition:box-shadow var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.timeline-num::after{content:none}  /* was: a pulsing halo on every step */
.timeline-step:hover .timeline-num{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--b-live), var(--glow-sm);
}

.why-icon{box-shadow:none;border:1px solid var(--b-soft)}
.why-visual-placeholder{
  background:linear-gradient(155deg, rgba(124,58,237,.13), rgba(7,10,24,.55));
  border:1px solid var(--b-hair);border-radius:16px;
}
.mini-stat{background:rgba(7,10,24,.92);border-color:var(--b-soft);box-shadow:var(--lift-2)}

.blog-thumb{background:linear-gradient(135deg, rgba(124,58,237,.26), rgba(7,10,24,.45))}
.blog-thumb::after{content:none}
.blog-cat{box-shadow:none;border:1px solid var(--b-soft)}

/* Testimonials — presentation only. Content retained verbatim (see report). */
.testimonial-card{position:relative;overflow:hidden}
.testimonial-card::before{content:none}
.t-avatar{box-shadow:none;border:1px solid var(--b-soft)}
.t-verified{box-shadow:none}

.faq-item{transition:border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out)}
.faq-item:hover{border-color:var(--b-soft)}
.faq-item.open{
  border-color:var(--b-live);
  background:linear-gradient(168deg, var(--s-3), var(--s-1));
  box-shadow:var(--lift-2);
}
.faq-icon{transition:transform var(--t-base) var(--e-inout)}
.faq-item.open .faq-icon{box-shadow:none}

/* ----------------------------------------------------------------------------
   11. CTA BANNER + FOOTER
   -------------------------------------------------------------------------- */
.cta-banner::before{
  background:radial-gradient(680px 340px at 50% 0%, rgba(124,58,237,.22), transparent 70%);
}
.cta-banner-box{
  padding:clamp(36px,5vw,60px) clamp(22px,4vw,44px);
  border-radius:24px;
  background:linear-gradient(168deg, rgba(124,58,237,.10), rgba(7,10,24,.55));
  border:1px solid var(--b-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--lift-3);
}
.cta-banner-box::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,95,241,.7),transparent);
}
.footer{
  background:linear-gradient(180deg, rgba(7,10,24,.35), rgba(4,6,15,.92));
  border-top:1px solid transparent;position:relative;
}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--b-soft),transparent);
}
.footer-logo-img{filter:none}
.footer-link{
  transition:color var(--t-fast) var(--e-inout), transform var(--t-fast) var(--e-out);
  display:inline-block;
}
.footer-link:hover{color:#fff;transform:translateX(2px)}
.social-link{transition:border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out)}
.social-link:hover{box-shadow:none;border-color:var(--b-live);background:var(--s-2)}
#stickyCTA a{box-shadow:var(--lift-2), inset 0 0 0 1px var(--b-soft)}

/* ----------------------------------------------------------------------------
   12. FORMS — field names, validation and destinations untouched (§19)
   -------------------------------------------------------------------------- */
.form-control,.checker-field input,
input[type=text],input[type=email],input[type=tel],
input[type=number],input[type=search],select,textarea{
  background:var(--s-1);
  border:1px solid var(--b-hair);
  border-radius:10px;
  color:#F1F5F9;
  transition:border-color var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.form-control:hover,select:hover,textarea:hover{border-color:var(--b-soft)}
.form-control:focus,.checker-field input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--b-live);
  background:var(--s-2);
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}
::placeholder{color:#5B6879}

/* ----------------------------------------------------------------------------
   13. REDUCED MOTION + RESPONSIVE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  [data-aos],[data-aos].aos-animate,.stagger > *{
    opacity:1 !important;transform:none !important;
  }
}

@media (max-width:1024px){
  :root{--sec-y:clamp(52px,7vw,80px)}
}
@media (max-width:768px){
  :root{--rise:14px;--stagger:45ms}
  body::before{background-size:44px 44px}
  .cmd-orbit{display:none}
  /* Nothing on mobile animates forever. */
  .cmd-node{animation:none;opacity:.8}
  .hero-banner-wrap{box-shadow:0 0 0 1px var(--b-soft), var(--lift-2)}
}

/* A decorative layer must never create a horizontal scrollbar. */
html,body{max-width:100%;overflow-x:hidden}

/* ============================================================================
   14. SERVICES — THE DEPENDENCY GRAPH
   ----------------------------------------------------------------------------
   The spatial arrangement carries information: horizontal position = stage in
   the filing sequence, and every connector is a real regulatory prerequisite.
   Nothing here is scattered for decoration.

   All nodes are server-rendered <a> elements. CSS positions them; SVG draws the
   connectors; a little JS highlights a node's prerequisites on hover. With JS
   off the page is complete and readable — the graph simply stops highlighting.
   ========================================================================== */
.dg-intro{max-width:60ch;margin-bottom:30px}
.dg-intro .section-title{margin-bottom:12px}

/* ---- Stage rail: the four phases the spine passes through --------------- */
.dg-stages{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;list-style:none;margin:0 0 14px;padding:0;
}
.dg-stage{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:10px;
  background:var(--s-1);border:1px solid var(--b-hair);
}
.dg-stage-n{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;border-radius:6px;
  background:var(--s-tint);border:1px solid var(--b-soft);
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;color:var(--c-purple-light);
}
.dg-stage-l{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#94A3B8;
}

/* ---- The graph field ---------------------------------------------------- */
.dg{
  position:relative;
  height:640px;
  border:1px solid var(--b-hair);
  border-radius:20px;
  background:
    linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px) 0 0/25% 100%,
    linear-gradient(168deg, var(--s-1), transparent);
  padding:8px;
  overflow:hidden;
}
.dg-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dg-wire{
  stroke-dasharray:2 6;
  opacity:.55;
  transition:opacity var(--t-base) var(--e-out), stroke-width var(--t-base) var(--e-out);
  /* A signal travels the spine toward the core — the one looping animation on
     this page, and it depicts exactly what it is: a filing moving through its
     prerequisites toward verification. */
  animation:dg-flow 3.4s linear infinite;
}
@keyframes dg-flow{to{stroke-dashoffset:-32}}

/* Nodes ------------------------------------------------------------------- */
.dg-node{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translateY(-50%);
  width:14%;min-width:172px;
  z-index:2;display:block;text-decoration:none;
  padding:13px 14px 12px;
  border-radius:13px;
  background:linear-gradient(168deg, rgba(19,23,45,.97), rgba(7,10,24,.95));
  border:1px solid var(--b-hair);
  box-shadow:var(--lift-1);
  transition:border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out),
             opacity var(--t-base) var(--e-out);
}
.dg-node:hover,.dg-node:focus-visible{
  border-color:var(--b-live);
  box-shadow:var(--lift-2), var(--glow-md);
  transform:translateY(-50%) translateY(-2px);
  z-index:4;
}
.dg-node-stage{
  position:absolute;top:-1px;right:-1px;
  display:grid;place-items:center;
  width:20px;height:20px;
  border-radius:0 13px 0 8px;
  background:var(--s-tint);border-left:1px solid var(--b-hair);border-bottom:1px solid var(--b-hair);
  font-size:10px;font-weight:700;color:var(--c-purple-light);
}
.dg-node-name{
  display:block;font-family:'Syne',sans-serif;
  font-size:13.5px;font-weight:800;color:#fff;letter-spacing:-.012em;
  margin-bottom:5px;padding-right:16px;
}
.dg-node-desc{display:block;font-size:11.5px;line-height:1.5;color:#94A3B8}
.dg-node-req{
  display:block;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--b-hair);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:#6E7C8F;
}

/* Prerequisite highlighting. Hovering a node dims everything that is not one of
   its prerequisites — so the page ANSWERS "what do I need first?" */
.dg.focusing .dg-node{opacity:.28}
.dg.focusing .dg-node.is-lit{opacity:1}
.dg.focusing .dg-node.is-lit .dg-node-req{color:var(--c-purple-light)}
.dg.focusing .dg-wire{opacity:.08;animation-play-state:paused}
.dg.focusing .dg-wire.is-lit{opacity:1;stroke-width:.7;animation-play-state:running}

/* ---- The four services that are NOT gated -------------------------------- */
.dg-parallel{margin-top:34px;padding-top:26px;border-top:1px solid var(--b-hair)}
.dg-parallel-head{
  font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#fff;
  margin-bottom:16px;letter-spacing:-.01em;
}
.dg-parallel-head span{color:#6E7C8F;font-weight:600;font-size:13px}
.dg-parallel-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
}
.dg-chip{
  display:block;text-decoration:none;
  padding:15px 16px;border-radius:13px;
  background:var(--s-1);
  border:1px solid var(--b-hair);
  transition:border-color var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out);
}
.dg-chip:hover,.dg-chip:focus-visible{
  border-color:var(--b-soft);background:var(--s-2);transform:translateY(-2px);
}
.dg-chip-name{
  display:block;font-family:'Syne',sans-serif;font-size:13.5px;font-weight:800;
  color:#fff;margin-bottom:4px;letter-spacing:-.01em;
}
.dg-chip-desc{display:block;font-size:11.5px;line-height:1.5;color:#94A3B8}

/* ---- Entrance: nodes arrive by stage, left to right --------------------- */
.has-js .dg-node{opacity:0;transform:translateY(-50%) translateY(12px)}
.has-js .dg.in .dg-node{opacity:1;transform:translateY(-50%)}
.has-js .dg.in .dg-s1{transition-delay:.05s}
.has-js .dg.in .dg-s2{transition-delay:.16s}
.has-js .dg.in .dg-s3{transition-delay:.27s}
.has-js .dg.in .dg-s4{transition-delay:.38s}
.has-js .dg-wire{opacity:0}
.has-js .dg.in .dg-wire{opacity:.55;transition:opacity .9s var(--e-out) .45s}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width:1180px){
  .dg{height:720px}
  .dg-node{width:19%;min-width:168px}
  .dg-node-desc{display:none}          /* keep the name + the prerequisite */
}

/* ---- Mobile: the graph becomes a STAGED LIST, not a broken diagram -------
   The dependency information is the point, so it must survive. Each node keeps
   its stage badge and its "Requires:" line — read top to bottom, that IS the
   order of operations. Nothing is hidden. (§24) */
@media (max-width:860px){
  .dg{
    height:auto;overflow:visible;padding:0;
    border:0;background:none;
    display:flex;flex-direction:column;gap:10px;
  }
  .dg-wires{display:none}
  .dg-node{
    position:static;width:auto;min-width:0;
    transform:none !important;opacity:1 !important;
    border-left:2px solid var(--b-soft);
  }
  .dg-node-desc{display:block}
  .dg-node:hover,.dg-node:focus-visible{transform:none !important}
  .dg.focusing .dg-node{opacity:1}
  .dg-stages{grid-template-columns:repeat(2,1fr)}
  .has-js .dg-node{opacity:1;transform:none}
}
@media (max-width:420px){
  .dg-stages{grid-template-columns:1fr}
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .dg-wire{animation:none;stroke-dasharray:none;opacity:.5}
  .dg-node,.dg-chip{opacity:1 !important;transform:translateY(-50%) !important;transition:none !important}
}

/* ---- Hidden tab --------------------------------------------------------- */
html.is-hidden *,
html.is-hidden *::before,
html.is-hidden *::after{animation-play-state:paused !important}


/* ----------------------------------------------------------------------------
   14b. THE VERIFIED CORE
   The dependency graph is the PATH. This is the DESTINATION — the reason every
   filing on the page exists. Signal flows left-to-right into it, and it breathes
   slowly, because it represents something live: your standing on the FCC's
   authorized provider list.
   -------------------------------------------------------------------------- */
.dg-core{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  z-index:3;
  width:132px;height:132px;border-radius:50%;
  display:grid;place-items:center;align-content:center;gap:2px;
  text-align:center;padding:10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(124,58,237,.42), rgba(7,10,24,.96) 72%);
  border:1px solid var(--b-live);
  box-shadow:0 0 70px -14px rgba(124,58,237,.75), inset 0 1px 0 rgba(255,255,255,.12);
}
/* A slow halo — the one "living" element, and it means "still verified". */
.dg-core-halo{
  position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(159,95,241,.3);
  animation:dg-breathe 4.6s var(--e-inout) infinite;
}
@keyframes dg-breathe{
  0%,100%{transform:scale(1);opacity:.55}
  50%    {transform:scale(1.07);opacity:1}
}
/* The attestation checkmark — drawn in CSS, no image. */
.dg-core-seal{
  width:24px;height:24px;border-radius:7px;flex:none;
  background:linear-gradient(140deg,var(--c-purple-light),var(--c-purple));
  display:grid;place-items:center;margin-bottom:3px;
  box-shadow:0 0 16px -3px rgba(159,95,241,.9);
  position:relative;
}
.dg-core-seal::after{
  content:"";width:6px;height:11px;
  border:2px solid #fff;border-top:0;border-left:0;
  transform:rotate(42deg) translateY(-1px);
}
.dg-core-label{
  font-family:'Syne',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1;
}
.dg-core-sub{
  font-size:9.5px;line-height:1.35;color:#A78BFA;
  letter-spacing:.02em;
}
/* Terminal wires read brighter — they carry the result, not a prerequisite. */
.dg-wire-core{stroke-width:.5;opacity:.75}
.dg.focusing .dg-wire-core{opacity:.08}

/* ----------------------------------------------------------------------------
   15. PAGE-HERO RHYTHM
   The page hero and the section beneath it were each applying a full --sec-y of
   padding, stacking into a large empty band. Tighten the seam.
   -------------------------------------------------------------------------- */
.page-hero{
  padding-top:clamp(56px,7vw,84px);
  padding-bottom:clamp(18px,2.2vw,30px);
}
.page-hero + .section{padding-top:clamp(24px,3vw,40px)}
.page-hero p{margin-top:14px}
#path{padding-top:clamp(20px,2.6vw,34px)}
#path .dg-intro{margin-bottom:26px}
#path .dg-intro .section-title{font-size:clamp(1.5rem,1.15rem + 1.35vw,2.35rem)}


/* Mobile: the core becomes the closing statement of the list, not a floating orb. */
@media (max-width:860px){
  .dg-core{
    position:static;transform:none;
    width:auto;height:auto;border-radius:14px;
    order:99;margin-top:4px;padding:18px;
    display:flex;flex-direction:column;align-items:center;
  }
  .dg-core-halo{display:none}
  .dg-core-sub{font-size:11px}
  .dg-node{width:auto;min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .dg-core-halo{animation:none}
}

/* ============================================================================
   16. STIRSHIELD — dedicated product page (/compliance-guard)
   ----------------------------------------------------------------------------
   Every selector here is prefixed .ss-* and used ONLY by stirshield.php.
   Nothing in this block can affect the homepage, the services graph, or the
   other 13 service pages.
   ========================================================================== */
.ss-crumb{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:#6E7C8F;margin-bottom:22px;
}
.ss-crumb a{color:#94A3B8;text-decoration:none;transition:color var(--t-fast) var(--e-inout)}
.ss-crumb a:hover{color:var(--c-purple-light)}
.ss-crumb [aria-current]{color:#E2E8F0}

.ss-hero-grid{
  display:grid;grid-template-columns:1.35fr .85fr;gap:44px;align-items:start;
}
.ss-hero-copy h1{margin:16px 0 16px}
.ss-hero-lead{
  margin-top:16px;padding-left:14px;
  border-left:2px solid var(--b-live);
  font-size:1.02rem;line-height:1.6;color:#E2E8F0;max-width:52ch;
}
.ss-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* The obligations panel — a capability list, not a mock dashboard. */
.ss-panel{
  border-radius:18px;padding:20px;
  background:linear-gradient(168deg, rgba(124,58,237,.11), rgba(7,10,24,.82));
  border:1px solid var(--b-soft);
  box-shadow:var(--lift-3), 0 0 60px -30px rgba(124,58,237,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ss-panel-head{
  display:flex;align-items:center;gap:9px;
  padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--b-hair);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#94A3B8;
}
.ss-live{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ok);box-shadow:0 0 8px var(--ok);
  animation:cin-verify 3.4s var(--e-inout) infinite;
}
.ss-panel-list{list-style:none;margin:0;padding:0}
.ss-panel-list li{
  display:flex;align-items:center;gap:11px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:13.5px;color:#E2E8F0;
}
.ss-panel-list li:last-child{border-bottom:0}
.ss-tick{
  flex:none;width:16px;height:16px;border-radius:5px;
  border:1px solid rgba(159,95,241,.5);
  display:grid;place-items:center;position:relative;
}
.ss-tick::after{
  content:"";width:4px;height:8px;
  border:1.5px solid var(--c-purple-light);border-top:0;border-left:0;
  transform:rotate(42deg) translateY(-1px);
}
.ss-panel-foot{
  padding-top:14px;margin-top:6px;border-top:1px solid var(--b-hair);
  font-size:11px;color:rgba(148,163,184,.7);text-align:center;
}

/* The stakes */
.ss-stakes-box{
  padding:clamp(28px,4vw,46px);
  border-radius:20px;
  background:linear-gradient(168deg, rgba(239,68,68,.05), rgba(7,10,24,.5));
  border:1px solid rgba(239,68,68,.16);
  box-shadow:var(--lift-2);
}
.ss-stakes-box .section-title{margin:0 0 12px}
.ss-stakes-box .section-subtitle{margin:0;max-width:70ch}

/* Monitor cards */
.ss-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;margin-top:30px;
}
.ss-card{
  position:relative;overflow:hidden;
  padding:24px;border-radius:16px;
  background:linear-gradient(168deg, var(--s-2), var(--s-1));
  border:1px solid var(--b-hair);
  box-shadow:var(--lift-1);
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.ss-card:hover{
  transform:translateY(-3px);
  border-color:var(--b-soft);
  box-shadow:var(--lift-2), var(--glow-sm);
}
.ss-card-bar{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-purple-light),transparent);
  opacity:0;transition:opacity var(--t-base) var(--e-out);
}
.ss-card:hover .ss-card-bar{opacity:1}
.ss-card-icon{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:15px;font-size:21px;
  background:linear-gradient(140deg, rgba(124,58,237,.35), rgba(159,95,241,.13));
  border:1px solid var(--b-soft);
}
.ss-card-name{
  font-family:'Syne',sans-serif;font-size:16px;font-weight:800;
  color:#fff;margin:0 0 8px;letter-spacing:-.012em;
}
.ss-card-body{font-size:13.5px;line-height:1.6;color:#94A3B8;margin:0}

/* Recovery */
.ss-recover{
  display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  padding:clamp(26px,3.5vw,42px);
  border-radius:20px;
  background:linear-gradient(168deg, var(--s-tint), rgba(7,10,24,.5));
  border:1px solid var(--b-soft);
  box-shadow:var(--lift-2);
}
.ss-recover-copy .section-subtitle{margin-bottom:22px}
.ss-recover-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ss-recover-list li{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:11px;
  background:rgba(7,10,24,.6);border:1px solid var(--b-hair);
  font-size:13px;color:#E2E8F0;
}

/* Why */
.ss-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.ss-why-item{display:flex;gap:15px;align-items:flex-start}
.ss-why-n{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--s-tint);border:1px solid var(--b-soft);
  font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:var(--c-purple-light);
}
.ss-why-item h3{
  font-family:'Syne',sans-serif;font-size:15.5px;font-weight:800;
  color:#fff;margin:5px 0 7px;letter-spacing:-.01em;
}
.ss-why-item p{font-size:13.5px;line-height:1.6;color:#94A3B8;margin:0}

/* Responsive */
@media (max-width:980px){
  .ss-hero-grid{grid-template-columns:1fr;gap:32px}
  .ss-recover{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  .ss-ctas{flex-direction:column;align-items:stretch}
  .ss-ctas a{text-align:center}
  .ss-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .ss-live{animation:none}
}

/* ============================================================================
   17. ABOUT PAGE  (/about)
   ----------------------------------------------------------------------------
   Every selector is prefixed .ab-* and used ONLY by about.php. Nothing here can
   reach the homepage, the services graph, StirShield, or any service page.
   ========================================================================== */
.ab-hero h1{margin:16px 0 18px;max-width:20ch}
.ab-lead{max-width:60ch}
.ab-claim{
  margin-top:18px;padding-left:14px;
  border-left:2px solid var(--b-live);
  font-family:'Syne',sans-serif;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  font-weight:700;line-height:1.5;color:#fff;max-width:46ch;
}
.ab-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* Facts — verifiable, not flattering */
.ab-facts{
  list-style:none;margin:44px 0 0;padding:22px 0 0;
  border-top:1px solid var(--b-hair);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:660px;
}
.ab-facts li{display:flex;flex-direction:column;gap:4px}
.ab-fact-n{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);
  font-weight:800;line-height:1;
  background:linear-gradient(120deg,#fff,var(--c-purple-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ab-fact-l{font-size:12px;color:#94A3B8;letter-spacing:.03em}

/* The argument + the stake */
.ab-argument{display:grid;grid-template-columns:1.3fr .8fr;gap:44px;align-items:start}
.ab-argument-copy .section-subtitle{margin-bottom:16px}
.ab-stake{
  padding:26px;border-radius:18px;
  background:linear-gradient(168deg, rgba(239,68,68,.06), rgba(7,10,24,.55));
  border:1px solid rgba(239,68,68,.18);
  box-shadow:var(--lift-2);
}
.ab-stake-head{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#F87171;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.ab-stake-head::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#EF4444;box-shadow:0 0 8px #EF4444;
}
.ab-stake-body{
  font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;
  line-height:1.35;color:#fff;margin:0 0 12px;letter-spacing:-.01em;
}
.ab-stake-sub{font-size:13.5px;line-height:1.6;color:#94A3B8;margin:0}
.ab-stake-sub em{color:#E2E8F0;font-style:italic}

/* Why-different cards */
.ab-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;margin-top:30px;
}
.ab-card{
  position:relative;overflow:hidden;
  padding:24px;border-radius:16px;
  background:linear-gradient(168deg, var(--s-2), var(--s-1));
  border:1px solid var(--b-hair);
  box-shadow:var(--lift-1);
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.ab-card:hover{
  transform:translateY(-3px);border-color:var(--b-soft);
  box-shadow:var(--lift-2), var(--glow-sm);
}
.ab-card-bar{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-purple-light),transparent);
  opacity:0;transition:opacity var(--t-base) var(--e-out);
}
.ab-card:hover .ab-card-bar{opacity:1}
.ab-card-icon{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:15px;font-size:21px;
  background:linear-gradient(140deg, rgba(124,58,237,.35), rgba(159,95,241,.13));
  border:1px solid var(--b-soft);
}
.ab-card-h{
  font-family:'Syne',sans-serif;font-size:16px;font-weight:800;
  color:#fff;margin:0 0 8px;letter-spacing:-.012em;
}
.ab-card-b{font-size:13.5px;line-height:1.6;color:#94A3B8;margin:0}

/* Coverage */
.ab-coverage{
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  padding:clamp(26px,3.5vw,42px);border-radius:20px;
  background:linear-gradient(168deg, var(--s-tint), rgba(7,10,24,.5));
  border:1px solid var(--b-soft);
  box-shadow:var(--lift-2);
}
.ab-coverage .section-subtitle{margin-bottom:22px}
.ab-cover-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.ab-cover-list li{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:11px;
  background:rgba(7,10,24,.6);border:1px solid var(--b-hair);
  font-size:12.5px;color:#E2E8F0;
}
.ab-tick{
  flex:none;width:15px;height:15px;border-radius:5px;
  border:1px solid rgba(159,95,241,.5);
  display:grid;place-items:center;
}
.ab-tick::after{
  content:"";width:4px;height:7px;
  border:1.5px solid var(--c-purple-light);border-top:0;border-left:0;
  transform:rotate(42deg) translateY(-1px);
}

/* Responsive */
@media (max-width:980px){
  .ab-argument,.ab-coverage{grid-template-columns:1fr;gap:30px}
}
@media (max-width:768px){
  .ab-hero h1{max-width:none}
  .ab-facts{grid-template-columns:1fr;gap:14px;max-width:none}
  .ab-facts li{flex-direction:row;align-items:baseline;gap:12px}
  .ab-cover-list{grid-template-columns:1fr}
  .ab-ctas{flex-direction:column;align-items:stretch}
  .ab-ctas a{text-align:center}
  .ab-grid{grid-template-columns:1fr}
}

/* ============================================================================
   18. BLOG INDEX  (/blog)
   ----------------------------------------------------------------------------
   Every selector is prefixed .bl-* and used ONLY by blog/index.php.
   Cannot reach the homepage, services graph, StirShield, About, or any service page.

   The design called for DM Mono. That would be a THIRD webfont on every blog
   page load for a handful of metadata lines, so we use the system mono stack:
   identical intent, zero network cost.
   ========================================================================== */
:root{ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.bl-mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:-.01em;color:#64748B}
.bl-dot{color:#3E4A5C}

.bl-hero h1{margin:16px 0 14px}
.bl-hero .hero-sub{max-width:56ch}

/* Search */
.bl-filter{margin-top:28px}
.bl-search{
  display:flex;align-items:center;gap:10px;
  max-width:540px;padding:6px 6px 6px 14px;
  border-radius:12px;
  background:var(--s-1);border:1px solid var(--b-hair);
  transition:border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.bl-search:focus-within{border-color:var(--b-live);background:var(--s-2)}
.bl-search-ico{color:#64748B;font-size:16px;flex:none}
.bl-search input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:none;
  color:#F1F5F9;font-family:inherit;font-size:14px;padding:9px 0;
}
.bl-search input::placeholder{color:#5B6879}
.bl-search-btn{
  flex:none;padding:9px 16px;border-radius:9px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--c-purple),var(--c-purple-deep));
  color:#fff;font-family:inherit;font-size:13px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.bl-search-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-sm)}

/* Category chips */
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bl-chip{
  padding:7px 14px;border-radius:100px;text-decoration:none;
  background:var(--s-1);border:1px solid var(--b-hair);
  color:#94A3B8;font-size:12.5px;font-weight:600;
  transition:border-color var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
}
.bl-chip:hover{color:#fff;border-color:var(--b-soft);background:var(--s-2)}
.bl-chip.is-on{
  background:var(--s-tint);border-color:var(--b-live);color:#E9D5FF;
}
.bl-result{margin-top:16px;font-size:13px;color:#94A3B8}
.bl-clear{margin-left:10px;color:var(--c-purple-light);text-decoration:none;font-weight:600}
.bl-clear:hover{text-decoration:underline}

/* Category badge */
.bl-cat{
  display:inline-block;margin-bottom:11px;
  padding:4px 10px;border-radius:100px;
  background:var(--s-tint);border:1px solid var(--b-soft);
  color:var(--c-purple-light);
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}

/* ---- Featured ---------------------------------------------------------- */
.bl-feat{
  display:grid;grid-template-columns:.85fr 1.15fr;
  border-radius:20px;overflow:hidden;text-decoration:none;
  border:1px solid var(--b-soft);
  background:linear-gradient(168deg, var(--s-2), var(--s-1));
  box-shadow:var(--lift-2);
  margin-bottom:34px;
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.bl-feat:hover{
  transform:translateY(-3px);
  border-color:var(--b-live);
  box-shadow:var(--lift-3), var(--glow-md);
}
.bl-feat-panel{
  position:relative;padding:32px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(124,58,237,.16), transparent 62%),
    linear-gradient(160deg, rgba(11,17,32,.9), rgba(5,8,22,.95));
  border-right:1px solid var(--b-hair);
}
.bl-feat-tag{
  align-self:flex-start;
  padding:4px 11px;border-radius:100px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:#6EE7B7;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
/* The post's REAL metadata, rendered as a readout. Nothing here is invented. */
.bl-meta-readout{margin:0;font-family:var(--font-mono);font-size:12px;line-height:2}
.bl-meta-readout > div{
  display:flex;justify-content:space-between;gap:16px;max-width:300px;
}
.bl-meta-readout dt{color:#64748B;margin:0}
.bl-meta-readout dd{color:#94A3B8;margin:0}
.bl-meta-readout .bl-v-ok{color:#6EE7B7}

.bl-feat-body{padding:34px;display:flex;flex-direction:column;justify-content:center}
.bl-feat-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem);
  line-height:1.14;letter-spacing:-.02em;color:#F8FAFC;
  margin:0 0 12px;text-wrap:balance;
}
.bl-feat-excerpt{font-size:14.5px;color:#94A3B8;line-height:1.65;margin:0 0 20px}
.bl-feat-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bl-feat-go{
  margin-left:auto;font-size:12.5px;font-weight:700;color:var(--c-purple-light);
  transition:transform var(--t-base) var(--e-out);
}
.bl-feat:hover .bl-feat-go{transform:translateX(3px)}

/* ---- Grid -------------------------------------------------------------- */
.bl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;
}
.bl-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:22px;border-radius:16px;text-decoration:none;
  background:linear-gradient(168deg, var(--s-2), var(--s-1));
  border:1px solid var(--b-hair);
  box-shadow:var(--lift-1);
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.bl-card:hover{
  transform:translateY(-3px);border-color:var(--b-soft);
  box-shadow:var(--lift-2), var(--glow-sm);
}
.bl-card-bar{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-purple-light),transparent);
  opacity:0;transition:opacity var(--t-base) var(--e-out);
}
.bl-card:hover .bl-card-bar{opacity:1}
.bl-card-title{
  font-family:'Syne',sans-serif;font-size:16px;font-weight:800;
  color:#fff;line-height:1.3;letter-spacing:-.012em;
  margin:0 0 9px;text-wrap:balance;
}
.bl-card-excerpt{
  font-size:13px;line-height:1.6;color:#94A3B8;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-card-foot{
  margin-top:auto;padding-top:13px;
  border-top:1px solid var(--b-hair);
  display:flex;align-items:center;gap:8px;
}

/* ---- Empty state -------------------------------------------------------- */
.bl-empty{
  text-align:center;padding:64px 24px;
  border:1px dashed var(--b-soft);border-radius:20px;
  background:var(--s-1);
}
.bl-empty-ico{
  width:52px;height:52px;margin:0 auto 18px;
  display:grid;place-items:center;border-radius:14px;font-size:24px;
  background:var(--s-tint);border:1px solid var(--b-soft);color:var(--c-purple-light);
}
.bl-empty-h{
  font-family:'Syne',sans-serif;font-size:19px;font-weight:800;color:#fff;margin:0 0 8px;
}
.bl-empty-p{font-size:14px;color:#94A3B8;margin:0 0 22px}

/* ---- Pager -------------------------------------------------------------- */
.bl-pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--b-hair);
}
.bl-page{
  padding:10px 18px;border-radius:10px;text-decoration:none;
  background:var(--s-1);border:1px solid var(--b-hair);
  color:#E2E8F0;font-size:13px;font-weight:600;
  transition:border-color var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.bl-page:hover{border-color:var(--b-live);background:var(--s-2);transform:translateY(-1px)}
.bl-page.is-off{opacity:.35;pointer-events:none}
.bl-page-of{font-family:var(--font-mono);font-size:12px;color:#64748B}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:900px){
  .bl-feat{grid-template-columns:1fr}
  .bl-feat-panel{border-right:0;border-bottom:1px solid var(--b-hair);padding:24px}
  .bl-feat-body{padding:26px}
}
@media (max-width:768px){
  .bl-grid{grid-template-columns:1fr}
  .bl-search{max-width:none}
  .bl-search-btn{padding:9px 13px}
  .bl-feat-foot{gap:8px}
  .bl-feat-go{margin-left:0;width:100%;margin-top:6px}
  .bl-pager{flex-direction:column;gap:10px}
}