:root{
  --bg:#07111c;
  --bg-soft:#0a1622;
  --panel:#0c1925;
  --panel-hi:#102131;
  --text:#f2f6f8;
  --muted:#8fa1ad;
  --muted-2:#667b88;
  --line:rgba(159,202,224,.15);
  --line-hi:rgba(159,202,224,.29);
  --accent:#54d4ff;
  --accent-2:#7b73ff;
  --accent-soft:rgba(84,212,255,.12);
  --max:1420px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.skip-link{position:fixed;left:18px;top:-80px;z-index:100;background:white;color:#07111c;padding:10px 14px}
.skip-link:focus{top:18px}

.site-header{
  height:74px;max-width:var(--max);margin:auto;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);
  position:relative;z-index:20
}
.brand{display:flex;align-items:center;gap:11px;font-size:.8rem;font-weight:650;letter-spacing:.04em}
.brand-mark{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-hi);
  color:var(--accent);font-size:.65rem;letter-spacing:.08em
}
.nav{display:flex;align-items:center;gap:22px;font-size:.84rem;color:#9eafb8}
.nav a:hover{color:white}
.nav-contact{color:#dce8ed!important}
.lang{background:transparent;border:1px solid var(--line-hi);color:white;height:33px;min-width:42px;cursor:pointer}
.lang:hover{border-color:var(--accent);color:var(--accent)}

.hero{
  max-width:var(--max);min-height:690px;margin:auto;padding:76px 30px 64px;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr);gap:7vw;align-items:center;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to right,black 0%,black 60%,transparent 92%)
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.18;pointer-events:none}
.glow-a{width:420px;height:420px;background:var(--accent);left:-180px;top:-100px}
.glow-b{width:360px;height:360px;background:var(--accent-2);right:0;bottom:-160px;opacity:.10}
.hero-copy,.tech-panel{position:relative;z-index:2}
.availability{
  display:inline-flex;align-items:center;gap:8px;color:#9cafb9;
  font-size:.84rem;letter-spacing:.075em;text-transform:uppercase
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.hero h1{
  font-size:clamp(2.9rem,4.5vw,5.15rem);line-height:.99;letter-spacing:-.048em;
  max-width:11.5ch;margin:20px 0 24px;font-weight:570
}
.hero h1 span{display:block}
.hero-accent{
  background:linear-gradient(100deg,var(--accent),#8edfff 54%,#a4a3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-lede{font-size:clamp(1.04rem,1.15vw,1.18rem);max-width:760px;color:#b2c1c9;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:16px;padding:12px 15px;border:1px solid var(--line-hi);font-size:.84rem}
.btn.primary{background:var(--text);color:#08121b;border-color:var(--text);font-weight:650}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent)}
.hero-meta{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px
}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta small,.panel-title small{font-size:.70rem;letter-spacing:.10em;color:var(--muted-2)}
.hero-meta strong{font-size:.84rem;font-weight:500;color:#c5d1d7}

.tech-panel{
  border:1px solid var(--line-hi);background:rgba(8,19,29,.82);
  box-shadow:0 32px 100px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.01);
  backdrop-filter:blur(10px)
}
.panel-top,.window-bar{
  min-height:42px;padding:0 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  color:#728894;font-size:.68rem;letter-spacing:.10em
}
.panel-status{display:flex;align-items:center;gap:6px}
.panel-status i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.panel-title{padding:18px 18px 13px;display:flex;flex-direction:column;gap:4px}
.panel-title strong{font-size:1.12rem;font-weight:560}
.discipline-stack{border-top:1px solid var(--line)}
.discipline{
  width:100%;display:grid;grid-template-columns:28px 1fr;gap:4px 8px;text-align:left;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;padding:13px 17px;cursor:pointer
}
.discipline:hover,.discipline.active{background:linear-gradient(90deg,rgba(84,212,255,.09),transparent)}
.discipline.active{box-shadow:inset 2px 0 0 var(--accent)}
.discipline-index{grid-row:1/3;color:var(--muted-2);font-size:.68rem;padding-top:2px}
.discipline-name{font-size:.88rem;font-weight:620}
.discipline-detail{font-size:.75rem;color:#7d919b}
.discipline.active .discipline-name{color:var(--accent)}
.panel-readout{padding:16px 18px 19px;background:rgba(84,212,255,.025)}
.panel-readout>span{font-size:.68rem;letter-spacing:.09em;color:var(--muted-2)}
.panel-readout b{color:var(--accent);font-weight:500}
.panel-readout p{font-size:.84rem;color:#9eafb8;margin:7px 0 0}

.expertise,.work,.writing,footer{max-width:var(--max);margin:auto;border-bottom:1px solid var(--line)}
.expertise{padding:72px 30px 76px}
.section-intro{
  display:grid;grid-template-columns:170px minmax(0,1fr) minmax(320px,.72fr);gap:3vw;align-items:start;margin-bottom:38px
}
.section-no{display:inline-block;font-size:.65rem;color:var(--accent);border:1px solid var(--line-hi);padding:4px 7px;margin-bottom:10px}
.eyebrow{margin:0;font-size:.73rem;letter-spacing:.10em;color:var(--muted);text-transform:uppercase}
.section-intro h2,.work-heading h2{
  font-size:clamp(2rem,3vw,3.35rem);line-height:1.04;letter-spacing:-.038em;margin:0;font-weight:550
}
.section-intro>p{margin:0;color:#9cadb6;font-size:1rem;max-width:540px}
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.expertise-grid article{min-height:205px;padding:22px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)}
.expertise-grid article:last-child{border-right:0}
.expertise-grid article:hover{background:rgba(84,212,255,.025)}
.card-code,.project-kicker{font-size:.68rem;letter-spacing:.09em;color:var(--muted-2)}
.expertise-grid h3{font-size:1.45rem;margin:40px 0 9px;font-weight:560}
.expertise-grid p{font-size:.90rem;color:#91a4ae;margin:0}

.work{padding:76px 30px}
.work-heading{display:grid;grid-template-columns:170px 1fr;gap:3vw;align-items:start;margin-bottom:38px}
.projects{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.project{
  display:grid;grid-template-columns:minmax(300px,.75fr) minmax(460px,1.25fr);gap:5vw;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:center
}
.project-copy{padding-left:2px}
.project-kicker{display:flex;gap:12px}
.project-kicker span{color:var(--accent)}
.project h3{font-size:clamp(2rem,3vw,3.3rem);margin:12px 0 13px;letter-spacing:-.035em;font-weight:550}
.project-copy>p{color:#9cafb8;font-size:.98rem;max-width:560px;margin:0}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.project-tags span{border:1px solid var(--line);padding:5px 7px;font-size:.70rem;color:#8ea1ab}

.product-window{border:1px solid var(--line-hi);background:#091521;box-shadow:0 24px 70px rgba(0,0,0,.23);min-height:300px;overflow:hidden}
.window-bar{justify-content:flex-start;gap:7px}
.window-bar i{width:6px;height:6px;border:1px solid #526b79;border-radius:50%}
.window-bar span{margin-left:auto}
.window-body{padding:24px}
.mission-copy{display:flex;flex-direction:column;gap:5px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mission-copy small{font-size:.68rem;letter-spacing:.10em;color:var(--accent)}
.mission-copy strong{font-size:1.28rem;max-width:480px;font-weight:550}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.metric-row>div{padding:18px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.metric-row>div:first-child{padding-left:0}
.metric-row>div:last-child{border-right:0}
.metric-row small,.signal small{font-size:.65rem;color:var(--muted-2);letter-spacing:.08em}
.metric-row strong{font-size:1.15rem;font-weight:540}
.metric-row span{font-size:.68rem;color:#728894}
.decision-row{display:flex;gap:8px;padding-top:20px}
.decision-row span{border:1px solid var(--line);padding:7px 10px;font-size:.68rem;color:#879ba6}
.decision-row span:first-child{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.security-body{padding:18px 20px}
.event{display:grid;grid-template-columns:70px 78px 1fr;gap:8px;padding:12px 10px;border-bottom:1px solid var(--line);font-size:.78rem;color:#7f929c}
.event span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.event b{font-size:.68rem;letter-spacing:.07em;color:#9fb1ba}
.event em{font-style:normal}
.event.active{background:rgba(84,212,255,.06);color:#bed1d9;box-shadow:inset 2px 0 0 var(--accent)}
.event.active b{color:var(--accent)}

.sustain-body{display:grid;grid-template-columns:repeat(3,1fr);min-height:258px}
.sustain-choice{padding:25px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.sustain-choice:last-child{border-right:0}
.sustain-choice small{font-size:.67rem;letter-spacing:.09em;color:var(--muted-2)}
.sustain-choice strong{font-size:1rem;font-weight:550}
.sustain-choice span{font-size:.76rem;color:#8296a0}
.sustain-choice.active{background:linear-gradient(180deg,transparent,rgba(84,212,255,.07));box-shadow:inset 0 -2px 0 var(--accent)}
.sustain-choice.active small{color:var(--accent)}

.writing{padding:56px 30px;display:grid;grid-template-columns:1fr minmax(320px,.65fr);gap:6vw;align-items:end}
.writing h2{font-size:clamp(1.9rem,2.6vw,3rem);letter-spacing:-.04em;margin:9px 0 8px;font-weight:550}
.writing>div>p:last-child{color:#8fa2ac;margin:0}
.writing-link{border:1px solid var(--line-hi);padding:19px 20px;display:flex;justify-content:space-between;font-size:.84rem}
.writing-link:hover{border-color:var(--accent);color:var(--accent)}

footer{border-bottom:0;padding:34px 30px 44px;display:grid;grid-template-columns:1fr auto auto;gap:35px;align-items:center;color:#7d919b;font-size:.78rem}
footer>div:first-child{display:flex;flex-direction:column}
footer strong{color:#bfccd2;font-size:.84rem;font-weight:550}
.footer-links{display:flex;gap:18px}
.footer-links a:hover{color:var(--accent)}
footer small{font-size:.72rem;letter-spacing:.05em}



/* v0.2 hierarchy refinements */
.section-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:145px;
  padding-top:2px;
}
.section-label b{
  font-size:.74rem;
  letter-spacing:.10em;
  color:var(--accent);
  font-weight:650;
}
.section-label span{
  font-size:.76rem;
  letter-spacing:.11em;
  color:#9aadb7;
  text-transform:uppercase;
}
.expertise,
.work,
.writing{
  position:relative;
}
.expertise::before,
.work::before,
.writing::before{
  content:"";
  position:absolute;
  left:30px;
  right:30px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--line-hi) 18%,var(--line) 65%,transparent);
}
.work{
  background:linear-gradient(180deg,rgba(84,212,255,.018),transparent 230px);
}
.writing{
  background:linear-gradient(180deg,rgba(123,115,255,.018),transparent);
}
.project-kicker span{
  min-width:31px;
  font-weight:700;
  letter-spacing:.08em;
}
.project + .project{
  position:relative;
}
.project + .project::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:72px;
  height:1px;
  background:var(--accent);
}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .tech-panel{max-width:700px}
  .section-intro{grid-template-columns:120px 1fr}
  .section-intro>p{grid-column:2}
  .expertise-grid{grid-template-columns:1fr 1fr}
  .expertise-grid article:nth-child(2){border-right:0}
  .expertise-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .project{grid-template-columns:1fr}
}
@media(max-width:680px){
  .site-header{height:66px;padding:0 16px}
  .brand span:last-child{font-size:.72rem}
  .nav>a{display:none}
  .nav{gap:9px}
  .hero{padding:52px 16px 42px;gap:38px}
  .hero h1{font-size:clamp(2.9rem,13vw,4.3rem)}
  .hero-meta{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:space-between}
  .expertise,.work{padding:62px 16px}
  .section-intro,.work-heading{grid-template-columns:1fr;gap:18px}
  .section-label{min-width:0}
  .section-intro>p{grid-column:auto}
  .expertise-grid{grid-template-columns:1fr}
  .expertise-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .expertise-grid article:last-child{border-bottom:0!important}
  .expertise-grid h3{margin-top:28px}
  .project{padding:32px 0;gap:24px}
  .metric-row{grid-template-columns:1fr}
  .metric-row>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .sustain-body{grid-template-columns:1fr}
  .sustain-choice{min-height:120px;border-right:0;border-bottom:1px solid var(--line)}
  .writing{padding:52px 16px;grid-template-columns:1fr;gap:26px}
  footer{padding:30px 16px;grid-template-columns:1fr;gap:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* v0.3 */
.section-kicker{
  display:inline-flex;align-items:center;gap:10px;min-height:28px;padding:0 11px;
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg,rgba(84,212,255,.07),transparent);
  color:#a9bac3;
}
.section-kicker::after{content:"";width:34px;height:1px;background:var(--line-hi)}
.section-intro,.work-heading{grid-template-columns:170px minmax(0,1fr) minmax(320px,.72fr)}
.work-heading h2{grid-column:2/-1}
.section-label{display:none!important}

.interactive-demo{position:relative;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.interactive-demo:hover{transform:translateY(-3px);border-color:rgba(84,212,255,.42);box-shadow:0 28px 80px rgba(0,0,0,.28),0 0 0 1px rgba(84,212,255,.04)}
.demo-caption{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.demo-caption>span{font-size:.67rem;letter-spacing:.11em;color:var(--accent);border:1px solid rgba(84,212,255,.35);padding:4px 7px}
.demo-caption small{font-size:.76rem;color:#859aa5}

.decision-row button{border:1px solid var(--line);background:transparent;padding:8px 11px;font-size:.68rem;color:#879ba6;cursor:pointer}
.decision-row button:hover,.decision-row button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.demo-feedback{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:#9eb0b9;font-size:.78rem;min-height:48px}

.security-body .event{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}
.security-body .event:hover{background:rgba(84,212,255,.025)}
.event-detail{margin-top:16px;border:1px solid var(--line);padding:14px;display:grid;grid-template-columns:72px 1fr;gap:5px 12px;background:rgba(84,212,255,.025)}
.event-detail>span{grid-row:1/3;font-size:.62rem;letter-spacing:.10em;color:var(--accent)}
.event-detail strong{font-size:.80rem;font-weight:560;color:#c6d3d9}
.event-detail small{font-size:.72rem;color:#8296a0}

.sustain-body-wrap{padding-top:18px}
.sustain-body-wrap .demo-caption{padding:0 18px}
.sustain-body button{appearance:none;background:transparent;color:inherit;text-align:left;cursor:pointer}
.sustain-choice:hover{background:rgba(84,212,255,.025)}
.sustain-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sustain-metrics>div{padding:14px 18px;border-right:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sustain-metrics>div:last-child{border-right:0}
.sustain-metrics small{font-size:.64rem;letter-spacing:.09em;color:#758a95}
.sustain-metrics strong{font-size:1rem;font-weight:560;color:#cfe0e7}

.project:nth-child(1) .product-window{background:radial-gradient(circle at 85% 15%,rgba(84,212,255,.06),transparent 28%),#091521}
.project:nth-child(2) .product-window{background:linear-gradient(135deg,rgba(84,212,255,.025),transparent 60%),#091521}
.project:nth-child(3) .product-window{background:radial-gradient(circle at 50% 100%,rgba(123,115,255,.06),transparent 36%),#091521}

@media(max-width:980px){
  .section-intro,.work-heading{grid-template-columns:1fr}
  .work-heading h2{grid-column:auto}
}
@media(max-width:680px){
  .sustain-metrics{grid-template-columns:1fr}
  .sustain-metrics>div{border-right:0;border-bottom:1px solid var(--line)}
  .event-detail{grid-template-columns:1fr}
  .event-detail>span{grid-row:auto}
}


/* v0.4 — technology editorial direction */
.hero-v04{
  min-height:720px;
  grid-template-columns:minmax(0,1.02fr) minmax(480px,.86fr);
  gap:5vw;
}
.hero-v04 .hero-copy{
  padding-right:1vw;
}
.hero-name{
  margin:0 0 10px;
  font-size:.78rem;
  letter-spacing:.18em;
  color:#c8d4da;
  font-weight:650;
}
.hero-v04 h1{
  max-width:12.2ch;
  margin:22px 0 24px;
  font-size:clamp(3.1rem,4.55vw,5.15rem);
  line-height:.98;
  letter-spacing:-.047em;
  background:linear-gradient(120deg,#f3f7f9 0%,#e7f1f5 58%,#b8eaff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-v04 .hero-lede{
  max-width:720px;
  font-size:1.08rem;
}
.currently-building{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  max-width:760px;
}
.current-label{
  font-size:.68rem;
  letter-spacing:.12em;
  color:#728995;
}
.current-items{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.current-items>span{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.76rem;
  color:#afbec5;
}
.current-items i{
  font-style:normal;
  font-size:.61rem;
  color:var(--accent);
  border:1px solid rgba(84,212,255,.28);
  padding:2px 5px;
}

.signal-visual{
  position:relative;
  min-height:525px;
  border:1px solid var(--line-hi);
  background:
    radial-gradient(circle at 56% 46%,rgba(84,212,255,.075),transparent 26%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    #081522;
  background-size:auto,46px 46px,46px 46px,auto;
  box-shadow:0 35px 100px rgba(0,0,0,.28);
  overflow:hidden;
}
.signal-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(84,212,255,.035) 48%,transparent 68%);
  transform:translateX(-100%);
  animation:visualSweep 9s ease-in-out infinite;
  pointer-events:none;
}
.signal-top{
  height:44px;
  padding:0 15px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.62rem;
  letter-spacing:.12em;
  color:#728894;
}
.signal-top span:last-child{
  display:flex;
  gap:7px;
  align-items:center;
}
.signal-top i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
}
.signal-map{width:100%;height:calc(100% - 44px);min-height:470px}
.signal-path{
  fill:none;
  stroke:url(#edgeGlow);
  stroke-width:1.2;
}
.signal-path.faint{stroke:rgba(134,180,202,.16)}
.signal-dot{fill:var(--accent);filter:drop-shadow(0 0 7px rgba(84,212,255,.7))}
.travel{fill:#8de5ff;filter:drop-shadow(0 0 8px rgba(84,212,255,.9))}
.signal-node rect{
  fill:#091725;
  stroke:rgba(154,198,219,.28);
}
.signal-node text,.signal-core text{
  fill:#dce9ee;
  font-size:13px;
  font-weight:650;
  letter-spacing:.08em;
}
.signal-node text.sub,.signal-core text.sub{
  fill:#748a96;
  font-size:9px;
  font-weight:400;
  letter-spacing:.05em;
}
.signal-core rect{
  fill:rgba(84,212,255,.065);
  stroke:#54d4ff;
}
.signal-core text:first-of-type{fill:#54d4ff}
.map-caption{
  fill:#617986;
  font-size:9px;
  letter-spacing:.10em;
}
@keyframes visualSweep{
  0%,20%{transform:translateX(-110%)}
  58%,100%{transform:translateX(120%)}
}

.expertise,.work,.writing,.about{
  scroll-margin-top:20px;
}
.about{
  max-width:var(--max);
  margin:auto;
  padding:68px 30px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(360px,.65fr);
  gap:8vw;
  align-items:start;
  position:relative;
  background:linear-gradient(180deg,rgba(84,212,255,.012),transparent);
}
.about::before{
  content:"";
  position:absolute;
  top:0;left:30px;right:30px;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--line-hi) 18%,var(--line) 65%,transparent);
}
.about h2{
  font-size:clamp(2rem,3vw,3.35rem);
  line-height:1.03;
  letter-spacing:-.04em;
  margin:10px 0 0;
  max-width:16ch;
  font-weight:550;
}
.about-copy>p{
  color:#9dafb8;
  margin:0;
  font-size:1rem;
  line-height:1.65;
}
.about-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:22px;
}
.about-links a{
  font-size:.82rem;
  color:#c4d2d8;
  border-bottom:1px solid var(--line-hi);
  padding-bottom:3px;
}
.about-links a:hover{color:var(--accent);border-color:var(--accent)}

.reveal-ready{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal-ready.is-visible{
  opacity:1;
  transform:none;
}
.expertise-grid article:nth-child(2){transition-delay:.06s}
.expertise-grid article:nth-child(3){transition-delay:.12s}
.expertise-grid article:nth-child(4){transition-delay:.18s}

.project .product-window{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.project:hover .product-window{
  transform:translateY(-4px);
  border-color:rgba(84,212,255,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.28),0 0 45px rgba(84,212,255,.035);
}

@media(max-width:1100px){
  .hero-v04{grid-template-columns:1fr;min-height:auto}
  .signal-visual{max-width:820px}
}
@media(max-width:680px){
  .hero-v04 h1{font-size:clamp(2.7rem,12vw,4rem)}
  .currently-building{grid-template-columns:1fr}
  .signal-visual{min-height:420px}
  .signal-map{min-height:370px}
  .about{padding:56px 16px;grid-template-columns:1fr;gap:24px}
  .about::before{left:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){
  .signal-visual::before{animation:none!important}
  .reveal-ready{opacity:1!important;transform:none!important}
}


/* v0.5 — replace abstract system graph with a clear learning process */
.signal-visual{display:none!important}

.process-visual{
  position:relative;
  min-height:535px;
  border:1px solid var(--line-hi);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 88% 10%,rgba(84,212,255,.075),transparent 25%),
    #081522;
  background-size:46px 46px,46px 46px,auto,auto;
  box-shadow:0 35px 100px rgba(0,0,0,.28);
  overflow:hidden;
}
.process-top{
  height:44px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#788e99;
  font-size:.66rem;
  letter-spacing:.11em;
}
.process-live{
  display:flex;
  align-items:center;
  gap:7px;
}
.process-live i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
}
.process-content{
  padding:23px 25px 20px;
}
.technology-inputs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  margin-bottom:22px;
}
.technology-inputs span{
  padding:11px 8px;
  text-align:center;
  border-right:1px solid var(--line);
  color:#a9bac3;
  font-size:.73rem;
  font-weight:550;
}
.technology-inputs span:last-child{border-right:0}
.technology-inputs span::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:#5f7885;
  margin-right:7px;
  vertical-align:1px;
}
.process-flow{
  position:relative;
}
.flow-stage{
  min-height:75px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
  border:1px solid var(--line);
  background:rgba(9,23,35,.82);
  padding:13px 15px;
  position:relative;
  z-index:2;
}
.flow-stage:hover{
  border-color:rgba(84,212,255,.38);
  background:rgba(84,212,255,.025);
}
.flow-no{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--line-hi);
  color:var(--accent);
  font-size:.62rem;
}
.flow-stage div{
  display:grid;
  grid-template-columns:minmax(120px,.75fr) 1fr;
  gap:2px 15px;
  align-items:start;
}
.flow-stage small{
  grid-column:1;
  font-size:.57rem;
  letter-spacing:.10em;
  color:#718793;
}
.flow-stage strong{
  grid-column:1;
  font-size:.93rem;
  font-weight:600;
  color:#dce8ed;
}
.flow-stage p{
  grid-column:2;
  grid-row:1 / 3;
  margin:0;
  color:#8fa3ad;
  font-size:.73rem;
  line-height:1.45;
}
.flow-link{
  height:27px;
  position:relative;
  margin-left:28px;
}
.flow-link::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(var(--accent),rgba(84,212,255,.15));
}
.flow-link::after{
  content:"";
  position:absolute;
  left:-3px;bottom:-1px;
  width:7px;height:7px;
  border-right:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(45deg);
}
.flow-link i{
  position:absolute;
  left:-2px;
  top:2px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:flowPulse 2.8s ease-in-out infinite;
}
.flow-link:nth-of-type(4) i{animation-delay:.7s}
.flow-link:nth-of-type(6) i{animation-delay:1.4s}
@keyframes flowPulse{
  0%{transform:translateY(0);opacity:0}
  18%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(22px);opacity:0}
}
.outcome-stage{
  border-color:rgba(84,212,255,.45);
  background:linear-gradient(90deg,rgba(84,212,255,.07),rgba(84,212,255,.015));
}
.outcome-stage .flow-no{
  background:var(--accent);
  color:#07111c;
  border-color:var(--accent);
}
.outcome-stage strong{color:var(--accent)}
.process-footer{
  padding-top:17px;
  color:#617985;
  font-size:.60rem;
  letter-spacing:.10em;
  text-align:center;
}

@media(max-width:680px){
  .process-visual{min-height:auto}
  .process-content{padding:18px 14px}
  .technology-inputs{grid-template-columns:1fr 1fr}
  .technology-inputs span:nth-child(2){border-right:0}
  .technology-inputs span:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .flow-stage div{grid-template-columns:1fr}
  .flow-stage p{grid-column:1;grid-row:auto;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .flow-link i{animation:none!important;opacity:1}
}


/* v0.6 — scale, editorial writing, fully bilingual demos */
.hero-v04{
  min-height:650px;
  padding-top:62px;
  padding-bottom:54px;
}
.hero-v04 h1{
  font-size:clamp(2.8rem,4.05vw,4.55rem);
  max-width:12.8ch;
}
.hero-v04 .hero-lede{
  max-width:690px;
  font-size:1.03rem;
}
.currently-building{
  margin-top:27px;
  padding-top:15px;
}

.section-intro h2{
  font-size:clamp(1.95rem,2.75vw,3.05rem);
}
.work-heading{
  align-items:end;
}
.work-title-group{
  grid-column:2/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.52fr);
  gap:4vw;
  align-items:end;
}
.work-title-group h2{
  grid-column:auto;
  margin:0;
  font-size:clamp(2rem,3vw,3.25rem);
}
.work-title-group p{
  margin:0 0 4px;
  color:#91a4ae;
  font-size:.92rem;
  line-height:1.55;
}

.writing-v06{
  padding:68px 30px 72px;
  display:block;
}
.writing-head{
  display:grid;
  grid-template-columns:1fr minmax(330px,.58fr);
  gap:7vw;
  align-items:end;
  margin-bottom:30px;
}
.writing-head h2{
  margin:12px 0 0;
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:550;
}
.writing-intro p{
  margin:0 0 14px;
  color:#91a4ae;
  font-size:.94rem;
  line-height:1.6;
}
.writing-intro a{
  display:inline-block;
  color:#c6d3d9;
  font-size:.79rem;
  border-bottom:1px solid var(--line-hi);
  padding-bottom:3px;
}
.writing-intro a:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.article-card{
  min-height:285px;
  padding:20px 20px 18px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.article-card:last-child{border-right:0}
.article-card:hover{
  background:rgba(84,212,255,.027);
  transform:translateY(-2px);
}
.article-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#6f8590;
  font-size:.60rem;
  letter-spacing:.07em;
}
.article-card h3{
  margin:42px 0 12px;
  font-size:1.28rem;
  line-height:1.2;
  letter-spacing:-.025em;
  font-weight:560;
  color:#e5edf1;
}
.article-card p{
  margin:0;
  color:#8ea1ab;
  font-size:.80rem;
  line-height:1.55;
}
.article-open{
  margin-top:auto;
  padding-top:22px;
  color:var(--accent);
  font-size:.67rem;
  letter-spacing:.08em;
}

/* The interactive previews should read as interfaces, not tiny decorative widgets */
.demo-caption small,
.event-detail small,
.demo-feedback{
  font-size:.78rem;
}
.metric-row small,
.sustain-metrics small{
  font-size:.68rem;
}

@media(max-width:980px){
  .work-title-group{grid-column:auto;grid-template-columns:1fr}
  .writing-head{grid-template-columns:1fr;gap:20px}
  .article-grid{grid-template-columns:1fr}
  .article-card{border-right:0;border-bottom:1px solid var(--line)}
  .article-card:last-child{border-bottom:0}
}


/* v0.7 — finishing pass */
.hero-v04{min-height:620px}
.hero-v04 h1{
  font-size:clamp(2.65rem,3.72vw,4.2rem);
  max-width:13.2ch;
}
.hero-v04 .hero-lede{
  font-size:1rem;
  line-height:1.62;
}
.currently-building{
  grid-template-columns:100px 1fr;
  gap:14px;
}
.current-label{font-size:.72rem}
.current-items>span{font-size:.79rem}
.current-items i{
  font-size:.64rem;
  padding:2px 6px;
}

.about h2{
  font-size:clamp(1.9rem,2.65vw,2.9rem);
  max-width:17ch;
}

.article-open{font-size:.70rem}
.section-kicker{font-size:.75rem}
.work-title-group p,
.writing-intro p,
.about-copy>p{font-size:.96rem}

.window-bar,
.article-meta,
.card-code,
.project-kicker{color:#7f95a0}
.metric-row span,
.event,
.sustain-choice span{color:#8196a0}

@media(max-width:680px){
  .hero-v04 h1{font-size:clamp(2.45rem,11.4vw,3.75rem)}
  .currently-building{grid-template-columns:1fr}
}