:root {
  --ink: #32183f;
  --ink-2: #58385f;
  --paper: #fff8ef;
  --paper-2: #f7ecdf;
  --white: #fffdfa;
  --plum: #3b1648;
  --violet: #7653c7;
  --lilac: #e9deff;
  --coral: #ff8e78;
  --peach: #ffc2a9;
  --butter: #ffd166;
  --mint: #caffda;
  --line: rgba(73, 42, 74, 0.15);
  --sans: "Manrope", "DM Sans", Arial, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", monospace;
  --gutter: clamp(18px, 4.8vw, 76px);
}

* { box-sizing: border-box; }
html,
body { width: 100%; max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 9%, rgba(232, 217, 255, 0.62), transparent 25rem),
    radial-gradient(circle at 5% 37%, rgba(255, 209, 102, 0.16), transparent 31rem),
    var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main,
section,
header,
footer,
div,
article,
form,
nav { min-width: 0; }
img,
svg { display: block; max-width: 100%; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a,
button,
input,
textarea { font: inherit; }
button { cursor: pointer; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--butter); outline-offset: 4px; }
h1,
h2,
h3,
p { margin-top: 0; }
h1,
h2,
h3 { text-wrap: balance; }
h2 {
  margin-bottom: 0;
  font: 700 clamp(46px, 5.25vw, 86px) / 0.98 var(--sans);
  letter-spacing: -0.058em;
}
h1 em,
h2 em,
h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
}
.section-wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grain {
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Floating sticky header */
.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: max(12px, env(safe-area-inset-top));
  pointer-events: none;
}
.nav-shell {
  width: calc(100% - 28px);
  max-width: 1480px;
  height: 62px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.6vw, 32px);
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.38);
  pointer-events: auto;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.site-header.scrolled .nav-shell {
  border-color: rgba(59,22,72,.11);
  background: rgba(255, 248, 239, 0.88);
  box-shadow: 0 15px 36px rgba(59,22,72,.12), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}
.brand b { font: 800 31px / 1 var(--sans); letter-spacing: -0.08em; }
.brand b span { color: var(--coral); }
.brand small { max-width: 72px; color: #816d81; font: 500 7px / 1.25 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.main-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  margin-right: 42px;
}
.main-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 19px;
  color: var(--white);
  border: 1px solid rgba(59, 22, 72, 0.85);
  border-radius: 999px;
  background: var(--plum);
  box-shadow: 0 8px 22px rgba(59, 22, 72, 0.15);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.header-cta > span { color: inherit; font-size: 13px; }
.header-cta svg,
.button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-cta svg { width: 16px; height: 16px; color: var(--butter); }

/* Shared details */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #765f78;
  font: 500 10px / 1.35 var(--mono);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}
.eyebrow > span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(255, 142, 120, 0.14);
}
.eyebrow.light { color: rgba(255, 255, 255, 0.72); }
.eyebrow.light > span {
  background: var(--butter);
  box-shadow: 0 0 0 5px rgba(255, 209, 102, 0.12);
}

/* Buttons */
.button {
  position: relative;
  isolation: isolate;
  min-height: 57px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 8px 9px 8px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  touch-action: manipulation;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -30%;
  width: 35%;
  height: 300%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(18deg);
  transition: left 0.55s ease;
}
.button i {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  font-style: normal;
  transition: transform 0.25s ease;
}
.button-primary {
  color: var(--white);
  background: linear-gradient(120deg, #3b1648, #6e3c78);
  box-shadow: 0 15px 32px rgba(59, 22, 72, 0.2), inset 0 1px rgba(255, 255, 255, 0.15);
}
.button-primary i { color: var(--ink); background: var(--butter); }
.button-ghost {
  color: var(--ink);
  border-color: rgba(59, 22, 72, 0.22);
  background: rgba(255, 253, 250, 0.6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}
.button-ghost i { color: var(--white); background: var(--coral); }
.button-contact {
  width: 100%;
  color: var(--ink);
  background: linear-gradient(115deg, var(--butter), #ffb85c);
  box-shadow: 0 14px 28px rgba(10, 2, 14, 0.22), inset 0 1px rgba(255, 255, 255, 0.45);
}
.button-contact i { color: var(--white); background: var(--plum); }
.button:active { transform: scale(0.98); }

/* Hero */
.hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: min(940px, 100svh);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, 0.94fr);
  align-items: center;
  gap: clamp(42px, 7vw, 118px);
  padding-top: 130px;
  padding-bottom: 80px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 86% 19%, rgba(255, 142, 120, 0.32), transparent 24rem),
    radial-gradient(circle at 65% 58%, rgba(126, 83, 199, 0.28), transparent 28rem),
    radial-gradient(circle at 95% 73%, rgba(255, 209, 102, 0.28), transparent 25rem);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  border-radius: 0 0 0 190px;
  background: linear-gradient(160deg, rgba(250, 225, 211, 0.72), rgba(233, 222, 255, 0.72));
}
.hero-copy { position: relative; z-index: 3; }
.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  font: 500 10px / 1.2 var(--mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.hero-kicker span,
.hero-kicker i {
  padding: 9px 11px;
  border: 1px solid rgba(59, 22, 72, 0.14);
  border-radius: 999px;
  font-style: normal;
}
.hero-kicker span { color: var(--white); background: var(--plum); }
.hero-kicker i { color: #6b526d; background: rgba(255, 253, 250, 0.58); }
.hero h1 {
  max-width: 780px;
  margin: 0;
  font: 700 clamp(64px, 6.25vw, 105px) / 0.91 var(--sans);
  letter-spacing: -0.064em;
}
.hero h1 em { display: block; }
.hero h1 em { color: var(--violet); }
.hero-lede {
  max-width: 500px;
  margin: 29px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.67;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  margin-top: 31px;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0 5px;
  color: var(--ink);
  border-bottom: 1px solid rgba(59, 22, 72, 0.28);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.hero-link span { color: var(--coral); font-size: 16px; }
.hero-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 29px;
  color: #806b80;
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-path span { padding-bottom: 3px; border-bottom: 1px solid rgba(59, 22, 72, 0.22); }
.hero-path b { color: var(--coral); font-weight: 500; }
.hero-art { position: relative; z-index: 1; }
.hero-image {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  border: 1px solid rgba(59, 22, 72, 0.1);
  border-radius: 30px;
  background: #f5dfcd;
  box-shadow: 0 36px 70px rgba(72, 35, 70, 0.2), inset 0 1px rgba(255, 255, 255, 0.55);
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 38%, rgba(61, 18, 67, 0.12));
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.025);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-float {
  position: absolute;
  z-index: 4;
  font: 500 9px / 1.35 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.float-top {
  top: 23px;
  left: 23px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  color: var(--white);
  border-radius: 999px;
  background: rgba(59, 22, 72, 0.8);
  backdrop-filter: blur(9px);
}
.float-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.16);
}
.float-bottom {
  right: 21px;
  bottom: 21px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  color: var(--ink);
  border-radius: 13px;
  background: var(--butter);
  box-shadow: 0 10px 25px rgba(55, 22, 63, 0.16);
}
.float-bottom strong { font: 400 26px / 1 var(--serif); }
.hero-halo {
  position: absolute;
  z-index: 0;
  right: -11%;
  bottom: -9%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(118, 83, 199, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(232, 220, 255, 0.52), 0 0 0 112px rgba(255, 195, 169, 0.23);
}

/* Compact services — useful information, not another wall of text */
.services-compact {
  position: relative;
  overflow: hidden;
  padding-top: 118px;
  padding-bottom: 128px;
}
.services-compact::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15%;
  right: -8%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118, 83, 199, 0.18), transparent 68%);
}
.services-head {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 35px;
  margin-bottom: 68px;
}
.services-head h2 { max-width: 930px; margin: 0; }
.services-head h2 em { color: var(--coral); }
.services-head > div > p { max-width: 480px; margin: 21px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.services-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 15px; }
.service-card:nth-child(1) { grid-column: span 6; }
.service-card:nth-child(2),
.service-card:nth-child(3) { grid-column: span 3; }
.service-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 250, 0.72);
  box-shadow: 0 18px 42px rgba(59, 22, 72, 0.06), inset 0 1px rgba(255, 255, 255, 0.8);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.service-card::before { content: ""; position: absolute; top: -40%; right: -22%; width: 68%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.65), transparent 68%); pointer-events: none; }
