/* ============================================================
   SONIC LOGISTICS — Apple-Inspired Design System v2
   ============================================================ */
@import url('../fonts/inter.css');

/*
================================================================================
SONIC LOGISTICS — DEVELOPER NOTE (CSS)
================================================================================
File: assets/css/style.css
Purpose: Global styles and responsive design system.
Developer: Sonic Dev Team (Antigravity AI)

Organization:
1.  Variables (Colors, Spacing, Typography)
2.  Global Reset & Base Defaults
3.  Components (Buttons, Cards, Forms, Navbar)
4.  Sections (Hero, Services, KPIs)
5.  Animations (Reveals, Floating, Hover effects)
6.  Special: Creative Scroll (Desktop & Mobile states)
7.  Responsive Overrides (Mobile-first principles)

Design Tokens:
- Green Accent: #11eb63 (Digital Green)
- Background: #0a0a0a (Rich Black)
- Text Primary: #f5f5f7 (Apple Screen White)
================================================================================
*/
:root {
  --bg: #030303;
  --bg-alt: rgba(10, 10, 10, 0.75);
  --bg-secondary: rgba(16, 16, 16, 0.7);
  --bg-card: rgba(20, 20, 20, 0.5);
  --bg-card-hover: rgba(28, 28, 28, 0.75);
  --bg-dark: #000000;
  --bg-dark-alt: rgba(8, 8, 8, 0.9);
  --accent: #11eb63;
  --accent-hover: #0cd856;
  --accent-glow: rgba(17,235,99,0.08);
  --accent-glow-strong: rgba(17,235,99,0.18);
  --white: #ffffff;
  --text: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #86868b;
  --text-on-dark: #f5f5f7;
  --text-secondary-dark: #a1a1a6;
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);
  --danger: #ff3b30;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --max-width: 1240px;
  --nav-height: 56px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);font-weight:400;color:var(--text-secondary);background:var(--bg);line-height:1.6;overflow-x:hidden;color-scheme:dark}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.section-dark, .section-alt, .trust-bar, .services-overview, .co2-section, .future-section, .testimonials-section, .faq-section, .careers-teaser-section, .footer, .contact-info-card, .contact-form, .mvv-card, .timeline-content, .feature-card, .pricing-card, .microhub-card, .step-item, .process-step, .why-card, .role-card, .benefit-item, .cookie-banner { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--text);font-weight:700;line-height:1.1;letter-spacing:-0.035em}
h1{font-size:clamp(3rem,6vw,5.5rem);font-weight:800;letter-spacing:-0.04em}
h2{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:600;letter-spacing:-0.02em}
.section-eyebrow{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}

/* Layout */
.container{max-width:var(--max-width);margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.section{padding:clamp(80px,12vw,160px) 0}
.section-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section-dark h2,.section-dark h3{color:var(--text-on-dark)}
.section-dark p,.section-dark .text-secondary{color:var(--text-secondary-dark)}
.section-alt{background:var(--bg-alt)}

/* Skip Link */
.skip-link{position:fixed;top:-100%;left:1rem;z-index:99999;padding:0.75rem 1.5rem;background:var(--accent);color:var(--bg-dark);font-weight:700;font-size:0.875rem;border-radius:0 0 8px 8px;transition:top 0.2s}
.skip-link:focus{top:0}

/* Preloader */
.preloader{position:fixed;inset:0;z-index:10000;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease),visibility 1s;overflow:hidden}
.preloader::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(17,235,99,0.06) 0%,transparent 70%);pointer-events:none;animation:preloaderGlow 3s ease-in-out infinite}
@keyframes preloaderGlow{0%,100%{transform:scale(0.8);opacity:0.4}50%{transform:scale(1.2);opacity:0.8}}
.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader video{width:clamp(180px,35vw,400px);height:auto;object-fit:contain;border-radius:12px;position:relative;z-index:1}
.preloader img{width:clamp(80px,15vw,160px);height:auto;object-fit:contain;position:relative;z-index:1}

/* Page Transition — Premium Logo Fly-Through */
.page-transition{position:fixed;inset:0;z-index:9999;background:rgb(0,0,0);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.page-transition img{width:clamp(160px,20vw,260px);height:auto;opacity:1;will-change:transform,filter;transform:translateX(-100vw);filter:drop-shadow(0 0 20px rgba(17,235,99,0.3)) drop-shadow(0 0 60px rgba(17,235,99,0.08))}

/* Navigation */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-height);z-index:1000;background:rgba(10,10,10,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;transition:all 0.4s var(--ease)}
.navbar.scrolled{background:rgba(10,10,10,0.92);box-shadow:0 1px 0 rgba(255,255,255,0.06)}
.navbar .nav-links a{color:var(--text-secondary)}
.navbar .nav-links a:hover,.navbar .nav-links a.active{color:var(--white)}
.navbar .hamburger span{background:var(--white)}
.navbar.dark-mode{background:rgba(10,10,10,0.72);border-bottom-color:rgba(255,255,255,0.08)}
.navbar.dark-mode.scrolled{background:rgba(10,10,10,0.92)}
.navbar.dark-mode .nav-links a{color:var(--text-secondary-dark)}
.navbar.dark-mode .nav-links a:hover,.navbar.dark-mode .nav-links a.active{color:var(--white)}
.navbar.dark-mode .hamburger span{background:var(--white)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo img{height:clamp(40px,4vw,50px);width:auto;border-radius:6px;}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:0.8rem;font-weight:400;color:var(--text-secondary);position:relative;padding:4px 0;transition:color 0.3s;letter-spacing:0.01em}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white);font-weight:500}
.nav-right{display:flex;align-items:center;gap:0.75rem}
.lang-toggle{display:flex;align-items:center;background:rgba(255,255,255,0.08);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.12)}
.lang-toggle button{padding:5px 12px;font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.3s;color:var(--text-tertiary);border-radius:20px}
.lang-toggle button.active{background:var(--accent);color:#0a0a0a}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:1rem 2.25rem;font-size:0.875rem;font-weight:600;letter-spacing:0.01em;border-radius:980px;transition:all 0.35s var(--ease-out);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.btn-primary{background:var(--accent);color:#000;box-shadow:0 0 0 0 rgba(17,235,99,0);border:1px solid rgba(255,255,255,0.1)}
.btn-primary:hover{background:var(--accent-hover);transform:scale(1.025);box-shadow:0 0 30px rgba(17,235,99,0.3),0 0 80px rgba(17,235,99,0.15)}
.btn-primary.btn-glow{animation:btnGlow 2.5s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 0 8px rgba(17,235,99,0.15)}50%{box-shadow:0 0 24px rgba(17,235,99,0.35),0 0 60px rgba(17,235,99,0.1)}}
.btn-dark{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.btn-dark:hover{background:var(--bg-card-hover);transform:scale(1.025);border-color:rgba(255,255,255,0.2)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,0.05);transform:scale(1.025)}
.btn-ghost-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.3)}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,0.15);transform:scale(1.025)}
.btn-nav-cta{padding:0.6rem 1.6rem;font-size:0.8rem;margin-left:0.5rem}
.mobile-nav-cta{margin-top:1.5rem}
.btn-full{width:100%}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;width:24px;cursor:pointer;z-index:1100;padding:4px}
.hamburger span{display:block;height:1.5px;background:var(--text);border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:1050;background:rgba(10,10,10,0.98);backdrop-filter:blur(30px);flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.8rem;font-weight:700;color:var(--white);opacity:0;transform:translateY(20px);transition:opacity 0.4s,transform 0.4s,color 0.3s}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu a:hover{color:var(--accent)}
.mobile-menu a:nth-child(1){transition-delay:.05s}
.mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.15s}
.mobile-menu a:nth-child(4){transition-delay:.2s}
.mobile-menu a:nth-child(5){transition-delay:.25s}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

