/* ==========================================================================
   AWEBZONE Growth 2.0 — design system
   Dark-first, glass surfaces, lime brand accent. Light mode via [data-theme="light"].
   ========================================================================== */

:root {
  --bg: #080B18;
  --bg-2: #0c1124;
  --bg-3: #11182f;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.17);
  --text: #F7F8FC;
  --muted: #9aa3bd;
  --faint: #6c7592;
  --lime: #397BFF;      /* primary accent: Electric Blue (variable name kept for compatibility) */
  --lime-2: #A78BFA;    /* Lavender */
  --lime-ink: #ffffff;
  --cyan: #55D6E8;
  --violet: #A78BFA;
  --peach: #FF9B91;
  --grad: linear-gradient(110deg, #397BFF 0%, #A78BFA 55%, #55D6E8 100%);
  --glow: 0 0 0 1px rgba(57,123,255,.35), 0 10px 40px rgba(57,123,255,.25);
  --shadow: 0 24px 70px rgba(0,0,0,.5);
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F7F8FC;
  --bg-2: #eceff9;
  --bg-3: #ffffff;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.96);
  --line: rgba(8,11,24,.10);
  --line-2: rgba(8,11,24,.2);
  --text: #080B18;
  --muted: #4d566e;
  --faint: #7a839c;
  --lime: #2f66e0;
  --lime-2: #7c5cf0;
  --lime-ink: #ffffff;
  --cyan: #0e93b0;
  --violet: #7c5cf0;
  --peach: #f0685c;
  --grad: linear-gradient(110deg, #2f66e0 0%, #7c5cf0 55%, #0e93b0 100%);
  --glow: 0 0 0 1px rgba(47,102,224,.35), 0 10px 40px rgba(47,102,224,.18);
  --shadow: 0 24px 60px rgba(22,34,80,.12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; transition: background-color .4s var(--ease), color .4s var(--ease);
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; }
em { font-style: normal; }
::selection { background: var(--lime); color: var(--lime-ink); }

.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--lime); color: var(--lime-ink); padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.15em; height: 1.15em; flex: none; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 em, h2 em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Reveal system (only hides content when JS is running) ---------- */
.js [data-reveal], .js [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in, .js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- Buttons ---------- */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 24px; border: 0; border-radius: 999px;
  background: var(--lime); color: var(--lime-ink); font-weight: 700; font-size: 15px; letter-spacing: -.005em;
  box-shadow: 0 10px 30px rgba(57,123,255,.18); transition: box-shadow .3s, background .3s, transform .3s var(--ease);
  isolation: isolate; overflow: hidden; white-space: nowrap;
}
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); opacity: 0; transition: opacity .35s; }
.button:hover { box-shadow: 0 16px 44px rgba(57,123,255,.34); }
.button:hover::before { opacity: 1; }
.button .icon { transition: transform .35s var(--ease); }
.button:hover .icon { transform: translate(3px, -3px); }
.button-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; backdrop-filter: blur(10px); }
.button-ghost::before { display: none; }
.button-ghost:hover { border-color: var(--lime); box-shadow: var(--glow); }
.button-small { padding: 11px 18px; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lime); }
.text-link .icon { transition: transform .3s var(--ease); }
.text-link:hover .icon { transform: translate(3px, -3px); }

/* ---------- Small elements ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--lime); }
.eyebrow i, .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display: inline-block; position: relative; flex: none; }
.pulse-dot::after, .eyebrow i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--lime); animation: ping 2.2s var(--ease) infinite; }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); backdrop-filter: blur(12px); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.glass-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow); }
.check-list { display: grid; gap: 12px; margin-top: 22px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.check-list .icon { color: var(--lime); margin-top: 3px; }
.admin-hint { padding: 18px 22px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; }
.admin-hint a { color: var(--lime); text-decoration: underline; }

/* Spotlight + tilt hooks (variables are set from JS) */
[data-spotlight] { position: relative; overflow: hidden; isolation: isolate; }
[data-spotlight]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(57,123,255,.13), transparent 60%); }
[data-spotlight]:hover::before { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; background: var(--bg); transition: opacity .6s var(--ease), visibility .6s; }
.is-preloading .preloader { display: grid; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-inner { display: grid; justify-items: center; gap: 22px; }
.preloader .logo-mark svg { width: 64px; height: 64px; animation: spin-in 1.1s var(--ease) both; }
.preloader .logo-word { font-size: 28px; }
.preloader-bar { width: 220px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.preloader-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s linear; }
.preloader-count { font: 600 13px var(--font-display); letter-spacing: .2em; color: var(--muted); }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--grad); }

/* ---------- Announcement bar ---------- */
.announce-bar { background: linear-gradient(90deg, rgba(57,123,255,.12), rgba(85,214,232,.1)); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 0; text-align: center; }
.announce-inner p { color: var(--muted); }
.announce-inner a { color: var(--lime); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 200; height: var(--header-h); transition: transform .45s var(--ease), background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { max-height: 44px; width: auto; }
.logo-mark svg { width: 40px; height: 40px; }
.logo-word { font: 700 20px var(--font-display); letter-spacing: -.04em; line-height: 1; color: var(--text); }
.logo-word span { color: var(--lime); }
.logo-word small { display: block; font: 600 8.5px var(--font-body); letter-spacing: .28em; margin-top: 5px; color: var(--muted); }
.logo-mark { display: inline-flex; margin-right: 2px; }
.brand, .preloader-inner, .footer-brand { --logo-gap: 10px; }
.brand .logo-mark + .logo-word, .footer-brand .logo-mark + .logo-word { margin-left: 8px; }

.primary-nav { display: flex; align-items: center; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list > li { position: relative; }
.nav-list > li > a { display: block; padding: 10px 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); border-radius: 999px; transition: color .25s, background .25s; }
.nav-list > li > a:hover, .nav-list > .current-menu-item > a, .nav-list > .current-menu-ancestor > a { color: var(--text); background: var(--surface-2); }
.nav-list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-list .sub-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; padding: 10px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); border: 1px solid var(--line-2); border-radius: 18px; backdrop-filter: blur(22px); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--ease), visibility .25s; display: grid; gap: 2px; }
.nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-list .sub-menu a { display: block; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--muted); transition: background .2s, color .2s, padding .25s; }
.nav-list .sub-menu a:hover { background: var(--surface-2); color: var(--lime); padding-left: 18px; }
.nav-mobile-extra { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.theme-toggle:hover { border-color: var(--lime); box-shadow: var(--glow); }
.theme-icon { position: absolute; display: grid; transition: transform .5s var(--ease), opacity .4s; }
.theme-icon .icon { width: 19px; height: 19px; }
[data-theme="dark"] .theme-icon-sun, :root:not([data-theme]) .theme-icon-sun { transform: none; opacity: 1; }
[data-theme="dark"] .theme-icon-moon, :root:not([data-theme]) .theme-icon-moon { transform: translateY(24px) rotate(40deg); opacity: 0; }
[data-theme="light"] .theme-icon-sun { transform: translateY(-24px) rotate(-40deg); opacity: 0; }
[data-theme="light"] .theme-icon-moon { transform: none; opacity: 1; }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); position: relative; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 1.8px; background: var(--text); border-radius: 2px; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:nth-child(2) { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { top: 20.5px; transform: rotate(-45deg); }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 9998; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s; }
.cursor-dot { width: 6px; height: 6px; background: var(--lime); margin: -3px 0 0 -3px; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid color-mix(in srgb, var(--lime) 70%, transparent); }
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-ring.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(57,123,255,.12); border-color: var(--lime); }
.cursor-ring.is-down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
/* ==========================================================================
   Home sections
   ========================================================================== */

.section { padding-block: clamp(70px, 9vw, 130px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2, .statement-text, .process-sticky h2, .training-copy h2, .faq-intro h2, .cta h2, .about-intro h2, .contact-side h2, .finder-head h2, .training-hero h2, .svc-intro h2 { font-size: clamp(34px, 4.6vw, 60px); margin-top: 16px; }
.section-head > p { max-width: 360px; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh - var(--header-h), 900px); display: flex; align-items: center; padding-block: 56px 90px; overflow: hidden; margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + 56px); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.hero.gl-ready .hero-canvas { opacity: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, #000 0%, transparent 75%); opacity: .55; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 14s ease-in-out infinite alternate; }
.hero-glow-a { width: 520px; height: 520px; right: -80px; top: 6%; background: radial-gradient(circle, rgba(57,123,255,.55), transparent 65%); }
.hero-glow-b { width: 460px; height: 460px; left: -120px; bottom: -10%; background: radial-gradient(circle, rgba(85,214,232,.35), transparent 65%); animation-delay: -6s; }
.hero-orb { position: absolute; right: 8%; top: 50%; width: min(46vw, 520px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(57,123,255,.55), rgba(85,214,232,.18) 45%, transparent 70%); box-shadow: inset 0 0 80px rgba(57,123,255,.2); opacity: 0; transition: opacity .6s; animation: float 8s ease-in-out infinite; }
.hero.no-webgl .hero-orb { opacity: .7; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; }
.hero-title { font-size: clamp(40px, 5.4vw, 80px); letter-spacing: -.05em; margin: 26px 0 0; line-height: 1; text-wrap: balance; }
.rotator-line { margin-top: 24px; font: 500 clamp(18px, 2vw, 24px) var(--font-display); color: var(--muted); letter-spacing: -.02em; min-height: 1.5em; }
.rotator { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--lime); padding-bottom: 2px; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--lime); margin-left: 3px; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
.hero-lede { margin-top: 22px; max-width: 540px; font-size: clamp(16px, 1.3vw, 18.5px); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px; font-size: 13.5px; color: var(--muted); }
.hero-proof li { display: flex; align-items: center; gap: 9px; }
.hero-proof .icon { color: var(--lime); }

.hero-visual { position: relative; min-height: 460px; display: grid; place-items: end center; padding-bottom: 30px; perspective: 1200px; }
.dash-card { width: min(100%, 410px); padding: 24px; transform: rotate(-3deg); transition: transform .5s var(--ease); }
.dash-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .14em; font-weight: 600; color: var(--faint); }
.dash-head b { padding: 5px 10px; border-radius: 999px; background: rgba(57,123,255,.12); color: var(--lime); font-weight: 600; }
.dash-title { font: 600 22px var(--font-display); margin: 20px 0 14px; letter-spacing: -.03em; }
.dash-chart { position: relative; height: 150px; border-bottom: 1px solid var(--line); }
.dash-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.6s var(--ease) .6s forwards; }
.dash-area { opacity: 0; animation: fade-in 1.4s ease 1.6s forwards; }
.dash-bars { position: absolute; inset: auto 0 0; height: 100%; display: flex; align-items: flex-end; gap: 10px; padding: 0 4px; }
.dash-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(57,123,255,.28), rgba(57,123,255,.04)); transform-origin: bottom; animation: rise 1.1s var(--ease) both; }
.dash-bars i:nth-child(2) { animation-delay: .06s; } .dash-bars i:nth-child(3) { animation-delay: .12s; } .dash-bars i:nth-child(4) { animation-delay: .18s; } .dash-bars i:nth-child(5) { animation-delay: .24s; } .dash-bars i:nth-child(6) { animation-delay: .3s; } .dash-bars i:nth-child(7) { animation-delay: .36s; } .dash-bars i:nth-child(8) { animation-delay: .42s; }
.dash-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dash-flow i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--lime), transparent); }
.glass-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-2) 72%, transparent); backdrop-filter: blur(14px); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; animation: float 6s ease-in-out infinite; }
.glass-chip .icon { color: var(--lime); }
.chip-a { top: 36px; right: -6px; } .chip-b { bottom: 64px; right: -14px; animation-delay: -2s; } .chip-c { bottom: 24px; left: -8px; animation-delay: -4s; }
.visual-note { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--faint); letter-spacing: .08em; white-space: nowrap; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 1.5px solid var(--line-2); border-radius: 20px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--lime); animation: scroll-dot 1.8s var(--ease) infinite; }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding-block: 22px; }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex: none; }
.marquee-group span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 500 clamp(20px, 2.4vw, 30px) var(--font-display); letter-spacing: -.03em; color: var(--muted); white-space: nowrap; }
.marquee-group .icon { color: var(--lime); width: 18px; height: 18px; }

