/* ============================================================
   BASTION CYBER GROUP — shared design system
   Navy canvas · neon-lime + teal accents · light-gray body
   ============================================================ */
:root{
  --bg:#070E1B;            /* midnight navy base */
  --bg-2:#040810;          /* near-black navy */
  --panel:rgba(255,255,255,.022);
  --panel-2:rgba(255,255,255,.042);
  --navy-2:#101E33;        /* raised panel navy */
  --fg:#EFF4F9;            /* headings — near white */
  --body:#A7B4C1;          /* body text — light gray (QDT-style, not white) */
  --muted:#7C8A98;         /* secondary */
  --faint:#54636F;         /* labels / ticks */
  --line:rgba(160,190,220,.12);
  --line-2:rgba(160,190,220,.065);
  --green:#8CFF3B;         /* neon-lime primary accent */
  --green-dim:rgba(140,255,59,.5);
  --teal:#5BC0BE;          /* secondary accent */
  --teal-dim:rgba(91,192,190,.5);
  --ink:#0A1626;           /* dark text on light surfaces */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --pad:clamp(22px,5vw,72px);
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--bg);color:var(--body);
  font-weight:300;line-height:1.66;-webkit-font-smoothing:antialiased;
  letter-spacing:.005em;overflow-x:hidden;position:relative;
}
::selection{background:rgba(140,255,59,.26)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:300;letter-spacing:-.035em;line-height:1.04;color:var(--fg)}
p{color:var(--body)}
strong{color:var(--fg);font-weight:500}

/* ambient base (very subtle, page-wide) ---------------------- */
.ambient{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% -6%,rgba(140,255,59,.05),transparent 60%),
    radial-gradient(640px 520px at 2% 100%,rgba(91,192,190,.04),transparent 62%),
    var(--bg);}

/* scoped twinkling dot-field — applied to SELECT sections only */
.dotfield{position:relative}
.dotfield>canvas.df{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dotfield>*:not(canvas){position:relative;z-index:1}
/* a slightly warmer backdrop so dotted sections read as distinct panels */
.dotfield.tint{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 40%,rgba(91,192,190,.03))}

/* mono micro label ------------------------------------------- */
.kick{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:12px}
.kick .n{color:var(--green)}
.kick.teal .n{color:var(--teal)}
.kick.dash::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--green),transparent)}

