/* =========================================================================
   VX LAB — Swiss-technical / blueprint global stylesheet
   3D digital-twin + AI · architectural drawing · enterprise precision
   Light, high-contrast, FLAT (1px borders), SQUARE corners, baseline grid.
   ========================================================================= */

/* ---- Design tokens ---- */
:root{
  /* surfaces */
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;
  --bg-soft:#F2F4F8;

  /* ink */
  --ink:#0A0E16;
  --ink-2:#3C4658;
  --ink-3:#7A8499;

  /* structure */
  --line:#D7DDE8;
  --line-strong:#C2CADA;

  /* brand */
  --brand:#0B43FF;
  --brand-2:#1E9BE0;
  --brand-3:#0B43FF;
  --accent:#FF5A1F;
  --grad:linear-gradient(120deg,#0B43FF,#1E9BE0);

  /* geometry */
  --radius:0px;
  --radius-lg:2px;

  /* type */
  --font-display:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,'JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace;

  /* rhythm (baseline grid ~8px) */
  --space:8px;
  --gutter:24px;
  --container:1200px;
  --maxw:1200px;
  --section-y:clamp(56px,8vw,120px);
  --header-h:68px;

  /* faint blueprint grid */
  --grid-line:rgba(11,67,255,0.03);
  --grid-size:32px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* very faint blueprint grid on pure white */
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:0 0;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
input,textarea,select,button{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}
.section{
  position:relative;
  padding-block:var(--section-y);
  border-top:1px solid var(--line);
}
.section:first-of-type{ border-top:0; }

/* full-bleed banded section with soft fill + top/bottom rules */
.section-band{
  position:relative;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(40px,6vw,80px);
}

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */

/* mono kicker w/ SQUARE dot */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0;
}
.eyebrow .dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--brand);
  border-radius:0;            /* SQUARE dot */
  flex:0 0 auto;
}

/* big bold display headings — left aligned, tight */
h1.display,.h-display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(36px,6.2vw,76px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
.h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
.h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}
.lead{
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.6;
  color:var(--ink-2);
  max-width:62ch;
}

/* sparingly used gradient text — mostly stays solid brand */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* =========================================================================
   BUTTONS — square, 1px border, mono-ish label
   ========================================================================= */
.btn{
  --b:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border:1px solid var(--b);
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{ box-shadow:inset 0 0 0 2px var(--b); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  --b:var(--brand);
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-primary:hover{
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);
}

.btn-ghost{
  --b:var(--line-strong);
  background:transparent;
  color:var(--ink);
}
.btn-ghost:hover{
  --b:var(--brand);
  border-color:var(--brand);
  color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand);
}

.btn-lg{
  padding:16px 30px;
  font-size:14px;
}

/* =========================================================================
   CARDS — white bordered boxes (no float). Hover: border->brand + inset accent
   ========================================================================= */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.card:hover{
  border-color:var(--brand);
  box-shadow:inset 2px 0 0 0 var(--accent);  /* 2px inset accent, no lift */
}

/* .glass -> just a bordered light box (no blur) */
.glass{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

/* =========================================================================
   PILLS & TAGS — square bordered mono chips
   ========================================================================= */
.pill,.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  line-height:1;
}
.tag{ padding:6px 10px; }
.pill{ padding:9px 14px; color:var(--ink); }
.pill:hover,.tag:hover{ border-color:var(--brand); color:var(--brand); }

/* =========================================================================
   GRID SYSTEM — responsive, collapses to 1 col on mobile
   ========================================================================= */
.grid{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }
.grid-2,.grid-3,.grid-4{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }

/* =========================================================================
   ICON BADGE — square bordered glyph holder
   ========================================================================= */
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  color:var(--brand);
}
.icon-badge svg{ width:24px; height:24px; }

/* =========================================================================
   REVEAL — opacity + slight translateY
   ========================================================================= */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.center{ text-align:center; }
.center .lead,.center.lead{ margin-inline:auto; }
.muted{ color:var(--ink-3); }
.text-balance{ text-wrap:balance; }
.mt-1{ margin-top:8px; }
.mt-2{ margin-top:16px; }
.mt-3{ margin-top:24px; }
.mt-4{ margin-top:32px; }
.mt-5{ margin-top:48px; }

/* =========================================================================
   SITE HEADER  (#site-header, .scrolled, nav-toggle, nav-menu.open)
   ========================================================================= */
#site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:saturate(120%);
  backdrop-filter:saturate(120%);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
#site-header.scrolled{
  background:rgba(255,255,255,0.96);
  border-bottom:1px solid var(--line);
}
.hdr-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--header-h);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
}
.brand-mark{ display:inline-flex; }
.brand-mark svg{ width:30px; height:30px; }
.brand-word{
  font-size:19px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
}
.nav-links a{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s var(--ease),border-color .15s var(--ease);
}
.nav-links a:hover{ color:var(--ink); border-bottom-color:var(--brand); }
.nav-actions{ display:flex; align-items:center; gap:14px; }

.lang-toggle{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink-2);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
  line-height:1;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.lang-toggle:hover{ border-color:var(--brand); color:var(--brand); }

/* hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0 9px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:var(--ink);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
#hero{ overflow:hidden; border-top:0; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.hero-copy{ position:relative; z-index:2; max-width:640px; }
.hero-title{ margin-top:18px; }
.hero-lead{ margin-top:22px; }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.hero-trust{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.hero-trust-mark{ display:inline-flex; color:var(--brand); }
.hero-trust-mark svg{ width:18px; height:18px; }

/* hero visual */
.hero-visual{ position:relative; }
.hero-card{
  position:relative;
  z-index:2;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-soft);
}
.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4/5;
}
.hero-chip{
  position:absolute;
  z-index:3;
  left:-12px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 16px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
.hero-chip-value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  color:var(--brand);
  letter-spacing:-.01em;
}
.hero-chip-cap{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* decorative blueprint accents — flat line art only, no blur/soft glow */
.hero-glow,.hero-blob,.hero-card-glow,.contact-glow{ display:none; }
.hero-sphere{
  position:absolute;
  top:-40px;
  right:-60px;
  width:min(46vw,520px);
  color:var(--line);
  opacity:.5;
  z-index:0;
  pointer-events:none;
}

/* =========================================================================
   STATS — spec-sheet row w/ dividers
   ========================================================================= */
.stats-row{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.stat{
  padding:28px 24px;
  border-top:1px solid var(--line);
}
.stat:first-child{ border-top:0; }
.stat-num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  letter-spacing:-.02em;
}
.stat-label{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.4;
}

/* =========================================================================
   TECHNOLOGY
   ========================================================================= */
.tech-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.tech-ticks{ display:grid; gap:14px; }
.tech-tick{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-weight:500;
  color:var(--ink);
}
.tech-tick:last-child{ border-bottom:0; }
.tech-tick__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--brand);
}
.tech-tick__ico svg{ width:16px; height:16px; }

.tech-media__frame{
  position:relative;
  overflow:hidden;
  padding:0;
}
.tech-media__frame img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.tech-media__caption{
  position:absolute;
  left:14px;
  bottom:14px;
  background:var(--bg);
}
.tech-media__dot{
  width:7px;height:7px;background:var(--brand);border-radius:0;display:inline-block;
}