/* ---------- Statement (word-by-word reveal) ---------- */
.statement { padding-block: clamp(80px, 11vw, 160px); max-width: 1060px; }
.statement-text { line-height: 1.16; letter-spacing: -.04em; margin: 22px 0 34px; text-wrap: pretty; }
.statement-text .w { opacity: .16; transition: opacity .45s ease; }
.statement-text .w.is-lit { opacity: 1; }
.no-js .statement-text .w, .statement-text:not([data-ready]) .w { opacity: 1; }

/* ---------- Bento services ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-card { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(10px); transition: border-color .35s, transform .5s var(--ease), box-shadow .35s; }
.bento-card:hover { border-color: rgba(57,123,255,.5); box-shadow: var(--glow); }
.bento-1, .bento-4 { grid-column: span 2; }
.bento-num { position: absolute; top: 24px; right: 26px; font: 600 12px var(--font-display); letter-spacing: .12em; color: var(--faint); }
.bento-icon, .principle-icon, .industry-icon, .step-icon, .page-hero-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(57,123,255,.1); border: 1px solid rgba(57,123,255,.25); color: var(--lime); transition: transform .5s var(--ease), background .3s; }
.bento-icon .icon, .principle-icon .icon, .industry-icon .icon, .step-icon .icon, .page-hero-icon .icon { width: 24px; height: 24px; }
.bento-card:hover .bento-icon { transform: rotate(-8deg) scale(1.08); background: rgba(57,123,255,.2); }
.bento-card h3 { font-size: 24px; margin: auto 0 10px; padding-top: 38px; }
.bento-card p { color: var(--muted); font-size: 14.5px; max-width: 36ch; }
.bento-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--lime); }
.bento-more .icon { transition: transform .3s var(--ease); }
.bento-card:hover .bento-more .icon { transform: translate(4px, -4px); }
.bento-even .bento-card { grid-column: auto; }
.bento-card.is-dim { opacity: .28; filter: saturate(.4); transform: scale(.985); }
.bento-card.is-match { border-color: var(--lime); box-shadow: var(--glow); }

/* ---------- Stats ---------- */
.stats { padding-block: 0 clamp(60px, 8vw, 110px); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, var(--surface-2), var(--surface)); overflow: hidden; }
.stat { padding: 38px 30px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-num { display: block; font: 600 clamp(48px, 6vw, 84px) var(--font-display); letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 12px; color: var(--muted); font-size: 14.5px; }

/* ---------- Growth system tabs ---------- */
.system { background: linear-gradient(180deg, transparent, var(--bg-2) 20%, var(--bg-2) 80%, transparent); }
.tab-list { position: relative; display: flex; gap: 6px; padding: 6px; width: max-content; max-width: 100%; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.tab-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 15px; transition: color .3s; white-space: nowrap; }
.tab-btn[aria-selected="true"] { color: var(--lime-ink); }
.tab-index { font-size: 11px; opacity: .6; letter-spacing: .1em; }
.tab-indicator { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: var(--lime); box-shadow: 0 6px 24px rgba(57,123,255,.35); transition: transform .5s var(--ease), width .5s var(--ease); }
.tab-panels { margin-top: 28px; }
.tab-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); backdrop-filter: blur(14px); }
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { animation: panel-in .6s var(--ease); }
.panel-copy h3 { font-size: clamp(28px, 3.2vw, 44px); }
.panel-copy p { margin-top: 16px; color: var(--muted); max-width: 52ch; font-size: 17px; }
.panel-visual { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; }
.rings { position: relative; width: min(100%, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(57,123,255,.3); animation: ring-pulse 4s ease-in-out infinite; }
.rings i:nth-child(1) { inset: 0; } .rings i:nth-child(2) { inset: 16%; animation-delay: -1.3s; border-color: rgba(85,214,232,.35); } .rings i:nth-child(3) { inset: 32%; animation-delay: -2.6s; }
.ring-core { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 60px rgba(57,123,255,.5); }
.ring-core .icon { width: 38px; height: 38px; }
.ring-chip { position: absolute; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-2) 80%, transparent); backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; animation: float 6s ease-in-out infinite; }
.ring-chip-1 { top: 8%; left: 6%; } .ring-chip-2 { top: 40%; right: 0; animation-delay: -2s; } .ring-chip-3 { bottom: 8%; left: 14%; animation-delay: -4s; }

/* ---------- Process ---------- */
.process-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.process-sticky { position: sticky; top: 120px; }
.process-sticky p { margin: 20px 0 28px; color: var(--muted); max-width: 40ch; }
.process-steps { position: relative; display: grid; gap: 18px; padding-left: 34px; }
.process-line { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--line-2); border-radius: 2px; }
.process-line b { display: block; width: 100%; height: 100%; transform: scaleY(var(--fill, 0)); transform-origin: top; background: var(--grad); border-radius: 2px; }
.process-step { display: grid; grid-template-columns: auto auto 1fr; gap: 20px; align-items: start; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .4s, transform .5s var(--ease); }
.process-step::after { content: ""; position: absolute; left: -33px; top: 38px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: .4s; }
.process-step.is-active { border-color: rgba(57,123,255,.45); transform: translateX(6px); }
.process-step.is-active::after { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 6px rgba(57,123,255,.15); }
.step-num { font: 600 13px var(--font-display); color: var(--lime); letter-spacing: .12em; padding-top: 4px; }
.process-step h3 { font-size: 24px; margin-bottom: 8px; }
.process-step p { color: var(--muted); font-size: 15px; }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; border: 1px solid var(--line-2); border-radius: 30px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); backdrop-filter: blur(16px); overflow: hidden; box-shadow: var(--shadow); }
.calc-inputs { display: grid; gap: 30px; padding: clamp(26px, 4vw, 52px); }
.calc-field label { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.calc-field output { color: var(--text); font: 600 17px var(--font-display); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) var(--fill, 30%), var(--line-2) var(--fill, 30%)); outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--lime), 0 4px 18px rgba(57,123,255,.5); transition: transform .2s; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lime); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--lime); }
.calc-results { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; padding: clamp(26px, 4vw, 52px); background: radial-gradient(500px circle at 80% 0%, rgba(57,123,255,.14), transparent 60%), var(--bg-2); border-left: 1px solid var(--line); }
.calc-result { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.calc-result span { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.calc-result b { display: block; margin-top: 6px; font: 600 clamp(24px, 2.6vw, 34px) var(--font-display); letter-spacing: -.04em; }
.calc-result-main { grid-column: 1 / -1; background: var(--lime); border-color: var(--lime); }
.calc-result-main span, .calc-result-main small { color: rgba(255,255,255,.88); }
.calc-result-main b { color: var(--lime-ink); font-size: clamp(34px, 4vw, 52px); }
.calc-result-main small { display: block; margin-top: 4px; font-weight: 600; font-size: 13px; }
.calc-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--faint); }
.calc-results .button { grid-column: 1 / -1; justify-self: start; }

/* ---------- Principles / industries / modules ---------- */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.principle { padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .35s, transform .5s var(--ease); }
.principle:hover { border-color: rgba(57,123,255,.45); transform: translateY(-6px); }
.principle h3 { font-size: 21px; margin: 26px 0 10px; }
.principle p { color: var(--muted); font-size: 14.5px; }

.industries { background: var(--bg-2); border-block: 1px solid var(--line); }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.industry { display: flex; gap: 20px; align-items: flex-start; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .35s, transform .5s var(--ease); }
.industry:hover { border-color: rgba(57,123,255,.45); transform: translateY(-4px); }
.industry h3 { font-size: 19px; margin-bottom: 6px; }
.industry p { color: var(--muted); font-size: 14px; }

.training-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.training-copy p { margin: 20px 0 28px; color: var(--muted); max-width: 48ch; }
.training-badge { display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: 30px; padding: 14px 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); }
.training-badge b { font: 600 52px var(--font-display); letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.training-badge span { font-size: 13.5px; color: var(--muted); }
.training-badge-lg { flex-direction: column; align-items: flex-start; padding: 34px; }
.training-badge-lg b { font-size: 96px; }
.modules { display: grid; gap: 12px; counter-reset: m; }
.module { display: flex; gap: 22px; align-items: center; padding: 22px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .35s, transform .5s var(--ease); }
.module:hover { border-color: rgba(57,123,255,.45); transform: translateX(8px); }
.module-num { font: 600 28px var(--font-display); color: var(--lime); letter-spacing: -.04em; min-width: 40px; }
.module h3 { font-size: 20px; margin-bottom: 4px; }
.module p { color: var(--muted); font-size: 14.5px; }
.modules-wide { grid-template-columns: repeat(2, 1fr); }

/* ---------- Proof / posts ---------- */
.case-grid, .post-grid, .quotes, .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quotes { margin-top: 16px; }
.case-card, .post-card, .quote { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .35s, transform .5s var(--ease); }
.case-card:hover, .post-card:hover { border-color: rgba(57,123,255,.45); transform: translateY(-6px); }
.case-thumb, .post-thumb { display: block; margin: -8px -8px 6px; border-radius: 14px; overflow: hidden; }
.case-thumb img, .post-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s var(--ease); }
.case-card:hover img, .post-card:hover img { transform: scale(1.06); }
.case-card h3, .post-card h3 { font-size: 22px; }
.case-card p, .post-card p { color: var(--muted); font-size: 14.5px; }
.post-card .text-link, .case-card .bento-more { margin-top: auto; }
.post-meta { font-size: 12.5px; color: var(--faint); letter-spacing: .04em; }
.post-meta-lg { font-size: 14px; margin-top: 18px; }
.quote { margin: 0; }
.quote-mark { width: 30px; height: 30px; color: var(--lime); }
.quote blockquote { margin: 0; font: 500 19px/1.5 var(--font-display); letter-spacing: -.02em; }
.quote figcaption { margin-top: auto; display: grid; font-size: 14px; }
.quote figcaption span { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro p { margin: 18px 0 26px; color: var(--muted); max-width: 38ch; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .3s, background .3s; }
.faq-item[open] { border-color: rgba(57,123,255,.4); background: var(--surface-2); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; font: 500 18px var(--font-display); letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); color: var(--lime); transition: transform .45s var(--ease), background .3s; }
.faq-item.is-open .faq-plus, .no-js .faq-item[open] .faq-plus { transform: rotate(135deg); background: var(--lime); color: var(--lime-ink); }
.faq-body p { padding: 0 26px 24px; color: var(--muted); }
.js .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.js .faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.js .faq-body p { overflow: hidden; padding-bottom: 0; transition: padding .45s var(--ease); }
.js .faq-item.is-open .faq-body p { padding-bottom: 24px; }

