/* ═══════════════════════════════════════════════════════════════════
   SpiderX Defense — Design System
   Learn. Practice. Defend.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#071A2B;
  --navy-800:#0B2138;
  --navy-700:#123B5D;
  --navy-600:#1B4E75;
  --teal:#1C8C99;
  --teal-bright:#25B4C4;
  --teal-glow:rgba(37,180,196,.18);

  --white:#FFFFFF;
  --paper:#F7FAFB;
  --paper-2:#EDF4F7;
  --line:#DCE6EA;

  --ink:#0F1A24;
  --grey:#5B6B74;
  --grey-dark:#94AEBF;

  --amber:#E0A030;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,'Courier New',monospace;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --wrap:1180px;
  --shadow-sm:0 2px 8px rgba(11,33,56,.06);
  --shadow:0 8px 30px rgba(11,33,56,.10);
  --shadow-teal:0 12px 40px rgba(28,140,153,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--white);
  line-height:1.62; font-size:15.5px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--teal-bright)}
ul{list-style:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
input,textarea,select{font-family:inherit; font-size:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.18; letter-spacing:-.022em; font-weight:750}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(19px,2.1vw,24px)}
h4{font-size:17px; letter-spacing:-.012em}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--teal); border-radius:2px}
.eyebrow.on-dark{color:var(--teal-bright)}
.eyebrow.on-dark::before{background:var(--teal-bright)}

.lede{font-size:clamp(16px,1.9vw,19px); color:var(--grey); line-height:1.68; max-width:64ch}
.mono{font-family:var(--mono)}
.section-head{margin-bottom:46px; max-width:760px}
.section-head h2{margin-bottom:16px}

/* ─── Sections ───────────────────────────────────────────────── */
section{padding:86px 0; position:relative}
.sec-paper{background:var(--paper)}
.sec-paper-2{background:var(--paper-2)}
.sec-dark{background:var(--navy-800); color:var(--white)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--white)}
.sec-dark p{color:var(--grey-dark)}
.sec-darker{background:var(--navy-900); color:var(--white)}
.sec-darker h2,.sec-darker h3{color:var(--white)}
.sec-dark::before,.sec-darker::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;
}
.sec-dark > *,.sec-darker > *{position:relative; z-index:1}

.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright));
  z-index:200; transition:width .1s linear;
}

/* ─── Header ─────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow-sm); background:rgba(255,255,255,.96)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px}
.brand{display:flex; align-items:center; gap:11px; color:var(--navy-700)}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex; align-items:center; line-height:0}
.brand-mark svg{display:block; transition:transform .4s var(--ease)}
.brand:hover .brand-mark svg{transform:rotate(30deg)}
.brand-name{font-weight:800; font-size:16px; letter-spacing:-.01em; line-height:1.1; color:var(--navy-700)}
.brand-name .bx{color:var(--teal)}
.brand-name small{display:block; font-size:8.5px; font-weight:600; color:var(--teal);
  letter-spacing:.19em; margin-top:2px}

.nav-links{display:flex; gap:4px; align-items:center; margin-left:auto}
.nav-links a{color:var(--ink); font-size:14px; font-weight:550;
  padding:8px 13px; border-radius:var(--r-sm); transition:all .18s var(--ease)}
.nav-links a:hover{color:var(--teal); background:var(--paper-2); text-decoration:none}
.nav-links a.active{color:var(--teal); font-weight:650}
.nav-cta{margin-left:12px}
.nav-toggle{display:none; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 12px; font-size:17px; color:var(--navy-700); background:var(--white)}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:14px; font-weight:650; padding:13px 24px; border-radius:var(--r);
  background:var(--teal); color:var(--white); border:1.5px solid var(--teal);
  transition:all .2s var(--ease); white-space:nowrap;
}
.btn:hover{background:var(--navy-700); border-color:var(--navy-700); color:var(--white);
  text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-teal)}
.btn-ghost{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn-ghost:hover{background:var(--teal); color:var(--white); border-color:var(--teal)}
.btn-light{background:var(--white); color:var(--navy-800); border-color:var(--white)}
.btn-light:hover{background:var(--teal); border-color:var(--teal); color:var(--white)}
.btn-outline-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{background:rgba(255,255,255,.10); border-color:var(--white);
  color:var(--white); box-shadow:none}
.btn-sm{padding:9px 17px; font-size:13px}
.btn-lg{padding:16px 30px; font-size:15px}
.btn-arrow::after{content:'→'; transition:transform .2s var(--ease)}
.btn:hover .btn-arrow::after{transform:translateX(3px)}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero{position:relative; background:var(--navy-900); color:var(--white);
  padding:96px 0 84px; overflow:hidden}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none}
.hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 22% 42%, rgba(28,140,153,.20), transparent 68%)}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1{color:var(--white); margin-bottom:20px}
.hero h1 .accent{color:var(--teal-bright)}
.hero-sub{font-size:clamp(15.5px,1.85vw,18px); color:#B9CEDC; line-height:1.7;
  margin-bottom:32px; max-width:56ch}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-bottom:34px}
.hero-trust{display:flex; gap:26px; flex-wrap:wrap; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12)}
.hero-trust-item{display:flex; align-items:center; gap:9px; font-size:13px; color:#9DB6C6}
.hero-trust-item svg{flex:none; color:var(--teal-bright)}

.terminal{background:rgba(7,20,32,.86); border:1px solid rgba(37,180,196,.26);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(8px)}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.08)}
.term-dot{width:10px; height:10px; border-radius:50%}
.term-dot.r{background:#E05C4A}.term-dot.y{background:#E0A030}.term-dot.g{background:#2E9E6B}
.term-title{margin-left:8px; font-family:var(--mono); font-size:11px; color:#7D97A8}
.term-body{padding:19px 18px; font-family:var(--mono); font-size:12.5px;
  line-height:1.85; min-height:252px}
.term-line{opacity:0; transform:translateY(4px); animation:termIn .4s var(--ease) forwards}
.term-line .p{color:var(--teal-bright)}
.term-line .c{color:#E4EEF4}
.term-line .o{color:#7D97A8}
.term-line .ok{color:#4FD98A}
.term-line .warn{color:#E0A030}
@keyframes termIn{to{opacity:1; transform:translateY(0)}}
.cursor{display:inline-block; width:7px; height:14px; background:var(--teal-bright);
  vertical-align:-2px; animation:blink 1.05s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ─── Stats ──────────────────────────────────────────────────── */
.stats-bar{background:var(--navy-700); padding:0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:32px 22px; text-align:center; border-right:1px solid rgba(255,255,255,.10)}
.stat:last-child{border-right:none}
.stat-num{font-size:clamp(28px,3.4vw,40px); font-weight:800; color:var(--white);
  letter-spacing:-.03em; line-height:1; margin-bottom:7px}
.stat-num .suffix{color:var(--teal-bright)}
.stat-label{font-size:12.5px; color:#A8C2D2}

/* ─── Cards ──────────────────────────────────────────────────── */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; transition:all .28s var(--ease); position:relative; overflow:hidden}
.card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright));
  transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(28,140,153,.32)}
.card:hover::before{transform:scaleX(1)}
.card-icon{width:46px; height:46px; border-radius:var(--r);
  background:linear-gradient(135deg,rgba(28,140,153,.13),rgba(37,180,196,.07));
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  margin-bottom:18px; flex:none}
.card h3{margin-bottom:10px; color:var(--navy-700); font-size:19px}
.card p{color:var(--grey); font-size:14.5px; line-height:1.65}
.card-tag{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; padding:4px 10px; border-radius:20px;
  background:var(--paper-2); color:var(--teal); margin-bottom:14px}
.card-meta{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--grey)}
.card-meta strong{color:var(--navy-700); font-weight:650}

.card-dark{background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.10)}
.card-dark h3{color:var(--white)}
.card-dark p{color:var(--grey-dark)}
.card-dark:hover{background:rgba(255,255,255,.06); border-color:rgba(37,180,196,.34)}
.card-dark .card-icon{background:rgba(37,180,196,.13); color:var(--teal-bright)}
.card-dark .card-meta{border-top-color:rgba(255,255,255,.10)}
.card-dark .card-meta strong{color:var(--teal-bright)}
.card-dark .card-tag{background:rgba(37,180,196,.13); color:var(--teal-bright)}

/* ─── Split panels ───────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.split-panel{border-radius:var(--r-xl); padding:40px 36px; position:relative;
  overflow:hidden; border:1px solid var(--line); background:var(--white);
  transition:all .3s var(--ease)}
.split-panel:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.split-panel.dark{background:linear-gradient(155deg,var(--navy-800),var(--navy-700));
  border-color:rgba(255,255,255,.10); color:var(--white)}
.split-panel.dark h3{color:var(--white)}
.split-panel.dark p,.split-panel.dark li{color:#B4CBD8}
.split-panel h3{margin-bottom:12px; color:var(--navy-700)}
.split-list{margin:20px 0 26px}
.split-list li{display:flex; gap:11px; align-items:flex-start; padding:7px 0;
  font-size:14.5px; color:var(--grey)}
.split-list li::before{content:'▸'; color:var(--teal); font-weight:700; flex:none; line-height:1.5}
.split-panel.dark .split-list li::before{color:var(--teal-bright)}

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs{margin-top:34px}
.tab-nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px;
  border-bottom:1px solid var(--line)}
.tab-btn{padding:11px 18px; font-size:14px; font-weight:600; color:var(--grey);
  border-bottom:2.5px solid transparent; margin-bottom:-1px;
  transition:all .2s var(--ease); border-radius:var(--r-sm) var(--r-sm) 0 0}
.tab-btn:hover{color:var(--teal); background:var(--paper)}
.tab-btn.active{color:var(--teal); border-bottom-color:var(--teal); font-weight:700}
.tab-panel{display:none; animation:fadeUp .35s var(--ease)}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

/* ─── Timeline ───────────────────────────────────────────────── */
.timeline{position:relative; padding-left:34px}
.timeline::before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--teal),rgba(28,140,153,.15))}
.tl-item{position:relative; padding-bottom:26px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:''; position:absolute; left:-30px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--white); border:2.5px solid var(--teal)}
.tl-item.dark::before{background:var(--navy-800)}
.tl-phase{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal); margin-bottom:5px}
.tl-item h4{margin-bottom:6px; color:var(--navy-700)}
.tl-item.dark h4{color:var(--white)}
.tl-item p{font-size:14px; color:var(--grey)}
.tl-item.dark p{color:var(--grey-dark)}