/* =========================================================================
   DIRECTIONS
   ========================================================================= */
.dir-head{ max-width:760px; }
.dir-card{ gap:6px; }
.dir-card .icon-badge{ margin-bottom:14px; }
.dir-tag{ align-self:flex-start; }
.dir-desc{ color:var(--ink-2); }

/* =========================================================================
   APPLICATIONS — tabs + filterable gallery
   ========================================================================= */
.g-head{ max-width:760px; margin-inline:auto; }
.g-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:28px;
}
.g-tab{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 16px;
  line-height:1;
  transition:color .15s var(--ease),border-color .15s var(--ease),
             background .15s var(--ease);
}
.g-tab:hover{ border-color:var(--brand); color:var(--brand); }
.g-tab.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.g-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.g-item{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  transition:border-color .18s var(--ease);
}
.g-item:hover{ border-color:var(--brand); }
.g-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.g-item:hover img{ transform:scale(1.03); }
.g-item.is-hidden{ display:none; }   /* JS filter state */
.g-cap{
  position:absolute;
  left:12px;
  bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  padding:6px 10px;
}

/* =========================================================================
   PROCESS — numbered spec steps
   ========================================================================= */
.process-head{ max-width:760px; }
.process-step{
  position:relative;
  padding:26px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
}
.process-step .icon-badge{ margin:14px 0 16px; }
.step-num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:.1em;
  display:block;
}
.step-title{ margin-bottom:8px; }
.step-text{ color:var(--ink-2); font-size:15px; }

/* =========================================================================
   AGR BAND
   ========================================================================= */
.agr-band{
  position:relative;
  overflow:hidden;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(48px,7vw,96px);
}
.agr-deco{
  position:absolute;
  right:-40px;
  top:50%;
  transform:translateY(-50%);
  width:min(36vw,420px);
  opacity:.08;
  filter:grayscale(1);
  pointer-events:none;
}
.agr-head{ max-width:760px; position:relative; z-index:1; }
.agr-title{ margin-top:14px; }
.agr-lead{ margin-top:18px; }
.agr-grid{ margin-top:44px; position:relative; z-index:1; }
.agr-card{
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.agr-card:hover{ border-color:var(--brand); box-shadow:inset 2px 0 0 0 var(--accent); }
.agr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  margin-bottom:6px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--brand);
}
.agr-badge svg{ width:22px; height:22px; }
.agr-card-text{ color:var(--ink-2); font-size:15px; }
.agr-cta{ margin-top:36px; position:relative; z-index:1; }

/* =========================================================================
   ADVANTAGES
   ========================================================================= */
.adv-head{ max-width:680px; margin-inline:auto; }
.adv-item{ gap:6px; }
.adv-item .icon-badge{ margin-bottom:14px; }
.adv-title{ margin-bottom:2px; }
.adv-text{ color:var(--ink-2); }

/* =========================================================================
   SHOWCASE
   ========================================================================= */
.sc-head{ max-width:760px; }
.sc-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  overflow:hidden;
  transition:border-color .18s var(--ease);
}
.sc-card:hover{ border-color:var(--brand); }
.sc-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.sc-media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.sc-card:hover .sc-media img{ transform:scale(1.03); }
.sc-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  border:1px solid var(--brand);
  border-radius:var(--radius);
  color:var(--brand);
}
.sc-play svg{ width:26px; height:26px; }
.sc-tag{
  position:absolute;
  top:12px;left:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  padding:5px 9px;
}
.sc-body{ padding:22px 22px 26px; }
.sc-caption{ color:var(--ink-2); }

/* =========================================================================
   CASES
   ========================================================================= */
.cases-head{ max-width:760px; }
.case-card{ padding:0; overflow:hidden; }
.case-cover{
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.case-cover img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.case-card:hover .case-cover img{ transform:scale(1.03); }
.case-body{ padding:22px 22px 24px; }
.case-tag{ align-self:flex-start; }
.case-result{ color:var(--ink-2); }
.case-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.case-hint svg{ width:15px; height:15px; flex:0 0 auto; }

/* =========================================================================
   AUDIENCE — square pill cloud
   ========================================================================= */
.aud-head{ max-width:760px; }
.aud-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:36px;
}
.aud-pill{
  letter-spacing:.06em;
  padding:11px 16px;
}
.aud-glyph{
  display:inline-flex;
  color:var(--brand);
}
.aud-glyph svg{ width:18px; height:18px; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-band{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  overflow:hidden;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
}
.contact-intro{
  padding:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.contact-list{ display:grid; gap:0; margin-top:30px; }
.contact-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.contact-item:first-child{ border-top:0; }
.contact-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  color:var(--brand);
}
.contact-ic svg{ width:20px; height:20px; }
.contact-meta{ display:flex; flex-direction:column; gap:2px; }
.contact-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.contact-val{ font-weight:500; color:var(--ink); }
.contact-val:hover{ color:var(--brand); }

.contact-form-wrap{ padding:clamp(28px,4vw,52px); }
.contact-form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.field input,
.field textarea{
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
  font-size:15px;
  line-height:1.4;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field textarea{ resize:vertical; min-height:108px; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.contact-form .btn{ justify-self:start; }

.form-status{
  margin:0;
  padding:13px 14px;
  border:1px solid var(--brand);
  border-radius:var(--radius);
  background:var(--bg-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink);
  border-left:3px solid var(--brand);
}
.form-status[hidden]{ display:none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
#site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding-block:clamp(40px,5vw,64px) 28px;
}
.foot-top{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
.foot-wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.foot-tagline{ margin-top:12px; color:var(--ink-2); }
.foot-region{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.foot-h{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:14px;
}
.foot-col ul{ display:grid; gap:10px; }
.foot-col a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink-2);
  font-size:14px;
  transition:color .15s var(--ease);
}
.foot-col a:hover{ color:var(--brand); }
.foot-ico{ width:16px; height:16px; flex:0 0 auto; }
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.foot-copy{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.foot-site{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.foot-site:hover{ color:var(--brand); }

/* =========================================================================
   RESPONSIVE — mobile-first; breakpoints 640 / 900 / 1200
   ========================================================================= */

/* ----- >= 640px ----- */
@media (min-width:640px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }

  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-top:0; border-left:1px solid var(--line); }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }

  .foot-cols{ grid-template-columns:repeat(3,1fr); }
}

/* ----- >= 900px ----- */
@media (min-width:900px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }

  .hero-grid{ grid-template-columns:1.1fr .9fr; gap:56px; }

  .stats-row{ grid-template-columns:repeat(4,1fr); }
  .stat{ border-top:0; border-left:1px solid var(--line); }
  .stat:first-child{ border-left:0; }

  .tech-grid{ grid-template-columns:1.05fr .95fr; gap:56px; }

  .contact-grid{ grid-template-columns:1fr 1fr; }
  .contact-intro{ border-bottom:0; border-right:1px solid var(--line); }

  .foot-top{ grid-template-columns:1.2fr 2fr; gap:48px; }
}

/* ----- >= 1200px ----- */
@media (min-width:1200px){
  .container{ padding-inline:24px; }
}

/* ----- Mobile nav (< 900px) ----- */
@media (max-width:899.98px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--bg);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px 20px 24px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease);
    max-height:calc(100vh - var(--header-h));
    overflow:auto;
    z-index:55;
  }
  .nav-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-links a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .nav-links a:hover{ border-bottom-color:var(--line); color:var(--brand); }
  .nav-actions{
    margin-top:18px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .nav-actions .btn{ width:100%; }
  .lang-toggle{ width:100%; padding:12px; }
}