/* ---------- CTA ---------- */
.cta { position: relative; padding-block: clamp(80px, 10vw, 140px); overflow: hidden; background: radial-gradient(900px circle at 85% 20%, rgba(57,123,255,.14), transparent 55%), radial-gradient(700px circle at 5% 90%, rgba(85,214,232,.1), transparent 55%), var(--bg-2); border-top: 1px solid var(--line); }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; }
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.cta-copy p { margin: 20px 0 24px; color: var(--muted); max-width: 46ch; }
.cta-points { display: grid; gap: 10px; color: var(--muted); }
.cta-points li { display: flex; align-items: center; gap: 10px; }
.cta-points .icon { color: var(--lime); }
.cta-form { padding: clamp(24px, 3.4vw, 40px); }
.cta-form h3 { font-size: 26px; margin-bottom: 18px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); padding-top: clamp(60px, 8vw, 110px); }
.footer-glow { position: absolute; left: 50%; top: 0; width: 900px; height: 360px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(57,123,255,.16), transparent 65%); pointer-events: none; }
.footer-hero { position: relative; padding-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.footer-mail { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; font: 600 clamp(26px, 5.4vw, 72px) var(--font-display); letter-spacing: -.045em; word-break: break-word; transition: color .3s; }
.footer-mail .icon { width: .8em; height: .8em; color: var(--lime); transition: transform .4s var(--ease); }
.footer-mail:hover { color: var(--lime); }
.footer-mail:hover .icon { transform: translate(6px, -6px); }
.footer-top { position: relative; display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.2fr; gap: 40px; padding-block: 56px; }
.footer-brand p { margin-top: 18px; color: var(--muted); max-width: 32ch; font-size: 14.5px; }
.footer-brand .brand, .footer-brand > a { display: inline-flex; }
.footer-top > div { display: flex; flex-direction: column; gap: 10px; }
.footer-label { margin-bottom: 8px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.footer-top a { color: var(--muted); font-size: 14.5px; transition: color .25s, transform .25s; width: fit-content; }
.footer-top a:hover { color: var(--lime); transform: translateX(3px); }
.footer-social { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; margin-top: 18px; }
.footer-social a { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px !important; }
.footer-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13.5px; }
.footer-bottom > div { display: flex; align-items: center; gap: 20px; }
.footer-bottom a:hover { color: var(--lime); }
.to-top { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); transition: .3s; }
.to-top:hover { background: var(--lime); color: var(--lime-ink); }
.footer-wordmark { margin-top: -10px; text-align: center; font: 700 clamp(60px, 17vw, 260px) var(--font-display); letter-spacing: -.07em; line-height: .8; padding-bottom: .06em; color: transparent; -webkit-text-stroke: 1px var(--line-2); user-select: none; pointer-events: none; }

/* ---------- Floating contact ---------- */
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0 17px; border-radius: 999px; background: #25d366; color: #05200f; box-shadow: 0 10px 34px rgba(37,211,102,.4); transition: gap .35s var(--ease), padding .35s var(--ease), transform .3s; }
.whatsapp-float .icon { width: 24px; height: 24px; }
.wa-tip { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14px; transition: max-width .45s var(--ease); }
.whatsapp-float:hover { gap: 10px; padding: 0 22px 0 17px; }
.whatsapp-float:hover .wa-tip { max-width: 120px; }
.mobile-bar { display: none; }
/* ==========================================================================
   Inner pages, forms, utilities, animations, responsive
   ========================================================================== */

.page-hero { position: relative; overflow: hidden; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 70px) 0 70px; border-bottom: 1px solid var(--line); background: radial-gradient(800px circle at 80% 0%, rgba(57,123,255,.13), transparent 60%), var(--bg); }
.page-hero-inner { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -.05em; max-width: 18ch; text-wrap: balance; }
.page-hero-post h1 { font-size: clamp(34px, 4.8vw, 64px); max-width: 24ch; }
.page-lede { font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); max-width: 60ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--faint); }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb b { color: var(--muted); font-weight: 500; }
.page-body { padding-block: clamp(50px, 7vw, 100px); display: grid; gap: clamp(50px, 7vw, 100px); }
.svc-block { display: block; }
.lede-sm { color: var(--muted); max-width: 56ch; margin-top: 24px; }
.prose { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 72ch; }
.prose > * + * { margin-top: 1.3em; }
.prose h2, .prose h3 { color: var(--text); margin-top: 2em; }
.prose h2 { font-size: 32px; } .prose h3 { font-size: 24px; }
.prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-sm); }
.prose ul { list-style: disc; padding-left: 1.4em; } .prose ol { list-style: decimal; padding-left: 1.4em; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--lime); color: var(--text); font: 500 21px/1.5 var(--font-display); }
.post-body .article { margin-inline: auto; }
.post-hero-img { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post-hero-img img { width: 100%; max-height: 520px; object-fit: cover; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 72ch; margin-inline: auto; width: 100%; color: var(--muted); font-size: 14px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 13.5px; transition: .3s; }
.chip-link:hover { border-color: var(--lime); color: var(--lime); }
.read-progress { position: fixed; top: 3px; left: 0; right: 0; height: 2px; z-index: 299; }
.read-progress i { display: block; height: 100%; transform: scaleX(var(--rp, 0)); transform-origin: left; background: var(--lime); }
.pagination { display: flex; justify-content: center; margin-top: 40px; }
.pagination .nav-links, .pagination { gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); transition: .3s; }
.pagination .page-numbers:hover { border-color: var(--lime); }
.pagination .current { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); font-weight: 700; }
.pagination .nav-links { display: flex; }
.empty-state { padding: clamp(30px, 5vw, 60px); text-align: center; }
.empty-state p { margin-top: 12px; color: var(--muted); }
.legal-note { padding: 28px; color: var(--muted); max-width: 72ch; }

.page-hero-icon { width: 64px; height: 64px; border-radius: 20px; }
.page-hero-icon .icon { width: 30px; height: 30px; }

/* service detail */
.svc-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.svc-intro-copy p { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 54ch; }
.svc-for { padding: 30px; display: grid; gap: 16px; justify-items: start; }
.svc-for p { color: var(--muted); }
.deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.deliver-grid li { display: flex; align-items: flex-start; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); font-weight: 500; }
.deliver-grid .icon { color: var(--lime); margin-top: 3px; width: 20px; height: 20px; }
.mini-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mini-steps li { display: grid; gap: 10px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mini-steps h3 { font-size: 21px; }
.mini-steps p { color: var(--muted); font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chips li { padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 500; transition: .3s; }
.chips li:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-3px); }
.svc-talk-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.svc-form { padding: clamp(24px, 3.4vw, 40px); position: sticky; top: 100px; }
.svc-form h3 { font-size: 26px; } .svc-form > p { color: var(--muted); margin: 8px 0 18px; }
.related-grid .bento-card { min-height: 230px; }

/* finder + together */
.finder-head { margin-bottom: 28px; }
.finder-goals { display: flex; flex-wrap: wrap; gap: 10px; }
.goal-btn { padding: 12px 22px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 14.5px; transition: .3s; }
.goal-btn:hover { border-color: var(--lime); }
.goal-btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); box-shadow: var(--glow); }
.goal-reset { color: var(--muted); border-style: dashed; }
.finder-note { margin: 18px 0 28px; color: var(--muted); min-height: 1.6em; }
.together { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.together > div { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 8px; justify-items: start; }
.together .icon { width: 28px; height: 28px; color: var(--lime); }
.together p { color: var(--muted); font-size: 14.5px; }
.together > span { font: 300 36px var(--font-display); color: var(--lime); }

/* about / contact */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.contact-side p { margin-top: 18px; color: var(--muted); max-width: 46ch; }
.contact-cards { display: grid; gap: 12px; margin-top: 30px; }
.contact-cards a { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .3s, transform .4s var(--ease); }
.contact-cards a:hover { border-color: rgba(57,123,255,.5); transform: translateX(6px); }
.contact-cards .icon { width: 24px; height: 24px; color: var(--lime); }
.contact-cards small { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.expect { padding: 28px; margin-top: 30px; }
.expect h3 { font-size: 22px; margin-bottom: 14px; }
.expect ol { display: grid; gap: 12px; color: var(--muted); }
.expect li { display: flex; gap: 14px; align-items: flex-start; }
.expect b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(57,123,255,.15); color: var(--lime); font-size: 13px; }
.contact-form-card { padding: clamp(24px, 3.4vw, 44px); position: sticky; top: 100px; }
.contact-form-card h3 { font-size: 28px; margin-bottom: 18px; }
.visit-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px; }
.visit-card h3 { font-size: 28px; margin: 10px 0 6px; } .visit-card p { color: var(--muted); }
.faq-page { display: grid; grid-template-columns: 1.4fr .6fr; gap: 30px; align-items: start; }
.faq-aside { padding: 28px; display: grid; gap: 14px; justify-items: start; position: sticky; top: 100px; }
.faq-aside p { color: var(--muted); }
.training-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.training-hero p { margin-top: 20px; color: var(--muted); max-width: 54ch; font-size: 18px; }
.industry-grid-lg .industry { padding: 32px; }
.mini-steps-4 .step-icon { margin: 4px 0; }
.page-cta { padding-bottom: clamp(60px, 8vw, 110px); }
.page-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 52px); background: radial-gradient(600px circle at 90% 0%, rgba(57,123,255,.18), transparent 60%), var(--surface); }
.page-cta h2 { font-size: clamp(26px, 3.4vw, 42px); }

.not-found { position: relative; overflow: hidden; min-height: 80svh; display: grid; align-items: center; padding-block: 80px; }
.not-found-inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; }
.nf-code { font: 700 clamp(120px, 22vw, 300px) var(--font-display); letter-spacing: -.08em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); }
.not-found h1 { font-size: clamp(36px, 5vw, 68px); }
.not-found p { color: var(--muted); max-width: 46ch; }
.search-form { display: flex; gap: 10px; width: min(100%, 460px); }
.search-form input { flex: 1; min-width: 0; padding: 13px 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; }
.search-form input:focus { outline: none; border-color: var(--lime); box-shadow: var(--glow); }

