/* ==========================================================
   Mobilogi — custom styles
   Tailwind handles layout/spacing; this file covers effects,
   components and animation that Tailwind can't express.
   ========================================================== */

:root {
  /* Light theme: white base, deep forest text, green accents */
  --ink: #FFFFFF;
  --ink-2: #F6FAF8;
  --ink-3: #ECF5F0;
  --pink: #22D47B;
  --pink-soft: #7EF0B0;
  --electric: #0E7A52;
  --flame: #C4F53B;
  --cream: #11251C;
  --haze: #4F6259;
  --on-accent: #0B2018;
  --accent-text: #0B7A50;
  --grad: linear-gradient(120deg, #D8F53A 0%, #3BE07F 50%, #13B5A6 100%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 72px;
}

html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { padding-bottom: env(safe-area-inset-bottom, 0px); background: radial-gradient(60% 40% at 0% 30%, rgba(14, 122, 82, .10), transparent 70%) fixed, radial-gradient(50% 40% at 100% 70%, rgba(34, 212, 123, .08), transparent 70%) fixed, var(--ink); }
img, svg, video, canvas { max-width: 100%; }
.font-display { font-optical-sizing: auto; }

/* ---------- Focus & skip link ---------- */
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; border-radius: 6px; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--flame); color: var(--on-accent); font-weight: 600;
  padding: .7rem 1.1rem; border-radius: 10px; transition: top .2s;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Header ---------- */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .4s var(--ease-out), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(17, 37, 28, .07);
}
.nav-link {
  position: relative; display: inline-block; padding: .5rem .85rem;
  color: rgba(17, 37, 28, .78); border-radius: 999px; transition: color .25s, background-color .25s;
}
.nav-link:hover { color: var(--cream); background: rgba(17, 37, 28, .05); }
.nav-link.is-active { color: var(--cream); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--flame); transform: translateX(-50%);
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost, .btn-light {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; border-radius: 999px; padding: .7rem 1.3rem; font-size: .95rem;
  transition: transform .35s var(--ease-out), box-shadow .35s, background-color .3s, border-color .3s, color .3s;
  will-change: transform; white-space: nowrap; cursor: pointer;
}
.btn-lg { padding: .95rem 1.75rem; font-size: 1.02rem; }
.btn-primary {
  color: var(--on-accent); background: var(--grad); background-size: 160% 100%; background-position: 0% 50%;
  box-shadow: 0 8px 30px -10px rgba(34, 212, 123, .7);
  transition: transform .35s var(--ease-out), box-shadow .35s, background-position .6s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 14px 40px -12px rgba(196, 245, 59, .65); }
.btn-primary:active, .btn-ghost:active, .btn-light:active { transform: translateY(0) scale(.98); }
.btn-ghost { color: var(--cream); border: 1px solid rgba(17, 37, 28, .18); background: rgba(17, 37, 28, .03); }
.btn-ghost:hover { border-color: rgba(17, 37, 28, .4); background: rgba(17, 37, 28, .08); transform: translateY(-2px); }
.btn-light { color: var(--cream); background: #FFFFFF; box-shadow: 0 12px 40px -12px rgba(11, 32, 24, .45); }
.btn-light:hover { transform: translateY(-2px); background: #EFFAF4; }

/* ---------- Mobile menu ---------- */
.menu-toggle {
  position: relative; z-index: 60; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(17, 37, 28, .14); background: rgba(17, 37, 28, .04);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .4s var(--ease-out), opacity .3s; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: radial-gradient(120% 80% at 100% 0%, rgba(34, 212, 123, .28), transparent 60%), rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  visibility: hidden; opacity: 0; clip-path: circle(0% at calc(100% - 44px) 36px);
  transition: clip-path .7s var(--ease-out), opacity .4s, visibility 0s linear .7s;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 44px) 36px); transition: clip-path .7s var(--ease-out), opacity .3s, visibility 0s; }
.mobile-link {
  display: block; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -.02em; line-height: 1.25; padding: .15rem 0;
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .2s;
}
.mobile-link:hover { color: var(--accent-text); }
.mobile-menu.is-open .mobile-link { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(1) .mobile-link { transition-delay: .12s; }
.mobile-menu.is-open li:nth-child(2) .mobile-link { transition-delay: .16s; }
.mobile-menu.is-open li:nth-child(3) .mobile-link { transition-delay: .2s; }
.mobile-menu.is-open li:nth-child(4) .mobile-link { transition-delay: .24s; }
.mobile-menu.is-open li:nth-child(5) .mobile-link { transition-delay: .28s; }
.mobile-menu.is-open li:nth-child(6) .mobile-link { transition-delay: .32s; }
.mobile-menu.is-open li:nth-child(7) .mobile-link { transition-delay: .36s; }
.mobile-foot { opacity: 0; transition: opacity .5s .4s; }
.mobile-menu.is-open .mobile-foot { opacity: 1; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero-title {
  font-size: clamp(2.2rem, 6.4vw, 5.1rem); line-height: 1; letter-spacing: -.035em; font-weight: 800;
}
.line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.line > span { display: inline-block; }
.js .line > span { transform: translateY(108%); transition: transform 1.1s var(--ease-out); }
.js .is-loaded .line > span { transform: none; }
.js .is-loaded .line:nth-child(2) > span { transition-delay: .09s; }
.js .is-loaded .line:nth-child(3) > span { transition-delay: .18s; }
.js .hero-fade { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out) .35s, transform .9s var(--ease-out) .35s; }
.js .hero-fade-2 { transition-delay: .5s; }
.js .hero-fade-3 { transition-delay: .62s; }
.js .is-loaded .hero-fade { opacity: 1; transform: none; }

.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero-glow-a { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -10vw; top: 10%; background: rgba(34, 212, 123, .22); }
.hero-glow-b { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; right: 18%; bottom: -12%; background: rgba(196, 245, 59, .12); }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ink));
}

.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--flame); }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--flame); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

.hero-chip-wrap { transition: transform .6s var(--ease-out); will-change: transform; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(17, 37, 28, .12);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -28px rgba(17, 37, 28, 0.22), inset 0 1px 0 rgba(17, 37, 28, .08);
}
@media (min-width: 1024px) { .hero-chip { padding: .9rem 1.4rem; } }
.chip-value { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.15rem, 3.4vw, 1.7rem); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip-label { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(.92rem, 2.4vw, 1.15rem); color: var(--cream); letter-spacing: -.01em; }
.chip-tag { font-size: .62rem; color: var(--haze); border: 1px dashed rgba(79, 98, 89, .45); border-radius: 999px; padding: .12rem .45rem; align-self: center; }
.placeholder-tag {
  position: absolute; left: 1.1rem; bottom: .8rem; display: inline-block;
  font-size: .68rem; line-height: 1; padding: .3rem .5rem; border-radius: 6px;
  color: var(--haze); border: 1px dashed rgba(79, 98, 89, .45);
}
.float-a { animation: float 7s ease-in-out infinite; }
.float-b { animation: float 8.5s ease-in-out -2s infinite; }
.float-c { animation: float 7.8s ease-in-out -4s infinite; }
.float-d { animation: float 9s ease-in-out -1s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid rgba(17, 37, 28, .3);
  justify-content: center; padding-top: 8px;
}
.scroll-cue span { width: 3px; height: 8px; border-radius: 3px; background: var(--cream); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- Statement (scroll-lit words) ---------- */
.statement {
  font-size: clamp(1.9rem, 5vw, 4.6rem); line-height: 1.08; letter-spacing: -.03em; max-width: 20ch;
}
.statement .word { display: inline-block; opacity: .16; transition: opacity .5s ease, color .5s ease; }
.statement .word.is-lit { opacity: 1; }

/* ---------- Section titles ---------- */
.section-title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.03em;
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- About: four streams merging into growth ---------- */
.flow { position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.flow-list { display: grid; grid-auto-rows: 1fr; }
.flow-item {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 0; border-top: 1px solid rgba(17, 37, 28, .08);
  transition: transform .5s var(--ease-out);
}
.flow-item:last-child { border-bottom: 1px solid rgba(17, 37, 28, .08); }
.flow-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--accent-text); background: rgba(34, 212, 123, .1); border: 1px solid rgba(34, 212, 123, .25);
  transition: background-color .4s, color .4s, border-color .4s;
}
.flow-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.35rem); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.flow-copy { color: var(--haze); font-size: .95rem; margin-top: .2rem; }
.flow-item:hover { transform: translateX(6px); }
.flow-item:hover .flow-icon { background: var(--flame); border-color: var(--flame); color: var(--on-accent); }

