:root{
  --bg:#07090d;
  --bg-2:#0b0f15;
  --panel:#0e131b;
  --panel-2:#121925;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#e8ebf0;
  --muted:#8d97a8;
  --dim:#5d6778;
  --amber:#f2a541;
  --amber-2:#ffcb7d;
  --teal:#4fd1c5;
  --green:#6fdc9a;
  --violet:#a18cff;
  --red:#ff5e5b;
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.is-loading{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1}
p{margin:0}
::selection{background:var(--amber);color:#111}
.mono{font-family:var(--f-mono);font-size:.82em;letter-spacing:0}
.dim{color:var(--muted)}
.ok{color:var(--green)}
.bad{color:var(--red)}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
@media (min-width:720px){.wrap{width:min(1200px,100% - 64px)}}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* background texture */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
   radial-gradient(1200px 600px at 85% -10%,rgba(242,165,65,.07),transparent 60%),
   radial-gradient(900px 600px at -10% 40%,rgba(79,209,197,.05),transparent 60%),
   linear-gradient(var(--bg),var(--bg));}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* preloader */
#preloader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:clip-path 1s var(--ease),visibility 0s 1s;clip-path:inset(0 0 0 0)}
#preloader.done{clip-path:inset(0 0 100% 0);visibility:hidden}
.boot{width:min(520px,100% - 48px);font-family:var(--f-mono);font-size:13px}
.boot-head{display:flex;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.boot-head b{color:var(--amber);font-weight:500}
.boot-log{min-height:150px;color:var(--muted);line-height:1.9}
.boot-log div{animation:bootIn .35s var(--ease) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boot-log .k{color:var(--green)}
.boot-log .w{color:var(--text)}
@keyframes bootIn{from{opacity:0;transform:translateX(-8px)}}
.boot-track{height:2px;background:var(--line);margin-top:16px;overflow:hidden}
.boot-track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}

/* cursor */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:150;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor i{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--amber)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(242,165,65,.45);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
.cursor.hover .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(242,165,65,.08);border-color:rgba(242,165,65,.8)}

.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:120}
.scroll-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));transform-origin:left;transform:scaleX(0)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;padding:16px max(16px,calc((100vw - 1200px)/2));transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,9,13,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:var(--line);padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;color:var(--text)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:999px;transition:color .25s,background .25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text);background:rgba(255,255,255,.06)}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);position:relative}
.menu-btn i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--text);transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn i:first-child{top:16px}.menu-btn i:last-child{top:24px}
.menu-open .menu-btn i:first-child{top:20px;transform:rotate(45deg)}
.menu-open .menu-btn i:last-child{top:20px;transform:rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav-cv{margin-left:auto}
  .nav-links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:0 28px;background:rgba(7,9,13,.97);backdrop-filter:blur(16px);clip-path:circle(0 at calc(100% - 37px) 37px);transition:clip-path .7s var(--ease);margin:0}
  .nav-links a{font:600 clamp(30px,8vw,44px)/1.2 var(--f-display);color:var(--text);padding:4px 0;background:none!important;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s var(--ease)}
  .menu-open .nav-links{clip-path:circle(150% at calc(100% - 37px) 37px)}
  .menu-open .nav-links a{opacity:1;transform:none}
  .menu-open .nav-links a:nth-child(2){transition-delay:.04s}.menu-open .nav-links a:nth-child(3){transition-delay:.08s}.menu-open .nav-links a:nth-child(4){transition-delay:.12s}.menu-open .nav-links a:nth-child(5){transition-delay:.16s}.menu-open .nav-links a:nth-child(6){transition-delay:.2s}.menu-open .nav-links a:nth-child(7){transition-delay:.24s}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:500;font-size:15px;transition:background .3s,color .3s,border-color .3s,box-shadow .3s;will-change:transform;white-space:nowrap}