/* ---------- Forms ---------- */
.enquiry-form { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { position: relative; }
.field input, .field textarea, .field select { width: 100%; padding: 22px 18px 9px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; transition: border-color .25s, box-shadow .25s, background .25s; }
.field textarea { resize: vertical; min-height: 110px; }
.field select { padding: 17px 18px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--bg-2); color: var(--text); }
.field label { position: absolute; left: 18px; top: 17px; color: var(--muted); font-size: 15px; pointer-events: none; transition: transform .25s var(--ease), font-size .25s, color .25s; transform-origin: left top; }
.field input:focus ~ label, .field textarea:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field textarea:not(:placeholder-shown) ~ label { transform: translateY(-11px); font-size: 11.5px; color: var(--lime); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(57,123,255,.12); background: var(--surface-2); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ff6b5e; }
.enquiry-form .button { justify-self: start; border: 0; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-size: 14px; color: var(--muted); }
.form-status.is-ok, .form-success { color: var(--lime); }
.form-status.is-err, .form-error { color: #ff8a7e; }
.form-notice { margin-bottom: 18px; padding: 14px 18px; border-radius: 14px; font-weight: 600; font-size: 14.5px; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.enquiry-form.is-sent .field, .enquiry-form.is-sent .field-row, .enquiry-form.is-sent .button { display: none; }
.enquiry-form.is-sent .form-status { font: 600 22px var(--font-display); color: var(--lime); padding: 24px 0; }
.enquiry-form.is-loading .button { opacity: .6; pointer-events: none; }

/* ---------- Keyframes ---------- */
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift { to { transform: translate(-40px, 30px) scale(1.12); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(16px); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: .4; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes spin-in { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-1, .bento-4 { grid-column: auto; }
  .principles, .mini-steps { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 920px) {
  :root { --header-h: 68px; }
  .hero { padding-bottom: 70px; }
  .hero-grid, .process-layout, .training-layout, .faq-layout, .cta-inner, .calc, .contact-grid, .svc-talk-grid, .svc-intro, .about-intro, .training-hero, .faq-page, .tab-panel { grid-template-columns: 1fr; }
  .hero-visual { min-height: 400px; margin-top: 20px; }
  .process-sticky, .faq-intro, .svc-form, .contact-form-card, .faq-aside { position: static; }
  .calc-results { border-left: 0; border-top: 1px solid var(--line); }
  .industry-grid, .case-grid, .post-grid, .quotes, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .together { grid-template-columns: 1fr; } .together > span { display: none; }
  .modules-wide { grid-template-columns: 1fr; }

  .menu-toggle { display: block; }
  .nav-cta { display: none; }
  .primary-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px; padding: calc(var(--header-h) + 28px) 24px 40px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(24px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .35s, transform .5s var(--ease), visibility .35s; margin: 0; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li > a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font: 600 26px var(--font-display); color: var(--text); letter-spacing: -.03em; background: none !important; }
  .nav-list .menu-item-has-children > a::after { display: none; }
  .nav-list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 8px 0 8px 14px; border: 0; background: none; box-shadow: none; backdrop-filter: none; display: grid; }
  .nav-list .sub-menu a { padding: 8px 0; font-size: 16px; }
  .nav-mobile-extra { display: grid; gap: 6px; margin-top: auto; color: var(--muted); }
  .site-header.menu-open, .site-header.menu-open.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; transform: none; }
  .whatsapp-float { display: none; }
  .mobile-bar { position: fixed; z-index: 160; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px; border: 1px solid var(--line-2); border-radius: 22px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; }
  .mobile-bar .icon { width: 19px; height: 19px; color: var(--lime); }
  .mobile-bar-main { background: var(--lime); color: var(--lime-ink); }
  .site-footer { padding-bottom: 84px; }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 36px); }
  .bento, .principles, .industry-grid, .case-grid, .post-grid, .quotes, .related-grid, .mini-steps, .field-row { grid-template-columns: 1fr; }
  .bento-card { min-height: 220px; }
  .stats-grid { grid-template-columns: 1fr 1fr; } .stat { padding: 26px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .process-step { grid-template-columns: auto 1fr; } .process-step .step-icon { display: none; }
  .calc-results { grid-template-columns: 1fr; }
  .hero-actions .button { flex: 1 1 auto; }
  .chip-a { right: 0; } .chip-b { right: 0; } .chip-c { left: 0; }
  .announce-inner p { font-size: 12.5px; } .announce-inner .pulse-dot { display: none; }
  .tab-panel { padding: 24px; } .panel-visual { aspect-ratio: 1.3; }
  .module { padding: 18px; gap: 14px; }
}
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-stagger] > * { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}
/* ==========================================================================
   v2.1 — Growth Engine: ad previews, promos, ROI matrix, 3D engines,
   performance pricing, service visuals, footer vortex
   ========================================================================== */

.page-body .section.container { width: 100%; padding-inline: 0; }
.page-body .roi .container { width: 100%; }
.demo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--peach) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--peach) 10%, transparent); color: var(--peach); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.demo-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--peach); }
.demo-note { margin-top: 22px; text-align: center; }
.your-ad-badge { font-style: normal; margin-left: auto; padding: 3px 8px; border-radius: 6px; background: var(--peach); color: #2a0d0a; font: 700 9.5px var(--font-body); letter-spacing: .12em; white-space: nowrap; animation: badge-pulse 2.6s ease-in-out infinite; }
@keyframes badge-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--peach) 25%, transparent); } }

/* gradient hairline borders on glass surfaces */
.glass-card, .bento-card, .principle, .usp-card { position: relative; }
.glass-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(57,123,255,.5), transparent 35%, transparent 65%, rgba(167,139,250,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; }

