/* ============================================================
   TMG SECURITY — SOLUTIONS
   Loads alongside tmg-home.css (tokens, header, footer) and
   tmg-services.css (shared section furniture).

   Visual language for this page: A SYSTEM COMING ONLINE.
   Services pages move THROUGH something. Industries is a map you
   look ACROSS. Solutions goes INWARD — concentric rings, depth
   planes, an architecture assembling itself around a core. The
   reader should feel like they are entering a security system
   rather than reading about one.

   Prefixes here are deliberately unique (agc-, hplane-, aarch-,
   sterm-, soon-, road-, secn-) because tmg-home.css already owns
   .core, .plane-*, .arch-*, .rmap-*, .term-* and .ind-tab*.

   CSS 3D + SVG only. No WebGL, no library.
   ============================================================ */

.sol{
  --acc:var(--cyan);
  --acc2:var(--violet);
  --acc-soft:rgba(79,216,234,.13);
  --acc-line:rgba(79,216,234,.42);
  --glow:0 0 40px rgba(79,216,234,.18);
}

/* Technical grid, parallaxed by JS via --gy. Sits behind everything. */
.sol-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(79,216,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,234,.045) 1px, transparent 1px);
  background-size:66px 66px;
  transform:translate3d(0, var(--gy,0px), 0);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.sol > *{ position:relative; z-index:1; }

/* Shared eyebrow chip used for status, not decoration. */
.sol-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--warn);
  border:1px solid rgba(245,180,78,.36); background:rgba(245,180,78,.07);
  border-radius:20px; padding:6px 13px;
}
.sol-status i{
  width:5px; height:5px; border-radius:50%; background:var(--warn);
  box-shadow:0 0 8px var(--warn); animation:solPulse 2.4s var(--ease) infinite;
}
@keyframes solPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============================================================
   01 — HERO
   Depth planes: the Aegis core sits on z=0, the eight security
   domains orbit on a further plane, connectors on a third. Scroll
   pulls the whole rig toward the viewer.
   ============================================================ */
.shero{ padding-top:var(--s7); padding-bottom:var(--s7); overflow:visible; }
.shero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s6); align-items:center; }
.shero-h{
  font-family:var(--display); font-size:clamp(32px,4.6vw,58px); font-weight:700;
  line-height:1.04; letter-spacing:-1.7px; margin:18px 0 20px; text-wrap:balance;
}
.shero-h .accent{
  background:linear-gradient(96deg, var(--cyan), var(--violet) 62%, var(--hyper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shero-lead{ font-size:16.5px; color:var(--ice); line-height:1.68; max-width:600px; margin-bottom:var(--s4); }
.shero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* --- the rig --- */
.agc-stage{
  position:relative; width:100%; max-width:540px; margin:0 auto;
  aspect-ratio:1/1; perspective:1400px; perspective-origin:50% 46%;
}
.agc-rig{
  position:absolute; inset:0; transform-style:preserve-3d;
  /* --az is driven by scroll (core approaches), --arx/--ary by pointer */
  transform:translateZ(var(--az,0px)) rotateX(var(--arx,9deg)) rotateY(var(--ary,-7deg));
  transition:transform .45s var(--ease);
}
.hplane{ position:absolute; inset:0; transform-style:preserve-3d; }
.hplane-back{ transform:translateZ(-150px); }
.hplane-mid { transform:translateZ(-58px); }
.hplane-front{ transform:translateZ(46px); }

.agc-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.agc-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.agc-ring.dash{ stroke:var(--line); stroke-dasharray:2 9; }
/* Connectors draw themselves in as the section activates. */
.agc-link{
  stroke:rgba(140,165,225,.24); stroke-width:1; fill:none;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.1s var(--ease), stroke .5s;
}
.shero.on .agc-link{ stroke-dashoffset:0; }
.agc-link.lit{ stroke:var(--acc-line); }

/* Core: three stacked shells so it reads as an object, not a circle. */
.agc-core{
  position:absolute; top:50%; left:50%; width:150px; height:150px;
  transform:translate(-50%,-50%) translateZ(34px); transform-style:preserve-3d;
}
.agc-shell{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--line2);
}
.agc-shell.s1{
  inset:14%; border-color:rgba(79,216,234,.5);
  background:radial-gradient(circle at 42% 36%, rgba(79,216,234,.28), rgba(13,20,36,.96) 68%);
  box-shadow:0 0 60px rgba(79,216,234,.22), inset 0 0 34px rgba(79,216,234,.14);
}
.agc-shell.s2{ inset:0; border-color:rgba(124,92,250,.32); transform:translateZ(-16px) rotateX(72deg); }
.agc-shell.s3{ inset:-16%; border-style:dashed; border-color:var(--line); transform:translateZ(-30px); }
.agc-core.spin .agc-shell.s2{ animation:agcSpin 22s linear infinite; }
.agc-core.spin .agc-shell.s3{ animation:agcSpin 34s linear infinite reverse; }
@keyframes agcSpin{ to{ transform:translateZ(-16px) rotateX(72deg) rotateZ(360deg); } }

.agc-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateZ(24px);
  text-align:center; width:130px; pointer-events:none;
}
.agc-mark b{
  display:block; font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:.4px; color:var(--white); line-height:1.1;
}
.agc-mark span{
  display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2.4px;
  color:var(--acc); margin-top:5px;
}

/* Eight domain chips on the mid plane. Positioned by inline --x/--y. */
.agc-dom{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(var(--ax,-50%),-50%) translateZ(var(--dz,0px));
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--fog);
  background:rgba(4,6,12,.9); border:1px solid var(--line2); border-radius:20px;
  padding:6px 11px; transition:border-color .45s, color .45s, box-shadow .45s;
}
.agc-dom i{
  width:5px; height:5px; border-radius:50%; background:var(--line3);
  transition:background .45s, box-shadow .45s;
}
.agc-dom[data-side="e"]{ --ax:-100%; }
.agc-dom[data-side="w"]{ --ax:0%; }
.agc-dom.lit{ border-color:var(--acc-line); color:var(--white); box-shadow:var(--glow); }
.agc-dom.lit i{ background:var(--acc); box-shadow:0 0 8px var(--acc); }

