/* ===================== styles.css ===================== */

  :root{
    --bg:#0c0c0c;
    --panel:#141414;
    --ink:#f1efe9;
    --dim:#9a968c;
    --line:#262626;
    --accent:#d4ff3f;
    --accent-dim:rgba(212,255,63,.14);
    --red:#ff5a48;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Archivo',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent);color:#0c0c0c}
  a{color:inherit;text-decoration:none}
  .mono{font-family:'JetBrains Mono',monospace}

  /* ---------- grain + atmosphere ---------- */
  body::before{
    content:"";position:fixed;inset:-50%;z-index:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.05;animation:grain 8s steps(10) infinite;
  }
  @keyframes grain{
    0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,4%)}
    30%{transform:translate(6%,-14%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-12%,7%)}
    60%{transform:translate(11%,0)}70%{transform:translate(0,10%)}80%{transform:translate(3%,13%)}90%{transform:translate(-9%,5%)}
  }

  /* ---------- nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 40px;
    background:linear-gradient(to bottom,rgba(12,12,12,.92),rgba(12,12,12,0));
    backdrop-filter:blur(2px);
  }
  .nav-logo{
    font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.04em;
    display:flex;align-items:center;gap:10px;
  }
  .nav-logo .dot{width:9px;height:9px;background:var(--accent);border-radius:50%;display:inline-block}
  .nav-links{display:flex;gap:28px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em}
  .nav-links a{color:var(--dim);transition:color .2s}
  .nav-links a:hover{color:var(--accent)}

  /* ---------- hero ---------- */
  header{
    position:relative;padding:120px 40px 0;
  }
  .hero-meta{
    display:flex;justify-content:space-between;flex-wrap:wrap;
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);
    letter-spacing:.1em;padding-bottom:22px;border-bottom:1px solid var(--line);
  }
  h1.hero-title{
    font-family:'Anton',sans-serif;
    font-size:clamp(64px,15vw,210px);
    line-height:.88;letter-spacing:-.01em;text-transform:uppercase;
    padding:30px 0 34px;
  }
  h1.hero-title .outline{
    color:transparent;-webkit-text-stroke:2px var(--accent);
  }
  .hero-sub{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:48px;gap:30px;flex-wrap:wrap;
  }
  .hero-sub p{
    max-width:520px;color:var(--dim);font-size:15px;line-height:1.65;
  }
  .hero-sub p b{color:var(--ink);font-weight:600}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;
    border:1px solid var(--accent);padding:14px 26px;color:var(--accent);
    transition:.25s;white-space:nowrap;
  }
  .btn:hover{background:var(--accent);color:#0c0c0c}

  /* ---------- marquee ---------- */
  .marquee{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;padding:16px 0;background:var(--panel);position:relative;z-index:2;
  }
  .marquee-track{display:flex;width:max-content;animation:scrollx 28s linear infinite}
  .marquee-track span{
    font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;
    letter-spacing:.03em;padding:0 26px;white-space:nowrap;color:var(--ink);
    display:flex;align-items:center;gap:52px;
  }
  .marquee-track span::after{content:"✦";color:var(--accent);font-size:18px}
  @keyframes scrollx{to{transform:translateX(-50%)}}

  /* ---------- section shell ---------- */
  section{position:relative;padding:92px 40px;max-width:1440px;margin:0 auto}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:52px;gap:24px;flex-wrap:wrap}
  .sec-head h2{
    font-family:'Anton',sans-serif;font-size:clamp(38px,6vw,84px);
    text-transform:uppercase;line-height:1;
  }
  .sec-head .tag{
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);letter-spacing:.15em;
  }

  /* ---------- about ---------- */
  #about{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:70px;align-items:start}
  .id-card{
    border:1px solid var(--line);background:var(--panel);position:relative;
  }
  .id-card::before{
    content:"ID//2026";position:absolute;top:-12px;left:18px;
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
    background:var(--bg);padding:0 8px;letter-spacing:.15em;z-index:2;
  }
  .avatar{
    aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--line);position:relative;
  }
  .avatar img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(35%) contrast(1.06);
    transition:filter .5s ease, transform .6s ease;
  }
  .avatar:hover img{filter:grayscale(0%) contrast(1);transform:scale(1.03)}
  .avatar::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(160deg,rgba(212,255,63,.12),transparent 45%);
    pointer-events:none;
  }
  .id-rows{font-family:'JetBrains Mono',monospace;font-size:12.5px}
  .id-rows div{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
  .id-rows div:last-child{border-bottom:none}
  .id-rows dt{color:var(--dim)}
  .id-rows dd{text-align:right}
  .bio-copy p{
    color:var(--dim);font-size:17px;line-height:1.75;margin-bottom:26px;max-width:640px;
  }
  .bio-copy p b, .bio-copy p strong{color:var(--ink);font-weight:600}

  /* ---------- filmstrip ---------- */
  .filmstrip{
    margin-top:44px;border:1px solid var(--line);position:relative;overflow:hidden;
    background:var(--panel);
  }
  .filmstrip::before,.filmstrip::after{
    content:"";position:absolute;left:0;right:0;height:14px;z-index:2;
    background-image:radial-gradient(circle, var(--bg) 3.5px, transparent 4px);
    background-size:22px 14px;background-position:center;background-repeat:repeat-x;
  }
  .filmstrip::before{top:0}
  .filmstrip::after{bottom:0}
  .filmstrip img{
    display:block;width:100%;height:auto;max-height:340px;object-fit:cover;
    filter:grayscale(60%) contrast(1.05) brightness(.92);
    transition:filter .5s ease;
  }
  .filmstrip:hover img{filter:grayscale(10%) contrast(1) brightness(1)}
  .filmstrip .cap{
    position:absolute;bottom:18px;left:18px;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
    background:rgba(12,12,12,.82);padding:5px 10px;letter-spacing:.15em;
  }
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
  .stat{background:var(--bg);padding:26px 22px}
  .stat b{display:block;font-family:'Anton',sans-serif;font-size:42px;color:var(--accent)}
  .stat i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.12em}

  /* ---------- services / arsenal ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .svc{
    background:var(--bg);padding:36px 28px 32px;transition:background .3s;position:relative;overflow:hidden;
  }
  .svc:hover{background:var(--panel)}
  .svc .num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.2em}
  .svc h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;margin:16px 0 20px;letter-spacing:.02em}
  .svc ul{list-style:none}
  .svc li{
    font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);
    padding:7px 0;border-top:1px dashed var(--line);transition:.2s;
  }
  .svc li:hover{color:var(--accent);padding-left:6px}
  .svc li::before{content:"→ ";color:var(--accent)}

  /* ---------- work ---------- */
  .work-list{border-top:1px solid var(--line)}
  .work-item{
    display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:28px;
    padding:30px 8px;border-bottom:1px solid var(--line);transition:.25s;position:relative;
  }
  .work-item:hover{background:var(--panel);padding-left:22px}
  .work-item .idx{font-family:'JetBrains Mono',monospace;color:var(--dim);font-size:13px}
  .work-item h3{
    font-family:'Anton',sans-serif;font-size:clamp(24px,4vw,44px);text-transform:uppercase;
    transition:color .25s;letter-spacing:.01em;
  }
  .work-item:hover h3{color:var(--accent)}
  .work-item .desc{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin-top:6px}
  .work-item .arrow{font-size:26px;color:var(--dim);transition:.25s}
  .work-item:hover .arrow{color:var(--accent);transform:translateX(8px)}

  /* ---------- credentials ---------- */
  #creds .cred-flow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:70px}
  .chip{
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.05em;
    border:1px solid var(--line);padding:10px 18px;color:var(--dim);transition:.2s;
  }
  .chip:hover{border-color:var(--accent);color:var(--accent)}
  .chip.hot{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
  .tstm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .tstm{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column;gap:22px}
  .tstm blockquote{font-size:15px;line-height:1.7;color:var(--ink)}
  .tstm blockquote::before{content:"“";color:var(--accent);font-size:30px;line-height:0;vertical-align:-8px;margin-right:4px}
  .tstm footer{display:flex;align-items:center;gap:14px}
  .tstm .fa{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:15px;color:#0c0c0c}
  .tstm .who b{display:block;font-size:14px}
  .tstm .who i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)}

  /* ---------- blog ---------- */
  .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
  article.post{
    border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:16px;
    transition:.25s;background:var(--bg);
  }
  article.post:hover{border-color:var(--accent);transform:translateY(-4px)}
  article.post time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.15em}
  article.post h3{font-size:21px;font-weight:700;line-height:1.35}
  article.post p{color:var(--dim);font-size:14px;line-height:1.65}
  article.post .read{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin-top:auto;transition:.2s}
  article.post:hover .read{color:var(--accent)}

  /* ---------- contact ---------- */
  #contact{max-width:none}
  .contact-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .contact-left h2{
    font-family:'Anton',sans-serif;font-size:clamp(54px,9vw,130px);
    text-transform:uppercase;line-height:.95;
  }
  .contact-left h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--accent)}
  .contact-left p{color:var(--dim);margin-top:26px;max-width:420px;line-height:1.7}
  form{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .field{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding:20px 0}
  .field label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.15em;margin-bottom:10px}
  .field input,.field textarea{
    background:transparent;border:none;outline:none;color:var(--ink);
    font-family:'Archivo',sans-serif;font-size:16px;resize:vertical;
  }
  .field textarea{min-height:96px}
  form button{
    margin-top:30px;align-self:flex-start;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;
    background:var(--accent);color:#0c0c0c;border:none;padding:16px 34px;transition:.25s;
  }
  form button:hover{background:var(--ink)}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);margin-top:60px;padding:70px 40px 40px;
    position:relative;
  }
  .foot-giant{
    font-family:'Anton',sans-serif;font-size:clamp(60px,14vw,210px);text-transform:uppercase;
    line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--line);
    user-select:none;text-align:center;
  }
  .foot-cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-top:60px}
  .foot-cols h3{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.2em;margin-bottom:16px}
  .foot-cols a{display:block;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--dim);padding:4px 0;transition:.2s}
  .foot-cols a:hover{color:var(--accent)}
  .foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:24px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.1em}

  /* ---------- reveal on scroll ---------- */
  html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
  html.js .reveal.in{opacity:1;transform:none}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    nav{padding:16px 22px}
    .nav-links{display:none}
    header,section,footer{padding-left:22px;padding-right:22px}
    #about,.contact-inner{grid-template-columns:1fr;gap:50px}
    .hero-sub{flex-direction:column;align-items:flex-start}
    .scroll-hint{display:none}
    .work-item{grid-template-columns:1fr;gap:8px}
    .work-item .idx{order:-1}
    .work-item .arrow{display:none}
    .stats-band{grid-template-columns:1fr 1fr}
    .stat:nth-child(2n){border-right:none}
    .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .quote-band{padding:90px 22px}
    .quote-band .qmark{font-size:110px}
  }

  /* ---------- image loading placeholders ---------- */
  .avatar img,.filmstrip img{background:#181818}

  /* ---------- inner pages: article layout ---------- */
  .page-hero{max-width:1440px;margin:0 auto;padding:150px 40px 34px}
  .kicker{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.2em}
  .article-title{
    font-family:'Anton',sans-serif;font-size:clamp(42px,7vw,96px);
    text-transform:uppercase;line-height:.95;margin:20px 0 26px;
  }
  .meta-row{display:flex;flex-wrap:wrap;gap:14px 26px;font-family:'JetBrains Mono',monospace;
    font-size:12px;color:var(--dim);letter-spacing:.08em;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:14px}
  .meta-row b{color:var(--accent);font-weight:500}
  .back-link{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
    font-size:12px;color:var(--dim);letter-spacing:.12em;transition:.2s;margin-bottom:6px}
  .back-link:hover{color:var(--accent)}
  .prose{max-width:820px;margin:0 auto;padding:26px 40px 40px;font-size:17px;line-height:1.85;color:#cfccc3}
  .prose p{margin:22px 0}
  .prose strong{color:var(--ink)}
  .prose a{color:var(--accent);border-bottom:1px solid var(--accent-dim)}
  .prose h2{font-family:'Anton',sans-serif;font-size:30px;color:var(--ink);
    text-transform:uppercase;letter-spacing:.02em;margin:54px 0 16px}
  .prose h3{font-size:20px;color:var(--ink);margin:38px 0 12px;font-weight:700}
  .prose ul{margin:18px 0 18px 24px}
  .prose li{margin:10px 0}
  .prose li::marker{color:var(--accent)}
  .prose code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:#181818;
    border:1px solid var(--line);padding:2px 7px;color:var(--accent);white-space:nowrap}
  .prose pre{background:#121212;border:1px solid var(--line);padding:20px 22px;overflow-x:auto;margin:26px 0}
  .prose pre code{border:none;background:none;padding:0;white-space:pre;color:#d8d5cc;line-height:1.7}
  .callout{border-left:2px solid var(--accent);background:var(--panel);padding:16px 22px;
    margin:30px 0;font-size:15px;color:var(--dim)}
  .callout b{color:var(--accent)}
  .post-nav{max-width:820px;margin:0 auto;padding:10px 40px 90px;display:flex;gap:16px}
  .post-nav a{flex:1;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);
    border:1px solid var(--line);padding:16px 18px;transition:.2s;line-height:1.5}
  .post-nav a:hover{border-color:var(--accent);color:var(--accent)}
  .post-nav a i{display:block;font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.15em;margin-bottom:6px}
  .card-list{max-width:1440px;margin:0 auto;padding:10px 40px 90px;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}

  /* ---------- stats band (fuel-style counters) ---------- */
  .stats-band{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--panel);
  }
  .stat{
    padding:44px 30px;text-align:left;border-right:1px solid var(--line);
    position:relative;overflow:hidden;
  }
  .stat:last-child{border-right:none}
  .stat b{
    display:block;font-family:'Anton',sans-serif;font-size:clamp(40px,5.5vw,84px);
    line-height:1;color:var(--ink);
  }
  .stat b em{font-style:normal;color:var(--accent)}
  .stat span{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
    color:var(--dim);display:block;margin-top:12px;text-transform:uppercase;
  }
  .stat::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:var(--accent);transform:scaleX(0);transform-origin:0 0;
    transition:transform .8s cubic-bezier(.2,.7,.2,1) .2s;
  }
  .stat.in::after{transform:scaleX(1)}

  /* ---------- pull-quote interstitial (fuel-style) ---------- */
  .quote-band{
    padding:130px 40px;max-width:1200px;margin:0 auto;
    text-align:center;position:relative;
  }
  .quote-band .qmark{
    font-family:'Anton',sans-serif;font-size:150px;line-height:.4;
    color:var(--accent);display:block;margin-bottom:8px;
  }
  .quote-band blockquote{
    font-family:'Anton',sans-serif;font-size:clamp(28px,4.6vw,62px);
    line-height:1.08;text-transform:uppercase;letter-spacing:.01em;
  }
  .quote-band blockquote em{
    font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--accent);
  }
  .quote-band cite{
    display:block;margin-top:26px;font-family:'JetBrains Mono',monospace;
    font-size:12px;letter-spacing:.22em;color:var(--dim);font-style:normal;
  }

  /* ---------- tools wall (vertical-style) ---------- */
  .tools-wall{margin-top:64px}
  .tools-label{
    text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.35em;color:var(--dim);margin-bottom:24px;
  }
  .tool-row{
    display:flex;width:max-content;gap:14px;padding:7px 0;
    animation:toolscroll 36s linear infinite;
  }
  .tool-row.rev{animation-direction:reverse;animation-duration:44s}
  .tools-wall:hover .tool-row{animation-play-state:paused}
  @keyframes toolscroll{to{transform:translateX(-50%)}}
  .tool-chip{
    font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;
    color:var(--dim);border:1px solid var(--line);padding:12px 22px;
    white-space:nowrap;background:var(--bg);transition:.25s;
  }
  .tool-chip:hover{color:#0c0c0c;background:var(--accent);border-color:var(--accent)}

  /* ============================================================
     MOTION ENGINE — the page responds to everything
     ============================================================ */

  /* ---------- scroll velocity skew (whole page flexes) ---------- */
  #skew-wrap{will-change:transform}
  @media (prefers-reduced-motion: reduce){#skew-wrap{transform:none!important}}

  /* ---------- parallax layers ---------- */
  [data-parallax]{will-change:transform;transition:transform .1s linear}
  .hero-title[data-parallax]{transition:none}

  /* ---------- stagger choreography: children cascade in ---------- */
  html.js .stagger > *{
    opacity:0;transform:translateY(34px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d,0s);
  }
  html.js .stagger.in > *{opacity:1;transform:none}

  /* ---------- magnetic buttons ---------- */
  .btn,.btn-line{position:relative;will-change:transform}
  .btn::after,.btn-line::after{
    content:"";position:absolute;inset:0;background:var(--accent);
    transform:scaleX(0);transform-origin:right;z-index:-1;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .btn-line:hover::after{transform:scaleX(1);transform-origin:left}
  .btn-line:hover{color:#0c0c0c;border-color:var(--accent)}

  /* ---------- 3D tilt cards with light glare ---------- */
  [data-tilt]{
    transform-style:preserve-3d;will-change:transform;
    transition:box-shadow .3s;
  }
  [data-tilt]::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),
      rgba(212,255,63,.13),transparent 45%);
    opacity:0;transition:opacity .35s;
  }
  [data-tilt]:hover::before{opacity:1}
  .post,[data-tilt]{position:relative;overflow:hidden}

  /* work items slide on hover */
  .work-item h3,.work-item .desc{transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .work-item:hover h3{transform:translateX(14px)}
  .work-item:hover .desc{transform:translateX(8px)}
  .work-item .arrow{transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .work-item:hover .arrow{transform:translate(6px,-6px) scale(1.25)}

  /* svc cards lift + border ignite */
  .svc{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s}
  .svc:hover{transform:translateY(-8px);border-color:var(--accent)}
  .svc .num{transition:color .3s,text-shadow .3s}
  .svc:hover .num{color:var(--accent);text-shadow:0 0 18px rgba(212,255,63,.6)}

  /* chips pop */
  .chip{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,border-color .25s}
  .chip:hover{transform:translateY(-5px) rotate(-1.5deg)}
  .chip.hot:hover{background:var(--accent);color:#0c0c0c;border-color:var(--accent)}

  /* testimonial hover */
  .tstm{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s}
  .tstm:hover{transform:translateY(-6px);border-color:rgba(212,255,63,.4)}

  /* avatar reveal motion */
  .avatar{overflow:hidden}
  .avatar img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
  .id-card:hover .avatar img{transform:scale(1.06)}

  /* filmstrip drift */
  .filmstrip{overflow:hidden}
  .filmstrip img{transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
  .filmstrip:hover img{transform:scale(1.04) translateX(-8px)}

  /* section heads: rule draws itself in */
  .sec-head{position:relative}
  .sec-head::after{
    content:"";position:absolute;left:0;bottom:-14px;height:1px;width:min(320px,40%);
    background:linear-gradient(90deg,var(--accent),transparent);
    transform:scaleX(0);transform-origin:0 0;transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;
  }
  .sec-head.in::after{transform:scaleX(1)}

  /* footer giant text tracks mouse slightly */
  .foot-giant{will-change:transform}

  /* ============================================================
     DEEP FX — watermarks · rgb glitch · clip reveals · clock
     ============================================================ */

  /* ---------- giant section watermarks (parallax) ---------- */
  section{position:relative}
  .wm{
    position:absolute;top:30px;right:-6px;z-index:0;pointer-events:none;
    font-family:'Anton',sans-serif;font-size:clamp(90px,14vw,230px);
    line-height:1;color:transparent;-webkit-text-stroke:1px rgba(241,239,233,.07);
    user-select:none;
  }
  #about .sec-head,#arsenal .sec-head,#ops .sec-head,#creds .sec-head,
  #intel .sec-head,#contact .contact-inner{position:relative;z-index:1}

  /* ---------- live status dot + clock ---------- */
  .live{display:inline-flex;align-items:center;gap:8px}
  .live i{
    width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 10px var(--accent);animation:pulseDot 2s ease-in-out infinite;
  }
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
  .live b{color:var(--accent);font-weight:500}

  /* ---------- RGB-split glitch on hover ---------- */
  @keyframes glitchA{0%,88%,100%{clip-path:inset(0 0 92% 0);transform:translate(-3px,-2px)}
    90%{clip-path:inset(28% 0 55% 0);transform:translate(4px,1px)}
    93%{clip-path:inset(62% 0 20% 0);transform:translate(-5px,2px)}
    96%{clip-path:inset(10% 0 78% 0);transform:translate(3px,-1px)}}
  @keyframes glitchB{0%,86%,100%{clip-path:inset(85% 0 4% 0);transform:translate(3px,2px)}
    89%{clip-path:inset(15% 0 70% 0);transform:translate(-4px,-1px)}
    94%{clip-path:inset(50% 0 35% 0);transform:translate(5px,-2px)}}
  h1.hero-title{position:relative}
  h1.hero-title:hover .glitch::before,
  h1.hero-title:hover .glitch::after{
    content:attr(data-text);position:absolute;left:0;top:0;width:100%;
    overflow:hidden;
  }
  h1.hero-title:hover .glitch::before{color:var(--red);-webkit-text-stroke:0;z-index:-1;animation:glitchA 1.1s steps(2) infinite}
  h1.hero-title:hover .glitch::after{color:#37cfff;-webkit-text-stroke:0;z-index:-2;animation:glitchB 1.3s steps(2) infinite}

  /* ---------- clip-path image reveal ---------- */
  html.js .clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
  html.js .clip-reveal.in{clip-path:inset(0 0 0% 0)}

  /* ---------- card shine sweep ---------- */
  .svc::before,.tstm::before{
    content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
    background:linear-gradient(105deg,transparent,rgba(241,239,233,.06),transparent);
    transform:skewX(-18deg);transition:left .7s ease;pointer-events:none;z-index:1;
  }
  .svc:hover::before,.tstm:hover::before{left:130%}

  /* ---------- back-to-top ring ---------- */
  #toTop{
    position:fixed;right:26px;bottom:26px;z-index:150;width:52px;height:52px;
    display:none;align-items:center;justify-content:center;
  }
  #toTop.vis{display:flex}
  #toTop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
  #toTop circle{fill:none;stroke-width:2}
  #toTop .ring-bg{stroke:var(--line)}
  #toTop .ring-fg{stroke:var(--accent);stroke-dasharray:131.9;stroke-dashoffset:131.9}
  #toTop span{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ink)}
  #toTop:hover span{color:var(--accent)}

  /* ---------- page transition wipe ---------- */
  #wipe{
    position:fixed;inset:0;z-index:9000;background:var(--accent);
    transform:scaleY(0);transform-origin:bottom;pointer-events:none;
  }
  #wipe.out{transform-origin:top;transition:transform .55s cubic-bezier(.76,0,.24,1);transform:scaleY(0)}
  #wipe.in{transform-origin:bottom;transition:transform .5s cubic-bezier(.76,0,.24,1)}

  /* ---------- matrix rain canvas (root mode) ---------- */
  #matrix{position:fixed;inset:0;z-index:240;pointer-events:none;opacity:0;transition:opacity .6s}
  html.root #matrix{opacity:.16}

  /* ============================================================
     SCROLLYTELLING — THE BREACH (pinned intrusion scene)
     ============================================================ */
  .scene{position:relative;height:430vh}
  .scene-pin{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:#080808;
  }
  /* infinite grid that dives toward you */
  .gridzoom{
    position:absolute;inset:-60%;
    background-image:
      linear-gradient(rgba(212,255,63,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(212,255,63,.05) 1px,transparent 1px);
    background-size:64px 64px;
    transform:perspective(700px) rotateX(58deg) scale(var(--gz,1)) translateY(var(--gy,0));
    transform-origin:50% 100%;
  }
  .breach-stage{
    position:relative;z-index:2;width:min(1200px,92vw);
    display:grid;grid-template-columns:1.35fr .65fr;gap:40px;
    align-items:end;
  }
  .term{
    background:rgba(10,10,10,.88);border:1px solid var(--line);
    box-shadow:0 30px 90px rgba(0,0,0,.7);backdrop-filter:blur(3px);
    transform:translateY(30px);opacity:.96;
  }
  .term-bar{
    display:flex;align-items:center;gap:8px;padding:11px 14px;
    border-bottom:1px solid var(--line);background:#111;
  }
  .term-bar i{width:10px;height:10px;border-radius:50%;background:#2c2c2c}
  .term-bar i:nth-child(1){background:#ff5a48}
  .term-bar span{
    margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.12em;color:var(--dim);
  }
  .term-body{padding:22px 24px 26px;font-family:'JetBrains Mono',monospace}
  [data-line]{
    font-size:clamp(12px,1.4vw,15.5px);margin:9px 0;color:var(--ink);
    opacity:0;transform:translateY(10px);
    transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  [data-line].on{opacity:1;transform:none}
  [data-line] .prompt{color:var(--accent)}
  [data-line].out{color:var(--dim)}
  [data-line].out.ok{color:var(--accent)}
  [data-line].big{font-size:clamp(14px,1.7vw,19px)}
  [data-line].root-line{
    color:#0c0c0c;background:var(--red);display:inline-block;
    padding:6px 12px;margin-top:12px;font-weight:700;letter-spacing:.06em;
    opacity:0;transform:translateY(10px) scale(.92);
    transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  [data-line].root-line.on{opacity:1;transform:none}

  .depth-hud{
    border-left:1px solid var(--line);padding-left:26px;
    font-family:'JetBrains Mono',monospace;display:flex;flex-direction:column;gap:10px;
  }
  .depth-hud span{font-size:11px;letter-spacing:.25em;color:var(--dim)}
  .depth-hud b{font-family:'Anton',sans-serif;font-size:clamp(44px,6vw,86px);line-height:1;color:var(--accent)}
  .depth-bar{height:3px;background:var(--line);width:100%}
  .depth-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
  .depth-hud em{
    font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--dim);
    border:1px dashed var(--line);padding:8px 10px;margin-top:8px;
  }

  .breach-title{
    position:absolute;left:0;right:0;bottom:9vh;z-index:3;text-align:center;
    font-family:'Anton',sans-serif;
    font-size:clamp(30px,4.5vw,74px);line-height:1.02;text-transform:uppercase;
    pointer-events:none;opacity:0;transform:translateY(46px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
  }
  .breach-title span{color:var(--accent)}
  .breach-title.on{opacity:1;transform:none}

  .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}

  @media(max-width:900px){
    .scene{height:360vh}
    .breach-stage{grid-template-columns:1fr;gap:20px;align-items:start}
    .depth-hud{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:18px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
    .depth-hud b{font-size:38px}
    .depth-bar{width:110px}
    .depth-hud em{display:none}
    [data-line]{white-space:normal}
  }

  /* ---------- mission HUD rail ---------- */
  #rail{
    position:fixed;left:22px;top:50%;transform:translateY(-50%);
    z-index:160;display:flex;gap:14px;align-items:center;
  }
  .rail-track{width:2px;height:230px;background:var(--line);position:relative}
  #railFill{
    position:absolute;top:0;left:0;width:100%;height:0%;
    background:var(--accent);box-shadow:0 0 10px var(--accent);
  }
  #rail ul{list-style:none;display:flex;flex-direction:column;gap:13px;padding:0;margin:0}
  #rail li{
    display:flex;align-items:center;gap:9px;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
    color:var(--dim);transition:color .25s;
  }
  #rail li b{font-size:10px;color:var(--line);transition:color .25s,text-shadow .25s;line-height:1}
  #rail li:hover,#rail li.active{color:var(--ink)}
  #rail li.active b{color:var(--accent);text-shadow:0 0 8px var(--accent)}
  @media(max-width:1180px){#rail ul li span{display:none}}
  @media(max-width:900px){#rail{display:none}}

  /* ---------- red alert pulse (breach moment) ---------- */
  .red-alert{animation:redPulse .5s ease-in-out infinite}
  @keyframes redPulse{0%,100%{color:var(--ink)}50%{color:var(--red);text-shadow:0 0 12px rgba(255,90,72,.8)}}

  /* ============================================================
     MAXIMUM COOL — particles · flip card · konami · sfx · 404
     ============================================================ */

  /* ---------- hero particle network ---------- */
  #particles{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:.85}
  header#top .hero-meta,h1.hero-title,.hero-sub{position:relative;z-index:1}

  /* ---------- flippable ID card ---------- */
  .flip-unit{perspective:1600px}
  .flip-inner{
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.3,.9,.3,1);
  }
  .flip-unit.flipped .flip-inner{transform:rotateY(180deg)}
  .face{
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;flex-direction:column;
  }
  .face.back{
    position:absolute;inset:0;transform:rotateY(180deg);
    background:var(--panel);border:1px solid var(--line);
    padding:0 26px 24px;overflow:hidden;
  }
  .magstripe{height:44px;background:#0a0a0a;border-bottom:1px solid var(--line);margin:18px -26px 22px}
  .back-code{
    font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:2;
    color:var(--accent);white-space:pre-wrap;margin:0;
  }
  .barcode{
    height:52px;margin-top:auto;
    background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,
      var(--ink) 5px 6px,transparent 6px 11px);
    opacity:.75;
  }
  .back-note{
    margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.14em;color:var(--dim);line-height:1.7;
  }
  .flip-hint{
    display:block;margin-top:16px;font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.25em;color:var(--dim);
    animation:hintPulse 2.6s ease-in-out infinite;
  }
  @keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:1}}
  .id-card:hover .flip-hint{color:var(--accent)}

  /* ---------- sound toggle ---------- */
  #sfx-toggle{
    position:fixed;left:26px;bottom:26px;z-index:150;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
    color:var(--dim);background:rgba(12,12,12,.8);border:1px solid var(--line);
    padding:10px 14px;transition:.25s;backdrop-filter:blur(4px);
  }
  #sfx-toggle:hover{color:var(--accent);border-color:var(--accent)}
  #sfx-toggle.on{color:#0c0c0c;background:var(--accent);border-color:var(--accent)}

  /* ---------- konami takeover ---------- */
  #pwned{
    position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;
    background:rgba(5,5,5,.94);text-align:center;padding:20px;flex-direction:column;gap:18px;
  }
  #pwned.show{display:flex}
  #pwned h2{
    font-family:'Anton',sans-serif;font-size:clamp(48px,11vw,170px);
    line-height:.9;color:var(--red);
    text-shadow:6px 0 0 rgba(55,207,255,.55),-6px 0 0 rgba(212,255,63,.45);
    animation:pwnShake .4s linear infinite;
  }
  @keyframes pwnShake{0%{transform:translate(0)}25%{transform:translate(-3px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,-1px)}}
  #pwned p{font-family:'JetBrains Mono',monospace;color:var(--ink);letter-spacing:.2em;font-size:13px}
  #pwned small{font-family:'JetBrains Mono',monospace;color:var(--dim);letter-spacing:.12em}

  /* ---------- achievement toast ---------- */
  #achv{
    position:fixed;top:74px;right:-400px;z-index:9500;width:300px;
    background:var(--panel);border:1px solid var(--accent);
    padding:16px 18px;transition:right .5s cubic-bezier(.22,1,.36,1);
  }
  #achv.show{right:26px}
  #achv b{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.2em;display:block}
  #achv span{font-size:13px;color:var(--ink)}

  /* ---------- 404 page ---------- */
  .nf-hero{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
  .nf-code{
    font-family:'Anton',sans-serif;font-size:clamp(120px,28vw,380px);line-height:.85;
    color:transparent;-webkit-text-stroke:2px var(--accent);
    text-shadow:none;animation:nfFlicker 3.5s infinite;
  }
  @keyframes nfFlicker{
    0%,91%,94.5%,100%{opacity:1}
    92%{opacity:.35}93%{opacity:.85}94%{opacity:.5}
    95%{opacity:1}97%{opacity:.6}98%{opacity:1}
  }
  .nf-sub{font-family:'JetBrains Mono',monospace;color:var(--dim);font-size:13px;letter-spacing:.18em}
  .nf-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;justify-content:center}

  /* ======== ENHANCED BREACH VISUALS ======== */
  .matrix-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.92);
    display:flex;align-items:center;justify-content:center;
    transform:scale(0);transform-origin:center;opacity:0;
    transition:all 0.8s cubic-bezier(.34,1.56,.64,1);
    z-index:100;
  }
  .matrix-overlay.show{
    transform:scale(1);opacity:1;
    animation:matrixFlicker 2s ease-in-out infinite alternate;
  }
  .matrix-core{
    display:flex;flex-direction:column;gap:20px;
    font-family:'JetBrains Mono',monospace;font-size:18px;
    color:var(--accent);
    text-shadow:0 0 20px rgba(212,255,63,.5);
  }
  .matrix-core span{
    animation:matrixPulse 1.5s ease-in-out infinite alternate;
    opacity:0;
  }
  .matrix-core span:nth-child(1){animation-delay:0s}
  .matrix-core span:nth-child(2){animation-delay:0.3s}
  .matrix-core span:nth-child(3){animation-delay:0.6s}
  .matrix-core span:nth-child(4){animation-delay:0.9s}
  .matrix-core span:nth-child(5){animation-delay:1.2s}
  .matrix-core span:nth-child(6){animation-delay:1.5s}
  @keyframes matrixPulse{
    0%,100%{opacity:1;transform:translateX(-10px)}
    50%{opacity:0.3;transform:translateX(10px)}
  }
  @keyframes matrixFlicker{
    0%,95%{opacity:0;transform:scale(0.8)}
    98%{opacity:1;transform:scale(1.02)}
    100%{opacity:0;transform:scale(1)}
  }
  /* Enhanced terminal effects */
  .term{
    position:relative;
    background:linear-gradient(135deg,rgba(10,10,10,.95),rgba(30,30,30,.9));
    border:2px solid var(--accent);
    box-shadow:0 0 50px rgba(212,255,63,.2),inset 0 0 30px rgba(212,255,63,.05);
    backdrop-filter:blur(10px);
    transform-style:preserve-3d;
    transition:all 0.4s ease;
  }
  .term:hover{
    box-shadow:0 0 80px rgba(212,255,63,.4),inset 0 0 50px rgba(212,255,63,.1);
    transform:translateZ(10px);
  }
  /* Scan line effect */
  .term::after{
    content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(212,255,63,.03) 51%);background-size:100% 8px;animation:scanLine 0.6s linear infinite;
    pointer-events:none;z-index:10;
  }
  @keyframes scanLine{0%{background-position:0 0}100%{background-position:0 100%}}
  /* Glowing border */
  .term::before{
    content:'';position:absolute;inset:-2px;background:conic-gradient(from 0deg,var(--accent),transparent,var(--accent));
    border-radius:14px;z-index:-1;animation:borderRotate 3s linear infinite;
    opacity:.7;
  }
  @keyframes borderRotate{to{transform:rotate(360deg)}}
  /* Glitch effect for root line */
  .glitch-fx{
    position:relative;
  }
  .glitch-fx::before{
    content:attr(data-text);position:absolute;inset:0;color:var(--red);z-index:-1;
    opacity:0;clip-path:inset(0 0 100% 0);
  }
  .glitch-fx.glitch-ignite::before{
    animation:glitchFlash 0.25s steps(2) forwards;opacity:.85;
  }
  @keyframes glitchFlash{
    0%,92%,100%{clip-path:inset(0 0 92% 0);transform:translate(-3px,-2px)}
    94%{clip-path:inset(28% 0 55% 0);transform:translate(4px,1px)}
    96%{clip-path:inset(62% 0 20% 0);transform:translate(-5px,2px)}
    98%{clip-path:inset(10% 0 78% 0);transform:translate(3px,-1px)}
  }

  /* ============================================================
     WOW LAYER — boot · decrypt · crosshair · root mode
     ============================================================ */
  #boot{
    position:fixed;inset:0;z-index:9999;background:#050505;
    display:flex;align-items:flex-start;justify-content:center;
    padding-top:clamp(16px,calc(50vh - 180px),45vh);
    transition:opacity .7s ease,visibility .7s;
  }
  #boot.done{opacity:0;visibility:hidden}
  .boot-box{
    background:#0a0a0a;border:1px solid var(--line);
    padding:40px 50px;box-shadow:0 0 60px rgba(0,0,0,.8);
    font-family:'JetBrains Mono',monospace;color:var(--accent);
    position:relative;overflow:hidden;
  }
  .boot-box::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    animation:bootLine 2s linear infinite;}
  @keyframes bootLine{0%{left:-100%}100%{left:100%}}
  .boot-lines{
    white-space:pre;font-size:14px;line-height:1.6;
    text-shadow:0 0 10px rgba(212,255,63,.2);
  }
  #cursor-cross{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
    mix-blend-mode:difference;
  }
  #cursor-cross .cx{position:absolute;top:0;left:-1px;width:100vw;height:2px;
    background:var(--accent);opacity:.28;
  }
  #cursor-cross .cy{position:absolute;top:-1px;left:0;height:100vh;width:2px;
    background:var(--accent);opacity:.28;
  }
  #cursor-cross .cd{
    position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:50%;
    border:1.5px solid var(--accent);transition:border-color .2s,background .2s,
    width .15s,height .15s;
  }
  #cursor-cross.hot .cd{
    background:rgba(212,255,63,.18);border-color:var(--ink);
    width:34px;height:34px;margin:-6px 0 0 -6px;
  }

  /* ---------- ROOT MODE ---------- */
  html.root #scroll-progress{background:var(--red);box-shadow:0 0 12px rgba(255,90,72,.7)}
  html.root body{filter:none}
  html.root::after{
    content:"";position:fixed;inset:0;z-index:250;pointer-events:none;
    box-shadow:inset 0 0 140px rgba(255,90,72,.16);
    animation:rootPulse 2.4s ease-in-out infinite;
  }
  @keyframes rootPulse{0%,100%{opacity:.55}50%{opacity:1}}
  #toast{
    position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);z-index:300;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.06em;
    color:#0c0c0c;background:var(--accent);padding:13px 22px;
    opacity:0;transition:.35s ease;pointer-events:none;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  }
  html.root #toast{background:var(--red);color:#fff}
  #toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- marquee glitch hover ---------- */
  .marquee:hover .marquee-track{animation-play-state:paused;color:var(--accent)}

  /* ---------- hero title interaction ---------- */
  h1.hero-title span{transition:text-shadow .25s ease,color .25s ease}
  h1.hero-title span:hover{text-shadow:4px 4px 0 rgba(212,255,63,.35),-4px -4px 0 rgba(255,90,72,.15)}
  h1.hero-title .outline:hover{color:var(--accent);-webkit-text-stroke-color:transparent}

  /* ---------- reduced motion: kill it all ---------- */
  @media (prefers-reduced-motion: reduce){
    #boot,#cursor-cross,#scroll-progress{display:none!important}
    *{animation:none!important;transition:none!important}
  }
  #boot{
    position:fixed;inset:0;z-index:9999;background:#050505;
    display:flex;align-items:flex-start;justify-content:center;
    padding-top:clamp(16px,calc(50vh - 180px),45vh);
    transition:opacity .7s ease,visibility .7s;
  }
  #boot.done{opacity:0;visibility:hidden}
  .boot-box{width:min(560px,86vw)}
  .boot-lines{
    font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.9;
    color:var(--accent);white-space:pre-wrap;text-shadow:0 0 12px rgba(212,255,63,.45);
  }
  .boot-box::before{
    content:"PRATHAMESH.SITE v3.0 — secure shell";
    display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.25em;color:var(--dim);border-bottom:1px solid var(--line);
    padding-bottom:10px;margin-bottom:14px;
  }

  /* ---------- scroll progress ---------- */
  #scroll-progress{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
    background:var(--accent);transform-origin:0 0;transform:scaleX(0);
    box-shadow:0 0 12px rgba(212,255,63,.6);pointer-events:none;
  }

  /* ---------- custom crosshair cursor ---------- */
  html.js body, html.js a, html.js button,
  html.js .post, html.js .work-item, html.js label{cursor:none}
  html.js input[type="text"], html.js input[type="email"], html.js textarea{cursor:none}
  #cursor-cross{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;mix-blend-mode:difference}
  #cursor-cross .cx{position:absolute;top:0;left:-1px;width:100vw;height:2px;background:var(--accent);opacity:.28}
  #cursor-cross .cy{position:absolute;top:-1px;left:0;height:100vh;width:2px;background:var(--accent);opacity:.28}
  #cursor-cross .cd{
    position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:50%;
    border:1.5px solid var(--accent);transition:border-color .2s,background .2s,width .15s,height .15s;
  }
  #cursor-cross.hot .cd{
    background:rgba(212,255,63,.18);border-color:var(--ink);
    width:34px;height:34px;margin:-6px 0 0 -6px;
  }

  /* ---------- ROOT MODE ---------- */
  html.root #scroll-progress{background:var(--red);box-shadow:0 0 12px rgba(255,90,72,.7)}
  html.root body{filter:none}
  html.root::after{
    content:"";position:fixed;inset:0;z-index:250;pointer-events:none;
    box-shadow:inset 0 0 140px rgba(255,90,72,.16);
    animation:rootPulse 2.4s ease-in-out infinite;
  }
  @keyframes rootPulse{0%,100%{opacity:.55}50%{opacity:1}}
  #toast{
    position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);z-index:300;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.06em;
    color:#0c0c0c;background:var(--accent);padding:13px 22px;
    opacity:0;transition:.35s ease;pointer-events:none;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  }
  html.root #toast{background:var(--red);color:#fff}
  #toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- marquee glitch hover ---------- */
  .marquee:hover .marquee-track{animation-play-state:paused;color:var(--accent)}

  /* ---------- hero title interaction ---------- */
  h1.hero-title span{transition:text-shadow .25s ease,color .25s ease}
  h1.hero-title span:hover{text-shadow:4px 4px 0 rgba(212,255,63,.35),-4px -4px 0 rgba(255,90,72,.15)}
  h1.hero-title .outline:hover{color:var(--accent);-webkit-text-stroke-color:transparent}

  /* ---------- reduced motion: kill it all ---------- */
  @media (prefers-reduced-motion: reduce){
    #boot,#cursor-cross,#scroll-progress{display:none!important}
    *{animation:none!important;transition:none!important}
  }

