/* =================================================================
   RAY'S TECH SERVICES — v3 · "Editorial Cream"
   Warm cream paper, deep ink, terracotta accent, signal blue spot
   ================================================================= */

:root {
  /* SURFACES — warm cream, soft + readable */
  --paper:        #F1ECDF;
  --paper-2:      #ECE6D5;
  --paper-3:      #E5DCC4;
  --paper-soft:   #F6F2E6;
  --card:         #FFFDF6;

  /* INK */
  --ink:          #15140F;
  --ink-2:        #2A2820;
  --ink-3:        #4D4A3E;
  --ink-dim:      rgba(21,20,15,0.76);
  --ink-mute:     rgba(21,20,15,0.62);
  --ink-faint:    rgba(21,20,15,0.22);
  --ink-line:     rgba(21,20,15,0.10);
  --ink-line-2:   rgba(21,20,15,0.18);
  --ink-line-soft:rgba(21,20,15,0.05);

  /* ACCENT — terracotta (the editorial spot) */
  --ember:        #A94422;
  --ember-soft:   #E2906D;
  --ember-bg:     rgba(169,68,34,0.08);
  --ember-line:   rgba(169,68,34,0.28);

  /* SIGNAL — brand blue kept */
  --signal:       #1E40AF;
  --signal-soft:  #3B5BC9;
  --signal-bg:    rgba(30,64,175,0.06);
  --signal-line:  rgba(30,64,175,0.22);

  /* DARK INVERTED BLOCK */
  --dark:         #15140F;
  --dark-2:       #1F1E18;

  /* FONTS */
  --f-display:    'Instrument Serif', 'Times New Roman', serif;
  --f-sans:       'Geist', 'Inter Tight', system-ui, sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* LAYOUT */
  --pad:          clamp(20px, 4vw, 56px);
  --gutter:       clamp(16px, 3vw, 32px);
  --maxw:         1480px;
  --nav-h:        72px;
  --radius:       18px;
  --radius-lg:    28px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}
main:focus { outline: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--ember-soft);
}

/* Paper grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1, 0 0 0 0 0.09, 0 0 0 0 0.07, 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.085;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: multiply;
}

/* WRAPPER */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* =========== HEADER =========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--ink-line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.brand img {
  height: 34px;
  width: auto;
}
.brand-img--desktop { display: block; }
.brand-img--mobile { display: none; }
@media (max-width: 900px) {
  .brand-img--desktop { display: none; }
  .brand-img--mobile {
    display: block;
    height: 48px;
    width: auto;
    border-radius: 8px;
    overflow: hidden;
  }
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1a3d8f, #0c1f4a);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), transparent 60%);
}
.brand-mark svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.brand-name {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
  font-size: 1.15em;
  letter-spacing: -0.005em;
  padding: 0 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 9px 14px;
  border-radius: 100px;
  transition: color .15s, background .15s;
  position: relative;
}
.nav-links a:hover { color: var(--ink); background: rgba(21,20,15,0.05); }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: rgba(21,20,15,0.07);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 100px;
  border: 1px solid var(--ink-line-2);
  background: transparent;
  position: relative;
  z-index: 1001;
  padding: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hamburger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), top .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s ease;
}
.hamburger span:nth-child(1) { top: calc(50% - 5px); }
.hamburger span:nth-child(2) { top: calc(50% - 0.75px); }
.hamburger span:nth-child(3) { top: calc(50% + 4px); }
.hamburger.is-open span:nth-child(1) {
  top: calc(50% - 0.75px);
  transform: translateX(-50%) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); }
.hamburger.is-open span:nth-child(3) {
  top: calc(50% - 0.75px);
  transform: translateX(-50%) rotate(-45deg);
}

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 999;
  padding: 96px 32px 32px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.mobile-nav-close {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--ink-line-2);
  color: var(--ink);
  font-size: 1.1rem;
  border-radius: 100px;
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-links a {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  color: var(--ink);
  padding: 8px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mobile-nav-links a:hover { color: var(--ember); }
.mobile-nav-contact {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
}

/* =========== BUTTONS =========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .25s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 12px 28px -8px rgba(200,85,42,0.5);
}
.btn--ember {
  background: var(--ember);
  color: var(--paper);
  border-color: var(--ember);
}
.btn--ember:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-line-2);
}
.btn--ghost:hover { background: rgba(21,20,15,0.05); border-color: var(--ink-3); }
.btn--quiet {
  background: rgba(21,20,15,0.06);
  color: var(--ink);
  border-color: transparent;
}
.btn--quiet:hover { background: rgba(21,20,15,0.10); }
.btn--sm {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.82rem;
}
/* Airmail envelope button — pill shape, vertical layout scaled down */
.btn--mail {
  --_stripe: repeating-linear-gradient(
    -45deg,
    #c0392b 0px, #c0392b 5px,
    #fff    5px, #fff    10px,
    #1a3a7c 10px, #1a3a7c 15px,
    #fff    15px, #fff    20px
  );
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 28px 0;
  min-height: 58px;
  background:
    linear-gradient(175deg, #fdf8f2 0%, #f6edda 55%, #ede1c6 100%) padding-box,
    var(--_stripe) border-box;
  border: 3px solid transparent;
  color: #2a1f0e;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 0 rgba(0,0,0,0.10),
    0 6px 20px rgba(0,0,0,0.17),
    0 14px 42px -6px rgba(0,0,0,0.12);
  transition: transform .22s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
}
/* envelope flap — top triangle pointing down */
.btn--mail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(185deg, #e6d5a8 0%, #cfb97a 80%, #bfa660 100%);
  clip-path: polygon(0 0, 100% 0, 50% 86%);
  z-index: -1;
  pointer-events: none;
}
/* wax seal — centered on the fold point */
.btn--mail::after {
  content: 'R';
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #e05a5a 0%, #9b1c1c 52%, #6b0e0e 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.38),
    0 2px 6px rgba(0,0,0,0.42),
    0 3px 12px rgba(110,14,14,0.5);
  color: rgba(255,210,210,0.9);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.62rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  z-index: 1;
  pointer-events: none;
}
.btn--mail:hover {
  transform: translateY(-2px) rotate(0.5deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 3px 0 rgba(0,0,0,0.10),
    0 10px 28px rgba(0,0,0,0.22),
    0 20px 50px -8px rgba(0,0,0,0.16);
}

/* =========== TYPE =========== */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker--ember { color: var(--ember); }
.kicker .num {
  display: inline-block;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.kicker--ember .num { background: var(--ember); }
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  position: relative;
}
.dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.7); opacity: 0; }
}

