/* ==========================================================================
   Build. — Design System
   Contrast note: every text tier below is verified against its intended
   surface at >= 6.8:1 (AA, most AAA). Content surfaces are near-opaque by
   design so that contrast never depends on what the 3D scene is rendering.
   ========================================================================== */

/* ----------------------------------------------------------- TOKENS */
:root{
  /* surfaces */
  --base:        #070A12;
  --panel:       #121724;
  --panel-2:     #1A2130;
  --panel-solid: #0E1420;

  /* text tiers  (t3 is the LOWEST permitted for body copy) */
  --t1: #F5F7FA;   /* headings, key figures        18.4:1 on base */
  --t2: #C8D0DE;   /* body copy                    12.8:1 on base */
  --t3: #9FA9BC;   /* secondary / labels            8.4:1 on base */

  /* accents */
  --accent:      #6C5CE7;
  --accent-soft: #A99BFF;   /* 8.3:1 on base  */
  --gold:        #F0B44C;   /* 10.7:1 on base */
  --ember:       #E8722C;
  --bloom:       #E2536B;
  --sky:         #4DA3FF;

  /* semantic */
  --ok:      #3FB984;
  --warn:    #F0B44C;
  --hot:     #FF6B5B;

  /* lines & shadow */
  --line:        rgba(200,208,222,0.16);
  --line-strong: rgba(200,208,222,0.30);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);

  /* type */
  --font-display: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid type scale */
  --fs-hero:  clamp(2.5rem, 6vw, 4.75rem);
  --fs-h1:    clamp(2.1rem, 4.4vw, 3.25rem);
  --fs-h2:    clamp(1.7rem, 3.1vw, 2.5rem);
  --fs-h3:    clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-lead:  clamp(1.08rem, 1.5vw, 1.25rem);
  --fs-body:  1.0625rem;      /* 17px — up from 16 */
  --fs-sm:    0.9375rem;      /* 15px — floor for readable secondary text */
  --fs-label: 0.8125rem;      /* 13px — UPPERCASE labels only, never prose */

  --container: 1200px;
  --radius:    16px;
  --radius-sm: 10px;

  /* Height of the fixed nav. Anything that anchors below the nav — the mobile
     menu, the industries filter bar — reads this instead of hard-coding a
     number. app.js overwrites it with the measured height on load and on
     resize, because the nav grows when the brand tagline wraps and the two
     offsets that guessed at it (66px and 64px) were both 27-29px short of the
     real 93px on a phone. The value here is only the pre-JS fallback. */
  --nav-h: 66px;
}

/* ----------------------------------------------------------- RESET */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--base);
  color:var(--t2);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;}
ul{list-style:none;}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--t1);line-height:1.15;letter-spacing:-0.02em;font-weight:600;}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);letter-spacing:-0.01em;}
p{max-width:68ch;}
strong{color:var(--t1);font-weight:600;}

/* ----------------------------------------------------------- A11Y */
:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px;border-radius:4px;}
.skip-link{
  position:absolute;top:-200px;left:1rem;z-index:9999;
  background:var(--accent-soft);color:#0B0713;font-weight:700;
  padding:.85rem 1.4rem;border-radius:8px;transition:top .2s;
}
.skip-link:focus{top:1rem;}
.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;
}

/* ----------------------------------------------------------- LAYOUT */
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem);}
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;}
.section + .section{border-top:1px solid var(--line);}
.section-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.25rem);}
.section-head p{color:var(--t2);font-size:var(--fs-lead);margin-top:1rem;}

.label{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);
  display:inline-flex;align-items:center;gap:.6rem;font-weight:500;
}
.label::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px;}
.label.gold{color:var(--gold);}
.label.gold::before{background:var(--gold);}

/* ----------------------------------------------------------- 3D BACKDROP + READABILITY SCRIM
   The canvas is fixed behind everything. The scrim is the "intelligent
   visual zone" layer: it darkens the scene wherever content sits so that
   text contrast is deterministic rather than dependent on the animation. */
