:root{
  --ink:#0b0e15; --ink2:#0e131d; --panel:#141b27; --panel2:#101725;
  --line:#222c3a; --line2:#2c3a4d;
  --fog:#8b97ab; --fog2:#5f6b7d; --paper:#eef2f8;
  --sigil:#16d39a; --sigil-dim:#0e8f6a;
  --amber:#f6b73c; --crit:#ff5d5d; --ctrl:#7c5cff;
  --maxw:1120px;
  --f-display:"Space Grotesk","Noto Sans JP","Noto Sans KR",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --f-body:"IBM Plex Sans","Noto Sans JP","Noto Sans KR",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(1100px 560px at 82% -8%, #16203a 0%, rgba(11,14,21,0) 58%),
    radial-gradient(900px 500px at 8% 4%, #10271f 0%, rgba(11,14,21,0) 55%),
    var(--ink);
  color:var(--paper); -webkit-font-smoothing:antialiased;
  font-family:var(--f-body);
  font-size:16px; line-height:1.6;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--f-mono)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:linear-gradient(var(--ink),rgba(11,14,21,.72));
    border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);
       font-weight:700;font-size:19px;letter-spacing:-.01em}
.mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
      background:radial-gradient(120% 120% at 30% 20%,#1f2c46,#0c1320);
      border:1px solid var(--line2);color:var(--sigil);font-size:18px;
      box-shadow:0 0 0 1px rgba(22,211,154,.08),0 6px 18px rgba(0,0,0,.5)}
.nav .sp{flex:1}
.nav a.lnk{color:var(--fog);font-size:14.5px;font-weight:500}
.nav a.lnk:hover{color:var(--paper)}
.langsw{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line2);
        border-radius:8px;padding:2px;font-size:12.5px;font-weight:600}
.langsw a{color:var(--fog2);padding:4px 9px;border-radius:6px}
.langsw a:hover{color:var(--paper)}
.langsw a.on{color:var(--ink);background:var(--sigil)}
.ghbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);
       padding:8px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--paper);
       background:#121a28}
.ghbtn:hover{border-color:var(--sigil);color:var(--sigil)}
.ghbtn .star{color:var(--amber)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;
      padding:74px 0 40px}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--sigil);font-weight:600;margin-bottom:20px;
         display:flex;align-items:center;gap:10px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--sigil);
              box-shadow:0 0 0 4px rgba(22,211,154,.16)}
h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
   font-size:clamp(34px,5vw,58px);line-height:1.04;margin:0 0 20px}
h1 .stamp{position:relative;white-space:nowrap;color:var(--crit)}
h1 .stamp::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;
   background:var(--crit);opacity:.0;transform:scaleX(0);transform-origin:left;
   animation:strike 1.1s .9s ease forwards}
@keyframes strike{to{opacity:.55;transform:scaleX(1)}}
.lede{color:var(--fog);font-size:18px;max-width:32em;margin:0 0 28px}
.lede b{color:var(--paper);font-weight:600}

.cmd{display:flex;align-items:center;gap:12px;background:var(--panel2);
     border:1px solid var(--line2);border-radius:11px;padding:13px 14px;max-width:520px}
.cmd .pr{color:var(--sigil)}
.cmd code{font-family:var(--f-mono);font-size:13.5px;color:#cdd8e8;white-space:nowrap;
          overflow:hidden;text-overflow:ellipsis;flex:1}
.copy{border:1px solid var(--line2);background:#0d1420;color:var(--fog);border-radius:7px;
      padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--f-body)}
.copy:hover{color:var(--sigil);border-color:var(--sigil)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:11px;
     font-weight:600;font-size:15px;cursor:pointer}