.shero-cap{
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--fog);
  text-align:center; margin-top:var(--s4);
}

@media (max-width:1000px){
  .shero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .agc-stage{ max-width:400px; order:-1; }
  .hplane-back{ transform:translateZ(-90px); }
}
@media (max-width:430px){
  .agc-stage{ max-width:308px; }
  .agc-dom{ font-size:7px; letter-spacing:.9px; padding:4px 8px; gap:5px; }
  .agc-core{ width:112px; height:112px; }
  .agc-mark b{ font-size:14px; } .agc-mark span{ font-size:6.5px; letter-spacing:1.6px; }
}

/* ============================================================
   02 — WHAT IS TMG-AEGIS
   Eight fragments drift apart, then converge as the section is
   read. The assembly is the argument: fragmentation is the
   problem statement, convergence is the proposal.
   ============================================================ */
.frag-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
.frag-prose p{ font-size:15px; color:var(--fog); line-height:1.78; margin-bottom:16px; }
.frag-prose p strong{ color:var(--ice); font-weight:500; }
.frag-callout{
  border-left:2px solid var(--acc); padding:14px 0 14px 18px; margin:var(--s4) 0;
  font-size:15.5px; color:var(--ice); line-height:1.66;
}
.frag-conf{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px;
  background:var(--deep); margin-top:var(--s4);
}
.frag-conf h3{ font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--acc); margin-bottom:12px; }
.frag-conf ul{ display:flex; flex-direction:column; gap:9px; }
.frag-conf li{ position:relative; padding-left:19px; font-size:13.5px; color:var(--ice); line-height:1.6; }
.frag-conf li::before{
  content:''; position:absolute; left:2px; top:8px; width:6px; height:6px;
  background:var(--acc); border-radius:1px; transform:rotate(45deg);
}
.frag-conf p{ font-size:12px; color:var(--fog); line-height:1.6; margin-top:13px; }

.frag-stage{ position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto; width:100%; perspective:1100px; }
.frag-inner{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(6deg); }
.frag-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.frag-edge{
  stroke:var(--acc-line); stroke-width:1; fill:none; opacity:0;
  stroke-dasharray:var(--len,160); stroke-dashoffset:var(--len,160);
  transition:stroke-dashoffset .9s var(--ease), opacity .5s;
}
.frag-edge.on{ opacity:1; stroke-dashoffset:0; }

/* Each node carries a "scattered" offset that collapses to zero. */
.frag-node{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) translate3d(var(--dx,0px), var(--dy,0px), var(--dz,0px)) scale(var(--fs,.92));
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 12px; border-radius:11px; min-width:74px;
  background:rgba(8,12,24,.94); border:1px solid var(--line2);
  transition:transform .95s var(--ease), border-color .6s, box-shadow .6s, opacity .6s;
  opacity:.55;
}
.frag-node b{ font-family:var(--mono); font-size:8px; letter-spacing:1.3px; color:var(--ice); }
.frag-node span{ font-family:var(--mono); font-size:6.5px; letter-spacing:1px; color:var(--fog); }
.frag-stage.on .frag-node{ --dx:0px; --dy:0px; --dz:0px; --fs:1; opacity:1; }
.frag-stage.on .frag-node{ border-color:var(--acc-line); }
.frag-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  opacity:0; transition:transform .8s var(--ease) .55s, opacity .6s .55s;
  text-align:center; padding:15px 20px; border-radius:14px;
  background:radial-gradient(circle at 50% 40%, rgba(79,216,234,.2), rgba(8,12,24,.97) 72%);
  border:1px solid var(--acc); box-shadow:var(--glow);
}
.frag-stage.on .frag-hub{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.frag-hub b{ display:block; font-family:var(--display); font-size:15px; font-weight:700; color:var(--white); }
.frag-hub span{ display:block; font-family:var(--mono); font-size:6.5px; letter-spacing:2px; color:var(--acc); margin-top:4px; }
.frag-cap{ text-align:center; font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--fog); margin-top:16px; }

