/* =========================================================
   OSAVUL — design tokens
   ========================================================= */
:root{
  --bg:            #060708;
  --surface:       #101216;
  --surface-2:     #15171C;
  --border:        #24272D;
  --text:          #EDEFF2;
  --text-muted:    #8B93A1;
  --text-faint:    #545C68;
  --accent:        #A7B0BC;
  --accent-soft:   #3A3E45;
  --accent-contrast: #0B0D10;
  --accent-blue:   #4C6EF5;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --wrap: 1160px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em; }
p{ margin:0; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent-soft);
  padding:5px 10px;
  border-radius:var(--radius);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--radius);
  font-size:15px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--accent); color:var(--accent-contrast); }
.btn--primary:hover{ filter:brightness(1.15); }
.btn--ghost{ border-color:var(--border); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--link{ color:var(--text-muted); padding:12px 4px; }
.btn--link:hover{ color:var(--accent); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,16,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  display:flex; align-items:center; gap:32px;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__word{
  font-family:var(--font-mono);
  font-size:16px;
  letter-spacing:.16em;
  font-weight:500;
}
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font-size:14.5px; color:var(--text-muted);
  transition:color .15s ease;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a.is-active{ color:var(--text); }
.nav__links a.is-active::after{ content:''; display:block; height:1px; background:var(--accent); margin-top:5px; }
.nav__cta{ padding:9px 18px; font-size:14px; }
.lang-switch{ display:flex; align-items:center; gap:4px; margin-left:6px; font-size:13px; font-family:var(--font-mono, monospace); }
.lang-switch a{ padding:2px 6px; border-radius:4px; color:var(--text-muted); text-decoration:none; transition:color .15s, background-color .15s; }
.lang-switch a:hover{ color:var(--text); background:var(--surface-2); }
.lang-switch a.is-active{ color:var(--text); font-weight:600; }
.lang-switch__sep{ color:var(--border); }
.nav__burger{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
/* =========================================================
   JOBS (careers page)
   ========================================================= */
.jobs{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.job{
  background:var(--surface-2);
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  color:var(--text);
  transition:background-color .15s ease;
}
.job:hover{ background:var(--surface); }
.job__main h3{ font-size:19px; margin-bottom:6px; }
.job__meta{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:12px;
}
.job__skills{ display:flex; flex-wrap:wrap; gap:8px; }
.job__skills--detail{ margin-top:4px; }
.skill-tag{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  padding:3px 9px;
}
.job__arrow{ color:var(--text-faint); font-size:20px; flex-shrink:0; }

/* =========================================================
   ILLUSTRATION ANIMATIONS
   Same trigger as .reveal (.in-view on an ancestor), but these
   animate the SVG artwork itself: lines draw in, nodes pop in
   with a stagger, bars grow — a lightweight, on-brand alternative
   to embedding GIFs.
   ========================================================= */
.illo-draw{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.in-view .illo-draw{ animation:illoDraw .9s ease forwards; }
@keyframes illoDraw{ to{ stroke-dashoffset:0; } }

.illo-pulse{
  opacity:0;
  transform:scale(.4);
  transform-box:fill-box;
  transform-origin:center;
}
.in-view .illo-pulse{ animation:illoPop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes illoPop{ to{ opacity:1; transform:scale(1); } }

.illo-grow-x{
  transform:scaleX(0);
  transform-box:fill-box;
  transform-origin:left center;
}
.in-view .illo-grow-x{ animation:illoGrowX .5s ease forwards; }
@keyframes illoGrowX{ to{ transform:scaleX(1); } }

.illo-grow-y{
  transform:scaleY(0);
  transform-box:fill-box;
  transform-origin:center bottom;
}
.in-view .illo-grow-y{ animation:illoGrowY .5s ease forwards; }
@keyframes illoGrowY{ to{ transform:scaleY(1); } }

.illo-fade{ opacity:0; }
.in-view .illo-fade{ animation:illoFade .5s ease forwards; }
@keyframes illoFade{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .illo-draw{ stroke-dashoffset:0; }
  .illo-pulse{ opacity:1; transform:none; }
  .illo-grow-x, .illo-grow-y{ transform:none; }
  .illo-fade{ opacity:1; }
  .in-view .illo-draw, .in-view .illo-pulse, .in-view .illo-grow-x,
  .in-view .illo-grow-y, .in-view .illo-fade{ animation:none; }
}

/* =========================================================
   CARD / CASE / BLOG COVER ILLUSTRATIONS
   ========================================================= */
.card__illo, .case__illo, .insight__cover{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  margin-bottom:20px;
}
.card__illo .illo, .case__illo .illo, .insight__cover .illo{ display:block; width:100%; height:auto; }
.card__illo--large{ margin-bottom:0; max-width:360px; }

/* =========================================================
   ARTICLE (full blog post)
   ========================================================= */
.article{ max-width:720px; }
.article__cover{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:36px; }
.article__cover .illo{ display:block; width:100%; height:auto; }
.article__body p{ margin-bottom:18px; color:var(--text); line-height:1.75; font-size:17px; }
.article__body h3{ margin:32px 0 14px; }
.article__body blockquote{ margin:24px 0; padding:4px 0 4px 20px; border-left:2px solid var(--accent); color:var(--text-muted); font-style:italic; }
.article__body blockquote p{ margin-bottom:8px; }
.article__body blockquote cite{ display:block; font-style:normal; font-size:14px; color:var(--text-faint); font-family:var(--font-mono); }
.article__body{ margin-bottom:32px; }

/* =========================================================
   PLAIN LIST (bulleted content on detail pages)
   ========================================================= */
.plain-list{ margin:0 0 28px; }
.plain-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
  color:var(--text-muted);
  font-size:15px;
}
.plain-list li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--accent); }

/* =========================================================
   TRUST STRIP (client/press logos placeholder)
   ========================================================= */
.trust-strip{ padding:48px 0; }
.trust__label{
  text-align:center;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:24px;
}
.trust__row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}
.trust__logo{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 18px;
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{ max-width:760px; }
.legal h3{ font-size:19px; margin:28px 0 10px; }
.legal p{ color:var(--text-muted); margin-bottom:6px; }
.legal em{ color:var(--text-faint); font-style:italic; }

/* =========================================================
   FOOTER SOCIAL ICONS
   ========================================================= */
.footer__social{ display:flex; gap:12px; margin-top:16px; }
.social{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-muted);
  transition:all .15s ease;
}
.social:hover{ color:var(--accent); border-color:var(--accent-soft); }

/* =========================================================
   PAGE HEADER (internal pages)
   ========================================================= */
.page-header{
  position:relative;
  overflow:hidden;
  padding:96px 0 64px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
}
.page-header > .wrap{ position:relative; z-index:2; }
.page-header__title{
  font-size:clamp(30px, 4.6vw, 46px);
  letter-spacing:-.01em;
  margin-bottom:14px;
  max-width:680px;
}
.page-header__lede{
  font-size:17px;
  color:var(--text-muted);
  max-width:560px;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:120px 0 64px;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.hero__radar{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:.55;
  pointer-events:none;
}
#radar-canvas{ width:100%; height:100%; }
.hero__sweep{ display:none; } /* sweep drawn on canvas */

.hero__content{
  position:relative;
  z-index:2;
  max-width:760px;
  text-align:left;
}
.hero__title{
  font-size:clamp(34px, 5.4vw, 58px);
  letter-spacing:-.01em;
  margin-bottom:22px;
}
h2 em, h1 em{
  font-style:normal;
  color:var(--accent);
  font-weight:700;
}
.hero__lede{
  font-size:18px;
  color:var(--text-muted);
  max-width:560px;
  margin-bottom:34px;
}
.hero__actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.hero__stats{
  position:relative; z-index:2;
  margin-top:80px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--border);
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat__num, .stat__suffix{
  font-family:var(--font-mono);
  font-size:34px;
  color:var(--accent);
  display:inline;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.stat__label{
  font-size:13.5px;
  color:var(--text-muted);
  margin-top:4px;
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ position:relative; overflow:hidden; padding:96px 0; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); transition:background-color .2s ease, color .2s ease; }
.section--alt{ background:var(--surface); }
.section > .wrap{ position:relative; z-index:2; }

/* Alternating light theme — scoping these custom properties on a
   section flips every child that reads var(--text), var(--surface)
   etc., so no component styles need duplicating. */
.theme-light{
  --bg:            #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F2F3F5;
  --border:        #E3E5E9;
  --text:          #14171C;
  --text-muted:    #5B6470;
  --text-faint:    #707A87;
  --accent:        #3F4A57;
  --accent-soft:   #C9CDD3;
  --accent-contrast: #FFFFFF;
}

.section__grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:56px;
}
.section__body h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:20px; max-width:640px; }
.section__body .lead{ font-size:18px; color:var(--text); margin-bottom:16px; max-width:620px; }
.section__body p{ color:var(--text-muted); max-width:620px; margin-bottom:14px; }

.section__head{ max-width:640px; margin-bottom:56px; }
.section__head h2{ font-size:clamp(26px,3.4vw,36px); margin-top:16px; }
.section__note{ color:var(--text-faint); font-size:14px; margin-top:14px; font-family:var(--font-mono); }
.news-list{ display:flex; flex-direction:column; }
.news-item{ display:flex; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:opacity .15s; }
.news-item:hover{ opacity:.7; }
.news-item:first-child{ border-top:1px solid var(--border); }
.news-item__cover{
  flex:0 0 auto;
  width:72px; height:72px;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
}
.news-item__cover svg{ width:100%; height:100%; display:block; }
.news-item__date{ flex:0 0 auto; width:100px; font-family:var(--font-mono); font-size:13px; color:var(--text-muted); }
.news-item__tag{ flex:0 0 auto; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); width:80px; }
.news-item__title{ flex:1 1 auto; font-size:17px; font-weight:500; }
.news-item__arrow{ flex:0 0 auto; color:var(--text-faint); }
/* =========================================================
   EYES BACKGROUND (hero / banner / cta / footer)
   Generated by js/main.js: a grid of small eye SVGs whose
   pupils track the cursor across the whole viewport.
   ========================================================= */
