/* ==========================================================================
   INSANECO SRL — Industrial Automation & Control
   Visual system: dark instrument panel. Committed single-theme design.
   Every color is painted explicitly from a token; nothing inherits a host ground.
   ========================================================================== */

:root{
  /* ground + structure ---------------------------------------------------- */
  --void:      #070A0F;
  --panel:     #0B1017;
  --panel-2:   #101821;
  --raise:     #151E29;
  --line:      #1B2531;
  --line-2:    #26323F;
  --line-hair: rgba(140,168,200,.055);

  /* ink ------------------------------------------------------------------- */
  --white:     #F2F5F8;
  --mist:      #8A97A8;
  --mist-dim:  #5C6A7B;

  /* brand ----------------------------------------------------------------- */
  --amber:     #FF8A14;
  --amber-soft:#FFB25E;
  --amber-deep:#C4620A;
  --blue:      #3A63FF;
  --blue-deep: #1B2E8F;
  --ok:        #3FD98A;

  /* type ------------------------------------------------------------------ */
  --display: "Saira", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero:  clamp(2.25rem, 6.9vw, 7.5rem);
  --fs-huge:  clamp(2.6rem, 7.4vw, 8rem);
  --fs-sec:   clamp(2rem, 4.9vw, 4.5rem);
  --fs-sub:   clamp(1.25rem, 2.1vw, 1.9rem);
  --fs-body:  clamp(0.975rem, 0.92vw, 1.125rem);
  --fs-mono:  clamp(0.625rem, 0.62vw, 0.72rem);

  /* metrics --------------------------------------------------------------- */
  --gut:      clamp(1.15rem, 4vw, 4.25rem);
  --rail:     clamp(0px, 3.4vw, 58px);
  --maxw:     1680px;
  --sec-y:    clamp(5.5rem, 13vh, 10.5rem);
  --cell:     clamp(64px,8.34vw,148px);
  --ease:     cubic-bezier(.16,1,.3,1);
  --nav-h:    84px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:92%;
  line-height:.93;
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--amber); color:#0A0704; }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.mono{
  font-family:var(--mono);
  font-size:var(--fs-mono);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}

.mono--dim{ color:var(--mist-dim); }
.mono--mist{ color:var(--mist); }
.amber{ color:var(--amber); }

.hair{
  height:1px;
  background:var(--line);
  border:0;
  margin:0;
}

.tick{
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.tick::before{
  content:"";
  width:6px; height:6px;
  background:var(--amber);
  transform:rotate(45deg);
  flex:none;
}

/* Section header block — the numbered marker encodes the catalogue order the
   brochure itself uses (01 instrumentation → 04 valves), not decoration. */
.sec{
  position:relative;
  padding-block:var(--sec-y);
}

.sec__head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,2.4vw,2.6rem);
  margin-bottom:clamp(2.75rem,5.5vw,5.5rem);
}

