/* ============================================================
   BIS MEDIA · Building International Systems
   Shared stylesheet
   Design: matte-black editorial enterprise · neon-green signal
   ============================================================ */

:root{
  /* ---- Brand ---- */
  --green:        #A6FF00;   /* signature / primary signal */
  --green-2:      #7CFF1E;   /* secondary accent */
  --glow:         #3FBF2A;   /* glow / halo only */
  --black:        #0B0B0B;   /* matte black */
  --white:        #F7F7F7;   /* soft white */

  /* ---- Derived dark system ---- */
  --ink:          #0B0B0B;   /* page background */
  --surface:      #111111;   /* raised panel */
  --surface-2:    #171717;   /* deeper panel */
  --surface-3:    #1e1e1e;   /* hover panel */
  --line:         rgba(247,247,247,.11);
  --line-2:       rgba(247,247,247,.20);
  --text:         #F7F7F7;
  --text-2:       #c9c9c9;   /* softened body */
  --muted:        #8c8c8c;   /* secondary text */
  --muted-2:      #6a6a6a;   /* tertiary / captions */

  /* ---- Type ---- */
  --display: "Bebas Neue", "Oswald", Impact, system-ui, sans-serif;
  --sans:    "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Metrics ---- */
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 4px;
  --radius-lg: 8px;
  --t-fast: 180ms cubic-bezier(.2,.6,.2,1);
  --t-med:  340ms cubic-bezier(.2,.6,.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* ---- A11y ---- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--green); color:var(--black);
  padding:12px 16px; z-index:9999; font-weight:700;
}
.skip-link:focus{ left:8px; top:8px; outline:2px solid var(--green); outline-offset:2px; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Layout ---- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
section{ padding-block: clamp(72px, 9vw, 128px); position:relative; }
hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ============================================================
   Display type helpers  (Bebas Neue = all-caps condensed)
   ============================================================ */
.display{
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .012em; line-height: .92;
}
.h-green{ color: var(--green); }
.text-glow{ text-shadow: 0 0 32px rgba(166,255,0,.35); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,11,11,.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{
  display:inline-flex; align-items:center; gap:11px;
  font-family: var(--display); font-weight:400; font-size: 26px;
  letter-spacing:.03em; color: var(--text); line-height:1;
}
.brand .mark{
  width:13px; height:13px; background:var(--green); border-radius:2px;
  box-shadow: 0 0 14px rgba(166,255,0,.6);
  display:inline-block; flex:none;
}
.brand small{
  font-family: var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  align-self:center; display:none;
}
@media (min-width: 1000px){ .brand small{ display:inline; } }
.nav-links{ display:flex; gap:34px; list-style:none; padding:0; margin:0; }
.nav-links a{
  font-size: 13.5px; font-weight:500; color:var(--text-2);
  padding: 8px 2px; position:relative; transition: color var(--t-fast);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--green); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px;
  height:1.5px; background:var(--green); transform:scaleX(0); transform-origin:left;
  transition: transform var(--t-med);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--green); color:var(--black);
  padding: 10px 18px; border-radius: var(--radius);
  font-size: 13.5px; font-weight:700;
  transition: box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.nav-cta:hover{ box-shadow: 0 0 24px rgba(166,255,0,.5); }
.nav-cta:active{ transform: translateY(1px); }
.nav-cta .arrow{ transition: transform var(--t-fast); }
.nav-cta:hover .arrow{ transform: translateX(3px); }
.hamburger{ display:none; background:none; border:0; padding:8px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition: transform var(--t-fast); }
@media (max-width: 900px){
  .nav-links, .nav-cta{ display:none; }
  .hamburger{ display:block; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:70px; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding: 12px var(--gutter) 24px;
  }
  .nav-links.open li{ border-bottom:1px solid var(--line); }
  .nav-links.open a{ display:block; padding:18px 0; font-size:18px; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700; letter-spacing:.01em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  border: 1px solid transparent;
}
.btn-primary{ background: var(--green); color: var(--black); }
.btn-primary:hover{ box-shadow: 0 0 28px rgba(166,255,0,.5); }
.btn-primary:active{ transform: translateY(1px); }
.btn-secondary{ background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover{ border-color: var(--green); color: var(--green); }
.btn-ghost{ background: transparent; color: var(--text-2); padding-inline:0; }
.btn-ghost:hover{ color: var(--green); }
.btn .arrow{ transition: transform var(--t-fast); }
.btn:hover .arrow{ transform: translateX(3px); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   Section heads
   ============================================================ */
.section-head{
  display:grid; grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 760px){ .section-head{ grid-template-columns: 1fr; align-items: start; gap:20px; } }
.section-num{
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.section-num span{ color: var(--green); margin-right: 10px; }
.section-title{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: .96;
  letter-spacing: .008em; text-transform:uppercase;
  margin: 0; color: var(--text);
}
.section-title em{ font-style: normal; color: var(--green); }
.section-intro{ font-size: clamp(16px,1.2vw,18px); color: var(--text-2); max-width: 56ch; margin: 20px 0 0; }

/* Eyebrow */
.eyebrow{
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 24px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--green); flex:none; }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero{
  position: relative; overflow: hidden;
  padding-block: clamp(80px, 12vw, 160px) clamp(64px, 9vw, 120px);
  border-bottom: 1px solid var(--line);
}
.hero::before{  /* soft green glow */
  content:""; position:absolute; z-index:0;
  top:-30%; left:50%; transform:translateX(-50%);
  width: min(1100px, 120vw); height: 720px;
  background: radial-gradient(ellipse at center, rgba(63,191,42,.20), rgba(166,255,0,.06) 40%, transparent 70%);
  filter: blur(20px); pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-eyebrow{
  font-family: var(--mono); font-size: 12.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--green);
  display:inline-flex; align-items:center; gap:12px; margin-bottom: 30px;
}
.hero-eyebrow::before{ content:""; width:30px; height:1.5px; background:var(--green); }
.hero h1{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(52px, 9vw, 132px); line-height: .9; letter-spacing:.008em;
  margin: 0 0 30px; max-width: 16ch; color: var(--text);
}
.hero h1 em{ font-style:normal; color: var(--green); text-shadow: 0 0 40px rgba(166,255,0,.4); }
.hero .lede{
  font-size: clamp(17px, 1.5vw, 21px); color: var(--text-2);
  max-width: 60ch; margin: 0 0 38px; line-height: 1.6;
}
.hero .btn-row{ margin-bottom: 8px; }

/* Trust row under hero */
.trust-row{
  display:flex; flex-wrap:wrap; gap: 14px 40px; align-items:center;
  margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line);
}
.trust-row .label{
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted-2);
}
.trust-row .items{ display:flex; flex-wrap:wrap; gap: 12px 28px; }
.trust-row .items span{ font-size: 14px; color: var(--text-2); font-weight:500; }

/* ============================================================
   Division / interior page hero
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden;
  padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; top:-40%; right:-10%;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(63,191,42,.16), transparent 65%);
  filter: blur(30px); pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(46px, 7vw, 96px); line-height:.92; letter-spacing:.008em;
  margin: 0 0 24px; max-width: 20ch;
}
.page-hero h1 em{ font-style:normal; color: var(--green); }
.page-hero .lede{
  font-size: clamp(17px,1.3vw,20px); color: var(--text-2); max-width: 60ch; margin:0;
}

/* ============================================================
   Cards grid (services / systems / work)
   ============================================================ */
.card-grid{
  display:grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
}
.card-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.card-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.card-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px){ .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); padding: 34px 30px;
  position:relative; transition: background var(--t-med);
  display:flex; flex-direction:column; min-height: 220px;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--green); transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-med);
}
.card:hover{ background: var(--surface-2); }
.card:hover::before{ transform: scaleX(1); }
.card .num{
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em;
  color: var(--muted-2); margin-bottom: 18px;
}
.card h3{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: 26px; letter-spacing:.01em; line-height:1; margin:0 0 12px; color: var(--text);
}
.card p{ font-size: 14.5px; color: var(--muted); margin: 0; line-height:1.6; }
.card .card-link{
  margin-top: auto; padding-top: 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--green); display:inline-flex; align-items:center; gap:8px;
}
.card .card-link .arrow{ transition: transform var(--t-fast); }
.card:hover .card-link .arrow{ transform: translateX(3px); }

