/* ---------- TOKENS ---------- */
  :root{
    --bg:        #0a0a0a;
    --bg-1:     #0e0e0e;
    --bg-2:     #141414;
    --line:     #1f1f1f;
    --line-2:   #2a2a2a;
    --text:     #ece9e2;
    --text-dim: #8a8881;
    --muted:    #4a4944;
    --accent:   #c1ff00;   /* electric lime */
    --danger:   #ff3a4d;
    --warn:     #ffb000;
    --ok:       #6dffae;

    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    --serif:"Instrument Serif", ui-serif, Georgia, serif;

    --maxw: 1400px;
    --pad:  clamp(20px, 4vw, 56px);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-feature-settings:"ss01","cv11";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    cursor:none;
  }
  @media (hover:none){ body{cursor:auto} .cursor{display:none!important} }

  ::selection{ background:var(--accent); color:#000 }

  /* film grain */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:9998;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.05; mix-blend-mode:overlay;
  }
  /* scanlines on hero */
  .scan{
    position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.012) 2px 3px);
    z-index:1;
  }

  /* custom cursor */
  .cursor{
    position:fixed; top:0; left:0;
    width:8px; height:8px;
    background:var(--accent);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    transition: width .15s ease, height .15s ease, background .15s ease, border-color .15s ease;
    will-change: transform;
  }
  .cursor.lg{ width:42px; height:42px; background:transparent; border:1px solid var(--accent) }

  /* utilities */
  .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad) }
  .mono{ font-family:var(--mono); letter-spacing:.02em }
  .serif{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .small{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim) }
  .accent{ color:var(--accent) }
  .dim{ color:var(--text-dim) }
  .muted{ color:var(--muted) }
  a{ color:inherit; text-decoration:none }

  /* ---------- BOOT INTRO ---------- */
  .boot{
    position:fixed; inset:0; z-index:10000;
    background:#000; color:var(--text);
    display:flex; flex-direction:column;
    padding: clamp(24px, 5vw, 60px);
    font-family:var(--mono);
    overflow:hidden;
    transition: opacity .8s ease;
  }
  .boot.gone{ opacity:0; pointer-events:none }
  .boot::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
    pointer-events:none;
  }
  .boot-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    font-size:11px; color:var(--text-dim);
    letter-spacing:.18em; text-transform:uppercase;
    z-index:2;
  }
  .boot-head .accent{ color:var(--accent) }
  .boot-head .led{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); margin-right:8px; animation:pulse 1s infinite }
  .boot-mid{
    flex:1; display:flex; flex-direction:column; justify-content:center;
    z-index:2; gap: 24px;
  }
  .boot-title{
    font-family:var(--sans); font-weight:500;
    font-size: clamp(40px, 7vw, 100px);
    letter-spacing:-.04em; line-height:.9; margin:0;
  }
  .boot-title .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .boot-title .lime{ color:var(--accent) }
  .boot-log{
    font-size:12px; color:var(--text-dim);
    height: 220px; overflow:hidden;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding: 14px 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  }
  .boot-log .l{ display:grid; grid-template-columns: 80px 80px 1fr; gap:14px; padding:3px 0; white-space:nowrap }
  .boot-log .l .t{ color:var(--muted) }
  .boot-log .l .ok{ color:var(--ok) }
  .boot-log .l .warn{ color:var(--warn) }
  .boot-log .l .bad{ color:var(--danger) }
  .boot-log .l .info{ color:var(--text-dim) }
  .boot-progress{
    display:grid; grid-template-columns: auto 1fr auto; gap:18px; align-items:center;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim);
  }
  .boot-progress .bar{
    position:relative; height:1px; background:var(--line-2);
  }
  .boot-progress .bar i{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:var(--accent); box-shadow:0 0 12px var(--accent);
    transition: width .15s linear;
  }
  .boot-foot{
    display:flex; justify-content:space-between;
    font-size:11px; color:var(--text-dim);
    letter-spacing:.18em; text-transform:uppercase;
    z-index:2;
  }
  .boot-skip{
    color:var(--text-dim); cursor:none; background:transparent;
    border:1px solid var(--line-2); padding:8px 14px;
    font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    transition: all .25s;
  }
  .boot-skip:hover{ border-color:var(--accent); color:var(--accent) }
  .boot-granted{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:#000; color:var(--accent);
    font-family:var(--sans); font-weight:500;
    font-size: clamp(48px, 8vw, 120px); letter-spacing:-.04em;
    opacity:0; pointer-events:none;
    z-index:3;
  }
  .boot-granted.show{ animation: granted 1s ease forwards }
  @keyframes granted{
    0%{ opacity:0; transform:scale(.98) }
    20%{ opacity:1; transform:scale(1) }
    100%{ opacity:1 }
  }
  .boot-granted .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }

  /* ---------- FORENSIC MODE ---------- */
  .forensic-toggle{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:11px;
    color:var(--text-dim); letter-spacing:.14em;
    background:transparent; border:1px solid var(--line-2);
    padding:5px 10px; cursor:none;
    transition: all .25s;
    text-transform:uppercase;
  }
  .forensic-toggle:hover{ border-color:var(--accent); color:var(--text) }
  .forensic-toggle .swt{
    width:24px; height:12px; background:var(--line-2);
    position:relative; transition: background .25s;
  }
  .forensic-toggle .swt::after{
    content:""; position:absolute; top:1px; left:1px;
    width:10px; height:10px; background:var(--text-dim);
    transition: all .25s;
  }
  body.forensic .forensic-toggle{ border-color:var(--accent); color:var(--accent) }
  body.forensic .forensic-toggle .swt{ background:var(--accent) }
  body.forensic .forensic-toggle .swt::after{ left:13px; background:#000 }

  /* metadata chips reveal */
  .meta-chip{
    position:absolute;
    font-family:var(--mono); font-size:10px;
    color:var(--accent); letter-spacing:.12em; text-transform:uppercase;
    background:rgba(10,10,10,.85); backdrop-filter: blur(6px);
    border:1px solid var(--accent); padding:5px 9px;
    pointer-events:none;
    opacity:0; transform: translateY(-4px);
    transition: opacity .35s ease, transform .35s ease;
    z-index: 5;
    white-space:nowrap;
  }
  .meta-chip::before{
    content:""; position:absolute; left:-6px; top:50%; width:6px; height:1px; background:var(--accent);
  }
  body.forensic .meta-chip{ opacity:1; transform: translateY(0) }

  /* scanner cursor (forensic mode) */
  body.forensic .cursor{
    width:60px; height:60px; background:transparent;
    border:1px solid var(--accent);
    mix-blend-mode: normal;
  }
  body.forensic .cursor::before, body.forensic .cursor::after{
    content:""; position:absolute; left:50%; top:50%; background:var(--accent);
  }
  body.forensic .cursor::before{
    width:1px; height:80px; transform:translate(-50%,-50%);
    box-shadow: 0 0 10px var(--accent);
  }
  body.forensic .cursor::after{
    width:80px; height:1px; transform:translate(-50%,-50%);
    box-shadow: 0 0 10px var(--accent);
  }
  body.forensic .cursor.lg{ width:90px; height:90px }

  body.forensic h1.title, body.forensic .section-head h2{
    text-shadow: 0 0 18px rgba(193,255,0,.08);
  }



  /* glitch overlay */
  .glitch{
    position:fixed; inset:0; pointer-events:none; z-index:9997;
    background:transparent; opacity:0;
    mix-blend-mode: difference;
  }

  /* ---------- (END BOOT) ---------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:36px;
    display:flex; align-items:center; justify-content:space-between;
    padding-inline:var(--pad);
    font-family:var(--mono); font-size:11px;
    color:var(--text-dim);
    border-bottom:1px solid var(--line);
    background:rgba(10,10,10,.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .topbar .tb-left, .topbar .tb-right{ display:flex; gap:18px; align-items:center }
  .led{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); margin-right:8px; animation:pulse 2s infinite }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
  .topbar .tb-right span{ position:relative }
  .topbar .tb-right span + span::before{ content:""; position:absolute; left:-9px; top:50%; width:1px; height:10px; background:var(--line-2); transform:translateY(-50%) }

  /* ---------- NAV ---------- */
  nav.main{
    position:fixed; top:36px; left:0; right:0; z-index:99;
    display:flex; justify-content:space-between; align-items:center;
    padding:18px var(--pad);
    border-bottom:1px solid var(--line);
    background:rgba(10,10,10,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .brand{ display:flex; gap:14px; align-items:center; font-family:var(--mono); font-size:13px }
  .brand .mark{
    width:28px; height:28px; border:1px solid var(--accent);
    display:grid; place-items:center; color:var(--accent); font-weight:600;
    position:relative;
  }
  .brand .mark::after{ content:""; position:absolute; inset:-3px; border:1px solid var(--line-2) }
  .nav-links{ display:flex; gap:28px; font-family:var(--mono); font-size:12px }
  .nav-links a{ position:relative; color:var(--text-dim); transition:color .25s }
  .nav-links a:hover{ color:var(--text) }
  .nav-links a .n{ color:var(--muted); margin-right:6px }
  .nav-cta{
    font-family:var(--mono); font-size:12px;
    border:1px solid var(--line-2); padding:9px 14px;
    display:inline-flex; align-items:center; gap:10px;
    transition: all .25s; color:var(--text);
  }
  .nav-cta:hover{ border-color:var(--accent); color:var(--accent) }
  .nav-cta .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent) }
  @media (max-width:720px){ .nav-links{display:none} }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    padding-top:140px;
    padding-bottom:80px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .hero-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  }
  .hero-inner{ position:relative; z-index:2 }

  .meta-row{
    display:flex; justify-content:space-between; gap:24px;
    font-family:var(--mono); font-size:11px; color:var(--text-dim);
    padding-bottom:30px;
    border-bottom:1px solid var(--line);
    margin-bottom:50px;
    text-transform:uppercase; letter-spacing:.15em;
    flex-wrap:wrap;
  }
  .meta-row span b{ color:var(--text); font-weight:500 }

  h1.title{
    font-family:var(--sans);
    font-weight:500;
    font-size: clamp(56px, 13vw, 220px);
    line-height: .85;
    letter-spacing: -.045em;
    margin: 0;
    color: var(--text);
  }
  h1.title .ser{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--text) }
  h1.title .out{ -webkit-text-stroke: 1px var(--text-dim); color: transparent; }
  h1.title .lime{ color: var(--accent) }

  .hero-row{
    display:grid; grid-template-columns: 0.85fr 1fr 1fr; gap:40px;
    margin-top:60px; align-items:end;
  }
  @media (max-width: 1100px){ .hero-row{ grid-template-columns: 1fr 1fr; gap:32px } .hero-row .subject{ grid-column: 1 / -1; max-width:420px } }
  @media (max-width: 720px){ .hero-row{ grid-template-columns: 1fr } .hero-row .subject{ max-width: none } }

  /* SUBJECT PHOTO (hero) */
  .subject{ position:relative }
  .subject-frame{
    position:relative;
    border:1px solid var(--line-2);
    background:#0a0a0a;
    color:var(--accent);
    isolation:isolate;
    overflow:hidden;
  }
  .subject-frame img{
    filter: grayscale(.35) contrast(1.05);
  }
  .subject-frame .crosshair{
    position:absolute; inset:0; width:100%; height:100%;
    color:var(--accent); opacity:.55; pointer-events:none; z-index:2;
  }
  .corner{ position:absolute; width:14px; height:14px; border:1px solid var(--accent); z-index:3 }
  .corner.tl{ top:6px; left:6px; border-right:0; border-bottom:0 }
  .corner.tr{ top:6px; right:6px; border-left:0; border-bottom:0 }
  .corner.bl{ bottom:6px; left:6px; border-right:0; border-top:0 }
  .corner.br{ bottom:6px; right:6px; border-left:0; border-top:0 }
  .subject-id{
    position:absolute; top:14px; left:14px; z-index:3;
    font-family:var(--mono); font-size:10px;
    background:rgba(10,10,10,.7); backdrop-filter:blur(4px);
    border:1px solid var(--line-2);
    padding:8px 10px;
    min-width:130px;
    color:var(--text-dim);
  }
  .sid-row{ display:flex; justify-content:space-between; gap:14px; padding:2px 0 }
  .sid-row span:last-child{ color:var(--text) }
  .subject-exif{
    position:absolute; bottom:14px; right:14px; z-index:3;
    display:flex; gap:10px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
    color:var(--text-dim);
    background:rgba(10,10,10,.7); backdrop-filter:blur(4px);
    padding:6px 10px; border:1px solid var(--line-2);
  }
  .redacted-bar{
    position:absolute; left:14px; bottom:14px; z-index:3;
    width:42%; height:18px;
    background: repeating-linear-gradient(45deg, #000 0 5px, #1a1a1a 5px 10px);
    border:1px solid var(--line-2);
  }
  .subject-cap{
    display:flex; justify-content:space-between;
    font-family:var(--mono); font-size:10.5px;
    color:var(--text-dim);
    padding:10px 2px 0;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .subject-cap b{ color:var(--text); font-weight:500 }
  .hero-right{ display:flex; flex-direction:column; gap:24px; grid-column: span 1 }
  @media (min-width: 1101px){ .hero-right{ grid-column: span 2; display:grid; grid-template-columns: 1fr 1.1fr; gap:32px; align-items:end } }

  .lede{
    font-family:var(--sans); font-size: clamp(18px, 1.6vw, 22px);
    line-height:1.45; max-width:560px; color:var(--text);
    font-weight:400;
  }
  .lede em{ font-family:var(--serif); color:var(--accent); font-style:italic }

  /* live log panel */
  .panel{
    border:1px solid var(--line-2);
    background:linear-gradient(180deg, var(--bg-1), var(--bg));
    font-family:var(--mono); font-size:12px;
    overflow:hidden;
    position:relative;
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    background:var(--bg-2);
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--text-dim);
  }
  .panel-head .dots{ display:flex; gap:6px }
  .panel-head .dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); display:inline-block }
  .panel-head .dots i:nth-child(1){ background:var(--danger) }
  .panel-head .dots i:nth-child(2){ background:var(--warn) }
  .panel-head .dots i:nth-child(3){ background:var(--ok) }

  .log{
    padding:14px 16px;
    height: 280px;
    overflow:hidden;
    position:relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .log .line{
    display:grid; grid-template-columns: 84px 70px 1fr; gap:10px;
    padding:3px 0;
    color:var(--text-dim);
    white-space:nowrap;
  }
  .log .t{ color:var(--muted) }
  .log .lvl.ok{ color:var(--ok) }
  .log .lvl.warn{ color:var(--warn) }
  .log .lvl.bad{ color:var(--danger) }
  .log .lvl.info{ color:var(--text-dim) }
  .log .msg b{ color:var(--text); font-weight:500 }

  /* ---------- INTERACTIVE TERMINAL ---------- */
  .terminal{ display:flex; flex-direction:column }
  .term-body{
    padding: 14px 16px 8px;
    height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .term-body::-webkit-scrollbar{ width:6px }
  .term-body::-webkit-scrollbar-thumb{ background:var(--line-2) }
  .term-body .row{ padding: 1px 0; white-space: pre-wrap; word-break: break-word }
  .term-body .prompt{ color: var(--accent); margin-right: 8px }
  .term-body .echo{ color: var(--text) }
  .term-body .ok{ color: var(--ok) }
  .term-body .warn{ color: var(--warn) }
  .term-body .bad{ color: var(--danger) }
  .term-body .accent{ color: var(--accent) }
  .term-body .dim{ color: var(--muted) }
  .term-body b{ color: var(--text); font-weight: 500 }
  .term-body a{ color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px }
  .term-body a:hover{ text-decoration-color: var(--accent) }
  .term-body table{ border-collapse: collapse; margin: 4px 0 }
  .term-body td{ padding: 1px 14px 1px 0; color:var(--text-dim) }
  .term-body td:first-child{ color:var(--accent); width: 100px }
  .term-body .ascii{ color:var(--accent); font-size:10px; line-height:1.1 }
  .term-input{
    display:flex; align-items:center; gap:10px;
    padding: 10px 16px 12px;
    border-top:1px solid var(--line);
    background: var(--bg-2);
    font-family: var(--mono); font-size: 12.5px;
    cursor: text;
  }
  .term-prompt{ color: var(--accent); white-space: nowrap }
  .term-prompt .dim{ color: var(--text-dim); margin-left: 4px }
  #term-cmd{
    flex:1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--text);
    font-family: var(--mono); font-size: 12.5px;
    caret-color: transparent;
  }
  .term-caret{
    display:inline-block; width:8px; height:14px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    margin-left: -4px;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity: 0 } }
  .term-suggest{
    display:flex; flex-wrap:wrap; gap:6px;
    padding: 8px 16px 12px;
    border-top:1px dashed var(--line);
    background: var(--bg-1);
  }
  .term-suggest button{
    font-family: var(--mono); font-size: 10.5px;
    color: var(--text-dim);
    background: transparent; border: 1px solid var(--line-2);
    padding: 4px 9px; cursor: none;
    letter-spacing: .04em;
    transition: all .2s;
  }
  .term-suggest button:hover{ border-color: var(--accent); color: var(--accent) }

  .hero-foot{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:80px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.15em;
    flex-wrap:wrap; gap:12px;
  }
  .scroll-ind{ display:inline-flex; gap:10px; align-items:center }
  .scroll-ind .arr{ display:inline-block; width:18px; height:1px; background:var(--accent); position:relative }
  .scroll-ind .arr::after{ content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); transform:rotate(-45deg); top:50%; margin-top:-3.5px }

  /* ---------- SECTION ---------- */
  section{ position:relative; padding-block: clamp(90px, 12vw, 160px) }
  .section-head{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:24px; flex-wrap:wrap;
    margin-bottom: 64px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .section-head h2{
    font-family:var(--sans);
    font-weight:500;
    font-size: clamp(34px, 5.6vw, 84px);
    line-height:.95; letter-spacing:-.035em;
    margin:0; flex:1;
  }
  .section-head h2 .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .section-head .idx{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.18em; text-transform:uppercase }

  /* ---------- STATS ---------- */
  .stats{
    display:grid; grid-template-columns: repeat(4, 1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  @media(max-width:880px){ .stats{ grid-template-columns: repeat(2,1fr) } }
  .stat{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: 28px 26px 30px;
    min-height: 170px;
    position:relative;
    overflow:hidden;
  }
  .stat .k{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.18em; text-transform:uppercase; display:flex; justify-content:space-between }
  .stat .v{ font-family:var(--sans); font-weight:500; font-size: clamp(46px, 5.2vw, 78px); line-height:1; letter-spacing:-.04em; margin-top:36px; color:var(--text) }
  .stat .v .u{ color:var(--accent); font-size:.4em; font-family:var(--mono); margin-left:8px; vertical-align:middle; letter-spacing:.05em }
  .stat .d{ font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:10px }
  .stat::after{
    content:""; position:absolute; right:18px; top:18px; width:6px; height:6px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 6px var(--accent); opacity:.6;
  }

  /* ---------- DUAL CRAFTS ---------- */
  .duo{
    display:grid; grid-template-columns:1fr 1fr;
    border:1px solid var(--line);
    position:relative;
  }
  @media(max-width:880px){ .duo{ grid-template-columns:1fr } }
  .duo::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line);
  }
  @media(max-width:880px){ .duo::before{ display:none } }
  .craft{ padding: clamp(28px, 4vw, 56px) }
  .craft .label{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text-dim);
    display:flex; align-items:center; gap:10px;
  }
  .craft .label .num{ color:var(--accent) }
  .craft h3{
    font-family:var(--sans); font-weight:500; letter-spacing:-.03em;
    font-size: clamp(28px, 3.5vw, 48px); line-height:1; margin:20px 0 18px;
  }
  .craft h3 .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .craft p{ font-size:15px; line-height:1.6; color:var(--text-dim); max-width:46ch; margin:0 0 26px }
  .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 30px }
  .tag{
    font-family:var(--mono); font-size:11px;
    padding:5px 10px;
    border:1px solid var(--line-2);
    color:var(--text-dim);
    transition: all .2s;
  }
  .tag:hover{ border-color:var(--accent); color:var(--accent) }
  .craft .checks{ margin: 28px 0 0; padding:0; list-style:none }
  .craft .checks li{
    font-family:var(--mono); font-size:12.5px;
    padding:10px 0; color:var(--text-dim);
    border-top:1px dashed var(--line-2);
    display:grid; grid-template-columns: 28px 1fr auto; gap:10px;
  }
  .craft .checks li:last-child{ border-bottom:1px dashed var(--line-2) }
  .craft .checks li .n{ color:var(--muted) }
  .craft .checks li .v{ color:var(--accent) }

  /* ---------- PROJECTS (grid) ---------- */
  .work{
    display:grid; grid-template-columns: repeat(2, 1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:880px){ .work{ grid-template-columns: 1fr } }
  .case{
    background:var(--bg);
    padding: 0;
    display:flex; flex-direction:column;
    position:relative;
    transition: background .35s ease;
    overflow:hidden;
  }
  .case:hover{ background: var(--bg-1) }
  .case-media{
    position:relative;
    border-bottom:1px solid var(--line);
    overflow:hidden;
    aspect-ratio: 16 / 10;
  }
  .case-media img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .8s ease;
    background: #0c0c0c;
  }
  .case:hover .case-media img{ transform: scale(1.03) }
  .case-badge{
    position:absolute; top:14px; left:14px; z-index:3;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
    color:var(--accent);
    background:rgba(10,10,10,.75); backdrop-filter:blur(6px);
    border:1px solid var(--line-2);
    padding:5px 10px;
  }
  .case-body{
    padding: 28px 28px 26px;
    display:flex; flex-direction:column;
    gap:14px;
    flex:1;
  }
  .case-title{
    font-family:var(--sans); font-weight:500;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing:-.025em; line-height:1.05;
    margin:0;
    outline:none;
  }
  .case-title .ser{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--text-dim) }
  .case-desc{
    font-family:var(--mono); font-size:12.5px; line-height:1.6;
    color:var(--text-dim);
    margin:0;
    outline:none;
    max-width:54ch;
  }
  .case-meta{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:auto;
    padding-top:18px;
    border-top:1px dashed var(--line-2);
    gap:12px; flex-wrap:wrap;
  }
  .case-stack{
    font-family:var(--mono); font-size:11px; color:var(--text-dim);
    letter-spacing:.06em;
    outline:none;
  }
  .case-link{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
    color:var(--accent);
    outline:none;
    transition: letter-spacing .25s;
  }
  .case-link:hover{ letter-spacing:.22em }
  [contenteditable="true"]:focus{
    background: rgba(193,255,0,.04);
    box-shadow: inset 0 -1px 0 var(--accent);
  }


  /* ---------- SERVICES ---------- */
  .services{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border:1px solid var(--line) }
  @media(max-width:980px){ .services{ grid-template-columns:1fr } }
  .svc{
    padding: clamp(24px, 3vw, 40px);
    border-right:1px solid var(--line);
    position:relative;
    transition: background .3s;
  }
  .services .svc:last-child{ border-right:0 }
  @media(max-width:980px){
    .svc{ border-right:0; border-bottom:1px solid var(--line) }
    .services .svc:last-child{ border-bottom:0 }
  }
  .svc:hover{ background: var(--bg-1) }
  .svc .ln{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.2em }
  .svc h4{ font-family:var(--sans); font-weight:500; font-size:24px; letter-spacing:-.02em; margin: 18px 0 14px }
  .svc h4 .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .svc p{ font-size:14px; line-height:1.6; color:var(--text-dim); margin:0 0 24px }
  .svc ul{ list-style:none; padding:0; margin:0 }
  .svc ul li{ font-family:var(--mono); font-size:12px; color:var(--text-dim); padding:7px 0; border-top:1px solid var(--line); display:flex; gap:10px }
  .svc ul li::before{ content:"+"; color:var(--accent) }
  .svc .price{ font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:24px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between }
  .svc .price b{ color:var(--text); font-weight:500 }

  /* ---------- PROCESS ---------- */
  .steps{ display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line) }
  @media(max-width:880px){ .steps{ grid-template-columns: repeat(2,1fr) } }
  .step{
    padding: 32px 24px 40px;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    min-height: 220px;
    position:relative;
  }
  .step .sn{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.2em }
  .step h5{ font-family:var(--sans); font-weight:500; font-size:22px; letter-spacing:-.02em; margin:14px 0 12px }
  .step h5 .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .step p{ font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--text-dim); margin:0 }

  /* ---------- CONTACT ---------- */
  .contact{
    border:1px solid var(--line-2);
    background:var(--bg-1);
    position:relative;
    overflow:hidden;
  }
  .contact-grid{
    display:grid; grid-template-columns: 1.2fr 1fr;
  }
  @media(max-width:980px){ .contact-grid{ grid-template-columns:1fr } }
  .contact-left{ padding: clamp(36px, 5vw, 72px); border-right:1px solid var(--line) }
  @media(max-width:980px){ .contact-left{ border-right:0; border-bottom:1px solid var(--line) } }
  .contact-left h3{
    font-family:var(--sans); font-weight:500; font-size: clamp(36px, 5vw, 72px);
    line-height:.95; letter-spacing:-.035em; margin:0 0 24px;
  }
  .contact-left h3 .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .contact-left p{ font-size:15px; line-height:1.55; color:var(--text-dim); max-width:46ch; margin:0 0 32px }
  .cta-row{ display:flex; gap:12px; flex-wrap:wrap }
  .cta{
    display:inline-flex; gap:14px; align-items:center;
    font-family:var(--mono); font-size:13px;
    padding:14px 22px;
    background:var(--accent); color:#000;
    border:1px solid var(--accent);
    transition: all .25s;
  }
  .cta:hover{ background:transparent; color:var(--accent) }
  .cta.ghost{ background:transparent; color:var(--text); border-color:var(--line-2) }
  .cta.ghost:hover{ border-color:var(--accent); color:var(--accent) }

  .contact-right{ padding: clamp(28px, 4vw, 56px); display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:13px }
  .channel{
    display:grid; grid-template-columns: 90px 1fr auto;
    align-items:center; gap:14px;
    padding:18px 0;
    border-bottom:1px dashed var(--line-2);
  }
  .channel:last-child{ border-bottom:0 }
  .channel .ck{ color:var(--text-dim); font-size:11px; letter-spacing:.18em; text-transform:uppercase }
  .channel .cv{ color:var(--text); transition:color .2s }
  .channel:hover .cv{ color:var(--accent) }
  .channel .cs{ color:var(--muted); font-size:10.5px; letter-spacing:.1em }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding: 40px var(--pad) 30px;
    display:grid; grid-template-columns: 1fr 1fr 1fr;
    gap:24px; font-family:var(--mono); font-size:11px;
    color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase;
  }
  footer .center{ text-align:center }
  footer .right{ text-align:right }
  @media(max-width:720px){ footer{ grid-template-columns:1fr; text-align:left } footer .center,footer .right{ text-align:left } }

  /* big marquee word */
  .marquee{
    overflow:hidden; white-space:nowrap;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding: 24px 0;
  }
  .marquee .track{
    display:inline-flex; gap:48px;
    font-family:var(--sans); font-weight:500;
    font-size: clamp(56px, 9vw, 130px);
    letter-spacing:-.04em; line-height:1;
    animation: scroll-x 28s linear infinite;
  }
  .marquee .track span .ser{ font-family:var(--serif); font-style:italic; font-weight:400 }
  .marquee .track span .out{ -webkit-text-stroke:1px var(--text-dim); color:transparent }
  .marquee .track span .lime{ color:var(--accent) }
  @keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* reveal animation */
  .reveal{ opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease }
  .reveal.in{ opacity:1; transform:none }

  /* details on hover for case rows */
  .clock{ font-variant-numeric: tabular-nums }

  /* ---------- MOBILE OPTIMIZATIONS ---------- */
  @media (max-width: 768px) {
    .topbar .tb-left { display: none; }
    .topbar .tb-right { width: 100%; justify-content: space-between; }
    .topbar .tb-right > span:nth-child(3),
    .topbar .tb-right > span:nth-child(4) { display: none; }
    .topbar .tb-right > span:nth-child(2)::before { display: none; }
  }

  @media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .meta-row { flex-direction: column; gap: 12px; }
    .boot-log .l { grid-template-columns: 50px 50px 1fr; font-size: 10.5px; }
    .hero-foot { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 480px) {
    .channel { grid-template-columns: 1fr; gap: 8px; }
    .channel .cs { text-align: left; }
    .channel .cv { word-break: break-all; }
    .subject-id { position: relative; top: 0; left: 0; width: 100%; border: none; border-bottom: 1px solid var(--line-2); background: transparent; backdrop-filter: none; }
    .subject-exif { display: none; }
    .term-input { flex-wrap: wrap; }
  }