@media (max-width:1000px){
  .frag-wrap{ grid-template-columns:1fr; gap:var(--s5); }
  .frag-stage{ max-width:420px; }
}
@media (max-width:430px){
  .frag-stage{ max-width:300px; }
  .frag-node{ min-width:52px; padding:6px 8px; }
  .frag-node b{ font-size:6.5px; letter-spacing:.6px; } .frag-node span{ display:none; }
  .frag-hub{ padding:10px 13px; } .frag-hub b{ font-size:12px; }
}

/* ============================================================
   03 — WHY WE ARE BUILDING AEGIS
   Four positioning principles. Restrained: no tilt, no spotlight.
   ============================================================ */
.wpil-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.wpil{
  position:relative; padding:30px 26px 34px; background:var(--deep);
  transition:background .35s;
}
.wpil:hover{ background:var(--panel); }
.wpil::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.wpil:hover::before{ transform:scaleX(1); }
.wpil-n{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--acc); }
.wpil-k{ font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.3px; margin:14px 0 10px; }
.wpil-d{ font-size:13.5px; color:var(--fog); line-height:1.7; }
.wpil-note{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); text-align:center; margin-top:var(--s4); }
@media (max-width:900px){ .wpil-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wpil-grid{ grid-template-columns:1fr; } .wpil{ padding:24px 20px 26px; } }

/* ============================================================
   04 — THE AEGIS ARCHITECTURE
   Signature section. Sticky stage, six scroll stages, pointer
   perspective. Rotation is deliberately tiny (max 5deg) — the
   spatial read comes from parallax between planes, not from tilt.
   ============================================================ */
/* The rail is the scroll budget for the sticky stage inside it. Without a
   height of its own the rail matches the view exactly, the sticky element has
   nowhere to travel, and the six-stage story never advances. */
.aarch-rail{ position:relative; height:440svh; }
.aarch-view{
  position:sticky; top:var(--hh,68px); height:100svh; min-height:560px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.aarch-stage{
  position:relative; width:min(980px, 92vw); height:min(600px, 72svh);
  perspective:1500px; perspective-origin:calc(50% + var(--px,0px)) calc(50% + var(--py,0px));
}
.aarch-world{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--wrx,3deg)) rotateY(var(--wry,0deg));
  transition:transform .5s var(--ease);
}
/* Three tiers stacked in Z: sources above, Aegis mid, operations below. */
.aarch-tier{ position:absolute; left:0; right:0; transform-style:preserve-3d; }
.aarch-tier.src{ top:2%;  transform:translateZ(-120px); }
.aarch-tier.mid{ top:44%; transform:translateZ(30px); }
.aarch-tier.ops{ top:74%; transform:translateZ(-70px); }

.aarch-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.aarch-node{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:11px 15px; border-radius:11px; min-width:104px;
  background:rgba(8,12,24,.92); border:1px solid var(--line);
  opacity:.3; transform:translateZ(0) scale(.96);
  transition:opacity .55s var(--ease), transform .55s var(--ease), border-color .55s, box-shadow .55s;
}
.aarch-node.on{ opacity:1; transform:translateZ(24px) scale(1); border-color:var(--acc-line); box-shadow:var(--glow); }
.aarch-node b{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--white); }
.aarch-node span{ font-family:var(--mono); font-size:6.5px; letter-spacing:.9px; color:var(--fog); }

.aarch-hub{
  position:relative; margin:0 auto; width:min(430px, 84%);
  padding:20px 26px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(18,27,48,.96), rgba(8,12,24,.96));
  border:1px solid var(--line2);
  opacity:.35; transform:scale(.94);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .6s, box-shadow .6s;
}
.aarch-hub.on{ opacity:1; transform:scale(1); border-color:var(--acc); box-shadow:0 0 70px rgba(79,216,234,.22); }
.aarch-hub b{ display:block; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.4px; color:var(--white); }
.aarch-hub span{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:2.2px; color:var(--acc); margin-top:6px; }
.aarch-hub em{ display:block; font-style:normal; font-size:12px; color:var(--fog); margin-top:9px; line-height:1.55; }

.aarch-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.aarch-wire{
  stroke:rgba(140,165,225,.2); stroke-width:1; fill:none;
  stroke-dasharray:var(--len,240); stroke-dashoffset:var(--len,240);
  transition:stroke-dashoffset .8s var(--ease), stroke .5s;
}
.aarch-wire.on{ stroke-dashoffset:0; stroke:var(--acc-line); }