/* ── Video Background ── */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-motion-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroVideoReveal 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes heroVideoReveal {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1.0); }
}

/* ── Texture & Vignette ── */
.hero-texture-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: url('../media/used/hero-bg-abstract.webp') center/cover no-repeat;
  opacity: 0.95; mix-blend-mode: normal;
  pointer-events: none;
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  background:
    rgba(10, 10, 10, 0.45),
    linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.9) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* ── Centered Content Stage ── */
.hero-center-stage {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 960px;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(17, 235, 99, 0.3);
  border-radius: 100px;
  background: rgba(17, 235, 99, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(24px);
  animation: heroCascade 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

/* Headline */
.hero-headline {
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 20px rgba(0,0,0,0.7), 0 1px 5px rgba(0,0,0,0.6);
  margin: 0 0 1.5rem;
  opacity: 0; transform: translateY(40px);
  animation: heroCascade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Tagline */
.hero-tagline {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.6);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  margin-bottom: 3rem;
  opacity: 0; transform: translateY(24px);
  animation: heroCascade 1s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: heroCascade 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
}
.hero-ctas .btn { padding: 0.85rem 2.2rem; font-size: 0.95rem; }

@keyframes heroCascade {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Floating Bottom Stats ── */
.hero-bottom-bar {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 2.5rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(16px) translateX(-50%);
  animation: heroBottomReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
@keyframes heroBottomReveal {
  to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.hero-stat-value { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.hero-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); }
.hero-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.12); }

/* ── Scroll Hint ── */
.hero-scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  animation: heroCascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
}
.hero-scroll-hint span {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.35);
}
.hero-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ── Hero Responsive ── */
@media (max-width: 768px) {
  .hero-headline { font-size: clamp(2rem, 8vw, 2.5rem); }
  .hero-bottom-bar { gap: 1rem; padding: 0.8rem 1rem; bottom: 1.5rem; }
  .hero-stat-value { font-size: 0.85rem; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .hero-bottom-bar { gap: 0.8rem; padding: 0.7rem 1rem; bottom: 1rem; }
  .hero-stat-divider { height: 20px; }
}

/* ============ CREATIVE SCROLL JOURNEY ============ */
.creative-scroll-wrapper {
  position: relative;
  height: 700vh;
  background: var(--bg-dark);
  color: var(--white);
}

.creative-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.creative-scroll-track {
  display: flex;
  height: 100vh;
  width: 300vw;
  will-change: transform;
  /* Transform handled dynamically in JS */
}

.scroll-scene {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  perspective: 1000px;
}

/* ---- Chapter Number Badge ---- */
.scene-chapter-num {
  display: block;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(17, 235, 99, 0.35);
  margin-bottom: 0.5rem;
  font-feature-settings: 'tnum';
  user-select: none;
}

/* ---- Accent Line Decorator ---- */
.scene-accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(17,235,99,0.2));
  border-radius: 3px;
  margin: 1.5rem auto 0;
  opacity: 0.8;
}
.glass-card .scene-accent-line {
  margin: 1.5rem 0 0;
}

/* Scene 1: Depot to Hub */
.scene-1-media {
  position: absolute;
  width: 80vw;
  height: 80vh;
  border-radius: 20px;
  overflow: hidden;
  z-index: 2;
  will-change: transform;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.scene-1-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-1-content {
  position: relative;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
}

/* Scene 2: Hub to Neighborhood */
.scene-2-media {
  position: absolute;
  width: 50vw;
  height: 65vh;
  left: 10vw;
  border-radius: 30px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  transform: scale(0.9);
  opacity: 0;
  will-change: transform, opacity;
}
.scene-2-media video,
.scene-2-media canvas,
.scene-2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.glass-card {
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 3.5rem;
  border-radius: 24px;
  max-width: 500px;
  z-index: 5;
  opacity: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: box-shadow 0.4s var(--ease-out);
}
.card-right {
  position: absolute;
  right: 10%;
  transform: translateX(100px);
}
.card-left {
  position: absolute;
  left: 10%;
  transform: translateX(-100px);
}

/* Scene 3: Neighborhood to Door */
.scene-3 {
  background: #000;
}
.scene-3-media {
  position: absolute;
  width: 60vw;
  height: 70vh;
  right: 5%;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.scene-3-media video,
.scene-3-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}
.scene-3-content {
  z-index: 5;
}

.center-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}
.center-content h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--white);
  letter-spacing: -0.04em;
}

/* Typography & General Scroll Elements */
.scroll-scene h2 {
  margin-bottom: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.scroll-scene p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  font-weight: 400;
}
.scene-eyebrow { 
  display: block; 
  font-size: 0.72rem; 
  color: var(--accent); 
  text-transform: uppercase; 
  letter-spacing: 0.25em; 
  margin-bottom: 0.75rem; 
  font-weight: 700; 
}

/* Progress Bar indicator */
.creative-progress {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  z-index: 50;
}
.creative-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(17,235,99,0.3);
}

