/* ===========================================================================
   Ware Digital Solutions: premium dark build
   Direction (from agency research): cinematic dark, typography-led, grain-
   textured gradient mesh, restrained purposeful motion. Brand = navy/slate/azure.
   Motion: smooth scroll, mask reveals, staggered entrances, magnetic CTAs,
   animated counters, marquee, custom cursor. All respect prefers-reduced-motion.
   =========================================================================== */

:root {
  /* Base (dark, lifted a notch off near-black for a softer, premium depth) */
  --bg:         #0f1620;   /* deep navy, page base */
  --bg-2:       #141c27;   /* alternate section */
  --bg-3:       #1a2433;   /* raised panel */
  --surface:    rgba(255,255,255,.03);
  --surface-2:  rgba(255,255,255,.05);

  /* Brand */
  --navy:       #18222e;
  --slate:      #6b85a0;
  --slate-light:#9fb4cb;
  --azure:      #46a6ea;   /* primary accent */
  --azure-deep: #2f7fb8;
  --cyan:       #34c6d6;
  --indigo:     #5b6cff;

  /* Text */
  --ink:        #eef3f9;   /* headings / strong */
  --body:       #b7c4d2;   /* body copy */
  --muted:      #8294a6;   /* secondary */
  --faint:      #5d6b7b;   /* labels / meta */
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.06);

  /* Type */
  --font-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --radius: 18px;
  --radius-sm: 12px;

  /* Motion */
  --dur-micro: .16s;
  --dur: .65s;
  --dur-emph: .9s;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.76,0,.24,1);

  /* Shadows / glows */
  --glow: 0 0 0 1px rgba(70,166,234,.0), 0 18px 50px -12px rgba(70,166,234,.35);
  --shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scroll-padding-top was 90px. It STACKS with the per-section scroll-margin-top added
   2026-07-27 (browser lands the target at padding + margin), so it now has to be 0 or
   every native anchor jump would sit 90px too low. The offset lives on the sections. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--azure); text-decoration: none; transition: color var(--dur-micro); }
a:hover { color: #6db8ef; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: rgba(70,166,234,.3); color: #fff; }

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

/* ---- Grain overlay (static, GPU-cheap) ---- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9500;
  background: linear-gradient(90deg, var(--azure), var(--cyan));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---- Custom cursor: REMOVED 2026-07-27 ----
   Was a 38px ring + 5px dot with the native cursor hidden. It threw away the OS's
   pointer / text / not-allowed affordances (which tell you what a thing does before
   you click it) and traded them for one shape that carried no information. The ring
   also lerped at 0.18, so it visibly trailed the real pointer. Native cursor is back. */

/* ---- Intro cover (pure CSS so it never traps content) ---- */
.intro-cover {
  position: fixed; inset: 0; z-index: 9800; background: var(--bg);
  display: grid; place-items: center;
  animation: introOut .8s var(--ease-expo) .5s forwards;
  transform-origin: top;
}
.intro-cover .intro-logo { width: 74px; height: 74px; opacity: 0; animation: introLogo .7s var(--ease-out) forwards, introLogoOut .4s ease .55s forwards; }
@keyframes introLogo { from { opacity:0; transform: translateY(10px) scale(.9);} to { opacity:1; transform:none;} }
@keyframes introLogoOut { to { opacity: 0; } }
@keyframes introOut { to { transform: scaleY(0); } }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
/* Section rhythm tightened 2026-07-27: was clamp(72px, 11vw, 150px), which put 300px of
   dead air between adjacent sections on a 1728px display (150 bottom + 150 top). Now ~224px.
   --section-pad is read by the anchor offset below, so the two stay in sync. */
:root { --section-pad: clamp(60px, 7.5vw, 112px); --header-h: 79px; }
.section { padding-block: var(--section-pad); position: relative; }

/* Anchor landing (2026-07-27). scroll-margin-top puts the section's TOP EDGE at this y.
   The edge is invisible (all sections are transparent), so what matters is where the
   HEADING lands: heading y = scroll-margin-top + --section-pad. Solving for a heading
   32px below the fixed header gives (header + 32) - pad. Single source of truth: the
   Lenis handler in index.html reads this computed value, so both scroll paths agree. */
main > section[id] { scroll-margin-top: calc(var(--header-h) + 32px - var(--section-pad)); }
.section--alt { background: var(--bg-2); }
.center { text-align: center; }
.divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; }

