/* ============================================================
   PIXELATE — dark "Ember" theme (colour way v2). Static, no deps.
   Umber-charcoal canvas · warm copper/sand accents · hairline
   borders · Space Grotesk + Inter + JetBrains Mono.
   Token NAMES are unchanged from the Signal build (inline styles
   across all pages reference them) — only the VALUES moved.
   So yes: --cyan now holds ember orange, --blue holds sand.
   ============================================================ */

:root {
  /* Accents — used sparingly */
  --cyan:#EA8A52; --blue:#E5BE7E; --indigo:#F6E2BD;
  --violet:#E5BE7E; --fuchsia:#EA8A52;            /* legacy aliases → Ember */
  --violet-deep:#EA8A52;                          /* legacy text-accent → ember */
  --grad:    linear-gradient(100deg, var(--cyan), var(--blue));
  --grad-3:  linear-gradient(120deg, var(--cyan), var(--blue) 58%, var(--indigo));
  --grad-btn:var(--cyan);

  /* Dark surfaces (the whole site is dark now) */
  --navy:#0D0A07; --navy-2:#120E0A;
  --bg:#0D0A07; --bg-soft:#120E0A;
  --surface:#16110C; --surface-2:#1C1610;
  --ink:#080604; --ink-2:#0E0B08;
  --line:rgba(235,215,185,.09);
  --line-2:rgba(235,215,185,.16);
  --ink-line:rgba(235,215,185,.14);

  /* Text */
  --text:#F4EFE6; --muted:#AA9C89; --dim:#8F8070;
  --ink-text:#F4EFE6; --ink-muted:#AA9C89;

  /* Shadows tuned for dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 40px 80px -32px rgba(0,0,0,.85);
  --glow-cyan: 0 12px 40px -16px rgba(234,138,82,.45);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --maxw:1160px; --radius:18px; --radius-sm:12px;
  --pad: clamp(1.25rem, 4vw, 2.25rem);
  --ease: cubic-bezier(.2,.7,.2,1); --dur:.25s;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
section { position: relative; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* Focus visibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--cyan); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 1rem; top: .6rem; z-index: 200; background: var(--surface); color: var(--text); padding: .6rem 1rem; border-radius: 10px; box-shadow: var(--shadow); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.grad-text { background: var(--grad-3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent { color: var(--cyan); }
.section-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 3.25rem; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
/* Short ember rule above section headings — the quiet visual beat that replaced the old kicker labels */
.section-head h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--grad); margin: 0 auto 1.15rem; }
.section-head--left h2::before { margin-inline: 0; }
.section-head p { color: var(--muted); margin-top: 1rem; font-size: 1.06rem; }
.section-head--left { margin-inline: 0; text-align: left; }
.h2-lg { font-size: clamp(2rem, 4.5vw, 3rem); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.4rem; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--cyan); color: #2E1608; overflow: hidden;
  box-shadow: var(--glow-cyan);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -14px rgba(234,138,82,.55); }
