/* TechAsia.ai — instrument palette
   Single accent (vermilion) is reserved exclusively for marking waste. */

:root{
  --casing:#D8DBD4; --casing-2:#CDD1C9; --casing-3:#C2C7BE;
  --ink:#20262A; --ink-2:#3D464B; --ink-3:#6B7479;
  --signal:#D23B26;
  --rule:rgba(32,38,42,0.20); --rule-soft:rgba(32,38,42,0.11);
  --rule-dark:rgba(216,219,212,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--casing);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;}
h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:600;line-height:1.1;letter-spacing:-0.018em;}
a{color:inherit;text-decoration:none;}
.m{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.wrap{max-width:1220px;margin:0 auto;padding:0 36px;}
@media(max-width:760px){.wrap{padding:0 20px;}}
button{font-family:inherit;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--casing);padding:10px 14px;}

.ruler{height:13px;background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 24px);
  border-bottom:1px solid var(--rule);}
.ruler.tall{height:20px;background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 20px);
  border-bottom:1px solid var(--ink);}

/* ---------- header + logo ---------- */
header{position:sticky;top:0;z-index:70;background:var(--casing);border-bottom:1px solid var(--ink);}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{display:block;width:22px;height:22px;}
.brand .wordmark{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-0.02em;}
.brand .wordmark em{font-style:normal;font-weight:400;color:var(--ink-3);}
.lg-cell{fill:var(--ink);}
.lg-idle{fill:var(--signal);}
.brand:hover .lg-idle{animation:reclaim 1.1s ease forwards;}
@keyframes reclaim{
  0%{fill:var(--signal);transform:scale(1);}
  45%{fill:var(--signal);transform:scale(0.45);}
  46%{fill:none;stroke:var(--ink);stroke-width:1.4;}
  100%{fill:none;stroke:var(--ink);stroke-width:1.4;transform:scale(1);}
}
.lg-idle{transform-origin:center;transform-box:fill-box;}

nav.menu{display:flex;gap:0;}
@media(max-width:1080px){nav.menu{display:none;}}
nav.menu a{color:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:0.72rem;
  letter-spacing:0.05em;text-transform:uppercase;padding:8px 11px;transition:color .16s;}
nav.menu a:hover{color:var(--ink);}
nav.menu a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);}
.navcta{background:var(--ink);color:var(--casing);border:1px solid var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;padding:10px 15px;
  text-transform:uppercase;transition:opacity .16s;white-space:nowrap;display:inline-block;}
.navcta:hover{opacity:.85;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
.mobnav{display:none;border-bottom:1px solid var(--rule);background:var(--casing-2);}
@media(max-width:1080px){
  .mobnav{display:block;}
  .mobnav .wrap{display:flex;gap:0;overflow-x:auto;padding-top:8px;padding-bottom:8px;}
  .mobnav a{color:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:0.7rem;
    text-transform:uppercase;padding:6px 10px;white-space:nowrap;}
  .mobnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);}
}

/* ---------- layout ---------- */
section{padding:84px 0;}
@media(max-width:760px){section{padding:56px 0;}}
.band-2{background:var(--casing-2);}
.band-ink{background:var(--ink);color:var(--casing);}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--casing);}

.fig{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;}
.band-ink .fig{color:rgba(216,219,212,0.55);}
.fig b{color:var(--signal);font-weight:500;}
.head{max-width:64ch;margin-bottom:46px;}
.head h2{font-size:clamp(1.7rem,3.1vw,2.4rem);margin-bottom:14px;}
.lede{font-size:1.03rem;color:var(--ink-2);max-width:58ch;}
.band-ink .lede{color:rgba(216,219,212,0.66);}

.bt{font-family:'JetBrains Mono',monospace;font-size:0.77rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:13px 22px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--casing);
  transition:opacity .16s;display:inline-block;}
