/* ============================================
   KONVOI v5 — Design System & Shared Styles
   ============================================ */

/* --- Reset --- */
html{scroll-behavior:smooth;scroll-padding-top:80px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}
ul,ol{list-style:none}

/* --- Tokens: Spacing --- */
:root{
  --s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-10:10px;--s-12:12px;
  --s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;
  --s-56:56px;--s-64:64px;--s-80:80px;--s-96:96px;--s-120:120px;--s-160:160px;

  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-full:9999px;
}

/* --- Tokens: Colors (Light) --- */
:root{
  --bg:#F5F5F5;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#ECECEC;
  --bg-inverse:#09090B;

  --text:#09090B;
  --text-secondary:#3F3F46;
  --text-tertiary:#52525B;
  --text-muted:#71717A;
  --text-inverse:#F4F4F5;

  --violet:#5B21B6;
  --violet-light:#7C3AED;
  --violet-subtle:#EDE9FE;
  --violet-hover:#4C1D95;

  --lime:#6BA300;
  --lime-light:#84CC16;
  --lime-subtle:#F0FDF4;

  --border:#D4D4D8;
  --border-light:#E4E4E7;
  --border-hover:#A1A1AA;

  --shadow-sm:0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
  --shadow-xl:0 20px 60px rgba(0,0,0,.14);

  --gradient-brand:linear-gradient(135deg,#6BA300 0%,#5B21B6 100%);
  --gradient-brand-rev:linear-gradient(135deg,#5B21B6 0%,#6BA300 100%);
  --gradient-stats:linear-gradient(135deg,#F5F0FF 0%,#EDE9FE 100%);
}

/* --- Tokens: Colors (Dark) --- */
[data-theme="dark"]{
  --bg:#0A0A0B;
  --bg-elevated:#18181B;
  --bg-sunken:#111113;
  --bg-inverse:#F4F4F5;

  --text:#F4F4F5;
  --text-secondary:#D4D4D8;
  --text-tertiary:#A1A1AA;
  --text-muted:#71717A;
  --text-inverse:#09090B;

  --violet:#A78BFA;
  --violet-light:#C4B5FD;
  --violet-subtle:#1E1533;
  --violet-hover:#8B5CF6;

  --lime:#84CC16;
  --lime-light:#A3E635;
  --lime-subtle:#132A00;

  --border:#27272A;
  --border-light:#3F3F46;
  --border-hover:#52525B;

  --shadow-sm:0 1px 3px rgba(0,0,0,.2);
  --shadow-md:0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 12px 40px rgba(0,0,0,.4);
  --shadow-xl:0 20px 60px rgba(0,0,0,.5);

  --gradient-brand:linear-gradient(135deg,#84CC16 0%,#A78BFA 100%);
  --gradient-brand-rev:linear-gradient(135deg,#A78BFA 0%,#84CC16 100%);
  --gradient-stats:linear-gradient(135deg,#110D1A 0%,#1A1525 100%);
}

/* --- Typography --- */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(40px,5.5vw,76px);line-height:1.08}
h2{font-size:clamp(28px,3.5vw,48px);line-height:1.15}
h3{font-size:clamp(18px,2vw,24px);line-height:1.3}
h4{font-size:16px;line-height:1.4;font-weight:700}

::selection{background:var(--violet);color:#FFFFFF}

/* --- Layout --- */
.mx{max-width:1200px;margin:0 auto;width:100%}
.sec{padding:clamp(80px,10vw,140px) clamp(20px,5vw,60px)}

/* --- Scroll Reveal --- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.vis{opacity:1;transform:none}

/* ============================================
   Navigation
   ============================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 clamp(20px,5vw,60px);
  height:64px;display:flex;align-items:center;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(245,245,245,.8);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--border);
}
[data-theme="dark"] nav.scrolled{background:rgba(10,10,11,.8)}

.nav-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.nav-left{display:flex;align-items:center;gap:var(--s-48)}
.nav-links{display:flex;align-items:center;gap:var(--s-32)}
.nav-right{display:flex;align-items:center;gap:var(--s-12)}

.nav-logo svg{height:20px;width:auto;display:block;color:var(--text)}
.nav-link{font-size:13px;font-weight:500;color:var(--text-tertiary);transition:color .25s;letter-spacing:.01em;position:relative}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--violet);border-radius:1px}

.lang-switch{display:flex;border:1px solid var(--border);overflow:hidden;border-radius:var(--r-xs)}
.lang-switch a{font-size:11px;font-weight:700;padding:5px 10px;display:block;color:var(--text-muted);transition:all .2s}
.lang-switch a.on{background:var(--text);color:var(--bg)}

.theme-toggle{
  background:none;border:1px solid var(--border);border-radius:var(--r-xs);
  padding:5px 8px;display:flex;align-items:center;justify-content:center;
  transition:border-color .3s;
}
.theme-toggle:hover{border-color:var(--border-hover)}
.theme-toggle svg{width:16px;height:16px;color:var(--text-muted)}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}

.nav-cta{
  background:var(--violet);color:#FFFFFF;border:none;
  padding:10px 22px;font-size:13px;font-weight:700;
  border-radius:var(--r-sm);transition:all .25s;letter-spacing:.01em;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(91,33,182,.25)}
[data-theme="dark"] .nav-cta{background:var(--lime);color:var(--bg)}

/* ============================================
   Buttons
   ============================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:var(--s-10);
  background:var(--violet);color:#FFFFFF;border:none;
  padding:16px 32px;font-size:15px;font-weight:700;
  border-radius:var(--r-md);transition:all .25s;letter-spacing:.01em;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(91,33,182,.2)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
[data-theme="dark"] .btn-primary{background:var(--lime);color:var(--bg)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:var(--s-8);
  background:transparent;color:var(--text);border:1px solid var(--border);
  padding:16px 28px;font-size:15px;font-weight:500;
  border-radius:var(--r-md);transition:all .25s;
}
.btn-ghost:hover{border-color:var(--border-hover);background:rgba(0,0,0,.03)}
.btn-ghost:active{background:rgba(0,0,0,.06)}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.05)}

/* ============================================
   Section Headers
   ============================================ */
.sec-header{margin-bottom:clamp(48px,7vw,72px)}
.label{
  display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:var(--s-16);
}
.label::before{content:'';width:8px;height:8px;border-radius:50%}
.label-violet{color:var(--violet)}.label-violet::before{background:var(--violet)}
.label-lime{color:var(--lime)}.label-lime::before{background:var(--lime)}
.label-light{color:var(--text-inverse)}.label-light::before{background:var(--lime)}

.sub{font-size:17px;color:var(--text-tertiary);line-height:1.7;max-width:560px;margin-top:var(--s-20)}

/* ============================================
   Hero
   ============================================ */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:clamp(100px,15vh,160px) clamp(20px,5vw,60px) clamp(80px,12vh,120px);
  position:relative;overflow:hidden;
}

/* Animated gradient mesh background */
.hero-mesh{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(91,33,182,.08) 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(107,163,0,.06) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 80%,rgba(91,33,182,.04) 0%,transparent 70%);
  animation:meshMove 20s ease-in-out infinite;
}
[data-theme="dark"] .hero-mesh{
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(167,139,250,.1) 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(132,204,22,.08) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 80%,rgba(167,139,250,.06) 0%,transparent 70%);
}
@keyframes meshMove{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(2%,-1%) scale(1.02)}
  66%{transform:translate(-1%,2%) scale(.98)}
}

.hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px;opacity:.15;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 100%);
}

