/* Winners Welcome — sapphire on gallery white · Instrument Serif / Inter
   Concept: "It answers its own phone" — proof-forward hero, no glass frame. */

/* Metric-matched local fallbacks: the swap to the web fonts happens without
   layout shift (CLS), because the fallbacks occupy the same space. */
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Georgia');
  size-adjust: 75.7%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 106.8%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  --bg: #FFFFFF;
  --bg-soft: #F5F7FA;
  --ink: #16202B;
  --muted: #5C6B7A;
  --accent: #2563EB;
  --accent-deep: #1D4ED8;
  --accent-soft: #EFF4FF;
  --line: #E4E9F0;
  --success: #0E9F6E;
  --shadow-card: 0 25px 80px -18px rgba(22, 32, 43, 0.16), 0 0 0 1px rgba(22, 32, 43, 0.04);
  --shadow-soft: 0 2px 14px rgba(22, 32, 43, 0.06);
  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, .nav-mark, .foot-mark { font-family: var(--font-display); font-weight: 400; }
h1 em, h2 em, h3 em, .nav-mark em, .foot-mark em, .trust em { font-style: italic; color: var(--accent); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 14px rgba(37, 99, 235, .28); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: var(--bg); color: var(--ink); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.btn-inverse { background: #fff; color: var(--accent-deep); }
.btn-sm { padding: 9px 20px; font-size: 14px; }

/* ── Nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(24px, 5vw, 80px);
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 var(--line);
}
.nav-mark { font-size: 22px; letter-spacing: -0.01em; display: inline-flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; }
.nav-links a:not(.btn) { color: var(--muted); transition: color .18s ease; }
.nav-links a:not(.btn):hover { color: var(--ink); }

/* ── Hero ── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; justify-items: center;
  text-align: center; padding: 120px clamp(24px, 5vw, 80px) 84px;
  background:
    radial-gradient(46% 40% at 72% 42%, rgba(37, 99, 235, 0.10), transparent 72%),
    radial-gradient(40% 38% at 18% 30%, rgba(37, 99, 235, 0.05), transparent 70%),
    var(--bg);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 620px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg); border-radius: 999px;
  padding: 7px 18px; font-size: 14px; color: var(--muted); margin-bottom: 26px;
}
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); line-height: 0.99; letter-spacing: -0.015em; max-width: 15ch; }
.hero-sub { margin: 22px 0 0; max-width: 560px; font-size: clamp(16px, 2vw, 18px); color: var(--muted); }
.hero-ctas { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--muted), transparent); display: block; animation: drop 2.2s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (min-width: 980px) {
  .hero { grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px, 5vw, 76px); justify-items: stretch; text-align: left; }
  .hero-copy { align-items: flex-start; }
  .hero-ctas { justify-content: flex-start; }
  .hero-sub { margin-inline: 0; }
}

/* ── The AI-call demo (signature moment) ── */
.calldemo {
  width: min(440px, 100%); justify-self: center; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-card); padding: 20px 20px 18px; overflow: hidden;
}
.calldemo::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 70%;
  background: radial-gradient(60% 100% at 50% 0, rgba(37, 99, 235, 0.10), transparent 70%);
  pointer-events: none;
}
.cd-tabs { display: flex; gap: 4px; background: var(--bg-soft); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.cd-tab {
  flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .01em;
  color: var(--muted); cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cd-tab:hover { color: var(--ink); }
.cd-tab.active { background: #fff; color: var(--accent-deep); box-shadow: 0 1px 8px rgba(22, 32, 43, 0.14); }
.cd-head { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); position: relative; }
.cd-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; position: relative; }
.calldemo.ringing .cd-avatar::after {
  content: ""; position: absolute; inset: -3px; border-radius: 15px;
  border: 2px solid var(--accent); opacity: 0; animation: cd-ring 1.15s ease-out infinite;
}
@keyframes cd-ring { 0% { transform: scale(.82); opacity: .75; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }
.calldemo.ringing .cd-status { color: var(--accent); animation: cd-blink 1.15s ease-in-out infinite; }
@keyframes cd-blink { 50% { opacity: .45; } }
.cd-avatar .spark { height: 20px; width: 20px; margin: 0; }
.cd-id b { font-family: var(--font-body); font-weight: 600; font-size: 15px; display: block; line-height: 1.2; }
.cd-status { font-size: 12.5px; color: var(--muted); transition: color .3s ease; }
.calldemo.live .cd-status { color: var(--accent); }
.cd-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 26px; }
.cd-wave i { width: 3px; height: 6px; border-radius: 2px; background: var(--accent); opacity: .3; transition: opacity .3s ease; }
.calldemo.live .cd-wave i { opacity: .9; animation: wave 1s ease-in-out infinite; }
.calldemo.live .cd-wave i:nth-child(2){animation-delay:.08s} .calldemo.live .cd-wave i:nth-child(3){animation-delay:.16s}
.calldemo.live .cd-wave i:nth-child(4){animation-delay:.24s} .calldemo.live .cd-wave i:nth-child(5){animation-delay:.32s}
.calldemo.live .cd-wave i:nth-child(6){animation-delay:.4s} .calldemo.live .cd-wave i:nth-child(7){animation-delay:.48s}
.calldemo.live .cd-wave i:nth-child(8){animation-delay:.56s} .calldemo.live .cd-wave i:nth-child(9){animation-delay:.64s}
@keyframes wave { 0%,100% { height: 6px; } 50% { height: 22px; } }

/* The scroller translates up via transform as lines arrive — GPU-smooth and
   zero layout shift (bubble reflow would count against CLS forever, since
   the demo loops). JS sizes the thread to the tallest scenario transcript so
   no resting state ever clips a line; the CSS height is only the pre-JS
   fallback, and no-JS gets auto height for the full static transcript. */
.cd-thread { height: 292px; overflow: hidden; padding: 16px 2px 4px; position: relative; }
html:not(.js) .cd-thread { height: auto; }
.cd-ringhint {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.calldemo.ringing .cd-ringhint { opacity: 1; }
.cd-pulse {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft);
  position: relative; display: grid; place-items: center;
}
.cd-pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); animation: cd-ring 1.15s ease-out infinite;
}
.cd-pulse::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); animation: cd-blink 1.15s ease-in-out infinite;
}
.cd-ringlabel { font-size: 13px; letter-spacing: 0.05em; color: var(--muted); }
html:not(.js) .cd-ringhint { display: none; }
.cd-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); text-align: center; }
.cd-scroll { display: flex; flex-direction: column; gap: 9px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .cd-scroll { transition: none; } }
.cd-msg { max-width: 84%; padding: 10px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.42; }
.cd-caller { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 5px; }
.cd-ai { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.cd-ai .cd-spark { height: 14px; width: 14px; color: #fff; margin: 0 1px -1px 0; }
.cd-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.cd-booked { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--success); background: rgba(14,159,110,.10); padding: 6px 12px; border-radius: 999px; }
.cd-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--success); color: #fff; font-size: 10px; }
.cd-missed { color: var(--muted); }