/* Simple list-style system chips */
.chip-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width:820px){ .chip-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .chip-grid{ grid-template-columns: 1fr; } }
.chip{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; background: var(--surface);
  display:flex; align-items:center; gap:14px; transition: border-color var(--t-fast), background var(--t-fast);
}
.chip:hover{ border-color: var(--green); background: var(--surface-2); }
.chip .dot{ width:8px; height:8px; border-radius:2px; background: var(--green); flex:none; box-shadow:0 0 10px rgba(166,255,0,.5); }
.chip span{ font-size: 15px; font-weight:500; color: var(--text); }

/* ============================================================
   Stat strip
   ============================================================ */
.stat-strip{ border-block: 1px solid var(--line); background: var(--surface); }
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat-grid > div{ padding: 44px 30px; border-right: 1px solid var(--line); }
.stat-grid > div:last-child{ border-right:0; }
@media (max-width: 880px){
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-grid > div{ border-bottom: 1px solid var(--line); }
  .stat-grid > div:nth-child(2n){ border-right:0; }
}
@media (max-width: 480px){ .stat-grid{ grid-template-columns: 1fr; } .stat-grid > div{ border-right:0 !important; } }
.stat-label{
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted); margin-bottom: 14px;
}
.stat-value{
  font-family: var(--display); font-weight:400; font-size: clamp(44px,5vw,64px);
  line-height:.9; letter-spacing:.01em; color: var(--text); margin: 0 0 8px;
}
.stat-value em{ font-style:normal; color: var(--green); }
.stat-note{ font-size: 13.5px; color: var(--muted); margin:0; }

/* ============================================================
   Feature blocks (alternating)
   ============================================================ */
.feature-block{ border-bottom: 1px solid var(--line); }
.feature-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
@media (max-width: 900px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-grid h2{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(32px, 4vw, 52px); line-height:.96; letter-spacing:.008em;
  margin: 0 0 22px; color: var(--text);
}
.feature-grid h2 em{ font-style:normal; color: var(--green); }
.feature-grid p{ font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 18px; max-width: 54ch; }
.feature-list{ padding:0; margin: 26px 0 0; list-style:none; }
.feature-list li{
  padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line);
  position: relative; font-size: 15px; color: var(--text-2);
}
.feature-list li::before{
  content:"→"; position:absolute; left:0; top:14px; color: var(--green); font-family: var(--mono);
}
.feature-list li:last-child{ border-bottom:0; }
.feature-block.reversed .feature-grid{ direction: rtl; }
.feature-block.reversed .feature-grid > *{ direction: ltr; }
@media (max-width: 900px){ .feature-block.reversed .feature-grid{ direction: ltr; } }

.feature-media{
  aspect-ratio: 4/3; background: var(--surface-2); border-radius: var(--radius-lg);
  overflow:hidden; position:relative; border: 1px solid var(--line);
}
.feature-media img, .feature-media video{ width:100%; height:100%; object-fit: cover; }
.feature-media .placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(63,191,42,.14), transparent 55%),
    var(--surface-2);
}
.feature-media .placeholder span{
  font-family: var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted-2);
}

/* ============================================================
   Callout / CTA band
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 120%, rgba(166,255,0,.14), transparent 60%);
  pointer-events:none;
}
.cta-inner{ position:relative; z-index:1; text-align:center; max-width: 780px; margin:0 auto; }
.cta-inner h2{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(40px, 6vw, 84px); line-height:.92; letter-spacing:.01em; margin:0 0 22px;
}
.cta-inner h2 em{ font-style:normal; color: var(--green); }
.cta-inner p{ font-size: clamp(16px,1.3vw,19px); color: var(--text-2); max-width: 54ch; margin: 0 auto 34px; }
.cta-inner .btn-row{ justify-content:center; }

/* ============================================================
   Architecture diagram (home / about)
   ============================================================ */