.btn-sm{padding:9px 15px;font-size:13.5px;gap:7px}
.btn-lg{padding:18px 28px;font-size:16px}
.btn small{opacity:.65;font-size:11px}
.btn-primary{background:var(--amber);color:#14100a;box-shadow:0 10px 40px -12px rgba(242,165,65,.6)}
.btn-primary:hover{background:var(--amber-2);box-shadow:0 14px 50px -10px rgba(242,165,65,.75)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04)}
.btn-danger{border:1px solid rgba(255,94,91,.45);color:#ffb1af;background:rgba(255,94,91,.08)}
.btn-danger:hover{background:rgba(255,94,91,.18);border-color:var(--red);color:#fff}
.btn-danger:disabled{opacity:.5;cursor:wait}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 40px;overflow:hidden}
#hero-net{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-glow{position:absolute;width:70vmax;height:70vmax;right:-25vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(242,165,65,.12),transparent);pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:28px}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid rgba(111,220,154,.3);background:rgba(111,220,154,.07);color:#bff0d2}
.status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(111,220,154,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(111,220,154,0)}100%{box-shadow:0 0 0 0 rgba(111,220,154,0)}}
.hero-name{font-size:clamp(68px,15.5vw,220px);line-height:.86;letter-spacing:-.055em;font-weight:700;display:flex;flex-wrap:wrap;gap:0 .2em;margin-left:-.04em}
.hero-name .split{display:inline-flex;overflow:hidden;padding-bottom:.06em}
.hero-name .ch{display:inline-block;will-change:transform}
.hero-name .outline .ch{color:transparent;-webkit-text-stroke:1.5px rgba(232,235,240,.85)}
.hero-role{display:flex;align-items:center;gap:12px;margin-top:26px;font:500 clamp(18px,2.4vw,26px)/1.3 var(--f-display)}
.role-text{color:var(--amber)}
.caret{width:2px;height:1.05em;background:var(--amber);animation:blink 1s steps(1) infinite;margin-left:-6px}
@keyframes blink{50%{opacity:0}}
.hero-lede{max-width:600px;margin-top:22px;color:var(--muted);font-size:clamp(16px,1.5vw,18px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-foot{position:relative;z-index:2;margin-top:auto;padding-top:60px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ticker{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13px;color:var(--muted)}
.ticker b{color:var(--text);font-weight:500}
.scroll-hint{width:26px;height:42px;border:1.5px solid var(--line-2);border-radius:20px;position:relative;flex:none}
.scroll-hint span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--amber);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* sections */
.section{position:relative;padding:clamp(90px,13vw,160px) 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(36px,5vw,60px)}
.sec-num{font-family:var(--f-mono);font-size:13px;color:var(--amber);padding:4px 9px;border:1px solid rgba(242,165,65,.35);border-radius:999px;flex:none;transform:translateY(-.45em)}
.sec-title{font-size:clamp(36px,6vw,78px);letter-spacing:-.04em;max-width:15ch}
.sec-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sec-title .w>span{display:inline-block;will-change:transform}
.sec-intro{max-width:640px;color:var(--muted);font-size:clamp(16px,1.4vw,18px);margin:-20px 0 40px}
.sub-title{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin-bottom:14px}
.big{font:500 clamp(21px,2.3vw,30px)/1.35 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.card,.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius)}

/* about */
.about-grid{display:grid;gap:56px}
@media (min-width:960px){.about-grid{grid-template-columns:1.35fr 1fr;gap:80px}}
.about-text p+p{margin-top:18px;color:var(--muted)}
.about-text .big{margin-bottom:28px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:34px 0 0}
.facts div{background:var(--bg-2);padding:16px 18px}
.facts dt{font:12px var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:4px 0 0;font-size:15px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.stat{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,rgba(242,165,65,.06),transparent 55%),var(--panel);position:relative;overflow:hidden}
.stat b{display:block;font:700 clamp(46px,6vw,72px)/1 var(--f-display);letter-spacing:-.05em;color:var(--text)}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.45}
.stat::after{content:"";position:absolute;right:-30px;bottom:-30px;width:90px;height:90px;border-radius:50%;border:1px dashed rgba(242,165,65,.25);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* timeline */
.timeline{position:relative;padding-left:34px}
@media (min-width:900px){.timeline{padding-left:200px}}
.tl-line{position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
@media (min-width:900px){.tl-line{left:160px}}
.tl-line i{position:absolute;inset:0;background:linear-gradient(var(--amber),var(--teal));transform-origin:top;transform:scaleY(0)}
.tl-item{position:relative;margin-bottom:28px}
.tl-dot{position:absolute;left:-33px;top:24px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--amber)}
@media (min-width:900px){.tl-dot{left:-47px}}
.tl-dot.live{border-color:var(--green)}
.tl-dot.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--green);animation:ring 2s var(--ease) infinite}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.tl-date{color:var(--amber);margin-bottom:10px}
@media (min-width:900px){.tl-date{position:absolute;left:-200px;top:22px;width:140px;text-align:right;margin:0}}
.card{padding:clamp(22px,3vw,36px)}
.card h3{font-size:clamp(21px,2.2vw,28px)}
.company{margin-top:8px;color:var(--text);font-size:15.5px}
.edu .company{color:var(--muted)}
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.chip{font:12px var(--f-mono);padding:5px 11px;border-radius:999px;border:1px solid var(--line-2)}
.chip-amber{color:var(--amber);border-color:rgba(242,165,65,.4);background:rgba(242,165,65,.07)}
.job-cols{display:grid;gap:30px;margin-top:30px}
@media (min-width:760px){.job-cols{grid-template-columns:1fr 1fr;gap:40px}}
.job-cols h4{color:var(--teal);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:24px;color:var(--muted);font-size:15px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--amber)}