.sec__meta{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  flex-wrap:wrap;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.sec__meta .rule{
  flex:1 1 60px;
  height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
  align-self:center;
}

.sec__title{ font-size:var(--fs-sec); max-width:19ch; }
.sec__title--wide{ max-width:24ch; }

.sec__lede{
  color:var(--mist);
  max-width:62ch;
  font-size:clamp(1rem,1.35vw,1.3rem);
  line-height:1.55;
}

/* Buttons ------------------------------------------------------------------ */

.btn{
  --btn-bg:transparent;
  --btn-ink:var(--white);
  --btn-bd:var(--line-2);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:1.05em 1.6em;
  background:var(--btn-bg);
  color:var(--btn-ink);
  border:1px solid var(--btn-bd);
  font-family:var(--mono);
  font-size:var(--fs-mono);
  letter-spacing:.19em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; display:block; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .5s var(--ease);
  z-index:1;
}
.btn:hover{ border-color:var(--amber); color:#0A0704; }
.btn:hover::before{ transform:scaleY(1); }
.btn:focus-visible{ color:#0A0704; }
.btn:focus-visible::before{ transform:scaleY(1); }

.btn--solid{ --btn-bg:var(--amber); --btn-ink:#0A0704; --btn-bd:var(--amber); }
.btn--solid::before{ background:var(--white); }
.btn--solid:hover{ border-color:var(--white); color:#070A0F; }

.btn--lg{ padding:1.25em 2em; }

.btn__dot{
  width:5px; height:5px;
  background:currentColor;
  flex:none;
  transform:rotate(45deg);
}

/* Reveal ------------------------------------------------------------------- */

[data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="line"]{ transform:scaleX(0); transform-origin:left; }
[data-reveal].is-in{ opacity:1; transform:none; }

.split-line{ display:block; overflow:hidden; padding:0 .05em .09em; margin:0 -.05em -.09em; }
.split-line > i{
  display:block;
  font-style:normal;
  transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
.is-in .split-line > i,
.split-line.is-in > i{ transform:none; }

/* --------------------------------------------------------------------------
   Fixed chrome: section grid, edge rails, scroll progress
   -------------------------------------------------------------------------- */

.sec::after,
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--line-hair) 1px,transparent 1px),
    linear-gradient(0deg,var(--line-hair) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
}

.sec > .shell,
.sec > .ind__rail{ position:relative; z-index:2; }

.edge{
  position:fixed;
  top:0; bottom:0;
  width:var(--rail);
  z-index:40;
  pointer-events:none;
  display:none;
  align-items:center;
  justify-content:center;
  border-inline:1px solid transparent;
}
.edge--l{ left:0; border-right-color:var(--line); }
.edge--r{ right:0; border-left-color:var(--line); }

.edge__txt{
  writing-mode:vertical-rl;
  color:var(--mist-dim);
  letter-spacing:.32em;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:1.4rem;
}
.edge--l .edge__txt{ transform:rotate(180deg); }

.edge__pip{
  position:absolute;
  left:50%;
  translate:-50% 0;
  width:7px; height:7px;
  border:1px solid var(--line-2);
}
.edge__pip--t{ top:26px; }
.edge__pip--b{ bottom:26px; }

@media (min-width:1180px){
  .edge{ display:flex; }
  .shell{ padding-inline:calc(var(--rail) + var(--gut)); }
}

/* Scroll progress ---------------------------------------------------------- */
.progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  z-index:120;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:height .5s var(--ease), background-color .5s var(--ease),
             border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-stuck{
  height:62px;
  background:rgba(8,12,18,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-100%); transition:transform .5s var(--ease); }

.nav__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

/* Brand lockup — the real INSANECO mark, recovered as an alpha silhouette and
   re-inked: amber gear, white wordmark. */
.mark{
  display:block;
  width:clamp(146px,13vw,204px);
  height:auto;
  transition:opacity .4s var(--ease), width .5s var(--ease);
}
.nav.is-stuck .mark{ width:clamp(136px,11vw,168px); }
.brand{ display:flex; align-items:center; gap:.9rem; flex:none; }
.brand:hover .mark{ opacity:.82; }
.brand__srl{
  color:var(--mist-dim);
  border-left:1px solid var(--line-2);
  padding-left:.9rem;
  display:none;
}
@media (min-width:900px){ .brand__srl{ display:block; } }

.nav__links{
  display:none;
  align-items:center;
  gap:clamp(1.1rem,2.3vw,2.5rem);
}
.nav__link{
  position:relative;
  font-family:var(--mono);
  font-size:var(--fs-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover{ color:var(--white); }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--white); }
.nav__link.is-active::after{ transform:scaleX(1); background:var(--line-2); }

.nav__cta{ display:none; }
@media (min-width:1024px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
}

.burger{
  width:46px; height:46px;
  display:grid;
  place-content:center;
  gap:6px;
  border:1px solid var(--line-2);
  flex:none;
}
.burger i{ display:block; width:18px; height:1px; background:var(--white); transition:transform .4s var(--ease), opacity .3s linear; }
.burger.is-open i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }
@media (min-width:1024px){ .burger{ display:none; } }

.drawer{
  position:fixed;
  inset:0;
  z-index:95;
  background:var(--panel);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); }
.drawer__nav{ display:flex; flex-direction:column; gap:.35rem; }
.drawer__link{
  font-family:var(--display);
  font-weight:800;
  font-stretch:92%;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:clamp(2rem,10vw,3.25rem);
  line-height:1.06;
  padding-block:.28em;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  color:var(--white);
}
.drawer__link small{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
  color:var(--mist-dim);
  font-weight:400;
}
.drawer__foot{ display:flex; flex-direction:column; gap:1rem; }

/* --------------------------------------------------------------------------
   WebGL stages (shared)
   -------------------------------------------------------------------------- */

.stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.stage canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity 1.4s var(--ease);
}
.stage.is-ready canvas{ opacity:1; }

/* Static schematic shown when WebGL is unavailable or refused */
.stage__fallback{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  padding:8%;
}
.stage__fallback svg{ width:min(100%,720px); height:auto; overflow:visible; }
.no-gl .stage__fallback{ display:grid; }

/* DOM labels projected from 3D anchor points */
.tags{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
}
@media (min-width:900px){ .tags{ display:block; } }

.tag{
  position:absolute;
  top:0; left:0;
  transform:translate3d(-50%,-50%,0);
  opacity:0;
  transition:opacity .5s linear;
  will-change:transform;
}
.tag.is-on{ opacity:1; }
.tag__box{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.34rem .62rem;
  background:rgba(10,14,20,.6);
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  white-space:nowrap;
}
.tag__box::before{
  content:"";
  width:4px; height:4px;
  background:var(--amber);
  flex:none;
}
.tag__box b{ color:var(--white); font-weight:500; }
.tag__box em{ font-style:normal; color:var(--mist-dim); }

.leaders{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.leaders line{ stroke:rgba(140,168,200,.28); stroke-width:1; }
.leaders circle{ fill:none; stroke:rgba(255,138,20,.6); stroke-width:1; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 3vh);
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}
.hero .stage{ z-index:0; }
.hero__glow{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,6,10,.55) 0%,transparent 16%),
    linear-gradient(96deg,rgba(7,10,15,.96) 0%,rgba(7,10,15,.89) 26%,rgba(7,10,15,.44) 48%,transparent 68%),
    radial-gradient(46% 42% at 74% 40%,rgba(58,99,255,.20),transparent 70%),
    radial-gradient(38% 34% at 62% 62%,rgba(255,138,20,.10),transparent 72%);
}
.hero__inner{
  position:relative;
  z-index:3;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,5vh,4rem);
  flex:1;
  align-content:end;
}
@media (min-width:1024px){
  .hero__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(1.5rem,3vw,3rem); }
  .hero__copy{ grid-column:1; }
  .hero__side{ grid-column:2; justify-self:end; text-align:right; }
}