.eyebrow {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .22em;
  font-size: 12px; font-weight: 700; color: var(--azure); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--azure); opacity: .6; }
.eyebrow.center { justify-content: center; }
.section-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 72px); }
.section-head.center { margin-inline: auto; }
h2.section-title { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.03em; }
.section-head p { color: var(--muted); font-size: clamp(16px, 2vw, 20px); margin-top: 20px; line-height: 1.6; }

/* ===========================================================================
   Buttons
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px;
  padding: 15px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur);
  white-space: nowrap; line-height: 1; will-change: transform;
}
.btn .arrow { transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: linear-gradient(135deg, var(--azure), var(--azure-deep)); color: #fff; box-shadow: 0 12px 30px -10px rgba(70,166,234,.6); }
.btn-primary:hover { color: #fff; box-shadow: 0 16px 44px -8px rgba(70,166,234,.8); }
.btn-ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--slate); background: rgba(255,255,255,.06); color: #fff; }
.btn-lg { padding: 17px 32px; font-size: 16.5px; }
.btn-block { width: 100%; justify-content: center; }

/* ===========================================================================
   Header
   =========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(15,22,32,.72); backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* The white chip (background:#fff; border-radius:9px; padding:4px) existed because the old
   logo's W was dark navy and could not survive on a dark header. The 2026-07-27 mark is
   light ink + azure on transparent, drawn for this background, so no chip. */