/* HEADLINES */
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.96;
  color: var(--ink);
}
h1 { font-size: clamp(2.8rem, 7.5vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.8vw, 4rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; }

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--ember);
}
.display-sans {
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* SUB-HEADS */
.sub {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.lede {
  font-family: var(--f-sans);
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 56ch;
  text-wrap: pretty;
  letter-spacing: -0.005em;
}

.body-copy {
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.body-copy strong { color: var(--ink); font-weight: 600; }

/* =========== SECTION =========== */
.section { padding: clamp(64px, 7.5vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--paper-2); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.section--dark { background: var(--dark); color: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em { color: var(--ember-soft); }
.section--dark .lede { color: rgba(241,236,223,0.78); }
.section--dark .kicker { color: rgba(241,236,223,0.76); }
.section--dark .body-copy { color: rgba(241,236,223,0.82); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.section-head .kicker { margin-bottom: 14px; }
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}

/* =========== PAGE HERO (interior) =========== */
.page-hero {
  padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 100px);
  position: relative;
  border-bottom: 1px solid var(--ink-line);
}
.page-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.page-hero h1 {
  max-width: 14ch;
  margin-top: 28px;
  line-height: 1;
}
.page-hero .lede { margin-top: 44px; max-width: 60ch; }
.page-hero .meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--ink-line);
}
.page-hero .meta > div { display: grid; gap: 8px; }
.page-hero .meta .k {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.page-hero .meta .v {
  font-size: 0.96rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Editorial signal aside (used only on FAQ for now) */
.page-hero-aside {
  align-self: end;
  display: grid;
  gap: 18px;
}
.page-hero-aside .signal-card {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  background: var(--card);
  padding: 22px 24px;
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.page-hero-aside .signal-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--ink-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-line-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.55;
}
.page-hero-aside .signal-card > * { position: relative; }
.page-hero-aside .signal-vis-mini {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 80%, var(--ember-bg), transparent 60%),
    var(--paper-soft);
  border: 1px solid var(--ink-line);
  overflow: hidden;
}
.page-hero-aside .signal-vis-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-aside .signal-coord {
  position: absolute;
  bottom: 8px; left: 12px; right: 12px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: flex; justify-content: space-between;
  text-transform: uppercase;
}
.page-hero-aside .signal-coord .live { color: var(--ember); }
.page-hero-aside .aside-rows { display: grid; gap: 12px; }
.page-hero-aside .aside-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-line);
}
.page-hero-aside .aside-row:last-child { border-bottom: 0; padding-bottom: 0; }
.page-hero-aside .aside-row .k {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
  flex-shrink: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-hero-aside .aside-row .k .lucide {
  width: 13px;
  height: 13px;
  color: var(--ember);
  flex-shrink: 0;
}
.page-hero-aside .aside-row .v {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-hero-aside .aside-row .v em { font-style: italic; color: var(--ember); }
.page-hero-aside .aside-cta {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  transition: background .2s, transform .15s;
}
.page-hero-aside .aside-cta:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-1px); }
.page-hero-aside .aside-cta strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: -0.005em;
}
.page-hero-aside .aside-cta span {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241,236,223,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-hero-aside .aside-cta .lucide {
  width: 13px;
  height: 13px;
  color: var(--ember-soft);
}
.page-hero .hero-grid h1 { max-width: 100%; }
@media (max-width: 900px) {
  .page-hero .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-hero-aside { max-width: 460px; }
}
@media (max-width: 800px) {
  .page-hero .meta { grid-template-columns: 1fr; gap: 16px; }
}

/* =========== HOME HERO =========== */
.hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 7vw, 112px);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.hero-copy { display: grid; gap: 32px; align-content: end; }
.hero-meta {
  display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap;
}
.hero h1 {
  margin-bottom: -4px;
  line-height: 0.95;
}
.hero h1 em {
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.hero-side { display: grid; gap: 18px; align-content: end; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Browser-mock visual (the centerpiece) */
.browser-mock {
  position: relative;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--ink-line-2);
  box-shadow:
    0 1px 0 rgba(21,20,15,0.04),
    0 30px 60px -20px rgba(21,20,15,0.18),
    0 12px 24px -12px rgba(21,20,15,0.12);
  overflow: hidden;
  transform: rotate(-1.2deg);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.browser-mock:hover { transform: rotate(-0.4deg) translateY(-3px); }
.browser-mock .chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--paper-soft);
}
.browser-mock .chrome .dot-bar {
  display: flex; gap: 5px;
}
.browser-mock .chrome .dot-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-line-2);
}
.browser-mock .chrome .url {
  flex: 1;
  margin-left: 12px;
  padding: 5px 10px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-mock .stage {
  padding: 22px 22px 20px;
  display: grid;
  gap: 14px;
  min-height: 260px;
  background:
    radial-gradient(ellipse at 80% 0%, var(--ember-bg), transparent 60%),
    var(--card);
}
.bm-row { display: flex; gap: 8px; }
.bm-tag {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--ember);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ember-line);
  background: var(--ember-bg);
  padding: 3px 8px;
  border-radius: 4px;
}
.bm-title {
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.bm-title em { font-style: italic; color: var(--ember); }
.bm-line {
  display: flex; gap: 10px; align-items: center;
}
.bm-line .b {
  height: 8px; background: var(--ink-line);
  border-radius: 4px;
  flex: 1;
}
.bm-line .b.s { flex: 0.4; }
.bm-line .b.m { flex: 0.7; }
.bm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.bm-cards .c {
  aspect-ratio: 1.1 / 1;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--ink-line);
}
.bm-cards .c:nth-child(2) { background: var(--ink); }
.bm-actions { display: flex; gap: 8px; margin-top: 4px; }
.bm-actions .btn-mini {
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.65rem;
  font-weight: 500;
}
.bm-actions .btn-mini.alt {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-line-2);
}