.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%}

.hero-badge{
  display:inline-flex;align-items:center;gap:var(--s-8);
  padding:8px 16px 8px 10px;border:1px solid var(--border);border-radius:var(--r-full);
  font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:var(--s-32);
  background:rgba(255,255,255,.6);backdrop-filter:blur(10px);
}
[data-theme="dark"] .hero-badge{background:rgba(24,24,27,.6)}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero h1{max-width:900px;margin-bottom:var(--s-24)}
h1 em,h2 em{font-style:normal;font-weight:400;color:var(--text-tertiary)}
.hero h1 em{font-weight:500}
.hero h1 strong{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:800;
}

/* Word rotator */
.hero-rotator{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;height:1.35em}
.hero-rotator span{
  display:block;position:absolute;left:0;top:0;width:100%;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:800;
  opacity:0;transform:translateY(100%);
  animation:rotateWords 9s ease-in-out infinite;
  line-height:1.3;
}
.hero-rotator span:first-child{position:relative}
@keyframes rotateWords{
  0%,2%{transform:translateY(100%);opacity:0}
  5%,30%{transform:translateY(0);opacity:1}
  33%,100%{transform:translateY(-100%);opacity:0}
}
.hero-rotator span:nth-child(1){animation-delay:0s}
.hero-rotator span:nth-child(2){animation-delay:3s}
.hero-rotator span:nth-child(3){animation-delay:6s}