#space-canvas{
  position:fixed;inset:0;z-index:-2;
  background:radial-gradient(ellipse at 50% 0%,#0d1426 0%,#070A12 55%,#04060C 100%);
}
#space-scrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,10,18,0.10) 0%,
    rgba(7,10,18,0.55) 42%,
    rgba(7,10,18,0.86) 100%);
}

/* ---- Fallback sky: shown when WebGL is unavailable, blocked, or skipped.
   Animated aurora + a CSS starfield so it still reads as deep space. ---- */
body.no-webgl #space-canvas{
  background:
    radial-gradient(1100px 620px at 76% 10%, rgba(108,92,231,0.30), transparent 62%),
    radial-gradient(880px 560px at 14% 78%, rgba(232,114,44,0.16), transparent 62%),
    radial-gradient(700px 520px at 52% 44%, rgba(77,163,255,0.14), transparent 66%),
    radial-gradient(ellipse at 50% 0%,#0e1730 0%,#070A12 58%,#03050B 100%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
body.no-webgl #space-scrim{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 62%, rgba(210,230,255,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 26%, rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 74%, rgba(255,236,210,.7),  transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 34%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1.1px 1.1px at 83% 66%, rgba(200,220,255,.7),  transparent 60%),
    radial-gradient(1.7px 1.7px at 91% 14%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 8%  84%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 92%, rgba(220,235,255,.7),  transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 8%,  rgba(255,255,255,.75), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,0.10) 0%, rgba(7,10,18,0.55) 42%, rgba(7,10,18,0.86) 100%);
  background-size:auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,cover;
  animation:starTwinkle 7s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%   {background-position:0 0, 0 0, 0 0, 0 0;}
  100% {background-position:-70px 40px, 60px -30px, 30px 20px, 0 0;}
}
@keyframes starTwinkle{
  0%   {opacity:.82;}
  100% {opacity:1;}
}

/* ----------------------------------------------------------- NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem clamp(1.25rem,5vw,3rem);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,padding .3s;
}
.nav.scrolled{
  background:rgba(9,12,20,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:.7rem;padding-bottom:.7rem;
}
.brand{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--t1);}
.brand .dot{color:var(--accent-soft);}
.brand small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:400;margin-top:.35rem;}

.nav-links{display:flex;align-items:center;gap:.35rem;}
.nav-links a{
  display:block;padding:.6rem .85rem;border-radius:8px;
  font-size:var(--fs-sm);font-weight:500;color:var(--t2);
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--t1);background:rgba(200,208,222,0.08);}
.nav-links a[aria-current="page"]{color:var(--t1);background:rgba(108,92,231,0.20);}
.nav-cta{
  background:var(--accent);color:#fff!important;font-weight:600;
  padding:.65rem 1.25rem!important;border-radius:30px!important;margin-left:.4rem;
}
.nav-cta:hover{background:var(--accent-soft);color:#0B0713!important;}
.nav-tel{
  border:1px solid var(--line-strong);border-radius:30px;
  padding:.6rem 1.1rem!important;font-family:var(--font-mono);font-size:.85rem;
}
.nav-tel:hover{border-color:var(--accent-soft);color:var(--t1);}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--t1);border-radius:2px;transition:transform .25s,opacity .25s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:960px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;inset:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:.25rem;padding:1.5rem clamp(1.25rem,5vw,3rem) 3rem;
    background:rgba(7,10,18,0.985);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transform:translateY(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    /* iOS puts the toolbar inside 100vh, so the last link can sit under it */
    padding-bottom:max(3rem, env(safe-area-inset-bottom, 0) + 3rem);
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:.95rem .75rem;font-size:1.0625rem;border-bottom:1px solid var(--line);border-radius:0;}
  .nav-cta,.nav-tel{margin-top:1rem;text-align:center;border-radius:30px!important;}
}