.btn-pri{background:var(--sigil);color:#04120c;border:1px solid var(--sigil)}
.btn-pri:hover{filter:brightness(1.07)}
.btn-sec{background:#121a28;color:var(--paper);border:1px solid var(--line2)}
.btn-sec:hover{border-color:var(--sigil);color:var(--sigil)}
.meta{margin-top:20px;color:var(--fog2);font-size:13px;font-family:var(--f-mono)}
.meta b{color:var(--fog)}

/* ---------- hero terminal + seal ---------- */
.stage{position:relative}
.term{background:linear-gradient(var(--panel),var(--panel2));border:1px solid var(--line2);
      border-radius:15px;box-shadow:0 30px 70px rgba(0,0,0,.55);overflow:hidden}
.term .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line)}
.term .bar i{width:11px;height:11px;border-radius:50%;background:#2c3a4d;display:inline-block}
.term .bar i:nth-child(1){background:#ff5f57}.term .bar i:nth-child(2){background:#febc2e}
.term .bar i:nth-child(3){background:#28c840}
.term .bar .t{margin-left:8px;color:var(--fog2);font-family:var(--f-mono);font-size:12px}
.term .body{padding:18px 18px 20px;font-family:var(--f-mono);font-size:13px;line-height:1.85}
.term .row{display:flex;gap:10px;color:#c6d2e2}
.term .row .p{color:var(--sigil)}
.term .cmt{color:var(--fog2)}
.overall{margin-top:6px;color:var(--paper);font-weight:600;font-size:12.5px}
.overall b{color:var(--crit)}
.overall .dim{color:var(--fog2);font-weight:400}
.tbl{margin-top:10px;border-top:1px dashed var(--line2);padding-top:12px}
.tr{display:grid;grid-template-columns:1fr auto auto auto;gap:11px;align-items:center;padding:3px 0}
.tr .nm{color:#dbe5f2}
.tr .scope{color:var(--fog2);font-size:11px}
.tr .sc{text-align:right;color:var(--fog);min-width:26px}
.band{font-weight:600;font-size:10.5px;letter-spacing:.05em;padding:2px 8px;border-radius:6px;text-align:center;min-width:66px}
.b-crit{color:var(--crit);background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.32)}
.b-high{color:var(--amber);background:rgba(246,183,60,.12);border:1px solid rgba(246,183,60,.3)}
.b-low{color:var(--sigil);background:rgba(22,211,154,.1);border:1px solid rgba(22,211,154,.28)}
.reasons{margin-top:12px;color:var(--fog2);font-size:12px}
.reasons b{color:var(--crit);font-weight:500}

.seal{position:absolute;right:-26px;top:-30px;width:120px;height:120px;border-radius:50%;
      display:grid;place-items:center;text-align:center;
      background:radial-gradient(120% 120% at 30% 22%,#211019,#150a10);
      border:1.5px solid rgba(255,93,93,.5);
      box-shadow:0 0 0 6px rgba(255,93,93,.06),0 18px 40px rgba(0,0,0,.6);
      transform:rotate(-11deg) scale(1);animation:stampin 1s .55s cubic-bezier(.2,1.3,.3,1) backwards}
@keyframes stampin{from{opacity:0;transform:rotate(8deg) scale(1.9)}}
.seal .ring{position:absolute;inset:8px;border-radius:50%;border:1.5px dashed rgba(255,93,93,.45);
            animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal .g{color:var(--crit);font-size:26px;line-height:1;font-family:var(--f-display)}
.seal .lbl{color:var(--crit);font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
           font-weight:600;margin-top:3px}
.seal .num{color:#ffd9d9;font-family:var(--f-display);font-weight:700;font-size:15px}

/* ---------- section frame ---------- */
section{padding:56px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.sec-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--fog2);
         text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:4px 9px;white-space:nowrap}
h2{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,3vw,32px);
   letter-spacing:-.01em;margin:0}
.sub2{color:var(--fog);max-width:46em;margin:8px 0 0}

/* reads grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:18px}
.card .h{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--paper);margin-bottom:7px}
.card .h .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
             background:#0e1726;border:1px solid var(--line2);color:var(--sigil);font-family:var(--f-mono);font-size:14px}
.card p{color:var(--fog);font-size:14px;margin:0}
.card .f{margin-top:11px;font-family:var(--f-mono);font-size:11.5px;color:var(--fog2)}
.card .f span{color:var(--amber)}

/* measure / philosophy band */
.creed{border:1px solid var(--line2);border-radius:16px;padding:40px 38px;
       background:linear-gradient(100deg,#0f1a18,#0e1320);display:grid;
       grid-template-columns:auto 1fr;gap:30px;align-items:center}
.creed .big{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.4vw,40px);
            letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.creed .big .m{color:var(--sigil)} .creed .big .b{color:var(--fog2)}
.creed p{color:var(--fog);margin:0;max-width:34em}
.creed .edr{font-family:var(--f-mono);font-size:12.5px;color:var(--fog2);margin-top:10px}
.creed .edr b{color:var(--paper);font-weight:500}

/* wedge / fleet */
.wedge{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.wedge h2 .m{color:var(--sigil)}
.seals{display:flex;gap:12px;margin:22px 0 4px;flex-wrap:wrap}
.mini{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center;
      background:radial-gradient(120% 120% at 30% 22%,#13202c,#0c141d);position:relative}
.mini .r{position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--line2)}
.mini .v{font-family:var(--f-display);font-weight:700;font-size:14px}
.mini .hn{font-family:var(--f-mono);font-size:8px;color:var(--fog2);margin-top:1px;letter-spacing:.04em}
.mini.crit{border:1px solid rgba(255,93,93,.4)}.mini.crit .v{color:var(--crit)}
.mini.high{border:1px solid rgba(246,183,60,.4)}.mini.high .v{color:var(--amber)}
.mini.low{border:1px solid rgba(22,211,154,.32)}.mini.low .v{color:var(--sigil)}
.vid{border:1px solid var(--line2);border-radius:15px;overflow:hidden;background:#0a0f17;
     box-shadow:0 24px 60px rgba(0,0,0,.5)}
.vid video{display:block;width:100%;height:auto}
.wlink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--sigil);
       font-weight:600;font-size:14.5px;border-bottom:1px solid transparent}
.wlink:hover{border-color:var(--sigil)}

/* final CTA */
.final{text-align:center;padding:70px 0 30px}
.final h2{font-size:clamp(28px,4vw,42px)}
.final .cta{justify-content:center;margin-top:26px}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--fog2);font-size:13.5px}
.foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot .sp{flex:1}
.foot a{color:var(--fog)} .foot a:hover{color:var(--sigil)}
.ph{color:var(--ctrl);font-family:var(--f-mono);font-size:11px}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:38px;padding:48px 0 20px}
  .creed{grid-template-columns:1fr;gap:18px}
  .creed .big{white-space:normal}
  .wedge{grid-template-columns:1fr;gap:30px}
  .grid{grid-template-columns:1fr}
  .seal{right:10px;top:-18px;width:98px;height:98px}
  .nav .lnk{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  h1 .stamp::after{opacity:.55;transform:scaleX(1)}
}