/* ===================== v4.css ===================== */
/* ============================================================
   V4 BEAST LAYER — horizontal case files · the signal · upgrades
   loaded after styles.css; additive only
   ============================================================ */

/* ---------- horizontal pinned gallery ---------- */
.hscene{position:relative;height:420vh;background:#080808}
.hscene-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:34px;
  padding:0 40px;
}
.hscene-pin::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px circle at 15% 30%,rgba(212,255,63,.06),transparent 55%),
    linear-gradient(rgba(212,255,63,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,255,63,.035) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px;
}
.hscene-head{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hscene-head .tag{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.2em}
.hscene-head h2{font-family:'Anton',sans-serif;font-size:clamp(38px,6vw,80px);line-height:.92;text-transform:uppercase}
.hscene-progress{flex:1;min-width:140px;max-width:340px;height:2px;background:var(--line);align-self:center}
.hscene-progress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.htrack{
  position:relative;z-index:2;display:flex;gap:26px;width:max-content;
  padding:4px 0;will-change:transform;
}
.hcard{
  position:relative;flex:0 0 auto;width:min(420px,80vw);min-height:440px;
  border:1px solid var(--line);background:var(--bg);
  padding:30px 28px;display:flex;flex-direction:column;gap:20px;
  transition:border-color .3s,transform .5s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.hcard:hover{border-color:var(--accent);transform:translateY(-6px)}
.hcard-idx{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--accent)}
.hcard-body{display:flex;flex-direction:column;gap:14px;margin-top:auto}
.hcard-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--dim)}
.hcard h3{font-family:'Anton',sans-serif;font-size:clamp(26px,3vw,38px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.hcard p{color:var(--dim);font-size:14px;line-height:1.65}
.hcard p code{font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--accent)}
.hcard-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.hcard-tags li{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--dim);border:1px solid var(--line);padding:5px 10px;transition:.2s}
.hcard:hover .hcard-tags li{border-color:rgba(212,255,63,.35)}
.hcard-go{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--dim);transition:.25s}
.hcard:hover .hcard-go{color:var(--accent);transform:translateX(6px)}
.hcard::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(241,239,233,.06),transparent);
  transform:skewX(-18deg);transition:left .8s ease;pointer-events:none;
}
.hcard:hover::after{left:140%}
.hcard-cta{background:var(--panel);border-color:rgba(212,255,63,.3);justify-content:space-between}
.hcard-cta h3{color:var(--accent)}
.hcard-links{display:flex;flex-direction:column;gap:12px}
@media(max-width:900px){
  .hscene{height:auto}
  .hscene-pin{position:static;height:auto;padding:70px 22px;gap:26px}
  .hscene-progress{display:none}
  .htrack{width:auto;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:14px}
  .hcard{scroll-snap-align:start;width:82vw;min-height:400px}
}