.flow-merge { position: relative; display: flex; flex-direction: column; align-items: center; }
.flow-lines { display: none; }
.flow-merge::before { content: ""; width: 1px; height: 48px; background: linear-gradient(to bottom, transparent, var(--pink-soft)); margin-bottom: .5rem; }
.flow-orb {
  position: relative; display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(126, 240, 176, .55), rgba(14, 122, 82, .35) 45%, rgba(255, 255, 255, .2) 75%);
  box-shadow: 0 0 90px -10px rgba(34, 212, 123, .7), inset 0 0 30px rgba(17, 37, 28, .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: orbBreathe 5s ease-in-out infinite;
}
.flow-orb-ring {
  position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(17, 37, 28, .2);
  animation: spin 24s linear infinite;
}
.flow-orb-ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 14px var(--flame); }
.flow-orb-label { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
@keyframes orbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (min-width: 768px) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 0; min-height: 440px; }
  .flow-merge { display: block; }
  .flow-merge::before { display: none; }
  .flow-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flow-lines path { fill: none; vector-effect: non-scaling-stroke; }
  .flow-base path { stroke: url(#flowG); stroke-width: 1.5; transition: stroke-width .4s, opacity .4s; }
  .flow-pulse path { stroke: var(--flame); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 48; animation: flowPulse 2.6s linear infinite; }
  .flow-pulse path:nth-child(2) { animation-delay: -.7s; }
  .flow-pulse path:nth-child(3) { animation-delay: -1.4s; }
  .flow-pulse path:nth-child(4) { animation-delay: -2s; }
  .flow-orb { position: absolute; left: 73.3%; top: 50%; width: 168px; margin: -84px 0 0 -84px; }
  /* Hovering a force brightens its stream */
  .flow:has(.flow-item:hover) .flow-base path { opacity: .35; }
  .flow:has(.flow-item:nth-child(1):hover) .flow-base path:nth-child(1),
  .flow:has(.flow-item:nth-child(2):hover) .flow-base path:nth-child(2),
  .flow:has(.flow-item:nth-child(3):hover) .flow-base path:nth-child(3),
  .flow:has(.flow-item:nth-child(4):hover) .flow-base path:nth-child(4),
  .flow:has(.flow-item:nth-child(5):hover) .flow-base path:nth-child(5) { opacity: 1; stroke-width: 3; }
  .flow-pulse path:nth-child(5) { animation-delay: -1.1s; }
}
@keyframes flowPulse { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }

/* ---------- Process ---------- */
.process { position: relative; display: grid; gap: 2.2rem; padding-left: 2.2rem; }
.process::before, .process::after { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; }
.process::before { background: rgba(17, 37, 28, .08); }
.process::after { background: var(--grad); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .2s linear; }
.process-step { position: relative; }
.process-step::before {
  content: ""; position: absolute; left: calc(-2.2rem + 4px); top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(17, 37, 28, .2); transition: border-color .4s, background-color .4s, box-shadow .4s; z-index: 1;
}
.process-step.is-active::before { border-color: var(--flame); background: var(--flame); box-shadow: 0 0 0 6px rgba(196, 245, 59, .15); }
.process-num { font-size: .85rem; color: var(--haze); font-variant-numeric: tabular-nums; }
.process-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; margin-top: .2rem; transition: color .4s; color: rgba(17, 37, 28, .45); }
.process-step.is-active .process-title { color: var(--cream); }
.process-copy { color: var(--haze); margin-top: .5rem; line-height: 1.55; max-width: 34ch; }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; padding-left: 0; padding-top: 2.6rem; }
  .process::before, .process::after { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .process::after { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .process-step::before { left: 0; top: -2.6rem; }
}

/* ---------- Branding (light) ---------- */
.branding :focus-visible { outline-color: var(--electric); }
.brand-title { font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1; letter-spacing: -.035em; max-width: 17ch; font-weight: 800; }
.brand-line { display: block; }
.brand-outline { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
@supports not (-webkit-text-stroke: 1px black) { .brand-outline { color: rgba(255, 255, 255, .35); } }
.brand-blob {
  position: absolute; right: -8vw; top: -6vw; width: 42vw; height: 42vw; max-width: 620px; max-height: 620px;
  background: linear-gradient(140deg, var(--pink-soft), var(--flame)); opacity: .55; filter: blur(2px);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: morph 16s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg); }
  50% { border-radius: 63% 37% 41% 59% / 58% 61% 39% 42%; transform: rotate(18deg); }
}
.brand-ring { position: absolute; right: 7vw; top: 9%; width: 180px; height: 180px; animation: spin 26s linear infinite; opacity: .8; }
.brand-ring text { font-family: "Manrope", system-ui, sans-serif; font-size: 13.2px; letter-spacing: .14em; fill: var(--ink); }
@media (max-width: 767px) { .brand-ring { width: 120px; height: 120px; right: -20px; bottom: 2%; opacity: .35; } }
.brand-point { padding-top: 1.4rem; border-top: 1.5px solid var(--ink); }
.brand-shape { display: block; width: 36px; height: 36px; transition: transform .7s var(--ease-out); }
.shape-circle { border-radius: 50%; background: var(--electric); }
.shape-square { border-radius: 8px; background: var(--flame); }
.shape-tri { background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.brand-point:hover .brand-shape { transform: rotate(90deg) scale(1.15); }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; border-radius: 36px; isolation: isolate; background: var(--electric); }
.cta-mesh {
  position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(196, 245, 59, .85), transparent 70%),
    radial-gradient(45% 55% at 80% 70%, rgba(34, 212, 123, .95), transparent 70%),
    radial-gradient(35% 45% at 70% 10%, rgba(19, 181, 166, .55), transparent 70%),
    radial-gradient(50% 60% at 30% 90%, rgba(255, 255, 255, .9), transparent 70%);
  filter: blur(30px); animation: mesh 18s ease-in-out infinite alternate;
}
.cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .38); }
@keyframes mesh {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1.04); }
}

/* ---------- Contact ---------- */
.contact-card { border-radius: 24px; padding: 1.6rem; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); border: 1px solid rgba(17, 37, 28, .08); }
.contact-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; transition: color .3s; }
.contact-row:hover { color: var(--accent-text); }
.contact-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(34, 212, 123, .14); color: var(--accent-text); }
.offices { display: grid; gap: .9rem; }
.offices li { display: grid; gap: .1rem; font-size: .92rem; }
.offices b { font-weight: 600; }
.offices span { color: var(--haze); line-height: 1.45; }
@media (min-width: 640px) { .offices li { grid-template-columns: 7.5rem 1fr; gap: 1rem; } }

.form-card { border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.4rem); background: rgba(17, 37, 28, .03); border: 1px solid rgba(17, 37, 28, .08); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .9rem; font-weight: 500; }
.field label span { color: var(--accent-text); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cream);
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(17, 37, 28, .14); border-radius: 14px; padding: .85rem 1rem;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(79, 98, 89, .7); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(17, 37, 28, .26); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(34, 212, 123, .22); }
.field [aria-invalid="true"] { border-color: #C2283F; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(255, 122, 138, .2); }
.field-error { min-height: 1.1rem; font-size: .82rem; color: #B42335; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select-wrap select option { background: var(--ink-2); color: var(--cream); }
.select-wrap::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--haze); border-bottom: 2px solid var(--haze); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.btn-spinner { display: none; }
.is-loading .btn-spinner { display: inline-block; animation: spin 1s linear infinite; }
.is-loading { pointer-events: none; opacity: .85; }
.form-status { margin-top: 1.2rem; border-radius: 14px; font-size: .95rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-success { padding: 1rem 1.1rem; background: rgba(196, 245, 59, .1); border: 1px solid rgba(196, 245, 59, .4); }
.form-status.is-error { padding: 1rem 1.1rem; background: rgba(255, 122, 138, .1); border: 1px solid rgba(255, 122, 138, .4); }
.form-status:focus { outline: none; }

/* ---------- Footer ---------- */
.footer-head { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 1.1rem; }
.footer-links { display: grid; gap: .65rem; color: var(--haze); }
.footer-links a { transition: color .25s; }
.footer-links a:hover { color: var(--cream); }
.social { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(17, 37, 28, .14); color: var(--haze); transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease-out); }
.social:hover { color: var(--on-accent); background: var(--flame); border-color: var(--flame); transform: translateY(-3px); }

.to-top {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(17, 37, 28, .14); color: var(--cream);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s, transform .35s var(--ease-out), visibility 0s .35s, background-color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s var(--ease-out), background-color .3s; }
.to-top:hover { background: var(--electric); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero-fade, .js .line > span { opacity: 1 !important; transform: none !important; }
  .statement .word { opacity: 1 !important; }
  .radar-sweep, .connect span, .pipeline li::after { animation: none !important; }
}

/* ==========================================================
   Content-led sections
   ========================================================== */
.hero-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.btn-dark { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; border-radius: 999px; padding: .95rem 1.75rem; color: var(--cream); background: var(--ink); transition: transform .35s var(--ease-out), background-color .3s; }
.btn-dark:hover { transform: translateY(-2px); background: var(--electric); }
.btn-light svg { flex: none; }

/* Web 3.0 card */
.web3 { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(1.6rem, 4vw, 3rem); background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(236, 245, 240, .8)); border: 1px solid rgba(17, 37, 28, .08); }
.web3-orb { position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: conic-gradient(from 90deg, rgba(34, 212, 123, .5), rgba(196, 245, 59, .35), rgba(34, 212, 123, .5)); filter: blur(60px); opacity: .6; animation: spin 20s linear infinite; }