.arch{ display:grid; gap: 18px; }
.arch-parent{
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface);
  padding: 30px; text-align:center; position:relative;
}
.arch-parent .tag{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--green); }
.arch-parent h3{ font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: 34px; letter-spacing:.02em; margin: 8px 0 4px; }
.arch-parent p{ font-size: 14px; color: var(--muted); margin:0; }
.arch-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:760px){ .arch-cols{ grid-template-columns: 1fr; } }
.arch-node{
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  padding: 28px; transition: border-color var(--t-fast), background var(--t-fast);
}
.arch-node:hover{ border-color: var(--green); background: var(--surface-2); }
.arch-node .tag{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.arch-node h4{ font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: 24px; letter-spacing:.01em; margin: 10px 0 8px; color: var(--text); }
.arch-node p{ font-size: 14px; color: var(--muted); margin:0; line-height:1.6; }

/* ============================================================
   Process / steps
   ============================================================ */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
@media (max-width: 860px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .steps{ grid-template-columns: 1fr; } }
.step{ background: var(--surface); padding: 32px 26px; }
.step .n{ font-family: var(--display); font-size: 46px; line-height:.8; color: var(--green); letter-spacing:.02em; }
.step h4{ font-family: var(--sans); font-weight:700; font-size: 16px; margin: 16px 0 8px; color: var(--text); }
.step p{ font-size: 14px; color: var(--muted); margin:0; line-height:1.6; }

/* ============================================================
   Contact form
   ============================================================ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
.field input, .field select, .field textarea{
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 14px 16px; color: var(--text); font: inherit; font-size: 15px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(166,255,0,.14);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--black); color: var(--muted); padding-block: 72px 32px; border-top: 1px solid var(--line); }
.footer-top{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 56px; border-bottom: 1px solid var(--line);
}
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .brand{ color: var(--text); }
.footer-brand p{ font-size: 14px; line-height: 1.6; margin: 18px 0 22px; max-width: 38ch; color: var(--muted); }
.footer-brand .socials{ display:flex; gap:12px; }
.footer-brand .socials a{
  width:38px; height:38px; border:1px solid var(--line-2); border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.footer-brand .socials a:hover{ border-color: var(--green); color: var(--green); }
.footer-col h4{ font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-2); margin: 0 0 16px; font-weight:500; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom: 11px; }
.footer-col a{ font-size: 13.5px; color: var(--text-2); transition: color var(--t-fast); }
.footer-col a:hover{ color: var(--green); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; color: var(--muted-2);
}
.footer-bottom a:hover{ color: var(--green); }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Reveal is a progressive enhancement: content is visible by default and only
   hidden once JS confirms it's running (html.js). If JS fails or the observer
   never fires, everything stays visible, so the page can never render blank. */
.reveal{ transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.6,.2,1); }
html.js .reveal:not(.in){ opacity:0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce){ html.js .reveal:not(.in){ opacity:1; transform:none; transition:none; } }

/* ---- Prose (privacy etc.) ---- */
.prose{ max-width: 72ch; }
.prose h2{ font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: 30px; letter-spacing:.01em; margin: 48px 0 16px; color: var(--text); }
.prose h3{ font-size: 18px; font-weight:700; margin: 28px 0 10px; color: var(--text); }
.prose p, .prose li{ color: var(--text-2); font-size: 15.5px; line-height: 1.75; }
.prose a{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose ul{ padding-left: 20px; }

/* ============================================================
   ANIMATED TECH HERO  (grid · brackets · scan · typing · terminal)
   ============================================================ */
.hero-tech{ text-align:center; }
.hero-tech .wrap{ position:relative; z-index:2; }

/* faint engineering grid, radial-masked */
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(166,255,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(166,255,0,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 100%);
}
/* corner brackets */
.hero-bracket{
  position:absolute; width:26px; height:26px; z-index:1; pointer-events:none;
  border:1.5px solid rgba(166,255,0,.45); opacity:.5;
}
.hero-bracket-tl{ top:32px;    left:32px;   border-right:0; border-bottom:0; }
.hero-bracket-tr{ top:32px;    right:32px;  border-left:0;  border-bottom:0; }
.hero-bracket-bl{ bottom:32px; left:32px;   border-right:0; border-top:0; }
.hero-bracket-br{ bottom:32px; right:32px;  border-left:0;  border-top:0; }
/* scanning sweep */
.hero-scan{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(105deg, transparent 35%, rgba(166,255,0,.10) 48%, transparent 60%);
  animation: heroScan 11s linear infinite;
}
@keyframes heroScan{
  0%,35%   { transform: translateX(-100%); opacity:0; }
  40%      { opacity:1; }
  55%      { opacity:1; }
  60%,100% { transform: translateX(100%); opacity:0; }
}

/* headline that types in word-by-word (once), then stays visible */
.hero-tech h1{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(52px, 9vw, 128px); line-height:.9; letter-spacing:.01em;
  margin: 0 auto 26px; max-width: 16ch; color: var(--text);
}
.hero-tech h1 .hw{
  display:inline-block; margin-right:.24em;
  opacity:0; clip-path: inset(-0.05em 100% -0.15em 0); -webkit-clip-path: inset(-0.05em 100% -0.15em 0);
  animation: heroType .5s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero-tech h1 .hw.green{ color: var(--green); text-shadow: 0 0 40px rgba(166,255,0,.4); }
@keyframes heroType{
  to{ opacity:1; clip-path: inset(-0.05em 0 -0.15em 0); -webkit-clip-path: inset(-0.05em 0 -0.15em 0); }
}
.hero-cursor{
  display:inline-block; width:.14em; height:.8em; vertical-align:-.02em; margin-left:.06em;
  background: var(--green); box-shadow:0 0 14px rgba(166,255,0,.6);
  opacity:0; animation: heroCursorIn .1s 1.9s forwards, heroBlink 1.1s 2s steps(2) infinite;
}
@keyframes heroCursorIn{ to{ opacity:1; } }
@keyframes heroBlink{ 50%{ opacity:0; } }

/* terminal-style command line with pulsing tokens */
.hero-stack{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family: var(--mono); font-size: clamp(11px,1vw,13px);
  letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
  margin: 0 auto 30px; padding: 10px 16px;
  background: rgba(166,255,0,.04); border:1px solid rgba(166,255,0,.16); border-radius: var(--radius);
}
.hero-stack .p{ color: var(--green); }
.hero-stack .cmd{ color: var(--text-2); font-weight:600; }
.hero-stack .sep{ color: rgba(166,255,0,.4); }
.hero-stack .tok{ color: var(--text-2); font-weight:500; animation: heroTok 9s ease-in-out infinite; }
.hero-stack .tok:nth-of-type(1){ animation-delay:0s; }
.hero-stack .tok:nth-of-type(2){ animation-delay:.9s; }
.hero-stack .tok:nth-of-type(3){ animation-delay:1.8s; }
.hero-stack .tok:nth-of-type(4){ animation-delay:2.7s; }
@keyframes heroTok{
  0%,6%   { color: var(--muted-2); }
  9%      { color: var(--green); text-shadow:0 0 10px rgba(166,255,0,.5); }
  16%,100%{ color: var(--text-2); text-shadow:none; }
}
.hero-tech .btn-row{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .hero-tech h1 .hw{ opacity:1; clip-path:none; -webkit-clip-path:none; animation:none; }
  .hero-scan, .hero-cursor, .hero-stack .tok{ animation:none; }
  .hero-cursor{ display:none; }
}
@media (max-width: 720px){
  .hero-bracket{ width:18px; height:18px; }
  .hero-bracket-tl{ top:16px; left:16px; } .hero-bracket-tr{ top:16px; right:16px; }
  .hero-bracket-bl{ bottom:16px; left:16px; } .hero-bracket-br{ bottom:16px; right:16px; }
}

/* ============================================================
   Video treatment inside feature-media  (autoplay motion graphics)
   ============================================================ */
.feature-media{ background:#000; }
.feature-media video{ filter: saturate(1.02) contrast(1.02); }
.feature-media .fm-tag{
  position:absolute; bottom:14px; left:14px; z-index:2;
  font-family: var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green); background: rgba(11,11,11,.7); border:1px solid rgba(166,255,0,.25);
  padding:6px 10px; border-radius:3px; backdrop-filter: blur(6px);
}
.feature-media::after{ /* subtle bottom fade for legibility */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45) 100%);
}