.brand img { width: 38px; height: 38px; }
.brand-name { font-family: var(--font-head); font-weight: 700; letter-spacing: .14em; font-size: 14.5px; color: #fff; text-transform: uppercase; }
.brand-name span { color: var(--slate-light); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a.navlink { font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--body); padding: 9px 15px; border-radius: 9px; transition: color var(--dur-micro), background var(--dur-micro); }
.nav-links a.navlink:hover { color: #fff; background: var(--surface-2); }
.nav-cta { margin-left: 10px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; z-index: 1001; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all var(--dur-micro); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(140px, 20vh, 220px) clamp(80px, 12vw, 130px); }
.mesh { position: absolute; inset: -20% -10% 0 -10%; z-index: 0; filter: blur(90px) saturate(1.3); pointer-events: none; opacity: .62; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob-1 { width: 48vw; height: 48vw; background: var(--azure); top: -12%; left: -6%; animation: drift1 13s ease-in-out infinite alternate; }
.blob-2 { width: 40vw; height: 40vw; background: var(--indigo); top: 4%; right: -8%; animation: drift2 16s ease-in-out infinite alternate; }
.blob-3 { width: 34vw; height: 34vw; background: var(--cyan); bottom: -16%; left: 32%; animation: drift3 11s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(19%, 23%) scale(1.18); } }
@keyframes drift2 { to { transform: translate(-21%, 16%) scale(.9); } }
@keyframes drift3 { to { transform: translate(-15%, -23%) scale(1.16); } }

.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .4;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridDrift 26s linear infinite;
  -webkit-mask-image: radial-gradient(900px 600px at 50% 25%, #000 0%, transparent 78%);
          mask-image: radial-gradient(900px 600px at 50% 25%, #000 0%, transparent 78%);
}
@keyframes gridDrift { to { background-position: 54px 54px; } }
@media (prefers-reduced-motion: reduce) { .blob, .hero-grid { animation: none !important; } }
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 920px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 13px;
  font-size: 13px; font-weight: 500; color: var(--slate-light); margin-bottom: 30px; font-family: var(--font-head);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.2); }
.hero h1 { font-size: clamp(40px, 7.5vw, 84px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.hero h1 .grad { background: linear-gradient(100deg, var(--azure), var(--cyan) 60%, var(--slate-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-sub { font-size: clamp(17px, 2.2vw, 22px); color: var(--muted); max-width: 640px; margin-top: 28px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px; color: #cdd9e6; font-size: 14px; font-family: var(--font-head); font-weight: 500; text-shadow: 0 1px 14px rgba(15,22,32,.6); }
.hero-meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azure); }

/* ---- Text mask reveal (hero headline) ---- */
.reveal-lines .line-wrap { display: block; overflow: hidden; padding-bottom: .04em; }
.reveal-lines .line { display: block; }
.js .reveal-lines .line { transform: translateY(110%); }
@media (prefers-reduced-motion: no-preference) {
  .reveal-lines .line { transition: transform var(--dur-emph) var(--ease-out); }
  .reveal-lines.in .line { transform: translateY(0); }
  .reveal-lines .line-wrap:nth-child(2) .line { transition-delay: .08s; }
  .reveal-lines .line-wrap:nth-child(3) .line { transition-delay: .16s; }
  .reveal-lines .line-wrap:nth-child(4) .line { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) { .reveal-lines .line { transform: none; } }

/* ===========================================================================
   Marquee
   =========================================================================== */
.marquee-band { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); padding-block: 26px; }
/* Mask softened 8%/92% → 3%/97% (2026-07-27): at 8% the fade ate 138px at each edge on a
   1728px display, which read as the band not reaching the screen edges. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.marquee-track { display: flex; width: max-content; animation: scrollX 38s linear infinite; }
/* Two .marquee-set copies make translateX(-50%) land on the start of copy 2, seamless. */
.marquee-set { display: flex; flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .item { display: inline-flex; align-items: center; gap: 14px; padding: 0 30px; font-family: var(--font-head); font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); color: var(--slate-light); white-space: nowrap; }
.marquee-track .item .star { color: var(--azure); font-size: .7em; }
@keyframes scrollX { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ===========================================================================
   Generic cards / grids
   =========================================================================== */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px; overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), background var(--dur);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0;
  background: linear-gradient(135deg, var(--azure), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--dur);
  /* ⚠️ LOAD-BEARING (added 2026-07-27). This is a decorative hover-glow border, but it is
     position:absolute;inset:0, so it paints OVER the card's static content and swallows every
     click inside the card. Latent since the original build and invisible until a .card first
     contained a link: the two client store links in #work were completely dead on the live
     site. Never remove pointer-events:none, and never add an inset:0 overlay without it. */
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: rgba(70,166,234,.4); background: var(--surface-2); }
.card:hover::before { opacity: 1; }
.card .ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: rgba(70,166,234,.12); color: var(--azure); margin-bottom: 22px; }
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font-size: 21px; margin-bottom: 11px; color: var(--ink); }
.card p { color: var(--muted); font-size: 15.5px; }
.card .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tag { font-size: 12px; font-family: var(--font-head); font-weight: 500; color: var(--slate-light); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }

/* ===========================================================================
   "Who it's for"
   =========================================================================== */
.fit { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.fit-list { display: grid; gap: 16px; }
.fit-row { display: flex; gap: 15px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.fit-row:hover { border-color: rgba(70,166,234,.35); transform: translateX(4px); }
.fit-row .mark { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(70,166,234,.14); color: var(--azure); }
.fit-row .mark svg { width: 15px; height: 15px; }
.fit-row.no .mark { background: rgba(255,99,99,.12); color: #ff8a7a; }
.fit-row p { font-size: 15.5px; color: var(--body); }
.fit-row p strong { display: block; color: var(--ink); margin-bottom: 2px; font-size: 16px; }

/* ===========================================================================
   Stats
   =========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card { text-align: center; padding: 32px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stat-card .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.03em; background: linear-gradient(135deg, #fff, var(--slate-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.stat-card .num .suffix { -webkit-text-fill-color: var(--azure); color: var(--azure); }
.stat-card .lbl { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* ===========================================================================
   Process
   =========================================================================== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.phase { position: relative; padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.phase:hover { border-color: rgba(70,166,234,.35); transform: translateY(-4px); }
.phase .step-no { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--azure); }
.phase h3 { font-size: 19px; margin: 14px 0 9px; }
.phase p { font-size: 14.5px; color: var(--muted); }
.phase .got { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--slate-light); font-family: var(--font-head); font-weight: 500; }
.phase .got span { color: var(--faint); display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; margin-bottom: 4px; }

/* ===========================================================================
   Founder / expertise
   =========================================================================== */
.founder { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.founder-card { position: relative; background: var(--bg-3); border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 4vw, 40px); overflow: hidden; }
.founder-card::before { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; background: radial-gradient(circle, rgba(70,166,234,.18), transparent 70%); pointer-events: none; }
.founder-card .who { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; position: relative; }
.founder-card .founder-photo { margin: calc(-1 * clamp(28px, 4vw, 40px)) calc(-1 * clamp(28px, 4vw, 40px)) 24px; border-radius: 22px 22px 0 0; overflow: hidden; position: relative; }
.founder-card .founder-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; display: block; }
.founder-card .founder-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -60px 60px -30px rgba(13,18,26,.55); }
.founder-card .who .nm { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink); }
.founder-card .who .rl { font-size: 14px; color: var(--muted); }
.founder-card .creds { display: grid; gap: 15px; position: relative; }
.founder-card .creds li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--body); }
.founder-card .creds li svg { flex: none; width: 20px; height: 20px; color: var(--azure); margin-top: 2px; }
.founder-text h2 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 22px; }
.founder-text p { color: var(--muted); margin-bottom: 18px; font-size: 16.5px; }
.founder-text p strong { color: var(--ink); }
.principles { display: grid; gap: 12px; margin-top: 26px; }
.principle { display: flex; gap: 13px; align-items: baseline; font-size: 15.5px; color: var(--body); }
.principle b { font-family: var(--font-head); color: var(--azure); font-weight: 700; flex: none; }