/* Lead steps: three columns */
@media (min-width: 1024px) { .process-3 { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.process-3 .process-copy { max-width: 40ch; }

/* Connect. Engage. Convert. */
.connect { font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -.03em; line-height: 1.1; }
.connect span { color: rgba(17, 37, 28, .3); animation: connectLit 4.5s ease-in-out infinite; }
.connect span:nth-child(2) { animation-delay: 1.5s; }
.connect span:nth-child(3) { animation-delay: 3s; }
@keyframes connectLit { 0%, 40%, 100% { color: rgba(17, 37, 28, .3); } 10%, 30% { color: var(--accent-text); } }

/* Sales radar */
.radar { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, rgba(34, 212, 123, .14), rgba(255, 255, 255, 0) 70%); }
.radar-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(126, 240, 176, .25); }
.radar-ring.r1 { width: 100%; height: 100%; }
.radar-ring.r2 { width: 66%; height: 66%; }
.radar-ring.r3 { width: 33%; height: 33%; }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(126, 240, 176, .14); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(196, 245, 59, .45), rgba(196, 245, 59, 0) 70deg, transparent 360deg); animation: spin 4.5s linear infinite; }
.radar-blip { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 16px var(--flame); opacity: 0; animation: blip 4.5s ease-out var(--d) infinite; }
@keyframes blip { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.2); } 60% { opacity: .5; transform: scale(1); } 100% { opacity: 0; } }
.radar-core { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--grad); box-shadow: 0 0 50px rgba(196, 245, 59, .45); }

/* Pipeline — interlocking arrow steps (each step points into the next) */
.pipeline { --pipe-notch: 16px; --pipe-overlap: 10px; position: relative; display: grid; grid-template-columns: 1fr; counter-reset: pipe; }
.pipeline li {
  position: relative; counter-increment: pipe; display: flex; align-items: center; gap: .8rem;
  min-height: 92px; padding: calc(var(--pipe-notch) + .9rem) 1.3rem calc(var(--pipe-notch) + .7rem);
  font-weight: 600; line-height: 1.35; color: var(--cream); z-index: 1;
  background: rgba(14, 122, 82, .32);                     /* outline colour (shows 1.5px around the fill) */
  clip-path: polygon(0 0, 50% var(--pipe-notch), 100% 0, 100% calc(100% - var(--pipe-notch)), 50% 100%, 0 calc(100% - var(--pipe-notch)));
  transition: transform .45s var(--ease-out);
}
.pipeline li + li { margin-top: calc(var(--pipe-overlap) * -1 + 4px); }
.pipeline li:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pipe-notch)), 50% 100%, 0 calc(100% - var(--pipe-notch))); padding-top: 1.1rem; }
.pipeline li::before {                                      /* the fill, inset to leave a hairline outline */
  content: ""; position: absolute; inset: 1.5px; z-index: -1; clip-path: inherit;
  background: linear-gradient(135deg, #F7FCF9, #E7F6EE);
}
.pipeline li::after {                                       /* light that travels through the arrows */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(196, 245, 59, .38) 50%, transparent 70%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  animation: pipeSheen 6s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * .45s);
}
.pipeline li:nth-child(2) { --i: 1; } .pipeline li:nth-child(3) { --i: 2; } .pipeline li:nth-child(4) { --i: 3; }
@keyframes pipeSheen { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }
.pipeline li:hover { transform: translateY(-2px); }
/* chevron marker + step number before each label */
.pipe-dot { flex: none; position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--electric); box-shadow: 0 6px 16px -8px rgba(14, 122, 82, .7); }
.pipe-dot::before { content: ""; position: absolute; left: 11px; top: 11px; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); }
.pipeline li::marker { content: none; }
@media (min-width: 900px) {
  .pipeline { --pipe-notch: 22px; grid-template-columns: repeat(4, 1fr); }
  .pipeline li { min-height: 104px; padding: 1rem calc(var(--pipe-notch) + 1rem) 1rem calc(var(--pipe-notch) + 1.1rem);
    clip-path: polygon(0 0, calc(100% - var(--pipe-notch)) 0, 100% 50%, calc(100% - var(--pipe-notch)) 100%, 0 100%, var(--pipe-notch) 50%); }
  .pipeline li + li { margin-top: 0; margin-left: calc(var(--pipe-overlap) * -1); }
  .pipeline li:first-child { padding-left: 1.2rem; padding-top: 1rem;
    clip-path: polygon(0 0, calc(100% - var(--pipe-notch)) 0, 100% 50%, calc(100% - var(--pipe-notch)) 100%, 0 100%); }
  .pipeline li:last-child { padding-right: calc(var(--pipe-notch) + .9rem); }
}

/* Influencer tiers */
.infl-glow { position: absolute; left: 50%; bottom: -10%; width: 70vw; height: 40vw; max-width: 1000px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(196, 245, 59, .12), transparent); pointer-events: none; }
.tiers-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .tiers-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.tier { position: relative; display: flex; flex-direction: column; padding: 1.8rem; border-radius: 26px; background: var(--ink-2); border: 1px solid rgba(17, 37, 28, .08); transition: transform .5s var(--ease-out), border-color .4s; }
.tier:hover { transform: translateY(-6px); border-color: rgba(126, 240, 176, .45); }
.tier-featured { background: radial-gradient(100% 70% at 50% 0%, rgba(34, 212, 123, .3), transparent 70%), var(--ink-2); border-color: rgba(126, 240, 176, .4); }
.tier-scale { position: relative; height: 130px; display: grid; place-items: center; margin-bottom: 1.2rem; }
.tier-scale::before { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 1px dashed rgba(17, 37, 28, .15); }
.tier-scale span { width: 130px; height: 130px; border-radius: 50%; transform: scale(var(--s)); background: radial-gradient(circle at 35% 30%, var(--flame), var(--pink) 70%); box-shadow: 0 0 40px rgba(34, 212, 123, .5); transition: transform .8s var(--ease-out); }
.tier:hover .tier-scale span { transform: scale(calc(var(--s) * 1.1)); }
.tier-range { font-size: .88rem; color: var(--accent-text); }
.tier-name { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1; margin-top: .4rem; }
.tier-copy { color: var(--haze); line-height: 1.6; margin-top: 1rem; }

