:root{
  --bg:#05070C;--bg-2:#080C13;--bg-3:#0A0F17;
  --panel:rgba(255,255,255,.028);--panel-hover:rgba(255,255,255,.05);
  --border:rgba(148,163,184,.13);--border-strong:rgba(148,163,184,.24);
  --text:#E7EDF5;--muted:#8C97A9;--faint:#7B8698;
  --green:#3CE88F;--green-dim:rgba(60,232,143,.14);
  --cyan:#27C6DC;--teal:#2DD4BF;--red:#FB7185;--amber:#FBBF24;--blue:#5BA8FF;--violet:#A78BFA;
  --grad:linear-gradient(92deg,#3CE88F 0%,#27C6DC 100%);
  --font-display:'Space Grotesk',sans-serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:14px;--maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(60,232,143,.25);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
#three-hero{position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#three-hero.ready{opacity:1}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 25%,transparent 78%)}
.bg-glow{position:fixed;z-index:-3;pointer-events:none;width:900px;height:900px;border-radius:50%;top:-440px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(60,232,143,.08) 0%,rgba(39,198,220,.045) 40%,transparent 70%)}
#spotlight{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(60,232,143,.045),transparent 65%)}
body.spot-on #spotlight{opacity:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* shared top bar / nav — used by all sub-pages */
.bar{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(5,7,12,.72);border-bottom:1px solid var(--border)}
.bar .in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:14px}
.bar .logo{color:var(--text);text-decoration:none}
.bar .logo .p{color:var(--green)}
.bar .nav a{color:var(--muted);margin-left:4px;padding:12px 10px;font-size:13px;text-decoration:none;display:inline-block}
.bar .nav a:hover{color:var(--green)}
.bar .nav a.on{color:var(--green)}
@media(max-width:560px){.bar .in{flex-wrap:wrap;gap:6px 14px;padding:12px 16px}.bar .nav{display:flex;flex-wrap:wrap}.bar .nav a{margin-left:0;margin-right:6px;font-size:12.5px}}

