/* ============================================================
   MAMUT DIGITAL — landing page
   Palette: warm ink / bone / tusk amber
   Type: Fraunces (display) · Archivo (body) · IBM Plex Mono (labels)
   ============================================================ */

:root {
  --ink: #0f0d0a;
  --ink-2: #17140f;
  --ink-3: #211c15;
  --bone: #ece4d4;
  --bone-2: #e2d8c3;
  --bone-dim: #a89d87;
  --amber: #e96f2b;
  --amber-soft: #f08c52;
  --sage: #8fae6f;
  --line-dark: rgba(236, 228, 212, 0.14);
  --line-light: rgba(15, 13, 10, 0.16);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --pad-x: clamp(20px, 5vw, 88px);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--ink); }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* ---- grain overlay ---- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--amber { background: var(--amber); color: var(--ink); font-weight: 500; }
.btn--amber:hover { background: var(--amber-soft); }
.btn--ghost { border-color: var(--line-dark); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone); }
.btn--small { padding: 10px 20px; font-size: 12px; }
.btn--full { width: 100%; justify-content: center; }
.btn__arrow { transition: transform 0.25s; }
.btn--ghost:hover .btn__arrow { transform: translateY(3px); }

.dot-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(143, 174, 111, 0.6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(143, 174, 111, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(143, 174, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 174, 111, 0); }
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  transition: background 0.35s, backdrop-filter 0.35s, padding 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(15, 13, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px var(--pad-x);
  border-bottom-color: var(--line-dark);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1002;
}
.nav__mark { width: 26px; height: 26px; color: var(--amber); }
.nav__word {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.nav__word em { font-style: normal; color: var(--bone-dim); margin-left: 6px; font-weight: 400; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}
.nav__links > a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  transition: color 0.2s;
  position: relative;
}
.nav__links > a:not(.btn):hover { color: var(--bone); }
.nav__links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
}
.nav__links > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  padding: 8px 0;
}
.nav__burger span {
  width: 26px; height: 2px;
  background: var(--bone);
  transition: transform 0.3s, opacity 0.3s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--pad-x) 90px;
  overflow: hidden;
}
.hero__dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__inner { position: relative; z-index: 2; }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 3vh, 36px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 380;
  font-optical-sizing: auto;
  font-size: clamp(44px, 9.2vw, 142px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: clamp(28px, 4.5vh, 56px);
}
.hero__line { display: block; overflow: hidden; }
.hero__title em {
  color: var(--amber);
  font-style: italic;
  font-weight: 430;
}
.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.hero__sub {
  max-width: 520px;
  color: var(--bone-dim);
  font-size: clamp(15px, 1.4vw, 18px);
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta {
  position: absolute;
  z-index: 2;
  right: var(--pad-x);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}
.hero__coords { writing-mode: vertical-rl; }
.hero__scrollcue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__scrollbar {
  width: 1px; height: 56px;
  background: var(--line-dark);
  position: relative;
  overflow: hidden;
}
.hero__scrollbar i {
  position: absolute;
  left: 0; top: -40%;
  width: 100%; height: 40%;
  background: var(--amber);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  to { top: 110%; }
}

/* ============ MARQUEE ============ */
.marquee {
  background: var(--amber);
  color: var(--ink);
  overflow: hidden;
  padding: 14px 0;
  transform: rotate(-1deg) scale(1.02);
  position: relative;
  z-index: 3;
}
.marquee__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============ SECTIONS (shared) ============ */
.section { padding: clamp(80px, 12vh, 150px) var(--pad-x); position: relative; }
.section--light { background: var(--bone); color: var(--ink); }
.section--dark { background: var(--ink); color: var(--bone); }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(15, 13, 10, 0.55);
  margin-bottom: 22px;
}
.kicker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  font-size: 11px;
}
.kicker--light { color: var(--bone-dim); }
.kicker--light span { border-color: var(--line-dark); }

.section__head { max-width: 980px; margin-bottom: clamp(48px, 7vh, 90px); }
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.section__title em { color: var(--amber); font-weight: 450; }
.section__sub {
  max-width: 560px;
  font-size: clamp(15px, 1.4vw, 18px);
  opacity: 0.72;
}