/* ===========================================================================
   Guarantee band
   =========================================================================== */
.guarantee { position: relative; border-radius: 28px; overflow: hidden; padding: clamp(40px, 6vw, 72px); background: linear-gradient(135deg, #16273b, #0f1620); border: 1px solid var(--line); }
.guarantee::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 85% 10%, rgba(70,166,234,.22), transparent 60%); pointer-events: none; }
.guarantee-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.guarantee h2 { font-size: clamp(28px, 4.4vw, 46px); margin-bottom: 18px; }
.guarantee > .guarantee-inner > div > p { color: var(--muted); font-size: 17px; }
.promises { display: grid; gap: 16px; }
.promise { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.promise .pico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(70,166,234,.14); color: var(--azure); display: grid; place-items: center; }
.promise .pico svg { width: 22px; height: 22px; }
.promise h4 { font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.promise p { font-size: 14px; color: var(--muted); }

/* ===========================================================================
   Founding-client offer
   =========================================================================== */
.offer { position: relative; border-radius: 28px; overflow: hidden; padding: clamp(40px, 6vw, 76px); text-align: center;
  background: linear-gradient(135deg, rgba(70,166,234,.16), rgba(91,108,255,.10)), var(--bg-3); border: 1px solid rgba(70,166,234,.3); }
.offer .badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(70,166,234,.16); border: 1px solid rgba(70,166,234,.4); color: var(--azure); font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .05em; padding: 8px 16px; border-radius: 999px; margin-bottom: 24px; }
.offer h2 { font-size: clamp(28px, 4.6vw, 48px); max-width: 760px; margin: 0 auto 20px; }
.offer h2 .grad { background: linear-gradient(100deg, var(--azure), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.offer p.lead { color: var(--muted); font-size: 18px; max-width: 600px; margin: 0 auto 18px; }
.offer .spots { display: inline-flex; align-items: center; gap: 10px; color: var(--slate-light); font-size: 14.5px; font-family: var(--font-head); margin-bottom: 32px; }
.offer .spots .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--azure); position: relative; }
.offer .spots .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--azure); animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .offer .spots .pulse::after { animation: none; } }

/* ===========================================================================
   Pricing tiers
   =========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: transform var(--dur) var(--ease-out), border-color var(--dur), background var(--dur); }
.tier:hover { transform: translateY(-6px); border-color: rgba(70,166,234,.35); background: var(--surface-2); }
.tier.featured { border-color: rgba(70,166,234,.55); background: linear-gradient(180deg, rgba(70,166,234,.08), transparent 60%), var(--surface); position: relative; box-shadow: 0 30px 70px -30px rgba(70,166,234,.5); }
/* featured tier is highlighted with border + glow only, no popularity label */
.tier h3 { font-size: 22px; }
.tier .tier-for { color: var(--slate-light); font-size: 14px; margin: 5px 0 20px; font-family: var(--font-head); font-weight: 500; }
.tier .price { font-family: var(--font-head); font-weight: 700; font-size: 23px; color: var(--ink); }
.tier .price small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.tier .rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.tier ul { display: grid; gap: 13px; margin-bottom: 28px; flex: 1; }
.tier ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--body); }
.tier ul li svg { flex: none; width: 19px; height: 19px; color: var(--azure); margin-top: 2px; }
.pricing-note { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 28px; }