.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  color:var(--mist);
}
.hero__eyebrow .rule{ width:clamp(28px,5vw,72px); height:1px; background:var(--line-2); }

.hero h1{
  font-size:var(--fs-hero);
  font-weight:900;
  font-stretch:88%;
  letter-spacing:-.038em;
  line-height:.875;
  margin-bottom:clamp(1.3rem,2.6vw,2.1rem);
}
.hero h1 em{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(242,245,248,.42);
}
.hero h1 .dot{ color:var(--amber); -webkit-text-stroke:0; }

.hero__lede{
  color:var(--mist);
  max-width:54ch;
  font-size:clamp(1rem,1.28vw,1.28rem);
  line-height:1.55;
  margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
}
.hero__lede strong{ color:var(--white); font-weight:500; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__side{ display:none; }
@media (min-width:1024px){
  .hero__side{ display:flex; flex-direction:column; align-items:flex-end; gap:1.15rem; }
}
.hero__chips{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.hero__chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.42rem .7rem;
  border:1px solid var(--line);
  background:rgba(11,16,23,.5);
  color:var(--mist);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero__chip i{ width:4px; height:4px; background:var(--blue); display:block; flex:none; transform:rotate(45deg); }
.hero__chip:nth-child(2n) i{ background:var(--amber); }

/* HUD strip — decorative reference readout, explicitly labelled as such */
.hud{
  position:relative;
  z-index:3;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,13,19,.35),rgba(7,10,15,.85));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hud__inner{
  display:flex;
  align-items:stretch;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.hud__inner::-webkit-scrollbar{ display:none; }
.hud__cell{
  flex:1 0 auto;
  min-width:132px;
  padding:.9rem clamp(.85rem,1.8vw,1.6rem);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.hud__cell:last-child{ border-right:0; }
.hud__k{ color:var(--mist-dim); }
.hud__v{
  font-family:var(--mono);
  font-size:clamp(.82rem,1.1vw,1rem);
  letter-spacing:.04em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.hud__v small{ color:var(--mist-dim); font-size:.62em; letter-spacing:.14em; margin-left:.35em; }
.hud__cell--status .hud__v{ color:var(--ok); display:flex; align-items:center; gap:.5rem; }
.hud__led{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(63,217,138,.6);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(63,217,138,.55); }
  70%{ box-shadow:0 0 0 7px rgba(63,217,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,217,138,0); }
}
.hud__note{
  margin-left:auto;
  display:none;
  align-items:center;
  padding-inline:clamp(.85rem,1.8vw,1.6rem);
  border-left:1px solid var(--line);
  color:var(--mist-dim);
  max-width:32ch;
  letter-spacing:.13em;
  align-self:center;
}
@media (min-width:1180px){ .hud__note{ display:flex; } }

.scroll-cue{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--mist-dim);
}
.scroll-cue i{
  display:block;
  width:1px; height:22px;
  background:linear-gradient(180deg,var(--amber),transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* --------------------------------------------------------------------------
   02 · Manufacturers
   -------------------------------------------------------------------------- */

.brands{ background:var(--void); border-top:1px solid var(--line); }

.brands__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media (min-width:640px){ .brands__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1180px){ .brands__grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } }

.brand-cell{
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(.8rem,1.6vw,1.2rem);
  min-height:clamp(118px,12vw,158px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
  overflow:hidden;
  isolation:isolate;
  transition:background-color .5s var(--ease);
}
.brand-cell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(58,99,255,.10),rgba(255,138,20,.05));
  opacity:0;
  transition:opacity .5s var(--ease);
}
.brand-cell:hover::before{ opacity:1; }
.brand-cell__name{
  font-family:var(--display);
  font-weight:700;
  font-stretch:82%;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(.98rem,1.35vw,1.3rem);
  line-height:1.02;
  color:var(--mist-dim);
  filter:grayscale(1);
  transition:color .5s var(--ease), transform .5s var(--ease);
}
.brand-cell:hover .brand-cell__name{ color:var(--white); transform:translateY(-2px); }
.brand-cell__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  font-size:.58rem;
  letter-spacing:.15em;
  color:var(--mist-dim);
  opacity:.55;
  transition:opacity .5s var(--ease), color .5s var(--ease);
}
.brand-cell:hover .brand-cell__meta{ opacity:1; color:var(--amber); }

.brands__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.4rem;
  color:var(--mist-dim);
}

