:root{
    --void:#02040C;
    --void-2:#050A1C;
    --panel:#0C1224;
    --panel-2:#11182E;
    --panel-3:#161E3A;
    --line:#232E4E;
    --line-soft:#161D34;
    --bone:#E9EEFB;
    --steel:#7A87AC;
    --steel-dim:#454F72;
    --granted:#3FA9FF;
    --granted-2:#7FD4FF;
    --granted-glow:rgba(63,169,255,.4);
    --granted-dim:#1C3A66;
    --denied:#F2545B;
    --denied-dim:#4A2226;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ scroll-behavior:smooth; }
  body{
    background:
      radial-gradient(ellipse 1100px 650px at 12% -8%, rgba(63,169,255,.12), transparent 55%),
      radial-gradient(ellipse 900px 600px at 100% 30%, rgba(127,212,255,.06), transparent 50%),
      linear-gradient(180deg, var(--void-2) 0%, var(--void) 55%, #000000 100%);
    color:var(--bone);
    font-family:'Inter',sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  #netbg{
    position:fixed; inset:0; z-index:-2; width:100%; height:100%;
    opacity:.55;
  }
  body::before{
    content:'';
    position:fixed; top:0; left:-5%; width:110%; height:100vh; z-index:-1;
    background:linear-gradient(115deg, transparent 49.85%, rgba(127,212,255,.14) 50%, transparent 50.15%);
    mask-image:linear-gradient(to bottom, black, transparent 40%);
    pointer-events:none;
  }
  /* cursor glow follower */
  #cursor-glow{
    position:fixed; width:420px; height:420px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(63,169,255,.08), transparent 70%);
    pointer-events:none; left:0; top:0;
    transform:translate(-50%,-50%);
    transition:opacity .3s;
    opacity:0;
  }
  #depth-reveal{
    position:fixed; left:0; right:0; bottom:0; height:70vh; z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(ellipse 900px 500px at 50% 100%, rgba(63,169,255,.16), transparent 65%);
    opacity:0;
    transition:opacity .6s ease;
  }
  #depth-reveal svg{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(1400px, 160vw); opacity:.5; }
  .display{ font-family:'Space Grotesk',sans-serif; }
  .mono{ font-family:'Space Mono',monospace; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--granted); color:#04100E; }
  :focus-visible{ outline:2px solid var(--granted); outline-offset:3px; }

  .wrap{ max-width:1040px; margin:0 auto; padding:0 32px; }

  /* ---------- BOOT ---------- */
  #boot{
    position:fixed; inset:0; z-index:200; background:var(--void);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .6s ease, visibility .6s ease;
  }
  #boot.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  #boot-log{ font-family:'Space Mono',monospace; font-size:13px; color:var(--steel); width:min(560px, 86vw); }
  #boot-log .line{ opacity:0; margin-bottom:9px; display:flex; gap:10px; }
  #boot-log .line .ok{ color:var(--granted); }
  #boot-log .cursor{ display:inline-block; width:7px; height:14px; background:var(--granted); vertical-align:middle; animation:blink 1s step-end infinite; }
  @keyframes blink{ 50%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ #boot{ display:none; } }

  /* ---------- reveal system ---------- */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .reveal-stagger.in > *{ opacity:1; transform:none; }
  .reveal-stagger.in > *:nth-child(1){ transition-delay:.03s; }
  .reveal-stagger.in > *:nth-child(2){ transition-delay:.09s; }
  .reveal-stagger.in > *:nth-child(3){ transition-delay:.15s; }
  .reveal-stagger.in > *:nth-child(4){ transition-delay:.21s; }
  .reveal-stagger.in > *:nth-child(5){ transition-delay:.27s; }
  .reveal-stagger.in > *:nth-child(6){ transition-delay:.33s; }
  .reveal-stagger.in > *:nth-child(7){ transition-delay:.39s; }
  .reveal-stagger.in > *:nth-child(8){ transition-delay:.45s; }
  .reveal-stagger.in > *:nth-child(9){ transition-delay:.51s; }
  .reveal-stagger.in > *:nth-child(10){ transition-delay:.57s; }
  .reveal-stagger.in > *:nth-child(11){ transition-delay:.63s; }
  .reveal-stagger.in > *:nth-child(12){ transition-delay:.69s; }
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(9,11,16,.78);
    backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{ max-width:1040px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; }
  .nav-id{ font-size:13.5px; color:var(--steel); display:flex; align-items:center; letter-spacing:.01em; }
  .nav-id b{ color:var(--bone); font-weight:600; font-family:'Space Grotesk',sans-serif; letter-spacing:.01em; transition:color .3s ease; }
  .nav-id:hover b{ color:var(--granted-2); }
  .nav-links{ display:flex; gap:26px; font-size:13px; }
  .nav-links a{ color:var(--steel); transition:color .3s ease; cursor:pointer; }
  .nav-links a:hover, .nav-links a.active{ color:var(--granted); }
  .status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--granted); margin-right:9px; box-shadow:0 0 0 0 var(--granted-glow); animation:pulse 2.4s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 var(--granted-glow);} 70%{box-shadow:0 0 0 9px rgba(63,169,255,0);} 100%{box-shadow:0 0 0 0 rgba(63,169,255,0);} }

  /* progress bar */
  #progress{ position:fixed; top:0; left:0; height:2px; background:var(--granted); z-index:60; width:0%; box-shadow:0 0 8px var(--granted-glow); transition:width .1s linear; }

  /* ---------- HERO ---------- */
  .hero{ padding:120px 0 90px; position:relative; }
  .hero-grid-bg{
    position:absolute; inset:0; top:0; height:640px; z-index:-1;
    background-image:
      linear-gradient(rgba(63,169,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(63,169,255,.05) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse 700px 500px at 20% 10%, black, transparent 75%);
  }
  .log-line{
    font-size:12.5px; color:var(--granted); display:inline-flex; align-items:center; gap:9px;
    background:rgba(63,169,255,.06); border:1px solid var(--granted-dim);
    padding:7px 14px; border-radius:100px; margin-bottom:32px;
  }
  h1.display{
    font-size:clamp(40px,7vw,74px); line-height:1.0; letter-spacing:-.02em; font-weight:700; max-width:13ch;
    background:linear-gradient(180deg, var(--bone) 40%, #A9B7B5 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero p.role{ margin-top:22px; font-size:18.5px; color:var(--steel); max-width:56ch; }
  .hero p.role span{ color:var(--bone); font-weight:500; }
  .hero-cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }

  .btn{
    font-size:13.5px; font-family:'Space Mono',monospace; padding:13px 22px; border-radius:8px;
    border:1px solid var(--line); transition:border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
    display:inline-block; cursor:pointer; background:none; color:inherit;
  }
  .btn:hover{ transform:translateY(-3px); }
  .btn.primary{ background:var(--granted); color:#020712; border-color:var(--granted); font-weight:700; }
  .btn.primary:hover{ box-shadow:0 10px 36px -6px var(--granted-glow); background:var(--granted-2); }
  .btn.ghost{ color:var(--steel); }
  .btn.ghost:hover{ color:var(--bone); border-color:var(--granted-dim); box-shadow:0 0 0 1px var(--granted-dim); }

  /* ---------- SECTION SHARED ---------- */
  section{ padding:84px 0; border-top:1px solid var(--line-soft); }
  .eyebrow{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.09em; text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
  .eyebrow .tag{ padding:3px 10px; border-radius:100px; font-size:11px; }
  .tag.granted{ background:rgba(63,169,255,.1); color:var(--granted); border:1px solid var(--granted-dim); }
  .tag.denied{ background:rgba(242,84,91,.09); color:var(--denied); border:1px solid var(--denied-dim); }
  .eyebrow .rule{ flex:1; height:1px; background:var(--line); }
  h2.display{ font-size:30px; margin-bottom:38px; letter-spacing:-.01em; font-weight:600; }

  /* ---------- BIO ---------- */
  .bio-layout{ display:grid; grid-template-columns:1fr 1.4fr; gap:50px; align-items:start; }
  .bio-marker{
    font-family:'Space Mono',monospace; font-size:12px; color:var(--granted);
    display:flex; flex-direction:column; gap:10px; position:sticky; top:100px;
  }
  .bio-marker .row{ display:flex; justify-content:space-between; color:var(--steel); border-bottom:1px dashed var(--line); padding-bottom:8px; }
  .bio-marker .row b{ color:var(--bone); font-family:'Space Grotesk',sans-serif; font-weight:600; }
  .bio-text p{ font-size:16px; color:#C7CCD4; margin-bottom:18px; max-width:60ch; }
  .bio-text p:first-child{ font-size:19px; color:var(--bone); font-family:'Space Grotesk',sans-serif; font-weight:500; line-height:1.5; }
  .bio-text .accent{ color:var(--granted); }

  /* ---------- FOCUS ---------- */
  .focus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .focus-card{
    background:linear-gradient(160deg, var(--panel-3), var(--panel));
    border:1px solid var(--line); border-radius:14px; padding:26px; position:relative; overflow:hidden;
    transition:border-color .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .focus-card:hover{ border-color:var(--granted-dim); transform:translateY(-8px) scale(1.01); box-shadow:0 20px 50px -20px rgba(63,169,255,.25); }
  .focus-card::after{
    content:''; position:absolute; top:-40%; left:-40%; width:60%; height:180%;
    background:linear-gradient(120deg, transparent, rgba(127,212,255,.06), transparent);
    transform:rotate(20deg) translateX(-200%); transition:transform .6s ease; pointer-events:none;
  }
  .focus-card:hover::after{ transform:rotate(20deg) translateX(200%); }
  .focus-card .code{ font-family:'Space Mono',monospace; font-size:11px; color:var(--steel); }
  .focus-card h3{ font-size:18px; margin:14px 0 10px; font-weight:600; font-family:'Space Grotesk',sans-serif; }
  .focus-card p{ font-size:13.5px; color:var(--steel); }
  .focus-card .links{ display:flex; gap:14px; margin-top:14px; position:relative; z-index:1; }
  .focus-card .links a{ font-family:'Space Mono',monospace; font-size:11px; color:var(--granted); border-bottom:1px dashed var(--granted-dim); transition:color .2s, border-color .2s; }
  .focus-card .links a:hover{ color:var(--granted-2); border-color:var(--granted-2); }

  /* ---------- STACK ---------- */
  .stack-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
  .stack-item{
    background:var(--panel); border:1px solid var(--line-soft); border-radius:10px;
    padding:16px 10px; text-align:center; transition:border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease;
    cursor:default;
  }
  .stack-item:hover{ border-color:var(--granted-dim); transform:translateY(-6px) scale(1.04); background:var(--panel-2); box-shadow:0 14px 30px -14px rgba(63,169,255,.3); }
  .stack-item .glyph{ font-family:'Space Mono',monospace; font-size:20px; color:var(--granted); margin-bottom:8px; display:block; }
  .stack-item .name{ font-size:11.5px; color:var(--steel); font-family:'Space Mono',monospace; }
  .stack-item:hover .name{ color:var(--bone); }

  /* ---------- METHOD ---------- */
  .method{ display:flex; flex-direction:column; }
  .step{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line-soft); transition:padding-left .35s cubic-bezier(.16,1,.3,1); }
  .step:first-child{ border-top:none; }
  .step:hover{ padding-left:12px; }
  .step:hover .num{ text-shadow:0 0 12px var(--granted-glow); }
  .num{ transition:text-shadow .3s ease; }
  .step .num{ font-family:'Space Mono',monospace; color:var(--granted); font-size:13px; padding-top:3px; }
  .step h4{ font-size:16px; margin-bottom:5px; font-weight:600; font-family:'Space Grotesk',sans-serif; }
  .step p{ font-size:13.5px; color:var(--steel); max-width:60ch; }

  /* ---------- FEED ---------- */
  .feed-item{
    display:block; padding:22px; margin-bottom:12px; border-radius:12px; border:1px solid var(--line-soft);
    background:var(--panel); cursor:pointer; transition:border-color .3s cubic-bezier(.16,1,.3,1), background .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  }
  .feed-item:hover{ border-color:var(--granted-dim); background:var(--panel-2); transform:translateX(6px); box-shadow:-6px 0 24px -10px rgba(63,169,255,.3); }
  .feed-meta{ display:flex; gap:11px; align-items:center; font-family:'Space Mono',monospace; font-size:11px; color:var(--steel); margin-bottom:8px; }
  .feed-meta .type{ padding:2px 8px; border-radius:5px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.03em; }
  .feed-title{ font-size:17px; font-weight:600; font-family:'Space Grotesk',sans-serif; transition:color .2s; }
  .feed-item:hover .feed-title{ color:var(--granted); }
  .feed-summary{ font-size:13.5px; color:var(--steel); margin-top:6px; max-width:66ch; }
  .feed-tags{ margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
  .feed-tags span{ font-family:'Space Mono',monospace; font-size:10.5px; color:var(--steel); background:rgba(255,255,255,.03); border:1px solid var(--line); padding:2px 8px; border-radius:5px; }
  .empty{ color:var(--steel); font-size:14px; padding:20px 0; }

  /* ---------- STATS ---------- */
  .stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .stat{ background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:24px 18px; transition:border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
  .stat:hover{ border-color:var(--granted-dim); transform:translateY(-5px); box-shadow:0 14px 34px -16px rgba(63,169,255,.3); }
  .stat .n{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; color:var(--granted); }
  .stat .l{ font-size:11px; color:var(--steel); margin-top:5px; text-transform:uppercase; letter-spacing:.05em; }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:flex; gap:16px; flex-wrap:wrap; }
  .contact-card{ flex:1; min-width:190px; background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:22px; transition:border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; }
  .contact-card:hover{ border-color:var(--granted-dim); background:var(--panel-2); transform:translateY(-5px); box-shadow:0 16px 40px -18px rgba(63,169,255,.35); }
  .contact-card .k{ font-family:'Space Mono',monospace; font-size:12.5px; font-weight:700; color:var(--bone); text-transform:uppercase; letter-spacing:.04em; position:relative; z-index:1; }
  .contact-card .v{ font-size:15.5px; margin-top:8px; font-weight:600; font-family:'Space Grotesk',sans-serif; position:relative; z-index:1; }
  .contact-card .icon{
    position:absolute; right:6px; bottom:6px; width:56px; height:56px;
    opacity:0; transform:scale(.85) rotate(-6deg);
    transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
    color:var(--granted); pointer-events:none;
  }
  .contact-card:hover .icon{ opacity:.16; transform:scale(1) rotate(0deg); }
  .contact-card .icon svg{ width:100%; height:100%; }

  footer{ padding:44px 0 70px; text-align:center; border-top:1px solid var(--line-soft); }
  footer p{ font-size:12px; color:var(--steel); font-family:'Space Mono',monospace; }

  /* ---------- post view ---------- */
  .post-view{ padding:110px 0 70px; }
  .back{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--steel); display:inline-flex; align-items:center; gap:7px; margin-bottom:30px; cursor:pointer; transition:color .3s ease, gap .3s ease; }
  .back:hover{ color:var(--granted); gap:11px; }
  .post-title{ font-size:clamp(28px,4.5vw,42px); font-weight:700; letter-spacing:-.015em; margin:16px 0 12px; font-family:'Space Grotesk',sans-serif; }
  .post-body{ margin-top:32px; font-size:16.5px; color:#CBD0D8; max-width:70ch; }
  .post-body p{ margin-bottom:20px; white-space:pre-wrap; }

  [hidden]{ display:none !important; }

  @media (max-width:820px){
    .bio-layout{ grid-template-columns:1fr; }
    .bio-marker{ position:static; flex-direction:row; flex-wrap:wrap; gap:16px; }
    .stack-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:720px){
    .focus-grid{ grid-template-columns:1fr; }
    .stat-strip{ grid-template-columns:repeat(2,1fr); }
    .nav-links{ display:none; }
    .hero{ padding:90px 0 60px; }
  }

/* ---------- FEATURED SHOWCASE ---------- */
  .showcase{
    border:1px solid var(--granted-dim);
    border-radius:18px;
    padding:0;
    overflow:hidden;
    background:linear-gradient(160deg, var(--panel-2), var(--void-2));
    position:relative;
  }
  .showcase::before{
    content:'';
    position:absolute; inset:0; z-index:0;
    background:radial-gradient(ellipse 700px 400px at 90% -10%, rgba(63,169,255,.14), transparent 60%);
    pointer-events:none;
  }
  .showcase-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--line-soft);
    background:rgba(0,0,0,.2);
    position:relative; z-index:1;
  }
  .showcase-dots{ display:flex; gap:7px; }
  .showcase-dots span{ width:10px; height:10px; border-radius:50%; background:var(--line); }
  .showcase-tag{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em;
    color:var(--granted); background:rgba(63,169,255,.1); border:1px solid var(--granted-dim);
    padding:4px 12px; border-radius:100px; text-transform:uppercase;
  }
  .showcase-body{
    display:grid; grid-template-columns:1.1fr 1fr; gap:0;
    position:relative; z-index:1;
  }
  .showcase-info{ padding:36px 40px; }
  .showcase-info h3{
    font-family:'Space Grotesk',sans-serif; font-size:clamp(22px,3vw,30px);
    font-weight:700; line-height:1.25; margin-bottom:16px;
  }
  .showcase-info h3 .arrow{ color:var(--granted); font-weight:400; margin:0 4px; }
  .showcase-info p.lede{ font-size:14.5px; color:var(--steel); margin-bottom:24px; max-width:52ch; }
  .showcase-progress{ margin-bottom:26px; }
  .showcase-progress .bar-row{ display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--steel); margin-bottom:8px; }
  .showcase-progress .bar-track{ height:6px; border-radius:100px; background:var(--panel-3); overflow:hidden; }
  .showcase-progress .bar-fill{ height:100%; background:linear-gradient(90deg, var(--granted), var(--granted-2)); border-radius:100px; }
  .showcase-checklist{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
  .showcase-checklist .item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--steel); }
  .showcase-checklist .box{
    flex-shrink:0; width:16px; height:16px; border-radius:4px; margin-top:1px;
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .showcase-checklist .item.done .box{ background:var(--granted); border-color:var(--granted); color:#020712; font-size:11px; font-weight:700; }
  .showcase-checklist .item.done span.label{ color:var(--bone); }
  .showcase-cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .showcase-shot{
    position:relative; padding:24px; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.15); border-left:1px solid var(--line-soft);
  }
  .showcase-shot .frame{
    border-radius:10px; overflow:hidden; border:1px solid var(--line);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
    transform:rotate(-1.2deg);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .showcase-shot:hover .frame{ transform:rotate(0deg) scale(1.02); }
  .showcase-shot img{ display:block; width:100%; height:auto; }
  .showcase-shot .caption{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    font-family:'Space Mono',monospace; font-size:10.5px; color:var(--steel);
    background:rgba(5,10,28,.85); padding:5px 12px; border-radius:100px; border:1px solid var(--line-soft);
    white-space:nowrap;
  }
  @media (max-width:820px){
    .showcase-body{ grid-template-columns:1fr; }
    .showcase-shot{ border-left:none; border-top:1px solid var(--line-soft); }
  }