/* ---------- device frames ---------- */
.phone { position: relative; width: 250px; padding: 10px; border-radius: 38px; background: linear-gradient(160deg, #1a2140, #0b1022); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(57,123,255,.18); }
.phone-notch { position: absolute; top: 14px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 12px; background: #05070f; z-index: 4; }
.phone > .ig-post, .phone > .story { border-radius: 28px; overflow: hidden; }
.phone-tall { width: 230px; }
.phone-float { transform: rotate(-4deg); animation: float 7s ease-in-out infinite; }
.ig-post { background: #fff; color: #111; padding-top: 34px; }
.ig-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 11px; line-height: 1.2; }
.ig-head b { display: block; font-size: 12px; } .ig-head small { color: #777; font-size: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.av-1 { background: linear-gradient(135deg, #FF9B91, #A78BFA); } .av-2 { background: linear-gradient(135deg, #55D6E8, #397BFF); } .av-3 { background: linear-gradient(135deg, #A78BFA, #397BFF); }
.ig-cta { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #eef3ff; color: #1f4fd6; font-size: 12px; font-weight: 600; }
.ig-cta .icon { width: 14px; height: 14px; }
.ig-actions { display: flex; gap: 12px; padding: 9px 12px 4px; } .ig-actions .icon { width: 20px; height: 20px; } .ig-actions .sp { flex: 1; }
.ig-text { padding: 2px 12px 14px; font-size: 11px; color: #222; } .ig-text b { margin-right: 4px; }

/* ---------- ad creatives (pure CSS, looping) ---------- */
.creative { position: relative; aspect-ratio: 1; overflow: hidden; }
.cr-fashion { background: linear-gradient(140deg, #A78BFA, #FF9B91); }
.cr-shape { position: absolute; border-radius: 50%; animation: shape-drift 6s ease-in-out infinite; }
.cr-shape.s1 { width: 70%; height: 70%; left: -15%; top: 25%; background: rgba(57,123,255,.65); }
.cr-shape.s2 { width: 46%; height: 46%; right: -8%; top: -6%; background: rgba(255,255,255,.35); animation-delay: -2s; }
.cr-shape.s3 { width: 30%; height: 30%; right: 12%; bottom: 8%; background: rgba(85,214,232,.7); animation-delay: -4s; }
@keyframes shape-drift { 50% { transform: translate(8%, -6%) scale(1.08); } }
.cr-text { position: absolute; inset: auto 0 14% 0; text-align: center; font: 700 22px var(--font-display); color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.cr-text i { position: absolute; left: 0; right: 0; font-style: normal; opacity: 0; animation: cycle3 6s infinite; }
.cr-text i:nth-child(2) { animation-delay: 2s; } .cr-text i:nth-child(3) { animation-delay: 4s; }
@keyframes cycle3 { 0%, 4% { opacity: 0; transform: translateY(10px); } 10%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-10px); } }
.cr-food { background: radial-gradient(circle at 50% 40%, #3b2a6b, #14183a 70%); }
.cr-fit { background: linear-gradient(160deg, #0f1c4d, #397BFF); }
.cr-wide { aspect-ratio: 16/9; }
.plate { position: absolute; left: 50%; top: 38%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%; background: radial-gradient(circle, #FF9B91 0 30%, #fff 31% 62%, #dfe6ff 63%); animation: plate-spin 9s linear infinite; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.plate i { position: absolute; left: 50%; top: -18%; width: 3px; height: 22%; border-radius: 3px; background: rgba(255,255,255,.7); animation: steam 2.4s ease-in-out infinite; }
.plate i:nth-child(1) { margin-left: -14px; } .plate i:nth-child(2) { animation-delay: .6s; } .plate i:nth-child(3) { margin-left: 14px; animation-delay: 1.2s; }
@keyframes plate-spin { to { transform: rotate(360deg); } } @keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 50% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px); } }
.plate { animation-name: plate-bob; } @keyframes plate-bob { 50% { transform: translateY(-5%) scale(1.04); } }
.rep { position: absolute; inset: auto 12% 30% 12%; height: 34%; display: flex; align-items: flex-end; gap: 8%; }
.rep i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #55D6E8, #A78BFA); animation: rep-bar 1.8s ease-in-out infinite; }
.rep i:nth-child(1) { height: 40%; } .rep i:nth-child(2) { height: 75%; animation-delay: -.4s; } .rep i:nth-child(3) { height: 55%; animation-delay: -.8s; } .rep i:nth-child(4) { height: 95%; animation-delay: -1.2s; }
@keyframes rep-bar { 50% { transform: scaleY(.55); transform-origin: bottom; } }
.story { position: relative; aspect-ratio: 9/16; color: #fff; }
.story-bars { position: absolute; top: 40px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); } .story-bars i.on { background: linear-gradient(90deg, #fff 50%, rgba(255,255,255,.35) 50%); background-size: 200% 100%; animation: story-load 5s linear infinite; }
@keyframes story-load { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ig-head-overlay { position: absolute; top: 48px; left: 0; right: 0; color: #fff; z-index: 3; } .ig-head-overlay small { color: rgba(255,255,255,.75); }
.story-text { position: absolute; left: 0; right: 0; bottom: 24%; text-align: center; font: 700 24px var(--font-display); padding: 0 10px; } .story-text small { display: block; margin-top: 4px; font: 500 12px var(--font-body); opacity: .85; }
.story-cta { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: #fff; color: #111; font-size: 12px; font-weight: 700; animation: cta-pulse 2s ease-in-out infinite; white-space: nowrap; }
@keyframes cta-pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.story-cta-pill { position: static; transform: none; margin-top: 8px; animation: none; background: var(--lime); color: #fff; }
.rail { position: absolute; right: 10px; bottom: 28%; display: grid; gap: 14px; z-index: 3; text-align: center; font-size: 10px; } .rail .icon { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
.reel-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 18px; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); font-size: 11px; } .reel-meta .ig-head { position: static; padding: 0 0 8px; }
.fb-card { width: min(100%, 380px); background: #fff; color: #111; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.fb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.2; } .fb-head small { display: flex; align-items: center; gap: 4px; color: #777; font-size: 11px; } .fb-head small .icon { width: 11px; height: 11px; }
.fb-text { padding: 0 14px 10px; font-size: 13px; }
.fb-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f3f8; font-size: 12px; } .fb-link small { color: #777; font-size: 10px; display: block; } .fb-btn { padding: 8px 14px; border-radius: 8px; background: #dfe7ff; font-weight: 700; color: #1f4fd6; white-space: nowrap; }
.fb-react { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 12px; color: #666; }
.serp { width: min(100%, 420px); padding: 16px; border-radius: 16px; background: #fff; color: #222; box-shadow: 0 30px 80px rgba(0,0,0,.35); text-align: left; }
.serp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #dfe1e8; border-radius: 999px; font-size: 13px; } .serp-bar .icon { width: 16px; height: 16px; color: #666; }
.type-line { overflow: hidden; white-space: nowrap; border-right: 2px solid #397BFF; animation: typing 5s steps(28) infinite; width: 0; max-width: 100%; }
@keyframes typing { 0% { width: 0; } 55%, 90% { width: 100%; } 100% { width: 0; } }
.serp-ad { margin-top: 14px; padding: 12px; border-radius: 12px; background: #f4f7ff; border: 1px solid #d7e2ff; }
.serp-url { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #3c5; color: #2a6a3a; } .ad-tag { padding: 1px 5px; border-radius: 4px; background: #202124; color: #fff; font-size: 10px; }
.serp h4 { margin: 6px 0 2px; font: 600 15px var(--font-body); letter-spacing: 0; color: #1a0dab; } .serp p { font-size: 12px; color: #444; }
.sitelinks { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .sitelinks span { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #d7e2ff; font-size: 11px; color: #1a0dab; }
.serp-org { margin-top: 14px; } .serp-org small { color: #666; font-size: 11px; } .serp-org h5 { margin: 2px 0 0; font: 500 14px var(--font-body); letter-spacing: 0; color: #1a0dab; opacity: .7; } .serp-org p { font-size: 11px; color: #888; }

/* ad tabs */
.ad-tabs .tab-list { max-width: 100%; }
.ad-panel { grid-template-columns: .8fr 1.2fr; }
.ad-copy h3 { font-size: clamp(26px, 3vw, 38px); } .ad-copy > p { margin: 12px 0 0; color: var(--muted); } .ad-copy .demo-badge { margin-top: 22px; }
.ad-stage { position: relative; display: grid; place-items: center; min-height: 480px; padding: 24px; border-radius: 24px; background: radial-gradient(circle at 50% 30%, rgba(57,123,255,.22), transparent 60%), radial-gradient(circle at 80% 90%, rgba(167,139,250,.2), transparent 55%), var(--bg-2); overflow: hidden; }

/* ---------- promos ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.promo { display: flex; flex-direction: column; gap: 4px; } .promo h3 { font-size: 17px; margin-top: 12px; } .promo p { color: var(--muted); font-size: 13px; }
.promo-art { position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.pm-text { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font: 700 20px var(--font-display); color: #fff; } .pm-text span { position: absolute; left: 0; right: 0; opacity: 0; animation: cycle3 6s infinite; } .pm-text span:nth-child(2) { animation-delay: 2s; } .pm-text span:nth-child(3) { animation-delay: 4s; }
.pm-text-b { font-size: 15px; letter-spacing: .06em; } .pm-text-b span { animation-name: cycle2; animation-duration: 4s; } .pm-text-b span:nth-child(2) { animation-delay: 2s; }
@keyframes cycle2 { 0% { opacity: 0; transform: translateY(8px); } 10%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(-8px); } }
.pm-fashion .promo-art { background: #1b1038; } .pm-bar { position: absolute; top: 0; bottom: 0; width: 34%; animation: bar-sweep 4s ease-in-out infinite; } .pm-bar.b1 { left: 0; background: #A78BFA; } .pm-bar.b2 { left: 33%; background: #FF9B91; animation-delay: .25s; } .pm-bar.b3 { left: 66%; background: #397BFF; animation-delay: .5s; }
@keyframes bar-sweep { 0%, 100% { transform: translateY(-40%); } 50% { transform: translateY(0); } }
.pm-product .promo-art { background: linear-gradient(160deg, #162b6a, #0c1124); } .pm-box { position: absolute; left: 50%; top: 22%; width: 44%; aspect-ratio: 3/4; margin-left: -22%; border-radius: 14px; background: linear-gradient(150deg, #55D6E8, #397BFF); box-shadow: 0 20px 40px rgba(0,0,0,.4); animation: box-bounce 3s ease-in-out infinite; }
@keyframes box-bounce { 50% { transform: translateY(-12px) rotate(-3deg); } }
.pm-tag { position: absolute; top: 12%; right: 10%; padding: 6px 12px; border-radius: 999px; background: var(--peach); color: #2a0d0a; font-weight: 700; font-size: 13px; animation: tag-flip 4s ease-in-out infinite; } @keyframes tag-flip { 50% { transform: rotate(8deg) scale(1.1); } }
.pm-cart { position: absolute; left: 12%; right: 12%; bottom: 8%; padding: 10px; border-radius: 12px; background: #fff; color: #111; font-weight: 700; font-size: 13px; text-align: center; animation: cta-glow 2.4s ease-in-out infinite; } @keyframes cta-glow { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.2); } }
.pm-food .promo-art { background: radial-gradient(circle at 50% 35%, #4a2d6e, #14183a 72%); }
.pm-local .promo-art { background: linear-gradient(160deg, #0d2a5e, #0c1124); } .pm-pin { position: absolute; left: 50%; top: 30%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50% 50% 50% 0; background: var(--peach); transform: rotate(-45deg); animation: pin-drop 2.8s var(--ease-out) infinite; } .pm-pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #2a0d0a; }
@keyframes pin-drop { 0% { transform: translateY(-60px) rotate(-45deg); opacity: 0; } 25%, 100% { transform: translateY(0) rotate(-45deg); opacity: 1; } }
.pm-ripple { position: absolute; left: 50%; top: 44%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 2px solid var(--peach); border-radius: 50%; animation: ripple 2.8s ease-out infinite; } @keyframes ripple { 0%, 25% { transform: scale(.2); opacity: 0; } 40% { opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.pm-lead .promo-art { background: linear-gradient(160deg, #1d1659, #0c1124); } .pm-form { position: absolute; left: 12%; right: 12%; top: 16%; display: grid; gap: 10px; } .pm-form i { height: 26px; border-radius: 8px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; } .pm-form i::after { content: ""; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #397BFF, #A78BFA); animation: fill-in 4s ease-in-out infinite; } .pm-form i:nth-child(2)::after { animation-delay: .5s; } .pm-form i:nth-child(3)::after { animation-delay: 1s; }
@keyframes fill-in { 0%, 8% { width: 0; } 35%, 85% { width: 78%; } 100% { width: 0; } }
.pm-form em { font-style: normal; text-align: center; padding: 10px; border-radius: 10px; background: var(--lime); color: #fff; font-weight: 700; font-size: 13px; }
.pm-check { position: absolute; left: 50%; bottom: 10%; width: 46px; height: 46px; margin-left: -23px; display: grid; place-items: center; border-radius: 50%; background: #55D6E8; color: #072; animation: check-pop 4s ease-in-out infinite; } .pm-check .icon { width: 24px; height: 24px; color: #04212a; } @keyframes check-pop { 0%, 55% { transform: scale(0); } 70%, 90% { transform: scale(1); } 100% { transform: scale(0); } }

/* ---------- ROI matrix (CSS 3D) ---------- */
.roi { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
.roi-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.roi-scene-wrap { position: relative; padding: 26px 26px 20px; border: 1px solid var(--line-2); border-radius: 28px; background: radial-gradient(circle at 70% 0%, rgba(57,123,255,.2), transparent 60%), var(--surface); }
.roi-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .roi-note { font-size: 12px; color: var(--faint); }
.roi-trend { position: absolute; left: 8%; right: 8%; top: 70px; height: 34%; width: 84%; pointer-events: none; z-index: 2; } .roi-trend-path { stroke-dasharray: 520; stroke-dashoffset: 520; }
.roi-scene-wrap.is-in .roi-trend-path { animation: draw 2.4s var(--ease-out) .6s forwards; }
.roi-scene { display: flex; justify-content: space-around; align-items: flex-end; height: 320px; margin-top: 26px; perspective: 900px; perspective-origin: 50% 20%; padding-bottom: 12px; }
.bar3d { position: relative; width: 44px; height: 0; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-30deg); transition: height 1.3s var(--ease-out), filter .3s; transition-delay: calc(var(--d) * 140ms); cursor: pointer; }
.roi-scene-wrap.is-in .bar3d { height: calc(var(--h) * 2.7px); }
.bar3d span { position: absolute; display: block; }
.bar3d .f { inset: 0; transform: translateZ(22px); background: linear-gradient(180deg, #55D6E8, #397BFF); }
.bar3d .r { left: 0; top: 0; width: 44px; height: 100%; transform-origin: right center; transform: translateZ(22px) rotateY(-90deg); background: linear-gradient(180deg, #2c5fd0, #1a3a8a); }
.bar3d .t { left: 0; top: 0; width: 44px; height: 44px; transform-origin: center top; transform: translateZ(22px) rotateX(-90deg); background: #a9c6ff; }
.bar3d.b-spend .f { background: linear-gradient(180deg, #FF9B91, #e5675c); } .bar3d.b-spend .r { background: linear-gradient(180deg, #c9554b, #7d2a24); } .bar3d.b-spend .t { background: #ffd0cb; }
.bar3d.b-order .f { background: linear-gradient(180deg, #A78BFA, #6a4bdc); } .bar3d.b-order .r { background: linear-gradient(180deg, #5a3ec0, #33227a); } .bar3d.b-order .t { background: #d9ccff; }
.bar3d.is-hot, .bar3d:hover { filter: brightness(1.25) drop-shadow(0 0 16px rgba(85,214,232,.7)); }
.roi-labels { display: flex; justify-content: space-around; margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; } .roi-labels span { width: 20%; }
.roi-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .3s, transform .4s var(--ease); outline: none; }
.metric span { display: block; font-size: 12.5px; color: var(--muted); } .metric b { display: block; margin-top: 4px; font: 600 clamp(22px, 2.3vw, 30px) var(--font-display); letter-spacing: -.03em; }
.metric.is-hot, .metric:hover, .metric:focus-visible { border-color: var(--lime); transform: translateY(-3px); box-shadow: var(--glow); }
.roi-foot { grid-column: 1 / -1; font-size: 12.5px; color: var(--faint); }

/* ---------- 3D engines ---------- */
.engines { position: relative; padding-block: clamp(40px, 6vw, 90px); }
.engines-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.engines-stage { position: sticky; top: 90px; height: min(78vh, 640px); border-radius: 32px; border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 40%, rgba(57,123,255,.2), transparent 65%), var(--bg-2); overflow: hidden; }
.engines-canvas { width: 100%; height: 100%; display: block; }
.engines-fallback { display: none; position: absolute; inset: 0; place-items: center; grid-auto-flow: column; gap: 22px; color: var(--lime); } .engines-fallback .icon { width: 56px; height: 56px; opacity: .8; }
.engines.no-webgl .engines-fallback { display: grid; } .engines.no-webgl .engines-canvas { display: none; }
.engines-tag { position: absolute; left: 20px; bottom: 20px; right: 20px; height: 34px; } .engines-tag span { position: absolute; left: 0; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.engines[data-active="0"] .et-0, .engines[data-active="1"] .et-1, .engines[data-active="2"] .et-2, .engines[data-active="3"] .et-3 { opacity: 1; transform: none; }
.engines-panels { display: grid; gap: 0; }
.engine { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px 0; opacity: .45; transition: opacity .5s; } .engine.is-current { opacity: 1; }
.engine-intro { min-height: 56vh; } .engine-intro p { color: var(--muted); max-width: 40ch; }
.engine h3 { font-size: clamp(30px, 3.6vw, 48px); } .engine > p { color: var(--muted); max-width: 46ch; font-size: 17px; }
.engine-num { font: 600 13px var(--font-display); color: var(--lime); letter-spacing: .14em; } .engine-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- flows + USP ---------- */
.flow { position: relative; display: flex; justify-content: space-between; gap: 6px; margin: 22px 0; padding-top: 4px; }
.flow::before { content: ""; position: absolute; left: 24px; right: 24px; top: 28px; height: 2px; background: linear-gradient(90deg, var(--lime), var(--violet), var(--cyan)); opacity: .45; }
.flow li { position: relative; flex: 1; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 11.5px; color: var(--muted); }
.flow-node { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--lime); animation: node-glow 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); } .flow-node .icon { width: 22px; height: 22px; }
@keyframes node-glow { 0%, 70%, 100% { box-shadow: none; border-color: var(--line-2); } 15% { box-shadow: 0 0 24px rgba(57,123,255,.65); border-color: var(--lime); } }
.flow-dot { position: absolute; top: 24px; left: 24px; width: 10px; height: 10px; margin-top: 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: flow-run 4.8s linear infinite; }
@keyframes flow-run { from { left: 24px; } to { left: calc(100% - 24px); } }
.flow-mini { margin: 10px 0 0; } .flow-mini .flow-node { width: 38px; height: 38px; border-radius: 12px; } .flow-mini::before { top: 23px; }
.flow-mini .flow-dot { top: 19px; }
.flow-wide { margin: 30px 0 6px; } .flow-wide li { font-size: 13px; color: var(--text); }
.usp-head { max-width: 720px; margin-bottom: 40px; } .usp-head h2 { font-size: clamp(34px, 4.6vw, 60px); margin-top: 16px; } .usp-head p { margin-top: 16px; color: var(--muted); }
.usp { background: radial-gradient(900px circle at 85% 10%, rgba(167,139,250,.14), transparent 55%), transparent; }
.usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.usp-card { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-2); border-radius: 28px; background: linear-gradient(150deg, var(--surface-2), var(--surface)); display: grid; gap: 4px; justify-items: start; }
.usp-card h3 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 14px; } .usp-card .flow { width: 100%; }
.usp-tag { padding: 6px 14px; border-radius: 999px; background: rgba(57,123,255,.15); border: 1px solid rgba(57,123,255,.4); color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.usp-card-alt .usp-tag { background: rgba(167,139,250,.15); border-color: rgba(167,139,250,.45); color: var(--violet); }
.usp-note { margin-top: 22px; color: var(--faint); font-size: 13.5px; }
.usp-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 30px 34px; } .usp-strip h3 { font-size: 26px; margin: 8px 0 4px; } .usp-strip p { color: var(--muted); }

/* ---------- pricing page ---------- */
.pricing-intro { max-width: 820px; } .pricing-intro h2 { font-size: clamp(36px, 5vw, 66px); margin: 16px 0; } .pricing-intro p { color: var(--muted); font-size: 18px; max-width: 60ch; }
.price-panel { grid-template-columns: 1.4fr .6fr; align-items: start; } .price-main h3 { font-size: clamp(28px, 3.2vw, 42px); } .price-main > p { margin-top: 12px; color: var(--muted); max-width: 56ch; } .price-side h4 { font: 600 20px var(--font-display); }
.pcalc-mode { display: flex; gap: 10px; flex-wrap: wrap; }
.track-board { padding: clamp(22px, 3vw, 36px); } .track-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; font-weight: 600; }
.track-stages { display: grid; gap: 14px; } .track-row { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: center; font-size: 14px; color: var(--muted); }
.track-row i { display: block; height: 14px; border-radius: 8px; background: var(--grad); width: 0; transition: width 1.4s var(--ease-out); } .track-board.is-in .track-row i { width: var(--w); }
.resp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .resp-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .resp-card h3 { font-size: 22px; } .resp-card p { margin-top: 12px; color: var(--muted); } .resp-note { border-style: dashed; border-color: color-mix(in srgb, var(--peach) 60%, transparent); }
.compare { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--line); } .cmp-row:last-child { border-bottom: 0; } .cmp-row > * { padding: 18px 20px; margin: 0; font-size: 14.5px; } .cmp-row > span { color: var(--faint); font-weight: 600; } .cmp-row p { color: var(--muted); } .cmp-head b { font: 600 16px var(--font-display); } .cmp-row .hl { background: rgba(57,123,255,.07); }

/* ---------- service hero visuals ---------- */
.page-hero-inner.has-visual { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 5vw, 70px); justify-items: stretch; }
.page-hero-copy { display: grid; gap: 18px; justify-items: start; }
.page-hero-visual { position: relative; min-height: 400px; display: grid; place-items: center; }
.vis { position: relative; width: 100%; min-height: 400px; display: grid; place-items: center; }
.float-card { position: absolute; z-index: 3; padding: 14px 16px; min-width: 150px; font-size: 12px; } .float-card small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
[data-float] { animation: float 7s ease-in-out infinite; } [data-float]:nth-of-type(2) { animation-delay: -2s; } [data-float]:nth-of-type(3) { animation-delay: -4s; }
.fc-1 { top: 6%; right: -2%; } .fc-2 { bottom: 8%; right: -4%; } .fc-journey { bottom: 2%; left: 0; width: 280px; } .fc-track { right: 0; bottom: 10%; } .fc-cal { left: -2%; bottom: 4%; } .fc-rank { right: -2%; bottom: 0; } .pr-1 { top: 4%; left: 0; width: 300px; } .pr-2 { bottom: 4%; right: 0; width: 300px; }
.chip-demo { bottom: -4px; left: 50%; transform: translateX(-50%); animation: none; font-size: 11px; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; max-width: 170px; } .tagcloud span { padding: 4px 9px; border-radius: 999px; background: rgba(57,123,255,.18); color: var(--text); font-size: 10.5px; }
.float-card svg { width: 130px; height: 44px; } .draw { stroke-dasharray: 200; animation: draw 3s ease-in-out infinite alternate; }
.browser { width: min(100%, 440px); border-radius: 16px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); } .browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF9B91; } .browser-bar i:nth-child(2) { background: #A78BFA; } .browser-bar i:nth-child(3) { background: #55D6E8; } .browser-bar span { margin-left: 10px; flex: 1; padding: 4px 12px; border-radius: 999px; background: var(--surface); font-size: 11px; color: var(--muted); }
.vis-google .browser { padding-bottom: 0; } .vis-google .serp { box-shadow: none; border-radius: 0; width: 100%; }
.kw-net { position: absolute; left: -2%; top: 2%; width: 62%; opacity: .9; } .kw-nodes circle { fill: var(--cyan); animation: node-pulse 3s ease-in-out infinite; } .kw-nodes circle:nth-child(2n) { animation-delay: -1s; fill: var(--violet); } @keyframes node-pulse { 50% { opacity: .35; } }
.vis-seo .seo-card { width: min(100%, 400px); padding: 18px; } .seo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .seo-head small { margin: 0; } .seo-card svg { width: 100%; height: auto; } .kw-net-seo { top: auto; bottom: 0; left: -6%; width: 55%; opacity: .6; }
.rank { display: grid; gap: 6px; font-size: 11.5px; } .rank li { display: flex; gap: 8px; align-items: center; } .rank span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--cyan); color: #04212a; font-weight: 700; font-size: 11px; }
.player { width: min(100%, 420px); border-radius: 16px; overflow: hidden; background: #05070f; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.4); } .player-screen { aspect-ratio: 16/9; } .player-screen .your-ad-badge { position: absolute; top: 10px; right: 10px; } .player-screen .rep { inset: auto 20% 20% 20%; }
.player-bar { height: 4px; background: rgba(255,255,255,.15); } .player-bar i { display: block; height: 100%; width: 0; background: #FF9B91; animation: story-bar 15s linear infinite; } @keyframes story-bar { to { width: 100%; } }
.player-row { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 12px; color: #cdd3e6; } .skip { padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.12); }
.meter { height: 8px; width: 140px; border-radius: 8px; background: var(--line-2); overflow: hidden; } .meter i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--grad); animation: meter-grow 3s var(--ease-out) infinite alternate; } @keyframes meter-grow { from { width: 10%; } }
.funnel { width: min(100%, 340px); filter: drop-shadow(0 20px 40px rgba(57,123,255,.35)); } .fdots circle { fill: #fff; animation: fall 3.2s ease-in infinite; } .fdots circle:nth-child(2) { animation-delay: 1s; } .fdots circle:nth-child(3) { animation-delay: 2s; } @keyframes fall { 0% { transform: translateY(15px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(230px); opacity: 0; } }
.tracker { display: grid; gap: 8px; font-size: 12px; } .tracker li { display: flex; align-items: center; gap: 8px; color: var(--muted); } .tracker i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); } .tracker li.on { color: var(--text); } .tracker li.on i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.vis-social .post { position: absolute; width: 150px; padding: 8px; border-radius: 18px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); } .post .creative { border-radius: 12px; } .post-row { display: flex; align-items: center; gap: 6px; padding: 8px 4px 2px; font-size: 12px; } .post-row .icon { width: 16px; height: 16px; color: var(--peach); }
.post-1 { left: 6%; top: 8%; transform: rotate(-6deg); } .post-2 { left: 36%; top: 26%; z-index: 2; width: 170px; } .post-3 { right: 4%; top: 6%; transform: rotate(6deg); }
.cal { display: grid; grid-template-columns: repeat(7, 14px); gap: 5px; } .cal i { height: 14px; border-radius: 4px; background: var(--line-2); } .cal i.on { background: var(--lime); box-shadow: 0 0 10px rgba(57,123,255,.6); }
.vis-web .browser-main { position: relative; z-index: 2; } .browser-back { position: absolute; width: 300px; left: -2%; top: 4%; opacity: .7; transform: rotate(-5deg); z-index: 1; } .phone-mini { position: absolute; width: 130px; right: 0; bottom: 0; padding: 6px; border-radius: 24px; z-index: 3; } .phone-mini .phone-notch { width: 40px; height: 10px; margin-left: -20px; top: 9px; }
.site-mock { padding: 12px; display: grid; gap: 10px; background: var(--bg-3); } .sm-nav { display: flex; gap: 8px; align-items: center; } .sm-nav i { width: 22px; height: 8px; border-radius: 4px; background: var(--lime); } .sm-nav span { width: 30px; height: 6px; border-radius: 4px; background: var(--line-2); }
.sm-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; } .sm-h { display: block; height: 10px; border-radius: 5px; background: var(--text); opacity: .85; margin-bottom: 6px; } .sm-h.short { width: 60%; } .sm-btn { display: block; width: 50px; height: 16px; border-radius: 8px; background: var(--grad); margin-top: 8px; } .sm-art { height: 70px; border-radius: 12px; background: linear-gradient(135deg, #397BFF, #A78BFA 60%, #FF9B91); animation: shape-drift 6s ease-in-out infinite; }
.sm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sm-cards i { height: 44px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); } .sm-hero-m { grid-template-columns: 1fr; padding-top: 14px; } .sm-cards-m { grid-template-columns: 1fr 1fr; }
.store { width: min(100%, 420px); padding: 16px; border-radius: 20px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); } .store-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .store-bar span { position: relative; } .store-bar em { position: absolute; top: -8px; right: -10px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: #2a0d0a; font: 700 10px var(--font-body); animation: cta-glow 2s infinite; }
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .product { padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; transition: transform .4s var(--ease), border-color .3s; } .product:hover { transform: translateY(-4px); border-color: var(--lime); } .p-img { display: block; aspect-ratio: 4/3; border-radius: 10px; margin-bottom: 6px; background: linear-gradient(140deg, #55D6E8, #A78BFA); } .product:nth-child(2) .p-img { background: linear-gradient(140deg, #FF9B91, #A78BFA); } .product:nth-child(3) .p-img { background: linear-gradient(140deg, #397BFF, #55D6E8); } .product b { display: block; } .product small { color: var(--muted); }
.dash-mini { width: min(100%, 380px); padding: 20px; } .dash-mini small { display: block; margin-bottom: 14px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mod-bars { display: grid; gap: 10px; margin-bottom: 14px; } .mod-bars div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); } .mod-bars i { display: block; height: 10px; border-radius: 8px; background: var(--grad); width: var(--w); animation: meter-grow 3.4s var(--ease-out) infinite alternate; }
.learn-tabs .tab-panel { grid-template-columns: 1.1fr .9fr; }
.chat-card { width: min(100%, 360px); padding: 18px; display: grid; gap: 10px; } .chat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .chat-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .chat-head small { margin-left: auto; color: var(--muted); font-size: 11px; }
.bub { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; opacity: 0; animation: bub-in .6s var(--ease-out) forwards; } .bub.in { background: var(--surface-2); border-bottom-left-radius: 4px; } .bub.out { margin-left: auto; background: var(--lime); color: #fff; border-bottom-right-radius: 4px; animation-delay: .9s; } .bub.typing { display: flex; gap: 4px; animation-delay: 1.8s; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing-dot 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bub-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes typing-dot { 50% { transform: translateY(-4px); opacity: .4; } }
.vis-orbit { width: 300px; height: 300px; position: relative; display: grid; place-items: center; } .vis-orbit i { position: absolute; border: 1px solid rgba(57,123,255,.4); border-radius: 50%; animation: ring-pulse 4s ease-in-out infinite; } .vis-orbit i:nth-child(1) { inset: 0; } .vis-orbit i:nth-child(2) { inset: 18%; animation-delay: -1.3s; } .vis-orbit i:nth-child(3) { inset: 36%; animation-delay: -2.6s; } .vis-orbit span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--lime); color: #fff; box-shadow: 0 0 50px rgba(57,123,255,.6); } .vis-orbit span .icon { width: 32px; height: 32px; }
.vis-pricing { min-height: 360px; } .vis-pricing .float-card { position: relative; width: 300px; } .vis-pricing { display: grid; gap: 18px; align-content: center; justify-items: center; } .vis-pricing .pr-1 { left: auto; top: auto; } .vis-pricing .pr-2 { right: auto; bottom: auto; margin-left: 40px; }

/* ---------- case studies ---------- */
.case-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .case-metrics .metric b { font-size: 34px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-meta { display: flex; gap: 10px; flex-wrap: wrap; } .case-meta span, .case-chips span { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--muted); }
.case-chips { display: flex; gap: 8px; flex-wrap: wrap; } .case-chips span { font-size: 12px; } .case-chips b { color: var(--lime); }
.case-card { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }

/* ---------- contact interface ---------- */
.iface-bar { display: flex; align-items: center; gap: 7px; margin: -8px 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .iface-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF9B91; } .iface-bar i:nth-child(2) { background: #A78BFA; } .iface-bar i:nth-child(3) { background: #55D6E8; } .iface-bar span { margin-left: 10px; font-size: 12px; color: var(--faint); } .iface-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; } .live em { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: badge-pulse 2s infinite; }

/* ---------- footer vortex, header polish, page transitions ---------- */
.footer-vortex { z-index: 0; opacity: .55; } .site-footer .container { position: relative; z-index: 1; }
.site-header.is-scrolled { box-shadow: 0 10px 40px rgba(0,0,0,.25); } .site-header.is-scrolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(57,123,255,.6), rgba(167,139,250,.6), transparent); }
.nav-cta { background: var(--grad); background-size: 140% 100%; } .button { background: var(--lime); } .button:hover { background: var(--lime); }
body { animation: page-in .7s var(--ease-out) both; } body.is-leaving { opacity: 0; transition: opacity .28s ease; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) {
  .ad-panel, .roi-layout, .engines-layout, .usp-grid, .price-panel, .learn-tabs .tab-panel, .resp-grid { grid-template-columns: 1fr; }
  .page-hero-inner.has-visual { grid-template-columns: 1fr; } .page-hero-visual, .vis { min-height: 340px; }
  .engines-stage { position: sticky; top: 72px; height: 36vh; z-index: 2; border-radius: 22px; } .engine { min-height: 50vh; } .engine-intro { min-height: 40vh; }
  .track-row { grid-template-columns: 1fr; gap: 6px; } .cmp-row { grid-template-columns: 1fr 1fr 1fr 1fr; } .cmp-row > * { padding: 12px 10px; font-size: 12.5px; }
  .ad-stage { min-height: 420px; } .roi-scene { height: 260px; }
}
@media (max-width: 640px) {
  .promo-grid { grid-template-columns: 1fr 1fr; } .roi-metrics { grid-template-columns: 1fr 1fr; } .float-card { transform: scale(.85); transform-origin: right bottom; }
  .flow li { font-size: 10px; } .flow-node { width: 40px; height: 40px; } .flow::before { top: 24px; } .flow-dot { top: 20px; }
  .vis-social .post { width: 110px; } .post-2 { width: 124px; } .browser-back { display: none; } .phone { width: 220px; } .page-hero-visual { overflow: hidden; }
  .cmp-row { grid-template-columns: 1fr; } .cmp-head { display: none; } .cmp-row > span { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; } .bar3d { transition: none; } .roi-scene-wrap .bar3d { height: calc(var(--h) * 2.7px); } .roi-trend-path { stroke-dashoffset: 0; } .track-row i { width: var(--w); }
  .engine { opacity: 1; } .cr-text i, .pm-text span { animation: none; } .cr-text i:first-child, .pm-text span:first-child { opacity: 1; } .type-line { width: 100%; animation: none; } .bub { opacity: 1; animation: none; }
}

/* grid blow-out guards */
.page-body { grid-template-columns: minmax(0, 1fr); }
.page-body > *, .tabs, .tab-panel > *, .ad-panel > *, .usp-grid > *, .roi-layout > *, .engines-layout > * { min-width: 0; }
.fc-1 { top: -2%; right: -10%; } .fc-2 { bottom: 4%; right: -12%; }
@media (max-width: 920px) { .fc-1 { right: 0; top: -4%; } .fc-2 { right: 0; } }
/* ==========================================================================
   v2.2 — Marketing tools, desktop tightening, AWEBZONE mobile experience
   ========================================================================== */

/* ---------- desktop tightening ---------- */
.section { padding-block: clamp(52px, 6.5vw, 96px); }
.page-body { gap: clamp(36px, 5vw, 72px); padding-block: clamp(36px, 5vw, 72px); }
.m-only { display: none; }

/* ---------- home tool teasers ---------- */
.tool-teasers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-teaser { display: grid; gap: 10px; align-content: start; padding: 26px; transition: transform .4s var(--ease), border-color .3s; }
.tool-teaser:hover { transform: translateY(-5px); border-color: var(--lime); }
.tool-teaser h3 { font-size: 20px; } .tool-teaser p { color: var(--muted); font-size: 14.5px; }
.tt-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--lime) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent); color: var(--lime); }
.tt-icon .icon { width: 22px; height: 22px; }
.tools-more { margin-top: 28px; text-align: center; }

/* ---------- marketing tools page ---------- */
.tools-wrap { display: grid; gap: 28px; }
.tools-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .tools-intro p { color: var(--muted); max-width: 62ch; }
.tools-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.tools-nav { position: sticky; top: 96px; display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); }
.tools-group { display: grid; gap: 4px; } .tools-group h2 { margin: 0 0 6px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tool-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: 500 14px var(--font-body); text-align: left; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tool-pick .icon { width: 18px; height: 18px; flex: none; color: var(--lime); }
.tool-pick:hover { background: var(--surface-2); color: var(--text); }
.tool-pick[aria-pressed="true"] { background: color-mix(in srgb, var(--lime) 14%, transparent); border-color: color-mix(in srgb, var(--lime) 45%, transparent); color: var(--text); }
.tool-stage { padding: clamp(20px, 3vw, 36px); min-height: 460px; }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .t-head h2 { font-size: clamp(24px, 2.6vw, 34px); } .t-head p { margin-top: 8px; color: var(--muted); max-width: 56ch; font-size: 15px; }
.t-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.t-form { display: grid; gap: 14px; }
.tf label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.tf-in { position: relative; display: flex; align-items: center; }
.tf-in input, .tf-in select, .tf-in textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; transition: border-color .25s, box-shadow .25s; }
.tf-in input:focus, .tf-in select:focus, .tf-in textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); }
.tf-in i { position: absolute; left: 14px; font-style: normal; color: var(--faint); pointer-events: none; } .tf-in i:first-child + input { padding-left: 30px; } .tf-in input + i { left: auto; right: 14px; }
.tf-in input[type=number] { -moz-appearance: textfield; } .tf-in input::-webkit-outer-spin-button, .tf-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-btn { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; transition: border-color .25s, background .25s; } .t-btn:hover { border-color: var(--lime); } .t-btn-sm { padding: 6px 12px; flex: none; }
.t-out { display: grid; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.t-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .t-tile span { display: block; font-size: 12.5px; color: var(--muted); } .t-tile b { display: block; margin-top: 4px; font: 600 clamp(18px, 2vw, 24px) var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.t-tile.main { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--lime) 55%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); } .t-tile.main b { font-size: clamp(28px, 3.4vw, 40px); } .t-tile.bad b { color: var(--peach); }
.t-bars { display: grid; gap: 8px; } .t-bar { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); } .t-bar i { display: block; height: 10px; width: var(--w); min-width: 3px; border-radius: 8px; background: var(--grad); transform-origin: left; animation: t-grow .7s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); } .t-bar b { color: var(--text); font-weight: 600; }
@keyframes t-grow { from { transform: scaleX(0); } }
.t-foot { color: var(--faint); font-size: 12px; }
.t-note { color: var(--muted); font-size: 14px; } .t-sub { font: 600 15px var(--font-body); letter-spacing: 0; margin-top: 4px; }
.t-empty { color: var(--faint); } .t-err { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--peach) 60%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--peach) 10%, transparent); color: var(--peach); font-size: 14px; }
.t-lines { display: grid; gap: 8px; } .t-lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; } .t-lines li span { overflow-wrap: anywhere; min-width: 0; }
.t-ai-off { display: grid; gap: 12px; justify-items: start; padding: 22px; border: 1px dashed var(--line-2); border-radius: 16px; } .t-ai-off p { color: var(--muted); } .t-admin { font-size: 13px; } .t-admin code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }
.t-ai-text { margin: 0; white-space: pre-wrap; font: 14.5px/1.6 var(--font-body); color: var(--text); }
.tools-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 32px; } .tools-cta h3 { font-size: 24px; } .tools-cta p { color: var(--muted); margin-top: 6px; }

@media (max-width: 1100px) { .tool-teasers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .tools-layout { grid-template-columns: 1fr; }
  .tools-nav { position: static; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 12px; }
  .tools-group { display: flex; gap: 6px; align-items: center; flex: none; } .tools-group h2 { display: none; } .tool-pick { white-space: nowrap; border-color: var(--line); }
  .t-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   MOBILE — AWEBZONE Marketing Social Experience (<= 760px)
   ====================================================================== */
.m-nav { display: none; }
.story-viewer[hidden] { display: none; }

@media (max-width: 760px) {
  :root { --m-nav-h: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .d-only { display: none !important; } .m-only { display: block; }
  body { padding-bottom: var(--m-nav-h); }
  .mobile-bar { display: none !important; }
  .announce-bar { display: none; }
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .whatsapp-float { bottom: calc(var(--m-nav-h) + 14px); right: 14px; height: 48px; padding: 0 13px; } .whatsapp-float .wa-tip { display: none; }
  .site-footer { padding-bottom: 24px; } .footer-wordmark { display: none; }
  .tool-teasers { grid-template-columns: 1fr; } .tools-intro { align-items: flex-start; } .t-tiles { grid-template-columns: 1fr 1fr; } .t-bar { grid-template-columns: 84px 1fr auto; } .tools-cta { padding: 22px; }
.page-body { padding-block: 28px; gap: 36px; }

  /* bottom navigation */
  .m-nav { position: fixed; z-index: 170; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
  .m-nav-item { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 14px; color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; min-height: 48px; transition: color .25s; }
  .m-nav-item .icon { width: 22px; height: 22px; transition: transform .3s var(--ease); }
  .m-nav-item.is-active { color: var(--text); } .m-nav-item.is-active .icon { color: var(--lime); transform: translateY(-2px) scale(1.08); }
  .m-nav-item.is-active::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 4px 4px; background: var(--grad); }
  .m-nav-item[data-nav="showcase"] .icon { color: var(--peach); }

  /* home */
  .m-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 6px 0 20px; overflow-x: clip; }
  .m-home > section { min-width: 0; padding-inline: 16px; scroll-margin-top: 64px; }
  .m-h { font: 600 18px var(--font-display); letter-spacing: -.01em; margin: 0 0 12px; }
  .m-intro { position: relative; display: grid; gap: 14px; padding: 26px 16px 8px; margin-inline: 0; }
  .m-intro::before { content: ""; position: absolute; inset: -40px -20px auto; height: 280px; background: radial-gradient(60% 70% at 20% 0%, rgba(57,123,255,.35), transparent 70%), radial-gradient(50% 60% at 90% 10%, rgba(167,139,250,.28), transparent 70%); pointer-events: none; z-index: -1; }
  .m-kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
  .m-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
  .m-intro h1 { font-size: clamp(34px, 10.4vw, 46px); line-height: 1.04; } .m-intro h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .m-intro p { color: var(--muted); font-size: 16px; } .m-intro-cta { display: flex; gap: 10px; flex-wrap: wrap; } .m-intro-cta .button { flex: 1 1 auto; justify-content: center; min-height: 48px; }

  /* stories rail */
  .m-stories { padding-inline: 0 !important; } .m-stories .m-h { padding-inline: 16px; }
  .m-rail { display: flex; gap: 14px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .m-rail::-webkit-scrollbar, .m-hscroll::-webkit-scrollbar { display: none; }
  .m-story-btn { flex: none; display: grid; justify-items: center; gap: 7px; width: 74px; padding: 0; border: 0; background: none; color: var(--text); scroll-snap-align: start; cursor: pointer; }
  .m-ring { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(from 200deg, #397BFF, #A78BFA, #FF9B91, #55D6E8, #397BFF); padding: 3px; animation: ring-spin 9s linear infinite; }
  .m-ring-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--bg); animation: ring-spin 9s linear infinite reverse; } .m-ring-in .icon { width: 26px; height: 26px; color: var(--lime); }
  @keyframes ring-spin { to { transform: rotate(360deg); } }
  .m-story-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; color: var(--muted); }

  /* goals */
  .m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-chip { padding: 11px 16px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 14px var(--font-body); cursor: pointer; transition: background .25s, border-color .25s; }
  .m-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--lime) 20%, transparent); border-color: var(--lime); }
  .m-goal-out { display: grid; gap: 10px; margin-top: 14px; } .m-hint { color: var(--faint); font-size: 13.5px; }
  .m-suggest { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); animation: bub-in .5s var(--ease-out) both; } .m-suggest b { font: 600 16px var(--font-display); } .m-suggest span { color: var(--muted); font-size: 13.5px; }

  /* reels */
  .m-reels-head { display: flex; justify-content: space-between; align-items: center; } .m-reels-head .m-h { margin: 0; }
  .m-reel-track { height: min(74vh, 600px); margin-top: 12px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; border-radius: 26px; border: 1px solid var(--line-2); scrollbar-width: none; background: var(--bg-2); }
  .m-reel-track::-webkit-scrollbar { display: none; } .m-reel-track:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
  .m-reel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: grid; }
  .m-reel-art { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px 22px 150px; background: radial-gradient(70% 55% at 50% 30%, rgba(57,123,255,.35), transparent 70%), radial-gradient(60% 50% at 80% 90%, rgba(167,139,250,.3), transparent 70%), var(--bg-2); }
  .m-reel-art > * { width: min(100%, 300px); }
  .m-reel:not(.is-active) .m-reel-art * { animation-play-state: paused !important; }
  .m-reel-rail { position: absolute; right: 12px; bottom: 22px; display: grid; gap: 14px; z-index: 3; }
  .m-act { display: grid; justify-items: center; gap: 3px; width: 48px; padding: 8px 0; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(10px); color: var(--text); font: 600 10px var(--font-body); cursor: pointer; }
  .m-act .icon { width: 20px; height: 20px; } .m-act[aria-pressed="true"] { border-color: var(--peach); color: var(--peach); } .m-act[aria-pressed="true"] .icon { fill: currentColor; }
  .m-reel-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 54px 16px 18px; background: linear-gradient(0deg, rgba(8,11,24,.92) 40%, transparent); z-index: 2; }
  .m-reel-cap h3 { font-size: 22px; color: #fff; } .m-reel-cap p { color: rgba(255,255,255,.78); font-size: 14px; padding-right: 64px; }
  .m-count { width: fit-content; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 600; }
  .m-reel-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; padding: 11px 18px; min-height: 44px; border-radius: 999px; background: #fff; color: #080B18; font-weight: 700; font-size: 14px; } .m-reel-link .icon { width: 16px; height: 16px; }
  .m-reel-art .creative { border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.4); } .m-reel-art .serp-bar { background: #fff; color: #111; } .m-reel-art .serp-ad { background: #fff; }
  .mr-lead, .mr-store, .mr-local, .mr-search { position: relative; display: grid; gap: 14px; } .mr-lead { padding: 26px 22px 44px; border-radius: 22px; background: linear-gradient(160deg, #1d1659, #0c1124); border: 1px solid var(--line-2); } .mr-lead .pm-form { position: static; } .mr-lead .pm-check { position: absolute; bottom: -6px; }
  .mr-store { padding: 16px; border-radius: 22px; background: var(--bg-3); border: 1px solid var(--line-2); } .mr-store .pm-cart { position: static; }
  .mr-local { min-height: 300px; place-items: center; border-radius: 22px; background: linear-gradient(160deg, #0d2a5e, #0c1124); border: 1px solid var(--line-2); } .mr-local .pm-pin { top: 38%; } .mr-local .pm-text { bottom: 14%; }
  .mr-search { padding: 18px; border-radius: 22px; background: var(--bg-3); border: 1px solid var(--line-2); }

  /* growth */
  .m-funnel { display: grid; gap: 8px; } .m-f-step { position: relative; width: var(--w); min-height: 46px; margin-inline: auto; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text); font: 600 15px var(--font-body); text-align: center; cursor: pointer; transition: background .25s, border-color .25s; }
  .m-f-step[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #05101f; }
  .m-f-text { margin: 0 4px 2px; color: var(--muted); font-size: 14px; text-align: center; }
  .m-perf { display: grid; gap: 14px; margin-top: 26px; padding: 18px; border: 1px solid var(--line-2); border-radius: 22px; background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
  .m-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); } .m-seg button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer; } .m-seg button[aria-pressed="true"] { background: var(--lime); color: #fff; }
  .m-perf-body { display: grid; gap: 12px; } .m-perf-body p { color: var(--muted); font-size: 14.5px; } .m-perf-body b { color: var(--text); }
  .m-ticks { display: grid; gap: 8px; font-size: 14px; } .m-ticks li { display: flex; gap: 10px; align-items: flex-start; } .m-ticks .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--cyan); }
  .m-fine { font-size: 12.5px !important; color: var(--faint) !important; }
  .m-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--lime); } .m-link .icon { width: 16px; height: 16px; }

  /* work + tools */
  .m-work, .m-tools { padding-inline: 0 !important; } .m-work .m-h, .m-tools .m-h { padding-inline: 16px; }
  .m-hscroll { display: flex; gap: 12px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .m-case { flex: none; width: 78%; max-width: 300px; display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); scroll-snap-align: start; } .m-case h3 { font-size: 17px; } .m-case p { color: var(--muted); font-size: 13.5px; }
  .m-case-img { display: block; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; } .m-case-img img { width: 100%; height: 100%; object-fit: cover; }
  .m-tool { flex: none; display: grid; justify-items: start; gap: 10px; width: 118px; padding: 14px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); font-weight: 600; font-size: 14px; scroll-snap-align: start; } .m-tool .icon { width: 24px; height: 24px; color: var(--lime); }

  /* step enquiry */
  .m-form { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line-2); border-radius: 24px; background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
  .m-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .m-prog i { height: 4px; border-radius: 4px; background: var(--line-2); transition: background .3s; } .m-prog i.on { background: var(--grad); }
  .m-step { display: grid; gap: 14px; } .m-step[hidden] { display: none; } .m-q { font: 600 19px var(--font-display); }
  .m-nav-row { display: flex; gap: 10px; } .m-nav-row .button { flex: 1; justify-content: center; min-height: 48px; } .m-nav-row [hidden] { display: none; }
  .m-form .field input, .m-form .field textarea, .m-form .field select { font-size: 16px; }

  /* story viewer */
  .story-viewer { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto auto 1fr auto; background: radial-gradient(80% 50% at 50% 0%, rgba(57,123,255,.4), transparent 70%), radial-gradient(70% 50% at 100% 100%, rgba(167,139,250,.35), transparent 70%), #080B18; color: #fff; padding-top: env(safe-area-inset-top, 0px); animation: sv-in .35s var(--ease-out); touch-action: pan-y; }
  @keyframes sv-in { from { opacity: 0; transform: scale(.96) translateY(20px); } }
  html.sv-open { overflow: hidden; }
  .sv-bars { display: flex; gap: 5px; padding: 12px 14px 0; } .sv-bars i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
  .sv-bars i.done::after, .sv-bars i.cur::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; }
  .sv-bars i.cur::after { animation: sv-fill linear forwards; } .story-viewer.is-paused .sv-bars i.cur::after { animation-play-state: paused; }
  @keyframes sv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .sv-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; position: relative; z-index: 4; } .sv-head b { font: 600 16px var(--font-display); } .sv-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); } .sv-ico .icon { width: 18px; height: 18px; }
  .sv-close { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
  .sv-body { position: relative; display: grid; align-content: center; padding: 10px 26px; z-index: 1; overflow-y: auto; }
  .sv-slide { display: grid; gap: 18px; animation: bub-in .5s var(--ease-out) both; } .sv-slide h2 { font-size: clamp(28px, 8.4vw, 38px); line-height: 1.1; } .sv-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } .sv-fine { font-size: 12.5px; color: rgba(255,255,255,.6); }
  .sv-list { display: grid; gap: 14px; } .sv-list li { padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.07); font: 600 18px var(--font-display); animation: bub-in .5s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms); }
  .sv-s0 { justify-items: start; } .sv-orb { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 8px; } .sv-orb span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--grad); color: #05101f; box-shadow: 0 0 50px rgba(57,123,255,.6); } .sv-orb .icon { width: 34px; height: 34px; }
  .sv-orb i { position: absolute; inset: 0; border: 1px solid rgba(85,214,232,.5); border-radius: 50%; animation: ring-pulse 3.6s ease-in-out infinite; } .sv-orb i:nth-child(2) { inset: 14%; animation-delay: -1.2s; border-color: rgba(167,139,250,.6); } .sv-orb i:nth-child(3) { inset: 28%; animation-delay: -2.4s; border-color: rgba(255,155,145,.6); }
  .sv-tap { position: absolute; top: 120px; bottom: 100px; width: 38%; border: 0; background: transparent; z-index: 3; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sv-prev { left: 0; } .sv-next { right: 0; }
  .sv-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 4; } .sv-foot .button { justify-content: center; min-height: 50px; }
  .sv-foot .button-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

  /* inner pages on mobile: tighter, visual-first */
  .page-hero-visual { display: none; } .page-hero-inner.has-visual { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: clamp(34px, 10.4vw, 46px); }
  .section { padding-block: 40px; } .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 360px) { .m-nav-item { font-size: 10px; } .m-story-btn { width: 66px; } .m-ring { width: 62px; height: 62px; } .sv-foot { grid-template-columns: 1fr; } .m-intro h1 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .m-ring, .m-ring-in { animation: none; } .story-viewer { animation: none; } .sv-bars i.cur::after { animation: none; transform: scaleX(1); } }