.btn:hover::after { transform: translateX(120%); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.btn--ghost:hover { border-color: var(--cyan); background: rgba(234,138,82,.07); box-shadow: none; transform: translateY(-2px); }
.btn--ghost::after { display: none; }
.on-dark.btn--ghost, .on-dark .btn--ghost { color: var(--text); border-color: var(--line-2); }
.on-dark.btn--ghost:hover { background: rgba(234,138,82,.07); border-color: var(--cyan); }

/* ---------- Logo (2x2 pixel mark, injected via JS) ---------- */
.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.26rem; letter-spacing: -.02em; color: var(--text); }
.logo__mark { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 23px; height: 23px; }
.logo__mark span { border-radius: 3px; background: var(--cyan); }
.logo__mark span:nth-child(2), .logo__mark span:nth-child(3) { background: var(--blue); }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--grad); z-index: 100; transition: width .1s linear; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(13,10,7,.80); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a { font-size: .92rem; color: var(--muted); transition: color var(--dur); white-space: nowrap; }
.nav__links a:hover, .nav__links a.active { color: var(--text); }
.nav__links a.active { font-weight: 500; }
.nav__cta { display: flex; align-items: center; gap: .6rem; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--dur); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Services dropdown */
.nav__group { position: relative; }
.nav__grouptoggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem; color: var(--muted); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.nav__group:hover .nav__grouptoggle, .nav__group:focus-within .nav__grouptoggle { color: var(--text); }
.nav__grouptoggle i { font-size: 1rem; transition: transform var(--dur); }
.nav__group:hover .nav__grouptoggle i, .nav__group:focus-within .nav__grouptoggle i, .nav__group.open .nav__grouptoggle i { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(620px, 86vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  padding: .9rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: .2rem;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 70;
}
.nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel, .nav__group.open .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__panel a { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border-radius: 10px; color: var(--text); transition: background var(--dur); }
.nav__panel a:hover { background: var(--panel-2, #1C1610); }
.nav__panel a i { font-size: 1.15rem; color: var(--cyan); margin-top: 2px; flex: none; }
.nav__panel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav__panel a b { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--text); }
.nav__panel a .nav__panel-txt > span { font-size: .78rem; color: var(--muted); line-height: 1.35; }

/* ---------- Rolling pixels (subtle brand motif) ---------- */
.pixels { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.pixels span { position: absolute; width: 22px; height: 22px; border-radius: 6px; background: var(--cyan); opacity: .5; will-change: transform, border-radius; }
.pixels span:nth-child(2) { background: var(--blue); }
.pixels span:nth-child(3) { background: var(--cyan); }
.pixels span:nth-child(4) { background: var(--blue); }

/* ---------- HERO ---------- */
.hero { background: var(--ink); color: var(--text); padding: clamp(4rem,9vw,7rem) 0 clamp(4.5rem,11vw,8rem); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .03; pointer-events: none; z-index: 1; }
.hero .eyebrow { color: var(--muted); }
.hero__blobs { position: absolute; inset: 0; z-index: 0; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .5; animation: float 16s ease-in-out infinite; }
.hero__blob--1 { width: 520px; height: 520px; background: rgba(216,98,42,.42); top: -160px; right: -60px; }
.hero__blob--2 { width: 420px; height: 420px; background: rgba(229,190,126,.24); top: 40px; left: -120px; animation-delay: -5s; }
.hero__blob--3 { width: 360px; height: 360px; background: rgba(170,64,44,.32); bottom: -180px; left: 40%; opacity: .35; animation-delay: -9s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-26px) scale(1.06); } }
.hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .4; background-image: radial-gradient(rgba(228,196,150,.12) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 8%, #000 35%, transparent 74%); mask-image: radial-gradient(ellipse 80% 60% at 50% 8%, #000 35%, transparent 74%); }
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin-inline: auto; }
.hero h1 { font-size: clamp(2.5rem,6.6vw,4.6rem); }
.hero__sub { font-size: clamp(1.08rem,2.1vw,1.32rem); color: var(--muted); max-width: 620px; margin: 1.4rem auto 2.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.hero__pixelrow { display: flex; gap: 10px; justify-content: center; margin-bottom: 2rem; }
.hero__pixelrow i { width: 26px; height: 26px; border-radius: 7px; display: block; animation: pop .5s backwards; }
.hero__pixelrow i:nth-child(1){ background: var(--cyan); animation-delay:.05s; }
.hero__pixelrow i:nth-child(2){ background: var(--blue); animation-delay:.15s; }
.hero__pixelrow i:nth-child(3){ background: var(--indigo); animation-delay:.25s; }
.hero__pixelrow i:nth-child(4){ background: var(--cyan); animation-delay:.35s; }
@keyframes pop { from { opacity: 0; transform: scale(.4) translateY(-10px); } to { opacity: 1; transform: none; } }

/* hero credibility row */
.hero__meta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
/* Full-width credibility row spanning both hero columns (home) */
.shero__grid > .hero__meta { grid-column: 1 / -1; margin-top: 0; padding-top: 2rem; }
.hero__meta-item { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; background: rgba(235,215,185,.03); border: 1px solid var(--line); border-radius: 14px; transition: border-color var(--dur), transform var(--dur), background var(--dur); }
.hero__meta-item:hover { border-color: var(--line-2); background: rgba(234,138,82,.05); transform: translateY(-2px); }
.hero__meta-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(234,138,82,.12); color: var(--cyan); font-size: 1.1rem; }
.hero__meta b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text); letter-spacing: -.01em; line-height: 1.2; }
.hero__meta-sub { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.4; color: var(--dim); }
.hero__framing { margin-top: 1.4rem; font-size: .92rem; color: var(--muted); max-width: 44ch; }

/* ---------- Split hero (service / agents pages) ---------- */
.shero { background: var(--ink); color: var(--text); padding: clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem); overflow: hidden; }
.shero::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .03; pointer-events: none; }
.shero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.2rem; align-items: center; }
.shero h1 { font-size: clamp(2.2rem,5vw,3.6rem); }
.shero p { color: var(--muted); font-size: 1.1rem; margin: 1.2rem 0 2rem; max-width: 500px; }
.shero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.shero__art { position: relative; }