/* --------------------------------------------------------------------------
   03 · Solutions
   -------------------------------------------------------------------------- */

.sol{ background:linear-gradient(180deg,var(--void),var(--panel) 42%,var(--void)); }

.sol__list{ border-top:1px solid var(--line); }

.sol-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2.5rem);
  padding-block:clamp(1.8rem,3.4vw,2.9rem);
  border-bottom:1px solid var(--line);
  isolation:isolate;
  transition:padding-left .6s var(--ease);
}
@media (min-width:900px){
  .sol-row{
    grid-template-columns:88px minmax(0,1.15fr) minmax(0,1.5fr) 116px;
    align-items:start;
  }
  .sol-row:hover{ padding-left:14px; }
}
.sol-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,138,20,.07),transparent 58%);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.sol-row:hover::before{ opacity:1; }
.sol-row::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  height:1px; width:100%;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.sol-row:hover::after{ transform:scaleX(1); }

.sol-row__no{
  font-family:var(--mono);
  font-size:clamp(.7rem,.9vw,.78rem);
  letter-spacing:.2em;
  color:var(--mist-dim);
  padding-top:.45rem;
  transition:color .5s var(--ease);
}
.sol-row:hover .sol-row__no{ color:var(--amber); }

.sol-row__title{
  font-size:clamp(1.55rem,3.15vw,2.85rem);
  font-stretch:88%;
  letter-spacing:-.028em;
  line-height:.96;
  color:var(--white);
}
.sol-row__title small{
  display:block;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--mist-dim);
  margin-top:.85rem;
  text-transform:uppercase;
}

.sol-row__items{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  align-content:flex-start;
  padding-top:.3rem;
}
.sol-chip{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--mist);
  border:1px solid var(--line);
  padding:.38rem .6rem;
  background:rgba(16,24,33,.5);
  transition:border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.sol-row:hover .sol-chip{ border-color:var(--line-2); color:var(--white); }
.sol-chip:hover{ border-color:var(--amber); color:var(--amber); background:rgba(255,138,20,.06); }

.sol-row__viz{
  position:relative;
  height:96px;
  border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 20%,rgba(58,99,255,.10),transparent 70%),var(--panel-2);
  overflow:hidden;
  display:none;
}
@media (min-width:900px){ .sol-row__viz{ display:block; } }
.sol-row__viz svg{ position:absolute; inset:0; width:100%; height:100%; }
.sol-row__viz .stroke{ stroke:var(--mist-dim); fill:none; stroke-width:1.1; transition:stroke .55s var(--ease); }
.sol-row__viz .fill{ fill:rgba(140,168,200,.10); stroke:none; transition:fill .55s var(--ease); }
.sol-row__viz .hot{ stroke:var(--amber); fill:none; stroke-width:1.1; opacity:0; transition:opacity .55s var(--ease); }
.sol-row:hover .sol-row__viz .stroke{ stroke:var(--white); }
.sol-row:hover .sol-row__viz .fill{ fill:rgba(58,99,255,.16); }
.sol-row:hover .sol-row__viz .hot{ opacity:1; }
.sol-row__scan{
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  opacity:0;
  transition:opacity .4s linear;
}
.sol-row:hover .sol-row__scan{ opacity:.9; animation:scan 2.6s linear infinite; }
@keyframes scan{ 0%{ top:0; } 100%{ top:100%; } }