/* Sticker */
.sticker {
  position: absolute;
  bottom: -28px;
  left: -28px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--paper);
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  z-index: 3;
  transform: rotate(-12deg);
  box-shadow:
    0 8px 24px -8px rgba(200,85,42,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.08);
  padding: 12px;
}
.sticker::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* Hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 18px;
  margin-top: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--ink-line-2);
  position: relative;
  z-index: 1;
}
.stat {
  padding: 28px 18px 0 0;
  display: grid;
  gap: 10px;
  border-right: 1px solid var(--ink-line);
  min-width: 0;
}
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-val {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.stat-val .unit { font-family: var(--f-sans); font-weight: 500; font-size: 0.42em; color: var(--ink-mute); letter-spacing: 0; }
.stat-val em { font-style: italic; color: var(--ember); }
.stat-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .stat { border-right: 1px solid var(--ink-line); padding-right: 16px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ink-line); padding-top: 28px; }
}

/* =========== BENTO GRID =========== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 14px;
}
.bento .cell {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.5vw, 36px);
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 18px;
  transition: transform .25s, box-shadow .25s, border-color .2s;
}
.bento .cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(21,20,15,0.18);
  border-color: var(--ink-line-2);
}
.bento .cell--wide { grid-column: span 4; }
.bento .cell--mid  { grid-column: span 3; }
.bento .cell--narrow { grid-column: span 2; }
.bento .cell--full { grid-column: span 6; }
.bento .cell--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bento .cell--ink h3 { color: var(--paper); }
.bento .cell--ink p { color: rgba(241,236,223,0.7); }
.bento .cell--ink .kicker { color: rgba(241,236,223,0.5); }
.bento .cell--ember {
  background: var(--ember);
  color: var(--paper);
  border-color: var(--ember);
}
.bento .cell--ember h3, .bento .cell--ember h2 { color: var(--paper); }
.bento .cell--ember h3 em, .bento .cell--ember h2 em { color: var(--paper); font-style: italic; }
.bento .cell--ember p { color: rgba(255,255,255,0.94); }
.bento .cell--ember .kicker { color: rgba(255,255,255,0.92); }

.bento .num {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bento .cell--ink .num, .bento .cell--ember .num { color: rgba(255,255,255,0.84); }

.bento h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.bento p {
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 36ch;
}

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .cell--wide { grid-column: span 4; }
  .bento .cell--mid  { grid-column: span 2; }
  .bento .cell--narrow { grid-column: span 2; }
  .bento .cell--full { grid-column: span 4; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .bento .cell--wide,
  .bento .cell--mid,
  .bento .cell--narrow,
  .bento .cell--full { grid-column: span 1; }
}

/* Decorative visuals for bento cells */
.viz-signal {
  position: absolute;
  inset: auto -20px -20px auto;
  width: 180px; height: 180px;
  opacity: 0.45;
  pointer-events: none;
}
.viz-signal svg { width: 100%; height: 100%; }

.viz-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(241,236,223,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(241,236,223,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.6;
}

/* =========== MARQUEE =========== */
.marquee {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 64px;
  animation: marquee 42s linear infinite;
  white-space: nowrap;
  padding-right: 64px;
}
.marquee-item {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  display: inline-flex;
  align-items: center;
  gap: 32px;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.marquee-item em { font-style: italic; color: var(--ember-soft); }
.marquee-item .sep {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ember);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========== SPLIT =========== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* =========== PROCESS / NUMBERED STEPS =========== */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.process-step {
  background: var(--paper-soft);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 36px);
  display: grid;
  gap: 18px;
  align-content: start;
  position: relative;
  transition: background .25s;
}
.process-step:hover { background: var(--card); }
.process-step .step-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 0.85;
  color: var(--ink);
  letter-spacing: -0.05em;
}
.process-step .step-num em { font-style: italic; color: var(--ember); }
.process-step h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.process-step h3 em { font-style: italic; color: var(--ember); }
.process-step p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.55; }
.process-step .tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  position: absolute;
  top: 20px; right: 20px;
}
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* =========== PULL QUOTE =========== */
.pullquote {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 72px);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.pullquote .quote-mark {
  position: absolute;
  top: 28px; left: 32px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--ember);
  letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase;
}
.pullquote blockquote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}
.pullquote blockquote em { font-style: italic; color: var(--ember); }
.pullquote cite {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.pullquote cite::before { content: ''; width: 32px; height: 1px; background: var(--ink-mute); }

.quote-sticker {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.01em;
  transform: rotate(-8deg);
  position: relative;
  flex-shrink: 0;
}
.quote-sticker::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255,255,255,0.45);
  border-radius: 50%;
  animation: seal-spin 25s linear infinite;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
.quote-sticker .inner {
  position: relative;
  z-index: 1;
  padding: 18px;
}
@media (max-width: 700px) {
  .pullquote { grid-template-columns: 1fr; }
  .quote-sticker { transform: rotate(-8deg) scale(0.85); margin-top: 8px; }
}