/* ---------- Console (live agents) ---------- */
.console { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.3rem 1.5rem; box-shadow: var(--shadow-lg); }
.console__title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--dim); text-transform: uppercase; display: flex; align-items: center; gap: .55rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.console__title .od { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.node { display: flex; align-items: center; gap: .95rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.node:last-child { border-bottom: none; padding-bottom: .15rem; }
.node__ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 1.15rem; color: var(--cyan); }
.node b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; margin-bottom: .1rem; }
.node span { font-size: .79rem; color: var(--dim); }
.pulse { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; color: var(--cyan); text-transform: uppercase; }
.pulse i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Marquee ---------- */
/* Industries we serve — static, centred row (no longer scrolls) */
.marquee { background: var(--ink-2); color: var(--muted); border-block: 1px solid var(--line); padding: 1rem 0; overflow: hidden; }
.marquee__track { display: flex; justify-content: center; }
.marquee__group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; padding: 0 1.2rem; }
.marquee__group span { display: inline-flex; align-items: center; gap: 2.4rem; }
.marquee__group span:not(:last-child)::after { content: "•"; color: var(--cyan); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem,9vw,6.5rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: var(--text); }
.section--dark::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .03; pointer-events: none; }
.section--dark > * { position: relative; z-index: 1; }
.section--dark .section-head p { color: var(--muted); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(234,138,82,.09), transparent 60%); pointer-events: none; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card:hover::before { transform: scaleX(1); }
.card:hover::after { opacity: 1; }
.card__icon {
  position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.5rem; margin-bottom: 1.2rem; color: var(--cyan);
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: transform .3s var(--ease), color .3s;
}
.card:hover .card__icon { transform: translateY(-2px); color: var(--text); }
.card h3 { font-size: 1.25rem; margin-bottom: .6rem; position: relative; z-index: 1; }
.card p { color: var(--muted); position: relative; z-index: 1; }
.card__list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .55rem; position: relative; z-index: 1; }
.card__list li { position: relative; padding-left: 1.7rem; color: var(--muted); font-size: .95rem; }
.card__list li::before { content: "✓"; font-weight: 700; position: absolute; left: 0; top: 0; color: var(--cyan); font-size: 1rem; }
.card__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.card__link i { transition: transform var(--dur); }
.card:hover .card__link i { transform: translateX(4px); }
.card--link { display: block; }

/* ---------- Feature list (generic ti-check list) ---------- */
.feature-list { display: flex; flex-direction: column; gap: .7rem; }
.feature-list li { position: relative; padding-left: 1.9rem; color: var(--muted); }
.feature-list li::before { content: "✓"; font-weight: 700; position: absolute; left: 0; top: .1em; color: var(--cyan); font-size: 1.15rem; }
.feature-list b { color: var(--text); font-weight: 500; }

/* ---------- Pillars (what we do) ---------- */
.pillars { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
.pillar { display: flex; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.pillar:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pillar__ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; color: var(--cyan); background: var(--surface-2); border: 1px solid var(--line-2); }
.pillar h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.pillar p { color: var(--muted); font-size: .94rem; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); background: rgba(234,138,82,.10); border: 1px solid rgba(234,138,82,.28); padding: .28rem .6rem; border-radius: 7px; }
.badge--blue { color: var(--blue); background: rgba(229,190,126,.12); border-color: rgba(229,190,126,.30); }
.badge--free { color: var(--cyan); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat { text-align: center; padding: 1.5rem 1rem; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,5vw,3.4rem); line-height: 1; }
.stat__label { color: var(--muted); margin-top: .6rem; font-size: .94rem; }