/* ----------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.7rem;border-radius:30px;
  font-size:var(--fs-sm);font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  border:1px solid transparent;text-align:center;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-soft);color:#0B0713;transform:translateY(-2px);}
.btn-ghost{border-color:var(--line-strong);color:var(--t1);}
.btn-ghost:hover{border-color:var(--accent-soft);color:var(--accent-soft);background:rgba(108,92,231,0.10);}
.btn-sm{padding:.62rem 1.15rem;font-size:.875rem;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;}

/* ----------------------------------------------------------- SURFACES
   Near-opaque on purpose — see contrast note at top of file. */
/* ----------------------------------------------------------- SURFACES
   Mirror-glass: genuinely translucent with heavy blur + saturation, a top
   sheen and an inner highlight edge. The #space-scrim behind guarantees the
   composited backdrop stays dark, so text contrast still measures AA/AAA. */
.card{
  position:relative;
  background:linear-gradient(158deg, rgba(34,44,68,0.72) 0%, rgba(15,20,32,0.80) 100%);
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  border:1px solid rgba(200,208,222,0.15);
  border-radius:var(--radius);
  padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 18px 44px rgba(0,0,0,0.42);
  overflow:hidden;
}
/* specular sheen across the top edge */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:52%;
  background:linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0));
  pointer-events:none;border-radius:var(--radius) var(--radius) 0 0;
}
.card > *{position:relative;z-index:1;}
.card p{color:var(--t2);}
.card-hover{transition:transform .25s,border-color .25s,box-shadow .25s;}
.card-hover:hover{
  transform:translateY(-4px);
  border-color:rgba(169,155,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 26px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(108,92,231,0.28);
}

.grid{display:grid;gap:1.25rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ----------------------------------------------------------- HERO */
/* Padding scales with the viewport rather than sitting at a fixed 8rem. On a
   390px phone the old value spent 128px above the headline and then still
   demanded 92vh, so the hero filled the screen and nothing below it was ever
   hinted at. The top pad also has to clear the fixed nav, hence --nav-h. */
.hero{
  position:relative;
  min-height:min(92vh, 720px);
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(1.5rem,7vw,4.5rem)) 0 clamp(2.5rem,6vw,4rem);
}
.hero-inner{max-width:min(62ch,100%);}
.hero h1{font-size:var(--fs-hero);line-height:1.02;margin:1.2rem 0 1.35rem;}
.hero h1 .accent{color:var(--accent-soft);}
.hero .lead{font-size:var(--fs-lead);color:var(--t2);margin-bottom:2rem;max-width:54ch;}
.hero-compact{
  min-height:auto;
  padding:calc(var(--nav-h) + clamp(1.75rem,6vw,4rem)) 0 clamp(2rem,5vw,3rem);
}
.kline{display:block;overflow:hidden;}
.kline .word{display:inline-block;}

.scroll-cue{
  position:absolute;bottom:1.75rem;left:clamp(1.25rem,5vw,3rem);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3);
}
.scroll-cue i{display:block;width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-soft),transparent);}

/* ----------------------------------------------------------- STATS */
.stat-num{font-family:var(--font-display);font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--accent-soft);line-height:1;}
.stat-label{color:var(--t2);font-size:var(--fs-sm);margin-top:.55rem;}

/* ----------------------------------------------------------- INDUSTRY EXPLORER */
/* The explorer bar was 96% opaque and sticky, so it sat on top of the 3D
   backdrop for the whole page. Heavier blur plus real translucency keeps the
   controls legible while letting the scene behind them read. */
.explorer-bar{
  position:sticky;top:var(--nav-h);z-index:40;
  background:rgba(9,12,20,0.72);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-bottom:1px solid var(--line);
  padding:1.15rem 0 1rem;margin-bottom:clamp(2rem,4vw,3.25rem);
}
.search-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;}
.search-field{position:relative;flex:1 1 320px;}
.search-field input{
  width:100%;background:var(--panel-solid);border:1px solid var(--line-strong);
  color:var(--t1);padding:.85rem 2.6rem .85rem 1rem;border-radius:10px;font-size:var(--fs-body);
}
.search-field input::placeholder{color:var(--t3);}
.search-field input:focus{border-color:var(--accent-soft);outline:none;box-shadow:0 0 0 3px rgba(108,92,231,.25);}
.search-clear{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  color:var(--t3);padding:.4rem .55rem;border-radius:6px;font-size:1.1rem;line-height:1;
}
.search-clear:hover{color:var(--t1);background:rgba(200,208,222,.1);}
.select-field{
  background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--t1);
  padding:.85rem 1rem;border-radius:10px;font-size:var(--fs-sm);min-width:170px;
}
.select-field:focus{border-color:var(--accent-soft);outline:none;}