/* video card (work grid) */
.vid-card{
  border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
  background:#000; position:relative; aspect-ratio:16/10;
}
.vid-card video{ width:100%; height:100%; object-fit:cover; }
.vid-card .vc-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
}
.vid-card .vc-meta h3{
  font-family: var(--display); font-weight:400; text-transform:uppercase; font-size:22px;
  letter-spacing:.01em; margin:0 0 2px; color: var(--text);
}
.vid-card .vc-meta p{ font-family: var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--green); margin:0; }
.vid-card::before{ content:""; position:absolute; inset:0; z-index:1; border:2px solid transparent; border-radius: var(--radius-lg); transition: border-color var(--t-med); pointer-events:none; }
.vid-card:hover::before{ border-color: rgba(166,255,0,.55); }

/* ============================================================
   Creator credits · moving marquee
   ============================================================ */
.credits{ border-block:1px solid var(--line); background: var(--surface); overflow:hidden; }
.credits-marquee{ position:relative; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.credits-track{ display:flex; gap:18px; width:max-content; animation: marquee 42s linear infinite; }
.credits-marquee:hover .credits-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.creator-card{
  flex:0 0 250px; height:320px; position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); transition: transform var(--t-med), border-color var(--t-med);
}
.creator-card:hover{ transform: translateY(-6px); border-color: rgba(166,255,0,.5); }
.creator-photo{
  position:absolute; inset:0; background-size:cover; background-position:center top;
  transition: transform var(--t-med); filter: grayscale(.15);
}
.creator-card:hover .creator-photo{ transform: scale(1.06); }
.creator-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px; z-index:2;
  background: linear-gradient(180deg, transparent, rgba(11,11,11,.9));
}
.creator-name{ font-family: var(--display); font-weight:400; text-transform:uppercase; font-size:19px; letter-spacing:.02em; color: var(--text); margin:0 0 6px; }
.creator-stat{ display:inline-flex; align-items:center; gap:7px; font-family: var(--mono); font-size:12px; color: var(--green); font-weight:500; }
.creator-stat .ig-icon{ width:15px; height:15px; }
@media (prefers-reduced-motion: reduce){ .credits-track{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* video showcase grid (work page) */
.vid-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 960px){ .vid-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .vid-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   Audience lanes (corporate "who we build for")
   ============================================================ */
.lane-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 820px){ .lane-grid{ grid-template-columns: 1fr; } }
.lane{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--surface); padding: 40px 36px;
  transition: border-color var(--t-med), background var(--t-med), transform var(--t-med);
}
.lane::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background: radial-gradient(ellipse at 20% 0%, rgba(166,255,0,.12), transparent 60%);
  transition: opacity var(--t-med);
}
.lane:hover{ border-color: rgba(166,255,0,.5); background: var(--surface-2); transform: translateY(-3px); }
.lane:hover::before{ opacity:1; }
.lane > *{ position:relative; z-index:1; }
.lane-tag{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--green); }
.lane h3{ font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: clamp(38px,5vw,58px); line-height:.92; letter-spacing:.01em; margin: 14px 0 12px; color: var(--text); }
.lane p{ font-size: 15.5px; line-height:1.65; color: var(--text-2); margin: 0 0 22px; max-width: 44ch; }
.lane-link{ font-family: var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--green); display:inline-flex; align-items:center; gap:8px; }
.lane:hover .lane-link .arrow{ transform: translateX(3px); }

/* 3-up audience lanes (creators site: online / content / expert) */
.lane-grid.three{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px){ .lane-grid.three{ grid-template-columns: 1fr; } }
.lane.compact{ padding: 32px 28px; }
.lane.compact h3{ font-size: clamp(30px,3.4vw,40px); }
/* back-to-parent cross link in header */
.nav-back{ font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); display:inline-flex; align-items:center; gap:6px; transition: color var(--t-fast); }
.nav-back:hover{ color: var(--green); }

/* ============================================================
   Constitution components: statement · stack · FAQ
   ============================================================ */
/* Big mindset-shift statement */
.statement{ text-align:center; max-width: 58ch; margin:0 auto; }
.statement .section-title{ font-size: clamp(34px,4.6vw,58px); max-width: 22ch; margin-inline:auto; }
.statement p{ font-size: clamp(16px,1.3vw,19px); color: var(--text-2); max-width: 58ch; margin: 20px auto 0; }
/* tighter vertical space for the statement pause-bands */
.statement-band{ padding-block: clamp(56px, 6vw, 88px); }