.eyes-field{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  color:var(--text-muted);
  opacity:.18;
}
.eyes-field .eye{
  position:absolute;
  width:104px;
  height:62px;
  overflow:visible;
}
.eyes-field .eye__pupil{
  transition:transform .04s linear;
}
@media (prefers-reduced-motion: reduce){
  .eyes-field .eye__pupil{ transition:none; }
}
/* No eyes on light (white) backgrounds */
.theme-light .eyes-field{ display:none; }
@media (max-width:640px){
  .news-item{ flex-wrap:wrap; gap:6px 20px; }
  .news-item__cover{ order:0; width:56px; height:56px; }
  .news-item__tag{ order:1; }
  .news-item__date{ order:2; }
  .news-item__title{ order:3; width:100%; }
  .news-item__arrow{ display:none; }
}

/* Capability cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.card{
  background:var(--surface-2);
  padding:34px 28px;
}
.card__icon{ color:var(--accent); margin-bottom:20px; }
.card h3{ font-size:21px; margin-bottom:6px; }
.card__tag{ color:var(--text-muted); font-size:14px; margin-bottom:18px; }
.card ul li{
  position:relative;
  padding-left:16px;
  font-size:14.5px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.card ul li::before{
  content:'';
  position:absolute; left:0; top:8px;
  width:5px; height:5px;
  background:var(--accent);
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.step{
  border-top:2px solid var(--accent);
  padding-top:18px;
}
.step__num{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:13px;
  display:block;
  margin-bottom:14px;
}
.step h3{ font-size:19px; margin-bottom:8px; }
.step p{ color:var(--text-muted); font-size:14.5px; }

/* Cases */
.cases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.case{
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:28px;
}
.case__index{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:13px;
}
.case h3{ font-size:19px; margin:14px 0 10px; }
.case p{ color:var(--text-muted); font-size:14.5px; }

