/* =========================================================
   OMNIS DIGITAL — Landing Styles
   Apple-style liquid glass · violet ecosystem palette
   ========================================================= */
:root{
  /* palette — violet / indigo (Omnis) */
  --blue:#7c5cff;          /* primary accent (name kept for legacy rules) */
  --blue-600:#6338f0;
  --blue-2:#a78bfa;
  --blue-soft:#efe9ff;
  --sky-1:#e7ddff;
  --sky-2:#f4f0ff;

  --violet:#7c5cff;
  --violet-deep:#5b34e8;
  --magenta:#c77dff;
  --cyan:#38bdf8;

  --ink:#160f2e;
  --ink-2:#241a45;
  --muted:#6b6485;
  --muted-2:#9d97b5;

  --bg:#fbfaff;
  --bg-soft:transparent;   /* sections stay clear so the ambient mesh shows */
  --card:#ffffff;
  --dark:#1a1235;

  --line:#e7defc;
  --line-soft:#efe9fb;

  /* glass tokens — Apple liquid glass */
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  --glass-fill-strong:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.10));
  /* a warm-white hairline reads as a near-invisible seam against the
     light lavender page — tint it toward violet-gray so every card edge
     stays crisp and legible instead of dissolving into the backdrop */
  --glass-border:rgba(146,124,201,.32);
  --glass-shadow:
    0 8px 30px -12px rgba(60,25,140,.14),
    inset 0 0 0 1px rgba(146,124,201,.14),
    inset 0 1px 0 rgba(255,255,255,.5);

  /* pastel icon-chip rotation — reused across value/channels/steps/ad-tiles
     for Apple-Health-style variety instead of one monotone violet chip */
  --tint-a-bg:#efe9ff; --tint-a-fg:#7c5cff;   /* violet */
  --tint-b-bg:#ffe9f3; --tint-b-fg:#c026d3;   /* magenta */
  --tint-c-bg:#e3f4ff; --tint-c-fg:#0284c7;   /* cyan/teal */
  --tint-d-bg:#fff2df; --tint-d-fg:#b45309;   /* amber */
  --tint-e-bg:#e7f7ee; --tint-e-fg:#0f9d58;   /* green */

  /* legacy aliases (kept so older rules resolve to violet) */
  --gold:var(--blue);
  --gold-2:var(--blue-2);
  --gold-deep:var(--blue-600);
  --grad-gold:linear-gradient(100deg,#7c5cff 0%,#c77dff 100%);

  --radius:24px;
  --radius-sm:18px;
  --maxw:1160px;
  --shadow:0 20px 46px -22px rgba(60,25,140,.13);
  --shadow-sm:0 8px 20px -12px rgba(60,25,140,.10);
  /* Uber / Pinterest-style geometric sans */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Plus Jakarta Sans',var(--font);
  --logo:'Jost',var(--display);
  /* native Apple SF Pro stack — renders true SF Pro on macOS/iOS */
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',var(--display);
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden) prevents sideways scroll from decorative
   overflow WITHOUT turning html/body into a scroll container — which would
   otherwise break position:sticky (used by the pinned pillars section). */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ambient liquid-glass backdrop ----------
   Fixed, softly-animated violet mesh so glass panels have colour to
   refract and frost. Sits behind all content. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(38% 42% at 6% 4%, rgba(124,92,255,.20) 0%, transparent 58%),
    radial-gradient(34% 40% at 96% 2%, rgba(199,125,255,.16) 0%, transparent 60%),
    radial-gradient(42% 46% at 94% 98%, rgba(56,189,248,.13) 0%, transparent 60%),
    radial-gradient(46% 52% at 4% 100%, rgba(167,139,250,.15) 0%, transparent 62%),
    linear-gradient(160deg,#fdfcff 0%,#f8f6ff 52%,#f5f1fc 100%);
  background-attachment:fixed;
}
/* drifting orbs add life + give refraction something moving to bend */
body::after{
  content:"";
  position:fixed;inset:-15%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(124,92,255,.14), transparent 70%) 6% 18%/360px 360px no-repeat,
    radial-gradient(closest-side, rgba(199,125,255,.12), transparent 70%) 88% 26%/420px 420px no-repeat,
    radial-gradient(closest-side, rgba(56,189,248,.10), transparent 70%) 74% 88%/400px 400px no-repeat,
    radial-gradient(closest-side, rgba(167,139,250,.12), transparent 70%) 16% 82%/380px 380px no-repeat;
  filter:blur(6px);
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-1.5%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2%,0) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- typography helpers ---------- */
.section{padding:96px 0;position:relative}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center}
.kicker{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
  padding:7px 16px;border-radius:999px;background:var(--blue-soft);
}
.section-title{
  font-family:var(--display);font-weight:700;line-height:1.12;
  font-size:clamp(1.8rem,4vw,2.75rem);letter-spacing:-.02em;margin-bottom:14px;color:var(--ink);
}
.section-lead{color:var(--muted);font-size:1.05rem}
.grad{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
  white-space:nowrap;
}
.btn--lg{padding:15px 30px;font-size:1rem}
.btn--block{width:100%}
.btn--blue,.btn--gold{
  background:linear-gradient(135deg,var(--violet) 0%,var(--magenta) 100%);color:#fff;
  box-shadow:0 14px 30px -12px rgba(124,92,255,.7),inset 0 1px 1px rgba(255,255,255,.4);
}
.btn--blue:hover,.btn--gold:hover{transform:translateY(-3px);background:linear-gradient(135deg,var(--violet-deep) 0%,var(--violet) 100%);box-shadow:0 22px 40px -12px rgba(124,92,255,.8),inset 0 1px 1px rgba(255,255,255,.4)}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(26,18,53,.6)}
.btn--ghost{background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.08));border-color:var(--glass-border);color:var(--ink);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
.btn--ghost:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue)}
.btn--play{background:transparent;color:var(--ink);padding-left:8px}
.btn--play .play-ic{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#fff;color:var(--blue);font-size:.8rem;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .25s ease;
}
.btn--play:hover .play-ic{transform:scale(1.08)}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- inline icon sizing ---------- */
.v-ico svg,.chan__ic svg{width:28px;height:28px}
.ad-ic svg{width:26px;height:26px}
.pcard__ic svg{width:23px;height:23px}
.viz-chip__ic svg{width:21px;height:21px}
.contact__points li span svg{width:20px;height:20px}
.offer__ic svg{width:26px;height:26px}

/* ---------- richer, colorful icon badges (reference_ui: chunky, glowing,
   Apple-Health-style icon chips) — one shared treatment so every card's
   icon reads as a bold little illustration, not a thin line glyph ---------- */
.v-ico,.chan__ic,.ad-ic,.offer__ic,.step__ic,.ppin__ic{
  position:relative;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--oc,var(--blue)) 22%,transparent),
    0 10px 22px -12px color-mix(in srgb,var(--oc,var(--blue)) 55%,transparent);
  stroke-width:2.1;
}
.v-ico svg,.chan__ic svg,.ad-ic svg,.offer__ic svg,.step__ic svg,.ppin__ic svg{stroke-width:2.15}

/* icon-badge pop-in reveal (JS adds .is-in via IntersectionObserver).
   Guarded behind no-preference so reduced-motion users — and anyone
   whose JS fails to run — always see the icons, just without the pop. */
@media (prefers-reduced-motion:no-preference){
  .v-ico,.chan__ic,.ad-ic,.offer__ic,.step__ic{
    transform:scale(.4) rotate(-8deg);opacity:0;
    transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;
  }
  .v-ico.is-in,.chan__ic.is-in,.ad-ic.is-in,.offer__ic.is-in,.step__ic.is-in{
    transform:scale(1) rotate(0);opacity:1;
  }
}

/* ---------- liquid glass surface ----------
   True Apple liquid glass: heavy blur, near-transparent fill,
   barely-visible borders, soft specular highlight.
   The ambient mesh (body::before / ::after) provides the colour
   that refracts through the frosted panels. */
.glass{
  position:relative;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(36px) saturate(1.5);
  -webkit-backdrop-filter:blur(36px) saturate(1.5);
  isolation:isolate;
  overflow:hidden;
}
/* soft specular highlight — barely-there top-left glare */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 30%);
  opacity:1;z-index:1;
}
.glass > *{position:relative;z-index:2}
/* once JS wires refraction it adds .lg-on — soften the base blur so the
   filter does the work and interiors stay crisp */
