/* =========================================================================
   BASTION  —  Total Security
   Design system: faithful reproduction of anduril.com DNA
   (extracted from live style.css: 12-col grid, HelveticaNowDisplay type scale,
    outline/underline buttons, theme-color inversion, roller counters, Lenis)
   Accent re-cast to Signal Amber #F5A623.
   ========================================================================= */

/* ---------- Fonts (Inter = HelveticaNowDisplay substitute, JetBrains Mono = Elios) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Shippori+Mincho+B1:wght@500;700;800&display=swap');

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  font-size:16px;
  scroll-behavior:auto; /* Lenis handles smoothing */
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter","Noto Sans JP",Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 行頭禁則 */
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:#010101}

/* ---------- Tokens ---------- */
:root{
  --black:#010101;
  --white:#ffffff;
  --grey:#b0b0a9;          /* warm matte grey (Anduril) */
  --grey-deep:#6d6d67;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --accent:#F5A623;        /* Signal Amber */
  --accent-deep:#d98a12;
  --accent-glow:rgba(245,166,35,.32);

  /* theme (dark by default, invert on .theme-light) */
  --bg:var(--black);
  --fg:var(--white);
  --muted:var(--grey);
  --hairline:var(--line);

  /* fluid type scale (root≈16px). Mirrors Anduril: label .75–.93 / body / display 9rem / stat 14–16rem */
  --fs-label:clamp(.68rem,.62rem + .3vw,.8rem);
  --fs-body:clamp(.95rem,.9rem + .3vw,1.075rem);
  --fs-lead:clamp(1.15rem,1rem + .8vw,1.5rem);
  --fs-h4:clamp(1.25rem,1.05rem + 1vw,1.7rem);
  --fs-h3:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  --fs-h2:clamp(2.2rem,1.4rem + 3.6vw,4.2rem);
  --fs-h1:clamp(3.1rem,1.4rem + 7.4vw,9rem);
  --fs-stat:clamp(4.5rem,2rem + 12vw,15rem);

  --container:1560px;
  --gutter:clamp(20px,4vw,64px);
  --col-gap:1.125rem;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --dur:.6s;
}
.theme-light{
  --bg:var(--white);
  --fg:var(--black);
  --muted:var(--grey-deep);
  --hairline:rgba(1,1,1,.14);
}
.theme-grey{
  --bg:var(--grey);
  --fg:var(--black);
  --muted:#4a4a44;
  --hairline:rgba(1,1,1,.18);
}

/* ---------- Layout ---------- */
.section{
  background:var(--bg);
  color:var(--fg);
  position:relative;
  padding:clamp(72px,10vw,160px) 0;
}
.section--tight{padding:clamp(48px,6vw,96px) 0}
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  row-gap:var(--col-gap);
}
.measure{max-width:46ch}
.measure-wide{max-width:62ch}

/* ---------- Typography helpers ---------- */
.label{
  font-family:"JetBrains Mono","Inter",monospace;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.05;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.label::before{
  content:"";
  width:1.6em;height:1px;background:var(--accent);
  display:inline-block;flex:none;
}
.label--plain::before{display:none}
.eyebrow-idx{color:var(--accent);font-weight:600}

.display{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:1.02;
  letter-spacing:-.03em;
}
.h2{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-weight:600;
  font-size:var(--fs-h2);
  line-height:1.06;
  letter-spacing:-.025em;
}
.h3{
  font-weight:600;
  font-size:var(--fs-h3);
  line-height:1.12;
  letter-spacing:-.02em;
}
.h4{
  font-weight:600;
  font-size:var(--fs-h4);
  line-height:1.2;
  letter-spacing:-.015em;
}
.lead{
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--fg);
}
.body{
  font-size:var(--fs-body);
  color:var(--muted);
  line-height:1.75;
}
.jp-mincho{font-family:"Shippori Mincho B1","Noto Serif JP",serif}
.amber{color:var(--accent)}
.nowrap{white-space:nowrap}

/* ---------- Buttons (Anduril LinkButton) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:1rem;font-weight:500;letter-spacing:-.01em;
  line-height:1.05;cursor:pointer;width:fit-content;
}
/* primary = animated underline link */
.btn--link{position:relative;padding-bottom:.35em;color:var(--fg)}
.btn--link .btn__t{position:relative}
.btn--link .btn__t::after{
  content:"";position:absolute;left:0;bottom:-.15em;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0;
  transition:transform .4s var(--ease-out);
}
.btn--link:hover .btn__t::after{transform:scaleX(1)}
.btn--link .btn__arrow{transition:transform .4s var(--ease-out)}
.btn--link:hover .btn__arrow{transform:translateX(.3em)}
.btn--link.on-accent .btn__t{color:var(--accent)}