/* =========== SERVICE CARDS =========== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.svc-card {
  grid-column: span 3;
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  gap: 16px;
  align-content: start;
  position: relative;
  transition: transform .25s, box-shadow .25s, border-color .2s;
  min-height: 280px;
}
.svc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(21,20,15,0.18);
  border-color: var(--ink-line-2);
}
.svc-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  grid-column: span 6;
  flex-direction: row;
}
.svc-card.featured h3 { color: var(--paper); font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.svc-card.featured h3 em { color: var(--ember-soft); }
.svc-card.featured p { color: rgba(241,236,223,0.82); }
.svc-card.featured .price { color: rgba(241,236,223,0.74); border-top-color: rgba(241,236,223,0.12); }
.svc-card.featured .price strong { color: var(--paper); }
.svc-card.featured .icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: var(--ember-soft); }
.svc-card.featured .num { color: rgba(241,236,223,0.4); }

.svc-card .num {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  position: absolute;
  top: 24px; right: 28px;
}
.svc-card .badge {
  position: absolute;
  top: 24px; right: 28px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--ember);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.svc-card .badge--mute {
  background: rgba(21,20,15,0.08);
  color: var(--ink-3);
}
.svc-card .icon {
  width: 44px; height: 44px;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ember);
  font-size: 1.05rem;
  background: var(--paper-soft);
}
.svc-card .icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.svc-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.svc-card h3 em { font-style: italic; color: var(--ember); }
.svc-card p { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.55; }
.svc-card .price {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.svc-card .price strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .svc-card { grid-column: span 1; }
  .svc-card.featured { grid-column: span 2; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card, .svc-card.featured { grid-column: span 1; }
}

/* =========== PRICING =========== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.price-card {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: clamp(32px, 3vw, 44px);
  background: var(--card);
  display: grid;
  gap: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink-line-2);
  box-shadow: 0 18px 36px -16px rgba(21,20,15,0.18);
}
.price-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.price-card.featured h3 { color: var(--paper); }
.price-card.featured h3 em { color: var(--ember-soft); }
.price-card.featured .tier { color: rgba(241,236,223,0.74); }
.price-card.featured .recur { color: rgba(241,236,223,0.78); border-top-color: rgba(241,236,223,0.12); }
.price-card.featured .desc { color: rgba(241,236,223,0.84); }
.price-card.featured .features li { color: rgba(241,236,223,0.86); }
.price-card.featured .features li::before { background: var(--ember-soft); }
.price-card.featured .price-amt { color: var(--paper); }
.price-card.featured .price-amt .pre, .price-card.featured .price-amt em { color: var(--ember-soft); }
.price-card.featured .price-amt .unit { color: rgba(241,236,223,0.4); }
.price-card.featured .badge {
  background: var(--ember);
  color: var(--paper);
}
.price-card .tier {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.price-card .badge {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--ember-bg);
  border: 1px solid var(--ember-line);
  color: var(--ember);
  letter-spacing: 0.12em;
}
.price-card .price-amt {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 5.5vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.price-card .price-amt em { font-style: italic; color: var(--ember); font-size: 0.45em; }
.price-card .price-amt .pre { font-style: italic; color: var(--ember); font-size: 0.45em; }
.price-card .price-amt .unit { font-family: var(--f-sans); font-weight: 500; color: var(--ink-mute); font-size: 0.22em; letter-spacing: 0; }
.price-card .recur {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--ink-line);
  padding-top: 16px;
}
.price-card .desc { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.55; }
.price-card .features {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 12px;
}
.price-card .features li {
  font-size: 0.92rem;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.price-card .features li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 1.5px;
  background: var(--ember);
}
.price-card .cta-row { margin-top: auto; padding-top: 10px; }
.price-note {
  margin-top: 32px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* =========== FEATURE LIST (ledger) =========== */
.ledger {
  list-style: none;
  display: grid;
  gap: 0;
}
.ledger li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--ink-line);
  font-size: 1.02rem;
  color: var(--ink-2);
  line-height: 1.4;
  align-items: baseline;
  transition: padding-left .25s ease;
}
.ledger li.is-link { cursor: pointer; }
.ledger li.is-link:hover { padding-left: 10px; }
.ledger li.is-link:hover .check { transform: translateX(4px); color: var(--ember); }
.ledger li .check { transition: transform .25s ease, color .2s ease; }
.ledger li:last-child { border-bottom: 1px solid var(--ink-line); }
.ledger li .n {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  font-weight: 500;
}
.ledger li .check {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ember);
  font-size: 1.4rem;
}