.hero-sub{
  font-size:clamp(16px,1.8vw,20px);line-height:1.7;color:var(--text-tertiary);
  max-width:580px;margin-bottom:var(--s-40);
}
.hero-actions{display:flex;gap:var(--s-16);flex-wrap:wrap;align-items:center}

.btn-primary svg,.btn-ghost svg{width:16px;height:16px;flex-shrink:0}

/* ============================================
   Stats Bar
   ============================================ */
.stats-bar{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;background:var(--gradient-stats);
}
.stats-inner{display:flex;max-width:1200px;margin:0 auto}
.stat{flex:1;text-align:center;padding:var(--s-32) var(--s-20);border-right:1px solid var(--border);position:relative}
.stat:last-child{border-right:none}
.stat-val{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:clamp(28px,3vw,40px);font-weight:800;
  background:var(--gradient-brand-rev);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;line-height:1;
}
.stat-label{font-size:12px;color:var(--text-muted);margin-top:var(--s-6);font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* ============================================
   Trust Logos
   ============================================ */
.trust{padding:var(--s-48) clamp(20px,5vw,60px);border-bottom:1px solid var(--border);overflow:hidden}
.trust-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.trust-label{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.trust-logos{display:flex;align-items:center;flex:1;overflow:hidden;position:relative}
.trust-logos::before,.trust-logos::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.trust-logos::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.trust-logos::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.trust-track{display:flex;align-items:center;gap:clamp(32px,5vw,56px);animation:trustScroll 30s linear infinite;width:max-content;will-change:transform}
.trust-track:hover{animation-play-state:paused}
.trust-name{font-size:15px;font-weight:700;color:var(--text);opacity:.2;transition:opacity .3s;white-space:nowrap}
.trust-name:hover{opacity:.5}
.trust-logo-img{height:22px;width:auto;max-width:120px;object-fit:contain;opacity:.5;transition:opacity .3s;filter:grayscale(1);mix-blend-mode:darken}
.trust-logo-img:hover{opacity:.8;filter:grayscale(0);mix-blend-mode:darken}
[data-theme="dark"] .trust-logo-img{filter:invert(1) grayscale(1);mix-blend-mode:normal;opacity:.4}
[data-theme="dark"] .trust-logo-img:hover{filter:invert(1);opacity:.7;mix-blend-mode:normal}
@media(max-width:1024px){
  .trust-inner{flex-direction:column;gap:var(--s-16)}
  .trust-track{animation-duration:18s}
}
@keyframes trustScroll{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}

/* ============================================
   Pain Points
   ============================================ */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.pain-card{
  padding:var(--s-24);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-elevated);display:flex;gap:var(--s-16);align-items:flex-start;
  transition:all .3s;box-shadow:var(--shadow-sm);
}
.pain-card:hover{border-color:var(--violet)}
.pain-icon{
  width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--violet-subtle);display:flex;align-items:center;justify-content:center;
}
.pain-icon svg{width:20px;height:20px;stroke:var(--violet);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pain-text{font-size:15px;line-height:1.55;color:var(--text-secondary)}

/* ============================================
   Bento Services Grid
   ============================================ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:var(--s-20)}
.bento-card{
  padding:clamp(28px,3vw,40px);border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--bg-elevated);transition:all .35s;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.bento-card:hover{border-color:var(--violet)}
.bento-card.bento-lg{grid-column:span 2}
.bento-card.bento-wide{grid-column:span 2}
.bento-card.bento-tall{grid-row:span 2}

.bento-icon{
  width:44px;height:44px;border-radius:var(--r-md);margin-bottom:var(--s-16);
  background:var(--violet-subtle);display:flex;align-items:center;justify-content:center;
}
.bento-icon svg{width:24px;height:24px;stroke:var(--violet);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bento-title{font-size:18px;font-weight:700;margin-bottom:var(--s-8);color:var(--text)}
.bento-desc{font-size:14px;color:var(--text-tertiary);line-height:1.6;margin-bottom:var(--s-16)}
.bento-items{display:flex;flex-direction:column;gap:var(--s-8);flex:1}
.bento-item{
  font-size:13px;color:var(--text-tertiary);line-height:1.5;padding-left:var(--s-16);position:relative;
}
.bento-item::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--violet)}

.bento-result{
  display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:13px;font-weight:600;color:var(--lime);
  padding:8px 14px;border-radius:var(--r-sm);
  background:var(--lime-subtle);border:1px solid rgba(107,163,0,.15);
  margin-top:auto;align-self:flex-start;
}

/* ============================================
   Comparison Table
   ============================================ */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.cmp-col{display:flex;flex-direction:column}
.cmp-head{padding:20px 32px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cmp-head-old{background:var(--bg-sunken);color:var(--text-muted);border-bottom:1px solid var(--border)}
.cmp-head-new{background:var(--violet);color:#FFFFFF;border-bottom:1px solid var(--violet)}
.cmp-row{padding:20px 32px;font-size:14px;line-height:1.6;border-bottom:1px solid var(--border)}
.cmp-col:first-child .cmp-row{color:var(--text-muted);border-right:1px solid var(--border)}
.cmp-col:last-child .cmp-row{color:var(--text);font-weight:600}
[data-theme="dark"] .cmp-head-old{background:var(--bg-elevated)}

/* ============================================
   Story / About
   ============================================ */
.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.story-text{font-size:17px;color:var(--text-tertiary);line-height:1.8}
.story-values{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-elevated);box-shadow:var(--shadow-sm)}
.story-value{border-bottom:1px solid var(--border)}
.story-value:last-child{border-bottom:none}
.story-value-head{
  padding:20px 24px;font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .3s;
  -webkit-user-select:none;user-select:none;
}
.story-value-head:hover{background:var(--bg-sunken)}
.story-value-head::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--violet);flex-shrink:0}
.story-value-head::after{
  content:'';width:8px;height:8px;
  border-left:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(-45deg);margin-left:auto;flex-shrink:0;transition:transform .3s;
}
.story-value.open .story-value-head::after{transform:rotate(135deg)}
.story-value-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.story-value.open .story-value-body{max-height:200px}
.story-value-desc{padding:0 24px 20px 38px;font-size:14px;line-height:1.6;color:var(--text-muted)}