.button.button-ghost, .button.button-ghost:hover { background: var(--surface); color: var(--text); }

/* ---------- desktop service ecosystem ---------- */
.eco { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.eco-list { display: grid; gap: 6px; align-content: start; }
.eco-tab { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); font: 600 16px var(--font-body); text-align: left; cursor: pointer; transition: border-color .25s, background .25s, color .25s, transform .3s var(--ease); }
.eco-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime); flex: none; } .eco-ic .icon { width: 19px; height: 19px; }
.eco-name { flex: 1; } .eco-go { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.eco-tab:hover { color: var(--text); } .eco-tab[aria-selected="true"] { color: var(--text); border-color: color-mix(in srgb, var(--lime) 60%, transparent); background: color-mix(in srgb, var(--lime) 12%, transparent); transform: translateX(6px); } .eco-tab[aria-selected="true"] .eco-go { opacity: 1; transform: none; }
.eco-panel { display: grid; align-content: center; justify-items: start; gap: 16px; padding: clamp(28px, 4vw, 52px); min-height: 100%; background: radial-gradient(70% 80% at 100% 0%, rgba(167,139,250,.18), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(57,123,255,.16), transparent 60%), var(--surface); animation: eco-in .5s var(--ease-out); }
.eco-panel[hidden] { display: none; } @keyframes eco-in { from { opacity: 0; transform: translateY(12px); } }
.eco-panels { display: grid; } .eco-num { font: 600 13px var(--font-display); letter-spacing: .14em; color: var(--lime); } .eco-panel h3 { font-size: clamp(32px, 4vw, 52px); } .eco-lead { color: var(--muted); font-size: 18px; max-width: 46ch; }
.eco-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; } .eco-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .eco-points .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--cyan); }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr; } .eco-list { grid-template-columns: 1fr 1fr; } .eco-tab[aria-selected="true"] { transform: none; } .eco-points { grid-template-columns: 1fr; } }

/* ---------- desktop compaction ---------- */
.statement { padding-block: clamp(36px, 5vw, 70px); }
.statement-text { font-size: clamp(28px, 3.4vw, 44px); }
.engine { min-height: 48vh; padding: 20px 0; } .engine-intro { min-height: 38vh; }
.promo-art { aspect-ratio: 1 / 1; }