/* === RESET === */
*,*::before,*::after {margin:0;padding:0;box-sizing:border-box}
:root {
    --bg:#050508;--bg2:#08080c;--bg3:#0f0f14;--bg4:#161620;
    --text:#fff;--text2:#e8e8f0;--text3:#a4a4b2;
    --accent:#ff5722;--accent2:#ffb366;--accent3:#ff8c42;--accent-deep:#e0421a;
    --glow:rgba(255,87,34,.45);--glow2:rgba(255,107,61,.75);
    --grad:linear-gradient(135deg,#ff3d1f 0%,#ff5722 40%,#ff7a35 100%);
    --grad-soft:linear-gradient(135deg,#ff5722,#ff8a3c);
    --grad-glow:linear-gradient(135deg,rgba(255,87,34,.32),rgba(255,140,66,.18));
    --border:rgba(255,255,255,.08);--border2:rgba(255,92,53,.35);
    --r:16px;--r-sm:10px;
    --ease:cubic-bezier(.16,1,.3,1);
    --font:'Geist',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
    --display:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
    --editorial:'Instrument Serif',Georgia,serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
}
html {scroll-behavior:smooth;scroll-padding-top:80px;overscroll-behavior-y:none}
body {overscroll-behavior-x:none}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {

    *,*::before,*::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    .ind-track,.marquee-track {animation:none !important}

}

body {font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,92,53,.03) 0%,transparent 60%)}
img,video,canvas,iframe,svg {max-width:100%;height:auto;display:block}
iframe {height:revert} /* iframes opt-out of auto-height */
h1,h2,h3,h4,h5,p {overflow-wrap:break-word;word-break:normal;hyphens:auto}
.container {max-width:1400px;margin:0 auto;padding:0 32px;width:100%}
a {text-decoration:none;color:inherit;transition:.4s var(--ease)}
ul {list-style:none}
body.intro-active {overflow:hidden;height:100vh}
:focus-visible {outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px}

/* Cursor — using default */

/* === SCROLL PROGRESS BAR === */
.scroll-progress {position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:9999;width:0;transition:none;will-change:width}

/* === LOADER === */
.loader {position:fixed;inset:0;background:var(--bg);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .5s .1s,visibility .5s .1s}
.loader.done {opacity:0;visibility:hidden}
.loader-inner {text-align:center}
.loader-logo {font-family:var(--display);font-size:1.6rem;font-weight:700;margin-bottom:20px;letter-spacing:-.5px}
.loader-logo span {color:var(--accent)}
.loader-count {font-family:var(--display);font-size:3.5rem;font-weight:700;color:var(--accent);letter-spacing:-2px;line-height:1;margin-bottom:14px}
.loader-track {width:180px;height:2px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;margin:0 auto}
.loader-fill {height:100%;width:0;background:var(--grad);border-radius:2px}

/* === BUTTONS === */
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 24px;font-family:var(--font);font-weight:600;border:none;border-radius:60px;cursor:pointer;transition:.4s var(--ease);position:relative;overflow:hidden;letter-spacing:.3px}
.btn-accent {background:var(--grad);color:#fff;box-shadow:0 6px 30px var(--glow),0 2px 8px rgba(255,107,61,.25),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-accent::before {content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 50%);pointer-events:none}
.btn-accent:hover {box-shadow:0 12px 60px var(--glow2),0 4px 16px rgba(255,107,61,.45),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-2px)}
.btn-outline {background:rgba(255,255,255,.02);color:#e0e0e8;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-outline:hover {border-color:rgba(255,92,53,.5);color:var(--text);background:rgba(255,92,53,.05);box-shadow:0 4px 20px rgba(255,92,53,.15);transform:translateY(-2px)}
.btn:active {transform:translateY(0) scale(.98)}
.btn:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.btn-sm {padding:12px 26px;font-size:.95rem}
.btn-lg {padding:18px 40px;font-size:1rem}
.btn-shimmer {position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none}
.btn:hover .btn-shimmer {left:100%;transition:left .7s}

/* === SCROLL PROGRESS BAR ===
   Thin orange line at the top of the viewport that fills as the user
   scrolls. Subtle, but signals "this site has polish." */
.scroll-progress {position:fixed;top:0;left:0;height:2px;width:0;z-index:1001;background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%);box-shadow:0 0 12px rgba(255,107,40,.55);pointer-events:none;transition:width .08s linear;will-change:width}