/* --------------------------------------------------------------------------
   04 · Product experience
   -------------------------------------------------------------------------- */

.product{
  position:relative;
  background:var(--void);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.product__stagewrap{
  position:relative;
  height:clamp(420px,64vh,720px);
  margin-top:clamp(2rem,4vw,3.5rem);
  border:1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 45%,rgba(58,99,255,.13),transparent 70%),
    linear-gradient(180deg,var(--panel-2),var(--void));
  cursor:grab;
  touch-action:pan-y;
}
.product__stagewrap.is-drag{ cursor:grabbing; }
.product__corner{
  position:absolute;
  width:14px; height:14px;
  border:1px solid var(--line-2);
  z-index:4;
}
.product__corner--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.product__corner--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.product__corner--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.product__corner--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.product__hint{
  position:absolute;
  left:50%; bottom:1.1rem;
  translate:-50% 0;
  z-index:5;
  color:var(--mist-dim);
  display:flex;
  align-items:center;
  gap:.6rem;
  transition:opacity .5s linear;
}
.product__hint.is-off{ opacity:0; }

.product__switch{
  position:absolute;
  top:1rem; left:1rem;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.pswitch{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem .75rem;
  border:1px solid var(--line);
  background:rgba(10,14,20,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist-dim);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.pswitch i{ width:5px; height:5px; background:var(--line-2); flex:none; transform:rotate(45deg); transition:background-color .4s var(--ease); }
.pswitch:hover{ color:var(--white); border-color:var(--line-2); }
.pswitch.is-on{ color:var(--white); border-color:var(--amber); }
.pswitch.is-on i{ background:var(--amber); }

.product__specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-top:0;
}
@media (min-width:820px){ .product__specs{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.pspec{
  background:var(--void);
  padding:clamp(1rem,1.8vw,1.5rem);
  display:flex;
  flex-direction:column;
  gap:.45rem;
  transition:background-color .5s var(--ease);
}
.pspec:hover{ background:var(--panel-2); }
.pspec__k{ color:var(--amber); }
.pspec__v{ color:var(--mist); font-size:.92rem; line-height:1.45; }

/* --------------------------------------------------------------------------
   05 · Why INSANECO
   -------------------------------------------------------------------------- */

.why{ background:var(--panel); border-top:1px solid var(--line); }

.why__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:700px){ .why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .why__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.pillar{
  position:relative;
  background:var(--panel);
  padding:clamp(1.6rem,2.6vw,2.4rem);
  min-height:clamp(250px,26vw,340px);
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow:hidden;
  isolation:isolate;
  transition:background-color .55s var(--ease);
}
.pillar:hover{ background:var(--panel-2); }
.pillar__no{
  font-family:var(--display);
  font-weight:900;
  font-stretch:78%;
  font-size:clamp(3.4rem,7vw,5.6rem);
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  transition:-webkit-text-stroke-color .55s var(--ease), transform .7s var(--ease);
}
.pillar:hover .pillar__no{ -webkit-text-stroke-color:var(--amber); transform:translateY(-4px); }
.pillar__title{
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  font-stretch:88%;
  letter-spacing:-.015em;
  color:var(--white);
}
.pillar__copy{ color:var(--mist); font-size:.97rem; line-height:1.58; }
.pillar__foot{ margin-top:auto; color:var(--mist-dim); display:flex; justify-content:space-between; gap:1rem; }
.pillar__bar{
  position:absolute;
  left:0; top:0;
  width:2px; height:100%;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s var(--ease);
}
.pillar:hover .pillar__bar{ transform:scaleY(1); }

/* --------------------------------------------------------------------------
   06 · Industries — horizontal scroll rail
   -------------------------------------------------------------------------- */

.ind{ background:var(--void); border-top:1px solid var(--line); overflow:hidden; }

.ind__rail{
  display:flex;
  gap:clamp(.9rem,1.6vw,1.4rem);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-inline:var(--gut);
  scroll-padding-inline-start:var(--gut);
  padding-bottom:1.5rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ind__rail::-webkit-scrollbar{ display:none; }
@media (min-width:1180px){
  .ind__rail{
    padding-inline:calc(var(--rail) + var(--gut));
    scroll-padding-inline-start:calc(var(--rail) + var(--gut));
  }
}

.ind-card{
  position:relative;
  flex:0 0 clamp(255px,74vw,430px);
  scroll-snap-align:start;
  height:clamp(340px,46vw,500px);
  border:1px solid var(--line);
  background:var(--panel-2);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(1.2rem,2vw,1.9rem);
  transition:transform .7s var(--ease), border-color .55s var(--ease);
}
.ind-card:hover{ transform:translateY(-8px); border-color:var(--line-2); }
.ind-card canvas,
.ind-card svg.ind-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  opacity:.82;
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.ind-card:hover canvas,
.ind-card:hover svg.ind-art{ opacity:1; transform:scale(1.045); }
.ind-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(7,10,15,.15) 0%,rgba(7,10,15,.86) 72%,rgba(7,10,15,.96) 100%);
}
.ind-card__no{ color:var(--mist-dim); margin-bottom:.7rem; }
.ind-card__title{
  font-size:clamp(1.35rem,2.3vw,2.1rem);
  font-stretch:86%;
  letter-spacing:-.025em;
  color:var(--white);
  margin-bottom:.6rem;
}
.ind-card__copy{
  color:var(--mist);
  font-size:.93rem;
  line-height:1.5;
  max-width:34ch;
  transition:color .55s var(--ease);
}
.ind-card:hover .ind-card__copy{ color:var(--white); }
.ind-card__tagset{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem; }
.ind-card__tag{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mist-dim);
  border:1px solid var(--line-2);
  padding:.28rem .5rem;
}

.ind__nav{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:.4rem;
}
.ind__track{
  position:relative;
  flex:1;
  height:1px;
  background:var(--line);
}
.ind__thumb{
  position:absolute;
  left:0; top:-1px;
  height:3px;
  background:var(--amber);
  width:22%;
  transition:transform .12s linear;
}
.ind__btns{ display:flex; gap:.4rem; }
.ind__btn{
  width:42px; height:42px;
  border:1px solid var(--line-2);
  display:grid;
  place-content:center;
  color:var(--mist);
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.ind__btn:hover{ color:#0A0704; background:var(--amber); border-color:var(--amber); }
.ind__btn[disabled]{ opacity:.32; pointer-events:none; }

/* --------------------------------------------------------------------------
   07 · Scale readout
   -------------------------------------------------------------------------- */

.scale{ background:var(--void); border-top:1px solid var(--line); }
.scale__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:900px){ .scale__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.metric{
  background:var(--void);
  padding:clamp(1.5rem,3vw,2.6rem);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  transition:background-color .55s var(--ease);
}
.metric:hover{ background:var(--panel-2); }
.metric__v{
  font-family:var(--display);
  font-weight:900;
  font-stretch:80%;
  font-size:clamp(3.2rem,8.5vw,7rem);
  line-height:.82;
  letter-spacing:-.05em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
}
.metric__v sup{
  font-size:.30em;
  color:var(--amber);
  letter-spacing:0;
  align-self:flex-start;
  position:relative;
  top:.10em;
  margin-left:.1em;
}
.metric__v--sym{ font-size:clamp(3.8rem,9.5vw,8.2rem); line-height:.72; }
.metric__k{ color:var(--mist); letter-spacing:.2em; }
.metric__bar{ height:2px; background:var(--line-2); position:relative; overflow:hidden; }
.metric__bar i{
  position:absolute;
  inset:0;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.5s var(--ease);
  transition-delay:var(--d,0ms);
}
.metric.is-in .metric__bar i{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   08 · About
   -------------------------------------------------------------------------- */

.about{ background:var(--panel); border-top:1px solid var(--line); }
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.4rem,5vw,5rem);
}
@media (min-width:1024px){ .about__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start; } }

.about__body{ display:flex; flex-direction:column; gap:1.5rem; }
.about__quote{
  font-family:var(--body);
  font-size:clamp(1.05rem,1.55vw,1.42rem);
  line-height:1.5;
  color:var(--white);
  font-weight:400;
  border-left:2px solid var(--amber);
  padding-left:clamp(1rem,2vw,1.6rem);
  max-width:56ch;
}
.about__copy{ color:var(--mist); max-width:62ch; }

.chain{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--line);
  background:var(--panel-2);
}
.chain__node{
  position:relative;
  padding:clamp(1.05rem,2vw,1.5rem) clamp(1.1rem,2vw,1.7rem);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  transition:background-color .5s var(--ease), padding-left .5s var(--ease);
}
.chain__node:last-child{ border-bottom:0; }
.chain__node:hover{ background:rgba(58,99,255,.06); padding-left:calc(clamp(1.1rem,2vw,1.7rem) + 8px); }
.chain__label{
  font-family:var(--display);
  font-weight:700;
  font-stretch:86%;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(1rem,1.5vw,1.3rem);
  color:var(--white);
  line-height:1.1;
}
.chain__note{ color:var(--mist-dim); text-align:right; }
.chain__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  color:var(--amber);
  border-bottom:1px solid var(--line);
  background:rgba(7,10,15,.35);
}
.chain__arrow svg{ width:11px; height:16px; }