/* shell / hairline frame ------------------------------------- */
.shell{max-width:var(--maxw);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.row{border-bottom:1px solid var(--line);padding:0 var(--pad)}
.row.pv{padding-top:clamp(70px,9vw,132px);padding-bottom:clamp(70px,9vw,132px)}
.tick{position:absolute;width:9px;height:9px;z-index:3;pointer-events:none}
.tick::before,.tick::after{content:"";position:absolute;background:var(--green);opacity:.7}
.tick::before{left:0;top:0;width:9px;height:1px}.tick::after{left:0;top:0;width:1px;height:9px}
.tick.tr{right:0;transform:scaleX(-1)}.tick.bl{bottom:0;transform:scaleY(-1)}.tick.br{right:0;bottom:0;transform:scale(-1)}

/* buttons / links -------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:.9rem;padding:13px 24px;border-radius:3px;cursor:pointer;transition:.28s;border:1px solid transparent}
.btn svg{width:15px;height:15px}
.btn.fill{background:var(--green);color:var(--ink);border-color:var(--green)}
.btn.fill svg{stroke:var(--ink)}
.btn.fill:hover{background:transparent;color:var(--green)}
.btn.fill:hover svg{stroke:var(--green)}
.btn.ghost{border-color:var(--line);color:var(--fg);background:var(--panel)}
.btn.ghost:hover{border-color:var(--green);color:var(--green)}
.link{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);padding-bottom:4px;border-bottom:1px solid var(--line);transition:.3s;width:fit-content}
.link:hover{color:var(--green);border-color:var(--green-dim)}
.link svg{width:14px;height:14px;transition:transform .3s}
.link:hover svg{transform:translateX(5px)}

/* nav -------------------------------------------------------- */
nav.top{position:sticky;top:0;z-index:60;background:rgba(7,14,27,.82);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);transition:padding .4s cubic-bezier(.2,.7,.2,1),background .4s,border-color .4s}
.nav-in{position:relative;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--pad);transition:height .4s cubic-bezier(.2,.7,.2,1),padding .4s,background .4s,box-shadow .4s,border-radius .4s,border-color .4s;border:1px solid transparent}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-size:.98rem;letter-spacing:.16em;font-weight:600;color:var(--fg)}
.brand .wm small{font-family:var(--mono);font-size:.54rem;letter-spacing:.26em;color:var(--muted);margin-top:3px}
.brand .wm small em{color:var(--green);font-style:normal}
.nav-links{display:flex;gap:32px}
.nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.25s;position:relative}
.nav-links a:hover{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:22px}
.menu{display:none;background:none;border:0;color:var(--fg);cursor:pointer}
/* floating white pill on scroll */
nav.top.scrolled{background:transparent;backdrop-filter:none;border-color:transparent;padding:12px clamp(16px,3vw,28px) 0}
nav.top.scrolled .nav-in{height:60px;padding:0 14px 0 24px;background:#F5F6F3;border-radius:16px;border-color:rgba(0,0,0,.06);box-shadow:0 16px 46px -16px rgba(0,0,0,.6)}
nav.top.scrolled .brand .wm b{color:#10161D}
nav.top.scrolled .brand .wm small{color:#5A6672}
nav.top.scrolled .nav-links a{color:#5A6672}
nav.top.scrolled .nav-links a:hover{color:#10161D}
nav.top.scrolled .nav-right>.link{color:#10161D;border-color:rgba(0,0,0,.14)}
nav.top.scrolled .nav-right>.link:hover{color:#5f9022;border-color:rgba(95,144,34,.5)}
nav.top.scrolled .menu{color:#10161D}
/* mobile drawer — toggled by .open in site.js (no inline styles, so nothing
   is left behind when the viewport crosses back to desktop) */
.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
  background:#080F1E;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;
  padding:8px 0;box-shadow:0 24px 48px -20px rgba(0,0,0,.7)}
.nav-links.open a{padding:14px 24px}
nav.top.scrolled .nav-links.open{background:#F5F6F3;border-color:rgba(0,0,0,.06)}
nav.top.scrolled .nav-links.open a{color:#5A6672}
nav.top.scrolled .nav-links.open a[aria-current="page"]{color:#10161D}

/* hero ------------------------------------------------------- */
.hero{position:relative;padding:clamp(54px,7.5vw,104px) var(--pad) clamp(50px,6vw,88px);overflow:hidden}
.hero-in{position:relative;z-index:2;max-width:1000px}
.hero .kick{margin-bottom:clamp(26px,4vw,42px)}
.hero .kick .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.hero h1{font-size:clamp(2.5rem,7.4vw,5.6rem);font-weight:200;letter-spacing:-.045em;margin-bottom:clamp(26px,3.6vw,40px);color:var(--fg)}
.hero h1 .a{color:var(--green)}
.hero h1 .i{font-style:italic;font-weight:200;color:var(--teal)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:18px}
.hero-lead{max-width:520px;color:var(--body);font-size:1.08rem;font-weight:300}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:1;background:linear-gradient(90deg,transparent,var(--teal),var(--green),transparent);opacity:.4;animation:scan 8s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(10vh);opacity:0}50%{transform:translateY(64vh);opacity:.5}}
.page-hero{padding:clamp(50px,6.5vw,92px) var(--pad) clamp(46px,5.5vw,80px)}
.page-hero h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:200;letter-spacing:-.045em;color:var(--fg);margin:clamp(22px,3vw,34px) 0 22px;max-width:16ch}
.page-hero p{max-width:600px;color:var(--body);font-size:1.1rem}

/* ticker ----------------------------------------------------- */
.ticker{overflow:hidden;padding:22px 0;border-bottom:1px solid var(--line)}
.ticker-t{display:flex;gap:52px;width:max-content;white-space:nowrap;animation:tick 36s linear infinite;padding-left:52px}
.ticker:hover .ticker-t{animation-play-state:paused}
.ticker-t span{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:52px}
.ticker-t span::before{content:"+";color:var(--green)}
@keyframes tick{to{transform:translateX(-50%)}}

/* section head ----------------------------------------------- */
.sec-head{max-width:760px;margin-bottom:clamp(44px,6vw,66px)}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:200;margin:18px 0 18px;color:var(--fg)}
.sec-head p{color:var(--body);font-size:1.06rem;max-width:640px}

/* editorial two-col ------------------------------------------ */
.two{display:grid;grid-template-columns:minmax(190px,1fr) 2.4fr;gap:clamp(30px,6vw,90px)}
.col-label .kick{position:sticky;top:110px;display:block}
.col-label h2{font-size:clamp(1.8rem,3.3vw,2.8rem);font-weight:200;margin:18px 0 0;color:var(--fg)}
.col-body>p.intro{color:var(--body);font-size:1.14rem;font-weight:300;max-width:580px}

/* hairline stack list (services / offers) -------------------- */
.stack{margin-top:26px;border-top:1px solid var(--line-2)}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,4vw,54px);align-items:start;padding:clamp(24px,3.2vw,38px) 0;border-bottom:1px solid var(--line-2);position:relative;transition:.4s}
.item .no{font-family:var(--mono);font-size:.74rem;color:var(--green);letter-spacing:.1em;padding-top:7px}
.item h3{font-size:clamp(1.3rem,2.5vw,1.85rem);font-weight:300;letter-spacing:-.03em;color:var(--fg);transition:.35s}
.item p{color:var(--body);font-size:.98rem;font-weight:300;max-width:560px;margin-top:12px}
.item .arw{align-self:center;color:var(--faint);transition:.35s}
.item .arw svg{width:20px;height:20px}
.item:hover{padding-left:14px}
.item:hover h3{color:var(--green)}
.item:hover .arw{color:var(--green);transform:translateX(4px)}
.item::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--green);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.item:hover::after{width:100%}
.item.teal .no{color:var(--teal)}
.item.teal:hover h3,.item.teal:hover .arw{color:var(--teal)}
.item.teal::after{background:var(--teal)}

/* principle / feature cards (3-up) --------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr)}
.card{padding:clamp(30px,3.2vw,46px) clamp(24px,2.4vw,38px);border-right:1px solid var(--line);border-top:1px solid var(--line);transition:.35s;position:relative}
.cards .card:nth-child(3n){border-right:0}
.card:hover{background:var(--panel)}
.card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;background:rgba(140,255,59,.07);border:1px solid var(--green-dim)}
.card .ic.teal{background:rgba(91,192,190,.08);border-color:var(--teal-dim)}
.card .ic svg{width:24px;height:24px;stroke:var(--green)}
.card .ic.teal svg{stroke:var(--teal)}
.card .no{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.12em;margin-bottom:14px;display:block}
.card h4{font-size:1.2rem;font-weight:400;color:var(--fg);margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--body);font-size:.95rem}

/* big stack blocks (capability lists, QDT style) ------------- */
.block-list{border-top:1px solid var(--line)}
.blk{display:grid;grid-template-columns:minmax(240px,1fr) 1.6fr;gap:clamp(28px,5vw,80px);padding:clamp(44px,5.5vw,80px) 0;border-bottom:1px solid var(--line)}
.blk .lead-col .no{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.14em}
.blk .lead-col h3{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:200;color:var(--fg);margin:16px 0 16px}
.blk .lead-col p{color:var(--body);font-size:1rem;max-width:420px}
.blk .lead-col.teal .no{color:var(--teal)}
.cap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.cap .c{background:var(--bg);padding:24px 26px}
.cap .c h5{font-family:var(--sans);font-size:1.02rem;font-weight:500;color:var(--fg);margin-bottom:7px;display:flex;align-items:center;gap:10px}
.cap .c h5::before{content:"";width:6px;height:6px;background:var(--green);border-radius:1px;flex:0 0 auto}
.cap.teal .c h5::before{background:var(--teal)}
.cap .c h5 a{color:inherit;transition:color .25s}
.cap .c h5 a:hover{color:var(--green)}
.cap.teal .c h5 a:hover{color:var(--teal)}
.cap .c h5 a::after{content:"\2192";margin-left:8px;opacity:0;transition:opacity .25s,transform .25s;display:inline-block}
.cap .c h5 a:hover::after{opacity:.9;transform:translateX(3px)}
.cap .c p{color:var(--muted);font-size:.9rem}

/* stats ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(40px,6vw,72px) clamp(18px,3vw,40px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .num{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:200;letter-spacing:-.05em;color:var(--fg)}
.stat .num span{color:var(--green)}
.stat .cap2{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* method / small cells --------------------------------------- */
.method{display:grid;grid-template-columns:repeat(4,1fr)}
.mcell{padding:clamp(30px,4vw,52px) clamp(22px,2.6vw,36px);border-right:1px solid var(--line);transition:.35s}
.mcell:last-child{border-right:0}
.mcell:hover{background:var(--panel)}
.mcell .no{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.12em}
.mcell h4{font-size:1.16rem;font-weight:400;color:var(--fg);margin:22px 0 10px}
.mcell p{color:var(--body);font-size:.92rem}

/* offer ladder table ----------------------------------------- */
.ladder{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:130px 1.4fr 1.6fr;gap:clamp(18px,3vw,48px);padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line);align-items:baseline;transition:.3s}
.lrow:hover{padding-left:12px}
.lrow .when{font-family:var(--mono);font-size:.74rem;color:var(--teal);letter-spacing:.08em;text-transform:uppercase}
.lrow h4{font-size:1.24rem;font-weight:400;color:var(--fg);letter-spacing:-.02em}
.lrow p{color:var(--body);font-size:.95rem;margin-top:6px}
.lrow .note{color:var(--muted);font-size:.95rem}

/* testimonial / quote ---------------------------------------- */
.quote{padding:clamp(48px,7vw,96px) 0}
.quote blockquote{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:200;line-height:1.32;color:var(--fg);max-width:900px;letter-spacing:-.02em}
.quote .who{margin-top:28px;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.quote .who b{color:var(--green);font-weight:500}

/* blog grid -------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr)}
.post{padding:clamp(28px,3.2vw,44px);border-right:1px solid var(--line);border-top:1px solid var(--line);transition:.35s;display:block}
.posts .post:nth-child(3n){border-right:0}
.post:hover{background:var(--panel)}
.post .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.post h3{font-size:1.24rem;font-weight:400;color:var(--fg);margin:20px 0 40px;line-height:1.34;transition:.3s}
.post:hover h3{color:var(--green)}
.post .meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--faint)}
.post .meta svg{width:16px;height:16px;transition:transform .3s}
.post:hover .meta svg{transform:translate(3px,-3px)}

/* team ------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(4,1fr)}
.member{padding:clamp(26px,2.6vw,38px);border-right:1px solid var(--line);border-top:1px solid var(--line)}
.team .member:nth-child(4n){border-right:0}
.member .av{width:100%;aspect-ratio:1;border-radius:12px;background:linear-gradient(150deg,var(--navy-2),var(--bg-2));border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px}
.member .av svg{width:34px;height:34px;stroke:var(--green-dim)}
.member h4{font-size:1.05rem;font-weight:500;color:var(--fg)}
.member .rl{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:6px}

/* FAQ / accordion -------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--fg);font-family:var(--sans);font-size:1.14rem;font-weight:300}
.qa button .pm{color:var(--green);font-family:var(--mono);font-size:1.3rem;transition:transform .3s;flex:0 0 auto}
.qa.open button .pm{transform:rotate(45deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.qa .ans p{color:var(--body);font-size:.98rem;padding-bottom:26px;max-width:720px}

/* contact form ----------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px)}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:14px 16px;color:var(--fg);font-family:var(--sans);font-size:.98rem;font-weight:300;transition:.25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);background:rgba(140,255,59,.03)}
.field textarea{min-height:130px;resize:vertical}
.info-line{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-line .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.info-line .v{color:var(--fg);font-size:1.05rem;font-weight:300}
.info-line .v a:hover{color:var(--green)}

/* CTA -------------------------------------------------------- */
.cta{text-align:center;padding:clamp(76px,10vw,150px) var(--pad)}
.cta h2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:200;letter-spacing:-.045em;color:var(--fg);max-width:780px;margin:24px auto 24px}
.cta h2 .a{color:var(--green)}
.cta p{color:var(--body);max-width:520px;margin:0 auto 38px;font-weight:300}
.cta .hero-cta{justify-content:center}

/* footer ----------------------------------------------------- */
footer{padding:clamp(56px,7vw,92px) var(--pad) 38px;position:relative;z-index:2}
.foot-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding-bottom:54px;border-bottom:1px solid var(--line)}
.foot-top .brand{margin-bottom:22px}
.foot-top p{color:var(--body);font-size:.94rem;font-weight:300;max-width:290px}
.fcol h6{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.fcol a{display:block;color:var(--muted);font-size:.94rem;font-weight:300;margin-bottom:13px;transition:.25s;width:fit-content}
.fcol a:hover{color:var(--green);transform:translateX(3px)}
.foot-bot{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px}
.foot-bot small,.foot-bot a{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--faint)}
.foot-bot .lg{display:flex;gap:26px}
.foot-bot a:hover{color:var(--green)}

/* reveal ----------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.scan{display:none}
  .float,.drift,.sheen::after{animation:none !important}}
.rv:nth-child(2){transition-delay:.06s}.rv:nth-child(3){transition-delay:.12s}.rv:nth-child(4){transition-delay:.18s}

/* active-page indicator (QDT-style) -------------------------- */
.fcol a[aria-current="page"]{color:var(--green)}
.fcol a[aria-current="page"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:9px;vertical-align:middle;box-shadow:0 0 8px var(--green)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:var(--green)}
nav.top.scrolled .nav-links a[aria-current="page"]{color:#10161D}
nav.top.scrolled .nav-links a[aria-current="page"]::after{background:#5f9022}

/* subtle animations ------------------------------------------ */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-6px) rotate(.6deg)}}
@keyframes sheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
.float{animation:float 9s ease-in-out infinite}
.drift{animation:drift 16s ease-in-out infinite}
/* sheen sweep for accent surfaces */
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;left:0;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(140,255,59,.10),transparent);
  transform:translateX(-120%);animation:sheen 7s ease-in-out infinite;pointer-events:none}