/* ---------- Pricing ---------- */
.term-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: .35rem; width: fit-content; margin: 0 auto 1rem; }
.term-switch button { position: relative; border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--muted); padding: .55rem 1rem; border-radius: 999px; transition: color var(--dur), background var(--dur); }
.term-switch button .save { display: block; font-size: .68rem; font-weight: 500; color: var(--cyan); margin-top: 2px; }
.term-switch button[aria-pressed="true"] { background: var(--cyan); color: #2E1608; }
.term-switch button[aria-pressed="true"] .save { color: rgba(46,22,8,.78); }
.term-caption { text-align: center; color: var(--muted); margin-bottom: 2.5rem; font-size: .95rem; }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; padding-top: 16px; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.plan--featured { border: 1px solid transparent; background: linear-gradient(180deg, #1F160D, var(--surface) 55%) padding-box, var(--grad) border-box; box-shadow: var(--shadow-lg), 0 24px 70px -28px rgba(234,138,82,.38); z-index: 2; }
.plan__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: #2E1608; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(234,138,82,.7); }
.plan__free { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; background: rgba(234,138,82,.14); color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .76rem; padding: .3rem .7rem; border-radius: 999px; margin-bottom: .9rem; }
.plan__name { font-size: 1.5rem; }
.plan__for { color: var(--muted); font-size: .95rem; margin: .2rem 0 1.1rem; }
.plan__build { font-family: var(--font-display); }
.plan__build b { font-size: 2.1rem; }
.plan__build span { color: var(--muted); font-size: .85rem; font-weight: 500; }
.plan__retainer { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line-2); }
.plan__rate { font-family: var(--font-display); font-weight: 700; }
.plan__rate b { font-size: 1.7rem; color: var(--cyan); }
.plan__rate .per { color: var(--muted); font-size: .9rem; font-weight: 500; }
.plan__termnote { color: var(--muted); font-size: .82rem; margin-top: .2rem; min-height: 1.1em; }
.plan__list { margin: 1.3rem 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.plan__list li { position: relative; padding-left: 1.7rem; color: var(--text); font-size: .95rem; }
.plan__list li::before { content: "✓"; font-weight: 700; position: absolute; left: 0; top: .05em; color: var(--cyan); font-size: 1rem; }
.plan__list li.muted { color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.step:hover { transform: translateY(-4px); border-color: var(--line-2); }
.step__n { font-family: var(--font-mono); font-weight: 500; font-size: 1.4rem; color: var(--cyan); }
.step h3 { font-size: 1.12rem; margin: .5rem 0; }
.step p { color: var(--muted); font-size: .94rem; }

.example { margin-top: 2rem; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.example h3 { position: relative; z-index: 1; }
.example p { color: var(--muted); position: relative; z-index: 1; margin-top: .6rem; }
.example b { color: var(--cyan); }

.clause { margin-top: 2rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 0; padding: 1.2rem 1.4rem; color: var(--muted); font-size: .96rem; }
.clause b { color: var(--text); }
/* Collapsible clause (details/summary) — keeps long inclusion notes short on mobile */
.clause--toggle { padding: 0; }
.clause--toggle summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .8rem; padding: 1.2rem 1.4rem; }
.clause--toggle summary::-webkit-details-marker { display: none; }
.clause--toggle .clause__hint { color: var(--muted); font-size: .85rem; margin-right: auto; }
.clause--toggle summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.2rem; color: var(--cyan); line-height: 1; }
.clause--toggle[open] summary::after { content: "\2212"; }
.clause--toggle .clause__body { padding: 0 1.4rem 1.2rem; }
@media (max-width: 560px) { .clause--toggle .clause__hint { display: none; } }
.pricing-note { text-align: center; color: var(--muted); margin-top: 2.4rem; max-width: 640px; margin-inline: auto; }

/* discount prices */
.was { color: var(--dim); text-decoration: line-through; font-weight: 500; margin-right: .3rem; }
.plan__build .was { font-size: 1.1rem; }
.plan__rate .was { font-size: 1rem; color: var(--dim); }
.plan__savetag { display: inline-block; background: rgba(234,138,82,.14); color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .76rem; padding: .25rem .7rem; border-radius: 999px; margin-top: .6rem; }

/* ---------- Agent pricing cards ---------- */
.agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.agent { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.agent:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.agent--featured { border-color: rgba(234,138,82,.45); }
.agent__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.agent__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 1.3rem; color: var(--cyan); }
.agent__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.agent__tag { margin-left: auto; }
.agent p { color: var(--muted); font-size: .94rem; }
.agent__price { display: flex; align-items: baseline; gap: .8rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--font-display); }
.agent__price .setup { font-weight: 700; font-size: 1.3rem; }
.agent__price .mo { color: var(--cyan); font-weight: 600; }
.agent__price .usage { color: var(--dim); font-size: .78rem; font-family: var(--font-body); margin-left: auto; }

/* ---------- Designs: per-industry style previews (independent palettes) ---------- */
.designs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.design { display: flex; flex-direction: column; }
.design__frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--c-bg); color: var(--c-text); font-family: var(--c-body, var(--font-body)); aspect-ratio: 4 / 3; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.design:hover .design__frame { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.design__bar { display: flex; align-items: center; gap: 5px; padding: .5rem .7rem; background: var(--c-surface); }
.design__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted); opacity: .55; }
.design__bar .u { margin-left: .5rem; font-size: .58rem; color: var(--c-muted); font-family: var(--font-body); letter-spacing: .02em; }
.design__screen { padding: 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.design__nav { display: flex; justify-content: space-between; align-items: center; font-family: var(--c-display); font-weight: 700; font-size: .82rem; }
.design__nav .dot { width: 14px; height: 14px; border-radius: 4px; background: var(--c-accent); display: inline-block; }
.design__hl { font-family: var(--c-display); font-weight: 700; font-size: 1.2rem; line-height: 1.08; margin: .9rem 0 .4rem; color: var(--c-text); }
.design__sub { font-size: .7rem; color: var(--c-muted); line-height: 1.45; margin-bottom: .7rem; }
.design__btn { align-self: flex-start; background: var(--c-accent); color: var(--c-btn, #fff); font-family: var(--c-display); font-weight: 600; font-size: .68rem; padding: .4rem .85rem; border-radius: 999px; margin-top: auto; }
.design__chips { display: flex; gap: .45rem; margin-top: .8rem; }
.design__chips i { flex: 1; height: 24px; border-radius: 6px; background: var(--c-surface); display: block; }
.design__chips i:nth-child(2) { background: var(--c-accent2); opacity: .7; }
.design__meta { margin-top: 1rem; }
.design__meta strong { font-family: var(--font-display); font-size: 1.05rem; display: block; }
.design__meta span { color: var(--muted); font-size: .85rem; }

/* ---------- Add-ons ---------- */
.addon-cat { margin-bottom: 3.2rem; }
.addon-cat__head { max-width: 760px; margin-bottom: 1.5rem; }
.addon-cat__head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); display: flex; align-items: center; gap: .7rem; }
.addon-cat__head h2 i { color: var(--cyan); }
.addon-cat__head p { color: var(--muted); margin-top: .5rem; }
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.addon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.4rem 1.5rem; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.addon:hover { transform: translateY(-3px); border-color: var(--line-2); }
.addon__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.addon__name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; }
.addon__price { font-family: var(--font-display); font-weight: 700; color: var(--cyan); white-space: nowrap; font-size: .95rem; }
.addon__price.free { color: var(--blue); font-size: .82rem; }
.addon__desc { color: var(--muted); font-size: .92rem; margin: .5rem 0 0; }