/* Stage HUD — tells the reader where they are in the story. */
.aarch-hud{
  position:absolute; left:0; right:0; bottom:14px; display:flex; align-items:center;
  justify-content:center; gap:14px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:1.8px; color:var(--fog);
}
.aarch-hud b{ color:var(--acc); font-weight:400; min-width:168px; text-align:left; }
.aarch-bar{ width:min(280px,38vw); height:2px; background:var(--line2); border-radius:2px; overflow:hidden; }
.aarch-bar i{ display:block; height:100%; width:var(--p,0%); background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width .18s linear; }

@media (max-width:900px){
  /* Mobile transformation: the sticky 3D stage becomes a plain vertical
     architecture. No sticky, no perspective, no scroll hijack. */
  .aarch-rail{ height:auto; }
  .aarch-view{ position:static; height:auto; min-height:0; display:block; overflow:visible; }
  .aarch-stage{ width:100%; height:auto; perspective:none; }
  .aarch-world{ position:static; transform:none; }
  .aarch-tier{ position:static; transform:none; margin-bottom:14px; }
  .aarch-svg, .aarch-hud{ display:none; }
  .aarch-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .aarch-node{ opacity:1; transform:none; min-width:0; }
  .aarch-hub{ width:100%; opacity:1; transform:none; border-color:var(--acc); margin:14px 0; }
  .aarch-tier.src::before, .aarch-tier.ops::before{
    content:attr(data-label); display:block; font-family:var(--mono); font-size:8px;
    letter-spacing:2px; color:var(--fog); margin-bottom:9px;
  }
}
@media (max-width:400px){ .aarch-row{ grid-template-columns:1fr; } }

/* ============================================================
   05 — SECURITY SIGNALS
   A terminal and a signal feed, side by side. Everything here is
   written copy on a timer — there is no data source behind it and
   the labelling says so.
   ============================================================ */
.sig-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:stretch; }
.sterm, .sig-feed{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--void);
  overflow:hidden; display:flex; flex-direction:column;
}
.sterm-bar, .sig-head{
  display:flex; align-items:center; gap:8px; padding:11px 15px;
  border-bottom:1px solid var(--line); background:var(--deep); flex:none;
}
.sterm-dot{ width:8px; height:8px; border-radius:50%; background:var(--line3); }
.sterm-lbl, .sig-lbl{
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--fog); margin-left:4px;
}
.sig-lbl{ margin-left:0; }
.sig-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:7.5px; letter-spacing:1.4px; color:var(--fog);
}
.sig-live i{ width:5px; height:5px; border-radius:50%; background:var(--acc); box-shadow:0 0 7px var(--acc); animation:solPulse 1.8s infinite; }

.sterm-body{
  flex:1; padding:18px 18px 22px; font-family:var(--mono); font-size:12px; line-height:2;
  color:var(--ice); min-height:296px;
}
.sterm-line{ display:block; white-space:pre-wrap; }
.sterm-line .pfx{ color:var(--acc); }
.sterm-line.done .ok{ color:var(--ok); }
.sterm-cursor{
  display:inline-block; width:7px; height:14px; background:var(--acc);
  vertical-align:-2px; margin-left:3px; animation:solCaret 1s steps(1) infinite;
}
@keyframes solCaret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

.sig-list{ flex:1; padding:8px 0; overflow:hidden; }
.sig-row{
  display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid rgba(26,36,60,.5);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s;
}
.sig-row.on{ opacity:1; transform:none; }
.sig-row:hover{ background:rgba(13,20,36,.6); }
.sig-t{ font-family:var(--mono); font-size:10px; color:var(--fog); letter-spacing:.4px; }
.sig-e{ font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--ice); }
.sig-b{
  font-family:var(--mono); font-size:7.5px; letter-spacing:1.2px; padding:4px 8px;
  border-radius:8px; border:1px solid var(--line2); color:var(--fog); white-space:nowrap;
}
.sig-b.i{ color:var(--acc); border-color:var(--acc-line); }
.sig-b.w{ color:var(--warn); border-color:rgba(245,180,78,.4); }
.sig-foot{
  flex:none; padding:12px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--fog); background:var(--deep);
}
@media (max-width:900px){
  .sig-grid{ grid-template-columns:1fr; }
  .sterm-body{ min-height:232px; font-size:11px; }
  .sig-row{ grid-template-columns:64px 1fr; row-gap:6px; }
  .sig-b{ grid-column:2; justify-self:start; }
}

/* ============================================================
   06 — AEGIS AS A SECURITY LAYER
   A vertical section-cut. Reads top-down on every screen size,
   so mobile needs no separate treatment beyond scale.
   ============================================================ */