/* One scrollable line rather than three wrapped rows. Fourteen sector chips
   wrapping was pushing the grid a third of a screen down the page. */
.chip-row{
  display:flex;gap:.5rem;margin-top:.9rem;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.15rem;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
}
.chip-row::-webkit-scrollbar{display:none;}

/* Secondary filters, revealed by the Refine toggle. */
.refine-panel{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--line);
}
.refine-panel[hidden]{display:none;}
.refine-field{display:flex;flex-direction:column;gap:.35rem;flex:1 1 190px;}
.refine-field label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3);
}
.refine-toggle[aria-expanded="true"]{border-color:var(--accent-soft);color:var(--accent-soft);}

/* Progressive reveal, so the page is not a wall of 123 cards. */
.load-more-row{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.load-more-row[hidden]{display:none;}
.load-more-row .result-meta{margin:0;}
.chip{
  border:1px solid var(--line-strong);border-radius:30px;
  padding:.45rem 1rem;font-size:.875rem;color:var(--t2);
  transition:all .18s;white-space:nowrap;
}
.chip:hover{border-color:var(--accent-soft);color:var(--t1);}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.result-meta{color:var(--t3);font-size:var(--fs-sm);font-family:var(--font-mono);margin:.85rem 0 0;}

.ind-card{
  position:relative;
  background:linear-gradient(158deg, rgba(34,44,68,0.72) 0%, rgba(15,20,32,0.80) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(200,208,222,0.15);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 14px 34px rgba(0,0,0,0.38);
  padding:1.6rem 1.5rem;text-align:left;width:100%;
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
/* Matches the generous rhythm the rest of the site uses; the default 1.25rem
   grid gap read as cramped against 123 tiles. */
.ind-grid{gap:clamp(1.25rem,2vw,1.75rem);}

/* ---- Sector overview ----------------------------------------------------
   The landing view. Thirteen of these instead of 123 industry tiles, so the
   page opens with a structure the visitor can take in at a glance. Padding
   and scale deliberately match .card on the rest of the site. */
.sector-grid{gap:clamp(1.25rem,2.2vw,1.9rem);}
.sector-card{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg, rgba(34,44,68,0.72) 0%, rgba(15,20,32,0.80) 100%);
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  border:1px solid rgba(200,208,222,0.15);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.11), 0 18px 44px rgba(0,0,0,0.42);
  padding:clamp(1.5rem,2.4vw,2rem);
  text-align:left;width:100%;
  display:flex;flex-direction:column;gap:.55rem;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.sector-card:hover,.sector-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(169,155,255,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 28px 62px rgba(0,0,0,0.5),
             0 0 0 1px rgba(108,92,231,0.28);
}
.sector-count{
  font-family:var(--font-display);font-size:2.6rem;line-height:1;
  font-weight:600;color:var(--accent-soft);letter-spacing:-0.03em;
}
.sector-card h3{font-size:1.25rem;letter-spacing:-0.01em;}
.sector-blurb{color:var(--t2);font-size:var(--fs-sm);line-height:1.55;}
.sector-sample{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--t3);line-height:1.6;
}
.sector-go{
  margin-top:auto;padding-top:.9rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--accent-soft);
}
.sector-card:hover .sector-go{color:var(--t1);}
.ind-card:hover,.ind-card:focus-visible{
  transform:translateY(-3px);border-color:rgba(169,155,255,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 52px rgba(0,0,0,0.48),
             0 0 0 1px rgba(108,92,231,0.28);
}
.ind-card h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:700;color:var(--t1);letter-spacing:0;}
.ind-card .grp{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);}
.ind-card .hook{color:var(--t2);font-size:var(--fs-sm);line-height:1.55;}
.badge-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto;padding-top:.6rem;}
.badge{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;
  padding:.25rem .6rem;border-radius:20px;border:1px solid var(--line-strong);color:var(--t2);
}
.badge.gap-high{background:rgba(255,107,91,.16);border-color:rgba(255,107,91,.5);color:#FFA79C;}
.badge.gap-med{background:rgba(240,180,76,.14);border-color:rgba(240,180,76,.45);color:#F5C97B;}
.badge.gap-low{background:rgba(63,185,132,.14);border-color:rgba(63,185,132,.45);color:#7FD9B4;}
.badge.val{background:rgba(108,92,231,.18);border-color:rgba(169,155,255,.45);color:#C6BCFF;}

.empty-state{text-align:center;padding:4rem 1rem;color:var(--t2);}
.empty-state h3{margin-bottom:.6rem;}

/* ----------------------------------------------------------- DIALOG */
.dialog-backdrop{
  position:fixed;inset:0;z-index:500;
  background:rgba(4,6,12,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.dialog-backdrop.open{opacity:1;pointer-events:auto;}
.dialog{
  background:var(--panel-solid);border:1px solid var(--line-strong);
  border-radius:var(--radius);max-width:680px;width:100%;
  max-height:88vh;overflow-y:auto;padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:var(--shadow-lg);transform:translateY(14px) scale(.985);transition:transform .22s;
}
.dialog-backdrop.open .dialog{transform:none;}
.dialog-close{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  color:var(--t1);font-size:1.25rem;display:flex;align-items:center;justify-content:center;
}
.dialog-close:hover{background:rgba(200,208,222,.12);}
.dialog h4{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-soft);margin:1.6rem 0 .7rem;}
.dialog ul{display:flex;flex-direction:column;gap:.5rem;}
.dialog ul li{position:relative;padding-left:1.15rem;color:var(--t2);font-size:var(--fs-sm);}
.dialog ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-soft);}
.pill-list{display:flex;flex-wrap:wrap;gap:.45rem;}
.pill{border:1px solid var(--line-strong);border-radius:20px;padding:.35rem .8rem;font-size:.8125rem;color:var(--t2);}
.quote-box{
  background:rgba(108,92,231,.12);border-left:3px solid var(--accent-soft);
  padding:1rem 1.1rem;border-radius:0 10px 10px 0;color:var(--t1);
  font-size:var(--fs-sm);line-height:1.6;margin-top:.6rem;
}

/* ----------------------------------------------------------- PRICING */
.price-card{display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--accent);box-shadow:0 20px 50px rgba(108,92,231,.22);}
.price-badge{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:.7rem;display:block;}
.price-amount{font-family:var(--font-display);font-size:2.2rem;color:var(--t1);margin:.5rem 0 .15rem;}
.price-amount small{font-family:var(--font-mono);font-size:.85rem;color:var(--t3);font-weight:400;}
.price-retainer{font-family:var(--font-mono);font-size:.875rem;color:var(--t3);margin-bottom:1.3rem;}
.price-list{margin-bottom:1.5rem;flex:1;}
.price-list li{padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--t2);font-size:var(--fs-sm);}
.price-list li:last-child{border-bottom:none;}

/* ----------------------------------------------------------- FAQ */
.faq-list{max-width:74ch;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.4rem 0;text-align:left;font-family:var(--font-display);font-weight:600;
  font-size:1.0625rem;color:var(--t1);line-height:1.4;
}
.faq-q:hover{color:var(--accent-soft);}
.faq-icon{flex-shrink:0;width:24px;height:24px;position:relative;margin-top:.15rem;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--accent-soft);border-radius:2px;
  left:50%;top:50%;transition:transform .25s;
}
.faq-icon::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-icon::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq-a > div{padding:0 0 1.4rem;color:var(--t2);}
.faq-a a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px;}