/* ============ TRUST BAR / MARQUEE ============ */
.trust-bar{padding:2rem 0;background:rgba(0,0,0,0.25);border-top:1px solid rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.03);overflow:hidden;position:relative;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.trust-bar-bg{display:none}
.marquee-track{display:flex;align-items:center;gap:3rem;animation:marquee 60s linear infinite;width:max-content}
.marquee-track img{height:90px;width:auto;max-width:240px;object-fit:contain;opacity:0.85;margin:-20px 0;transition:all 0.4s;filter:grayscale(1) contrast(100) brightness(1) invert(1);mix-blend-mode:screen}
.marquee-track img:hover{transform:scale(1.1);opacity:1}
.marquee-track .trust-divider{width:1px;height:32px;background:rgba(255,255,255,0.15);flex-shrink:0;border-radius:1px}
.trust-label{font-size:0.7rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ KPI STRIP ============ */
.kpi-section{position:relative;overflow:hidden;padding:clamp(60px,10vw,120px) 0}
.kpi-section .kpi-bg{position:absolute;inset:0;z-index:0}
.kpi-section .kpi-bg video{width:100%;height:100%;object-fit:cover;opacity:0.15}
.kpi-section .container{position:relative;z-index:1}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.kpi-card{padding:3rem 1.5rem;position:relative}
.kpi-card:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,0.1)}
.kpi-value{font-size:clamp(3rem,6vw,5rem);font-weight:800;color:var(--accent);margin-bottom:0.75rem;letter-spacing:-0.03em;text-shadow:0 0 40px rgba(0,230,77,0.15)}
.kpi-label{font-size:0.85rem;color:var(--text-secondary-dark);letter-spacing:0.08em;text-transform:uppercase}
.kpi-card::after{background:rgba(255,255,255,0.06)!important}
.kpi-card{border-bottom:2px solid transparent;transition:all 0.5s var(--ease-out)}
.kpi-card:hover{border-bottom-color:var(--accent);transform:translateY(-5px);background:linear-gradient(to top, rgba(17,235,99,0.05), transparent)}

/* ============ HORIZONTAL STORY SCROLL ============ */
.horizontal-scroll-section{position:relative;background:var(--bg-dark)}
.horizontal-scroll-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.horizontal-scroll-track{display:flex;height:100%;will-change:transform}
.horizontal-scroll-panel{min-width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.panel-bg{position:absolute;inset:0;z-index:0}
.panel-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.panel-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:1}
.panel-content{position:relative;z-index:2;max-width:560px;text-align:center;padding:2rem}
.panel-content .panel-number{font-size:0.7rem;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:block}
.panel-content h2{color:var(--white);margin-bottom:1.25rem;font-size:clamp(1.8rem,3.5vw,3rem)}
.panel-content p{color:rgba(255,255,255,0.7);font-size:1.05rem;line-height:1.7}
.scroll-progress{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:100;display:flex;gap:8px;opacity:0;transition:opacity 0.4s}
.scroll-progress.visible{opacity:1}
.scroll-progress-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all 0.4s}
.scroll-progress-dot.active{background:var(--accent);transform:scale(1.3)}

/* ============ SERVICES OVERVIEW ============ */
.services-overview{position:relative;overflow:hidden}
.services-overview .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:600px}
.split-card{position:relative;overflow:hidden;display:flex;align-items:flex-end;cursor:pointer;transition:all 0.6s var(--ease)}
.split-card .card-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.split-card .card-bg video,.split-card .card-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.split-card:hover .card-bg video,.split-card:hover .card-bg img{transform:scale(1.08)}
.split-card .card-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.2) 60%,transparent);z-index:1;transition:background 0.4s}
.split-card .card-inner{position:relative;z-index:2;padding:3rem;width:100%}
.split-card .card-label{display:inline-block;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.2em;color:var(--accent);margin-bottom:1rem;padding:6px 16px;background:rgba(0,230,91,0.1);border:1px solid rgba(0,230,91,0.2);border-radius:100px}
.split-card h3{font-size:clamp(1.3rem,2.5vw,2rem);color:var(--white);margin-bottom:0.5rem}
.split-card p{color:rgba(255,255,255,0.6);margin-bottom:1.5rem;font-size:0.95rem}
.card-arrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:600;color:var(--accent);letter-spacing:0.05em}
.card-arrow svg{width:18px;height:18px;transition:transform 0.3s}
.split-card:hover .card-arrow svg{transform:translateX(4px)}

/* ============ CO2 / ESG ============ */
.co2-section{padding:80px 0;background:#0a0a0a}
.co2-visual{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.co2-img{border-radius:16px;overflow:hidden}
.co2-img img{width:100%;height:auto}
.co2-data h2{margin-bottom:2rem;color:#ffffff}
.co2-data p{color:rgba(255,255,255,0.75)}
.co2-section .section-eyebrow{color:#00e64d}
.co2-comparison{margin-top:2rem}
.co2-bar-row{margin-bottom:1.5rem}
.co2-bar-row h4{font-size:0.85rem;margin-bottom:0.5rem;color:var(--text)}
.co2-bar-track{width:100%;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.co2-bar-fill{height:100%;border-radius:4px;width:0;transition:width 2s var(--ease-out)}
.co2-bar-fill.red{background:var(--danger)}
.co2-bar-fill.green{background:var(--accent)}
.co2-bar-label{margin-top:0.25rem;font-size:0.75rem;color:var(--text-tertiary)}
.co2-result{font-size:clamp(3rem,6vw,5rem);font-weight:800;color:var(--accent);margin-top:2rem;opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease-out)}
.co2-result.visible{opacity:1;transform:translateY(0)}
.co2-result span{display:block;font-size:0.9rem;color:var(--text-secondary);font-weight:400;margin-top:0.5rem}

/* ============ FUTURE VISION ============ */
.future-section{position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden}
.future-section .parallax-bg{position:absolute;inset:-10%;z-index:0}
.future-section .parallax-bg img,.future-section .parallax-bg video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.future-section .future-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.85),rgba(0,0,0,0.5));z-index:1}
.future-section .container{position:relative;z-index:2}
.future-section h2{color:var(--white);max-width:600px}
.future-section p{color:rgba(255,255,255,0.7);max-width:500px;font-size:1.05rem;line-height:1.8;margin-top:1.5rem}

/* ============ TESTIMONIALS ============ */
.testimonials-section{background:var(--bg-alt)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:16px;padding:2rem;display:flex;flex-direction:column;transition:transform 0.3s var(--ease),box-shadow 0.3s,border-color 0.3s}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.06);border-left-color:var(--accent-hover)}
.testimonial-stars{color:var(--accent);margin-bottom:1rem;font-size:0.85rem;letter-spacing:2px}
.testimonial-text{font-size:0.95rem;color:var(--text-secondary);line-height:1.7;flex-grow:1;margin-bottom:1.5rem}
.testimonial-author{display:flex;align-items:center;gap:0.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-glow-strong);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:var(--accent);flex-shrink:0}
.testimonial-author strong{color:var(--text);display:block;font-size:0.85rem}
.testimonial-author span{font-size:0.75rem;color:var(--text-tertiary)}

/* ============ FAQ ============ */
.faq-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.faq-img{border-radius:16px;overflow:hidden;position:sticky;top:calc(var(--nav-height) + 2rem)}
.faq-img img{width:100%;height:auto}
.faq-list{max-width:100%}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-question{width:100%;background:none;border:none;color:var(--text);font-size:1rem;font-weight:600;text-align:left;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:1rem}
.faq-icon{transition:transform 0.3s;flex-shrink:0;color:var(--text)}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease);color:var(--text-secondary)}
.faq-question[aria-expanded="true"]+.faq-answer{max-height:300px}
.faq-answer p{padding-bottom:1.5rem;line-height:1.7}