/* ---------- THE SIGNAL — newsletter ---------- */
#signal{max-width:1440px;margin:0 auto;position:relative}
.signal-inner{
  position:relative;border:1px solid var(--line);background:var(--panel);
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;
}
.signal-glow{
  position:absolute;top:-40%;left:-10%;width:70%;height:180%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(212,255,63,.14),transparent 62%);
  filter:blur(6px);animation:signalDrift 9s ease-in-out infinite alternate;
}
@keyframes signalDrift{0%{transform:translate(0,0)}100%{transform:translate(24%,8%)}}
.signal-left{position:relative;z-index:1;padding:56px 48px;border-right:1px solid var(--line)}
.signal-left h2{font-family:'Anton',sans-serif;font-size:clamp(56px,9vw,128px);
  line-height:.86;text-transform:uppercase;margin:16px 0 22px}
.signal-left h2 .outline{color:transparent;-webkit-text-stroke:2px var(--accent);display:block}
.signal-left p{color:var(--dim);font-size:16px;line-height:1.75;max-width:480px}
.signal-left p b{color:var(--ink);font-weight:600}
.signal-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;
  font-size:11px;letter-spacing:.12em;color:var(--dim)}
.signal-meta b{color:var(--accent);font-weight:500}
.signal-meta span{display:inline-flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);animation:pulseDot 2s ease-in-out infinite}
.signal-form{position:relative;z-index:1;padding:56px 48px;display:flex;flex-direction:column;gap:0}
.signal-field{display:flex;flex-direction:column;border-bottom:1px solid var(--accent);padding-bottom:16px}
.signal-field label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.15em;margin-bottom:12px}
.signal-field input{background:transparent;border:none;outline:none;color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:19px}
.signal-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.signal-consent{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;margin-top:20px;
  color:var(--dim);font:11px/1.55 'JetBrains Mono',monospace;letter-spacing:.02em;cursor:pointer}
