/* LBX Digital — styles
   Palette: chalk #F2F3EF, ink #14213D, cobalt #2B4BFF, tape #FFD23F, slate #5A6474, white #FFFFFF */

@font-face {
  font-family: "LBX Brand";
  src: url("fonts/montserrat-800-brand.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "LBX Tag";
  src: url("fonts/montserrat-600-tag.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --chalk: #F2F3EF;
  --ink: #14213D;
  --ink-soft: #2A3654;
  --cobalt: #2B4BFF;
  --cobalt-deep: #1F38C7;
  --tape: #FFD23F;
  --slate: #5A6474;
  --white: #FFFFFF;
  --line: #D9DCD3;

  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.625rem;
  --fs-xl: clamp(2rem, 4.2vw, 3rem);
  --fs-hero: clamp(2.6rem, 6.4vw, 5.2rem);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 6px;
  --r-lg: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  font-variation-settings: "opsz" 14;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }

h1, h2, h3 {
  margin: 0;
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}
h2 { font-size: var(--fs-xl); font-stretch: 88%; }
h3 { font-size: var(--fs-md); line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 24; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 8px; top: -60px;
  background: var(--ink); color: var(--white);
  padding: 10px 14px; border-radius: var(--r-sm); z-index: 100;
}
.skip:focus { top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid var(--ink); border-radius: 999px;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s;
}
.btn-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.btn-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn:active { transform: translateY(1px); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 243, 239, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-mark { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-weight: 550; color: var(--ink-soft); }
.nav-links a:hover { color: var(--cobalt); }
.nav .btn { min-height: 42px; padding: 0 18px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: var(--fs-hero);
  font-stretch: 80%;
  font-weight: 780;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.hero h1 .tape {
  display: inline;
  background: linear-gradient(transparent 58%, var(--tape) 58%, var(--tape) 92%, transparent 92%);
  padding: 0 .06em;
}
.hero-lede { font-size: var(--fs-md); color: var(--ink-soft); max-width: 34ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.terms { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; color: var(--slate); font-size: var(--fs-sm); }
.terms li { display: inline-flex; align-items: center; gap: 8px; }
.terms svg { width: 16px; height: 16px; color: var(--cobalt); flex: none; }

/* Demo builder (the memorable thing) */
.builder {
  background: var(--ink); color: var(--white);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .55);
}
.builder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 2px 4px 14px; }
.builder-head p { margin: 0; font-weight: 650; }
.builder-head span { color: #AEB8D0; font-size: var(--fs-sm); }
.builder-fields { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
@media (max-width: 560px) { .builder-fields { grid-template-columns: 1fr; } }
.builder label { display: block; font-size: 0.78rem; color: #AEB8D0; margin: 0 0 4px 2px; }
.builder input, .builder select {
  width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid #34436A; border-radius: var(--r-sm);
  background: #1C2B4D; color: var(--white);
  font: inherit; font-size: 0.95rem;
}
.builder input:focus-visible, .builder select:focus-visible { outline: 2px solid var(--tape); outline-offset: 1px; }

.browser { background: var(--white); color: var(--ink); border-radius: 12px; overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #E9EBE5; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #C5C9BF; }
.url { flex: 1; background: var(--white); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv { --pv: #C0392B; transition: opacity .2s; }
.pv.is-updating { opacity: .35; }
.pv-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #EEF0EA; font-size: 0.85rem; }
.pv-logo { font-weight: 750; display: flex; align-items: center; gap: 8px; }
.pv-logo i { width: 18px; height: 18px; border-radius: 4px; background: var(--pv); }
.pv-call { background: var(--pv); color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 650; font-size: 0.78rem; white-space: nowrap; }
.pv-hero { padding: 22px 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--pv) 10%, white), white); }
.pv-hero .pv-h { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-stretch: 85%; line-height: 1.08; margin-bottom: 8px; }
.pv-hero p { font-size: 0.85rem; color: var(--slate); margin: 0 0 14px; }
.pv-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-btns span { border-radius: 999px; padding: 7px 12px; font-size: 0.78rem; font-weight: 650; }
.pv-btns span:first-child { background: var(--pv); color: #fff; }
.pv-btns span:last-child { border: 1.5px solid var(--ink); }
.pv-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; }
.pv-services div { border: 1px solid #EEF0EA; border-radius: 8px; padding: 10px; font-size: 0.78rem; font-weight: 600; }
.pv-services div::before { content: ""; display: block; width: 18px; height: 3px; background: var(--pv); margin-bottom: 8px; border-radius: 2px; }
.pv-reviews { margin: 0 16px 16px; padding: 10px 12px; border-radius: 8px; background: #F6F7F3; font-size: 0.78rem; color: var(--slate); display: flex; gap: 8px; align-items: center; }
.pv-reviews b { color: #E2A400; letter-spacing: 1px; }

.builder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 4px 2px; }
.builder-foot p { margin: 0; font-size: var(--fs-sm); color: #AEB8D0; max-width: 34ch; }
.builder-foot .btn { background: var(--tape); border-color: var(--tape); color: var(--ink); min-height: 42px; }
.builder-foot .btn:hover { background: #FFDF6E; }

/* Sections */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-ink { background: var(--ink); color: var(--white); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head p { color: var(--slate); font-size: var(--fs-md); margin: 0; }
.section-ink .section-head p { color: #C3CBE0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Problem */
.problem { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.problem h2 { max-width: 16ch; }
.problem-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.problem-list li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.problem-list svg { width: 22px; height: 22px; color: var(--cobalt); margin-top: 3px; }
.problem-list strong { display: block; font-size: var(--fs-md); line-height: 1.25; margin-bottom: 4px; }
.problem-list span { color: var(--slate); }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; border-top: 2px solid var(--white); }
.steps li { counter-increment: step; padding: 26px 24px 8px 0; position: relative; }
.steps li + li { padding-left: 24px; border-left: 1px solid #34436A; }
.steps li::before {
  content: counter(step);
  display: block; font-size: 3.4rem; font-weight: 800; font-stretch: 75%;
  line-height: 1; color: var(--tape); margin-bottom: 16px;
  font-variation-settings: "opsz" 96;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: #C3CBE0; font-size: 0.98rem; }
.steps .when { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); color: var(--white); background: #24345C; padding: 3px 10px; border-radius: 999px; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps li { border-top: 1px solid #34436A; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps li + li { padding-left: 0; border-left: 0; }
}

/* Included */
.included { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.included > div { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); }
.included > div:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.included svg { width: 30px; height: 30px; color: var(--cobalt); margin-bottom: 14px; }
.included h3 { margin-bottom: 8px; }
.included p { color: var(--slate); margin: 0; }
@media (max-width: 860px) {
  .included { grid-template-columns: 1fr 1fr; }
  .included > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .included > div:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .included { grid-template-columns: 1fr; }
  .included > div:nth-child(2n) { padding-left: 0; border-left: 0; }
}

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }
.plan { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; }
.plan-featured { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--tape); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.plan h3 { font-size: var(--fs-lg); }
.plan-tag { font-size: 0.8rem; font-weight: 650; background: var(--tape); padding: 3px 10px; border-radius: 999px; }
.plan-for { color: var(--slate); margin-bottom: 18px; }
.price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price strong { font-size: 3rem; font-weight: 800; font-stretch: 80%; letter-spacing: -0.03em; line-height: 1; font-variation-settings: "opsz" 96; }
.price span { color: var(--slate); }
.price-note { font-size: var(--fs-sm); color: var(--slate); margin-bottom: 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex: 1; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.plan li svg { width: 18px; height: 18px; color: var(--cobalt); margin-top: 4px; }
.plan .btn { width: 100%; }
.pricing-foot { margin-top: 28px; color: var(--slate); font-size: var(--fs-sm); max-width: 80ch; }

/* Trades */
.trades { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 28px; }
.trades li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 18px; font-weight: 600; background: var(--white); }
.trades-note { color: var(--slate); }

/* Why */
.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); }
.why-list { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.why-list div { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.why-list dt { font-weight: 700; font-size: var(--fs-md); line-height: 1.25; }
.why-list dd { margin: 0; color: var(--slate); }
@media (max-width: 860px) { .why, .why-list div { grid-template-columns: 1fr; } .why-list div { gap: 4px; } }

/* FAQ */
.faq { max-width: 860px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-weight: 650; font-size: var(--fs-md); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translateY(-4px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details > div { padding: 0 0 20px; color: var(--ink-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* Demo request */
.request { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 960px) { .request { grid-template-columns: 1fr; } }
.request h2 { margin-bottom: 18px; }
.request-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.request-points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: #DDE3F1; }
.request-points svg { width: 20px; height: 20px; color: var(--tape); margin-top: 3px; }
.request-mail { margin-top: 28px; color: #C3CBE0; }
.request-mail a { color: var(--white); font-weight: 650; }

.form { background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 650; font-size: 0.95rem; margin-bottom: 6px; }
.field .opt { font-weight: 450; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid #C9CDC2; border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); font: inherit;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 0; border-color: var(--cobalt); }
.field [aria-invalid="true"] { border-color: #C62828; }
.err { display: block; color: #B71C1C; font-size: var(--fs-sm); margin-top: 4px; min-height: 0; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cobalt); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.form-status.ok { color: #1B5E20; }
.form-status.bad { color: #B71C1C; }

/* Footer */
.site-footer { padding: 48px 0 32px; border-top: 1px solid var(--line); color: var(--slate); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: 1rem; font-stretch: 100%; letter-spacing: 0; margin-bottom: 12px; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cobalt); text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }

/* Legal pages */
.legal { padding: 56px 0 88px; }
.legal article { max-width: 72ch; }
.legal h1 { font-size: var(--fs-xl); font-stretch: 85%; margin-bottom: 12px; }
.legal h2 { font-size: var(--fs-lg); font-stretch: 100%; margin: 36px 0 10px; }
.legal li { margin-bottom: 6px; }
.legal .updated { color: var(--slate); }
.todo { background: #FFF3C4; padding: 0 4px; border-radius: 3px; }

/* Language switcher */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 999px; font-weight: 600; color: var(--ink-soft); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: #E6E8E1; }
.lang summary svg { width: 18px; height: 18px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 6px; list-style: none; margin: 0; min-width: 200px; box-shadow: 0 16px 32px -16px rgba(20,33,61,.35); }
.lang li a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; }
.lang li a:hover { background: var(--chalk); }
.lang li a[aria-current="true"] { font-weight: 700; color: var(--cobalt); }
.nav-right { display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) { .nav .btn-primary { display: none; } }

/* Fixes after review */
.field .consent { display: grid; font-weight: 450; }
.plan-for { min-height: 3.1em; }
.why h2, .problem h2 { margin-bottom: 12px; }
.problem-list svg { color: var(--ink); }
@media (max-width: 560px) { .hero h1 { letter-spacing: -0.022em; font-stretch: 86%; } }

/* ============ v2: modern layer ============ */
@view-transition { navigation: auto; }

.pv-hero .pv-h { font-weight: 750; letter-spacing: -0.01em; margin: 0 0 8px; max-width: none; }

/* Hero: blueprint grid, the trade's own paper */
.hero {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(43,75,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43,75,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(transparent, var(--chalk)); pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

/* One orchestrated load moment: builder lifts in, then auto-demo types */
@media (prefers-reduced-motion: no-preference) {
  .builder { animation: lift .7s cubic-bezier(.2,.8,.2,1) .15s both; }
  @keyframes lift { from { opacity: 0; transform: translateY(18px) rotate(.6deg); } to { opacity: 1; transform: none; } }
}
.builder input.typing { caret-color: var(--tape); border-color: var(--tape); }

/* Desktop / phone toggle */
.view-toggle { display: inline-flex; background: #1C2B4D; border-radius: 999px; padding: 3px; margin: 0 0 10px; }
.vt { border: 0; background: transparent; color: #AEB8D0; font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 14px; min-height: 32px; border-radius: 999px; cursor: pointer; }
.vt[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.browser { transition: max-width .35s cubic-bezier(.2,.8,.2,1), border-radius .35s; margin: 0 auto; max-width: 100%; }
.browser[data-view="phone"] { max-width: 290px; border-radius: 26px; border: 6px solid #0E1830; }
.browser[data-view="phone"] .browser-bar { padding: 8px 10px; }
.browser[data-view="phone"] .dots { display: none; }
.browser[data-view="phone"] .pv-services { grid-template-columns: 1fr; }
.browser[data-view="phone"] .pv-nav { font-size: .8rem; }

/* Before / after slider */
.ba {
  --pos: 50%;
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 2px solid var(--ink); background: var(--white);
  aspect-ratio: 16 / 8; min-height: 360px; user-select: none;
}
.ba-new, .ba-old { position: absolute; inset: 0; }
.ba-old { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #FFFFE0; }
.old-inner { padding: 22px; font-family: "Times New Roman", Times, serif; color: #000; height: 100%; }
.old-title { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: clamp(1.1rem, 2.4vw, 1.9rem); color: #C00; text-align: center; font-weight: 700; margin-bottom: 10px; }
.old-nav { text-align: center; color: #00E; text-decoration: underline; font-size: .9rem; margin-bottom: 14px; }
.old-table { border: 3px ridge #999; width: 100%; font-size: .85rem; border-collapse: separate; }
.old-table td { padding: 8px; vertical-align: top; border: 1px solid #aaa; }
.old-img { width: 90px; height: 70px; background: repeating-linear-gradient(45deg,#ddd 0 6px,#bbb 6px 12px); color: #555; text-align: center; font-size: .7rem; }
.old-foot { margin-top: 16px; font-size: .72rem; color: #666; text-align: center; }
.ba-new { --pv: #C0392B; display: flex; flex-direction: column; }
.nw-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid #EEF0EA; font-size: .9rem; }
.nw-hero { padding: clamp(18px, 3vw, 36px) 22px 18px; background: linear-gradient(180deg, #FBEDEB, #fff); flex: 1; }
.nw-h { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 780; font-stretch: 82%; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 10px; max-width: 18ch; }
.nw-hero p:not(.nw-h) { color: var(--slate); font-size: .95rem; }
.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 22px; }
.nw-grid div { border: 1px solid #EEF0EA; border-radius: 10px; padding: 12px; font-weight: 650; font-size: .85rem; }
.nw-grid div::before { content: ""; display: block; width: 20px; height: 3px; background: var(--pv); margin-bottom: 8px; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--ink); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--tape); border: 2px solid var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(20,33,61,.3); }
.ba-knob svg { width: 22px; height: 22px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-range:focus-visible + * , .ba:focus-within .ba-knob { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.ba-tag { position: absolute; top: 12px; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; z-index: 2; pointer-events: none; }
.ba-tag-old { left: 12px; background: var(--ink); color: var(--white); }
.ba-tag-new { right: 12px; background: var(--tape); color: var(--ink); }
.ba-note { margin-top: 12px; color: var(--slate); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .ba { aspect-ratio: auto; min-height: 460px; }
  .nw-grid { grid-template-columns: 1fr; }
  .old-img { width: 60px; }
}

/* Bento: what's included, shown not told */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento-cell { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.bento-cell.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 24px; }
.bento-cell svg { width: 30px; height: 30px; color: var(--cobalt); margin-bottom: 14px; }
.bento-text h3 { margin-bottom: 8px; }
.bento-text p { color: var(--slate); margin: 0; }
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-cell.wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell.wide { grid-template-columns: 1fr; }
}
.w { position: relative; background: var(--chalk); border-radius: 14px; padding: 18px; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.w svg { margin: 0; }
.ill { position: absolute; top: 8px; right: 10px; font-size: .7rem; color: var(--slate); }
.ai-q { align-self: flex-end; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: .88rem; max-width: 85%; margin-top: 10px; }
.ai-a { background: var(--white); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: .88rem; max-width: 92%; }
.ai-a p { margin: 6px 0 0; }
.ai-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .78rem; color: var(--cobalt); }
.ai-badge svg { width: 14px; height: 14px; }
.w-maps { padding: 0; overflow: hidden; min-height: 220px; justify-content: flex-end; }
.map { position: absolute; inset: 0; background: #E4EADF; }
.road { position: absolute; background: #fff; }
.r1 { left: 0; right: 0; top: 38%; height: 12px; transform: rotate(-6deg); }
.r2 { top: 0; bottom: 0; left: 30%; width: 10px; transform: rotate(8deg); }
.r3 { top: 0; bottom: 0; left: 72%; width: 7px; }
.map-pin { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); color: #C0392B; }
.map-pin svg { width: 40px; height: 40px; color: #C0392B; fill: #fff; }
.maps-card { position: relative; margin: 12px; background: var(--white); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 24px -12px rgba(20,33,61,.4); display: grid; gap: 4px; font-size: .85rem; }
.maps-card strong { font-size: .95rem; }
.stars { color: #E2A400; } .stars em { color: var(--slate); font-style: normal; }
.open { color: #1B7F3B; font-weight: 650; }
.maps-btns { display: flex; gap: 8px; margin-top: 6px; }
.maps-btns span { border: 1.5px solid var(--cobalt); color: var(--cobalt); border-radius: 999px; padding: 4px 12px; font-weight: 650; font-size: .8rem; }
.maps-btns span:first-child { background: var(--cobalt); color: #fff; }
.w-chat .bubble { padding: 10px 14px; font-size: .88rem; max-width: 88%; display: flex; gap: 8px; align-items: flex-start; }
.bubble.in { background: var(--white); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; margin-top: 10px; }
.bubble.out { align-self: flex-end; background: #DFF5E3; color: #134E25; border-radius: 14px 14px 4px 14px; }
.bubble.out svg { width: 16px; height: 16px; color: #1B7F3B; flex: none; margin-top: 3px; }

/* Steps: progress rule that fills as you scroll (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps { border-top-color: #34436A; position: relative; }
    .steps::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--tape); transform-origin: left; animation: fill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* Header gains weight once you scroll */
.site-header.scrolled { box-shadow: 0 8px 24px -18px rgba(20,33,61,.5); }
.nav-links a[aria-current="true"] { color: var(--cobalt); }

/* Sticky CTA on phones */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; }
.sticky-cta .btn { width: 100%; box-shadow: 0 12px 28px -10px rgba(43,75,255,.6); }
@media (max-width: 760px) { .sticky-cta:not([hidden]) { display: block; } .site-footer { padding-bottom: 96px; } }

/* Footer: bigger tap targets */
.site-footer ul a, .footer-base a { display: inline-block; padding: 6px 0; min-height: 32px; }
.consent a, .request-mail a { display: inline-block; padding: 4px 0; }

/* v2 review fixes */
:root { --fs-hero: clamp(2.4rem, 5vw, 4.25rem); }
.pv-hero .pv-h { color: var(--ink); }
.nw-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
.nw-hero .pv-btns span:first-child { background: var(--pv); color: #fff; }
.nw-card { background: #fff; border: 1px solid #EEF0EA; border-radius: 14px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 18px 36px -22px rgba(20,33,61,.45); font-size: .9rem; }
.nw-card i { display: block; height: 34px; border: 1.5px solid #DADDD5; border-radius: 8px; }
.nw-card i.short { height: 60px; }
.nw-card span { background: var(--pv); color: #fff; border-radius: 999px; text-align: center; padding: 9px; font-weight: 700; }
.nw-card em { font-style: normal; color: #E2A400; font-size: .8rem; text-align: center; }
.ba-tag { top: auto; bottom: 12px; }
@media (max-width: 640px) { .nw-hero { grid-template-columns: 1fr; } .nw-card { display: none; } }

/* =====================================================================
   v3 — cinematic layer
   ===================================================================== */
:root {
  --night: #0A1230;
  --night-2: #111C44;
  --night-line: rgba(255,255,255,.09);
  --mist: #AEB8D0;
  --cobalt: #3355FF;
  --cobalt-deep: #2240E0;
  --ease: cubic-bezier(.2,.8,.2,1);
}
html { scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 96px; }

/* ---------- Floating glass nav ---------- */
.site-header {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 24px), 1200px);
  background: rgba(10, 18, 48, .72); color: #fff;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: box-shadow .3s, background-color .3s;
}
.site-header .nav { min-height: 60px; padding: 0 8px 0 18px; }
.site-header .brand { color: #fff; }
.site-header .nav-links a { color: #C9D1E6; }
.site-header .nav-links a:hover, .site-header .nav-links a[aria-current="true"] { color: #fff; }
.site-header .lang summary { color: #C9D1E6; }
.site-header .lang summary:hover { background: rgba(255,255,255,.08); }
.site-header .lang ul { color: var(--ink); }
.site-header.scrolled { background: rgba(10, 18, 48, .86); box-shadow: 0 18px 40px -18px rgba(5,10,30,.6); }
.site-header .btn-primary { background: #fff; border-color: #fff; color: var(--night); }
.site-header .btn-primary:hover { background: var(--tape); border-color: var(--tape); }
.legal { padding-top: 130px; }

/* ---------- Buttons ---------- */
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-glow {
  background: var(--cobalt); border-color: var(--cobalt); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 14px 40px -12px rgba(51,85,255,.85);
  min-height: 54px; padding: 0 26px; font-size: 1.05rem;
}
.btn-glow:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn-line { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; min-height: 54px; padding: 0 26px; font-size: 1.05rem; }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-tape { background: var(--tape); border-color: var(--tape); color: var(--ink); }
.btn-tape:hover { background: #FFE07A; }
.magnetic { will-change: transform; }

/* ---------- Hero ---------- */
.hx {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #fff;
  min-height: 100svh; display: flex; align-items: center;
  padding: 120px 0 90px;
}
.hx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; }
.g1 { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; right: -18vw; top: -22vw; background: radial-gradient(circle, rgba(51,85,255,.9), rgba(51,85,255,0) 65%); }
.g2 { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; left: -16vw; bottom: -24vw; background: radial-gradient(circle, rgba(255,210,63,.38), rgba(255,210,63,0) 65%); }
@media (prefers-reduced-motion: no-preference) {
  .g1 { animation: drift1 18s ease-in-out infinite alternate; }
  .g2 { animation: drift2 22s ease-in-out infinite alternate; }
  @keyframes drift1 { to { transform: translate(-6vw, 6vw) scale(1.08); } }
  @keyframes drift2 { to { transform: translate(5vw, -4vw) scale(1.1); } }
}
.hx-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
}
.grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hx-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; width: 100%; }
@media (max-width: 1000px) { .hx-inner { grid-template-columns: 1fr; } }

.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: .92rem; color: #DCE2F2;
}
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
@media (prefers-reduced-motion: no-preference) {
  .kicker i { animation: pulse 2.2s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.5); } 100% { box-shadow: 0 0 0 12px rgba(61,220,132,0); } }
}

.hx-h1 {
  font-size: clamp(2.9rem, 6.6vw, 6.1rem);
  font-weight: 800; font-stretch: 76%; line-height: .93; letter-spacing: -.03em;
  margin: 0 0 26px; color: #fff; max-width: 13ch;
}
.hx-h1 .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hx-h1 .hw > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hx-h1 .hw > span { transform: translateY(108%); animation: rise .9s var(--ease) forwards; }
  @keyframes rise { to { transform: none; } }
  .hx-h1 .hw:nth-child(1) > span { animation-delay: .05s; } .hx-h1 .hw:nth-child(2) > span { animation-delay: .11s; }
  .hx-h1 .hw:nth-child(3) > span { animation-delay: .17s; } .hx-h1 .hw:nth-child(4) > span { animation-delay: .23s; }
  .hx-h1 .hw:nth-child(5) > span { animation-delay: .29s; } .hx-h1 .hw:nth-child(6) > span { animation-delay: .35s; }
  .hx-h1 .hw:nth-child(7) > span { animation-delay: .41s; } .hx-h1 .hw:nth-child(8) > span { animation-delay: .47s; }
  .hx-h1 .hw:nth-child(9) > span { animation-delay: .53s; } .hx-h1 .hw:nth-child(10) > span { animation-delay: .59s; }
  .hx-h1 .hw:nth-child(11) > span { animation-delay: .65s; } .hx-h1 .hw:nth-child(12) > span { animation-delay: .71s; }
  .hx-h1 .hw:nth-child(n+13) > span { animation-delay: .77s; }
  .hx-lede, .hx .hero-actions, .terms-x { opacity: 0; animation: fadein .8s var(--ease) .8s forwards; }
  .hx .hero-actions { animation-delay: .95s; } .terms-x { animation-delay: 1.1s; }
  .stage { opacity: 0; animation: stagein 1.2s var(--ease) .35s forwards; }
  @keyframes fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes stagein { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
}
.hx-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #C9D1E6; max-width: 40ch; margin-bottom: 30px; }
.terms-x { color: #AEB8D0; margin-top: 26px; }
.terms-x svg { color: #3DDC84; }

/* 3D device stage */
.stage { perspective: 1600px; position: relative; padding: 20px 0 50px; }
.tilt {
  --rx: 8deg; --ry: -16deg;
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease);
}
.dev { position: relative; background: #fff; color: var(--ink); overflow: hidden; }
.laptop { border-radius: 14px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 10px rgba(255,255,255,.04); }
.laptop .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #ECEEF2; }
.laptop .bar i { width: 9px; height: 9px; border-radius: 50%; background: #C8CCD6; }
.laptop .bar span { margin-left: 10px; flex: 1; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .7rem; color: var(--slate); }
.phone {
  position: absolute; right: -6%; bottom: -14%; width: 36%;
  border-radius: 30px; border: 7px solid #0B1030;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.85);
  transform: translateZ(80px);
}
.notch { width: 38%; height: 16px; margin: 6px auto 2px; border-radius: 10px; background: #0B1030; }
.mini { font-size: .8rem; }
.mini.t-roofing { --pv: #C0392B; } .mini.t-cleaning { --pv: #0E8F7E; }
.mini .pv-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--pv) 12%, white), white); padding: 20px 16px 16px; }
.mini .pv-hero .pv-h { font-size: clamp(1rem, 1.8vw, 1.45rem); color: var(--ink); }
.mini .pv-hero p:not(.pv-h) { font-size: .78rem; color: var(--slate); margin-bottom: 12px; }
.m-phone .pv-nav { padding: 8px 10px; font-size: .68rem; }
.m-phone .pv-call { padding: 4px 8px; font-size: .62rem; }
.m-phone .pv-hero { padding: 12px 10px; }
.m-phone .pv-hero .pv-h { font-size: .92rem; }
.m-phone .pv-hero p:not(.pv-h) { font-size: .66rem; }
.m-phone .pv-btns span { font-size: .6rem; padding: 5px 8px; }
.m-phone .pv-services { grid-template-columns: 1fr; padding: 0 10px 12px; gap: 6px; }
.m-phone .pv-services div { padding: 7px; font-size: .64rem; }

.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; font-weight: 650; font-size: .88rem;
  background: rgba(255,255,255,.95); color: var(--ink);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
}
.chip svg { width: 16px; height: 16px; color: #1B7F3B; }
.chip b { color: #E2A400; letter-spacing: 1px; }
.c1 { left: -7%; top: 16%; transform: translateZ(120px); }
.c2 { left: 6%; bottom: -6%; transform: translateZ(100px); }
.c3 { right: -3%; top: -6%; transform: translateZ(140px); background: var(--cobalt); color: #fff; }
.c3 svg { color: var(--tape); }
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: float 6s ease-in-out infinite; }
  .c2 { animation-delay: -2s; } .c3 { animation-delay: -4s; }
  @keyframes float { 50% { translate: 0 -10px; } }
}
@media (max-width: 1000px) { .stage { max-width: 620px; margin: 0 auto; width: 92%; } }
@media (max-width: 560px) { .c1 { left: -2%; } .c3 { right: 0; } .chip { font-size: .76rem; padding: 7px 10px; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; color: #8D98B8; font-size: .8rem; text-decoration: none;
}
.scroll-hint i { width: 22px; height: 34px; border: 2px solid #4A5680; border-radius: 12px; position: relative; }
.scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: #C9D1E6; }
@media (prefers-reduced-motion: no-preference) { .scroll-hint i::after { animation: wheel 1.8s ease-in-out infinite; } @keyframes wheel { 60% { transform: translateY(10px); opacity: 0; } } }
@media (max-height: 760px), (max-width: 1000px) { .scroll-hint { display: none; } }

/* ---------- Marquee ---------- */
.marquee-sec { padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); background: var(--chalk); overflow: hidden; }
.marquee-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.marquee-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.marquee-head p { margin: 0; color: var(--slate); max-width: 46ch; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; align-items: center; gap: 34px; width: max-content; }
.track span { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 780; font-stretch: 78%; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.track i { width: 14px; height: 14px; background: var(--tape); border: 2px solid var(--ink); transform: rotate(45deg); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .track { animation: marquee 48s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* ---------- Statement (words light up as you scroll) ---------- */
.statement { padding: clamp(72px, 12vw, 160px) 0; background: #fff; }
.stmt { font-size: clamp(1.7rem, 4.1vw, 3.5rem); font-weight: 720; font-stretch: 86%; line-height: 1.12; letter-spacing: -.02em; max-width: 26ch; margin: 0; color: var(--ink); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stmt span { color: #C9CDD6; animation: lit linear both; animation-timeline: view(); animation-range: cover 20% cover 45%; }
    @keyframes lit { to { color: var(--ink); } }
  }
}

/* ---------- Try it (big builder) ---------- */
.try { background: var(--chalk); }
.builder-xl { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; padding: 24px; border-radius: 26px; }
.builder-xl .builder-fields { grid-template-columns: 1fr; gap: 12px; }
.builder-xl .builder-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.builder-side { display: flex; flex-direction: column; gap: 6px; }
.builder-note { color: var(--mist); font-size: var(--fs-sm); margin: 6px 0 14px; }
.builder-side .btn { align-self: flex-start; }
.builder-view {
  border-radius: 18px; padding: clamp(14px, 2.5vw, 32px);
  background: radial-gradient(circle at 30% 20%, rgba(51,85,255,.35), transparent 60%), #0D1738;
  display: grid; place-items: center; min-height: 440px;
}
.builder-view .browser { width: 100%; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
@media (max-width: 900px) { .builder-xl { grid-template-columns: 1fr; } .builder-view { min-height: 0; } }

/* ---------- Before/after polish ---------- */
.ba { border-radius: 24px; border: 0; box-shadow: 0 40px 90px -40px rgba(20,33,61,.55), 0 0 0 1px rgba(20,33,61,.12); }

/* ---------- How it works: sticky story ---------- */
.section-ink.how { background: var(--night); }
.story { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-visual { position: sticky; top: 110px; display: grid; place-items: center; }
.phone-frame {
  width: min(300px, 80vw); aspect-ratio: 9 / 18.5; border-radius: 42px; border: 9px solid #05091D;
  background: linear-gradient(180deg, #F4F6FB, #E9ECF4); position: relative; overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
}
.phone-frame .notch { background: #05091D; }
.panes { position: absolute; inset: 40px 14px 18px; }
.pane { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; color: var(--ink);
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pane.on { opacity: 1; transform: none; }
.notif { display: flex; gap: 10px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 12px 28px -14px rgba(20,33,61,.4); font-size: .85rem; }
.notif svg { width: 20px; height: 20px; color: #fff; background: var(--cobalt); border-radius: 50%; padding: 3px; flex: none; }
.notif b, .notif span { display: block; } .notif span { color: var(--slate); font-size: .78rem; word-break: break-all; }
.pane-btn { align-self: center; background: var(--cobalt); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .85rem; }
.pane .bubble { padding: 10px 13px; font-size: .84rem; display: flex; gap: 8px; }
.pane .bubble.in { background: #fff; border-radius: 16px 16px 16px 4px; max-width: 90%; }
.pane .bubble.out { align-self: flex-end; background: #DFF5E3; color: #134E25; border-radius: 16px 16px 4px 16px; max-width: 90%; }
.pane .bubble svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.live-url { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 10px 14px; font-size: .82rem; }
.live-url svg { width: 18px; height: 18px; color: #1B7F3B; flex: none; }
.live-t { font-size: 1.3rem; line-height: 1.15; text-align: center; }
.ok { align-self: center; background: #DFF5E3; color: #134E25; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .8rem; }
.pane[data-pane="3"] { font-size: .84rem; }
.pane[data-pane="3"] em { color: var(--slate); font-size: .72rem; font-style: normal; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; background: #fff; border-radius: 14px; padding: 14px; }
.bars i { flex: 1; background: var(--cobalt); border-radius: 4px 4px 2px 2px; }
.bars i:nth-child(1) { height: 30%; } .bars i:nth-child(2) { height: 42%; } .bars i:nth-child(3) { height: 38%; }
.bars i:nth-child(4) { height: 60%; } .bars i:nth-child(5) { height: 72%; } .bars i:nth-child(6) { height: 92%; background: var(--tape); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.st { display: grid; grid-template-columns: 56px 1fr; gap: 18px; min-height: 46vh; align-content: center; opacity: .38; transition: opacity .4s; border-top: 1px solid var(--night-line); padding: 28px 0; }
.st.on { opacity: 1; }
.st-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; border: 1.5px solid rgba(255,255,255,.25); }
.st.on .st-n { background: var(--tape); color: var(--ink); border-color: var(--tape); }
.st h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-stretch: 85%; margin-bottom: 10px; }
.st p { color: #C3CBE0; }
.st .when { display: inline-block; font-size: var(--fs-sm); background: #1D2A57; padding: 4px 12px; border-radius: 999px; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-visual { display: none; }
  .st { min-height: 0; opacity: 1; }
}

/* ---------- Bento on night, with cursor spotlight ---------- */
.section-night { background: var(--night); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.section-night .section-head p { color: var(--mist); }
.section-night .bento-cell { background: var(--night-2); border-color: var(--night-line); color: #fff; position: relative; overflow: hidden; }
.section-night .bento-text p { color: var(--mist); }
.section-night .bento-cell svg { color: #7C93FF; }
.section-night .w { background: #E9ECF4; color: var(--ink); }
.section-night .w svg { color: inherit; }
.section-night .ai-badge svg, .section-night .ai-badge { color: var(--cobalt); }
.section-night .bubble.out svg { color: #1B7F3B; }
.section-night .map-pin svg { color: #C0392B; }
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(51,85,255,.28), transparent 45%);
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; }

/* ---------- Pricing: featured card on night with gradient ring ---------- */
.plan { border-radius: 24px; transition: transform .3s var(--ease), box-shadow .3s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(20,33,61,.5); }
.plan-featured {
  background: linear-gradient(var(--night), var(--night)) padding-box, linear-gradient(140deg, var(--cobalt), var(--tape)) border-box;
  border: 2px solid transparent; color: #fff; box-shadow: 0 40px 80px -36px rgba(51,85,255,.7);
}
.plan-featured .plan-for, .plan-featured .price span, .plan-featured .price-note { color: var(--mist); }
.plan-featured li svg { color: var(--tape); }
.plan-featured .btn-primary { background: var(--cobalt); border-color: var(--cobalt); }

/* ---------- Final CTA ---------- */
.final { padding-top: clamp(90px, 12vw, 160px); }
.final-h { font-size: clamp(3rem, 7.5vw, 6.6rem); font-weight: 800; font-stretch: 76%; line-height: .92; letter-spacing: -.03em; margin-bottom: 18px; }
.final-p { font-size: var(--fs-md); color: #fff; }
.final .request p:not(.final-p):not(.request-mail) { color: var(--mist); }
.final .form { box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); }

/* ---------- Footer wordmark ---------- */
.site-footer { background: var(--chalk); overflow: hidden; }
.site-footer .wrap::after {
  content: "LBX Digital"; display: block; margin-top: 28px;
  font-size: clamp(3.4rem, 15vw, 13rem); font-weight: 800; font-stretch: 75%; letter-spacing: -.04em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px #C9CDC2; white-space: nowrap;
}

/* sticky CTA uses the glow button look */
.sticky-cta .btn { background: var(--cobalt); border-color: var(--cobalt); }
.hx-h1 { font-size: clamp(2.7rem, 5.4vw, 5.3rem); max-width: 15ch; }
@media (max-width: 1000px) { .hx { min-height: 0; } .stage { margin-top: 20px; padding-bottom: 70px; } }
@media (max-width: 1000px) { .stage { padding-top: 26%; } .phone { width: 32%; } .c3 { top: 14%; } }

/* =====================================================================
   v4 — services menu + add-ons
   ===================================================================== */
.services { background: var(--chalk); }
.try { background: #fff; }
.svc-big-list { display: grid; gap: 20px; margin-bottom: 20px; }
.svc { background: #fff; border: 1.5px solid var(--line); border-radius: 26px; position: relative; }
.svc-big { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 44px); overflow: hidden; }
.svc-big:nth-child(even) .svc-text { order: 2; }
.svc-big h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-stretch: 82%; letter-spacing: -.02em; margin: 14px 0 10px; }
.svc-big p { color: var(--slate); font-size: 1.08rem; }
.svc ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.svc li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.svc li svg { width: 18px; height: 18px; color: var(--cobalt); margin-top: 4px; }
.svc-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--night); color: #fff; }
.svc-ic svg { width: 26px; height: 26px; }
.svc-social .svc-ic { background: linear-gradient(135deg, #7B5CFF, #E1306C); }
.svc-ads .svc-ic { background: linear-gradient(135deg, var(--cobalt), #29B6F6); }
.svc-tag { display: inline-block; font-size: .85rem; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: #E8ECFF; color: var(--cobalt-deep); }
.tag-growth, .tag-full { background: var(--tape); color: var(--ink); }
.tag-quote { background: #ECEEE8; color: var(--ink-soft); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.svc-small { padding: 26px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.svc-small:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(20,33,61,.5); }
.svc-small .svc-ic { width: 46px; height: 46px; border-radius: 14px; background: #E8ECFF; color: var(--cobalt); }
.svc-small h3 { margin: 16px 0 8px; font-size: 1.2rem; }
.svc-small p { color: var(--slate); font-size: .96rem; }
.svc-small ul { font-size: .92rem; flex: 1; }
.svc-small .svc-tag { align-self: flex-start; }
@media (max-width: 860px) { .svc-big { grid-template-columns: 1fr; } .svc-big:nth-child(even) .svc-text { order: 0; } }

/* service visuals */
.sv { position: relative; border-radius: 20px; padding: 22px; min-height: 300px; display: grid; align-content: center; gap: 12px; }
.sv .ill { top: 10px; right: 14px; }
.sv-web { background: radial-gradient(circle at 70% 20%, rgba(51,85,255,.35), transparent 60%), var(--night); }
.sv-bar { display: flex; gap: 6px; background: #E9ECF2; border-radius: 12px 12px 0 0; padding: 10px 12px; }
.sv-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C8CCD6; }
.sv-page { background: #fff; border-radius: 0 0 12px 12px; padding: 22px; display: grid; gap: 10px; margin-top: -12px; }
.sv-page b { width: 34%; height: 12px; border-radius: 4px; background: #C0392B; }
.sv-page .l1 { height: 22px; width: 82%; border-radius: 6px; background: var(--ink); }
.sv-page .l2 { height: 10px; width: 60%; border-radius: 4px; background: #D5D9E2; }
.sv-btns { display: flex; gap: 8px; } .sv-btns em { width: 90px; height: 26px; border-radius: 999px; background: #C0392B; } .sv-btns em + em { background: transparent; border: 2px solid var(--ink); }
.sv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sv-cards i { height: 52px; border-radius: 8px; border: 1.5px solid #E6E8EE; }
@media (prefers-reduced-motion: no-preference) {
  .sv-web .sv-page { animation: pageIn 6s var(--ease) infinite; }
  @keyframes pageIn { 0%, 8% { clip-path: inset(0 0 100% 0); } 30%, 100% { clip-path: inset(0); } }
}
.sv-social { background: linear-gradient(135deg, #F3EEFF, #FFE9F1); }
.post { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 20px 40px -24px rgba(20,33,61,.45); max-width: 340px; justify-self: center; width: 100%; }
.post-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.post-h i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #C0392B, #E67E22); }
.post-h b { display: block; font-size: .9rem; } .post-h span { font-size: .75rem; color: var(--slate); }
.post-img { height: 150px; border-radius: 12px; background: linear-gradient(160deg, #8FB8E8 0%, #C9DDF2 45%, #7A4A3A 46%, #9C5B45 70%, #B7735A 100%); position: relative; overflow: hidden; }
.post-img span { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: repeating-linear-gradient(90deg, #6E3B2D 0 18px, #85483A 18px 36px); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.post p { font-size: .85rem; margin: 10px 0 8px; }
.post-r { display: flex; gap: 14px; font-size: .8rem; color: var(--slate); }
.cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; max-width: 340px; width: 100%; justify-self: center; }
.cal i { aspect-ratio: 1; border-radius: 4px; background: rgba(123,92,255,.15); }
.cal i.on { background: linear-gradient(135deg, #7B5CFF, #E1306C); }
.sv-ads { background: linear-gradient(135deg, #EAF1FF, #E6F8FF); }
.metric { background: #fff; border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 16px; box-shadow: 0 14px 30px -24px rgba(20,33,61,.5); font-weight: 650; font-size: .9rem; }
.spark { height: 40px; border-radius: 6px;
  background: linear-gradient(to top, rgba(51,85,255,.18), transparent),
    linear-gradient(135deg, transparent 0 48%, var(--cobalt) 48% 52%, transparent 52%) 0 0 / 25% 100%;
  -webkit-mask: linear-gradient(90deg, #000, #000); }
.metric .spark { clip-path: polygon(0 85%, 15% 70%, 30% 75%, 45% 50%, 60% 55%, 75% 30%, 90% 25%, 100% 8%, 100% 100%, 0 100%); background: linear-gradient(to top, rgba(51,85,255,.08), rgba(51,85,255,.55)); }
.metric .s2 { clip-path: polygon(0 80%, 18% 78%, 34% 60%, 50% 62%, 66% 40%, 82% 35%, 100% 15%, 100% 100%, 0 100%); background: linear-gradient(to top, rgba(255,210,63,.15), rgba(255,170,0,.7)); }
.metric .s3 { clip-path: polygon(0 70%, 20% 60%, 40% 65%, 55% 45%, 70% 40%, 85% 20%, 100% 18%, 100% 100%, 0 100%); background: linear-gradient(to top, rgba(14,143,126,.1), rgba(14,143,126,.6)); }
.ad-logos { display: flex; gap: 8px; justify-content: center; }
.ad-logos em { font-style: normal; font-size: .78rem; font-weight: 700; background: #fff; border-radius: 999px; padding: 5px 12px; color: var(--ink-soft); }

/* add-ons */
.addons { margin-top: 40px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start;
  background: var(--night); color: #fff; border-radius: 26px; padding: clamp(24px, 4vw, 40px); }
.addons h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-stretch: 85%; margin-bottom: 10px; }
.addons p { color: var(--mist); margin: 0; }
.addons ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
.addons li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--night-line); flex-wrap: wrap; }
.ad-name { font-weight: 650; }
.ad-price { font-weight: 750; color: var(--tape); text-align: right; }
.ad-price small { display: block; font-weight: 450; color: var(--mist); font-size: .8rem; }
@media (max-width: 860px) { .addons { grid-template-columns: 1fr; } }
.sv-web .sv-page { animation: none !important; clip-path: none; }
.sv-web { align-content: center; }
.svc-grid { grid-template-columns: repeat(6, 1fr); }
.svc-grid > :nth-child(1), .svc-grid > :nth-child(2) { grid-column: span 3; }
.svc-grid > :nth-child(n+3) { grid-column: span 2; }
@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-grid > * { grid-column: auto !important; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   v5 — problem section with search-results visual
   ===================================================================== */
.problem-x { background: #fff; padding: clamp(72px, 10vw, 130px) 0; }
.px-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.px-copy h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-stretch: 80%; line-height: 1; margin-bottom: 30px; max-width: 14ch; }
.px-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 4px; }
.px-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.px-list li:first-child { border-top: 1px solid var(--line); }
.px-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: #FFE8E6; color: #B3261E; }
.px-list strong { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.px-list span { color: var(--slate); }
.px-fix { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; background: #E8F7EC; color: #134E25; padding: 12px 18px; border-radius: 14px; max-width: none; }
.px-fix svg { width: 20px; height: 20px; flex: none; }
.px-visual { position: relative; }
.px-visual::before { content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: 36px; background: radial-gradient(circle at 70% 30%, rgba(51,85,255,.25), transparent 60%), var(--chalk); z-index: 0; }
.serp { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 28px; padding: 18px; box-shadow: 0 40px 80px -36px rgba(20,33,61,.45), 0 0 0 1px rgba(20,33,61,.08); display: grid; gap: 12px; }
.serp-q { display: flex; align-items: center; gap: 10px; border: 1.5px solid #DADDE5; border-radius: 999px; padding: 11px 16px; font-size: .95rem; }
.serp-q svg { width: 18px; height: 18px; color: var(--slate); }
.serp-map { position: relative; height: 130px; border-radius: 16px; background: #E4EADF; overflow: hidden; }
.serp-map .pin { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.serp-map .p1 { left: 58%; top: 34%; background: #1B7F3B; width: 24px; height: 24px; }
.serp-map .p2 { left: 26%; top: 56%; background: #9AA3B5; }
.res { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 16px; padding: 14px 16px; }
.res b { display: block; font-size: 1rem; } .res span { font-size: .8rem; color: var(--slate); }
.res em { font-style: normal; font-size: .75rem; font-weight: 750; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.res-win { background: #fff; border: 2px solid #1B7F3B; box-shadow: 0 16px 30px -22px rgba(27,127,59,.7); }
.res-win em { background: #1B7F3B; color: #fff; }
.res-lose { background: #F5F6F8; opacity: .75; }
.res-lose b { color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(179,38,30,.6); }
.res-lose em { background: #FFE8E6; color: #B3261E; }
.res-ghost { background: #F5F6F8; } .res-ghost b { width: 50%; height: 10px; background: #DDE0E6; border-radius: 4px; margin-bottom: 6px; } .res-ghost span { display: block; width: 70%; height: 8px; background: #E6E8EC; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .res-win { animation: winpulse 3.2s ease-in-out infinite; }
  @keyframes winpulse { 50% { box-shadow: 0 16px 30px -22px rgba(27,127,59,.7), 0 0 0 6px rgba(27,127,59,.12); } }
}
@media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; } }
.problem-x { overflow: hidden; }
@media (max-width: 900px) { .px-visual::before { inset: 6% 0 -4% 6%; } }
/* try section now sits right under the dark hero */
.try { padding-top: clamp(64px, 8vw, 104px); }

/* before/after with real screenshots (img-src/old.png + new.png) */
.ba-img { aspect-ratio: 1344 / 752; min-height: 0; }
.ba-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
@media (max-width: 640px) { .ba-img { aspect-ratio: 1344 / 752; min-height: 0; } }

/* v6 hero: phone shows a social post, chips show the full service mix */
.ig { padding: 10px; display: grid; gap: 8px; font-size: .7rem; color: var(--ink); }
.ig-h { display: flex; gap: 8px; align-items: center; }
.ig-h i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #C0392B, #E67E22); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E1306C; }
.ig-h b { display: block; font-size: .68rem; } .ig-h span { font-size: .6rem; color: var(--slate); }
.ig-img { aspect-ratio: 4 / 5; border-radius: 8px; position: relative; overflow: hidden;
  background: linear-gradient(170deg, #8FB8E8 0%, #C9DDF2 42%, #7A4A3A 43%, #9C5B45 68%, #B7735A 100%); }
.ig-img span { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, #6E3B2D 0 14px, #85483A 14px 28px); clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%); }
.ig-r { display: flex; gap: 10px; font-size: .85rem; } .ig-r em { font-style: normal; }
.ig p { margin: 0; font-size: .64rem; line-height: 1.35; }
.ig-cta { background: #E1306C; color: #fff; border-radius: 6px; text-align: center; padding: 6px; font-weight: 700; font-size: .64rem; }
.c1 { left: -8%; top: 14%; }
.c1 svg { color: var(--cobalt); }
.c3 { right: -4%; top: -8%; background: linear-gradient(135deg, #7B5CFF, #E1306C); color: #fff; }
.c3 svg { color: #fff; }
.c4 { right: 30%; bottom: -12%; transform: translateZ(110px); background: var(--cobalt); color: #fff; }
.c4 svg { color: var(--tape); }
@media (prefers-reduced-motion: no-preference) { .c4 { animation: float 6s ease-in-out infinite; animation-delay: -3s; } }
@media (max-width: 560px) { .c4 { right: 24%; bottom: -16%; } }
.c3 { top: -15%; right: -6%; }
@media (max-width: 560px) { .c1 { left: 0; top: 10%; } .c3 { top: -12%; right: 2%; } }
/* before/after directly under the dark hero */
.ba-sec { background: var(--chalk); }
.try { background: #fff; }
/* tighter hand-off from hero to the before/after slider */
.hx { min-height: min(100svh, 820px); padding-bottom: 56px; }
.hx .scroll-hint { bottom: 14px; }
.ba-sec { padding-top: clamp(40px, 5vw, 64px); }
.ba-sec .section-head { margin-bottom: clamp(24px, 3vw, 36px); }

/* =====================================================================
   v7 — "Who we work with": two counter-moving rows of trade chips
   ===================================================================== */
.trades-x { background: var(--night); color: #fff; padding: clamp(64px, 8vw, 104px) 0; overflow: hidden; position: relative; isolation: isolate; }
.trades-x::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 300px at 15% 0%, rgba(51,85,255,.35), transparent 70%), radial-gradient(500px 260px at 90% 100%, rgba(255,210,63,.14), transparent 70%); }
.trades-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); }
.trades-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-stretch: 80%; line-height: 1; margin-bottom: 12px; }
.trades-head p { color: var(--mist); margin: 0; font-size: 1.1rem; max-width: 46ch; }
.trades-more { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; max-width: 36ch;
  padding: 14px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.04); transition: background-color .2s, border-color .2s; }
.trades-more:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.35); }
.trades-more svg { width: 20px; height: 20px; flex: none; color: var(--tape); }
.tx-rows { display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tx-row { overflow: hidden; }
.tx-track { display: flex; gap: 14px; width: max-content; }
.tx-chip {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  padding: 14px 26px 14px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 700; letter-spacing: -.01em;
}
.tx-chip svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--cobalt); color: #fff; flex: none; }
.tx-rev .tx-chip svg { background: var(--tape); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .tx-track { animation: marquee 55s linear infinite; }
  .tx-rev .tx-track { animation-direction: reverse; animation-duration: 62s; }
  .tx-rows:hover .tx-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .tx-track { flex-wrap: wrap; width: auto; } .tx-rev { display: none; } }
@media (max-width: 560px) { .tx-chip { padding: 10px 18px 10px 10px; } .tx-chip svg { width: 36px; height: 36px; padding: 8px; } }
/* compact single-row version */
.trades-x { padding: 26px 0 28px; }
.trades-head { align-items: center; margin-bottom: 16px; gap: 8px 24px; }
.trades-head > div { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.trades-head h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-stretch: 90%; margin: 0; }
.trades-head p { font-size: .92rem; }
.trades-more { padding: 0; border: 0; background: none; font-size: .9rem; max-width: none; color: #C9D1E6; }
.trades-more:hover { background: none; color: #fff; }
.trades-more svg { width: 16px; height: 16px; }
.tx-chip { padding: 6px 16px 6px 6px; gap: 10px; font-size: 1rem; font-weight: 650; }
.tx-chip svg { width: 32px; height: 32px; padding: 7px; }
.tx-track { gap: 10px; animation-duration: 45s; }
@media (max-width: 760px) { .trades-head p, .trades-more { display: none; } }
.trades-head { flex-wrap: nowrap; justify-content: space-between; }
.trades-head p { display: none; }

/* service cards with real mockup photos (img-src/svc-*.png) */
.sv-photo { padding: 0; min-height: 0; overflow: hidden; background: var(--chalk); }
.sv-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 20px; transition: transform .6s var(--ease); }
.svc-big:hover .sv-photo img { transform: scale(1.03); }
.sv-photo .ill { z-index: 1; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 999px; }

/* story: real phone screens (img-src/step-1..4.png) + tighter steps */
.panes:has(.pane-img) { inset: 0; }
.pane-img { justify-content: stretch; }
.pane-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.st { min-height: 34vh; }
.phone-frame .notch { position: relative; z-index: 2; }
/* fit 9:16 screens without cropping, leave room for the notch */
.phone-frame:has(.pane-img) { aspect-ratio: 752 / 1430; background: #fff; }
.pane-img { padding-top: 30px; background: #fff; }
.pane-img img { object-fit: contain; object-position: top center; }
/* services now sit right under the hero */
.services { padding-top: clamp(48px, 6vw, 80px); }
.ba-sec { background: #fff; }
.try { background: var(--chalk); }

/* hero devices with real screenshots */
.laptop .hero-shot { display: block; width: 100%; height: auto; aspect-ratio: 1344 / 752; object-fit: cover; object-position: top left; }
.phone .hero-phone-shot { display: block; width: 100%; height: auto; }
.phone:has(.hero-phone-shot) .ig { display: none; }
.phone:has(.hero-phone-shot) .notch { position: absolute; left: 31%; top: 6px; margin: 0; z-index: 2; }

/* hero laptop: mini before/after slider */
@property --hp { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.hero-ba { --hp: 50%; position: relative; aspect-ratio: 1344 / 752; overflow: hidden; cursor: ew-resize; touch-action: pan-y; }
.hero-ba img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; pointer-events: none; user-select: none; }
.hero-ba-old { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--hp)) 0 0); }
.hero-ba-line { position: absolute; top: 0; bottom: 0; left: var(--hp); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(10,18,48,.35); }
.hero-ba-line b { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: var(--tape); border: 2px solid var(--night); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.hero-ba-line b svg { width: 16px; height: 16px; color: var(--night); }
.hb-tag { position: absolute; bottom: 8px; font-size: .68rem; font-weight: 750; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.hb-old { left: 8px; background: var(--night); color: #fff; }
.hb-new { right: 8px; background: var(--tape); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero-ba:not(.manual) { animation: hbsweep 7s ease-in-out 1.6s infinite alternate both; }
  @keyframes hbsweep { 0% { --hp: 78%; } 100% { --hp: 22%; } }
}
/* keep the line in the visible part of the laptop (the phone covers its right edge) */
.hero-ba { --hp: 42%; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hbsweep { 0% { --hp: 66%; } 100% { --hp: 14%; } }
}
.hb-old { left: calc(var(--hp) - 8px); transform: translateX(-100%); bottom: 10px; }
.hb-new { right: auto; left: calc(var(--hp) + 8px); bottom: 10px; }
.hb-old, .hb-new { bottom: auto; top: 10px; }
.try { background: #fff; }

/* FIX: GPU depth-sorting glitch (laptop showing through the phone) in Chromium/Brave.
   Flatten the tilted stage and order layers explicitly instead of relying on translateZ. */
.tilt { transform-style: flat; }
.laptop { position: relative; z-index: 1; }
.phone { z-index: 3; transform: translate(0, 0); }
.chip { z-index: 4; transform: none; }
.c4 { transform: none; }
.hero-ba { isolation: isolate; contain: paint; }
.hero-ba-old { will-change: clip-path; }

/* one-off purchase */
.outright { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; align-items: center;
  background: #fff; border: 2px dashed #C9CDC2; border-radius: 26px; padding: clamp(24px, 4vw, 40px); }
.outright h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-stretch: 85%; margin-bottom: 8px; }
.outright .o-left > p:not(.o-care) { color: var(--slate); }
.outright .price { margin: 14px 0 6px; }
.o-care { font-size: var(--fs-sm); color: var(--slate); margin-bottom: 18px; }
.outright ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.outright li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.outright li svg { width: 18px; height: 18px; color: var(--cobalt); margin-top: 4px; }
@media (max-width: 860px) { .outright { grid-template-columns: 1fr; } }
/* phone back to its original visual size (image screens are shorter than the old mock) */
.phone:has(.hero-phone-shot) { width: 46%; right: -10%; bottom: -26%; }
@media (max-width: 1000px) { .phone:has(.hero-phone-shot) { width: 42%; right: -4%; bottom: -20%; } }
/* final hero phone size: tall like the original mock, but pushed right so the laptop slider stays visible */
.phone:has(.hero-phone-shot) { width: 40%; right: -15%; bottom: -24%; }
.c3 { right: -12%; top: -12%; }
@media (max-width: 1000px) { .phone:has(.hero-phone-shot) { width: 38%; right: -6%; bottom: -18%; } .c3 { right: 0; } }
@media (prefers-reduced-motion: no-preference) { @keyframes hbsweep { 0% { --hp: 68%; } 100% { --hp: 14%; } } }
/* new 3D logo mark */
.brand-mark { display: inline-block; width: 34px; height: 34px; flex: none; }
.brand-mark img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(30,107,255,.45)); }
.site-footer .brand { color: var(--ink); }
/* brand wordmark: the X is half blue, like the logo */
.brand-word { --brand-ink: #fff; }
.site-footer .brand-word { --brand-ink: var(--ink); }
.bx { display: inline-block; height: .7em; width: auto; vertical-align: baseline; margin: 0 .01em 0 .02em; color: var(--brand-ink); overflow: visible; }

/* wordmark in the logo typeface (Montserrat ExtraBold, subset) */
.brand-word { font-family: "LBX Brand", "Bricolage", system-ui, sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.005em; white-space: nowrap; }
.bx { height: .7em; margin: 0 .02em 0 .03em; }

/* full logo lockup: wordmark + spaced tagline, as in the brand logo */
.brand-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 5px; }
.brand-text .brand-word { font-size: 1.36rem; }
.brand-word { line-height: 1; }
.brand-tag { font-family: "LBX Tag", system-ui, sans-serif; font-weight: 600; font-size: 6.6px; letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; white-space: nowrap; opacity: .82; }
@media (max-width: 420px) {
  .site-header .lang summary > span { display: none; }
  .site-header .lang summary svg { flex: none; }
  .site-header .brand { min-width: 0; }
}

/* full raster logo (brand artwork) */
.brand-logo { display: block; line-height: 0; }
.brand-logo img { display: block; height: 33px; width: auto; }
@media (max-width: 420px) { .brand-logo img { height: 26px; } }