/* gentle link/underline + card easing already inline; add hover glow on fill btn */
.btn.fill{transition:.28s,box-shadow .4s}
.btn.fill:hover{box-shadow:0 0 30px -6px var(--glow,rgba(140,255,59,.5))}

/* decorative cyber graphics (PLACEHOLDERS) ------------------- */
.graphic{position:absolute;pointer-events:none;opacity:.5}
.graphic.corner{top:0;right:0;width:min(46%,520px);opacity:.42}
.graphic svg{width:100%;height:auto;overflow:visible}
.graphic .ln{stroke:var(--line);stroke-width:1;fill:none}
.graphic .ac{stroke:var(--green);stroke-width:1.2;fill:none}
.graphic .tc{stroke:var(--teal);stroke-width:1.2;fill:none}
.graphic .nd{fill:var(--green)}
@media(max-width:700px){.graphic.corner{opacity:.28;width:70%}}

/* reversed editorial column (label on right) ----------------- */
.two.rev{grid-template-columns:2.4fr minmax(190px,1fr)}
.two.rev .col-label{order:2}

/* feature split (text + visual, alternating) ----------------- */
.feature{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,80px);align-items:center}
.feature.rev .fig{order:-1}
.feature .txt .kick{margin-bottom:20px}
.feature .txt h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:200;color:var(--fg);margin-bottom:18px}
.feature .txt p{color:var(--body);font-size:1.05rem;max-width:480px}
.feature .txt .link{margin-top:26px}
.fig{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--navy-2),var(--bg-2));aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center}
.fig svg{width:64%;height:64%;overflow:visible}
.fig .glow{position:absolute;inset:0;background:radial-gradient(360px 220px at 70% 25%,rgba(140,255,59,.14),transparent 60%);pointer-events:none}
.fig.teal .glow{background:radial-gradient(360px 220px at 30% 30%,rgba(91,192,190,.16),transparent 60%)}