/* Typing / speaking indicator — appears on the speaker's side before each line */
.cd-typing { display: none; align-items: center; gap: 4px; padding: 13px 14px; }
.cd-typing.show { display: inline-flex; }
.cd-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: cd-dot 1s ease-in-out infinite; }
.cd-typing i:nth-child(2) { animation-delay: .15s; }
.cd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cd-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: .95; } }

/* JS-driven reveal for the call thread; no-JS shows the whole transcript.
   Unshown lines are display:none so they take NO space — the thread grows
   naturally from the bottom like a real chat, nothing gets pushed offscreen. */
.js .cd-msg { display: none; }
.js .cd-msg.show { display: block; animation: cd-in .38s ease; transition: opacity .45s ease, transform .45s ease; }
.js .cd-typing.show { display: inline-flex; animation: cd-in .25s ease; }
@keyframes cd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .cd-booked { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.js .cd-booked.show { opacity: 1; transform: none; }
/* Gentle wrap-up before the loop restarts */
.calldemo.fade .cd-msg.show, .calldemo.fade .cd-booked.show { opacity: 0; transform: translateY(-6px); }

/* ── Trust strip ── */
.trust { background: var(--bg-soft); border-block: 1px solid var(--line); padding: 20px clamp(24px, 5vw, 80px); }
.trust ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 4vw, 52px); max-width: 1120px; margin: 0 auto;
  font-size: 14.5px; color: var(--ink);
}
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li span { color: var(--accent); }