/* ===========================================================================
   FAQ
   =========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-head); font-weight: 600; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink); }
.faq-q .pm { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; position: relative; transition: border-color var(--dur-micro), background var(--dur-micro); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--azure); border-radius: 2px; transition: transform var(--dur) var(--ease-out); }
.faq-q .pm::before { width: 12px; height: 2px; }
.faq-q .pm::after { width: 2px; height: 12px; }
.faq-item.open .faq-q .pm { background: rgba(70,166,234,.14); border-color: rgba(70,166,234,.4); }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease-out); }
.faq-a p { padding: 0 52px 26px 0; color: var(--muted); font-size: 16px; }

/* ===========================================================================
   Contact
   =========================================================================== */
.contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 6vw, 72px); }
.contact-info h2 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 18px; }
.contact-info > p { color: var(--muted); margin-bottom: 30px; font-size: 17px; }
.contact-methods { display: grid; gap: 14px; }
.contact-method { display: flex; gap: 15px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.contact-method:hover { border-color: rgba(70,166,234,.4); transform: translateX(4px); }
.contact-method .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(70,166,234,.12); color: var(--azure); display: grid; place-items: center; flex: none; }
.contact-method .ico svg { width: 21px; height: 21px; }
.contact-method .mlabel { font-size: 12.5px; color: var(--muted); }
.contact-method .mval { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 15.5px; }

.form-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 4vw, 40px); }
.field { margin-bottom: 19px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 8px; }
.field label .opt { font-weight: 500; color: var(--faint); }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); transition: border-color var(--dur-micro), box-shadow var(--dur-micro), background var(--dur-micro); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(70,166,234,.18); background: rgba(255,255,255,.05); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238294a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field select option { background: #141c27; }
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 16px; }
.hp { position: absolute; left: -9999px; }
.form-status { display: none; padding: 15px 17px; border-radius: 12px; font-size: 14.5px; margin-bottom: 20px; }
.form-status.ok { display: block; background: rgba(52,199,89,.12); color: #6ee29a; border: 1px solid rgba(52,199,89,.3); }
.form-status.err { display: block; background: rgba(255,99,99,.1); color: #ff9385; border: 1px solid rgba(255,99,99,.3); }

/* ===========================================================================
   CTA band
   =========================================================================== */
.cta-band { position: relative; border-radius: 28px; overflow: hidden; padding: clamp(48px, 7vw, 92px); text-align: center; border: 1px solid var(--line); background: rgba(255,255,255,.045); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); }
.cta-band-inner { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(32px, 5.4vw, 60px); letter-spacing: -.03em; }
.cta-band p { color: var(--muted); max-width: 540px; margin: 20px auto 36px; font-size: 19px; }
.cta-band .hero-actions { justify-content: center; }

/* ===========================================================================
   Footer
   =========================================================================== */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 84px) 36px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { font-size: 14.5px; max-width: 330px; color: var(--muted); }
.footer-col h4 { color: var(--ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; font-weight: 700; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--muted); font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--faint); }
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: #fff; }

/* ===========================================================================
   Reveal-on-scroll utilities
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .fit, .founder, .contact, .guarantee-inner { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: auto; left: auto; height: 100vh; height: 100dvh; width: min(82vw, 360px); flex-direction: column; align-items: stretch; justify-content: center;
    background: rgba(15,22,32,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 40px var(--gut); gap: 6px;
    transform: translateX(105%); transition: transform .4s var(--ease-expo); box-shadow: -30px 0 60px rgba(0,0,0,.5);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a.navlink { padding: 14px 12px; font-size: 18px; }
  .nav-cta { margin: 14px 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-toggle { display: block; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .process-grid, .stats { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-band .btn, .offer .btn { width: 100%; justify-content: center; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 24px 12px; }
}

/* ===========================================================================
   Color pass (2026-06-23): slightly richer color throughout, still premium-
   dark. Azure / cyan / indigo accents spread across sections: gradient
   eyebrows, multicolor service cards, subtle section tints + glows. All
   static gradients (no added motion / runtime cost).
   =========================================================================== */