/* big statement band ----------------------------------------- */
.statement{padding:clamp(84px,13vw,190px) var(--pad);text-align:center}
.statement p{font-size:clamp(1.7rem,4.4vw,3.4rem);font-weight:200;line-height:1.22;letter-spacing:-.03em;color:var(--fg);max-width:20ch;margin:0 auto}
.statement p .a{color:var(--green)}.statement p .t{color:var(--teal)}
.statement .kick{justify-content:center;margin-bottom:28px}

/* inset panel card ------------------------------------------- */
.panel-inset{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:clamp(32px,5vw,68px);overflow:hidden;position:relative}

/* bento grid (mixed sizes) ----------------------------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bento .b{border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.6vw,34px);background:var(--panel);transition:.3s;position:relative;overflow:hidden}
.bento .b:hover{background:var(--panel-2);transform:translateY(-3px)}
.bento .b.wide{grid-column:span 2}
.bento .b .no{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.12em}
.bento .b h4{font-size:1.16rem;font-weight:400;color:var(--fg);margin:16px 0 8px;letter-spacing:-.02em}
.bento .b p{color:var(--body);font-size:.94rem}
.bento .b.teal .no{color:var(--teal)}

/* responsive ------------------------------------------------- */
@media(max-width:960px){
  .two.rev{grid-template-columns:1fr}
  .two.rev .col-label{order:0}
  .feature{grid-template-columns:1fr;gap:32px}
  .feature.rev .fig{order:0}
  .bento{grid-template-columns:1fr 1fr}
  .bento .b.wide{grid-column:span 2}
  .two{grid-template-columns:1fr;gap:32px}
  .col-label .kick{position:static}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:nth-child(3n){border-right:1px solid var(--line)}
  .cards .card:nth-child(2n){border-right:0}
  .blk{grid-template-columns:1fr;gap:28px}
  .stats,.method,.team{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n),.mcell:nth-child(2n),.team .member:nth-child(2n){border-right:0}
  .stat,.mcell{border-bottom:1px solid var(--line)}
  .posts{grid-template-columns:1fr 1fr}
  .posts .post:nth-child(3n){border-right:1px solid var(--line)}
  .posts .post:nth-child(2n){border-right:0}
  .lrow{grid-template-columns:1fr;gap:8px}
  .contact-grid,.foot-top{grid-template-columns:1fr 1fr}
  .cap{grid-template-columns:1fr}
  .nav-links{display:none}.nav-links.open{display:flex}.menu{display:block}
}
@media(max-width:560px){
  .cards,.stats,.method,.team,.posts{grid-template-columns:1fr}
  .card,.stat,.mcell,.member,.post{border-right:0 !important}
  .item{grid-template-columns:auto 1fr;gap:18px}
  .item .arw{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr}
}