/* small phones */
@media (max-width:520px){
  .hero-chip{ left:0; }
  .g-grid{ grid-template-columns:1fr; }
  .btn-lg{ width:100%; }
  .hero-actions .btn{ width:100%; }
}

/* =========================================================================
   MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===== v2 assembly overrides ===== */
html{overflow-x:clip}
body{overflow-x:visible;overflow-y:visible}
:target{scroll-margin-top:90px}
section[id],header[id],footer[id]{scroll-margin-top:80px}
.g-item.is-hidden,.is-hidden{display:none !important}
/* lead-form status states */
.form-status{display:block;margin-top:14px;padding:12px 16px;border:1px solid var(--line);font-size:.95rem}
.form-status[hidden]{display:none}
.form-status.is-ok{border-color:rgba(11,67,255,.45);color:var(--brand);background:rgba(11,67,255,.06)}
.form-status.is-err{border-color:#e2553d;color:#c23d24;background:#fdecec}


/* ===== site-header ===== */
/* Mini-prism brand mark — flat blueprint line art, square style */
#site-header .brand-mark{ color:var(--brand); }
#site-header .brand-mark svg{ width:28px; height:28px; }
#site-header .brand{ color:var(--ink); }
#site-header .brand-word{ display:inline-flex; align-items:baseline; }
/* keep the gradient VX crisp at small size */
#site-header .brand-word .grad-text{ font-weight:700; }

/* hover affordance on the wordmark mark */
#site-header .brand:hover .brand-mark{ color:var(--ink); transition:color .15s var(--ease); }

/* scrolled state: frosted, true backdrop blur on top of global rule */
#site-header.scrolled{
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
}

/* active nav link mirrors the hover hairline (scroll-spy adds .active) */
#site-header .nav-links a.active{
  color:var(--ink);
  border-bottom-color:var(--brand);
}

/* lang toggle reads as a square spec chip */
#site-header #lang-toggle{ min-width:48px; text-align:center; }

/* on mobile the brand mark stays compact */
@media (max-width:520px){
  #site-header .brand-word{ font-size:18px; }
}

/* ===== hero ===== */
#hero{ padding-top:clamp(40px,6vw,80px); }

/* visual: keep card framed, give room for chip + stage rail */
#hero .hero-visual{ padding-bottom:8px; }

/* faint blueprint cross-hatch over the framed image (flat, no glow) */
#hero .hero-card{ background:var(--bg-soft); }
#hero .hero-card-grid{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,67,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,67,255,0.05) 1px, transparent 1px);
  background-size:34px 34px;
  mix-blend-mode:multiply;
}
/* corner ticks — drawing registration marks */
#hero .hero-card::before,
#hero .hero-card::after{
  content:"";
  position:absolute;
  z-index:3;
  width:14px;
  height:14px;
  pointer-events:none;
}
#hero .hero-card::before{
  top:10px; left:10px;
  border-top:1px solid var(--brand);
  border-left:1px solid var(--brand);
}
#hero .hero-card::after{
  bottom:10px; right:10px;
  border-bottom:1px solid var(--brand);
  border-right:1px solid var(--brand);
}

/* chip sits above the card with the brand accent edge */
#hero .hero-chip{
  box-shadow:inset 3px 0 0 0 var(--accent);
}

/* stage rail — 5 nodes joined by a hairline link (the vector in miniature) */
#hero .hero-rail{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
}
#hero .hero-rail-node{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 8px;
  border-left:1px solid var(--line);
}
#hero .hero-rail-node:first-child{ border-left:0; }
/* the connecting link between node numbers */
#hero .hero-rail-node::after{
  content:"";
  position:absolute;
  top:18px;
  left:50%;
  width:100%;
  height:1px;
  background:var(--line-strong);
  z-index:0;
}
#hero .hero-rail-node:last-child::after{ display:none; }
#hero .hero-rail-n{
  position:relative;
  z-index:1;
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--brand);
  background:var(--bg);
  padding-right:6px;
}
#hero .hero-rail-node:first-child .hero-rail-n{
  color:#fff;
  background:var(--brand);
  padding:2px 5px;
  letter-spacing:.06em;
}
#hero .hero-rail-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.3;
}

@media (max-width:520px){
  #hero .hero-rail-label{ font-size:9px; }
  #hero .hero-rail-node{ padding:10px 5px; }
}

/* ===== problem ===== */
#problem .problem-head{ max-width:820px; }
#problem .problem-title{ margin-top:14px; }
#problem .problem-lead{ margin-top:18px; max-width:72ch; }

/* contrast layout */
#problem .problem-contrast{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:48px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
#problem .problem-side{
  position:relative;
  padding:28px 24px;
  border-top:1px solid var(--line);
}
#problem .problem-side:first-child{ border-top:0; }
#problem .problem-side__head{ margin-bottom:24px; }
#problem .problem-side__tag{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px 10px;
  margin-bottom:14px;
}
#problem .problem-side__tag--brand{ color:var(--brand); border-color:var(--brand); }
#problem .problem-side__note{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.55;
  color:var(--ink-2);
}
#problem .problem-side--thread .problem-side__note{ color:var(--ink); }

/* broken chain — 5 detached links + breaks */
#problem .problem-chain{
  display:flex;
  flex-direction:column;
  gap:0;
}
#problem .problem-link{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:6px 14px;
  padding:14px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
#problem .problem-link__no{
  grid-row:span 2;
  align-self:start;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-3);
}
#problem .problem-link__svc{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink);
}
#problem .problem-link__leak{
  grid-column:2;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--accent);
}
/* the visible rupture between folders */
#problem .problem-break{
  position:relative;
  height:26px;
  margin-left:18px;
  border-left:2px dashed var(--line-strong);
}
#problem .problem-break::after{
  content:"";
  position:absolute;
  left:-5px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:1px;
  background:var(--accent);
}

/* one object vector — connected nodes on a continuous rail */
#problem .problem-thread{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:22px;
}
#problem .problem-thread::before{
  content:"";
  position:absolute;
  left:6px;
  top:9px;
  bottom:9px;
  width:2px;
  background:var(--brand);
}
#problem .problem-node{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
#problem .problem-node:last-child{ border-bottom:0; }
#problem .problem-node::before{
  content:"";
  position:absolute;
  left:-22px;
  top:18px;
  width:9px;
  height:9px;
  background:var(--brand);
  border:2px solid var(--bg);
  outline:1px solid var(--brand);
  border-radius:0;
}
#problem .problem-node__no{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--brand);
  flex:0 0 auto;
}
#problem .problem-node__svc{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* leak metrics row */
#problem .problem-metrics{
  display:grid;
  grid-template-columns:1fr;
  margin-top:32px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
#problem .problem-metric{
  padding:24px;
  border-top:1px solid var(--line);
}
#problem .problem-metric:first-child{ border-top:0; }
#problem .problem-metric__num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--accent);
}
#problem .problem-metric__cap{
  display:block;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.45;
}
#problem .problem-metric__cap span{ text-transform:none; letter-spacing:.02em; }