:root {
  --azure-rgb:  70,166,234;
  --cyan-rgb:   52,198,214;
  --indigo-rgb: 91,108,255;
}

/* Gradient eyebrow labels on every section header */
.eyebrow {
  background: linear-gradient(90deg, var(--azure), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Every section is fully transparent. The single ambient color field (defined
   at the very bottom of this file) is the page's ONLY background, so color is
   continuous and there are zero per-section seams. (The .glow-* and .has-mesh
   classes left in the markup are now inert.) */
.section, .section--alt { background: transparent; }

/* Multicolor service cards: rotate azure / cyan / indigo accents */
#services .card { --accent: var(--azure); --accent-rgb: var(--azure-rgb); }
#services .card:nth-child(2) { --accent: var(--cyan);   --accent-rgb: var(--cyan-rgb); }
#services .card:nth-child(3) { --accent: var(--indigo); --accent-rgb: var(--indigo-rgb); }
#services .card .ico { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
#services .card::before { background: linear-gradient(135deg, var(--accent), transparent 40%); }
#services .card:hover { border-color: rgba(var(--accent-rgb), .42); }
#services .card .tag { border-color: rgba(var(--accent-rgb), .22); }

/* "This is for you if…" strip under the services (folds in the old who-it's-for) */
.fit-note { margin-top: clamp(40px, 5vw, 60px); text-align: center; }
.fit-note .fit-note-lead { display: block; font-family: var(--font-head); font-weight: 600; color: var(--slate-light); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.fit-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fit-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; font-size: 14.5px; color: var(--body); }
.fit-pill svg { flex: none; width: 16px; height: 16px; color: var(--azure); }

/* ---------------------------------------------------------------------------
   Seamless flow: remove every full-width divider and solid color step so the
   whole page reads as one continuous scroll (no horizontal lines between
   sections). Color comes only from the soft washes + meshes above; the footer
   gets a gentle darkening for depth instead of a hard top border.
   --------------------------------------------------------------------------- */
.marquee-band { background: transparent; border-top: 0; border-bottom: 0; }
.site-footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); border-top: 0; }
.footer-top { border-bottom: 0; }

/* ===========================================================================
   Work / client proof (2026-07-27): the #work section (verbatim client
   testimonials + a link to each live store) and the .pull-quote that answers
   the 70% cart-abandonment stat in the Problem section.

   Portable by design: uses only :root tokens and the existing .card shell, so
   the whole block can be lifted into a future redesign with the markup.
   =========================================================================== */