/* Offline: OOH & BTL */
.off-panel { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--ink-2); border: 1px solid rgba(17, 37, 28, .08); transition: border-color .4s, transform .6s var(--ease-out); }
.off-panel:hover { border-color: rgba(126, 240, 176, .35); transform: translateY(-4px); }
.off-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(17, 37, 28, .06); }
.off-city svg { display: block; width: 100%; height: 100%; }
.bb-text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.01em; fill: #0B2018; }
.off-shine { animation: offShine 5s ease-in-out infinite; }
.off-shine { opacity: 0; }
@keyframes offShine { 0%, 50% { transform: skewX(-15deg) translateX(-60px); opacity: 0; } 55% { opacity: .28; } 95% { opacity: .28; } 100% { transform: skewX(-15deg) translateX(340px); opacity: 0; } }
.off-tactics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(17, 37, 28, .06); }
.tactic { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: clamp(.9rem, 2vw, 1.4rem); background: var(--ink-2); transition: background-color .4s; }
.tactic svg { color: var(--accent-text); transition: color .4s, transform .5s var(--ease-out); }
.tactic span { font-weight: 600; font-size: clamp(.82rem, 1.3vw, .98rem); color: var(--cream); }
.tactic:hover { background: radial-gradient(120% 100% at 0% 0%, rgba(34, 212, 123, .22), transparent 70%), var(--ink-3); }
.tactic:hover svg { color: var(--accent-text); transform: translateY(-2px); }
.off-content { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; flex: 1; }
.off-kicker { font-size: .85rem; font-weight: 600; color: var(--accent-text); }
.off-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; line-height: 1.15; margin-top: .5rem; }
.off-content > p:not(.off-kicker) { color: var(--haze); line-height: 1.7; margin-top: 1rem; max-width: 58ch; }
.off-list { margin-top: auto; padding-top: 1.6rem; display: grid; gap: .65rem; }
.off-list li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; padding-top: .65rem; border-top: 1px solid rgba(17, 37, 28, .07); }
.off-list svg { flex: none; color: var(--accent-text); }

/* ==========================================================
   WOW layer: aurora, grain, cursor, mega marquee,
   word reveals, pinned horizontal services
   ========================================================== */

/* Aurora behind the hero */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; animation: drift 18s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 52vw; height: 52vw; max-width: 820px; max-height: 820px; right: -12vw; top: -10%; background: #22D47B; }
.aurora span:nth-child(2) { width: 40vw; height: 40vw; max-width: 640px; max-height: 640px; right: 18%; bottom: -20%; background: #C4F53B; opacity: .4; animation-duration: 22s; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 36vw; height: 36vw; max-width: 560px; max-height: 560px; left: -10vw; top: 20%; background: #13B5A6; opacity: .45; animation-duration: 26s; animation-delay: -10s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.12); } 100% { transform: translate(5%, -6%) scale(.95); } }
.hero-title { font-size: clamp(2.4rem, 7vw, 5.8rem); }

/* Film grain for a tactile, premium finish */
.grain { position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }

/* Custom cursor (fine pointers only, toggled by JS) */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .3s, border-color .3s; }
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--flame); }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid rgba(17, 37, 28, .55); mix-blend-mode: difference; }
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-hover .cursor-ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(17, 37, 28, .95); border-color: transparent; }
.cursor-hover .cursor-dot { opacity: 0; }

/* Giant marquee bands */
.mega { overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem) 0; border-block: 1px solid rgba(17, 37, 28, .07); }
.mega-track { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; }
.mega-rev .mega-track { animation-direction: reverse; animation-duration: 34s; }
.mega li { display: flex; align-items: center; transform: skewX(var(--skew, 0deg)); transition: transform .3s var(--ease-out); }
.mega li span:not(.m-star) { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(3rem, 10vw, 9.5rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; padding: 0 .3em; }
.m-fill { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-out { color: transparent; -webkit-text-stroke: 1.5px rgba(17, 37, 28, .55); }
.m-star { color: var(--accent-text); font-size: clamp(1.5rem, 4vw, 3.5rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Section titles: words rise into place */
.js .split-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .04em .2em; margin: -.16em -.04em -.2em; }
.js .split-title .w > span { display: inline-block; transform: translateY(130%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.js .split-title.is-in .w > span { transform: none; }

/* Pinned horizontal services */
.hscroll { position: relative; }
.hscroll-sticky { padding: 6rem 0 4rem; }
.hscroll-viewport { margin-top: 3rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll-viewport::-webkit-scrollbar { display: none; }
.hscroll-track { display: flex; gap: 1.25rem; width: max-content; padding: 0 1.25rem 1rem; }
.hscroll-meta { display: flex; align-items: center; gap: 1rem; color: var(--haze); font-size: .9rem; font-variant-numeric: tabular-nums; }
.hscroll-count b { color: var(--cream); font-weight: 700; }
.hscroll-bar { position: relative; width: 140px; height: 2px; background: rgba(17, 37, 28, .12); border-radius: 2px; overflow: hidden; }
.hscroll-bar span { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--hp, .14)); }
.hcard {
  --tint: 34, 212, 123;
  position: relative; overflow: hidden; scroll-snap-align: center; flex: none;
  width: min(86vw, 540px); display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 30px;
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--tint), .28), transparent 65%), radial-gradient(70% 50% at 0% 100%, rgba(var(--tint), .12), transparent 70%), var(--ink-2);
  border: 1px solid rgba(var(--tint), .28);
  transition: transform .6s var(--ease-out), border-color .4s;
}
.hcard:hover { border-color: rgba(var(--tint), .7); transform: translateY(-6px); }
.hcard-num { position: absolute; right: 1.4rem; top: .6rem; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 6rem; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--tint), .45); }
.hcard-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: rgba(var(--tint), .9); box-shadow: 0 12px 30px -10px rgba(var(--tint), .8); }
.hcard-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.05; letter-spacing: -.03em; margin-top: .6rem; max-width: 14ch; }
.hcard-body p { color: var(--haze); line-height: 1.65; font-size: .98rem; }
.hcard-body p + p { margin-top: .8rem; }
.hcard-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .6rem; }
.hcard-tags li { font-size: .82rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(var(--tint), .12); border: 1px solid rgba(var(--tint), .3); }
@media (min-width: 1024px) {
  .hscroll.is-pinned .hscroll-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 5.5rem 0 2rem; overflow: hidden; }
  .hscroll.is-pinned .hscroll-viewport { overflow: visible; }
  .hscroll.is-pinned .hscroll-track { padding: 0 max(2rem, calc((100vw - 84rem) / 2 + 2rem)); will-change: transform; }
  .hcard { width: clamp(420px, 36vw, 560px); }
}

/* Magnetic buttons get their transform from JS */
.is-magnetic { transition: transform .4s var(--ease-out), box-shadow .35s, background-position .6s var(--ease-out), background-color .3s, border-color .3s; }

@media (prefers-reduced-motion: reduce) {
  .grain, .aurora span, .mega-track { animation: none !important; }
  .js .split-title .w > span { transform: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
}
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* Shorter laptop screens: keep pinned service cards fully visible */
@media (min-width: 1024px) and (max-height: 980px) {
  .hscroll.is-pinned .hscroll-sticky { padding-top: 4.75rem; }
  .hscroll.is-pinned .hcard-title { font-size: clamp(1.5rem, 2.2vw, 1.9rem); max-width: none; }
  .hscroll.is-pinned .section-title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); max-width: 28ch; }
  .hscroll.is-pinned .hscroll-viewport { margin-top: 1.5rem; }
  .hscroll.is-pinned .hcard { padding: 1.5rem 1.7rem; gap: .7rem; width: clamp(440px, 38vw, 580px); }
  .hscroll.is-pinned .hcard-body p { font-size: .9rem; line-height: 1.55; }
  .hscroll.is-pinned .hcard-num { font-size: 4.5rem; }
  .hscroll.is-pinned .hcard-icon { width: 46px; height: 46px; }
}

/* ==========================================================
   WOW layer 2: preloader, giant hero, spotlight,
   rolling buttons, circle reveal, smooth scroll
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Preloader */
.preloader { display: none; }
.js .preloader {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--ink); color: var(--cream);
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
  clip-path: inset(0 0 0 0);
}
.js .preloader.is-done { clip-path: inset(0 0 100% 0); }
.preloader.is-gone { display: none !important; }
html.is-preloading { overflow: hidden; }
.pre-brand { display: flex; align-items: center; gap: .9rem; }
.pre-word { font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; }
.pre-path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: preDraw 1.1s var(--ease-out) .15s forwards; }
@keyframes preDraw { to { stroke-dashoffset: 0; } }
.pre-line { color: var(--haze); font-size: .95rem; opacity: 0; animation: preFade .8s ease .5s forwards; }
@keyframes preFade { to { opacity: 1; } }
.pre-count { position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1rem, 3vw, 2rem); font-weight: 800; font-size: clamp(4rem, 14vw, 12rem); line-height: .85; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pre-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(17, 37, 28, .06); }
.pre-bar span { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }

/* Giant centred hero */
.hero-xl { font-size: clamp(2.35rem, 8.6vw, 8.3rem); line-height: .94; letter-spacing: -.045em; }
.hero-xl .line { padding-bottom: .1em; margin-bottom: -.1em; }
.hero-chips { position: absolute; inset: 0; pointer-events: none; }
.chip-pos-1 { position: absolute; left: 4%; top: 60%; }
.chip-pos-2 { position: absolute; right: 4%; top: 15%; }
.chip-pos-3 { position: absolute; right: 6%; bottom: 17%; }
.hero::after { z-index: 1; }