/* bridge link to #vector */
#problem .problem-bridge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:36px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--brand);
  border-bottom:1px solid transparent;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
#problem .problem-bridge:hover{ border-bottom-color:var(--brand); }
#problem .problem-bridge svg{ width:18px; height:18px; flex:0 0 auto; }

/* ----- >= 640px ----- */
@media (min-width:640px){
  #problem .problem-metrics{ grid-template-columns:repeat(3,1fr); }
  #problem .problem-metric{ border-top:0; border-left:1px solid var(--line); }
  #problem .problem-metric:first-child{ border-left:0; }
}

/* ----- >= 900px ----- */
@media (min-width:900px){
  #problem .problem-contrast{ grid-template-columns:1fr 1fr; }
  #problem .problem-side{ border-top:0; }
  #problem .problem-side--thread{ border-left:1px solid var(--line); }
}

/* ===== vector ===== */
/* ===== #vector — Object Vector & Branches (scoped) ===== */
#vector{ overflow-x:clip; }
#vector .vx-head{ max-width:760px; }
#vector .vx-head .h2{ margin-top:14px; }
#vector .vx-head .lead{ margin-top:16px; }

/* stage scene */
#vector .vx-stage{ position:relative; margin-top:44px; }

/* macro progress HUD */
#vector .vx-hud{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
#vector .vx-hud__list{ display:flex; gap:6px; }
#vector .vx-hud__step{
  width:34px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:0; background:var(--bg);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3);
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
#vector .vx-hud__step:hover{ border-color:var(--brand); color:var(--brand); }
#vector .vx-hud__step[aria-current="step"]{ border-color:var(--brand); color:#fff; background:var(--brand); }
#vector .vx-stage[data-active] .vx-hud__step.is-done{ color:var(--ink); border-color:var(--line-strong); }
#vector .vx-hud__cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ----- horizontal vector sequence (>=900px only; hidden on mobile) ----- */
#vector .vx-spine-wrap{ display:none; }
#vector .vx-spine{ width:100%; height:120px; }
#vector .vx-ticks line{ stroke:var(--line-strong); stroke-width:1; opacity:.7; }
#vector .vx-rail-base{ stroke:var(--line-strong); stroke-width:1; opacity:.6; }

/* segment blocks: square loci. Default = empty (not yet sequenced). */
#vector .vx-gene rect{
  fill:none; stroke:var(--line-strong); stroke-width:1; opacity:.45;
  transition:fill .3s var(--ease),stroke .3s var(--ease),opacity .3s var(--ease);
}
/* accumulated blocks: filled tint — present but read as already-written code */
#vector .vx-gene.is-done rect{ fill:var(--brand); stroke:var(--brand); opacity:.22; }
/* active block: solid, the gene being appended now */
#vector .vx-gene.is-active rect{ fill:var(--brand); stroke:var(--brand); opacity:.85; }
/* gene 5 (operations) = next gene in development: dashed outline, no fill */
#vector .vx-gene--ops rect{ fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:5 6; opacity:.6; }
#vector .vx-gene--ops.is-active rect{ fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:5 6; opacity:1; }

/* accumulation arrows between nodes: "добавляет →" */
#vector .vx-inherit path{ fill:none; stroke:var(--brand); stroke-width:1.5; stroke-linejoin:round; opacity:.55; }
#vector .vx-inherit .vx-inherit--dir{ stroke:var(--accent); stroke-dasharray:3 4; }
/* light up accumulation arrows that lead into a done/active gene (set by JS) */
#vector .vx-inherit path.is-on{ opacity:1; }

/* running data packet (square glyph) = accumulation traveling along the vector */
#vector .vx-packet{ fill:var(--brand); }

/* ----- stage cards (segment blocks, expanded) ----- */
#vector .vx-stages{ display:grid; gap:16px; margin-top:8px; }
#vector .vx-stagecard{
  position:relative; padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
/* mobile vertical vector strand: rail down the left edge + square node node */
#vector .vx-stagecard::before{
  content:""; position:absolute; left:-1px; top:0; bottom:-16px; width:2px; background:var(--line-strong); opacity:.5;
}
#vector .vx-stages > li:last-child .vx-stagecard::before,
#vector .vx-stagecard--ops::before{ bottom:0; }
#vector .vx-stagecard::after{
  content:""; position:absolute; left:-6px; top:24px; width:10px; height:10px;
  background:var(--bg); border:1.5px solid var(--line-strong); border-radius:0;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
/* accumulated segment block: subtly tinted background (already-written code shows through) */
#vector .vx-stagecard.is-done{ background:color-mix(in srgb, var(--brand) 5%, var(--bg)); }
#vector .vx-stagecard.is-done::after{ background:var(--brand); border-color:var(--brand); }
#vector .vx-stagecard.is-active{ border-color:var(--brand); box-shadow:inset 2px 0 0 0 var(--accent); }
#vector .vx-stagecard.is-active::after{ background:var(--brand); border-color:var(--brand); }
/* operations card: next gene in development — dashed strand marker */
#vector .vx-stagecard--ops::before{ background:repeating-linear-gradient(180deg,var(--line-strong) 0 4px,transparent 4px 9px); opacity:.7; }
#vector .vx-stagecard--ops::after{ border-style:dashed; border-color:var(--accent); }
#vector .vx-stagecard--ops.is-active{ box-shadow:inset 2px 0 0 0 var(--accent); }
#vector .vx-stagecard--ops.is-active::after{ background:var(--bg); border-color:var(--accent); }

#vector .vx-stagecard__top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#vector .vx-idx{ font-family:var(--font-mono); font-weight:600; font-size:13px; letter-spacing:.1em; color:var(--brand); }
#vector .vx-code{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:4px 7px;
}
#vector .vx-code--dir{ color:var(--accent); border-color:var(--accent); border-style:dashed; }
#vector .vx-stagecard .h3{ margin-bottom:8px; }
#vector .vx-num{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ink); margin-bottom:10px;
}
#vector .vx-num span{ display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
#vector .vx-feed{ font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--ink-2); margin-bottom:14px; }
#vector .vx-feed__k{ color:var(--brand); }
#vector .vx-feed--dir .vx-feed__k{ color:var(--accent); }

/* artifact glyph */
#vector .vx-art{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  padding:8px 10px; border:1px solid var(--line); background:var(--bg-soft);
}
#vector .vx-art__svg{ width:54px; height:34px; color:var(--brand); }
#vector .vx-art__cloud circle{ fill:currentColor; opacity:.75; }
#vector .vx-art__mesh path,#vector .vx-art__agr rect,#vector .vx-art__build rect,
#vector .vx-art__build path,#vector .vx-art__ops rect{ fill:none; stroke:currentColor; stroke-width:1.4; }
#vector .vx-art__delta{ stroke:var(--accent); stroke-width:2; }
#vector .vx-art__ops .vx-art__pulse{ fill:var(--accent); stroke:none; animation:vxPulse 2.4s var(--ease) infinite; }
#vector .vx-art__cap{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* leaves (branches = applications) */
#vector .vx-leaves{ display:flex; flex-wrap:wrap; gap:8px; }
#vector .vx-leaf{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line); background:var(--bg); padding:7px 10px;
  transition:border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
}
#vector .vx-leaf:hover,#vector .vx-leaf:focus-visible{ border-color:var(--brand); color:var(--brand); box-shadow:inset 2px 0 0 0 var(--accent); }