/* Insights */
.insights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.insight__type{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.insight h3{ font-size:19px; margin:12px 0 14px; }
.insight__link{ font-size:14px; color:var(--accent); }

/* =========================================================
   CTA / CONTACT
   ========================================================= */
.cta{ position:relative; overflow:hidden; padding:100px 0; text-align:center; background:var(--bg); color:var(--text); border-bottom:1px solid var(--border); }
.cta__inner{ position:relative; z-index:2; max-width:620px; margin:0 auto; }
.cta h2{ font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; }
.cta > .wrap > p{ color:var(--text-muted); margin-bottom:34px; }

.form{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  margin-bottom:14px;
}
.form input{
  flex:1 1 200px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:13px 14px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:14.5px;
}
.form input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form button{ flex:0 0 auto; }
.form textarea{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:13px 14px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:14.5px;
  resize:vertical;
  width:100%;
}
.form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form--stacked{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  max-width:640px;
  margin:0 auto 14px;
  justify-content:center;
}
.form--stacked input{ flex:1 1 calc(50% - 6px); }
.form--stacked textarea{ flex:1 1 100%; width:100%; }
.form--stacked button{ flex:0 0 auto; align-self:center; }
@media (max-width:640px){
  .form--stacked input{ flex:1 1 100%; }
}
.form__note{ font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ position:relative; padding:56px 0 40px; color:var(--text); background:var(--bg); overflow:hidden; }
.footer__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  align-items:start;
}
.footer__brand p{ color:var(--text-muted); font-size:14px; margin-top:10px; max-width:320px; }
.footer__links{ display:flex; flex-direction:column; gap:10px; }
.footer__links a{ color:var(--text-muted); font-size:14px; }
.footer__links a:hover{ color:var(--accent); }
.footer__legal{ text-align:right; font-size:13px; color:var(--text-faint); }
.footer__muted{ margin-top:6px; }