/* ============================================
   Phases / Process
   ============================================ */
.phases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-24);position:relative}
.phase-card{text-align:center;position:relative;z-index:1}
.phase-number{
  width:64px;height:64px;border-radius:50%;background:var(--bg-elevated);
  border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-20);transition:all .4s;box-shadow:var(--shadow-sm);
}
.phase-number svg{width:24px;height:24px;stroke:var(--text-muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.phase-card:hover .phase-number{border-color:var(--lime);box-shadow:0 0 0 6px rgba(107,163,0,.08)}
.phase-card:hover .phase-number svg{stroke:var(--lime)}
.phase-title{font-size:16px;font-weight:700;margin-bottom:var(--s-6);color:var(--text)}
.phase-dur{font-size:12px;color:var(--violet);font-weight:600;margin-bottom:var(--s-8)}
.phase-desc{font-size:13px;color:var(--text-muted);line-height:1.5}
.phases-line{position:absolute;top:32px;left:12%;right:12%;height:2px;background:var(--border);z-index:0}

/* ============================================
   Case Studies — Horizontal Scroll
   ============================================ */
.cases-scroll-wrapper{overflow-x:clip;overflow-y:visible}
.cases-scroll{
  display:flex;gap:var(--s-24);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:20px clamp(20px,5vw,60px) 20px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cases-scroll::-webkit-scrollbar{display:none}

.case-card{
  scroll-snap-align:start;flex-shrink:0;
  width:min(420px,80vw);border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;background:var(--bg-elevated);transition:all .35s;
  box-shadow:var(--shadow-sm);color:inherit;display:flex;flex-direction:column;
}
.case-card:hover{border-color:var(--violet)}
.case-card.case-featured{width:min(640px,85vw)}

.case-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--bg-sunken)}
.case-card:not(.case-featured) .case-img{aspect-ratio:1/1}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.case-card:hover .case-img img{transform:scale(1.04)}
.case-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg-elevated) 0%,transparent 50%);
}
[data-theme="dark"] .case-img::after{background:linear-gradient(to top,var(--bg-elevated) 0%,transparent 50%)}