/* ============ TEAM BANNER ============ */
.team-banner{position:relative;height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.team-banner .parallax-bg{position:absolute;inset:-10%;z-index:0}
.team-banner .parallax-bg img{width:100%;height:100%;object-fit:cover}
.team-banner .banner-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:1}
.team-banner .banner-content{position:relative;z-index:2;text-align:center}
.team-banner h2{color:var(--white);margin-bottom:1.5rem}

/* ============ CAREERS TEASER ============ */
.careers-teaser-section .careers-teaser{background:var(--bg-alt);padding:4rem;border-radius:24px;text-align:center;border:1px solid var(--border)}
.careers-teaser h2{margin-bottom:1rem}
.careers-teaser p{color:var(--text-secondary);max-width:600px;margin:0 auto 2rem}
.stats-row{display:flex;justify-content:center;gap:3rem;margin-bottom:2rem;flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--accent)}

/* ============ FOOTER ============ */
.footer{background:var(--bg-dark);border-top:none;padding:4rem 0 2rem;color:var(--text-secondary-dark)}
.footer h4{color:var(--accent);font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:1.25rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand img{height:36px;margin-bottom:1rem}
.footer-brand p{color:var(--text-secondary-dark);font-size:0.85rem;max-width:280px}
.footer-nav a{display:block;color:var(--text-secondary-dark);font-size:0.85rem;padding:0.3rem 0;transition:color 0.3s}
.footer-nav a:hover{color:var(--white)}
.footer-contact p{color:var(--text-secondary-dark);font-size:0.85rem;margin-bottom:0.4rem}
.footer-contact a{color:var(--text-secondary-dark);transition:color 0.3s}
.footer-contact a:hover{color:var(--white)}
.footer-social .social-links{display:flex;gap:1rem}
.social-link{color:var(--text-secondary-dark);transition:color 0.3s}
.social-link:hover{color:var(--accent)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,0.08);padding-top:1.5rem;font-size:0.75rem;color:var(--text-tertiary);flex-wrap:wrap;gap:1rem}
.footer-bottom a{color:var(--text-tertiary);transition:color 0.3s;margin-left:1.5rem}
.footer-bottom a:hover{color:var(--white)}

/* ============ SCROLL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(0.95);transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.stagger>*{opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--ease-out),transform 0.6s var(--ease-out)}
.stagger.visible>*:nth-child(1){transition-delay:50ms}
.stagger.visible>*:nth-child(2){transition-delay:120ms}
.stagger.visible>*:nth-child(3){transition-delay:190ms}
.stagger.visible>*:nth-child(4){transition-delay:260ms}
.stagger.visible>*{opacity:1;transform:translateY(0)}

/* ============ COOKIE BANNER ============ */
.cookie-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:480px;background:var(--bg-card);padding:1.5rem;border-radius:16px;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.4);z-index:9999;display:none}
.cookie-banner-inner{display:flex;flex-direction:column;gap:1rem}
.cookie-text{font-size:0.85rem;color:var(--text-secondary);margin:0;line-height:1.5}
.cookie-text a{color:var(--accent)}
.cookie-actions{display:flex;gap:0.75rem;justify-content:flex-end}
.cookie-actions .btn{padding:0.5rem 1.25rem;font-size:0.8rem}

/* Scroll Top */
.scroll-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--bg-dark);color:var(--white);border:none;display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transform:translateY(12px);transition:all 0.35s;cursor:pointer}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.scroll-top:hover{background:var(--accent);color:var(--bg-dark)}

/* ============ PAGE HEROES (inner pages) ============ */
.page-hero{position:relative;height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:var(--nav-height)}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%)}
.page-hero .hero-content{position:relative;z-index:1;text-align:center}
.page-hero .hero-content h1{color:#ffffff; text-shadow:none;}
.page-hero .hero-content p{color:rgba(255,255,255,0.85);}
.page-hero .hero-badge{display:inline-block;font-size:0.75rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-top:0.75rem}

/* Inner page shared styles */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.col-img{border-radius:16px;overflow:hidden}
.col-img img{width:100%;height:100%;object-fit:cover}
.col-text h2{margin-bottom:1.25rem}
.col-text p{color:var(--text-secondary);font-size:1rem;line-height:1.8}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mvv-card{background:#1a1a1a;border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;transition:transform 0.3s,box-shadow 0.3s}
.mvv-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.04)}
.mvv-card .mvv-icon{width:48px;height:48px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--accent-glow-strong)}
.mvv-card .mvv-icon svg{width:22px;height:22px;color:var(--accent)}
.mvv-card h3{margin-bottom:0.75rem;font-size:1rem;color:var(--text)}
.mvv-card p{color:var(--text-secondary);font-size:0.9rem;line-height:1.7}
.founder-section .two-col{align-items:start}
.founder-quote{font-style:italic;font-size:1.05rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1.5rem;padding-left:1.5rem;border-left:2px solid var(--accent)}
.founder-img-card{border-radius:16px;overflow:hidden}
.founder-img-card img{width:100%;height:500px;object-fit:cover}
.founder-info{padding:1rem 1.5rem;background:var(--bg-alt);text-align:center}
.founder-info strong{display:block;font-size:1rem;margin-bottom:0.25rem;color:var(--text)}
.founder-info span{font-size:0.8rem;color:var(--text-secondary)}
.team-wide-img{border-radius:16px;overflow:hidden;margin:2rem 0}
.team-wide-img img{width:100%;height:400px;object-fit:cover}
.timeline{display:flex;flex-direction:column;gap:3rem;max-width:800px;margin:0 auto;position:relative}
.timeline::before{content:'';position:absolute;left:96px;top:0;bottom:0;width:1px;background:var(--accent);opacity:0.3}
.timeline-item{display:flex;gap:2rem;position:relative}
.timeline-year{width:80px;font-size:1.8rem;font-weight:800;color:var(--accent);text-align:right;flex-shrink:0}
.timeline-dot{width:12px;height:12px;background:var(--bg);border:2px solid var(--accent);border-radius:50%;position:absolute;left:90px;top:6px;z-index:1}
.timeline-dot.lit{background:var(--accent)}
.timeline-dot--future{border-style:dashed}
.timeline-content{flex-grow:1;background:var(--bg-card);padding:1.5rem;border-radius:12px;border:1px solid var(--border);border-left:3px solid var(--accent)}
.timeline-content h4{margin:0 0 0.5rem;color:var(--text)}
.timeline-content p{color:var(--text-secondary);font-size:0.9rem}