.lyr{ max-width:760px; margin:0 auto; }
.lyr-row{
  position:relative; display:grid; grid-template-columns:78px 1fr; align-items:center;
  gap:20px; padding:15px 20px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--deep); margin-bottom:9px;
  opacity:.34; transform:translateX(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s, background .5s;
}
.lyr-row.on{ opacity:1; transform:none; border-color:var(--line2); }
.lyr-row:hover{ background:var(--panel); }
.lyr-k{ font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--fog); }
.lyr-n{ font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:-.2px; }
.lyr-d{ font-size:12.5px; color:var(--fog); line-height:1.6; margin-top:3px; }
.lyr-arrow{
  display:block; width:1px; height:14px; margin:0 auto 9px; background:var(--line2);
}
/* The Aegis row is the destination, not another layer. */
.lyr-row.aegis{
  border-color:var(--acc); background:linear-gradient(180deg, rgba(18,27,48,.9), rgba(8,12,24,.9));
  box-shadow:var(--glow);
}
.lyr-row.aegis .lyr-n{ font-family:var(--display); font-size:18px; font-weight:700; color:var(--white); }
.lyr-row.aegis .lyr-k{ color:var(--acc); }
.lyr-note{ font-size:12.5px; color:var(--fog); line-height:1.7; text-align:center; max-width:640px; margin:var(--s4) auto 0; }
@media (max-width:520px){
  .lyr-row{ grid-template-columns:1fr; gap:5px; padding:13px 15px; }
  .lyr-k{ letter-spacing:1.2px; }
}

/* ============================================================
   07 — PRODUCT PRINCIPLES
   Spotlight cards. This is the only section using cursor light +
   micro-tilt, so the interaction stays a signature rather than a
   habit.
   ============================================================ */
.prin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.prin{
  position:relative; overflow:hidden; isolation:isolate;
  padding:32px 30px 34px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--deep);
  transform-style:preserve-3d; transition:transform .35s var(--ease), border-color .35s;
}
.prin::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:var(--pl,0);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(79,216,234,.13), transparent 66%);
  transition:opacity .35s;
}
.prin:hover{ border-color:var(--acc-line); }
.prin-head{ display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.prin-n{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--acc); }
.prin-ic{
  margin-left:auto; width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center; border:1px solid var(--line2);
  background:var(--panel); color:var(--fog);
  transition:color .35s, border-color .35s, background .35s, transform .35s var(--ease);
}
.prin:hover .prin-ic{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft); transform:translateY(-2px); }
.prin-k{ font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.4px; margin-bottom:11px; }
.prin-d{ font-size:14px; color:var(--fog); line-height:1.72; }
/* Secondary line revealed on hover / focus — never the only copy. */
.prin-more{
  display:block; font-size:12.5px; color:var(--ice); line-height:1.6;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .35s, margin-top .45s var(--ease);
}
.prin:hover .prin-more,
.prin:focus-visible .prin-more,
.prin:focus-within .prin-more{ max-height:110px; opacity:1; margin-top:13px; }
/* The card holds no link or button, so :focus-within alone could never fire —
   without a tab stop the secondary line was unreachable by keyboard. */
.prin:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-color:var(--acc-line); }
@media (max-width:820px){ .prin-grid{ grid-template-columns:1fr; } }
@media (hover:none){ .prin-more{ max-height:110px; opacity:1; margin-top:13px; } }

/* ============================================================
   08 — COMING SOON
   A dormant system powering up. Radial on desktop, stacked on
   mobile. The module states are real project states, not decor.
   ============================================================ */
.soon{ position:relative; padding:var(--s6) 0; }
.soon-stage{
  position:relative; width:min(660px, 92vw); aspect-ratio:1/1; margin:0 auto;
  perspective:1200px;
}
.soon-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--srx,14deg)); transition:transform .6s var(--ease);
}
.soon-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.soon-ring{
  fill:none; stroke:var(--line2); stroke-width:1;
  opacity:0; transition:opacity .8s var(--ease);
}
.soon.on .soon-ring{ opacity:1; }
.soon-ring.dash{ stroke:var(--line); stroke-dasharray:2 10; }
.soon-ring.spin{ transform-origin:50% 50%; animation:agcSpin 60s linear infinite; }
.soon-ring.spin.rev{ animation-duration:44s; animation-direction:reverse; }
.soon-tick{ fill:var(--line3); opacity:0; transition:opacity .6s, fill .6s; }
.soon.on .soon-tick{ opacity:.75; }
.soon-tick.lit{ fill:var(--acc); }