.glass.lg-on{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--blue);box-shadow:0 0 10px rgba(124,92,255,.5);
  transition:width .1s linear;
}

/* =========================================================
   SPLASH INTRO — mirrors the brand sheet
   Exact brand purple (#49397a, sampled from the artwork) so the emblem's
   own purple tile blends seamlessly and reads as a floating mark. The
   4.2s CSS auto-hide is a safety net if GSAP/script.js never runs.
   ========================================================= */
html.splash-active{overflow:hidden}
.splash{
  position:fixed;inset:0;z-index:9998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,8vh,90px);
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(255,255,255,.06) 0%, transparent 70%),
    #49397a;
  animation:splashAutoHide 0s 4.2s forwards;
}
@keyframes splashAutoHide{to{opacity:0;visibility:hidden;pointer-events:none}}
.splash__emblem{
  width:clamp(150px,26vw,240px);height:auto;opacity:0;border-radius:8px;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.4));
}
.splash__concepts{display:flex;gap:clamp(30px,8vw,90px);opacity:1}
.splash__concept{display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0}
.splash__cg{width:clamp(38px,5vw,52px);height:clamp(48px,6vw,66px)}
.splash__concept span{
  font-family:var(--display);font-weight:500;font-size:clamp(.66rem,1.4vw,.8rem);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(239,231,216,.85);
}
.splash__skip{
  position:absolute;bottom:28px;right:28px;z-index:1;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24);
  font-family:var(--display);font-size:.82rem;font-weight:600;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.splash__skip:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
@media (max-width:520px){
  .splash__concepts{gap:22px}
  .splash__concept span{font-size:.6rem;letter-spacing:.1em}
}

/* =========================================================
   NAVBAR
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding:18px 0;
  transition:padding .3s ease,background .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* auto-hide: slides up when scrolling down, back on scroll up (JS toggles) */
.nav--hidden{transform:translateY(-135%)}
.nav .container{
  border-radius:20px;padding-top:8px;padding-bottom:8px;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
  border:1px solid transparent;
}
.nav.scrolled{padding:10px 0}
.nav.scrolled .container{
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.28));
  backdrop-filter:blur(20px) saturate(1.7);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 20px 40px -24px rgba(60,25,140,.5),inset 0 1px 1px rgba(255,255,255,.7);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* ---------- OMNIS wordmark logo (matches brand sheet) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;line-height:1}