/* ----------------------------------------------------------- FORMS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--t3);}
.field input,.field select,.field textarea{
  background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--t1);
  padding:.85rem 1rem;border-radius:10px;font-size:var(--fs-body);width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--t3);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent-soft);outline:none;box-shadow:0 0 0 3px rgba(108,92,231,.25);
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--hot);}
.field-error{color:#FFA79C;font-size:.8125rem;min-height:1.1em;}
.form-status{margin-top:1rem;font-size:var(--fs-sm);}
.form-success{
  border:1px solid var(--ok);background:rgba(63,185,132,.12);
  border-radius:var(--radius);padding:1.75rem;text-align:center;
}
.form-success h3{color:var(--t1);margin-bottom:.5rem;}
.form-success p{color:var(--t2);margin:0 auto;}
.form-error{
  border:1px solid var(--hot);background:rgba(255,107,91,.10);
  border-radius:var(--radius);padding:1.75rem;text-align:center;margin-top:1.25rem;
}
.form-error h3{color:var(--t1);margin-bottom:.5rem;}
.form-error p{color:var(--t2);margin:0 auto;}
/* Base rule is a{color:inherit;text-decoration:none}, so panel links need to be
   told they are links — they are the fallback route when a send fails. */
.form-success a,.form-error a{
  color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px;
}
/* Honeypot: gone visually, but still a real target a bot will happily tick.
   Off-screen rather than display:none, which more bots know to skip. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
form[aria-busy="true"]{cursor:progress;}
@media (max-width:680px){.form-grid{grid-template-columns:1fr;}}

/* ----------------------------------------------------------- LEGAL PROSE */
.prose{max-width:74ch;}
.prose h2{font-size:1.4rem;margin:2.4rem 0 .9rem;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--t2);margin-bottom:1rem;}
.prose a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px;}
.prose ul{margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem;}
.prose ul li{position:relative;padding-left:1.2rem;color:var(--t2);}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent-soft);}
.legal-meta{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--t3);}