.service-card:nth-child(1) { background: linear-gradient(145deg, rgba(238,228,255,.88), rgba(255,253,250,.84)); }
.service-card:nth-child(2) { background: linear-gradient(145deg, rgba(255,225,216,.9), rgba(255,249,238,.86)); }
.service-card:nth-child(3) { background: linear-gradient(145deg, rgba(255,237,183,.9), rgba(237,255,244,.82)); }
.service-no { color: #806c80; font: 500 10px / 1 var(--mono); }
.service-card h3 { margin: auto 0 0; font: 700 clamp(27px, 2.3vw, 36px) / 1 var(--sans); letter-spacing: -0.052em; }
.service-card p { max-width: 330px; margin: 15px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.58; }
.service-tag { width: max-content; margin-top: 16px; padding: 8px 10px; color: #654f69; border: 1px solid rgba(59,22,72,.13); border-radius: 999px; background: rgba(255,255,255,.5); font: 500 9px/1 var(--mono); text-transform: uppercase; }
.service-card:nth-child(1) .service-visual { width: 240px; height: 170px; right: 30px; }
.service-card:nth-child(2) .service-visual,
.service-card:nth-child(3) .service-visual { width: 170px; height: 132px; right: 13px; }
.service-card:nth-child(2) h3,
.service-card:nth-child(3) h3 { font-size: clamp(25px, 2vw, 31px); }
.service-visual { position: absolute; top: 39px; right: -20px; width: 210px; aspect-ratio: 1; }
.service-visual i,
.service-visual b,
.service-visual em { position: absolute; display: block; }
.visual-web::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--lilac); }
.visual-web i { top: 15%; left: 28%; width: 47%; height: 64%; border-radius: 100px 100px 17px 17px; background: var(--violet); transform: rotate(17deg); }
.visual-web b { bottom: 16%; left: 10%; width: 54%; height: 27%; border-radius: 50% 50% 14px 14px; background: var(--coral); transform: rotate(-17deg); }
.visual-web em { top: 18%; right: 15%; width: 29%; aspect-ratio: 1; border-radius: 50%; background: var(--butter); }
.visual-ads::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: #ffe5dc; }
.visual-ads i { inset: 29% 10% auto auto; width: 75%; height: 23%; border-radius: 999px; background: var(--coral); transform: rotate(-28deg); }
.visual-ads b { top: 24%; left: 19%; width: 35%; aspect-ratio: 1; border: 14px solid var(--violet); border-radius: 50%; }
.visual-ads em { right: 19%; bottom: 20%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--butter); box-shadow: -42px 3px 0 var(--lilac); }
.visual-google::before { content: ""; position: absolute; inset: 12%; border-radius: 38% 62% 58% 42%; background: linear-gradient(145deg, var(--butter), #ffad70); transform: rotate(16deg); }
.visual-google i { top: 22%; left: 35%; width: 34%; height: 46%; border: 13px solid var(--plum); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.visual-google b { top: 33%; left: 46%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); }
.visual-google em { right: 9%; bottom: 17%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--violet); }

/* Turn the service illustrations into small interface widgets */
.service-visual {
  top: 43px;
  right: 20px;
  width: 190px;
  height: 145px;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(59, 22, 72, 0.12);
  border-radius: 21px;
  background: linear-gradient(145deg, #f2eaff, #fff4e8);
  box-shadow: 0 14px 30px rgba(59, 22, 72, 0.1), inset 0 1px rgba(255,255,255,.9);
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
}
.service-visual::after { position: absolute; right: 17px; bottom: 11px; color: #826f83; font: 500 6px/1 var(--mono); letter-spacing: .05em; }
.visual-web::after { content: "RESPONSIVE / GOTOWE"; }
.visual-ads::after { content: "KAMPANIA / AKTYWNA"; }
.visual-google::after { content: "KALISZ / MAPA"; }
.visual-web::before {
  inset: 15px;
  border-radius: 12px;
  background: #fffdfa;
  box-shadow: 0 8px 18px rgba(59,22,72,.09);
}
.visual-web i {
  top: 26px;
  left: 28px;
  width: 82px;
  height: 9px;
  border-radius: 999px;
  background: var(--plum);
  transform: none;
}
.visual-web b {
  bottom: 34px;
  left: 28px;
  width: 93px;
  height: 42px;
  border-radius: 9px;
  background: var(--lilac);
  transform: none;
}
.visual-web em {
  top: 58px;
  right: 26px;
  width: 42px;
  border-radius: 11px;
  background: var(--butter);
  box-shadow: -10px 38px 0 -8px var(--coral);
}
.visual-ads::before {
  inset: 15px;
  border-radius: 12px;
  background: #fffdfa;
  box-shadow: 0 8px 18px rgba(59,22,72,.09);
}
.visual-ads i {
  top: auto;
  right: auto;
  bottom: 27px;
  left: 29px;
  width: 18px;
  height: 42px;
  border-radius: 6px 6px 2px 2px;
  background: var(--coral);
  transform: none;
  box-shadow: 27px -24px 0 var(--butter), 54px -7px 0 var(--violet);
}
.visual-ads b {
  top: 26px;
  right: 24px;
  left: auto;
  width: 45px;
  border: 11px solid var(--violet);
  border-right-color: var(--butter);
  transform: none;
}
.visual-ads em {
  right: 29px;
  bottom: 25px;
  width: 40px;
  border-radius: 11px;
  background: #f1e8ff;
  box-shadow: none;
}
.visual-google::before {
  inset: 15px;
  border-radius: 12px;
  background: #fffdfa;
  transform: none;
  box-shadow: 0 8px 18px rgba(59,22,72,.09);
}
.visual-google i {
  top: 28px;
  left: 27px;
  width: 135px;
  height: 25px;
  border: 1px solid #ddd1de;
  border-radius: 999px;
  background: #faf6f2;
  transform: none;
}
.visual-google b {
  top: 69px;
  left: 31px;
  width: 31px;
  height: 39px;
  border-radius: 50% 50% 50% 0;
  background: var(--butter);
  transform: rotate(-45deg);
}
.visual-google b::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--paper);
}
.visual-google em {
  right: 30px;
  bottom: 33px;
  width: 72px;
  height: 10px;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 18px 0 -2px var(--coral);
}

/* An honest before / after using Digitium itself */
.case-study {
  position: relative;
  overflow: hidden;
  padding-block: 128px;
  background:
    radial-gradient(circle at 6% 68%, rgba(255,209,102,.2), transparent 25rem),
    radial-gradient(circle at 92% 15%, rgba(118,83,199,.18), transparent 28rem),
    linear-gradient(180deg, rgba(255,248,239,.3), rgba(247,236,223,.62));
}
.case-study::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -34%;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid rgba(118,83,199,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(233,222,255,.2), 0 0 0 116px rgba(255,194,169,.09);
  pointer-events: none;
}
.case-study > .section-wrap { position: relative; z-index: 1; }
.case-head {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 35px;
  margin-bottom: 68px;
}
.case-head h2 { max-width: 970px; margin: 0; }
.case-head h2 em { color: var(--violet); }
.case-head > div > p { max-width: 560px; margin: 22px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.62; }
.case-layout {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr) minmax(190px,.55fr);
  gap: 14px;
  align-items: stretch;
}
.case-screen {
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(59,22,72,.14);
  border-radius: 24px;
  box-shadow: 0 24px 54px rgba(59,22,72,.1), inset 0 1px rgba(255,255,255,.8);
  transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease;
}
.case-browser {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(59,22,72,.1);
  background: rgba(255,253,250,.75);
}
.case-browser > span { width: 7px; height: 7px; border-radius: 50%; background: #cdbfd0; }
.case-browser > span:first-child { background: var(--coral); }
.case-browser > span:nth-child(2) { background: var(--butter); }
.case-browser > span:nth-child(3) { background: var(--mint); }
.case-browser > i { margin-left: auto; color: #806c80; font: 500 9px/1 var(--mono); font-style: normal; }
.case-page { position: relative; min-height: 368px; overflow: hidden; padding: 27px; }
.case-page > small { position: relative; z-index: 2; color: #7b687e; font: 500 10px/1 var(--mono); letter-spacing: .08em; }
.case-before { background: #e9e4df; transform: rotate(-1deg); }
.case-before .case-page { background: linear-gradient(145deg,#ebe7e2,#dcd7d2); }
.old-title { width: 76%; height: 47px; margin-top: 38px; border-radius: 9px; background: #8e8988; box-shadow: 0 60px 0 -12px #aaa5a2; }
.old-lines { display: grid; gap: 10px; width: 80%; margin-top: 80px; }
.old-lines i { height: 7px; border-radius: 99px; background: rgba(101,96,95,.28); }
.old-lines i:nth-child(2) { width: 92%; }
.old-lines i:nth-child(3) { width: 69%; }
.old-lines i:nth-child(4) { width: 82%; }
.old-boxes { position: absolute; right: 25px; bottom: 24px; left: 25px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.old-boxes span { height: 48px; border: 1px solid rgba(91,84,83,.18); border-radius: 8px; background: rgba(255,255,255,.29); }
.case-after {
  color: var(--white);
  border-color: rgba(255,255,255,.2);
  background: var(--plum);
  box-shadow: 0 30px 68px rgba(59,22,72,.22), inset 0 1px rgba(255,255,255,.16);
  transform: translateY(-10px) rotate(.8deg);
}
.case-after .case-browser { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); }
.case-after .case-browser > i { color: rgba(255,255,255,.65); }
.case-after .case-page {
  background:
    radial-gradient(circle at 83% 26%, rgba(255,142,120,.35), transparent 13rem),
    radial-gradient(circle at 22% 92%, rgba(118,83,199,.62), transparent 16rem),
    #3b1648;
}
.case-after .case-page > small { color: var(--butter); }
.case-after h3 { position: relative; z-index: 2; max-width: 390px; margin: 42px 0 0; font: 700 clamp(44px,4vw,66px)/.91 var(--sans); letter-spacing: -.064em; }
.case-after h3 em { color: var(--butter); }
.new-button { position: relative; z-index: 2; width: max-content; margin-top: 30px; padding: 12px 16px; color: var(--ink); border-radius: 999px; background: var(--butter); font-size: 11px; font-weight: 700; box-shadow: 0 10px 25px rgba(10,2,13,.18); }
.new-orb { position: absolute; right: -62px; bottom: -68px; width: 250px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg,var(--coral),var(--violet)); box-shadow: 0 0 0 30px rgba(255,209,102,.12); }
.new-orb i { position: absolute; top: 39px; left: 39px; width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--butter); }
.new-orb b { position: absolute; top: 82px; left: 94px; width: 94px; height: 28px; border-radius: 999px; background: var(--lilac); transform: rotate(-31deg); }
.case-summary { display: grid; gap: 9px; }
.case-summary > span { min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid rgba(59,22,72,.13); border-radius: 19px; background: rgba(255,253,250,.62); box-shadow: inset 0 1px rgba(255,255,255,.85); }
.case-summary > span:nth-child(2) { background: rgba(255,232,219,.74); }
.case-summary > span:nth-child(3) { background: rgba(235,225,255,.76); }
.case-summary small { color: #68506b; font: 500 10px/1 var(--mono); }
.case-summary b { max-width: 160px; margin-top: 28px; font: 700 clamp(17px,1.45vw,22px)/1.08 var(--sans); letter-spacing: -.045em; }

/* Who we can build for */
.audience {
  position: relative;
  overflow: hidden;
  padding-block: 138px;
  background: var(--paper);
}
.audience-glow {
  position: absolute;
  top: 5%;
  right: -18%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,83,199,.17), rgba(255,142,120,.09) 44%, transparent 70%);
  pointer-events: none;
}
.audience > .section-wrap { position: relative; z-index: 1; }
.audience-head {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 35px;
  margin-bottom: 72px;
}
.audience-head h2 { max-width: 940px; margin: 0; }
.audience-head h2 em { color: var(--violet); }
.audience-head > div > p { max-width: 520px; margin: 22px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.62; }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.audience-card {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,253,250,.74);
  box-shadow: 0 16px 40px rgba(59,22,72,.055), inset 0 1px rgba(255,255,255,.9);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.audience-card:nth-child(1) { background: linear-gradient(145deg, #eee5ff, #fffaf3); }
.audience-card:nth-child(2) { background: linear-gradient(145deg, #f2ede4, #fffdfa); }
.audience-card:nth-child(3) { background: linear-gradient(145deg, #e6fff0, #f8f0ff); }
.audience-card:nth-child(4) { background: linear-gradient(145deg, #ffe7dd, #fff8e8); }
.audience-card:nth-child(5) { background: linear-gradient(145deg, #fff0be, #f6fff8); }
.audience-card:nth-child(6) { background: linear-gradient(145deg, #ece1ff, #ffe1d8); }
.audience-wide,
.audience-any { grid-column: span 2; }
.audience-no { color: #7d697e; font: 500 10px/1 var(--mono); }
.audience-card h3 { max-width: 430px; margin: auto 0 0; font: 700 clamp(26px,2.3vw,36px)/1 var(--sans); letter-spacing: -.052em; }
.audience-card p { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
.audience-widget { position: absolute; top: 31px; right: 25px; width: 170px; height: 150px; }
.audience-widget i,
.audience-widget b,
.audience-widget em,
.audience-widget > span { position: absolute; display: block; }
.widget-build { border-radius: 18px; background: linear-gradient(150deg,#f1e5ff,#ffe8d8); }
.widget-build i { right: 18px; bottom: 0; width: 54px; height: 105px; background: repeating-linear-gradient(90deg,var(--violet) 0 10px,#c9b4f4 10px 14px); }
.widget-build b { right: 67px; bottom: 0; width: 45px; height: 78px; background: repeating-linear-gradient(90deg,var(--coral) 0 10px,#ffc4b6 10px 14px); }
.widget-build em { top: 18px; left: 18px; width: 43px; aspect-ratio: 1; border-radius: 50%; background: var(--butter); }
.widget-build > span { bottom: 16px; left: 18px; width: 52px; height: 7px; border-radius: 999px; background: var(--plum); }
.widget-law { border: 1px solid #bca16f; border-radius: 50%; color: #e5c27e; background: #26332d; }
.widget-law i { inset: 15px; display: grid; place-items: center; font: 400 84px/1 var(--serif); font-style: italic; }
.widget-law b { top: 18px; left: 50%; width: 1px; height: 114px; background: rgba(229,194,126,.4); }
.widget-law em { right: 27px; bottom: 24px; width: 34px; height: 1px; background: #e5c27e; }
.widget-local { border-radius: 22px; background: linear-gradient(145deg,#4338e8,#7554df); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.widget-local i { top: 19px; right: 24px; width: 67px; height: 113px; border: 5px solid #291b45; border-radius: 17px; background: #fffdfa; }
.widget-local b { top: 36px; right: 37px; width: 41px; height: 7px; border-radius: 999px; background: var(--coral); box-shadow: 0 18px 0 var(--lilac),0 36px 0 var(--butter); }
.widget-local em { left: 19px; bottom: 19px; width: 51px; aspect-ratio: 1; border-radius: 50%; background: var(--mint); }
.widget-brand { border-radius: 22px; background: linear-gradient(145deg,#fff0e5,#eee4ff); }
.widget-brand i { top: 25px; left: 23px; width: 62px; height: 88px; border-radius: 13px; background: var(--coral); transform: rotate(-12deg); }
.widget-brand b { top: 37px; right: 26px; width: 64px; height: 80px; border-radius: 50% 50% 15px 15px; background: var(--violet); transform: rotate(11deg); }
.widget-brand em { top: 17px; right: 66px; width: 37px; aspect-ratio:1; border-radius:50%; background:var(--butter); }
.widget-brand > span { left: 36px; bottom: 22px; width: 97px; height: 9px; border-radius:999px; background:var(--plum); }
.widget-health { border-radius: 50%; background: var(--mint); }
.widget-health i { top: 33px; left: 72px; width: 26px; height: 84px; border-radius: 8px; background: var(--violet); }
.widget-health b { top: 62px; left: 43px; width: 84px; height: 26px; border-radius: 8px; background: var(--violet); }
.widget-health em { right: 14px; bottom: 12px; width: 37px; aspect-ratio:1; border-radius:50%; background:var(--coral); }
.widget-any { display:grid; place-items:center; color:var(--plum); border:1px solid rgba(59,22,72,.15); border-radius:50%; background:radial-gradient(circle,var(--butter),#ffead0 68%); font:400 100px/1 var(--serif); }

/* Intro */
.intro {
  position: relative;
  overflow: hidden;
  padding-top: 132px;
  padding-bottom: 145px;
}
.intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(42px, 9vw, 145px);
  align-items: end;
  margin-top: 31px;
}
.intro h2 em { color: var(--coral); }
.intro-copy p {
  margin-bottom: 24px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
}
.intro-copy a {
  display: inline-flex;
  gap: 9px;
  padding-bottom: 5px;
  color: var(--ink);
  border-bottom: 1px solid rgba(59, 22, 72, 0.3);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.intro-copy a span { color: var(--coral); font-size: 17px; }
.intro-word {
  position: absolute;
  z-index: 0;
  right: var(--gutter);
  bottom: -0.16em;
  color: rgba(118, 83, 199, 0.055);
  font: 800 clamp(120px, 22vw, 340px) / 0.8 var(--sans);
  letter-spacing: -0.1em;
  user-select: none;
}

/* What we do — large, confident chapters */
.offer {
  position: relative;
  overflow: hidden;
  padding-top: 128px;
  background: var(--paper);
}
.offer-head {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 35px;
  padding-bottom: 82px;
}
.offer-head h2 { margin: 0; }
.offer-head h2 em { color: var(--coral); }
.offer-head > div > p {
  max-width: 510px;
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}
.offer-row {
  position: relative;
  overflow: hidden;
  min-height: 370px;
  border-top: 1px solid rgba(59, 22, 72, 0.14);
}
.offer-inner {
  position: relative;
  min-height: 370px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 25px;
}
.offer-number {
  position: relative;
  z-index: 2;
  align-self: start;
  padding-top: 42px;
  font: 500 10px / 1 var(--mono);
}
.offer-copy { position: relative; z-index: 2; }
.offer-copy small {
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.07em;
}
.offer-copy h3 {
  margin: 18px 0 0;
  font: 700 clamp(57px, 7.2vw, 116px) / 0.82 var(--sans);
  letter-spacing: -0.085em;
}
.offer-copy h3 em { font-size: 1.02em; }
.offer-copy p {
  max-width: 470px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.offer-inner > a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.offer-inner > a span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
  color: var(--paper);
  font-size: 17px;
}
.offer-art-word {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: -0.2em;
  color: rgba(59, 22, 72, 0.055);
  font: 400 clamp(130px, 17vw, 270px) / 0.75 var(--serif);
  letter-spacing: -0.055em;
  pointer-events: none;
  user-select: none;
}
.offer-web {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 35%, rgba(255, 142, 120, 0.4), transparent 22rem),
    #f8e5d9;
}
.offer-web .offer-copy h3 em { color: #bc5060; }
.offer-ads {
  color: var(--white);
  background:
    radial-gradient(circle at 80% 30%, rgba(118, 83, 199, 0.55), transparent 25rem),
    #351341;
}
.offer-ads .offer-copy h3 em { color: var(--butter); }
.offer-ads .offer-copy p { color: #dfd2e5; }
.offer-ads .offer-art-word { color: rgba(255, 255, 255, 0.06); }
.offer-ads .offer-inner > a span { color: var(--plum); background: var(--butter); }
.offer-google {
  color: var(--ink);
  border-bottom: 1px solid rgba(59, 22, 72, 0.14);
  background:
    radial-gradient(circle at 84% 15%, rgba(255, 142, 120, 0.45), transparent 20rem),
    #ffd36e;
}
.offer-google .offer-copy h3 em { color: #7349b8; }
.offer-google .offer-art-word { color: rgba(59, 22, 72, 0.075); }

/* Typographic breath between chapters */
.type-break {
  position: relative;
  overflow: hidden;
  padding: 110px var(--gutter) 105px;
  text-align: center;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 142, 120, 0.25), transparent 18rem),
    radial-gradient(circle at 87% 75%, rgba(118, 83, 199, 0.2), transparent 20rem),
    var(--paper);
}
.type-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.08em 0.18em;
  font-size: clamp(62px, 10.5vw, 170px);
  line-height: 0.84;
  letter-spacing: -0.075em;
}
.type-line span { font: 800 1em / 0.84 var(--sans); }
.type-line em { color: var(--coral); font: 400 1.05em / 0.84 var(--serif); }
.type-line b {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--violet);
  font: 800 0.94em / 0.84 var(--sans);
}
.type-break > p {
  margin: 34px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

/* Website explanation */
.website-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 128px;
  background: linear-gradient(120deg, #e8dcff, #f4eaff 57%, #ffe1d5);
}
.section-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
}
.glow-coral { top: -30%; right: -10%; width: 48%; aspect-ratio: 1; background: rgba(255, 142, 120, 0.45); }
.glow-violet { bottom: -38%; left: 18%; width: 42%; aspect-ratio: 1; background: rgba(118, 83, 199, 0.25); }
.website-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 8vw, 132px);
  align-items: center;
}
.website-copy h2 { margin-top: 25px; }
.website-copy h2 em { color: var(--violet); }
.website-copy > p {
  max-width: 470px;
  margin: 26px 0 0;
  color: #624f6c;
  font-size: 16px;
  line-height: 1.68;
}
.check-list { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.check-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 3px 11px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(59, 22, 72, 0.14);
}
.check-list li > span {
  grid-row: span 2;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: var(--violet);
  font: 500 8px / 1 var(--mono);
}
.check-list b { font: 700 14px / 1.2 var(--sans); }
.check-list small { color: #745f7a; font-size: 12px; line-height: 1.4; }
.website-demo {
  position: relative;
  padding: 12px 12px 0;
  border: 1px solid rgba(59, 22, 72, 0.14);
  border-radius: 24px;
  background: rgba(198, 180, 238, 0.78);
  box-shadow: 0 31px 58px rgba(75, 40, 99, 0.18), inset 0 1px rgba(255, 255, 255, 0.55);
  transform: rotate(1deg);
}
.browser-bar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 4px;
}
.browser-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9683b5;
}
.browser-bar i {
  width: 46%;
  margin-left: auto;
  padding: 5px 10px;
  color: #7c6a8f;
  border-radius: 999px;
  background: rgba(239, 231, 255, 0.82);
  font: 500 7px / 1 var(--mono);
  text-align: center;
  font-style: normal;
}
.demo-page { overflow: hidden; border-radius: 13px 13px 0 0; background: var(--paper); }
.demo-nav {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 21px;
  border-bottom: 1px solid rgba(59, 22, 72, 0.12);
}
.demo-nav b { font: 800 18px / 1 var(--sans); letter-spacing: -0.07em; }
.demo-nav > span { color: #745e79; font-size: 9px; }
.demo-nav i { width: 27px; height: 27px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--plum); font-style: normal; }
.demo-main {
  min-height: 340px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  padding: 37px 31px 22px;
}
.demo-copy small { color: #9c6f6b; font: 500 8px / 1.2 var(--mono); letter-spacing: 0.04em; }
.demo-copy h3 { margin: 16px 0 25px; font: 700 clamp(27px, 2.65vw, 43px) / 0.94 var(--sans); letter-spacing: -0.075em; }
.demo-copy h3 em { color: var(--coral); }
.demo-cta { display: inline-block; padding: 10px 12px; color: var(--white); border-radius: 999px; background: var(--plum); font-size: 9px; font-weight: 700; }
.demo-art { position: relative; width: min(100%, 285px); aspect-ratio: 1; margin-inline: auto; }
.demo-art::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--lilac); }
.demo-art > span { position: absolute; top: 15%; right: 7%; width: 43%; height: 58%; border-radius: 90px 90px 14px 14px; background: var(--coral); transform: rotate(18deg); }
.demo-art > i { position: absolute; bottom: 11%; left: 5%; width: 58%; height: 32%; border-radius: 55% 55% 17px 17px; background: var(--violet); transform: rotate(-18deg); }
.demo-art > b { position: absolute; top: 12%; left: 17%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: var(--butter); }
.demo-art > em { position: absolute; right: 21%; bottom: 18%; width: 26%; aspect-ratio: 1; border: 1px solid rgba(59, 22, 72, 0.35); border-radius: 50%; }
.demo-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 15px 21px;
  color: #725f75;
  border-top: 1px solid rgba(59, 22, 72, 0.12);
  font: 500 8px / 1.3 var(--mono);
}
.website-demo > p { margin: 11px 3px 13px; color: #62506c; font-size: 10px; }

/* Full template concepts */
.concepts {
  position: relative;
  overflow: hidden;
  padding-block: 140px;
  background:
    radial-gradient(circle at 96% 18%, rgba(255, 209, 102, 0.17), transparent 25rem),
    radial-gradient(circle at 8% 62%, rgba(118, 83, 199, 0.1), transparent 30rem),
    var(--paper);
}
.concept-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.glow-one { top: 7%; right: -18%; width: 52%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 142, 120, 0.25), transparent 67%); }
.glow-two { top: 46%; left: -20%; width: 58%; aspect-ratio: 1; background: radial-gradient(circle, rgba(118, 83, 199, 0.17), transparent 68%); }
.concepts > .section-wrap { position: relative; z-index: 1; }
.concepts-head {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 35px;
  margin-bottom: 88px;
}
.concepts-head h2 { margin: 0; }
.concepts-head h2 em { color: var(--coral); }
.concepts-head > div > p {
  max-width: 590px;
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.68;
}
.concept {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(270px, 0.62fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: center;
  padding: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255, 253, 250, 0.72);
  box-shadow: 0 25px 60px rgba(59, 22, 72, 0.08);
}
.concept + .concept { margin-top: 32px; }
.concept-legal { grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1.38fr); background: rgba(255, 253, 250, 0.72); }
.concept-local { background: rgba(255, 253, 250, 0.72); }
.concept-preview {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 22px 45px rgba(28, 15, 32, 0.18);
}
.concept-note > span { color: #8e778b; font: 500 9px / 1 var(--mono); letter-spacing: 0.06em; }
.concept-note h3 { margin: 21px 0 0; font: 700 clamp(31px, 3.15vw, 48px) / 0.98 var(--sans); letter-spacing: -0.068em; }
.concept-note h3 em { color: var(--coral); }
.concept-note > p { margin: 20px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.concept-note ul { display: grid; gap: 9px; margin: 23px 0 0; padding: 17px 0 0; border-top: 1px solid var(--line); list-style: none; }
.concept-note li { display: flex; align-items: center; gap: 9px; color: #6f5b72; font-size: 12px; }
.concept-note li::before { content: "↳"; color: var(--coral); }
.concept-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.concept-tags span { padding: 7px 9px; color: #735f75; border: 1px solid var(--line); border-radius: 999px; font: 500 8px / 1 var(--mono); text-transform: uppercase; }
.preview-chrome {
  height: 33px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
  color: #8d95a4;
  background: #202837;
}
.preview-chrome > span { width: 7px; height: 7px; border-radius: 50%; background: #596273; }
.preview-chrome i { margin-left: auto; font: 500 7px / 1 var(--mono); font-style: normal; }

/* Developer concept */
.dev-site { color: #ecf0ee; background: #141d29; }
.dev-nav {
  height: 59px;
  display: flex;
  align-items: center;
  padding-inline: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.dev-nav b { font: 800 16px / 1 var(--sans); letter-spacing: -0.06em; }
.dev-nav b span { color: #c9ff75; }
.dev-nav i { margin-left: auto; color: #aab4c3; font: 500 7px / 1 var(--mono); font-style: normal; }
.dev-nav em { display: none; margin-left: auto; color: #d7dfdb; font: 500 8px / 1 var(--mono); font-style: normal; }
.dev-hero { position: relative; min-height: 390px; display: grid; grid-template-columns: 0.85fr 1.15fr; overflow: hidden; }
.dev-words { position: relative; z-index: 3; align-self: center; padding: 36px 0 39px 31px; }
.dev-words small { color: #c9ff75; font: 500 7px / 1 var(--mono); letter-spacing: 0.06em; }
.dev-words h3 { margin: 15px 0 15px; font: 800 clamp(30px, 3.1vw, 47px) / 0.88 var(--sans); letter-spacing: -0.075em; }
.dev-words h3 em { color: #c9ff75; }
.dev-words p { max-width: 250px; margin: 0 0 24px; color: #aeb8c1; font-size: 11px; line-height: 1.5; }
.preview-button { display: inline-flex; padding: 11px 13px; color: #151d27; border-radius: 999px; background: #c9ff75; font-size: 8px; font-weight: 700; }
.dev-building { position: relative; overflow: hidden; background: linear-gradient(150deg, #c6a37f, #ead5bd 58%, #f0e7d7); }
.dev-building::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(31, 38, 48, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 38, 48, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dev-sun { position: absolute; top: 28px; right: 30px; width: 82px; aspect-ratio: 1; border-radius: 50%; background: #ffd06b; }
.dev-building > span { position: absolute; bottom: 0; display: block; box-shadow: -12px 0 rgba(31, 38, 48, 0.12); }
.building-one { right: 30%; width: 32%; height: 72%; background: repeating-linear-gradient(90deg, #b55c48 0 12px, #efc1a3 12px 16px); }
.building-two { right: -4%; width: 38%; height: 88%; background: repeating-linear-gradient(90deg, #e9ded0 0 13px, #675e57 13px 17px); }
.building-three { left: 0; width: 22%; height: 43%; background: repeating-linear-gradient(90deg, #344250 0 11px, #b7c2c2 11px 15px); }
.availability {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  width: 126px;
  padding: 13px;
  color: #17202a;
  border-radius: 13px;
  background: rgba(238, 241, 233, 0.94);
  box-shadow: 0 12px 24px rgba(10, 15, 22, 0.2);
}
.availability small { display: block; font: 500 6px / 1 var(--mono); }
.availability strong { display: inline-block; margin: 7px 4px 0 0; font: 700 36px / 0.9 var(--sans); letter-spacing: -0.08em; }
.availability > span { font-size: 9px; }
.availability i { display: block; margin-top: 8px; color: #4e594f; font: 500 6px / 1 var(--mono); font-style: normal; }
.dev-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.13); }
.dev-stats > span { padding: 15px 20px; border-right: 1px solid rgba(255, 255, 255, 0.13); }
.dev-stats > span:last-child { border-right: 0; }
.dev-stats small { display: block; color: #7f8c99; font: 500 6px / 1 var(--mono); }
.dev-stats b { display: block; margin-top: 6px; font: 700 12px / 1 var(--sans); }
.dev-apartments { display: grid; grid-template-columns: 1fr 1fr auto; border-top: 1px solid rgba(255, 255, 255, 0.13); }
.dev-apartments > span { padding: 13px 17px; border-right: 1px solid rgba(255, 255, 255, 0.13); }
.dev-apartments small { display: block; color: #c9ff75; font: 500 6px / 1 var(--mono); }
.dev-apartments b { display: block; margin-top: 5px; font-size: 9px; }
.dev-apartments i { display: block; margin-top: 4px; color: #8f9ba7; font-size: 7px; font-style: normal; }
.dev-apartments .dev-list-button { display: flex; align-items: center; padding: 0 18px; color: #151d27; border: 0; background: #c9ff75; font-size: 8px; font-weight: 700; }

/* Legal concept */
.legal-preview { min-height: 565px; color: #eee5d3; background: #1e2a25; }
.legal-monogram {
  position: absolute;
  z-index: 0;
  right: -0.02em;
  bottom: -0.24em;
  color: rgba(195, 163, 106, 0.08);
  font: 400 430px / 0.75 var(--serif);
}
.legal-site { position: relative; z-index: 1; min-height: 565px; display: grid; grid-template-columns: 88px 1fr; }
.legal-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 17px;
  border-right: 1px solid rgba(221, 190, 133, 0.22);
}
.legal-rail b { font: 700 11px / 0.95 var(--sans); letter-spacing: -0.04em; }
.legal-rail b em { display: block; margin-top: 5px; color: #d5b57a; font: 400 14px / 1 var(--serif); }
.legal-rail > span { color: #ad9d82; font: 500 7px / 1 var(--mono); writing-mode: vertical-rl; transform: rotate(180deg); }
.legal-main { padding: 23px 27px 0; }
.legal-top { display: flex; justify-content: space-between; gap: 15px; color: #c9ac75; font: 500 7px / 1 var(--mono); }
.legal-top i { color: #a89e8f; font-style: normal; }
.legal-content { position: relative; padding: 66px 0 40px; }
.legal-content::before { content: ""; position: absolute; top: 36px; left: 0; width: 52px; height: 1px; background: #c9ac75; }
.legal-content h3 { max-width: 590px; margin: 0; font: 400 clamp(39px, 4.2vw, 65px) / 0.92 var(--serif); letter-spacing: -0.035em; }
.legal-content h3 em { color: #d6b878; }
.legal-content > p { max-width: 330px; margin: 21px 0 26px; color: #bcb3a5; font-size: 11px; line-height: 1.55; }
.legal-cta { display: inline-block; padding: 12px 14px; color: #1e2924; border: 1px solid #d5b577; background: #d5b577; font: 500 7px / 1 var(--mono); }
.reply-badge {
  position: absolute;
  right: 5%;
  bottom: 34px;
  width: 112px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7a96e;
  border-radius: 50%;
  transform: rotate(8deg);
}
.reply-badge small { font: 500 6px / 1 var(--mono); }
.reply-badge b { margin-top: 6px; color: #d7b878; font: 400 22px / 1 var(--serif); }
.reply-badge i { margin-top: 3px; color: #aaa091; font-size: 7px; font-style: normal; }
.legal-services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(221, 190, 133, 0.24); }
.legal-services span { padding: 17px 10px 17px 0; color: #c9c0b1; font-size: 9px; }
.legal-services b { margin-right: 8px; color: #c9ac75; font: 500 7px / 1 var(--mono); }
.legal-extra { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(221, 190, 133, 0.24); }
.legal-extra > span { padding: 14px 10px 14px 0; }
.legal-extra small { display: block; color: #9f927e; font: 500 6px / 1 var(--mono); }
.legal-extra b { display: block; margin-top: 5px; color: #dfd4c1; font: 500 9px / 1.2 var(--sans); }
.concept-legal .concept-note h3 em { color: #8b3446; }

/* Local service concept */
.local-preview {
  min-height: 570px;
  padding: 34px;
  background:
    radial-gradient(circle at 75% 19%, rgba(202, 255, 218, 0.94), transparent 14rem),
    linear-gradient(135deg, #3d35e9, #7450df 64%, #ff8d76);
}
.local-desktop {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 17px;
  background: #fbf8f1;
  box-shadow: 0 22px 45px rgba(35, 22, 78, 0.28);
}
.local-nav { height: 57px; display: flex; align-items: center; padding-inline: 21px; border-bottom: 1px solid #e7e0d8; }
.local-nav b { color: #3030d8; font: 800 16px / 1 var(--sans); letter-spacing: -0.07em; }
.local-nav b span { color: var(--coral); }
.local-nav i { margin-left: auto; color: #6d6572; font: 500 7px / 1 var(--mono); font-style: normal; }
.local-main { position: relative; z-index: 2; width: 57%; padding: 78px 0 40px 37px; }
.local-main > small { color: #f06f5e; font: 500 7px / 1 var(--mono); }
.local-main h3 { margin: 15px 0 17px; color: #2d1a3e; font: 800 clamp(35px, 4.1vw, 60px) / 0.86 var(--sans); letter-spacing: -0.08em; }
.local-main h3 em { color: #3732dd; }
.local-main > p { max-width: 310px; color: #6c5a70; font-size: 11px; line-height: 1.55; }
.local-rating { margin-top: 28px; color: #2e1b3e; font-size: 11px; font-weight: 700; }
.local-rating b { color: #ff8d76; letter-spacing: 0.08em; }
.local-rating span { color: #7c6d7d; font-size: 8px; font-weight: 500; }
.local-services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }
.local-services span { padding: 7px 8px; color: #564a65; border: 1px solid #ddd4df; border-radius: 999px; font-size: 7px; }
.local-orb { position: absolute; right: -8%; bottom: -18%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #caffda, #68d7b7); box-shadow: -38px -30px 0 rgba(255, 142, 120, 0.88), -78px 15px 0 rgba(255, 209, 102, 0.78); }
.booking-phone {
  position: absolute;
  z-index: 4;
  top: 62px;
  right: 52px;
  width: 216px;
  padding: 11px 14px 15px;
  color: #2e1a3d;
  border: 5px solid #281c43;
  border-radius: 28px;
  background: #fffdf9;
  box-shadow: 0 25px 44px rgba(20, 13, 48, 0.35);
}
.phone-top { display: flex; justify-content: space-between; margin-bottom: 20px; font: 700 7px / 1 var(--sans); }
.phone-top i { color: #54486a; font-style: normal; }
.booking-phone > small { color: #7e6c82; font: 500 6px / 1 var(--mono); }
.booking-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.booking-chips span { padding: 6px 7px; border: 1px solid #ded3e6; border-radius: 999px; font-size: 7px; }
.booking-chips span:first-child { color: #fff; border-color: #3932df; background: #3932df; }
.booking-slot { margin-top: 16px; padding: 12px; border-radius: 13px; background: #e8ddff; }
.booking-slot small { display: block; color: #74617f; font: 500 6px / 1 var(--mono); }
.booking-slot strong { display: inline-block; margin-top: 10px; font: 700 22px / 1 var(--sans); letter-spacing: -0.06em; }
.booking-slot b { float: right; margin-top: 12px; color: #3932df; font-size: 14px; }
.booking-slot > span { display: block; margin-top: 7px; color: #74677a; font-size: 7px; }
.booking-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 11px 12px; color: #fff; border-radius: 999px; background: #3932df; font-size: 8px; font-weight: 700; }
.booking-cta span { font-size: 13px; }
.concept-local .concept-note h3 em { color: #3d35df; }
.concepts-foot { display: flex; align-items: center; gap: 10px; margin: 35px 0 0; color: #746176; font-size: 12px; }
.concepts-foot > span { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 142, 120, 0.14); }

/* One continuous dark chapter: visibility + process */
.flow {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 142, 120, 0.28), transparent 28rem),
    radial-gradient(circle at 12% 74%, rgba(118, 83, 199, 0.35), transparent 34rem),
    linear-gradient(180deg, #3d1749, #32113e);
  border-top: 1px solid rgba(59,22,72,.12);
}
.flow::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 110px;
  background: linear-gradient(180deg, var(--paper), rgba(61, 23, 73, 0));
  pointer-events: none;
  display: none;
}
.flow > .section-wrap { position: relative; z-index: 1; }
.flow-visibility {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: center;
  padding-top: 135px;
  padding-bottom: 130px;
}
.flow h2 { margin-top: 25px; }
.flow h2 em { color: var(--butter); }
.flow .visibility-copy > p:not(.eyebrow) {
  max-width: 500px;
  margin: 24px 0 0;
  color: #e1d6e6;
  font-size: 15px;
  line-height: 1.66;
}
.flow-process { padding-top: 112px; padding-bottom: 135px; border-top: 1px solid rgba(255, 255, 255, 0.17); }

/* Visibility / chart */
.visibility {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 91% 17%, rgba(255, 142, 120, 0.28), transparent 27rem),
    radial-gradient(circle at 17% 89%, rgba(118, 83, 199, 0.34), transparent 29rem),
    #351341;
}
.visibility-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: center;
  padding-top: 135px;
  padding-bottom: 135px;
}
.visibility h2 { margin-top: 25px; }
.visibility h2 em { color: var(--butter); }
.visibility-copy > p:not(.eyebrow) {
  max-width: 510px;
  margin: 26px 0 0;
  color: #e4d9ea;
  font-size: 16px;
  line-height: 1.67;
}
.honest-note {
  display: grid;
  gap: 8px;
  margin-top: 29px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.honest-note b { color: var(--butter); font-size: 12px; }
.honest-note span { max-width: 470px; color: #c8b8d1; font-size: 11px; line-height: 1.55; }
.chart-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 31px 58px rgba(10, 2, 13, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(11px);
}
.chart-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -28%;
  width: 34%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: rotate(16deg);
  pointer-events: none;
}
.chart-card > * { position: relative; z-index: 1; }
.chart-head { display: flex; justify-content: space-between; gap: 20px; }
.chart-head small { color: #d0bfda; font: 500 10px / 1 var(--mono); letter-spacing: .06em; }
.chart-head strong { display: block; margin-top: 9px; font: 700 clamp(20px, 2vw, 28px) / 1.15 var(--sans); letter-spacing: -0.045em; }
.chart-live { height: max-content; display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; padding: 8px 10px; color: #e8dcec; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.06); font: 500 9px/1 var(--mono); letter-spacing: .05em; }
.chart-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 5px rgba(255,209,102,.1); }
.chart-wrap { position: relative; margin-top: 29px; overflow: hidden; }
.chart-wrap svg { width: 100%; height: auto; overflow: hidden; }
.grid-line { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; }
.chart-bars rect { fill: url(#bar-gradient); }
.chart-area { fill: url(#chart-area); }
.chart-line { fill: none; stroke: var(--butter); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 9px rgba(255,209,102,.55)); }
.chart-point { fill: var(--butter); stroke: #351341; stroke-width: 4; }
.p2 { fill: var(--coral); }
.p3 { fill: var(--white); }
.chart-label {
  position: absolute;
  padding: 7px 9px;
  color: var(--plum);
  border-radius: 8px;
  background: var(--butter);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);
  font: 500 10px / 1 var(--mono);
  white-space: nowrap;
}
.label-a { bottom: 16%; left: 17%; }
.label-b { top: 37%; left: 60%; color: var(--plum); background: var(--coral); }
.label-c { top: 4px; right: 4px; color: var(--plum); background: var(--white); }
.chart-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.chart-legend span { display: flex; align-items: center; gap: 7px; color: #e6dce9; font-size: 11px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--butter); }
.chart-legend span:nth-child(2) i { background: var(--coral); }
.chart-legend span:nth-child(3) i { background: var(--lilac); }
.chart-card > p { margin: 16px 0 0; color: #cbbad3; font-size: 11px; line-height: 1.5; }

/* Process */
.process {
  position: relative;
  overflow: hidden;
  padding-block: 135px;
  color: var(--white);
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 142, 120, 0.29), transparent 26rem),
    radial-gradient(circle at 14% 110%, rgba(255, 209, 102, 0.14), transparent 29rem),
    #583264;
}
.process-head { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 35px; }
.process-head h2 { margin: 0; }
.process-head h2 em { color: var(--butter); }
.process-head > div > p { max-width: 520px; margin: 23px 0 0; color: #e1d6e6; font-size: 15px; line-height: 1.62; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 76px; }
.steps::before { content: ""; position: absolute; z-index: 0; top: 39px; right: 6%; left: 6%; height: 1px; background: linear-gradient(90deg, rgba(202,180,255,.7), rgba(255,142,120,.8), rgba(255,209,102,.8)); }
.step {
  position: relative;
  z-index: 1;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  transition: transform 0.25s ease, background 0.25s ease;
}
.step > span { width: 33px; height: 33px; display: grid; place-items: center; color: #efe5f2; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; font: 500 10px / 1 var(--mono); }
.step h3 { margin: auto 0 18px; font: 700 clamp(27px, 2.45vw, 38px) / 1.02 var(--sans); letter-spacing: -0.052em; }
.step p { max-width: 310px; margin: 0; color: #dfd5e3; font-size: 13px; line-height: 1.58; }
.step > i { margin-top: 23px; padding-top: 15px; color: #d2c2d8; border-top: 1px solid rgba(255, 255, 255, 0.15); font: 500 9px / 1 var(--mono); font-style: normal; text-transform: uppercase; }
.step-accent { color: var(--ink); border-color: var(--coral); background: var(--coral); }
.step-accent > span,
.step-accent p,
.step-accent > i { color: #55354e; }
.step-accent > i { border-color: rgba(59, 22, 72, 0.17); }
.step:nth-child(1) { border-color: rgba(202,180,255,.35); background: linear-gradient(145deg, rgba(118,83,199,.62), rgba(91,53,111,.48)); }
.step:nth-child(1) > span { color: var(--white); background: rgba(255,255,255,.1); }
.step:nth-child(3) { color: var(--ink); border-color: var(--butter); background: linear-gradient(145deg, #ffd166, #ffb96d); }
.step:nth-child(3) h3 { color: var(--ink); }
.step:nth-child(3) p,
.step:nth-child(3) > i { color: #62413e; }
.step:nth-child(3) > i { border-color: rgba(59,22,72,.16); }
.step:nth-child(3) > span { color: var(--ink); border-color: rgba(59,22,72,.17); background: rgba(255,255,255,.3); }

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: 0.77fr 1.23fr;
  gap: clamp(50px, 8vw, 125px);
  padding-top: 125px;
  padding-bottom: 130px;
}
.faq h2 { margin-top: 23px; }
.faq h2 em { color: var(--violet); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 23px 42px 23px 0;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font: 700 18px / 1.35 var(--sans);
  letter-spacing: -0.04em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { position: absolute; top: 17px; right: 0; color: var(--coral); font: 400 31px / 1 var(--serif); transition: transform 0.2s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 670px; margin: 0; padding: 0 0 24px; color: var(--ink-2); font-size: 14px; line-height: 1.68; }

/* Contact */
.contact {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: #32113e;
}
.contact-glow {
  position: absolute;
  top: -26%;
  right: -9%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 142, 120, 0.34), rgba(118, 83, 199, 0.18) 45%, transparent 70%);
}
.contact-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.66fr);
  gap: clamp(55px, 10vw, 160px);
  padding-top: 132px;
  padding-bottom: 120px;
}
.contact h2 { margin-top: 24px; }
.contact h2 em { color: var(--butter); }
.contact-copy > p:not(.eyebrow) { max-width: 500px; margin: 25px 0 0; color: #ddd0e4; font-size: 16px; line-height: 1.65; }
.contact-email {
  display: inline-flex;
  gap: 16px;
  max-width: 100%;
  margin-top: 40px;
  padding-bottom: 7px;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-decoration: none;
  overflow-wrap: anywhere;
  font: 600 clamp(27px, 3vw, 44px) / 1 var(--sans);
  letter-spacing: -0.06em;
}
.contact-email span { color: var(--butter); }
.contact-form {
  display: grid;
  align-self: center;
  gap: 19px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 45px rgba(10, 2, 13, 0.18);
  backdrop-filter: blur(10px);
}
.contact-form label { display: grid; gap: 8px; color: #e0d1e6; font: 500 10px / 1.25 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  resize: vertical;
  padding: 0 0 11px;
  color: white;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  outline: 0;
  background: transparent;
  font: 500 15px / 1.45 var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--butter); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #a794b4; }
.contact-form > p { margin: 0; color: #bcaac5; font-size: 10px; line-height: 1.45; }
.contact-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 25px;
  padding-bottom: 25px;
  color: #c4b1cd;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.05em;
}
.contact-bottom a { color: white; text-decoration: none; }

/* Reveal and effects */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1); }
.js .reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.js .chart-card.visible .chart-line { stroke-dasharray: 760; stroke-dashoffset: 760; animation: draw 1.8s 0.3s cubic-bezier(0.35, 0.7, 0.25, 1) forwards; }
.js .chart-card.visible .chart-area { opacity: 0; animation: appear 0.6s 1.1s forwards; }
.js .chart-card .chart-bars rect { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; }
.js .chart-card.visible .chart-bars rect { animation: barRise .58s .38s cubic-bezier(.2,.75,.2,1) forwards; }
.js .chart-card.visible .chart-bars rect:nth-child(2) { animation-delay: .44s; }
.js .chart-card.visible .chart-bars rect:nth-child(3) { animation-delay: .5s; }
.js .chart-card.visible .chart-bars rect:nth-child(4) { animation-delay: .56s; }
.js .chart-card.visible .chart-bars rect:nth-child(5) { animation-delay: .62s; }
.js .chart-card.visible .chart-bars rect:nth-child(6) { animation-delay: .68s; }
.js .chart-card.visible .chart-bars rect:nth-child(7) { animation-delay: .74s; }
.js .chart-card.visible .chart-bars rect:nth-child(8) { animation-delay: .8s; }
.js .chart-card.visible .chart-bars rect:nth-child(9) { animation-delay: .86s; }
.js .chart-card.visible .chart-bars rect:nth-child(10) { animation-delay: .92s; }
.js .chart-card.visible .chart-point { opacity: 0; animation: appear 0.2s 1.35s forwards; }
.js .chart-card.visible .p2 { animation-delay: 1.55s; }
.js .chart-card.visible .p3 { animation-delay: 1.75s; }
@keyframes chartPulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(255,255,255,.85)); } }
.js .chart-card.visible .p3 { transform-box: fill-box; transform-origin: center; animation: appear .2s 1.75s forwards, chartPulse 2.2s 2.05s ease-in-out 2; }
.js .chart-card.visible::before { animation: chartSheen 1.3s .45s ease forwards; }
@keyframes chartSheen { to { left: 118%; } }
.js .chart-card .chart-label { opacity: 0; transform: translateY(7px); }
.js .chart-card.visible .chart-label { animation: chartLabelIn .38s 1.45s ease forwards; }
.js .chart-card.visible .label-b { animation-delay: 1.62s; }
.js .chart-card.visible .label-c { animation-delay: 1.8s; }
@keyframes chartLabelIn { to { opacity: 1; transform: translateY(0); } }
@keyframes barRise { to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

@media (hover: hover) {
  .main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .header-cta:hover { transform: translateY(-2px); box-shadow: 0 13px 27px rgba(59, 22, 72, 0.22); }
  .button:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(59, 22, 72, 0.2); }
  .button:hover::before { left: 115%; }
  .button:hover i { transform: rotate(7deg) scale(1.05); }
  .service-card:hover { transform: translateY(-6px); border-color: rgba(255, 142, 120, 0.45); box-shadow: 0 25px 48px rgba(59, 22, 72, 0.11); }
  .service-card:hover .service-visual { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 20px 38px rgba(59,22,72,.15), inset 0 1px rgba(255,255,255,.95); }
  .case-after:hover { transform: translateY(-16px) rotate(0); }
  .case-before:hover { transform: translateY(-4px) rotate(-.4deg); }
  .audience-card:hover { transform: translateY(-6px); border-color: rgba(118,83,199,.34); box-shadow: 0 25px 48px rgba(59,22,72,.1); }
  .audience-card:hover .audience-widget { transform: translateY(-5px) rotate(2deg); }
  .offer-inner > a:hover { transform: translateY(-3px); color: var(--white); background: var(--ink); }
  .offer-ads .offer-inner > a:hover { color: var(--ink); background: var(--butter); }
  .offer-google .offer-inner > a:hover { color: var(--white); background: var(--violet); }
  .hero-image:hover img { transform: scale(1.07); }
  .concept:hover { border-color: rgba(255, 142, 120, 0.48); }
  .step:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.07); }
  .step:nth-child(1):hover { background: linear-gradient(145deg, rgba(125,90,205,.72), rgba(91,53,111,.58)); }
  .step-accent:hover { background: #ff9b85; }
  .step:nth-child(3):hover { background: linear-gradient(145deg, #ffda79, #ffc078); }
}

@media (pointer: coarse) {
  .service-card,
  .audience-card { touch-action: manipulation; }
  .service-card:active,
  .audience-card:active { transform: scale(.985); }
}

/* Tablet */
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding-top: 150px; padding-bottom: 105px; }
  .hero-copy { max-width: 800px; }
  .hero-art { width: min(100%, 700px); }
  .hero-image { aspect-ratio: 1.32 / 1; }
  .hero::after { width: 75%; height: 64%; }
  .intro-grid,
  .website-layout,
  .visibility-layout,
  .flow-visibility { grid-template-columns: 1fr; }
  .intro-copy,
  .website-copy,
  .visibility-copy { max-width: 680px; }
  .website-demo { width: min(100%, 760px); }
  .service-card:nth-child(1) { grid-column: span 12; }
  .service-card:nth-child(2),
  .service-card:nth-child(3) { grid-column: span 6; }
  .case-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-summary { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .case-summary > span { min-height: 132px; }
  .case-summary b { max-width: 220px; }
  .concept { grid-template-columns: 1fr; }
  .concept-note { max-width: 680px; }
  .concept-legal .concept-preview { order: 1; }
  .concept-legal .concept-note { order: 2; }
  .contact-layout { grid-template-columns: 1fr 0.82fr; gap: 55px; }
}

/* Phone / small tablet */
@media (max-width: 760px) {
  :root { --gutter: max(18px, env(safe-area-inset-left)); }
  .section-wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .site-header { padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); }
  body {
    background:
      radial-gradient(circle at 105% 8%, rgba(255, 142, 120, 0.3), transparent 18rem),
      radial-gradient(circle at -10% 30%, rgba(118, 83, 199, 0.16), transparent 20rem),
      var(--paper);
  }
  .grain { position: absolute; opacity: 0.018; }
  h2 { font-size: clamp(40px, 11.5vw, 56px); line-height: 0.98; letter-spacing: -0.062em; }
  .main-nav { display: none; }
  .site-header { padding-top: max(15px, env(safe-area-inset-top)); }
  .nav-shell { height: 48px; }
  .brand b { font-size: 27px; }
  .brand small { font-size: 6px; }
  .header-cta { margin-left: auto; padding: 10px 12px 10px 15px; font-size: 11px; }
  .header-cta > span { font-size: 11px; }
  .eyebrow { align-items: flex-start; font-size: 10px; line-height: 1.5; }
  .button { width: 100%; min-height: 58px; padding-left: 20px; font-size: 14px; }
  .button i { width: 40px; height: 40px; }

  .hero {
    min-height: 770px;
    display: block;
    padding-top: 104px;
    padding-bottom: 72px;
  }
  .hero::before {
    background:
      radial-gradient(circle at 86% 17%, rgba(255, 142, 120, 0.42), transparent 15rem),
      radial-gradient(circle at 68% 47%, rgba(118, 83, 199, 0.3), transparent 19rem),
      radial-gradient(circle at 15% 73%, rgba(255, 209, 102, 0.22), transparent 16rem);
  }
  .hero::after {
    top: 0;
    right: -22%;
    width: 92%;
    height: 58%;
    border-radius: 0 0 0 110px;
    opacity: 0.72;
  }
  .hero-kicker { position: relative; z-index: 3; gap: 6px; margin-bottom: 22px; font-size: 9px; }
  .hero-kicker span,
  .hero-kicker i { padding: 8px 9px; }
  .hero h1 {
    max-width: 620px;
    font-size: clamp(48px, 13.2vw, 63px);
    line-height: 0.93;
    letter-spacing: -0.066em;
  }
  .hero-lede { max-width: 520px; margin-top: 26px; font-size: 16px; line-height: 1.66; }
  .hero-actions { display: grid; gap: 15px; margin-top: 29px; }
  .hero-link { width: max-content; margin-left: 4px; }
  .button-ghost { background: rgba(255, 253, 250, 0.76); backdrop-filter: none; }
  .hero-path { max-width: 360px; margin-top: 23px; gap: 7px; font-size: 8px; }
  .hero-art {
    position: absolute;
    z-index: -1;
    top: 68px;
    right: -34%;
    width: 106%;
    height: 580px;
    opacity: 0.28;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.42) 58%, transparent 96%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.42) 58%, transparent 96%);
  }
  .hero-image { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .hero-image::after { display: none; }
  .hero-image img { object-position: 50% 42%; filter: saturate(1.06) contrast(1.02); }
  .hero-float,
  .hero-halo { display: none; }

  .services-compact { padding-top: 86px; padding-bottom: 90px; }
  .services-head { display: block; margin-bottom: 43px; }
  .services-head .eyebrow { margin-bottom: 21px; }
  .services-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) { grid-column: auto; }
  .service-card { min-height: 292px; padding: 17px; border-radius: 17px; }
  .service-card h3 { font-size: 29px; }
  .service-card p { font-size: 13px; }
  .service-card:nth-child(1) .service-visual,
  .service-card:nth-child(2) .service-visual,
  .service-card:nth-child(3) .service-visual { top: 18px; right: 11px; width: 165px; height: 128px; }

  .case-study { padding-block: 90px; }
  .case-head { display: block; margin-bottom: 45px; }
  .case-head .eyebrow { margin-bottom: 21px; }
  .case-head > div > p { margin-top: 18px; font-size: 14px; }
  .case-layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .case-screen { min-height: 285px; border-radius: 17px; transform: none; }
  .case-browser { height: 31px; padding-inline: 10px; }
  .case-browser > span { width: 5px; height: 5px; }
  .case-browser > i { font-size: 9px; }
  .case-page { min-height: 254px; padding: 15px; }
  .case-page > small { font-size: 9px; }
  .old-title { height: 29px; margin-top: 27px; box-shadow: 0 42px 0 -8px #aaa5a2; }
  .old-lines { gap: 7px; margin-top: 53px; }
  .old-lines i { height: 5px; }
  .old-boxes { right: 13px; bottom: 13px; left: 13px; gap: 4px; }
  .old-boxes span { height: 34px; border-radius: 6px; }
  .case-after h3 { margin-top: 28px; font-size: clamp(28px,8.6vw,42px); }
  .new-button { margin-top: 22px; padding: 10px 11px; font-size: 9px; }
  .new-orb { right: -67px; bottom: -72px; width: 190px; }
  .new-orb i { top: 29px; left: 31px; width: 47px; }
  .new-orb b { top: 62px; left: 74px; width: 68px; height: 20px; }
  .case-summary { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .case-summary > span { min-height: 88px; padding: 11px; border-radius: 14px; }
  .case-summary small { font-size: 9px; }
  .case-summary b { margin-top: 16px; font-size: 14px; line-height: 1.12; }
  .case-after:hover,
  .case-before:hover { transform: none; }

  .audience { padding-block: 90px; }
  .audience-glow { top: 2%; right: -55%; width: 145%; }
  .audience-head { display: block; margin-bottom: 45px; }
  .audience-head .eyebrow { margin-bottom: 21px; }
  .audience-head > div > p { margin-top: 18px; font-size: 14px; }
  .audience-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .audience-wide { grid-column: span 2; min-height: 210px; }
  .audience-any { grid-column: span 1; }
  .audience-card { min-height: 176px; padding: 13px; border-radius: 16px; }
  .audience-card h3 { max-width: 230px; font-size: 19px; line-height: 1.02; }
  .audience-wide h3 { max-width: 310px; font-size: 27px; }
  .audience-card p { max-width: 230px; margin-top: 8px; font-size: 10px; line-height: 1.4; }
  .audience-card:not(.audience-wide) p { display: none; }
  .audience-widget { top: 8px; right: 5px; transform: scale(.48); transform-origin: top right; }
  .audience-wide .audience-widget { transform: scale(.6); }

  .intro { padding-top: 86px; padding-bottom: 92px; }
  .intro-grid { gap: 28px; margin-top: 24px; }
  .intro-copy p { font-size: 16px; line-height: 1.68; }
  .intro-word { right: 10px; bottom: -0.08em; font-size: 31vw; }

  .offer { padding-top: 88px; }
  .offer-head { display: block; padding-bottom: 52px; }
  .offer-head .eyebrow { margin-bottom: 22px; }
  .offer-head > div > p { margin-top: 20px; font-size: 15px; }
  .offer-row,
  .offer-inner { min-height: 430px; }
  .offer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding-top: 54px;
    padding-bottom: 38px;
  }
  .offer-number { position: absolute; top: 22px; left: var(--gutter); padding: 0; }
  .offer-copy h3 { margin-top: 16px; font-size: clamp(54px, 17vw, 76px); line-height: 0.86; }
  .offer-copy p { max-width: 340px; margin-top: 21px; font-size: 14px; }
  .offer-inner > a { margin-top: 28px; font-size: 12px; }
  .offer-art-word { right: 0; bottom: -0.1em; font-size: 41vw; opacity: 0.8; }
  .offer-web { background: radial-gradient(circle at 105% 30%, rgba(255, 142, 120, 0.48), transparent 18rem), #f8e5d9; }
  .offer-ads { background: radial-gradient(circle at 110% 28%, rgba(118, 83, 199, 0.56), transparent 20rem), #351341; }
  .offer-google { background: radial-gradient(circle at 108% 15%, rgba(255, 142, 120, 0.48), transparent 18rem), #ffd36e; }

  .type-break { padding: 84px var(--gutter) 80px; }
  .type-line { display: grid; gap: 0.03em; font-size: clamp(70px, 22vw, 100px); }
  .type-line b { -webkit-text-stroke-width: 1px; }
  .type-break > p { margin-top: 28px; font-size: 13px; }

  .website-story { padding-block: 88px; }
  .section-glow { filter: blur(8px); }
  .glow-coral { top: -8%; right: -35%; width: 90%; }
  .glow-violet { bottom: -12%; left: -33%; width: 95%; }
  .website-layout { gap: 43px; }
  .website-copy h2 { margin-top: 22px; }
  .website-copy > p { margin-top: 21px; font-size: 15px; line-height: 1.67; }
  .check-list { margin-top: 25px; }
  .check-list li { padding: 12px 0; }
  .website-demo { padding: 8px 8px 0; border-radius: 17px; transform: none; }
  .browser-bar { height: 25px; }
  .browser-bar i { width: 56%; font-size: 6px; }
  .demo-nav { min-height: 46px; padding: 11px 13px; }
  .demo-nav b { font-size: 15px; }
  .demo-nav > span { display: none; }
  .demo-nav i { width: 25px; height: 25px; }
  .demo-main { min-height: 258px; grid-template-columns: 1.02fr 0.98fr; padding: 24px 14px 14px; }
  .demo-copy small { font-size: 6px; }
  .demo-copy h3 { margin: 11px 0 16px; font-size: clamp(24px, 7.6vw, 32px); }
  .demo-cta { padding: 8px 9px; font-size: 7px; }
  .demo-bottom { gap: 5px; padding: 11px 13px; font-size: 6px; }
  .website-demo > p { margin: 9px 2px 11px; font-size: 9px; }

  .concepts { padding-block: 90px; }
  .concepts-head { display: block; margin-bottom: 48px; }
  .concepts-head .eyebrow { margin-bottom: 22px; }
  .concepts-head > div > p { margin-top: 20px; font-size: 15px; }
  .concept {
    gap: 28px;
    padding: 14px;
    border-radius: 21px;
    box-shadow: 0 18px 38px rgba(59, 22, 72, 0.08);
  }
  .concept + .concept { margin-top: 18px; }
  .concept-preview { border-radius: 15px; }
  .concept-note { padding: 6px 7px 10px; }
  .concept-note h3 { margin-top: 17px; font-size: clamp(31px, 9vw, 42px); }
  .concept-note > p { margin-top: 16px; font-size: 13px; }
  .concept-note ul { margin-top: 18px; padding-top: 14px; }

  .preview-chrome { height: 27px; padding-inline: 8px; }
  .preview-chrome i { font-size: 6px; }
  .dev-nav { height: 48px; padding-inline: 13px; }
  .dev-nav b { font-size: 13px; }
  .dev-nav i { display: none; }
  .dev-nav em { display: block; }
  .dev-hero { min-height: 376px; display: block; }
  .dev-words { position: relative; z-index: 4; width: 77%; padding: 31px 0 28px 17px; }
  .dev-words small { font-size: 7px; }
  .dev-words h3 { font-size: clamp(34px, 10vw, 43px); }
  .dev-words p { max-width: 210px; font-size: 10px; }
  .preview-button { padding: 11px 12px; font-size: 8px; }
  .dev-building { position: absolute; inset: 0 0 0 39%; opacity: 0.82; }
  .availability { right: 11px; bottom: 11px; width: 112px; padding: 11px; }
  .availability strong { font-size: 31px; }
  .dev-stats { grid-template-columns: 1fr 1fr; }
  .dev-stats > span { padding: 13px; }
  .dev-stats > span:nth-child(3) { display: none; }
  .dev-stats small { font-size: 6px; }
  .dev-stats b { font-size: 11px; }
  .dev-apartments { grid-template-columns: 1fr; }
  .dev-apartments > span { padding: 12px 13px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .dev-apartments > span:nth-child(2) { display: none; }
  .dev-apartments .dev-list-button { min-height: 42px; }

  .legal-preview,
  .legal-site { min-height: 515px; }
  .legal-monogram { right: -0.04em; bottom: -0.16em; font-size: 330px; }
  .legal-site { grid-template-columns: 1fr; }
  .legal-rail { position: absolute; z-index: 2; top: 0; right: 0; left: 0; flex-direction: row; padding: 16px; border-right: 0; border-bottom: 1px solid rgba(221, 190, 133, 0.22); }
  .legal-rail > span { writing-mode: initial; transform: none; }
  .legal-main { padding: 78px 17px 0; }
  .legal-top i { display: none; }
  .legal-content { padding-top: 62px; padding-bottom: 28px; }
  .legal-content h3 { font-size: clamp(43px, 12vw, 57px); }
  .legal-content > p { max-width: 240px; font-size: 10px; }
  .reply-badge { right: -2px; bottom: 28px; width: 92px; }
  .reply-badge b { font-size: 18px; }
  .legal-services { grid-template-columns: 1fr; }
  .legal-services span { padding: 12px 0; border-top: 1px solid rgba(221, 190, 133, 0.13); font-size: 9px; }
  .legal-services span:nth-child(3) { display: none; }
  .legal-extra { grid-template-columns: 1fr 1fr; }
  .legal-extra > span { padding: 12px 8px 12px 0; }
  .legal-extra > span:nth-child(3) { display: none; }

  .local-preview { min-height: 535px; padding: 14px; }
  .local-desktop { min-height: 505px; }
  .local-nav { height: 48px; padding-inline: 14px; }
  .local-nav i { display: none; }
  .local-main { width: 88%; padding: 45px 0 30px 18px; }
  .local-main h3 { font-size: clamp(39px, 12vw, 52px); }
  .local-main > p { max-width: 235px; font-size: 10px; }
  .local-rating { font-size: 10px; }
  .local-orb { right: -15%; bottom: -8%; width: 78%; }
  .booking-phone { top: auto; right: 25px; bottom: 18px; width: 205px; }
  .booking-phone > small { font-size: 6px; }
  .booking-chips span { font-size: 7px; }
  .concepts-foot { align-items: flex-start; font-size: 11px; line-height: 1.5; }
  .concepts-foot > span { flex: 0 0 auto; margin-top: 4px; }

  .flow-visibility { gap: 45px; padding-top: 90px; padding-bottom: 88px; }
  .flow .visibility-copy > p:not(.eyebrow) { margin-top: 21px; font-size: 15px; }
  .flow-process { padding-top: 84px; padding-bottom: 90px; }
  .visibility-layout { gap: 45px; padding-top: 90px; padding-bottom: 90px; }
  .visibility-copy > p:not(.eyebrow) { margin-top: 21px; font-size: 15px; }
  .chart-card { padding: 16px; border-radius: 18px; backdrop-filter: none; }
  .chart-head strong { font-size: 19px; }
  .chart-wrap { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 24px; }
  .chart-wrap svg { grid-column: 1 / -1; }
  .chart-label { position: static; min-height: 30px; display: grid; place-items: center; padding: 6px 5px; font-size: 9px; line-height: 1.2; text-align: center; white-space: normal; }
  .chart-legend { display: none; }

  .process { padding-block: 90px; }
  .process-head { display: block; }
  .process-head .eyebrow { margin-bottom: 22px; }
  .process-head > div > p { margin-top: 20px; font-size: 15px; }
  .steps { grid-template-columns: 1fr; gap: 9px; margin-top: 42px; }
  .steps::before { top: 25px; bottom: 25px; left: 30px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(202,180,255,.75), rgba(255,142,120,.82), rgba(255,209,102,.85)); }
  .step { min-height: 118px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto auto; column-gap: 13px; align-content: center; padding: 15px; border-radius: 16px; }
  .step > span { grid-row: 1 / 4; align-self: center; }
  .step h3 { margin: 0; font-size: 25px; }
  .step p { margin-top: 5px; font-size: 12px; }
  .step > i { margin-top: 8px; padding-top: 0; border-top: 0; font-size: 9px; }

  .faq { display: block; padding-top: 85px; padding-bottom: 90px; }
  .faq-title { margin-bottom: 42px; }
  .faq summary { padding: 21px 36px 21px 0; font-size: 16px; }
  .faq details p { font-size: 13px; }

  .contact-glow {
    top: -2%;
    right: -45%;
    width: 125%;
    background: radial-gradient(circle, rgba(255, 142, 120, 0.28), rgba(118, 83, 199, 0.16) 48%, transparent 70%);
  }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 90px; padding-bottom: 72px; }
  .contact-copy > p:not(.eyebrow) { font-size: 15px; }
  .contact-email { margin-top: 29px; font-size: clamp(24px, 8vw, 31px); }
  .contact-form { padding: 20px; border-radius: 17px; background: rgba(255, 255, 255, 0.08); backdrop-filter: none; }
  .contact-form input,
  .contact-form textarea { font-size: 16px; }
  .contact-bottom { flex-wrap: wrap; line-height: 1.55; }
}

@media (max-width: 520px) {
  .case-layout { grid-template-columns: 1fr; }
  .case-before { min-height: 220px; }
  .case-before .case-page { min-height: 189px; }
  .case-after { min-height: 310px; }
  .case-after .case-page { min-height: 279px; }
  .case-after h3 { max-width: 260px; font-size: clamp(38px,12vw,49px); }
  .new-button { font-size: 10px; }
  .case-summary { grid-template-columns: 1fr; }
  .case-summary > span { min-height: 66px; flex-direction: row; align-items: center; gap: 16px; }
  .case-summary b { max-width: none; margin-top: 0; font-size: 15px; }
}

@media (max-width: 420px) {
  :root { --gutter: max(14px, env(safe-area-inset-left)); }
  .section-wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .header-cta { padding: 9px 11px 9px 13px; font-size: 10px; }
  .hero { min-height: 750px; padding-top: 96px; }
  .hero h1 { font-size: clamp(46px, 13vw, 55px); }
  .hero-kicker { max-width: 295px; }
  .hero-kicker span,
  .hero-kicker i { padding: 7px 8px; font-size: 8px; }
  .hero-path { font-size: 7px; }
  .offer-copy h3 { font-size: clamp(50px, 16vw, 67px); }
  .type-line { font-size: clamp(64px, 21vw, 86px); }
  .demo-main { grid-template-columns: 1.08fr 0.92fr; padding-inline: 11px; }
  .demo-copy h3 { font-size: 23px; }
  .demo-bottom { font-size: 5px; }
  .concept { padding: 10px; }
  .dev-hero { min-height: 355px; }
  .dev-words { width: 82%; padding-left: 14px; }
  .dev-words h3 { font-size: 34px; }
  .legal-content h3 { font-size: 43px; }
  .reply-badge { width: 82px; }
  .local-preview { min-height: 510px; padding: 10px; }
  .local-desktop { min-height: 490px; }
  .booking-phone { right: 13px; bottom: 13px; width: 192px; }
  .chart-card { padding: 13px; }
  .chart-head small { font-size: 10px; }
  .chart-head strong { font-size: 17px; }
  .chart-live { display: none; }
  .chart-label { font-size: 10px; }
  .contact-bottom a { width: 100%; }
}

@media (max-width: 340px) {
  .brand b { font-size: 25px; }
  .brand small { display: none; }
  .header-cta { padding-inline: 11px; }
  .hero h1 { font-size: 43px; }
  .hero-lede { font-size: 15px; }
  .button { padding-left: 17px; font-size: 13px; }
  .demo-art { opacity: 0.72; }
  .availability { width: 103px; }
  .legal-content h3 { font-size: 39px; }
  .booking-phone { width: 182px; }
  .chart-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .chart-card.visible .chart-line { stroke-dashoffset: 0; animation: none; }
  .js .chart-card.visible .chart-area,
  .js .chart-card.visible .chart-point { opacity: 1; animation: none; }
  .js .chart-card .chart-bars rect { transform: none; animation: none; }
  .js .chart-card .chart-label { opacity: 1; transform: none; animation: none; }
  .js .chart-card.visible::before,
  .js .chart-card.visible .p3 { animation: none; }
}