/* Sub-band inside 08 — reuses .sec__meta so the misión/visión and valores
   blocks read as continuations of the section, not as new sections. */
.about__band{
  margin-top:clamp(3.4rem,6.5vw,6rem);
  margin-bottom:clamp(1.5rem,2.6vw,2.4rem);
}

/* Misión / Visión — engraved plates. The corner ticks are the frame marks of a
   technical drawing; deliberately not a card with a shadow. */
.creed{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:900px){ .creed{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.creed__plate{
  position:relative;
  background:var(--panel-2);
  padding:clamp(1.7rem,3vw,3rem);
  display:flex;
  flex-direction:column;
  gap:clamp(1.05rem,1.9vw,1.6rem);
  transition:background-color .55s var(--ease);
}
.creed__plate:hover{ background:var(--raise); }
.creed__plate::before,
.creed__plate::after{
  content:"";
  position:absolute;
  width:13px; height:13px;
  border:1px solid var(--line-2);
  pointer-events:none;
  transition:border-color .55s var(--ease);
}
.creed__plate::before{ top:11px; left:11px; border-right:0; border-bottom:0; }
.creed__plate::after{ right:11px; bottom:11px; border-left:0; border-top:0; }
.creed__plate:hover::before,
.creed__plate:hover::after{ border-color:var(--amber); }

.creed__k{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  color:var(--white);
}
.creed__no{ color:var(--mist-dim); }
.creed__txt{
  font-size:clamp(1.02rem,1.5vw,1.36rem);
  line-height:1.5;
  color:var(--white);
  max-width:46ch;
}
.creed__foot{ margin-top:auto; color:var(--mist-dim); }

/* Valores — a legend, indexed V01…V06, on the same hairline grid as the pillars */
.values{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:760px){ .values{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .values{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.value{
  position:relative;
  background:var(--panel);
  padding:clamp(1.45rem,2.3vw,2.05rem) clamp(1.15rem,1.9vw,1.7rem);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  overflow:hidden;
  transition:background-color .55s var(--ease);
}
.value:hover{ background:var(--panel-2); }
.value__bar{
  position:absolute;
  left:0; top:0;
  width:2px; height:100%;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s var(--ease);
}
.value:hover .value__bar{ transform:scaleY(1); }
.value__no{ color:var(--mist-dim); transition:color .45s var(--ease); }
.value:hover .value__no{ color:var(--amber); }
.value__title{
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  font-stretch:88%;
  letter-spacing:-.015em;
  color:var(--white);
}
.value__copy{ color:var(--mist); font-size:.95rem; line-height:1.56; }

/* --------------------------------------------------------------------------
   09 · Closing CTA
   -------------------------------------------------------------------------- */

.cta{
  position:relative;
  background:var(--void);
  border-top:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.cta .stage{ z-index:-1; }
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(82% 74% at 50% 58%,rgba(7,10,15,.20),rgba(7,10,15,.86) 76%);
  pointer-events:none;
}
.cta__inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(1.6rem,3vw,2.4rem); }
.cta h2{
  font-size:var(--fs-huge);
  font-weight:900;
  font-stretch:86%;
  letter-spacing:-.04em;
  line-height:.88;
  max-width:16ch;
}
.cta h2 .dot{ color:var(--amber); }
.cta__copy{ color:var(--mist); max-width:56ch; font-size:clamp(1rem,1.3vw,1.22rem); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact{ background:var(--panel); border-top:1px solid var(--line); }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.4rem,4vw,4rem);
}
@media (min-width:1024px){ .contact__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }

.info{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.info__row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:1rem;
  padding-block:1.15rem;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.info__k{ color:var(--mist-dim); padding-top:.28rem; }
.info__v{ color:var(--white); line-height:1.5; }
.info__v a{ transition:color .35s var(--ease); border-bottom:1px solid var(--line-2); }
.info__v a:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.info__v span{ display:block; color:var(--mist); }

/* Request console — reads as an instrument, not a contact form */
.console{
  border:1px solid var(--line);
  background:var(--panel-2);
}
.console__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--line);
  background:rgba(7,10,15,.5);
  color:var(--mist-dim);
}
.console__dots{ display:flex; gap:.35rem; }
.console__dots i{ width:6px; height:6px; background:var(--line-2); display:block; }
.console__dots i:first-child{ background:var(--amber); }
.console__body{ padding:clamp(1.2rem,2.4vw,2rem); display:grid; grid-template-columns:minmax(0,1fr); gap:1px; }
@media (min-width:620px){ .console__body{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1rem,2vw,1.6rem); } }

.field{ position:relative; display:flex; flex-direction:column; gap:.45rem; padding-block:.85rem; }
.field--full{ grid-column:1 / -1; }
.field label{ color:var(--mist-dim); font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.2em; text-transform:uppercase; display:flex; gap:.5rem; align-items:center; }
.field label b{ color:var(--amber); font-weight:400; }
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-2);
  color:var(--white);
  font-family:var(--body);
  font-size:1rem;
  padding:.55rem 0;
  transition:border-color .4s var(--ease);
  border-radius:0;
}
.field textarea{ resize:vertical; min-height:92px; line-height:1.5; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--mist-dim); opacity:.6; }
.field input:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--amber); }
.field input:focus-visible,
.field textarea:focus-visible{ outline:none; }
.field__err{ color:var(--amber); font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; min-height:1em; }

