/* ============================================================
   ADSYNERGY DESIGN SYSTEM — Editorial Performance v2
   Shared across all pages.
   ============================================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);transition:background 0.6s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:'Inter',sans-serif;background:transparent;color:var(--text);overflow-x:hidden;transition:color 0.6s ease;position:relative;z-index:1;font-feature-settings:'cv11','ss01','ss03';line-height:1.5}

/* ---------- Design Tokens (Light) ---------- */
:root{
  /* Surfaces */
  --bg:#fbfaf8;
  --bg-card:rgba(255,255,255,0.55);
  --bg-elevated:rgba(255,255,255,0.7);
  --bg-deep:#f5f3ee;
  --border:rgba(20,15,10,0.07);
  --border-strong:rgba(20,15,10,0.12);

  /* Type */
  --text:#0c0c0c;
  --text-soft:#1a1a1a;
  --muted:#4a4a48;
  --subtle:#8a8a86;
  --whisper:#b8b6b0;

  /* UI accents */
  --accent:#0c0c0c;
  --accent-fg:#fbfaf8;
  --selection-bg:#0c0c0c;
  --selection-fg:#fbfaf8;

  /* Navbar */
  --nav-bg:rgba(251,250,248,0.72);
  --nav-border:rgba(20,15,10,0.06);
  --mobile-bg:rgba(251,250,248,0.92);

  /* Icons */
  --icon-bg:#0c0c0c;
  --icon-fg:#fbfaf8;

  /* Logo */
  --logo-invert:0;

  /* Glass */
  --glass-blur:36px;
  --glass-saturate:1.6;
  --glass-border:rgba(255,255,255,0.85);
  --glass-shine:rgba(255,255,255,0.6);
  --glass-shadow:0 1px 2px rgba(20,15,10,0.04),0 8px 24px -8px rgba(20,15,10,0.06),inset 0 1px 1px rgba(255,255,255,0.85),inset 0 -1px 0 rgba(20,15,10,0.03);
  --glass-shadow-hover:0 2px 4px rgba(20,15,10,0.05),0 16px 40px -12px rgba(20,15,10,0.1),inset 0 1px 2px rgba(255,255,255,0.9),inset 0 -1px 0 rgba(20,15,10,0.04);
  --gi-top:0.7;--gi-bot:0.12;--gi-shine-top:0.4;

  /* Orbs — calmer, editorial palette */
  --orb-warm:rgba(240,210,170,0.32);
  --orb-cool:rgba(190,210,225,0.28);

  /* Mouse glare */
  --lg-glare:rgba(255,255,255,0.22);
  --lg-glare-soft:rgba(255,255,255,0.06);
  --lg-edge:rgba(255,255,255,0.14);

  /* Rhythm */
  --space-section:clamp(4.5rem,9vw,8rem);
  --container-max:1240px;
  --radius-sm:0.625rem;
  --radius-md:0.875rem;
  --radius-lg:1.25rem;
  --radius-xl:1.75rem;

  /* Motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --d-fast:280ms;
  --d-base:480ms;
  --d-slow:720ms;
}

/* ---------- Design Tokens (Dark) ---------- */
html.dark{
  --bg:#0a0a0a;
  --bg-card:rgba(255,255,255,0.045);
  --bg-elevated:rgba(255,255,255,0.07);
  --bg-deep:#070707;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);

  --text:#f4f2ee;
  --text-soft:#e8e6e2;
  --muted:#a6a39d;
  --subtle:#6b6862;
  --whisper:#3f3c37;

  --accent:#f4f2ee;
  --accent-fg:#0a0a0a;
  --selection-bg:#f4f2ee;
  --selection-fg:#0a0a0a;

  --nav-bg:rgba(10,10,10,0.55);
  --nav-border:rgba(255,255,255,0.08);
  --mobile-bg:rgba(10,10,10,0.92);

  --icon-bg:#f4f2ee;
  --icon-fg:#0a0a0a;

  --logo-invert:1;

  --glass-blur:32px;
  --glass-saturate:1.4;
  --glass-border:rgba(255,255,255,0.1);
  --glass-shine:rgba(255,255,255,0.06);
  --glass-shadow:0 1px 2px rgba(0,0,0,0.4),0 12px 32px -12px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.05),inset 0 -1px 0 rgba(0,0,0,0.3);
  --glass-shadow-hover:0 2px 6px rgba(0,0,0,0.5),0 20px 48px -16px rgba(0,0,0,0.6),inset 0 1px 1px rgba(255,255,255,0.08),inset 0 -1px 0 rgba(0,0,0,0.35);
  --gi-top:0.14;--gi-bot:0.03;--gi-shine-top:0.08;

  --orb-warm:rgba(180,140,90,0.13);
  --orb-cool:rgba(80,110,150,0.13);

  --lg-glare:rgba(255,255,255,0.08);
  --lg-glare-soft:rgba(255,255,255,0.02);
  --lg-edge:rgba(255,255,255,0.05);
}