/* ─── Steps ──────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); counter-reset:s}
.step{padding:28px 22px; position:relative; counter-increment:s; border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step::before{content:'0' counter(s); font-family:var(--mono); font-size:34px; font-weight:700;
  color:rgba(28,140,153,.16); line-height:1; display:block; margin-bottom:12px}
.step h4{margin-bottom:8px; color:var(--navy-700)}
.step p{font-size:13.5px; color:var(--grey)}

/* ─── Reviews ────────────────────────────────────────────────── */
.review{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; transition:all .28s var(--ease)}
.review:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.review-stars{color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:14px}
.review-text{font-size:14.5px; color:var(--ink); line-height:1.72; margin-bottom:20px}
.review-who{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line)}
.review-avatar{width:40px; height:40px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--teal),var(--navy-700));
  display:flex; align-items:center; justify-content:center; color:var(--white);
  font-weight:700; font-size:15px}
.review-name{font-weight:650; font-size:14px; color:var(--navy-700); line-height:1.3}
.review-role{font-size:12.5px; color:var(--grey)}
.review-placeholder{border-style:dashed; border-color:var(--teal); background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:210px; color:var(--grey)}
.review-placeholder svg{color:var(--teal); margin-bottom:12px; opacity:.6}

/* ─── Accordion ──────────────────────────────────────────────── */
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 4px; text-align:left; font-size:16px; font-weight:650;
  color:var(--navy-700); transition:color .18s var(--ease)}
.acc-head:hover{color:var(--teal)}
.acc-icon{flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  color:var(--teal); transition:all .25s var(--ease)}
.acc-item.open .acc-icon{background:var(--teal); color:var(--white);
  border-color:var(--teal); transform:rotate(45deg)}
.acc-body{max-height:0; overflow:hidden; transition:max-height .35s var(--ease)}
.acc-body-inner{padding:0 4px 22px; color:var(--grey); font-size:14.5px; line-height:1.7}

/* ─── Callouts ───────────────────────────────────────────────── */
.callout{border-left:3px solid var(--teal); background:var(--paper);
  padding:20px 24px; border-radius:0 var(--r) var(--r) 0; margin:24px 0}