.signal-consent input{appearance:none;width:17px;height:17px;margin:0;border:1px solid #55555b;background:transparent;display:grid;place-items:center}
.signal-consent input::after{content:"";width:8px;height:8px;background:var(--accent);transform:scale(0);transition:transform .16s ease}
.signal-consent input:checked{border-color:var(--accent)}
.signal-consent input:checked::after{transform:scale(1)}
.signal-consent input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#signalBtn{
  margin-top:26px;align-self:flex-start;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;
  background:var(--accent);color:#0c0c0c;border:none;padding:17px 32px;transition:.25s;
}
#signalBtn:hover{background:var(--ink)}
#signalBtn:disabled{cursor:wait;opacity:.7}
#signalBtn.done{background:transparent;border:1px solid var(--accent);color:var(--accent);cursor:default}
.signal-status,.contact-status{min-height:18px;margin-top:14px;font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--accent)}
.signal-status.is-error,.contact-status.is-error{color:#ef765f}
.signal-fine{margin-top:16px;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.signal-perks{list-style:none;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px}
.signal-perks li{font-size:12.5px;color:var(--dim);letter-spacing:.02em;padding-left:20px;position:relative}
.signal-perks li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.contact-email{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:900px){
  .signal-inner{grid-template-columns:1fr}
  .signal-left{border-right:none;border-bottom:1px solid var(--line);padding:44px 26px}
  .signal-form{padding:40px 26px}
}

/* ============================================================
   BLOG / WRITEUP INDEX — editorial upgrade
   ============================================================ */
.filter-bar{max-width:1440px;margin:0 auto;padding:0 40px 30px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-bar .flabel{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.2em;margin-right:6px}
.fbtn{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;
  background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:9px 16px;cursor:pointer;transition:.2s;
}
.fbtn:hover{border-color:var(--accent);color:var(--accent)}
.fbtn.active{background:var(--accent);border-color:var(--accent);color:#0c0c0c}

/* featured lead post */
.lead-post{
  max-width:1440px;margin:0 auto 34px;padding:0 40px;
}
.lead-post a{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  border:1px solid var(--line);background:var(--panel);padding:40px 44px;
  overflow:hidden;transition:border-color .3s,transform .5s cubic-bezier(.22,1,.36,1);
}
.lead-post a:hover{border-color:var(--accent);transform:translateY(-4px)}
.lead-num{font-family:'Anton',sans-serif;font-size:clamp(60px,10vw,140px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--line)}
.lead-post:hover .lead-num,.lead-post a:hover .lead-num{-webkit-text-stroke-color:rgba(212,255,63,.4)}
.lead-body{display:flex;flex-direction:column;gap:14px}
.lead-flag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--accent)}
.lead-body h3{font-family:'Anton',sans-serif;font-size:clamp(28px,4vw,52px);line-height:1;text-transform:uppercase}
.lead-body p{color:var(--dim);font-size:15px;line-height:1.7;max-width:640px}
.lead-body .read{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);transition:.2s}
.lead-post a:hover .read{color:var(--accent)}
@media(max-width:760px){
  .lead-post a{grid-template-columns:1fr;gap:16px;padding:30px 24px}
  .filter-bar{padding:0 22px 24px}
}

/* richer post cards */
.card-list .post{position:relative}
.card-list .post .ptags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.card-list .post .ptags span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--dim);border:1px solid var(--line);padding:4px 9px}
.post.is-hidden{display:none}

/* reading progress bar for articles */
#read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:205;
  background:var(--accent);box-shadow:0 0 12px rgba(212,255,63,.6);pointer-events:none}

/* prose figure / TOC niceties */
.prose figure{margin:30px 0}
.prose figure figcaption{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);
  letter-spacing:.1em;margin-top:10px}
.toc{max-width:820px;margin:0 auto 10px;padding:22px 40px 0}
.toc-inner{border:1px solid var(--line);background:var(--panel);padding:20px 24px}
.toc-inner b{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:12px}
.toc-inner ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:8px}
.toc-inner li{counter-increment:toc;font-size:14px}
.toc-inner li::before{content:counter(toc,decimal-leading-zero) "  ";font-family:'JetBrains Mono',monospace;color:var(--dim);font-size:12px}
.toc-inner a{color:var(--dim);transition:.2s}
.toc-inner a:hover{color:var(--accent)}

/* ============================================================
   REFINED DARK — visual layer
   Keeps the restrained palette and spacing while the full interaction
   engine remains available.
   Loaded last, so these win. Content & structure untouched.
   ============================================================ */

/* ---- calmer palette ---- */
:root{
  --bg:#0b0b0c;
  --panel:#141416;
  --ink:#f4f2ec;
  --dim:#8b887f;
  --line:#26262a;
  --accent:#c8f04a;      /* slightly softer green, used sparingly */
  --accent-dim:rgba(200,240,74,.12);
}