/* Technology stack row */
.stack{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.stack span{
  font-family: var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-2); border:1px solid var(--line-2); border-radius:999px; padding:11px 20px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.stack span:hover{ border-color: var(--green); color: var(--green); }

/* FAQ accordion */
.faq{ max-width: 860px; margin:0 auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding: 24px 0; gap:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size: clamp(17px,1.6vw,20px); font-weight:600; color: var(--text);
  transition: color var(--t-fast);
}
.faq summary:hover{ color: var(--green); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family: var(--mono); font-size:24px; color: var(--green); flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin: 0 0 24px; color: var(--text-2); font-size:15.5px; line-height:1.75; max-width: 72ch; }

/* Pain-point list (problem section) */
.pains{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .pains{ grid-template-columns:1fr; } }
.pain{ border:1px solid var(--line); border-left:2px solid var(--green); border-radius: var(--radius); background: var(--surface); padding: 26px 24px; }
.pain h3{ font-family: var(--sans); font-weight:700; font-size:16px; margin:0 0 10px; color: var(--text); }
.pain p{ font-size:14.5px; color: var(--muted); margin:0; line-height:1.6; }

/* ============================================================
   SaaS / offer: before-after · flagship · build+subscription
   ============================================================ */
/* Before / After */
.baf{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
@media(max-width:860px){ .baf{ grid-template-columns:1fr; } }
.baf-card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:32px 28px; }
.baf-card.after{ border-color:rgba(166,255,0,.4); background:radial-gradient(ellipse at 30% 0%, rgba(63,191,42,.10), transparent 60%), var(--surface); }
.baf-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; display:block; }
.baf-card.before .baf-tag{ color:var(--muted); }
.baf-card.after .baf-tag{ color:var(--green); }
.baf-card.after h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:26px; letter-spacing:.01em; margin:0 0 18px; color:var(--text); }
.baf-list{ list-style:none; padding:0; margin:0 0 20px; }
.baf-list li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--text-2); }
.baf-list li span:last-child{ color:var(--muted); font-family:var(--mono); font-size:13px; white-space:nowrap; }
.baf-total{ margin-top:10px; padding:16px 18px; border-radius:var(--radius); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.baf-card.before .baf-total{ background:rgba(255,90,90,.10); border:1px solid rgba(255,90,90,.30); color:#ff9a9a; }
.baf-card.after .baf-total{ background:rgba(166,255,0,.10); border:1px solid rgba(166,255,0,.35); color:var(--green); }
.baf-total .big{ font-family:var(--display); font-size:30px; letter-spacing:.02em; }
.baf-note{ font-size:12.5px; color:var(--muted-2); margin:12px 0 0; }

/* Flagship automation highlight */
.flagship{ border:1px solid rgba(166,255,0,.35); border-radius:var(--radius-lg); background:radial-gradient(ellipse at 15% 0%, rgba(63,191,42,.12), transparent 55%), var(--surface); padding:clamp(32px,5vw,56px); }
.flagship .tag{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:10px; }
.flagship .tag::before{ content:""; width:26px; height:1.5px; background:var(--green); }
.flagship h2{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(32px,4.4vw,54px); line-height:.96; letter-spacing:.008em; margin:16px 0 16px; color:var(--text); }
.flagship h2 em{ font-style:normal; color:var(--green); }
.flagship p{ font-size:clamp(16px,1.2vw,18px); color:var(--text-2); max-width:60ch; margin:0 0 24px; }
.flagship .flow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.flagship .flow span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-2); border-radius:999px; padding:9px 16px; }
.flagship .flow .arrow{ color:var(--green); border:0; padding:0; }

/* Build + Subscription offers */
.offers{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:860px){ .offers{ grid-template-columns:1fr; } }
.offer{ border:1px solid var(--line-2); border-radius:var(--radius-lg); background:var(--surface); padding:38px 34px; display:flex; flex-direction:column; }
.offer.featured{ border-color:var(--green); box-shadow:0 0 44px rgba(166,255,0,.08); }
.offer .kind{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.offer h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:32px; letter-spacing:.01em; margin:12px 0 8px; color:var(--text); }
.offer .price{ font-family:var(--display); font-size:46px; color:var(--text); letter-spacing:.01em; line-height:1; margin:8px 0 2px; }
.offer .price small{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0; }
.offer .price-note{ font-size:13px; color:var(--muted); margin:0 0 24px; }
.offer p.desc{ font-size:15px; color:var(--text-2); margin:0 0 22px; line-height:1.6; }
.offer ul{ list-style:none; padding:0; margin:0 0 28px; flex-grow:1; }
.offer li{ padding:11px 0 11px 26px; position:relative; font-size:14.5px; color:var(--text-2); border-bottom:1px solid var(--line); }
.offer li:last-child{ border-bottom:0; }
.offer li::before{ content:"+"; position:absolute; left:0; top:11px; color:var(--green); font-family:var(--mono); font-weight:600; }

/* ============================================================
   Flagship: animated chat demo (ManyChat-style, brand green)
   ============================================================ */
.flagship-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media(max-width:860px){ .flagship-grid{ grid-template-columns:1fr; } }
.flagship-copy{ min-width:0; }
.chat-demo{ display:flex; justify-content:center; }
.phone{
  width:100%; max-width:330px; background:#0e0e0e; border:1px solid var(--line-2);
  border-radius:34px; padding:14px 12px 16px; position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(166,255,0,.06), 0 0 60px rgba(63,191,42,.10);
}
.phone-notch{ width:120px; height:22px; background:#000; border-radius:0 0 14px 14px; margin:0 auto 8px; }
.phone-head{ display:flex; align-items:center; gap:11px; padding:6px 10px 12px; border-bottom:1px solid var(--line); }
.phone-head .av{ width:36px; height:36px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(166,255,0,.5); flex:none; }
.phone-head .who{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.2; }
.phone-head .who small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); font-weight:500; margin-top:2px; }
.chat-thread{ display:flex; flex-direction:column; gap:8px; padding:14px 8px; height:372px; overflow:hidden; }
.msg{ max-width:82%; padding:9px 13px; border-radius:15px; font-size:13px; line-height:1.45; }
.msg.in{ align-self:flex-start; background:var(--surface-3); color:var(--text-2); border-bottom-left-radius:4px; }
.msg.out{ align-self:flex-end; background:var(--green); color:#0b0b0b; font-weight:500; border-bottom-right-radius:4px; }
.msg.typing{ display:inline-flex; gap:4px; padding:13px 15px; align-items:center; }
.msg.typing span{ width:6px; height:6px; border-radius:50%; background:#0b0b0b; animation:typedot 1s infinite; }
.msg.typing span:nth-child(2){ animation-delay:.15s; } .msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typedot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-3px); opacity:1; } }
.book-card{ align-self:stretch; margin:2px 0; padding:12px 14px; border:1px solid rgba(166,255,0,.4); border-radius:13px; background:rgba(166,255,0,.09); color:var(--green); font-size:13px; font-weight:600; }
.book-card small{ display:block; color:var(--text-2); font-weight:400; font-size:11.5px; margin-top:3px; }
.phone-foot{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; padding-top:11px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:8px; }
.phone-foot .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }
/* step reveal (driven by bis.js) */
.chat-demo [data-step]{ opacity:0; transform:translateY(9px) scale(.98); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.6,.2,1); }
.chat-demo [data-step].in{ opacity:1; transform:none; }
.chat-demo [data-step].gone{ display:none; }
@media (prefers-reduced-motion: reduce){
  .chat-demo [data-step]{ opacity:1; transform:none; }
  .msg.typing{ display:none; }
  .phone-foot .dot{ animation:none; }
}