.soon-core{
  position:absolute; top:50%; left:50%; width:194px; height:194px;
  transform:translate(-50%,-50%) translateZ(46px) scale(var(--cs,.72));
  opacity:var(--co,0); transition:transform .9s var(--ease), opacity .9s var(--ease);
  border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 46% 38%, rgba(79,216,234,.26), rgba(6,9,17,.98) 70%);
  border:1px solid rgba(79,216,234,.55);
  box-shadow:0 0 90px rgba(79,216,234,.2), inset 0 0 44px rgba(79,216,234,.12);
}
.soon.on .soon-core{ --cs:1; --co:1; }
.soon-core b{
  display:block; font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:700;
  letter-spacing:-.6px; color:var(--white); line-height:1;
}
.soon-core span{
  display:block; font-family:var(--mono); font-size:8px; letter-spacing:3px;
  color:var(--acc); margin-top:9px;
}
.soon-core em{
  display:block; font-style:normal; font-family:var(--mono); font-size:7px;
  letter-spacing:2px; color:var(--fog); margin-top:14px;
}

/* Locked modules on the outer ring. */
.soon-mod{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) translateZ(18px) scale(var(--ms,.86));
  opacity:var(--mo,0); transition:transform .7s var(--ease), opacity .7s var(--ease), border-color .4s;
  min-width:126px; padding:10px 13px; border-radius:11px; text-align:left;
  background:rgba(8,12,24,.95); border:1px solid var(--line2);
}
.soon.on .soon-mod{ --ms:1; --mo:1; }
.soon-mod b{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:1.4px; color:var(--ice); }
.soon-mod span{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-family:var(--mono); font-size:6.5px; letter-spacing:1.3px; color:var(--fog);
}
.soon-mod span::before{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--line3);
}
.soon-mod[data-state="init"] span{ color:var(--acc); }
.soon-mod[data-state="init"] span::before{ background:var(--acc); box-shadow:0 0 6px var(--acc); animation:solPulse 1.6s infinite; }
.soon-mod[data-state="dev"] span{ color:var(--warn); }
.soon-mod[data-state="dev"] span::before{ background:var(--warn); box-shadow:0 0 6px var(--warn); }
.soon-mod:hover{ border-color:var(--acc-line); }