/* ----------------------------------------------------------- FOOTER */
footer{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 2rem;background:rgba(7,10,18,.6);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;}
.footer-brand p{color:var(--t2);margin-top:.75rem;font-size:var(--fs-sm);max-width:34ch;}
.footer-col h4{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);margin-bottom:1rem;}
.footer-col a{display:block;padding:.32rem 0;color:var(--t2);font-size:var(--fs-sm);}
.footer-col a:hover{color:var(--accent-soft);}
.regions{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1.5rem;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;color:var(--t3);font-size:var(--fs-sm);}
.footer-bottom a{color:var(--t2);}
.footer-bottom a:hover{color:var(--accent-soft);}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ----------------------------------------------------------- MOTION */
.reveal{opacity:0;transform:translateY(26px);}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important;}
  #space-scrim{background:linear-gradient(180deg,rgba(7,10,18,.35),rgba(7,10,18,.9));}
}

/* ----------------------------------------------------------- TOUCH SIZING
   Keyed on pointer:coarse rather than a width breakpoint — a small laptop with
   a mouse does not need 44px targets, and a large tablet with a finger does.

   This block lives at the end of the file on purpose. These selectors have the
   same specificity as the base rules they override (.footer-col a beats
   .footer-col a only by source order), so placing it up with the nav media
   query left every one of them silently losing to a later declaration. */
@media (pointer:coarse){
  .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;}
  .chip{min-height:44px;display:inline-flex;align-items:center;}
  .search-clear{min-width:44px;min-height:44px;}
  .footer-col a{padding:.65rem 0;}
  .footer-bottom{gap:1rem;}
  .footer-bottom a{display:inline-block;padding:.45rem 0;}
  .btn-sm{padding:.75rem 1.15rem;}
  .faq-q{min-height:44px;}
  /* iOS zooms the whole page when a focused field is under 16px */
  input,select,textarea{font-size:max(16px,1rem);}
}

/* Utility */
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.center-head{margin-left:auto;margin-right:auto;text-align:center;}
.center-head .label{justify-content:center;}