::selection{background:var(--selection-bg);color:var(--selection-fg)}

/* ---------- Typography ---------- */
.font-heading{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.022em}
.font-display{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.035em;line-height:1}
.font-eyebrow{font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:0.22em;font-weight:600;font-size:0.6875rem}
.font-serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-0.01em}
.font-mono{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-feature-settings:'tnum','ss01'}

/* Display rhythm for h1 / h2 */
h1.font-display,h2.font-display{line-height:0.96}
h1{letter-spacing:-0.035em}
h2{letter-spacing:-0.028em}
h3{letter-spacing:-0.018em}

/* Number rendering for stats */
.num-display{font-family:'Inter',sans-serif;font-feature-settings:'tnum','ss01';font-weight:500;letter-spacing:-0.04em}

/* Body refinement */
p{font-feature-settings:'cv11','ss01';font-weight:400}

/* ---------- Background film (subtle grain) ---------- */
body::after{
  content:''; position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:0.022; mix-blend-mode:multiply;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark body::after{opacity:0.04;mix-blend-mode:screen}

/* ---------- Ambient Orbs (calmer, 2 only) ---------- */
.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(110px);z-index:0;will-change:transform}
.orb-1{width:760px;height:760px;background:var(--orb-warm);top:-15%;left:-12%;animation:orbDrift1 38s ease-in-out infinite}
.orb-2{width:680px;height:680px;background:var(--orb-cool);bottom:-18%;right:-10%;animation:orbDrift2 44s ease-in-out infinite}
.orb-3,.orb-4{display:none}
@keyframes orbDrift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,40px) scale(1.05)}66%{transform:translate(-40px,90px) scale(0.96)}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,-50px) scale(1.04)}66%{transform:translate(50px,30px) scale(0.97)}}
@media(max-width:767px){.orb-1{width:420px;height:420px}.orb-2{width:380px;height:380px}}

/* ---------- Liquid Glass ---------- */
.glass{
  background:var(--bg-card);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  transition:transform var(--d-slow) var(--ease-out),box-shadow var(--d-slow) var(--ease-out),background var(--d-slow) var(--ease-out);
  position:relative;
}
.glass::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,var(--gi-top)),rgba(255,255,255,calc(var(--gi-top)*0.5)) 40%,rgba(255,255,255,var(--gi-bot)) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
}
.glass-shine{background-image:linear-gradient(160deg,rgba(255,255,255,var(--gi-shine-top)) 0%,rgba(255,255,255,calc(var(--gi-shine-top)*0.4)) 14%,rgba(255,255,255,0.015) 40%,transparent 60%,rgba(0,0,0,0.008) 86%,rgba(0,0,0,0.018) 100%)}
.glass:hover{box-shadow:var(--glass-shadow-hover)}

/* Mouse-tracked glare */
.glass .lg-glare{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;background:radial-gradient(circle 240px at var(--gx,50%) var(--gy,50%),var(--lg-glare),var(--lg-glare-soft) 28%,transparent 65%);opacity:0;transition:opacity 0.4s ease;mix-blend-mode:screen}
.glass:hover .lg-glare{opacity:1}
.glass>*:not(.lg-glare):not(.lg-edge){position:relative;z-index:2}
@media(hover:none) and (pointer:coarse){.glass .lg-glare{display:none!important}}