/* ── Sections shared ── */
section h2 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.04; letter-spacing: -0.01em; }
.section-sub { color: var(--muted); max-width: 560px; margin-top: 14px; font-size: 16.5px; line-height: 1.55; }

/* ── Reveal-on-scroll (progressive, no-JS renders fully) ── */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ── Process / timeline ── */
.process { padding: clamp(80px, 11vw, 140px) clamp(24px, 5vw, 80px); max-width: 1080px; margin: 0 auto; }
.process-head { max-width: 660px; }
.timeline { list-style: none; margin-top: 52px; border-top: 1px solid var(--line); }
.timeline li {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 5vw, 56px);
  align-items: baseline; padding: 34px 8px; border-bottom: 1px solid var(--line);
}
.t-step { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); min-width: 40px; }
.t-body h3 { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 6px; }
.t-body p { color: var(--muted); font-size: 15.5px; max-width: 620px; }
.t-days { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ── Showcase ── */
.showcase { padding: clamp(80px, 11vw, 140px) clamp(24px, 5vw, 80px); text-align: center; background: var(--bg); }
.showcase .section-sub { margin-inline: auto; }
.showcase-tabs {
  display: inline-flex; gap: 6px; padding: 5px; margin: 38px 0 26px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft);
  flex-wrap: wrap; justify-content: center;
}
.stab {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 11px 20px; border-radius: 999px; transition: all .2s ease; white-space: nowrap;
}
.stab:hover { color: var(--ink); }
.stab.active { background: var(--accent); color: #fff; }
.showcase-note { margin-top: 22px; font-size: 13px; color: var(--muted); }

.browser-frame {
  max-width: 980px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 10px;
}
.browser-chrome { display: flex; align-items: center; gap: 7px; padding: 8px 12px 14px; }
.browser-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.url-pill {
  margin-left: 12px; flex: 1; max-width: 320px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; color: var(--muted); padding: 5px 14px;
}
.mini-viewport { position: relative; aspect-ratio: 16 / 9.6; border-radius: 10px; overflow: hidden; background: #fff; }
/* Fixed design stage — scaled to fit by JS so mini-sites keep desktop proportions at any width */
.mini-stage { position: absolute; top: 0; left: 0; width: 960px; height: 576px; transform-origin: top left; }
.mini-site {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; transition: opacity .4s ease; pointer-events: none; user-select: none; text-align: left;
}
/* Incoming panel waits for the old one to clear — no double-exposure ghosting */
.mini-site.active { opacity: 1; transition: opacity .45s ease .3s; }

.m-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; font-size: 12px; }
.m-logo { font-weight: 600; letter-spacing: 0.01em; }
.m-links { display: flex; gap: 10px; }
.m-links i { width: 30px; height: 5px; border-radius: 3px; background: currentColor; opacity: .18; }
.m-cta { font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.m-kicker { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity: .62; }
.m-h1 { font-size: 30px; line-height: 1.08; }
.m-btn { font-size: 11.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; margin-top: 6px; }

/* mini-site entrance choreography */
.mini-site .mv { opacity: 0; }
.mini-site.active .mv { animation: mrise .55s cubic-bezier(.16,1,.3,1) both; }
.mini-site.active .mv1 { animation-delay: .05s; }
.mini-site.active .mv2 { animation-delay: .16s; }
.mini-site.active .mv3 { animation-delay: .27s; }
.mini-site.active .mv4 { animation-delay: .38s; }
.mini-site.active .mv5 { animation-delay: .5s; }
@keyframes mrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* law — parchment editorial, oxblood, split hero */
.demo-law { background: #FAF6EE; color: #23201B; }
.demo-law .m-logo, .demo-law .m-h1 { font-family: var(--font-display); }
.demo-law .m-cta, .demo-law .m-btn { background: #6E2B2B; color: #FAF6EE; }
.law-split { flex: 1; display: flex; align-items: center; gap: 4%; padding: 0 4% 0 6%; min-height: 0; }
.law-copy { flex: 1.35; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
.demo-law .m-h1 { font-size: 27px; }
.law-stats { display: flex; gap: 8%; margin-top: 8px; padding-top: 10px; border-top: 1px solid #E5DCC9; align-self: stretch; }
.law-stats span { display: flex; flex-direction: column; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #8A8272; }
.law-stats b { font-family: var(--font-display); font-size: 20px; color: #6E2B2B; }
.law-portrait { flex: 1; align-self: stretch; margin: 4% 0; position: relative; min-width: 0;
  background: linear-gradient(160deg, #D9CDB4 0%, #B9A88A 55%, #8E7D60 100%); border-radius: 6px; overflow: hidden; }
.law-arch { position: absolute; inset: 10% 18% 0; border-radius: 999px 999px 0 0;
  background: linear-gradient(175deg, #4A4033 0%, #23201B 80%); opacity: .82; }
.law-band { padding: 10px 6%; font-family: var(--font-display); font-size: 11.5px; font-style: italic;
  background: #23201B; color: #E9E1CE; }

/* roofing — dark slate, amber, roofline scene */
.demo-roof { background: linear-gradient(180deg, #1B222D 0%, #232C39 100%); color: #F2F4F7; }
.demo-roof .m-logo { color: #F5A623; }
.demo-roof .m-links i { opacity: .3; }
.demo-roof .m-h1 { font-weight: 650; letter-spacing: -0.02em; }
.demo-roof .m-cta, .demo-roof .m-btn { background: #F5A623; color: #1B222D; }
.roof-hero { flex: 1; display: flex; align-items: center; padding: 0 2% 0 6%; min-height: 0; }
.roof-copy { flex: 1.3; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
.demo-roof .m-kicker { color: #F5A623; opacity: 1; }
.roof-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.roof-badges span { font-size: 9px; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(245,166,35,.35); color: #E8D9BC; }
.roof-scene { flex: 1; align-self: flex-end; position: relative; height: 68%; min-width: 0; }
.rs-sun { position: absolute; right: 12%; top: 4%; width: 15%; aspect-ratio: 1; border-radius: 50%;
  background: #F5A623; box-shadow: 0 0 34px rgba(245,166,35,.55); }
.rs-house { position: absolute; left: 14%; right: 14%; bottom: 0; height: 42%;
  background: linear-gradient(180deg, #39465A 0%, #2C3646 100%); border-radius: 3px 3px 0 0; }
.rs-roof { position: absolute; left: 6%; right: 6%; bottom: 40%; height: 34%;
  background: linear-gradient(180deg, #F5A623 0%, #D98E12 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 88% 100%, 50% 24%, 12% 100%); }
.rs-chimney { position: absolute; right: 26%; bottom: 58%; width: 6%; height: 16%; background: #4A5568; }

/* property — cool bento grid */
.demo-prop { background: #EDF2F7; color: #14383E; }
.demo-prop .m-cta, .demo-prop .m-btn { background: #0F766E; color: #fff; }
.prop-bento { flex: 1; display: grid; min-height: 0; padding: 0 3.5% 3.5%; gap: 8px;
  grid-template-columns: 1.5fr 1fr; grid-template-rows: 1.6fr .9fr; }
.prop-bento > div { border-radius: 8px; }
.pb-main { background: #fff; box-shadow: 0 1px 5px rgba(20,56,62,.07); padding: 5%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; text-align: left; }
.demo-prop .m-h1 { font-weight: 550; font-size: 25px; }
.pb-photo { position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 7%, transparent 7% 14%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.13) 0 9%, transparent 9% 18%),
    linear-gradient(200deg, #7FB0A6 0%, #23555C 60%, #14383E 100%); }
.pb-stat { background: #0F766E; color: #fff; padding: 4% 6%;
  display: flex; flex-direction: column; justify-content: center; }
.pb-stat b { font-size: 24px; font-weight: 650; }
.pb-stat span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.pb-chips { background: #fff; box-shadow: 0 1px 5px rgba(20,56,62,.07);
  display: flex; align-items: center; justify-content: space-evenly; gap: 6px; padding: 0 3%; }
.pb-chips span { font-size: 9.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: #EDF2F7; white-space: nowrap; }

/* luxury — dusk photo hero + listing strip */
.demo-lux { background: #101114; color: #EDE6D6; }
.demo-lux .m-nav, .demo-lux .lux-hero, .demo-lux .lux-strip { position: relative; z-index: 2; }
.demo-lux .m-logo { letter-spacing: 0.22em; font-size: 11px; }
.demo-lux .m-h1 { font-family: var(--font-display); font-weight: 400; }
.demo-lux .m-h1 em { font-style: italic; color: #C8A96A; }
.demo-lux .m-cta, .demo-lux .m-btn { border: 1px solid #C8A96A; color: #C8A96A; background: rgba(16,17,20,.35); }
.lux-sky { position: absolute; inset: 0 0 30%;
  background: linear-gradient(180deg, #1A1E2E 0%, #3A3350 45%, #8A5A48 78%, #C8875C 100%); }
.lux-towers { position: absolute; left: 0; right: 0; bottom: 26%; height: 34%; opacity: .92;
  background:
    linear-gradient(180deg, transparent 34%, #0C0D10 34%) 6% 100% / 11% 66% no-repeat,
    linear-gradient(180deg, transparent 10%, #0E0F13 10%) 22% 100% / 13% 92% no-repeat,
    linear-gradient(180deg, transparent 46%, #0B0C0F 46%) 37% 100% / 10% 56% no-repeat,
    linear-gradient(180deg, transparent 22%, #101116 22%) 55% 100% / 14% 80% no-repeat,
    linear-gradient(180deg, transparent 38%, #0C0D10 38%) 72% 100% / 11% 64% no-repeat,
    linear-gradient(180deg, transparent 16%, #0E0F13 16%) 90% 100% / 13% 86% no-repeat; }
.lux-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; text-align: center; padding: 0 6%; min-height: 0; }
.demo-lux .m-kicker { color: #C8A96A; opacity: .9; letter-spacing: .3em; }
.lux-strip { display: flex; gap: 10px; padding: 0 4% 4%; }
.lux-listing { flex: 1; background: #191A1F; border: 1px solid #2A2B31; border-radius: 7px;
  padding: 7px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lux-listing b { font-size: 10.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lux-listing > span:last-child { font-size: 9.5px; color: #C8A96A; }
.ll-img { height: 34px; border-radius: 4px; margin-bottom: 3px; }
.ll-1 { background: linear-gradient(160deg, #4E6E8C 0%, #22303F 70%); }
.ll-2 { background: linear-gradient(160deg, #8C7A4E 0%, #3F3722 70%); }
.ll-3 { background: linear-gradient(160deg, #6E4E8C 0%, #2A2233 70%); }

/* ── Services ── */
.services { padding: clamp(80px, 11vw, 140px) clamp(24px, 5vw, 80px); max-width: 1060px; margin: 0 auto; }
.service-index { list-style: none; margin-top: 54px; border-top: 1px solid var(--line); }
.service-index li { display: flex; gap: clamp(20px, 5vw, 70px); align-items: baseline; padding: 34px 8px; border-bottom: 1px solid var(--line); }
.s-num { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--accent); min-width: 44px; }
.service-index h3 { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 6px; }
.service-index p { color: var(--muted); font-size: 15.5px; max-width: 640px; }

/* ── Pricing ── */
.pricing { padding: clamp(80px, 11vw, 140px) clamp(24px, 5vw, 80px); max-width: 1080px; margin: 0 auto; }
.pricing-head { max-width: 640px; margin-bottom: 46px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price-card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(28px, 3vw, 40px); background: #fff; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); }
.pc-dark { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; border-color: transparent; box-shadow: 0 24px 60px -22px rgba(37,99,235,.6); }
.pc-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-dark .pc-label { color: rgba(255,255,255,.78); }
.pc-price { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 3.7rem); line-height: 1; margin: 12px 0 6px; }
.pc-from { font-size: 1.1rem; color: var(--muted); vertical-align: middle; margin-right: 4px; }
.pc-per { font-size: 1.1rem; color: var(--muted); }
.pc-price-sm { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.pc-blurb { color: var(--muted); font-size: 15px; margin-bottom: 22px; line-height: 1.55; }
.pc-dark .pc-blurb { color: rgba(255,255,255,.82); }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; font-size: 14.5px; }
.pc-list li { position: relative; padding-left: 26px; }
.pc-list li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }
.pc-dark .pc-list li::before { color: #fff; }
.pc-cta { margin-top: auto; align-self: flex-start; }

/* ── FAQ ── */
.faq { padding: clamp(80px, 11vw, 130px) clamp(24px, 5vw, 80px); max-width: 820px; margin: 0 auto; }
.faq h2 { margin-bottom: 34px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; font-family: var(--font-display);
  font-size: clamp(19px, 2.3vw, 24px); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-size: 26px; color: var(--accent); line-height: 1; transition: transform .3s ease; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); font-size: 15.5px; line-height: 1.6; padding: 0 4px 24px; max-width: 70ch; }

/* ── Final CTA ── */
.final-cta { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; text-align: center; padding: clamp(90px, 12vw, 150px) 24px; }
.final-cta h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.final-cta h2 em { color: #fff; }
.final-cta p { margin: 18px auto 32px; max-width: 540px; color: rgba(255, 255, 255, .85); }
.final-cta .friction { margin: 18px auto 0; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.final-cta .friction a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer ── */
footer { text-align: center; padding: 60px 24px 44px; color: var(--muted); font-size: 14px; }
.foot-mark { font-size: 22px; color: var(--ink); margin-bottom: 10px; display: inline-flex; align-items: center; }
footer > p { margin: 4px 0; }
footer a { text-decoration: underline; text-underline-offset: 3px; }
.foot-copy { margin-top: 18px; font-size: 12.5px; }

/* Brand spark mark */
.spark { height: 1.05em; width: 1.05em; vertical-align: -0.16em; margin-right: 0.28em; color: var(--accent); flex: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links { gap: 16px; font-size: 13.5px; }
  .nav-links a.hide-m { display: none; }
  .m-hide-txt { display: none; }
  .nav-mark { font-size: 19px; }
  .timeline li { grid-template-columns: auto 1fr; row-gap: 6px; }
  .t-days { grid-column: 2; }
  .service-index li { flex-direction: column; gap: 8px; }
  /* Showcase: keep the mini-sites legible and let the frame pan sideways */
  .showcase-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .showcase-tabs::-webkit-scrollbar { display: none; }
  .stab { padding: 10px 16px; font-size: 13px; }
  .mini-viewport.pannable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Mini-sites scale uniformly via .mini-stage, so they keep desktop proportions at every
   width — no mobile-specific layout overrides needed here. */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-line { animation: none; }
  .mini-site { transition: none; }
  .mini-site .mv { opacity: 1 !important; animation: none !important; }
  .calldemo.live .cd-wave i { animation: none !important; opacity: .5 !important; }
  .js .cd-msg, .js .cd-booked { opacity: 1 !important; transform: none !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
}

/* ── Immersive Silk backdrop (hero) ──────────────────────────────────────
   Full-bleed sapphire wash + drifting blurred aurora fields + spark-field
   canvas (main.js). Sits behind all content; main.js fades it out as the
   hero scrolls away so the content sections stay calm. */
.ww-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; contain: strict;
}
html[data-bg] .hero { background: none; }
.ww-bg > div, .ww-bg > canvas { position: absolute; inset: 0; }
.ww-bg > canvas { width: 100%; height: 100%; }

.ww-bg-wash {
  background: linear-gradient(160deg, #F8FBFF 0%, #EEF4FF 36%, #DDE8FC 78%, #D3E1FA 100%);
}
.ww-bg-wash::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 110%, rgba(37, 99, 235, 0.14), transparent 70%);
}
.ww-bg-wash .wm {
  position: absolute; width: 46vw; height: 46vw; right: -10vw; top: 50%; margin-top: -23vw;
  color: rgba(37, 99, 235, 0.06); animation: ww-spin 120s linear infinite;
}
@keyframes ww-spin { to { transform: rotate(360deg); } }

.ww-bg-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); will-change: transform; opacity: 0.72;
}
.ww-bg-aurora .a1 {
  width: 62vw; height: 62vw; right: -18vw; top: -24vw;
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.34), rgba(37, 99, 235, 0) 72%);
  animation: ww-a1 26s ease-in-out infinite alternate;
}
.ww-bg-aurora .a2 {
  width: 48vw; height: 48vw; right: 4vw; top: 22vh;
  background: radial-gradient(closest-side, rgba(125, 168, 255, 0.42), rgba(125, 168, 255, 0) 70%);
  animation: ww-a2 21s ease-in-out infinite alternate;
}
.ww-bg-aurora .a3 {
  width: 54vw; height: 54vw; left: -20vw; bottom: -18vw;
  background: radial-gradient(closest-side, rgba(103, 195, 249, 0.26), rgba(103, 195, 249, 0) 70%);
  animation: ww-a3 31s ease-in-out infinite alternate;
}
.ww-bg-aurora .a4 {
  width: 34vw; height: 34vw; left: 26vw; top: -12vw;
  background: radial-gradient(closest-side, rgba(29, 78, 216, 0.16), rgba(29, 78, 216, 0) 70%);
  animation: ww-a2 24s ease-in-out -8s infinite alternate-reverse;
}
@keyframes ww-a1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-9vw, 7vh, 0) scale(1.18); } }
@keyframes ww-a2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7vw, -6vh, 0) scale(0.86); } }
@keyframes ww-a3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(10vw, -8vh, 0) scale(1.14); } }

/* Desktop: color must reach the middle of the viewport or the hero reads
   as empty white; the hero composition also scales up to fill the frame. */
@media (min-width: 1100px) {
  .ww-bg-aurora .a1 {
    width: 74vw; height: 74vw; right: -20vw; top: -26vw;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.42), rgba(37, 99, 235, 0) 72%);
  }
  .ww-bg-aurora .a2 {
    width: 58vw; height: 58vw;
    background: radial-gradient(closest-side, rgba(125, 168, 255, 0.5), rgba(125, 168, 255, 0) 70%);
  }
  .ww-bg-aurora .a3 {
    width: 64vw; height: 64vw;
    background: radial-gradient(closest-side, rgba(103, 195, 249, 0.32), rgba(103, 195, 249, 0) 70%);
  }
  .ww-bg-aurora .a4 {
    width: 44vw; height: 44vw; left: 30vw; top: 4vh;
    background: radial-gradient(closest-side, rgba(29, 78, 216, 0.2), rgba(29, 78, 216, 0) 70%);
  }
}
@media (min-width: 1250px) {
  html[data-bg] .hero {
    padding-inline: clamp(64px, 9vw, 180px);
    column-gap: clamp(56px, 6vw, 110px);
  }
  html[data-bg] .hero h1 { font-size: clamp(4.9rem, 4.8vw, 6.6rem); max-width: 13ch; }
  html[data-bg] .hero-sub { font-size: 19px; max-width: 600px; }
  html[data-bg] .hero .badge { font-size: 15px; padding: 8px 20px; }
  html[data-bg] .calldemo { width: min(560px, 100%); padding: 26px 26px 22px; border-radius: 26px; }
  html[data-bg] .calldemo .cd-msg { font-size: 16px; }
  html[data-bg] .calldemo .cd-thread { height: 330px; }
  html[data-bg] .calldemo .cd-tab { font-size: 13.5px; padding: 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-bg *, .ww-bg::before, .ww-bg::after { animation: none !important; }
}