section{padding:100px 0;position:relative}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--green);display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--green);display:inline-block}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.4vw,44px);line-height:1.12;margin-bottom:14px}
.sub{color:var(--muted);max-width:600px;font-size:17px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{margin-bottom:48px}
.js-anim [data-reveal]{opacity:0;transform:translateY(28px)}
.js-anim [data-reveal-scale]{opacity:0;transform:scale(.955)}
.io-anim [data-reveal],.io-anim [data-reveal-scale],.io-anim [data-hero],.io-anim [data-hero-term]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.io-anim .in{opacity:1 !important;transform:none !important}
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(5,7,12,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--font-mono);font-size:14.5px;font-weight:500;white-space:nowrap}
.logo .p{color:var(--green)}
.logo .c{display:inline-block;width:8px;height:15px;background:var(--green);vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav-links a{transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--green);transition:right .3s}
.nav-links a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:.01em;padding:11px 20px;border-radius:10px;min-height:44px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.btn-primary{background:var(--grad);color:#04110A;box-shadow:0 0 0 0 rgba(60,232,143,0)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px -6px rgba(60,232,143,.45)}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--green);background:var(--green-dim);transform:translateY(-2px)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(3px)}
.nav-cta{padding:9px 16px;font-size:13.5px}
.menu-btn{display:none;font-size:22px;color:var(--text);padding:6px}
@media(max-width:980px){.nav-links,.nav-cta{display:none}.menu-btn{display:block}}
.mobile-menu{display:none;position:fixed;inset:66px 0 auto 0;z-index:49;background:rgba(5,7,12,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 24px 26px;flex-direction:column;gap:2px;max-height:82vh;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:11px 4px;font-size:15.5px;color:var(--muted);border-bottom:1px solid rgba(148,163,184,.07)}
.mobile-menu a:last-child{border:none;color:var(--green);font-family:var(--font-mono)}
.hero{padding:170px 0 88px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero{padding-top:138px}}
@keyframes pulse{50%{opacity:.45}}
.hero h1{font-size:clamp(36px,5.4vw,58px);line-height:1.06;letter-spacing:-.03em;margin-bottom:12px}
/* redesigned hero identity block */
.hero .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-bottom:16px;letter-spacing:.02em}
.hero .kicker .ln{width:26px;height:1px;background:var(--green)}
.hero .name-h1{font-size:clamp(44px,6.6vw,78px);line-height:.98;letter-spacing:-.035em;font-weight:700;margin-bottom:8px}
.hero .name-h1 .fn{display:block;color:var(--text)}
.hero .name-h1 .ln2{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero .tagline{font-family:var(--font-display);font-size:clamp(18px,2.4vw,23px);font-weight:500;color:var(--muted);margin-bottom:22px;line-height:1.35}
.hero .tagline .grad-text{font-weight:600}
/* intro / who-am-i */
.intro{border-bottom:1px solid var(--border);background:rgba(255,255,255,.012)}
.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:36px}}
.intro-photo{position:relative;border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,#0b1119,#070a10);box-shadow:0 30px 70px -34px rgba(0,0,0,.8),0 0 60px -30px rgba(60,232,143,.25)}
.intro-photo img{width:100%;height:100%;object-fit:cover;display:block}
.intro-photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.intro-photo .ph .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);line-height:1.7}
.intro-photo .ph .initials{width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(60,232,143,.4);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--green);background:var(--green-dim);box-shadow:0 0 30px -6px rgba(60,232,143,.4)}
.intro-photo .corner{position:absolute;width:20px;height:20px;border-color:var(--green);opacity:.5}
.intro-photo .c1{top:14px;left:14px;border-top:2px solid;border-left:2px solid}
.intro-photo .c2{top:14px;right:14px;border-top:2px solid;border-right:2px solid}
.intro-photo .c3{bottom:14px;left:14px;border-bottom:2px solid;border-left:2px solid}
.intro-photo .c4{bottom:14px;right:14px;border-bottom:2px solid;border-right:2px solid}
.intro-body h2{margin-bottom:16px}
.intro-body .lead{font-size:17.5px;color:var(--muted);margin-bottom:16px}
.intro-body .lead .name-strong{color:var(--text);font-weight:600}
.intro-body p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.intro-quick{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.intro-quick span{font-family:var(--font-mono);font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:7px 13px;background:rgba(255,255,255,.015);transition:color .25s,border-color .25s}
.intro-quick span:hover{color:var(--text);border-color:var(--border-strong)}
.intro-quick span b{color:var(--green);font-weight:500}
.intro-ctas{display:flex;gap:13px;flex-wrap:wrap}
.aka{font-family:var(--font-mono);font-size:12.5px;color:var(--faint);margin-top:20px;line-height:1.7}
.aka b{color:var(--muted);font-weight:500}
.hero .sub{font-size:18px;margin-bottom:30px}
.typed-wrap{font-family:var(--font-mono);font-size:14px;color:var(--green);margin-bottom:28px;min-height:22px}
.typed-wrap .tprefix{color:var(--faint)}
.typed-caret{display:inline-block;width:8px;height:15px;background:var(--green);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
/* right hero column: terminal + product cards stacked, using the space below the terminal */
.hero-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.hero-flagships{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
@media(max-width:560px){.hero-flagships{grid-template-columns:1fr}}
.hero-flagship{display:flex;align-items:center;gap:12px;margin:0;width:100%;padding:11px 15px;border:1px solid rgba(60,232,143,.28);border-radius:12px;background:linear-gradient(92deg,rgba(60,232,143,.10),rgba(39,198,220,.06));text-decoration:none;color:var(--text);transition:border-color .25s,transform .25s,background .25s}
.hero-flagship.rb{border-color:rgba(39,198,220,.30);background:linear-gradient(92deg,rgba(39,198,220,.11),rgba(60,232,143,.05))}
.hero-flagship.rb:hover{border-color:rgba(39,198,220,.6);background:linear-gradient(92deg,rgba(39,198,220,.17),rgba(60,232,143,.08))}
.hero-flagship.rb .hf-mark{color:var(--cyan,#27C6DC);border-color:rgba(39,198,220,.35)}
.hero-flagship.rb .arr{color:var(--cyan,#27C6DC)}
.hero-flagship:hover{border-color:rgba(60,232,143,.55);transform:translateY(-2px);background:linear-gradient(92deg,rgba(60,232,143,.16),rgba(39,198,220,.09))}
.hero-flagship .hf-mark{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(5,7,12,.5);border:1px solid rgba(60,232,143,.3);color:var(--green);font-size:17px}
.hero-flagship .hf-mark img{width:22px;height:22px;object-fit:contain}
.hero-flagship .hf-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-flagship .hf-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--text)}
.hero-flagship .hf-sub{font-size:12px;line-height:1.4;color:var(--muted)}
.hero-flagship .arr{color:var(--green);font-family:var(--font-mono);margin-left:auto;flex:0 0 auto;font-size:17px}
@media(max-width:560px){.hero-flagships{margin:20px 0 26px}.hero-flagship .arr{display:none}.hero-flagship .hf-sub{font-size:12px}}
.hero-meta{font-family:var(--font-mono);font-size:12.5px;color:var(--faint);display:flex;gap:12px 26px;flex-wrap:wrap;margin-top:6px;max-width:600px;padding-top:20px;border-top:1px solid var(--border)}
.hero-meta span b{color:var(--muted);font-weight:600}

/* ===== HIGHLIGHTS BAND (Featured / Latest HoF / Latest Blog) ===== */
#highlights .wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
.hl-band-head{margin-bottom:20px;display:flex;flex-direction:column;gap:6px}
.hl-band-head .eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--green);letter-spacing:.03em;margin-bottom:0}
.hl-band-sub{font-family:var(--font-body);font-size:14px;color:var(--muted)}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:940px){.hl-grid{grid-template-columns:1fr}}
.hl-card{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border:1px solid var(--border);border-top:3px solid var(--border-strong);border-radius:var(--radius);background:var(--panel);text-decoration:none;color:var(--text);transition:transform .3s,border-color .3s,background .3s;position:relative;overflow:hidden}
.hl-card:hover{transform:translateY(-4px);background:var(--panel-hover)}
/* each of the three streams gets its own colour so they read as distinct sections */
.hl-featured{border-top-color:var(--green);background:linear-gradient(160deg,rgba(60,232,143,.07),rgba(39,198,220,.02))}
.hl-featured .hl-eyebrow{color:var(--green)}
.hl-featured:hover{border-color:rgba(60,232,143,.5);border-top-color:var(--green)}
.hl-hof{border-top-color:var(--violet);background:linear-gradient(160deg,rgba(167,139,250,.06),transparent)}
.hl-hof .hl-eyebrow{color:var(--violet)}
.hl-hof:hover{border-color:rgba(167,139,250,.5);border-top-color:var(--violet)}
.hl-blog{border-top-color:var(--cyan);background:linear-gradient(160deg,rgba(39,198,220,.06),transparent)}
.hl-blog .hl-eyebrow{color:var(--cyan)}
.hl-blog:hover{border-color:rgba(39,198,220,.5);border-top-color:var(--cyan)}
.hl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hl-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hl-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;padding:3px 8px;border-radius:5px;background:var(--green-dim);color:var(--green);border:1px solid rgba(60,232,143,.3)}
.hl-tag.priv{background:rgba(167,139,250,.12);color:var(--violet);border-color:rgba(167,139,250,.3)}
.hl-tag.cat{background:rgba(39,198,220,.12);color:var(--cyan);border-color:rgba(39,198,220,.3)}
.hl-flag,.hl-hof-row{display:flex;align-items:center;gap:13px}
.hl-mark{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(5,7,12,.5);border:1px solid rgba(60,232,143,.3);color:var(--green);font-size:20px}
.hl-mark img{width:28px;height:28px;object-fit:contain}
.hl-hof-logo{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#fff;overflow:hidden;padding:5px}
.hl-hof-logo img{max-width:100%;max-height:100%;object-fit:contain}
.hl-card h3{font-size:18px;line-height:1.2;font-family:var(--font-display)}
.hl-flag-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.hl-desc{font-size:13.5px;line-height:1.6;color:var(--muted);flex:1 1 auto}
.hl-blog-title{margin-top:2px}
.hl-chips{display:flex;flex-wrap:wrap;gap:7px}
.hl-chips span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);padding:4px 9px;border:1px solid var(--border);border-radius:6px;background:rgba(255,255,255,.02)}
.hl-go{font-family:var(--font-mono);font-size:12px;color:var(--green);margin-top:2px}
.hl-go.muted{color:var(--faint)}
.hl-blog-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--faint);flex-wrap:wrap}
.hl-blog-foot .hl-go{margin-top:0}
.terminal{border:1px solid var(--border-strong);border-radius:var(--radius);background:linear-gradient(180deg,rgba(13,18,27,.9),rgba(8,12,19,.9));backdrop-filter:blur(8px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(60,232,143,.05),0 0 60px -20px rgba(60,232,143,.15);overflow:hidden;font-family:var(--font-mono);font-size:13.5px}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.term-bar .d{width:11px;height:11px;border-radius:50%}
.term-bar .d1{background:#FF5F57}.term-bar .d2{background:#FEBC2E}.term-bar .d3{background:#28C840}
.term-bar .title{margin-left:10px;color:var(--faint);font-size:12px}
/* reserve the fully-typed height so the animation doesn't grow the box / push the cards below */
.term-body{padding:18px 18px 22px;min-height:400px;line-height:1.75;position:relative}
.term-body .ln{white-space:pre-wrap;word-break:break-word}
.t-p{color:var(--green)}.t-c{color:var(--text)}.t-m{color:var(--muted)}
.t-ok{color:var(--green)}.t-crit{color:var(--red)}.t-warn{color:var(--amber)}.t-cyan{color:var(--cyan)}
.caret{display:inline-block;width:8px;height:14px;background:var(--green);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.term-cta{margin-top:12px;display:none}
.term-cta a{color:var(--green);border-bottom:1px dashed rgba(60,232,143,.5);padding-bottom:1px}
.term-cta a:hover{border-bottom-style:solid}
.scanline{position:absolute;left:0;right:0;height:52px;top:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(60,232,143,.05),transparent);animation:scan 6s linear infinite;will-change:transform}
@keyframes scan{from{transform:translateY(-60px)}to{transform:translateY(560px)}}
@media (prefers-reduced-motion:reduce){.scanline,.caret,.logo .c,.typed-caret,.web-inj .cur,.radar-caption .rc-dot{animation:none}}
/* keep the hero terminal readable and compact on phones (was cramped/empty-looking) */
@media(max-width:600px){
  .terminal{font-size:12px}
  .term-bar{padding:10px 13px}
  .term-bar .title{font-size:10.5px}
  .term-body{min-height:258px;padding:14px 14px 18px;line-height:1.65}
}
.trust{padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.012)}
.trust-label{text-align:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-bottom:18px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:marq 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
.marquee-track span{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--faint);display:flex;align-items:center;gap:9px;white-space:nowrap;transition:color .3s}
.marquee-track span:hover{color:var(--muted)}
.marquee-track i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--green);opacity:.8}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
@media(max-width:840px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--bg-2);padding:32px 26px;transition:background .3s}
.stat:hover{background:#0B1019}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,44px);letter-spacing:-.02em;line-height:1}
.stat .num em{font-style:normal;color:var(--green)}
.stat .lbl{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:9px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1400px}
@media(max-width:940px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s,box-shadow .35s}
.svc:hover{border-color:var(--accent,rgba(60,232,143,.4));background:var(--panel-hover);box-shadow:0 24px 60px -30px rgba(0,0,0,.7),0 0 40px -20px color-mix(in srgb,var(--accent) 40%,transparent)}
.svc .anim{height:118px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,rgba(255,255,255,.02),transparent);transform:translateZ(30px)}
.svc .body{padding:18px 20px 20px;transform:translateZ(18px)}
.svc .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:12px}
.svc .ico svg{width:18px;height:18px;stroke:var(--accent)}
.svc h3{font-size:16px;margin-bottom:7px;line-height:1.25}
.svc p{color:var(--muted);font-size:13px;margin-bottom:13px;line-height:1.5}
.svc .deliv{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);border-top:1px dashed var(--border);padding-top:11px;line-height:1.5}
.svc .deliv b{color:var(--accent);font-weight:500}
.a-mono{font-family:var(--font-mono);font-size:11px;line-height:1.5;position:absolute;color:var(--muted)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.web-line{left:16px;top:20px;right:16px;color:var(--muted)}
.web-inj{left:16px;top:44px;color:var(--red)}
.web-inj .cur{display:inline-block;width:6px;height:12px;background:var(--red);vertical-align:-1px;animation:blink 1s steps(1) infinite}
.web-status{left:16px;bottom:18px;color:var(--green);opacity:0}
.svc[data-theme="web"]:hover .web-status{opacity:1;transition:opacity .4s .8s}
.web-payload{position:absolute;left:16px;top:76px;right:16px;height:1px;background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(0);transform-origin:left}
.svc[data-theme="web"]:hover .web-payload{animation:sweep 1.2s ease forwards}
@keyframes sweep{to{transform:scaleX(1)}}
.mob-device{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:64px;height:104px;border:1.5px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02)}
.mob-device::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:18px;height:3px;border-radius:2px;background:var(--faint)}
.mob-lock{position:absolute;left:50%;top:48px;transform:translateX(-50%);font-size:20px;color:var(--muted);transition:color .3s}
.svc[data-theme="mobile"]:hover .mob-lock{color:var(--red)}
.mob-scan{position:absolute;left:calc(50% - 32px);top:24px;width:64px;height:2px;background:linear-gradient(90deg,transparent,var(--violet),transparent);opacity:0}
.svc[data-theme="mobile"]:hover .mob-scan{opacity:1;animation:mobscan 1.6s ease-in-out infinite}
@keyframes mobscan{0%{transform:translateY(0)}50%{transform:translateY(94px)}100%{transform:translateY(0)}}
.net-svg,.ai-svg,.cloud-svg{position:absolute;inset:0}
.net-line{stroke:var(--border-strong);stroke-width:1}
.net-node{fill:var(--bg-2);stroke:var(--blue);stroke-width:1.5}
.net-packet{fill:var(--blue);opacity:0}
.svc[data-theme="network"]:hover .net-packet{opacity:1}
.svc[data-theme="network"]:hover .p1{animation:pk1 1.8s linear infinite}
.svc[data-theme="network"]:hover .p2{animation:pk2 1.8s linear infinite .6s}
.svc[data-theme="network"]:hover .p3{animation:pk3 1.8s linear infinite 1.1s}
@keyframes pk1{from{transform:translate(60px,40px)}to{transform:translate(180px,40px)}}
@keyframes pk2{from{transform:translate(180px,40px)}to{transform:translate(120px,105px)}}
@keyframes pk3{from{transform:translate(120px,105px)}to{transform:translate(60px,40px)}}
.ai-node{fill:var(--bg-2);stroke:var(--violet);stroke-width:1.4}
.ai-edge{stroke:rgba(167,139,250,.35);stroke-width:1}
.ai-prompt{position:absolute;left:16px;bottom:16px;font-family:var(--font-mono);font-size:10.5px;color:var(--violet);opacity:.9}
.ai-pulse{opacity:0}
.svc[data-theme="ai"]:hover .ai-pulse{animation:aipulse 1.4s ease-in-out infinite}
@keyframes aipulse{0%,100%{opacity:.2}50%{opacity:1}}
.cloud-ring{fill:none;stroke:rgba(39,198,220,.25);stroke-width:1}
.cloud-sweep{transform-origin:center;opacity:0}
.svc[data-theme="cloud"]:hover .cloud-sweep{opacity:1;animation:radar 2.4s linear infinite}
@keyframes radar{to{transform:rotate(360deg)}}
.cloud-blip{fill:var(--cyan);opacity:0}
.svc[data-theme="cloud"]:hover .cloud-blip{animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,20%{opacity:0}30%{opacity:1}60%,100%{opacity:0}}
.recon-list{left:16px;top:18px;right:16px;color:var(--muted);opacity:.35}
.recon-hit{color:var(--green);opacity:0}
.svc[data-theme="recon"]:hover .recon-hit{animation:reconhit .5s ease forwards}
.svc[data-theme="recon"]:hover .rh1{animation-delay:.2s}
.svc[data-theme="recon"]:hover .rh2{animation-delay:.6s}
.svc[data-theme="recon"]:hover .rh3{animation-delay:1s}
@keyframes reconhit{to{opacity:1}}