/* =========================================================
   MID-PAGE CTA BANNER
   ========================================================= */
/* =========================================================
   SPLIT LAYOUT (before/after style comparison section)
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--border);
}
.split__half{
  padding:80px 48px;
  background:var(--bg);
  color:var(--text);
}
.split__half h3{ font-size:clamp(22px,2.8vw,30px); margin:16px 0 22px; max-width:420px; }
.split__half .btn{ margin-top:8px; }

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.compare-wrap{ overflow-x:auto; border:1px solid var(--border); }
.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  font-size:14.5px;
}
.compare-table th, .compare-table td{
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.compare-table th{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--surface-2);
  white-space:nowrap;
}
.compare-table td:first-child{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-faint);
  white-space:nowrap;
}
.compare-table td{ color:var(--text-muted); }
.compare-table tbody tr:hover{ background:var(--surface-2); }
.compare-table tbody tr:last-child td{ border-bottom:none; }

/* =========================================================
   HOVER INTERACTIONS
   ========================================================= */
.card, .case, .feature{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative;
}
.card:hover, .case:hover, .feature:hover{
  transform:translateY(-5px);
  z-index:2;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.4);
}
.insight{ transition:transform .25s ease; position:relative; }
.insight:hover{ transform:translateY(-5px); z-index:2; }
.card__illo, .case__illo, .insight__cover{ overflow:hidden; }
.card__illo .illo, .case__illo .illo, .insight__cover .illo{
  transition:transform .5s ease;
}
.card:hover .illo, .case:hover .illo, .insight:hover .illo{
  transform:scale(1.06);
}
.nav__links a{ position:relative; }
.nav__links a::before{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:-4px;
  height:1px;
  background:var(--accent);
  transition:right .2s ease;
}
.nav__links a:hover::before{ right:0; }

.banner{
  position:relative;
  overflow:hidden;
  padding:72px 0;
  border-bottom:1px solid var(--border);
  background:#000;
  color:var(--text);
}
.banner__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.banner h2{ font-size:clamp(24px,3.2vw,32px); max-width:560px; }

/* =========================================================
   STANDALONE STATS SECTION
   ========================================================= */
.stats-section .section__head{ margin-bottom:48px; }
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--border);
}
.stats-row .stat{
  display:block;
}
.stats-row .stat__num,
.stats-row .stat__suffix{
  display:inline;
}
.stats-row .stat__label{
  display:block;
  margin-top:6px;
}

/* =========================================================
   FEATURE GRID
   ========================================================= */
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.feature{
  background:var(--surface-2);
  padding:30px 24px;
}
.feature__icon{ color:var(--accent); margin-bottom:18px; }
.feature h3{ font-size:17.5px; margin-bottom:10px; }
.feature p{ color:var(--text-muted); font-size:14px; }

/* =========================================================
   BLOG TABS
   ========================================================= */
.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:36px;
}
.tab{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.05em;
  background:none;
  border:1px solid var(--border);
  color:var(--text-muted);
  padding:8px 16px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .15s ease;
}
.tab:hover{ color:var(--text); border-color:var(--text-faint); }
.tab.is-active{ color:var(--bg); background:var(--accent); border-color:var(--accent); }
.insight[hidden]{ display:none; }

.card__link{
  display:inline-block;
  margin-top:6px;
  font-size:13.5px;
  color:var(--accent);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__links--open{
    display:flex; flex-direction:column;
    position:absolute; top:72px; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:18px 28px; gap:16px;
  }
  .nav__cta{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; gap:4px;
    background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav__burger span{ width:20px; height:2px; background:var(--text); }
  .section__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .cases{ grid-template-columns:1fr; }
  .insights{ grid-template-columns:1fr; }
  .hero__stats{ grid-template-columns:1fr; gap:20px; }
  .stats-row{ grid-template-columns:1fr; gap:20px; }
  .features{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split__half{ padding:48px 28px; }
  .banner__inner{ flex-direction:column; align-items:flex-start; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .footer__inner{ grid-template-columns:1fr; text-align:left; }
  .footer__legal{ text-align:left; }
  .eyes-field{ opacity:.12; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* SEO: listing headings promoted from h3 to h2 — keep the original look */
.insight h2{ font-size:19px; margin:12px 0 14px; }
.case h2{ font-size:19px; margin:14px 0 10px; }
.job__main h2{ font-size:19px; margin-bottom:6px; }
.insight h2 a, .case h2 a{ color:inherit; text-decoration:none; }
.insight h2 a:hover, .case h2 a:hover{ color:var(--accent); }