.case-badge{
  position:absolute;top:var(--s-16);left:var(--s-16);z-index:1;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(91,33,182,.85);backdrop-filter:blur(8px);
  padding:5px 12px;border-radius:var(--r-xs);
}
.case-body{padding:var(--s-24);flex:1;display:flex;flex-direction:column}
.case-name{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:20px;font-weight:800;margin-bottom:var(--s-8);color:var(--text)}
.case-desc{font-size:14px;color:var(--text-tertiary);line-height:1.6;margin-bottom:var(--s-16)}
.case-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);margin-top:auto}
.case-result{
  display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:13px;font-weight:600;color:var(--lime);
  padding:8px 14px;border-radius:var(--r-sm);
  background:var(--lime-subtle);border:1px solid rgba(107,163,0,.15);
}
.case-link{
  display:inline-flex;align-items:center;gap:var(--s-6);
  font-size:13px;font-weight:600;color:var(--violet);transition:color .25s;
  padding-top:var(--s-16);
}
.case-coming-soon{
  color:var(--text-muted);font-weight:500;font-style:italic;font-size:12px;
  letter-spacing:.03em;margin-top:auto;
}
.case-link svg{width:14px;height:14px;transition:transform .25s}
.case-card:hover .case-link svg{transform:translateX(4px)}

/* Case metrics (featured) */
.case-metrics{display:flex;gap:var(--s-12);margin-top:auto}
.case-metric{text-align:center;padding:var(--s-12) var(--s-16);border:1px solid var(--border);border-radius:var(--r-md);background:rgba(0,0,0,.02);flex:1;min-width:0}
.case-metric-val{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:22px;font-weight:800;color:var(--text)}
.case-metric-label{font-size:10px;color:var(--text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.08em}
[data-theme="dark"] .case-metric{background:rgba(255,255,255,.03)}

/* Scroll hint */
.cases-hint{
  display:none;align-items:center;gap:var(--s-6);
  color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 14px;border:1px solid var(--border);border-radius:var(--r-full);
}
@media(min-width:769px){.cases-hint{display:inline-flex}}
.cases-hint svg{width:14px;height:14px;animation:scrollHint 1.5s ease-in-out infinite}
@keyframes scrollHint{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ============================================
   Team
   ============================================ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-32);text-align:center}
.team-card{transition:transform .3s}
.team-card:hover{transform:translateY(-4px)}
.team-avatar{
  width:100%;max-width:160px;aspect-ratio:1;display:block;object-fit:cover;
  margin:0 auto var(--s-16);border:2px solid var(--border);border-radius:50%;
  transition:all .4s;background:var(--bg-sunken);
}
.team-card:hover .team-avatar{border-color:var(--violet);box-shadow:0 0 0 6px rgba(91,33,182,.08)}
.team-name{font-size:16px;font-weight:700;color:var(--text)}
.team-role{font-size:12px;color:var(--text-muted);line-height:1.4;margin-top:var(--s-4)}

.team-stats{
  display:flex;justify-content:center;gap:clamp(24px,5vw,72px);margin-top:var(--s-48);
  padding:var(--s-32) clamp(16px,4vw,48px);border:1px solid var(--border);
  border-radius:var(--r-xl);background:var(--bg-elevated);box-shadow:var(--shadow-sm);
}
.team-stat{text-align:center}
.team-stat-val{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:28px;font-weight:800;background:var(--gradient-brand-rev);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.team-stat-label{font-size:12px;color:var(--text-muted);margin-top:var(--s-4);font-weight:500}

/* ============================================
   Testimonials Marquee
   ============================================ */
.testimonials{overflow:hidden;padding:var(--s-48) 0;position:relative}
.testimonials::before,.testimonials::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.testimonials::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.testimonials::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}

.marquee-track{display:flex;gap:var(--s-24);animation:marquee 40s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.testimonial-card{
  flex-shrink:0;width:360px;padding:var(--s-32);
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--bg-elevated);box-shadow:var(--shadow-sm);
}
.testimonial-text{font-size:15px;line-height:1.7;color:var(--text-secondary);margin-bottom:var(--s-20);font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:var(--s-12)}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-sunken);object-fit:cover}
.testimonial-info{display:flex;flex-direction:column}
.testimonial-name{font-size:14px;font-weight:700;color:var(--text)}
.testimonial-title{font-size:12px;color:var(--text-muted)}

