/* Inthub Services (IHS) hotsite — design tokens taken from
   design/design-system/styles.css (color ramps only; this page does not use
   the rest of the Broadsheet system). */
:root {
  --color-accent: #0088b0;
  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2: #d6006c;
  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  --c-bg: #fff;
  --c-bg-alt: #f3f5f7;
  --c-bg-dark: #0a0c10;
  --c-bg-dark-2: #15181d;
  --c-text: #15181d;
  --c-text-dark: #f3f5f7;
  --c-muted: #656b74;
  --c-muted-2: #8b919a;
  --c-muted-dark: #9ba2ac;
  --c-nav-link: #cdd3da;
  --c-border: #e3e7eb;
  --c-border-2: #cdd3da;
  --c-border-3: #dfe3e8;
  --c-success: #34c27a;
}

@keyframes ihsRaw { 0% { transform: translate3d(135px,0,6px) scale3d(0,0,0) } 6% { transform: translate3d(170px,0,6px) scale3d(1,1,1) } 40% { transform: translate3d(400px,0,6px) scale3d(1,1,1) } 48%, 100% { transform: translate3d(435px,0,6px) scale3d(0,0,0) } }
@keyframes ihsClean { 0%, 50% { transform: translate3d(435px,0,6px) scale3d(0,0,0) } 58% { transform: translate3d(475px,0,6px) scale3d(1,1,1) } 90% { transform: translate3d(700px,0,6px) scale3d(1,1,1) } 98%, 100% { transform: translate3d(735px,0,6px) scale3d(0,0,0) } }
@keyframes ihsPulse { 0%, 100% { box-shadow: 0 0 0 rgba(0,136,176,0) } 50% { box-shadow: 0 0 60px rgba(0,136,176,.55) } }
@keyframes ihsFlow { 0% { left: 0; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg); color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, h1, h2, h3, h4, p, a, span, li { font-family: inherit; }
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
input[type=range] { accent-color: var(--color-accent); }
img { max-width: 100%; }

.container { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.visually-hidden-defs { position: absolute; }

/* ---------- Header ---------- */
.topbar { display: none; background: rgba(10,12,16,.88); backdrop-filter: saturate(180%) blur(20px); }
.topbar nav { max-width: 1024px; margin: 0 auto; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 22px; font-size: 12px; }
.topbar a { color: var(--c-nav-link); }
.topbar a:hover { color: #fff; text-decoration: none; }
.brand-mark { display: flex; align-items: center; color: #f3f5f7; }
.brand-mark svg { width: 36px; height: 21px; }

.sitebar { position: sticky; top: 0; z-index: 20; background: rgba(247,249,251,.86); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08); }
.sitebar-row { max-width: 1024px; margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 20px; padding: 0 22px; }
.sitebar-row .brand-mark { margin-right: auto; color: var(--c-text); }
.sitebar-row .brand-mark svg { width: 44px; height: 25px; color: var(--c-text); fill: var(--c-text); }
.nav-desktop-links { display: none; gap: 20px; }
.sitebar-row .nav-desktop-links a { font-size: 12px; color: var(--c-text); }
.btn-cta { font-size: 14px; font-weight: 500; background: var(--color-accent); color: #fff; padding: 7px 16px; border-radius: 16px; }
.btn-cta:hover { text-decoration: none; background: var(--color-accent-600); }
.hamburger { width: 44px; height: 44px; margin: 0 -12px 0 -8px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--c-text); border-radius: 1px; transition: transform .25s; }
.hamburger[aria-expanded="true"] .bar1 { transform: translateY(3.25px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar2 { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu { display: none; flex-direction: column; padding: 4px 22px 24px; max-height: calc(100vh - 52px); overflow-y: auto; }
.mobile-menu.is-open { display: flex; }
.mobile-menu a { color: var(--c-text); font-size: 22px; font-weight: 600; letter-spacing: -.01em; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.mobile-menu a:hover { text-decoration: none; }

@media (min-width: 820px) {
  .topbar { display: block; }
  .nav-desktop-links { display: flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { background: var(--c-bg-dark); color: var(--c-text-dark); text-align: center; padding: 72px 22px 0; overflow: hidden; }
.hero-mark { width: 88px; height: 51px; color: var(--c-text-dark); fill: var(--c-text-dark); display: block; margin: 0 auto 18px; }
.hero-kicker { font-size: clamp(19px,2vw,24px); font-weight: 600; margin: 0; color: var(--c-text-dark); }
.hero h1 { font-size: clamp(48px,8vw,96px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; margin: 10px auto 0; max-width: 12ch; background: linear-gradient(90deg,var(--color-accent-400),var(--color-accent-2-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(19px,2vw,24px); line-height: 1.35; font-weight: 500; margin: 20px auto 0; max-width: 30ch; color: var(--c-muted-dark); }
.hero-ctas { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.btn-primary { background: var(--color-accent); color: #fff; font-size: 17px; padding: 12px 22px; border-radius: 12px; }
.btn-primary:hover { text-decoration: none; background: var(--color-accent-600); }
.btn-link-accent { font-size: 17px; color: var(--color-accent-400); }

.scene-wrap { max-width: 980px; margin: 56px auto 0; padding-bottom: 88px; }
.scene { position: relative; height: 440px; overflow: hidden; }
.scene-stage {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 260px; margin-left: -450px; margin-top: -105px;
  transform-style: preserve-3d; transform: scale(var(--scene-scale,1)) rotateX(60deg) rotateZ(-30deg);
}
.scene-grid { position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(circle, #2a3038 1.3px, transparent 1.6px) 0 0/26px 26px; }
.scene-track { position: absolute; top: 122px; width: 300px; height: 16px; border-radius: 8px; }
.scene-track.track-left { left: 150px; background: linear-gradient(90deg,#3a4049,var(--color-accent-700)); }
.scene-track.track-right { left: 450px; background: linear-gradient(90deg,var(--color-accent-700),var(--color-accent-2-700)); }
.scene-box { position: absolute; transform-style: preserve-3d; box-sizing: border-box; }
.scene-face-front { position: absolute; left: 0; transform-origin: bottom; transform: rotateX(-90deg); box-sizing: border-box; }
.scene-face-side { position: absolute; left: 0; top: 0; transform-origin: left; transform: rotateY(-90deg); box-sizing: border-box; }
.scene-face-top { position: absolute; inset: 0; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; letter-spacing: -.02em; box-sizing: border-box; }
.scene-box.pulse .scene-face-top { animation: ihsPulse 2s ease-in-out infinite; }
.scene-packet { position: absolute; left: 0; top: 115px; width: 30px; height: 30px; transform-style: preserve-3d; }
.scene-packet.raw { animation: ihsRaw 4s linear infinite; }
.scene-packet.raw.delay { animation-delay: -2s; }
.scene-packet.clean { animation: ihsClean 4s linear infinite; }
.scene-packet.clean.delay { animation-delay: -2s; }

/* Scene box placement/size (the 3 labeled boxes) */
.scene-box.box-oracle { left: 85px; top: 65px; width: 130px; height: 130px; }
.scene-box.box-snowflake { left: 685px; top: 65px; width: 130px; height: 130px; }
.scene-box.box-ihs { left: 375px; top: 55px; width: 150px; height: 150px; }

/* Scene face coloring/size by box kind */
.tone-gray.scene-face-front { top: 60px; width: 130px; height: 70px; background: #2a3038; }
.tone-gray.scene-face-side { width: 70px; height: 130px; background: #20252c; }
.tone-gray.scene-face-top { background: #3a4049; transform: translateZ(70px); }
.box-oracle .scene-face-top { font-size: 20px; }
.box-snowflake .scene-face-top { font-size: 15px; }

.tone-ihs.scene-face-front { top: 50px; width: 150px; height: 100px; background: var(--color-accent-700); }
.tone-ihs.scene-face-side { width: 100px; height: 150px; background: var(--color-accent-800); }
.tone-ihs.scene-face-top { background: var(--color-accent); transform: translateZ(100px); font-size: 44px; }

/* Packet faces (raw/clean flowing data cubes) */
.scene-packet .scene-face-front, .scene-packet .scene-face-side { top: 0; width: 30px; height: 30px; }
.scene-packet.raw .scene-face-front { background: #9ba2ac; }
.scene-packet.raw .scene-face-side { background: #8b919a; }
.scene-packet.raw .scene-face-top { background: #cdd3da; transform: translateZ(30px); }
.scene-packet.clean .scene-face-front { background: var(--color-accent-2-600); }
.scene-packet.clean .scene-face-side { background: var(--color-accent-2-700); }
.scene-packet.clean .scene-face-top { background: var(--color-accent-2-400); transform: translateZ(30px); }

.scene-steps { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; text-align: center; }
.scene-step-title { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--c-text-dark); }
.scene-step-num { width: 24px; height: 24px; border-radius: 50%; background: #2a3038; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.scene-step-desc { font-size: 14px; line-height: 1.45; color: var(--c-muted-dark); margin: 8px auto 0; max-width: 24ch; }
.scene-note { font-size: 13px; color: #8b919a; margin: 40px 0 0; }
.scene-note strong { color: var(--color-accent-400); font-weight: 600; }

/* ---------- Highlights carousel ---------- */
.highlights { background: var(--c-bg-alt); padding: 110px 0 120px; scroll-margin-top: 52px; }
.highlights-head { max-width: 1024px; margin: 0 auto; padding: 0 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.highlights-head h2 { font-size: clamp(40px,5vw,56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.07; margin: 0; }
.highlights-nav { display: flex; gap: 12px; }
.hl-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-border-3); color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s, background .2s; }
.hl-btn:hover { background: var(--c-border-2); }
.hl-btn:disabled { opacity: .35; cursor: default; }
.hl-scroll { cursor: grab; user-select: none; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 48px max(22px, calc((100% - 980px) / 2)) 8px; scrollbar-width: none; }
.hl-scroll::-webkit-scrollbar { display: none; }
.hl-scroll.dragging { cursor: grabbing; scroll-snap-type: none; }
.hl-card { flex: none; width: min(372px,82vw); height: 520px; border-radius: 28px; scroll-snap-align: center; padding: 40px 36px; display: flex; flex-direction: column; }
.hl-card.dark { background: #0a0c10; color: #f3f5f7; }
.hl-card.light { background: #fff; color: #15181d; }
.hl-card.dark .hl-kicker, .hl-card.dark .hl-stat { color: #9ba2ac; }
.hl-card.light .hl-kicker, .hl-card.light .hl-stat { color: #656b74; }
.hl-big.size-120 { font-size: 120px; }
.hl-big.size-130 { font-size: 130px; }
.hl-big.size-150 { font-size: 150px; }
.hl-big.size-170 { font-size: 170px; }
.hl-kicker { font-size: 14px; font-weight: 600; margin: 0; }
.hl-title { font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -.015em; margin: 10px 0 0; }
.hl-big { margin-top: auto; line-height: .9; font-weight: 700; letter-spacing: -.04em; background: linear-gradient(90deg,var(--color-accent-400),var(--color-accent-2-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-stat { font-size: 17px; line-height: 1.47; margin: 20px 0 0; }
.hl-dots { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.hl-dot { width: 28px; height: 28px; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hl-dot span { display: block; height: 8px; border-radius: 4px; width: 8px; background: #b6bdc6; transition: width .25s, background .25s; }
.hl-dot.is-active span { width: 22px; background: var(--c-text); }

/* ---------- Pricing simulator ---------- */
.pricing-sim { background: var(--c-bg); padding: 140px 22px; text-align: center; scroll-margin-top: 52px; }
.pricing-sim .eyebrow { font-size: 21px; font-weight: 600; margin: 0; color: var(--color-accent-2); }
.pricing-sim h2 { font-size: clamp(44px,6.5vw,80px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 8px auto 0; max-width: 14ch; }
.pricing-sim .lead { font-size: 21px; line-height: 1.38; color: var(--c-muted); max-width: 36ch; margin: 24px auto 0; }
.sim-panel { max-width: 820px; margin: 64px auto 0; text-align: left; }
.sim-row-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sim-row-label span:first-child { font-size: 17px; color: var(--c-muted); }
.sim-row-label span:last-child { font-size: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#sim-vol { width: 100%; margin: 18px 0 48px; height: 28px; }
.sim-bars { display: grid; gap: 28px; }
.sim-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; margin-bottom: 10px; }
.sim-bar-head span:first-child { color: var(--c-muted); }
.sim-bar-head span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-bar-track { height: 14px; border-radius: 7px; background: var(--c-bg-alt); overflow: hidden; }
.sim-bar-fill { width: 0; height: 100%; border-radius: 7px; transition: width .3s; }
.sim-bar-fill.saas { background: var(--c-muted-2); }
.sim-bar-fill.ihs { background: linear-gradient(90deg,var(--color-accent),var(--color-accent-2)); }
.sim-note { font-size: 12px; color: var(--c-muted-2); margin: 28px 0 0; line-height: 1.5; }
.ihs-label { font-weight: 600; color: var(--c-text); }
.ihs-value { font-weight: 600; color: var(--color-accent-700); }

/* ---------- CDC section ---------- */
.cdc { background: var(--c-bg-dark); color: var(--c-text-dark); padding: 140px 22px; scroll-margin-top: 52px; }
.cdc-head { max-width: 980px; margin: 0 auto; text-align: center; }
.cdc .eyebrow { font-size: 21px; font-weight: 600; margin: 0; color: var(--color-accent-400); }
.cdc h2 { font-size: clamp(44px,6.5vw,80px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 8px auto 0; max-width: 13ch; }
.cdc .lead { font-size: 21px; line-height: 1.38; color: var(--c-muted-dark); max-width: 40ch; margin: 24px auto 0; }
.cdc-feed { max-width: 780px; margin: 64px auto 0; background: var(--c-bg-dark-2); border-radius: 22px; padding: 12px 0; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 14px; }
.cdc-event { display: grid; grid-template-columns: 96px 84px minmax(0,1fr) auto; gap: 16px; padding: 11px 24px; align-items: center; }
.cdc-event .t { color: var(--c-muted-2); }
.cdc-event .kind { font-weight: 600; }
.cdc-event .kind.insert { color: var(--c-success); }
.cdc-event .kind.update { color: var(--color-accent-400); }
.cdc-event .kind.delete { color: var(--color-accent-2-400); }
.cdc-event .table { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-dark); }
.cdc-event .ms { color: var(--c-muted-2); }
.cdc-stats { max-width: 780px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); gap: 32px; text-align: center; }
.cdc-stat-num { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.cdc-stat-label { font-size: 14px; color: var(--c-muted-2); margin-top: 4px; }

/* ---------- Feature cards ---------- */
.features { background: var(--c-bg-alt); padding: 120px 22px; }
.features-grid { max-width: 1024px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 20px; }
.feature-card { background: var(--c-bg); border-radius: 28px; padding: 56px 44px; overflow: hidden; }
.feature-card .eyebrow { font-size: 17px; font-weight: 600; margin: 0; color: var(--color-accent-700); }
.feature-card h3 { font-size: clamp(36px,4vw,48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 8px 0 0; }
.feature-card p { font-size: 17px; line-height: 1.47; color: var(--c-muted); margin: 16px 0 0; max-width: 36ch; }
.code-snippet { margin-top: 40px; background: var(--c-bg-dark-2); color: var(--c-text-dark); border-radius: 16px; padding: 22px 24px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 13px; line-height: 1.75; }
.code-snippet .prompt { color: var(--c-muted-2); }
.code-snippet .hash { color: var(--color-accent-400); }
.infra-badges { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.infra-badges span { background: var(--c-bg-alt); border-radius: 12px; padding: 10px 18px; font-size: 15px; font-weight: 500; }
.feature-card.scale { background: var(--c-bg-dark); color: var(--c-text-dark); grid-column: 1 / -1; text-align: center; }
.feature-card.scale .eyebrow { color: var(--color-accent-400); }
.feature-card.scale h3 { font-size: clamp(40px,5.5vw,64px); letter-spacing: -.025em; margin: 8px auto 0; max-width: 16ch; }
.feature-card.scale p { font-size: 19px; line-height: 1.42; color: var(--c-muted-dark); margin: 18px auto 0; max-width: 42ch; }
.replica-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 620px; margin: 44px auto 0; }
.replica-grid span { width: 18px; height: 18px; border-radius: 5px; background: #2a3038; transition: background .3s; }
.replica-grid span.active { background: var(--color-accent-400); }
.replica-grid span.active.accent-2 { background: var(--color-accent-2-400); }

/* ---------- Comparison table ---------- */
.compare { background: var(--c-bg); padding: 140px 22px; scroll-margin-top: 52px; }
.compare h2 { font-size: clamp(40px,5vw,56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.07; margin: 0 auto; text-align: center; max-width: 18ch; }
.compare-table { max-width: 980px; margin: 64px auto 0; }
.compare-row { display: grid; grid-template-columns: minmax(0,1.1fr) repeat(3,minmax(0,1fr)); column-gap: 12px; border-bottom: 1px solid var(--c-border); }
.compare-row.head { position: sticky; top: 52px; z-index: 2; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border-2); }
.compare-row.head > div { padding: 16px 12px 14px; }
.compare-col-ihs { background: #eef6f9; border-radius: 14px 14px 0 0; }
.compare-col-ihs .col-name { font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--color-accent-700); }
.compare-col-sub { font-size: 12px; color: var(--c-muted-2); margin-top: 2px; }
.compare-col-sub.ihs { color: var(--c-muted); }
.col-name { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.compare-row:not(.head) .rowheader { padding: 20px 0; font-size: 15px; font-weight: 600; color: #3a4049; }
.compare-row:not(.head) .cell { padding: 20px 12px; font-size: 16px; line-height: 1.35; color: var(--c-muted); }
.compare-row:not(.head) .cell.ihs { background: #eef6f9; font-weight: 600; color: var(--c-text); }
.compare-foot { font-size: 12px; color: var(--c-muted-2); text-align: center; margin: 56px 0 0; }

@media (max-width: 819px) {
  .compare-row { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 6px; }
  .compare-row.head .rowheader-cell { display: none; }
  .compare-row .col-name { font-size: 15px; }
  .compare-row:not(.head) .rowheader { grid-column: 1 / -1; padding: 16px 0 6px; font-size: 12px; }
  .compare-row:not(.head) .cell { padding: 4px 10px 16px; font-size: 13px; }
}

/* ---------- Plans ---------- */
.plans { background: var(--c-bg-alt); padding: 140px 22px; scroll-margin-top: 52px; }
.plans-head { text-align: center; }
.plans-head h2 { font-size: clamp(40px,5vw,56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.07; margin: 0; }
.plans-head .lead { font-size: 21px; line-height: 1.38; color: var(--c-muted); margin: 14px auto 0; max-width: 34ch; }
.billing-toggle { display: inline-flex; background: var(--c-border); border-radius: 12px; padding: 4px; margin-top: 36px; }
.billing-toggle button { border: 0; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 22px; white-space: nowrap; border-radius: 12px; background: transparent; color: var(--c-text); }
.billing-toggle button.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.plans-grid { max-width: 1160px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr)); gap: 16px; }
.plans-pair { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 16px; }
.plan-card { background: var(--c-bg); border-radius: 22px; padding: 36px 28px 32px; display: flex; flex-direction: column; text-align: center; }
.plan-card.featured { outline: 2px solid var(--color-accent); }
.plan-badge { height: 22px; font-size: 12px; font-weight: 600; color: var(--color-accent-2); }
.plan-card h3 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; margin: 6px 0 0; }
.plan-pitch { font-size: 14px; line-height: 1.45; color: var(--c-muted); margin: 10px 0 0; min-height: 4.4em; }
.plan-price { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; line-height: 1.1; }
.plan-price.custom { font-size: 28px; }
.plan-note { font-size: 13px; color: var(--c-muted-2); margin-top: 6px; min-height: 2.8em; }
.plan-cta { display: block; background: var(--c-bg-dark-2); color: #fff; border-radius: 12px; padding: 11px 18px; font-size: 15px; margin-top: 18px; white-space: nowrap; }
.plan-cta:hover { text-decoration: none; opacity: .9; }
.plan-card.featured .plan-cta, .plan-card.custom .plan-cta { background: var(--color-accent); }
.plan-features { list-style: none; padding: 28px 0 0; margin: 28px 0 0; border-top: 1px solid var(--c-border); display: grid; gap: 14px; text-align: left; }
.plan-features li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.plan-features li::before { content: "✓"; color: var(--color-accent); font-weight: 700; flex: none; }
.plans-foot { font-size: 12px; color: var(--c-muted-2); text-align: center; margin: 32px 0 0; }

/* ---------- Contact ---------- */
.contact { background: var(--c-bg-dark); color: var(--c-text-dark); padding: 150px 22px; text-align: center; scroll-margin-top: 52px; }
.contact-mark { width: 78px; height: 45px; color: var(--c-text-dark); fill: var(--c-text-dark); display: block; margin: 0 auto 28px; }
.contact h2 { font-size: clamp(44px,6.5vw,80px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 0 auto; max-width: 14ch; }
.contact .lead { font-size: 21px; line-height: 1.38; color: var(--c-muted-dark); max-width: 36ch; margin: 24px auto 0; }
.contact-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 40px auto 0; }
.contact-form input { flex: 1; min-width: 240px; font-size: 17px; padding: 14px 20px; border-radius: 12px; border: 1px solid #3a4049; background: var(--c-bg-dark-2); color: var(--c-text-dark); }
.contact-form button { border: 0; cursor: pointer; background: var(--color-accent); color: #fff; font-size: 17px; padding: 14px 26px; border-radius: 12px; }
.contact-form button:hover { background: var(--color-accent-600); }
.contact-form button:disabled { opacity: .7; cursor: default; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-bg-alt); padding: 20px 22px 36px; font-size: 12px; color: var(--c-muted); }
.footer-row { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--c-border-2); padding-top: 18px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand svg { width: 19px; height: 11px; color: var(--c-muted); fill: var(--c-muted); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #3a4049; }