/* detached eCommerce line — dashed, off the vector */
#vector .vx-detached{
  margin-top:20px; padding:16px 18px;
  border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--bg);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
#vector .vx-detached__tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px dashed var(--line-strong); padding:5px 9px;
}
#vector .vx-leaf--detached{
  border-style:dashed; text-transform:none; letter-spacing:.02em; color:var(--ink-2);
}
#vector .vx-leaf--detached:hover{ color:var(--ink); border-color:var(--ink-3); box-shadow:none; }

#vector .vx-cta{ margin-top:36px; }

/* idle traveling-highlight packet — accumulation flowing along the vector */
@keyframes vxPacket{ 0%{ transform:translateX(0); opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ transform:translateX(900px); opacity:0; } }
@keyframes vxPulse{ 0%,100%{ opacity:.35; transform:none; } 50%{ opacity:1; } }

/* ===== >= 640px: leaves breathe, cards a touch wider ===== */
@media (min-width:640px){
  #vector .vx-stagecard{ padding:24px 24px 22px; }
}

/* ===== >= 900px: horizontal full-width vector + 5-up stage grid ===== */
@media (min-width:900px){
  #vector .vx-spine-wrap{ display:block; margin:8px 0 26px; }
  /* horizontal vector: drop the vertical mobile strand decorations */
  #vector .vx-stagecard::before,
  #vector .vx-stagecard::after{ display:none; }

  #vector .vx-stages{ grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); }
  #vector .vx-stagecard{ border:0; border-left:1px solid var(--line); border-radius:0; }
  #vector .vx-stages > li:first-child .vx-stagecard{ border-left:0; }
  #vector .vx-stagecard.is-active{ box-shadow:inset 0 2px 0 0 var(--brand); }
  #vector .vx-stagecard--ops.is-active{ box-shadow:inset 0 2px 0 0 var(--accent); }
  /* compress leaves to a tidy column inside narrow columns */
  #vector .vx-leaves{ flex-direction:column; align-items:flex-start; gap:6px; }
  #vector .vx-leaf{ width:100%; }

  /* drive packet by idle animation when JS hasn't kicked in */
  #vector .vx-stage:not([data-js]) .vx-packet{ animation:vxPacket 7s linear infinite; }
}

/* ===== >= 1200px: more air ===== */
@media (min-width:1200px){
  #vector .vx-stagecard{ padding:26px 22px 24px; }
}

/* ===== reduced motion / no-JS: everything static, fully drawn, no movement ===== */
@media (prefers-reduced-motion:reduce){
  #vector .vx-packet,#vector .vx-art__pulse{ animation:none; display:none; }
}
/* no-JS fallback: show the full accumulated vector (all segments written, ops dashed) */
#vector .vx-stage:not([data-js]) .vx-gene:not(.vx-gene--ops) rect{ fill:var(--brand); stroke:var(--brand); opacity:.55; }
#vector .vx-stage:not([data-js]) .vx-inherit path{ opacity:1; }

/* ===== agr ===== */
/* === #agr — dark accent band, Swiss-technical / blueprint === */
#agr{
  --agr-ink:#FFFFFF;
  --agr-ink-2:#A7B1C6;
  --agr-ink-3:#6E7892;
  --agr-line:rgba(255,255,255,0.14);
  --agr-line-2:rgba(255,255,255,0.28);
  --agr-surface:#0E141F;
  position:relative;
  background:#0A0E16;
  color:var(--agr-ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* faint blueprint grid on dark */
#agr::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
}
#agr .container{ position:relative; z-index:1; }
#agr .agr-shell{ position:relative; }

/* override global ink for headings/lead inside dark band */
#agr .h2,#agr .h3{ color:var(--agr-ink); }
#agr .lead{ color:var(--agr-ink-2); }
#agr .eyebrow{ color:var(--agr-ink-2); }
#agr .eyebrow .dot{ background:var(--accent); }

/* top: title + deadline marker */
#agr .agr-top{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
}
#agr .agr-h2{ margin-top:14px; }
#agr .agr-lead{ margin-top:18px; max-width:60ch; }

#agr .agr-deadline{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  border:1px solid var(--agr-line-2);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-lg);
  background:var(--agr-surface);
}
#agr .agr-dl-tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
#agr .agr-dl-date{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,38px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--agr-ink);
}
#agr .agr-dl-state{
  font-size:14px;
  line-height:1.45;
  color:var(--agr-ink-2);
}
#agr .agr-dl-src{
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--agr-ink-3);
  line-height:1.4;
}

/* 1 model -> 3 representations mechanic */
#agr .agr-deriv{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:44px;
  border:1px solid var(--agr-line);
  border-radius:var(--radius-lg);
  background:var(--agr-surface);
}
#agr .agr-deriv-src,
#agr .agr-deriv-out{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 22px;
}
#agr .agr-deriv-out{ text-align:right; align-items:flex-end; }
#agr .agr-deriv-num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--brand-2);
}
#agr .agr-deriv-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.15;
  color:var(--agr-ink);
}
#agr .agr-deriv-arrow{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 24px;
  border-left:1px solid var(--agr-line);
  border-right:1px solid var(--agr-line);
  color:var(--brand-2);
}
#agr .agr-deriv-arrow svg{ width:56px; height:20px; }
#agr .agr-deriv-cap{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--agr-ink-3);
  white-space:nowrap;
}

/* package modules */
#agr .agr-modules{ margin-top:24px; }
#agr .agr-mod{
  background:var(--agr-surface);
  border-color:var(--agr-line);
  padding:24px 22px;
  gap:0;
}
#agr .agr-mod:hover{
  border-color:var(--brand-2);
  box-shadow:inset 2px 0 0 0 var(--accent);
}
#agr .agr-mod--key{
  border-color:var(--agr-line-2);
  box-shadow:inset 2px 0 0 0 var(--brand);
}
#agr .agr-mod--key:hover{
  border-color:var(--brand);
  box-shadow:inset 2px 0 0 0 var(--brand);
}
#agr .agr-mod-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
#agr .agr-mod-ix{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--agr-ink-3);
}
#agr .agr-mod-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--agr-line-2);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  color:var(--brand-2);
}
#agr .agr-mod--key .agr-mod-badge{ color:#fff; background:var(--brand); border-color:var(--brand); }
#agr .agr-mod-badge svg{ width:22px; height:22px; }
#agr .agr-mod-title{ margin-bottom:10px; }
#agr .agr-mod-text{
  color:var(--agr-ink-2);
  font-size:14px;
  line-height:1.5;
  margin-bottom:18px;
}
#agr .agr-spec{
  display:grid;
  gap:0;
  margin-top:auto;
  border-top:1px solid var(--agr-line);
}
#agr .agr-spec li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--agr-line);
}
#agr .agr-spec li:last-child{ border-bottom:0; }
#agr .agr-spec-k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--agr-ink-3);
}
#agr .agr-spec-v{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--agr-ink);
  text-align:right;
}