/* three-tier offers (build · subscription · custom) */
.offers.three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:960px){ .offers.three{ grid-template-columns:1fr; } }
.offer .price.custom{ font-size:38px; }

/* ============================================================
   Feedback pass: header dot, eyebrow dashes, mock graphics,
   theme toggle, and a LIGHT theme
   ============================================================ */
/* Remove the green dot next to BIS MEDIA in the header */
.site-header .brand .mark{ display:none; }
/* Remove the leading dash on eyebrow labels */
.eyebrow::before, .hero-eyebrow::before, .flagship .tag::before{ content:none; }

/* ---- Meaningful green graphics (replace blue abstract video) ---- */
.mock{ position:absolute; inset:0; display:flex; flex-direction:column; padding:22px; gap:14px; background:
  radial-gradient(ellipse at 30% 0%, rgba(63,191,42,.10), transparent 55%), var(--surface-2); }
.mock-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  display:inline-flex; align-items:center; gap:8px; }
.mock-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }
/* dashboard */
.mock-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mock-tile{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.mock-tile span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mock-tile b{ display:block; font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:.01em; color:var(--text); margin-top:6px; }
.mock-tile em{ font-style:normal; font-size:11px; color:var(--green); font-weight:600; }
.mock-bars{ display:flex; align-items:flex-end; gap:8px; height:70px; margin-top:auto; }
.mock-bars i{ flex:1; background:linear-gradient(180deg, var(--green), rgba(166,255,0,.25)); border-radius:3px 3px 0 0; opacity:.85; }
/* automation panel */
.mock-auto-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mock-auto-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:13px; color:var(--text-2); }
.mock-auto-list .st{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.mock-auto-list .st.ok{ color:var(--green); border:1px solid rgba(166,255,0,.4); background:rgba(166,255,0,.08); }
.mock-auto-list .st.run{ color:var(--muted); border:1px solid var(--line-2); }
.mock-foot{ margin-top:auto; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.mock-foot .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }

/* ---- Theme toggle button (injected into header by bis.js) ---- */
.theme-toggle{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line-2);
  color:var(--text-2); border-radius:999px; padding:7px 13px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; margin-left:14px; transition:border-color var(--t-fast), color var(--t-fast); }
.theme-toggle:hover{ border-color:var(--green); color:var(--green); }
.theme-toggle .tt-light{ display:none; }
html.theme-light .theme-toggle .tt-light{ display:inline; }
html.theme-light .theme-toggle .tt-dark{ display:none; }

/* ============================================================
   LIGHT THEME  (html.theme-light)
   ============================================================ */
html.theme-light{
  --ink:#F4F5F1; --surface:#FFFFFF; --surface-2:#F1F3EC; --surface-3:#E8EBE1;
  --text:#0E0F0C; --text-2:#3a3d34; --muted:#6a6d62; --muted-2:#95988c;
  --line:rgba(11,11,11,.12); --line-2:rgba(11,11,11,.20);
  --green:#4E9C00; --green-2:#3f8500;
}
html.theme-light body{ background:var(--ink); color:var(--text); }
html.theme-light .site-header{ background:rgba(244,245,241,.82); }
html.theme-light .btn-primary, html.theme-light .nav-cta{ color:#fff; }
html.theme-light .btn-primary:hover, html.theme-light .nav-cta:hover{ box-shadow:0 0 22px rgba(78,156,0,.35); }
html.theme-light .msg.out{ color:#fff; }
html.theme-light .book-card{ color:var(--green-2); }
html.theme-light .hero h1 em, html.theme-light .hw.green, html.theme-light .hero-tech h1 .hw.green{ text-shadow:none; }
html.theme-light .hero-grid{ background-image:
  linear-gradient(to right, rgba(11,11,11,.05) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(11,11,11,.05) 1px, transparent 1px); }
html.theme-light .baf-card.before .baf-total{ background:rgba(220,50,50,.08); border-color:rgba(220,50,50,.3); color:#c23b3b; }
html.theme-light .phone{ background:#101210; border-color:rgba(11,11,11,.2); }  /* keep device dark on light page */
html.theme-light .phone-head .who, html.theme-light .chat-thread .msg.in{ color:#e8e8e8; }
html.theme-light .mock .mock-tile b{ color:var(--text); }

/* ---- Client logo strip (brands whose systems we've built) ---- */
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(28px,5vw,68px); }
.logo-strip .logo{
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(22px,2.6vw,34px); line-height:1; color:var(--text-2); opacity:.7;
  transition:opacity var(--t-fast), color var(--t-fast);
}
.logo-strip .logo:hover{ opacity:1; color:var(--green); }
.logo-strip img{ max-height:38px; width:auto; opacity:.8; filter:grayscale(1); transition:opacity var(--t-fast), filter var(--t-fast); }
.logo-strip img:hover{ opacity:1; filter:grayscale(0); }

/* ---- Photography treatment (editorial, on-brand, not generic stock) ---- */
.photo{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:#000; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.85) contrast(1.03) brightness(.98); transition:filter var(--t-med), transform var(--t-med); }
.photo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,11,.04), rgba(11,11,11,.32)); }
.photo:hover img{ filter:grayscale(.15) contrast(1.03) brightness(1.04); transform:scale(1.03); }
.photo:hover{ border-color:rgba(166,255,0,.35); }
.photo .photo-tag{ position:absolute; left:14px; bottom:12px; z-index:1;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  background:rgba(11,11,11,.6); border:1px solid rgba(166,255,0,.25); padding:6px 10px; border-radius:3px; backdrop-filter:blur(6px); }
html.theme-light .photo::after{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(11,11,11,.28)); }

/* ---- Custom illustration: connected people network (on-brand, inclusive) ---- */
.illus{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(ellipse at 28% 16%, rgba(63,191,42,.14), transparent 62%), var(--surface);
  display:flex; align-items:center; justify-content:center; padding:26px; }
.illus svg{ width:100%; height:auto; display:block; }
.illus .lnk{ stroke:var(--green); stroke-opacity:.22; stroke-width:1.5; }
.illus .ring{ fill:var(--surface-2); stroke:var(--green); stroke-opacity:.45; stroke-width:1.5; }
.illus .fig{ fill:var(--green); fill-opacity:.85; }
.illus .hi .ring{ stroke-opacity:.95; }
.illus .hi{ filter:drop-shadow(0 0 7px rgba(166,255,0,.55)); }
@keyframes illusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.illus .p1{ animation:illusPulse 2.6s ease-in-out infinite; }
.illus .p2{ animation:illusPulse 2.6s ease-in-out infinite 1.3s; }
@media (prefers-reduced-motion: reduce){ .illus .p1, .illus .p2{ animation:none; } }

/* ---- Work card viz (green SVG systems, replacing blue video clips) ---- */
.vid-card .viz{ position:absolute; inset:0; padding:24px 26px 46px;
  background:radial-gradient(ellipse at 28% 16%, rgba(63,191,42,.12), transparent 60%), var(--surface-2);
  display:flex; align-items:center; justify-content:center; }
.vid-card .viz svg{ width:100%; height:100%; }
.viz .g-fill{ fill:var(--green); fill-opacity:.85; }
.viz .g-fill-dim{ fill:var(--green); fill-opacity:.3; }
.viz .g-line{ stroke:var(--green); fill:none; }
.viz .g-dim{ stroke:var(--green); fill:none; }
.viz .g-surf{ fill:var(--surface); stroke:var(--line-2); stroke-width:1; }

/* ---- Cookie consent (GDPR) ---- */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:560px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:22px 24px; box-shadow:0 20px 50px rgba(0,0,0,.55); display:none;
  opacity:0; transform:translateY(10px); transition:opacity var(--t-med), transform var(--t-med); }