/* =========== FAQ =========== */
.faq-list { display: grid; }
.faq-item {
  border-top: 1px solid var(--ink-line);
  transition: background .2s;
}
.faq-item:last-child { border-bottom: 1px solid var(--ink-line); }
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.2;
  cursor: pointer;
}
.faq-q em { font-style: italic; color: var(--ember); }
.faq-q .q-num {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  font-weight: 500;
  align-self: center;
}
.faq-q .toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--ink-line-2);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem;
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), background .2s, color .2s, border-color .2s;
  align-self: center;
  flex-shrink: 0;
}
.faq-item.open .faq-q .toggle {
  transform: rotate(45deg);
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-a[hidden] { display: none; }
.faq-a > div {
  overflow: hidden;
  padding-left: calc(2ch + 24px);
  padding-right: 60px;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p, .faq-a div.body {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
  padding-bottom: 32px;
  max-width: 72ch;
  text-wrap: pretty;
}
.faq-a strong { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .faq-q { grid-template-columns: 1fr auto; gap: 16px; }
  .faq-q .q-num { display: none; }
  .faq-a > div { padding-left: 0; padding-right: 0; }
}

/* =========== CTA BAND =========== */
.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(56px, 8vw, 130px) clamp(24px, 4vw, 80px);
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(200,85,42,0.18), transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(30,64,175,0.14), transparent 50%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .kicker {
  color: var(--ember-soft);
  margin: 0 auto 28px;
  justify-content: center;
  display: inline-flex;
}
.cta-band .kicker .num { background: var(--ember); color: var(--paper); }
.cta-band h2 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  margin-bottom: 28px;
  max-width: 18ch;
  margin-left: auto; margin-right: auto;
  color: var(--paper);
  line-height: 1;
}
.cta-band h2 em { color: var(--ember-soft); }
.cta-band .lede {
  margin: 0 auto 40px;
  color: rgba(241,236,223,0.7);
}
.cta-band .actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-band .btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.cta-band .btn--primary:hover {
  background: var(--ember);
  color: var(--paper);
  border-color: var(--ember);
}
.cta-band .btn--ghost {
  color: var(--paper);
  border-color: rgba(241,236,223,0.2);
}
.cta-band .btn--ghost:hover { background: rgba(241,236,223,0.06); border-color: rgba(241,236,223,0.4); }
.cta-band .footer-line {
  margin-top: 36px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: rgba(241,236,223,0.5);
  letter-spacing: 0.08em;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band .footer-line a:hover { color: var(--ember-soft); }

/* =========== FOOTER =========== */
.footer {
  border-top: 1px solid var(--ink-line);
  background: var(--paper-2);
  padding: clamp(64px, 7vw, 100px) 0 32px;
}
.footer-mark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-bottom: clamp(56px, 6vw, 80px);
  border-bottom: 1px solid var(--ink-line);
}
.footer-mark h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.footer-mark h2 em { font-style: italic; color: var(--ember); }
.footer-mark .footer-meta {
  display: grid; gap: 14px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(32px, 5vw, 72px);
  margin: 56px 0 48px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  margin-bottom: 22px;
}
.footer-brand img {
  height: 40px;
  width: auto;
  display: block;
}
.footer-brand .brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
}
.footer-brand .brand-mark svg { width: 16px; height: 16px; }
.footer-tagline {
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 36ch;
  line-height: 1.55;
}
.footer-col strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  padding: 5px 0;
  transition: color .15s;
}
.footer-col a:hover { color: var(--ember); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--ink-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
@media (max-width: 800px) {
  .footer-mark { grid-template-columns: 1fr; gap: 32px; }
  .footer-mark .footer-meta { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* =========== REVEAL =========== */
.reveal {
  opacity: 1;
  transition: opacity .6s ease, transform .6s ease;
}

/* =========== MOBILE TOGGLE =========== */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .hamburger { display: inline-flex; }
}

/* =========== DRONE PAGE =========== */
.drone-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--ink-line);
}
.drone-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('Images/rodion-kutsaiev-PEm_sLmJT-w-unsplash.jpg');
  background-size: cover;
  background-position: center 30%;
}
.drone-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21,20,15,0.3) 0%, rgba(21,20,15,0.65) 60%, var(--paper) 100%),
    linear-gradient(90deg, rgba(21,20,15,0.55) 0%, transparent 60%);
}
.drone-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 8rem 0 6rem;
  color: var(--paper);
}
.drone-hero h1 { color: var(--paper); max-width: 13ch; margin-bottom: 28px; font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: 0.95; }
.drone-hero h1 em { color: var(--ember-soft); }
.drone-hero .lede { color: rgba(241,236,223,0.78); max-width: 50ch; }
.drone-hero .hero-actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.drone-hero .kicker { color: rgba(241,236,223,0.65); }
.photo-credit {
  position: absolute;
  bottom: 12px; right: 18px; z-index: 3;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: rgba(241,236,223,0.4);
  letter-spacing: 0.04em;
}
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Drone teaser on home */
.drone-teaser {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.drone-teaser-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('Images/rodion-kutsaiev-PEm_sLmJT-w-unsplash.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.55;
}
.drone-teaser-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21,20,15,0.92) 0%, rgba(21,20,15,0.7) 55%, rgba(21,20,15,0.4) 100%);
}
.drone-teaser-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 5vw, 80px);
}
.drone-teaser-copy { display: grid; gap: 22px; align-content: start; }
.drone-teaser-copy h2 { max-width: 13ch; color: var(--paper); }
.drone-teaser-copy h2 em { color: var(--ember-soft); }
.drone-teaser-copy .lede { color: rgba(241,236,223,0.7); max-width: 52ch; }
.drone-teaser-copy .kicker { color: var(--ember-soft); }
.drone-teaser-stats {
  display: grid;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(14px);
}
.drone-teaser-stat {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
}
.drone-teaser-stat:last-child { border-bottom: 0; }
.drone-teaser-stat .v {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  color: var(--paper);
  line-height: 1;
}
.drone-teaser-stat .v .pre, .drone-teaser-stat .v em { font-style: italic; color: var(--ember-soft); }
.drone-teaser-stat .v .unit { font-family: var(--f-sans); font-weight: 500; color: rgba(255,255,255,0.4); font-size: 0.5em; letter-spacing: 0; }
.drone-teaser-stat .l {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: rgba(241,236,223,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .drone-teaser-inner { grid-template-columns: 1fr; }
}

/* Launch stats strip */
.launch-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--paper);
}
.launch-stat {
  padding: 32px clamp(16px, 2vw, 32px);
  border-right: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 8px;
}
.launch-stat:last-child { border-right: 0; }
.launch-stat .v {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.launch-stat .v em, .launch-stat .v .pre { font-style: italic; color: var(--ember-soft); }
.launch-stat .v .unit { font-family: var(--f-sans); font-weight: 500; color: rgba(255,255,255,0.4); font-size: 0.45em; letter-spacing: 0; }
.launch-stat .l {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: rgba(241,236,223,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .launch-strip { grid-template-columns: 1fr 1fr; }
  .launch-stat { border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .launch-stat:nth-child(2n) { border-right: 0; }
  .launch-stat:nth-child(n+3) { border-bottom: 0; }
}

/* Guarantee block */
.guarantee {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 80px);
  background: var(--card);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
.guarantee .seal {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  position: relative;
  flex-shrink: 0;
  transform: rotate(-8deg);
}
.guarantee .seal::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 50%;
  animation: seal-spin 25s linear infinite;
}
.guarantee .seal .inner { padding: 12px; }
.guarantee h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.08;
}
.guarantee h3 em { font-style: italic; color: var(--ember); }
.guarantee p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; max-width: 60ch; }
@media (max-width: 700px) {
  .guarantee { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .guarantee .seal { margin: 0 auto; }
  .guarantee p { margin-left: auto; margin-right: auto; }
}

/* Map */
.map-wrap {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--card);
}
#delivery-map { height: 480px; width: 100%; background: var(--paper-2); }
.map-legend {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.map-legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.legend-circle { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--signal); background: var(--signal-bg); }