.brand__text{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;padding-top:6px}
.brand__mark{width:38px;height:38px;flex:none;border-radius:10px;object-fit:cover;box-shadow:0 6px 16px -8px rgba(60,25,140,.5)}
.brand__word{
  font-family:var(--logo);font-weight:400;      /* thin geometric, Futura-like */
  font-size:1.55rem;letter-spacing:.3em;line-height:1;
  padding-left:.3em;                             /* offset trailing tracking → optically centred */
  display:inline-block;position:relative;white-space:nowrap;
  background:linear-gradient(180deg,#08060f 0%,#241a3d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* the dotted "i" — solid violet stem (NOT the parent's transparent
   gradient-clip fill, which it would otherwise inherit with nothing of
   its own to clip against, rendering it invisible) + violet tittle above */
.brand__i{position:relative;display:inline-block;color:var(--violet);-webkit-text-fill-color:var(--violet)}
/* letter-spacing:.3em pads the glyph box on its right, so a plain left:50%
   lands right of the actual stem — pull back half the tracking (.15em) so
   the tittle sits dead-centre over the "I". */
.brand__i::before{
  content:"";position:absolute;left:calc(50% - .15em);top:-.18em;
  width:.22em;height:.22em;border-radius:50%;
  transform:translateX(-50%);
  background:var(--violet);
  box-shadow:0 2px 8px rgba(124,92,255,.55);
}
.brand__sub{
  display:block;
  font-family:var(--logo);font-weight:400;
  font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;line-height:1;
  padding-left:.5em;color:var(--muted);
}
/* footer sits on a dark panel */
.brand__word--light{background:linear-gradient(180deg,#ffffff 0%,#cdbcff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand__sub--light{color:#9aa6bd}
.nav__links{display:flex;gap:30px}
.nav__links a{
  font-size:.92rem;color:var(--muted);font-weight:500;position:relative;padding:4px 0;
  transition:color .2s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--blue);transition:width .25s ease;border-radius:2px;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__close{display:none;position:absolute;top:22px;right:22px;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background .2s ease,color .2s ease,transform .2s ease}
.nav__close:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:rotate(90deg)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:120px 0 0}
.hero__card{
  position:relative;overflow:hidden;border-radius:36px;
  padding:70px 60px;
  background:
    radial-gradient(130% 120% at 85% -20%, rgba(199,125,255,.28) 0%, transparent 52%),
    radial-gradient(90% 90% at 8% 110%, rgba(56,189,248,.22) 0%, transparent 55%),
    linear-gradient(150deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.4) 100%);
  backdrop-filter:blur(18px) saturate(1.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 50px 100px -50px rgba(60,25,140,.55),inset 0 1px 1px rgba(255,255,255,.8);
}
.hero__cloud{position:absolute;border-radius:50%;filter:blur(26px);opacity:.7;z-index:0}
.hero__cloud--1{width:300px;height:300px;top:-70px;right:6%;background:radial-gradient(circle,#ffffff,transparent 70%)}
.hero__cloud--2{width:240px;height:240px;bottom:-30px;right:24%;background:radial-gradient(circle,#dcebff,transparent 70%)}
.hero__cloud--3{width:200px;height:200px;top:44%;left:-50px;background:radial-gradient(circle,#ffffff,transparent 70%)}
.hero__orb{position:absolute;border-radius:50%;z-index:0;filter:blur(2px);opacity:.5}
.hero__orb--a{width:16px;height:16px;top:22%;left:44%;background:var(--blue);animation:floatY 6s ease-in-out infinite}
.hero__orb--b{width:10px;height:10px;bottom:20%;left:38%;background:#a5b4fc;animation:floatY 5s ease-in-out infinite .8s}

/* amazing hero network-sphere SVG — sits behind content, glows through the glass viz cards */
.hero__svg{
  position:absolute;z-index:1;pointer-events:none;
  top:50%;right:-4%;transform:translateY(-50%);
  width:min(620px,58%);height:auto;opacity:.95;
  filter:drop-shadow(0 30px 60px rgba(91,52,232,.35));
}
@media (max-width:1024px){
  .hero__svg{right:50%;transform:translate(50%,-50%);width:min(560px,90%);opacity:.5}
}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero__inner{max-width:600px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);padding:8px 16px;border-radius:999px;background:#fff;
  box-shadow:var(--shadow-sm);margin-bottom:24px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero__title{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--ink);
  font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.05;margin-bottom:22px;
}
.hero__title .grad{
  background:linear-gradient(100deg,#7c5cff,#c77dff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero__sub{color:var(--muted);font-size:1.1rem;max-width:500px;margin-bottom:32px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:34px}
.mini-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);flex:none}

/* trust avatars */
.hero__trust{display:flex;align-items:center;gap:14px}
.hero__avatars{display:flex}
.hero__avatars span{
  width:38px;height:38px;border-radius:50%;border:3px solid #fff;margin-left:-12px;
  box-shadow:0 4px 10px -4px rgba(60,25,140,.4);
}
.hero__avatars span:nth-child(1){margin-left:0;background:linear-gradient(135deg,#7dd3fc,#3b82f6)}
.hero__avatars span:nth-child(2){background:linear-gradient(135deg,#a5b4fc,#6366f1)}
.hero__avatars span:nth-child(3){background:linear-gradient(135deg,#fca5f1,#c026d3)}
.hero__avatars span:nth-child(4){background:linear-gradient(135deg,#6ee7b7,#059669)}
.hero__trust p{font-size:.86rem;color:var(--muted);line-height:1.35}
.hero__trust strong{color:var(--ink);font-family:var(--display);font-weight:600}

/* hero visual composition */
.hero__visual{position:relative;height:400px}
.viz-card,.viz-chip{
  position:absolute;
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 30px 60px -28px rgba(60,25,140,.5),inset 0 1px 1px rgba(255,255,255,.8);
}
.viz-card--main{
  top:74px;left:9%;width:296px;border-radius:24px;padding:22px;z-index:2;
}
.viz-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.viz-card__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ink)}
.viz-card__tag{font-size:.68rem;font-weight:600;color:#16a34a;background:rgba(34,197,94,.12);padding:3px 10px;border-radius:999px}
.viz-bars{display:flex;align-items:flex-end;gap:11px;height:110px;margin-bottom:20px}
.viz-bars span{flex:1;height:var(--h);border-radius:6px 6px 4px 4px;background:linear-gradient(180deg,#9b7bff,#7c5cff);animation:barGrow 1.1s cubic-bezier(.2,.7,.3,1) both}
.viz-bars span:nth-child(6){background:linear-gradient(180deg,#b9a5ff,#6338f0);box-shadow:0 8px 18px -6px rgba(124,92,255,.6)}
@keyframes barGrow{from{height:0}}
.viz-card__foot{display:flex;gap:26px;border-top:1px solid var(--line-soft);padding-top:16px}
.viz-card__foot b{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--blue);display:block;line-height:1}
.viz-card__foot small{color:var(--muted);font-size:.74rem}

.viz-chip{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 16px;z-index:3}
.viz-chip--reach{top:4px;right:0}
.viz-chip__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:1.2rem;color:var(--blue);background:var(--blue-soft)}
.viz-chip b{display:block;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink)}
.viz-chip small{color:var(--muted);font-size:.74rem}
.viz-chip--ring{bottom:14px;right:4%}
.viz-ring{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--blue) calc(var(--v)*1%),#e3ebfa 0);
}
.viz-ring span{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.66rem;color:var(--blue)}

/* gentle floating */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float-a{animation:floatY 6s ease-in-out infinite}
.float-b{animation:floatY 5s ease-in-out infinite .4s}
.float-c{animation:floatY 7s ease-in-out infinite 1s}

/* hero stats strip */
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.stat{
  background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.32));
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:22px 24px;
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 18px 36px -22px rgba(60,25,140,.4),inset 0 1px 1px rgba(255,255,255,.7);
}
.stat__num{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--ink);display:block}
.stat__lbl{font-size:.82rem;color:var(--muted);margin-top:6px;display:block}

/* =========================================================
   HERO STAGES — Apple-clean brand statement + campaign pitch
   Big refined SF-Pro typography, generous whitespace, violet
   used only as a sparing accent. No glass here.
   ========================================================= */
.stage{
  position:relative;
  padding:clamp(96px,15vh,190px) 0;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.stage--brand{min-height:92vh}
@supports (min-height:100svh){.stage--brand{min-height:88svh}}
/* faint violet aura behind the brand headline (subtle, modern) */
.stage--brand::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 46% at 50% 34%, rgba(124,92,255,.12), transparent 68%);
}
.stage__inner{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center}

/* centered OMNIS lockup at the top of the hero */
.stage__logo{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(28px,5vh,52px)}
.brand__mark--hero{width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:20px;object-fit:cover;margin-bottom:18px;box-shadow:0 18px 40px -14px rgba(91,52,232,.5)}
.stage__logo .brand__word{font-size:clamp(2.1rem,5.2vw,3.3rem);letter-spacing:.3em;padding-left:.3em;line-height:1}
.stage__logo .brand__word .brand__i::before{top:-.08em;width:.16em;height:.16em}
.stage__logo .brand__sub{font-size:clamp(.62rem,1.5vw,.82rem);letter-spacing:.52em;padding-left:.52em;margin-top:8px}

.stage__eyebrow{
  font-family:var(--display);font-weight:600;font-size:clamp(.72rem,1.5vw,.84rem);
  letter-spacing:.24em;text-transform:uppercase;color:var(--violet);
  margin-bottom:clamp(20px,3vh,32px);
}

.stage__title{
  font-family:var(--sf);font-weight:600;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.9rem,8.4vw,6.6rem);color:var(--ink);
  margin:0 0 clamp(22px,3.4vh,34px);
}
.stage__title--sm{font-size:clamp(2.5rem,7vw,5.4rem)}
.stage__title .accent{
  background:linear-gradient(115deg,var(--violet) 10%,var(--magenta) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stage__lead{
  font-family:var(--sf);font-weight:400;color:var(--muted);
  font-size:clamp(1.12rem,2.2vw,1.45rem);line-height:1.46;max-width:680px;
}
/* handwritten cursive accent word */
.cursive{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:1.15em;
  display:inline-block;
  background:linear-gradient(115deg,var(--violet) 10%,var(--magenta) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:rotate(-2deg);
  position:relative;
  /* hidden initially — GSAP reveals */
  clip-path:inset(0 100% 0 0);
}
/* decorative underline stroke */
.cursive::after{
  content:"";position:absolute;left:4%;right:4%;bottom:.08em;height:.08em;
  border-radius:1em;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  opacity:.5;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.cursive.is-written::after{transform:scaleX(1)}
/* typography ladder: subline between headline and lead */
.stage__sub{
  font-family:var(--sf);font-weight:500;color:var(--muted);
  font-size:clamp(1.3rem,2.8vw,1.85rem);line-height:1.35;
  letter-spacing:-.01em;max-width:700px;
  margin-bottom:clamp(10px,1.5vh,18px);
}

/* CTA buttons — Apple pill + play link */
.stage__cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;margin-top:clamp(34px,5vh,48px)}
.btn-x{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-weight:600;font-size:1.02rem;cursor:pointer;
  transition:transform .28s cubic-bezier(.3,1,.4,1),box-shadow .28s ease,background .28s ease,color .2s ease;
}
.btn-x--primary{
  padding:15px 32px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  box-shadow:0 14px 34px -12px rgba(124,92,255,.7),inset 0 1px 1px rgba(255,255,255,.35);
}
.btn-x--primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 44px -12px rgba(124,92,255,.8),inset 0 1px 1px rgba(255,255,255,.35)}
.btn-x__arrow{transition:transform .28s ease}
.btn-x--primary:hover .btn-x__arrow{transform:translateX(5px)}
.btn-x--play{padding:14px 10px;color:var(--ink)}
.btn-x__play{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-size:.7rem;color:var(--violet);background:rgba(124,92,255,.1);
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.18);
  transition:transform .28s ease,background .28s ease;
}
.btn-x--play:hover{color:var(--violet)}
.btn-x--play:hover .btn-x__play{transform:scale(1.08);background:rgba(124,92,255,.16)}

/* scroll cue */
.stage__scroll{position:absolute;left:50%;bottom:clamp(22px,4vh,44px);transform:translateX(-50%);opacity:.55;transition:opacity .3s ease}
.stage__scroll:hover{opacity:1}
.stage__scroll-mouse{display:block;width:26px;height:42px;border:2px solid var(--muted-2);border-radius:14px;position:relative}
.stage__scroll-mouse i{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--violet);transform:translateX(-50%);animation:scrollDot 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stage__scroll-mouse i{animation:none}}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{padding:44px 0 12px}
.trust__inner{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}
.trust__label{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);font-weight:500}
.trust__label .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.trust__logos{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.trust__logos span{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#c2ccdb;letter-spacing:-.01em;transition:color .2s ease}
.trust__logos span:hover{color:var(--muted)}

/* =========================================================
   VALUE
   ========================================================= */
.value{background:var(--bg-soft)}
.value__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* value cards now share the widget language: white card, labelled header,
   pastel tinted panel holding a per-card SVG graphic + the description */
.value__card{
  position:relative;display:flex;flex-direction:column;padding:16px;border-radius:22px;background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:0 20px 44px -26px rgba(60,25,140,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.value__card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -26px rgba(60,25,140,.38)}
.value__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.value__ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;color:var(--oc,var(--blue));background:var(--obg,var(--blue-soft))}
.value__ic svg{width:18px;height:18px}
.value__title{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.value__panel{
  flex:1;border-radius:16px;padding:16px;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--oc) 22%,#fff) 0%, transparent 60%),
    color-mix(in srgb,var(--oc) 12%,#fff);
}
.value__desc{color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:auto}
/* per-card graphics */
.value__gfx{display:block}
.value__gfx--area{width:100%;height:66px}
.value__gfx--area polygon{fill:var(--oc);opacity:.18}
.value__gfx--area polyline{fill:none;stroke:var(--oc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.value__gfx:not(.value__gfx--area){width:76px;height:66px;margin:2px auto 0}
.value__gfx .ring{fill:none;stroke:var(--oc);stroke-width:3.5;opacity:.5}
.value__gfx .dot{fill:var(--oc)}
.value__gfx .arrow{fill:none;stroke:var(--oc);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.value__gfx--funnel path{fill:var(--oc)}
.value__gfx--bars rect{fill:var(--oc)}

/* ---- snapshot widget row — Apple/reference_ui dashboard-widget cards:
   solid white card, small labelled header + "+" affordance, and a pastel
   tinted inner panel holding a live graphic (area chart / ring / bars / stat) ---- */
.snapshot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.snap-card{
  position:relative;display:flex;flex-direction:column;padding:16px;border-radius:22px;background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:0 20px 44px -26px rgba(60,25,140,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.snap-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -26px rgba(60,25,140,.38)}
.snap-card__head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.snap-card__ic{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;color:var(--oc,var(--blue));background:var(--obg,var(--blue-soft))}
.snap-card__ic svg{width:15px;height:15px}
.snap-card__label{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--ink)}
/* the little dark "+" affordance top-right, exactly like the reference widgets */
.snap-card__add{
  margin-left:auto;width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--ink);color:#fff;font-size:1.1rem;line-height:1;font-weight:500;
  box-shadow:0 6px 14px -6px rgba(22,15,46,.6);
}
/* pastel inner panel — the tinted graphic surface */
.snap-card__panel{
  position:relative;flex:1;border-radius:16px;padding:16px;min-height:150px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--oc) 22%,#fff) 0%, transparent 60%),
    color-mix(in srgb,var(--oc) 12%,#fff);
}
.snap-card__panel--center{align-items:center;justify-content:center}
.snap-card__figure b{display:block;font-family:var(--display);font-weight:800;font-size:1.65rem;color:var(--ink);line-height:1}
.snap-card__figure small{display:block;color:var(--muted);font-size:.74rem;margin-top:5px}
.snap-card__figure--top{margin-bottom:auto}

/* area chart */
.snap-area{position:absolute;top:14px;left:0;width:100%;height:70px;display:block}
.snap-area polygon{fill:var(--oc);opacity:.16}
.snap-area polyline{fill:none;stroke:var(--oc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.snap-area circle{fill:#fff;stroke:var(--oc);stroke-width:2.5}
/* ring */
.snap-donut{width:112px;height:112px;margin:0;
  background:conic-gradient(var(--oc,var(--blue)) 0 calc(var(--pos)*1%),color-mix(in srgb,var(--oc,var(--blue)) 35%,#fff) calc(var(--pos)*1%) calc((var(--pos) + var(--neu))*1%),rgba(255,255,255,.7) 0);
}
.snap-donut .donut__hole{inset:16px}
.snap-donut .donut__hole b{font-size:1.4rem;color:var(--oc,var(--blue))}
.snap-donut .donut__hole small{color:var(--muted)}
/* bars */
.snap-bars{height:66px;gap:8px;margin:0}
.snap-bars span{background:var(--oc,var(--blue));border-radius:6px 6px 3px 3px;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--oc) 60%,transparent)}
/* squiggle accent */
.snap-squiggle{width:70%;height:34px;align-self:flex-end}
.snap-squiggle polyline{fill:none;stroke:var(--oc);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1024px){.snapshot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.snapshot-grid{grid-template-columns:1fr}}

/* =========================================================
   IMPACT — WITH vs WITHOUT DIGITAL
   Reference_ui-style pastel widget grid + a segmented pill
   control (like the reference's "For You / Library" tab).
   ========================================================= */
.impact{padding-top:56px}

/* muted "before" glass — desaturated, quiet, low-contrast */
.glass--muted{
  background:linear-gradient(150deg,rgba(235,235,240,.6),rgba(235,235,240,.32));
  border-color:rgba(120,120,135,.28);
  filter:saturate(.55);
}
.glass--muted::before{opacity:.4}

/* vivid "after" glass — brand gradient bleeding through the frost */
.glass--vivid{
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(199,125,255,.30) 0%, transparent 55%),
    linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
  border-color:rgba(255,255,255,.6);
}

/* segmented pill toggle */
.impact__toggle{
  position:relative;display:flex;gap:4px;width:max-content;margin:0 auto 44px;
  padding:5px;border-radius:999px;background:rgba(120,110,150,.1);
  box-shadow:inset 0 1px 3px rgba(60,25,140,.08);
}
.impact__toggle-thumb{
  position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc(50% - 5px);
  border-radius:999px;background:#fff;box-shadow:0 6px 16px -8px rgba(60,25,140,.35);
  transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:0;
}
.impact__toggle[data-active="with"] .impact__toggle-thumb{transform:translateX(100%)}
.impact__toggle-btn{
  position:relative;z-index:1;border:0;background:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--muted);
  padding:10px 22px;border-radius:999px;transition:color .3s ease;white-space:nowrap;
}
.impact__toggle-btn.is-active{color:var(--ink)}

/* two-column comparison, connected by a big directional arrow */
.impact__cols{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:start}
.impact__arrow{
  align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;flex:none;
  box-shadow:0 16px 30px -14px rgba(124,92,255,.6);
}
.impact__arrow svg{width:22px;height:22px}
.impact__col-head{
  display:flex;align-items:center;gap:14px;padding:20px 22px;margin-bottom:16px;
}
.impact__col-ic{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:13px;
  background:rgba(120,110,150,.14);color:var(--muted);
}
.glass--vivid .impact__col-ic{background:var(--blue-soft);color:var(--blue)}
.impact__col-ic svg{width:24px;height:24px}
.impact__col-head b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.impact__col-head small{color:var(--muted);font-size:.82rem}

.impact__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.impact__stat{padding:20px 18px;text-align:left}
.impact__stat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.impact__stat-ic{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(120,110,150,.14);color:var(--muted);
}
.glass--vivid .impact__stat-ic{background:var(--blue-soft);color:var(--blue)}
.impact__stat-ic svg{width:18px;height:18px}
.impact__stat b{display:block;font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1}
.glass--muted .impact__stat b{color:var(--muted-2)}
.impact__stat small{color:var(--muted);font-size:.78rem;display:block;margin-top:4px}

/* growth-multiplier badge on the "with" cards — the punchy pictorial delta */
.impact__delta{
  font-family:var(--display);font-weight:800;font-size:.8rem;color:#0f9d58;
  background:rgba(15,157,88,.13);padding:4px 10px;border-radius:999px;white-space:nowrap;
}
/* tinted widget panel holding each card's graphic (reference-widget style) */
.impact__viz{
  margin-top:16px;border-radius:14px;padding:14px 16px;overflow:hidden;
  background:rgba(120,110,150,.08);
}
.impact__viz--meter{display:flex;align-items:center;padding:26px 16px}
.glass--vivid .impact__viz{
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb,var(--violet) 22%,#fff) 0%, transparent 62%),
    color-mix(in srgb,var(--violet) 10%,#fff);
}
/* per-card trend sparkline: flat & grey for "without", rising & violet for "with" */
.impact__spark{width:100%;height:44px;display:block;margin:0}
.impact__spark polyline{fill:none;stroke:var(--muted-2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.impact__spark--up polyline{stroke:var(--violet);opacity:1;filter:drop-shadow(0 3px 7px rgba(124,92,255,.4))}
/* the animated draw-in when the card scrolls into view */
@media (prefers-reduced-motion:no-preference){
  .impact__spark--up polyline{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.1s ease .2s}
  .impact__col.is-in .impact__spark--up polyline{stroke-dashoffset:0}
}
/* fill meter for the % metrics */
.impact__meter{width:100%;height:8px;border-radius:999px;background:rgba(120,110,150,.2);margin:0;overflow:hidden}
.impact__meter i{display:block;height:100%;border-radius:999px;background:var(--muted-2);transition:width 1s cubic-bezier(.2,.7,.3,1)}
.impact__meter--up i{background:linear-gradient(90deg,var(--violet),var(--magenta))}

/* column status chip — "Stalled" vs "Growing" */
.impact__status{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.impact__status i{display:inline-grid;place-items:center}
.impact__status i svg{width:13px;height:13px}
.impact__status--flat{background:rgba(150,140,120,.18);color:#9a8f7a}
.impact__status--up{background:rgba(15,157,88,.14);color:#0f9d58}

.impact__note{text-align:center;color:var(--muted-2);font-size:.82rem;margin-top:28px}
.impact__col.is-pulse{animation:impactPulse .6s ease}
@keyframes impactPulse{0%{transform:scale(1)}35%{transform:scale(1.012)}100%{transform:scale(1)}}
.impact__col{transition:transform .3s ease,opacity .4s ease,filter .4s ease}
/* the tab that isn't selected dims back so the chosen side is highlighted */
.impact__col.is-dim{opacity:.4;filter:saturate(.55)}

/* iPad: this is where side-by-side comparison actually shines — give it
   real breathing room rather than just shrinking the desktop gap */
@media (min-width:761px) and (max-width:1024px){
  .impact__cols{gap:20px}
  .impact__arrow{width:44px;height:44px}
  .impact__arrow svg{width:19px;height:19px}
  .impact__stats{gap:10px}
  .impact__stat{padding:16px 14px}
  .impact__stat b{font-size:1.45rem}
}

/* mobile: one panel visible at a time, switched by the pill toggle */
@media (max-width:760px){
  .impact__cols{grid-template-columns:1fr;gap:0}
  .impact__arrow{display:none}
  .impact__col.is-hidden{display:none}
  .impact__stats{gap:12px}
}

/* touch devices: mirror the hover lift on :active so cards give tap
   feedback on iPad/phone instead of feeling inert without a mouse */
@media (hover:none) and (pointer:coarse){
  .value__card:active,.chan:active,.step:active,.ad-tile:active,.offer:active{
    transform:translateY(-4px);box-shadow:var(--shadow);
  }
  .impact__toggle-btn:active{color:var(--ink)}
}

/* =========================================================
   SERVICES — APPLE-STYLE PINNED PILLARS
   Section sticks while scrolling; one card steps forward and
   unfolds at a time. JS (script.js) toggles .is-active / .is-past.
   ========================================================= */
.pillars-pin{position:relative}
.pillars-pin__intro{text-align:center;max-width:720px;margin:0 auto;padding:100px 24px 0}
.pillars-pin__hint{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);
}
.pillars-pin__hint i{
  width:20px;height:30px;border-radius:11px;border:2px solid var(--violet);position:relative;flex:none;
}
.pillars-pin__hint i::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--violet);transform:translateX(-50%);animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* the tall scroll track that drives the pin (height set per --pcount) */
.pillars-pin__scroll{position:relative;height:calc(var(--pcount) * 62vh + 100vh)}
.pillars-pin__sticky{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
}
/* dvh avoids the mobile URL-bar resize jump (falls back to vh above) */
@supports (height:100dvh){
  .pillars-pin__scroll{height:calc(var(--pcount) * 62dvh + 100dvh)}
  .pillars-pin__sticky{height:100dvh}
}
.pillars-pin__inner{
  display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center;width:100%;
}

/* left progress rail */
.pillars-rail{position:relative;padding-left:8px}
.pillars-rail__count{display:flex;align-items:baseline;gap:8px;margin-bottom:22px;font-family:var(--display)}
.pillars-rail__count b{font-size:2.6rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--violet),var(--magenta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pillars-rail__count span{color:var(--muted-2);font-weight:600;font-size:1.1rem}
.pillars-rail__list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.pillars-rail__list li{
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--muted-2);
  opacity:.5;transform:translateX(0);
  transition:color .4s ease,opacity .4s ease,transform .4s ease;cursor:default;
}
.pillars-rail__list li.is-active{color:var(--ink);opacity:1;transform:translateX(6px)}
.pillars-rail__bar{position:relative;height:3px;border-radius:2px;background:rgba(124,92,255,.18);overflow:hidden}
.pillars-rail__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;height:100%;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--violet),var(--magenta));transition:transform .2s linear}

/* card stage — all cards stacked in one cell, only active shown */
.pillars-stage{display:grid;place-items:center;min-height:460px}
/* pillar cards now speak the widget-graphic language of the value/snapshot
   cards: solid white card, labelled icon-chip header, a pastel tinted panel
   holding a per-pillar SVG graphic + the description, and the feature list
   rendered as small icon chips instead of plain dots. --oc mirrors --acc so
   the shared chunky icon-chip glow (styles.css:180) tints per pillar. */
.ppin{
  --oc:var(--acc);
  grid-area:1/1;width:min(680px,100%);position:relative;overflow:hidden;
  padding:30px 32px;border-radius:28px;
  background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:0 34px 76px -34px rgba(60,25,140,.42);
  opacity:0;transform:translateY(70px) scale(.9);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;isolation:isolate;
}
.ppin.is-active{opacity:1;transform:none;pointer-events:auto}
.ppin.is-past{opacity:0;transform:translateY(-80px) scale(.94)}
/* big translucent watermark number */
.ppin__ghost{
  position:absolute;top:-30px;right:8px;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:11rem;line-height:1;
  color:var(--acc);opacity:.07;
}
.ppin > *{position:relative;z-index:1}
/* decorative accent motif filling the otherwise-empty top-right corner —
   injected once per card in script.js, tinted with the card's --acc */
.ppin .ppin__deco{
  position:absolute;top:-18px;right:-18px;width:190px;height:190px;z-index:0;
  color:var(--acc);pointer-events:none;
}
.ppin__deco .d-ring{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.16}
.ppin__deco .d-dot{fill:currentColor;opacity:.22}
.ppin__deco .d-blob{fill:currentColor;opacity:.06}
/* header: chunky icon chip + eyebrow "Pillar NN" + title */
.ppin__head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.ppin__heading{display:flex;flex-direction:column;gap:3px;min-width:0}
.ppin__no{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);
}
.ppin__ic{
  width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:15px;font-size:1.5rem;
  color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);
}
.ppin__ic svg{width:26px;height:26px}
.ppin__title{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);
  letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
/* body: tinted graphic panel beside the icon-chip feature list */
.ppin__body{display:grid;grid-template-columns:.82fr 1fr;gap:20px;align-items:stretch}
.ppin__panel{
  border-radius:18px;padding:18px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--acc) 22%,#fff) 0%, transparent 60%),
    color-mix(in srgb,var(--acc) 12%,#fff);
}
.ppin__gfx{display:block;width:100%;height:96px}
.ppin__gfx .stroke{fill:none;stroke:var(--acc);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ppin__gfx .fill{fill:var(--acc)}
.ppin__gfx .soft{fill:var(--acc);opacity:.16}
.ppin__gfx .softline{fill:none;stroke:var(--acc);stroke-width:1.6;opacity:.35}
.ppin__gfx .ring{fill:none;stroke:var(--acc);stroke-width:3.4;opacity:.5;stroke-linecap:round}
.ppin__desc{color:var(--ink-2);font-size:.96rem;line-height:1.5;margin:0}
/* feature list → icon chips */
.ppin__list{list-style:none;display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.ppin__list li{
  display:flex;align-items:center;gap:11px;
  padding:8px 12px;border-radius:12px;font-size:.9rem;font-weight:500;color:var(--ink-2);
  background:color-mix(in srgb,var(--acc) 6%,#fff);
  border:1px solid color-mix(in srgb,var(--acc) 15%,transparent);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
}
.ppin__chipic{
  width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px;
  color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 20%,transparent);
}
.ppin__chipic svg{width:16px;height:16px;stroke-width:2}
/* stagger the details in when the card becomes active */
.ppin.is-active .ppin__list li{opacity:1;transform:none}
.ppin.is-active .ppin__list li:nth-child(1){transition-delay:.16s}
.ppin.is-active .ppin__list li:nth-child(2){transition-delay:.24s}
.ppin.is-active .ppin__list li:nth-child(3){transition-delay:.32s}
.ppin.is-active .ppin__list li:nth-child(4){transition-delay:.40s}
.ppin.is-active .ppin__list li:nth-child(5){transition-delay:.48s}
.ppin.is-active .ppin__list li:nth-child(6){transition-delay:.56s}
.ppin.is-active .ppin__list li:nth-child(7){transition-delay:.64s}

/* ---- fallback: mobile / reduced-motion → simple stacked list, no pin ---- */
.pillars-pin.is-static .pillars-pin__scroll{height:auto}
.pillars-pin.is-static .pillars-pin__sticky{position:static;height:auto;padding:26px 0 70px}
.pillars-pin.is-static .pillars-pin__inner{grid-template-columns:1fr;gap:0}
.pillars-pin.is-static .pillars-rail{display:none}
.pillars-pin.is-static .pillars-stage{display:flex;flex-direction:column;gap:22px;min-height:0}
.pillars-pin.is-static .ppin{grid-area:auto;position:static;opacity:1;transform:none;pointer-events:auto;width:100%}
.pillars-pin.is-static .ppin__list li{opacity:1;transform:none}

/* iPad (portrait through landscape/Pro): keep the full vertical rail +
   chapter list experience — just narrower and tighter than desktop —
   instead of dropping straight to the phone's compact bar. */
@media (min-width:641px) and (max-width:1024px){
  .pillars-pin__inner{grid-template-columns:210px 1fr;gap:34px}
  .pillars-rail__count b{font-size:2.1rem}
  .pillars-rail__list li{font-size:.86rem}
  .ppin{padding:30px 30px}
  .ppin__title{font-size:clamp(1.3rem,3.2vw,1.7rem)}
  .ppin__desc{font-size:.94rem}
  .ppin__ghost{font-size:9rem}
  .story-viz--reach b{font-size:clamp(2.1rem,4.4vw,2.8rem)}
}
/* iPad portrait specifically is narrower still — trim once more and stack
   the graphic panel above the feature chips so neither column gets cramped */
@media (min-width:641px) and (max-width:900px){
  .pillars-pin__inner{grid-template-columns:180px 1fr;gap:26px}
  .pillars-rail__list li{font-size:.82rem}
  .ppin{padding:26px 24px}
  .ppin__body{grid-template-columns:1fr;gap:16px}
  .ppin__gfx{height:80px}
}

/* phones only: no room for a vertical rail at all — stack a compact
   progress bar above a full-width card */
@media (max-width:640px){
  .pillars-pin__intro{padding-top:72px}
  .pillars-pin__inner{display:flex;flex-direction:column;gap:20px;padding:0 4px}
  .pillars-rail{display:flex;align-items:center;gap:14px;padding-left:0;width:100%}
  .pillars-rail__count{margin-bottom:0;flex:none}
  .pillars-rail__count b{font-size:1.7rem}
  .pillars-rail__count span{font-size:.9rem}
  .pillars-rail__list{display:none}
  .pillars-rail__bar{flex:1;margin:0}
  .pillars-stage{min-height:0;width:100%}
  .ppin{padding:24px 20px;width:100%}
  .ppin__head{gap:13px;margin-bottom:16px}
  .ppin__ic{width:46px;height:46px;border-radius:13px}
  .ppin__ic svg{width:23px;height:23px}
  .ppin__title{font-size:clamp(1.3rem,6vw,1.7rem)}
  .ppin__body{grid-template-columns:1fr;gap:14px}
  .ppin__gfx{height:76px}
  .ppin__desc{font-size:.94rem}
  .ppin__list li{font-size:.9rem}
  .ppin__ghost{font-size:7rem;top:-10px}
}

/* =========================================================
   STORY — scroll narrative chapter visuals
   Reuses .pillars-pin / .ppin structure wholesale; these rules
   only style the small data-viz mounted inside each chapter.
   ========================================================= */
/* story chapters share the pillar widget shell: description on the left,
   the chapter's data-viz mounted inside a tinted panel on the right */
.ppin__body--story{grid-template-columns:1fr 1fr;align-items:stretch}
.ppin__body--story .ppin__desc{align-self:center;font-size:1.02rem}
.ppin__body--story .story-viz{min-height:170px}
.story-viz{margin:0;justify-content:center}
.story-viz small{display:block;color:var(--muted-2);font-size:.82rem;margin-top:12px}

.story-viz--flat svg{width:100%;height:60px}
.story-viz--flat polyline{
  fill:none;stroke:var(--muted-2);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:6 6;
}
.ppin.is-active .story-viz--flat polyline{animation:storyFlatline 3s linear infinite}
@keyframes storyFlatline{to{stroke-dashoffset:-48}}

.story-bars{height:130px;align-items:flex-end;gap:14px}
.story-bars span{animation:none;height:0;min-height:6px}

.story-viz--reach b{
  display:block;font-family:var(--display);font-weight:800;color:var(--acc);
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
}
.story-donut{margin:0}
.story-donut .donut__hole b{color:var(--acc)}

.story-viz--stats{display:flex;flex-direction:row;gap:32px;flex-wrap:wrap;align-items:center}
.story-viz--stats b{display:block;font-family:var(--display);font-weight:800;color:var(--acc);font-size:2.1rem;line-height:1}
.story-viz--stats small{margin-top:8px}

.story-pin__note{text-align:center;color:var(--muted-2);font-size:.82rem;padding:22px 24px 0}

/* stack story description above its viz panel on tablet/phone (this rule
   sits after .ppin__body--story so it wins over the 1fr-1fr default) */
@media (max-width:900px){
  .ppin__body--story{grid-template-columns:1fr}
}
@media (max-width:860px){
  .story-viz--reach b{font-size:2.4rem}
  .story-viz--stats{gap:24px}
}

/* =========================================================
   OFFERINGS — single-line feature grid
   ========================================================= */
.section-title .ital{font-style:italic;color:var(--blue);font-weight:700}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.offer{
  display:flex;align-items:center;gap:16px;padding:16px 18px;
  background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.3));
  border:1px solid var(--glass-border);border-radius:16px;
  backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:0 14px 30px -20px rgba(60,25,140,.38),inset 0 1px 1px rgba(255,255,255,.7);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.8)}
.offer__ic{
  width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:13px;
  background:var(--obg);color:var(--oc);
}
.offer__ic svg{width:24px;height:24px}
.offer__label{font-family:var(--display);font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.25}

/* =========================================================
   INTELLIGENCE
   ========================================================= */
.intel{background:var(--bg-soft)}
.intel__grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.ticks{list-style:none;margin:22px 0 30px}
.ticks li{position:relative;padding:11px 0 11px 34px;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.ticks li::before{content:"✓";position:absolute;left:6px;top:10px;color:#fff;font-size:.7rem;font-weight:700;background:var(--blue);width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.intel__viz{padding:28px}
.viz-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:600;font-size:.92rem;margin-bottom:24px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:#16a34a;letter-spacing:.08em}
.live i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulse 1.6s infinite}
.donut{
  width:190px;height:190px;margin:0 auto 22px;border-radius:50%;position:relative;
  background:conic-gradient(var(--blue) 0 calc(var(--pos)*1%),#b9a5ff calc(var(--pos)*1%) calc((var(--pos) + var(--neu))*1%),#ffd0d0 0);
}
.donut__hole{position:absolute;inset:26px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;box-shadow:inset 0 0 0 1px var(--line)}
.donut__hole b{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--blue)}
.donut__hole small{color:var(--muted);font-size:.75rem}
.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-bottom:22px}
.legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lg--pos{background:var(--blue)}.lg--neu{background:#b9a5ff}.lg--neg{background:#ffb4b4}
.trend{border-top:1px solid var(--line-soft);padding-top:18px;text-align:center}
.trend__line svg{width:100%;height:60px}
.trend__line polyline{fill:none;stroke:var(--blue);stroke-width:2.5;filter:drop-shadow(0 4px 8px rgba(124,92,255,.3))}
.trend small{color:var(--muted-2);font-size:.78rem}

/* =========================================================
   OUTREACH CHANNELS
   ========================================================= */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chan{padding:26px 22px;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.chan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.chan__ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:15px;font-size:1.5rem;color:var(--oc,var(--blue));background:var(--obg,var(--blue-soft));margin-bottom:14px}
.chan b{font-family:var(--display);display:block;margin-bottom:6px}
.chan small{color:var(--muted);font-size:.82rem}

/* =========================================================
   ADVERTISING
   ========================================================= */
.advert__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad-tile{padding:30px 26px;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}
.ad-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.ad-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:13px;font-size:1.4rem;color:var(--oc,var(--blue));background:var(--obg,var(--blue-soft));margin-bottom:16px}
.ad-tile h3{font-family:var(--display);font-size:1.16rem;margin-bottom:8px}
.ad-tile p{color:var(--muted);font-size:.92rem}
.advert__grid .ad-tile--wide:first-child,
.advert__grid .ad-tile--wide:last-child{grid-column:span 2}

/* =========================================================
   GROWTH STEPS
   ========================================================= */
.growth{background:var(--bg-soft)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:40px}
.step{padding:26px 22px;transition:transform .3s ease,box-shadow .3s ease}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step__top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step__no{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:#fff;
  background:var(--oc,var(--blue));
  box-shadow:0 10px 20px -8px color-mix(in srgb,var(--oc,var(--blue)) 60%,transparent);
}
.step__ic{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;
  color:var(--oc,var(--blue));background:var(--obg,var(--blue-soft));
}
.step__ic svg{width:20px;height:20px}
.step h3{font-family:var(--display);font-size:1.02rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.88rem}
.growth__cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 44px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--violet-deep),var(--violet) 55%,var(--magenta));
  border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:0 34px 70px -30px rgba(91,52,232,.75),inset 0 1px 1px rgba(255,255,255,.4);
}
.growth__cta h3{font-family:var(--display);font-size:1.45rem;margin-bottom:6px;color:#fff}
.growth__cta p{color:rgba(255,255,255,.85)}
.growth__cta .btn--gold,.growth__cta .btn--blue{background:#fff;color:var(--blue)}
.growth__cta .btn--gold:hover,.growth__cta .btn--blue:hover{background:#eef4ff}

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.table-wrap{overflow-x:auto;padding:6px}
.ctable{width:100%;border-collapse:collapse;min-width:720px}
.ctable th,.ctable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.94rem}
.ctable thead th{font-family:var(--display);font-weight:600;color:var(--muted);font-size:.86rem}
.ctable thead th.hl,.ctable td.hl{background:var(--blue-soft)}
.ctable thead th.hl{color:var(--blue)}
.ctable td:first-child{color:var(--ink);font-weight:500}
.ctable td:not(:first-child){text-align:center;font-weight:700}
.ctable tbody tr:hover td{background:#fafcff}
.ctable tbody tr:hover td.hl{background:#dfeaff}
.yes{color:#16a34a}.no{color:#e5484d;opacity:.7}.mid{color:#f59e0b}
.compare__key{text-align:center;margin-top:18px;color:var(--muted);font-size:.85rem}
.compare__key i{font-weight:700;margin:0 4px}

/* =========================================================
   PACKAGES
   ========================================================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{padding:34px 30px;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan--featured{border-color:rgba(124,92,255,.5);background:linear-gradient(165deg,rgba(199,125,255,.22),rgba(255,255,255,.5));box-shadow:0 34px 70px -30px rgba(124,92,255,.5);transform:scale(1.03)}
.plan--featured:hover{transform:scale(1.03) translateY(-6px)}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:999px;box-shadow:0 10px 20px -8px rgba(124,92,255,.6)}
.plan__name{font-family:var(--display);font-weight:700;font-size:1.5rem;margin-bottom:4px}
.plan__for{color:var(--blue);font-size:.86rem;margin-bottom:22px}
.plan__list{list-style:none;margin-bottom:26px}
.plan__list li{position:relative;padding:10px 0 10px 26px;color:var(--muted);font-size:.92rem;border-bottom:1px solid var(--line-soft)}
.plan__list li::before{content:"✓";position:absolute;left:0;top:10px;color:var(--blue);font-weight:700}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact__copy .section-title{text-align:left}
.contact__points{list-style:none;margin:26px 0}
.contact__points li{display:flex;align-items:center;gap:14px;padding:12px 0;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.contact__points li span{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;color:var(--blue);background:var(--blue-soft)}
.contact__tag{margin-top:30px;padding:22px 24px;border-radius:var(--radius-sm);background:var(--blue-soft)}
.contact__tag strong{font-family:var(--display);letter-spacing:.12em;display:block;color:var(--ink)}
.contact__tag em{font-style:normal;color:var(--blue);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.contact__form{padding:34px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--display);font-size:.82rem;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);color:var(--ink);font-family:var(--font);font-size:.95rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;resize:vertical;
}
.field input:hover,.field select:hover,.field textarea:hover{background:rgba(255,255,255,.7)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{margin-top:16px;text-align:center;color:#16a34a;font-size:.9rem}

/* ---------- Apple liquid-glass contact — Option C: gradient mesh + glass ---------- */
.contact--apple{padding-top:40px}
.contact__panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:40px;padding:clamp(34px,4.5vw,64px);
  /* semi-transparent gradient mesh — page bleeds through */
  background:
    radial-gradient(ellipse 80% 70% at 15% 20%, rgba(56,189,248,.25), transparent 55%),
    radial-gradient(ellipse 70% 80% at 85% 80%, rgba(139,92,246,.3), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(167,139,250,.2), transparent 50%),
    linear-gradient(145deg, rgba(75,31,176,.5) 0%, rgba(124,92,255,.42) 48%, rgba(195,65,198,.35) 100%);
  backdrop-filter:blur(2px) saturate(1.3);-webkit-backdrop-filter:blur(2px) saturate(1.3);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 40px 80px -30px rgba(91,52,232,.3),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.contact__bg{display:none}
.contact__grid{position:relative;z-index:1;align-items:start}

/* left copy — sits on the gradient, white text */
.contact--apple .contact__copy .kicker{background:rgba(255,255,255,.16);color:#fff}
.contact--apple .contact__copy .section-title{color:#fff}
.contact--apple .contact__copy .section-lead{color:rgba(255,255,255,.82)}
.contact--apple .contact__points li{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.15)}
.contact--apple .contact__points li span{color:#fff;background:rgba(255,255,255,.14)}
.contact--apple .contact__tag{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.contact--apple .contact__tag strong{color:#fff}
.contact--apple .contact__tag em{color:#e0d4ff}

/* ---- form: frosted glass over the gradient — violet bleeds through the frost ---- */
.contact__form--apple{
  position:relative;isolation:isolate;overflow:hidden;
  padding:30px 30px 32px;border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,.18));
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:
    0 20px 50px -18px rgba(60,25,140,.2),
    inset 0 1px 1px rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
/* specular top-edge glare */
.contact__form--apple::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 32%);
  opacity:.9;z-index:0;
}
/* form intentionally has NO pointer-glare — a moving light blob over
   input fields reads as a glitch, not polish. */
.contact__form--apple::after{display:none}
/* pointer-tracked specular glare — script.js writes --gx/--gy on
   pointermove; kept only on the vivid Impact cards where it reads as polish. */
.glass--vivid::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.65),transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
.glass--vivid:hover::after{opacity:1}
.contact__form--apple > *{position:relative;z-index:1}
.contact__grip{display:block;width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.45);margin:0 auto 20px}

/* white text — the violet gradient shows through the frost */
.contact__form--apple .field label{color:rgba(255,255,255,.92)}
/* near-solid white fields so the typed text reads as dark/black on the
   purple glass panel (was white-on-translucent → nearly invisible) */
.contact__form--apple .field input,
.contact__form--apple .field select,
.contact__form--apple .field textarea{
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);color:var(--ink);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.contact__form--apple .field input::placeholder,
.contact__form--apple .field textarea::placeholder{color:var(--muted-2)}
.contact__form--apple .field input:hover,
.contact__form--apple .field select:hover,
.contact__form--apple .field textarea:hover{background:#fff}
.contact__form--apple .field input:focus,
.contact__form--apple .field select:focus,
.contact__form--apple .field textarea:focus{
  border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.18);
}
.contact__form--apple .field select,
.contact__form--apple .field select option{color:var(--ink)}
/* leading field icons now sit on white → tint them to the brand violet */
.contact__form--apple .field__ic{color:var(--violet)}
.contact__form--apple .form-note{color:#a5f3c4}

/* ---- leading icons inside form fields (app-like, reference-grade) ---- */
.field__wrap{position:relative}
.field__ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;display:grid;place-items:center;color:rgba(255,255,255,.6);
  pointer-events:none;z-index:2;
}
.field__ic svg{width:18px;height:18px}
.field--icon .field__wrap input,
.field--icon .field__wrap select{padding-left:44px}
/* the select arrow spacing already leaves room on the right */

/* ---- submit button arrow + privacy note ---- */
.contact__form--apple .btn--gold span{transition:transform .25s ease}
.contact__form--apple .btn--gold:hover span{transform:translateX(4px)}
.contact__secure{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.7);
}
.contact__secure span{width:16px;height:16px;display:inline-grid;place-items:center}
.contact__secure svg{width:15px;height:15px}

/* ---- proposal-preview widget card (reference Images 6 & 9) ---- */
.proposal-card{
  margin-top:30px;padding:22px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 50px -26px rgba(60,25,140,.4),inset 0 1px 1px rgba(255,255,255,.9);
}
.proposal-card__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.proposal-card__ic{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;
  color:#fff;background:linear-gradient(135deg,var(--violet),var(--magenta));
  box-shadow:0 10px 22px -10px rgba(124,92,255,.7);
}
.proposal-card__ic svg{width:22px;height:22px}
.proposal-card__title{flex:1;min-width:0}
.proposal-card__title b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.proposal-card__title small{color:var(--muted);font-size:.8rem}
.proposal-card__badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--violet);
  background:var(--blue-soft);padding:6px 11px;border-radius:999px;
}
.proposal-card__badge i{display:inline-grid;place-items:center}
.proposal-card__badge svg{width:13px;height:13px}

.proposal-card__chart{position:relative;margin-bottom:16px}
.proposal-card__chart svg{width:100%;height:96px;display:block}
.proposal-card__area{fill:url(#propArea)}
.proposal-card__line{
  fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 3px 6px rgba(124,92,255,.35));
}
@media (prefers-reduced-motion:no-preference){
  .proposal-card__line{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.4s ease .3s}
  .proposal-card__area{opacity:0;transition:opacity .8s ease .5s}
  .contact.is-in .proposal-card__line{stroke-dashoffset:0}
  .contact.is-in .proposal-card__area{opacity:1}
}
.proposal-card__dot{fill:#fff;stroke:var(--violet);stroke-width:3}
.proposal-card__cap{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--muted);margin-top:4px}
.proposal-card__cap i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(34,197,94,.16)}

.proposal-card__list{list-style:none;display:grid;gap:2px}
.proposal-card__list li{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  font-size:.9rem;color:var(--ink-2);border-top:1px solid var(--line-soft);
}
.proposal-card__list li span{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;
  color:var(--violet);background:var(--blue-soft);
}
.proposal-card__list li span svg{width:17px;height:17px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--dark);color:#c7d0e0;padding-top:56px;margin-top:20px}
.footer__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:36px}
.footer__brand{display:flex;gap:16px;max-width:380px}
.footer__brand .brand__mark{width:46px;height:46px;flex:none;margin-top:2px;border-radius:12px}
.footer__brand strong{font-family:var(--display);letter-spacing:.1em;color:#fff}
.footer__brand p{color:#9aa6bd;font-size:.9rem;margin-top:6px}
.footer__links{display:flex;flex-wrap:wrap;gap:22px;align-content:flex-start}
.footer__links a{color:#9aa6bd;font-size:.92rem;transition:color .2s ease}
.footer__links a:hover{color:#fff}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between}
.footer__bar span{color:#7e8aa3;font-size:.82rem}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .intel__grid,.contact__grid{grid-template-columns:1fr}
  .value__grid,.channels{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .advert__grid{grid-template-columns:repeat(2,1fr)}
  .advert__grid .ad-tile--wide{grid-column:span 2}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:20px}
  .hero__visual{height:360px;max-width:440px;margin:0 auto;width:100%}
  .hero__card{padding:56px 40px}
}
@media (max-width:860px){
  .nav__links{
    position:fixed;top:0;right:-100%;height:100vh;width:76%;max-width:320px;
    flex-direction:column;gap:8px;padding:100px 30px;z-index:110;
    background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(244,240,255,.55));
    backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);
    border-left:1px solid rgba(255,255,255,.5);
    box-shadow:-10px 0 40px -20px rgba(60,25,140,.5);
    transition:right .35s ease;
  }
  .nav__links.open{right:0}
  .nav__links a{font-size:1.1rem;padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .nav__close{display:flex}
  .nav__burger{display:flex}
  .plans{grid-template-columns:1fr}
  .plan--featured{transform:scale(1)}
  .plan--featured:hover{transform:translateY(-6px)}
  .hero__card{padding:48px 30px}
  .hero__visual{height:340px}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .services{grid-template-columns:1fr}
  .value__grid,.channels,.steps,.advert__grid,.offer-grid{grid-template-columns:1fr}
  .advert__grid .ad-tile--wide,
  .advert__grid .ad-tile--wide:first-child,
  .advert__grid .ad-tile--wide:last-child{grid-column:span 1}
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__visual{height:320px;transform:scale(.92)}
  .field-row{grid-template-columns:1fr}
  .growth__cta{padding:28px 26px}
  .footer__bar{flex-direction:column;gap:8px;text-align:center}
  .hero__title{font-size:2.2rem}
}
@media (max-width:400px){
  .hero__stats{grid-template-columns:1fr}
  .nav__cta .btn--dark{padding:10px 16px;font-size:.85rem}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ====== FLOATING WHATSAPP CONTACT BUTTON ====== */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:150;
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6),0 4px 10px rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.3,1,.4,1),box-shadow .25s ease;
  animation:waFabPop .5s ease both;
}
.wa-fab svg{width:30px;height:30px}
.wa-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;
  animation:waPulse 2.4s ease-out infinite;
}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 18px 38px -8px rgba(37,211,102,.75)}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@keyframes waFabPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.wa-fab::before{animation:none}.wa-fab{animation:none}}
@media (max-width:600px){.wa-fab{width:52px;height:52px;right:16px;bottom:16px}.wa-fab svg{width:27px;height:27px}}

/* ====== SUCCESS MODAL ====== */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.modal-overlay.is-visible{opacity:1;visibility:visible}

.modal-card{
  position:relative;
  width:min(420px,90vw);
  background:linear-gradient(145deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%);
  backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  padding:44px 36px 32px;
  text-align:center;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  transform:scale(.85) translateY(30px);
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .35s ease;
  opacity:0;
}
.modal-overlay.is-visible .modal-card{transform:scale(1) translateY(0);opacity:1}

/* ---- animated checkmark ---- */
.modal-check{width:72px;height:72px;margin:0 auto 20px}
.modal-check__svg{width:100%;height:100%}
.modal-check__circle{
  fill:none;stroke:#22c55e;stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;
  transform-origin:center;
}
.modal-check__tick{
  fill:none;stroke:#22c55e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
}
.modal-overlay.is-visible .modal-check__circle{
  animation:modalCircle .6s .25s ease-out forwards;
}
.modal-overlay.is-visible .modal-check__tick{
  animation:modalTick .4s .7s ease-out forwards;
}
@keyframes modalCircle{to{stroke-dashoffset:0}}
@keyframes modalTick{to{stroke-dashoffset:0}}

/* ---- modal text ---- */
.modal-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.45rem;font-weight:700;
  margin-bottom:10px;
  background:linear-gradient(135deg,#fff 30%,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.modal-text{
  font-size:.95rem;line-height:1.6;
  color:rgba(255,255,255,.72);
  margin-bottom:18px;
}
.modal-text strong{color:#fff}

/* ---- submitted details chips ---- */
.modal-details{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:22px;
}
.modal-detail{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  border-radius:40px;padding:7px 16px;
  font-size:.85rem;color:rgba(255,255,255,.88);
}
.modal-detail__ic{display:inline-grid;place-items:center;color:#c9b6ff}
.modal-detail__ic svg{width:15px;height:15px}

/* ---- modal action buttons ---- */
.modal-actions{
  display:flex;flex-direction:column;gap:10px;
  margin-top:4px;
}
.modal-mail-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;
  font-size:1rem;font-weight:600;
  border-radius:14px;padding:15px 0;
  text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(124,92,255,.7);
  transition:transform .15s,box-shadow .2s;
  width:100%;
}
.modal-mail-btn:hover{transform:scale(1.02);box-shadow:0 18px 36px -12px rgba(124,92,255,.8)}
.modal-mail-btn:active{transform:scale(.98)}
.modal-mail-btn svg{flex-shrink:0}
.modal-wa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#25d366;color:#fff;
  font-size:.95rem;font-weight:600;
  border-radius:14px;padding:13px 0;
  text-decoration:none;
  transition:background .2s,transform .15s;
  width:100%;
}
.modal-wa-btn:hover{background:#1ebe57;transform:scale(1.02)}
.modal-wa-btn:active{transform:scale(.98)}
.modal-wa-btn svg{flex-shrink:0}

.modal-close-btn{
  font-size:.9rem;
  border-radius:14px;
  padding:12px 0;
  color:rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.15);
  width:100%;
}
.modal-close-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}