/* ============================================================
   BLUEPRINT LAYER — QDT-style borders, corner accents, grid
   ============================================================ */
/* registration "+" marks where every section rule meets the frame */
.shell .row{position:relative}
.shell .row::before,.shell .row::after{
  content:"+";position:absolute;bottom:-8px;z-index:4;
  font-family:var(--mono);font-weight:400;font-size:13px;line-height:1;
  color:var(--green);opacity:.55;pointer-events:none}
.shell .row::before{left:-6px}
.shell .row::after{right:-6px}

/* squarer, blueprint-style corners on boxed components */
.fig,.bento .b,.panel-inset{border-radius:6px}

/* corner ticks (L-marks) on boxed components */
.fig,.bento .b,.cap,.panel-inset,.member .av{position:relative}
.fig::before,.bento .b::before,.cap::before,.panel-inset::before,.member .av::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
  background:
    linear-gradient(var(--green),var(--green)) 0 0/9px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 0/1px 9px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 0/9px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 0/1px 9px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 100%/9px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 100%/1px 9px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 100%/9px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 100%/1px 9px no-repeat;
  opacity:.5;transition:opacity .3s}
.bento .b.teal::before,.cap.teal::before{
  background:
    linear-gradient(var(--teal),var(--teal)) 0 0/9px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 0/1px 9px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 0/9px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 0/1px 9px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 100%/9px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 100%/1px 9px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/9px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/1px 9px no-repeat}