/* ---------- Navbar ---------- */
#navbar{transition:background var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
#navbar.scrolled{background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 1px 0 var(--nav-border)}
html.dark #navbar{background:transparent}
html.dark #navbar.scrolled{background:var(--nav-bg);box-shadow:0 1px 0 var(--nav-border)}
.nav-link{position:relative;font-family:'Inter',sans-serif;font-weight:500;font-size:0.8125rem;color:var(--muted);letter-spacing:-0.005em;transition:color var(--d-fast) var(--ease-out)}
.nav-link:hover{color:var(--text)}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--text);transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--ease-out)}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Mobile Menu ---------- */
#mobile-menu{position:fixed;inset:0;z-index:9999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.4s ease,visibility 0.4s;background:var(--mobile-bg);backdrop-filter:blur(40px) saturate(1.5);-webkit-backdrop-filter:blur(40px) saturate(1.5);display:flex;flex-direction:column;overflow:hidden}
#mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}
#mobile-menu .mobile-nav-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:5rem 1.25rem 1rem;display:flex;flex-direction:column;align-items:stretch;gap:0}
#mobile-menu .mobile-nav-inner{display:flex;flex-direction:column;align-items:stretch;gap:0.25rem}
#mobile-menu .mobile-nav-inner a{display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:500;font-size:1.0625rem;letter-spacing:-0.012em;padding:1rem 1.25rem;min-height:54px;width:100%;text-align:center;border-radius:0.875rem;color:var(--text);transition:color 0.2s,background 0.2s;text-decoration:none;-webkit-tap-highlight-color:transparent}
#mobile-menu .mobile-nav-inner a:not(.btn-primary):hover,#mobile-menu .mobile-nav-inner a:not(.btn-primary):active{background:var(--bg-elevated)}
#mobile-menu .mobile-nav-inner a.btn-primary{color:var(--accent-fg)!important;margin-top:0.5rem}
#mobile-menu .mobile-nav-inner a.btn-primary span,#mobile-menu .mobile-nav-inner a.btn-primary svg{color:var(--accent-fg)!important}
#mobile-menu .mobile-nav-tools{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:1.25rem;padding:1rem 1.25rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-card);min-height:72px}
#mobile-menu .mobile-nav-tools button,#mobile-menu .mobile-nav-tools .lang-btn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- Buttons ---------- */
.btn-primary{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  background:var(--accent);color:var(--accent-fg);
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.875rem;letter-spacing:-0.005em;
  padding:0.875rem 1.625rem;border-radius:9999px;
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),background var(--d-base) var(--ease-out);
  box-shadow:0 1px 2px rgba(0,0,0,0.08),0 4px 12px -2px rgba(0,0,0,0.08);
}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.12) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);z-index:1}
.btn-primary:hover::before{animation:btnShine 0.9s var(--ease-out) forwards}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,0.08),0 12px 28px -4px rgba(0,0,0,0.18)}
.btn-primary:active{transform:translateY(0) scale(0.985);transition-duration:120ms}
.btn-primary svg{transition:transform var(--d-base) var(--ease-out)}
.btn-primary:hover svg{transform:translateX(3px)}
@keyframes btnShine{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.btn-outline{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.875rem;letter-spacing:-0.005em;
  color:var(--text);background:transparent;
  padding:0.75rem 1.5rem;border-radius:9999px;
  border:1px solid var(--border-strong);
  transition:all var(--d-base) var(--ease-out);
}
.btn-outline::before{content:'';position:absolute;inset:0;background:var(--text);border-radius:9999px;transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--ease-out);z-index:-1}
.btn-outline:hover::before{transform:scaleX(1);transform-origin:left}
.btn-outline:hover{color:var(--bg);border-color:var(--text);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0) scale(0.985);transition-duration:120ms}

.btn-ghost{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.875rem;letter-spacing:-0.005em;
  color:var(--muted);padding:0.75rem 1.5rem;border-radius:9999px;
  border:1px solid var(--border);
  transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out),background var(--d-base) var(--ease-out);
}
.btn-ghost:hover{color:var(--text);border-color:var(--border-strong);background:var(--bg-elevated);transform:translateY(-1px)}
.btn-ghost svg{transition:transform var(--d-base) var(--ease-out)}
.btn-ghost:hover svg{transform:translateX(2px)}

.btn-cta-invert{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  background:var(--bg);color:var(--text);
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.875rem;letter-spacing:-0.005em;
  padding:0.875rem 1.625rem;border-radius:9999px;
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out);
}
.btn-cta-invert::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(0,0,0,0.05) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);z-index:1}
.btn-cta-invert:hover::before{animation:btnShine 0.9s var(--ease-out) forwards}
.btn-cta-invert:hover{transform:translateY(-2px);box-shadow:0 12px 32px -4px rgba(255,255,255,0.18)}
.btn-cta-invert:active{transform:translateY(0) scale(0.985);transition-duration:120ms}
.btn-cta-invert svg{transition:transform var(--d-base) var(--ease-out)}
.btn-cta-invert:hover svg{transform:translateX(3px)}