/* ticket flow */
.ticket-flow{margin-top:34px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.tf-head{display:flex;justify-content:space-between;margin-bottom:28px;color:var(--text)}
.tf-track{position:relative;display:flex;justify-content:space-between}
.tf-rail{position:absolute;left:8px;right:8px;top:7px;height:2px;background:var(--line)}
.tf-rail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--amber));transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.tf-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:16px;font-size:12px;color:var(--dim);transition:color .4s}
.tf-stage i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg-2);transition:border-color .4s,background .4s,box-shadow .4s}
.tf-stage span{white-space:nowrap}

.tf-stage.on{color:var(--text)}
.tf-stage.on i{border-color:var(--amber);background:var(--amber)}
.tf-stage.cur i{box-shadow:0 0 0 6px rgba(242,165,65,.18)}
.tf-ticket{margin-top:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px dashed var(--line-2);border-radius:10px;color:var(--muted);transition:opacity .35s,transform .35s var(--ease)}
.tf-ticket b{color:var(--text);font-weight:500}
.tf-ticket em{margin-left:auto;font-style:normal;color:var(--amber);border:1px solid rgba(242,165,65,.35);padding:1px 7px;border-radius:6px}
.tf-ticket.swap{opacity:0;transform:translateY(6px)}
@media (max-width:520px){.tf-stage span{font-size:10px}.tf-stage:nth-of-type(odd) span{margin-top:0}.tf-stage:nth-of-type(even) span{transform:translateY(16px)}}