/* footer note + CTA */
#agr .agr-foot{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--agr-line);
}
#agr .agr-foot-note{
  color:var(--agr-ink-2);
  font-size:14px;
  line-height:1.55;
  max-width:60ch;
}
#agr .agr-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
/* ghost button readable on dark */
#agr .btn-ghost{
  color:var(--agr-ink);
  --b:var(--agr-line-2);
}
#agr .btn-ghost:hover{
  --b:var(--brand-2);
  border-color:var(--brand-2);
  color:var(--brand-2);
  box-shadow:inset 0 0 0 2px var(--brand-2);
}

/* ===== responsive ===== */
@media (min-width:900px){
  #agr .agr-top{
    grid-template-columns:1.5fr .9fr;
    gap:48px;
  }
  #agr .agr-deadline{ margin-top:38px; }
  #agr .agr-foot{
    grid-template-columns:1.4fr auto;
    gap:40px;
  }
  #agr .agr-actions{ justify-content:flex-end; }
}

@media (max-width:719.98px){
  #agr .agr-deriv{ flex-direction:column; }
  #agr .agr-deriv-out{ text-align:left; align-items:flex-start; }
  #agr .agr-deriv-arrow{
    flex-direction:row;
    border-left:0;
    border-right:0;
    border-top:1px solid var(--agr-line);
    border-bottom:1px solid var(--agr-line);
    padding:12px 22px;
    justify-content:flex-start;
  }
  #agr .agr-deriv-arrow svg{ transform:rotate(90deg); width:24px; }
}

@media (max-width:520px){
  #agr .agr-actions .btn{ width:100%; }
}

/* ===== economics ===== */
#economics .eco-compare{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:clamp(28px,4vw,44px) 0}
@media(min-width:760px){#economics .eco-compare{grid-template-columns:1fr 1fr}}
#economics .eco-col{background:var(--bg-2);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:16px}
#economics .eco-col--good{background:var(--bg-soft)}
#economics .eco-col-head{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
#economics .eco-pays{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
#economics .eco-pays li{background:var(--bg-2);display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:.95rem;color:var(--ink-2)}
#economics .eco-pays--good li{background:#fff}
#economics .eco-pay-n{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.72rem;color:var(--ink-3);min-width:42px}
#economics .eco-pay-x{margin-left:auto;color:#c23d24;font-weight:700}
#economics .eco-pay-check{margin-left:auto;color:var(--brand);font-weight:700}
#economics .eco-col-foot{font-size:.85rem;color:var(--ink-3);margin-top:auto}
#economics .eco-col-foot--good{color:var(--brand)}
#economics .eco-stats{margin-top:8px}
#economics .eco-stat-val{font-family:var(--font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1}
#economics .eco-stat-cap{margin-top:10px;color:var(--ink-2);font-size:.95rem;line-height:1.5}
#economics .eco-stat-cap .tag{margin-top:8px}

/* ===== operations ===== */
#operations .ops-head{ max-width:820px; }
#operations .ops-title{ text-wrap:balance; }

/* product surfaces */
#operations .ops-screen{ padding:0; overflow:hidden; }
#operations .ops-screen-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
#operations .ops-screen-media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
#operations .ops-screen:hover .ops-screen-media img{ transform:scale(1.03); }
#operations .ops-screen-tag{
  position:absolute;
  top:12px;
  left:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  padding:6px 10px;
}
#operations .ops-screen-body{ padding:22px 22px 26px; }
#operations .ops-screen-text{ color:var(--ink-2); font-size:15px; }

/* live metrics */
#operations .ops-metrics{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
#operations .ops-metrics-cap{
  margin:0;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--bg-soft);
}
#operations .ops-metrics-row{
  display:grid;
  grid-template-columns:1fr;
}
#operations .ops-metric{
  padding:26px 24px;
  border-top:1px solid var(--line);
}
#operations .ops-metric:first-child{ border-top:0; }
#operations .ops-metric-num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--brand);
}
#operations .ops-metric-label{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.4;
}

/* shared section sub-label */
#operations .ops-sub{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0;
}

/* operational layer modules */
#operations .ops-mod-list{ display:grid; gap:0; }
#operations .ops-mod{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
}
#operations .ops-mod:first-child{ border-top:0; }
#operations .ops-mod-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  color:var(--brand);
}
#operations .ops-mod-ico svg{ width:20px; height:20px; }
#operations .ops-mod-title{
  display:block;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
#operations .ops-mod-text{
  display:block;
  margin-top:4px;
  color:var(--ink-2);
  font-size:14px;
}

/* integrations */
#operations .ops-int-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#operations .ops-thread-note{
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--ink-3);
}

/* verticals */
#operations .ops-vert{ gap:4px; }
#operations .ops-vert-stage{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--brand);
  margin-bottom:10px;
}
#operations .ops-vert-title{ font-size:clamp(16px,1.4vw,19px); }
#operations .ops-vert-text{ color:var(--ink-2); font-size:14px; }

/* actions */
#operations .ops-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* responsive */
@media (min-width:640px){
  #operations .ops-metrics-row{ grid-template-columns:repeat(2,1fr); }
  #operations .ops-metric{ border-top:0; border-left:1px solid var(--line); }
  #operations .ops-metric:nth-child(odd){ border-left:0; }
  #operations .ops-metric:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (min-width:900px){
  #operations .ops-layer{ grid-template-columns:1.15fr .85fr; align-items:start; }
  #operations .ops-metrics-row{ grid-template-columns:repeat(4,1fr); }
  #operations .ops-metric{ border-top:0; border-left:1px solid var(--line); }
  #operations .ops-metric:first-child{ border-left:0; }
  #operations .ops-metric:nth-child(n+3){ border-top:0; }
}
@media (max-width:520px){
  #operations .ops-actions .btn{ width:100%; }
}

/* ===== portfolio ===== */
#portfolio .pf-head{ max-width:780px; }
#portfolio .pf-title{ margin-top:14px; }
#portfolio .pf-lead{ margin-top:18px; }

/* tabs row — left aligned to match section head (override centered global) */
#portfolio .pf-tabs{ justify-content:flex-start; margin-top:34px; padding-bottom:24px; border-bottom:1px solid var(--line); }

/* showcase grid */
#portfolio .pf-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin-top:32px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
#portfolio .pf-card{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  transition:box-shadow .18s var(--ease);
}
#portfolio .pf-card:hover{ box-shadow:inset 2px 0 0 0 var(--accent); position:relative; z-index:1; }
#portfolio .pf-card.is-hidden{ display:none; }

/* media + stage marker */
#portfolio .pf-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
#portfolio .pf-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
#portfolio .pf-card:hover .pf-media img{ transform:scale(1.03); }
#portfolio .pf-stage{
  position:absolute;
  top:0; left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  background:var(--brand);
  border-bottom-right-radius:var(--radius-lg);
}

/* body */
#portfolio .pf-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px 22px 26px;
  flex:1 1 auto;
}
#portfolio .pf-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0;
}
#portfolio .pf-name{ margin:0; }
#portfolio .pf-desc{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.55;
  margin:0;
}
#portfolio .pf-niche{
  margin:6px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink-2);
  margin-top:auto;
}
#portfolio .pf-niche span{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-right:8px;
}