/* ============================================
   FAQ
   ============================================ */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-elevated);box-shadow:var(--shadow-sm)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{
  padding:20px 24px;font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:var(--s-12);cursor:pointer;
  transition:background .3s;background:none;border:none;width:100%;text-align:left;
}
.faq-q:hover{background:var(--bg-sunken)}
.faq-q::after{
  content:'';width:8px;height:8px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);margin-left:auto;flex-shrink:0;transition:transform .3s;
}
.faq-item.open .faq-q::after{transform:rotate(-135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 24px 20px;font-size:14px;line-height:1.7;color:var(--text-muted)}

/* ============================================
   CTA Section
   ============================================ */
.sec-cta{background:var(--violet);color:#FFFFFF;position:relative;overflow:hidden}
.sec-cta .label{color:rgba(255,255,255,.7)}.sec-cta .label::before{background:var(--lime)}
.sec-cta h2{color:#FFFFFF}
.sec-cta .sub{color:rgba(255,255,255,.7)}

.cta-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.cta-checks{display:flex;flex-direction:column;gap:var(--s-16);margin-top:var(--s-32)}
.cta-check{display:flex;align-items:center;gap:var(--s-12);font-size:14px;color:rgba(255,255,255,.85)}
.cta-check-icon{
  width:28px;height:28px;border-radius:var(--r-sm);flex-shrink:0;
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
}
.cta-check-icon svg{width:14px;height:14px;stroke:#FFFFFF;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Form Card inside CTA */
.form-card{
  padding:clamp(28px,4vw,40px);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-xl);background:var(--bg-elevated);color:var(--text);
  box-shadow:var(--shadow-lg);
}
.form-card h3{margin-bottom:var(--s-24)}

.steps-bar{display:flex;align-items:center;gap:var(--s-12);margin-bottom:var(--s-24)}
.steps-track{height:3px;background:var(--border);width:100%;overflow:hidden;border-radius:var(--r-full)}
.steps-fill{height:100%;background:var(--gradient-brand);border-radius:var(--r-full);transition:width .4s}
.steps-label{font-size:11px;color:var(--text-muted);font-weight:600;transition:color .3s;letter-spacing:.04em;white-space:nowrap;cursor:pointer}
.steps-label.active{color:var(--violet)}
.steps-label.done{color:var(--text)}

.step{display:none}.step.active{display:block}
.step-title{font-size:17px;font-weight:700;margin-bottom:var(--s-20);color:var(--text)}
.step-opts{display:flex;flex-direction:column;gap:var(--s-10)}
.step-opt{cursor:pointer}
.step-opt input{position:absolute;opacity:0;pointer-events:none}
.step-opt-box{
  display:block;padding:16px 20px;border:1px solid var(--border);border-radius:var(--r-md);
  font-size:14px;color:var(--text-tertiary);transition:all .25s;
}
.step-opt input:checked+.step-opt-box{border-color:var(--lime);background:var(--lime-subtle);color:var(--text)}
.step-opt-box:hover{border-color:var(--border-hover)}

.form-group{display:flex;flex-direction:column;gap:var(--s-6);margin-bottom:var(--s-16)}
.form-group label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.form-group input,.form-group select,.form-group textarea{
  padding:14px 18px;border:1px solid var(--border);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;outline:none;background:var(--bg-elevated);
  color:var(--text);transition:border-color .25s;-webkit-appearance:none;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--violet)}
.form-group input:invalid:not(:placeholder-shown){border-color:#EF4444}

.form-submit{
  background:var(--violet);color:#FFFFFF;border:none;
  padding:16px 32px;font-size:14px;font-weight:700;
  width:100%;border-radius:var(--r-md);transition:all .25s;letter-spacing:.01em;
}
.form-submit:hover{background:var(--violet-hover)}
.form-submit:active{transform:scale(.98)}
[data-theme="dark"] .form-submit{background:var(--lime);color:var(--bg)}

.form-back{
  background:transparent;color:var(--text-tertiary);border:1px solid var(--border);
  padding:16px 20px;font-size:14px;font-weight:600;
  border-radius:var(--r-md);transition:all .25s;
}
.form-back:hover{border-color:var(--border-hover);color:var(--text)}

.form-nav{display:flex;gap:var(--s-12);margin-top:var(--s-24)}

/* ============================================
   Footer
   ============================================ */
footer{background:var(--bg-inverse);color:var(--text-inverse);padding:clamp(56px,7vw,80px) clamp(20px,5vw,60px) var(--s-32)}
[data-theme="dark"] footer{background:var(--bg-elevated);color:var(--text)}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(32px,4vw,64px)}
.footer-col-brand{padding-right:var(--s-24)}
.footer-logo svg{height:20px;width:auto;display:block;color:var(--text-inverse)}
[data-theme="dark"] .footer-logo svg{color:var(--text)}
.footer-desc{font-size:13px;color:rgba(244,244,245,.5);margin-top:var(--s-12);line-height:1.6}
[data-theme="dark"] .footer-desc{color:var(--text-muted)}
.footer-heading{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,244,245,.35);margin-bottom:var(--s-16)}
[data-theme="dark"] .footer-heading{color:var(--text-muted)}
.footer-links{display:flex;flex-direction:column;gap:var(--s-10)}
.footer-links a{font-size:13px;color:rgba(244,244,245,.65);transition:color .25s}
.footer-links a:hover{color:#FFFFFF}
[data-theme="dark"] .footer-links a{color:var(--text-tertiary)}
[data-theme="dark"] .footer-links a:hover{color:var(--text)}
.footer-bottom{
  max-width:1200px;margin:var(--s-48) auto 0;font-size:11px;color:rgba(244,244,245,.3);
  padding-top:var(--s-24);border-top:1px solid rgba(244,244,245,.1);display:flex;justify-content:center;gap:var(--s-6);
}

/* ============================================
   Mobile
   ============================================ */
.menu-btn{
  display:none;background:none;border:1px solid var(--border);padding:0;
  border-radius:var(--r-sm);position:fixed;top:16px;right:clamp(20px,5vw,60px);
  z-index:1001;width:40px;height:40px;align-items:center;justify-content:center;
}
.menu-btn svg{width:20px;height:20px;color:var(--text);transition:opacity .3s,transform .3s;position:absolute;pointer-events:none}
.menu-btn .menu-icon{opacity:1;transform:rotate(0)}
.menu-btn .close-icon{opacity:0;transform:rotate(-90deg)}
.menu-btn.open .menu-icon{opacity:0;transform:rotate(90deg)}
.menu-btn.open .close-icon{opacity:1;transform:rotate(0)}

.mobile-overlay{
  display:none;position:fixed;inset:0;z-index:1000;
  background:var(--bg);padding:100px clamp(20px,5vw,60px) 60px;
  flex-direction:column;justify-content:flex-start;align-items:center;gap:0;
  opacity:0;transition:opacity .3s;
}
.mobile-overlay.show{display:flex;opacity:1}
.mobile-overlay .nav-link{display:block;font-size:20px;font-weight:500;padding:18px 0;border-bottom:1px solid var(--border);color:var(--text-muted);text-align:center;width:100%}
.mobile-overlay .nav-link:hover,.mobile-overlay .nav-link.active{color:var(--text)}
.mobile-overlay .mobile-bottom{margin-top:var(--s-48)}
.mobile-overlay .nav-cta{width:100%;text-align:center;padding:16px 32px;font-size:16px;margin-top:var(--s-16);border-radius:var(--r-md)}

.mobile-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-24);gap:var(--s-12);width:100%}
.mobile-overlay .mobile-bottom .lang-switch{margin-top:0;align-self:auto}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-right .lang-switch,.nav-right .theme-toggle,.nav-right .nav-cta{display:none}
  .menu-btn{display:flex}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-card.bento-lg{grid-column:span 2;grid-row:span 1}
  .phases-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-32)}
  .phases-line{display:none}
  .story-layout,.cta-layout{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-col-brand{grid-column:1/-1;padding-right:0}
}