/* ---------- Cards ---------- */
.case-card,.service-card,.testimonial-card,.blog-card{
  transition:transform var(--d-slow) var(--ease-out),box-shadow var(--d-slow) var(--ease-out),background var(--d-slow) var(--ease-out);
  position:relative;overflow:hidden;
}
.case-card:hover,.service-card:hover,.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-hover)}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow-hover)}

/* ---------- Process steps ---------- */
.process-step{position:relative;transition:transform var(--d-slow) var(--ease-out)}
.process-step:hover{transform:translateY(-2px)}
.process-step .w-14{transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.process-step:hover .w-14{transform:scale(1.06);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.process-number{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:4.5rem;line-height:1;color:var(--whisper);
  position:absolute;top:-0.75rem;left:-0.25rem;opacity:0.7;letter-spacing:-0.02em;
}
html.dark .process-number{color:var(--whisper);opacity:0.6}
.process-connector{position:absolute;top:50%;right:-2.5rem;width:5rem;height:1px;background:var(--border);display:none}
@media(min-width:768px){.process-connector{display:block}}
.process-connector::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}

/* ---------- Stats ---------- */
.stat-card{text-align:center;padding:1.75rem 1rem}
.stat-number{
  font-family:'Inter',sans-serif;font-weight:500;font-feature-settings:'tnum','ss01';
  font-size:2.875rem;line-height:1;color:var(--text);letter-spacing:-0.045em;
}
@media(min-width:640px){.stat-number{font-size:3.25rem}}
.stat-label{font-size:0.75rem;color:var(--muted);margin-top:0.625rem;font-weight:400;letter-spacing:-0.005em}
.stat-divider{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent 0%,var(--border-strong) 50%,transparent 100%)}

.stats-glass{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.012) 100%),var(--bg-card);
  backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(20,15,10,0.05),0 12px 32px -8px rgba(20,15,10,0.08);
  transition:all var(--d-slow) var(--ease-out);
}
.stats-glass::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);pointer-events:none;z-index:2}
html.dark .stats-glass::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent)}