/* ---------- Work ---------- */
.work-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.work-card__thumb { aspect-ratio: 16/10; display: grid; place-items: center; position: relative; overflow: hidden; transition: transform .45s var(--ease); }
.work-card__thumb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%); opacity: .4; }
.work-card:hover .work-card__thumb { transform: scale(1.05); }
.work-card__thumb span { position: relative; z-index: 1; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text); background: rgba(8,6,4,.55); padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(246,226,189,.22); }
.work-card__body { padding: 1.6rem; }
.work-card h3 { font-size: 1.18rem; margin-bottom: .4rem; }
.work-card p { color: var(--muted); font-size: .94rem; }
.work-card em { color: var(--cyan); font-style: normal; }
.t1 { background: linear-gradient(135deg, #241410, #3E2413); }
.t2 { background: linear-gradient(135deg, #1C130C, #33241B); }
.t3 { background: linear-gradient(135deg, #33200F, #1E1512); }
.t4 { background: linear-gradient(135deg, #241710, #3B1D1C); }

/* showcase */
.showcase { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.showcase__panel { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2.4rem; color: var(--text); box-shadow: var(--shadow-lg); }
.showcase--reverse > :first-child { order: 2; }

/* ---------- About ---------- */
.prose { max-width: 760px; margin-inline: auto; }
.prose p { color: var(--muted); margin-top: 1.1rem; font-size: 1.04rem; }
.prose p strong { color: var(--text); }
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 1rem; }
.founder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 1.1rem; }
.founder__avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #2E1608; background: var(--cyan); flex-shrink: 0; }
.founder strong { display: block; font-size: 1.12rem; font-family: var(--font-display); }
.founder span { color: var(--muted); font-size: .9rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(2rem,4.5vw,2.75rem); text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem,4vw,2.6rem); }
.cta-band p { color: var(--muted); margin: .8rem auto 1.5rem; max-width: 540px; }
/* CTA sections carry a lot of dead air — tighten the wrapper wherever a band is the only content */
.section:has(> .container > .cta-band) { padding: clamp(2.5rem,5.5vw,4rem) 0; }
.cta-band > * { position: relative; z-index: 1; }
/* .cta-band > * forces children to position:relative for stacking, which knocked
   the decorative blob into the layout flow and added ~500px of empty space.
   Re-assert absolute here (two classes outranks the one-class child rule). */
.cta-band .hero__blob { position: absolute; z-index: 0; }
.cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.contact__cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.8rem; }
.contact__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 1rem; transition: border-color var(--dur), transform var(--dur) var(--ease); }
.contact__card:hover { border-color: var(--cyan); transform: translateX(4px); }
.contact__card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--cyan); display: grid; place-items: center; font-size: 1.2rem; }
.contact__card span { display: block; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.contact__card a, .contact__card b { font-size: 1.02rem; font-family: var(--font-display); }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form .field, .form .btn, .form .form__note, .form .form__fine { min-width: 0; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .8rem .9rem; color: var(--text); font-family: inherit; font-size: .98rem; max-width: 100%; transition: border-color var(--dur), box-shadow var(--dur); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(234,138,82,.18); }
.form .btn { grid-column: 1 / -1; }
.form__note { grid-column: 1/-1; text-align: center; font-size: .92rem; min-height: 1.2em; color: var(--cyan); }
.form__fine { grid-column: 1/-1; font-size: .82rem; color: var(--muted); text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--muted); padding: 3.5rem 0 2rem; position: relative; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer__brand .logo { color: var(--text); margin-bottom: 1rem; }
.footer__brand p { max-width: 34ch; font-size: .94rem; }
.footer__col h3 { font-family: var(--font-display); color: var(--text); font-size: .92rem; margin-bottom: 1rem; }
.footer__col a { display: block; color: var(--muted); padding: .35rem 0; font-size: .93rem; transition: color var(--dur); }
.footer__col a:hover { color: var(--cyan); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .86rem; }
.footer__bottom a { color: var(--muted); } .footer__bottom a:hover { color: var(--text); }

/* ---------- Floating action bar (mobile) ---------- */
.actionbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; gap: .6rem; padding: .7rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); background: rgba(8,6,4,.93); backdrop-filter: blur(10px); border-top: 1px solid var(--line-2); }
.actionbar .btn { flex: 1; }

/* ---------- AI Enquiry Assistant (chat widget) ---------- */
.chat__launch {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 80;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.2rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--cyan); color: #2E1608; box-shadow: var(--glow-cyan);
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.chat__launch:hover { transform: translateY(-2px); }
.chat__launch i { font-size: 1.25rem; }
.chat--open .chat__launch { transform: scale(.6); opacity: 0; pointer-events: none; }
.chat__panel {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 81;
  width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 3rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-lg);
}
.chat__panel[hidden] { display: none; }
.chat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.chat__id { display: flex; align-items: center; gap: .7rem; }
.chat__id b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; display: block; }
.chat__id > div > span { font-size: .74rem; color: var(--dim); }
.chat__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex: none; animation: blink 2.4s ease-in-out infinite; }
.chat__close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.3rem; display: grid; place-items: center; padding: 4px; border-radius: 8px; }
.chat__close:hover { color: var(--text); background: var(--surface-2); }
.chat__log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.chat__msg { max-width: 85%; padding: .65rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat__msg--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; }
.chat__msg--user { align-self: flex-end; background: var(--cyan); color: #2E1608; font-weight: 500; border-bottom-right-radius: 5px; }
.chat__typing { display: inline-flex; gap: 4px; align-items: center; }
.chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.chat__typing span:nth-child(2) { animation-delay: .2s; } .chat__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line); }
.chat__input { flex: 1; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .85rem; color: var(--text); font-family: inherit; font-size: .92rem; }
.chat__input::placeholder { color: var(--dim); }
.chat__input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(234,138,82,.18); }
.chat__send { flex: none; width: 42px; border: none; border-radius: 10px; background: var(--cyan); color: #2E1608; cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; }
.chat__send:hover { filter: brightness(1.05); }
@media (max-width: 760px) {
  .chat__launch { bottom: calc(72px + env(safe-area-inset-bottom) + .8rem); right: 1rem; }
  .chat__panel { bottom: calc(72px + env(safe-area-inset-bottom) + .8rem); right: .75rem; left: .75rem; width: auto; height: min(70vh, 540px); }
}

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }
[data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; } [data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; } [data-delay="6"]{ transition-delay:.48s; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid--3, .grid--4, .pricing, .steps, .designs-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .showcase, .contact, .shero__grid { grid-template-columns: 1fr; }
  .shero__grid { gap: 2.2rem; }
  .hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase--reverse > :first-child { order: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .plan--featured { transform: none; }
  .pillars, .agent-grid { grid-template-columns: 1fr; }
}
@media (min-width: 941px) {
  .plan--featured { transform: translateY(-14px) scale(1.03); }
  .plan--featured:hover { transform: translateY(-22px) scale(1.03); }
}
@media (min-width: 761px) and (max-width: 940px) {
  .grid--3 > :nth-child(3):last-child,
  .pricing > :nth-child(3):last-child { grid-column: 1 / -1; max-width: calc(50% - .7rem); margin-inline: auto; }
}
/* Nav collapses to a menu */
@media (max-width: 1024px) {
  .nav__toggle { display: flex; }
  .nav__cta .btn--ghost { display: none; }
  .nav__links {
    position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line-2); padding: .5rem var(--pad) 1.25rem;
    transform: translateY(-160%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg);
    visibility: hidden; max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav__links.open { transform: none; visibility: visible; }
  .nav__links > a, .nav__group { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
  .nav__links > a { color: var(--text); }
  .nav__grouptoggle { width: 100%; justify-content: space-between; font-size: 1rem; color: var(--text); }
  .nav__panel { position: static; left: auto; top: auto; opacity: 1; visibility: visible; transform: none; width: auto; box-shadow: none; background: transparent; border: 0; padding: .4rem 0 0; grid-template-columns: 1fr; display: none; }
  /* The open-state rule above (.nav__group.open .nav__panel) sets transform:translateX(-50%)
     for the desktop dropdown and outranks the reset above on specificity, which on mobile
     shoved the panel half a screen off to the left. Reset it here so it stays in flow. */
  .nav__group.open .nav__panel { display: grid; transform: none; }
  .nav__panel a .nav__panel-txt > span { display: none; }
}
@media (max-width: 760px) {
  .grid--3, .grid--2, .grid--4, .pricing, .steps, .founders, .form, .designs-grid, .addon-grid { grid-template-columns: 1fr; }
  .actionbar { display: flex; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .pixels { display: none; }
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } .hero__meta { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .pixels { display: none; }
}

/* ============================================================
   v5 — welcome hero + interactivity additions
   ============================================================ */
#what { scroll-margin-top: 90px; }

/* Waving hand in the welcome eyebrow */
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }

/* Rotating headline word (typed).
   The hidden sizer spans all occupy the same grid cell as the live word, so the
   cell is always as tall and wide as the largest phrase at the current viewport.
   The headline can never reflow or "fold" as words type in and out. */
.rotator { display: inline-grid; }
.rotator__sizer { grid-area: 1 / 1; visibility: hidden; pointer-events: none; user-select: none; }
.rotator__live { grid-area: 1 / 1; }
.rotator__word { background: var(--grad-3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotator__caret { display: none; width: 3px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--cyan); border-radius: 2px; }
.rotator--live .rotator__caret { display: inline-block; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Scroll-to-explore cue */
.scrolldown { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .45rem; color: var(--muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; opacity: .82; transition: color var(--dur), opacity var(--dur); }
.scrolldown:hover { color: var(--text); opacity: 1; }
.scrolldown__mouse { width: 22px; height: 34px; border: 2px solid var(--line-2); border-radius: 12px; display: flex; justify-content: center; padding-top: 5px; }
.scrolldown__dot { width: 3px; height: 7px; border-radius: 3px; background: var(--cyan); animation: scrolldot 1.6s var(--ease) infinite; }
@keyframes scrolldot { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(9px);opacity:0} 100%{opacity:0} }
@media (max-width: 760px) { .scrolldown { display: none; } }

/* Magnetic buttons + 3D tilt (transform driven by JS) */
[data-magnetic] { transition: transform .2s var(--ease); will-change: transform; }
[data-tilt] { will-change: transform; }

/* Chat: suggested-question chips */
.chat__chips { display: flex; flex-wrap: wrap; gap: .45rem; align-self: flex-start; max-width: 96%; }
.chat__chip { font-family: var(--font-body); font-size: .82rem; color: var(--text); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: .42rem .8rem; cursor: pointer; transition: border-color var(--dur), color var(--dur), transform var(--dur); }
.chat__chip:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }

/* Chat: attention pulse on the launcher */
.chat__launch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(234,138,82,.45); animation: chatpulse 2.6s ease-out infinite; pointer-events: none; }
.chat--open .chat__launch::after { display: none; }
@keyframes chatpulse { 0%{box-shadow:0 0 0 0 rgba(234,138,82,.45)} 70%{box-shadow:0 0 0 14px rgba(234,138,82,0)} 100%{box-shadow:0 0 0 0 rgba(234,138,82,0)} }

/* Exit-intent modal + "chase me" dismiss button */
.exitm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.25rem; }
.exitm[hidden] { display: none; }
.exitm__backdrop { position: absolute; inset: 0; background: rgba(6,4,2,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease); }
.exitm--in .exitm__backdrop { opacity: 1; }
.exitm__card { position: relative; z-index: 1; width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2.2rem 1.8rem 1.7rem; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.96); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); overflow: hidden; }
.exitm--in .exitm__card { transform: none; opacity: 1; }
.exitm__x { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--ink-2); color: var(--muted); cursor: pointer; transition: color var(--dur), background var(--dur); }
.exitm__x:hover { color: var(--text); background: var(--surface-2); }
.exitm__emoji { font-size: 2.6rem; line-height: 1; }
.exitm__card h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-top: .7rem; }
.exitm__card > p { color: var(--muted); margin-top: .7rem; font-size: 1rem; }
.exitm__row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
.exitm__no { position: relative; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--muted); background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: .7rem 1.1rem; cursor: pointer; transition: transform .12s var(--ease), color var(--dur), border-color var(--dur); }
.exitm__no:hover { color: var(--text); }
.exitm__fine { font-size: .8rem; color: var(--dim); margin-top: 1rem; }