.cookie-banner.show{ display:block; opacity:1; transform:none; }
@media(min-width:600px){ .cookie-banner{ left:24px; bottom:24px; } }
.cookie-banner h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 10px; }
.cookie-banner p{ font-size:14px; color:var(--text-2); margin:0 0 16px; line-height:1.6; }
.cookie-banner p a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.cookie-banner .cb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner button{ padding:10px 18px; border-radius:var(--radius); font-size:13px; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--line-2); background:transparent; color:var(--text); transition:box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.cookie-banner button.cb-accept{ background:var(--green); color:var(--black); border-color:var(--green); }
.cookie-banner button.cb-accept:hover{ box-shadow:0 0 20px rgba(166,255,0,.45); }
.cookie-banner button.cb-decline:hover{ border-color:var(--green); color:var(--green); }
html.theme-light .cookie-banner button.cb-accept{ color:#fff; }

/* ===== System core: the animated engine graphic ===== */
.system-core{ position:relative; overflow:hidden; padding:clamp(64px,10vw,132px) 0; text-align:center; }
.system-core .sc-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(63,191,42,.30), rgba(166,255,0,.05) 34%, rgba(11,11,11,0) 60%); }
.system-core .sc-gridbg{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(166,255,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(166,255,0,.06) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 50% 46%, #000 30%, transparent 68%); -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 30%, transparent 68%); }
.system-core .wrap{ position:relative; z-index:1; }
.sc-orb{ position:relative; width:min(480px,82vw); margin:clamp(26px,4vw,48px) auto; }
.sc-orb svg{ width:100%; height:auto; display:block; overflow:visible; }
.sc-ring{ fill:none; stroke:rgba(166,255,0,.16); stroke-width:1; }
.sc-ring.dim{ stroke:rgba(166,255,0,.09); }
.sc-tick{ stroke:rgba(166,255,0,.22); stroke-width:1; }
.sc-core-ring{ fill:none; stroke:rgba(166,255,0,.65); stroke-width:1.5; }
.sc-core-label{ fill:#0B0B0B; font-family:'Bebas Neue', sans-serif; font-size:40px; text-anchor:middle; letter-spacing:3px; }
.sc-word{ fill:rgba(247,247,247,.5); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:4px; }
.sc-word.hot{ fill:rgba(166,255,0,.62); font-size:9.5px; letter-spacing:3px; }
.sc-spin, .sc-rings{ transform-box:fill-box; transform-origin:center; }
.sc-spin.a{ animation:scSpin 46s linear infinite; }
.sc-spin.b{ animation:scSpin 34s linear infinite reverse; }
.sc-rings{ animation:scSpin 120s linear infinite; }
@keyframes scSpin{ to{ transform:rotate(360deg); } }
.sc-caption{ max-width:54ch; margin:0 auto; color:var(--text-2); }
.system-core h2{ margin:0 auto; max-width:20ch; }
html.theme-light .system-core .sc-glow{ background:radial-gradient(circle at 50% 46%, rgba(63,191,42,.18), rgba(11,11,11,0) 60%); }
html.theme-light .sc-word{ fill:rgba(11,11,11,.45); }
@media (prefers-reduced-motion: reduce){ .sc-spin, .sc-rings{ animation:none; } }

/* ===== Framework schematic: the operating system, as architecture ===== */
.fw-schematic{ position:relative; max-width:900px; margin:clamp(30px,4vw,52px) auto 0;
  padding:clamp(30px,4vw,48px) clamp(26px,3.4vw,44px); border:1px dashed rgba(166,255,0,.30);
  border-radius:22px; background:radial-gradient(circle at 50% 0%, rgba(63,191,42,.10), transparent 62%), var(--ink); }
.fw-schematic::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; border-radius:inherit;
  background-image:linear-gradient(rgba(166,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(166,255,0,.05) 1px, transparent 1px);
  background-size:40px 40px; }
.fw-node{ position:absolute; width:7px; height:7px; background:var(--green); transform:rotate(45deg); box-shadow:0 0 10px rgba(166,255,0,.6); z-index:3; }
.fw-node.tl{ top:-4px; left:-4px; } .fw-node.tr{ top:-4px; right:-4px; }
.fw-node.bl{ bottom:-4px; left:-4px; } .fw-node.br{ bottom:-4px; right:-4px; }
.fw-blabel{ position:absolute; left:50%; transform:translateX(-50%); z-index:3; background:var(--ink);
  padding:5px 16px; font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; border-radius:999px; white-space:nowrap; }
.fw-blabel.top{ top:-14px; color:var(--green); border:1px solid rgba(166,255,0,.4); }
.fw-blabel.bottom{ bottom:-14px; color:var(--text-2); border:1px solid var(--line-2); }
.fw-side{ position:absolute; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.fw-side.l{ left:7px; transform:translateY(-50%) rotate(180deg); }
.fw-side.r{ right:7px; }
.fw-layers{ position:relative; z-index:1; display:grid; gap:14px; }
.fw-layer{ padding:16px 18px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface); }
.fw-layer .tag{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.fw-mods{ display:flex; flex-wrap:wrap; gap:10px; }
.fw-mod{ flex:1 1 150px; padding:15px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--ink);
  font-weight:600; font-size:14px; text-align:center; color:var(--text); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.fw-mod:hover{ border-color:rgba(166,255,0,.5); box-shadow:0 0 20px rgba(166,255,0,.12); }
.fw-layer.lead .tag{ color:var(--green); }
.fw-layer.lead .fw-mod{ border-color:rgba(166,255,0,.35); }
@media (max-width:720px){ .fw-side{ display:none; } .fw-mod{ flex-basis:120px; } }
html.theme-light .fw-schematic::before{ opacity:.4; }

/* ===== Process pipeline: an automated flow you can see running ===== */
.pipeline{ position:relative; margin-top:clamp(30px,4vw,52px); padding:clamp(34px,3.6vw,48px) clamp(20px,3vw,38px);
  border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
  background:radial-gradient(circle at 50% -10%, rgba(63,191,42,.09), transparent 56%), var(--ink); }
.pipeline::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; border-radius:inherit;
  background-image:linear-gradient(rgba(166,255,0,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(166,255,0,.045) 1px, transparent 1px);
  background-size:40px 40px; }
.pl-stages{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); }
.pl-track{ position:absolute; left:12.5%; right:12.5%; top:7px; height:2px; z-index:0; overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(166,255,0,.28) 0 6px, transparent 6px 15px); }
.pl-pulse{ position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 14px 3px rgba(166,255,0,.85); animation:plFlow 4.6s linear infinite; }
@keyframes plFlow{ 0%{ left:-2%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ left:102%; opacity:0; } }
.pl-stage{ position:relative; z-index:1; padding:0 14px; text-align:center; }
.pl-node{ display:block; width:16px; height:16px; margin:0 auto; border-radius:50%;
  background:var(--ink); border:2px solid var(--green); box-shadow:0 0 0 5px rgba(166,255,0,.08); }
.pl-num{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); margin-top:24px; }
.pl-stage h4{ margin:6px 0 8px; }
.pl-desc{ font-size:14px; color:var(--text-2); margin:0 auto; max-width:26ch; }
@media (max-width:760px){
  .pl-stages{ grid-template-columns:1fr; gap:26px; }
  .pl-track{ display:none; }
  .pl-num{ margin-top:14px; }
}
.pipeline.p3 .pl-stages{ grid-template-columns:repeat(3,1fr); }
.pipeline.p3 .pl-track{ left:16.6%; right:16.6%; }
@media (max-width:760px){ .pipeline.p3 .pl-stages{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .pl-pulse{ animation:none; } }

/* ===== About: hero grid + glow ===== */
.about-hero{ position:relative; overflow:hidden; }
.about-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(166,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(166,255,0,.05) 1px, transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(circle at 26% 40%, #000, transparent 72%); mask-image:radial-gradient(circle at 26% 40%, #000, transparent 72%); }
.about-hero::after{ content:""; position:absolute; top:-30%; left:-12%; width:62%; height:150%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(63,191,42,.16), transparent 62%); }
.about-hero .wrap{ position:relative; z-index:1; }

/* ===== Ecosystem schematic: one company, two divisions ===== */
.eco{ position:relative; max-width:900px; margin:clamp(30px,4vw,52px) auto 0; padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,44px);
  border:1px dashed rgba(166,255,0,.30); border-radius:22px; background:radial-gradient(circle at 50% 0%, rgba(63,191,42,.10), transparent 60%), var(--ink); }
.eco::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; border-radius:inherit;
  background-image:linear-gradient(rgba(166,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(166,255,0,.05) 1px, transparent 1px); background-size:40px 40px; }
.eco-apex{ position:relative; z-index:1; max-width:520px; margin:0 auto; padding:20px 24px; text-align:center;
  border:1px solid rgba(166,255,0,.4); border-radius:14px; background:var(--surface); box-shadow:0 0 34px rgba(166,255,0,.09); }
.eco-apex .tag, .eco-div .tag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.eco-apex h3{ margin:0 0 6px; }
.eco-apex p, .eco-div p{ color:var(--text-2); font-size:14px; margin:0; }
.eco-bus{ position:relative; z-index:1; width:64%; height:34px; margin:2px auto 8px; }
.eco-bus::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:1px; height:14px; background:rgba(166,255,0,.45); }
.eco-bus::after{ content:""; position:absolute; left:0; right:0; top:14px; bottom:0; border:1px dashed rgba(166,255,0,.35); border-bottom:0; }
.eco-divs{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.eco-div{ padding:20px 22px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface); }
.eco-div h4{ margin:0 0 8px; }
.eco-div.live{ border-color:rgba(166,255,0,.28); }
.eco-div .badge{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.eco-div .badge.on{ color:var(--green); border:1px solid rgba(166,255,0,.4); }
.eco-div .badge.soon{ color:var(--muted); border:1px solid var(--line-2); }
@media (max-width:720px){ .eco-divs{ grid-template-columns:1fr; } .eco-bus{ display:none; } }

/* ===== Principles grid (elevated) ===== */
.principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(24px,3vw,40px); }
.principle{ display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--surface); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.principle:hover{ border-color:rgba(166,255,0,.5); box-shadow:0 0 20px rgba(166,255,0,.1); }
.principle .pr-n{ flex:none; font-family:var(--mono); font-size:12px; color:var(--green); border:1px solid rgba(166,255,0,.4); border-radius:8px; padding:6px 9px; }
.principle .pr-t{ font-weight:600; font-size:15px; }
@media (max-width:820px){ .principle-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .principle-grid{ grid-template-columns:1fr; } }