/* Drone price card */
.drone-price-card {
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 64px);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 540px;
  margin: 0 auto;
}
.drone-price-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,85,42,0.22), transparent 60%);
  pointer-events: none;
}
.drone-price-card > * { position: relative; }
.drone-price-card .kicker { color: rgba(241,236,223,0.6); justify-content: center; display: inline-flex; }
.drone-price-card .price-main {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(4rem, 7vw, 6rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--paper);
  margin: 28px 0 8px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.drone-price-card .price-main em, .drone-price-card .price-main .pre { font-style: italic; color: var(--ember-soft); font-size: 0.45em; }
.drone-price-card .price-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(241,236,223,0.5);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.drone-price-card .price-sub {
  font-size: 0.96rem;
  color: rgba(241,236,223,0.7);
  margin: 4px auto 28px;
  max-width: 380px;
  line-height: 1.6;
}
.drone-price-card .features {
  text-align: left; max-width: 340px;
  margin: 24px auto 32px;
  list-style: none;
  display: grid;
  gap: 10px;
}
.drone-price-card .features li {
  padding-left: 22px;
  position: relative;
  color: rgba(241,236,223,0.78);
  font-size: 0.92rem;
  line-height: 1.45;
}
.drone-price-card .features li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 12px; height: 1.5px;
  background: var(--ember-soft);
}

/* FACTS grid (FAQ landing) */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fact {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 28px;
  display: grid; gap: 12px;
  align-content: start;
  transition: transform .25s, box-shadow .25s, border-color .2s;
  min-height: 200px;
}
.fact:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(21,20,15,0.18);
  border-color: var(--ink-line-2);
}
.fact .k {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fact .v {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fact .v em { font-style: italic; color: var(--ember); }
.fact .d { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.5; margin-top: auto; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .facts-grid { grid-template-columns: 1fr; } }

/* =========== ZOID CHAT WIDGET =========== */
.zoid {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 1050;
  font-family: var(--f-sans);
}

/* Launcher button */
.zoid-btn {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 12px 28px -8px rgba(21,20,15,0.45);
  transition: transform .2s ease, background .25s, box-shadow .25s;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zoid-btn:hover {
  transform: translateY(-2px) scale(1.04);
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 16px 36px -8px rgba(200,85,42,0.55);
}
.zoid-btn svg { width: 26px; height: 26px; }
.zoid-btn::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--paper);
  animation: zoidPulse 2.4s ease-in-out infinite;
}
@keyframes zoidPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.35); }
}
.zoid.open .zoid-btn { opacity: 0; transform: scale(0.4); pointer-events: none; }

/* Window */
.zoid-window {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 380px;
  height: 580px;
  max-height: calc(100vh - 44px);
  background: var(--card);
  border: 1px solid var(--ink-line-2);
  border-radius: 22px;
  box-shadow:
    0 24px 60px -10px rgba(21,20,15,0.35),
    0 6px 18px -8px rgba(21,20,15,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.zoid.open .zoid-window { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Header */
.zoid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.zoid-head::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(200,85,42,0.22), transparent 60%);
  pointer-events: none;
}
.zoid-id {
  display: flex; align-items: center; gap: 12px;
  position: relative;
  z-index: 1;
}
.zoid-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ember), #B43E1F);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
  position: relative;
}
.zoid-avatar::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #5BC97E;
  border: 2px solid var(--ink);
}
.zoid-id .who {
  display: grid;
  gap: 2px;
}
.zoid-id strong {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 6px;
}
.zoid-id strong .tag {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  font-weight: 500;
}
.zoid-id .status {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: rgba(241,236,223,0.55);
  letter-spacing: 0.04em;
}
.zoid-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--paper);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  position: relative;
  z-index: 1;
}
.zoid-close:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }

/* Messages */
.zoid-msgs {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 22px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper-soft);
}
.zoid-msgs::-webkit-scrollbar { width: 6px; }
.zoid-msgs::-webkit-scrollbar-thumb { background: var(--ink-line-2); border-radius: 3px; }
.zoid-msg {
  display: flex;
  gap: 10px;
  max-width: 90%;
  animation: zoidMsgIn .35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zoidMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.zoid-msg--bot {
  align-self: flex-start;
}
.zoid-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.zoid-msg-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ember), #B43E1F);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.zoid-msg--user .zoid-msg-avatar { display: none; }
.zoid-msg-bubble {
  background: var(--card);
  border: 1px solid var(--ink-line);
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  font-size: 0.91rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.zoid-msg--user .zoid-msg-bubble {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
}
.zoid-msg-bubble strong { font-weight: 600; }
.zoid-msg-bubble a {
  color: var(--ember);
  border-bottom: 1px solid var(--ember-line);
}

/* Typing indicator */
.zoid-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
}
.zoid-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  animation: zoidTyping 1.2s ease-in-out infinite;
}
.zoid-typing span:nth-child(2) { animation-delay: 0.15s; }
.zoid-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes zoidTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Suggested chips */
.zoid-suggest {
  padding: 6px 18px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--paper-soft);
  border-top: 1px solid var(--ink-line);
}
.zoid-chip {
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--card);
  border: 1px solid var(--ink-line);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.zoid-chip:hover {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
}

/* Input row */
.zoid-input {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px 14px;
  background: var(--card);
  border-top: 1px solid var(--ink-line);
}
.zoid-input input {
  flex: 1;
  background: var(--paper-soft);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  padding: 10px 16px;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
  min-width: 0;
}
.zoid-input input:focus {
  border-color: var(--ink-line-2);
  background: var(--card);
}
.zoid-input input::placeholder { color: var(--ink-mute); }
.zoid-input button {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
  font-size: 1.05rem;
}
.zoid-input button:hover:not(:disabled) { background: var(--ember); border-color: var(--ember); transform: scale(1.06); }
.zoid-input button:disabled { opacity: 0.4; cursor: not-allowed; }

.zoid-foot {
  padding: 0 14px 12px;
  background: var(--card);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.zoid-foot em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ember);
  letter-spacing: 0;
  text-transform: none;
}