/* ============================================================
   LIGHT MODE - warm-paper counterpart to the Ember dark theme.
   Toggled via data-theme on <html> (theme.js + nav .theme-toggle).
   Token values only, plus overrides for the handful of
   dark-tuned hardcoded surfaces below.
   ============================================================ */
:root[data-theme="light"] {
  /* Accents darkened a step so text/large numerals keep contrast on paper */
  --cyan:#C96A2E; --blue:#A97F3C; --indigo:#8A6B33;
  --violet:#A97F3C; --fuchsia:#C96A2E; --violet-deep:#B85E24;

  /* Surfaces - warm paper, banded slightly darker where dark bands sat */
  --navy:#F3EBDF; --navy-2:#EDE3D4;
  --bg:#FAF5EE; --bg-soft:#F3EBDF;
  --surface:#FFFDF8; --surface-2:#F5EDE1;
  --ink:#F4EDE2; --ink-2:#EDE4D6;
  --line:rgba(74,52,28,.14); --line-2:rgba(74,52,28,.24);
  --ink-line:rgba(74,52,28,.18);

  /* Text - warm ink */
  --text:#26190E; --muted:#6C5B47; --dim:#9A8870;
  --ink-text:#26190E; --ink-muted:#6C5B47;

  /* Shadows softened for light */
  --shadow-sm: 0 1px 2px rgba(88,60,30,.10);
  --shadow:    0 1px 2px rgba(88,60,30,.10), 0 18px 40px -22px rgba(88,60,30,.22);
  --shadow-lg: 0 2px 6px rgba(88,60,30,.12), 0 40px 80px -32px rgba(88,60,30,.30);
  --glow-cyan: 0 12px 40px -16px rgba(201,106,46,.30);
}