/* Services page */
.services-hero{position:relative;padding:calc(var(--nav-height) + 60px) 0 60px;text-align:center;overflow:hidden}
.services-hero .hero-bg{position:absolute;inset:0;z-index:0}
.services-hero .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:0.08}
.services-hero .container{position:relative;z-index:1}
.tab-buttons{display:flex;justify-content:center;gap:0.75rem;margin-top:2rem}
.tab-btn{padding:10px 36px;font-size:0.85rem;font-weight:600;border-radius:8px;border:1.5px solid var(--border);color:var(--text-secondary);transition:all 0.3s;background:var(--bg-card)}
.tab-btn.active{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.tab-content{display:none;opacity:0;transition:opacity 0.4s}
.tab-content.active{display:block;opacity:1}
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.04)}
.feature-card .card-img{height:220px;overflow:hidden}
.feature-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}
.feature-card:hover .card-img img{transform:scale(1.03)}
.feature-card .card-body{padding:1.75rem}
.feature-card .card-body h3{margin-bottom:0.75rem;font-size:1rem;color:var(--text)}
.feature-card .card-body p{color:var(--text-secondary);font-size:0.9rem;line-height:1.7}
.feature-cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pricing-card{margin-top:1rem;padding:1rem 1.25rem;background:var(--accent-glow);border:1px solid rgba(0,230,91,0.15);border-radius:12px}
.pricing-card .price{font-size:1.5rem;font-weight:700;color:var(--accent)}
.pricing-card .price-label{font-size:0.8rem;color:var(--text-secondary);margin-top:0.25rem}
.video-block{max-width:800px;margin:3rem auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.video-block video{width:100%;display:block;cursor:pointer}
.microhub-section{background:var(--bg-alt)}
.microhub-img{max-width:900px;margin:2.5rem auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.microhub-img img{width:100%;height:auto}
.microhub-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;margin-top:3rem}
.microhub-cols h4{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem;color:var(--accent)}
.microhub-cols p{color:var(--text-secondary);font-size:0.875rem}
.microhub-explainer{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.microhub-explainer .col-img{border-radius:16px;overflow:hidden}
.microhub-explainer .col-img img{width:100%;height:100%;object-fit:cover}
.microhub-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;text-align:left;transition:transform 0.3s}
.microhub-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.04)}
.microhub-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent-glow-strong);border-radius:12px;margin-bottom:1.5rem}
.microhub-icon svg{width:24px;height:24px;color:var(--accent)}
.microhub-card h4{color:var(--white);font-size:1.1rem;margin-bottom:0.75rem;}
.microhub-card p{color:var(--text-secondary);font-size:0.9rem;line-height:1.6;margin:0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0.75rem}
.feature-pill{display:flex;align-items:center;gap:0.75rem;background:var(--bg-card);padding:1rem 1.25rem;border-radius:12px;font-size:0.9rem;border:1px solid var(--border);color:var(--text-secondary)}
.onboarding-steps .steps-row,.process-steps{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.step-item,.process-step{flex:1;min-width:200px;background:var(--bg-card);padding:2rem;border-radius:16px;text-align:center;border:1px solid var(--border)}
.step-item h4,.process-step h4{color:var(--text)}
.step-item p,.process-step p{color:var(--text-secondary);font-size:0.9rem}
.step-number,.process-num{width:40px;height:40px;background:var(--accent-glow-strong);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 1rem;font-size:1.1rem}
.step-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:1.5rem}
.usecase-chips{display:flex;flex-wrap:wrap;gap:0.75rem}
.usecase-chip{background:var(--accent-glow);color:var(--accent);padding:0.5rem 1rem;border-radius:980px;font-size:0.85rem;border:1px solid rgba(0,230,77,0.15);font-weight:500}
.partner-label{text-align:center;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;font-size:0.8rem;margin-bottom:1.5rem}
.partner-strip{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.partner-badge{background:var(--bg-card);padding:0.75rem 2rem;border-radius:980px;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);transition:all 0.3s}
.partner-badge:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
.partner-card{background:#1c1c1c;border:1px solid var(--accent);border-radius:12px;padding:1.5rem 3rem;font-weight:700;color:var(--white);font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,230,77,0.1)}

/* Careers */
.careers-hero{height:500px}
.why-sonic{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.why-card{text-align:center;padding:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;transition:transform 0.3s,box-shadow 0.3s}
.why-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.04)}
.why-card .why-icon{width:48px;height:48px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--accent-glow-strong)}
.why-card .why-icon svg{width:22px;height:22px;color:var(--accent)}
.why-card h3{margin-bottom:0.75rem;font-size:1rem;color:var(--text)}
.why-card p{color:var(--text-secondary);font-size:0.9rem}
.roles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.role-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2.5rem;transition:transform 0.3s,box-shadow 0.3s}
.role-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,230,77,0.04)}
.role-card h3{font-size:1.05rem;margin-bottom:0.75rem;color:var(--text)}
.role-badge{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.7rem;color:var(--accent);background:var(--accent-glow-strong);padding:4px 12px;border-radius:980px;margin-bottom:1rem}
.role-card p{color:var(--text-secondary);font-size:0.9rem;margin-bottom:1.25rem}
.role-requirements{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem}
.req-tag{font-size:0.72rem;padding:0.2rem 0.6rem;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:980px;color:var(--text-secondary)}
.role-salary{margin-top:1rem;font-weight:700;font-size:1.15rem;color:var(--accent);margin-bottom:1.5rem}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.benefit-item{background:var(--bg-card);padding:1.5rem;text-align:center;border-radius:12px;border:1px solid var(--border);color:var(--text-secondary);font-size:0.9rem;transition:transform 0.3s}
.benefit-item:hover{transform:translateY(-2px)}
.culture-banner{position:relative;height:350px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.culture-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.culture-banner .banner-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55)}
.culture-banner .banner-content{position:relative;z-index:1;text-align:center;max-width:600px;padding:0 20px}
.culture-banner p{font-style:italic;font-size:1.25rem;line-height:1.7;color:var(--white)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start}
.contact-info-card{position:relative;border-radius:16px;overflow:hidden;min-height:560px;display:flex;align-items:flex-end}
.contact-info-card .card-bg{position:absolute;inset:0}
.contact-info-card .card-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.35)}
.contact-info-card .card-content{position:relative;z-index:1;padding:2.5rem;width:100%}
.contact-info-card h3{margin-bottom:1.5rem;font-size:1.25rem;color:var(--white)}
.contact-detail{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;font-size:0.9rem;color:rgba(255,255,255,0.7)}
.contact-detail svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.contact-form{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem}
.contact-form h2{font-size:1.5rem;margin-bottom:2rem;color:var(--text)}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-secondary);margin-bottom:0.5rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;background:#1c1c1c;border:1.5px solid var(--border);border-radius:12px;font-family:var(--font);font-size:0.9rem;color:var(--text);transition:border-color 0.3s,box-shadow 0.3s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,230,77,0.1),0 0 16px rgba(0,230,77,0.05)}
.form-group textarea{min-height:140px;resize:vertical}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-success{display:none;text-align:center;padding:3rem}
.form-success.show{display:block}
.form-success .checkmark{width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;background:var(--accent-glow-strong);display:flex;align-items:center;justify-content:center;animation:popIn 0.5s var(--ease-spring)}
.form-success .checkmark svg{width:36px;height:36px;color:var(--accent)}
@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.form-success p{font-size:1.1rem;color:var(--text-secondary)}
.checkbox-group{margin-top:1rem;margin-bottom:2rem}
.checkbox-label{display:flex;align-items:flex-start;gap:0.75rem;cursor:pointer;color:var(--text-secondary);font-size:0.85rem;line-height:1.4}
.checkbox-label a{color:var(--accent);text-decoration:underline}
.checkbox-label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkbox-custom {
  position: relative;
  height: 20px;
  width: 20px;
  background: #1c1c1c;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-label:hover .checkbox-custom {
  border-color: var(--accent);
  background: rgba(0, 230, 77, 0.05);
}
.checkbox-label input:checked ~ .checkbox-custom {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 230, 77, 0.3);
}
.checkbox-custom:after {
  content: "";
  position: absolute;
  display: none;
  width: 6px;
  height: 11px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-top: -2px; /* Visual centering adjustment */
}
.checkbox-label input:checked ~ .checkbox-custom:after {
  display: block;
}
.response-time-indicator{color:var(--accent);font-size:0.9rem;margin-bottom:2rem;display:flex;align-items:center;gap:0.5rem}
.contact-icon-row{display:flex;gap:1rem;margin-top:2rem}
.contact-icon-row .icon-circle{width:40px;height:40px;border-radius:50%;background:rgba(0,230,91,0.1);display:flex;align-items:center;justify-content:center}
.contact-icon-row .icon-circle svg{width:18px;height:18px;color:var(--accent)}

/* Delivery flow (legacy support) */
.delivery-flow-section{background:var(--bg-alt);padding:5rem 0}
.delivery-flow-section h2{text-align:center;margin-bottom:0.75rem}
.delivery-flow-section .flow-subtitle{text-align:center;color:var(--text-secondary);font-size:1rem;margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto}
.delivery-flow-svg{max-width:900px;margin:0 auto}
.delivery-flow-svg svg{width:100%;height:auto}
.flow-line{stroke:var(--accent);stroke-width:2;stroke-dasharray:8 4;fill:none}
.flow-dot{fill:var(--accent)}
.eco-future-section .container{position:relative}
.eco-future-section .green-connector{position:absolute;left:50%;top:20%;bottom:20%;width:1px;background:linear-gradient(to bottom,transparent,var(--accent),transparent);opacity:0.15}

/* ============ PARTNER LOGOS GRID ============ */
.partner-logos-grid{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-top:2rem}
.partner-logo-item{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.25rem 2rem;transition:all 0.4s var(--ease-out);min-width:140px}
.partner-logo-item:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.25)}
.partner-logo-item img{height:clamp(28px,3.5vw,42px);width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.7;transition:all 0.4s}
.partner-logo-item:hover img{opacity:1;filter:brightness(0) invert(1)}
.partner-logo-item.color-logo img{filter:none;opacity:0.85}
.partner-logo-item.color-logo:hover img{filter:none;opacity:1}

/* ============ RESPONSIVE ============ */

/* ---------- Tablet landscape (≤ 1024px) ---------- */
@media(max-width:1024px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-card:nth-child(2)::after{display:none}
  .split-grid{grid-template-columns:1fr!important}
  .split-card{min-height:400px}
  .feature-cards{grid-template-columns:repeat(2,1fr)}
  .feature-cards-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .co2-visual{grid-template-columns:1fr;gap:2rem}
  .co2-img{max-height:360px}
  .faq-layout{grid-template-columns:1fr;gap:2rem}
  .faq-img{position:static;max-height:320px}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .why-sonic{grid-template-columns:repeat(2,1fr)}
  .microhub-explainer{grid-template-columns:1fr;gap:2rem}
  .mvv-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .contact-info-card{min-height:400px}
  .two-col{gap:2.5rem}

  /* Creative scroll — stack on tablet */
  .creative-scroll-wrapper{height:700vh}
  .creative-scroll-track{width:300vw}
  .scene-1-media{width:90vw;height:75vh}
  .scene-3-media{width:80vw;height:65vh;right:auto;left:50%;transform:translateX(-50%)}
  .glass-card{max-width:400px;padding:2.5rem}
  .card-right{right:5%}
  .card-left{left:5%}

  /* Partner logos */
  .partner-logo-item{padding:1rem 1.5rem;min-width:120px}
  .partner-strip{gap:1.25rem}
  .partner-card{padding:1rem 2rem;font-size:1.2rem}

  /* Timeline */
  .timeline::before{left:76px}
  .timeline-dot{left:70px}
  .timeline-year{width:60px;font-size:1.5rem}
}

/* ---------- Tablet portrait / Phone landscape (≤ 768px) ---------- */
@media(max-width:768px){
  :root{--nav-height:52px}

  /* Navigation */
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-logo img{height:clamp(36px,10vw,44px)}
  .btn-nav-cta{display:none}

  /* Hero */
  .hero{min-height:85vh}
  .hero-content h1{font-size:clamp(2rem,8vw,3rem)}
  .hero-subtitle{font-size:clamp(0.9rem,3.5vw,1.1rem);margin-bottom:2.5rem}
  .hero-ctas{gap:1rem}
  .hero-ctas .btn{padding:0.85rem 1.75rem;font-size:0.8rem}

  /* Grids → single column */
  .two-col{grid-template-columns:1fr;gap:2rem}
  .mvv-grid{grid-template-columns:1fr}
  .microhub-cols{grid-template-columns:1fr;gap:1.5rem}
  .microhub-explainer{grid-template-columns:1fr}
  .roles-grid{grid-template-columns:1fr}
  .why-sonic{grid-template-columns:1fr}
  .feature-cards{grid-template-columns:1fr}
  .feature-cards-2{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}

  /* Contact */
  .contact-grid{grid-template-columns:1fr}
  .contact-info-card{min-height:360px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;text-align:center;gap:2.5rem}
  .footer-brand{display:flex;flex-direction:column;align-items:center}
  .footer-brand img{margin:0 auto 1rem}
  .footer-brand p{max-width:none;text-align:center}
  .footer-social .social-links{justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center;gap:1rem}
  .footer-bottom a{margin-left:0.75rem}

  /* Page heroes */
  .team-banner{height:300px}
  .page-hero{height:320px}
  .page-hero .hero-content h1{font-size:clamp(1.5rem,6vw,2.2rem)}

  /* KPI */
  .kpi-grid{grid-template-columns:1fr 1fr;gap:0}
  .kpi-card{padding:2rem 1rem}
  .kpi-card::after{display:none!important}
  .kpi-value{font-size:clamp(2.2rem,8vw,3.5rem)}

  /* Tabs */
  .tab-buttons{flex-direction:column;align-items:stretch}
  .tab-btn{text-align:center}

  /* Steps */
  .step-arrow{display:none}
  .onboarding-steps .steps-row,.process-steps{flex-direction:column}
  .step-item,.process-step{min-width:unset}


  /* iOS Safari Background Attachment Fix */
  .team-banner, .future-section .parallax-bg, .team-banner .parallax-bg { background-attachment: scroll !important; }

  /* Horizontal story scroll */
  .horizontal-scroll-panel{min-width:100vw}
  .panel-content{max-width:90vw;padding:1.5rem}
  .panel-content h2{font-size:clamp(1.5rem,5vw,2rem)}

  /* Partner logos */
  .partner-logos-grid{gap:1rem}
  .partner-logo-item{padding:0.85rem 1.25rem;min-width:100px;border-radius:12px}
  .partner-logo-item img{height:clamp(22px,4vw,32px)}
  .partner-strip{gap:1rem}
  .partner-card{padding:1rem 1.5rem;font-size:1rem}

  /* Trust bar */
  .marquee-track{gap:2.5rem}
  .marquee-track img{height:70px;max-width:160px;margin:-15px 0;padding:0}
  .marquee-track .trust-divider{height:24px}

  /* FAQ */
  .faq-question{font-size:0.9rem;padding:1.25rem 0}

  /* Culture banner */
  .culture-banner{height:260px}
  .culture-banner p{font-size:1rem}

  /* Founder */
  .founder-img-card img{height:350px}

  /* Team wide */
  .team-wide-img img{height:260px}

  /* Timeline */
  .timeline::before{left:16px}
  .timeline-dot{left:10px}
  .timeline-year{width:auto;font-size:1.2rem;text-align:left;margin-left:2.5rem}
  .timeline-item{flex-direction:column;gap:0.75rem;padding-left:2rem}
  .timeline-content{border-left:2px solid var(--accent);padding:1.25rem}

  /* Misc */
  .scroll-top{bottom:1.25rem;right:1.25rem;width:40px;height:40px}
  .careers-teaser-section .careers-teaser{padding:2.5rem 1.5rem}
  .stats-row{gap:1.5rem}
  .stat-item{flex-direction:column;text-align:center;gap:0.25rem}

  /* Services hero */
  .services-hero{padding:calc(var(--nav-height) + 40px) 0 40px}

  /* Video block */
  .video-block{border-radius:12px}

  /* CO2 */
  .co2-result{font-size:clamp(2.5rem,10vw,4rem)}
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media(max-width:480px){
  .hero{min-height:80vh}
  .hero-content{padding:0 16px}
  .hero-content h1{font-size:clamp(1.8rem,7.5vw,2.5rem)}
  .hero-ctas{flex-direction:column;width:100%}
  .hero-ctas .btn{width:100%;justify-content:center}

  .section{padding:clamp(50px,10vw,80px) 0}
  .container{padding:0 16px}

  h2{font-size:clamp(1.5rem,6vw,2.2rem)}
  h3{font-size:clamp(1.1rem,4.5vw,1.4rem)}

  /* KPIs */
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-card{padding:1.5rem 0.75rem}
  .kpi-value{font-size:clamp(2rem,7vw,3rem)}
  .kpi-label{font-size:0.75rem}

  /* Split cards */
  .split-card{min-height:320px}
  .split-card .card-inner{padding:2rem 1.5rem}
  .split-card h3{font-size:clamp(1.1rem,4.5vw,1.5rem)}

  /* Services hero */
  .services-hero{padding:calc(var(--nav-height) + 30px) 0 30px}
  .services-hero h1{font-size:clamp(1.5rem,6vw,2rem)}

  /* Testimonials */
  .testimonial-card{padding:1.5rem}
  .testimonial-text{font-size:0.88rem}

  /* Feature cards */
  .feature-card .card-img{height:180px}
  .feature-card .card-body{padding:1.25rem}

  /* Contact */
  .contact-form{padding:1.5rem}
  .contact-form h2{font-size:1.25rem}
  .contact-info-card{min-height:300px}

  /* Footer */
  .footer{padding:3rem 0 1.5rem}
  .footer-grid{gap:2rem}

  /* Partner logos */
  .partner-logos-grid{gap:0.75rem}
  .partner-logo-item{padding:0.75rem 1rem;min-width:85px;border-radius:10px}
  .partner-logo-item img{height:clamp(20px,5vw,28px)}
  .partner-strip{gap:0.75rem}
  .partner-card{padding:0.85rem 1.25rem;font-size:0.9rem;border-radius:10px}

  /* Careers */
  .role-card{padding:1.75rem}
  .benefits-grid{grid-template-columns:1fr 1fr}
  .benefit-item{padding:1rem}

  /* Timeline */
  .timeline-year{font-size:1rem}
  .timeline-content{padding:1rem}

  /* Cookie */
  .cookie-banner{bottom:12px;width:calc(100% - 24px);padding:1.25rem}

  /* Founder */
  .founder-img-card img{height:280px}
  .founder-quote{font-size:0.95rem;padding-left:1rem}

  /* Team banner */
  .team-banner{height:250px}
  .team-banner h2{font-size:clamp(1.3rem,5.5vw,1.8rem)}
  .page-hero{height:280px}

  /* MVV */
  .mvv-card{padding:1.75rem 1.5rem}

  /* Floating CTA */
  .floating-cta{font-size:0.75rem;padding:0.6rem 1rem}

  /* Final CTA */
  .final-cta-section .btn-primary{width:100%;padding:1rem}
}

/* ---------- Small phone (≤ 430px) ---------- */
@media(max-width:430px){
  .hero-content h1{font-size:1.6rem}
  .hero-subtitle{font-size:0.85rem}

  .kpi-grid{grid-template-columns:1fr}
  .kpi-card{padding:1.25rem 0.5rem}

  .partner-logos-grid{flex-direction:column;align-items:stretch}
  .partner-logo-item{min-width:unset}

  .stats-row{flex-direction:column;gap:1rem}

  .tab-btn{padding:8px 20px;font-size:0.8rem}

  .btn{padding:0.85rem 1.5rem;font-size:0.8rem}
  .btn-nav-cta{padding:0.5rem 1rem}

  .benefits-grid{grid-template-columns:1fr}
}

/* ============ FINAL CTA SECTION ============ */
.final-cta-section{position:relative;padding:clamp(80px,12vw,140px) 0;text-align:center;overflow:hidden;background:linear-gradient(135deg,rgba(0,20,5,0.95),rgba(10,10,10,0.98));border-top:1px solid rgba(0,230,77,0.08)}
.final-cta-section::before{content:'';position:absolute;top:0;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,230,77,0.06) 0%,transparent 70%);pointer-events:none}
.final-cta-section .section-eyebrow{color:var(--accent)}
.final-cta-section h2{color:var(--white);max-width:700px;margin:0 auto 1rem}
.final-cta-section p{color:var(--text-secondary);max-width:550px;margin:0 auto 2.5rem;font-size:1.05rem;line-height:1.7}
.final-cta-section .btn-primary{padding:1rem 2.5rem;font-size:0.95rem}
.final-cta-response{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:1.5rem;font-size:0.8rem;color:var(--text-tertiary)}
.final-cta-response svg{color:var(--accent)}