.bt:hover{opacity:.85;}
.bt.ghost{background:none;color:var(--ink);}
.bt.ghost:hover{background:var(--ink);color:var(--casing);opacity:1;}
.band-ink .bt{background:var(--casing);color:var(--ink);border-color:var(--casing);}
.band-ink .bt.ghost{background:none;color:var(--casing);border-color:rgba(216,219,212,0.4);}
.band-ink .bt.ghost:hover{background:var(--casing);color:var(--ink);}
.btrow{display:flex;gap:12px;flex-wrap:wrap;}

.hero{padding:74px 0 76px;}
.hgrid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:54px;align-items:center;}
@media(max-width:980px){.hgrid{grid-template-columns:1fr;gap:42px;}}
.hero h1{font-size:clamp(2rem,4.1vw,3.2rem);font-weight:700;max-width:15ch;margin-bottom:20px;letter-spacing:-0.03em;}
.hero h1 mark{background:none;color:var(--signal);}
.hero p{font-size:1.04rem;color:var(--ink-2);max-width:47ch;margin-bottom:28px;}

/* ---------- instrument panel ---------- */
.instr{border:1px solid var(--ink);background:var(--casing-3);}
.instr-head{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  border-bottom:1px solid var(--ink);font-family:'JetBrains Mono',monospace;font-size:0.65rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);}
.instr-body{padding:18px 16px 16px;}
.scale{height:14px;margin-bottom:12px;opacity:.5;
  background-image:repeating-linear-gradient(to right,var(--ink-3) 0 1px,transparent 1px 12px);}
.seatgrid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;}
@media(max-width:520px){.seatgrid{grid-template-columns:repeat(12,1fr);}}
.st{aspect-ratio:1;background:rgba(32,38,42,0.13);transition:background .35s ease;}
.st.act{background:var(--ink);}
.st.idle{background:var(--signal);}
.st.rec{background:none;box-shadow:inset 0 0 0 1.5px var(--ink);}
.instr-ctrls{display:flex;margin-top:16px;border:1px solid var(--ink);}
.ic{flex:1;background:none;border:none;border-right:1px solid var(--ink);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:0.67rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:10px 8px;color:var(--ink-2);transition:.16s;}
.ic:last-child{border-right:none;}
.ic:hover{background:rgba(32,38,42,0.07);}
.ic.on{background:var(--ink);color:var(--casing);}
.key{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-family:'JetBrains Mono',monospace;
  font-size:0.63rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.04em;}
.key i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:middle;}
.k-act{background:var(--ink);} .k-idle{background:var(--signal);} .k-rec{box-shadow:inset 0 0 0 1.5px var(--ink);}
.readout{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--ink-2);min-height:2.8em;}
.readout b{color:var(--signal);font-weight:500;}