/* AGR package — modules row */
#portfolio .pf-modules{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 2px;
}
#portfolio .pf-modules .tag{ padding:7px 10px; }
#portfolio .pf-tag--hot{
  color:var(--accent);
  border-color:var(--accent);
}

/* eCommerce — separate line panel */
#portfolio .pf-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-top:24px;
  padding:26px 24px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
#portfolio .pf-aside-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--brand);
  flex:0 0 auto;
}
#portfolio .pf-aside-mark svg{ width:22px; height:22px; }
#portfolio .pf-aside-body{ flex:1 1 auto; max-width:760px; display:flex; flex-direction:column; gap:8px; }
#portfolio .pf-kicker--aside{ color:var(--ink-3); }
#portfolio .pf-aside-body .pf-desc{ font-size:15px; }
#portfolio .pf-aside-cta{ flex:0 0 auto; }

/* footer cta */
#portfolio .pf-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 24px;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
#portfolio .pf-foot-note{
  font-size:14px;
  margin:0;
  max-width:48ch;
}

/* ---- >= 640px ---- */
@media (min-width:640px){
  #portfolio .pf-grid{ grid-template-columns:repeat(2,1fr); }
  #portfolio .pf-aside{
    flex-direction:row;
    align-items:center;
  }
}

/* ---- >= 900px ---- */
@media (min-width:900px){
  #portfolio .pf-grid{ grid-template-columns:repeat(3,1fr); }
  /* AGR package spans wide for prominence as the conversion sub-product */
  #portfolio .pf-card--wide{ grid-column:span 1; }
}

/* ---- >= 1100px ---- */
@media (min-width:1100px){
  #portfolio .pf-card--wide{ grid-column:span 1; }
}

/* ===== proof ===== */
#proof .proof-head{ max-width:760px; }
#proof .proof-title{ margin-top:14px; }
#proof .proof-lead{ margin-top:18px; }

/* honesty note — square hairline box, brand left rule */
#proof .proof-note{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:32px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
#proof .proof-note__mark{
  display:inline-flex;
  flex:0 0 auto;
  color:var(--brand);
  margin-top:1px;
}
#proof .proof-note__mark svg{ width:22px; height:22px; }
#proof .proof-note__text{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-2);
}

/* filter tabs */
#proof .proof-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:36px;
}

/* case grid */
#proof .proof-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gutter);
  margin-top:28px;
}
#proof .proof-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  overflow:hidden;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
#proof .proof-card:hover{
  border-color:var(--brand);
  box-shadow:inset 2px 0 0 0 var(--accent);
}
#proof .proof-card.is-hidden{ display:none; }

#proof .proof-cover{
  position:relative;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
#proof .proof-cover img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
#proof .proof-card:hover .proof-cover img{ transform:scale(1.03); }
#proof .proof-type{
  position:absolute;
  top:12px;
  left:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  padding:6px 10px;
}

#proof .proof-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px 22px 24px;
  flex:1;
}

/* stage markers 1–5 — square mono chips, on = brand */
#proof .proof-stages{
  display:flex;
  gap:6px;
}
#proof .proof-stage{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  line-height:1;
}
#proof .proof-stage.is-on{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
}

#proof .proof-card-title{ margin-top:2px; }
#proof .proof-card-text{
  color:var(--ink-2);
  font-size:15px;
  line-height:1.55;
}
#proof .proof-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .15s var(--ease);
}
#proof .proof-hint svg{ width:15px; height:15px; flex:0 0 auto; }
#proof .proof-card:hover .proof-hint{ color:var(--brand); }

/* stage-1 proof: 4D tours */
#proof .proof-tours{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
  margin-top:var(--gutter);
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
}
#proof .proof-tours__title{ margin-top:14px; }
#proof .proof-tours__text{
  margin-top:14px;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.6;
  max-width:54ch;
}
#proof .proof-tours__media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
#proof .proof-tours__media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
#proof .proof-tours__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  border:1px solid var(--brand);
  border-radius:var(--radius);
  color:var(--brand);
}
#proof .proof-tours__play svg{ width:26px; height:26px; }
#proof .proof-tours__tag{
  position:absolute;
  top:12px;
  left:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  padding:5px 9px;
}

#proof .proof-cta{ margin-top:36px; }

/* responsive */
@media (min-width:640px){
  #proof .proof-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  #proof .proof-grid{ grid-template-columns:repeat(3,1fr); }
  #proof .proof-tours{ grid-template-columns:1.05fr .95fr; gap:48px; }
  #proof .proof-tours__head{ order:1; }
  #proof .proof-tours__media{ order:2; }
}

/* ===== moat ===== */
#moat .moat-head{ max-width:880px; }

/* ===== segments ===== */
#segments .seg-head{ max-width:820px; }
#segments .seg-title{ margin-top:14px; }
#segments .seg-lead{ margin-top:18px; }

/* stage rail under the heading */
#segments .seg-rail{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
#segments .seg-rail__node{
  flex:1 1 0;
  min-width:96px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-left:1px solid var(--line);
  position:relative;
}
#segments .seg-rail__node:first-child{ border-left:0; }
#segments .seg-rail__node::before{
  content:"";
  position:absolute;
  left:16px;
  top:21px;
  width:7px;
  height:7px;
  background:var(--brand);
  border-radius:0;
}
#segments .seg-rail__num{
  padding-left:16px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--brand);
}
#segments .seg-rail__lbl{
  padding-left:16px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* card grid */
#segments .seg-grid{ grid-template-columns:1fr; }

#segments .seg-card{
  padding:26px 24px;
  gap:0;
}
#segments .seg-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
#segments .seg-flag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
#segments .seg-card[data-priority="p0"] .seg-flag{ color:var(--brand); }

#segments .seg-stage{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  flex:0 0 auto;
}
#segments .seg-stage__cap{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}
#segments .seg-stage__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--brand);
}

#segments .seg-card__title{ margin-top:18px; }
#segments .seg-card__job{
  margin-top:12px;
  font-weight:500;
  color:var(--ink);
}
#segments .seg-card__pain{
  margin-top:12px;
  font-size:15px;
  color:var(--ink-2);
}
#segments .seg-card__pain em{ font-style:normal; color:var(--ink-3); }

#segments .seg-card__hook{
  position:relative;
  margin-top:16px;
  padding:14px 16px 14px 18px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:15px;
  color:var(--ink);
}
#segments .seg-card__hook-mark{
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--accent);
}
#segments .seg-card__hook strong{ color:var(--brand); font-weight:600; }
#segments .seg-card__hook em{ font-style:normal; color:var(--ink-3); }

#segments .seg-card__foot{
  margin-top:auto;
  padding-top:18px;
}
#segments .seg-card__hook + .seg-card__foot{ margin-top:20px; }
#segments .seg-route{
  display:block;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--ink-3);
}
#segments .seg-pick{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand);
  border-bottom:1px solid transparent;
  transition:border-color .15s var(--ease),gap .15s var(--ease);
}
#segments .seg-pick svg{ width:16px; height:16px; flex:0 0 auto; }
#segments .seg-pick:hover{ border-bottom-color:var(--brand); gap:12px; }