/* ---- auto-play service animations (trigger on scroll-into-view via .play);
        loop so the cards stay alive; works on touch where there's no hover ---- */
@media (prefers-reduced-motion: no-preference){
  .svc.play .grid-bg{animation:svcGridDrift 9s linear infinite}
  @keyframes svcGridDrift{to{background-position:22px 22px}}
  /* web — SQLi probe + confirmation, looping */
  .svc[data-theme="web"].play .web-status{animation:webStatusLoop 4.4s ease-in-out infinite}
  @keyframes webStatusLoop{0%,22%{opacity:0;transform:translateY(4px)}38%,86%{opacity:1;transform:none}100%{opacity:0}}
  .svc[data-theme="web"].play .web-inj{animation:webInjLoop 4.4s steps(1) infinite}
  @keyframes webInjLoop{0%,14%{opacity:.2}26%,100%{opacity:1}}
  /* mobile — scan sweep + lock trips red */
  .svc[data-theme="mobile"].play .mob-scan{opacity:1;animation:mobscan 1.9s ease-in-out infinite}
  .svc[data-theme="mobile"].play .mob-lock{animation:mobLockLoop 3.6s ease-in-out infinite}
  @keyframes mobLockLoop{0%,58%,100%{color:var(--faint)}70%,90%{color:var(--red)}}
  /* network — packets traverse the graph + nodes breathe */
  .svc[data-theme="network"].play .net-packet{opacity:1}
  .svc[data-theme="network"].play .p1{animation:pk1 2s linear infinite}
  .svc[data-theme="network"].play .p2{animation:pk2 2s linear infinite .5s}
  .svc[data-theme="network"].play .p3{animation:pk3 2s linear infinite 1s}
  .svc[data-theme="network"].play .net-node{animation:netNodeLoop 2.2s ease-in-out infinite}
  @keyframes netNodeLoop{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
  /* ai — nodes pulse, edges shimmer, injection prompt flickers */
  .svc[data-theme="ai"].play .ai-pulse{animation:aipulse 1.6s ease-in-out infinite}
  .svc[data-theme="ai"].play .ai-edge{animation:aiEdgeLoop 3.2s linear infinite}
  @keyframes aiEdgeLoop{0%,100%{stroke-opacity:.25}50%{stroke-opacity:.7}}
  .svc[data-theme="ai"].play .ai-prompt{animation:aiPromptLoop 3.8s ease-in-out infinite}
  @keyframes aiPromptLoop{0%,18%{opacity:.25}30%,70%{opacity:1}84%,100%{opacity:.25}}
  /* cloud — radar sweep + intermittent blips */
  .svc[data-theme="cloud"].play .cloud-sweep{opacity:1;animation:radar 3s linear infinite}
  .svc[data-theme="cloud"].play .cloud-blip{animation:blip 3s ease-in-out infinite}
  /* recon — subdomains keep resolving, looping */
  .svc[data-theme="recon"].play .recon-hit{animation:reconLoop 5s ease-in-out infinite}
  .svc[data-theme="recon"].play .rh1{animation-delay:.3s}
  .svc[data-theme="recon"].play .rh2{animation-delay:1s}
  .svc[data-theme="recon"].play .rh3{animation-delay:1.7s}
  @keyframes reconLoop{0%,4%{opacity:0;transform:translateX(-5px)}14%,82%{opacity:1;transform:none}93%,100%{opacity:0}}
}
.process{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:26px 22px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.step .n{font-family:var(--font-mono);font-size:12px;color:var(--green);margin-bottom:13px;display:block}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px}
.sentry{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:radial-gradient(800px circle at 80% -10%,rgba(45,212,191,.07),transparent 55%),var(--bg-2);overflow:hidden}
.sentry-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;color:var(--teal);border:1px solid rgba(45,212,191,.3);border-radius:99px;padding:5px 13px;margin-top:14px}
.sentry h2{margin-bottom:14px}
.sentry h2 .prove{color:var(--teal)}
.sentry-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin:26px 0 30px}
.sentry-stat{border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:14px 15px;display:flex;flex-direction:column;gap:7px;min-width:0;transition:border-color .3s,background .3s}
.sentry-stat:hover{border-color:rgba(45,212,191,.35);background:var(--panel-hover)}
.sentry-stat b{font-family:var(--font-display);font-size:19px;color:var(--teal);font-weight:700;line-height:1.05;letter-spacing:-.01em}
.sentry-stat span{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.02em;line-height:1.4;text-transform:uppercase}
.sentry-shot{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px -34px rgba(0,0,0,.85),0 0 50px -24px rgba(45,212,191,.2);margin:0 0 14px;background:#0B0E13}
.sentry-shot .browser-bar{height:32px;background:linear-gradient(180deg,rgba(20,25,35,.95),rgba(11,14,19,.85));border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 14px}
.sentry-shot .browser-bar .bd{width:9px;height:9px;border-radius:50%}
.sentry-shot .browser-bar .b1{background:#FF5F57}.sentry-shot .browser-bar .b2{background:#FEBC2E}.sentry-shot .browser-bar .b3{background:#28C840}
.sentry-shot .browser-bar .url{margin-left:12px;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.sentry-shot img{width:100%;height:auto;display:block;aspect-ratio:1600/1040}
.shot-caption{text-align:center;font-family:var(--font-mono);font-size:11.5px;color:var(--faint);margin:0 0 40px}
.sentry-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:840px){.sentry-feats{grid-template-columns:1fr}}
.sentry-feat{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:20px;transition:transform .3s,border-color .3s}
.sentry-feat:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.35)}
.sentry-feat h3{font-size:15.5px;margin-bottom:7px}
.sentry-feat p{color:var(--muted);font-size:13.5px}
.sentry-feat code{font-family:var(--font-mono);font-size:12px;color:var(--teal);background:rgba(45,212,191,.1);padding:1px 5px;border-radius:4px}
.sentry-note{font-family:var(--font-mono);font-size:12px;color:var(--faint);border:1px solid var(--border);border-left:2px solid var(--amber);border-radius:8px;padding:13px 16px;margin-top:26px;background:rgba(251,191,36,.03)}
.sentry-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.sentry-cta .meta{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.sentry-btn{background:linear-gradient(92deg,#2DD4BF,#27C6DC);color:#04140F}
.sentry-btn:hover{box-shadow:0 8px 30px -6px rgba(45,212,191,.45)}
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--green),rgba(60,232,143,.1))}
.tl-item{position:relative;padding:0 0 30px 6px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-27px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--green);box-shadow:0 0 12px rgba(60,232,143,.5)}
.tl-item h3{font-size:18px;margin-bottom:3px}
.tl-item .role{font-family:var(--font-mono);font-size:12.5px;color:var(--green);margin-bottom:10px}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px}
.tl-tags span{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:5px 11px;background:rgba(255,255,255,.015);transition:color .25s,border-color .25s}
.tl-tags span:hover{color:var(--text);border-color:var(--border-strong)}
.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:940px){.skill-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.skill-grid{grid-template-columns:1fr}}
.skill-cat{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:22px;transition:transform .3s,border-color .3s}
.skill-cat:hover{transform:translateY(-4px);border-color:rgba(60,232,143,.3)}
.skill-cat .cat-name{font-family:var(--font-mono);font-size:11.5px;color:var(--green);margin-bottom:15px;letter-spacing:.03em}
.skill-cat ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.skill-cat li{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px}
.skill-cat li::before{content:"▸";color:var(--green);font-size:11px}
.hof-count{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin:-24px 0 26px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hof-count .hof-count-n{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--green);line-height:1}
/* ===== HALL OF FAME — auto-rotating carousel (one recognition at a time) ===== */
.hof-carousel{position:relative;perspective:1600px}
.hof-viewport{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.hof-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;min-height:300px;opacity:0;transform:rotateY(9deg) scale(.975);transform-origin:center;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hof-slide.active{position:relative;opacity:1;transform:none;pointer-events:auto}
.hof-slide-img{position:relative;overflow:hidden;background:var(--bg-3);border-right:1px solid var(--border)}
.hof-slide-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hof-slide-img .tag{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--green);background:rgba(5,7,12,.72);border:1px solid rgba(60,232,143,.35);border-radius:6px;padding:4px 10px;z-index:2}
.hof-slide-img .tag.priv{color:var(--cyan);border-color:rgba(39,198,220,.4)}
.hof-slide-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.hof-slide-n{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.1em;margin-bottom:12px}
.hof-slide-body h3{font-size:24px;margin-bottom:6px}
.hof-slide-body .meta{font-family:var(--font-mono);font-size:12px;color:var(--faint);margin-bottom:12px}
.hof-slide-body p{color:var(--muted);font-size:14.5px;line-height:1.6}
.hof-slide-body .hof-proof{font-family:var(--font-mono);font-size:12.5px;color:var(--green);margin-top:18px;display:inline-block;align-self:flex-start}
.hof-slide-body .hof-proof:hover{text-decoration:underline}
@media(max-width:720px){.hof-slide{grid-template-columns:1fr}.hof-slide-img{border-right:none;border-bottom:1px solid var(--border);aspect-ratio:16/9;min-height:0}.hof-slide-body{padding:22px 22px 24px}.hof-slide-body h3{font-size:20px}}
.hof-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
.hof-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(255,255,255,.02);color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s,transform .25s}
.hof-arrow:hover{border-color:var(--green);background:var(--green-dim);transform:translateY(-2px)}
.hof-dots{display:flex;gap:9px;align-items:center}
.hof-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:background .25s,transform .25s;padding:0}
.hof-dot:hover{background:var(--muted)}
.hof-more{margin-top:24px;text-align:center}
.hof-more a{display:inline-block;font-family:var(--font-mono);font-size:13px;color:var(--green);border:1px solid var(--border-strong);border-radius:999px;padding:9px 18px;text-decoration:none;transition:border-color .25s,background .25s}
.hof-more a:hover{border-color:var(--green);background:var(--green-dim)}
.bb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
@media(max-width:840px){.bb-grid{grid-template-columns:1fr}}
.bb-platforms{display:flex;flex-direction:column;gap:14px}
.bb-plat{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:18px 20px;transition:border-color .3s,transform .3s}
.bb-plat:hover{border-color:rgba(60,232,143,.3);transform:translateX(3px)}
.bb-plat .bb-ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;background:var(--green-dim);color:var(--green);border:1px solid rgba(60,232,143,.25)}
.bb-plat h3{font-size:16px;margin-bottom:1px}
.bb-plat .h{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.bb-plat .arr{margin-left:auto;color:var(--green);font-family:var(--font-mono);font-size:12px}
.bb-note{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:22px 24px}
.bb-note h3{font-size:16px;margin-bottom:10px}
.bb-note p{color:var(--muted);font-size:14px;margin-bottom:14px}
.bb-note .priv-tag{font-family:var(--font-mono);font-size:11.5px;color:var(--cyan);border:1px solid rgba(39,198,220,.3);border-radius:8px;padding:8px 12px;display:inline-block}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proj-grid{grid-template-columns:1fr}}
.proj{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:22px;transition:transform .3s,border-color .3s;display:block;position:relative;overflow:hidden}
.proj:hover{transform:translateY(-4px);border-color:rgba(60,232,143,.3)}
.proj .ptop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.proj .pname{font-family:var(--font-mono);font-size:14.5px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:8px}
.proj .pname svg{width:15px;height:15px;stroke:var(--green)}
.proj .plang{font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.proj p{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.proj .pmeta{display:flex;gap:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}
.proj .ptopics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.proj .ptopics span{font-family:var(--font-mono);font-size:10px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.blog-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.blog-filter{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 15px;background:rgba(255,255,255,.015);transition:all .25s}
.blog-filter:hover{color:var(--text);border-color:var(--border-strong)}
.blog-filter.active{color:var(--green);border-color:rgba(60,232,143,.4);background:var(--green-dim)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
.post{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:transform .35s,border-color .35s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-5px);border-color:rgba(60,232,143,.32)}
.post .cover{height:120px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(60,232,143,.07),rgba(39,198,220,.05))}
.post .cover .cat-badge{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--green);background:rgba(5,7,12,.6);border:1px solid rgba(60,232,143,.3);border-radius:6px;padding:3px 9px;z-index:2}
.post .cover .code-motif{position:absolute;inset:0;font-family:var(--font-mono);font-size:10px;color:rgba(148,163,184,.14);padding:14px 14px 0;line-height:1.5;overflow:hidden;white-space:pre;user-select:none}
.post .pbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.post h3{font-size:16px;line-height:1.3;margin-bottom:8px}
.post p{color:var(--muted);font-size:13.5px;flex:1;margin-bottom:14px}
.post .pfoot{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.post .read{color:var(--green)}
.post .status-draft{color:var(--amber)}
.blog-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--faint);font-family:var(--font-mono);font-size:13px}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.events-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.events-grid{grid-template-columns:1fr}}
.event{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:transform .3s,border-color .3s;display:flex;flex-direction:column}
.event:hover{transform:translateY(-4px);border-color:rgba(60,232,143,.3)}
.event .ev-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);border-bottom:1px solid var(--border)}
.event .ev-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s ease}
.event:hover .ev-img img{transform:scale(1.06)}
.event .ev-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(120% 100% at 50% 0%,rgba(60,232,143,.06),transparent);color:var(--faint);font-family:var(--font-mono);font-size:11px;text-align:center;padding:16px}
.event .ev-placeholder .ic{font-size:26px;opacity:.55;color:var(--green)}
.event .ev-placeholder .ev-ph-name{font-size:11.5px;line-height:1.4;color:var(--muted);letter-spacing:.02em;max-width:80%}
.event .ev-thumbs{display:flex;gap:6px;padding:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);background:rgba(5,7,12,.35)}
.event .ev-thumbs:empty{display:none}
.event .ev-thumb{width:52px;height:40px;flex:0 0 auto;padding:0;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--bg-3);cursor:zoom-in;transition:border-color .2s,transform .2s}
.event .ev-thumb:hover{border-color:rgba(60,232,143,.5);transform:translateY(-2px)}
.event .ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.event .ev-count{position:absolute;right:12px;bottom:12px;font-family:var(--font-mono);font-size:11px;color:var(--green);background:rgba(5,7,12,.72);border:1px solid rgba(60,232,143,.3);border-radius:6px;padding:3px 9px;z-index:2}
.event .ev-body{padding:18px 20px 20px}
.event .etag{font-family:var(--font-mono);font-size:11px;color:var(--cyan);margin-bottom:8px}
.event h3{font-size:16px;line-height:1.3}
.talks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
@media(max-width:940px){.talks-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.talks-grid{grid-template-columns:1fr}}
.talk{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:22px;transition:transform .3s,border-color .3s}
.talk:hover{transform:translateY(-4px);border-color:rgba(60,232,143,.3)}
.talk .tcat{font-family:var(--font-mono);font-size:11px;color:var(--green);margin-bottom:10px}
.talk h3{font-size:16px;margin-bottom:7px}
.talk p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.talk .status{font-family:var(--font-mono);font-size:11px;color:var(--faint);border:1px dashed var(--border);border-radius:6px;padding:4px 9px;display:inline-block}
.certs{display:flex;flex-wrap:wrap;gap:12px}
.cert{font-family:var(--font-mono);font-size:13px;color:var(--muted);border:1px solid var(--border);border-radius:9px;padding:10px 16px;background:rgba(255,255,255,.015);transition:color .25s,border-color .25s}
.cert:hover{color:var(--text);border-color:var(--border-strong)}
.cert b{color:var(--green);font-weight:500;margin-right:8px}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:52px;align-items:start}
@media(max-width:840px){.about-grid{grid-template-columns:1fr}}
.about-grid .sub{max-width:none;margin-bottom:18px}
.about-grid .name-strong{color:var(--text);font-weight:600}
.facts{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);font-family:var(--font-mono);font-size:13px;overflow:hidden}
.facts .row{display:flex;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid rgba(148,163,184,.08)}
.facts .row:last-child{border:none}
.facts .k{color:var(--faint)}
.facts .v{color:var(--text);text-align:right}
.facts .v.g{color:var(--green)}
.cta-wrap{position:relative;border:1px solid var(--border-strong);border-radius:20px;overflow:hidden;background:radial-gradient(600px circle at 15% 0%,rgba(60,232,143,.1),transparent 60%),radial-gradient(600px circle at 85% 100%,rgba(39,198,220,.08),transparent 60%),var(--bg-2);padding:60px 52px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:940px){.cta-wrap{grid-template-columns:1fr;padding:42px 26px}}
.cta-wrap h2{font-size:clamp(26px,3.6vw,38px)}
.cta-points{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.cta-points div{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15px}
.cta-points svg{width:17px;height:17px;stroke:var(--green);flex-shrink:0;margin-top:3px}
.form{display:flex;flex-direction:column;gap:14px}
.form label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);margin-bottom:-8px}
.form input,.form textarea{font:inherit;font-size:14.5px;color:var(--text);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:13px 16px;transition:border-color .25s,background .25s;width:100%}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.form input:focus,.form textarea:focus{border-color:var(--green);background:rgba(60,232,143,.04)}
.form textarea{min-height:100px;resize:vertical}
.form .btn{justify-content:center;margin-top:6px}
.form .hint{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);text-align:center}
.form-status{font-family:var(--font-mono);font-size:12.5px;color:var(--green);display:none;text-align:center}
.contact-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.contact-socials a{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 14px;transition:all .25s}
.contact-socials a:hover{color:var(--green);border-color:rgba(60,232,143,.3)}
footer{border-top:1px solid var(--border);padding:56px 0 34px;background:var(--bg-2)}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--border)}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}}
@media(max-width:460px){.footer-top{grid-template-columns:1fr}}
.footer-brand .logo{font-family:var(--font-mono);font-size:16px;font-weight:500}
.footer-brand .logo .p{color:var(--green)}
.footer-tag{color:var(--muted);font-size:14px;line-height:1.65;margin:14px 0 20px;max-width:400px}
.footer-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--green);border:1px solid rgba(60,232,143,.35);border-radius:10px;padding:9px 16px;transition:background .25s,transform .25s}
.footer-cta:hover{background:var(--green-dim);transform:translateY(-2px)}
.footer-cta .arr{transition:transform .25s}.footer-cta:hover .arr{transform:translateX(3px)}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.footer-col a{color:var(--muted);font-size:14px;width:fit-content;transition:color .2s,transform .2s}
.footer-col a:hover{color:var(--green);transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(3,4,8,.94);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:82vh;border-radius:10px;border:1px solid var(--border-strong);box-shadow:0 30px 90px -30px #000}
.lightbox .lb-close{position:absolute;top:22px;right:26px;font-family:var(--font-mono);font-size:14px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 14px;background:rgba(255,255,255,.03)}
.lightbox .lb-close:hover{color:var(--text);border-color:var(--border-strong)}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;color:var(--text);border:1px solid var(--border);border-radius:50%;background:rgba(8,12,19,.75);cursor:pointer;transition:border-color .2s,background .2s,transform .2s;z-index:2;-webkit-tap-highlight-color:transparent}
.lightbox .lb-nav:hover{border-color:rgba(60,232,143,.6);background:rgba(8,12,19,.95);color:var(--green)}
.lightbox .lb-prev{left:22px}
.lightbox .lb-next{right:22px}
.lightbox .lb-counter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:12.5px;color:var(--muted);background:rgba(8,12,19,.75);border:1px solid var(--border);border-radius:8px;padding:5px 14px;letter-spacing:.05em}
@media(max-width:560px){.lightbox .lb-nav{width:44px;height:44px;font-size:24px}.lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}}
/* ============================================================
   v3 ADDITIONS & FIXES  (feedback round)
   ============================================================ */


/* FIX: alias row centered for visibility */
.hero .alias-row{justify-content:flex-start;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero .alias-pill{font-family:var(--font-mono);font-size:13.5px;color:var(--green);border:1px solid rgba(60,232,143,.3);background:var(--green-dim);border-radius:8px;padding:7px 14px;white-space:nowrap}
.hero .alias-pill .b{color:var(--faint)}
.hero .alias-role{font-family:var(--font-mono);font-size:13.5px;color:var(--muted);white-space:nowrap}
@media(max-width:520px){.hero .alias-role{white-space:normal}}

/* SentryScan logo lockup — fix "SentryScan ENTERPRISE" collision */
.sentry-logo-lockup{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.sentry-logo-lockup .brand{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;gap:11px}
.sentry-logo-lockup .brand .mark{width:30px;height:30px;flex-shrink:0}
.sentry-logo-lockup .brand .s1{color:#CBD5E1}
.sentry-logo-lockup .brand .s2{color:var(--teal)}
.sentry-logo-lockup .brand-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--teal);border:1px solid rgba(45,212,191,.35);border-radius:6px;padding:4px 9px;align-self:center}

/* SentryScan live-scanning radar (left of hero) */
.sentry-radar-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;margin:30px 0 40px}
@media(max-width:900px){.sentry-radar-grid{grid-template-columns:1fr;gap:30px}}
.radar-box{position:relative;max-width:380px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.radar-box .radar-svg{width:100%;aspect-ratio:1/1;max-width:340px}
.radar-caption{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:8px 16px;background:rgba(45,212,191,.03)}
.radar-caption .rc-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 2s ease infinite}
.radar-svg{width:100%;height:100%;overflow:visible}
.radar-ring{fill:none;stroke:rgba(45,212,191,.22);stroke-width:1}
.radar-cross{stroke:rgba(45,212,191,.14);stroke-width:1}
.radar-sweep{transform-origin:center;animation:radarSpin 3.2s linear infinite}
@keyframes radarSpin{to{transform:rotate(360deg)}}
.radar-blip{fill:var(--teal);opacity:0}
.radar-blip.crit{fill:var(--red)}
.radar-blip.b1{animation:blipPulse 3.2s ease-in-out infinite}
.radar-blip.b2{animation:blipPulse 3.2s ease-in-out .7s infinite}
.radar-blip.b3{animation:blipPulse 3.2s ease-in-out 1.5s infinite}
.radar-blip.b4{animation:blipPulse 3.2s ease-in-out 2.1s infinite}
.radar-blip.b5{animation:blipPulse 3.2s ease-in-out 2.6s infinite}
@keyframes blipPulse{0%,15%{opacity:0;r:2}25%{opacity:1;r:4}70%{opacity:.5}100%{opacity:0;r:2}}
.radar-center{fill:var(--teal)}
@media (prefers-reduced-motion:reduce){.radar-sweep,.radar-blip[class]{animation:none}.radar-blip[class]{opacity:.7}}