.bento .b:hover::before,.fig:hover::before{opacity:.9}

/* section-head gets a hairline rule under it for extra structure */
.sec-head{border-bottom:1px solid var(--line-2);padding-bottom:clamp(26px,3vw,38px)}

/* vertical divider inside editorial two-column (desktop) */
@media(min-width:961px){
  .two:not(.rev) .col-body{border-left:1px solid var(--line-2);padding-left:clamp(30px,4vw,66px);margin-left:calc(-1 * clamp(15px,3vw,45px))}
  .two.rev .col-body{border-right:1px solid var(--line-2);padding-right:clamp(30px,4vw,66px);margin-right:calc(-1 * clamp(15px,3vw,45px))}
}

/* hide the dense marks on small screens to avoid clutter */
@media(max-width:560px){
  .shell .row::before,.shell .row::after{display:none}
}

/* ============================================================
   FRAMED BLOCK — nested boxes  (shell › frame › inset › grid)
   Layer 1: shell frame (page)      — see .shell
   Layer 2: .frame outer border  + green corner brackets
   Layer 3: .frame::before faint inset border
   Layer 4: .frame-grid inner border + teal corner ticks + region divider
   ============================================================ */
.frame{position:relative;border:1px solid var(--line);padding:clamp(15px,1.9vw,24px)}
/* layer 3 — faint inset rectangle */
.frame::before{content:"";position:absolute;inset:clamp(8px,1vw,12px);border:1px solid var(--line-2);pointer-events:none;z-index:1}
/* layer 2 accent — green L brackets on the OUTER box corners */
.frame::after{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:5;
  background:
    linear-gradient(var(--green),var(--green)) 0 0/26px 2px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 0/2px 26px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 0/26px 2px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 0/2px 26px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 100%/26px 2px no-repeat,
    linear-gradient(var(--green),var(--green)) 0 100%/2px 26px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 100%/26px 2px no-repeat,
    linear-gradient(var(--green),var(--green)) 100% 100%/2px 26px no-repeat}
/* layer 4 — inner content box with its own border + region divider */
.frame-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr 1fr;min-height:clamp(300px,36vw,430px);border:1px solid var(--line)}
.frame-grid::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.75;
  background:
    linear-gradient(var(--teal),var(--teal)) 0 0/13px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 0/13px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 100%/13px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/13px 1px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/1px 13px no-repeat}