.callout h4{color:var(--navy-700); margin-bottom:7px; font-size:15.5px}
.callout p{font-size:14.5px; color:var(--grey); margin:0}
.callout.amber{border-left-color:var(--amber); background:#FEF8ED}
.callout.amber h4{color:#8A5F14}
.callout.amber p{color:#7A5A22}

/* ─── Ethics band ────────────────────────────────────────────── */
.ethics{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  border-radius:var(--r-xl); padding:44px 40px; color:var(--white);
  position:relative; overflow:hidden}
.ethics::after{content:''; position:absolute; right:-70px; top:-70px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(37,180,196,.16),transparent 70%)}
.ethics h2,.ethics h3{color:var(--white)}
.ethics > p{color:#B4CBD8; position:relative; z-index:1}
.ethics-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:28px; position:relative; z-index:1}
.ethics-item h4{color:var(--teal-bright); font-size:14.5px; margin-bottom:8px}
.ethics-item p{font-size:13.5px; color:#B4CBD8; line-height:1.65}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; font-weight:600; color:var(--navy-700)}
.field input,.field select,.field textarea{padding:12px 14px; border:1.5px solid var(--line);
  border-radius:var(--r); background:var(--white); color:var(--ink); font-size:14.5px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-glow)}
.field textarea{resize:vertical; min-height:110px}
.form-note{font-size:12.5px; color:var(--grey); margin-top:10px}

.contact-card{background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px}
.contact-item{display:flex; gap:14px; align-items:flex-start; padding:14px 0;
  border-bottom:1px solid var(--line)}
.contact-item:last-child{border-bottom:none}
.contact-item svg{flex:none; color:var(--teal); margin-top:3px}
.contact-item .l{font-size:12px; color:var(--grey); letter-spacing:.04em;
  text-transform:uppercase; font-weight:600}
.contact-item .v{font-size:15px; color:var(--navy-700); font-weight:600}

/* ─── CTA band ───────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:var(--white); text-align:center; position:relative; overflow:hidden}
.cta-band::before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(37,180,196,.20), transparent 70%)}
.cta-band .wrap{position:relative; z-index:1}
.cta-band h2{color:var(--white); margin-bottom:14px}
.cta-band p{color:#B4CBD8; max-width:56ch; margin:0 auto 28px}
.cta-actions{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* ─── Footer ─────────────────────────────────────────────────── */
footer{background:var(--navy-900); color:#93AEC0; padding:60px 0 26px; font-size:14px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.09)}
.foot-brand .brand-name{color:var(--white)}
.foot-brand .brand-name small{color:var(--teal-bright)}
.foot-tag{margin:16px 0 18px; color:#7F9AAD; font-size:13.5px; line-height:1.68; max-width:34ch}
.foot-social{display:flex; gap:9px}
.foot-social a{width:34px; height:34px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.13); display:flex; align-items:center;
  justify-content:center; color:#93AEC0; transition:all .2s var(--ease)}
.foot-social a:hover{background:var(--teal); border-color:var(--teal); color:var(--white)}
.foot-col h5{color:var(--white); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:15px; font-weight:700}
.foot-col a{display:block; color:#93AEC0; padding:5px 0; font-size:13.5px}
.foot-col a:hover{color:var(--teal-bright)}
.foot-bottom{padding-top:22px; display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; font-size:12.5px; color:#6D8799}

/* ─── Reveal ─────────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}.reveal-d4{transition-delay:.28s}

/* ─── Page hero ──────────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:var(--white); padding:66px 0 58px; position:relative; overflow:hidden}
.page-hero::before{content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px}
.page-hero .wrap{position:relative; z-index:1}
.page-hero h1{color:var(--white); margin-bottom:14px; font-size:clamp(30px,4.4vw,46px)}
.page-hero p{color:#B4CBD8; max-width:62ch; font-size:17px}
.crumb{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:#7F9AAD;
  text-transform:uppercase; margin-bottom:14px}
.crumb a{color:var(--teal-bright)}

/* ─── Table ──────────────────────────────────────────────────── */
.ptable{width:100%; border-collapse:collapse; font-size:14px; margin-top:20px}
.ptable th{background:var(--navy-700); color:var(--white); text-align:left;
  padding:13px 16px; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.ptable td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--grey)}
.ptable tr:nth-child(even) td{background:var(--paper)}
.ptable td:first-child{font-weight:650; color:var(--navy-700)}
.ptable tr:hover td{background:var(--paper-2)}
.table-scroll{overflow-x:auto}

/* ─── Badges ─────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:650; padding:5px 11px; border-radius:20px}
.badge-teal{background:rgba(28,140,153,.11); color:var(--teal)}
.badge-amber{background:#FDF3DC; color:#8A5F14}
.badge-green{background:#E6F6EE; color:#1E7A4F}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--line)}
  .step:nth-child(2){border-right:none}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .ethics-grid{grid-template-columns:1fr; gap:20px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat{border-bottom:1px solid rgba(255,255,255,.10)}
}
@media (max-width:760px){
  section{padding:60px 0}
  .nav-links{display:none; position:absolute; top:70px; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch;
    padding:14px 20px 20px; gap:2px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); margin-left:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px; border-radius:var(--r-sm)}
  .nav-cta{margin:8px 0 0}
  .nav-toggle{display:block}
  .g2,.g3,.g4,.split,.form-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:62px 0 56px}
  .ethics{padding:32px 24px}
  .split-panel{padding:30px 26px}
  .term-body{font-size:11.5px; min-height:210px}
  .foot-bottom{flex-direction:column; gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   Curriculum day lists + phase accordions
   ═══════════════════════════════════════════════════════════════ */
.callout.teal{border-left-color:var(--teal-bright); background:#EDF7F9}
.acc-days{display:block; font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--grey); letter-spacing:.03em; margin-top:5px}
.chip{display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:4px;
  vertical-align:middle; margin-left:6px}
.chip-core{background:rgba(28,140,153,.13); color:var(--teal)}
.day-list{display:grid}
.day-row{display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line)}
.day-row:last-child{border-bottom:0}
.day-num{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--teal);
  letter-spacing:.05em}
.day-title{font-size:14.5px; color:var(--ink); line-height:1.45}

/* ═══════════════════════════════════════════════════════════════
   Pathfinder — "which one is for you" carousel
   ═══════════════════════════════════════════════════════════════ */
.pathfinder{background:var(--navy-900); color:#fff; position:relative; overflow:hidden}
.pathfinder::before{content:''; position:absolute; inset:0;
  background:radial-gradient(900px 380px at 78% -10%, rgba(37,180,196,.13), transparent 62%);
  pointer-events:none}
.pathfinder .wrap{position:relative; z-index:1}
.pathfinder h2{color:#fff}
.pathfinder .lede{color:#A9C2D2}

.pf-roles{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}
.pf-role{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:#C9DCE7; font-family:var(--font);
  font-size:14.5px; font-weight:550; padding:12px 20px; border-radius:10px; cursor:pointer;
  transition:all .25s var(--ease)}
.pf-role svg{opacity:.7; transition:opacity .25s}
.pf-role:hover{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(37,180,196,.4)}
.pf-role.active{background:var(--teal); border-color:var(--teal); color:#fff;
  box-shadow:0 8px 26px rgba(28,140,153,.34)}
.pf-role.active svg{opacity:1}

.pf-stage{position:relative; max-width:1000px; margin:0 auto}
.pf-viewport{overflow:hidden; border-radius:16px}
.pf-track{display:flex; transition:transform .55s var(--ease)}
.pf-slide{flex:0 0 100%; min-width:100%; padding:2px}
.pf-slide[hidden]{display:none}
.pf-card{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:15px; padding:30px 32px; height:100%;
  display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start}
.pf-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:5px; background:rgba(37,180,196,.16);
  color:var(--teal-bright); margin-bottom:14px}
.pf-badge.start{background:var(--teal-bright); color:var(--navy-900)}
.pf-card h3{color:#fff; font-size:25px; margin-bottom:10px; line-height:1.22}
.pf-for{color:#8FB0C4; font-size:13px; font-family:var(--mono); margin-bottom:14px}
.pf-card>div>p{color:#B4CBD8; font-size:15px; margin-bottom:20px}
.pf-facts{list-style:none; padding:0; margin:0 0 22px}
.pf-facts li{position:relative; padding-left:24px; color:#C9DCE7; font-size:14.5px;
  margin-bottom:9px; line-height:1.5}
.pf-facts li::before{content:''; position:absolute; left:2px; top:8px; width:7px; height:7px;
  border-radius:2px; background:var(--teal-bright)}
.pf-side{background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:20px 22px}
.pf-meta{display:block; margin-bottom:16px}
.pf-meta:last-of-type{margin-bottom:20px}
.pf-meta .k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#7E9DB2; margin-bottom:4px}
.pf-meta .v{display:block; color:#fff; font-size:15.5px; font-weight:600}

.pf-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; transition:all .22s var(--ease); display:flex;
  align-items:center; justify-content:center}
.pf-nav:hover{background:var(--teal); border-color:var(--teal)}
.pf-prev{left:-54px}
.pf-next{right:-54px}
.pf-dots{display:flex; gap:8px; justify-content:center; margin-top:24px}
.pf-dot{width:30px; height:4px; border-radius:2px; background:rgba(255,255,255,.2);
  border:0; cursor:pointer; padding:0; transition:background .25s}
.pf-dot.active{background:var(--teal-bright)}

@media (max-width:960px){
  .pf-card{grid-template-columns:1fr; gap:22px; padding:26px 24px}
  .pf-prev{left:-8px} .pf-next{right:-8px}
  .pf-nav{width:36px; height:36px; background:rgba(7,26,43,.75)}
}
@media (max-width:760px){
  .pf-roles{gap:7px}
  .pf-role{font-size:13px; padding:10px 14px; flex:1 1 auto; justify-content:center}
  .pf-role span{white-space:nowrap}
  .pf-card h3{font-size:21px}
  .tab-nav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:4px}
  .tab-nav::-webkit-scrollbar{display:none}
  .tab-btn{white-space:nowrap; flex:0 0 auto}
  .day-row{grid-template-columns:62px 1fr; gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .pf-track{transition:none}
}
.btn-block{display:flex; width:100%; justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   Corporate layer — credentials strip, deliverable mockups
   ═══════════════════════════════════════════════════════════════ */

/* --- Credentials strip -------------------------------------- */
.creds{background:#fff; border-bottom:1px solid var(--line); padding:22px 0}
.creds-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.cred{display:flex; align-items:center; gap:13px; padding:6px 26px;
  border-right:1px solid var(--line)}
.cred:last-child{border-right:0}
.cred-ic{flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  background:rgba(28,140,153,.09); color:var(--teal);
  display:flex; align-items:center; justify-content:center}
.cred-t{display:block; font-size:14px; font-weight:650; color:var(--navy-700); line-height:1.25}
.cred-s{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey); margin-top:3px}

/* --- Deliverable mockups ------------------------------------ */
.deliv{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.dcard{background:var(--navy-900); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.dhead{display:flex; align-items:center; gap:9px; padding:12px 16px;
  background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.09)}
.dhead .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22)}
.dhead .dt{font-family:var(--mono); font-size:11px; color:#8FB0C4; letter-spacing:.05em;
  margin-left:5px}
.dbody{padding:20px 18px; flex:1}
.dlabel{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:#7E9DB2; margin-bottom:14px}

/* bar rows */
.brow{margin-bottom:13px}
.brow:last-child{margin-bottom:0}
.btop{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.bname{font-size:12.5px; color:#C9DCE7}
.bval{font-family:var(--mono); font-size:12.5px; font-weight:600; color:#fff}
.btrack{height:7px; border-radius:4px; background:rgba(255,255,255,.09); overflow:hidden}
.bfill{height:100%; border-radius:4px; background:var(--teal-bright)}
.bfill.warn{background:#E8A33D}
.bfill.bad{background:#D9614C}
.bfill.good{background:#3FBF87}

/* before / after */
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.bapanel{border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:13px 12px;
  text-align:center}
.bapanel.fail{border-color:rgba(217,97,76,.45); background:rgba(217,97,76,.08)}
.bapanel.pass{border-color:rgba(63,191,135,.45); background:rgba(63,191,135,.08)}
.bak{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:#7E9DB2; margin-bottom:7px}
.bav{display:block; font-family:var(--mono); font-size:14px; font-weight:600; color:#fff}
.bas{display:block; font-size:11px; margin-top:6px}
.bapanel.fail .bas{color:#E88A76}
.bapanel.pass .bas{color:#6FD6A8}
.baarrow{color:var(--teal-bright); font-size:19px}
.bacheck{margin-top:13px; display:grid; gap:7px}
.bacheck div{display:flex; align-items:center; gap:8px; font-size:12px; color:#C9DCE7}
.bacheck .ok{color:#3FBF87; font-weight:700}

/* findings table */
.ftab{width:100%; border-collapse:collapse}
.ftab td{padding:8px 0; border-bottom:1px solid rgba(255,255,255,.075); font-size:12.5px}
.ftab tr:last-child td{border-bottom:0}
.ftab .sev{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  padding:3px 8px; border-radius:4px; white-space:nowrap}
.sev-c{background:rgba(217,97,76,.18); color:#E88A76}
.sev-h{background:rgba(232,163,61,.18); color:#EFBE73}
.sev-m{background:rgba(37,180,196,.18); color:#5FD3E0}
.sev-l{background:rgba(255,255,255,.09); color:#9FB8C7}
.ftab .fname{color:#C9DCE7; padding-left:11px}
.ftab .fcount{text-align:right; font-family:var(--mono); color:#fff; font-weight:600}

.dnote{padding:11px 16px; border-top:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.18); font-size:11.5px; color:#7E9DB2; font-style:italic}

@media (max-width:960px){
  .creds-grid{grid-template-columns:repeat(2,1fr); gap:18px 0}
  .cred:nth-child(2){border-right:0}
  .deliv{grid-template-columns:1fr}
}
@media (max-width:760px){
  .creds-grid{grid-template-columns:1fr; gap:16px}
  .cred{border-right:0; padding:0 4px}
  .ba{grid-template-columns:1fr; gap:8px}
  .baarrow{transform:rotate(90deg); text-align:center}
}

/* --- Corporate utility bar ---------------------------------- */
.topbar{background:var(--navy-900); color:#A9C2D2; font-size:12.5px}
.topbar-in{display:flex; align-items:center; justify-content:space-between;
  height:38px; gap:18px}
.topbar-l,.topbar-r{display:flex; align-items:center; gap:20px}
.topbar a{color:#C9DCE7; display:inline-flex; align-items:center; gap:7px}
.topbar a:hover{color:var(--teal-bright); text-decoration:none}
.topbar svg{opacity:.65}
.topbar .tb-badge{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#7E9DB2; padding:3px 9px; border-radius:4px;
  border:1px solid rgba(255,255,255,.14)}
@media (max-width:860px){
  .topbar-r{display:none}
  .topbar-in{justify-content:center; height:34px}
}
@media (max-width:520px){
  .topbar-l{gap:14px; font-size:11.5px}
}

/* --- Founder photo ------------------------------------------ */
.founder-photo{width:150px; height:195px; object-fit:cover; object-position:center 22%;
  border-radius:10px; display:block; margin:0 0 12px;
  border:1px solid var(--line); background:var(--paper)}
.founder-cap{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--grey); margin:0 0 22px}

/* --- Wide photo figure --------------------------------------- */
.photo-band{padding:0; background:var(--paper-2)}
.photo-fig{margin:0; position:relative}
.photo-fig img{width:100%; max-height:460px; object-fit:cover; object-position:center 38%;
  display:block; border-radius:14px}
.photo-fig figcaption{margin-top:12px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.05em; color:var(--grey); text-align:center}
@media (max-width:760px){ .photo-fig img{max-height:260px} }

/* --- Domain checker ----------------------------------------- */
.dc-wrap{max-width:820px; margin:0 auto}
.dc-form{display:flex; gap:12px; flex-wrap:wrap}
.dc-input{flex:1 1 320px; font-family:var(--mono); font-size:16px; padding:15px 18px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  transition:border-color .2s, box-shadow .2s}
.dc-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,140,153,.13)}
.dc-note{font-size:13px; color:var(--grey); margin-top:14px; line-height:1.55}
.dc-result{margin-top:34px}
.dc-verdict{border-radius:13px; padding:24px 26px; margin-bottom:22px; border-left:4px solid}
.dc-verdict h3{font-size:21px; margin-bottom:8px}
.dc-verdict p{font-size:15px; margin:0}
.dc-verdict.bad{background:#FDF1EE; border-color:#D9614C}
.dc-verdict.bad h3{color:#A33A26}
.dc-verdict.bad p{color:#7E3524}
.dc-verdict.warn{background:#FEF8ED; border-color:var(--amber)}
.dc-verdict.warn h3{color:#8A5F14}
.dc-verdict.warn p{color:#7A5A22}
.dc-verdict.good{background:#EAF7F1; border-color:#2E9E6B}
.dc-verdict.good h3{color:#1E7A4F}
.dc-verdict.good p{color:#256B48}
.dc-rows{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dc-row{display:grid; grid-template-columns:92px 1fr auto; gap:16px; align-items:start;
  padding:16px 20px; border-bottom:1px solid var(--line); background:#fff}
.dc-row:last-child{border-bottom:0}
.dc-key{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--navy-700); padding-top:2px}
.dc-val{font-size:14px; color:var(--ink); line-height:1.5; word-break:break-word}
.dc-val code{font-family:var(--mono); font-size:12.5px; color:var(--grey);
  background:var(--paper); padding:2px 6px; border-radius:4px; display:inline-block;
  margin-top:6px; max-width:100%; overflow-wrap:anywhere}
.dc-pill{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.07em;
  padding:4px 10px; border-radius:5px; white-space:nowrap}
.dc-pill.ok{background:#E6F6EE; color:#1E7A4F}
.dc-pill.no{background:#FBEAE6; color:#A33A26}
.dc-pill.mid{background:#FDF3DC; color:#8A5F14}
.dc-cta{margin-top:24px; text-align:center}
.dc-spin{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:dcspin .7s linear infinite;
  vertical-align:-2px; margin-right:8px}
@keyframes dcspin{to{transform:rotate(360deg)}}
@media (max-width:620px){
  .dc-row{grid-template-columns:1fr; gap:7px}
  .dc-pill{justify-self:start}
}

/* --- Tools page extras -------------------------------------- */
.hd-input{width:100%; font-family:var(--mono); font-size:12.5px; line-height:1.6;
  padding:14px 16px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); resize:vertical; min-height:180px}
.hd-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,140,153,.13)}
.hd-help{margin-bottom:16px; border:1px solid var(--line); border-radius:9px; background:var(--paper)}
.hd-help summary{cursor:pointer; padding:12px 16px; font-size:14px; font-weight:600;
  color:var(--navy-700); list-style:none}
.hd-help summary::-webkit-details-marker{display:none}
.hd-help summary::before{content:'+ '; color:var(--teal); font-weight:700}
.hd-help[open] summary::before{content:'– '}
.hd-help div{padding:0 16px 14px}
.hd-help p{font-size:13.5px; color:var(--grey); margin:0 0 8px}
.dp-q{display:grid; gap:2px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dp-item{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:15px 18px; background:#fff; border-bottom:1px solid var(--line)}
.dp-item:last-child{border-bottom:0}
.dp-text{font-size:14.5px; color:var(--ink); line-height:1.5}
.dp-opts{display:flex; gap:6px}
.dp-opts label{cursor:pointer}
.dp-opts input{position:absolute; opacity:0; width:0; height:0}
.dp-opts span{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.05em; padding:6px 11px; border-radius:6px; border:1px solid var(--line);
  color:var(--grey); background:#fff; transition:all .18s}
.dp-opts input:checked + span{background:var(--teal); border-color:var(--teal); color:#fff}
.dp-opts input:focus-visible + span{box-shadow:0 0 0 3px rgba(28,140,153,.25)}
.btn-outline{background:transparent; color:var(--navy-700); border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--teal); color:var(--teal); text-decoration:none}
@media (max-width:620px){
  .dp-item{grid-template-columns:1fr; gap:10px}
}

/* --- Homepage tool band ------------------------------------- */
.toolband{background:var(--navy-800); color:#fff; position:relative; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07)}
.toolband::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 320px at 20% 0%, rgba(37,180,196,.16), transparent 62%)}
.toolband .wrap{position:relative; z-index:1}
.tb-head{text-align:center; max-width:660px; margin:0 auto 30px}
.tb-eyebrow{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--teal-bright);
  background:rgba(37,180,196,.14); padding:6px 13px; border-radius:6px; margin-bottom:16px}
.toolband h2{color:#fff; font-size:34px; margin-bottom:12px}
.tb-head p{color:#A9C2D2; font-size:16px; margin:0}
.tb-tool{max-width:660px; margin:0 auto}
.tb-tool .dc-input{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff}
.tb-tool .dc-input::placeholder{color:#7E9DB2}
.tb-tool .dc-input:focus{border-color:var(--teal-bright); background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(37,180,196,.2)}
.tb-tool .dc-result{margin-top:24px}
.tb-tool .dc-rows{border-color:rgba(255,255,255,.14)}
.tb-tool .dc-row{background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.1)}
.tb-tool .dc-key{color:var(--teal-bright)}
.tb-tool .dc-val{color:#C9DCE7}
.tb-tool .dc-val strong{color:#fff}
.tb-tool .dc-cta{margin-top:20px}

.tb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px}
.tb-card{display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:24px 22px; transition:all .25s var(--ease)}
.tb-card:hover{background:rgba(255,255,255,.09); border-color:rgba(37,180,196,.45);
  transform:translateY(-3px); text-decoration:none}
.tb-ic{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:10px; background:rgba(37,180,196,.16); color:var(--teal-bright); margin-bottom:15px}
.tb-card h3{color:#fff; font-size:17px; margin-bottom:9px}
.tb-card p{color:#A9C2D2; font-size:14px; line-height:1.55; margin-bottom:14px}
.tb-go{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.07em;
  color:var(--teal-bright)}

/* nav highlight for the tools link */
.nav-links a.nav-tools{color:var(--teal); font-weight:650}
.nav-links a.nav-tools::after{content:'FREE'; font-family:var(--mono); font-size:8.5px;
  font-weight:700; letter-spacing:.09em; background:rgba(28,140,153,.14); color:var(--teal);
  padding:2px 5px; border-radius:3px; margin-left:6px; vertical-align:2px}

@media (max-width:960px){ .tb-grid{grid-template-columns:1fr} }
@media (max-width:760px){ .toolband h2{font-size:26px} }

/* --- Academy ------------------------------------------------- */
.ac-note{background:var(--paper-2); border-bottom:1px solid var(--line); padding:16px 0}
.ac-note-row{display:flex; gap:14px; align-items:baseline; padding:7px 0}
.ac-note-date{flex:0 0 auto; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal); min-width:120px}
.ac-note-text{font-size:14.5px; color:var(--ink); line-height:1.5}

.ac-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ac-card{text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; cursor:pointer; transition:all .24s var(--ease); font-family:var(--font)}
.ac-card:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.ac-card .m{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); display:block; margin-bottom:10px}
.ac-card h3{color:var(--navy-700); font-size:18px; margin-bottom:8px}
.ac-card p{color:var(--grey); font-size:14px; line-height:1.55; margin-bottom:14px}
.ac-card .n{font-family:var(--mono); font-size:11.5px; color:var(--navy-700); font-weight:600}

.ac-runner{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
.ac-rbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--line); background:var(--paper)}
.ac-rtitle{display:block; font-size:17px; font-weight:650; color:var(--navy-700)}
.ac-rmod{display:block; font-family:var(--mono); font-size:11px; color:var(--grey);
  letter-spacing:.05em; margin-top:3px}
.ac-prog{height:3px; background:var(--line)}
.ac-prog-fill{height:100%; background:var(--teal); width:0; transition:width .35s var(--ease)}
.ac-q{padding:30px 28px}
.ac-qn{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grey); margin-bottom:12px}
.ac-qt{font-size:19px; font-weight:600; color:var(--ink); line-height:1.45; margin-bottom:22px}
.ac-opts{display:grid; gap:10px}
.ac-opt{text-align:left; width:100%; background:#fff; border:1.5px solid var(--line);
  border-radius:10px; padding:14px 18px; font-family:var(--font); font-size:15px;
  color:var(--ink); cursor:pointer; transition:all .18s; display:flex; gap:12px; align-items:flex-start}
.ac-opt:hover:not(:disabled){border-color:var(--teal); background:var(--paper)}
.ac-opt:disabled{cursor:default}
.ac-opt .k{flex:0 0 auto; font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--grey); padding-top:2px}
.ac-opt.right{border-color:#2E9E6B; background:#EAF7F1}
.ac-opt.right .k{color:#1E7A4F}
.ac-opt.wrong{border-color:#D9614C; background:#FDF1EE}
.ac-opt.wrong .k{color:#A33A26}
.ac-exp{margin-top:20px; border-left:3px solid var(--teal); background:var(--paper);
  padding:16px 18px; border-radius:0 9px 9px 0}
.ac-exp .h{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:7px}
.ac-exp.ok .h{color:#1E7A4F}
.ac-exp.no .h{color:#A33A26}
.ac-exp p{font-size:14.5px; color:var(--grey); line-height:1.6; margin:0}
.ac-next{margin-top:22px}

.ac-score{padding:40px 28px; text-align:center}
.ac-big{font-size:52px; font-weight:800; color:var(--navy-700); line-height:1; letter-spacing:-.02em}
.ac-big span{font-size:24px; color:var(--grey); font-weight:600}
.ac-verdict{font-size:19px; font-weight:650; margin:16px 0 8px}
.ac-score p{color:var(--grey); font-size:15px; max-width:520px; margin:0 auto 24px; line-height:1.6}
.ac-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.ac-batches{display:grid; gap:14px}
.ac-batch{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px}
.ac-batch h3{color:var(--navy-700); font-size:17px; margin-bottom:8px}
.ac-bmeta{display:flex; gap:20px; flex-wrap:wrap}
.ac-bmeta span{font-size:13.5px; color:var(--grey)}
.ac-bmeta strong{color:var(--ink); font-weight:600}
.ac-bstat{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border-radius:5px; white-space:nowrap}
.ac-bstat.open{background:#E6F6EE; color:#1E7A4F}
.ac-bstat.filling{background:#FDF3DC; color:#8A5F14}
.ac-bstat.closed{background:#F0F3F5; color:var(--grey)}
.ac-until{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal); margin-top:12px}

@media (max-width:960px){ .ac-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){
  .ac-grid{grid-template-columns:1fr}
  .ac-batch{grid-template-columns:1fr; gap:14px}
  .ac-note-row{flex-direction:column; gap:4px}
  .ac-qt{font-size:17px}
  .ac-big{font-size:42px}
}

/* ─── Threat Briefing / News (editorial feed) ────────────────── */
.nw-list{max-width:780px; display:grid; gap:18px}
.nw-item{padding:24px 26px; background:var(--white);
  border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
  box-shadow:0 1px 3px rgba(11,33,56,.05);
  transition:box-shadow .22s var(--ease), transform .22s var(--ease),
             border-left-color .22s var(--ease)}
.nw-item:hover{box-shadow:0 10px 28px rgba(11,33,56,.11); transform:translateY(-2px);
  border-left-color:var(--navy-700)}
.nw-meta{display:flex; align-items:center; gap:12px; margin-bottom:11px}
.nw-tag{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--teal); padding:3px 9px; border-radius:3px}
.nw-date{font-size:12px; color:var(--grey); font-family:var(--font-mono,monospace); letter-spacing:.02em}
.nw-title{font-size:21px; line-height:1.3; color:var(--navy-700); margin:0 0 10px;
  font-weight:750; letter-spacing:-.01em}
.nw-body{color:var(--ink); font-size:15px; line-height:1.72; margin:0 0 14px; opacity:.86}
.nw-means{background:var(--paper); border-left:2px solid var(--teal-bright);
  border-radius:0 6px 6px 0; padding:12px 16px; margin:0 0 14px;
  font-size:14px; line-height:1.6; color:var(--ink)}
.nw-means strong{color:var(--navy-700)}
.nw-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--grey)}
.nw-desk{font-weight:700; color:var(--navy-700); letter-spacing:.01em}
.nw-dot{color:var(--grey-dark)}
.nw-src{color:var(--grey); text-decoration:underline; text-underline-offset:2px}
.nw-src:hover{color:var(--teal)}
.nw-sp{flex:1}
.nw-related{color:var(--teal); font-weight:650; text-decoration:none; white-space:nowrap}
.nw-related:hover{color:var(--teal-bright)}
@media(max-width:640px){
  .nw-title{font-size:18.5px}
  .nw-sp{display:none; flex:none}
  .nw-foot{gap:8px}
}

/* ═══════════════════════════════════════════════════════════════
   READABILITY PASS — calmer colour, clearer active state
   (ye block sabse aakhir mein hai, isliye ye jeetta hai)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Active page in the top menu — saaf dikhna chahiye ───── */
.nav-links a{position:relative}
.nav-links a.active,
.nav-links a.nav-tools.active{
  color:var(--navy-700); background:var(--paper-2); font-weight:700;
}
.nav-links a.active::before{
  content:''; position:absolute; left:10px; right:10px; bottom:2px;
  height:2.5px; background:var(--teal); border-radius:2px;
}
.nav-links a.nav-cta.active{color:#fff; background:var(--teal)}
.nav-links a.nav-cta.active::before{display:none}
@media(max-width:900px){
  .nav-links a.active::before{left:10px; right:auto; width:3px; top:8px; bottom:8px; height:auto}
}

/* ═══════════════════════════════════════════════════════════════
   READABILITY PASS 2 — chhota text ab padhne layak
   Problem thi: secondary text 12–13px, halke grey mein.
   Ab: minimum 14.5px, aur grey gehra (4.5:1 se upar).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --grey:#4A5A66;        /* pehle #5B6B74 — ab white pe 7.4:1 */
  --grey-soft:#5E6E7A;   /* jab thoda halka chahiye — 5.6:1 */
}
body{font-size:16.5px; line-height:1.7; letter-spacing:-.003em}
p{line-height:1.72}
.lede{font-size:clamp(16.5px,1.9vw,19.5px); line-height:1.7; color:var(--grey)}

/* chhote text ka floor — kahin bhi 13.5px se neeche nahi */
.card p,.dc-note,.foot-tag,.tc-desc,.nw-body,.tk-sub,.fx-bio{font-size:15px; line-height:1.7}
.dc-note,.tk-meter-meta{color:var(--grey-soft)}
.card-meta,.ac-until,.nw-date,.tk-row-k{font-size:13.5px}
.foot-col a,.foot-bottom{font-size:14px}
.tb-badge,.eyebrow,.tk-algo,.nw-tag{font-size:11.5px}
.tk-notes li,.tk-good,.tk-warn-txt{font-size:14.5px; line-height:1.7}
.tc-desc{color:var(--grey)}
.tk-hash code,.tk-json pre{font-size:13.5px; line-height:1.7}
.stat-label{font-size:13.5px; color:#BDD2E0}
.th-trust span{font-size:14px}
.fx-role{font-size:14.5px}
.fx-place,.fx-cred{font-size:13px}
.fx-tags li{font-size:12.5px}

/* ═══════════════════════════════════════════════════════════════
   BENTO — alag-alag naap ki tiles. Har section ka rhythm badalta hai.
   ═══════════════════════════════════════════════════════════════ */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.bento-tile{border-radius:var(--r-lg); padding:26px 28px; position:relative;
  overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  min-height:150px; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.bento-tile:hover{transform:translateY(-3px)}

/* naap */
.bt-w2{grid-column:span 2}
.bt-w3{grid-column:span 3}
.bt-w4{grid-column:span 4}
.bt-h2{grid-row:span 2}

/* rang */
.bt-navy{background:var(--navy-700); color:#fff}
.bt-navy .bt-num,.bt-navy .bt-title{color:#fff}
.bt-navy .bt-label,.bt-navy .bt-sub{color:#B8CEDC}
.bt-dark{background:var(--navy-900); color:#fff}
.bt-dark .bt-num,.bt-dark .bt-title{color:#fff}
.bt-dark .bt-label,.bt-dark .bt-sub{color:#A9C2D2}
.bt-amber{background:var(--amber)}
.bt-amber .bt-num,.bt-amber .bt-title{color:var(--amber-ink)}
.bt-amber .bt-label,.bt-amber .bt-sub{color:#523205}   /* 5.65:1 on amber */
/* tile ke liye gehra teal — brand teal pe white text fail hota hai (3.99:1) */
.bt-teal{background:#146C76}
.bt-teal .bt-num,.bt-teal .bt-title{color:#fff}         /* 6.11:1 */
.bt-teal .bt-label,.bt-teal .bt-sub{color:#D3F0F3}      /* 5.10:1 */
.bt-white{background:var(--white); border:1px solid var(--line)}
.bt-white:hover{border-color:var(--amber); box-shadow:0 12px 30px rgba(11,33,56,.11)}
.bt-white .bt-num,.bt-white .bt-title{color:var(--navy-700)}
.bt-white .bt-label,.bt-white .bt-sub{color:var(--grey)}
.bt-paper{background:var(--paper); border:1px solid var(--line)}
.bt-paper .bt-num,.bt-paper .bt-title{color:var(--navy-700)}
.bt-paper .bt-label,.bt-paper .bt-sub{color:var(--grey)}

/* andar ka content */
.bt-num{font-family:var(--font-display); font-size:clamp(34px,4.4vw,52px);
  font-weight:700; line-height:1; letter-spacing:-.035em; margin-bottom:6px}
.bt-title{font-family:var(--font-display); font-size:clamp(18px,2.1vw,23px);
  font-weight:700; line-height:1.22; letter-spacing:-.022em; margin-bottom:8px}
.bt-label{font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase}
.bt-sub{font-size:14.5px; line-height:1.62}
.bt-top{display:flex; align-items:center; gap:9px; margin-bottom:16px}
.bt-ic{width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.14); flex:none}
.bt-white .bt-ic,.bt-paper .bt-ic{background:var(--paper-2); color:var(--navy-700)}
.bt-amber .bt-ic{background:rgba(65,36,2,.14); color:var(--amber-ink)}
.bt-go{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; margin-top:14px; display:inline-flex; align-items:center; gap:7px}
.bt-white .bt-go,.bt-paper .bt-go{color:var(--amber-deep)}
.bt-navy .bt-go,.bt-dark .bt-go{color:var(--amber)}
.bt-teal .bt-go{color:#fff}   /* teal pe amber fail hota hai (2.99:1) */
.bt-amber .bt-go{color:var(--amber-ink)}
a.bento-tile{text-decoration:none}
a.bento-tile:hover{text-decoration:none}

/* live dot */
.bt-live{width:8px; height:8px; border-radius:50%; background:var(--amber);
  animation:tkPulse 1.6s ease-in-out infinite; flex:none}

@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr); gap:12px}
  .bt-w3,.bt-w4{grid-column:span 2}
  .bt-h2{grid-row:auto}
  .bento-tile{padding:22px; min-height:130px}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .bt-w2,.bt-w3,.bt-w4{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){ .bento-tile:hover{transform:none} }

/* ═══ CERTIFICATE VERIFICATION ════════════════════════════════ */
.vf-wrap{max-width:760px}
.vf-form{display:grid; grid-template-columns:1.2fr 1fr auto; gap:12px; align-items:end}
.vf-field label{display:block; font-size:13px; font-weight:600; color:var(--navy-700);
  margin-bottom:7px}
.vf-form .dc-input{width:100%}
.vf-out{margin-top:22px; border-radius:var(--r-lg); padding:26px 28px;
  border:1px solid var(--line); border-left:4px solid var(--grey)}
.vf-out h3{font-family:var(--font-display); font-size:20px; line-height:1.3;
  margin-bottom:10px; letter-spacing:-.02em}
.vf-out p{font-size:15px; line-height:1.7; color:var(--grey); margin:0}
.vf-out.good{background:#E9F7F0; border-color:#B7E2CD; border-left-color:#1E9E6A}
.vf-out.good h3{color:#14663F}
.vf-out.mid{background:#FDF6E8; border-color:#F0DCB4; border-left-color:var(--amber)}
.vf-out.mid h3{color:var(--amber-deep)}
.vf-out.bad{background:#FCEDEC; border-color:#F3C9C5; border-left-color:#C0392B}
.vf-out.bad h3{color:#9B2C22}
.vf-rows{margin-top:18px; display:grid; gap:1px; background:rgba(0,0,0,.07);
  border-radius:var(--r); overflow:hidden}
.vf-row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--white); padding:12px 16px}
.vf-row span{font-size:13.5px; color:var(--grey)}
.vf-row strong{font-size:14.5px; color:var(--navy-700); text-align:right}
.vf-note{margin-top:16px !important; font-size:13.5px !important; opacity:.9}
@media(max-width:720px){
  .vf-form{grid-template-columns:1fr}
  .vf-out{padding:22px 20px}
}

/* ═══ ACADEMY — programme cards + session flow ════════════════ */
.prog-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:start}
.prog-card{background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 30px 26px}
.prog-main{border-top:4px solid var(--amber); box-shadow:0 10px 34px rgba(11,33,56,.09)}
.prog-card:not(.prog-main){border-top:4px solid var(--teal)}
.prog-badge{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:5px;
  background:rgba(240,167,46,.16); color:var(--amber-deep); margin-bottom:14px}
.prog-badge.alt{background:rgba(28,140,153,.13); color:#146C76}
.prog-card h3{font-family:var(--font-display); font-size:23px; line-height:1.24;
  letter-spacing:-.022em; color:var(--navy-700); margin-bottom:10px}
.prog-head p{font-size:15px; line-height:1.68; color:var(--grey); margin-bottom:22px}
.prog-specs{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:24px}
.prog-specs > div{background:var(--paper); padding:13px 15px; display:flex;
  flex-direction:column; gap:3px}
.ps-k{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey)}
.ps-v{font-size:14.5px; font-weight:600; color:var(--navy-700)}
.prog-sub{font-size:14px; font-weight:700; color:var(--navy-700); margin-bottom:12px}
.prog-list{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px}
.prog-list li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.6;
  color:var(--ink)}
.prog-list li::before{content:''; position:absolute; left:2px; top:7px; width:8px; height:8px;
  border-radius:2px; background:var(--amber); transform:rotate(45deg)}
.prog-card:not(.prog-main) .prog-list li::before{background:var(--teal)}
.prog-cta{display:flex; gap:11px; flex-wrap:wrap}

.flow-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.flow-step{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; position:relative}
.fs-n{position:absolute; top:-13px; left:20px; width:30px; height:30px; border-radius:50%;
  background:var(--amber); color:var(--amber-ink); font-family:var(--font-display);
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center}
.flow-step h4{font-family:var(--font-display); font-size:16.5px; color:var(--navy-700);
  margin:12px 0 8px}
.flow-step p{font-size:14px; line-height:1.62; color:var(--grey); margin:0}

@media(max-width:900px){
  .prog-grid{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:repeat(2,1fr); gap:22px 16px}
}
@media(max-width:560px){
  .prog-specs{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:1fr; gap:24px}
  .prog-card{padding:24px 22px}
}

/* ═══ THREE WAYS IN — Business · Academy · Tools ═══════════════
   Ek hi jagah teen audience. Har card apne rang ka.
   ═══════════════════════════════════════════════════════════ */
.paths{background:var(--paper)}
.path-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.path-card{display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-top:4px solid var(--line);
  border-radius:var(--r-lg); padding:30px 28px 26px; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.path-card:hover{transform:translateY(-5px); box-shadow:0 18px 42px rgba(11,33,56,.14);
  text-decoration:none}

.path-top{display:flex; align-items:center; gap:11px; margin-bottom:20px}
.path-ic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; flex:none; transition:all .25s var(--ease)}
.path-tag{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase}
.path-card h3{font-family:var(--font-display); font-size:21px; line-height:1.26;
  letter-spacing:-.022em; margin-bottom:12px; color:var(--navy-700)}
.path-card > p{font-size:15px; line-height:1.68; color:var(--grey); margin-bottom:18px}

.path-list{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; flex:1}
.path-list li{position:relative; padding-left:22px; font-size:14.5px; line-height:1.55;
  color:var(--ink)}
.path-list li::before{content:''; position:absolute; left:2px; top:8px;
  width:7px; height:7px; border-radius:2px; transform:rotate(45deg)}
.path-go{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; margin-top:auto}

/* Business — amber, sabse aage */
.path-biz{border-top-color:var(--amber)}
.path-biz .path-ic{background:rgba(240,167,46,.16); color:var(--amber-deep)}
.path-biz .path-tag{color:var(--amber-deep)}
.path-biz .path-list li::before{background:var(--amber)}
.path-biz .path-go{color:var(--amber-deep)}
.path-biz:hover{border-color:var(--amber); border-top-color:var(--amber)}

/* Academy — teal */
.path-edu{border-top-color:var(--teal)}
.path-edu .path-ic{background:rgba(28,140,153,.13); color:#146C76}
.path-edu .path-tag{color:#146C76}
.path-edu .path-list li::before{background:var(--teal)}
.path-edu .path-go{color:#146C76}
.path-edu:hover{border-color:var(--teal); border-top-color:var(--teal)}

/* Tools — navy, dark card */
.path-tool{background:var(--navy-900); border-color:rgba(255,255,255,.10);
  border-top-color:var(--navy-600)}
.path-tool .path-ic{background:rgba(255,255,255,.10); color:var(--amber)}
.path-tool .path-tag{color:var(--amber)}
.path-tool h3{color:#fff}
.path-tool > p{color:#A9C2D2}
.path-tool .path-list li{color:#CFE0EA}
.path-tool .path-list li::before{background:var(--amber)}
.path-tool .path-go{color:var(--amber)}
.path-tool:hover{border-color:var(--amber); border-top-color:var(--amber)}

@media(max-width:980px){
  .path-grid{grid-template-columns:1fr; gap:14px}
  .path-card{padding:26px 24px 22px}
}
@media(prefers-reduced-motion:reduce){ .path-card:hover{transform:none} }

/* bento band — hero ke turant baad, tight spacing */
.bento-band{background:var(--paper); padding:26px 0 34px}
.bento-band .bt-num .suffix{font-size:.62em; margin-left:2px}

/* ═══════════════════════════════════════════════════════════════
   SIGNAL AMBER — SpiderX ka signature accent
   Navy = bharosa · Teal = technical · Amber = dhyan do
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Display font — sirf headings pe. Body Inter hi rahega. */
  --font-display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --amber:#F0A72E;          /* bright — dark bg, buttons, badges pe */
  --amber-deep:#96610F;     /* text ke liye — white pe 5.2:1 contrast (AA pass) */
  --amber-ink:#412402;      /* amber background pe text */
  --amber-soft:rgba(240,167,46,.14);
}

/* ─── Headings — Space Grotesk. Body Inter rahega. ─────────── */
h1,h2,h3,h4,h5,
.brand-name,
.stat-num,
.nw-title,
.fx-name{
  font-family:var(--font-display);
  letter-spacing:-.025em;
}
/* Space Grotesk thoda chaura hai — weight halka karke balance */
h1,h2{font-weight:700}
h3,h4{font-weight:600}
.stat-num{font-weight:700; letter-spacing:-.03em}

/* ─── Eyebrow labels — ab amber, alag se dikhte hain ────────── */
.eyebrow{color:var(--amber-deep)}
.eyebrow::before{background:var(--amber)}
.eyebrow.on-dark{color:var(--amber)}
.eyebrow.on-dark::before{background:var(--amber)}

/* ─── Stat numbers — bade, amber, dhyan kheenchte hain ──────── */
.stat-num{color:var(--amber)}
.stat-num .suffix{color:var(--amber)}
.stat-label{color:#B8CEDC}
.stats-bar{border-top:2px solid var(--amber)}

/* ─── Primary button — amber, sabse zyada click hone wala ──── */
.btn:not(.btn-outline):not(.btn-ghost){
  background:var(--amber); color:var(--amber-ink); font-weight:700;
  box-shadow:0 4px 14px rgba(240,167,46,.28);
}
.btn:not(.btn-outline):not(.btn-ghost):hover{
  background:#FFB944; box-shadow:0 8px 24px rgba(240,167,46,.40);
  transform:translateY(-2px);
}
.btn{transition:all .22s var(--ease)}
.nav-cta{background:var(--amber) !important; color:var(--amber-ink) !important}
.nav-cta:hover{background:#FFB944 !important}

/* ─── Section ke upar amber hairline — rhythm deta hai ─────── */
.toolband{border-top:2px solid var(--amber)}
.cta-band{border-top:2px solid var(--amber)}

/* ─── Cards — hover pe uthti hain, amber border ────────────── */
.card{transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:var(--amber);
  box-shadow:0 12px 30px rgba(11,33,56,.13)}

/* ─── Service cards — audience ke hisaab se colour-coded ───── */
.card.aud-edu{border-top:3px solid var(--teal-bright)}
.card.aud-biz{border-top:3px solid var(--amber)}
.card.aud-edu .card-tag{color:var(--teal-bright)}
.card.aud-biz .card-tag{color:var(--amber)}
.card.aud-edu:hover{border-color:var(--teal-bright); border-top-color:var(--teal-bright)}
.card.aud-biz:hover{border-color:var(--amber); border-top-color:var(--amber)}

/* ─── Free Tools nav — amber FREE badge ────────────────────── */
.nav-links a.nav-tools{color:var(--amber-deep)}
.nav-links a.nav-tools::after{background:var(--amber); color:var(--amber-ink)}

/* ─── News tag — amber ribbon ──────────────────────────────── */
.nw-tag{background:var(--amber); color:var(--amber-ink)}
.nw-related{color:var(--amber-deep)}
.nw-related:hover{color:var(--amber)}
.nw-list{border-top-color:var(--amber)}

/* ═══ PLAIN SECTIONS — flat white ki jagah texture ═══════════
   Sirf un sections pe jinpe koi background class nahi hai.
   Dark, paper aur special sections chhoote nahi.
   ═══════════════════════════════════════════════════════════ */
section:not(.sec-paper):not(.sec-paper-2):not(.sec-dark):not(.sec-darker):not(.hero):not(.toolband):not(.pathfinder):not(.cta-band):not(.tools-hero):not(.page-hero):not(.photo-band){
  background:var(--white);
  position:relative;
}
/* Circuit traces + hex logo mark — SIRF daayein taraf.
   Text baayein rehta hai, isliye uske peeche background bilkul saaf.
   Do mask lage hain: horizontal (text bachane ko) + vertical (kinare fade). */
section:not(.sec-paper):not(.sec-paper-2):not(.sec-dark):not(.sec-darker):not(.hero):not(.toolband):not(.pathfinder):not(.cta-band):not(.tools-hero):not(.page-hero):not(.photo-band)::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='420' viewBox='0 0 400 420'%3E%3Cg fill='none' stroke='%23123B5D' stroke-width='1.2' stroke-linecap='round' stroke-opacity='0.55'%3E%3Cpath d='M400 62 L296 62 L274 84 L150 84'/%3E%3Cpath d='M400 150 L330 150 L308 128 L196 128'/%3E%3Cpath d='M400 300 L318 300 L296 322 L172 322'/%3E%3Cpath d='M400 366 L266 366 L244 344 L188 344'/%3E%3Cpath d='M274 84 L274 190' stroke-opacity='0.32'/%3E%3Cpath d='M308 128 L308 236' stroke-opacity='0.32'/%3E%3Cpath d='M296 322 L296 236' stroke-opacity='0.32'/%3E%3C/g%3E%3Cg fill='%231C8C99' fill-opacity='0.55'%3E%3Ccircle cx='274' cy='84' r='3.4'/%3E%3Ccircle cx='296' cy='322' r='3.4'/%3E%3C/g%3E%3Cg fill='%23F0A72E' fill-opacity='0.8'%3E%3Ccircle cx='308' cy='128' r='3.6'/%3E%3Ccircle cx='244' cy='344' r='3.6'/%3E%3C/g%3E%3Cg transform='translate(232,178) scale(2.3)' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 5 L55 19 L55 45 L32 59 L9 45 L9 19 Z' stroke='%23123B5D' stroke-opacity='0.4' stroke-width='2'/%3E%3Cpath d='M32 19 L45 26 L45 39 L32 46 L19 39 L19 26 Z' stroke='%231C8C99' stroke-opacity='0.48' stroke-width='1.6'/%3E%3Cpath d='M32 5 L32 19 M55 19 L45 26 M55 45 L45 39 M32 59 L32 46 M9 45 L19 39 M9 19 L19 26' stroke='%23123B5D' stroke-opacity='0.32' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right -20px center;
  background-size:auto 100%;
  opacity:.44;
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 64%, #000 88%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 64%, #000 88%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
/* chhoti screen pe text poori chaudai leta hai — pattern hata do */
@media(max-width:900px){
  section:not(.sec-paper):not(.sec-paper-2):not(.sec-dark):not(.sec-darker):not(.hero):not(.toolband):not(.pathfinder):not(.cta-band):not(.tools-hero):not(.page-hero):not(.photo-band)::before{
    display:none;
  }
}
section:not(.sec-paper):not(.sec-paper-2):not(.sec-dark):not(.sec-darker):not(.hero):not(.toolband):not(.pathfinder):not(.cta-band):not(.tools-hero):not(.page-hero):not(.photo-band) > *{
  position:relative; z-index:1;
}

/* .sec-paper ko bhi halka gehrapan — flat na lage */
.sec-paper{
  background:
    radial-gradient(700px 380px at 10% 0%, rgba(28,140,153,.055), transparent 60%),
    var(--paper);
}
.sec-paper-2{
  background:
    radial-gradient(700px 380px at 92% 100%, rgba(240,167,46,.07), transparent 62%),
    var(--paper-2);
}

/* cards white rahein taaki texture pe alag dikhein */
.card{background:var(--white)}

/* ═══ FREE TOOLS PAGE — hub layout ═══════════════════════════ */
.tools-hero{background:var(--navy-900); color:#fff; padding:56px 0 62px;
  position:relative; overflow:hidden}
.tools-hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 15% 30%, rgba(240,167,46,.13), transparent 66%)}
.tools-hero .wrap{position:relative; z-index:1}
.crumb.on-dark{color:#7E9DB2; margin-bottom:16px}
.crumb.on-dark a{color:#A9C2D2}
.crumb.on-dark a:hover{color:var(--amber)}
.th-badge{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--amber);
  background:rgba(240,167,46,.13); border:1px solid rgba(240,167,46,.32);
  padding:6px 13px; border-radius:6px; margin-bottom:20px}
.tools-hero h1{color:#fff; font-size:clamp(30px,4.4vw,48px); margin-bottom:16px; line-height:1.14}
.th-lede{color:#A9C2D2; font-size:clamp(15px,1.8vw,18px); max-width:60ch; line-height:1.65}
.th-trust{display:flex; gap:24px; flex-wrap:wrap; margin-top:26px}
.th-trust span{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#C3D6E2}
.th-trust svg{color:var(--amber); flex:none}

/* ═══ TOOL WORKSPACE — sidebar list + live panel ═══════════════
   Tools baayein hamesha dikhte hain, tool daayein khulta hai.
   Switch karne ke liye upar scroll nahi karna padta.
   ═══════════════════════════════════════════════════════════ */
.tabs.has-tools{display:grid; grid-template-columns:252px minmax(0,1fr);
  gap:22px; align-items:start}
/* Sidebar ka apna scrollbar nahi — poori list page ke saath hi chalti hai.
   Sticky sirf tab lagti hai jab list screen mein poori aa jaye; agar tools
   badh kar screen se lambi ho jayein to JS .no-stick laga deta hai. */
.tool-grid{grid-column:1; display:flex; flex-direction:column; gap:8px;
  border:none; margin-bottom:0; padding:0;
  position:sticky; top:96px; align-self:start;
  max-height:none; overflow:visible}
.tool-grid.no-stick{position:static}

/* group heading inside the sidebar list */
.tool-group{font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--grey);
  padding:6px 2px 2px; margin-top:4px}
.tool-group:first-child{margin-top:0}

.tool-card{display:flex; flex-direction:row; align-items:center; gap:12px;
  text-align:left; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 13px; min-height:0; width:100%;
  cursor:pointer; transition:all .2s var(--ease); font-family:var(--font);
  position:relative; overflow:hidden}
.tool-card:hover{border-color:var(--amber); background:#FFFDF8;
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(11,33,56,.10)}
.tool-card.active{border-color:var(--amber); background:var(--navy-900);
  box-shadow:0 6px 20px rgba(11,33,56,.20)}
.tc-ic{width:34px; height:34px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:var(--paper-2); color:var(--navy-700);
  margin-bottom:0; flex:none; transition:all .2s var(--ease)}
.tool-card:hover .tc-ic{background:var(--amber); color:var(--amber-ink)}
.tool-card.active .tc-ic{background:var(--amber); color:var(--amber-ink)}
.tc-name{font-family:var(--font-display); font-size:14.5px; font-weight:600;
  color:var(--navy-700); letter-spacing:-.015em; margin-bottom:0; line-height:1.3}
.tool-card.active .tc-name{color:#fff}
/* description aur "run check" chip mein nahi chahiye — panel mein hai */
.tc-desc,.tc-go{display:none}

/* Active tool panel — daayein, card ki tarah */
.tool-grid ~ .tab-panel.active{grid-column:2; background:var(--white);
  border:1px solid var(--line); border-top:3px solid var(--amber);
  border-radius:var(--r-lg); padding:30px 32px;
  box-shadow:0 10px 34px rgba(11,33,56,.10); scroll-margin-top:100px}

/* Tablet aur mobile — upar-neeche stack, list chips ki tarah */
@media(max-width:900px){
  .tabs.has-tools{grid-template-columns:1fr; gap:20px}
  .tool-grid{grid-column:1; position:static; max-height:none; overflow:visible;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px}
  .tool-grid .tool-card:first-child{grid-column:auto}
  .tool-grid ~ .tab-panel.active{grid-column:1}
}
@media(max-width:640px){
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .tool-grid ~ .tab-panel.active{padding:22px 20px}
  .tc-name{font-size:13.5px}
}
@media(max-width:420px){
  .tool-grid{grid-template-columns:1fr}
}
/* purana .tab-nav mobile scroll rule tool-grid pe lagu na ho */
@media(max-width:900px){
  .tool-grid{display:grid; grid-template-columns:repeat(2,1fr);
    flex-wrap:initial; overflow-x:visible; padding-bottom:0; gap:12px}
  .tool-group{grid-column:1 / -1; margin-top:8px}
  .tool-card{white-space:normal; flex:initial; min-height:0}
}
@media(max-width:560px){
  .tools-hero{padding:40px 0 44px}
  .th-trust{gap:12px; flex-direction:column}
  .tool-grid{grid-template-columns:1fr; gap:12px}
  .tool-grid .tool-card:first-child{grid-column:span 1}
  .tool-grid .tool-card:first-child .tc-name{font-size:19px}
  .tool-card{padding:18px; min-height:auto}
}

/* ═══ ANALYST TOOLKIT ════════════════════════════════════════ */
.tk-h{font-family:var(--font-display); color:var(--navy-700); font-size:22px;
  margin-bottom:8px; letter-spacing:-.02em}
.tk-sub{color:var(--grey); font-size:14.5px; line-height:1.65; margin-bottom:22px; max-width:68ch}

/* Output box */
.tk-out-wrap{position:relative; background:var(--navy-900); border-radius:var(--r);
  padding:20px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid rgba(240,167,46,.28)}
.tk-out{font-family:var(--mono); font-size:19px; color:#fff; word-break:break-all;
  flex:1; min-width:200px; line-height:1.5; letter-spacing:.01em}
.tk-out-sm{font-size:14px; white-space:pre-wrap}
.tk-out-actions{display:flex; gap:8px; flex:none}
.tk-icon-btn{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amber); background:rgba(240,167,46,.14);
  border:1px solid rgba(240,167,46,.34); border-radius:6px; padding:8px 13px;
  cursor:pointer; transition:all .18s var(--ease)}
.tk-icon-btn:hover{background:var(--amber); color:var(--amber-ink)}
.tk-icon-btn.tk-copied{background:#1E7A4F; border-color:#1E7A4F; color:#fff}
.tk-err{color:#FFB4A8 !important}

/* Strength meter */
.tk-meter{margin:18px 0 26px}
.tk-bar{height:7px; background:var(--paper-2); border-radius:100px; overflow:hidden}
.tk-bar-fill{height:100%; width:0; border-radius:100px; background:var(--grey);
  transition:width .3s var(--ease), background .3s var(--ease)}
.tk-bar-fill.bad{background:#D9534F}
.tk-bar-fill.warn{background:var(--amber)}
.tk-bar-fill.ok{background:#1E9E6A}
.tk-meter-row{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-top:10px; flex-wrap:wrap}
.tk-strength{font-family:var(--font-display); font-size:16px; font-weight:600}
.tk-strength.bad{color:#C9302C}
.tk-strength.warn{color:var(--amber-deep)}
.tk-strength.ok{color:#177A52}
.tk-meter-meta{font-family:var(--mono); font-size:12px; color:var(--grey)}
.tk-meter-time{font-size:13.5px; color:var(--grey); margin-top:8px}
.tk-meter-time strong{color:var(--navy-700)}

/* Mode toggle */
.tk-mode{display:inline-flex; background:var(--paper-2); border-radius:100px;
  padding:4px; gap:4px; margin-bottom:24px}
.tk-radio{position:relative}
.tk-radio input{position:absolute; opacity:0; width:0; height:0}
.tk-radio span{display:block; padding:8px 20px; border-radius:100px; font-size:13.5px;
  font-weight:600; color:var(--grey); cursor:pointer; transition:all .18s var(--ease)}
.tk-radio input:checked + span{background:var(--navy-700); color:#fff}
.tk-radio input:focus-visible + span{outline:2px solid var(--amber); outline-offset:2px}

/* Fields */
.tk-field{display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.tk-field label{font-size:13.5px; font-weight:600; color:var(--navy-700);
  min-width:120px; flex:none}
.tk-range{flex:1; min-width:180px; -webkit-appearance:none; appearance:none;
  height:5px; border-radius:100px; background:var(--paper-2); outline:none}
.tk-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%; background:var(--amber);
  cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(11,33,56,.28)}
.tk-range::-moz-range-thumb{width:20px; height:20px; border-radius:50%;
  background:var(--amber); cursor:pointer; border:3px solid #fff;
  box-shadow:0 2px 6px rgba(11,33,56,.28)}
.tk-num{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--navy-700);
  min-width:32px; text-align:right; flex:none}

.tk-checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 20px; margin-bottom:20px}
.tk-check{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px;
  color:var(--ink)}
.tk-check input{width:17px; height:17px; accent-color:var(--amber); cursor:pointer; flex:none}

.tk-mins{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:8px}
.tk-field-sm label{display:block; font-size:12.5px; font-weight:600;
  color:var(--navy-700); margin-bottom:6px}
.tk-numin,.tk-select{font-family:var(--font); font-size:14px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  color:var(--ink); width:110px}
.tk-select{width:auto; min-width:180px; cursor:pointer}
.tk-numin:focus,.tk-select:focus{outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(240,167,46,.18)}

/* Hash list */
.tk-hash-list{margin-top:24px; display:grid; gap:12px}
.tk-hash{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px}
.tk-hash-top{display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap}
.tk-algo{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--navy-700)}
.tk-warn-chip,.tk-ok-chip{font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:100px}
.tk-warn-chip{background:#FDF3DC; color:#8A5F14}
.tk-ok-chip{background:#E6F6EE; color:#1E7A4F}
.tk-hash-top .tk-icon-btn{margin-left:auto}
.tk-hash code{font-family:var(--mono); font-size:12.5px; color:var(--ink);
  word-break:break-all; display:block; line-height:1.6}

/* Rows / chips */
.tk-row{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tk-row:last-child{border-bottom:none}
.tk-row-k{font-size:13.5px; color:var(--grey)}
.tk-row-v{font-family:var(--mono); font-size:13.5px; color:var(--navy-700); font-weight:600;
  text-align:right; word-break:break-all}
.tk-chip{font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px}
.tk-chip.certain{background:#E6F6EE; color:#1E7A4F}
.tk-chip.likely{background:rgba(28,140,153,.12); color:var(--teal)}
.tk-chip.possible{background:var(--paper-2); color:var(--grey)}

/* Notes */
.tk-notes{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:9px}
.tk-notes li{position:relative; padding-left:22px; font-size:14px; line-height:1.6;
  color:var(--ink)}
.tk-notes li::before{content:'!'; position:absolute; left:0; top:1px;
  width:16px; height:16px; border-radius:50%; background:var(--amber);
  color:var(--amber-ink); font-size:11px; font-weight:700; text-align:center;
  line-height:16px; font-family:var(--mono)}
.tk-good{margin-top:16px; font-size:14px; color:#177A52; background:#E6F6EE;
  padding:13px 16px; border-radius:var(--r-sm); line-height:1.6}
.tk-warn-txt{font-size:14px; color:#8A5F14; background:#FDF3DC; padding:13px 16px;
  border-radius:var(--r-sm); line-height:1.6; margin:0}

/* JWT */
.tk-json-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px; margin-top:22px}
.tk-json{background:var(--navy-900); border-radius:var(--r); padding:14px 16px;
  border:1px solid rgba(255,255,255,.08)}
.tk-json .tk-algo{color:var(--amber)}
.tk-json pre{font-family:var(--mono); font-size:12.5px; color:#CFE0EA; margin:0;
  white-space:pre-wrap; word-break:break-word; line-height:1.65}

@media(max-width:640px){
  .tk-out{font-size:16px}
  .tk-field label{min-width:auto; width:100%}
  .tk-mode{width:100%}
  .tk-radio{flex:1}
  .tk-radio span{text-align:center}
}

/* ═══ FOUNDER CARD — compact, signature style ════════════════ */
.fx-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; margin:0; position:relative; overflow:hidden}
.fx-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--navy-700),var(--teal),var(--amber))}

.fx-head{display:flex; align-items:center; gap:16px; margin-bottom:18px}
.fx-photo{width:74px; height:74px; border-radius:50%; object-fit:cover;
  object-position:center 20%; flex:none; border:2px solid var(--paper-2)}
.fx-id{display:flex; flex-direction:column; gap:1px; min-width:0}
.fx-eyebrow{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-deep); margin-bottom:3px}
.fx-name{font-size:19px; font-weight:750; color:var(--navy-700); letter-spacing:-.015em;
  line-height:1.2}
.fx-role{font-size:13.5px; color:var(--grey); font-weight:550}
.fx-place{font-size:12px; color:var(--grey); opacity:.8; margin-top:2px}

.fx-bio{font-size:14px; line-height:1.65; color:var(--grey); margin:0 0 16px}

.fx-tags{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:0; list-style:none}
.fx-tags li{font-size:11.5px; color:var(--teal); background:rgba(28,140,153,.09);
  padding:4px 10px; border-radius:100px; white-space:nowrap}

.fx-sign{border-top:1px solid var(--line); padding-top:14px;
  display:flex; flex-direction:column; gap:5px}
.fx-mark{font-family:var(--mono); font-size:17px; font-weight:600; color:var(--navy-700);
  letter-spacing:.02em; font-style:italic}
.fx-cred{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey); opacity:.85}

@media(max-width:560px){
  .fx-card{padding:20px}
  .fx-head{gap:13px}
  .fx-photo{width:62px; height:62px}
  .fx-name{font-size:17.5px}
}

/* ═══ LIVE THREAT TICKER — homepage pe chalti hui news patti ═══ */
/* Header ke theek neeche baithti hai — breaking-news bar ki tarah */
.ticker{background:#061622; border-bottom:1px solid rgba(240,167,46,.30);
  overflow:hidden; padding:0; display:flex; align-items:stretch}

/* Hero thoda compact — ticker + hero dono fold ke andar aayein */
.hero{padding:62px 0 66px}
@media(max-width:900px){ .hero{padding:48px 0 52px} }
.ticker-label{background:var(--amber); color:var(--amber-ink); font-family:var(--mono);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:12px 16px; display:flex; align-items:center; gap:8px; white-space:nowrap; flex:none}
.ticker-dot{width:7px; height:7px; border-radius:50%; background:var(--amber-ink);
  animation:tkPulse 1.6s ease-in-out infinite}
@keyframes tkPulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker-track{overflow:hidden; flex:1; position:relative}
.ticker-move{display:flex; gap:44px; white-space:nowrap; align-items:center;
  padding:12px 0; animation:tkScroll 46s linear infinite; width:max-content}
.ticker:hover .ticker-move{animation-play-state:paused}
@keyframes tkScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{color:#CFE0EA; font-size:13px; display:inline-flex; align-items:center; gap:9px}
.ticker-item b{color:var(--amber); font-weight:700; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.ticker-item a{color:#CFE0EA}
.ticker-item a:hover{color:var(--amber)}
@media(max-width:640px){
  .ticker-label{padding:10px 12px; font-size:9.5px}
  .ticker-item{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .ticker-move{animation:none}
  .card:hover{transform:none}
  .btn:hover{transform:none}
}