/* secondary = 1px outline box, invert on hover */
.btn--box{
  padding:.7em 1.1em;outline:1px solid var(--fg);
  color:var(--fg);background:transparent;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),outline-color .35s var(--ease-out);
}
.btn--box:hover{background:var(--fg);color:var(--bg)}
.btn--amber{
  padding:.8em 1.3em;background:var(--accent);color:#010101;
  outline:1px solid var(--accent);font-weight:600;
  transition:background-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.btn--amber:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-glow)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  padding:18px 0;
  transition:padding .4s var(--ease-out),background-color .4s var(--ease-out),border-color .4s var(--ease-out);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.site-header.is-scrolled{
  padding:11px 0;
  background:rgba(1,1,1,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:inline-flex;align-items:baseline;gap:.55rem;color:#fff}
.brand__mark{
  font-family:"Inter",sans-serif;font-weight:800;font-size:1.32rem;
  letter-spacing:.34em;text-indent:.34em;
}
.brand__sub{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}
.brand__logo{height:clamp(40px,4.3vw,56px);width:auto;max-width:none;display:block;transition:height .4s var(--ease-out)}
.is-scrolled .brand__logo{height:clamp(34px,3.6vw,46px)}
.footer-logo{height:clamp(46px,5vw,64px);width:auto;max-width:none;display:block}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.4rem)}
.nav a{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72);
  position:relative;padding:.2em 0;transition:color .3s var(--ease-out);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0;
  transition:transform .35s var(--ease-out);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav-mono{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.header-cta{display:flex;align-items:center;gap:1.1rem}
.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.nav-toggle span{display:block;height:1.5px;width:26px;background:#fff;transition:transform .4s var(--ease-out),opacity .3s,width .4s}
.nav-toggle span:nth-child(2){width:18px}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:190;background:#010101;
  padding:96px var(--gutter) 40px;
  display:flex;flex-direction:column;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .6s var(--ease-inout),visibility .6s;
}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer a{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:600;letter-spacing:-.02em;padding:.35em 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer a .idx{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--accent);letter-spacing:.1em}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(40px,7vh,90px);overflow:hidden;
  background:#010101 url("../images/hero-city.jpg") center 32%/cover no-repeat;
}
@media(max-width:680px){.hero{background-image:url("../images/hero-city-sp.jpg");background-position:center 40%}}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;mix-blend-mode:screen;opacity:.75}
.hero::after{ /* vignette + bottom fade for legibility */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 20%,rgba(245,166,35,.06),transparent 55%),
    linear-gradient(180deg,rgba(1,1,1,.55) 0%,rgba(1,1,1,0) 30%,rgba(1,1,1,.2) 62%,rgba(1,1,1,.92) 100%);
}
.hero .container{position:relative;z-index:2;width:100%}
.hero__eyebrow{margin-bottom:clamp(20px,3vw,34px)}
.hero__title{
  font-family:"Inter","Noto Sans JP",sans-serif;font-weight:800;
  font-size:clamp(2.4rem, .4rem + 6.7vw, 7rem);line-height:1.03;letter-spacing:-.02em;color:#fff;
  text-wrap:balance;
}
.hero__title .jp{font-weight:800;letter-spacing:-.015em;white-space:nowrap}
@media(max-width:359px){.hero__title .jp{white-space:normal}}
.hero__lead{margin-top:clamp(22px,3vw,34px);max-width:38ch;color:rgba(255,255,255,.82)}
.hero__actions{margin-top:clamp(28px,3.4vw,44px);display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.hero__foot{
  position:absolute;left:0;bottom:clamp(40px,7vh,90px);right:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;
}
.scan-note{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:.6em;white-space:nowrap}
.scan-note .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2.4s var(--ease-out) infinite}
.hero .hero__foot{position:absolute;left:0;right:0;bottom:clamp(16px,2.6vh,26px);width:auto;max-width:none;margin:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}