.console__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--line);
  background:rgba(7,10,15,.4);
}
.console__status{ color:var(--mist-dim); display:flex; align-items:center; gap:.6rem; }
.console__status i{ width:6px; height:6px; background:var(--line-2); display:block; transform:rotate(45deg); flex:none; transition:background-color .4s var(--ease); }
.console__status.is-ok{ color:var(--ok); }
.console__status.is-ok i{ background:var(--ok); }
.console__status.is-err{ color:var(--amber); }
.console__status.is-err i{ background:var(--amber); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot{ background:var(--void); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,3.4rem);
  border-bottom:1px solid var(--line);
}
@media (min-width:820px){ .foot__top{ grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); } }
.foot__brand{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.foot__tag{ color:var(--mist); max-width:34ch; }
.foot__col{ display:flex; flex-direction:column; gap:.75rem; }
.foot__col h4{ color:var(--mist-dim); font-family:var(--mono); font-size:var(--fs-mono); font-weight:400; letter-spacing:.2em; font-stretch:100%; }
.foot__col a{ color:var(--mist); transition:color .35s var(--ease); width:fit-content; }
.foot__col a:hover{ color:var(--amber); }
.foot__bot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.6rem;
  color:var(--mist-dim);
}
.foot__bot a{ transition:color .35s var(--ease); }
.foot__bot a:hover{ color:var(--white); }