/* Cursor spotlight that lights up the dark canvas */
.spotlight { position: fixed; left: 0; top: 0; width: 700px; height: 700px; margin: -350px 0 0 -350px; z-index: 2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 212, 123, .10), rgba(14, 122, 82, .05) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .6s; }
.has-cursor .spotlight { opacity: 1; }

/* Rolling text on buttons and nav links */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; height: 1.3em; }
.roll > span { display: inline-block; position: relative; transition: transform .5s var(--ease-out); }
.roll > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
a:hover .roll > span, button:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-100%); }

/* Branding section opens as a growing circle (clip-path set by JS) */
[data-circle-reveal] { will-change: clip-path; }

@media (prefers-reduced-motion: reduce) {
  .js .preloader, .spotlight { display: none !important; }
  .roll > span { transition: none; }
}

/* Safety net: never let the preloader block the page if a script fails */
.js .preloader { animation: preSafety 0s linear 6s forwards; }
@keyframes preSafety { to { visibility: hidden; opacity: 0; pointer-events: none; } }

/* Lead steps as stacking cards */
.stack { position: relative; display: grid; gap: 1.5rem; }
.stack-card {
  position: sticky; top: calc(96px + var(--i) * 26px);
  display: grid; gap: 1.5rem; align-items: center; min-height: min(62vh, 520px);
  padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: 34px; overflow: hidden;
  transform-origin: center top; transform: scale(var(--sc, 1)); transition: transform .15s linear;
  box-shadow: 0 -20px 60px -20px rgba(17, 37, 28, 0.22);
}
@media (min-width: 900px) { .stack-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; } }
.stack-num { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(6rem, 18vw, 15rem); line-height: .8; letter-spacing: -.06em; }
.stack-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; }
.stack-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.035em; margin-top: 1.4rem; }
.stack-copy { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; margin-top: 1.2rem; max-width: 46ch; }
.stack-1 { background: radial-gradient(80% 90% at 0% 0%, rgba(34, 212, 123, .35), transparent 60%), var(--ink-3); border: 1px solid rgba(17, 37, 28, .08); }
.stack-1 .stack-num { color: transparent; -webkit-text-stroke: 2px rgba(126, 240, 176, .8); }
.stack-1 .stack-icon { background: var(--pink); color: var(--on-accent); }
.stack-1 .stack-copy { color: var(--haze); }
.stack-2 { background: var(--grad); color: var(--on-accent); }
.stack-2 .stack-num { color: rgba(255, 255, 255, .9); }
.stack-2 .stack-icon { background: var(--ink); color: var(--electric); }
.stack-2 .stack-copy { color: rgba(255, 255, 255, .8); }
.stack-3 { background: #FFFFFF; color: var(--cream); border: 1px solid rgba(17, 37, 28, .1); box-shadow: 0 24px 60px -32px rgba(11, 32, 24, .35); }
.stack-3 .stack-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stack-3 .stack-icon { background: var(--electric); color: #fff; }
.stack-3 .stack-copy { color: rgba(255, 255, 255, .72); }
.stack-2 :focus-visible { outline-color: var(--on-accent); }
.stack-3 :focus-visible { outline-color: var(--electric); }
@media (prefers-reduced-motion: reduce) { .stack-card { transform: none !important; } }

/* ==========================================================
   Calmer motion: fewer moving parts, slower loops.
   Delete this block if you ever want the livelier version back.
   ========================================================== */
.grain { animation: none; opacity: .05; }
.aurora span { animation-duration: 60s !important; }
.float-a, .float-b, .float-c, .float-d { animation: floatSoft 12s ease-in-out infinite; }
@keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mega-track { animation-duration: 80s; }
.mega-rev .mega-track { animation-duration: 90s; }
.mega li { transform: none; }
.connect span { animation: none; color: var(--cream); }
.connect span:last-child { color: var(--accent-text); }
.pipeline li::after { animation-duration: 7s; }
.web3-orb { animation: none; }
.off-shine { display: none; }
.brand-ring { animation-duration: 80s; }
.brand-blob { animation-duration: 40s; }
.force-core-ring, .flow-orb-ring { animation-duration: 60s; }
.flow-orb { animation: none; }
.flow-pulse path { animation-duration: 6s; }
.radar-sweep { animation-duration: 9s; }
.radar-blip { animation-duration: 9s; }
.cta-mesh { animation-duration: 40s; }
.forces-lines path { animation-duration: 8s; }
.pulse-dot::after { animation-duration: 3.5s; }
.js .reveal { transform: translateY(16px); }
.svc:hover, .tier:hover, .off-panel:hover, .hcard:hover { transform: translateY(-2px); }


/* ==========================================================
   Hero in the mobilogi style: Discover. Engage. Grow.
   ========================================================== */
.hero-stack { font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.hero-stack .hl-1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.hero-stack .hl-2 { font-size: clamp(2.8rem, 6.2vw, 5.3rem); }
.hero-stack .hl-3 { font-size: clamp(3.4rem, 7.8vw, 6.8rem); font-weight: 800; }
.hero-sub { font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--cream); }

/* ==========================================================
   Technical hero: particle growth tree
   ========================================================== */
.hero { background: #FFFFFF; }
.hero-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 68% 45%, rgba(19, 181, 166, .16), transparent 70%),
    radial-gradient(30% 25% at 68% 86%, rgba(59, 224, 127, .14), transparent 70%); }
.hero-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 40%, transparent 60%),
              linear-gradient(to bottom, transparent 70%, var(--ink) 100%); }
.hero::after { display: none; }
.hero-tag { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid rgba(17, 37, 28, .1); background: rgba(17, 37, 28, .04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .85rem; color: rgba(17, 37, 28, .8); }
.hero-stack { text-align: left; }
.hero-stack .hl-1, .hero-stack .hl-2 { font-weight: 500; }
.hero-stack .hl-1 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.hero-stack .hl-2 { font-size: clamp(2.7rem, 5.6vw, 4.9rem); }
.hero-stack .hl-3 { font-size: clamp(3.2rem, 7vw, 6.2rem); }
@media (max-width: 1023px) {
  #hero-canvas { opacity: .45; }
  .hero-vignette { background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, .35) 50%, var(--ink) 100%); }
}
.glass-pill {
  padding: 1rem 1.5rem; border-radius: 999px;
  background: linear-gradient(160deg, rgba(17, 37, 28, .10), rgba(17, 37, 28, .03));
  border: 1px solid rgba(17, 37, 28, .14);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(17, 37, 28, .12), 0 20px 40px -20px rgba(17, 37, 28, 0.22);
}
.tchip-1 { position: absolute; left: 43%; bottom: 13%; transform: rotate(-4deg); }
.tchip-2 { position: absolute; right: 3%; bottom: 31%; transform: rotate(5deg); }
.tchip-3 { position: absolute; left: 63%; bottom: 6%; transform: rotate(-2deg); }

/* ==========================================================
   Branding section: dark & technical to match the rest
   ========================================================== */
.branding-dark { background: var(--ink); color: var(--cream); border-block: 1px solid rgba(17, 37, 28, .06); }
.brand-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(17, 37, 28, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 37, 28, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%); }
.brand-glow { position: absolute; right: -10%; top: -20%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59, 224, 127, .16), rgba(19, 181, 166, .06) 50%, transparent); }
.branding-dark .brand-outline { -webkit-text-stroke: 1.5px var(--electric); }
.branding-dark .brand-ring text { fill: var(--haze); }
.branding-dark .brand-point { border-top: 1px solid rgba(17, 37, 28, .14); padding: 1.5rem 1.4rem; border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(17, 37, 28, .035), transparent); transition: background-color .4s, border-color .4s; }
.branding-dark .brand-point:hover { border-top-color: var(--pink); background: linear-gradient(180deg, rgba(34, 212, 123, .08), transparent); }
.branding-dark .shape-tri { background: var(--cream); }
.branding-dark :focus-visible { outline-color: var(--electric); }

/* Hero labels: small glass tags connected to the tree by a thin line */
.hero-tags { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tag { position: absolute; display: flex; align-items: center; }
.tag-left { flex-direction: row-reverse; }
.tag-1 { right: 41%; top: 40%; }
.tag-2 { left: 73%; top: 22%; }
.tag-3 { left: 72.5%; top: 63%; }
.tag-node { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 12px var(--flame), 0 0 0 4px rgba(196, 245, 59, .15); flex: none; }
.tag-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(196, 245, 59, .5); animation: tagPulse 3.5s ease-out infinite; }
@keyframes tagPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.tag-line { width: 56px; height: 1px; flex: none; background: linear-gradient(90deg, rgba(196, 245, 59, .8), rgba(17, 37, 28, .15)); }
.tag-left .tag-line { background: linear-gradient(270deg, rgba(196, 245, 59, .8), rgba(17, 37, 28, .15)); }
.tag-pill {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .55rem .95rem .55rem .6rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--cream);
  background: rgba(255, 255, 255, .88); border: 1px solid rgba(17, 37, 28, .12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(17, 37, 28, .08);
}
.tag-num { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 .35rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--on-accent); background: var(--grad); }
.js .tag { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .is-loaded .tag { opacity: 1; transform: none; }
.js .is-loaded .tag-1 { transition-delay: 1.4s; }
.js .is-loaded .tag-2 { transition-delay: 1.7s; }
.js .is-loaded .tag-3 { transition-delay: 2s; }
@media (prefers-reduced-motion: reduce) { .js .tag { opacity: 1; transform: none; } .tag-node::after { display: none; } }

/* ==========================================================
   Content update: helpers that reuse the existing design
   ========================================================== */
.hero-stack .hl-muted { color: rgba(17, 37, 28, .55); }
.flow-6 .flow-item { padding: 1rem 0; }
@media (min-width: 768px) {
  .flow:has(.flow-item:nth-child(6):hover) .flow-base path:nth-child(6) { opacity: 1; stroke-width: 3; }
}
.stack-copy strong { font-weight: 700; }
.hscroll-lede { max-width: 60ch; }
.hscroll.is-pinned .hscroll-lede { font-size: .95rem; }
@media (min-width: 1024px) and (max-height: 980px) { .hscroll.is-pinned .hscroll-lede { display: none; } }
.off-list li { align-items: flex-start; }
.off-list li svg { margin-top: .3rem; }

/* Pricing models table */
.models { border-radius: 28px; padding: 1px; background: linear-gradient(150deg, rgba(126, 240, 176, .45), rgba(17, 37, 28, .06) 45%, rgba(19, 181, 166, .35)); }
.models-scroll { overflow-x: auto; border-radius: 27px; background: var(--ink-2); }
.models table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.models th, .models td { padding: 1.05rem 1.4rem; border-bottom: 1px solid rgba(17, 37, 28, .06); vertical-align: top; }
.models thead th { font-size: .82rem; font-weight: 600; color: var(--haze); background: rgba(17, 37, 28, .02); }
.models tbody tr:last-child th, .models tbody tr:last-child td { border-bottom: 0; }
.models tbody tr { transition: background-color .3s; }
.models tbody tr:hover { background: rgba(34, 212, 123, .06); }
.models td { color: var(--haze); line-height: 1.55; font-size: .95rem; }
.models td:nth-child(2) { color: var(--cream); }
.model-badge { display: inline-block; white-space: nowrap; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--on-accent); background: var(--grad); }
.verticals { display: flex; flex-wrap: wrap; gap: .5rem; }
.verticals li { font-size: .88rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(17, 37, 28, .12); background: rgba(17, 37, 28, .03); }

/* ==========================================================
   Tree labels 01 / 02 / 03: premium glass pills
   (desktop: connected to the branches; tablet & mobile: a row under the hero)
   ========================================================== */
.hero-tags .tag-pill {
  gap: .6rem; padding: .3rem .85rem .3rem .3rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(236, 245, 240, .88));
  border: 1px solid rgba(14, 122, 82, .22);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(17, 37, 28, .08), 0 0 0 4px rgba(34, 212, 123, .05), 0 14px 34px -14px rgba(34, 212, 123, .45);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
  pointer-events: auto;
}
.hero-tags .tag-pill:hover { border-color: rgba(196, 245, 59, .6); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(17, 37, 28, .1), 0 0 0 4px rgba(196, 245, 59, .08), 0 18px 40px -14px rgba(196, 245, 59, .45); }
.hero-tags .tag-num {
  display: inline-grid; place-items: center; min-width: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: .76rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--on-accent); background: var(--grad); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 12px rgba(196, 245, 59, .3);
}
.tag-sep { width: 1px; height: 20px; background: rgba(17, 37, 28, .16); flex: none; }
.tag-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tag-word { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: .88rem; letter-spacing: -.01em; color: var(--cream); }
.tag-cap { font-size: .66rem; font-weight: 500; color: var(--haze); margin-top: .1rem; }
.hero-tags .tag-line { width: 48px; }

/* Desktop: labels sit on the branches */
@media (min-width: 1024px) {
  .hero-tags .tag-1 { right: 35%; top: 44%; }
  .hero-tags .tag-2 { left: 73%; top: 21%; }
  .hero-tags .tag-3 { left: 72.5%; top: 62%; }
}

/* Tablet & mobile: the same tree labels as desktop (node, connector, number,
   word and caption), attached to the trunk of the tree beside the headline.
   script.js measures the space and passes the tree position as --tx / --ty /
   --tr, a label scale as --tz, and adds .is-compact when captions won't fit. */
@media (max-width: 1023px) {
  .hero-tags { inset: 0; }
  .hero-tags .tag { position: absolute; margin-top: var(--tm, -1.15rem); }
  .hero-tags .tag > * { zoom: var(--tz, 1); }
  .hero-tags .tag-1 { left: auto; right: calc(100% - var(--tx, 75%) + var(--tr, 90px) * .08); top: calc(var(--ty, 40%) - var(--tr, 90px) * .66); }
  .hero-tags .tag-2 { right: auto; left: calc(var(--tx, 75%) + var(--tr, 90px) * .08); top: calc(var(--ty, 40%) - var(--tr, 90px) * .66); }
  .hero-tags .tag-3 { left: auto; right: calc(100% - var(--tx, 75%) + var(--tr, 90px) * .1); top: calc(var(--ty, 40%) - var(--tr, 90px) * .2); flex-direction: row-reverse; }
  .hero-tags .tag-3 .tag-line { background: linear-gradient(270deg, rgba(196, 245, 59, .8), rgba(17, 37, 28, .15)); }
  .hero-tags .tag-line { width: 22px; }
  .hero-tags.is-compact .tag-cap { display: none; }
}
@media (max-width: 639px) {
  .hero-tags .tag-pill { padding: .2rem .55rem .2rem .2rem; gap: .38rem; }
  .hero-tags .tag-num { width: 24px; height: 24px; font-size: .64rem; }
  .hero-tags .tag-sep { height: 16px; }
  .hero-tags .tag-word { font-size: .78rem; }
  .hero-tags .tag-cap { font-size: .56rem; }
  .hero-tags .tag-node { width: 7px; height: 7px; }
  .hero-tags .tag-line { width: 8px; }
  .hero-tags.is-compact .tag-pill { padding-right: .5rem; gap: .32rem; }
  .hero-tags.is-compact .tag-line { width: 5px; }
}

/* ==========================================================
   Hero tagline: tree-label glow + running theme gradient text
   ========================================================== */
.flow-text {
  font-weight: 600;
  background: linear-gradient(90deg, #D8F53A 0%, #3BE07F 25%, #13B5A6 50%, #3BE07F 75%, #D8F53A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(59, 224, 127, .35));
  animation: flowText 6s linear infinite;
}
@keyframes flowText { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) { .flow-text { animation: none; } }

/* Large hero line: keep the glow subtle at bigger sizes */
.hero-sub .flow-text { font-weight: 700; filter: drop-shadow(0 0 16px rgba(59, 224, 127, .28)); }

/* Large hero line: reveal wipe on load, then the gradient keeps flowing */
.js .hero-sub .flow-text {
  display: inline;
  background: linear-gradient(100deg, #D8F53A 0%, #7EF0B0 18%, #3BE07F 36%, #13B5A6 54%, #3BE07F 72%, #D8F53A 90%, #7EF0B0 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: quoteFlow 9s linear infinite, quoteIn 1.4s cubic-bezier(.22, 1, .36, 1) .4s both, quoteBreathe 5s ease-in-out 1.8s infinite;
}
/* colours travel continuously across the words */
@keyframes quoteFlow { from { background-position: 0% center; } to { background-position: -250% center; } }
/* gentle fade-in on load */
@keyframes quoteIn { from { opacity: 0; } to { opacity: 1; } }
/* soft breathing: very slight fade and glow, always readable */
@keyframes quoteBreathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(59, 224, 127, .22)); }
  50% { opacity: .86; filter: drop-shadow(0 0 20px rgba(59, 224, 127, .42)); }
}
@media (prefers-reduced-motion: reduce) { .js .hero-sub .flow-text { animation: none; opacity: 1; } }

/* Text clipping safety net */
.section-title, .hscroll .section-title { padding-block: .04em; }
.hcard-tags { padding-bottom: .25rem; }


/* ==========================================================
   Hero quote: a soft spotlight travels word by word
   (rest of the sentence stays white)
   ========================================================== */
.hero-sub { font-weight: 600; }
.quote-sweep { color: var(--cream); }
.js .quote-sweep .qw { color: var(--cream); }
.quote-sweep .qw {
  color: var(--cream);
  animation: qwSweep var(--dur, 6s) linear infinite;
  animation-delay: calc(var(--i) * var(--step, .3s));
}
@keyframes qwSweep {
  0%   { color: var(--cream); text-shadow: none; }
  5%   { color: var(--hl); text-shadow: 0 0 18px var(--glow), 0 0 2px var(--glow); }
  16%  { color: var(--hl); text-shadow: 0 0 18px var(--glow), 0 0 2px var(--glow); }
  24%  { color: var(--cream); text-shadow: none; }
  100% { color: var(--cream); text-shadow: none; }
}
}
.js .quote-sweep { animation: quoteIn 1.2s cubic-bezier(.22, 1, .36, 1) .4s both; }
@media (prefers-reduced-motion: reduce) {
  .quote-sweep .qw { animation: none; }
  .js .quote-sweep { animation: none; }
}

/* Hero headline: give descenders (the "g" in Engage) room inside the reveal mask */
.hero-stack .line { padding-bottom: .2em; margin-bottom: -.2em; }

/* ==========================================================
   Legal pages (Privacy Policy)
   ========================================================== */
.legal-hero { border-bottom: 1px solid rgba(17, 37, 28, .06); }
.legal-toc { position: sticky; top: 100px; padding-top: 3rem; }
.legal-toc-title { font-size: .8rem; font-weight: 700; color: var(--haze); margin-bottom: 1rem; }
.legal-toc ol { display: grid; gap: .15rem; counter-reset: toc; border-left: 1px solid rgba(17, 37, 28, .08); }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 1px solid transparent; font-size: .9rem; color: var(--haze); transition: color .25s, border-color .25s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero) "\00a0\00a0"; font-size: .72rem; color: rgba(79, 98, 89, .6); font-variant-numeric: tabular-nums; }
.legal-toc a:hover, .legal-toc a.is-current { color: var(--cream); border-left-color: var(--pink); }
@media (max-width: 1023px) { .legal-toc { position: static; padding-top: 2.5rem; } .legal-toc ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .legal-toc ol { grid-template-columns: 1fr; } }
.legal { padding-top: 3rem; max-width: 72ch; }
.legal-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(17, 37, 28, .06); scroll-margin-top: 100px; }
.legal-section:last-child { border-bottom: 0; }
.legal h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -.02em; line-height: 1.2; color: var(--cream); }
.legal h3 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--cream); margin-top: 1.6rem; }
.legal p, .legal li { color: var(--haze); line-height: 1.75; }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; display: grid; gap: .55rem; }
.legal li { position: relative; padding-left: 1.4rem; }
.legal li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.legal strong { color: var(--cream); font-weight: 600; }
.legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent-text); }
.legal-contact { margin-top: 1.25rem; padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--ink-2); border: 1px solid rgba(17, 37, 28, .08); }
.legal-contact p { margin-top: .4rem; }
.legal-contact p:first-child { margin-top: 0; }

/* About page */
.page-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .page-grid { grid-template-columns: repeat(3, 1fr); } }
.page-card { padding: 1.6rem; border-radius: 22px; background: var(--ink-2); border: 1px solid rgba(17, 37, 28, .08); transition: border-color .4s; }
.page-card:hover { border-color: rgba(126, 240, 176, .35); }
.page-card h3 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.page-card p { margin-top: .6rem; color: var(--haze); line-height: 1.6; font-size: .97rem; }
.page-quote { margin-top: 2rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; background: radial-gradient(80% 120% at 0% 0%, rgba(34, 212, 123, .16), transparent 60%), var(--ink-2); border: 1px solid rgba(126, 240, 176, .2); }
.page-quote p:first-child { font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; max-width: 24ch; }
.page-quote p:nth-child(2) { margin-top: 1rem; color: var(--haze); font-size: 1.1rem; }


/* ==========================================================
   Mobile & tablet polish
   ========================================================== */
@media (max-width: 1023px) {
  /* tree sits beside the headline with its labels, clearly visible */
  #hero-canvas { opacity: 1; }
  .hero-vignette { background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 55%, transparent 75%), linear-gradient(to bottom, transparent 75%, var(--ink) 100%); }
  .hero { padding-bottom: 4rem !important; }
  .hero-stack { position: relative; z-index: 1; }
}
@media (max-width: 767px) {
  /* mobile spacing only: remove stacked/duplicate vertical gaps */
  main > section.py-20,
  main > section.py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  main > section.pb-20 { padding-bottom: 2.5rem !important; }

  /* inner-page hero needs header clearance, but not a large gap below */
  main > .legal-hero { padding-top: 6.75rem !important; padding-bottom: 1.75rem !important; }
  main > .legal-hero + section.py-20 { padding-top: 2rem !important; }

  /* privacy page: avoid stacking grid gap + article/toc padding */
  main > .legal-hero + .mx-auto.max-w-site { padding-bottom: 3rem !important; }
  main > .legal-hero + .mx-auto.max-w-site > .grid { gap: 1.75rem !important; }
  .legal-toc { padding-top: 1.5rem; }
  article.legal { padding-top: 0; }
  .legal-section { padding-bottom: 1.75rem; margin-bottom: 1.75rem; }

  .hscroll-sticky { padding: 2.5rem 0 2rem; }
  .hscroll-viewport { margin-top: 1.75rem; }
  footer.relative { padding-top: 2.75rem !important; }
  main .mt-20, main .mt-16 { margin-top: 2rem !important; }
  main .mt-14, main .mt-12 { margin-top: 1.75rem !important; }
  .page-grid.mt-12 { margin-top: 1.75rem !important; }
  .page-quote { margin-top: 1.5rem; }

  .hero { padding-top: 6.5rem !important; }
  .section-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .statement { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .brand-title { font-size: clamp(2rem, 9.5vw, 2.8rem); }

  /* stats: numbers on one line, labels underneath */
  .stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  .stats dd { margin-top: 0; line-height: 1; }
  .stats dt { margin-top: .5rem; line-height: 1.35; }

  /* cards & panels breathe evenly */
  .stack-card { min-height: 0; padding: 1.75rem 1.4rem; gap: .75rem; }
  .stack-num { font-size: 4.5rem; }
  .flow { gap: 1.5rem; }
  .flow-item { padding: 1rem 0; }
  .models th, .models td { padding: .9rem 1rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* tablet: no empty space above/below the hero content */
  .hero { min-height: 0 !important; padding-top: 8rem !important; }
}


/* ==========================================================
   Brand logo (header, footer, preloader)
   ========================================================== */
.site-logo { display: block; width: auto; height: 42px; }
.site-logo--footer { height: 52px; }
.pre-logo { display: block; width: auto; height: clamp(56px, 9vw, 84px); }
@media (max-width: 639px) { .site-logo--header { height: 36px; } }

/* ==========================================================
   Desktop spacing balance — spacing only
   Removes oversized vertical gaps while preserving all design,
   content, colors, motion and component styling.
   ========================================================== */
@media (min-width: 1024px) {
  /* Major homepage sections */
  #about,
  #dataverse,
  #quality,
  #models,
  #creators,
  #owned,
  #contact {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  /* Belief / statement band between About and Max Pro */
  #about + section {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* About: reduce the stacked gap before the MTPL group panel */
  #about > .mx-auto.max-w-site + .mx-auto.max-w-site {
    margin-top: 4rem !important;
  }

  /* Max Pro: keep the content blocks closer to the heading */
  #dataverse [class~="mt-16"] {
    margin-top: 3.5rem !important;
  }

  /* Traffic quality: reduce only the large vertical intervals */
  #quality .stack {
    margin-top: 3rem !important;
  }
  #quality .lead360 {
    margin-top: 4rem !important;
  }
  #quality #flow {
    margin-top: 4rem !important;
  }

  /* Horizontal performance stack: retain pinning/animation, tighten entry space */
  #services .hscroll-sticky {
    padding-top: 4.25rem;
    padding-bottom: 3rem;
  }
  #services .hscroll-viewport {
    margin-top: 2.25rem;
  }

  /* Models / Creators / Owned: remove stacked utility gaps */
  #models [class~="mt-16"],
  #models [class~="mt-20"],
  #creators [class~="mt-16"],
  #creators [class~="mt-20"],
  #owned [class~="mt-16"],
  #owned [class~="mt-20"] {
    margin-top: 3.5rem !important;
  }

  #creators .tiers-grid {
    margin-top: 2.5rem !important;
  }

  #owned > .mx-auto.max-w-site > .grid {
    margin-top: 3.5rem !important;
  }

  /* CTA: avoid double outer + inner vertical padding */
  #owned + section {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  #owned + section .cta > .relative.z-10 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* Contact/footer handoff */
  #contact + footer,
  footer.relative {
    padding-top: 4rem !important;
  }
}

/* Mid-size screens: prevent desktop-size gaps from reappearing before mobile rules */
@media (min-width: 768px) and (max-width: 1023px) {
  #about,
  #dataverse,
  #quality,
  #models,
  #creators,
  #owned,
  #contact,
  #about + section,
  #owned + section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  #quality .lead360,
  #quality #flow,
  #about > .mx-auto.max-w-site + .mx-auto.max-w-site {
    margin-top: 3rem !important;
  }
  #owned + section .cta > .relative.z-10 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}


/* ---------- Theme toggle ---------- */
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid rgba(17,37,28,.14);background:rgba(17,37,28,.04);color:var(--cream);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .3s var(--ease-out)}
.theme-toggle:hover{transform:translateY(-1px);background:rgba(17,37,28,.08)}
.theme-toggle__icon{width:19px;height:19px;grid-area:1/1;transition:opacity .2s,transform .25s}
.theme-toggle__icon--moon{opacity:0;transform:scale(.75) rotate(-20deg)}
html[data-theme="dark"] .theme-toggle__icon--sun{opacity:0;transform:scale(.75) rotate(20deg)}
html[data-theme="dark"] .theme-toggle__icon--moon{opacity:1;transform:scale(1) rotate(0)}
.theme-toggle .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------- Dark theme: same green system ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#08110D;
  --ink-2:#0E1813;
  --ink-3:#14211A;
  --pink:#22D47B;
  --pink-soft:#7EF0B0;
  --electric:#7EF0B0;
  --flame:#C4F53B;
  --cream:#F1F6F2;
  --haze:#A4B4AB;
  --on-accent:#0B2018;
  --accent-text:#7EF0B0;
}
html[data-theme="dark"] body{background:radial-gradient(60% 40% at 0% 30%,rgba(14,122,82,.14),transparent 70%) fixed,radial-gradient(50% 40% at 100% 70%,rgba(34,212,123,.10),transparent 70%) fixed,var(--ink)!important;color:var(--cream)!important}
html[data-theme="dark"] .bg-ink{background-color:var(--ink)!important}
html[data-theme="dark"] .text-cream{color:var(--cream)!important}
html[data-theme="dark"] .text-cream\/70{color:rgba(241,246,242,.7)!important}
html[data-theme="dark"] .text-cream\/80{color:rgba(241,246,242,.8)!important}
html[data-theme="dark"] .text-cream\/85{color:rgba(241,246,242,.85)!important}
html[data-theme="dark"] .text-haze{color:var(--haze)!important}
html[data-theme="dark"] .border-cream\/\[0\.09\]{border-color:rgba(241,246,242,.09)!important}
html[data-theme="dark"] .border-cream\/\[0\.12\]{border-color:rgba(241,246,242,.12)!important}
html[data-theme="dark"] .site-header.is-scrolled{background-color:rgba(8,17,13,.78);border-bottom-color:rgba(241,246,242,.07)}
html[data-theme="dark"] .nav-link{color:rgba(241,246,242,.78)}
html[data-theme="dark"] .nav-link:hover{color:var(--cream);background:rgba(241,246,242,.06)}
html[data-theme="dark"] .theme-toggle{background:rgba(241,246,242,.05);border-color:rgba(241,246,242,.14);color:var(--cream)}
html[data-theme="dark"] .theme-toggle:hover{background:rgba(241,246,242,.09)}
html[data-theme="dark"] .menu-toggle{border-color:rgba(241,246,242,.14);background:rgba(241,246,242,.05)}
html[data-theme="dark"] .mobile-menu{background:radial-gradient(120% 80% at 100% 0%,rgba(34,212,123,.18),transparent 60%),rgba(8,17,13,.98)}
html[data-theme="dark"] .btn-ghost{color:var(--cream);border-color:rgba(241,246,242,.18);background:rgba(241,246,242,.04)}
html[data-theme="dark"] .btn-ghost:hover{border-color:rgba(241,246,242,.38);background:rgba(241,246,242,.08)}
html[data-theme="dark"] .btn-light{color:#11251C;background:#F2F7F3}
html[data-theme="dark"] .hero{background:#08110D}
html[data-theme="dark"] .hero-vignette{background:linear-gradient(90deg,rgba(8,17,13,.82) 0%,rgba(8,17,13,.32) 42%,transparent 62%),linear-gradient(to bottom,transparent 70%,var(--ink) 100%)}
html[data-theme="dark"] .hero-bg{filter:saturate(1.08)}
html[data-theme="dark"] .hero-chip{background:rgba(14,24,19,.62);border-color:rgba(241,246,242,.12);box-shadow:0 24px 50px -28px rgba(0,0,0,.55),inset 0 1px 0 rgba(241,246,242,.06)}
html[data-theme="dark"] .scroll-cue{border-color:rgba(241,246,242,.3)}
html[data-theme="dark"] .glass-pill{background:linear-gradient(160deg,rgba(241,246,242,.08),rgba(241,246,242,.025));border-color:rgba(241,246,242,.14);box-shadow:inset 0 1px 0 rgba(241,246,242,.08),0 20px 40px -20px rgba(0,0,0,.45)}
html[data-theme="dark"] .web3{background:linear-gradient(150deg,rgba(20,33,26,.96),rgba(12,24,18,.9));border-color:rgba(241,246,242,.08)}
html[data-theme="dark"] .radar{background:radial-gradient(circle,rgba(34,212,123,.16),rgba(8,17,13,0) 70%)}
html[data-theme="dark"] .pipeline li{background:rgba(241,246,242,.04);border-color:rgba(241,246,242,.1)}
html[data-theme="dark"] .tier,html[data-theme="dark"] .off-panel{border-color:rgba(241,246,242,.08)}
html[data-theme="dark"] .stack-3{background:#101B15;color:var(--cream);border-color:rgba(241,246,242,.1);box-shadow:0 24px 60px -32px rgba(0,0,0,.65)}
html[data-theme="dark"] .hero-tags .tag-pill,html[data-theme="dark"] .tag-pill{background:linear-gradient(160deg,rgba(15,28,21,.94),rgba(9,20,15,.9));border-color:rgba(126,240,176,.22);box-shadow:inset 0 1px 0 rgba(241,246,242,.06),0 14px 34px -14px rgba(34,212,123,.22)}
html[data-theme="dark"] .tag-word{color:var(--cream)}
html[data-theme="dark"] .tag-sep{background:rgba(241,246,242,.16)}
html[data-theme="dark"] .branding-dark{background:var(--ink);color:var(--cream)}
html[data-theme="dark"] .models-scroll{background:var(--ink-2)}
html[data-theme="dark"] .models thead th{background:rgba(241,246,242,.02)}
html[data-theme="dark"] .models th,html[data-theme="dark"] .models td{border-bottom-color:rgba(241,246,242,.06)}
html[data-theme="dark"] .models tbody tr:hover{background:rgba(34,212,123,.07)}
html[data-theme="dark"] .preloader{background:#08110D;color:var(--cream)}
@media(max-width:1023px){html[data-theme="dark"] .hero-vignette{background:linear-gradient(to bottom,rgba(8,17,13,.5),rgba(8,17,13,.28) 50%,var(--ink) 100%)}}