/* ---- 1. keep progress lightweight ---- */
#scroll-progress{height:1px}
.gridzoom{opacity:.18}
.scene{height:300vh}
.scene-pin{background:var(--bg)}
.term-bar i:nth-child(1){background:#e0564a}
[data-line].root-line{background:#e0564a;color:#0b0b0c}
.breach-title span{color:var(--accent)}

/* ---- 4. whitespace: airy but not empty (tightened from 132) ---- */
section{padding:98px 40px}
.sec-head{margin-bottom:46px}
header#top{padding:150px 40px 70px}
.hero-sub{padding-bottom:70px}
footer{margin-top:80px;padding:96px 40px 46px}
.tools-wall{margin-top:40px}

/* ---- 5b. tool-wall chips: readable, not hollow ---- */
.tool-chip{color:#cfccc3;border-color:#33333a;background:#141416}
.tools-label{color:#9a978f;letter-spacing:.3em}

/* ---- 5. dial the green back to an accent ---- */
/* section watermarks: even fainter */
.wm{-webkit-text-stroke:1px rgba(244,242,236,.045)}
/* marquee: ink, not shouting; calmer speed */
.marquee-track{animation-duration:44s}
.marquee-track span::after{color:var(--accent);opacity:.7}
/* nav: quieter */
nav{background:linear-gradient(to bottom,rgba(11,11,12,.9),rgba(11,11,12,0));backdrop-filter:blur(3px)}
/* live clock stays subtle */
.hero-meta{opacity:.85}

/* ---- 6. reveals: gentler, no bounce ---- */
html.js .reveal{transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
html.js .stagger>*{transform:translateY(20px)}
/* ---- 7. keep the back-to-top control aligned with the palette ---- */
#toTop .ring-fg{stroke:var(--accent)}

/* ---- 9. BUG FIX: About stat grid clipped "Top 10" ----
   An unscoped `.stat b` / `.stat{overflow:hidden}` from the stats-band
   block leaked its giant 84px size onto the About grid, overflowing the
   narrow cells. Re-scope the About grid to fit and never clip. */
#about .stat-grid .stat{overflow:visible !important;padding:24px 20px}
#about .stat-grid .stat b{
  font-size:clamp(26px,2.8vw,42px) !important;
  white-space:nowrap;line-height:1.02;letter-spacing:-.01em;
}

/* ---- 10. BUG FIX + polish: breach climax stands alone ----
   The statement was overlapping the terminal and the DESCENT % HUD.
   Center it and (via v4.js) fade the terminal + HUD out at the end so
   the line lands clean on dark — the memorable payoff of the scene. */
.breach-title{
  bottom:auto;top:50%;transform:translateY(-42%);
  font-size:clamp(34px,5vw,84px);letter-spacing:-.01em;
  text-shadow:0 8px 40px rgba(0,0,0,.6);padding:0 22px;
}
.breach-title.on{transform:translateY(-50%)}
.breach-stage .term,.breach-stage .depth-hud{transition:opacity .35s ease}

@media(max-width:900px){
  section{padding:88px 22px}
  header#top{padding:120px 22px 0}
  footer{padding:80px 22px 40px}
}

/* ===================== curated-20260904.css ===================== */
/* ============================================================
   CURATED / V10
   Cherry-picked from the Grigoletto template pack:
   Neural SNX nav · Dulce Flask proof cards · Folio/V0 Gravity
   capability grid · Lineage Hot about · Showcase article hero
   Last Light CTA · Coda Noir footer.
   Loaded last: this is the coherent production-facing skin.
   ============================================================ */

:root{
  --bg:#09090a;
  --panel:#111113;
  --panel-2:#171719;
  --ink:#f4f2ec;
  --dim:#96938a;
  --line:#29292d;
  --accent:#c8f04a;
  --red:#ff6b52;
  --blue:#6eb7ff;
  --paper:#e8e4da;
  --paper-ink:#101011;
  --glass:rgba(17,17,19,.76);
  --radius:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{background:var(--bg)}
body{background:
  radial-gradient(900px 520px at 82% 2%,rgba(200,240,74,.055),transparent 68%),
  radial-gradient(720px 520px at 8% 40%,rgba(255,107,82,.035),transparent 65%),
  var(--bg)}
.skip-link{position:fixed;z-index:100000;left:18px;top:12px;padding:11px 16px;border-radius:999px;background:var(--accent);color:#09090a;font:700 12px/1 'JetBrains Mono',monospace;transform:translateY(-180%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:translateY(0)}
.wm::before{content:attr(data-label)}

/* ---------- Neural SNX: floating glass navigation ---------- */
body>nav{
  top:18px;left:50%;right:auto;transform:translateX(-50%);
  width:min(1320px,calc(100% - 40px));padding:10px 12px 10px 18px;
  border:1px solid rgba(255,255,255,.09);border-radius:999px;
  background:rgba(10,10,11,.72);box-shadow:0 14px 46px rgba(0,0,0,.24);
  backdrop-filter:blur(18px) saturate(130%);transition:background .3s,border-color .3s,box-shadow .3s;
}
body>nav.scrolled{background:rgba(10,10,11,.93);border-color:rgba(200,240,74,.2);box-shadow:0 18px 52px rgba(0,0,0,.42)}
body>nav .nav-logo{font-size:16px;letter-spacing:.08em;white-space:nowrap}
body>nav .nav-logo .dot{width:7px;height:7px;box-shadow:0 0 14px rgba(200,240,74,.75)}
body>nav .nav-links{align-items:center;gap:3px}
body>nav .nav-links a{
  padding:10px 13px;border-radius:999px;font-size:11px;color:#aaa79f;
  transition:color .2s,background .2s;
}
body>nav .nav-links a:hover,body>nav .nav-links a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.07)}
body>nav .nav-links a:last-child{color:#0a0a0b;background:var(--accent);padding-inline:17px}
body>nav .nav-links a:last-child:hover{background:var(--ink)}
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--ink);cursor:pointer;position:relative;flex:0 0 auto;
}
.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:12px;right:12px;height:1px;background:currentColor;transition:.3s var(--ease)}
.nav-toggle::before{top:16px}.nav-toggle::after{top:24px}
body>nav.menu-open .nav-toggle::before{top:20px;transform:rotate(45deg)}
body>nav.menu-open .nav-toggle::after{top:20px;transform:rotate(-45deg)}

/* Base CSS applies fixed-nav rules to every nav. Article navigation is content. */
.post-nav{position:static;inset:auto;transform:none;width:auto;background:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none}

/* ---------- Coda Noir + Dulce Flask: hero composition ---------- */
header#top{
  min-height:100svh;max-width:1440px;margin:0 auto;padding:138px 40px 76px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:clip;isolation:isolate;
}
header#top::before{
  content:"";position:absolute;width:min(58vw,820px);aspect-ratio:1;right:-8%;top:5%;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(200,240,74,.105),rgba(200,240,74,.018) 45%,transparent 70%);
  filter:blur(12px);pointer-events:none;
}
header#top .hero-meta{position:relative;z-index:4;border:0;padding:0 0 22px;opacity:.82}
.hero-art{position:absolute;z-index:0;right:5%;top:8%;width:min(47vw,620px);height:86%;pointer-events:none}
.hero-art img{width:100%;height:100%;object-fit:contain;display:block;filter:contrast(1.04) saturate(.82);transform:translateZ(0)}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,transparent 22%,transparent 76%,var(--bg) 100%),linear-gradient(0deg,var(--bg),transparent 18%,transparent 88%,var(--bg));pointer-events:none}
.hero-art-orbit{position:absolute;z-index:2;left:50%;top:45%;border:1px solid rgba(200,240,74,.18);border-radius:50%;transform:translate(-50%,-50%)}
.orbit-a{width:74%;aspect-ratio:1}.orbit-b{width:98%;aspect-ratio:1;border-style:dashed;opacity:.48}
.hero-specs{position:absolute;z-index:3;right:-2%;top:39%;width:160px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hero-specs span{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 8px;text-align:center;font-size:10px;letter-spacing:.12em;color:#b7b4ac;background:rgba(9,9,10,.68);backdrop-filter:blur(8px)}
h1.hero-title{z-index:2;width:min(100%,1180px);font-size:clamp(72px,13.7vw,196px);line-height:.79;letter-spacing:-.025em;padding:44px 0 36px;pointer-events:none}
h1.hero-title>span{display:inline-block}
h1.hero-title .outline{-webkit-text-stroke:1.5px rgba(200,240,74,.82)}
.hero-sub{position:relative;z-index:3;padding:0;align-items:flex-end;border-top:1px solid rgba(255,255,255,.09);padding-top:24px}
.hero-sub p{font-size:16px;max-width:610px;color:#aaa79e}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn,.btn-line,.btn-ghost{border-radius:999px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;transition:.3s var(--ease)}
.btn{background:var(--accent);color:#0a0a0b;border-color:var(--accent);padding:13px 22px}
.btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost{padding:13px 20px;border:1px solid var(--line);color:var(--dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-line{padding:12px 20px;border:1px solid var(--line)}

/* ---------- shared editorial rhythm ---------- */
section{padding-top:112px;padding-bottom:112px}
.sec-head{align-items:flex-end;margin-bottom:48px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.sec-head::after{display:none}
.sec-head h2{font-size:clamp(50px,7.2vw,104px);letter-spacing:-.025em;line-height:.85}
.sec-head .tag{max-width:340px;text-align:right;line-height:1.7}
.wm{top:24px;right:24px;font-size:clamp(80px,12vw,180px);opacity:.65}
.marquee{background:transparent;border-color:var(--line);padding:13px 0}
.marquee-track span{font-size:19px;color:#b5b2aa}

/* ---------- Lineage Hot: about / origin ---------- */
#about{grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);gap:36px;align-items:stretch}
#about .id-card{border-radius:var(--radius);overflow:hidden;border-color:#313136;background:var(--panel);box-shadow:0 34px 80px rgba(0,0,0,.28)}
#about .id-card::before{top:18px;left:18px;background:rgba(9,9,10,.78);border:1px solid var(--line);border-radius:999px;padding:7px 11px}
#about .avatar{aspect-ratio:4/4.35}
#about .id-rows div{padding:13px 18px}
#about .bio-copy{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,4vw,58px);background:linear-gradient(145deg,var(--panel),#0e0e10)}
#about .bio-copy>p:first-child{font-size:clamp(24px,3vw,42px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);max-width:850px}
#about .bio-copy>p:first-child b{color:var(--accent)}
#about .bio-copy>p:nth-child(2){font-size:15px;max-width:690px}
#about .filmstrip{border-radius:16px;border-color:#303035}
#about .stat-grid{gap:8px;background:none;border:0}
#about .stat-grid .stat{border:1px solid var(--line);border-radius:14px;background:#0c0c0e;padding:20px 16px}

/* ---------- Folio Suite / V0 Gravity: capability bento ---------- */
.svc-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;background:none;border:0}
.svc{grid-column:span 6;min-height:310px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:34px;display:flex;flex-direction:column}
.svc:nth-child(1),.svc:nth-child(4){grid-column:span 7}.svc:nth-child(2),.svc:nth-child(3){grid-column:span 5}
.svc:hover{background:#19191c;transform:translateY(-4px);border-color:rgba(200,240,74,.45)}
.svc h3{font-size:clamp(30px,3vw,45px);line-height:.95;margin-top:auto}
.svc ul{margin-top:20px}
.svc li{display:inline-flex;margin:3px 2px 0 0;padding:7px 10px;border:1px solid #303035;border-radius:999px;font-size:11px}
.svc li::before{display:none}.svc li:hover{padding-left:10px;color:var(--ink);border-color:var(--accent)}
.tools-wall{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);padding:28px 0;background:#0d0d0f}

/* ---------- operations / proof ---------- */
.work-list{border-top:0}
.work-item{border:1px solid transparent;border-bottom-color:var(--line);border-radius:16px;padding:28px 18px}
.work-item:hover{padding-left:26px;border-color:rgba(200,240,74,.28);background:var(--panel)}
.work-item h3{letter-spacing:-.015em}
.stats-band{gap:12px;border:0;background:none}
.stats-band .stat{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:34px 26px}
.stats-band .stat b{font-size:clamp(48px,5vw,76px)}
.stats-band .stat::before{content:"";display:block;width:9px;height:9px;margin-bottom:34px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(200,240,74,.5)}
.stats-band .stat::after{display:none}
.cred-flow .chip{border-radius:999px;background:var(--panel);padding:12px 18px}

/* ---------- Hallmark: case-file gallery ---------- */
.hscene{background:#080809;border-block:1px solid var(--line)}
.hscene-pin{padding-inline:40px}
.hcard{border-radius:var(--radius);background:linear-gradient(145deg,#151517,#0d0d0f);border-color:#2d2d32;padding:32px;min-height:460px}
.hcard:hover{transform:translateY(-4px);border-color:rgba(200,240,74,.5)}
.hcard h3{letter-spacing:-.015em}
.hcard-tags li{border-radius:999px}

/* ---------- fix and elevate blog/writeup cards ---------- */
.post-grid a.post,.card-list a.post{
  border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--panel);
  display:flex;flex-direction:column;gap:15px;min-height:300px;transition:.35s var(--ease);
}
.post-grid a.post:hover,.card-list a.post:hover{border-color:rgba(200,240,74,.5);transform:translateY(-5px);background:#171719}
.post-grid a.post time,.card-list a.post time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.14em}
.post-grid a.post h3,.card-list a.post h3{font-size:clamp(21px,2vw,29px);line-height:1.15;letter-spacing:-.018em}
.post-grid a.post p,.card-list a.post p{font-size:14px;line-height:1.65;color:var(--dim)}
.post-grid a.post .read,.card-list a.post .read{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)}
.post-grid a.post:hover .read,.card-list a.post:hover .read{color:var(--accent)}
.lead-post a{border-radius:var(--radius);background:linear-gradient(135deg,#171719,#0c0c0e);border-color:#2d2d32}
.filter-bar .fbtn{border-radius:999px}

/* ---------- Signal glass card ---------- */
.signal-inner{border-radius:var(--radius);border-color:#303035;background:linear-gradient(145deg,#171719,#101012)}
.signal-left,.signal-form{padding:clamp(34px,5vw,68px)}
#signalBtn{border-radius:999px}

/* ---------- Last Light: conversion CTA ---------- */
#contact{padding-inline:40px}
#contact .contact-inner{
  position:relative;overflow:hidden;max-width:1360px;border:1px solid #323237;border-radius:32px;
  padding:clamp(34px,6vw,82px);background:
    radial-gradient(540px 380px at 12% 100%,rgba(255,107,82,.18),transparent 70%),
    radial-gradient(480px 320px at 100% 0,rgba(200,240,74,.08),transparent 70%),#121214;
}
#contact .contact-inner::before{content:"AVAILABLE / 2026";position:absolute;right:28px;top:24px;font:11px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--dim)}
.contact-left h2{font-size:clamp(68px,10vw,145px);letter-spacing:-.03em}
.contact-left p{font-size:16px}
#contact form{border-top-color:#37373c}
#contact .field{border-bottom-color:#37373c}
#contact form button{border-radius:999px}
#contact .field input:-webkit-autofill,
#contact .field input:-webkit-autofill:hover,
#contact .field input:-webkit-autofill:focus,
#contact .field textarea:-webkit-autofill,
#contact .field textarea:-webkit-autofill:hover,
#contact .field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-out 0s;
}

/* ---------- Coda Noir: editorial footer ---------- */
footer{max-width:1440px;margin:100px auto 0;padding:82px 40px 36px;border-top:1px solid var(--line)}
.foot-giant{text-align:left;font-size:clamp(72px,13.4vw,190px);line-height:.76;letter-spacing:-.035em;-webkit-text-stroke:1px rgba(244,242,236,.22)}
.foot-cols{margin-top:74px;padding-top:30px;border-top:1px solid var(--line)}
.foot-cols>div{min-width:150px}
.foot-cols a{font-size:12px;padding:6px 0}
.foot-base{margin-top:46px}

/* ---------- Showcase Hero: article/listing pages ---------- */
.page-hero{max-width:1360px;padding:160px 40px 56px;min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end}
.page-hero .article-title{font-size:clamp(64px,10vw,148px);line-height:.82;letter-spacing:-.035em;max-width:1180px;margin:30px 0 38px}
.page-hero .kicker{order:-1}
.page-hero .back-link{position:absolute;top:118px;right:40px}
.meta-row{border-color:var(--line);padding:18px 0;margin:0}
.prose{max-width:860px;font-size:18px;line-height:1.9}
.prose h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.012em}
.prose pre{border-radius:15px;background:#101012;border-color:#303035}
.callout{border:1px solid #313136;border-left:3px solid var(--accent);border-radius:14px;background:var(--panel)}
.post-nav a{border-radius:14px;background:var(--panel)}

/* ---------- utility and accessibility ---------- */
.clip-reveal{will-change:clip-path}
.js .clip-reveal{clip-path:inset(0);transition:clip-path 1s var(--ease)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
a[href="#"]{opacity:.62}
#toTop{background:rgba(12,12,13,.86);border-radius:50%;backdrop-filter:blur(10px)}
#sfx-toggle{width:50px;height:50px;padding:0;border-radius:50%;font-size:0;display:grid;place-items:center}
#sfx-toggle::before{content:"♪";font:18px 'JetBrains Mono',monospace}
#sfx-toggle.on::before{content:"♫"}

@media(max-width:900px){
  body>nav{top:12px;width:calc(100% - 24px);padding:8px 8px 8px 15px}
  .nav-toggle{display:block}
  body>nav .nav-links{
    display:flex;position:absolute;top:calc(100% + 9px);left:0;right:0;padding:10px;
    flex-direction:column;align-items:stretch;gap:3px;border:1px solid var(--line);border-radius:22px;
    background:rgba(10,10,11,.96);box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:.3s var(--ease);
  }
  body>nav.menu-open .nav-links{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  body>nav .nav-links a{padding:13px 14px;text-align:center}

  header#top{min-height:880px;padding:112px 22px 54px}
  header#top .hero-meta span:nth-child(2),header#top .hero-meta span:nth-child(3){display:none}
  .hero-art{right:-32%;top:17%;width:92vw;height:69%;opacity:.7}
  .hero-art::after{background:linear-gradient(90deg,var(--bg),transparent 32%,transparent 72%,var(--bg)),linear-gradient(0deg,var(--bg),transparent 22%,transparent 78%,var(--bg))}
  .hero-specs{display:none}.hero-art-orbit{opacity:.36}
  h1.hero-title{font-size:clamp(68px,20.2vw,112px);padding:54px 0 38px;line-height:.82}
  .hero-sub{align-items:flex-start}.hero-sub p{font-size:14px;max-width:95%}
  .hero-actions{width:100%}.hero-actions a{flex:1;min-width:160px}

  section{padding-top:88px;padding-bottom:88px}
  .sec-head .tag{text-align:left}
  #about{grid-template-columns:1fr;gap:18px}
  #about .bio-copy{padding:30px 24px}
  .svc-grid{grid-template-columns:1fr}
  .svc,.svc:nth-child(n){grid-column:auto;min-height:280px}
  .stats-band{grid-template-columns:1fr 1fr}
  .hscene-pin{padding-inline:22px}
  #contact{padding-inline:22px}
  #contact .contact-inner{grid-template-columns:1fr;padding:54px 24px 34px;gap:42px}
  footer{padding:70px 22px 34px;margin-top:70px}
  .page-hero{padding:130px 22px 42px;min-height:52vh}
  .page-hero .article-title{font-size:clamp(52px,15vw,86px)}
  .page-hero .back-link{position:static;order:-2;margin-bottom:28px}
  .prose{padding-inline:22px;font-size:16px}
  .post-nav{padding-inline:22px;flex-direction:column}
  .card-list{padding-inline:22px;grid-template-columns:1fr}
  .lead-post{padding-inline:22px}
}

@media(max-width:560px){
  .stats-band{grid-template-columns:1fr}
  .stats-band .stat{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  #about .stat-grid{grid-template-columns:1fr 1fr}
  .post-grid{grid-template-columns:1fr}
  .foot-cols{display:grid;grid-template-columns:1fr 1fr}
  .foot-base{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .hero-art-orbit{display:none}
  .hero-art img{transform:none!important}
}

/* ============================================================
   V11 / REFS.TXT REDESIGN
   Vertical: editorial scale · Mono X: disciplined grid
   Nudge: tool-like labels · Majd: inset paper surfaces
   Folira: framed media · Kirk/Creatie: controlled color
   ============================================================ */

/* A quiet 12-column drafting grid unifies the intentionally varied sections. */
body::before{
  content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.07) 0);
  background-size:calc((100vw - 80px)/12) 100%;background-position:40px 0;
}

/* Majd's inset paper surface, made personal with a real photo contact sheet. */
#about{
  max-width:1360px;margin:84px auto;padding:clamp(26px,4vw,58px);border-radius:34px;
  color:var(--paper-ink);background:var(--paper);overflow:hidden;align-items:start;
}
#about::after{content:"ABOUT / HUMAN SIDE";position:absolute;right:30px;bottom:18px;font:11px 'JetBrains Mono',monospace;letter-spacing:.18em;opacity:.42}
#about .wm{color:rgba(16,16,17,.09);-webkit-text-stroke:0}
#about .bio-copy{border-color:rgba(16,16,17,.15);background:#f2efe8;color:var(--paper-ink);box-shadow:0 22px 70px rgba(27,22,13,.12)}
#about .bio-copy>p,#about .bio-copy>p:nth-child(2){color:#343330}
#about .bio-copy>p:first-child{color:var(--paper-ink)}
#about .bio-copy>p:first-child b,#about .bio-copy>p:nth-child(2) b{color:#d7442f}
#about .stat-grid .stat{background:#151517;border-color:#151517;color:var(--ink)}
#about .stat-grid .stat i{color:#aaa79f}

.life-reel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:74px;gap:8px;margin:30px 0 18px}
.life-shot{position:relative;grid-column:span 4;grid-row:span 3;overflow:hidden;border-radius:14px;background:#171719;margin:0}
.life-shot-wide{grid-column:span 8;grid-row:span 2}.life-shot-tall{grid-row:span 4}
.life-shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .45s var(--ease),transform .7s var(--ease)}
.life-shot:hover img{filter:grayscale(0);transform:scale(1.035)}
.life-shot figcaption{position:absolute;left:9px;bottom:9px;padding:6px 8px;border-radius:999px;background:rgba(10,10,11,.76);backdrop-filter:blur(8px);color:#f2efe8;font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}
.life-shot:nth-child(4)::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,78,104,.22),transparent 60%);pointer-events:none}

/* Folira's framed media and Nudge's interface annotations. */
.interface-showcase{
  max-width:1360px;display:grid;grid-template-columns:minmax(280px,.7fr) minmax(540px,1.3fr);
  gap:24px;padding:24px;border:1px solid #d2cec4;border-radius:34px;background:var(--paper);color:var(--paper-ink);overflow:hidden;
}
.interface-showcase .wm{color:rgba(16,16,17,.075);-webkit-text-stroke:0}
.interface-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,4vw,52px);border-radius:24px;background:#ff705b;min-height:680px}
.interface-copy .eyebrow{font:11px 'JetBrains Mono',monospace;letter-spacing:.16em}
.interface-copy h2{font-family:'Anton',sans-serif;font-size:clamp(58px,6.2vw,86px);line-height:.96;text-transform:uppercase;letter-spacing:-.02em;margin:30px 0}
.interface-copy h2 em{display:block;margin-top:8px;font-size:.7em;line-height:.98;font-style:normal;color:#fff8eb}
.interface-copy p{max-width:470px;font-size:16px;line-height:1.65}
.interface-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:34px}
.interface-tags span{padding:9px 11px;border:1px solid rgba(16,16,17,.32);border-radius:999px;font:11px 'JetBrains Mono',monospace;letter-spacing:.1em}
.interface-media{position:relative;min-height:680px;border-radius:24px;background:#09090a;overflow:hidden;isolation:isolate}
.interface-media::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 65% 38%,rgba(110,183,255,.19),transparent 32%),repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(255,255,255,.05) 20%)}
.interface-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;mix-blend-mode:screen;filter:contrast(1.06)}
.interface-chrome{position:absolute;z-index:2;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;color:#aba8a0;font-size:10px;letter-spacing:.16em}
.interface-note{position:absolute;z-index:2;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(9,9,10,.74);backdrop-filter:blur(8px);color:#e8e4da;font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}
.note-a{left:7%;top:32%}.note-b{right:8%;top:53%}.note-c{left:14%;bottom:9%;color:var(--accent);border-color:rgba(200,240,74,.35)}

/* Vertical/Fuel: bolder hierarchy, with selective—not blanket—color. */
.svc{overflow:hidden;isolation:isolate}
.svc::after{content:attr(data-scope);position:absolute;right:-6px;bottom:-27px;font-family:'Anton',sans-serif;font-size:110px;line-height:1;color:rgba(255,255,255,.025);z-index:-1}
.svc:nth-child(2){background:#16253a;border-color:#284465}.svc:nth-child(3){background:#e5dfd3;color:#111;border-color:#e5dfd3}
.svc:nth-child(3) .num,.svc:nth-child(3) li{color:#292824;border-color:rgba(17,17,17,.22)}
.svc:nth-child(4){background:#241112;border-color:#492124}

/* Horizontal swipe gallery: same visual payoff without scroll hijacking. */
.hscene[data-static]{height:auto;padding:92px 0}
.hscene[data-static] .hscene-pin{position:relative;top:auto;height:auto;min-height:0;display:block;overflow:hidden}
.hscene[data-static] .hscene-head{padding-inline:40px;margin-bottom:42px}
.hscene[data-static] .htrack{transform:none!important;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:0 40px 24px;scrollbar-width:thin;scrollbar-color:var(--accent) #171719}
.hscene[data-static] .htrack{cursor:grab}.hscene[data-static] .htrack.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.hscene[data-static] .hcard{scroll-snap-align:start;flex:0 0 min(520px,78vw)}
.hscene[data-static] .hscene-progress{display:none}
.hcard:nth-child(2){background:#13243a}.hcard:nth-child(3){background:#241112}.hcard:nth-child(4){background:#e6e2d9;color:#111}
.hcard:nth-child(4) p,.hcard:nth-child(4) .hcard-go{color:var(--dim)}.hcard:nth-child(4) .hcard-kicker{color:#be3f2e}

/* Published coverage: identity-led proof rather than a generic logo ticker. */
#press{max-width:1360px;padding:24px;border:1px solid var(--line);border-radius:34px;background:#101012;overflow:hidden}
#press .wm{z-index:0}
.press-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,.78fr) minmax(560px,1.22fr);gap:16px}
.press-lead{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:720px;padding:clamp(30px,4vw,58px);border-radius:24px;background:var(--blue);color:#0b0b0c}
.press-lead .eyebrow{font-size:11px;letter-spacing:.18em}
.press-lead h2{font-family:'Anton',sans-serif;font-size:clamp(66px,7.5vw,112px);line-height:.82;letter-spacing:-.025em;text-transform:uppercase;margin:34px 0}
.press-lead h2 em{display:block;color:#f7f1e5;font-style:normal}
.press-lead p{max-width:520px;font-size:17px;line-height:1.65;color:#17202a}
.press-lead .btn-line{margin-top:34px;border-color:rgba(11,11,12,.45);color:#0b0b0c}
.press-lead .btn-line:hover{background:#0b0b0c;color:var(--blue);border-color:#0b0b0c}
.press-proof{display:grid;grid-template-rows:auto 1fr;gap:16px}
.press-count{min-height:194px;display:flex;align-items:flex-end;justify-content:space-between;padding:28px 34px;border:1px solid #303035;border-radius:24px;background:#171719;overflow:hidden}
.press-count b{font-family:'Anton',sans-serif;font-size:clamp(88px,10vw,148px);line-height:.7;color:var(--accent);letter-spacing:-.03em}
.press-count span{text-align:right;font:11px/1.6 'JetBrains Mono',monospace;letter-spacing:.14em;color:#aaa79f}
.press-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.press-card{position:relative;min-height:245px;display:flex;flex-direction:column;align-items:flex-start;padding:18px;border:1px solid #303035;border-radius:20px;background:#171719;overflow:hidden;transition:border-color .3s var(--ease),background .3s var(--ease)}
.press-card::after{content:"";position:absolute;width:130px;height:130px;right:-58px;bottom:-70px;border:1px solid rgba(200,240,74,.15);border-radius:50%;transition:.6s var(--ease)}
.press-card:hover{border-color:rgba(200,240,74,.55);background:#1d1d20}
.press-card:hover::after{transform:scale(1.8);border-color:rgba(200,240,74,.32)}
.press-card img{width:54px;height:54px;object-fit:contain;border-radius:12px;background:#f4f2ec;padding:6px;margin:auto 0 18px;filter:grayscale(1);transition:filter .3s,transform .45s var(--ease)}
.press-card:hover img{filter:grayscale(0);transform:rotate(-4deg) scale(1.08)}
.press-card strong{font-family:'Anton',sans-serif;font-size:23px;line-height:1;text-transform:uppercase;letter-spacing:.015em;color:var(--ink)}
.press-card small,.press-index{font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;color:var(--dim)}
.press-card small{margin-top:9px}.press-index{position:absolute;top:17px;right:16px}

/* Creatie's floating labels, translated into useful availability metadata. */
#contact .contact-inner::after{content:"PENTEST / BUG BOUNTY / SECOPS";position:absolute;left:30px;bottom:22px;padding:8px 12px;border-radius:999px;background:var(--blue);color:#0a0a0b;font:11px 'JetBrains Mono',monospace;letter-spacing:.1em;transform:rotate(-2deg)}

@media(max-width:900px){
  body::before{background-size:calc((100vw - 44px)/6) 100%;background-position:22px 0}
  #about{margin:58px 12px;padding:20px;border-radius:26px}
  .life-reel{grid-auto-rows:66px}.life-shot{grid-column:span 6}.life-shot-wide{grid-column:span 12}
  .interface-showcase{margin-inline:12px;padding:12px;grid-template-columns:1fr;border-radius:26px}
  .interface-copy{min-height:500px}.interface-media{min-height:620px}
  .hscene[data-static] .hscene-head{padding-inline:22px}.hscene[data-static] .htrack{padding-inline:22px}
  #press{margin-inline:12px;padding:12px;border-radius:26px}.press-shell{grid-template-columns:1fr}.press-lead{min-height:560px}.press-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  #about .bio-copy{padding:24px 17px}
  .life-reel{grid-auto-rows:58px}.life-shot,.life-shot-wide{grid-column:span 12;grid-row:span 4}.life-shot:nth-child(2),.life-shot:nth-child(4){grid-row:span 3}
  .interface-showcase{padding:8px}.interface-copy{min-height:440px;padding:28px 20px}.interface-media{min-height:500px}
  .interface-media img{object-position:56% center}.interface-note{display:none}
  .hscene[data-static] .hcard{flex-basis:88vw}
  #press{padding:8px}.press-lead{min-height:500px;padding:32px 22px}.press-lead h2{font-size:clamp(64px,21vw,86px)}.press-count{min-height:160px;padding:24px 20px}.press-count b{font-size:92px}.press-grid{grid-template-columns:1fr 1fr}.press-card{min-height:210px;padding:15px}.press-card strong{font-size:20px}
  #contact .contact-inner::after{display:none}
}

/* ============================================================
   V12 / VISUAL REMEDIATION
   Replace the oversized perspective slab with an instrument-like
   packet map, and turn About into a dense editorial contact sheet.
   ============================================================ */

.breach-visual{
  position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(circle at 76% 46%,rgba(200,240,74,.085),transparent 25%),
    radial-gradient(circle at 18% 90%,rgba(99,156,255,.075),transparent 28%),
    linear-gradient(180deg,#09090a 0%,#0b0b0d 52%,#080809 100%);
}
.breach-visual::before{
  content:"";position:absolute;inset:0;opacity:.34;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;mask-image:linear-gradient(90deg,transparent,#000 26%,#000 100%);
  transform:translateY(calc(var(--breach-p,0) * -26px));
}
.breach-visual::after{
  content:"BREACH\A CONTROL";white-space:pre;position:absolute;right:-.04em;bottom:-.14em;
  font:clamp(120px,18vw,310px)/.72 'Anton',sans-serif;letter-spacing:-.045em;text-align:right;
  color:rgba(255,255,255,.018);transform:translateY(calc(var(--breach-p,0) * -30px));
}
.breach-chrome{position:absolute;top:78px;left:4vw;right:4vw;display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);font:10px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--dim)}
.breach-chrome span:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:breachBlink 1.8s steps(2,end) infinite}
.breach-radar{position:absolute;width:min(62vw,880px);aspect-ratio:1;right:-8vw;top:50%;border:1px solid rgba(200,240,74,.12);border-radius:50%;transform:translateY(-50%) scale(calc(.86 + var(--breach-p,0) * .12));opacity:calc(.5 + var(--breach-p,0) * .42)}
.breach-radar::before,.breach-radar::after{content:"";position:absolute;border-radius:50%;inset:12.5%;border:1px dashed rgba(255,255,255,.1)}
.breach-radar::after{inset:37.5%;border-style:solid;border-color:rgba(200,240,74,.19)}
.radar-ring,.radar-axis,.radar-sweep{position:absolute;display:block}
.radar-ring{inset:25%;border:1px solid rgba(255,255,255,.085);border-radius:50%}
.radar-ring-b{inset:6.25%;border-style:dashed}.radar-ring-c{inset:43.75%;border-color:rgba(200,240,74,.28)}
.radar-axis-x{left:0;right:0;top:50%;border-top:1px solid rgba(255,255,255,.09)}
.radar-axis-y{top:0;bottom:0;left:50%;border-left:1px solid rgba(255,255,255,.09)}
.radar-sweep{inset:50% 50% 0 0;transform-origin:100% 0;background:conic-gradient(from 270deg at 100% 0,rgba(200,240,74,.24),transparent 22deg);animation:radarSweep 6.5s linear infinite}
.breach-node{position:absolute;width:10px;height:10px;border:2px solid #dcded6;border-radius:50%;background:#0a0a0b;box-shadow:0 0 0 5px rgba(255,255,255,.035),0 0 18px rgba(255,255,255,.18)}
.breach-node::after{content:attr(data-node);position:absolute;left:16px;top:-6px;width:max-content;padding:5px 7px;border:1px solid rgba(255,255,255,.12);background:rgba(9,9,10,.82);color:#aaa9a3;font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}
.node-a{left:20%;top:35%}.node-b{left:63%;top:20%}.node-c{left:71%;top:68%}.node-d{left:43%;top:55%;border-color:var(--accent);box-shadow:0 0 0 7px rgba(200,240,74,.08),0 0 25px rgba(200,240,74,.38)}
.node-d::after{color:var(--accent);border-color:rgba(200,240,74,.3)}
.breach-feed{position:absolute;left:4vw;bottom:84px;width:min(340px,31vw);display:grid;border-top:1px solid rgba(255,255,255,.14)}
.breach-feed span{display:grid;grid-template-columns:28px 1fr auto;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;color:var(--dim)}
.breach-feed b{font-weight:400;color:var(--dim)}.breach-feed i{font-style:normal;color:var(--accent)}
.packet-tape{position:absolute;left:0;right:0;bottom:0;height:32px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid rgba(200,240,74,.18);background:#0b0b0c;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.18em}
.packet-tape span::before{content:"+";margin-right:8px;color:var(--accent)}

.breach-stage{width:min(1180px,90vw);grid-template-columns:minmax(0,1.45fr) minmax(190px,.55fr);gap:28px;align-items:center}
.breach-stage .term{height:min(720px,76vh);overflow:hidden;border-color:rgba(200,240,74,.33);background:rgba(10,10,11,.86);box-shadow:0 35px 100px rgba(0,0,0,.72),0 0 0 1px rgba(200,240,74,.04) inset;backdrop-filter:blur(12px)}
.breach-stage .term::before{display:none!important}
.breach-stage .term-body{padding:18px 22px 20px}
.breach-stage [data-line]{margin:6px 0;font-size:clamp(10.5px,1.12vw,13px)}
.breach-stage .depth-hud{padding:20px;border:1px solid rgba(255,255,255,.12);border-left:2px solid var(--accent);background:rgba(10,10,11,.66);backdrop-filter:blur(12px)}

#about{grid-template-columns:minmax(330px,.76fr) minmax(520px,1.24fr);gap:16px;padding:16px;align-items:stretch}
#about .id-card{align-self:stretch;min-height:0}
#about .flip-inner,#about .face.front{height:100%}
#about .face.front{background:#111113}
#about .avatar{aspect-ratio:auto;min-height:430px;flex:1}
#about .avatar img{height:100%;object-position:center 20%}
#about .bio-copy{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,44px)}
#about .bio-copy>p{margin-bottom:18px}
#about .bio-copy>p:first-child{font-size:clamp(25px,2.6vw,39px);line-height:1.08}
#about .bio-copy>p:nth-child(2){font-size:14px;line-height:1.65;margin-bottom:0}
.about-ledger{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 4px}
.about-ledger span{padding:7px 9px;border:1px solid rgba(16,16,17,.22);border-radius:999px;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}
.js #about .life-reel.clip-reveal{clip-path:none}
#about .life-reel{height:262px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:127px 127px;grid-auto-rows:0;gap:8px;margin:22px 0 14px}
#about .life-shot{grid-row:auto;grid-column:auto;border-radius:12px}
#about .life-shot:nth-child(1){grid-column:1/5;grid-row:1/3}
#about .life-shot:nth-child(2){grid-column:5/13;grid-row:1/2}
#about .life-shot:nth-child(3){grid-column:5/9;grid-row:2/3}
#about .life-shot:nth-child(4){grid-column:9/13;grid-row:2/3}
#about .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;gap:6px}
#about .stat-grid .stat{padding:14px 12px;min-width:0}
#about .stat-grid .stat b{font-size:clamp(23px,2.35vw,34px)!important}
#about .stat-grid .stat i{font-size:10px;line-height:1.35}

@keyframes radarSweep{to{transform:rotate(360deg)}}
@keyframes breachBlink{50%{opacity:.3}}

@media(max-width:900px){
  .breach-radar{width:780px;right:-380px;opacity:.55}.breach-feed{display:none}.breach-chrome{top:68px}
  .breach-stage{grid-template-columns:1fr;gap:12px}.breach-stage .term{height:min(650px,70vh)}
  .breach-stage .depth-hud{padding:13px 16px;border-left:1px solid rgba(255,255,255,.12);border-top:2px solid var(--accent)}
  #about{grid-template-columns:1fr;gap:12px;padding:12px}
  #about .id-card{height:auto}.life-reel{grid-auto-rows:0}
}

@media(max-width:560px){
  .breach-chrome span:last-child,.packet-tape span:nth-child(even){display:none}.breach-chrome{top:62px}
  .breach-radar{width:620px;right:-390px}.breach-node::after{display:none}
  .breach-stage{width:92vw}.breach-stage .term{height:min(610px,68vh)}
  .breach-stage .term-body{padding:14px}.breach-stage [data-line]{font-size:11px;margin:4px 0}
  #about .avatar{min-height:390px}
  #about .life-reel{height:386px;grid-template-columns:1fr 1fr;grid-template-rows:124px 124px 122px}
  #about .life-shot:nth-child(1){grid-column:1/2;grid-row:1/3}
  #about .life-shot:nth-child(2){grid-column:2/3;grid-row:1/2}
  #about .life-shot:nth-child(3){grid-column:2/3;grid-row:2/3}
  #about .life-shot:nth-child(4){grid-column:1/3;grid-row:3/4}
  #about .stat-grid{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){.radar-sweep,.breach-chrome span:first-child::before{animation:none}}

/* V13 / structural reliability: fixed HUD, guaranteed media, contained tools. */
.js .interface-media.clip-reveal{clip-path:none!important}
.interface-media img{display:block!important;opacity:1}

#rail{position:fixed!important;inset:auto auto auto 12px;top:50%!important;transform:translateY(-50%)!important;contain:layout style;isolation:isolate;gap:8px;padding:14px 9px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(8,8,9,.88);box-shadow:0 16px 46px rgba(0,0,0,.34);backdrop-filter:blur(14px)}
#rail li{position:relative}
#rail li span{display:none}
#rail:hover li span{display:block;position:absolute;left:22px;top:-7px;width:max-content;padding:5px 7px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(8,8,9,.96);box-shadow:0 8px 24px rgba(0,0,0,.35)}
#rail li.active{color:var(--ink)}
#rail li.active b{color:var(--accent);text-shadow:0 0 9px var(--accent)}
#rail li.complete{color:var(--dim)}
#rail li.complete b{color:rgba(200,240,74,.42);text-shadow:none}

.tools-wall{position:relative;margin-top:40px;padding:24px;overflow:hidden}
.tools-wall::before{content:"08 / FIELD TOOLS";position:absolute;top:25px;right:25px;font:10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--dim)}
.tools-label{text-align:left;margin:0 0 20px;font-size:11px}
.tool-row,.tool-row.rev{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 0;animation:none;transform:none}
.tool-chip{position:relative;display:flex;align-items:center;min-height:56px;padding:14px 16px 14px 38px;border-radius:10px;overflow:hidden}
.tool-chip::before{content:"+";position:absolute;left:15px;color:var(--accent);font-size:11px}
.tool-chip::after{content:"";position:absolute;right:-22px;bottom:-22px;width:48px;height:48px;border:1px solid rgba(200,240,74,.09);border-radius:50%;transition:transform .45s var(--ease),border-color .3s}
.tool-chip:hover{color:var(--ink);background:#1a1a1d;border-color:rgba(200,240,74,.55)}
.tool-chip:hover::after{transform:scale(1.7);border-color:rgba(200,240,74,.3)}

@media(max-width:700px){
  .tools-wall{padding:18px}.tools-wall::before{top:19px;right:18px}
  .tool-row,.tool-row.rev{grid-template-columns:1fr 1fr}
  .tool-chip{min-height:50px;padding:12px 10px 12px 30px;font-size:11px}.tool-chip::before{left:11px}
}

@media(min-width:1181px){.tools-wall{padding-left:64px}}

/* V14 / final integrity pass. */
.btn-line{position:relative;z-index:0;isolation:isolate;overflow:hidden}
.btn-line::after{z-index:-1}
.btn-line-accent{border-color:var(--accent);color:var(--accent)}
.btn-line-accent:hover{color:#0c0c0c!important}

.live-post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.live-post-grid .post{min-height:360px}
.live-post-grid.count-1{grid-template-columns:1fr}
.live-post-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-post-grid.count-1 .post h3{max-width:920px;font-size:clamp(38px,5vw,72px)}
.live-post-grid.count-1 .post p{max-width:760px}
.live-post-grid .feed-loading{pointer-events:none}

footer{display:flex;flex-direction:column}
footer .foot-cols{order:1;margin-top:0}
footer .foot-base{order:2}
footer .foot-giant{order:3;align-self:flex-start;width:100%;margin-top:72px;text-align:left;font-size:clamp(62px,10.5vw,150px);line-height:.78}

@media(max-width:900px){.live-post-grid{grid-template-columns:1fr}.live-post-grid .post{min-height:300px}}

/* V15 / purpose-built assessment visual — no template-cover artwork. */
.interface-media{padding:18px;background:#09090a}
.interface-media::before{z-index:0}
.assessment-console{position:relative;z-index:1;height:100%;min-height:644px;display:flex;flex-direction:column;border:1px solid #303035;border-radius:18px;background:rgba(12,12,14,.94);overflow:hidden;color:#e8e5dc}
.assessment-console::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(#000,transparent 78%)}
.assessment-console::after{content:"";position:absolute;z-index:3;left:0;right:0;height:90px;top:-90px;pointer-events:none;background:linear-gradient(transparent,rgba(200,240,74,.055),transparent);animation:assessmentScan 7s linear infinite}
.console-topbar,.console-summary,.attack-map,.console-lower,.console-footer{position:relative;z-index:2}
.console-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #303035;color:var(--dim);font-size:10px;letter-spacing:.15em}
.console-topbar i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:breachBlink 1.8s steps(2,end) infinite}
.console-summary{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #303035}
.console-summary>div{padding:18px;border-right:1px solid #303035}.console-summary>div:last-child{border-right:0}
.console-summary small{display:block;margin-bottom:8px;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.14em}.console-summary strong{font:18px 'Anton',sans-serif;letter-spacing:.025em}.console-summary .status-live{color:var(--accent)}
.attack-map{padding:24px 22px 28px;border-bottom:1px solid #303035;background:radial-gradient(circle at 50% 120%,rgba(200,240,74,.08),transparent 48%)}
.map-heading{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;letter-spacing:.16em}
.path-flow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr 46px 1fr;align-items:center;margin-top:26px}
.path-flow>i{position:relative;height:1px;background:#3b3b3e;overflow:hidden}.path-flow>i::after{content:"";position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,var(--accent));animation:pathTrace 2.8s linear infinite}
.path-node{min-width:0;padding:13px;border:1px solid #323237;border-radius:11px;background:#151517;transition:.35s var(--ease)}
.path-node:hover{transform:translateY(-4px);border-color:rgba(200,240,74,.55)}
.path-node b{display:block;color:var(--dim);font:10px 'JetBrains Mono',monospace}.path-node span{display:block;margin:17px 0 5px;font:17px 'Anton',sans-serif}.path-node small{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;white-space:nowrap}
.path-node.hot{border-color:#ed765f;background:#271413}.path-node.hot span{color:#ff8068}.path-node.final{border-color:rgba(200,240,74,.55)}.path-node.final span{color:var(--accent)}
.console-lower{display:grid;grid-template-columns:.8fr 1.2fr;flex:1;min-height:210px}
.finding-stack{padding:22px;border-right:1px solid #303035}.evidence-log{padding:22px}
.severity{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:14px}.severity span{font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}.severity b{font:19px 'Anton',sans-serif}.severity i{grid-column:1/-1;height:3px;border-radius:99px;background:#242427;overflow:hidden}.severity i::after{content:"";display:block;height:100%;width:var(--severity);background:currentColor}.severity.critical{color:#ff6d59;--severity:24%}.severity.high{color:#ffa85a;--severity:48%}.severity.medium{color:#d4c96a;--severity:78%}
.evidence-log p{margin:16px 0 0;padding-bottom:10px;border-bottom:1px solid #252529;color:#92918b;font-size:10px;letter-spacing:.05em}.evidence-log p b{margin-right:12px;color:var(--dim);font-weight:400}.evidence-log .log-ok{color:var(--accent)}
.console-footer{display:flex;justify-content:space-between;padding:13px 18px;border-top:1px solid #303035;color:var(--dim);font-size:10px;letter-spacing:.13em}.console-footer span::before{content:"+";margin-right:7px;color:var(--accent)}
@keyframes assessmentScan{to{transform:translateY(820px)}}
@keyframes pathTrace{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

@media(max-width:700px){
  .interface-media{padding:8px}.assessment-console{min-height:640px}.console-summary{grid-template-columns:1fr 1fr}.console-summary>div:nth-child(2){border-right:0}.console-summary>div:last-child{grid-column:1/-1;border-top:1px solid #303035}
  .path-flow{grid-template-columns:1fr;gap:7px}.path-flow>i{width:1px;height:16px;margin:auto}.path-flow>i::after{width:100%;height:45%;background:linear-gradient(transparent,var(--accent));animation:pathTraceY 2.8s linear infinite}
  .path-node{display:grid;grid-template-columns:24px 1fr auto;align-items:center}.path-node span{margin:0}.path-node small{text-align:right}
  .console-lower{grid-template-columns:1fr}.finding-stack{border-right:0;border-bottom:1px solid #303035}.evidence-log{display:none}
}
@keyframes pathTraceY{from{transform:translateY(-100%)}to{transform:translateY(250%)}}

/* V16 / empty publishing queues after content reset. */
.archive-queue{min-height:540px;display:grid;grid-template-columns:minmax(120px,.3fr) minmax(0,1.2fr) auto;gap:clamp(24px,5vw,80px);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(circle at 74% 45%,rgba(200,240,74,.07),transparent 34%)}
.archive-queue-index{align-self:start;padding-top:10px;color:var(--dim);font-size:10px;letter-spacing:.16em}
.archive-queue-copy{max-width:800px}
.archive-queue-copy h2{margin:18px 0 22px;font:clamp(58px,8vw,126px)/.82 'Anton',sans-serif;text-transform:uppercase;letter-spacing:-.025em}
.archive-queue-copy p{max-width:650px;color:var(--dim);font-size:14px;line-height:1.7}
.archive-queue>.btn-line{align-self:end;margin-bottom:10px;white-space:nowrap}
.archive-empty{margin:0 clamp(20px,5vw,80px) 100px;padding:clamp(38px,6vw,84px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,#111113,#0b0b0c);min-height:320px;display:flex;flex-direction:column;justify-content:center}
.archive-empty .tag{margin-bottom:22px}.archive-empty h2{margin:0 0 18px;font:clamp(44px,7vw,92px)/.9 'Anton',sans-serif;text-transform:uppercase}.archive-empty p{max-width:620px;color:var(--dim);line-height:1.7}
@media(max-width:900px){.archive-queue{grid-template-columns:1fr;min-height:460px}.archive-queue-index{display:none}.archive-queue>.btn-line{justify-self:start;align-self:start;margin:0}.archive-empty{margin-inline:18px}}

/* V18 / long-form technical writeups. */
.archive-queue-live{background:radial-gradient(circle at 72% 45%,rgba(200,240,74,.12),transparent 34%),linear-gradient(135deg,#0d0e0f,#09090a)}
.archive-queue-actions{align-self:end;display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.writeup-hero{padding-bottom:60px}
.writeup-hero .article-title{max-width:1300px}
.writeup-deck{max-width:840px;margin:-10px 0 36px;color:#a4a49e;font-size:clamp(18px,2vw,28px);line-height:1.45}
.writeup-deck code{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:.8em}
.writeup-figure{width:min(1100px,calc(100vw - 40px));margin:38px auto 46px}
.writeup-figure-wide{width:min(1480px,calc(100vw - 32px));margin-top:0}
.writeup-figure picture{display:block;width:100%}
.writeup-figure img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.writeup-figure figcaption{margin-top:12px;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.writeup-notice{display:grid;grid-template-columns:180px 1fr;gap:28px;width:min(1100px,calc(100vw - 40px));margin:0 auto 38px;padding:24px 28px;border:1px solid rgba(200,240,74,.35);border-radius:16px;background:#11130d}
.writeup-notice b{color:var(--accent);font:18px 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.04em}.writeup-notice p{margin:0;color:#9b9b95;line-height:1.65}.writeup-notice a{color:#d9ec93;text-decoration:underline;text-underline-offset:3px}
.toc{position:static;inset:auto;transform:none;width:min(900px,calc(100vw - 40px));height:auto;max-width:none;margin:0 auto;padding:22px 0 8px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;z-index:auto}
.toc .toc-inner{width:100%;border-radius:16px}
.writeup-prose{max-width:900px;padding-top:34px}
.writeup-prose .lede{font-size:clamp(20px,2.4vw,28px);line-height:1.5;color:#d5d2ca}
.writeup-prose section{scroll-margin-top:100px;margin-top:72px}
.writeup-prose h2{font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.02em}
.writeup-prose h2::after{content:"";display:block;width:72px;height:3px;margin-top:18px;background:var(--accent)}
.writeup-prose p{font-size:16px;line-height:1.8;color:#aaa9a3}
.writeup-prose strong{color:#efebe3}
.writeup-prose pre{position:relative;padding:24px 26px;border-color:#35363b;box-shadow:0 18px 54px rgba(0,0,0,.22)}
.writeup-prose pre::before{content:"TERMINAL";display:block;margin-bottom:15px;color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.18em}
.writeup-prose pre code{font-size:13px;color:#d9d7cf}
.writeup-prose>.writeup-figure,.writeup-prose section>.writeup-figure{position:relative;left:50%;transform:translateX(-50%)}
/* Inline diagrams already use translateX for full-width centering. Do not let
   the generic reveal transform replace it and push them off-canvas. */
.writeup-prose>.writeup-figure.reveal,.writeup-prose section>.writeup-figure.reveal{opacity:1;transform:translateX(-50%)}
.attack-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:34px 0;border:1px solid #303137;border-radius:18px;overflow:hidden;background:#101012}
.attack-summary>div{min-height:130px;padding:18px;border-right:1px solid #303137}.attack-summary>div:last-child{border-right:0}
.attack-summary b{display:block;color:var(--accent);font:24px 'Anton',sans-serif}.attack-summary span{display:block;margin:18px 0 7px;color:#e5e2d9;font:14px 'JetBrains Mono',monospace;text-transform:uppercase}.attack-summary small{color:var(--dim);font:10px 'JetBrains Mono',monospace;line-height:1.5}
.command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0;border:1px solid #303137;border-radius:16px;overflow:hidden;background:#101012}.command-grid>div{padding:18px;border-right:1px solid #303137;border-bottom:1px solid #303137}.command-grid>div:nth-child(3n){border-right:0}.command-grid>div:nth-last-child(-n+3){border-bottom:0}.command-grid code{display:block;width:max-content;margin-bottom:10px;color:var(--accent);font-size:13px}.command-grid p{margin:0;color:var(--dim);font-size:12px;line-height:1.55}
.finding-note{display:grid;grid-template-columns:104px 1fr;gap:20px;margin:32px 0;padding:20px;border:1px solid #303137;border-radius:16px;background:#111113}
.finding-note>span{align-self:start;padding:8px 10px;border-radius:8px;text-align:center;font:11px 'JetBrains Mono',monospace;letter-spacing:.12em}.finding-note b{display:block;margin-bottom:8px;font-size:17px}.finding-note p{margin:0;font-size:14px;line-height:1.65}
.severity-critical{border-color:rgba(255,109,89,.35)}.severity-critical>span{color:#ff806a;background:rgba(255,109,89,.11)}.severity-high{border-color:rgba(255,168,90,.3)}.severity-high>span{color:#ffad61;background:rgba(255,168,90,.1)}
.findings-table-wrap{margin:30px 0;overflow-x:auto;border:1px solid #303137;border-radius:16px}
.findings-table{width:100%;min-width:780px;border-collapse:collapse;background:#101012}.findings-table th,.findings-table td{padding:17px 18px;border-bottom:1px solid #292a2e;text-align:left;vertical-align:top}.findings-table th{color:var(--dim);font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase}.findings-table td{color:#aaa9a3;font-size:13px;line-height:1.55}.findings-table tr:last-child td{border-bottom:0}.findings-table code{white-space:nowrap}.sev{display:inline-block;padding:5px 7px;border-radius:6px;font:10px 'JetBrains Mono',monospace;letter-spacing:.1em}.sev.low{color:#b9c1ba;background:#212422}.sev.high{color:#ffb16a;background:#2b1d14}.sev.critical{color:#ff806b;background:#2b1513}
.spoiler-stack{display:grid;gap:10px;margin:28px 0}.spoiler-stack details{border:1px solid #303137;border-radius:14px;background:#101012;overflow:hidden}.spoiler-stack summary{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;cursor:pointer;color:#aaa9a3;font:11px 'JetBrains Mono',monospace;letter-spacing:.14em;list-style:none}.spoiler-stack summary::-webkit-details-marker{display:none}.spoiler-stack summary b{color:var(--accent);font-size:10px}.spoiler-stack details[open] summary{border-bottom:1px solid #303137}.spoiler-stack details p{margin:0;padding:22px}.spoiler-stack details code{font-size:18px;color:var(--accent)}
.transfer-list{display:grid;gap:10px;padding:0;list-style:none}.transfer-list li{padding:16px 18px;border-left:2px solid #3b3c40;background:#101012;color:#a7a69f;line-height:1.65}.transfer-list strong{color:var(--accent)}
.references{padding-top:10px;border-top:1px solid var(--line)}.references ul{padding-left:20px}.references li{margin:9px 0;color:var(--dim)}.references a{color:#b5ca70;text-decoration:underline;text-underline-offset:3px}.references a:hover{color:var(--accent)}
@media(max-width:900px){.archive-queue-actions{align-self:start;flex-direction:row;flex-wrap:wrap;margin:0}.attack-summary{grid-template-columns:1fr 1fr}.attack-summary>div{border-bottom:1px solid #303137}.attack-summary>div:nth-child(even){border-right:0}.attack-summary>div:last-child{grid-column:1/-1}.command-grid{grid-template-columns:1fr 1fr}.command-grid>div,.command-grid>div:nth-child(3n){border-right:1px solid #303137;border-bottom:1px solid #303137}.command-grid>div:nth-child(even){border-right:0}.command-grid>div:nth-last-child(-n+2){border-bottom:0}.writeup-notice{grid-template-columns:1fr;gap:10px}.writeup-prose{padding-inline:22px}}
@media(max-width:560px){.writeup-hero{padding-bottom:38px}.writeup-deck{font-size:17px}.writeup-figure,.writeup-figure-wide{width:calc(100vw - 20px)}.writeup-figure img{border-radius:13px}.writeup-notice{width:calc(100vw - 20px);padding:19px}.writeup-prose{padding-inline:16px}.writeup-prose section{margin-top:54px}.writeup-prose p{font-size:15px}.writeup-prose pre{padding:18px 15px}.writeup-prose pre code{font-size:11px}.attack-summary{grid-template-columns:1fr}.attack-summary>div{min-height:100px;border-right:0}.attack-summary>div:last-child{grid-column:auto}.command-grid{grid-template-columns:1fr}.command-grid>div,.command-grid>div:nth-child(3n),.command-grid>div:nth-child(even),.command-grid>div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid #303137}.command-grid>div:last-child{border-bottom:0}.finding-note{grid-template-columns:1fr;gap:12px}.finding-note>span{justify-self:start}.spoiler-stack summary{padding:16px}.archive-queue-actions{flex-direction:column}}

/* V23 / conversion, trust and local-contact layer. */
.hero-response{margin:14px 0 0;color:var(--dim);font-size:11px;letter-spacing:.13em}
.hero-response span{color:var(--accent);margin-right:7px;text-shadow:0 0 10px rgba(200,240,74,.55)}
.hero-conversion{display:grid;width:min(100%,560px);gap:14px}
.hero-conversion .hero-actions{justify-content:flex-start}
.hero-trust{padding:15px 16px;border:1px solid rgba(200,240,74,.24);border-radius:16px;background:rgba(11,12,12,.78);box-shadow:0 16px 42px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.hero-trust-label{display:block;margin-bottom:11px;color:var(--accent);font-size:10px;letter-spacing:.13em}
.hero-trust ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.hero-trust li{display:grid;align-content:start;gap:4px;min-width:0;padding:0 12px;border-left:1px solid var(--line)}
.hero-trust li:first-child{padding-left:0;border-left:0}
.hero-trust li:last-child{padding-right:0}
.hero-trust b{color:#f1efe8;font:24px/.95 'Anton',sans-serif;letter-spacing:.02em}
.hero-trust li span{color:var(--dim);font:10px/1.45 'JetBrains Mono',monospace;letter-spacing:.08em}
.hero-conversion .hero-response{max-width:none;margin:0;font-size:10px}
.team-section{display:grid;grid-template-columns:minmax(280px,460px) minmax(0,1fr);gap:clamp(34px,6vw,90px);align-items:center}
.team-photo{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#101012}
.team-photo::after{content:"REAL OPERATOR / NO STOCK PHOTO";position:absolute;left:18px;bottom:18px;padding:8px 10px;border-radius:999px;background:rgba(9,9,10,.88);color:var(--accent);font:10px 'JetBrains Mono',monospace;letter-spacing:.11em}
.team-photo img{display:block;width:100%;height:auto;filter:grayscale(1);transition:filter .35s ease,transform .5s var(--ease)}
.team-photo:hover img{filter:grayscale(.2);transform:scale(1.018)}
.team-copy h2{max-width:800px;margin:24px 0;font:clamp(48px,7vw,104px)/.88 'Anton',sans-serif;text-transform:uppercase}
.team-copy p{max-width:720px;color:var(--dim);font-size:17px;line-height:1.75}
.team-proof{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0;padding:0;list-style:none}
.team-proof li{padding:10px 12px;border:1px solid var(--line);border-radius:999px;color:#b7b7b0;font-size:11px;letter-spacing:.08em}
.case-studies{background:linear-gradient(180deg,rgba(200,240,74,.025),transparent)}
.case-study-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case-study-card{display:flex;min-height:500px;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:24px;background:#111113}
.case-study-card>span{color:var(--accent);font-size:11px;letter-spacing:.13em}
.case-study-card h3{margin:42px 0 24px;font:clamp(30px,3.2vw,52px)/.95 'Anton',sans-serif;text-transform:uppercase}
.case-study-card p{margin:8px 0;color:#95958f;line-height:1.65}
.case-study-card p b{color:#dedbd3}
.case-study-card a{margin-top:auto;padding-top:26px;color:var(--accent);font:11px 'JetBrains Mono',monospace;letter-spacing:.08em}
.faq-section{max-width:1180px;margin-inline:auto}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;cursor:pointer;color:#e8e5dd;font-size:18px;font-weight:600;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--accent);font:25px 'JetBrains Mono',monospace}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{max-width:820px;margin:0;padding:0 0 25px;color:var(--dim);line-height:1.75}
.faq-list a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.contact-location{margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#101012}
.contact-location strong{display:block;margin-bottom:10px;color:var(--accent);font:11px 'JetBrains Mono',monospace;letter-spacing:.12em}
.contact-location address{max-width:500px;color:#a6a59f;font-style:normal;line-height:1.6}
.contact-routes{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.contact-routes a{padding:9px 11px;border:1px solid #38393d;border-radius:999px;color:#d4d1ca;font:10px 'JetBrains Mono',monospace;letter-spacing:.09em}
.contact-help{margin-top:12px;color:var(--dim);font-size:10px;line-height:1.6;letter-spacing:.08em}
.breadcrumbs{position:relative;z-index:20;width:min(1180px,calc(100% - 40px));margin:104px auto -78px;color:var(--dim);font-size:11px;letter-spacing:.1em}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.breadcrumbs a{color:#a5a59f}.breadcrumbs a:hover{color:var(--accent)}
.mobile-cta{display:none}
.simple-page{min-height:72vh;padding-top:150px}
.simple-page-shell{width:min(980px,calc(100% - 40px));margin:0 auto;padding:clamp(30px,6vw,78px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#121214,#0b0b0c)}
.simple-page h1{margin:18px 0 26px;font:clamp(54px,9vw,128px)/.85 'Anton',sans-serif;text-transform:uppercase}
.simple-page h2{margin:42px 0 12px;font:28px 'Anton',sans-serif;text-transform:uppercase}
.simple-page p,.simple-page li{color:#aaa9a3;line-height:1.75}
.simple-page a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.simple-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

@media(max-width:900px){
  .team-section{grid-template-columns:1fr}
  .team-photo{width:min(460px,100%)}
  .case-study-grid{grid-template-columns:1fr}
  .case-study-card{min-height:0}
  .breadcrumbs{margin-top:90px;margin-bottom:-62px}
}
@media(max-width:720px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .mobile-cta{position:fixed;z-index:80;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px;border:1px solid #35363a;border-radius:17px;background:rgba(10,10,11,.94);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(18px);transition:opacity .25s,transform .25s}
  .mobile-cta.is-hidden{opacity:0;transform:translateY(120%);pointer-events:none}
  .mobile-cta a{display:grid;min-height:44px;place-items:center;padding:0 16px;border-radius:11px;background:var(--accent);color:#09090a;font:11px 'JetBrains Mono',monospace;font-weight:700;letter-spacing:.09em}
  .mobile-cta a:last-child{background:#202124;color:#f1f0eb}
  .hero-conversion{width:100%}
  .hero-trust ul{grid-template-columns:1fr}
  .hero-trust li,.hero-trust li:first-child,.hero-trust li:last-child{grid-template-columns:72px 1fr;align-items:center;padding:9px 0;border-left:0;border-top:1px solid var(--line)}
  .hero-trust li:first-child{border-top:0}
  .hero-trust b{font-size:22px}
  .contact-routes{flex-direction:column}.contact-routes a{text-align:center}
  .simple-page{padding-top:118px}.simple-page-shell{width:calc(100% - 20px);padding:28px 20px;border-radius:20px}
}
@media(max-width:380px){
  footer .foot-cols{grid-template-columns:1fr}
  footer .foot-cols>div{min-width:0}
  header#top .hero-title{max-width:100%;font-size:clamp(52px,18vw,72px)}
  header#top .hero-sub{max-width:100%}
  .mobile-cta{left:6px;right:6px}
}


/* ===================== audit fixes, 2026-09-14 =====================
   Each block references the finding it closes. */

/* P1: one authority for the button colour. styles.css said var(--accent) (lime) while the
   curated layer said #0a0a0b, so the CTA rendered lime-on-lime with the label invisible. */
.btn, a.btn, .btn:visited { color: #0a0a0b; background: var(--accent); border-color: var(--accent); }
.btn:hover, a.btn:hover { color: #0a0a0b; background: var(--ink); }

/* P3: the SFX control is an icon button on every page (it was 0px on some pages, 11px on
   others, which showed the raw glyph-and-label text twice). */
#sfx-toggle { font-size: 0; }
#sfx-toggle::before { content: "\266A"; font: 18px 'JetBrains Mono', monospace; }
#sfx-toggle.on::before { content: "\266B"; }

/* P6: the two large highlighted runs were 2.57:1 and 1.89:1. Dark ink on the coloured
   panels keeps the design and clears the 3:1 threshold for large text. */
.interface-copy { background: #e8553c; }
.interface-copy h2 em, .interface-copy em { color: #14060a; }
.interface-media em, .interface-media h2 em { color: #06121f; }

/* P7: mobile tap targets. WCAG 2.2 AA wants 24x24 minimum, 44x44 is the practical target. */
footer a, .foot-cols a, .foot-base a,
.toc a, .toc-inner a,
.privacy-list a, .prose ol a { min-height: 44px; display: inline-flex; align-items: center; }
a[href^="mailto:"], a[href^="tel:"] { display: inline-block; min-height: 44px; line-height: 44px; }
input:not([type=checkbox]):not([type=radio]), textarea, select { min-height: 44px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }

/* P9: readable line length. Body copy measured 103-140 characters; this brings it to ~76. */
.prose { max-width: 76ch; }
.prose p, .prose li { max-width: 76ch; }

/* P10: tool chips clipped their labels by 22px. Let them wrap instead of hiding the overflow. */
.tool-chip { white-space: normal; min-width: 0; overflow-wrap: anywhere; }

/* P8: the footer column labels were H3 directly under the page H1 on pages without an H2,
   which breaks heading order. They are now H2, styled identically to before. */
.foot-cols h2, .foot-cols h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .2em;
  margin-bottom: 16px;
}

/* Screen-reader-only landmark used to give the featured writeup section a valid parent heading. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== second pass: element-level fixes found by re-auditing the merged sheet ===== */

/* P9: tighten the article measure and cap over-long paragraphs. The [class] variants are
   needed because class-scoped rules elsewhere (e.g. `.press p`) outrank a bare element
   selector regardless of order. */
.prose, .prose p, .prose li { max-width: 70ch; }
p, li, [class] p, [class] li, div p, section p, main p { max-width: 78ch; }

/* P6: cream text on the light-blue press panel measured 1.89:1. Use the panel's own ink. */
.pre em, .pre h2 em, div[class*="pre"] em { color: #0b0b0c; }

/* P6: the flip card's front face is dark (#111113) but its text resolved to dark ink
   (#101011), i.e. dark on dark at 1.01:1. Use the light ink. */
.face.front, .face.front dd, .face.front dt, .face.front p, .face.front dl { color: var(--ink); }

/* P6 + P11: the about card is the site's one light panel (#f2efe8). The grey-collapse pass
   turned its labels into --dim (light) and they dropped to 2.67:1, so restore the dark ink
   for text inside it. */
.bio-copy, .bio-copy span, .bio-copy small, .bio-copy .tag,
.bio-copy dd, .bio-copy dt, .bio-copy p { color: var(--paper-ink, #101011); }

/* P6: the TryHackMe proof badge was 3.84:1 (red on the light panel). Darken the red so it
   clears 4.5:1, scoped to the light panel's proof list only. The same red is also used for
   large numerals inside dark blocks nested in that panel, where darkening it would reduce
   contrast instead, so it must not be applied broadly. */
.bio-copy p.reveal b, .bio-copy .proofs b, .bio-copy dl b { color: #a8311c; }
/* The rule that actually wins here is ID-scoped
   (`#about .bio-copy>p:nth-child(2) b{color:#d7442f}`), so match its specificity to override it. */
#about .bio-copy>p:nth-child(2) b, #about .bio-copy>p:first-child b,
#about .bio-copy>p:nth-child(2) strong, #about .bio-copy>p:first-child strong { color: #a8311c; }

/* P7: the consent checkbox was 22px; WCAG 2.2 AA wants a 24px minimum. */
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }

/* P6 (robustness): the large display headings are drawn with -webkit-text-stroke and
   color:transparent, so they vanish entirely in Windows High Contrast / forced-colors mode. */
@media (forced-colors: active) {
  .outline, [class*="outline"], .foot-giant, .nf-code, .lead-num, .pre em {
    color: CanvasText !important;
    -webkit-text-stroke: 0 !important;
  }
}