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

:root {
  --ink: #08070C;
  --ink-2: #111018;
  --ink-3: #1C1A25;
  --pink: #22D47B;
  --pink-soft: #7EF0B0;
  --electric: #0E7A52;
  --flame: #C4F53B;
  --cream: #F3EEE6;
  --haze: #A9A4B4;
  --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(--flame); outline-offset: 3px; border-radius: 6px; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--flame); color: var(--ink); 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(8, 7, 12, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .07);
}
.nav-link {
  position: relative; display: inline-block; padding: .5rem .85rem;
  color: rgba(243, 238, 230, .78); border-radius: 999px; transition: color .25s, background-color .25s;
}
.nav-link:hover { color: var(--cream); background: rgba(255, 255, 255, .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(--ink); 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(255, 255, 255, .18); background: rgba(255, 255, 255, .03); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.btn-light { color: var(--ink); background: var(--cream); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .5); }
.btn-light:hover { transform: translateY(-2px); background: #fff; }

/* ---------- Mobile menu ---------- */
.menu-toggle {
  position: relative; z-index: 60; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .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(8, 7, 12, .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(--flame); }
.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(28, 26, 37, .45); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .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(169, 164, 180, .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(169, 164, 180, .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(255, 255, 255, .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(255, 255, 255, .08);
  transition: transform .5s var(--ease-out);
}
.flow-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.flow-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--pink-soft); 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.15rem, 2vw, 1.45rem); letter-spacing: -.02em; line-height: 1.15; }
.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(--ink); }

.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(8, 7, 12, .2) 75%);
  box-shadow: 0 0 90px -10px rgba(34, 212, 123, .7), inset 0 0 30px rgba(255, 255, 255, .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(243, 238, 230, .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(255, 255, 255, .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(255, 255, 255, .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(243, 238, 230, .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(8, 7, 12, .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(28, 26, 37, .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(8, 7, 12, .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(255, 255, 255, .08); }
.contact-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; transition: color .3s; }
.contact-row:hover { color: var(--flame); }
.contact-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(34, 212, 123, .14); color: var(--pink-soft); }
.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(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .9rem; font-weight: 500; }
.field label span { color: var(--flame); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cream);
  background: rgba(8, 7, 12, .7); border: 1px solid rgba(255, 255, 255, .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(169, 164, 180, .7); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .26); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink-soft); box-shadow: 0 0 0 4px rgba(34, 212, 123, .22); }
.field [aria-invalid="true"] { border-color: #FF7A8A; }
.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: #FF9AA6; }
.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(255, 255, 255, .14); color: var(--haze); transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease-out); }
.social:hover { color: var(--ink); 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(28, 26, 37, .8); border: 1px solid rgba(255, 255, 255, .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::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(28, 26, 37, .9), rgba(17, 16, 24, .6)); border: 1px solid rgba(255, 255, 255, .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(243, 238, 230, .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(243, 238, 230, .3); } 10%, 30% { color: var(--flame); } }

/* 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(8, 7, 12, 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(--ink); background: var(--grad); box-shadow: 0 0 50px rgba(196, 245, 59, .45); }

/* Pipeline */
.pipeline { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.pipeline li { position: relative; display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); font-weight: 600; z-index: 1; }
.pipeline li:last-child { background: var(--grad); color: var(--ink); border-color: transparent; }
.pipe-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink-soft); box-shadow: 0 0 12px var(--pink-soft); }
.pipeline li:last-child .pipe-dot { background: var(--ink); box-shadow: none; }
@media (min-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .pipeline::before, .pipeline::after { content: ""; position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; }
  .pipeline::before { background: rgba(255, 255, 255, .1); }
  .pipeline::after { background: linear-gradient(90deg, transparent, var(--flame), transparent); background-size: 30% 100%; background-repeat: no-repeat; animation: pipeFlow 3s linear infinite; }
}
@keyframes pipeFlow { from { background-position: -30% 0; } to { background-position: 130% 0; } }

/* 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(255, 255, 255, .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(255, 255, 255, .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(--flame); }
.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(255, 255, 255, .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(255, 255, 255, .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: #08070C; }
.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(255, 255, 255, .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(--pink-soft); 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(--flame); 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(--flame); }
.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(255, 255, 255, .07); }
.off-list svg { flex: none; color: var(--flame); }

/* ==========================================================
   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(243, 238, 230, .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(243, 238, 230, .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(255, 255, 255, .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(243, 238, 230, .55); }
.m-star { color: var(--flame); 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-bottom: .08em; margin-bottom: -.08em; }
.js .split-title .w > span { display: inline-block; transform: translateY(105%); 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(255, 255, 255, .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(255, 255, 255, .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(0, 0, 0, .6);
}
@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(255, 255, 255, .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(--ink); }
.stack-1 .stack-copy { color: var(--haze); }
.stack-2 { background: var(--grad); color: var(--ink); }
.stack-2 .stack-num { color: rgba(8, 7, 12, .9); }
.stack-2 .stack-icon { background: var(--ink); color: var(--flame); }
.stack-2 .stack-copy { color: rgba(8, 7, 12, .8); }
.stack-3 { background: var(--cream); color: var(--ink); }
.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(8, 7, 12, .72); }
.stack-2 :focus-visible, .stack-3 :focus-visible { outline-color: var(--ink); }
@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(--flame); }
.pipeline::after { display: none; }
.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: #040506; }
.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(4, 5, 6, .85) 0%, rgba(4, 5, 6, .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(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .85rem; color: rgba(243, 238, 230, .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(4, 5, 6, .55), rgba(4, 5, 6, .35) 50%, var(--ink) 100%); }
}
.glass-pill {
  padding: 1rem 1.5rem; border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.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(255, 255, 255, .06); }
.brand-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .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 rgba(126, 240, 176, .85); }
.branding-dark .brand-ring text { fill: var(--haze); }
.branding-dark .brand-point { border-top: 1px solid rgba(255, 255, 255, .14); padding: 1.5rem 1.4rem; border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .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(--flame); }

/* 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(255, 255, 255, .15)); }
.tag-left .tag-line { background: linear-gradient(270deg, rgba(196, 245, 59, .8), rgba(255, 255, 255, .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(10, 14, 13, .55); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .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(--ink); 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; } }