/* Dark-tuned hardcoded surfaces, re-tuned for paper */
:root[data-theme="light"] .nav { background: rgba(250,245,238,.84); }
:root[data-theme="light"] .hero__blob--1 { background: rgba(216,98,42,.16); }
:root[data-theme="light"] .hero__blob--2 { background: rgba(169,127,60,.14); }
:root[data-theme="light"] .hero__blob--3 { background: rgba(170,64,44,.12); }
:root[data-theme="light"] .hero__grid { background-image: radial-gradient(rgba(120,86,50,.22) 1px, transparent 1px); }
:root[data-theme="light"] .hero__meta-item { background: rgba(74,52,28,.04); }
:root[data-theme="light"] .hero__meta-item:hover { background: rgba(201,106,46,.07); }
:root[data-theme="light"] .plan--featured { background: linear-gradient(180deg, #FFF7EA, var(--surface) 55%) padding-box, var(--grad) border-box; }
:root[data-theme="light"] .work-card__thumb::after { background-image: radial-gradient(rgba(88,60,30,.22) 1px, transparent 1.5px); }
:root[data-theme="light"] .work-card__thumb span { background: rgba(255,253,248,.75); border-color: rgba(120,86,50,.28); }
:root[data-theme="light"] .t1 { background: linear-gradient(135deg, #F3E2CB, #E8CBA6); }
:root[data-theme="light"] .t2 { background: linear-gradient(135deg, #EFE3D2, #DFC9AE); }
:root[data-theme="light"] .t3 { background: linear-gradient(135deg, #F0DCC0, #E6D4C0); }
:root[data-theme="light"] .t4 { background: linear-gradient(135deg, #F1DFCC, #E4C2BE); }
:root[data-theme="light"] .actionbar { background: rgba(250,245,238,.93); }
:root[data-theme="light"] .btn .btn__sheen,
:root[data-theme="light"] .btn::before { opacity: .5; }

/* Theme toggle button (lives in the nav, injected by script.js) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: transparent; border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--muted); cursor: pointer;
  transition: color var(--dur), border-color var(--dur), transform var(--dur);
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--cyan); border-color: var(--cyan); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Icon shows the mode you will switch TO */
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }