:root{
    --bg:hsl(220 25% 4%);
    --fg:hsl(210 25% 98%);
    --card:hsl(220 22% 6.5%);
    --border:hsl(210 20% 13%);
    --muted:hsl(215 12% 58%);
    --accent:hsl(195 100% 55%);
    --accent-soft:hsl(195 100% 55% / .12);
    --destructive:hsl(0 80% 60%);
    --ease:cubic-bezier(.16,1,.3,1);
    --scrollbar-track:hsl(220 20% 9%);
    --scrollbar-thumb:hsl(215 14% 30%);
    --scrollbar-thumb-hover:hsl(215 18% 38%);
  }
  *{box-sizing:border-box;border:0 solid var(--border);margin:0;padding:0}
  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    scrollbar-width:thin;
    scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
  }
  *::-webkit-scrollbar{width:12px;height:12px}
  *::-webkit-scrollbar-track{background:var(--scrollbar-track);border-left:1px solid var(--border)}
  *::-webkit-scrollbar-thumb{
    background:var(--scrollbar-thumb);
    border:2px solid var(--scrollbar-track);
    border-radius:999px;
  }
  *::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--accent) 30%,var(--scrollbar-thumb-hover))}
  *::-webkit-scrollbar-corner{background:var(--scrollbar-track)}
  [id]{scroll-margin-top:80px}
  body{
    background:var(--bg);color:var(--fg);
    font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
    font-feature-settings:"ss01","cv11";
  }
  body.nav-open{overflow:hidden}
  ::selection{background:var(--accent-soft);color:var(--accent)}
  a{color:inherit;text-decoration:none}
  button,input,textarea{font:inherit;color:inherit;background:transparent;outline:none}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace}
  .container{max-width:1280px;margin:0 auto;padding:0 24px}
  .grid-bg{
    background-image:
      linear-gradient(to right,var(--border) 1px,transparent 1px),
      linear-gradient(to bottom,var(--border) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 80%);
    mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 80%);
  }
  .radial-glow{
    background:
      radial-gradient(circle at 30% 20%,var(--accent-soft),transparent 55%),
      radial-gradient(circle at 80% 60%,color-mix(in oklab,var(--accent) 10%,transparent),transparent 50%);
  }
  .abs{position:absolute}.rel{position:relative}
  .muted{color:var(--muted)}
  .acc{color:var(--accent)}
  
  /* keyframes */
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pulseSoft{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
  @keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.08)}}
  @keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
  @keyframes scanline{0%{transform:translateY(-20%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(120%);opacity:0}}
  @keyframes ping{75%,100%{transform:scale(2);opacity:0}}
  
  /* Scroll progress */
  .scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
  .scroll-progress > div{height:100%;background:var(--accent);width:0;box-shadow:0 0 12px var(--accent);transition:width 80ms linear}
  
  /* Parallax mesh */
  .mesh{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none}
  .mesh .blob{position:absolute;border-radius:9999px;filter:blur(60px);animation:drift 22s ease-in-out infinite}
  .mesh .b1{top:-160px;left:-80px;width:55vw;height:55vw;background:radial-gradient(circle at center,var(--accent-soft),transparent 60%)}
  .mesh .b2{top:33%;right:-128px;width:60vw;height:60vw;background:radial-gradient(circle at center,color-mix(in oklab,var(--accent) 18%,transparent),transparent 60%);animation-delay:-6s}
  .mesh .b3{bottom:0;left:33%;width:45vw;height:45vw;background:radial-gradient(circle at center,color-mix(in oklab,var(--accent) 12%,transparent),transparent 65%);animation-delay:-12s}
  
  /* Nav */
  nav.top{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg) 70%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  nav.top .inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px}
  nav.top .brand{display:flex;align-items:center;gap:10px}
  nav.top .pulsebox{position:relative;display:inline-flex;width:12px;height:12px;align-items:center;justify-content:center}
  nav.top .pulsebox .a{position:absolute;width:12px;height:12px;background:var(--accent);animation:pulseSoft 2.4s ease-in-out infinite}
  nav.top .pulsebox .b{position:relative;width:6px;height:6px;background:var(--accent)}
  nav.top .logo{font-family:"JetBrains Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;font-size:16px}
  nav.top .sub{display:none;margin-left:8px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  nav.top .links{display:none;align-items:center;gap:32px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  nav.top .links a{transition:color .2s}
  nav.top .links a:hover{color:var(--fg)}
  nav.top .links a.cta{border:1px solid var(--accent);color:var(--accent);padding:6px 16px;transition:all .2s}
  nav.top .links a.cta:hover{background:var(--accent);color:var(--bg)}
  nav.top .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;padding:8px;border:1px solid var(--border);border-radius:2px;
    cursor:pointer;transition:border-color .2s,background .2s;flex-shrink:0;
  }
  nav.top .nav-toggle:hover{border-color:var(--accent)}
  nav.top .nav-toggle-bar{display:block;width:100%;height:2px;background:var(--fg);transition:transform .2s var(--ease),opacity .2s}
  nav.top.is-open .nav-toggle .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.top.is-open .nav-toggle .nav-toggle-bar:nth-child(2){opacity:0}
  nav.top.is-open .nav-toggle .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:767px){
    nav.top .inner{position:relative;z-index:51}
    nav.top .links{
      position:fixed;inset:0;z-index:50;
      min-height:100dvh;height:100dvh;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
      padding:88px 24px 32px;background:var(--bg);
      overflow-y:auto;
    }
    nav.top.is-open .links{display:flex}
    nav.top .links a{padding:16px 0;border-bottom:1px solid var(--border)}
    nav.top .links a:last-child{border-bottom:0}
    nav.top .links a.cta{margin-top:auto;text-align:center;padding:14px 16px}
  }
  @media(min-width:768px){
    nav.top .sub{display:inline}
    nav.top .links{display:flex}
    nav.top .nav-toggle{display:none}
  }
  
  /* Hero */
  header.hero{position:relative;overflow:hidden;padding:144px 0 96px}
  @media(min-width:768px){header.hero{padding:176px 0 128px}}
  header.hero .gridbg,header.hero .glow,header.hero .fade{position:absolute;inset:0}
  header.hero .glow{inset:0 0 auto 0;height:60vh;opacity:.8}
  header.hero .fade{top:auto;height:160px;background:linear-gradient(to bottom,transparent,var(--bg))}
  header.hero .row{position:relative;display:grid;gap:56px;align-items:center;max-width:1280px;margin:0 auto;padding:0 24px}
  @media(min-width:1024px){header.hero .row{grid-template-columns:repeat(12,1fr)}.hero-left{grid-column:span 7}.hero-right{grid-column:span 5}}
  .hero-left{animation:fadeUp .7s var(--ease) both}
  .hero-left > * + *{margin-top:32px}
  .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);background:color-mix(in oklab,var(--accent) 10%,transparent);padding:4px 12px}
  .badge .ping{position:relative;display:inline-flex;width:6px;height:6px}
  .badge .ping span:first-child{position:absolute;inset:0;border-radius:9999px;background:var(--accent);opacity:.75;animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite}
  .badge .ping span:last-child{position:relative;width:6px;height:6px;border-radius:9999px;background:var(--accent)}
  .badge .label{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.25em;color:var(--accent)}
  h1.hero-title{font-weight:800;font-size:48px;line-height:.95;letter-spacing:-.02em;text-wrap:balance}
  @media(min-width:768px){h1.hero-title{font-size:72px}}
  .rot{position:relative;display:inline-grid;vertical-align:bottom;overflow:hidden}
  .rot .sizer{visibility:hidden;grid-area:1/1;color:var(--accent);white-space:nowrap}
  .rot .w{grid-area:1/1;color:var(--accent);white-space:nowrap;transition:all .7s var(--ease);transform:translateY(-110%);opacity:0}
  .rot .w.in{transform:translateY(0);opacity:1}
  .rot .w.out{transform:translateY(110%);opacity:0}
  .rot::after{content:"";position:absolute;left:0;bottom:-4px;height:3px;width:100%;background:color-mix(in oklab,var(--accent) 40%,transparent)}
  .lead{max-width:560px;font-size:18px;line-height:1.7;color:var(--muted);text-wrap:pretty}
  .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
  .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;transition:letter-spacing .25s,color .2s,background .2s,border-color .2s;cursor:pointer}
  .btn.primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent)}
  .btn.primary:hover{letter-spacing:.3em}
  .btn.ghost{border:1px solid var(--border);background:color-mix(in oklab,var(--card) 60%,transparent);color:var(--fg);backdrop-filter:blur(8px)}
  .btn.ghost:hover{border-color:color-mix(in oklab,var(--accent) 40%,transparent);color:var(--accent)}
  .btn .arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(4px)}
  dl.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:420px;border-top:1px solid var(--border);padding-top:32px}
  dl.hero-stats dt{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:24px}
  dl.hero-stats dd{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  
  /* Terminal */
  .term-wrap{position:relative;animation:fadeUp .7s var(--ease) both}
  .term-wrap .halo{position:absolute;inset:-24px;z-index:-1;filter:blur(40px);opacity:.7}
  .term{overflow:hidden;border-radius:8px;border:1px solid var(--border);background:var(--card);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
  .term-head{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg) 60%,transparent);padding:10px 16px}
  .dot{width:10px;height:10px;border-radius:9999px}
  .dot.r{background:color-mix(in oklab,var(--destructive) 40%,transparent)}
  .dot.y{background:rgba(234,179,8,.4)}.dot.g{background:rgba(16,185,129,.4)}
  .term-head .name{margin-left:12px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .term-head .live{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted)}
  .term-body{padding:24px;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.7}
  .row-line{display:flex;gap:16px}
  .row-line .ln{width:16px;text-align:right;color:color-mix(in oklab,var(--muted) 60%,transparent);user-select:none}
  .row-line.i1 .c{padding-left:24px}.row-line.i2 .c{padding-left:48px}
  .c-sky{color:#38bdf8}.c-am{color:#fcd34d}.c-vi{color:#c4b5fd}.c-em{color:#6ee7b7}.c-em2{color:#34d399}
  .term-foot{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
  .cursor{display:inline-block;height:12px;width:6px;background:var(--accent);vertical-align:middle;transform:translateY(-2px);animation:blink 1.1s steps(1) infinite;margin-left:4px}
  
  /* Metrics */
  section.metrics{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--card) 40%,transparent)}
  section.metrics .grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr)}
  @media(min-width:768px){section.metrics .grid{grid-template-columns:repeat(4,1fr)}}
  .metric{position:relative;padding:32px;display:flex;flex-direction:column;gap:8px}
  .metric .tag{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  .metric .val{display:flex;align-items:baseline;gap:4px;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:36px;letter-spacing:-.02em}
  .metric .val .sfx{font-size:18px;color:var(--accent)}
  .metric .lbl{font-size:14px;color:var(--muted)}
  .metric .bar{position:absolute;left:32px;right:32px;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s}
  .metric:hover .bar{transform:scaleX(1)}
  .metric.b1{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .metric.b2{border-bottom:1px solid var(--border)}
  .metric.b3{border-right:1px solid var(--border)}
  @media(min-width:768px){
    .metric.b1,.metric.b2{border-bottom:0}
    .metric.b1,.metric.b3{border-right:1px solid var(--border)}
    .metric.b2{border-right:1px solid var(--border)}
  }
  
  /* Ticker */
  .ticker{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--card) 40%,transparent)}
  .ticker .row{display:flex;width:max-content;gap:48px;padding:12px 0;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:var(--muted);animation:ticker 38s linear infinite}
  .ticker .row span.t{display:flex;align-items:center;gap:12px;white-space:nowrap}
  .ticker .row span.t i{width:4px;height:4px;background:var(--accent);display:inline-block}
  .ticker .fade-l,.ticker .fade-r{position:absolute;top:0;bottom:0;width:96px;pointer-events:none}
  .ticker .fade-l{left:0;background:linear-gradient(to right,var(--bg),transparent)}
  .ticker .fade-r{right:0;background:linear-gradient(to left,var(--bg),transparent)}
  
  /* Who we are */
  section.who{max-width:1280px;margin:0 auto;padding:112px 24px}
  .who-grid{display:grid;gap:64px;align-items:center}
  @media(min-width:768px){.who-grid{grid-template-columns:1fr 1fr;gap:80px}}
  .who-left > * + *{margin-top:24px}
  .who-left h2{font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
  @media(min-width:768px){.who-left h2{font-size:48px}}
  .who-left p{line-height:1.7}
  .who-panel{overflow:hidden;border:1px solid var(--border);background:var(--card);padding:32px}
  .who-panel .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .who-desc{font-size:15px;line-height:1.75;color:var(--muted)}
  .who-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
  .who-tags span{border:1px solid var(--border);padding:4px 12px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);transition:all .2s}
  .who-tags span:hover{border-color:color-mix(in oklab,var(--accent) 50%,transparent);color:var(--accent)}
  
  /* Sections shared */
  .section-head{margin-bottom:64px}
  .section-tag{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent)}
  .section-head h2{font-weight:800;font-size:36px;letter-spacing:-.02em;text-wrap:balance;margin-top:16px}
  @media(min-width:768px){.section-head h2{font-size:48px}}
  .section-head p{max-width:560px;color:var(--muted);margin-top:16px;text-wrap:pretty}
  
  /* Modules */
  section.modules{max-width:1280px;margin:0 auto;padding:112px 24px}
  .modules-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:64px}
  .modules-head .ln{flex:1;height:1px;background:var(--border);margin-bottom:8px;display:none}
  @media(min-width:768px){.modules-head .ln{display:block}}
  .cards{display:grid;gap:24px}
  @media(min-width:768px){.cards{grid-template-columns:repeat(4,1fr)}}
  .card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);background:var(--card);transition:all .5s}
  .card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--accent) 40%,transparent);box-shadow:0 30px 60px -30px color-mix(in oklab,var(--accent) 45%,transparent)}
  .card .idx{position:absolute;top:-8px;left:16px;pointer-events:none;font-family:"JetBrains Mono",monospace;font-weight:800;font-size:80px;line-height:1;color:color-mix(in oklab,var(--fg) 4%,transparent)}
  .preview{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg)}
  .preview .g{position:absolute;inset:0;opacity:.5}
  .preview .body{position:relative;height:100%;display:flex;flex-direction:column;padding:16px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted)}
  .preview .scan{position:absolute;inset:0;height:30%;background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--accent) 30%,transparent),transparent);animation:scanline 6s linear infinite}
  .preview .head{display:flex;align-items:center;justify-content:space-between}
  .bars{margin-top:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:60%}
  .bars div{background:color-mix(in oklab,var(--accent) 70%,transparent);width:100%}
  .card-body{display:flex;flex:1;flex-direction:column;gap:16px;padding:24px}
  .chip{width:fit-content;border:1px solid var(--border);padding:2px 8px;font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  .card h3{
    font-size:20px;
    font-weight:700;
    letter-spacing:-.01em;
    text-transform: uppercase;
}
  .card .sub{margin-top:4px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  .card .desc{font-size:14px;line-height:1.7;color:var(--muted)}
  .card ul.bul{display:flex;flex-direction:column;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
  .card ul.bul li{display:flex;align-items:center;gap:8px}
  .card ul.bul li i{width:4px;height:4px;background:var(--accent);display:inline-block}
  .card .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:16px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent)}
  .card .more span{transition:transform .2s}.card:hover .more span{transform:translateX(4px)}
  
  /* Method */
  section.method{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--card) 30%,transparent)}
  section.method .gridbg{position:absolute;inset:0;opacity:.4}
  section.method .inner{position:relative;max-width:1280px;margin:0 auto;padding:112px 24px}
  .steps{display:grid;gap:1px;background:var(--border)}
  @media(min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
  .step{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:16px;transition:all .5s}
  .step:hover{transform:translateY(-4px);background:var(--card)}
  .step .h{display:flex;align-items:center;justify-content:space-between}
  .step .h .l{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .step .h .d{width:6px;height:6px;background:var(--accent);transition:box-shadow .3s}
  .step:hover .h .d{box-shadow:0 0 14px var(--accent)}
  .step h3{font-size:24px;font-weight:700;letter-spacing:-.01em}
  .step .desc{font-size:14px;line-height:1.7;color:var(--muted)}
  .tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
  .tags span{border:1px solid var(--border);padding:2px 8px;font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  
  /* About */
  section.about{max-width:1280px;margin:0 auto;padding:112px 24px}
  .about-grid{display:grid;gap:64px}
  @media(min-width:768px){.about-grid{grid-template-columns:1fr 1fr;gap:80px}}
  .about-left > * + *{margin-top:24px}
  .about-left h2{font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
  @media(min-width:768px){.about-left h2{font-size:48px}}
  .tags2{display:flex;flex-wrap:wrap;gap:8px}
  .tags2 span{border:1px solid var(--border);padding:4px 12px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);transition:all .2s}
  .tags2 span:hover{border-color:color-mix(in oklab,var(--accent) 50%,transparent);color:var(--accent)}
  .about-right{position:relative}
  .about-right .halo{position:absolute;inset:-32px;z-index:-1;filter:blur(40px);opacity:.6;animation:drift 22s ease-in-out infinite}
  .princ{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--card)}
  .princ .head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:10px 16px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .princ ul{list-style:none}
  .princ li{display:flex;gap:20px;padding:24px;border-bottom:1px solid var(--border);transition:background .2s}
  .princ li:last-child{border-bottom:0}
  .princ li:hover{background:var(--bg)}
  .princ li .k{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--accent)}
  .princ li .t{font-weight:700;letter-spacing:-.01em}
  .princ li .d{font-size:14px;line-height:1.7;color:var(--muted);margin-top:4px}
  
  /* Contact */
  section.contact{position:relative;overflow:hidden;border-top:1px solid var(--border)}
  section.contact .gridbg{position:absolute;inset:0;opacity:.5}
  section.contact .glow{position:absolute;inset:0;opacity:.7}
  section.contact .inner{position:relative;max-width:960px;margin:0 auto;padding:128px 24px;text-align:center}
  section.contact h2{font-weight:800;font-size:40px;letter-spacing:-.02em;margin-top:24px;text-wrap:balance}
  @media(min-width:768px){section.contact h2{font-size:56px}}
  section.contact > .inner > p{margin:24px auto 0;max-width:560px;color:var(--muted);text-wrap:pretty}
  .contact-panel{margin-top:48px;border:1px solid var(--border);background:var(--card);padding:4px;text-align:left}
  .contact-panel .pad{display:flex;flex-direction:column;gap:24px;border:1px solid var(--border);padding:24px}
  @media(min-width:768px){.contact-panel .pad{padding:32px}}
  .contact-grid{display:grid;gap:20px}
  @media(min-width:768px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}}
  .contact-side{display:flex;flex-direction:column;gap:20px}
  .contact-card{display:flex;flex:1;flex-direction:column;gap:12px;border:1px solid var(--border);background:var(--bg);padding:24px;transition:border-color .25s,transform .25s}
  .contact-card:hover{border-color:color-mix(in oklab,var(--accent) 35%,transparent);transform:translateY(-2px)}
  .contact-card.featured{justify-content:center;align-items:flex-start;height:100%;background:color-mix(in oklab,var(--card) 70%,var(--bg));padding:28px}
  .contact-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid color-mix(in oklab,var(--accent) 25%,transparent);background:var(--accent-soft);color:var(--accent)}
  .contact-icon.wa{width:64px;height:64px;border-color:color-mix(in oklab,#25d366 35%,transparent);background:color-mix(in oklab,#25d366 12%,transparent);color:#25d366}
  .contact-label{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  .contact-card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .contact-card p,.contact-desc{font-size:14px;line-height:1.7;color:var(--muted)}
  .contact-card a{color:var(--fg);transition:color .2s}
  .contact-card a:hover{}
  .contact-card a .arrow{display:inline-block;transition:transform .2s}
  .contact-card a:hover .arrow{transform:translateX(4px)}
  .contact-cta{width:100%;justify-content:center;margin-top:8px}
  .contact-phone{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--muted)}
  section.contact > .inner > .hint{margin-top:24px}
  .hint{text-align:center;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  
  /* 404 */
  section.error-page{position:relative;overflow:hidden;min-height:calc(100vh - 64px);display:flex;align-items:center;border-top:1px solid var(--border)}
  section.error-page .gridbg{position:absolute;inset:0;opacity:.5}
  section.error-page .glow{position:absolute;inset:0;opacity:.7}
  section.error-page .inner{position:relative;width:100%;max-width:720px;margin:0 auto;padding:128px 24px 96px;text-align:center}
  section.error-page .error-code{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:clamp(96px,20vw,160px);line-height:1;letter-spacing:-.06em;color:color-mix(in oklab,var(--fg) 6%,transparent);margin-top:24px;user-select:none}
  section.error-page .error-code::after{content:"";display:block;width:64px;height:3px;margin:20px auto 0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
  section.error-page h1{font-weight:800;font-size:40px;letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
  @media(min-width:768px){section.error-page h1{font-size:56px}}
  section.error-page > .inner > p{margin:24px auto 0;max-width:560px;color:var(--muted);line-height:1.7;text-wrap:pretty}
  section.error-page .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}
  section.error-page > .inner > .hint{margin-top:32px}
  
  /* Portfolio */
  .portfolio-main{padding-top:64px}
  section.portfolio-hero,section.portfolio-detail-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
  section.portfolio-detail-hero.has-image .gridbg,section.portfolio-detail-hero.has-image .glow{opacity:.35}
  section.portfolio-detail-hero img.portfolio-hero-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;pointer-events:none}
  section.portfolio-hero .gridbg,section.portfolio-detail-hero .gridbg{position:absolute;inset:0;opacity:.5}
  section.portfolio-hero .glow,section.portfolio-detail-hero .glow{position:absolute;inset:0;opacity:.7}
  section.portfolio-hero .inner,section.portfolio-detail-hero .inner{position:relative;max-width:1280px;margin:0 auto;padding:96px 24px 72px}
  section.portfolio-hero h1,section.portfolio-detail-hero h1{font-weight:800;font-size:40px;letter-spacing:-.02em;line-height:1.05;margin-top:16px;text-wrap:balance}
  @media(min-width:768px){section.portfolio-hero h1,section.portfolio-detail-hero h1{font-size:56px}}
  section.portfolio-hero .inner > p,section.portfolio-detail-hero .lead{max-width:720px;margin-top:20px;color:var(--muted);line-height:1.7;text-wrap:pretty}
  section.portfolio-detail-hero .chip{display:inline-block;margin-top:8px}
  section.portfolio-detail-hero .lead{font-size:18px}
  .portfolio-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);transition:color .2s}
  .portfolio-back:hover{color:var(--accent)}
  .portfolio-meta{margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
  section.portfolio-list{max-width:1280px;margin:0 auto;padding:72px 24px 112px}
  .portfolio-filters{margin-bottom:40px}
  .portfolio-filters-label{display:block;margin-bottom:16px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent)}
  .portfolio-filters-row{display:flex;flex-wrap:wrap;gap:10px}
  .portfolio-filter{
    display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
    border:1px solid var(--border);background:var(--card);
    font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
    transition:all .25s var(--ease);
  }
  .portfolio-filter span{
    min-width:20px;padding:2px 6px;border:1px solid var(--border);
    font-size:10px;text-align:center;color:var(--muted);
  }
  .portfolio-filter:hover,.portfolio-filter.is-active{
    border-color:color-mix(in oklab,var(--accent) 45%,transparent);color:var(--accent);
  }
  .portfolio-filter.is-active{background:color-mix(in oklab,var(--accent) 10%,var(--card))}
  .portfolio-filter.is-active span{border-color:color-mix(in oklab,var(--accent) 35%,transparent);color:var(--accent)}
  .portfolio-filter-active{margin-top:20px;font-family:"JetBrains Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
  .portfolio-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
    padding:64px 24px;border:1px solid var(--border);background:var(--card);text-align:center;
  }
  .portfolio-empty p{color:var(--muted)}
  .portfolio-grid{display:grid;gap:24px}
  @media(min-width:768px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1100px){.portfolio-grid{grid-template-columns:repeat(3,1fr)}}
  .portfolio-item{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);transition:all .45s var(--ease)}
  .portfolio-item:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--accent) 40%,transparent);box-shadow:0 30px 60px -30px color-mix(in oklab,var(--accent) 40%,transparent)}
  .portfolio-item-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}
  .portfolio-idx{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
  .portfolio-preview{position:relative;aspect-ratio:16/9;margin:16px 20px 0;overflow:hidden;border:1px solid var(--border);background:var(--bg)}
  .portfolio-preview.has-image{background:#000}
  .portfolio-preview img.portfolio-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .portfolio-preview .g{position:absolute;inset:0;opacity:.5}
  .portfolio-preview .body{position:relative;height:100%;padding:16px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted)}
  .portfolio-preview .scan{position:absolute;inset:0;height:30%;background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--accent) 30%,transparent),transparent);animation:scanline 6s linear infinite}
  .portfolio-preview .head{display:flex;align-items:center;justify-content:space-between}
  .portfolio-item-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:24px}
  .portfolio-item-body h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .portfolio-item-body h2 a{transition:color .2s}
  .portfolio-item-body h2 a:hover{color:var(--accent)}
  .portfolio-item-body .sub{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .portfolio-item-body .desc{font-size:14px;line-height:1.7;color:var(--muted)}
  .portfolio-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:8px}
  .portfolio-actions .more.ghost{color:var(--muted)}
  .portfolio-actions .more.ghost:hover{color:var(--accent)}
  section.portfolio-detail{max-width:1280px;margin:0 auto;padding:72px 24px 112px}
  .portfolio-detail-grid{display:grid;gap:48px}
  @media(min-width:1024px){.portfolio-detail-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:64px;align-items:start}}
  .portfolio-detail-main > * + *{margin-top:40px}
  .portfolio-summary,.portfolio-block{padding:28px;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 80%,var(--bg))}
  .portfolio-summary p,.portfolio-block > p{font-size:16px;line-height:1.75;color:var(--muted)}
  .portfolio-block h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
  .portfolio-features{list-style:none;margin-top:20px}
  .portfolio-features li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
  .portfolio-features li:last-child{border-bottom:0;padding-bottom:0}
  .portfolio-features .k{font-family:"JetBrains Mono",monospace;color:var(--accent);padding-top:2px}
  .portfolio-features .t{font-weight:700;letter-spacing:-.01em}
  .portfolio-features .d{font-size:14px;line-height:1.7;color:var(--muted);margin-top:6px}
  .portfolio-detail-main .bul{display:flex;flex-direction:column;gap:10px;margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
  .portfolio-detail-main .bul li{display:flex;align-items:center;gap:8px}
  .portfolio-detail-main .bul li i{width:4px;height:4px;background:var(--accent);display:inline-block}
  .portfolio-aside-card{overflow:hidden;border:1px solid var(--border);background:var(--card)}
  .portfolio-aside-card + .portfolio-aside-card{margin-top:20px}
  .portfolio-aside-card .head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:10px 16px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .portfolio-aside-card dl{padding:20px}
  .portfolio-aside-card dl > div + div{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
  .portfolio-aside-card dt{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
  .portfolio-aside-card dd{margin-top:6px;font-size:14px;line-height:1.5}
  .portfolio-aside-card dd a{color:var(--accent)}
  .portfolio-related{list-style:none}
  .portfolio-related li{border-bottom:1px solid var(--border)}
  .portfolio-related li:last-child{border-bottom:0}
  .portfolio-related a{display:block;padding:16px 20px;transition:background .2s}
  .portfolio-related a:hover{background:var(--bg)}
  .portfolio-related .t{display:block;font-weight:700}
  .portfolio-related .d{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--muted)}
  
  /* Footer */
  footer{border-top:1px solid var(--border)}
  footer .inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;padding:40px 24px}
  @media(min-width:768px){footer .inner{flex-direction:row}}
  footer .brand{display:flex;align-items:center;gap:10px}
  footer .brand .d{width:8px;height:8px;background:var(--accent)}
  footer .brand .n{font-family:"JetBrains Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;font-size:14px}
  footer .brand .m{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  footer .cp{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  footer .lk{display:flex;gap:24px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
  footer .lk a:hover{color:var(--accent)}
  
  /* Reveal */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.left{transform:translateX(-30px)}
  .reveal.right{transform:translateX(30px)}
  .reveal.scale{transform:scale(.92)}
  .reveal.in{opacity:1;transform:none}