/* Mobile: full-screen bottom sheet */
@media (max-width: 540px) {
  .zoid { bottom: 16px; right: 16px; }
  .zoid-btn { width: 52px; height: 52px; }
  .zoid-btn svg { width: 22px; height: 22px; }
  .zoid-window {
    position: fixed;
    bottom: 0; right: 0; left: 0; top: 0;
    width: auto; height: auto;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .zoid-head { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }
}

/* =========== PHOTO CELLS (bento) =========== */
.bento .cell--photo {
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  display: block;
}
.bento .cell--photo .img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento .cell--photo:hover .img { transform: scale(1.04); }
.bento .cell--photo .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
  color: var(--paper);
  background: linear-gradient(180deg, transparent 0%, transparent 20%, rgba(21,20,15,0.6) 55%, rgba(21,20,15,0.92) 100%);
}
.bento .cell--photo h3 { color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.bento .cell--photo p { color: rgba(241,236,223,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.bento .cell--photo .num { color: rgba(241,236,223,0.75); }

/* =========== IMAGE STRIP =========== */
.image-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  margin-top: 0;
}
.image-strip .ph {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--paper-3);
}
.image-strip .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.image-strip .ph:hover img { transform: scale(1.04); }
.image-strip .ph .cap {
  position: absolute;
  left: 14px; bottom: 12px;
  padding: 6px 12px;
  background: rgba(21,20,15,0.78);
  color: var(--paper);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
  .image-strip { grid-template-columns: 1fr 1fr; }
  .image-strip .ph:first-child { grid-column: span 2; }
}

/* Browser mock hero image */
.bm-hero {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-bottom: 4px;
}

/* =========== MOBILE FINE-TUNING =========== */
@media (max-width: 900px) {
  /* Hide wifi/signal decorations that collide with text on tablet/mobile */
  .viz-signal { display: none; }
}
@media (max-width: 760px) {
  /* Hide decorative stamps & overlays that don't translate to small screens */
  .quote-sticker { display: none; }
  .sticker {
    display: grid;
    width: 86px;
    height: 86px;
    bottom: -18px;
    left: -14px;
    font-size: 0.86rem;
    padding: 10px;
  }
  .pullquote { grid-template-columns: 1fr; }
  .bento .cell--wide.cell--ink h3 { max-width: 100%; }
  .page-hero { padding: clamp(48px, 8vw, 80px) 0 clamp(40px, 6vw, 60px); }
  .page-hero h1 { max-width: 100%; }
  .page-hero .meta { padding-top: 28px; margin-top: 36px; gap: 18px; }
  .hero { padding: clamp(40px, 6vw, 64px) 0 clamp(48px, 6vw, 80px); }
  .hero h1 { margin-bottom: 0; }
  .section-head { margin-bottom: 32px; }
  .pullquote { padding: 36px 24px 32px; }
  .pullquote .quote-mark { top: 18px; left: 24px; }
  .cta-band { padding: 56px 24px; border-radius: 18px; }
  .footer-mark h2 { font-size: clamp(2rem, 12vw, 3.6rem); }
  .browser-mock { transform: rotate(-0.5deg); }
  .stat-val { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .bento .cell { min-height: 180px; }
  .marquee-item { font-size: 1.4rem; gap: 18px; }
}
@media (max-width: 480px) {
  :root { --pad: 18px; }
  .nav { gap: 12px; }
  .brand-img--desktop { height: 28px; }
  .brand-img--mobile { height: 48px; }
  .nav-actions .btn { display: none; }
  .faq-q { font-size: 1.05rem; padding: 18px 0; gap: 14px; }
  .faq-q .toggle { width: 28px; height: 28px; font-size: 0.85rem; }
  .price-card { padding: 28px 24px; }
  .price-card .price-amt { font-size: 3.2rem; }
  .process-step { padding: 24px 22px; }
  .process-step .step-num { font-size: 2.4rem; }
  .svc-card { padding: 24px; min-height: auto; }
  .svc-card.featured { padding: 28px 24px; }
  .footer-mark { gap: 20px; }
  .footer-grid { margin: 32px 0; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  TWEAKS — Palette / Voice / Tempo                                 ║
   ║  Applied via [data-palette|voice|tempo] attrs on <html>           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─── PALETTE: BONE (cool newsprint, deep blue accent) ─── */
html[data-palette="bone"] {
  --paper:        #ECEAE2;
  --paper-2:      #E2DFD3;
  --paper-3:      #D6D2C0;
  --paper-soft:   #F3F0E8;
  --card:         #FCFBF7;
  --ink:          #0A0A0F;
  --ink-2:        #1F1F28;
  --ink-3:        #43434A;
  --ink-dim:      rgba(10,10,15,0.62);
  --ink-mute:     rgba(10,10,15,0.44);
  --ink-faint:    rgba(10,10,15,0.22);
  --ink-line:     rgba(10,10,15,0.10);
  --ink-line-2:   rgba(10,10,15,0.18);
  --ember:        #1E40AF;
  --ember-soft:   #5577CC;
  --ember-bg:     rgba(30,64,175,0.07);
  --ember-line:   rgba(30,64,175,0.28);
}

/* ─── PALETTE: MIDNIGHT (dark mode — paper-cream type on deep ink) ─── */
html[data-palette="midnight"] {
  --paper:        #15140F;
  --paper-2:      #1C1B14;
  --paper-3:      #232116;
  --paper-soft:   #1A1913;
  --card:         #1F1D16;
  --ink:          #F1ECDF;
  --ink-2:        #E8E1CD;
  --ink-3:        #C8BFA8;
  --ink-dim:      rgba(241,236,223,0.66);
  --ink-mute:     rgba(241,236,223,0.42);
  --ink-faint:    rgba(241,236,223,0.22);
  --ink-line:     rgba(241,236,223,0.10);
  --ink-line-2:   rgba(241,236,223,0.18);
  --ink-line-soft:rgba(241,236,223,0.05);
  --ember:        #E2906D;
  --ember-soft:   #F2B294;
  --ember-bg:     rgba(226,144,109,0.10);
  --ember-line:   rgba(226,144,109,0.30);
}
html[data-palette="midnight"] body::before { opacity: 0.04; mix-blend-mode: screen; }
html[data-palette="midnight"] .site-header {
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  border-color: var(--ink-line);
}
html[data-palette="midnight"] .section--dark { background: #0A0907; border-color: rgba(0,0,0,0.4); }
html[data-palette="midnight"] .bento .cell--ink {
  background: #0A0907;
  color: var(--ink);
  border-color: rgba(241,236,223,0.08);
}
html[data-palette="midnight"] .cta-band { background: #0A0907; }
html[data-palette="midnight"] .marquee {
  background: #0A0907;
  color: var(--ink);
  border-color: rgba(241,236,223,0.08);
}
html[data-palette="midnight"] .marquee-item { color: var(--ink); }
html[data-palette="midnight"] .footer { background: var(--paper-2); border-color: var(--ink-line); }
html[data-palette="midnight"] .price-card.featured,
html[data-palette="midnight"] .svc-card.featured { background: #0A0907; border-color: rgba(241,236,223,0.08); }
html[data-palette="midnight"] .browser-mock .chrome { background: var(--paper-soft); }
html[data-palette="midnight"] .browser-mock .chrome .url {
  background: var(--paper-3); border-color: var(--ink-line); color: var(--ink-2);
}
html[data-palette="midnight"] .browser-mock .stage {
  background:
    radial-gradient(ellipse at 80% 0%, var(--ember-bg), transparent 60%),
    var(--card);
}
html[data-palette="midnight"] .browser-mock { border-color: var(--ink-line); }
html[data-palette="midnight"] .browser-mock .bm-title { color: var(--ink); }
html[data-palette="midnight"] .bm-actions .btn-mini { background: var(--ink); color: var(--paper); }
html[data-palette="midnight"] .bm-actions .btn-mini.alt { background: transparent; color: var(--ink); border: 1px solid var(--ink-line); }
html[data-palette="midnight"] .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-palette="midnight"] .btn--primary:hover { background: var(--ember); border-color: var(--ember); color: var(--paper); }
html[data-palette="midnight"] .btn--quiet { background: rgba(241,236,223,0.08); color: var(--ink); }
html[data-palette="midnight"] .btn--ghost { color: var(--ink); border-color: var(--ink-line-2); }
html[data-palette="midnight"] .btn--ghost:hover { background: rgba(241,236,223,0.06); }
html[data-palette="midnight"] .nav-links a { color: var(--ink-3); }
html[data-palette="midnight"] .nav-links a:hover { color: var(--ink); background: rgba(241,236,223,0.05); }
html[data-palette="midnight"] .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(241,236,223,0.07); }
html[data-palette="midnight"] .hamburger { border-color: var(--ink-line-2); }
html[data-palette="midnight"] .hamburger span { background: var(--ink); }
html[data-palette="midnight"] .faq-q .toggle { color: var(--ink); border-color: var(--ink-line-2); }
html[data-palette="midnight"] .zoid-msgs { background: var(--paper-soft); }
html[data-palette="midnight"] .zoid-msg-bubble { background: var(--card); color: var(--ink); border-color: var(--ink-line); }
html[data-palette="midnight"] .zoid-msg--user .zoid-msg-bubble { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-palette="midnight"] .zoid-suggest { background: var(--paper-soft); }
html[data-palette="midnight"] .zoid-chip { background: var(--card); color: var(--ink-2); border-color: var(--ink-line); }
html[data-palette="midnight"] .zoid-input { background: var(--card); border-color: var(--ink-line); }
html[data-palette="midnight"] .zoid-input input { background: var(--paper-soft); color: var(--ink); border-color: var(--ink-line); }
html[data-palette="midnight"] .zoid-input button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-palette="midnight"] .zoid-window { background: var(--card); border-color: var(--ink-line); }
html[data-palette="midnight"] .zoid-foot { background: var(--card); }
html[data-palette="midnight"] .price-card.featured h3,
html[data-palette="midnight"] .svc-card.featured h3 { color: var(--ink); }
html[data-palette="midnight"] .svc-card.featured p { color: rgba(241,236,223,0.7); }
html[data-palette="midnight"] .svc-card.featured .icon { background: rgba(241,236,223,0.06); border-color: var(--ink-line-2); }

/* =========== EXPANDABLE LEDGER (inline accordion in dark sections) =========== */
.ledger--expand {
  list-style: none;
  display: grid;
  margin: 0;
  padding: 0;
}
.ledger--expand .lx-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 24px;
  border-top: 1px solid rgba(241,236,223,0.12);
  transition: background .2s;
}
.ledger--expand .lx-item:last-child { border-bottom: 1px solid rgba(241,236,223,0.12); }
.ledger--expand .lx-q {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
}
.ledger--expand .lx-q .n {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(241,236,223,0.74);
  font-weight: 500;
}
.ledger--expand .lx-q strong { color: var(--paper); font-weight: 600; }
.ledger--expand .lx-q .toggle {
  width: 32px; height: 32px;
  border: 1px solid rgba(241,236,223,0.18);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 1rem;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), background .2s, border-color .2s;
  align-self: center;
  flex-shrink: 0;
}
.ledger--expand .lx-item.open .lx-q .toggle {
  transform: rotate(45deg);
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
}
.ledger--expand .lx-a {
  grid-column: 2 / 3;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ledger--expand .lx-a[hidden] { display: none; }
.ledger--expand .lx-a > div {
  overflow: hidden;
}
.ledger--expand .lx-item.open .lx-a { grid-template-rows: 1fr; }
.ledger--expand .lx-a p {
  color: rgba(241,236,223,0.84);
  font-size: 0.95rem;
  line-height: 1.65;
  padding-bottom: 24px;
  max-width: 72ch;
  text-wrap: pretty;
}
.ledger--expand .lx-a p em { font-style: italic; color: var(--ember-soft); }
@media (max-width: 600px) {
  .ledger--expand .lx-item { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
  .ledger--expand .lx-q { grid-template-columns: 1fr auto; gap: 16px; }
  .ledger--expand .lx-q .n { display: none; }
  .ledger--expand .lx-a { grid-column: 1 / -1; }
  .ledger--expand .lx-a > div { padding-left: 0; padding-right: 0; }
}