/* --- Work cards: .card shell, no .ico, quote-first --- */
.work-card { display: flex; flex-direction: column; }
.work-card .work-store { font-size: 22px; margin-bottom: 6px; color: var(--ink); }
.work-card .work-scope {
  font-family: var(--font-head); font-weight: 500; font-size: 14px;
  color: var(--slate-light); margin-bottom: 24px;
}
.work-card .work-quote { margin: 0 0 24px; position: relative; padding-top: 30px; }
.work-card .work-quote::before {
  content: "\201C"; position: absolute; top: -12px; left: -2px;
  font-family: var(--font-head); font-weight: 700; font-size: 50px; line-height: 1;
  color: var(--azure); opacity: .28;
}
.work-card .work-quote p { color: var(--body); font-size: 15.5px; line-height: 1.7; }
.work-card .work-quote p + p { margin-top: 14px; }
.work-card .work-attrib { margin-top: auto; padding-top: 4px; }
.work-card .work-attrib .nm { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); }
.work-card .work-attrib .rl { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.work-card .work-link {
  display: flex; align-items: center; gap: 8px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px;
  color: var(--azure); transition: color var(--dur-micro) var(--ease-out);
}
.work-card .work-link:hover { color: var(--cyan); }
.work-card .work-link .arrow { transition: transform var(--dur-micro) var(--ease-out); }
.work-card .work-link:hover .arrow { transform: translateX(4px); }

/* --- Pull quote under the 70% stat --- */
.pull-quote {
  max-width: 640px; margin: clamp(38px, 5vw, 54px) auto 0; padding-top: clamp(30px, 4vw, 40px);
  border-top: 1px solid var(--line-soft); text-align: center;
}
.pull-quote blockquote {
  font-family: var(--font-head); font-weight: 500; font-style: italic;
  font-size: clamp(19px, 2.4vw, 25px); line-height: 1.45; letter-spacing: -.01em;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.pull-quote blockquote::before { content: "\201C"; }
.pull-quote blockquote::after  { content: "\201D"; }
.pull-quote figcaption { margin-top: 16px; font-size: 14px; color: var(--muted); }
.pull-quote figcaption a { color: var(--slate-light); border-bottom: 1px solid rgba(70,166,234,.4); transition: color var(--dur-micro) var(--ease-out); }
.pull-quote figcaption a:hover { color: var(--azure); }

@media (max-width: 600px) {
  .work-card .work-link { font-size: 13.5px; word-break: break-word; }
}

/* ===========================================================================
   Single ambient color field (2026-06-23): ONE continuous, slowly drifting
   background behind the WHOLE page; replaces all per-section backgrounds so
   color is always present and in motion, with no dark patches and no seams.
   Fixed to the viewport; five soft blobs drift independently. The base navy
   (body bg) shows between them. Reduced-motion → holds still.
   =========================================================================== */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Inner frame: a shared gentle zoom on scroll (--sp = 0 at top → 1 at bottom,
   set from JS), plus a soft base wash so that when the two color layers below
   parallax apart, a gap never exposes the bare dark base. Oversized for headroom. */
.ambient-layer {
  position: absolute; inset: -55%; will-change: transform;
  transform: scale(calc(1 + var(--sp, 0) * 0.26));
  filter: saturate(1.3);   /* makes the color spots pop, like the CTA-band mesh */
  /* faint floor so a parallax gap never reads as dead black, but kept dark
     enough to preserve contrast between the bright spots above */
  background:
    radial-gradient(85% 85% at 38% 32%, rgba(var(--azure-rgb),  .09), transparent 80%),
    radial-gradient(85% 85% at 70% 74%, rgba(var(--indigo-rgb), .08), transparent 80%);
}
/* PARALLAX: the two color layers translate at DIFFERENT rates with scroll, so
   the colors visibly slide past each other. The `translate` property composes
   with each layer's idle-drift `transform` keyframe (still alive when idle). */
.ambient-layer::before, .ambient-layer::after { content: ""; position: absolute; inset: 0; will-change: transform, translate; }
.ambient-layer::before {           /* "blue" layer: bright azure/cyan spots, rises */
  translate: calc(var(--sp, 0) * -9%) calc(var(--sp, 0) * -30%);
  background:
    radial-gradient(42% 42% at 16% 26%, rgba(var(--azure-rgb), .56), transparent 58%),
    radial-gradient(34% 34% at 60% 78%, rgba(var(--cyan-rgb),  .46), transparent 56%),
    radial-gradient(30% 30% at 88% 40%, rgba(var(--azure-rgb), .40), transparent 56%);
  animation: ambDriftA 36s ease-in-out infinite alternate;
}
.ambient-layer::after {            /* "purple" layer: bright indigo spots, drops (opposite the blue layer) */
  translate: calc(var(--sp, 0) * 14%) calc(var(--sp, 0) * 9%);
  background:
    radial-gradient(40% 40% at 80% 66%, rgba(var(--indigo-rgb), .56), transparent 58%),
    radial-gradient(32% 32% at 34% 58%, rgba(var(--indigo-rgb), .46), transparent 56%),
    radial-gradient(30% 30% at 66% 14%, rgba(var(--azure-rgb),  .36), transparent 56%);
  animation: ambDriftB 46s ease-in-out infinite alternate;
}
@keyframes ambDriftA { to { transform: translate(5%, 4%) scale(1.12); } }
@keyframes ambDriftB { to { transform: translate(-6%, -3%) scale(1.10); } }
@media (prefers-reduced-motion: reduce) {
  .ambient-layer { transform: none !important; }
  .ambient-layer::before, .ambient-layer::after { animation: none !important; translate: none !important; }
}