/* network */
.net-shell{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0c1119,#090c12);overflow:hidden;position:relative}
.net-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.net-legend{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted)}
.net-legend span{display:inline-flex;align-items:center;gap:7px}
.lg{width:8px;height:8px;border-radius:50%;display:inline-block}
.lg.web{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.lg.dns{background:var(--green);box-shadow:0 0 8px var(--green)}
.lg.bak{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.lg.log{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.lg.bad{background:var(--red);box-shadow:0 0 8px var(--red)}
.net-ctrl{display:flex;align-items:center;gap:14px}
.net-count{color:var(--muted)}
.net-count b{color:var(--red);font-weight:500;display:inline-block;min-width:2ch}
.net-stage{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
#net-svg{width:100%;min-width:760px;height:auto}
.zone rect{fill:rgba(255,255,255,.012);stroke:rgba(255,255,255,.12);stroke-dasharray:4 6}
.zone text{font:500 12px var(--f-mono);fill:var(--muted);letter-spacing:.04em}
.zone.z-dmz rect{stroke:rgba(242,165,65,.35)}
.zone.z-dmz text{fill:var(--amber)}
.link{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.link.wl{stroke-dasharray:3 5}
.link-flow{fill:none;stroke:rgba(79,209,197,.35);stroke-width:1.5;stroke-dasharray:2 14;animation:flow 1.6s linear infinite}
.link.wan{stroke:rgba(255,94,91,.25)}
@keyframes flow{to{stroke-dashoffset:-32}}
.node{cursor:pointer;outline:none}
.node .halo{fill:url(#halo)}
.node .ring{fill:#0d121a;stroke:rgba(255,255,255,.16);stroke-width:1.2;transition:stroke .3s,fill .3s}
.node use{color:#cfd6e2;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:color .3s}
.node .lbl,.node .sub{paint-order:stroke;stroke:#0a0e14;stroke-width:5px;stroke-linejoin:round}
.node .lbl{font:600 13px var(--f-display);fill:var(--text);text-anchor:middle}
.node .sub{font:11px var(--f-mono);fill:var(--muted);text-anchor:middle}
.node:hover .ring,.node:focus .ring,.node.sel .ring{stroke:var(--amber);fill:#17140e}
.node:hover use,.node:focus use,.node.sel use{color:var(--amber)}
.node.t-firewall .ring{stroke:rgba(242,165,65,.55)}
.node.t-firewall use{color:var(--amber)}
.node.t-threat .ring{stroke:rgba(255,94,91,.55);fill:#1a0d0e}
.node.t-threat use{color:var(--red)}
.node .pulse{transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--teal);stroke-width:2;opacity:0}
.node.hit .pulse{animation:hit .7s var(--ease)}
.node.block .pulse{stroke:var(--red);animation:hit .8s var(--ease)}
.node.block .ring{stroke:var(--red);fill:#2a0f10}
@keyframes hit{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
.pkt{filter:url(#glow)}
.burst{fill:none;stroke:var(--red);stroke-width:2}
.net-tip{position:absolute;z-index:3;width:250px;padding:14px 16px;border-radius:12px;background:rgba(10,14,20,.94);border:1px solid var(--line-2);box-shadow:0 20px 60px -20px #000;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ease);backdrop-filter:blur(8px)}
.net-tip.show{opacity:1;transform:none}
.net-tip b{display:block;font:600 15px var(--f-display)}
.net-tip span{display:block;color:var(--amber);margin:3px 0 8px}
.net-tip p{font-size:13px;color:var(--muted);line-height:1.5}

/* OSI */
.osi{margin-top:clamp(80px,10vw,140px)}
.osi-grid{display:grid;gap:40px;align-items:center;min-height:100svh;padding:90px 0 40px}
@media (min-width:960px){.osi-grid{grid-template-columns:.9fr 1.1fr;gap:70px}}
.osi-left>.dim{max-width:440px;margin-bottom:30px}
.osi-stack{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.osi-stack li{display:flex;align-items:center;gap:16px;padding:11px 16px;border-radius:12px;border:1px solid var(--line);color:var(--dim);font:500 16px var(--f-display);transition:color .4s,background .4s,border-color .4s,transform .5s var(--ease)}
.osi-stack li span{color:var(--dim);width:24px}
.osi-stack li.done{color:var(--muted);border-color:rgba(79,209,197,.2)}
.osi-stack li.done span{color:var(--teal)}
.osi-stack li.cur{color:var(--text);border-color:rgba(242,165,65,.6);background:rgba(242,165,65,.07);transform:translateX(10px)}
.osi-stack li.cur span{color:var(--amber)}
.osi-screen{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#0d121a,#090c12);padding:clamp(20px,3vw,32px);min-height:330px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.osi-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);pointer-events:none}
.osi-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:34px}
.osi-top #osi-pdu{color:var(--amber);font-size:14px}
.pdu{display:flex;align-items:stretch;flex-wrap:wrap;gap:4px;min-height:74px;transition:opacity .4s,transform .5s var(--ease)}
.pdu .hdr,.pdu .payload{display:flex;flex-direction:column;justify-content:center;border-radius:9px;font:600 14px var(--f-mono);overflow:hidden;white-space:nowrap}
.pdu .hdr{max-width:0;opacity:0;padding:0;border:1px solid transparent;transition:max-width .7s var(--ease),opacity .5s,padding .7s var(--ease)}
.pdu .hdr small{font-weight:400;font-size:10.5px;opacity:.7;margin-top:2px}
.pdu .hdr.on{max-width:260px;opacity:1;padding:10px 12px}
.h-eth{background:rgba(161,140,255,.12);border-color:rgba(161,140,255,.4)!important;color:#cbbfff}
.h-ip{background:rgba(111,220,154,.1);border-color:rgba(111,220,154,.4)!important;color:#b3efca}
.h-tcp{background:rgba(79,209,197,.1);border-color:rgba(79,209,197,.4)!important;color:#aef0e9}
.h-ses{background:rgba(255,255,255,.05);border-color:var(--line-2)!important;color:var(--muted)}
.h-fcs{background:rgba(161,140,255,.12);border-color:rgba(161,140,255,.4)!important;color:#cbbfff}
.payload{flex:1;min-width:150px;padding:10px 14px;background:rgba(242,165,65,.1);border:1px solid rgba(242,165,65,.45);color:var(--amber-2);position:relative}
.payload em{font-style:normal;transition:opacity .4s}
.payload .cipher{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:0;color:var(--amber)}
.pdu.enc .payload .plain{opacity:0}
.pdu.enc .payload .cipher{opacity:1}
.pdu.wire{opacity:.25;transform:scale(.97)}
.bits{height:0;opacity:0;overflow:hidden;color:var(--teal);font-size:13px;letter-spacing:.12em;word-break:break-all;line-height:1.5;transition:opacity .5s,height .5s var(--ease)}
.bits.on{height:60px;opacity:1;margin-top:12px}
.osi-desc{margin-top:auto;padding-top:26px;color:var(--muted);font-size:15px;min-height:4.6em}
.osi-meter{height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden}
.osi-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));transform-origin:left;transform:scaleX(0)}

/* security */
.sec-grid{display:grid;gap:18px}
@media (min-width:960px){.sec-grid{grid-template-columns:1.1fr 1fr}}
.panel{padding:18px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;gap:10px;color:var(--text);padding:2px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
#did-svg{width:100%;max-width:520px;margin:0 auto}
.did-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.did-ring-d{fill:none;stroke-width:1.5;stroke-dasharray:3 9;transform-origin:260px 260px;animation:spin linear infinite}
.did-label{font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.did-core{fill:#17120a;stroke:var(--amber);stroke-width:1.5}
.did-core-t{font:700 14px var(--f-display);fill:var(--amber);text-anchor:middle;letter-spacing:.12em}
.did-core-s{font:10px var(--f-mono);fill:var(--muted);text-anchor:middle}
.did-ring-band.flash{animation:band .6s var(--ease)}
@keyframes band{from{stroke-opacity:.9;stroke-width:4}to{stroke-opacity:.1;stroke-width:1}}
.did-stats{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;color:var(--muted);padding:6px 0 4px;font-size:11.5px}
.did-stats b{color:var(--text);font-weight:500}
.ir-body{display:flex;flex-direction:column;align-items:center}
#ir-svg{width:100%;max-width:470px}
.ir-ring{fill:none;stroke:rgba(255,255,255,.07);stroke-width:22}
.ir-ring-dash{fill:none;stroke:rgba(79,209,197,.35);stroke-width:1;stroke-dasharray:2 7}

.ir-sat{fill:var(--amber);filter:drop-shadow(0 0 6px var(--amber))}
.ir-node circle{fill:#0d121a;stroke:rgba(255,255,255,.16);stroke-width:1.2;transition:fill .4s,stroke .4s}
.ir-node text{font:500 11px var(--f-mono);fill:var(--muted);text-anchor:middle;transition:fill .4s}
.ir-node .num{font:600 13px var(--f-display);fill:var(--muted)}
.ir-node.on circle{fill:rgba(242,165,65,.14);stroke:var(--amber)}
.ir-node.on text{fill:var(--text)}
.ir-node.on .num{fill:var(--amber)}
.ir-center-n{font:700 44px var(--f-display);fill:var(--text);text-anchor:middle;letter-spacing:-.04em}
.ir-center-t{font:500 13px var(--f-mono);fill:var(--amber);text-anchor:middle;text-transform:uppercase;letter-spacing:.12em}
.ir-desc{text-align:center;color:var(--muted);max-width:380px;min-height:4.8em;padding:6px 10px 10px;transition:opacity .3s}
.ir-desc.fade{opacity:0}
.soc{margin-top:18px;padding:0}
.soc .panel-head{padding:14px 18px;margin:0;flex-wrap:wrap}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:9px;animation:blink 1.2s steps(1) infinite}
.soc-tally{color:var(--muted)}
.soc-tally b{font-weight:500}
.soc-log{height:250px;overflow:hidden;padding:14px 18px;font-size:12.5px;line-height:1.85;color:var(--muted);mask-image:linear-gradient(transparent,#000 22%);-webkit-mask-image:linear-gradient(transparent,#000 22%);display:flex;flex-direction:column;justify-content:flex-end}
.soc-log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:bootIn .4s var(--ease) both}
.soc-log .t{color:var(--dim)}
.tag{display:inline-block;width:62px}
.tag.allow{color:var(--green)}.tag.drop{color:var(--red)}.tag.info{color:var(--teal)}.tag.warn{color:var(--amber)}
.sec-cards{display:grid;gap:14px;margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mini{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:border-color .3s,transform .5s var(--ease)}
.mini:hover{border-color:rgba(242,165,65,.4);transform:translateY(-4px)}
.mini span{color:var(--amber)}
.mini h4{font-size:19px;margin:14px 0 8px}
.mini p{color:var(--muted);font-size:14.5px}

/* hardware */
.hw-grid{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.hw-grid{grid-template-columns:1.25fr 1fr;gap:64px}}
.board{position:relative}
#pcb{width:100%}
.pcb-base{fill:#0a1013;stroke:rgba(79,209,197,.22);stroke-width:1.5}
.trace{fill:none;stroke:rgba(79,209,197,.28);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trace-lit{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:18 340;animation:current linear infinite;filter:drop-shadow(0 0 4px var(--teal))}
.trace-lit.amb{stroke:var(--amber);filter:drop-shadow(0 0 4px var(--amber))}
@keyframes current{from{stroke-dashoffset:358}to{stroke-dashoffset:0}}
.pad{fill:#0a1013;stroke:rgba(242,165,65,.7);stroke-width:1.5}
.via{fill:rgba(79,209,197,.6)}
.part rect{fill:#141b24;stroke:rgba(255,255,255,.2);stroke-width:1}
.part text{font:10px var(--f-mono);fill:var(--muted)}
.part.bad rect{stroke:var(--red);animation:faultBlink 1.4s steps(1) infinite}
@keyframes faultBlink{50%{stroke:rgba(255,94,91,.25)}}
.chip-body{stroke:rgba(255,255,255,.2)}
.chip-die{fill:none;stroke:rgba(242,165,65,.35);stroke-dasharray:3 5}
.chip-t{font:700 22px var(--f-display);fill:var(--text);text-anchor:middle;letter-spacing:.06em}
.chip-s{font:10px var(--f-mono);fill:var(--muted);text-anchor:middle}
.chip-pin1{fill:var(--amber)}
.probe-ring{fill:rgba(255,94,91,.08);stroke:var(--red);stroke-width:1.5}
.probe-tip{fill:var(--red)}
.probe{transition:transform 1.2s var(--ease)}
.readouts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.readouts span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted)}
.readouts i{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.readouts b{font-weight:500}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.steps li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps li>span{color:var(--amber);padding-top:4px;min-width:24px}
.steps h4{font-size:20px;margin-bottom:5px}
.steps p{color:var(--muted);font-size:15px}

/* skills */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.comp{background:var(--bg);padding:22px 20px;display:flex;gap:16px;align-items:baseline;font:500 16.5px/1.35 var(--f-display);transition:background .35s,color .35s;position:relative}
.comp span{color:var(--dim);font-size:12px;transition:color .35s}
.comp:hover{background:var(--panel-2)}
.comp:hover span{color:var(--amber)}
.tech{margin-top:56px;display:grid;gap:4px}
.tech-row{display:grid;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.tech-row{grid-template-columns:220px 1fr;align-items:center}}
.tech-row h4{color:var(--teal);font-weight:500;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--text);transition:border-color .3s,background .3s,color .3s}
.chips span:hover{border-color:var(--amber);color:var(--amber);background:rgba(242,165,65,.06)}
.marquee{margin-top:90px;overflow:hidden;border-block:1px solid var(--line);padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font:700 clamp(40px,7vw,92px)/1 var(--f-display);letter-spacing:-.04em;padding:0 .45em;color:transparent;-webkit-text-stroke:1px rgba(232,235,240,.35);transition:color .3s,-webkit-text-stroke-color .3s}
.marquee-track span:nth-child(3n+1){color:var(--text);-webkit-text-stroke:0}
.marquee-track span:hover{color:var(--amber);-webkit-text-stroke-color:var(--amber)}
@keyframes marq{to{transform:translateX(-50%)}}

/* contact */
.contact-grid{display:grid;gap:50px}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1fr;gap:80px}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-list li{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:16px}
.contact-list a{word-break:break-all;background:linear-gradient(var(--amber),var(--amber)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.contact-list a:hover{background-size:100% 1px;color:var(--amber)}
.copy{font:12px var(--f-mono);color:var(--muted);border:1px solid var(--line-2);border-radius:8px;padding:5px 10px;transition:color .25s,border-color .25s}
.copy:hover{color:var(--amber);border-color:var(--amber)}
.arrow{color:var(--muted)}
@media (max-width:480px){.contact-list li{grid-template-columns:1fr auto}.contact-list li>span:first-child{grid-column:1/-1}}

.footer{border-top:1px solid var(--line);padding:30px 0 calc(30px + env(safe-area-inset-bottom))}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted)}
.to-top:hover{color:var(--amber)}

.toast{position:fixed;left:50%;bottom:28px;z-index:160;transform:translate(-50%,20px);opacity:0;padding:11px 18px;border-radius:10px;background:var(--text);color:var(--bg);font-size:13px;transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee-track{animation:none}
}

@media (max-width:959px){
  .osi-grid{padding:76px 0 24px;gap:22px;align-content:center}
  .osi-left>.dim{font-size:14.5px;margin-bottom:16px}
  .osi-stack{grid-template-columns:repeat(7,1fr);gap:4px}
  .osi-stack li{flex-direction:column;gap:0;padding:8px 0;font-size:0;justify-content:center}
  .osi-stack li span{font-size:12px;width:auto}
  .osi-stack li.cur{transform:translateY(-4px)}
  .osi-screen{min-height:290px}
  .osi-top{margin-bottom:22px}
}
.readouts span{transition:border-color .3s,color .3s}
.readouts span.act{border-color:rgba(242,165,65,.6);color:var(--text)}
.part.fixed rect{stroke:var(--green)}