/* SentryScan capabilities — animated marquee of tool tags */
.cap-wrap{margin:14px 0 6px}
.cap-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-bottom:12px}
.cap-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cap-track{display:flex;gap:10px;width:max-content;animation:capScroll 26s linear infinite}
.cap-marquee:hover .cap-track{animation-play-state:paused}
@keyframes capScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cap-track{animation:none;flex-wrap:wrap;width:100%}}
.cap-tag{font-family:var(--font-mono);font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 13px;background:rgba(45,212,191,.03);white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color .25s,border-color .25s}
.cap-tag:hover{color:var(--text);border-color:rgba(45,212,191,.4)}
.cap-tag .cdot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}

/* Service card highlight ring (subtle animated glow on hover) */
.svc::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;opacity:0;transition:opacity .4s;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 0 30px -8px color-mix(in srgb,var(--accent) 50%,transparent)}
.svc:hover::after{opacity:1}

/* CVEs section */
.cve-list{display:flex;flex-direction:column;gap:12px}
.cve-item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:16px 20px;transition:border-color .3s,transform .3s}
.cve-item:hover{border-color:rgba(60,232,143,.3);transform:translateX(3px)}
.cve-id{font-family:var(--font-mono);font-size:13px;color:var(--green);font-weight:500;white-space:nowrap}
.cve-desc{color:var(--muted);font-size:14px}
.cve-desc b{color:var(--text);font-weight:500}
.cve-sev{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;padding:4px 10px;border-radius:6px;white-space:nowrap}
.cve-sev.critical{color:var(--red);border:1px solid rgba(251,113,133,.4);background:rgba(251,113,133,.08)}
.cve-sev.high{color:var(--amber);border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.cve-sev.medium{color:var(--cyan);border:1px solid rgba(39,198,220,.4);background:rgba(39,198,220,.08)}

/* blog post cover image support */
.post .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== PAGE LOADER (shown until the site is ready, then fades) ===== */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .55s ease,visibility .55s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-term{font-family:var(--font-mono);font-size:14px;width:min(340px,80vw);line-height:1.7}
.pl-line{margin-bottom:6px;color:var(--muted)}
.pl-p{color:var(--green)}
.pl-cmd{color:var(--text)}
.pl-dim{color:var(--faint)}
.pl-dots::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:plDots 1.1s steps(1,end) infinite}
@keyframes plDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pl-bar{margin-top:14px;height:3px;border-radius:2px;background:rgba(148,163,184,.15);overflow:hidden}
.pl-bar-fill{display:block;height:100%;width:100%;transform:scaleX(.1);transform-origin:0 50%;background:var(--grad);box-shadow:0 0 10px rgba(60,232,143,.5);animation:plBar 1.5s ease forwards}
@keyframes plBar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pl-bar-fill{animation:none;transform:none}.pl-dots::after{animation:none;content:"…"}}