/* ---------- Hero proof avatars ---------- */
.hero-proof{display:flex;align-items:center;gap:0.875rem;justify-content:center;flex-wrap:wrap}
.hero-proof-avatars{display:flex}
.hero-proof-avatars span{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--bg);display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;letter-spacing:-0.01em;color:#fff;
  margin-left:-9px;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.12);
}
.hero-proof-avatars span:first-child{margin-left:0}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;pointer-events:none}
#splash::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--orb-warm),transparent 60%);opacity:0.5;animation:splashBgPulse 3s ease-in-out infinite alternate}
@keyframes splashBgPulse{0%{opacity:0.3;transform:scale(1)}100%{opacity:0.6;transform:scale(1.04)}}
#splash .splash-logo-wrap{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center;z-index:2}
#splash .splash-logo{width:88px;height:auto;opacity:0;animation:splashLogoIn 0.7s var(--ease-out) 0.15s forwards}
html.dark #splash .splash-logo{filter:invert(1)}
@keyframes splashLogoIn{0%{opacity:0;transform:scale(0.92);filter:blur(8px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
html.dark #splash .splash-logo{animation-name:splashLogoInDark}
@keyframes splashLogoInDark{0%{opacity:0;transform:scale(0.92);filter:invert(1) blur(8px)}100%{opacity:1;transform:scale(1);filter:invert(1) blur(0)}}
#splash .glass-ring{position:absolute;border-radius:50%;border:1px solid var(--border-strong);opacity:0}
#splash .glass-ring-1{width:160px;height:160px;animation:glassRingIn 0.8s var(--ease-out) 0.35s forwards}
#splash .glass-ring-2,#splash .glass-ring-3{display:none}
@keyframes glassRingIn{0%{opacity:0;transform:scale(0.6)}100%{opacity:0.7;transform:scale(1)}}
#splash.done{animation:splashMelt 0.7s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes splashMelt{
  0%{opacity:1;filter:blur(0);transform:scale(1)}
  100%{opacity:0;filter:blur(24px);transform:scale(1.06);visibility:hidden;pointer-events:none}
}
body.loading>*:not(#splash):not(.orb){opacity:0}
body.loaded>*:not(#splash):not(.orb){animation:pageReveal 0.9s var(--ease-out) forwards}
@keyframes pageReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Section reveal ---------- */
.fade-section{opacity:0;transform:translateY(30px);transition:opacity 0.95s var(--ease-out),transform 0.95s var(--ease-out)}
.fade-section.visible{opacity:1;transform:translateY(0)}

/* ---------- Marquee ---------- */
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logo-item{transition:opacity 0.35s ease,filter 0.35s ease;opacity:0.42;filter:grayscale(100%) contrast(0.95)}
.logo-item:hover{opacity:1;filter:grayscale(0) contrast(1)}
html.dark .logo-item{filter:grayscale(100%) invert(1) contrast(0.9);opacity:0.4}
html.dark .logo-item:hover{filter:invert(1) grayscale(0) contrast(1);opacity:1}

/* ---------- Theme toggle ---------- */
#theme-toggle,#mobile-theme-toggle{background:none;border:1px solid var(--border);border-radius:9999px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all 0.5s var(--ease-out)}
#theme-toggle:hover,#mobile-theme-toggle:hover{border-color:var(--border-strong);background:var(--bg-card);transform:rotate(12deg) scale(1.05)}
#theme-toggle:active,#mobile-theme-toggle:active{transform:scale(0.95);transition-duration:120ms}
#theme-toggle svg,#mobile-theme-toggle svg{width:16px;height:16px;transition:transform 0.5s var(--ease-out)}

/* ---------- Language buttons ---------- */
.lang-btn{background:none;border:none;cursor:pointer;padding:0;border-radius:9999px;transition:transform 0.3s ease,opacity 0.3s ease;line-height:0}
.lang-btn:hover{transform:scale(1.1)!important}

/* ---------- Dark mode token bridges (for Tailwind brand-* classes) ---------- */
html.dark .text-brand-text{color:var(--text)}
html.dark .text-brand-muted{color:var(--muted)}
html.dark .text-brand-subtle{color:var(--subtle)}
html.dark .bg-brand-card{background:var(--bg-card)}
html.dark .bg-brand-text{background:var(--icon-bg)}
html.dark .border-brand-border{border-color:var(--border)}
html.dark .hover\:border-brand-border:hover{border-color:var(--border)}
html.dark .border-brand-border\/50{border-color:var(--border)}
html.dark .bg-white\/80{background:var(--nav-bg)}
html.dark .bg-white\/90{background:var(--mobile-bg)}
html.dark span.bg-brand-text{background:var(--text)}
html.dark .border-t.border-brand-border{border-color:var(--border)}
html.dark .btn-primary.text-white,html.dark .btn-primary.text-white span,html.dark .btn-primary.text-white svg{color:var(--accent-fg)}
html.dark .border-brand-text{border-color:var(--text)}

/* Logo invert */
html.dark .nav-logo,html.dark .footer-logo{filter:invert(var(--logo-invert))}
html.dark .founder-img{mix-blend-mode:screen;filter:brightness(1.1)}
html.dark .founder-img-wrap{background:var(--bg)!important;border:1px solid var(--border)}

/* Case card logos */
html.dark .case-card img{background:rgba(255,255,255,0.92)!important;border-color:rgba(255,255,255,0.12)!important}

/* Feature images */
html.dark .feature-img-wrap{background:var(--bg-elevated);border-color:var(--border)}

/* Icon boxes */
.icon-box{color:#fff;background:var(--accent)}
html.dark .icon-box{background:var(--icon-bg);color:var(--icon-fg)}
html.dark .icon-box svg{color:var(--icon-fg)}

/* CTA banner dark mode */
html.dark .cta-banner{background:var(--text)!important;color:var(--accent-fg)}
html.dark .cta-banner .text-white{color:var(--accent-fg)}
html.dark .cta-banner .text-gray-400{color:var(--subtle)}
html.dark .cta-banner .bg-white{background:var(--bg)!important;color:var(--text)}
html.dark .cta-banner .text-brand-text{color:var(--text)}
html.dark .text-gray-400{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-item{overflow:hidden}
.faq-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:'Inter',sans-serif;font-weight:500;font-size:0.9375rem;letter-spacing:-0.012em;padding:1.25rem 1.5rem}
.faq-toggle svg{flex-shrink:0;width:18px;height:18px;color:var(--muted);transition:transform 0.5s var(--ease-out)}
.faq-item.open .faq-toggle svg{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.55s var(--ease-out)}
.faq-item.open .faq-answer{max-height:320px}
.faq-answer-inner{padding:0 1.5rem 1.25rem;color:var(--muted);font-size:0.9375rem;line-height:1.7;font-weight:400}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:40;transform:translateY(100%);transition:transform 0.55s var(--ease-out);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);background:var(--bg-card);border-top:1px solid var(--glass-border);box-shadow:0 -4px 24px rgba(0,0,0,0.08)}
.sticky-cta.visible{transform:translateY(0)}
html.dark .sticky-cta{box-shadow:0 -4px 24px rgba(0,0,0,0.3)}
@media(min-width:768px){.sticky-cta{display:none!important}}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:9998;max-width:480px;transform:translateY(140%);transition:transform 0.65s var(--ease-out)}
.cookie-banner.visible{transform:translateY(0)}
@media(min-width:640px){.cookie-banner{left:auto}}

/* ---------- Testimonial stars ---------- */
.testimonial-stars{color:#d4a047;display:flex;gap:2px}

/* ---------- Ripple ---------- */
@keyframes rippleOut{to{transform:scale(2.2);opacity:0}}

/* ---------- Section divider hairline ---------- */
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong) 20%,var(--border-strong) 80%,transparent);width:100%}

/* ---------- Refined range inputs (ROI calculator) ---------- */
input[type="range"]{
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:24px;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px;background:var(--border-strong);border-radius:9999px;
}
input[type="range"]::-moz-range-track{
  height:3px;background:var(--border-strong);border-radius:9999px;border:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--text);margin-top:-7.5px;box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transition:transform 0.2s var(--ease-out),box-shadow 0.2s var(--ease-out);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:none;
  background:var(--text);box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transition:transform 0.2s var(--ease-out);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 3px 10px rgba(0,0,0,0.25)}
input[type="range"]:hover::-moz-range-thumb{transform:scale(1.12)}

/* ---------- Responsive ---------- */
@media(max-width:767px){
  #navbar .h-\[80px\]{height:64px}
  .nav-logo{height:2.5rem!important}
  #theme-toggle{width:34px;height:34px}
  #theme-toggle svg{width:14px;height:14px}

  .min-h-\[90vh\]{min-height:auto;padding-top:80px;padding-bottom:3rem}
  .hero-section{padding-bottom:1rem!important}
  h1.font-display{font-size:2.25rem!important;line-height:1.02!important}
  .hero-proof{gap:0.5rem}
  .hero-proof-avatars span{width:26px;height:26px;font-size:9px}

  .stat-number{font-size:2.125rem!important}
  .stat-card{padding:1rem 0.5rem}
  .stat-label{font-size:0.6875rem}

  .py-16{padding-top:2.75rem;padding-bottom:2.75rem}
  .py-14{padding-top:2.25rem;padding-bottom:2.25rem}
  .sm\:py-20{padding-top:2.75rem;padding-bottom:2.75rem}
  .sm\:py-16{padding-top:2.25rem;padding-bottom:2.25rem}
  .trust-bar{padding-top:0.5rem!important;padding-bottom:1.5rem!important}

  .glass.p-8{padding:1.25rem}
  .glass.sm\:p-12{padding:1.25rem}
  .glass.sm\:p-10{padding:1.25rem}
  .service-card.p-8,.case-card.p-8,.testimonial-card.p-8,.blog-card.p-8{padding:1.25rem}

  .btn-primary,.btn-cta-invert{min-height:46px;padding:0.75rem 1.375rem}
  .btn-outline,.btn-ghost{min-height:44px}

  .cta-banner{padding:2rem 1.25rem!important;border-radius:1.5rem!important}
  .cta-banner h2{font-size:1.625rem!important}

  .faq-toggle{padding:1rem 1.25rem;font-size:0.875rem}
  .faq-answer-inner{padding:0 1.25rem 1rem;font-size:0.8125rem}

  .founder-section .founder-img-wrap{width:6.5rem!important;height:6.5rem!important;margin:0 auto}
  .founder-section .founder-img{width:100%!important;height:100%!important}
  .founder-section .glass{padding:1.5rem 1.25rem!important;padding-bottom:2rem!important}
  .founder-section h3{font-size:1.25rem!important}
  .founder-section .founder-bio{font-size:0.875rem;line-height:1.6}
  .founder-section .founder-cta-wrap{flex-direction:column;margin-top:1rem}
  .founder-section .founder-cta-wrap a{justify-content:center;min-height:48px;padding:0.75rem 1.25rem;width:100%;max-width:280px;margin-left:auto;margin-right:auto}

  .process-number{font-size:3rem}
  .process-step .w-14{width:2.75rem;height:2.75rem}
  .process-step .w-14 svg{width:1.125rem;height:1.125rem}

  footer .grid{gap:2rem}

  #splash .splash-logo-wrap{width:130px;height:130px}
  #splash .splash-logo{width:72px}
  #splash .glass-ring-1{width:130px;height:130px}

  .cookie-banner{bottom:0.5rem;left:0.5rem;right:0.5rem;max-width:none}
  .sticky-cta{padding-bottom:env(safe-area-inset-bottom,0)}

  svg[viewBox]{max-width:100%;height:auto}
  section{overflow-x:hidden}
  .max-w-7xl,.max-w-5xl,.max-w-4xl,.max-w-3xl{max-width:100%}
}