/* ============ 01 BEFORE / AFTER ============ */
.ba-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vh, 110px);
}
.ba-card { max-width: 1100px; }
.ba-card:nth-child(2) { margin-left: auto; }   /* staggered editorial layout */

.ba-viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(15, 13, 10, 0.45);
  container-type: size;
  cursor: ew-resize;
  background: #fff;
  touch-action: pan-y;
}
.ba-layer { position: absolute; inset: 0; }
.ba-viewport img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-layer--new {
  clip-path: inset(0 0 0 55%);
  will-change: clip-path;
}
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 48px;
  margin-left: -24px;
  transform: translateX(55cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
}
.ba-handle__line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--amber);
}
.ba-handle__grip {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 6px 22px rgba(15, 13, 10, 0.4);
  transition: transform 0.2s;
}
.ba-handle:hover .ba-handle__grip,
.ba-handle:focus-visible .ba-handle__grip { transform: scale(1.12); }
.ba-tag {
  position: absolute;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 100px;
  z-index: 4;
  pointer-events: none;
}
.ba-tag--before { left: 14px; background: rgba(15, 13, 10, 0.72); color: var(--bone); }
.ba-tag--after { right: 14px; background: var(--amber); color: var(--ink); }

.ba-caption {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-light);
}
.ba-caption h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
}
.ba-caption p { opacity: 0.6; font-size: 14px; }
.ba-chips { margin-left: auto; display: flex; gap: 8px; }
.ba-chips span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
}
.ba-chips span:last-child { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- OLD SITES (deliberately dated) ---------- */
.oldsite {
  position: absolute; inset: 0;
  background: #d6d2c9;
  font-family: "Times New Roman", Times, serif;
  color: #222;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.oldsite__topbar {
  background: linear-gradient(#3a62b8, #1d3d85);
  color: #ffff66;
  font-size: 2.4cqh;
  font-weight: bold;
  text-align: center;
  padding: 1cqh 0;
  font-style: italic;
}
.oldsite__topbar--red { background: linear-gradient(#c0392b, #7e241a); color: #fff; }
.oldsite__header {
  background: linear-gradient(#7da7d9, #4a7ab5);
  padding: 2.2cqh 3cqw;
  border-bottom: 3px ridge #aaa;
}
.oldsite__header--green { background: linear-gradient(#7fbf7f, #3e8a3e); }
.oldsite__header--navy { background: linear-gradient(#33415e, #1a2436); }
.oldsite__logo {
  font-size: 4.6cqh;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0 #333;
}
.oldsite__nav { display: flex; gap: 2.4cqw; margin-top: 1.4cqh; }
.oldsite__nav a {
  color: #ffffcc;
  text-decoration: underline;
  font-size: 2.6cqh;
  cursor: pointer;
}
.oldsite__nav--pills a {
  background: #ffcc00;
  color: #333;
  text-decoration: none;
  padding: 0.6cqh 1.6cqw;
  border: 2px outset #ffe680;
  font-weight: bold;
  font-size: 2.2cqh;
}
.oldsite__body { display: flex; flex: 1; min-height: 0; }
.oldsite__sidebar {
  width: 26cqw;
  background: #c3cee0;
  border-right: 2px ridge #999;
  padding: 1.6cqh 1.6cqw;
  font-size: 2.4cqh;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
}
.oldsite__sidebar--navy { background: #b9c2d4; }
.oldsite__sidebar b { font-size: 2.4cqh; text-decoration: underline; }
.oldsite__sidebar a { color: #1d3d85; text-decoration: underline; cursor: pointer; }
.oldsite__counter {
  margin-top: auto;
  background: #000;
  color: #33ff33;
  font-family: "Courier New", monospace;
  font-size: 2.2cqh;
  text-align: center;
  padding: 1cqh;
  border: 2px inset #888;
}
.oldsite__main { flex: 1; padding: 2cqh 2.4cqw; overflow: hidden; }
.oldsite__main--full { padding: 1.6cqh 3cqw; }
.oldsite__tagline {
  font-size: 2.2cqh;
  font-style: italic;
  color: #ffffcc;
  margin-top: 0.4cqh;
}
.oldsite__photo {
  width: 100%;
  height: 30cqh;
  object-fit: cover;
  border: 3px ridge #999;
  filter: saturate(1.25) contrast(1.05) brightness(1.02);
}
.oldsite__photo--banner { height: 22cqh; margin-bottom: 1.4cqh; }
.oldsite__listings {
  display: flex;
  gap: 2cqw;
  margin: 1.4cqh 0;
}
.oldsite__listings figure { flex: 1; }
.oldsite__listings img {
  width: 100%;
  height: 16cqh;
  object-fit: cover;
  border: 2px ridge #999;
  filter: saturate(1.3) contrast(1.05);
}
.oldsite__listings figcaption {
  font-size: 2cqh;
  color: #1d3d85;
  text-decoration: underline;
  margin-top: 0.5cqh;
}
.oldsite__listings font, .oldsite__welcome font { color: #cc0000; font-weight: bold; }
.oldsite__mls {
  background: #e8ecf4;
  border: 2px groove #aaa;
  padding: 1cqh 0.8cqw;
  font-size: 2cqh;
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
}
.oldsite__mls i {
  height: 2.6cqh;
  background: #fff;
  border: 2px inset #999;
}
.oldsite__mls u {
  align-self: flex-start;
  background: linear-gradient(#d9d9d9, #a8a8a8);
  border: 2px outset #ccc;
  padding: 0.2cqh 1.4cqw;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.9cqh;
  cursor: pointer;
}
.oldsite__welcome { font-size: 2.7cqh; margin: 1.6cqh 0; line-height: 1.4; }
.oldsite__btn {
  background: linear-gradient(#ffe680, #e6b800);
  border: 3px outset #ffd24d;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  font-size: 2.6cqh;
  padding: 1.2cqh 2.4cqw;
  color: #4a3000;
  cursor: pointer;
}
.oldsite__btn--green { background: linear-gradient(#9fdf9f, #4d994d); border-color: #80cc80; color: #143d14; }
.oldsite__btn--navy { background: linear-gradient(#8fa3c8, #46598a); border-color: #7c90ba; color: #fff; }
.oldsite__btnrow { display: flex; gap: 2cqw; }
.oldsite__updated {
  font-size: 2cqh;
  color: #777;
  margin-top: 1.8cqh;
  font-style: italic;
}
.oldsite__blink {
  color: #cc0000;
  font-weight: bold;
  font-size: 2.6cqh;
  text-align: center;
  margin-bottom: 1.4cqh;
  animation: old-blink 1s steps(2) infinite;
}
@keyframes old-blink { 50% { opacity: 0.15; } }
.oldsite__rowimgs { display: flex; gap: 2cqw; margin-bottom: 1.6cqh; }
.oldsite__thumb { flex: 1; }
.oldsite__thumb img {
  width: 100%;
  height: 22cqh;
  object-fit: cover;
  border: 3px ridge #999;
  filter: saturate(1.3) contrast(1.05);
}
.oldsite__thumb figcaption {
  font-family: "Courier New", monospace;
  font-size: 1.9cqh;
  color: #555;
  text-align: center;
  margin-top: 0.4cqh;
}
.oldsite__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 2.5cqh;
  margin-bottom: 1.8cqh;
}
.oldsite__table th {
  background: #33415e;
  color: #fff;
  padding: 0.8cqh;
  border: 1px solid #888;
}
.oldsite__table td {
  border: 1px solid #999;
  padding: 0.8cqh;
  background: #fff;
}
.oldsite__table tr:nth-child(odd) td { background: #e8ecf4; }

/* ---------- NEW SITES (modern) ---------- */
.newsite {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  overflow: hidden;
}
.newsite--coastal { background: #101513; color: #f2ede2; }
.newsite--palmetto { background: #f5efe3; color: #1e2a1d; }
.newsite--bayline { background: #0d1218; color: #e8eef4; }

.newsite__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4cqh 3.2cqw;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.newsite__nav--light { border-bottom-color: rgba(30,42,29,0.12); }
.newsite__brand {
  font-family: var(--font-mono);
  font-size: 2.6cqh;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.newsite__brand em { color: var(--amber); font-style: normal; }
.newsite--palmetto .newsite__brand { font-family: var(--font-display); letter-spacing: 0; font-size: 3.2cqh; }
.newsite__links { display: flex; gap: 2.6cqw; }
.newsite__links i {
  font-style: normal;
  font-size: 2.2cqh;
  opacity: 0.65;
}
.newsite__cta {
  font-family: var(--font-mono);
  font-size: 1.9cqh;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--amber);
  color: #14100c;
  padding: 1.1cqh 2.2cqw;
  border-radius: 100px;
}
.newsite__cta--dark { background: #1e2a1d; color: #f5efe3; }
.newsite__phone {
  font-family: var(--font-mono);
  font-size: 1.9cqh;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.newsite__hero {
  position: relative;
  padding: 5cqh 3.2cqw 3cqh;
  overflow: hidden;
}
.newsite__heroimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsite__heroshade {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(16,21,19,0.92) 18%, rgba(16,21,19,0.55) 55%, rgba(16,21,19,0.18) 100%);
}
.newsite__herocopy { position: relative; z-index: 1; }
.newsite__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsite__bgshade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,18,24,0.88) 0%, rgba(13,18,24,0.66) 55%, rgba(13,18,24,0.9) 100%);
}
.newsite--bayline .newsite__nav,
.newsite--bayline .newsite__stats-hero { position: relative; z-index: 1; }
.newsite__kicker {
  font-family: var(--font-mono);
  font-size: 1.9cqh;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 1.8cqh;
}
.newsite__kicker--dark { color: #67804f; }
.newsite__h {
  font-family: var(--font-display);
  font-size: 7.4cqh;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.newsite__h em { color: var(--amber); }
.newsite__h--dark em { color: #67804f; }
.newsite__search {
  margin-top: 3cqh;
  width: 64cqw;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 1.6cqh 2.4cqw;
  font-size: 2.2cqh;
  color: rgba(242,237,226,0.55);
}
.newsite__search b { color: var(--amber); }
.newsite__cards {
  margin-top: auto;
  display: flex;
  gap: 1.6cqw;
  padding: 0 3.2cqw 3cqh;
}
.newsite__card {
  flex: 1;
  height: 24cqh;
  border-radius: 1.6cqh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #44617a 0%, #1d2c3a 70%);
}
.newsite__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsite__cardmeta {
  position: relative;
  padding: 3.6cqh 1.6cqh 1.4cqh;
  background: linear-gradient(transparent, rgba(10,13,12,0.88) 55%);
  display: flex;
  flex-direction: column;
}
.newsite__cardmeta b { font-size: 2.5cqh; }
.newsite__cardmeta span { font-size: 1.7cqh; opacity: 0.8; }
.newsite__pillstat {
  position: absolute;
  top: 1.2cqh;
  left: 1.2cqh;
  font-family: var(--font-mono);
  font-size: 1.5cqh;
  letter-spacing: 0.12em;
  background: var(--amber);
  color: #14100c;
  padding: 0.5cqh 1.1cqw;
  border-radius: 100px;
  z-index: 1;
}

.newsite__split { display: flex; flex: 1; min-height: 0; }
.newsite__split-copy {
  flex: 1.1;
  padding: 5cqh 3.2cqw;
  display: flex;
  flex-direction: column;
}
.newsite__h--dark { color: #1e2a1d; }
.newsite__pill {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 2cqh;
  border: 1px solid rgba(30,42,29,0.3);
  border-radius: 100px;
  padding: 1.2cqh 2.4cqw;
}
.newsite__split-img { flex: 1; padding: 3cqh 3.2cqw 3cqh 0; }
.newsite__imgcard {
  position: relative;
  height: 100%;
  border-radius: 1.8cqh;
  overflow: hidden;
  background: linear-gradient(160deg, #b5c49a 0%, #5d7a4a 60%, #324a28 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #f5efe3;
}
.newsite__imgcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsite__imgcap {
  position: relative;
  padding: 4cqh 2cqh 1.8cqh;
  background: linear-gradient(transparent, rgba(20,26,18,0.85) 60%);
  display: flex;
  flex-direction: column;
}
.newsite__imgcap b { font-family: var(--font-mono); font-size: 1.6cqh; letter-spacing: 0.16em; }
.newsite__imgcap span { font-size: 2cqh; }
.newsite__minifacts {
  display: flex;
  gap: 2.6cqw;
  margin: 2.2cqh 0;
  font-size: 1.9cqh;
  color: rgba(30,42,29,0.65);
}
.newsite__minifacts b { color: #1e2a1d; font-family: var(--font-display); font-size: 2.4cqh; margin-right: 0.5cqw; }

.newsite__stats-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4.6cqh 3.2cqw 0;
}
.newsite__stats {
  display: flex;
  gap: 4cqw;
  margin-top: 3.4cqh;
}
.newsite__stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 4.6cqh;
  color: var(--amber);
}
.newsite__stats span { font-size: 1.9cqh; opacity: 0.6; }
.newsite__ticker {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.6cqh 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 1.9cqh;
  letter-spacing: 0.1em;
  color: rgba(232,238,244,0.6);
}
.newsite__ticker span {
  display: inline-block;
  animation: marquee 16s linear infinite;
}

/* ============ 02 PLATFORM ============ */
.demo-panel {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--ink-2);
  margin-bottom: 40px;
  overflow: hidden;
}
.demo-panel__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}
.demo-panel__dots { display: flex; gap: 6px; }
.demo-panel__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-dark);
}
.demo-panel__dots i:first-child { background: var(--amber); }
.demo-panel__hint { margin-left: auto; color: var(--amber); }
.demo-panel__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}
.demo-panel__ai { display: flex; align-items: center; gap: 8px; }

/* ---- pipeline ---- */
.pipe-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pipe-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(196px, 1fr));
  gap: 12px;
  padding: 18px;
  min-width: 1040px;
}
.pipe-col {
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.pipe-col--won { border-color: rgba(143, 174, 111, 0.4); }
.pipe-col header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--line-dark);
}
.pipe-col--won header { color: var(--sage); }
.pipe-count {
  background: var(--line-dark);
  border-radius: 100px;
  min-width: 22px;
  text-align: center;
  padding: 2px 7px;
  font-weight: 400;
}
.pipe-col__body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pipe-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: grab;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pipe-card:hover { border-color: rgba(233, 111, 43, 0.5); }
.pipe-card.is-dragging {
  cursor: grabbing;
  z-index: 50;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6);
  border-color: var(--amber);
}
.pipe-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pipe-card__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(233, 111, 43, 0.18);
  color: var(--amber);
  flex-shrink: 0;
}
.pipe-card__name { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.pipe-card__prop {
  font-size: 12px;
  color: var(--bone-dim);
  margin-bottom: 8px;
}
.pipe-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pipe-card__value { color: var(--sage); }
.pipe-card__tag {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--line-dark);
  color: var(--bone-dim);
}
.pipe-card__tag--hot { background: rgba(233, 111, 43, 0.2); color: var(--amber); }

/* ---- automation flow ---- */
.flow-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow-stage {
  position: relative;
  height: 460px;
  min-width: 1020px;
  margin: 0;
  background-image: radial-gradient(rgba(236, 228, 212, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flow-svg .flow-path {
  fill: none;
  stroke: rgba(236, 228, 212, 0.18);
  stroke-width: 2;
}
.flow-svg .flow-path-dash {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 5 14;
  stroke-linecap: round;
  opacity: 0.9;
}
.flow-svg .flow-pulse { fill: var(--amber); }
.flow-node {
  position: absolute;
  width: 196px;
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  z-index: 3;
}
.flow-node:hover { border-color: rgba(233, 111, 43, 0.55); }
.flow-node.is-dragging {
  cursor: grabbing;
  border-color: var(--amber);
  box-shadow: 0 20px 44px -8px rgba(0, 0, 0, 0.65);
  z-index: 10;
}
.flow-node__type {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  margin-bottom: 5px;
}
.flow-node b { font-size: 14px; display: block; margin-bottom: 3px; }
.flow-node__sub {
  font-size: 11.5px;
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: 7px;
}
.flow-node--trigger { border-left: 3px solid var(--sage); }
.flow-node--ai { border-left: 3px solid var(--amber); }
.flow-node--hot { border-left: 3px solid #e0492f; }
.flow-node--warm { border-left: 3px solid #d9a441; }
.flow-node--crm { border-left: 3px solid #7a9bc4; }
.flow-think { display: inline-flex; gap: 3px; }
.flow-think u {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
  animation: think 1.2s ease-in-out infinite;
}
.flow-think u:nth-child(2) { animation-delay: 0.18s; }
.flow-think u:nth-child(3) { animation-delay: 0.36s; }
@keyframes think {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ---- platform features ---- */
.platform-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.platform-feat {
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}
.platform-feat b {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}
.platform-feat p { color: var(--bone-dim); font-size: 15px; }

/* ============ 03 CONSULTING / STEPS ============ */
.steps {
  list-style: none;
  max-width: 1100px;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--line-light);
  transition: background 0.3s;
}
.steps .step:last-child { border-bottom: 1px solid var(--line-light); }
.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  color: var(--amber);
  min-width: 1.6em;
}
.step__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  margin-bottom: 10px;
}
.step__body p {
  max-width: 560px;
  opacity: 0.72;
  font-size: 15.5px;
}
.step__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1px solid var(--line-light);
  padding: 7px 14px;
  border-radius: 100px;
  white-space: nowrap;
  margin-top: 8px;
}

/* ============ 04 ABOUT ============ */
.section--about { border-top: 1px solid var(--line-dark); }
.about {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.about__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(233, 111, 43, 0.12), transparent 60%),
    var(--ink-2);
  overflow: hidden;
}
.about__mammoth {
  width: 62%;
  color: var(--amber);
  filter: drop-shadow(0 0 24px rgba(233, 111, 43, 0.35));
}
.about__frame--photo { background: var(--ink-2); }
.about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.about__frame--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(15, 13, 10, 0.82) 0%, rgba(15, 13, 10, 0) 32%),
    radial-gradient(circle at 50% 18%, rgba(233, 111, 43, 0.14), transparent 55%);
}
.about__frame-label {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
}
.about__p {
  color: var(--bone-dim);
  font-size: clamp(15px, 1.4vw, 17.5px);
  margin-bottom: 18px;
  max-width: 580px;
}
.about__p strong { color: var(--bone); }
.about__facts {
  list-style: none;
  margin-top: 30px;
  border-top: 1px solid var(--line-dark);
}
.about__facts li {
  display: flex;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 14.5px;
}
.about__facts b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  min-width: 90px;
  padding-top: 2px;
}

/* ============ 05 CONTACT ============ */
.section--contact {
  background:
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(233, 111, 43, 0.14), transparent),
    var(--ink);
  border-top: 1px solid var(--line-dark);
}
.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.contact__title em { color: var(--amber); }
.contact__info {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--bone-dim);
}
.contact__info a {
  color: var(--amber);
  font-size: clamp(17px, 2vw, 22px);
  transition: opacity 0.2s;
}
.contact__info a:hover { opacity: 0.75; }
/* ---- wizard (typeform-style) ---- */
.wizard {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.wizard__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line-dark);
}
.wizard__progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.wstep { display: none; flex: 1; }
.wstep.is-active { display: block; }
.wstep__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 12px;
}
.wstep__q {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  margin-bottom: 24px;
}
.wstep__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wopt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.wopt:hover {
  border-color: rgba(233, 111, 43, 0.6);
  transform: translateX(4px);
}
.wopt b {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--bone-dim);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.wopt.is-selected { border-color: var(--amber); background: rgba(233, 111, 43, 0.1); }
.wopt.is-selected b { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.wfields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wfields label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wfields label span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.wfields input {
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.wfields input:focus { border-color: var(--amber); }
.wfields input::placeholder { color: rgba(168, 157, 135, 0.5); }
.wfields__error {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #e0492f;
}
.wfields.has-error .wfields__error { display: block; }
.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  min-height: 28px;
}
.wizard__back {
  background: none;
  border: none;
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 4px 0;
  visibility: hidden;
  transition: color 0.2s;
}
.wizard__back:hover { color: var(--amber); }
.wizard__back.is-visible { visibility: visible; }
.wizard__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone-dim);
  opacity: 0.7;
}
.wizard__hint b { color: var(--amber); font-weight: 400; }

/* ---- cal.com-style booking ---- */
.cal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.cal__meta {
  flex: 1 1 150px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--line-dark);
}
.cal__mark { width: 30px; height: 30px; color: var(--amber); margin-bottom: 4px; }
.cal__meta > b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}
.cal__metaline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--bone-dim);
}
.cal__picked {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  line-height: 1.5;
}
.cal__main { flex: 1.4 1 240px; min-width: 240px; }
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal__head b { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.cal__navbtn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--bone);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.cal__navbtn:hover { border-color: var(--amber); color: var(--amber); }
.cal__navbtn:disabled { opacity: 0.3; cursor: default; }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal__dow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  text-align: center;
  padding: 4px 0;
}
.cal__day {
  aspect-ratio: 1;
  border-radius: 50%;
  background: none;
  border: 1px solid transparent;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cal__day:hover { border-color: var(--amber); }
.cal__day.is-avail { background: rgba(233, 111, 43, 0.1); }
.cal__day.is-disabled {
  opacity: 0.25;
  cursor: default;
  background: none;
}
.cal__day.is-disabled:hover { border-color: transparent; }
.cal__day.is-today { border-color: var(--line-dark); }
.cal__day.is-selected { background: var(--amber); color: var(--ink); font-weight: 600; }
.cal__slots {
  flex: 1 1 130px;
  min-width: 130px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.cal__slots-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 10px;
}
.cal__slots-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.cal__slot {
  display: flex;
  gap: 8px;
}
.cal__slot-time {
  flex: 1;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 10px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.cal__slot-time:hover { border-color: var(--amber); }
.cal__slot.is-armed .cal__slot-time {
  flex: 0.9;
  border-color: var(--bone-dim);
  color: var(--bone-dim);
}
.cal__slot-confirm {
  display: none;
  flex: 1.1;
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.cal__slot-confirm:hover { background: var(--amber-soft); }
.cal__slot.is-armed .cal__slot-confirm { display: block; }
.cal__empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bone-dim);
  opacity: 0.7;
}

/* ---- booked / done ---- */
.wdone { padding-top: 12px; }
.wdone__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(143, 174, 111, 0.15);
  border: 1px solid var(--sage);
  color: var(--sage);
  font-size: 20px;
  margin-bottom: 18px;
}
.wdone__when {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber);
  margin-bottom: 8px;
}
.wdone__note {
  font-size: 14.5px;
  color: var(--bone-dim);
  margin-bottom: 20px;
}
.wdone__recap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wdone__recap span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  padding: 6px 12px;
  color: var(--bone-dim);
}