/* ---------- blocks ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);}
@media(max-width:880px){.three{grid-template-columns:1fr;}}
.two-c{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);}
@media(max-width:880px){.two-c{grid-template-columns:1fr;}}
.cel{padding:30px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.cel:last-child{border-right:none;}
@media(max-width:880px){.cel{border-right:none;}}
.cel .ref{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;
  color:var(--ink-3);margin-bottom:14px;text-transform:uppercase;}
.cel h3{font-size:1.06rem;margin-bottom:9px;}
.cel p{font-size:0.92rem;color:var(--ink-2);}
.band-ink .cel{border-color:var(--rule-dark);}
.band-ink .cel p{color:rgba(216,219,212,0.66);}
.band-ink .cel .ref{color:rgba(216,219,212,0.45);}
.band-ink .three,.band-ink .two-c{border-top-color:var(--casing);}

/* ---------- stat blocks (AI page) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--casing);}
@media(max-width:880px){.stats{grid-template-columns:1fr;}}
.stat{padding:32px 28px;border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);}
.stat:last-child{border-right:none;}
@media(max-width:880px){.stat{border-right:none;}}
.stat .big{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.1rem);
  line-height:1;letter-spacing:-0.03em;color:var(--signal);margin-bottom:12px;}
.stat .big.calm{color:var(--casing);}
.stat p{font-size:0.91rem;color:rgba(216,219,212,0.66);}
.stat .src{font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(216,219,212,0.4);margin-top:12px;}

.spec{border-top:1px solid var(--ink);}
.specrow{display:grid;grid-template-columns:180px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--rule);}
@media(max-width:700px){.specrow{grid-template-columns:1fr;gap:6px;}}
.specrow .sk{font-family:'JetBrains Mono',monospace;font-size:0.71rem;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px;}
.specrow .sv{font-size:0.95rem;color:var(--ink-2);max-width:66ch;}
.specrow .sv em{font-style:normal;color:var(--signal);font-family:'JetBrains Mono',monospace;font-size:0.78rem;}
.band-ink .spec{border-top-color:var(--casing);}
.band-ink .specrow{border-bottom-color:var(--rule-dark);}
.band-ink .specrow .sk{color:rgba(216,219,212,0.5);}
.band-ink .specrow .sv{color:rgba(216,219,212,0.66);}

.two{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
@media(max-width:880px){.two{grid-template-columns:1fr;gap:34px;}}

ul.arrow{list-style:none;border-top:1px solid var(--rule);}
ul.arrow li{padding:12px 0;border-bottom:1px solid var(--rule);display:flex;gap:12px;font-size:0.94rem;color:var(--ink-2);}
ul.arrow li::before{content:'—';font-family:'JetBrains Mono',monospace;color:var(--ink-3);flex-shrink:0;}
.band-ink ul.arrow,.band-ink ul.arrow li{border-color:var(--rule-dark);}
.band-ink ul.arrow li{color:rgba(216,219,212,0.66);}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);}
@media(max-width:880px){.tiers{grid-template-columns:1fr;}}
.tier{padding:30px 26px;border-right:1px solid var(--rule);display:flex;flex-direction:column;}
.tier:last-child{border-right:none;}
@media(max-width:880px){.tier{border-right:none;border-bottom:1px solid var(--rule);}}
.tier.mid{background:var(--casing-3);}
.tier .tn{font-family:'JetBrains Mono',monospace;font-size:0.67rem;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;}
.tier h3{font-size:1.3rem;margin-bottom:8px;}
.tier .ts{font-size:0.87rem;color:var(--ink-2);margin-bottom:20px;min-height:3.4em;}
.tier ul{list-style:none;margin-bottom:22px;flex:1;border-top:1px solid var(--rule);}
.tier ul li{font-size:0.87rem;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--rule-soft);}

details{border-bottom:1px solid var(--rule);padding:16px 0;}
details:first-of-type{border-top:1px solid var(--ink);}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:0.99rem;}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+';font-family:'JetBrains Mono',monospace;color:var(--ink-3);flex-shrink:0;}
details[open] summary::after{content:'\2013';}
details p{margin-top:10px;color:var(--ink-2);font-size:0.94rem;max-width:74ch;}

.form{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
@media(max-width:700px){.form{grid-template-columns:1fr;}}
.fld{display:flex;flex-direction:column;gap:5px;}
.fld.full{grid-column:1/-1;}
.fld label{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(216,219,212,0.5);}
.fld input,.fld select,.fld textarea{background:rgba(216,219,212,0.07);border:1px solid rgba(216,219,212,0.28);
  color:var(--casing);padding:11px 12px;font-family:'Inter',sans-serif;font-size:0.92rem;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--signal);outline-offset:1px;}
.fld textarea{min-height:100px;resize:vertical;}
.note{font-family:'JetBrains Mono',monospace;font-size:0.67rem;color:var(--ink-3);margin-top:14px;line-height:1.7;}
.band-ink .note{color:rgba(216,219,212,0.45);}
.note a{text-decoration:underline;}

.cta{background:var(--casing-3);padding:84px 0;text-align:center;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.cta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:26ch;margin:0 auto 14px;}
.cta p{max-width:52ch;margin:0 auto 26px;color:var(--ink-2);}
footer{background:var(--ink);color:rgba(216,219,212,0.45);padding:34px 0;font-size:0.77rem;}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
footer .m{letter-spacing:0.04em;}
footer nav{display:flex;gap:16px;flex-wrap:wrap;}
footer nav a:hover{color:var(--casing);}

.rv{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease;}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .st{transition:none;}
  html{scroll-behavior:auto;}
  .brand:hover .lg-idle{animation:none;}
}