.frame-left{position:relative;overflow:hidden;padding:clamp(30px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.frame-left .kick{margin-bottom:16px}
.frame-left h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:200;color:var(--fg)}
.frame-right{position:relative;padding:clamp(30px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.frame-right p{color:var(--body);font-size:1.04rem}
@media(max-width:820px){
  .frame-grid{grid-template-columns:1fr}
  .frame-left{border-right:0;border-bottom:1px solid var(--line);min-height:200px}
}

/* ============================================================
   QDT-STYLE RAIL GRID  (from real source: .c-side-padding,
   .c-side-padding--secondary, .corner-icon, .c-border)
   Nested vertical rails w/ dotted gutter + lighter brackets
   ============================================================ */
:root{--bracket:#8FC9CF;--rail:rgba(143,201,207,.4)}

/* outer + inner vertical rails with fine dotted gutter texture */
.shell::before,.shell::after{
  content:"";position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;
  width:clamp(16px,1.7vw,26px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='1' y='1' width='1.6' height='1.6' fill='%238FC9CF' fill-opacity='0.55'/%3E%3Crect x='5' y='1' width='1.6' height='1.6' fill='%238FC9CF' fill-opacity='0.55'/%3E%3Crect x='1' y='5' width='1.6' height='1.6' fill='%238FC9CF' fill-opacity='0.55'/%3E%3Crect x='5' y='5' width='1.6' height='1.6' fill='%238FC9CF' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-size:7px 7px;opacity:.5}
.shell::before{left:0;border-right:1px solid var(--line)}
.shell::after{right:0;border-left:1px solid var(--line)}
/* keep row content clear of the rails */
.shell .row{padding-left:clamp(30px,5vw,80px);padding-right:clamp(30px,5vw,80px)}
.hero,.page-hero,.cta,.statement{padding-left:clamp(30px,5vw,80px)!important;padding-right:clamp(30px,5vw,80px)!important}

/* shell corner ticks + all structural brackets → light teal */
.tick::before,.tick::after{background:var(--bracket);opacity:.9}

/* FRAME simplified to QDT model: outer border + light-teal brackets,
   inner content box, dotted media region — drop the faint mid border */
.frame::before{display:none}
.frame::after{
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/26px 2px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/2px 26px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/26px 2px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/2px 26px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/26px 2px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/2px 26px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/26px 2px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/2px 26px no-repeat}
.frame-grid::after{
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/13px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/13px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/13px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/13px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/1px 13px no-repeat}

/* box corner ticks (fig/bento/cap/panel/avatar) → light teal too */
.fig::before,.bento .b::before,.cap::before,.panel-inset::before,.member .av::before,
.bento .b.teal::before,.cap.teal::before{
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/1px 10px no-repeat;opacity:.75}

@media(max-width:700px){.shell::before,.shell::after{display:none}}

/* ============================================================
   IMAGERY — hero media column + image-topped cards (QDT card__image)
   ============================================================ */
/* hero with an illustration column on the right */
.hero.has-media{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.hero.has-media .hero-in{max-width:none}
.hero-media{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2),var(--bg-2));aspect-ratio:5/4;display:grid;place-items:center}
.hero-media img{width:84%;height:84%;object-fit:contain}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/16px 1.5px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/1.5px 16px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/16px 1.5px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/1.5px 16px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/16px 1.5px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/1.5px 16px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/16px 1.5px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/1.5px 16px no-repeat;opacity:.8}
@media(max-width:860px){.hero.has-media{grid-template-columns:1fr}.hero-media{aspect-ratio:16/10;max-height:340px}}

/* image-topped cards */
.imgcards{display:grid;grid-template-columns:repeat(3,1fr)}
.imgcard{position:relative;border-right:1px solid var(--line);border-top:1px solid var(--line);transition:.35s;overflow:hidden}
.imgcards .imgcard:nth-child(3n){border-right:0}
.imgcard:hover{background:var(--panel)}
.imgcard-media{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2),var(--bg-2));display:grid;place-items:center}
.imgcard-media img{width:76%;height:76%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.imgcard:hover .imgcard-media img{transform:scale(1.04)}
.imgcard-media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/1px 12px no-repeat}
.imgcard-body{padding:clamp(24px,2.6vw,36px)}
.imgcard-body .no{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.12em}
.imgcard-body.teal .no{color:var(--teal)}
.imgcard-body h4{font-size:1.18rem;font-weight:400;color:var(--fg);margin:14px 0 8px;letter-spacing:-.02em}
.imgcard-body p{color:var(--body);font-size:.94rem}
@media(max-width:900px){.imgcards{grid-template-columns:1fr 1fr}.imgcards .imgcard:nth-child(3n){border-right:1px solid var(--line)}.imgcards .imgcard:nth-child(2n){border-right:0}}
@media(max-width:560px){.imgcards{grid-template-columns:1fr}.imgcard{border-right:0!important}}

/* page-hero with media column */
.page-hero.has-media{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.page-hero.has-media>.ph-in{min-width:0}
.page-hero.has-media .hero-media{aspect-ratio:5/4}
@media(max-width:860px){.page-hero.has-media{grid-template-columns:1fr}.page-hero.has-media .hero-media{aspect-ratio:16/10;max-height:340px;order:2}}

/* ============================================================
   HERO with embedded animated background (home)
   ============================================================ */
.hero.has-bg{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(calc(100svh - 72px),820px);
  padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;
  pointer-events:none;background:var(--bg)}
/* subtle fade at the bottom so the section rule/next section blends in */
.hero.has-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.hero.has-bg .hero-in{position:relative;z-index:2}
@media(max-width:700px){.hero.has-bg{min-height:auto}}

/* ============================================================
   INLINE ANIMATED HERO (upload-free) — canvas particle field
   ============================================================ */
.hero.has-anim{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(calc(100svh - 72px),820px);
  padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.hero-anim{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero.has-anim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.hero.has-anim .hero-in{position:relative;z-index:2}
@media(max-width:700px){.hero.has-anim{min-height:auto}}
/* inline SVG illustrations sizing (when graphics are inlined instead of <img>) */
.imgcard-media svg.ill,.hero-media svg.ill{width:76%;height:auto;max-height:82%}
.hero-media svg.ill{width:84%}

/* ============================================================
   ARTICLE / BLOG POST prose (single post styling)
   ============================================================ */
.article{max-width:840px;margin:0 auto}
.art-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.art-head h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:200;letter-spacing:-.04em;color:var(--fg);margin:16px 0 14px}
.art-meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.prose{color:var(--body);font-size:1.06rem;line-height:1.8}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:300;color:var(--fg);margin:38px 0 14px;letter-spacing:-.02em}
.prose h3{font-size:1.25rem;font-weight:400;color:var(--fg);margin:28px 0 10px}
.prose p{margin:0 0 18px}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin:0 0 8px}
.prose blockquote{border-left:2px solid var(--green);padding-left:18px;margin:22px 0;color:var(--fg)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--panel-2);padding:2px 6px;border-radius:4px;color:var(--fg)}
.prose pre{background:#0A1524;border:1px solid var(--line);border-radius:8px;padding:18px;overflow:auto;margin:0 0 20px}
.prose pre code{background:none;padding:0}
.prose img{border:1px solid var(--line);border-radius:6px;margin:10px 0}

/* blog cover image */
.art-cover{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:0 0 30px}
.art-cover img{width:100%;display:block}

/* accessibility + form states -------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#08130A;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* honeypot — off-screen for people, still fillable by bots.
   display:none would make many bots skip it, which defeats the point. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin-top:16px;font-size:.92rem;font-weight:300;color:var(--body);
  padding:12px 14px;border-radius:4px;border:1px solid var(--line);background:var(--panel)}
.form-status.ok{color:var(--green);border-color:var(--green-dim);background:rgba(140,255,59,.06)}
.form-status.err{color:#FF8A7A;border-color:rgba(255,138,122,.35);background:rgba(255,138,122,.06)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* article byline + author box -------------------------------- */
.art-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.art-meta .dot{color:var(--line-2)}
.art-meta .byline a{color:var(--body);border-bottom:1px solid var(--line-2);transition:.25s}
.art-meta .byline a:hover{color:var(--green);border-color:var(--green-dim)}
.art-meta .cred{color:var(--faint);text-transform:none;letter-spacing:.04em}
.art-meta .upd{color:var(--teal)}
.art-meta time{color:inherit}

.author-box{margin-top:52px;padding:28px 30px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.author-box .ab-head{margin-bottom:12px}
.author-box .nm{font-size:1.12rem;font-weight:400;color:var(--fg);margin-top:12px}
.author-box .nm a{color:inherit;transition:color .25s}
.author-box .nm a:hover{color:var(--green)}
.author-box .cred{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.author-box p{color:var(--body);font-size:.98rem;line-height:1.75;margin-top:12px}

/* on-this-page index ----------------------------------------- */
.toc{margin:0 0 38px;padding:24px 28px;border:1px solid var(--line);border-left:2px solid var(--green);
  border-radius:4px;background:var(--panel)}
.toc h2{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin:0 0 16px}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.toc.wide ol{columns:2;column-gap:36px}
.toc li{counter-increment:toc;margin:0 0 9px;break-inside:avoid}
.toc li a{display:flex;gap:10px;color:var(--body);font-size:.97rem;line-height:1.5;transition:color .2s}
.toc li a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;
  color:var(--faint);flex:0 0 auto;padding-top:3px;transition:color .2s}
.toc li a:hover,.toc li a[aria-current]{color:var(--green)}
.toc li a:hover::before,.toc li a[aria-current]::before{color:var(--green)}
/* headings become link targets — keep them clear of the sticky nav */
.prose h2,.prose h3{scroll-margin-top:96px}
@media(max-width:560px){ .toc.wide ol{columns:1} .toc{padding:20px 22px} }
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.author-box .ab-creds{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
  columns:2;column-gap:32px;font-size:.88rem}
.author-box .ab-creds li{position:relative;padding-left:18px;margin:0 0 8px;color:var(--muted);
  line-height:1.55;break-inside:avoid}
.author-box .ab-creds li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:1px;background:var(--line-2)}
.author-box .ab-creds li.is-cred{color:var(--body)}
.author-box .ab-creds li.is-cred::before{background:var(--green)}
@media(max-width:640px){.author-box .ab-creds{columns:1}}
/* placeholder option reads as placeholder text until a real choice is made */
.field select:invalid{color:var(--faint)}
.field select option{color:var(--fg)}

/* wordmark: BASTION bold, CYBER lighter — matches the supplied lockup */
.brand .wm b i{font-style:normal;font-weight:300;letter-spacing:.16em}
.brand .wm small em{color:var(--green);font-style:normal;font-weight:600}
img.mark{object-fit:contain}

/* utility bar + mobile header decongestion ------------------- */
/* Mobile only: desktop has room for the CTA in the nav itself. */
.topbar{display:none;background:var(--panel-2);border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:9px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.tb-note{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-cta{display:inline-flex;align-items:center;gap:8px;color:var(--green);white-space:nowrap;
  flex:0 0 auto;transition:color .25s}
.tb-cta svg{width:12px;height:12px;transition:transform .3s}
.tb-cta:hover{color:var(--fg)}
.tb-cta:hover svg{transform:translateX(4px)}

/* drawer-only CTA — hidden until the mobile menu is open */
.nav-links .drawer-cta{display:none}

@media(max-width:900px){
  /* The CTA lives in the topbar and the drawer at this width; three items could
     not share the row, and the scrolled pill insets it further still. */
  .topbar{display:block}
  .nav-right>.link{display:none}
  .nav-right{gap:0}
  .nav-links.open .drawer-cta{display:block;color:var(--green);
    border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
  nav.top.scrolled .nav-links.open .drawer-cta{color:#5f9022;border-top-color:rgba(0,0,0,.08)}
}
@media(max-width:560px){
  /* Buy back width in the pill rather than dropping the descriptor entirely. */
  .brand .wm b{font-size:.86rem;letter-spacing:.1em}
  .brand .wm small{font-size:.48rem;letter-spacing:.16em}
  .brand{gap:9px}
  .brand .mark{width:26px;height:26px}
  .tb-note{display:none}
  .topbar-in{justify-content:center;padding:8px var(--pad)}
}