/* ===== SCROLL PROGRESS LINE (top of screen) ===== */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:var(--grad);box-shadow:0 0 12px rgba(60,232,143,.65);pointer-events:none;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .08s linear;will-change:transform}

/* ---- left-side vertical scroll rail ---- */
#scrollRail{position:fixed;left:26px;top:14vh;bottom:14vh;width:16px;z-index:200;pointer-events:none;opacity:0;transform:translateX(-6px);transition:opacity .6s ease,transform .6s ease}
#scrollRail.ready{opacity:1;transform:none}
#scrollRail .sr-track{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(180deg,rgba(148,163,184,.05),rgba(148,163,184,.18),rgba(148,163,184,.05))}
#scrollRail .sr-fill{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%) scaleY(var(--p,0));transform-origin:50% 0;border-radius:2px;background:var(--grad);box-shadow:0 0 10px rgba(60,232,143,.55),0 0 22px rgba(39,198,220,.35);transition:transform .12s linear;will-change:transform}
#scrollRail .sr-comet{position:absolute;left:50%;top:0;width:12px;height:12px;transform:translate(-50%,-50%) translateY(calc(var(--p,0) * 72vh));will-change:transform;border-radius:50%;background:radial-gradient(circle at 50% 40%,#eafff5,var(--green) 45%,var(--cyan) 100%);box-shadow:0 0 10px 2px rgba(60,232,143,.85),0 0 26px 6px rgba(39,198,220,.5);transition:transform .12s linear}
#scrollRail .sr-comet::before{content:"";position:absolute;left:50%;width:4px;border-radius:4px;transform:translateX(-50%);background:linear-gradient(var(--green),transparent);opacity:0;transition:opacity .3s ease}
/* trailing tail — points opposite to scroll direction */
#scrollRail.down .sr-comet::before{bottom:100%;height:40px;background:linear-gradient(0deg,rgba(60,232,143,.9),transparent);opacity:.9}
#scrollRail.up .sr-comet::before{top:100%;height:40px;background:linear-gradient(180deg,rgba(39,198,220,.9),transparent);opacity:.9}
#scrollRail.scrolling .sr-comet{animation:sr-pulse .6s ease infinite}
@keyframes sr-pulse{0%,100%{box-shadow:0 0 10px 2px rgba(60,232,143,.85),0 0 26px 6px rgba(39,198,220,.5)}50%{box-shadow:0 0 16px 4px rgba(60,232,143,1),0 0 40px 12px rgba(39,198,220,.7)}}
/* little direction arrow inside the comet */
#scrollRail .sr-arrow{position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-60%) rotate(45deg);border-right:1.5px solid rgba(3,10,8,.85);border-bottom:1.5px solid rgba(3,10,8,.85);transition:transform .3s ease;opacity:0}
#scrollRail.scrolling .sr-arrow{opacity:1}
#scrollRail.up .sr-arrow{transform:translate(-50%,-40%) rotate(-135deg)}
/* percentage read-out that rides along with the comet */
#scrollRail .sr-pct{position:absolute;left:20px;top:0;transform:translateY(-50%) translateY(calc(var(--p,0) * 72vh));font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--muted);white-space:nowrap;opacity:0;transition:transform .12s linear,opacity .3s ease}
#scrollRail.scrolling .sr-pct{opacity:.9;color:var(--green)}
@media (prefers-reduced-motion:reduce){#scrollRail .sr-fill,#scrollRail .sr-comet,#scrollRail .sr-pct{transition:none}#scrollProgress{transition:none}#scrollRail.scrolling .sr-comet{animation:none}}
@media (max-width:900px){#scrollRail{display:none}}

/* ===== CUSTOM CURSOR =====
   Now lives entirely in js/cursor.js, which injects its own styles so the
   effect works identically on every page of the site (including the
   standalone pages that don't load this stylesheet). Nothing needed here. */

/* ============================================================================
   INTERACTIVE LAYER (2026-08 upgrade): live terminal, konami, matrix theme
   ============================================================================ */
.term-body{max-height:520px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(60,232,143,.35) transparent}
.term-body::-webkit-scrollbar{width:6px}
.term-body::-webkit-scrollbar-thumb{background:rgba(60,232,143,.25);border-radius:3px}
.term-in-row{display:flex;align-items:center;gap:0;margin-top:10px}
.term-in{flex:1;background:transparent;border:0;color:var(--text);font-family:var(--font-mono);font-size:inherit;line-height:inherit;caret-color:var(--green);padding:0}
.konami-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(5,7,12,.82);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s ease;pointer-events:none}
.konami-ov.show{opacity:1}
.konami-box{text-align:center;font-family:var(--font-mono);border:1px solid rgba(60,232,143,.5);border-radius:14px;padding:38px 48px;background:rgba(5,20,12,.85);box-shadow:0 0 60px rgba(60,232,143,.25)}
.konami-box .k-title{font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.18em;color:var(--green);text-shadow:0 0 18px rgba(60,232,143,.8);animation:kFlicker 1.2s steps(2) infinite}
.konami-box .k-sub{margin-top:12px;color:var(--muted);font-size:14px}
.konami-box .k-hint{margin-top:6px;color:var(--faint);font-size:12px}
@keyframes kFlicker{0%,92%{opacity:1}94%{opacity:.55}96%{opacity:1}98%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.konami-box .k-title{animation:none}}

/* ============================================================================
   HACKER VISUAL LAYER v2: glitch name, CRT scanlines
   ============================================================================ */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none;z-index:-1;-webkit-text-fill-color:currentColor}
.glitch::before{color:var(--cyan);-webkit-text-fill-color:var(--cyan);animation:glitchA 3.4s infinite steps(1)}
.glitch::after{-webkit-text-fill-color:var(--green);color:var(--green);animation:glitchB 3.4s infinite steps(1)}
@keyframes glitchA{0%,88%,100%{opacity:0;transform:none;clip-path:inset(0 0 55% 0)}89%{opacity:.9;transform:translate(-5px,-2px);clip-path:inset(0 0 48% 0)}92%{opacity:.9;transform:translate(4px,1px);clip-path:inset(8% 0 40% 0)}95%{opacity:0}}
@keyframes glitchB{0%,88%,100%{opacity:0;transform:none;clip-path:inset(50% 0 0 0)}90%{opacity:.9;transform:translate(5px,2px);clip-path:inset(42% 0 5% 0)}93%{opacity:.9;transform:translate(-4px,-1px);clip-path:inset(55% 0 0 0)}96%{opacity:0}}
.crt{position:fixed;inset:0;z-index:90;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.28}
@media(max-width:760px){.crt{display:none}}
@media(prefers-reduced-motion:reduce){.glitch::before,.glitch::after{display:none}}

/* ============================================================================
   HARDENING PASS  —  accessibility, print, touch and motion
   Everything below was added after an audit; it is deliberately kept in one
   block at the end so it is easy to review, and so it wins on cascade order.
   ============================================================================ */

/* ---- 1. Touch targets. WCAG 2.5.8 wants 24px minimum; 44px is the comfortable
        target Apple and Google both recommend. These were all well under. ---- */
.hof-arrow{width:44px;height:44px}
.hof-dot{position:relative;width:44px;height:44px;background:none;border-radius:50%;transform:none}
.hof-dot::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--border-strong);transition:background .25s,transform .25s}
.hof-dot:hover::after{background:var(--muted)}
.hof-dot.active{background:none;transform:none;box-shadow:none}
.hof-dot.active::after{background:var(--green);transform:scale(1.25);box-shadow:0 0 10px rgba(60,232,143,.6)}
.hof-dots{gap:0}
.hof-pause{font-size:12px;letter-spacing:1px}
.blog-filter{min-height:44px;display:inline-flex;align-items:center}
.event .ev-thumb{width:52px;height:44px}
.lightbox .lb-close{min-height:44px;display:inline-flex;align-items:center}
.hof-slide-body .hof-proof{min-height:44px;display:inline-flex;align-items:center}
.menu-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.bar .logo{display:inline-flex;align-items:center;min-height:44px}