/* ---------- Stat band (RollerCounter) ---------- */
.stats{border-top:1px solid var(--hairline)}
.stats .grid{row-gap:clamp(40px,6vw,72px)}
.stat{grid-column:span 3;display:flex;flex-direction:column;gap:.6rem;position:relative}
.stat__num{
  font-family:"Inter",sans-serif;font-weight:600;
  font-size:clamp(2.9rem,1.4rem + 5vw,6rem);line-height:.86;letter-spacing:-.04em;
  color:var(--fg);display:flex;align-items:flex-end;gap:.08em;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex-wrap:nowrap;
}
.stat__num>span{white-space:nowrap;flex:none}
.stat__num .unit{font-size:.32em;font-weight:500;letter-spacing:-.01em;color:var(--muted);margin-bottom:.4em}
.stat__num .dot{color:var(--accent)}
.stat__label{font-size:.92rem;color:var(--muted);line-height:1.5;max-width:24ch}
.stat__k{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- Section head ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1.4rem;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head__idx{grid-column:1/3;font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;color:var(--accent);padding-top:.4em}
.sec-head__title{grid-column:3/9}
.sec-head__aside{grid-column:9/13;color:var(--muted);font-size:var(--fs-body);align-self:end}
@media(max-width:860px){
  .sec-head__idx{grid-column:1/13}
  .sec-head__title{grid-column:1/13}
  .sec-head__aside{grid-column:1/13}
}

/* ---------- About / chapter ---------- */
.chapter{min-height:66vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:clamp(24px,4vw,56px) 0}
.chapter__quote{font-family:"Inter","Noto Sans JP",sans-serif;font-weight:500;font-size:clamp(1.8rem,1rem + 3.6vw,4rem);line-height:1.18;letter-spacing:-.025em;max-width:20ch}
.chapter__body{margin-top:2.4rem;max-width:54ch}
.pullquote{font-weight:500;font-size:clamp(1.5rem,.9rem + 2.6vw,3rem);line-height:1.28;letter-spacing:-.02em}
.pullquote .amber{font-style:normal}

/* ---------- Strengths (ProductQualities) ---------- */
.qualities{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
.quality{
  grid-column:span 4;background:var(--bg);
  padding:clamp(28px,3vw,48px) clamp(24px,2.4vw,40px) clamp(34px,3.6vw,56px);
  display:flex;flex-direction:column;gap:1.1rem;position:relative;
  transition:background-color .5s var(--ease-out);
}
.quality:hover{background:#0a0b0d}
.theme-light .quality:hover{background:#f3f3f0}
.quality__idx{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.quality__ico{width:38px;height:38px;color:var(--fg);opacity:.9}
.quality__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.quality__body{font-size:var(--fs-body);color:var(--muted);line-height:1.7}
.quality__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .6s var(--ease-out)}
.quality:hover .quality__bar{width:100%}

/* ---------- Services (1–4号) ---------- */
.svc{border-top:1px solid var(--hairline)}
.svc-row{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);
  align-items:start;padding:clamp(30px,3.4vw,52px) 0;border-bottom:1px solid var(--hairline);
  position:relative;transition:padding-left .5s var(--ease-out);
}
.svc-row:hover{padding-left:clamp(6px,1vw,20px)}
.svc-row__no{grid-column:1/3;font-family:"JetBrains Mono",monospace;font-size:.8rem;letter-spacing:.14em;color:var(--accent);padding-top:.5em}
.svc-row__name{grid-column:3/7}
.svc-row__name h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.svc-row__name .en{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:.7em}
.svc-row__desc{grid-column:7/12;color:var(--muted);font-size:var(--fs-body);line-height:1.7}
.svc-row__arrow{grid-column:12/13;justify-self:end;color:var(--muted);transition:transform .5s var(--ease-out),color .5s}
.svc-row:hover .svc-row__arrow{transform:translateX(6px);color:var(--accent)}
@media(max-width:860px){
  .svc-row__no{grid-column:1/13}
  .svc-row__name{grid-column:1/13;margin-top:.4rem}
  .svc-row__desc{grid-column:1/13;margin-top:1rem}
  .svc-row__arrow{display:none}
}

/* ---------- System (人＋機械) ---------- */
.sys{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.sys__col{background:var(--bg);padding:clamp(30px,3.6vw,60px)}
.sys__col h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.4em}
.sys__col .kicker{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem;display:block}
.sys__list{margin-top:1.8rem;display:flex;flex-direction:column}
.sys__list li{padding:1.05rem 0;border-top:1px solid var(--hairline);color:var(--muted);font-size:var(--fs-body);display:flex;gap:1rem;align-items:baseline}
.sys__list li::before{content:"";width:6px;height:6px;flex:none;background:var(--accent);transform:translateY(-2px)}
.sys__merge{margin-top:2rem;font-size:var(--fs-lead);line-height:1.5;color:var(--fg)}
@media(max-width:760px){.sys{grid-template-columns:1fr}}

/* ---------- Flow ---------- */
.flow{counter-reset:flow;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
.flow__step{grid-column:span 4;background:var(--bg);padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;gap:.9rem;min-height:210px}
.flow__step .n{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--accent);letter-spacing:.14em}
.flow__step h4{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.015em}
.flow__step p{color:var(--muted);font-size:var(--fs-body);line-height:1.7}
@media(max-width:860px){.flow__step{grid-column:span 6}}
@media(max-width:560px){.flow__step{grid-column:span 12;min-height:0}}

/* ---------- Field tags ---------- */
.fields{display:flex;flex-wrap:wrap;gap:.7rem}
.field-tag{
  border:1px solid var(--hairline);padding:.7em 1.1em;font-size:.92rem;color:var(--fg);
  transition:border-color .35s var(--ease-out),color .35s,background-color .35s;
}
.field-tag:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Message / representative ---------- */
.message .pullquote{max-width:22ch}
.msg-sign{margin-top:2.4rem;font-family:"JetBrains Mono",monospace;font-size:.8rem;letter-spacing:.1em;color:var(--muted)}
.msg-sign strong{color:var(--fg);font-weight:600}

/* ---------- CTA split (法人 / 採用) ---------- */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.cta-card{background:var(--bg);padding:clamp(36px,4.6vw,84px);display:flex;flex-direction:column;gap:1.2rem;position:relative;overflow:hidden;transition:background-color .5s}
.cta-card:hover{background:#0a0b0d}
.cta-card .kicker{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cta-card h3{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.cta-card p{color:var(--muted);max-width:34ch;font-size:var(--fs-body)}
.cta-card .act{margin-top:auto;padding-top:1.4rem}
@media(max-width:760px){.cta-split{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:#010101;color:#fff;padding:clamp(64px,8vw,120px) 0 40px;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:2.4rem}
.footer-brand{grid-column:1/5}
.footer-brand .brand__mark{font-size:1.6rem}
.footer-tag{margin-top:1.4rem;color:var(--grey);max-width:26ch;font-size:.95rem;line-height:1.7}
.footer-nav{grid-column:6/9}
.footer-nav.two{grid-column:9/12}
.footer-nav h5{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:1.3rem}
.footer-nav a{display:block;padding:.42em 0;color:rgba(255,255,255,.74);font-size:.95rem;transition:color .3s}
.footer-nav a:hover{color:var(--accent)}
.footer-bottom{margin-top:clamp(48px,6vw,90px);padding-top:1.6rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;color:var(--grey);font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.08em}
@media(max-width:860px){
  .footer-brand{grid-column:1/13}
  .footer-nav{grid-column:1/7}
  .footer-nav.two{grid-column:7/13}
}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.08s}
[data-reveal-d="2"]{transition-delay:.16s}
[data-reveal-d="3"]{transition-delay:.24s}
[data-reveal-d="4"]{transition-delay:.32s}
.reveal-line{overflow:hidden;display:block}
.reveal-line>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.is-in .reveal-line>span,.reveal-line.is-in>span{transform:none}

/* scroll progress */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:300;box-shadow:0 0 10px var(--accent-glow)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .stat{grid-column:span 6}
}
@media(max-width:1024px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn--box{display:none}
}
@media(max-width:640px){
  .stat{grid-column:span 6}
  .quality{grid-column:span 12}
  .hero__foot{display:none}
}

/* =========================================================================
   Sub-page components (multi-page)
   ========================================================================= */
/* page hero */
.page-hero{
  position:relative;overflow:hidden;background:#010101;color:#fff;
  padding:clamp(128px,20vh,220px) 0 clamp(46px,7vh,88px);
  min-height:clamp(360px,52vh,560px);display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),rgba(255,255,255,.045) calc(100%/12 - 1px),rgba(255,255,255,.045) calc(100%/12)),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 86% 12%,rgba(245,166,35,.08),transparent 58%),
             linear-gradient(180deg,rgba(1,1,1,.2),rgba(1,1,1,.86));
}
.page-hero .container{position:relative;z-index:2;width:100%}
.page-hero__idx{margin-bottom:clamp(16px,2.4vw,28px)}
.page-hero__en{font-family:"JetBrains Mono",monospace;font-size:clamp(.66rem,.6rem + .3vw,.8rem);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.page-hero__title{font-family:"Inter","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(2.6rem,1.4rem + 5.4vw,6.4rem);line-height:1.02;letter-spacing:-.03em;color:#fff}
.page-hero__lead{margin-top:clamp(20px,2.6vw,32px);max-width:46ch;color:rgba(255,255,255,.8);font-size:var(--fs-lead);line-height:1.5}
.crumb{position:absolute;top:calc(var(--gutter));left:0;width:100%;z-index:2}
.crumb .container{display:flex;gap:.6em;font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.crumb a{color:rgba(255,255,255,.55)}
.crumb a:hover{color:var(--accent)}

/* generic rich text page block */
.prose{max-width:64ch}
.prose p{font-size:var(--fs-body);color:var(--muted);line-height:1.85;margin-bottom:1.4em}
.prose p strong{color:var(--fg);font-weight:600}
.lead-block{font-size:var(--fs-lead);line-height:1.55;color:var(--fg);letter-spacing:-.01em;max-width:30ch}

/* two-column rich (label left / body right) */
.tcr{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:2rem;padding:clamp(40px,5vw,80px) 0;border-top:1px solid var(--hairline)}
.tcr__k{grid-column:1/4}
.tcr__b{grid-column:5/12}
@media(max-width:860px){.tcr__k{grid-column:1/13}.tcr__b{grid-column:1/13}}

/* detail list of strengths / expanded */
.detail-list{border-top:1px solid var(--hairline)}
.detail-item{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1.2rem;padding:clamp(34px,4vw,64px) 0;border-bottom:1px solid var(--hairline);align-items:start}
.detail-item__no{grid-column:1/2;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--accent);padding-top:.5em}
.detail-item__ico{grid-column:2/3;color:var(--fg)}
.detail-item__ico svg{width:40px;height:40px}
.detail-item__head{grid-column:3/7}
.detail-item__head h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.14}
.detail-item__head .en{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:.7em}
.detail-item__body{grid-column:7/13;color:var(--muted);font-size:var(--fs-body);line-height:1.8}
@media(max-width:860px){
  .detail-item__no{grid-column:1/3}.detail-item__ico{grid-column:3/13;grid-row:auto}
  .detail-item__head{grid-column:1/13}.detail-item__body{grid-column:1/13}
}

/* company spec table */
.spec{border-top:1px solid var(--hairline)}
.spec__row{display:grid;grid-template-columns:minmax(180px,3fr) 9fr;gap:1.2rem;padding:1.25rem 0;border-bottom:1px solid var(--hairline)}
.spec__row dt{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.25em}
.spec__row dd{font-size:var(--fs-body);color:var(--fg);line-height:1.7}
@media(max-width:600px){.spec__row{grid-template-columns:1fr;gap:.4rem}}

/* recruit */
.jobs{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
.job{grid-column:span 4;background:var(--bg);padding:clamp(26px,2.8vw,44px);display:flex;flex-direction:column;gap:1rem;min-height:220px}
.job .n{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--accent);letter-spacing:.12em}
.job h3{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.015em}
.job p{color:var(--muted);font-size:var(--fs-body);line-height:1.7}
@media(max-width:860px){.job{grid-column:span 6}}
@media(max-width:560px){.job{grid-column:span 12;min-height:0}}
.perks{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.perk{background:var(--bg);padding:clamp(22px,2.4vw,36px);display:flex;gap:1.2rem;align-items:flex-start}
.perk .pk{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--accent);padding-top:.3em;flex:none;white-space:nowrap}
.perk h4{font-size:var(--fs-h4);font-weight:600;margin-bottom:.4em;letter-spacing:-.015em}
.perk p{color:var(--muted);font-size:var(--fs-body);line-height:1.7}
@media(max-width:680px){.perks{grid-template-columns:1fr}}

/* form */
.form{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1.6rem}
.form .fld{grid-column:span 6;display:flex;flex-direction:column;gap:.6rem}
.form .fld.full{grid-column:1/13}
.form label{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form label .req{color:var(--accent)}
.form input,.form select,.form textarea{
  font:inherit;font-size:1rem;color:var(--fg);background:transparent;
  border:1px solid var(--hairline);padding:.9em 1em;width:100%;
  transition:border-color .3s var(--ease-out);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:160px;resize:vertical}
.form .submit{grid-column:1/13;margin-top:.6rem}
.form .form-note,.form-note{grid-column:1/13;font-size:.85rem;color:var(--muted);line-height:1.7}
@media(max-width:640px){.form .fld{grid-column:1/13}}

/* segmented (contact type toggle) */
.seg{display:inline-flex;border:1px solid var(--hairline);margin-bottom:2.4rem}
.seg button{padding:.7em 1.3em;font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:background-color .3s,color .3s}
.seg button.is-on{background:var(--accent);color:#010101}

/* contact aside cards */
.cinfo{display:flex;flex-direction:column;gap:1.4rem}
.cinfo__card{border:1px solid var(--hairline);padding:clamp(22px,2.4vw,32px)}
.cinfo__card .k{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;display:block}
.cinfo__card .big{font-size:clamp(1.5rem,1rem + 1.6vw,2.2rem);font-weight:600;letter-spacing:-.02em}
.cinfo__card p{color:var(--muted);font-size:var(--fs-body);margin-top:.4rem}

/* page-to-page nav */
.page-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);background:#010101;color:#fff}
.page-nav a{padding:clamp(30px,4vw,60px) var(--gutter);display:flex;flex-direction:column;gap:.5rem;transition:background-color .4s var(--ease-out)}
.page-nav a:hover{background:#0a0b0d}
.page-nav a.next{text-align:right;align-items:flex-end;border-left:1px solid var(--line)}
.page-nav .dir{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.page-nav .ttl{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.015em}
.page-nav a:hover .ttl{color:var(--accent)}
@media(max-width:560px){.page-nav{grid-template-columns:1fr}.page-nav a.next{text-align:left;align-items:flex-start;border-left:none;border-top:1px solid var(--line)}}

/* section link in headings */
.sec-head__aside .btn--link{margin-top:1rem}
.viewlink{margin-top:1.4rem}

/* ---------- Media band (full-bleed image) ---------- */
.media-band{position:relative;width:100%;height:clamp(300px,50vh,600px);overflow:hidden;background:#010101}
.media-band>img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease-out)}
.media-band.is-in>img{transform:scale(1)}
.media-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,1,1,.35),rgba(1,1,1,0) 30%,rgba(1,1,1,.1) 60%,rgba(1,1,1,.82))}
.media-band__grid{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),rgba(255,255,255,.05) calc(100%/12 - 1px),rgba(255,255,255,.05) calc(100%/12));z-index:1}
.media-band__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3vw,44px) 0}
.media-band__cap .label{color:rgba(255,255,255,.7)}
.media-band__cap .t{font-size:clamp(1.4rem,1rem + 2vw,2.6rem);font-weight:600;letter-spacing:-.02em;color:#fff;margin-top:.6rem;line-height:1.2}

/* framed inline image */
.media-frame{position:relative;overflow:hidden;background:#050607;border:1px solid var(--hairline)}
.media-frame>img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05);transition:transform 1.6s var(--ease-out)}
.media-frame.is-in>img{transform:scale(1)}
.media-frame__tag{position:absolute;top:0;left:0;z-index:2;font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);background:rgba(1,1,1,.5);backdrop-filter:blur(4px);padding:.5em .8em;display:flex;gap:.6em;align-items:center}
.media-frame__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.media-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,1,1,.28),rgba(1,1,1,0) 40%,rgba(1,1,1,.4))}