@media(max-width:768px){
  .stat{flex:1 1 50%;border-bottom:1px solid var(--border)}
  .stat:nth-child(odd){border-right:1px solid var(--border)}
  .stat:nth-child(even){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}
  .stats-inner{flex-wrap:wrap}
  .pain-grid{grid-template-columns:1fr 1fr}
  .cmp-grid{grid-template-columns:1fr}
  .cmp-col:first-child .cmp-row{border-right:none}
  .team-stats{flex-wrap:nowrap;gap:var(--s-16)}
  .team-stat-val{font-size:22px}
  .team-stat-label{font-size:10px}
  .cases-scroll-wrapper{overflow:visible}
  .cases-scroll{flex-direction:column;overflow:visible;padding:0 0 var(--s-24)}
  #cases{padding-right:clamp(20px,5vw,60px) !important}
  #cases .mx{max-width:1200px !important}
  .case-card,.case-card.case-featured{width:100%;flex-shrink:1}
  .case-card{align-self:auto}
  .cases-hint{display:none}
}

@media(max-width:480px){
  h1{font-size:clamp(32px,8vw,48px)}
  .pain-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento-card.bento-lg,.bento-card.bento-wide{grid-column:span 1}
  .team-grid{grid-template-columns:1fr 1fr}
  .team-avatar{max-width:120px}
  .case-metrics{flex-wrap:nowrap;gap:var(--s-8);margin-bottom:var(--s-8)}
  .case-metric{padding:var(--s-10) var(--s-8)}
  .case-metric-val{font-size:18px}
  .case-metric-label{font-size:9px}
  .case-img,.case-card:not(.case-featured) .case-img{aspect-ratio:2/1}
  .testimonial-card{width:300px}
  .cta-layout{gap:var(--s-32)}
  .form-card{margin:0 calc(-1 * clamp(8px,2vw,16px))}
  .form-card [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  .steps-bar{flex-wrap:wrap;gap:var(--s-8)}
  .steps-label{font-size:10px;white-space:normal}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col-brand{grid-column:1/-1}
}

/* ============================================
   Cookie Banner
   ============================================ */
.hidden{display:none}
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:2000;background:var(--bg-inverse);color:var(--text-inverse);padding:var(--s-24) clamp(20px,5vw,60px);transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);max-height:100vh;overflow-y:auto}
.cookie-banner.show{transform:translateY(0)}
[data-theme="dark"] .cookie-banner{background:var(--bg-elevated);color:var(--text);border-top:1px solid var(--border)}
.cookie-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;gap:var(--s-24)}
.cookie-content{flex:1}
.cookie-title{font-size:14px;font-weight:700;margin-bottom:var(--s-6)}
.cookie-text{font-size:12px;line-height:1.6;color:rgba(244,244,245,.6)}
.cookie-text a{color:rgba(244,244,245,.85);text-decoration:underline}
[data-theme="dark"] .cookie-text{color:var(--text-muted)}
[data-theme="dark"] .cookie-text a{color:var(--text)}
.cookie-options{display:flex;flex-direction:column;gap:var(--s-8);margin-top:var(--s-12);padding-top:var(--s-12);border-top:1px solid rgba(244,244,245,.1)}
[data-theme="dark"] .cookie-options{border-top-color:var(--border)}
.cookie-opt{display:flex;align-items:center;gap:var(--s-10);font-size:13px;cursor:pointer}
.cookie-opt input{accent-color:var(--violet);width:16px;height:16px}
.cookie-opt span:first-of-type{font-weight:600}
.cookie-opt-info{font-size:11px;color:rgba(244,244,245,.35);margin-left:auto}
[data-theme="dark"] .cookie-opt-info{color:var(--text-muted)}
.cookie-actions{display:flex;flex-direction:column;gap:var(--s-8);flex-shrink:0;align-self:center}
.cookie-link{background:none;border:none;color:rgba(244,244,245,.5);font-size:12px;font-weight:500;cursor:pointer;padding:4px 0;font-family:inherit;text-decoration:underline;text-align:center}
.cookie-link:hover{color:rgba(244,244,245,.8)}
[data-theme="dark"] .cookie-link{color:var(--text-muted)}
.cookie-reject{background:transparent;border:1px solid rgba(244,244,245,.2);color:rgba(244,244,245,.7);padding:10px 24px;font-size:13px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap}
.cookie-reject:hover{border-color:rgba(244,244,245,.4)}
[data-theme="dark"] .cookie-reject{border-color:var(--border);color:var(--text-muted)}
.cookie-accept{background:#FFFFFF;color:#09090B;border:none;padding:10px 24px;font-size:13px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap}
.cookie-accept:hover{background:rgba(255,255,255,.9)}
[data-theme="dark"] .cookie-accept{background:var(--violet);color:#FFFFFF}
@media(max-width:640px){
  .cookie-banner{padding:var(--s-16) var(--s-16);max-height:85vh}
  .cookie-inner{flex-direction:column;gap:var(--s-12)}
  .cookie-actions{flex-direction:row;width:100%}
  .cookie-reject,.cookie-accept{flex:1;padding:12px 16px}
  .cookie-link{order:-1}
  .cookie-options{gap:var(--s-6)}
  .cookie-opt{font-size:12px}
  .cookie-text{font-size:11px}
}