/* ============ FLOATING CTA ============ */
.floating-cta{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);z-index:900;opacity:0;pointer-events:none;transition:all 0.5s var(--ease-out);display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.75rem;background:var(--accent);color:var(--bg-dark);font-size:0.85rem;font-weight:700;border-radius:980px;box-shadow:0 8px 32px rgba(0,230,77,0.25),0 2px 8px rgba(0,0,0,0.3);cursor:pointer;border:none;text-decoration:none;letter-spacing:0.02em}
.floating-cta.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.floating-cta:hover{background:var(--accent-hover);box-shadow:0 12px 40px rgba(0,230,77,0.35),0 4px 12px rgba(0,0,0,0.4);transform:translateX(-50%) translateY(-2px)}
.floating-cta svg{width:16px;height:16px}
@media(max-width:768px){.floating-cta{bottom:1.25rem;padding:0.65rem 1.25rem;font-size:0.8rem}}

/* ============ TRUST BADGES ============ */
.trust-badges{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.trust-badge{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em}
.trust-badge-icon{width:32px;height:32px;border-radius:50%;background:rgba(0,230,77,0.08);border:1px solid rgba(0,230,77,0.15);display:flex;align-items:center;justify-content:center}
.trust-badge-icon svg{width:14px;height:14px;color:var(--accent)}

/* ============ LEGAL PAGES ============ */
.legal-content{color:var(--text-secondary)}
.legal-content h2{font-size:1.25rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--text);padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.legal-content h3{font-size:1rem;margin-top:1.5rem;margin-bottom:0.75rem;color:var(--text-secondary)}
.legal-content p{font-size:0.9rem;line-height:1.8;margin-bottom:1rem;color:var(--text-secondary)}
.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-content a:hover{color:var(--accent-hover)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-scale,.reveal-left,.reveal-right{opacity:1;transform:none}
  .stagger>*{opacity:1;transform:none}
  .hero-content h1,.hero-subtitle,.hero-ctas{opacity:1;transform:none}
}

@media print {
  .kpi-value[data-counter] {
    visibility: hidden;
    position: relative;
  }
  .kpi-value[data-counter]::after {
    content: attr(data-counter);
    visibility: visible;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
}

/* ============ ASSET OVERHAUL CLASSES ============ */
.hover-scale {
  transition: transform 0.4s ease-out;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.founder-portrait {
  border-radius: 12px;
  filter: grayscale(80%);
  transition: all 0.4s ease;
}
.founder-portrait:hover {
  filter: grayscale(0%);
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* ── Mobile Overhaul for Cinematic Delivery Flow ── */
.mobile-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

@media (max-width: 768px) {
  /* Hide canvases, show full-bleed videos */
  canvas[id^="scroll-canvas"] { display: none !important; }
  .mobile-video { display: block !important; }
  
  /* Disable Scroll Tracker Wrapper */
  .creative-scroll-wrapper { height: auto !important; }
  .creative-scroll-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .creative-scroll-track {
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Reset Scenes to stack natively */
  .scroll-scene {
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Reset Media Containers to Full Bleed for Apple-level feel */
  .scene-media-wrap, .tilt-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  
  /* Reposition floating cards/text beautifully at bottom */
  .scene-content {
    position: absolute !important;
    bottom: 8vh !important;
    left: 5vw !important;
    width: 90vw !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    text-align: left !important;
  }
  
  .scene-chapter-num {
    font-size: 1.8rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .scene-eyebrow {
    margin-bottom: 0.5rem !important;
  }
  
  /* Ensure the accent line aligns natively */
  .scene-accent-line {
    margin-left: 0 !important;
  }
  
  /* Hide the progress bar */
  .creative-progress { display: none !important; }
}


/* ── Mobile Layout Fixes ── */
@media (max-width: 480px) {
  .kpi-label { white-space: nowrap !important; letter-spacing: 0 !important; font-size: 0.65rem !important; }
  .co2-section { padding-bottom: 7rem !important; }
  .footer { padding-bottom: 6rem !important; }
  .co2-data h2 { font-size: clamp(2rem, 8vw, 2.5rem) !important; }
}

/* ============ AUDIT FIX: Extracted Inline Styles ============ */

/* Trust Bar — ANTRIC partner label (was inline on marquee <span>) */
.trust-partner-text {
  font-weight: 800;
  font-style: italic;
  font-size: 1.4rem;
  padding: 0 20px;
  letter-spacing: -0.5px;
  color: var(--white);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

/* KPI Grid — transparent variant for CO2 section (was inline on .kpi-grid) */
.kpi-grid--inline {
  margin-top: 2rem;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
}

/* KPI Card — transparent variant (was inline on each .kpi-card) */
.kpi-card--transparent {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}

/* KPI Value — compact variant (was inline on .kpi-value) */
.kpi-value--compact {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-shadow: none;
}

/* KPI Label — readable variant (was inline on .kpi-label) */
.kpi-label--readable {
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0;
}

/* Team Confidence Banner — full-bleed layout (was inline on section) */
.team-banner--fullbleed {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Team Banner — gradient overlay (was inline div) */
.team-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

/* Team Banner — content layer (was inline on .container) */
.team-banner__content {
  position: relative;
  z-index: 2;
}

/* Team Banner — heading (was inline on h2) */
.team-banner__heading {
  color: var(--text-on-dark);
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

/* Team Banner — description (was inline on p) */
.team-banner__text {
  color: rgba(255,255,255,0.8);
  max-width: 500px;
  line-height: 1.6;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Parallax BG container (was inline on .parallax-bg) */
.parallax-bg--fullbleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Future section — blurred video bg (was inline on video) */
.future-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) brightness(0.4);
  transform: scale(1.1);
}

/* Vision badge (was inline span) */
.badge-vision {
  color: #ffffff;
  background: #ff3b30;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.6rem;
  vertical-align: middle;
  margin-right: 8px;
}

/* Scroll canvas shared style (was inline on canvas) */
.scroll-canvas {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.scroll-canvas--dim { filter: brightness(0.55); }
.scroll-canvas--mid { filter: brightness(0.7); }

/* CO2 text spacing (was inline on p) */
.co2-intro-text {
  margin-top: 1rem;
  line-height: 1.8;
}

/* Split card video/image cover (was inline on video/img) */
.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .team-banner--fullbleed {
    background-attachment: scroll;
    min-height: 50vh;
  }
}

/* Hide iOS/macOS Safari play button overlay on background videos */
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls {
  display: none !important;
}