/* ============ FOOTER ============ */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: clamp(30px, 5vh, 60px) var(--pad-x) 30px;
  overflow: hidden;
}
.footer__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(90px, 19vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 228, 212, 0.22);
  user-select: none;
  margin-bottom: 30px;
  transition: color 1s;
}
.footer__word:hover { color: rgba(233, 111, 43, 0.12); }
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
}
.footer__links { display: flex; gap: 22px; }
.footer__links a:hover { color: var(--amber); }

/* ============ REVEAL DEFAULTS (no-JS safe) ============ */
[data-reveal] { will-change: transform, opacity; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.97);
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1001;
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; }
  .nav__links > a:not(.btn) { font-size: 20px; }
  .nav__burger { display: flex; }

  .hero { padding-bottom: 70px; }
  .hero__meta { display: none; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }

  .ba-card:nth-child(2) { margin-left: 0; }
  .ba-viewport { aspect-ratio: 4 / 3; }
  .ba-chips { margin-left: 0; width: 100%; }

  .about { grid-template-columns: 1fr; }
  .about__visual { max-width: 320px; }

  .contact { grid-template-columns: 1fr; }

  .platform-feats { grid-template-columns: 1fr; gap: 28px; }

  .step { grid-template-columns: auto 1fr; }
  .step__tag { grid-column: 2; justify-self: start; margin-top: 0; }
}

@media (max-width: 520px) {
  .ba-handle__grip { width: 38px; height: 38px; font-size: 15px; }
  .demo-panel__bar { gap: 10px; font-size: 10px; }
  .demo-panel__dots { display: none; }
  .demo-panel__foot { font-size: 10px; }
  .hero__title { font-size: clamp(40px, 12.5vw, 60px); }
  .marquee__track { font-size: 12px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain,
  .marquee__track,
  .newsite__ticker span,
  .oldsite__blink,
  .hero__scrollbar i,
  .flow-think u,
  .dot-live { animation: none !important; }
}