@media(max-width:480px){
  h1.font-display{font-size:1.875rem!important}
  h2.font-display{font-size:1.5rem!important}
  .text-lg{font-size:0.9375rem}
  .text-base{font-size:0.875rem}
  .px-5{padding-left:1rem;padding-right:1rem}
  .gap-5{gap:0.75rem}
  .gap-4{gap:0.625rem}
  .stat-number{font-size:1.875rem!important}
  .case-card img.w-12{width:2.25rem;height:2.25rem}
}

@supports(padding:env(safe-area-inset-bottom)){
  .sticky-cta{padding-bottom:calc(0.5rem + env(safe-area-inset-bottom))}
  .cookie-banner{bottom:calc(0.5rem + env(safe-area-inset-bottom))}
}

img[loading="lazy"]{content-visibility:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .orb{animation:none!important}
}

/* ---------- Legal/Blog article content typography ---------- */
.legal-content h2{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.022em;color:var(--text);font-size:1.5rem;margin-top:2.5rem;margin-bottom:1rem;line-height:1.2}
.legal-content h3{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.018em;color:var(--text);font-size:1.125rem;margin-top:1.75rem;margin-bottom:0.75rem;line-height:1.3}
.legal-content p{color:var(--muted);font-weight:400;line-height:1.75;margin-bottom:1rem;font-size:0.9375rem}
.legal-content ul{list-style:disc;padding-left:1.25rem;margin-bottom:1.25rem}
.legal-content ul li{color:var(--muted);font-weight:400;line-height:1.7;margin-bottom:0.375rem;font-size:0.9375rem}
.legal-content a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color 0.25s ease}
.legal-content a:hover{color:var(--muted)}
.legal-content strong{color:var(--text);font-weight:600}
.reading-badge{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.6875rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--subtle);font-family:'Rajdhani',sans-serif;font-weight:600}

/* ---------- Mobile Performance: teure Render-Effekte reduzieren ---------- */
/* Auf Phones fressen Backdrop-Blur (live pro Scroll-Frame berechnet),
   animierte Blur-Orbs und das Grain-Overlay die GPU — Scroll-Frames
   droppen und Swipes verpuffen. Ohne Orbs ist der Hintergrund ohnehin
   flach, daher kostet der Verzicht auf Blur visuell fast nichts. */
@media (max-width:768px){
  .orb{display:none}
  body::after{display:none}
  .glass,.stats-glass,#navbar.scrolled,.sticky-cta{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  :root{--bg-card:rgba(255,255,255,0.85);--bg-elevated:rgba(255,255,255,0.95);--nav-bg:rgba(251,250,248,0.96)}
  html.dark{--bg-card:rgba(30,30,38,0.92);--bg-elevated:rgba(38,38,48,0.95);--nav-bg:rgba(10,10,14,0.96)}
  /* Marquee-Layer verkleinern: 4 statt 6 Gruppen reichen bis 2750px Breite */
  .marquee-track>div:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .marquee-track{animation-duration:80s}
  .fade-section{opacity:1;transform:none;transition:none}
}