.soon-head{ text-align:center; margin-bottom:var(--s5); }
.soon-h{
  font-family:var(--display); font-size:clamp(38px,7vw,86px); font-weight:700;
  letter-spacing:-2.6px; line-height:.98; margin:16px 0 10px;
  background:linear-gradient(96deg, var(--white), var(--cyan) 52%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.soon-sub{ font-size:15.5px; color:var(--ice); line-height:1.65; max-width:560px; margin:0 auto; }

@media (max-width:820px){
  /* Mobile transformation: radial system becomes a stacked module list
     with the core on top. Rings and absolute positioning are dropped
     entirely rather than shrunk. */
  .soon-stage{ aspect-ratio:auto; width:100%; perspective:none; }
  .soon-inner{ position:static; transform:none; }
  .soon-svg{ display:none; }
  .soon-core{
    position:static; transform:none; opacity:1; width:184px; height:184px;
    margin:0 auto var(--s4);
  }
  .soon-mod{
    position:static; transform:none; opacity:1; min-width:0; width:100%;
    margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .soon-mod span{ margin-top:0; }
}

/* ============================================================
   09 — WHAT COMES NEXT
   Horizontal on desktop, vertical on mobile. No dates anywhere —
   the phases are named states, not a schedule.
   ============================================================ */
.road{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.road::before{
  content:''; position:absolute; left:6%; right:6%; top:34px; height:1px; background:var(--line2);
}
.road-fill{
  position:absolute; left:6%; top:34px; height:1px; width:var(--rp,0%);
  background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.2s var(--ease);
  max-width:88%;
}
.road-step{ position:relative; padding:0 12px; text-align:center; }
.road-dot{
  position:relative; z-index:2; width:15px; height:15px; border-radius:50%; margin:27px auto 0;
  background:var(--void); border:1px solid var(--line2);
  transition:border-color .5s, box-shadow .5s, background .5s;
}
.road-step.on .road-dot{ border-color:var(--acc); background:var(--acc); box-shadow:0 0 16px var(--acc-soft); }
.road-k{ font-family:var(--mono); font-size:8.5px; letter-spacing:2px; color:var(--fog); margin-bottom:8px; }
.road-step.on .road-k{ color:var(--acc); }
.road-t{ font-family:var(--display); font-size:16px; font-weight:600; margin:16px 0 8px; }
.road-d{ font-size:12.5px; color:var(--fog); line-height:1.65; }
.road-note{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--fog); text-align:center; margin-top:var(--s5); }
@media (max-width:860px){
  .road{ grid-template-columns:1fr; }
  .road::before{ left:7px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
  .road-fill{ left:7px; top:8px; width:1px !important; height:var(--rp,0%); max-width:none;
              background:linear-gradient(180deg,var(--cyan),var(--violet)); transition:height 1.2s var(--ease); }
  .road-step{ text-align:left; padding:0 0 26px 34px; }
  .road-dot{ position:absolute; left:0; top:4px; margin:0; }
  .road-t{ margin:4px 0 6px; }
}

/* ============================================================
   10 — SOLUTION ECOSYSTEM
   ============================================================ */
.tree{ display:grid; grid-template-columns:250px 1fr; gap:var(--s5); align-items:center; }
.tree-root{
  padding:26px 24px; border-radius:var(--r-lg); text-align:center;
  border:1px solid var(--acc-line); background:radial-gradient(circle at 50% 30%, rgba(79,216,234,.12), var(--deep) 74%);
  box-shadow:var(--glow);
}
.tree-root b{ display:block; font-family:var(--display); font-size:19px; font-weight:700; color:var(--white); }
.tree-root span{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2px; color:var(--acc); margin-top:6px; }
.tree-branches{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; min-width:0; }
.tree-b{ min-width:0; }
.tree-b{
  position:relative; display:block; padding:22px 18px 24px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.tree-b:hover{ border-color:var(--acc-line); transform:translateY(-3px); background:var(--panel); }
.tree-b .tk{ font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--fog); }
.tree-b .tn{ font-family:var(--display); font-size:15px; font-weight:600; margin:11px 0 8px; line-height:1.25; }
.tree-b .td{ font-size:12px; color:var(--fog); line-height:1.6; }
.tree-b.is-aegis{ border-color:var(--acc-line); background:linear-gradient(180deg, rgba(18,27,48,.85), var(--deep)); }
.tree-b.is-aegis .tk{ color:var(--acc); }
@media (max-width:1100px){ .tree{ grid-template-columns:1fr; } .tree-branches{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tree-branches{ grid-template-columns:1fr; } }

/* ============================================================
   11 — SERVICES VS SOLUTIONS
   ============================================================ */
.vs{ display:grid; grid-template-columns:1fr 62px 1fr; align-items:stretch; gap:0; }
.vs-side{ border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px 34px; background:var(--deep); }
.vs-side.b{ border-color:var(--acc-line); background:linear-gradient(180deg, rgba(18,27,48,.7), var(--deep)); }
.vs-k{ font-family:var(--mono); font-size:9px; letter-spacing:2.4px; color:var(--fog); }
.vs-side.b .vs-k{ color:var(--acc); }
.vs-h{ font-family:var(--display); font-size:23px; font-weight:700; letter-spacing:-.5px; margin:12px 0 10px; }
.vs-p{ font-size:13.5px; color:var(--fog); line-height:1.7; margin-bottom:var(--s4); }
.vs-list{ display:flex; flex-direction:column; gap:2px; }
.vs-list a, .vs-list span{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:9px; font-size:13px; color:var(--ice);
  border:1px solid transparent; transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.vs-list a::after{ content:'→'; font-family:var(--mono); font-size:10px; color:var(--acc); opacity:0; transition:opacity .25s; }
.vs-list a:hover{ background:var(--acc-soft); border-color:var(--acc-line); transform:translateX(3px); }
.vs-list a:hover::after{ opacity:1; }
.vs-list span{ color:var(--fog); }
.vs-list span::after{ content:attr(data-state); font-family:var(--mono); font-size:7px; letter-spacing:1.3px; color:var(--warn); }
.vs-mid{ display:grid; place-items:center; }
.vs-plus{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line2); background:var(--void); color:var(--fog);
  font-family:var(--mono); font-size:15px;
}
.vs-note{ text-align:center; font-size:13.5px; color:var(--ice); line-height:1.7; max-width:660px; margin:var(--s5) auto 0; }
@media (max-width:900px){
  .vs{ grid-template-columns:1fr; gap:0; }
  .vs-mid{ padding:14px 0; }
}

/* ============================================================
   12 — INDUSTRY CONNECTION
   Hover reveals a detail panel, but the panel is also reachable
   by click/keyboard and is rendered in the DOM regardless — no
   content lives behind hover alone.
   ============================================================ */
.secn-wrap{ display:grid; grid-template-columns:300px 1fr; gap:var(--s5); align-items:start; }
.secn-list{ display:flex; flex-direction:column; gap:6px; }
.secn{
  position:relative; display:flex; align-items:center; gap:13px; width:100%;
  padding:15px 17px; border-radius:var(--r-md); text-align:left;
  border:1px solid var(--line); background:var(--deep); color:var(--ice);
  cursor:pointer; min-height:56px;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.secn:hover{ background:var(--panel); transform:translateX(3px); }
.secn[aria-selected="true"]{ border-color:var(--acc-line); background:var(--panel); box-shadow:var(--glow); }
.secn-n{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--fog); }
.secn[aria-selected="true"] .secn-n{ color:var(--acc); }
.secn-l{ font-family:var(--display); font-size:15px; font-weight:600; }
.secn-go{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--acc); opacity:0; transition:opacity .3s; }
.secn[aria-selected="true"] .secn-go{ opacity:1; }

.secn-panel{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 28px 30px;
  background:var(--deep); display:none;
}
.secn-panel.on{ display:block; animation:selIn2 .4s var(--ease); }
@keyframes selIn2{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.secn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px; }
.secn-b .secn-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:2px; color:var(--acc); margin-bottom:9px; }
.secn-b p{ font-size:13px; color:var(--fog); line-height:1.7; }
.secn-b ul{ display:flex; flex-wrap:wrap; gap:6px; }
.secn-b li{
  font-family:var(--mono); font-size:8px; letter-spacing:1px; padding:6px 10px;
  border-radius:9px; border:1px solid var(--line2); color:var(--fog);
}
.secn-cta{ margin-top:var(--s4); display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){
  .secn-wrap{ grid-template-columns:1fr; }
  .secn-grid{ grid-template-columns:1fr; gap:18px; }
}

/* ============================================================
   13 — AEGIS INTEREST
   The form validates and records intent locally. It does not
   transmit, and the completed state says exactly that.
   ============================================================ */
.wl{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s6); align-items:start;
  border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s5);
  background:linear-gradient(150deg, rgba(18,27,48,.6), rgba(6,9,17,.85));
  position:relative; overflow:hidden;
}
.wl::before{
  content:''; position:absolute; top:-40%; right:-14%; width:56%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(124,92,250,.14), transparent 66%); pointer-events:none;
}
.wl-h{ font-family:var(--display); font-size:clamp(23px,3vw,32px); font-weight:700; letter-spacing:-.8px; line-height:1.15; margin:14px 0 12px; }
.wl-p{ font-size:14px; color:var(--fog); line-height:1.7; }
.wl-form{ display:grid; grid-template-columns:1fr 1fr; gap:13px; position:relative; z-index:1; }
.wl-f{ display:flex; flex-direction:column; gap:7px; }
.wl-f.full{ grid-column:1/-1; }
.wl-f label{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--fog); }
.wl-f label .req{ color:var(--acc); }
.wl-f input, .wl-f textarea, .wl-f select{
  width:100%; min-height:46px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line2); background:var(--void); color:var(--white);
  font-family:var(--body); font-size:14px; transition:border-color .25s, box-shadow .25s;
}
.wl-f textarea{ min-height:88px; resize:vertical; line-height:1.6; }
.wl-f input:focus, .wl-f textarea:focus, .wl-f select:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft);
}
.wl-f .err{ font-family:var(--mono); font-size:9px; letter-spacing:.8px; color:var(--crit); min-height:12px; }
.wl-f input[aria-invalid="true"], .wl-f textarea[aria-invalid="true"]{ border-color:var(--crit); }
.wl-submit{ grid-column:1/-1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.wl-hint{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.2px; color:var(--fog); line-height:1.7; }
.wl-done{
  grid-column:1/-1; display:none; padding:22px 24px; border-radius:var(--r-lg);
  border:1px solid var(--ok); background:rgba(63,224,176,.07);
}
.wl-done.on{ display:block; animation:selIn2 .45s var(--ease); }
.wl-done b{ display:block; font-family:var(--display); font-size:17px; font-weight:600; color:var(--white); margin-bottom:9px; }
.wl-done p{ font-size:13px; color:var(--ice); line-height:1.7; }
.wl-done code{
  display:block; margin-top:13px; font-family:var(--mono); font-size:10.5px;
  color:var(--fog); background:var(--void); border:1px solid var(--line);
  border-radius:8px; padding:11px 13px; line-height:1.7; overflow-x:auto; white-space:pre;
}
@media (max-width:980px){ .wl{ grid-template-columns:1fr; gap:var(--s5); } }
@media (max-width:560px){ .wl-form{ grid-template-columns:1fr; } .wl{ padding:var(--s4); } }

/* ============================================================
   REVEALS + REDUCED MOTION
   ============================================================ */
.sol [data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.sol [data-rv].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .sol *,
  .sol *::before,
  .sol *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .sol [data-rv]{ opacity:1; transform:none; }
  .sol-grid{ transform:none; }
  /* Everything that motion would have revealed is shown outright. */
  .agc-link, .frag-edge, .aarch-wire{ stroke-dashoffset:0; opacity:1; }
  .frag-node{ --dx:0px; --dy:0px; --dz:0px; --fs:1; opacity:1; }
  .frag-hub{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .aarch-node, .aarch-hub, .lyr-row, .sig-row{ opacity:1; transform:none; }
  .soon-core{ --cs:1; --co:1; }
  .soon-mod{ --ms:1; --mo:1; }
  .soon-ring{ opacity:1; }
  .aarch-view{ position:static; height:auto; }
}

/* 44px minimum touch target on every control this page owns. */
.sol .cta-btn, .sol .cta-ghost{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.sol .vs-list a, .sol .vs-list span, .sol .sel-svc a{ min-height:44px; }
.sol #aegisForm button{ min-height:46px; }