/* ---- 2. Text that was carrying real content at 9–10.5px ---- */
.hl-tag,.brand-badge,.hl-eyebrow,.sr-pct,.sentry-stat span{font-size:11px}
.svc .deliv{font-size:11.5px}

/* ---- 3. prefers-reduced-motion. The hover twins of the service-card
        animations sat outside the guard, so "reduce" still animated them. ---- */
@media (prefers-reduced-motion:reduce){
  .svc:hover .mob-scan,.svc:hover .cloud-sweep,.svc:hover .cloud-blip,
  .svc:hover .web-payload,.svc:hover .net-packet,.svc:hover .ai-pulse,
  .svc[data-theme="web"]:hover .web-payload,
  .svc[data-theme="mobile"]:hover .mob-scan,
  .svc[data-theme="cloud"]:hover .cloud-sweep,
  .svc[data-theme="cloud"]:hover .cloud-blip{animation:none}
  .hof-slide{transition:opacity .01ms}
  *,*::before,*::after{animation-iteration-count:1 !important}
}

/* ---- 4. prefers-contrast: more ---- */
@media (prefers-contrast:more){
  :root{--muted:#C3CCDA;--faint:#A8B4C6;--border:rgba(148,163,184,.4);--border-strong:rgba(148,163,184,.68)}
  .bg-grid,.crt{display:none}
}

/* ---- 5. Terminal input placeholder was 2.2:1, dropping to 1.4:1 on focus ---- */
.term-in::placeholder{color:#7B8698;opacity:1}
.term-in:focus::placeholder{opacity:.6}

/* ---- 6. Typography for the markdown blog reader. `marked` output had no
        styles at all, so posts rendered as one unbroken wall of text and code
        blocks pushed the overlay sideways on mobile. ---- */
#brBody{color:var(--text)}
#brBody h1,#brBody h2,#brBody h3{font-family:var(--font-display);line-height:1.25;margin:1.6em 0 .5em}
#brBody h1{font-size:1.9rem;margin-top:0}
#brBody h2{font-size:1.4rem}
#brBody h3{font-size:1.15rem}
#brBody p,#brBody ul,#brBody ol,#brBody blockquote,#brBody table{margin:0 0 1.1em}
#brBody ul,#brBody ol{padding-left:1.5em}
#brBody li{margin-bottom:.4em}
#brBody a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
#brBody strong{color:var(--text)}
#brBody code{font-family:var(--font-mono);font-size:.88em;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
#brBody pre{overflow-x:auto;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:0 0 1.2em;-webkit-overflow-scrolling:touch}
#brBody pre code{background:none;border:0;padding:0;font-size:.86em;line-height:1.6}
#brBody blockquote{border-left:3px solid var(--green);padding-left:16px;color:var(--muted)}
#brBody img{max-width:100%;height:auto;border-radius:10px}
#brBody table{width:100%;border-collapse:collapse;font-size:.92em;display:block;overflow-x:auto}
#brBody th,#brBody td{border:1px solid var(--border);padding:8px 12px;text-align:left}
#brBody hr{border:0;border-top:1px solid var(--border);margin:2em 0}
@media(max-width:640px){#brBody{padding:28px 20px !important;margin:60px auto !important}}

/* ---- 7. Breathing room on phones — 100px top and bottom per section meant
        200px of dead space between every block on a 375px screen. ---- */
@media(max-width:600px){
  section{padding:56px 0}
  .sec-head{margin-bottom:32px}
}

/* ---- 8. CSS-only preloader escape hatch. The overlay is z-index 9999 and was
        removed only by JS; if a script threw first, the whole site stayed
        behind an opaque panel. This guarantees it clears. ---- */
#preloader{animation:plFailsafe 0s linear 6s forwards}
@keyframes plFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ---- 9. Latent: the CVE grid has no mobile column rule and both outer
        columns are nowrap, so the first real CVE would overflow the card. ---- */
@media(max-width:560px){.cve-item{grid-template-columns:1fr;gap:8px}}

/* ============================================================================
   10. PRINT. There was no print stylesheet at all, so the page printed
   #E7EDF5 body text onto white paper — 1.2:1, effectively a blank document,
   across 22 pages with every fixed decorative layer still painting.
   ============================================================================ */
@media print{
  :root{--text:#111827;--muted:#374151;--faint:#4B5563;--border:#D1D5DB;--border-strong:#9CA3AF;--green:#046C42;--cyan:#0E6E7C}
  html,body{background:#fff !important;color:#111827 !important}
  body{overflow:visible}
  #three-hero,.bg-glow,.bg-grid,#spotlight,.crt,#scrollRail,#scrollProgress,
  .mobile-menu,#preloader,.lightbox,.scanline,
  nav#nav,.hof-controls,.hero-ctas,.footer-cta,.blog-filters,.menu-btn{display:none !important}
  .bar{position:static;background:none;border-bottom:1px solid #D1D5DB;backdrop-filter:none}
  section,.hero{padding:18px 0 !important;page-break-inside:avoid}
  .wrap{max-width:none;padding:0}
  h1,h2,h3{color:#111827 !important;page-break-after:avoid}
  .grad-text,.hero .name-h1 .ln2{background:none !important;-webkit-text-fill-color:#046C42 !important;color:#046C42 !important}
  .svc,.step,.proj,.post,.event,.terminal,.hof-viewport{background:#fff !important;border:1px solid #D1D5DB !important;box-shadow:none !important;page-break-inside:avoid}
  a{color:#046C42 !important;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#4B5563;word-break:break-all}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}
  img{max-width:100% !important;page-break-inside:avoid}
  .hof-slide{position:static !important;opacity:1 !important;transform:none !important;page-break-inside:avoid}
  *{animation:none !important;transition:none !important;text-shadow:none !important}
  @page{margin:16mm}
}

/* ============================================================================
   READABILITY & CINEMATIC DEPTH PASS — 2026-08-22
   Content-first redesign: nothing renders ON TOP of text any more, cards sit
   on solid surfaces, and the animated background (rebuilt in js/effects.js as
   a threat-map globe with depth-layered particles) dims automatically once
   you scroll past the hero. Appended last so it wins the cascade.
   ============================================================================ */

/* 1. Core surfaces — cards were 97% transparent, so the animated background
      crawled directly underneath text. Solid panels + slightly brighter
      secondary text = instant readability. */
:root{
  --panel:rgba(13,18,28,.82);
  --panel-hover:rgba(18,25,37,.92);
  --muted:#98A4B6;
  --faint:#8591A3;
  --border:rgba(148,163,184,.14);
}

/* 2. The CRT scanline overlay sat at z-index 90 ABOVE every piece of content,
      striping and darkening all text on the site. Repurposed as a subtle
      cinematic vignette that lives BELOW the content plane. */
.crt{
  z-index:-1;
  background:radial-gradient(130% 100% at 50% 0%,transparent 58%,rgba(2,4,9,.5) 100%);
  opacity:1;
}
@media(max-width:760px){.crt{display:block}}

/* 3. Background canvas — opacity is driven per-frame by effects.js
      (fades to ~14% past the hero), so the CSS transition must not fight it. */
#three-hero{transition:none}

/* 4. Ambient layers toned down so they support, never compete. */
.bg-grid{background-image:linear-gradient(rgba(148,163,184,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px)}
#spotlight{background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(60,232,143,.035),transparent 65%)}

/* 5. Hero terminal + nav get properly opaque backdrops. */
.terminal{background:linear-gradient(180deg,rgba(13,18,27,.96),rgba(8,12,19,.97))}
nav.scrolled{background:rgba(5,7,12,.86)}

/* 6. Highlight cards previously replaced the panel bg with near-transparent
      gradients — re-layer the tints over a solid surface. */
.hl-featured{background:linear-gradient(160deg,rgba(60,232,143,.08),rgba(39,198,220,.02)),rgba(13,18,28,.88)}
.hl-hof{background:linear-gradient(160deg,rgba(167,139,250,.07),transparent),rgba(13,18,28,.88)}
.hl-blog{background:linear-gradient(160deg,rgba(39,198,220,.07),transparent),rgba(13,18,28,.88)}

/* 7. Consistent card elevation — one soft shadow language across the site. */
.svc,.proj,.post,.event,.skill-cat,.talk,.bb-plat,.bb-note,.cve-item,
.hl-card,.sentry-feat,.step,.facts{
  box-shadow:0 14px 44px -22px rgba(0,0,0,.6);
}
.svc:hover,.proj:hover,.post:hover,.event:hover,.skill-cat:hover,.talk:hover,
.hl-card:hover{
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75),0 0 34px -16px rgba(60,232,143,.18);
}

/* 8. Glitch on the name: rarer + smaller displacement = confident, not noisy. */
.glitch::before{animation-duration:6.5s}
.glitch::after{animation-duration:6.5s}
@keyframes glitchA{0%,93%,100%{opacity:0;transform:none;clip-path:inset(0 0 55% 0)}94%{opacity:.8;transform:translate(-2px,-1px);clip-path:inset(0 0 48% 0)}96%{opacity:.8;transform:translate(2px,1px);clip-path:inset(8% 0 40% 0)}98%{opacity:0}}
@keyframes glitchB{0%,93%,100%{opacity:0;transform:none;clip-path:inset(50% 0 0 0)}94.5%{opacity:.8;transform:translate(2px,1px);clip-path:inset(42% 0 5% 0)}96.5%{opacity:.8;transform:translate(-2px,-1px);clip-path:inset(55% 0 0 0)}98.5%{opacity:0}}

/* 9. Sections breathe over the dimmed backdrop; keep banded sections solid. */
.intro{background:rgba(8,12,19,.55)}
.trust{background:rgba(8,12,19,.55)}

/* ============================================================================
   FOOTER REDESIGN — 2026-08-22
   The old footer stacked 9 links in one column at ~50px per row (the a11y
   layer's 38px touch targets + 12px gaps), leaving a huge empty band. Now:
   four balanced columns, compact rows, a status pill and a slim bottom bar.
   ============================================================================ */
footer{padding:44px 0 24px}
.footer-top{grid-template-columns:1.5fr .9fr .9fr .9fr;gap:36px;padding-bottom:24px}
.footer-brand .logo{min-height:0}
.footer-tag{margin:12px 0 14px;font-size:13.5px;max-width:340px}
.footer-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);border:1px solid rgba(60,232,143,.25);border-radius:99px;padding:6px 13px;margin:0 0 16px;background:rgba(60,232,143,.04)}
.footer-status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.2s ease infinite}
.footer-col{gap:0}
.footer-col-label{margin-bottom:10px}
.footer-col a,footer .footer-col a{display:inline-flex;align-items:center;min-height:31px;padding:2px 2px;font-size:13.5px}
.footer-bottom{padding-top:18px;align-items:center;font-size:11.5px}
.footer-bottom .foot-top{color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:6px 12px;transition:color .25s,border-color .25s}
.footer-bottom .foot-top:hover{color:var(--green);border-color:rgba(60,232,143,.4)}
@media(max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .footer-top{grid-template-columns:1fr 1fr}
  footer{padding:36px 0 20px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
}

/* ============================================================================
   GLASS TERMINAL — 2026-08-22
   The hero terminal was fully opaque and hid the galaxy behind it. Frosted
   glass lets the scene glow through while the blur keeps every line of
   terminal text crisp. (Falls back to a solid card where backdrop-filter
   is unsupported.)
   ============================================================================ */
.terminal{background:linear-gradient(180deg,rgba(13,18,27,.92),rgba(8,12,19,.94))}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .terminal{
    background:linear-gradient(180deg,rgba(11,16,25,.60),rgba(7,10,17,.66));
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
    border-color:rgba(148,163,184,.3);
    box-shadow:0 30px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06),0 0 60px -20px rgba(60,232,143,.18);
  }
  .hero-flagship{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}

/* ============================================================================
   HERO WITHOUT TERMINAL — 2026-08-22
   The simulated-scan terminal was removed (placeholder data, and it covered
   the galaxy). The identity column keeps a fixed width and the spiral galaxy
   owns the right half of the hero.
   ============================================================================ */
.hero-grid.hero-solo{grid-template-columns:minmax(0,680px) 1fr;gap:0}
.hero-solo .hero-flagships{margin:30px 0 0;max-width:620px}
.hero-solo .hero-meta{margin-top:28px}
.hero-solo .tagline{max-width:600px}
@media(max-width:940px){.hero-grid.hero-solo{grid-template-columns:1fr}}

/* ============================================================================
   ANIMATED SKILLS ARSENAL — 2026-08-23
   Replaces the plain skill lists with capability cards + meters that fill on
   scroll. Proficiency is self-assessed (labelled Expert/Advanced).
   ============================================================================ */
.skill-arsenal{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.skill-arsenal{grid-template-columns:1fr}}
.skill-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:22px 24px;box-shadow:0 14px 44px -22px rgba(0,0,0,.6);transition:border-color .3s,transform .3s}
.skill-card:hover{border-color:rgba(60,232,143,.32);transform:translateY(-3px)}
.sk-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.sk-ico{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--green-dim);border:1px solid rgba(60,232,143,.28);color:var(--green);font-size:18px}
.sk-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-name{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--text);letter-spacing:-.01em}
.sk-cat{font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.sk-lvl{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--green);border:1px solid rgba(60,232,143,.3);background:rgba(60,232,143,.06);border-radius:6px;padding:5px 10px;white-space:nowrap}
.sk-meter{position:relative;height:8px;border-radius:6px;background:rgba(148,163,184,.12);overflow:hidden;margin-bottom:16px}
.sk-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:linear-gradient(90deg,#3CE88F,#27C6DC);box-shadow:0 0 14px -2px rgba(60,232,143,.6);transition:width 1.15s cubic-bezier(.2,.8,.2,1)}
.sk-pct{position:absolute;right:0;top:-22px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.sk-chips{display:flex;flex-wrap:wrap;gap:7px}
.sk-chips span{font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:5px 10px;background:rgba(255,255,255,.015);transition:color .2s,border-color .2s}
.skill-card:hover .sk-chips span{border-color:rgba(60,232,143,.18)}
@media (prefers-reduced-motion:reduce){.sk-fill{transition:none}}

/* ============================================================================
   HIDDEN HACKER TERMINAL — 2026-08-23  (launcher + overlay + matrix takeover)
   ============================================================================ */
#hxLaunch{position:fixed;right:20px;bottom:20px;z-index:400;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;color:var(--green);background:rgba(9,14,12,.82);border:1px solid rgba(60,232,143,.35);border-radius:10px;padding:10px 14px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 34px -14px rgba(0,0,0,.7);transition:border-color .25s,transform .25s,background .25s}
#hxLaunch:hover{border-color:var(--green);transform:translateY(-2px);background:rgba(12,20,16,.92)}
#hxLaunch .hx-l-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
#hxLaunch .hx-l-cur{width:8px;height:14px;background:var(--green);animation:blink 1.1s steps(1) infinite}
@media(max-width:600px){#hxLaunch .hx-l-txt{display:none}#hxLaunch{padding:11px}}
@media print{#hxLaunch{display:none}}

#hxOv{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,5,9,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#hxOv.open{display:flex}
#hxOv .hx-win{width:min(720px,96vw);height:min(460px,80vh);display:flex;flex-direction:column;border:1px solid rgba(60,232,143,.3);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(10,15,13,.98),rgba(7,10,17,.98));box-shadow:0 40px 100px -30px #000,0 0 60px -24px rgba(60,232,143,.25);font-family:var(--font-mono)}
#hxOv .hx-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
#hxOv .hx-d{width:11px;height:11px;border-radius:50%}
#hxOv .hx-d.r{background:#FF5F57}#hxOv .hx-d.y{background:#FEBC2E}#hxOv .hx-d.g{background:#28C840}
#hxOv .hx-title{margin-left:10px;font-size:12px;color:var(--faint)}
#hxOv .hx-x{margin-left:auto;color:var(--muted);font-size:14px;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center}
#hxOv .hx-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
#hxOv .hx-body{flex:1;overflow-y:auto;padding:16px 18px;font-size:13.5px;line-height:1.75;color:var(--muted);scrollbar-width:thin;scrollbar-color:rgba(60,232,143,.35) transparent}
#hxOv .hx-body::-webkit-scrollbar{width:6px}#hxOv .hx-body::-webkit-scrollbar-thumb{background:rgba(60,232,143,.25);border-radius:3px}
#hxOv .hx-ln{white-space:pre-wrap;word-break:break-word}
#hxOv .hx-ln b{color:var(--text);font-weight:600}
#hxOv .hx-ln a{color:var(--green);border-bottom:1px dashed rgba(60,232,143,.5)}
#hxOv .hx-ln.ok{color:var(--green)}#hxOv .hx-ln.c{color:var(--cyan)}#hxOv .hx-ln.m{color:var(--muted)}
#hxOv .hx-ln.dim{color:var(--faint)}#hxOv .hx-ln.warn{color:var(--amber)}#hxOv .hx-ln.crit{color:var(--red)}
#hxOv .hx-p{color:var(--green)}
#hxOv .hx-cmd{color:var(--text)}
#hxOv .hx-row{display:flex;align-items:center;gap:8px;margin-top:6px}
#hxOv .hx-in{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-family:var(--font-mono);font-size:13.5px;caret-color:var(--green)}
#hxMatrix{position:fixed;inset:0;z-index:600;background:#05070C;cursor:pointer}
#hxMxHint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:601;font-family:var(--font-mono);font-size:12.5px;color:var(--green);background:rgba(5,7,12,.7);border:1px solid rgba(60,232,143,.4);border-radius:8px;padding:8px 16px;letter-spacing:.05em}