/* === NAV === */
.nav {position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:.4s var(--ease)}
.nav.scrolled {background:rgba(3,3,3,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:14px 0}
/* Nav overrides the default .container constraint — hugs the screen edges so logo sits far left and menu sits far right. */
.nav .nav-wrap {max-width:none;padding:0 56px;width:100%}
.nav-wrap {display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo {font-family:var(--display);font-size:1.95rem;font-weight:800;letter-spacing:-.6px;display:inline-flex;align-items:center;gap:14px}
/* Screen blend makes the mark's dark areas disappear into the page background
   so only its orange glow integrates — feels emitted, not pasted on. */
.logo .logo-mark {flex-shrink:0;width:62px;height:62px;object-fit:contain;transition:transform .4s var(--ease),width .4s var(--ease),height .4s var(--ease);filter:none;mix-blend-mode:normal;opacity:.95}
.logo {transition:font-size .4s var(--ease)}
.nav.scrolled .logo .logo-mark {width:52px;height:52px}
.nav.scrolled .logo {font-size:1.75rem}
.logo:hover .logo-mark {transform:translateY(-2px) scale(1.06)}
.logo .logo-text span {color:var(--accent)}
.nav-menu {display:flex;align-items:center;gap:38px}
.nav-menu a {font-size:1.02rem;font-weight:500;color:#f0f0f5;position:relative;letter-spacing:-.005em}
.nav-menu a:not(.btn)::after {content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s var(--ease)}
.nav-menu a:not(.btn):hover::after {width:100%}
.nav-menu a:hover {color:var(--text)}
.menu-btn {display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.menu-btn span {width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* === HERO === */
.hero {position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
@keyframes brainPulse {0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

/* Canvas — legacy frame-scrub, disabled in favor of reveal video */
.hero-canvas {display:none}

/* === HERO V2 — split layout, copy left · AXIS mascot slot right === */
.hero-v2 {position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden;isolation:isolate}
.hero-bg {position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(255,92,53,.16) 0%,rgba(255,92,53,0) 60%),radial-gradient(ellipse 60% 50% at 20% 80%,rgba(120,80,255,.06) 0%,rgba(0,0,0,0) 60%),#050508}
.hero-bg-grid {position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 30%,transparent 80%)}
.hero-bg-glow {position:absolute;width:520px;height:520px;right:-80px;top:50%;transform:translateY(-50%);background:radial-gradient(circle,rgba(255,107,61,.22) 0%,rgba(255,107,61,0) 70%);filter:blur(40px);pointer-events:none}
.hero-v2-inner {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:64px;position:relative;z-index:1}
.hero-v2-copy {max-width:620px}
.hero-trustline {display:inline-flex;align-items:center;gap:10px;font-size:.82rem;color:var(--text2);letter-spacing:.2px}
.ht-dot {width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 22px rgba(255,107,61,.55);animation:ht-pulse 2s ease-in-out infinite}
@keyframes ht-pulse {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}

/* AXIS mascot slot — placeholder if axis-loop.mp4 isn't present */
.hero-v2-axis {position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-width:560px;margin:0 auto;width:100%}
.axis-video {position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain;border:0;background:transparent;z-index:2}
.axis-video.failed {display:none}
.axis-fallback {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;z-index:1}
.axis-orb {position:relative;width:min(72%,420px);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.axis-ring {position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,107,61,.25);animation:axis-spin 14s linear infinite}
.axis-ring-1 {transform:rotate(0deg);border-style:dashed}
.axis-ring-2 {inset:14%;border-color:rgba(255,107,61,.4);animation-duration:9s;animation-direction:reverse}
.axis-ring-3 {inset:28%;border-color:rgba(255,180,120,.55);animation-duration:6s}
.axis-core {position:absolute;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffb066 0%,#ff5c35 35%,#7a1a08 80%,#1a0a05 100%);box-shadow:0 0 60px 8px rgba(255,107,61,.55),inset 0 0 40px rgba(255,200,150,.2),inset -20px -30px 60px rgba(0,0,0,.5);animation:axis-bob 4s ease-in-out infinite}
.axis-pulse {position:absolute;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(255,107,61,.35) 0%,transparent 70%);animation:axis-pulse-anim 2.4s ease-in-out infinite;filter:blur(2px)}
.axis-tag {font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:5px;color:var(--accent2);text-transform:uppercase;text-shadow:0 0 24px rgba(255,107,61,.5)}
@keyframes axis-spin {to{transform:rotate(360deg)}}
@keyframes axis-bob {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.02)}}
@keyframes axis-pulse-anim {0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.12)}}
@media(max-width:980px) {

    .hero-v2 {padding:96px 0 56px;min-height:auto}
    .hero-v2-inner {grid-template-columns:1fr;gap:40px}
    .hero-v2-copy {max-width:none;text-align:center;margin:0 auto}
    .hero-v2-axis {order:-1;max-width:340px}
    .hero-bg-glow {right:auto;left:50%;top:30%;transform:translate(-50%,-50%);width:380px;height:380px}

}

@media(prefers-reduced-motion:reduce) {

    .axis-ring,.axis-core,.axis-pulse,.ht-dot {animation:none}

}


/* Fade + transition text */
.hero-fade {position:absolute;inset:0;background:radial-gradient(ellipse at center,#0a0612 0%,#050508 60%,#000 100%);opacity:0;z-index:4;pointer-events:none}
.hero-transition-text {position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none}
.htt-tagline-big {position:relative;z-index:1;font-family:var(--display);font-size:clamp(2.4rem,7vw,6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;text-shadow:0 0 80px rgba(255,92,53,.35),0 0 40px rgba(0,0,0,.6),0 4px 20px rgba(0,0,0,.8)}
.htt-tagline-big .htt-accent {background:linear-gradient(135deg,#ff7a4d 0%,#ff5c35 50%,#ff3d1f 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic}

/* === ASCEND — pinned scrollytelling, 3 states cycle as you scroll === */
.ascend-pin {position:relative;height:300vh;background:#000}
.ascend-sticky {position:sticky;top:0;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
/* Crisper video — light filter for richness, no over-processing */
.ascend-video {position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:.95;z-index:0;filter:contrast(1.08) saturate(1.18) brightness(1.02);transform:translateZ(0);will-change:transform;backface-visibility:hidden}
/* Cleaner gradient — darker bottom, lifts top so headline reads */
.ascend-overlay {position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at center 40%,rgba(0,0,0,0) 0%,rgba(5,5,8,.4) 60%,rgba(5,5,8,.95) 100%),linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.3) 100%);z-index:1;pointer-events:none}
/* Grain removed — was muddying the particle clarity */
.ascend-grain {display:none}
.ascend-inner {position:relative;z-index:3;width:100%;max-width:1000px;padding:0 20px;text-align:center}

/* CLEAN ascend tag — override .tag default lines + decorations */
.ascend-pin .tag {display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:7px;color:var(--accent2);margin:0 0 32px;text-transform:uppercase;text-shadow:0 0 24px rgba(255,107,61,.45);padding:0;background:none;border:none}
.ascend-pin .tag::before,
.ascend-pin .tag::after {display:none}

.ascend-title {font-family:var(--display);font-size:clamp(2.2rem,6.4vw,5.4rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0;text-shadow:0 4px 50px rgba(0,0,0,.9),0 0 100px rgba(0,0,0,.4);color:#fff;max-width:14ch;font-feature-settings:"ss01"}

/* States — staggered crossfade for cinematic feel */
.ascend-state {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;opacity:0;transform:translateY(36px) scale(.985);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);pointer-events:none;will-change:opacity,transform}
.ascend-state.active {opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ascend-state .tag {transition:opacity .7s ease .15s,transform .7s ease .15s;opacity:0;transform:translateY(12px)}
.ascend-state.active .tag {opacity:1;transform:translateY(0)}
.ascend-state .ascend-title {transition:opacity .85s ease .25s,transform .85s ease .25s,letter-spacing 1.2s ease .25s;opacity:0;transform:translateY(20px);letter-spacing:-.02em}
.ascend-state.active .ascend-title {opacity:1;transform:translateY(0);letter-spacing:-.03em}

/* Refined dots — pill grows when active, with subtle outer ring */
.ascend-dots {position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:5;padding:10px 16px;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:60px}
.ascend-dot {width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .55s cubic-bezier(.22,.61,.36,1);cursor:pointer;flex-shrink:0;border:none;padding:0}
.ascend-dot:hover {background:rgba(255,255,255,.4);transform:scale(1.2)}
.ascend-dot.active {background:var(--accent);box-shadow:0 0 0 4px rgba(255,92,53,.18),0 0 18px rgba(255,92,53,.6);width:28px;border-radius:5px;transform:none}
.hero-transition-text::before {content:'';position:absolute;top:50%;left:50%;width:800px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,107,61,.15) 0%,transparent 70%);filter:blur(40px);pointer-events:none}
.htt-eyebrow {font-size:clamp(.7rem,1vw,.85rem);letter-spacing:6px;color:var(--accent2);text-transform:uppercase;margin-bottom:18px;font-weight:700;text-shadow:0 0 30px rgba(255,107,61,.5);position:relative}
.htt-logo {font-size:clamp(2.2rem,5.5vw,4.4rem);font-weight:800;font-family:var(--display);letter-spacing:-.03em;line-height:1.05;position:relative;text-shadow:0 0 60px rgba(255,92,53,.25)}
.htt-logo span {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.htt-tagline {font-size:clamp(.85rem,1.4vw,1.1rem);color:#c9c9d1;margin-top:18px;letter-spacing:2px;font-weight:400;position:relative}
#particleCanvas {display:none}
.hero-orbs {position:absolute;inset:0;overflow:hidden;z-index:0}
.orb {position:absolute;border-radius:50%;filter:blur(120px)}
.orb-1 {width:600px;height:600px;background:rgba(255,92,53,.12);top:-15%;left:10%;animation:drift 20s ease-in-out infinite}
.orb-2 {width:450px;height:450px;background:rgba(255,140,66,.08);bottom:5%;right:0;animation:drift 25s ease-in-out infinite reverse}
.orb-3 {width:300px;height:300px;background:rgba(255,92,53,.05);top:40%;left:55%;animation:drift 18s ease-in-out infinite 5s}
@keyframes drift {0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-25px) scale(1.04)}66%{transform:translate(-20px,35px) scale(.96)}}

.hero-grid {position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-left {max-width:560px}

.hero-tag {display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:60px;font-size:.78rem;font-weight:500;color:var(--text2);margin-bottom:28px}
.pulse-dot {width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:pulse 2s ease-in-out infinite}
@keyframes pulse {0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.line-wrap {display:block;overflow:hidden;padding-bottom:4px}
.accent-line {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:inline-block;padding-bottom:4px}

/* ===== HEADLINE LINES — visible by default, animated only inside hero =====
   Previously every .line was opacity:0 at rest. That works on the home
   hero (JS fires runHeroStagger to add .show) but BREAKS subpage heroes
   (about/process/work/pricing/services/book) where the JS never runs,
   leaving the h1 invisible. Fix: scope the hidden+animated state to
   `.hero-content .line` only. Bare .line is visible. */
.line {
  display:block;
  font-size:clamp(2.2rem,4.5vw,3.6rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-2px;
  will-change:transform,opacity,filter;
}
.hero-content .line {
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .6s ease-out,filter .65s ease-out;
  transition-delay:var(--intro-delay, 0ms);
}
.hero-content .line.show {opacity:1;transform:translateY(0);filter:blur(0)}

.rotating-words {position:relative;display:inline-block}
.rw {position:absolute;left:0;top:0;opacity:0;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .5s,transform .5s var(--ease);transform:translateY(20px)}
.rw.active {position:relative;opacity:1;transform:translateY(0)}

/* Smaller fade — scoped to hero too for the same reason. Bare .anim-fade
   stays visible by default; only the hero version starts hidden. */
.anim-fade {will-change:opacity,transform,filter}
.hero-content .anim-fade,
.hero-scroll-hint.anim-fade {
  opacity:0;
  transform:translateY(14px);
  filter:blur(3px);
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .55s ease-out,filter .55s ease-out;
  transition-delay:var(--intro-delay, 0ms);
}
.hero-content .anim-fade.show,
.hero-scroll-hint.anim-fade.show {opacity:1;transform:translateY(0);filter:blur(0)}
/* Default visible — only hidden inside the hero (where JS adds .show). */
.anim-in {transition:all .55s cubic-bezier(.22,.85,.28,1);transition-delay:var(--intro-delay,0ms)}
.hero-content .anim-in {opacity:0;transform:translateY(10px)}
.hero-content .anim-in.show {opacity:1;transform:translateY(0)}

/* Buttons in hero — gentle scale-in bounce */
.hero-btns.anim-fade .btn {transform:scale(.95);opacity:0;transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .6s ease-out;transition-delay:var(--intro-delay,0ms)}
.hero-btns.anim-fade.show .btn {transform:scale(1);opacity:1}
.hero-btns.anim-fade.show .btn:nth-child(2) {transition-delay:calc(var(--intro-delay,0ms) + 80ms)}

/* ===== SLOW SHIMMER ON HERO ITALIC ACCENT =====
   Scoped to just the hero so other sections don't strobe. */
.hero-h1 .accent-line, .hero-h1 .dl-serif-italic {
  background:linear-gradient(90deg,#ff7a3c 0%,#ffb066 30%,#ffe0c2 50%,#ffb066 70%,#ff7a3c 100%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:hero-shimmer 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-shimmer {
  0%, 30% {background-position:100% 0}
  60%, 100% {background-position:-100% 0}
}
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .accent-line, .hero-h1 .dl-serif-italic {animation:none;background:none;-webkit-text-fill-color:initial;color:#ff7a3c}
}

/* Hero Visual */
.hero-right {position:relative}
.hero-showcase {position:relative}

.showcase-browser {background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.sb-chrome {display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.sb-dots {display:flex;gap:6px}
.sb-dots i {width:9px;height:9px;border-radius:50%;display:block}
.sb-dots i:nth-child(1) {background:rgba(255,92,53,.5)}
.sb-dots i:nth-child(2) {background:rgba(255,200,60,.4)}
.sb-dots i:nth-child(3) {background:rgba(34,197,94,.4)}
.sb-url {display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border-radius:8px;padding:5px 14px;font-size:.72rem;color:var(--text3);flex:1;margin-left:8px}
.lock-icon {font-size:.65rem}
.sb-body {padding:20px;min-height:260px}
.sb-placeholder {}
.sb-nav-mock {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sb-logo-m {width:70px;height:12px;background:rgba(255,255,255,.1);border-radius:4px}
.sb-links-m {display:flex;gap:10px}
.sb-links-m i {display:block;width:36px;height:7px;background:rgba(255,255,255,.06);border-radius:3px}
.sb-hero-m {margin-bottom:20px}
.sb-badge-m {width:90px;height:14px;background:rgba(255,92,53,.1);border-radius:20px;margin-bottom:12px}
.sb-h-m {height:16px;background:rgba(255,255,255,.1);border-radius:4px;margin-bottom:8px;width:88%;animation:pulse-dim 3s ease-in-out infinite}
.sb-h-m.short {width:50%}
.sb-p-m {height:8px;width:65%;background:rgba(255,255,255,.05);border-radius:3px;margin:14px 0}
.sb-cta-m {display:flex;gap:8px;margin-top:14px}
.sb-btn-m {height:28px;border-radius:20px;width:100px}
.sb-btn-m.accent {background:var(--grad);opacity:.65;animation:pulse-dim 3s ease-in-out infinite .4s}
.sb-btn-m:not(.accent) {border:1px solid rgba(255,255,255,.1)}
.sb-cards-m {display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sb-card-m {height:60px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
@keyframes pulse-dim {0%,100%{opacity:.65}50%{opacity:1}}

/* Float stats */
.float-stat {position:absolute;background:rgba(8,8,8,.88);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:14px;padding:14px;z-index:3;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.fs-traffic {top:-8px;right:-28px;width:170px;animation:bobA 6s ease-in-out infinite}
.fs-leads {bottom:40px;left:-36px;width:130px;animation:bobB 5s ease-in-out infinite 1s}
.fs-rank {bottom:-10px;right:40px;width:110px;animation:bobA 7s ease-in-out infinite 2s}
@keyframes bobA {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bobB {0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.fs-header {display:flex;align-items:center;gap:6px;font-size:.65rem;font-weight:600;color:var(--text2);margin-bottom:8px}
.dot-green {width:5px;height:5px;border-radius:50%;background:#22c55e;display:block;box-shadow:0 0 6px rgba(34,197,94,.5)}
.dot-blue {width:5px;height:5px;border-radius:50%;background:#3b82f6;display:block;box-shadow:0 0 6px rgba(59,130,246,.5)}
.fs-chart {height:30px;width:100%;margin-bottom:6px}
.fs-value {font-family:var(--display);font-size:1.2rem;font-weight:700}
.fs-value.up {color:#22c55e}
.fs-big {font-family:var(--display);font-size:1.8rem;font-weight:700;line-height:1}
.fs-sub {font-size:.6rem;color:var(--text3)}

.scroll-indicator {position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2}
.scroll-dot {width:16px;height:24px;border:2px solid var(--text3);border-radius:10px;position:relative}
.scroll-dot::after {content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:3px;height:6px;background:var(--accent);border-radius:3px;animation:scroll-bob 1.8s ease-in-out infinite}
@keyframes scroll-bob {0%,100%{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(6px);opacity:.3}}
@keyframes scroll-x {from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === SECTIONS SHARED — unified rhythm === */
section {padding:128px 0}
.sec-head {text-align:center;max-width:640px;margin:0 auto 64px}
/* NOT-GENERIC TAG — gradient line separators on both sides, glowing pulse dot before text */
.tag {
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:4px;
    color:var(--accent2);
    margin-bottom:24px;
    text-transform:uppercase;
    position:relative;
    box-shadow:none;
    text-shadow:0 0 20px rgba(255,107,61,.35);
}
.tag::before,
.tag::after {
    content:'';
    display:block;
    width:40px;
    height:1.5px;
    background:linear-gradient(90deg,transparent 0%,rgba(255,92,53,.6) 50%,var(--accent) 100%);
    position:relative;
}
.tag::after {
    background:linear-gradient(270deg,transparent 0%,rgba(255,92,53,.6) 50%,var(--accent) 100%);
}
.tag-inner {
    position:relative;
    padding-left:18px;
    display:inline-flex;
    align-items:center;
}
.tag-inner::before {
    content:'';
    position:absolute;
    left:0;top:50%;transform:translateY(-50%);
    width:8px;height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent),0 0 24px rgba(255,92,53,.5);
    animation:tag-pulse-v2 2s ease-in-out infinite;
}
.tag-inner::after {
    content:'';
    position:absolute;
    left:-4px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;
    border-radius:50%;
    border:1px solid rgba(255,92,53,.4);
    animation:tag-orbit 2s ease-out infinite;
}
/* Fallback: if .tag has no .tag-inner child, render dot via ::first-line trick — use text-indent hack */
.tag:not(:has(.tag-inner)) {
    position:relative;
}
.tag:not(:has(.tag-inner))::before {
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent),0 0 24px rgba(255,92,53,.5);
    animation:tag-pulse-v2 2s ease-in-out infinite;
    margin-right:2px;
}
.tag:not(:has(.tag-inner))::after {
    display:none;
}
@keyframes tag-pulse-v2 {0%,100%{box-shadow:0 0 12px var(--accent),0 0 24px rgba(255,92,53,.5);opacity:1}50%{box-shadow:0 0 20px var(--accent),0 0 40px rgba(255,92,53,.8);opacity:.85}}
@keyframes tag-orbit {0%{transform:translateY(-50%) scale(1);opacity:1}100%{transform:translateY(-50%) scale(2.5);opacity:0}}

/* ============================================
   TIER HEADERS — premium centered with gradient divider above
   ============================================ */
.tier-header {
    text-align:center;
    margin:64px auto 32px;
    max-width:720px;
    position:relative;
    padding-top:24px;
}
.tier-header:first-of-type {margin-top:24px}
.tier-header::before {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:1.5px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.tier-badge {
    display:inline-flex !important;
    align-items:center;
    gap:14px;
    padding:8px 22px 8px 8px;
    background:linear-gradient(135deg,rgba(255,92,53,.15),rgba(255,140,66,.04));
    border:1px solid rgba(255,92,53,.3);
    border-radius:60px;
    margin-bottom:22px;
    box-shadow:0 4px 24px rgba(255,92,53,.15),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    width:auto;
}
.tier-num {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--grad);
    font-family:var(--display);
    font-size:.88rem;
    font-weight:800;
    color:#fff;
    box-shadow:0 4px 16px rgba(255,92,53,.5),inset 0 1px 0 rgba(255,255,255,.25);
    letter-spacing:0;
    flex-shrink:0;
}
.tier-label {
    font-size:.75rem;
    font-weight:700;
    letter-spacing:4px;
    color:var(--accent2);
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(255,107,61,.3);
}
.tier-title {
    font-family:var(--display);
    font-size:clamp(1.6rem,2.8vw,2.2rem);
    font-weight:700;
    letter-spacing:-1px;
    color:#fff;
    margin-bottom:12px;
    line-height:1.2;
}
.tier-desc {
    font-size:.98rem;
    color:#b4b4bf;
    line-height:1.7;
    max-width:580px;
    margin:0 auto;
}

/* ============================================
   SERVICE TAG (price / FREE / recurring)
   Absolutely positioned — pinned to top-right corner
   ============================================ */
.service-card {position:relative}
.service-card .service-tag {
    position:absolute !important;
    top:20px;
    right:20px;
    left:auto;
    width:auto !important;
    max-width:fit-content;
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:60px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    color:#d0d0da;
    z-index:5;
    backdrop-filter:blur(8px);
    white-space:nowrap;
    line-height:1;
    align-self:flex-start;
    flex:0 0 auto;
}
.service-card .service-tag.free {
    background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.05));
    border-color:rgba(34,197,94,.4);
    color:#4ade80;
    box-shadow:0 4px 16px rgba(34,197,94,.15),inset 0 1px 0 rgba(255,255,255,.1);
}
.service-card .service-tag.recurring {
    background:var(--grad);
    border-color:transparent;
    color:#fff;
    box-shadow:0 4px 16px rgba(255,92,53,.35),inset 0 1px 0 rgba(255,255,255,.2);
}

/* ============================================
   TIER GRIDS (3-column for tier 1 & 3, tier 2 mixed)
   ============================================ */
.services-bento.tier-1 {grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch}
.services-bento.tier-1 .bento,
.services-bento.tier-3 .bento {height:100%;display:flex;flex-direction:column}

@media(max-width:900px) {

    .services-bento.tier-1,
    .services-bento.tier-3 {grid-template-columns:1fr}

}


/* ============================================
   BEFORE / AFTER VIZ
   ============================================ */
.before-after {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px}
.ba-col {flex:1;text-align:center}
.ba-label {display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:2px;color:#8d8d98;margin-bottom:8px;text-transform:uppercase}
.ba-label.after {color:var(--accent2)}
.ba-score {font-family:var(--display);font-size:2.4rem;font-weight:800;line-height:1;margin-bottom:6px;letter-spacing:-2px}
.ba-col em {display:block;font-size:.7rem;color:#8d8d98;font-style:normal}
.ba-arrow {font-size:1.4rem;color:var(--accent);font-weight:700;padding:0 4px}
.sec-title {font-family:var(--display);font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:700;letter-spacing:-1.5px;line-height:1.15}
.gradient-text {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ip-browser {display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.ip-dots {display:flex;gap:5px}
.ip-dots i {display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1)}
.ip-content {padding:16px}
.ip-block {border-radius:6px;margin-bottom:10px}
.hero-block {height:70px;background:rgba(255,92,53,.08)}
.card-block {height:50px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px}
.ip-row {display:flex;gap:8px}
.ip-lines {display:flex;flex-direction:column;gap:7px;padding:8px 0}
.ip-line {height:7px;width:80%;background:rgba(255,255,255,.05);border-radius:4px}
.ip-label {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--text3);letter-spacing:1px;text-transform:uppercase;font-weight:600}

/* Site Mockups */
.site-mockup {border-radius:var(--r);overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sm-chrome {display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.05)}
.sm-dots {display:flex;gap:5px}
.sm-dots i {width:8px;height:8px;border-radius:50%;display:block}
.sm-dots i:nth-child(1) {background:rgba(255,92,53,.5)}
.sm-dots i:nth-child(2) {background:rgba(255,200,60,.4)}
.sm-dots i:nth-child(3) {background:rgba(34,197,94,.4)}
.sm-url {font-size:.65rem;color:var(--text3);background:rgba(255,255,255,.03);padding:4px 12px;border-radius:6px;flex:1;margin-left:6px}
.sm-body {padding:24px;min-height:240px;display:flex;flex-direction:column}
.sm-nav-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.sm-nav-pills {display:flex;gap:14px}
.sm-nav-pills span {font-size:.5rem;color:rgba(255,255,255,.5);letter-spacing:1px;font-weight:500}
.sm-cta-pill {font-size:.5rem;font-weight:700;padding:5px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.2);color:#fff;letter-spacing:.5px}
.sm-hero-center {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* === STATEMENT === */
.statement-section {padding:110px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.big-statement {font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);font-weight:600;line-height:1.45;letter-spacing:-.8px;color:var(--text3);text-align:center;max-width:860px;margin:0 auto}
.big-statement .word-active {color:var(--text);transition:color .5s}

/* === BENTO SERVICES === */
.services {background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.services::before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(800px,100%);height:500px;background:radial-gradient(ellipse,rgba(255,92,53,.05) 0%,transparent 60%);pointer-events:none;filter:blur(40px)}
.services-bento {display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative}

.bento {
    background:linear-gradient(145deg,rgba(20,20,30,.6) 0%,rgba(10,10,16,.75) 100%);
    backdrop-filter:blur(22px) saturate(1.2);
    -webkit-backdrop-filter:blur(22px) saturate(1.2);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:36px;
    transition:.6s var(--ease);
    position:relative;
    overflow:hidden;
    box-shadow:0 4px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
    isolation:isolate;
}
/* Subtle top-light edge */
.bento::before {
    content:'';
    position:absolute;
    top:0;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    z-index:2;
}
/* Glow spotlight following mouse */
.bento::after {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,107,61,.18),transparent 45%);
    opacity:0;
    transition:opacity .5s;
    border-radius:inherit;
    z-index:1;
    pointer-events:none;
}
.bento:hover::after {opacity:1}
.bento:hover {
    border-color:rgba(255,92,53,.35);
    transform:translateY(-6px);
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 10px 40px rgba(255,92,53,.12),inset 0 1px 0 rgba(255,255,255,.08);
}

/* Content wrapper sits above glow */
.bento > * {position:relative;z-index:2}

.bento-wide {grid-column:1 / -1}

.bento-icon {
    width:52px;
    height:52px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(255,92,53,.2) 0%,rgba(255,140,66,.08) 100%);
    border:1px solid rgba(255,92,53,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    color:var(--accent2);
    transition:.5s var(--ease);
    box-shadow:0 4px 20px rgba(255,92,53,.15),inset 0 1px 0 rgba(255,255,255,.12);
    position:relative;
}
.bento-icon::after {
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,92,53,.4),transparent 60%);
    opacity:0;
    transition:.4s;
    z-index:-1;
    filter:blur(8px);
}
.bento:hover .bento-icon {
    background:linear-gradient(135deg,rgba(255,92,53,.35) 0%,rgba(255,140,66,.15) 100%);
    transform:scale(1.08) rotate(-3deg);
    box-shadow:0 8px 30px rgba(255,92,53,.3),inset 0 1px 0 rgba(255,255,255,.2);
    color:#fff;
}
.bento:hover .bento-icon::after {opacity:1}

.bento h3 {
    font-family:var(--display);
    font-size:1.18rem;
    font-weight:700;
    margin-bottom:10px;
    letter-spacing:-.3px;
    color:#fff;
    transition:.4s;
}
.bento:hover h3 {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bento>p {font-size:.92rem;color:#b4b4bf;line-height:1.65;margin-bottom:18px}
/* Premium tag chips — NOT basic bubbles. Flat, confident, tech-forward. */
.bento-pills {
    display:flex;
    flex-wrap:wrap;
    gap:4px 18px;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.06);
}
.bento-pills span {
    position:relative;
    padding:0 0 0 14px;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.4px;
    color:#8a8a95;
    background:transparent;
    border:none;
    border-radius:0;
    transition:.3s var(--ease);
    display:inline-flex;
    align-items:center;
    line-height:1.5;
}
.bento-pills span::before {
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--accent);
    opacity:.4;
    transition:.3s var(--ease);
}
.bento:hover .bento-pills span {color:#d0d0da}
.bento:hover .bento-pills span::before {opacity:1;box-shadow:0 0 8px var(--accent)}

/* ============================================
   SOCIAL PROOF TOASTER
   ============================================ */
.sp-toaster {
    position:fixed;
    bottom:24px;left:24px;
    z-index:998;
    transform:translateX(-120%);
    transition:transform .5s var(--ease);
    max-width:320px;
}
.sp-toaster.visible {transform:translateX(0)}
.sp-inner {
    display:flex;align-items:center;gap:12px;
    padding:12px 16px 12px 14px;
    background:linear-gradient(135deg,rgba(15,15,22,.95),rgba(10,10,16,.95));
    border:1px solid rgba(255,92,53,.3);
    border-radius:14px;
    backdrop-filter:blur(16px);
    box-shadow:0 20px 50px rgba(0,0,0,.5),0 8px 24px rgba(255,92,53,.15);
}
.sp-dot-wrap {position:relative;width:10px;height:10px;flex-shrink:0}
.sp-dot {position:absolute;inset:0;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.6);animation:sp-pulse 1.5s ease-in-out infinite}
@keyframes sp-pulse {0%,100%{box-shadow:0 0 10px rgba(34,197,94,.6);transform:scale(1)}50%{box-shadow:0 0 20px rgba(34,197,94,.9);transform:scale(1.2)}}
.sp-text {display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.sp-text strong {color:#fff;font-size:.85rem;font-weight:700}
.sp-text span {color:#8d8d98;font-size:.72rem;margin-top:2px}
.sp-close {background:none;border:none;color:#8d8d98;cursor:pointer;font-size:1.2rem;padding:0 4px;line-height:1;transition:.3s}
.sp-close:hover {color:#fff}

@media(max-width:640px) {

    .sp-toaster {bottom:90px;left:16px;right:16px;max-width:none}

}


/* ============================================
   EXIT-INTENT MODAL
   ============================================ */
.exit-modal {
    position:fixed;inset:0;
    z-index:10000;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility .4s;
}
.exit-modal.open {opacity:1;visibility:visible}
.exit-backdrop {position:absolute;inset:0;background:rgba(5,5,10,.75);backdrop-filter:blur(12px)}
.exit-card {
    position:relative;
    max-width:460px;
    width:100%;
    padding:36px 32px 28px;
    background:linear-gradient(145deg,rgba(15,15,22,.98),rgba(10,10,16,.98));
    border:1px solid rgba(255,92,53,.3);
    border-radius:20px;
    box-shadow:0 40px 100px rgba(0,0,0,.6),0 15px 50px rgba(255,92,53,.15);
    transform:translateY(20px) scale(.96);
    transition:transform .4s var(--ease);
    text-align:center;
}
.exit-modal.open .exit-card {transform:translateY(0) scale(1)}
.exit-close {
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    color:#8d8d98;cursor:pointer;font-size:1.3rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:.3s;
}
.exit-close:hover {background:rgba(255,92,53,.15);color:#fff;border-color:rgba(255,92,53,.3)}
.exit-badge {
    display:inline-flex;align-items:center;justify-content:center;
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05));
    border:1px solid rgba(255,92,53,.35);color:var(--accent2);
    margin-bottom:20px;
    box-shadow:0 8px 30px rgba(255,92,53,.2);
}
.exit-card h3 {
    font-family:var(--display);font-size:1.4rem;font-weight:700;
    letter-spacing:-.5px;line-height:1.25;color:#fff;margin-bottom:14px;
}
.exit-card > p {
    font-size:.92rem;color:#b4b4bf;line-height:1.6;margin-bottom:20px;
}
.exit-card > p strong {color:#fff;font-weight:700}
.exit-form {display:flex;gap:8px;margin-bottom:12px}
@media(max-width:440px) {
.exit-form {flex-direction:column}
}

.exit-form input {
    flex:1;padding:13px 16px;
    background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
    border-radius:10px;color:#fff;font-size:.9rem;outline:none;
    transition:.3s;font-family:var(--font);
}
.exit-form input:focus {border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,92,53,.15)}
.exit-form .btn {padding:13px 20px;font-size:.88rem;white-space:nowrap}
.exit-tiny {font-size:.72rem;color:#8d8d98;margin:0}

/* ============================================
   STICKY MOBILE CTA (bottom bar on mobile)
   ============================================ */
.sticky-cta {
    position:fixed;
    bottom:16px;left:16px;right:16px;
    z-index:999;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 10px 10px 16px;
    background:linear-gradient(135deg,rgba(15,15,22,.95),rgba(10,10,16,.95));
    border:1px solid rgba(255,92,53,.3);
    border-radius:60px;
    backdrop-filter:blur(16px);
    box-shadow:0 20px 50px rgba(0,0,0,.5),0 8px 24px rgba(255,92,53,.18);
    transform:translateY(120%);
    transition:transform .5s var(--ease);
}
.sticky-cta.visible {transform:translateY(0)}
.sc-left {display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.sc-left strong {color:#fff;font-size:.88rem;font-weight:700}
.sc-left span {color:#8d8d98;font-size:.7rem;margin-top:2px}
.sc-btn {padding:10px 20px;font-size:.82rem;white-space:nowrap;flex-shrink:0}
@media(max-width:820px) {
.sticky-cta {display:flex}
}


/* ============================================
   INDUSTRIES MARQUEE
   ============================================ */
.industries-section {padding:110px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden}
.ind-marquee {width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);margin-top:20px;padding:10px 0}
.ind-track {display:flex;gap:12px;width:max-content;animation:ind-scroll 50s linear infinite}
.ind-track:hover {animation-play-state:paused}
@keyframes ind-scroll {from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ind-item {
    flex-shrink:0;
    padding:14px 24px;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(255,255,255,.08);
    border-radius:60px;
    font-size:.92rem;
    color:#c9c9d1;
    font-weight:500;
    letter-spacing:.2px;
    white-space:nowrap;
    transition:.3s var(--ease);
}
.ind-item:hover {border-color:rgba(255,92,53,.35);background:linear-gradient(145deg,rgba(255,92,53,.06),#0a0a10);color:#fff;transform:translateY(-2px)}
.ind-note {text-align:center;margin-top:28px;font-size:.92rem;color:#8d8d98}
.ind-note a {color:var(--accent2);text-decoration:underline;text-decoration-color:rgba(255,107,61,.3);text-underline-offset:3px;transition:.3s}
.ind-note a:hover {color:var(--accent);text-decoration-color:var(--accent)}

/* ============================================
   TEXT SCRAMBLE ink effect
   ============================================ */
.scramble-ink {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.85}

/* ============================================
   CUSTOM MAGNETIC CURSOR (desktop only)
   ============================================ */
.custom-cursor {position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.custom-cursor.active {opacity:1}
.cc-dot {position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:transform .12s ease-out,width .25s var(--ease),height .25s var(--ease),background .25s}
.cc-ring {position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);transition:transform .32s cubic-bezier(.22,.61,.36,1),width .35s var(--ease),height .35s var(--ease),border-color .25s,background .25s}
.custom-cursor.hover .cc-dot {width:0;height:0}
.custom-cursor.hover .cc-ring {width:64px;height:64px;border-color:rgba(255,92,53,.85);background:rgba(255,92,53,.08)}
.custom-cursor.clicking .cc-ring {width:28px;height:28px;border-color:#fff;background:rgba(255,255,255,.2)}
/* Hide on touch devices / tablets / reduced motion */
@media (hover:none),(pointer:coarse) {
.custom-cursor {display:none}
}

@media (prefers-reduced-motion:reduce) {
.custom-cursor {display:none}
}


/* (scarcity bar removed — nav now sits at top:0 from base .nav rule) */

/* ============================================
   CUSTOM SCROLLBAR — sleek dark theme
   ============================================ */
/* Firefox */
html {scrollbar-width:thin;scrollbar-color:rgba(255,92,53,.35) rgba(10,10,16,.4)}

/* WebKit (Chrome/Safari/Edge) */
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:rgba(10,10,16,.4);border-left:1px solid rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg,rgba(255,92,53,.35),rgba(255,140,66,.25));
    border-radius:6px;
    border:2px solid rgba(10,10,16,.8);
    transition:.3s;
}
::-webkit-scrollbar-thumb:hover {background:linear-gradient(180deg,rgba(255,92,53,.6),rgba(255,140,66,.45))}
::-webkit-scrollbar-corner {background:rgba(10,10,16,.4)}
.roi-arrow {display:none}

/* ============================================
   TECH STACK BADGES
   ============================================ */
.techstack-section {padding:110px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.ts-intro {text-align:center;max-width:640px;margin:0 auto 36px}
.ts-label {display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:4px;color:var(--accent2);text-transform:uppercase;margin-bottom:14px}
.ts-intro h3 {font-family:var(--display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:-.8px;line-height:1.2;color:#fff;margin-bottom:12px}
.ts-intro p {font-size:.92rem;color:#b4b4bf;line-height:1.65;margin:0}
.ts-grid {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:960px;margin:0 auto}
.ts-badge {display:flex;flex-direction:column;gap:2px;padding:12px 20px;background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(255,255,255,.08);border-radius:12px;transition:.3s var(--ease);cursor:default;min-width:130px}
.ts-badge:hover {border-color:rgba(255,92,53,.35);background:linear-gradient(145deg,rgba(255,92,53,.06),#0a0a10);transform:translateY(-2px)}
.ts-name {font-size:.85rem;font-weight:700;color:#fff;letter-spacing:-.2px}
.ts-role {font-size:.68rem;color:#8d8d98;font-weight:500}

/* Founder video */
.founder-video-wrap {display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:2}
.founder-video {
    position:relative;
    width:240px;
    height:280px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05),rgba(0,0,0,.5));
    border:2px solid rgba(255,92,53,.3);
    overflow:hidden;
    cursor:pointer;
    transition:.4s var(--ease);
    box-shadow:0 20px 50px rgba(0,0,0,.5),0 10px 30px rgba(255,92,53,.15);
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px
}
.founder-video:hover {transform:scale(1.02);box-shadow:0 25px 70px rgba(0,0,0,.6),0 12px 40px rgba(255,92,53,.25)}
.fv-avatar-big {
    width:120px;height:120px;border-radius:50%;background:var(--grad);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-size:2.6rem;font-weight:800;color:#fff;letter-spacing:-1.5px;
    box-shadow:0 10px 40px rgba(255,92,53,.5),inset 0 2px 0 rgba(255,255,255,.25);
    position:relative;
}
.fv-avatar-big::before {
    content:'';position:absolute;inset:-10px;border-radius:50%;
    border:1px solid rgba(255,92,53,.3);animation:g-pulse 3s ease-in-out infinite;
}
.fv-play {
    position:absolute;
    top:14px;right:14px;
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(8px);
    transition:.3s var(--ease);
}
.fv-play:hover {background:var(--grad);border-color:transparent;box-shadow:0 4px 16px rgba(255,92,53,.5)}
.fv-meta {display:flex;flex-direction:column;gap:4px;text-align:center;padding:0 14px;margin-top:4px;position:relative;z-index:2}
.fv-duration {font-size:.65rem;font-weight:700;color:var(--accent2);letter-spacing:1.5px;text-transform:uppercase}
.fv-title {font-size:.82rem;color:#fff;font-weight:600;line-height:1.35}

/* Founder trust mini badges */
.founder-trust {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:500px) {
.founder-trust {grid-template-columns:1fr 1fr}
}

.ft {text-align:center;padding:12px 8px;background:rgba(0,0,0,.3);border:1px solid rgba(255,92,53,.15);border-radius:10px}
.ft strong {display:block;font-family:var(--display);font-size:1.15rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;line-height:1;margin-bottom:4px}
.ft span {display:block;font-size:.68rem;color:#8d8d98;letter-spacing:.3px;line-height:1.3}

/* Stat row (legacy — still used elsewhere maybe) */
.pc-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 28px;padding:16px 14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:14px}
@media(max-width:520px) {
.pc-stats {grid-template-columns:1fr 1fr}
}

.pc-stat {text-align:center;padding:4px}
.pc-stat strong {display:block;font-family:var(--display);font-size:1.15rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;line-height:1;margin-bottom:4px}
.pc-stat span {display:block;font-size:.62rem;color:#8d8d98;font-weight:600;letter-spacing:1px;text-transform:uppercase}

/* ============================================
   LIVE MORPH DEMO — before/after auto-cycling
   ============================================ */
.pc-morph {position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:420px}
.pcm-stage {position:relative;width:100%;max-width:440px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6),0 12px 30px rgba(255,92,53,.1),inset 0 1px 0 rgba(255,255,255,.05)}
.pcm-screen {position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity 1s ease-in-out,transform 1s var(--ease)}
.pc-morph[data-show="after"] .pcm-before {opacity:0;transform:scale(1.04)}
.pc-morph[data-show="before"] .pcm-after {opacity:0;transform:scale(.96)}
.pcm-before {animation:pcm-cycle-before 7s ease-in-out infinite}
.pcm-after {animation:pcm-cycle-after 7s ease-in-out infinite}
.pc-morph:hover .pcm-before,.pc-morph:hover .pcm-after {animation-play-state:paused}
@keyframes pcm-cycle-before {0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes pcm-cycle-after {0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}

/* "Before" — 2010 era template */
.pcm-ribbon {position:absolute;top:14px;left:14px;padding:4px 12px;background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.5);color:#ef4444;font-size:.6rem;font-weight:800;letter-spacing:2px;border-radius:60px;z-index:3}
.pcm-ribbon-after {background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(255,92,53,.45)}
.pcm-old {flex:1;background:linear-gradient(180deg,#e6e6cf 0%,#d4d4b8 100%);display:flex;flex-direction:column;color:#1a1a1a;font-family:Georgia,serif}
.pcm-old-hdr {padding:10px 16px;background:linear-gradient(180deg,#5a7ba0,#2a4a70);color:#fff;font-size:.72rem;border-bottom:3px solid #1a3a5a;font-family:Arial,sans-serif;letter-spacing:1px}
.pcm-old-body {padding:20px 18px;flex:1;display:flex;flex-direction:column;gap:12px}
.pcm-old-title {font-size:1.3rem;font-weight:700;color:#2a4a70;text-shadow:1px 1px 0 rgba(0,0,0,.15);font-family:'Times New Roman',serif}
.pcm-old-p {font-size:.82rem;color:#444;line-height:1.5}
.pcm-old-img {height:70px;background:linear-gradient(135deg,#c0c0a0,#888866);border:1px solid #7a7a5a;border-radius:2px}
.pcm-old-contact {padding:8px 12px;background:#ffff99;border:1px dashed #aaaa44;font-size:.82rem;font-weight:700;color:#2a4a70;font-family:Arial}
.pcm-old-meta {margin-top:auto;font-size:.65rem;color:#6a6a4a;font-style:italic;text-align:center;font-family:Arial}

/* "After" — modern site */
.pcm-new {flex:1;background:linear-gradient(180deg,#0a0a12,#131320);display:flex;flex-direction:column}
.pcm-new-chrome {display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.pcm-new-chrome i {width:8px;height:8px;border-radius:50%;display:block}
.pcm-new-chrome i:nth-child(1) {background:#ff5f57}
.pcm-new-chrome i:nth-child(2) {background:#febc2e}
.pcm-new-chrome i:nth-child(3) {background:#28c840}
.pcm-new-chrome span {flex:1;background:rgba(255,255,255,.04);border-radius:6px;padding:4px 10px;font-size:.68rem;color:#d0d0da;font-family:monospace;margin-left:8px;display:flex;align-items:center;gap:6px}
.pcm-new-live {width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6);animation:wf-pulse 2s ease-in-out infinite;flex-shrink:0;margin-left:auto !important;padding:0 !important}
.pcm-new-body {padding:24px 20px;flex:1;display:flex;flex-direction:column;gap:12px;position:relative}
.pcm-new-eyebrow {font-size:.6rem;font-weight:800;letter-spacing:3px;color:var(--accent2)}
.pcm-new-h1 {font-family:var(--display);font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.05}
.pcm-new-h1 em {font-family:var(--editorial);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pcm-new-p {height:8px;background:rgba(255,255,255,.08);border-radius:3px;width:90%}
.pcm-new-p.short {width:60%}
.pcm-new-cta {display:inline-block;align-self:flex-start;padding:10px 20px;background:var(--grad);color:#fff;border-radius:60px;font-size:.78rem;font-weight:700;box-shadow:0 6px 20px rgba(255,92,53,.4),inset 0 1px 0 rgba(255,255,255,.2);margin-top:4px}
.pcm-new-scores {display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.pnsc {text-align:center;padding:6px 4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:8px}
.pnsc strong {display:block;font-family:var(--display);font-size:.95rem;font-weight:800;color:#4ade80;line-height:1}
.pnsc span {display:block;font-size:.55rem;color:#8d8d98;font-weight:600;letter-spacing:.5px;margin-top:2px;text-transform:uppercase}

.pcm-caption {display:inline-flex;align-items:center;gap:8px;font-size:.72rem;color:#8d8d98;font-family:var(--editorial);font-style:italic}
.pcm-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:wf-pulse 1.5s ease-in-out infinite}

/* Legacy browser mockup (keep for compat) */
.pc-visual {position:relative;display:flex;flex-direction:column;align-items:center}
.pc-browser {
    width:100%;max-width:480px;
    background:#0a0a14;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 70px rgba(0,0,0,.6),0 12px 30px rgba(255,92,53,.1),inset 0 1px 0 rgba(255,255,255,.05);
    overflow:hidden;
    transition:.5s var(--ease);
}
.pcb-chrome {display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(180deg,#141420,#0e0e18);border-bottom:1px solid rgba(255,255,255,.06)}
.pcb-dots {display:flex;gap:5px}
.pcb-dots i {width:9px;height:9px;border-radius:50%;display:block}
.pcb-dots i:nth-child(1) {background:#ff5f57}
.pcb-dots i:nth-child(2) {background:#febc2e}
.pcb-dots i:nth-child(3) {background:#28c840}
.pcb-url {display:flex;align-items:center;gap:6px;flex:1;background:rgba(255,255,255,.04);border-radius:6px;padding:5px 12px;font-size:.7rem;color:#c9c9d1;font-family:monospace}
.pcb-live {width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6);animation:wf-pulse 2s ease-in-out infinite}

.pcb-body {padding:16px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.pcb-nav {display:flex;align-items:center;gap:10px}
.pcb-logo {font-family:var(--display);font-size:.65rem;font-weight:800;color:#fff;letter-spacing:1px}
.pcb-nav > span:not(.pcb-logo):not(.pcb-cta-pill) {flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;max-width:40px}
.pcb-cta-pill {width:60px;height:18px;background:var(--grad);border-radius:30px;margin-left:auto;box-shadow:0 2px 10px rgba(255,92,53,.35)}

.pcb-hero {display:flex;flex-direction:column;gap:6px;padding:12px 4px}
.pcb-hero-eyebrow {width:80px;height:6px;background:rgba(255,92,53,.4);border-radius:3px}
.pcb-hero-title {height:14px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-radius:4px;width:95%}
.pcb-hero-title.short {width:68%}
.pcb-hero-p {height:7px;background:rgba(255,255,255,.06);border-radius:3px;width:80%;margin-top:6px}
.pcb-hero-cta {width:120px;height:28px;background:var(--grad);border-radius:60px;margin-top:10px;box-shadow:0 4px 14px rgba(255,92,53,.4)}

.pcb-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.pcb-grid > div {height:44px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:6px}

/* PageSpeed score badge — clean, below the browser not overlapping */
.pc-score-badge {
    display:flex;align-items:center;gap:12px;
    padding:12px 18px 12px 12px;
    margin-top:16px;
    align-self:center;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(34,197,94,.35);
    border-radius:60px;
    box-shadow:0 12px 30px rgba(0,0,0,.5),0 6px 16px rgba(34,197,94,.18);
    z-index:2;position:relative;
}
.pcs-ring {position:relative;width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pcs-score {position:absolute;font-family:var(--display);font-size:1rem;font-weight:800;color:#4ade80;letter-spacing:-.5px}
.pcs-meta strong {display:block;font-size:.78rem;font-weight:700;color:#fff;line-height:1}
.pcs-meta span {display:block;font-size:.66rem;color:#8d8d98;margin-top:2px}

/* Legacy brand viz (kept for /services page) */
.pc-brand-viz {margin:6px 0 22px;padding:22px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);border-radius:14px;display:flex;flex-direction:column;gap:16px}
.pbv-logo {display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.pbv-logo-mark {width:34px;height:34px;border-radius:10px;background:var(--grad);box-shadow:0 4px 12px rgba(255,92,53,.4),inset 0 1px 0 rgba(255,255,255,.25);position:relative;flex-shrink:0}
.pbv-logo-mark::before {content:'';position:absolute;inset:7px;border:2px solid #fff;border-radius:4px;opacity:.5}
.pbv-logo-text {font-family:var(--display);font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.5px}
.pbv-logo-text em {font-family:var(--editorial);font-style:italic;font-weight:500;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variation-settings:"opsz" 72}

.pbv-palette {display:flex;gap:6px;height:44px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.pbv-sw {flex:1;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:.3s var(--ease);cursor:default}
.pbv-sw:hover {flex:1.5}

.pbv-type {display:flex;align-items:center;gap:14px}
.pbv-type-display {font-family:var(--editorial);font-size:2.2rem;font-weight:600;color:#fff;font-variation-settings:"opsz" 144;line-height:1}
.pbv-type-meta {display:flex;flex-direction:column;gap:3px}
.pbv-type-meta span {font-size:.72rem;color:#8d8d98}

/* ============================================
   TOOLS TEASER — sends to /growth-tools
   ============================================ */
.tools-teaser {padding:56px 0;background:var(--bg2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.tools-teaser-inner {display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 40px;background:linear-gradient(135deg,rgba(255,92,53,.08),rgba(0,0,0,.5));border:1px solid rgba(255,92,53,.2);border-radius:20px;flex-wrap:wrap}
.tools-teaser-text {flex:1;min-width:280px}
.tools-teaser-text .tag {margin-bottom:12px}
.tools-teaser-text h2 {font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.8px;line-height:1.22;color:#fff;margin-bottom:10px}
.tools-teaser-text > p {font-size:.95rem;color:#b4b4bf;line-height:1.6;margin:0;max-width:520px}
.tools-teaser .btn {flex-shrink:0}
@media(max-width:640px) {
.tools-teaser-inner {padding:28px 22px}.tools-teaser .btn {width:100%}
}


/* ============================================
   VIDEO SHOWCASE — Higgsfield video slots
   ============================================ */
.video-showcase {padding:100px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden}
.video-showcase::before {content:'';position:absolute;top:10%;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(255,92,53,.06),transparent 60%);pointer-events:none;filter:blur(70px)}
.vs-intro {max-width:720px;margin-bottom:48px;position:relative;z-index:2}
.vs-intro .tag {margin-bottom:18px}
.dl-title-sm {font-family:var(--display);font-size:clamp(2rem,3.8vw,3rem);font-weight:700;letter-spacing:-1.6px;line-height:1.05;color:#fff;margin:0 0 18px}
.vs-intro .dl-lede {font-size:1.05rem;color:#b4b4bf;line-height:1.65;margin:0;max-width:560px}

.vs-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:2;margin-bottom:36px}
@media(max-width:900px) {
.vs-grid {grid-template-columns:1fr 1fr}
}

@media(max-width:600px) {
.vs-grid {grid-template-columns:1fr}
}


.vs-tile {display:flex;flex-direction:column;gap:12px}
.vs-video {
    position:relative;
    aspect-ratio:9/16;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:.5s var(--ease);
}
.vs-video::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,92,53,.12),transparent 70%);opacity:0;transition:.4s}
.vs-video:hover {transform:translateY(-4px);border-color:rgba(255,92,53,.35);box-shadow:0 30px 70px rgba(0,0,0,.5),0 12px 30px rgba(255,92,53,.12)}
.vs-video:hover::before {opacity:1}
.vs-video video {width:100%;height:100%;object-fit:cover;display:block}
.vs-fallback {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px 20px;text-align:center;color:#8d8d98;position:relative;z-index:2}
.vs-fallback svg {color:var(--accent2);opacity:.7;transition:.4s}
.vs-video:hover .vs-fallback svg {color:#fff;opacity:1;transform:scale(1.1)}
.vs-fallback span {font-family:var(--display);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.vs-fallback em {font-size:.75rem;color:#8d8d98;font-style:italic;font-family:var(--editorial)}

.vs-label {font-size:.7rem;font-weight:700;letter-spacing:2px;color:var(--accent2);text-transform:uppercase;padding-left:4px}

.vs-note {font-size:.82rem;color:#8d8d98;max-width:680px;line-height:1.6;margin:0;padding-top:14px;border-top:1px dashed rgba(255,255,255,.08);text-align:center;position:relative;z-index:2}
.vs-note code {padding:2px 8px;background:rgba(255,92,53,.08);border:1px solid rgba(255,92,53,.2);border-radius:6px;font-size:.75rem;color:var(--accent2);font-family:monospace}

/* ============================================
   ABOUT TEASER — compact founder/trust
   ============================================ */
.about-teaser {padding:110px 0;background:var(--bg2)}
.about-teaser-inner {display:grid;grid-template-columns:1.2fr auto;gap:48px;align-items:center;padding:40px 48px;background:linear-gradient(145deg,rgba(255,92,53,.05),rgba(255,140,66,.01),#0a0a12);border:1px solid rgba(255,92,53,.2);border-radius:22px;box-shadow:0 25px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}
.about-teaser-inner::before {content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,92,53,.1),transparent 60%);pointer-events:none;filter:blur(50px)}
@media(max-width:800px) {
.about-teaser-inner {grid-template-columns:1fr;gap:28px;padding:32px 24px}
}


.at-left {position:relative;z-index:2}
.at-left .tag {margin-bottom:14px}
.at-left h2 {font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.9px;line-height:1.2;color:#fff;margin:0 0 16px}
.at-left > p {font-size:.98rem;color:#c9c9d1;line-height:1.65;margin:0 0 24px;max-width:560px}
.at-left em {font-family:var(--editorial);font-style:italic;color:var(--accent2);font-weight:500}

.at-trust {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
@media(max-width:560px) {
.at-trust {grid-template-columns:1fr 1fr}
}

.at-t {text-align:center;padding:12px 8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,92,53,.14);border-radius:10px}
.at-t strong {display:block;font-family:var(--display);font-size:1.05rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px;line-height:1;margin-bottom:3px}
.at-t span {display:block;font-size:.66rem;color:#8d8d98;letter-spacing:.3px;line-height:1.3}

.at-right {display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:2}
.at-avatar {width:100px;height:100px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-1px;box-shadow:0 10px 40px rgba(255,92,53,.4),inset 0 2px 0 rgba(255,255,255,.2);position:relative}
.at-avatar::before {content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,92,53,.25);animation:g-pulse 3s ease-in-out infinite}
.at-sig {text-align:center}
.at-sig strong {display:block;font-family:var(--display);font-size:.95rem;color:#fff;font-weight:700}
.at-sig em {display:block;font-size:.78rem;color:#8d8d98;font-style:normal;margin-top:2px}

/* ============================================
   DESIGN LAB — editorial showcase of craft
   ============================================ */
.design-lab {padding:110px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden}
.design-lab::before {content:'';position:absolute;top:10%;right:-10%;width:700px;height:500px;background:radial-gradient(ellipse,rgba(255,92,53,.05),transparent 60%);pointer-events:none;filter:blur(80px)}

/* Editorial intro (asymmetric — left-heavy) */
.dl-intro {max-width:820px;margin-bottom:80px;position:relative;z-index:2}
.dl-eyebrow {display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:800;letter-spacing:5px;color:var(--accent2);text-transform:uppercase;margin-bottom:28px;font-family:var(--font)}
.dl-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.dl-title {font-family:var(--display);font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:700;letter-spacing:-2.5px;line-height:1.02;color:#fff;margin-bottom:28px}
.dl-title em {font-family:var(--editorial);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;letter-spacing:-1.5px;color:#d0d0da}
.dl-serif {font-family:var(--editorial);font-weight:500;font-style:italic;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variation-settings:"opsz" 144;letter-spacing:-1.5px}
.dl-lede {font-size:1.15rem;color:#b4b4bf;line-height:1.6;max-width:640px;margin:0}
.dl-lede strong {color:#fff;font-weight:600}

/* Editorial typography demo — asymmetric magazine spread */
.dl-editorial {display:grid;grid-template-columns:220px 1fr;gap:48px;padding:44px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:64px;align-items:start;position:relative;z-index:2}
@media(max-width:820px) {
.dl-editorial {grid-template-columns:1fr;gap:24px}
}


.dl-ed-left {display:flex;flex-direction:column;gap:12px;padding-top:8px}
.dl-num {font-family:var(--editorial);font-size:3rem;font-weight:500;font-style:italic;color:var(--accent2);line-height:1;font-variation-settings:"opsz" 144;letter-spacing:-1px}
.dl-label {font-size:.7rem;font-weight:700;letter-spacing:3px;color:#8d8d98;text-transform:uppercase}
.dl-ed-h {font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-1.2px;line-height:1.12;color:#fff;margin-bottom:20px}
.dl-strike {position:relative;color:#8d8d98}
.dl-strike::after {content:'';position:absolute;top:50%;left:-4%;right:-4%;height:2px;background:var(--accent);transform:rotate(-4deg);transform-origin:center}
.dl-ed-right > p {font-size:1rem;color:#b4b4bf;line-height:1.7;margin-bottom:28px;max-width:560px}

.dl-type-specimen {display:flex;gap:14px;flex-wrap:wrap}
.dl-specimen {display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:.3s}
.dl-specimen:hover {border-color:rgba(255,92,53,.3);background:rgba(255,92,53,.04)}
.dl-specimen-big {font-family:var(--editorial);font-size:2rem;font-weight:600;color:#fff;font-variation-settings:"opsz" 144;line-height:1}
.dl-specimen-big.sans {font-family:var(--display);font-weight:700}
.dl-specimen-big.inter {font-family:var(--font);font-weight:500}
.dl-specimen span {font-size:.74rem;color:#8d8d98;font-weight:500;letter-spacing:.3px}

/* 3-up cards grid */
.dl-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:80px;position:relative;z-index:2}
@media(max-width:900px) {
.dl-grid {grid-template-columns:1fr}
}


.dl-card {padding:32px 28px;background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(255,255,255,.06);border-radius:18px;transition:.5s var(--ease);position:relative;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;gap:18px;min-height:360px}
.dl-card:hover {border-color:rgba(255,92,53,.3);transform:translateY(-4px);box-shadow:0 25px 60px rgba(0,0,0,.45),0 10px 30px rgba(255,92,53,.1),inset 0 1px 0 rgba(255,255,255,.08)}

.dl-card-num {position:absolute;top:24px;right:28px;font-family:var(--editorial);font-style:italic;font-size:1.1rem;color:#6a6a75;font-variation-settings:"opsz" 72;font-weight:500}

.dl-card h4 {font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.4px;color:#fff;line-height:1.25;margin-top:auto}
.dl-card > p {font-size:.9rem;color:#b4b4bf;line-height:1.6;margin:0}
.dl-card em {font-family:var(--editorial);font-style:italic;color:var(--accent2);font-weight:500}

/* Motion demo — 3 orbiting orbs */
.dl-motion-demo {position:relative;width:100%;height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dl-orb {position:absolute;border-radius:50%;filter:blur(.5px)}
.dl-orb-1 {width:80px;height:80px;background:radial-gradient(circle,#ff5c35,transparent 70%);animation:dl-orbit1 6s ease-in-out infinite;opacity:.8}
.dl-orb-2 {width:56px;height:56px;background:radial-gradient(circle,#ff8c42,transparent 70%);animation:dl-orbit2 8s ease-in-out infinite;opacity:.6}
.dl-orb-3 {width:40px;height:40px;background:radial-gradient(circle,#ffb066,transparent 70%);animation:dl-orbit3 5s ease-in-out infinite;opacity:.7}
@keyframes dl-orbit1 {0%,100%{transform:translate(-40px,0) scale(1)}50%{transform:translate(40px,10px) scale(1.15)}}
@keyframes dl-orbit2 {0%,100%{transform:translate(30px,-15px) scale(1)}50%{transform:translate(-30px,15px) scale(.9)}}
@keyframes dl-orbit3 {0%,100%{transform:translate(0,20px) scale(1)}50%{transform:translate(0,-20px) scale(1.2)}}

/* Color demo — 5 swatches with hex labels on hover */
.dl-color-demo {display:flex;gap:6px;height:140px;align-items:stretch}
.dl-sw {flex:1;border-radius:10px;position:relative;transition:.4s var(--ease);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dl-sw:hover {flex:2.2;box-shadow:0 8px 30px rgba(255,92,53,.25),inset 0 0 0 1px rgba(255,255,255,.15)}
.dl-sw::after {content:attr(data-hex);position:absolute;bottom:8px;left:8px;font-size:.6rem;font-weight:700;color:#fff;letter-spacing:1px;font-family:monospace;opacity:0;transition:.3s;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dl-sw:hover::after {opacity:1}

/* Interactive demo — the button that does EVERYTHING */
.dl-interactive-demo {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:140px}
.dl-btn-demo {display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:linear-gradient(135deg,rgba(255,92,53,.15),rgba(255,140,66,.04));border:1.5px solid rgba(255,92,53,.35);color:#fff;border-radius:60px;font-family:var(--font);font-size:.95rem;font-weight:600;cursor:pointer;transition:.4s var(--ease);position:relative;overflow:hidden}
.dl-btn-demo::before {content:'';position:absolute;inset:0;background:var(--grad);border-radius:inherit;opacity:0;transition:.4s;z-index:0}
.dl-btn-demo > * {position:relative;z-index:1;transition:.4s}
.dl-btn-demo:hover::before {opacity:1}
.dl-btn-demo:hover {border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,92,53,.4)}
.dl-btn-demo:hover .dl-btn-arrow {transform:translateX(6px)}
.dl-btn-demo:active {transform:translateY(0) scale(.97);transition:.1s}
.dl-btn-arrow {transition:.3s var(--ease)}
.dl-hint {font-size:.72rem;color:#6a6a75;font-style:italic;font-family:var(--editorial)}

/* Editorial pull quote */
.dl-quote {max-width:820px;margin:0 auto;padding:48px 32px;text-align:center;position:relative;z-index:2}
.dl-quote-mark {position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:var(--editorial);font-size:8rem;font-weight:600;color:var(--accent);opacity:.25;line-height:.6;font-style:italic;font-variation-settings:"opsz" 144}
.dl-quote p {font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:500;line-height:1.4;color:#e8e8ee;letter-spacing:-.7px;margin:0;position:relative;z-index:2}
.dl-quote strong {color:#fff;font-weight:700}
#gsUrl {background:transparent;border:none;color:#fff;font-size:1rem;padding:14px 0;outline:none;font-family:monospace;letter-spacing:.3px}
#gsUrl::placeholder {color:#6a6a75}
@keyframes gs-spin {to{transform:rotate(360deg)}}

/* ============================================
   LIVE CLIENT DASHBOARD TEASER
   ============================================ */
.dashboard-teaser {padding:110px 0;background:var(--bg2);position:relative;overflow:hidden}
.dashboard-teaser::before {content:'';position:absolute;bottom:-10%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(255,92,53,.06),transparent 60%);pointer-events:none;filter:blur(60px)}

.dt-wrap {max-width:1100px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0a0a12;box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);position:relative}

.dt-chrome {display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:12px 18px;background:linear-gradient(180deg,#141420,#0e0e18);border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.dt-dots {display:flex;gap:6px}
.dt-dots i {width:10px;height:10px;border-radius:50%;display:block}
.dt-dots i:nth-child(1) {background:#ff5f57}
.dt-dots i:nth-child(2) {background:#febc2e}
.dt-dots i:nth-child(3) {background:#28c840}
.dt-url {display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border-radius:8px;padding:6px 14px;font-size:.75rem;color:#c9c9d1;font-family:monospace;justify-self:stretch;max-width:400px;margin:0 auto}
.dt-live {width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5);animation:wf-pulse 2s ease-in-out infinite}
.dt-user {width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.72rem;font-weight:800;letter-spacing:.5px}

.dt-body {display:grid;grid-template-columns:220px 1fr;min-height:500px}
@media(max-width:768px) {
.dt-body {grid-template-columns:1fr}.dt-sidebar {display:none}
}


.dt-sidebar {padding:22px 14px;background:rgba(0,0,0,.3);border-right:1px solid rgba(255,255,255,.05)}
.dt-logo {font-family:var(--display);font-size:.95rem;font-weight:800;color:#fff;margin-bottom:22px;padding:0 12px;letter-spacing:-.5px}
.dt-logo span {color:var(--accent)}
.dt-nav {display:flex;flex-direction:column;gap:2px}
.dt-nav a {display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:.82rem;color:#8d8d98;cursor:default;transition:.3s;font-weight:500}
.dt-nav a.active {background:linear-gradient(135deg,rgba(255,92,53,.15),rgba(255,140,66,.04));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,92,53,.2)}
.dt-nav a.active svg {color:var(--accent)}

.dt-main {padding:28px}
.dt-hello {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.dt-hello h4 {font-family:var(--display);font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:-.3px}
.dt-hello span {font-size:.82rem;color:#8d8d98}
.dt-pulse {display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:60px;font-size:.75rem;color:#4ade80;font-weight:600}
.dt-pulse-dot {width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);animation:wf-pulse 1.8s ease-in-out infinite}

.dt-kpi-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
@media(max-width:700px) {
.dt-kpi-grid {grid-template-columns:1fr 1fr}
}

.dt-kpi {padding:16px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:.3s}
.dt-kpi:hover {border-color:rgba(255,92,53,.25);background:rgba(255,92,53,.03)}
.dt-kpi-label {display:block;font-size:.7rem;color:#8d8d98;font-weight:600;letter-spacing:.3px;margin-bottom:8px;text-transform:uppercase}
.dt-kpi-val {display:block;font-family:var(--display);font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1;margin-bottom:4px}
.dt-kpi-trend {display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:60px}
.dt-kpi-trend.up {color:#4ade80;background:rgba(34,197,94,.08)}

.dt-chart-card {padding:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:22px}
.dt-chart-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.dt-chart-header strong {display:block;font-size:.88rem;color:#fff;font-weight:700}
.dt-chart-header span {display:block;font-size:.7rem;color:#8d8d98;margin-top:2px}
.dt-chart-tabs {display:flex;gap:4px;padding:3px;background:rgba(0,0,0,.3);border-radius:8px;border:1px solid rgba(255,255,255,.05)}
.dt-chart-tabs span {padding:5px 12px;font-size:.72rem;color:#8d8d98;border-radius:6px;font-weight:600;cursor:default;transition:.3s}
.dt-chart-tabs span.active {background:var(--grad);color:#fff;box-shadow:0 2px 8px rgba(255,92,53,.3)}
.dt-chart {animation:dt-draw 1.8s var(--ease)}
@keyframes dt-draw {from{opacity:0}to{opacity:1}}
.dt-chart-dot {animation:wf-pulse 2s ease-in-out infinite}

.dt-activity {padding:18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.dt-activity > strong {display:block;font-size:.8rem;color:#c9c9d1;font-weight:700;letter-spacing:.3px;margin-bottom:12px;text-transform:uppercase}
.dt-act {display:flex;align-items:center;gap:10px;font-size:.82rem;color:#c9c9d1;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.dt-act:last-child {border-bottom:none}
.dt-act em {margin-left:auto;font-style:normal;color:#8d8d98;font-size:.72rem;white-space:nowrap}
.dt-act-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(255,92,53,.5);flex-shrink:0}

.dt-overlay {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:6px 18px;background:var(--grad);border-radius:60px;box-shadow:0 8px 24px rgba(255,92,53,.4);pointer-events:none}
.dt-overlay-badge {font-size:.7rem;font-weight:800;letter-spacing:2px;color:#fff;text-transform:uppercase}

/* ============================================
   KINETIC TYPE BANNER — oversized shifting headline
   ============================================ */
.kinetic-band {padding:60px 0;overflow:hidden;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative}
.kinetic-band::before,.kinetic-band::after {content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.kinetic-band::before {left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.kinetic-band::after {right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.kb-track {display:flex;gap:60px;width:max-content;animation:kb-scroll 32s linear infinite;will-change:transform}
.kinetic-band:hover .kb-track {animation-play-state:paused}
@keyframes kb-scroll {from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kb-track span {font-family:var(--display);font-size:clamp(3rem,8vw,7rem);font-weight:700;letter-spacing:-3px;color:transparent;-webkit-text-stroke:1.5px rgba(255,92,53,.55);line-height:1;white-space:nowrap;transition:.4s}
.kb-track span.kb-italic {font-family:var(--editorial);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;-webkit-text-stroke:0;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-2px}
.kinetic-band:hover .kb-track span:not(.kb-italic) {-webkit-text-stroke:1.5px rgba(255,140,66,.95);color:rgba(255,92,53,.08)}

/* ============================================
   PAIN POINT HOOK — problem/cost framing
   ============================================ */
.pain-section {padding:110px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative;overflow:hidden}
.pain-section::before {content:'';position:absolute;top:20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(239,68,68,.06),transparent 60%);pointer-events:none;filter:blur(40px)}
.pain-inner {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative}
@media(max-width:900px) {
.pain-inner {grid-template-columns:1fr;gap:40px}
}

.pain-left {}
.pain-title {font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-2px;line-height:1.05;margin-bottom:24px;color:#fff}
.pain-desc {font-size:1.15rem;color:#b4b4bf;line-height:1.55;margin-bottom:24px;max-width:480px}
.pain-desc strong {color:#fff;font-weight:600}

.pain-check-list {display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.pc {display:flex;align-items:flex-start;gap:18px;padding:20px 22px;background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(239,68,68,.15);border-radius:14px;transition:.4s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);position:relative;overflow:hidden}
.pc::before {content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ef4444,#dc2626);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.pc:hover {border-color:rgba(239,68,68,.45);transform:translateX(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(239,68,68,.08)}
.pc:hover::before {transform:scaleY(1)}
.pc-x {display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(239,68,68,.18);border:1.5px solid rgba(239,68,68,.4);color:#ef4444;font-weight:800;flex-shrink:0;margin-top:2px;font-size:1.05rem;transition:.4s var(--ease)}
.pc:hover .pc-x {background:rgba(239,68,68,.3);border-color:#ef4444;transform:rotate(90deg) scale(1.08);box-shadow:0 0 20px rgba(239,68,68,.4)}
.pc strong {display:block;color:#fff;font-weight:700;font-size:1.02rem;margin-bottom:5px;letter-spacing:-.2px}
.pc em {display:block;color:#9d9da8;font-size:.85rem;font-style:normal;line-height:1.5}
.pain-cta {margin-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pain-cta-note {font-size:.8rem;color:#7c7c87;letter-spacing:.2px}

/* Danger tag variant for pain section */
.tag-danger {background:rgba(239,68,68,.1)!important;border-color:rgba(239,68,68,.3)!important;color:#ff6b6b!important}

/* Cost-of-waiting stat strip on the left side */
.pain-cost-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 14px;padding:22px 18px;background:linear-gradient(145deg,rgba(239,68,68,.05),rgba(0,0,0,.35));border:1px solid rgba(239,68,68,.16);border-radius:16px;position:relative;overflow:hidden}
.pain-cost-grid::before {content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#ef4444,transparent);opacity:.6}
@media(max-width:560px) {
.pain-cost-grid {grid-template-columns:1fr;gap:18px}
}

.pain-cost {text-align:left;padding:0 4px}
.pain-cost-num {display:block;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;background:linear-gradient(135deg,#ff6b6b,#ff8c42);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:1;margin-bottom:8px}
.pain-cost-label {display:block;font-size:.78rem;color:#9d9da8;line-height:1.45}
.pain-cost-label sup {color:#ff6b6b;font-weight:700}
.pain-sources {font-size:.7rem;color:#5d5d68;margin:0 0 8px;line-height:1.6}
.pain-sources sup {color:#ff6b6b;font-weight:700;margin-right:2px}

/* Right column intro line */
.pain-right-head {margin-bottom:14px}
.pain-right-eyebrow {display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ff6b6b;padding:6px 12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);border-radius:60px}

/* Cost pill on each pain item */
.pc em b {color:#fff;font-weight:700}
.pc-cost {display:inline-block;margin-top:10px;padding:4px 10px;font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#ff8a70;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:60px}

/* "Here's what changes" 3-step strip */
.pain-fix {margin:30px 0 22px;padding:22px 22px;background:linear-gradient(145deg,rgba(34,197,94,.04),rgba(0,0,0,.3));border:1px solid rgba(34,197,94,.18);border-radius:14px;position:relative}
.pain-fix-eyebrow {display:block;font-size:.72rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#4ade80;margin-bottom:14px}
.pain-fix-row {display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px) {
.pain-fix-row {grid-template-columns:1fr}
}

.pain-fix-step {display:flex;align-items:flex-start;gap:10px;padding:6px 2px}
.pain-fix-step strong {flex-shrink:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(34,197,94,.15);border:1.5px solid rgba(34,197,94,.45);color:#4ade80;font-family:var(--display);font-weight:800;font-size:.85rem;line-height:1}
.pain-fix-step span {font-size:.82rem;color:#b4b4bf;line-height:1.5}
.pain-fix-step span b {color:#fff;font-weight:700}

/* ============================================
   CASE STUDIES — real client work, detailed story
   ============================================ */
.case-studies {padding:110px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.case-card {
    padding:40px;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    margin-bottom:24px;
    transition:.5s var(--ease);
    box-shadow:0 15px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
}
.case-card:hover {border-color:rgba(255,92,53,.25);transform:translateY(-4px);box-shadow:0 25px 60px rgba(0,0,0,.4),0 10px 30px rgba(255,92,53,.08),inset 0 1px 0 rgba(255,255,255,.08)}

.case-header {display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:28px;gap:16px;flex-wrap:wrap}
.case-brand {display:flex;align-items:center;gap:14px}
.case-logo {display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;font-family:var(--display);font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:.5px;flex-shrink:0;box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.case-logo.verde {background:linear-gradient(135deg,#16a34a,#15803d)}
.case-logo.sc {background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.case-logo.motf {background:linear-gradient(135deg,#a855f7,#6d28d9)}
.case-brand strong {display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.case-brand span {display:block;font-size:.8rem;color:#8d8d98;margin-top:2px}
.case-visit {padding:10px 20px;background:rgba(255,92,53,.08);border:1px solid rgba(255,92,53,.3);border-radius:60px;color:var(--accent2);font-size:.82rem;font-weight:700;text-decoration:none;transition:.3s var(--ease);white-space:nowrap}
.case-visit:hover {background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(255,92,53,.4);transform:translateY(-1px)}

.case-body {display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
@media(max-width:900px) {
.case-body {grid-template-columns:1fr;gap:28px}
}


.case-story {display:flex;flex-direction:column;gap:14px}
.case-label {font-size:.66rem;font-weight:800;letter-spacing:3px;color:var(--accent2);text-transform:uppercase}
.case-story p {font-size:.95rem;color:#c9c9d1;line-height:1.7;margin:0 0 10px}

.case-stats-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.csg {padding:24px 22px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);border-radius:14px;transition:.4s var(--ease);position:relative;overflow:hidden}
.csg::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,92,53,.07),transparent);transition:left .8s var(--ease)}
.csg:hover {border-color:rgba(255,92,53,.35);background:rgba(255,92,53,.05);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.3),0 4px 16px rgba(255,92,53,.08)}
.csg:hover::before {left:100%}
.csg-label {display:block;font-size:.68rem;color:#8d8d98;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px}
.csg strong {display:block;font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-2px;line-height:.95;margin-bottom:6px}
.csg em {display:block;font-size:.78rem;color:#9090a0;font-style:normal;line-height:1.45}
.case-logo {transition:.4s var(--ease)}
.case-card:hover .case-logo {transform:scale(1.08) rotate(-3deg);box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 30px rgba(255,92,53,.2),inset 0 1px 0 rgba(255,255,255,.2)}

/* Empty "your business here" slot */
.case-empty {background:linear-gradient(145deg,rgba(255,92,53,.06),rgba(255,140,66,.01),#0a0a12);border-style:dashed;border-color:rgba(255,92,53,.3);text-align:center}
.case-empty-inner {padding:30px 20px;max-width:520px;margin:0 auto}
.case-empty-icon {display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05));border:1px solid rgba(255,92,53,.35);color:var(--accent2);margin:0 auto 20px;box-shadow:0 8px 24px rgba(255,92,53,.15)}
.case-empty h3 {font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.5px;color:#fff;margin-bottom:12px}
.case-empty p {font-size:1rem;color:#b4b4bf;line-height:1.65;margin-bottom:24px}

/* ============================================
   BEFORE / AFTER SLIDER (case studies)
   ============================================ */
.ba-slider {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    margin:24px 0 28px;
    cursor:ew-resize;
    background:#0a0a12;
    user-select:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 20px 50px rgba(0,0,0,.4);
}
.ba-slider::before,.ba-slider::after {content:'';pointer-events:none}
.ba-before,.ba-after {position:absolute;inset:0;overflow:hidden}
.ba-before {width:50%;z-index:2}
.ba-after iframe {position:absolute;top:0;left:0;width:180%;height:180%;border:0;transform:scale(.556);transform-origin:top left;pointer-events:none}

/* Landscaping before-mock — 2010-era green template vibe */
.ba-mock-landscaping {width:100%;height:100%;display:flex;flex-direction:column;background:#f0ead6;color:#2a2a2a;font-family:Georgia,serif}
.ba-landscape-hdr {padding:10px 16px;background:linear-gradient(180deg,#4a7c2a,#2d5016);color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #1a3608}
.ba-ls-logo {font-size:1.1rem;font-weight:700;font-family:Georgia,serif}
.ba-ls-nav {font-size:.75rem;font-family:Arial,sans-serif;color:#d0e5b0}
.ba-ls-banner {background:#8bb94e;color:#fff;padding:8px 16px;font-size:.78rem;letter-spacing:2px;font-weight:700;text-align:center;font-family:Arial}
.ba-ls-body {padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:10px}
.ba-ls-body p {font-size:.85rem;line-height:1.5;color:#333;margin:0}
.ba-ls-phone {padding:8px 14px;background:#fffbe0;border:1px dashed #8bb94e;border-radius:2px;font-size:.85rem;font-weight:700;color:#2d5016;display:inline-block;align-self:flex-start;font-family:Arial}
.ba-ls-list {display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:#444;font-family:Arial}
.ba-ls-meta {margin-top:auto;padding-top:10px;border-top:1px dashed #b0a070;font-size:.68rem;color:#8a7a5a;font-style:italic;text-align:center;font-family:Arial}

/* Industrial before-mock — 2000s manufacturing site */
.ba-mock-industrial {width:100%;height:100%;display:flex;flex-direction:column;background:#e8e8e8;color:#222;font-family:Arial,Helvetica,sans-serif}
.ba-ind-hdr {background:linear-gradient(180deg,#3a3a3a,#1a1a1a);color:#fff;padding:12px 16px;text-align:center;border-bottom:4px solid #b8860b}
.ba-ind-name {font-size:1.2rem;font-weight:700;letter-spacing:2px;font-family:'Times New Roman',serif}
.ba-ind-tag {font-size:.68rem;color:#b8860b;letter-spacing:1px;margin-top:3px}
.ba-ind-nav {padding:7px 16px;background:#4a4a4a;color:#fff;font-size:.7rem;letter-spacing:2px;text-align:center;border-bottom:1px solid #888}
.ba-ind-body {padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:12px}
.ba-ind-table {width:100%;border:2px solid #888;background:#fff;padding:6px}
.ba-ind-table td {padding:5px 10px;font-size:.82rem;color:#333;border-bottom:1px dotted #ccc}
.ba-ind-table tr:last-child td {border-bottom:none}
.ba-ind-blurb {font-size:.82rem;line-height:1.5;color:#333;margin:0;background:#fffce8;padding:8px 12px;border:1px solid #d0c080}
.ba-ind-stats {margin-top:auto;padding-top:10px;font-size:.68rem;color:#666;border-top:1px solid #aaa;font-family:'Courier New',monospace;text-align:center}

/* Labels */
.ba-label-before,.ba-label-after {position:absolute;top:14px;z-index:5;padding:5px 12px;border-radius:60px;font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(8px);pointer-events:none}
.ba-label-before {left:14px;background:rgba(0,0,0,.7);color:#ef4444;border:1px solid rgba(239,68,68,.4)}
.ba-label-after {right:14px;background:rgba(255,92,53,.9);color:#fff;box-shadow:0 2px 12px rgba(255,92,53,.4)}

/* Handle */
.ba-handle {position:absolute;top:0;bottom:0;left:50%;width:4px;background:#fff;transform:translateX(-50%);z-index:4;cursor:ew-resize;box-shadow:0 0 16px rgba(255,92,53,.6),0 0 32px rgba(255,92,53,.3)}
.ba-handle span {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--grad);border:3px solid #fff;box-shadow:0 6px 24px rgba(255,92,53,.5),inset 0 1px 0 rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:ew-resize;transition:transform .2s}
.ba-handle span::before,.ba-handle span::after {content:'';position:absolute;top:50%;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateY(-50%) rotate(45deg)}
.ba-handle span::before {left:10px;transform:translateY(-50%) rotate(-135deg)}
.ba-handle span::after {right:10px}
.ba-slider:hover .ba-handle span {transform:translate(-50%,-50%) scale(1.08)}

/* ============================================
   REVIEWS / HONEST NOTE SECTION
   ============================================ */
.reviews-section {padding:64px 0;background:var(--bg2)}
.reviews-inner {max-width:780px;margin:0 auto;text-align:center}
.reviews-left {display:flex;flex-direction:column;align-items:center}
.reviews-left .tag {margin-bottom:24px}

.reviews-left h2 {font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:24px;color:#fff;max-width:680px}
.reviews-left > p {font-size:1.02rem;color:#b4b4bf;line-height:1.65;margin-bottom:18px;max-width:620px}
.reviews-left strong {color:#fff;font-weight:600}

.reviews-cta-row {display:flex;flex-direction:row;justify-content:center;gap:14px;margin-top:32px;flex-wrap:wrap}
@media(max-width:640px) {
.reviews-cta-row {flex-direction:column;align-items:center}.reviews-contact {min-width:280px}
}

.reviews-contact {display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;text-decoration:none;transition:.3s var(--ease)}
.reviews-contact:hover {background:rgba(255,92,53,.04);border-color:rgba(255,92,53,.25);transform:translateX(4px)}
.rc-icon {font-size:1.2rem;flex-shrink:0}
.reviews-contact strong {display:block;font-size:.95rem;color:#fff;font-weight:600}
.reviews-contact em {display:block;font-size:.78rem;color:#8d8d98;font-style:normal;margin-top:2px}

/* Google Reviews Card */
.google-reviews-card {background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.grc-header {display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:20px 22px;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.grc-g-logo {flex-shrink:0}
.grc-title strong {display:block;font-size:.95rem;color:#fff;font-weight:700}
.grc-title span {display:block;font-size:.72rem;color:#8d8d98;margin-top:2px}
.grc-rating {text-align:right}
.grc-stars {display:block;color:#fbbf24;font-size:.95rem;letter-spacing:2px;opacity:.4}
.grc-label {display:block;font-size:.68rem;color:#8d8d98;font-weight:600;margin-top:2px;letter-spacing:.5px}

.grc-body {padding:22px}
.grc-note {font-size:.9rem;color:#b4b4bf;line-height:1.65;margin-bottom:18px}
.grc-note strong {color:#fff;font-weight:600}
.grc-action {padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.grc-cta {display:inline-block;font-size:.88rem;color:var(--accent2);font-weight:700;text-decoration:none;transition:.3s}
.grc-cta:hover {color:var(--accent);transform:translateX(4px)}

/* ============================================
   COMPARISON TABLE — differentiators
   ============================================ */
.compare-section {padding:110px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.compare-table {
    max-width:1000px;
    margin:40px auto 0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}
.compare-row {display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;border-bottom:1px solid rgba(255,255,255,.04)}
.compare-row:last-child {border-bottom:none}
.compare-row.compare-header {background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border-bottom:1px solid rgba(255,92,53,.15)}
.compare-cell {padding:18px 16px;display:flex;align-items:center;justify-content:center;font-size:.88rem;color:#c9c9d1;text-align:center;border-right:1px solid rgba(255,255,255,.03)}
.compare-cell:last-child {border-right:none}
.compare-cell.compare-feature {justify-content:flex-start;text-align:left;font-weight:600;color:#fff;font-size:.92rem;padding-left:22px}
.compare-cell.compare-col {font-weight:700;font-size:.75rem;letter-spacing:2px;color:#8d8d98;text-transform:uppercase}
.compare-cell.compare-us {background:linear-gradient(180deg,rgba(255,92,53,.08),rgba(255,92,53,.02));position:relative}
.compare-cell.compare-us:first-child,
.compare-row:first-child .compare-cell.compare-us {border-left:none}
.compare-us-badge {display:inline-block;padding:5px 14px;background:var(--grad);color:#fff;border-radius:60px;font-size:.7rem;font-weight:800;letter-spacing:1.5px;box-shadow:0 4px 12px rgba(255,92,53,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.compare-row:hover:not(.compare-header) .compare-cell {background:rgba(255,255,255,.02)}
.compare-row:hover:not(.compare-header) .compare-cell.compare-us {background:linear-gradient(180deg,rgba(255,92,53,.14),rgba(255,92,53,.04))}

.ci-check {color:#22c55e;font-size:1.1rem;font-weight:800}
.ci-x {color:#6a6a75;font-size:1rem;font-weight:700}
.ci-partial {color:#fbbf24;font-size:.9rem;font-weight:700;opacity:.9}
.compare-cell strong {color:var(--accent2);font-family:var(--display);font-weight:800}

@media(max-width:768px) {

    .compare-table {font-size:.75rem}
    .compare-row {grid-template-columns:1fr 1fr 1fr 1fr 1fr}
    .compare-cell {padding:10px 6px;font-size:.72rem}
    .compare-cell.compare-feature {padding-left:10px;font-size:.78rem}
    .compare-us-badge {padding:3px 8px;font-size:.6rem;letter-spacing:1px}

}


/* ============================================
   COUNTER STRIP
   ============================================ */
.counter-strip {padding:80px 0;background:var(--bg);position:relative}
.counter-strip::before,.counter-strip::after {content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,92,53,.2),transparent)}
.counter-strip::before {top:0}.counter-strip::after {bottom:0}
.counter-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:start}
@media(max-width:768px) {
.counter-grid {grid-template-columns:1fr 1fr;gap:24px}
}

.counter-item {text-align:center;position:relative}
.counter-item::after {content:'';position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:1px;height:60px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent)}
.counter-item:last-child::after {display:none}
@media(max-width:768px) {
.counter-item::after {display:none}
}

.counter-item strong {display:inline-block;font-family:var(--display);font-size:clamp(2.8rem,4.5vw,4rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-3px;line-height:1}
.counter-item em {display:inline-block;font-family:var(--display);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:var(--accent2);font-style:normal;margin-left:2px;letter-spacing:-1px}
.counter-item span {display:block;font-size:.82rem;color:#8d8d98;line-height:1.5;margin-top:10px;font-weight:500}

/* ============================================
   FOUNDER NOTE — personal trust section
   ============================================ */
.founder-section {padding:100px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.founder-card {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:48px;
    max-width:960px;
    margin:0 auto;
    padding:48px;
    background:linear-gradient(145deg,rgba(255,92,53,.05),rgba(255,140,66,.01),#0a0a12);
    border:1px solid rgba(255,92,53,.18);
    border-radius:24px;
    box-shadow:0 25px 70px rgba(0,0,0,.45),0 8px 30px rgba(255,92,53,.08),inset 0 1px 0 rgba(255,255,255,.06);
    align-items:flex-start;
    position:relative;
    overflow:hidden;
}
.founder-card::before {content:'';position:absolute;top:-30%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,92,53,.1),transparent 60%);pointer-events:none;filter:blur(50px)}
@media(max-width:768px) {
.founder-card {grid-template-columns:1fr;gap:24px;padding:32px 24px;text-align:center}
}


.founder-left {display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:2}
.founder-avatar {width:120px;height:120px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:2.4rem;font-weight:800;color:#fff;box-shadow:0 10px 40px rgba(255,92,53,.4),inset 0 2px 0 rgba(255,255,255,.2);position:relative;letter-spacing:-1px}
.founder-avatar::before {content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,92,53,.2);animation:g-pulse 3s ease-in-out infinite}
.founder-badge {font-size:.65rem;font-weight:700;letter-spacing:2.5px;color:var(--accent2);text-transform:uppercase;text-align:center;white-space:nowrap}

.founder-right {position:relative;z-index:2}
.founder-right h2 {font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.8px;line-height:1.2;margin-bottom:20px;color:#fff}
.founder-right blockquote {font-size:1.05rem;color:#c9c9d1;line-height:1.75;margin:0 0 24px;font-style:italic;border-left:3px solid var(--accent);padding-left:20px;quotes:none}
.founder-right blockquote strong {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-style:normal}
.founder-signature strong {display:block;font-family:var(--display);font-size:1rem;color:#fff;font-weight:700}
.founder-signature span {display:block;font-size:.82rem;color:#8d8d98;margin-top:3px}

/* ============================================
   PROCESS — editorial rail (new, less cliche)
   ============================================ */
.process-new {padding:100px 0;background:var(--bg);position:relative;overflow:hidden}
.process-new::before {content:'';position:absolute;top:30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,92,53,.05),transparent 60%);pointer-events:none;filter:blur(70px)}

.pn-intro {display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:flex-end;padding:0 0 48px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:60px;position:relative;z-index:2}
@media(max-width:820px) {
.pn-intro {grid-template-columns:1fr;gap:24px;padding-bottom:32px;margin-bottom:40px}
}


.pn-rail {position:relative;max-width:880px;margin:0 auto;padding-left:60px}
@media(max-width:640px) {
.pn-rail {padding-left:40px}
}

.pn-rail-line {position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:rgba(255,92,53,.12);border-radius:2px}
@media(max-width:640px) {
.pn-rail-line {left:16px}
}

.pn-rail-fill {position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,#ff5c35 0%,#ff3d1f 100%);border-radius:2px;box-shadow:0 0 16px rgba(255,92,53,.55);transition:height .15s linear;will-change:height}
.pn-rail-dot {position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(255,92,53,.9),0 0 40px rgba(255,92,53,.4);animation:wf-pulse 2s ease-in-out infinite}

.pn-row {display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:flex-start;padding:32px 0;border-bottom:1px dashed rgba(255,255,255,.06);position:relative}
.pn-row-last {border-bottom:none}
.pn-row[data-phase]::before {content:attr(data-phase);position:absolute;right:0;top:32px;font-family:var(--editorial);font-size:5rem;font-weight:500;font-style:italic;color:rgba(255,92,53,.06);line-height:.85;letter-spacing:-2px;font-variation-settings:"opsz" 144;pointer-events:none;z-index:0}
@media(max-width:640px) {
.pn-row[data-phase]::before {font-size:3.5rem;top:14px}
}


.pn-marker {position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#0a0a12;border:2px solid rgba(255,92,53,.4);margin-left:-24px;flex-shrink:0;transition:.4s}
@media(max-width:640px) {
.pn-marker {width:32px;height:32px;margin-left:-16px}
}

.pn-marker-num {font-family:var(--display);font-size:.82rem;font-weight:800;color:var(--accent2);letter-spacing:-.3px}
@media(max-width:640px) {
.pn-marker-num {font-size:.72rem}
}

.pn-row:hover .pn-marker,.pn-marker-active {background:var(--grad);border-color:transparent;box-shadow:0 0 0 6px rgba(255,92,53,.1),0 10px 30px rgba(255,92,53,.35)}
.pn-row:hover .pn-marker-num,.pn-marker-active .pn-marker-num {color:#fff}

.pn-body {position:relative;z-index:1}
.pn-chip {display:inline-block;padding:5px 12px;background:rgba(255,92,53,.08);border:1px solid rgba(255,92,53,.22);border-radius:60px;font-size:.68rem;font-weight:700;letter-spacing:1.5px;color:var(--accent2);text-transform:uppercase;margin-bottom:14px}
.pn-chip-ongoing {background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.03));border-color:rgba(34,197,94,.3);color:#4ade80}
.pn-title {font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.9px;line-height:1.15;color:#fff;margin:0 0 12px}
.pn-body > p {font-size:1rem;color:#c9c9d1;line-height:1.65;margin:0 0 16px;max-width:600px}

.pn-deliverables {display:flex;flex-wrap:wrap;gap:6px 16px}
.pn-deliverables span {font-size:.82rem;color:#b4b4bf;font-weight:500}
.pn-deliverables span:first-letter {color:var(--accent)}

/* ============================================
   TESTIMONIALS — quotes with specific outcomes
   ============================================ */
.testimonials {padding:100px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.testimonial-grid {display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;margin-top:40px}
@media(max-width:900px) {
.testimonial-grid {grid-template-columns:1fr}
}


.t-card {padding:32px;background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(255,255,255,.06);border-radius:18px;transition:.5s var(--ease);position:relative;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column}
.t-card:hover {transform:translateY(-4px);border-color:rgba(255,92,53,.3);box-shadow:0 20px 50px rgba(0,0,0,.4),0 8px 30px rgba(255,92,53,.12),inset 0 1px 0 rgba(255,255,255,.08)}

.t-stars {color:var(--accent2);font-size:1rem;letter-spacing:4px;margin-bottom:16px;text-shadow:0 0 12px rgba(255,107,61,.4)}
.t-card blockquote {font-family:var(--display);font-size:1.05rem;font-weight:500;line-height:1.55;color:#fff;margin:0 0 24px;letter-spacing:-.2px;quotes:"\201C" "\201D"}
.t-card blockquote strong {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}

.t-author {display:flex;align-items:center;gap:12px;margin-top:auto}
.t-avatar {display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--display);font-size:.85rem;font-weight:800;color:#fff;letter-spacing:.5px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.t-avatar.verde {background:linear-gradient(135deg,#16a34a,#15803d)}
.t-avatar.sc {background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.t-avatar.local {background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.t-author strong {display:block;font-size:.9rem;font-weight:700;color:#fff}
.t-author span {display:block;font-size:.75rem;color:#8d8d98;margin-top:2px}

.t-metric {margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:baseline;gap:10px}
.t-metric strong {font-family:var(--display);font-size:1.8rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:1}
.t-metric em {font-size:.78rem;color:#8d8d98;font-style:normal}

/* ============================================
   GUARANTEE — risk reversal section
   ============================================ */
.guarantee {padding:64px 0;background:var(--bg2);position:relative}
.guarantee-card {display:grid;grid-template-columns:auto 1fr;gap:40px;padding:56px 48px;background:linear-gradient(145deg,rgba(255,92,53,.1),rgba(255,140,66,.02),#0a0a12);border:1px solid rgba(255,92,53,.28);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 10px 40px rgba(255,92,53,.1),inset 0 1px 0 rgba(255,255,255,.08);position:relative;overflow:hidden}
.guarantee-card::before {content:'';position:absolute;top:-60%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,92,53,.15),transparent 60%);pointer-events:none;filter:blur(40px)}
@media(max-width:768px) {
.guarantee-card {grid-template-columns:1fr;gap:24px;padding:36px 28px;text-align:center}
}


.g-badge {display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05));border:1.5px solid rgba(255,92,53,.4);color:var(--accent2);box-shadow:0 10px 40px rgba(255,92,53,.25),inset 0 2px 0 rgba(255,255,255,.12);flex-shrink:0;position:relative}
.g-badge::before {content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,92,53,.2);animation:g-pulse 2.5s ease-in-out infinite}
@keyframes g-pulse {0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.5}}
@media(max-width:768px) {
.g-badge {margin:0 auto}
}


.g-content h2 {font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.8px;line-height:1.2;margin:14px 0 16px;color:#fff}
.g-content > p {font-size:1rem;color:#b4b4bf;line-height:1.7;margin-bottom:24px;max-width:620px}
.g-points {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:640px) {
.g-points {grid-template-columns:1fr}
}

.gp {padding:16px;background:rgba(0,0,0,.35);border:1px solid rgba(255,92,53,.15);border-radius:12px;text-align:center}
.gp strong {display:block;font-family:var(--display);font-size:1.6rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:1;margin-bottom:4px}
.gp span {font-size:.72rem;color:#8d8d98;font-weight:500;letter-spacing:.3px}
.faq-icon {display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,92,53,.1);border:1px solid rgba(255,92,53,.2);color:var(--accent2);font-weight:700;font-size:1rem;font-style:normal;transition:.4s var(--ease);flex-shrink:0}
@keyframes faq-slide {from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================
   MANIFESTO — cinematic statement
   ============================================ */
.manifesto {padding:100px 0;background:var(--bg);position:relative;overflow:hidden}
.manifesto::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:400px;background:radial-gradient(ellipse,rgba(255,92,53,.08),transparent 65%);pointer-events:none;filter:blur(60px)}
.manifesto-inner {max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:2}
.manifesto-mark {display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05));border:1px solid rgba(255,92,53,.35);color:var(--accent2);margin-bottom:28px;box-shadow:0 10px 40px rgba(255,92,53,.2)}
.manifesto-text {font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:600;line-height:1.35;color:#e8e8ee;letter-spacing:-.8px;margin-bottom:32px}
.manifesto-text .word {display:inline-block;opacity:.25;transition:opacity .5s var(--ease);margin-right:.22em}
.manifesto-text .word-active {opacity:1}
.manifesto-sign {display:flex;align-items:center;justify-content:center;gap:16px}
.ms-line {width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.ms-text {font-size:.72rem;font-weight:700;letter-spacing:4px;color:var(--accent2);text-transform:uppercase}

/* Reserved "your project" card */
.work-card-reserved .work-frame-reserved {background:linear-gradient(145deg,rgba(255,92,53,.04),rgba(0,0,0,.4));border-style:dashed;border-color:rgba(255,92,53,.35)}
.work-card-reserved:hover .work-frame-reserved {border-style:solid;border-color:rgba(255,92,53,.5);background:linear-gradient(145deg,rgba(255,92,53,.08),rgba(0,0,0,.4))}
.wf-reserved-dot {width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent);animation:wf-pulse 2s ease-in-out infinite;flex-shrink:0}
.wf-viewport-reserved {background:radial-gradient(ellipse at center,rgba(255,92,53,.08),transparent 70%),#0a0a12;display:flex;align-items:center;justify-content:center}
.wf-reserved-content {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;transition:.4s var(--ease)}
.wf-reserved-mark {display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.05));border:1.5px solid rgba(255,92,53,.4);color:var(--accent2);margin-bottom:6px;box-shadow:0 8px 24px rgba(255,92,53,.15);transition:.4s}
.work-card-reserved:hover .wf-reserved-mark {transform:rotate(90deg) scale(1.08);background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(255,92,53,.4)}
.wf-reserved-content strong {font-family:var(--display);font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.wf-reserved-content em {font-size:.78rem;color:#8d8d98;font-style:italic;font-family:var(--editorial)}
.work-cat-reserved {color:#4ade80 !important}

/* Scroll-driven entry scaling (native, no JS) */
@supports (animation-timeline: view()) {

    @keyframes work-scale-in {
        from{transform:scale(.92) translateY(40px);opacity:.25;filter:blur(6px)}
        to{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}
    }

}

@keyframes wf-pulse {0%,100%{opacity:1}50%{opacity:.5}}

/* ============================================
   VISITOR COUNTER BADGE
   ============================================ */
.visitor-badge {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
    border:1px solid rgba(34,197,94,.25);
    border-radius:60px;
    margin:0 auto 32px;
    font-size:.78rem;
    color:#c9c9d1;
    backdrop-filter:blur(8px);
    box-shadow:0 4px 16px rgba(34,197,94,.08);
    display:none;
    justify-content:center;
}
.visitor-badge.visible {display:inline-flex}
.stats-strip .container {text-align:center}
.stats-strip .visitor-badge {margin-left:auto;margin-right:auto}
.vb-dot {width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.6);animation:sp-pulse 1.8s ease-in-out infinite;flex-shrink:0}
.vb-text strong {color:#fff;font-weight:700;font-family:var(--display)}
.vb-active {color:#4ade80;font-weight:600}

/* ============================================
   STATS STRIP — credible numbers that sell urgency
   ============================================ */
.stats-strip {padding:80px 0;background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.stats-strip::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,92,53,.4),transparent)}
.stats-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:40px}
@media(max-width:900px) {
.stats-grid {grid-template-columns:1fr 1fr;gap:24px}
}

@media(max-width:560px) {
.stats-grid {grid-template-columns:1fr}
}

.stat-item {padding:0 4px}
.stat-big {display:flex;align-items:flex-start;justify-content:center;font-family:var(--display);font-size:clamp(4rem,8.5vw,7.5rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-4px;line-height:.95;margin-bottom:14px;text-shadow:0 0 60px rgba(255,92,53,.15)}
.stat-big .counter {font-variant-numeric:tabular-nums}
.stat-unit {font-size:.55em;font-weight:800;font-style:normal;margin-left:6px;align-self:flex-start;margin-top:.15em;color:var(--accent);-webkit-text-fill-color:var(--accent);background:none;-webkit-background-clip:initial;background-clip:initial;text-shadow:0 0 24px rgba(255,92,53,.4)}
.stat-item p {font-size:1rem;color:#c9c9d1;line-height:1.5;margin-bottom:10px;max-width:240px;margin-left:auto;margin-right:auto}
.stat-item p strong {color:#fff;font-weight:700}
.stat-src {font-size:.68rem;color:#6a6a75;letter-spacing:1px;font-weight:600;text-transform:uppercase}
.stats-note {text-align:center;font-size:1rem;color:#a0a0aa;max-width:620px;margin:0 auto;line-height:1.6;font-style:italic}

/* ============================================
   PREMIUM BENTO SHOWCASE COMPONENTS
   ============================================ */

/* Make bento a flex column so showcases fill nicely */
.bento {display:flex;flex-direction:column}

/* Bento section description */
.sec-desc {color:#b4b4bf;font-size:1rem;line-height:1.65;margin-top:14px;max-width:580px;margin-left:auto;margin-right:auto}

/* Kicker number/category label */
.bento-kicker {display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:3px;color:var(--accent2);margin-bottom:8px;text-transform:uppercase;opacity:.85}

/* Head layout for wide cards */
.bento-head {display:flex;align-items:flex-start;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.bento-head .bento-icon {margin-bottom:0;flex-shrink:0}
.bento-head-text {flex:1;min-width:0}
.bento-head-text .bento-kicker {margin-bottom:4px}
.bento-head-text h3 {margin-bottom:0}

/* Big metric chip (top right) */
.bento-metric {display:flex;flex-direction:column;align-items:flex-end;padding:12px 18px;background:linear-gradient(135deg,rgba(255,92,53,.12),rgba(255,140,66,.04));border:1px solid rgba(255,92,53,.25);border-radius:14px;gap:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.bento-metric strong {font-family:var(--display);font-size:1.6rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;line-height:1}
.bento-metric span {font-size:.65rem;color:#9090a0;letter-spacing:1px;text-transform:uppercase;font-weight:600}

/* Main paragraph inside bento */
.bento-p {font-size:.95rem;color:#b4b4bf;line-height:1.7;margin-bottom:22px}

/* Showcase area: splits into demo + feature list */
.bento-showcase {display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-bottom:22px;align-items:center}

/* Feature list */
.bento-features {display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.bf {display:flex;align-items:flex-start;gap:12px;font-size:.88rem;line-height:1.45}
.bf-check {display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.25),rgba(255,140,66,.1));border:1px solid rgba(255,92,53,.35);color:var(--accent2);font-weight:700;flex-shrink:0;font-size:.85rem;margin-top:1px;transition:.3s}
.bento:hover .bf-check {background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(255,92,53,.4)}
.bf strong {display:block;color:#fff;font-weight:600;font-size:.92rem}
.bf em {display:block;color:#8d8d98;font-size:.78rem;font-style:normal;margin-top:2px;line-height:1.45}

/* === MINI BROWSER DEMO === */
.mini-browser {border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0a0a12;box-shadow:0 20px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.mb-chrome {display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#141420,#0e0e18);border-bottom:1px solid rgba(255,255,255,.06)}
.mb-chrome i {width:9px;height:9px;border-radius:50%;display:block}
.mb-chrome i:nth-child(1) {background:#ff5f57}
.mb-chrome i:nth-child(2) {background:#febc2e}
.mb-chrome i:nth-child(3) {background:#28c840}
.mb-url {flex:1;background:rgba(255,255,255,.04);border-radius:6px;padding:5px 14px;font-size:.7rem;color:#888;margin-left:8px;font-family:monospace}
.mb-body {padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.mb-hero-bar {height:48px;border-radius:8px;background:linear-gradient(135deg,rgba(255,92,53,.2),rgba(255,140,66,.08));border:1px solid rgba(255,92,53,.15);position:relative;overflow:hidden}
.mb-hero-bar::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:mb-shimmer 3s ease-in-out infinite}
@keyframes mb-shimmer {0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.mb-lines {display:flex;flex-direction:column;gap:7px}
.mb-lines span {height:6px;background:rgba(255,255,255,.08);border-radius:3px;display:block}
.mb-cta {width:110px;height:26px;border-radius:20px;background:var(--grad);box-shadow:0 2px 12px rgba(255,92,53,.3)}
.mb-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.mb-grid i {height:36px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:6px;display:block}

/* === SERP RANKING VISUALIZATION === */
.serp-viz {display:flex;flex-direction:column;gap:8px;padding:16px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px;position:relative}
.serp-row {display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.serp-row.top {background:linear-gradient(135deg,rgba(255,92,53,.12),rgba(255,140,66,.04));border-color:rgba(255,92,53,.35);box-shadow:0 2px 20px rgba(255,92,53,.1)}
.serp-num {font-family:var(--display);font-size:.9rem;font-weight:700;color:#8d8d98;min-width:24px}
.serp-row.top .serp-num {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.serp-bar {flex:1;min-width:0}
.serp-title {font-size:.82rem;font-weight:600;color:#fff;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-row.top .serp-title {color:var(--accent2)}
.serp-url {font-size:.65rem;color:#6a6a75}
.bar-skel {height:10px;background:rgba(255,255,255,.08);border-radius:3px;width:70%}
.serp-url-skel {height:6px;background:rgba(255,255,255,.05);border-radius:3px;width:45%;margin-top:4px}
.serp-badge {padding:3px 10px;font-size:.6rem;font-weight:700;letter-spacing:1px;color:#fff;background:var(--grad);border-radius:60px;box-shadow:0 2px 8px rgba(255,92,53,.4)}
.serp-arrow {margin-top:4px;font-size:.75rem;color:#22c55e;font-weight:600;text-align:center;padding:6px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:8px}
@keyframes sv-pulse {0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* === BRAND IDENTITY VISUALIZATION === */
.brand-viz {padding:20px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px}
.bv-logo {font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:-1px;color:#fff;margin-bottom:14px;text-align:center}
.bv-logo span {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bv-palette {display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.bv-swatch {aspect-ratio:1;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start;padding:6px;border:1px solid rgba(255,255,255,.08)}
.bv-swatch span {font-size:.6rem;font-weight:700;color:#fff;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.bv-type {display:flex;flex-direction:column;gap:8px}
.bv-type-row {display:flex;align-items:center;gap:12px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:8px}
.bv-type-row strong {font-family:var(--display);font-size:1.3rem;font-weight:800;color:#fff;width:28px}
.bv-type-row em {font-family:var(--font);font-size:1.3rem;font-weight:400;font-style:normal;color:#fff;width:28px}
.bv-type-row span {font-size:.72rem;color:#8d8d98;font-weight:500}
.gv-labels {display:flex;justify-content:space-between;padding:0 2px}
.gv-labels span {font-size:.62rem;color:#6a6a75;font-weight:600;letter-spacing:.3px}

/* ============================================
   RESPONSIVE: stack showcase on smaller screens
   ============================================ */
@media (max-width:900px) {

    .bento-showcase {grid-template-columns:1fr;gap:20px}
    .bento-head {gap:14px}
    .bento-metric {align-items:flex-start;flex-direction:row;gap:10px;align-self:stretch}
    .bento-metric strong {font-size:1.3rem}

}

.steps {display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step {background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:30px;transition:.5s var(--ease)}
.step:hover {border-color:var(--border2);transform:translateY(-4px)}
.step-num {font-family:var(--display);font-size:2.5rem;font-weight:700;color:rgba(255,92,53,.1);line-height:1;margin-bottom:10px;transition:.4s}
.step:hover .step-num {color:rgba(255,92,53,.22)}
.step h3 {font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.step p {font-size:.83rem;color:var(--text2);line-height:1.5}

/* === WHY === */
.why {background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.why-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.why-item {background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:34px;transition:.5s var(--ease);position:relative;overflow:hidden}
.why-item::before {content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--grad);opacity:0;transition:.4s}
.why-item:hover {border-color:var(--border2);transform:translateY(-3px);background:var(--bg4)}
.why-item:hover::before {opacity:1}
.wi-num {font-family:var(--display);font-size:2rem;font-weight:700;color:rgba(255,92,53,.1);line-height:1;margin-bottom:12px}
.why-item h3 {font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.why-item p {font-size:.85rem;color:var(--text2);line-height:1.5}
.tb-sep {color:rgba(255,255,255,.1);font-size:1.3rem;font-weight:300}
@media(max-width:760px) {
.tb-sep {display:none}
}

@keyframes hiw-mp {0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* === FAQ === */
.faq {padding:80px 0 72px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.faq .sec-head {text-align:center;max-width:720px;margin:0 auto 48px}
.faq .sec-title {font-family:var(--display);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-1.4px;line-height:1.05;margin:14px 0 0;color:#fff}
.faq-list {max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item {background:linear-gradient(145deg,rgba(20,20,28,.7),rgba(10,10,16,.7));border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;transition:.3s var(--ease)}
.faq-item[open] {border-color:rgba(255,92,53,.3);background:linear-gradient(145deg,rgba(28,18,16,.85),rgba(14,10,12,.85))}
.faq-item summary {list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--display);font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.2px;line-height:1.35;transition:.25s var(--ease)}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary:hover {color:var(--accent2)}
.faq-icon {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,92,53,.12);border:1px solid rgba(255,92,53,.3);color:var(--accent2);font-weight:600;font-size:1.1rem;font-style:normal;line-height:1;transition:.3s var(--ease);flex-shrink:0}
.faq-item[open] .faq-icon {transform:rotate(45deg);background:rgba(255,92,53,.25)}
/* FIX: .faq-body inside <details> was unstyled — answers had no padding
   and ran right up against the question. Also wires the slide-in animation. */
.faq-body {padding:0 24px 22px;animation:faq-slide .35s var(--ease)}
.faq-body p {font-size:.92rem;color:var(--text2);line-height:1.65;margin:0}
/* FAQ items stagger their reveal via data-delay attr */
.faq-item.reveal[data-delay] {transition-delay:calc(var(--reveal-d, 0s))}

/* === CTA === */
.cta {padding:60px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.cta-card {text-align:center;padding:72px 40px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;position:relative;overflow:hidden}
.cta-glow {position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:450px;height:220px;background:radial-gradient(ellipse,var(--glow),transparent 70%);pointer-events:none}
.cta-card h2 {font-family:var(--display);font-size:clamp(1.4rem,2.8vw,2rem);font-weight:700;letter-spacing:-.8px;margin-bottom:14px;position:relative}
.cta-card p {color:var(--text2);margin-bottom:32px;font-size:.95rem;position:relative}
.cta-card .btn {position:relative}
.contact-form {display:flex;flex-direction:column;gap:12px}
@keyframes intake-slide {from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.isum-header {margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,92,53,.15)}
.isum-kicker {display:block;font-size:.62rem;font-weight:800;letter-spacing:3px;color:var(--accent2);text-transform:uppercase;margin-bottom:6px;text-shadow:0 0 12px rgba(255,107,61,.3)}
.isum-title {display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;line-height:1.2}
.isum-details {display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.isum-row {display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:.82rem;line-height:1.45}
.isum-k {color:#8d8d98;font-weight:600;letter-spacing:.2px}
.isum-v {color:#fff;font-weight:500}
.isum-note {font-size:.85rem;color:#c9c9d1;line-height:1.55;margin:10px 0 0;padding:10px 14px;background:rgba(255,255,255,.03);border-radius:8px}
.isum-note strong {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}
.isum-urgency {font-size:.82rem;margin:8px 0 0;line-height:1.5}
.is-urgent {color:#4ade80;font-weight:600}
.is-chill {color:#c9c9d1}
.isum-disclaimer {font-size:.72rem;color:#8d8d98;margin:12px 0 0;line-height:1.5;padding-top:10px;border-top:1px dashed rgba(255,255,255,.06)}

/* === FOOTER === */
.footer {border-top:1px solid var(--border);padding:56px 0 24px}
.footer-inner {display:flex;justify-content:space-between;gap:40px;margin-bottom:40px}
.footer-brand p {color:var(--text3);margin-top:12px;font-size:.85rem;max-width:280px;line-height:1.6}
.footer-cols {display:flex;gap:56px}
.footer-col {display:flex;flex-direction:column;gap:9px}
.footer-col h4 {font-family:var(--display);font-size:.88rem;font-weight:700;margin-bottom:2px}
.footer-col a {color:var(--text3);font-size:.8rem}
.footer-col a:hover {color:var(--accent)}
.footer-bottom {padding-top:24px;border-top:1px solid var(--border);text-align:center}
.footer-bottom p {color:var(--text3);font-size:.72rem}

/* ============================================
   SCROLL-DRIVEN ANIMATIONS (GPU-accelerated)
   Native CSS — runs off main thread
   ============================================ */

/* --- Keyframes --- */
@keyframes reveal-up {
    from { opacity:0; transform:translateY(45px) scale(0.97) }
    to   { opacity:1; transform:translateY(0) scale(1) }
}
@keyframes reveal-from-left {
    from { opacity:0; transform:translateX(-70px) rotate(-1.5deg) }
    to   { opacity:1; transform:translateX(0) rotate(0) }
}
@keyframes reveal-from-right {
    from { opacity:0; transform:translateX(70px) rotate(1.5deg) }
    to   { opacity:1; transform:translateX(0) rotate(0) }
}
@keyframes reveal-scale {
    from { opacity:0; transform:scale(0.82) translateY(25px) }
    to   { opacity:1; transform:scale(1) translateY(0) }
}
@keyframes reveal-clip-up {
    from { clip-path:inset(100% 0 0 0) }
    to   { clip-path:inset(0 0 0 0) }
}
@keyframes reveal-deblur {
    from { opacity:0; filter:blur(14px); transform:translateY(25px) }
    to   { opacity:1; filter:blur(0); transform:translateY(0) }
}
@keyframes stagger-child {
    from { opacity:0; transform:translateY(30px) scale(0.94) }
    to   { opacity:1; transform:translateY(0) scale(1) }
}

/* --- Native scroll-driven (Chrome 115+, Edge 115+) --- */
@supports (animation-timeline: view()) {

    .reveal {
        animation: reveal-up ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
    }
    .reveal-pop {
        animation: reveal-scale ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
    .reveal-clip {
        animation: reveal-clip-up ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
    }
    .reveal-blur {
        animation: reveal-deblur ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 85%;
    }
    /* Staggered children — each child gets its own view timeline */
    .stagger-in > * {
        animation: stagger-child ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
    .stagger-in > *:nth-child(1) { animation-delay: 0ms }
    .stagger-in > *:nth-child(2) { animation-delay: 60ms }
    .stagger-in > *:nth-child(3) { animation-delay: 120ms }
    .stagger-in > *:nth-child(4) { animation-delay: 180ms }
    .stagger-in > *:nth-child(5) { animation-delay: 240ms }
    .stagger-in > *:nth-child(6) { animation-delay: 300ms }
    .stagger-in > *:nth-child(7) { animation-delay: 360ms }
    .stagger-in > *:nth-child(8) { animation-delay: 420ms }

    /* Bento cards — individual scroll-driven reveals */
    .services-bento .bento {
        animation: reveal-scale ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
    }
    .services-bento .bento:nth-child(odd) { animation-name: reveal-from-left }
    .services-bento .bento:nth-child(even) { animation-name: reveal-from-right }

    /* Section headings — smooth scale-up */
    .sec-head {
        animation: reveal-up ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }

    /* CTA card */
    .cta-card {
        animation: reveal-scale ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
    .contact-form {
        animation: reveal-from-right ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 85%;
    }

}


/* --- JS fallback (Safari, Firefox, older browsers) --- */
@supports not (animation-timeline: view()) {

    .reveal {opacity:0;transform:translateY(45px) scale(0.97);transition:opacity .8s var(--ease),transform .8s var(--ease)}
    .reveal.visible {opacity:1;transform:translateY(0) scale(1)}

    .stagger-in > * {opacity:0;transform:translateY(30px) scale(0.95);transition:opacity .6s var(--ease),transform .6s var(--ease)}
    .stagger-in.visible > *:nth-child(1) {transition-delay:.05s}
    .stagger-in.visible > *:nth-child(2) {transition-delay:.12s}
    .stagger-in.visible > *:nth-child(3) {transition-delay:.19s}
    .stagger-in.visible > *:nth-child(4) {transition-delay:.26s}
    .stagger-in.visible > *:nth-child(5) {transition-delay:.33s}
    .stagger-in.visible > *:nth-child(6) {transition-delay:.40s}
    .stagger-in.visible > *:nth-child(7) {transition-delay:.47s}
    .stagger-in.visible > *:nth-child(8) {transition-delay:.54s}
    .stagger-in.visible > * {opacity:1;transform:translateY(0) scale(1)}

    .reveal-pop {opacity:0;transform:scale(0.82) translateY(25px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
    .reveal-pop.visible {opacity:1;transform:scale(1) translateY(0)}

    .reveal-clip {clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
    .reveal-clip.visible {clip-path:inset(0 0 0 0)}

    .reveal-blur {opacity:0;filter:blur(14px);transform:translateY(25px);transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
    .reveal-blur.visible {opacity:1;filter:blur(0);transform:translateY(0)}

}


/* === PAGE HEADERS === */
.page-header {position:relative;padding:100px 0 50px;overflow:hidden}
.page-title {font-family:var(--display);margin-bottom:16px}
.page-subtitle {font-size:1.1rem;color:var(--text2);max-width:500px;line-height:1.7}
.nav-menu a.active {color:var(--text)}
.sec-desc {font-size:.95rem;color:var(--text2);margin-top:8px}

/* === SECTION CTA === */
.section-cta {text-align:center;margin-top:32px}

/* === CTA BTNS === */
.cta-btns {display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* === FAQ === */
.faq {padding:60px 0;background:var(--bg)}
.faq-list {max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.faq-item {background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:.4s var(--ease)}
.faq-item:hover {border-color:var(--border2)}
.faq-item h3 {font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:10px;letter-spacing:-.2px}
.faq-item p {font-size:.85rem;color:var(--text2);line-height:1.65}
@keyframes pulse-dot {0%,100%{opacity:1}50%{opacity:.4}}
.lm-img {background:var(--bg3)}
.lm-img img {position:absolute;top:0;left:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transition:.6s var(--ease)}

/* === LEGAL PAGES === */
.legal-content h2 {font-family:var(--display);font-size:1.2rem;font-weight:700;margin:32px 0 12px;color:var(--text)}
.legal-content h2:first-child {margin-top:0}
.legal-content p {font-size:.9rem;color:var(--text2);line-height:1.75;margin-bottom:12px}
.legal-content ul {padding-left:20px;margin-bottom:16px}
.legal-content li {font-size:.9rem;color:var(--text2);line-height:1.75;margin-bottom:4px}
.legal-content a {color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,92,53,.3);transition:.3s}
.legal-content a:hover {border-color:var(--accent)}

/* === FOOTER LEGAL LINKS === */
.footer-bottom a {color:var(--text3);text-decoration:none;transition:.3s;margin:0 4px}
.footer-bottom a:hover {color:var(--accent)}

/* === RESPONSIVE === */
@media(max-width:1024px) {

    .hero-grid {grid-template-columns:1fr;gap:48px}
    .hero-right {max-width:480px}
    .services-bento {grid-template-columns:1fr 1fr}
    .steps {grid-template-columns:1fr 1fr}

}

@media(max-width:980px) {

    /* Mobile nav: tighter padding, smaller logo so the 56px desktop padding
       + 295px logo + menu-btn doesn't overflow a 390px viewport. */
    .nav {padding:14px 0}
    .nav.scrolled {padding:10px 0}
    .nav .nav-wrap {padding:0 20px}
    .logo {font-size:1.4rem;gap:10px}
    .logo .logo-mark {width:42px;height:42px}
    .nav.scrolled .logo {font-size:1.3rem}
    .nav.scrolled .logo .logo-mark {width:38px;height:38px}
    .menu-btn {display:flex}
    .nav-menu {position:fixed;top:0;right:-100%;width:280px;max-width:85vw;height:100vh;background:rgba(5,5,5,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;padding:80px 28px 28px;gap:18px;border-left:1px solid var(--border);transition:right .4s var(--ease);z-index:999;overflow-y:auto}
    .nav-menu.open {right:0;box-shadow:-30px 0 80px rgba(0,0,0,.6)}
    .nav-menu a {font-size:1rem;width:100%}
    .nav-menu .btn {width:100%;justify-content:center;margin-top:8px}
    .hero {min-height:auto;padding:100px 0 60px}
    .hero-right {display:none}
    .services-bento {grid-template-columns:1fr}
    .bento-wide {grid-column:span 1}
    .steps {grid-template-columns:1fr}
    .why-grid {grid-template-columns:1fr}
    .footer-inner {flex-direction:column;gap:28px}
    .footer-cols {gap:36px}
    section {padding:80px 0}
    .float-stat {display:none}
    .cursor,.cursor-follow,.cursor-glow {display:none!important}

}

/* ==============================================================
   GLOBAL CAPS + KILL-BRONZE OVERRIDE — applies site-wide
   Per user feedback: all major headlines ALL CAPS, kill the
   Instrument Serif italic "bronze" accent on headlines.
   Replaces the editorial italic with solid orange display sans
   so accents stay visually distinct but read as part of the
   same brutalist/builder voice as the rest of the site.
   ============================================================== */

/* All major headlines → uppercase */
.page-title,
.hero-h1,
.sec-title,
.ge-title,
.hiw-headline,
.hiw2-headline,
.hiw2-title,
.tier1-title,
.tier2-title,
.si-title,
.pc-title,
.pn-title,
.wb-title,
.tb-title,
.problem-v2 .sec-title,
.about-text h2,
.vision-content h2,
.manifesto-text h2,
.about-clients .sec-title,
.direct-card h2,
.dc-left h2,
.about-founder-card .fc-quote,
.cta-card h2,
.guarantee-card h2,
.contact-heading,
.ps-step-title,
.problem-card strong,
.hiw2-checklist strong,
.ps-step-list strong,
.client-card strong,
.value-card h3,
.cc-head strong,
.ge-kpi-label,
.pc-cost-label {
  text-transform: uppercase !important;
  letter-spacing: -.025em !important;
}

/* Kill the bronze italic accent — wherever it appears INSIDE a heading,
   render as solid orange in the display sans (not Instrument Serif italic). */
h1 .dl-serif-italic,
h2 .dl-serif-italic,
h3 .dl-serif-italic,
.page-title .dl-serif-italic,
.hero-h1 .dl-serif-italic,
.sec-title .dl-serif-italic,
.ge-title .dl-serif-italic,
.hiw2-headline .dl-serif-italic,
.hiw2-title .dl-serif-italic,
.tier2-title .dl-serif-italic,
.manifesto-text h2 .dl-serif-italic,
.about-clients .sec-title .dl-serif-italic,
.contact-heading .dl-serif-italic,
.hero-h1 .accent-line {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: #ff7a3c !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-transform: uppercase !important;
  letter-spacing: -.025em !important;
  font-feature-settings: normal !important;
  font-variation-settings: normal !important;
  text-shadow: none !important;
  animation: none !important;
}