.to-top{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--mist-dim);
  transition:color .35s var(--ease);
}
.to-top:hover{ color:var(--amber); }
.to-top svg{ width:10px; height:14px; }

/* --------------------------------------------------------------------------
   Motion preferences / small screens
   -------------------------------------------------------------------------- */

@media (max-width:640px){
  :root{ --nav-h:70px; }
  .hero{ min-height:92svh; }
  .hero h1{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .split-line > i{ transform:none; }
}

.nav__end{ display:flex; align-items:center; gap:.75rem; }

.sec__sub{
  font-family:var(--display);
  font-weight:700;
  font-stretch:88%;
  text-transform:uppercase;
  letter-spacing:-.015em;
  font-size:clamp(1.05rem,2.05vw,1.85rem);
  line-height:1.08;
  color:var(--mist);
  max-width:22ch;
}

/* Stacked hero: the scrim has to run vertically, not across the column */
@media (max-width:1023px){
  .hero__glow{
    background:
      linear-gradient(180deg,rgba(4,6,10,.60) 0%,transparent 15%),
      linear-gradient(180deg,transparent 26%,rgba(7,10,15,.68) 48%,rgba(7,10,15,.93) 68%),
      radial-gradient(62% 38% at 62% 28%,rgba(58,99,255,.20),transparent 74%);
  }
  .hero__inner{ padding-bottom:clamp(1.5rem,4vh,2.5rem); }
}