/* closing note card */
#segments .seg-card--note{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 26px;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius-lg);
}
#segments .seg-note__num{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:600;
  line-height:1;
  color:var(--brand-2);
}
#segments .seg-note__title{
  margin-top:18px;
  color:#fff;
}
#segments .seg-note__text{
  margin-top:14px;
  font-size:15px;
  color:rgba(255,255,255,.74);
}
#segments .seg-note__cta{ margin-top:24px; align-self:flex-start; }

/* >= 640px : 2 cols */
@media (min-width:640px){
  #segments .seg-grid{ grid-template-columns:repeat(2,1fr); }
}
/* >= 1080px : 3 cols */
@media (min-width:1080px){
  #segments .seg-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  #segments .seg-rail__node{ flex:1 1 50%; }
  #segments .seg-note__cta{ width:100%; align-self:stretch; }
}

/* ===== tech-trust ===== */
#tech-trust .tt-head{ max-width:820px; }
#tech-trust .tt-title{ margin-top:14px; }

/* ---- Ribbons: stack + normatives ---- */
#tech-trust .tt-ribbons{
  display:grid;
  gap:var(--gutter);
  grid-template-columns:1fr;
}
#tech-trust .tt-ribbon{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  padding:24px 22px;
}
#tech-trust .tt-ribbon__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
#tech-trust .tt-ribbon__no{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--brand);
  border:1px solid var(--line);
  padding:4px 8px;
  line-height:1;
}
#tech-trust .tt-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#tech-trust .tt-tags .tag{
  padding:9px 12px;
  cursor:default;
}

/* ---- Open data / no lock-in pledge ---- */
#tech-trust .tt-open{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--brand);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  padding:28px 26px;
}
#tech-trust .tt-open__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--brand);
}
#tech-trust .tt-open__mark svg{ width:26px; height:26px; }
#tech-trust .tt-open__text{
  color:var(--ink-2);
  max-width:78ch;
}

/* ---- AI along the vector ---- */
#tech-trust .tt-ai{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  padding:24px 22px;
}
#tech-trust .tt-ai__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:16px;
  margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
#tech-trust .tt-ai__no{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--brand);
  border:1px solid var(--line);
  padding:4px 8px;
  line-height:1;
}
#tech-trust .tt-ai__list{
  display:grid;
  gap:0;
}
#tech-trust .tt-ai__row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 16px;
  align-items:baseline;
  padding:16px 0;
  border-top:1px solid var(--line);
}
#tech-trust .tt-ai__row:first-child{ border-top:0; }
#tech-trust .tt-ai__stage{
  grid-row:span 2;
  align-self:start;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--brand);
}
#tech-trust .tt-ai__label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink);
}
#tech-trust .tt-ai__role{
  color:var(--ink-2);
  font-size:14px;
  line-height:1.5;
}

/* ---- Knowledge base ---- */
#tech-trust .tt-kb{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gutter);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  padding:28px 24px;
}
#tech-trust .tt-kb__intro{ align-self:start; }
#tech-trust .tt-kb__text{ color:var(--ink-2); max-width:48ch; }
#tech-trust .tt-kb__list{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
#tech-trust .tt-kb__item a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  transition:color .15s var(--ease);
}
#tech-trust .tt-kb__item:last-child a{ border-bottom:0; }
#tech-trust .tt-kb__item a:hover{ color:var(--brand); }
#tech-trust .tt-kb__art{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  border:1px solid var(--line);
  padding:4px 7px;
  line-height:1;
}
#tech-trust .tt-kb__item a:hover .tt-kb__art{ border-color:var(--brand); color:var(--brand); }
#tech-trust .tt-kb__name{
  font-weight:500;
  font-size:15px;
  line-height:1.4;
}

/* ---- Responsive ---- */
@media (min-width:640px){
  #tech-trust .tt-open{
    grid-template-columns:auto 1fr;
    gap:24px;
  }
}
@media (min-width:900px){
  #tech-trust .tt-ribbons{ grid-template-columns:1fr 1fr; }
  #tech-trust .tt-ai__row{
    grid-template-columns:auto 0.9fr 1.6fr;
    align-items:baseline;
  }
  #tech-trust .tt-ai__stage{ grid-row:auto; }
  #tech-trust .tt-kb{ grid-template-columns:.9fr 1.1fr; gap:48px; }
}

/* ===== contact ===== */
#contact .ct-head{ max-width:760px; }
#contact .ct-title{ margin-top:14px; }
#contact .ct-lead{ margin-top:18px; }

#contact .ct-band{ margin-top:44px; }

#contact .ct-intro-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

#contact .contact-list{ margin-top:24px; }

#contact .ct-note{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
#contact .ct-note-text{
  margin:0;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.55;
}
#contact .ct-tg-btn{ margin-top:16px; }

/* form: full-width submit + status to mirror the bordered, square layout */
#contact .contact-form .btn-primary{ justify-self:stretch; width:100%; }
#contact .form-status{ margin-top:2px; }

@media (min-width:520px){
  #contact .ct-tg-btn{ width:auto; }
}

/* ===== site-footer ===== */
#site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding-block:clamp(40px,5vw,64px) 28px;
  position:relative;
}
/* faint blueprint top-rule accent (square-technical) */
#site-footer::before{
  content:"";
  position:absolute;
  left:0; top:-1px;
  width:64px; height:2px;
  background:var(--brand);
}

#site-footer .foot-top{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}

#site-footer .foot-wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
}
#site-footer .foot-tagline{
  margin-top:12px;
  color:var(--ink-2);
  max-width:38ch;
  font-size:15px;
}
#site-footer .foot-region{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* eCommerce-3D — separate line, bordered square chip */
#site-footer .foot-ecom{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
#site-footer .foot-ecom:hover{
  border-color:var(--brand);
  box-shadow:inset 2px 0 0 0 var(--accent);
}
#site-footer .foot-ecom__lbl{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand);
}
#site-footer .foot-ecom__txt{
  font-size:13px;
  color:var(--ink-2);
}
#site-footer .foot-ecom__arrow{
  width:16px; height:16px;
  flex:0 0 auto;
  color:var(--ink-3);
  transition:transform .18s var(--ease),color .18s var(--ease);
}
#site-footer .foot-ecom:hover .foot-ecom__arrow{
  transform:translateX(3px);
  color:var(--brand);
}

/* columns */
#site-footer .foot-cols{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px 24px;
}
#site-footer .foot-h{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
#site-footer .foot-col ul{ display:grid; gap:10px; }
#site-footer .foot-col a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.4;
  transition:color .15s var(--ease);
}
#site-footer .foot-col a:hover{ color:var(--brand); }
#site-footer .foot-ico{ width:16px; height:16px; flex:0 0 auto; }
#site-footer .foot-col--contacts a{ font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; }

/* bottom line */
#site-footer .foot-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
#site-footer .foot-copy{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
#site-footer .foot-site{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color .15s var(--ease);
}
#site-footer .foot-site:hover{ color:var(--brand); }

/* ----- >= 640px ----- */
@media (min-width:640px){
  #site-footer .foot-cols{ grid-template-columns:repeat(4,1fr); }
}

/* ----- >= 900px ----- */
@media (min-width:900px){
  #site-footer .foot-top{ grid-template-columns:1.1fr 2fr; gap:56px; }
}