/* ========================================================================
   SOC — live security-operations monitoring UI (the showpiece)
   ======================================================================== */
.soc{
  display:grid;grid-template-columns:1.55fr 1fr;gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
  font-family:"JetBrains Mono",monospace;overflow:hidden;
}
.soc__feeds{background:#060708;display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.soc__cam{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(60,72,84,.5),transparent 60%),
    radial-gradient(80% 80% at 80% 100%,rgba(30,38,48,.6),transparent 60%),
    linear-gradient(160deg,#0c1015,#050708);
}
.soc__cam::before{ /* CRT scanlines */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 2px,transparent 3px);
}
.soc__cam::after{ /* sweeping scanline */
  content:"";position:absolute;left:0;right:0;height:38%;top:-38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,150,170,.10) 60%,rgba(160,190,210,.18));
  animation:cam-scan 5.5s linear infinite;
}
.soc__cam:nth-child(2)::after{animation-delay:-1.4s}
.soc__cam:nth-child(3)::after{animation-delay:-2.7s}
.soc__cam:nth-child(4)::after{animation-delay:-3.9s}
.soc__cam:nth-child(5)::after{animation-delay:-0.7s}
.soc__cam:nth-child(6)::after{animation-delay:-4.6s}
@keyframes cam-scan{0%{top:-38%}100%{top:100%}}
.soc__cam .cam-tag{position:absolute;top:7px;left:8px;font-size:.54rem;letter-spacing:.12em;color:rgba(210,225,235,.72)}
.soc__cam .cam-rec{position:absolute;top:7px;right:8px;font-size:.5rem;letter-spacing:.1em;color:rgba(210,225,235,.6);display:flex;align-items:center;gap:.4em}
.soc__cam .cam-rec i{width:5px;height:5px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 6px #ff5a5a;animation:pulse 1.8s var(--ease-out) infinite;font-style:normal}
.soc__cam .cam-ts{position:absolute;bottom:6px;left:8px;font-size:.5rem;letter-spacing:.06em;color:rgba(180,200,212,.62)}
.soc__cam .cam-sig{position:absolute;bottom:6px;right:8px;display:flex;gap:1px;align-items:flex-end;height:9px}
.soc__cam .cam-sig span{width:2px;background:rgba(150,180,200,.5);align-self:flex-end}
.soc__cam .cam-sig span:nth-child(1){height:3px}
.soc__cam .cam-sig span:nth-child(2){height:5px}
.soc__cam .cam-sig span:nth-child(3){height:7px}
.soc__cam .cam-sig span:nth-child(4){height:9px;background:rgba(150,180,200,.25)}
.soc__cam .motion{
  position:absolute;border:1px dashed var(--accent);opacity:0;
  box-shadow:0 0 0 1px rgba(245,166,35,.15) inset;transition:opacity .3s;
}
.soc__cam .motion::after{content:"MOTION";position:absolute;top:-14px;left:0;font-size:.46rem;letter-spacing:.14em;color:var(--accent)}
.soc__cam.is-alert .motion{opacity:1}
.soc__cam.is-alert{outline:1px solid rgba(245,166,35,.4);outline-offset:-1px}

.soc__panel{background:#060708;padding:clamp(18px,1.6vw,26px);display:flex;flex-direction:column;gap:1.1rem}
.soc__panel .p-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hairline);padding-bottom:.9rem}
.soc__panel .p-head .sys-on{display:flex;align-items:center;gap:.5em;font-size:.6rem;letter-spacing:.14em;color:var(--accent)}
.soc__panel .p-head .sys-on i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s var(--ease-out) infinite;font-style:normal}
.soc__panel .p-head .clock{font-size:.62rem;letter-spacing:.08em;color:rgba(200,215,225,.66)}
#soc-radar{width:100%;height:auto;aspect-ratio:1/1;max-height:190px;margin-inline:auto;display:block}
.soc__rows{display:flex;flex-direction:column;gap:.7rem}
.soc__row{display:flex;align-items:baseline;justify-content:space-between;font-size:.62rem;letter-spacing:.06em;color:rgba(190,205,215,.6)}
.soc__row b{font-weight:500;color:#fff;font-size:.78rem;letter-spacing:.02em}
.soc__row b .u{color:var(--accent);font-size:.62rem;margin-left:.2em}
.soc__wave{display:flex;gap:2px;align-items:flex-end;height:26px;margin-top:.2rem}
.soc__wave span{flex:1;background:linear-gradient(180deg,var(--accent),rgba(245,166,35,.25));opacity:.7;height:20%;transform-origin:bottom}
@media(max-width:860px){
  .soc{grid-template-columns:1fr}
  .soc__feeds{grid-template-columns:repeat(2,1fr)}
}

/* collapse any inline 2-column grid split to full width on mobile */
@media(max-width:820px){
  .grid > [style*="grid-column"]{grid-column:1 / -1 !important}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}