/* Main landing page — flat design, mobile-first, fluid from 320px phones to 4K desktops.

   Colour and shape come from the active theme preset (see themes.css): every rule below
   reads a semantic token, so one page can be swapped between flat-light, dark-bold,
   minimal-warm and neo-brutalist without touching a single declaration here. Adding a
   preset is a data change, never a stylesheet change.

   Flat-design rules applied throughout:
   * No gradients, no glass blur, no coloured glows.
   * A card is a solid surface plus a 1px border; depth is the preset's --shadow-flat,
     which is `none` for the flat themes and a hard offset for neo-brutalist.
   * Accents appear as flat fills (--primary) or soft chips (--primary-soft). */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Top bar ---------- */
/* Deliberately sparse: the sales page still opens on the hero, so the bar carries the brand
   and the two things a reader wants next — the calculator and the studio's own site. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar-links { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The monogram is blue on transparency and needs no chip behind it. */
.topbar-logo { display: block; height: 30px; width: auto; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.topbar-link:hover { border-color: var(--primary); color: var(--text-main); }
.topbar-link .icon, .topbar-link .material-symbols-outlined { font-size: 16px; color: var(--primary); }
.topbar-link-domain { color: var(--primary); font-weight: 800; }

@media (max-width: 560px) {
  .topbar-brand-text { display: none; }
  .topbar-logo { height: 26px; }
}
@media (max-width: 380px) {
  .topbar-link-label { display: none; }
  .topbar-link { padding: 9px 12px; }
}
/* Anchor jumps must clear the sticky bar instead of hiding the section heading under it. */
section[id] { scroll-margin-top: 76px; }


/* ---------- Inline SVG icons ----------
   One stroked glyph set, rendered by app/services/icons.py. Sizing is in `em`, so every
   `font-size` rule that used to size a ligature sizes a glyph here too — and an icon is
   painted the moment its markup is parsed. */
.icon {
  font-size: 22px;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.15em;
  color: currentColor;
}

/* ---------- Buttons ---------- */
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 10px 16px; border-radius: var(--radius);
  border: var(--border-width) solid var(--border-color); background: var(--bg-card);
  color: var(--text-main); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-flat); transition: none;
}
.btn-mini:hover { background: var(--bg-card-hover); border-color: var(--border-strong); text-decoration: none; }
.btn-mini.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-mini.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-mini .icon, .btn-mini .material-symbols-outlined { font-size: 16px; }

/* ---------- Hero ---------- */
/* The promise and its proof, then a drawn product shot beside it. The shot is inline SVG
   rather than a screenshot: it costs no request, it re-skins with the theme, and it cannot
   go stale when the product changes. */
.hero { position: relative; overflow: hidden; padding: 56px 0 64px; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--text-main); opacity: .08; pointer-events: none;
}
.hero-inner {
  position: relative; display: grid; grid-template-columns: 1fr;
  gap: 42px; align-items: center; justify-items: center;
}
.hero-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.hero-visual { width: 100%; max-width: 540px; }
.hero-art { display: block; width: 100%; height: auto; }
.hero-art .ha-card { fill: var(--bg-card); stroke: var(--border-color); }
.hero-art .ha-line { stroke: var(--border-color); }
.hero-art .ha-bar { fill: var(--border-strong); opacity: .55; }
.hero-art .ha-soft { fill: var(--bg-subtle); }
.hero-art .ha-accent { fill: var(--primary); }
.hero-art .ha-accent-soft { fill: var(--primary-soft); }
.hero-art .ha-ok { fill: var(--secondary); }
/* Gradient stops are styled here rather than in the markup — see the note in the template. */
.hero-art .ha-from { stop-color: var(--primary); }
.hero-art .ha-to { stop-color: var(--secondary); }
.hero-art .ha-trend {
  stroke: var(--secondary); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Two columns only when there is room for both without squeezing the text. */
@media (min-width: 1040px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); justify-items: stretch; }
  .hero-copy { margin: 0; max-width: 620px; text-align: left; }
  .hero h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
  .hero-lead { margin: 0 0 30px; }
  .hero-actions, .hero-trust { justify-content: flex-start; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 22px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.hero-badge .icon, .hero-badge .material-symbols-outlined { font-size: 17px; }

.hero h1 {
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.accent-text { color: var(--primary); }

.hero-lead {
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0 auto 30px;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px;
}
.hero-cta { min-height: 50px; padding: 13px 24px; font-size: 14.5px; border-radius: var(--radius); }

.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.hero-trust li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-muted); }
.hero-trust .icon, .hero-trust .material-symbols-outlined { font-size: 18px; color: var(--secondary); flex: 0 0 auto; }

/* Shared row chrome for the niche device mock-up below. */
.mock-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
}
.mock-row:last-child { margin-bottom: 0; }
.mock-row .icon, .mock-row .material-symbols-outlined {
  font-size: 19px; color: var(--primary); flex: 0 0 auto;
  background: var(--primary-soft); border-radius: var(--radius-sm); padding: 3px;
}
.mock-row b { font-weight: 600; }
.mock-row span.meta { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }

/* ---------- Sections ---------- */
.section { padding: 60px 0; scroll-margin-top: 20px; }
.section-head { text-align: center; max-width: 54ch; margin: 0 auto 34px; }
.eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.section-title { font-size: clamp(1.5rem, 4.2vw, 2.35rem); font-weight: 800; margin-bottom: 12px; }
.section-sub { color: var(--text-muted); }

/* ---------- Niche tabs ---------- */
.tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 16px; margin: 0 -20px 24px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 10px 15px; border-radius: var(--radius-full); cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700;
}
.tab .icon, .tab .material-symbols-outlined { font-size: 18px; }
.tab:hover { color: var(--text-main); border-color: var(--border-strong); }
.tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.panel { display: none; }
.panel.is-active { display: block; }

.panel-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.panel-title { font-size: clamp(1.25rem, 3.4vw, 1.6rem); font-weight: 800; margin-bottom: 12px; }
.panel-text { color: var(--text-muted); margin-bottom: 22px; }

.features { display: grid; gap: 12px; }
.feature { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.feature .icon, .feature .material-symbols-outlined {
  font-size: 18px; color: var(--secondary); flex: 0 0 auto; margin-top: 2px;
}

/* Device mockup */
.mock {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-card);
  box-shadow: var(--shadow-flat); overflow: hidden;
}
.mock-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);
}
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock-url { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.mock-body { padding: 16px; }
.mock-hero {
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color);
}
.mock-hero .icon, .mock-hero .material-symbols-outlined {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 10px; font-size: 24px;
  border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary);
}
.mock-hero strong { display: block; font-size: 16px; margin-bottom: 4px; }
.mock-hero span { font-size: 12.5px; color: var(--text-muted); }
.mock-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.mock-tag {
  padding: 4px 11px; border-radius: var(--radius-full);
  background: var(--secondary-soft); color: var(--secondary);
  font-size: 11.5px; font-weight: 700;
}
.mock-rows { display: grid; gap: 9px; }
.mock-rows .mock-row { margin-bottom: 0; }

/* ---------- Case studies ---------- */
/* Real, live client sites instead of sample templates. A case is a link out, so the card
   is one big anchor target and carries the client's own accent on its mark. */
.cases { display: grid; grid-template-columns: 1fr; gap: 18px; }
.case-card {
  display: flex; flex-direction: column;
  padding: 22px;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-flat);
}
.case-card:hover { border-color: var(--primary); box-shadow: var(--shadow-flat-hover); }
.case-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.case-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px;
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  /* The client's two accents, set inline on the card. */
  background: linear-gradient(135deg, var(--case-a, var(--primary)), var(--case-b, var(--secondary)));
  color: #fff; font-size: 24px;
}
.case-id { min-width: 0; }
.case-industry {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary);
}
.case-name { font-size: 1.12rem; font-weight: 800; margin-bottom: 5px; }
.case-host {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
}
.case-host .icon, .case-host .material-symbols-outlined { font-size: 14px; }
.case-summary { color: var(--text-muted); font-size: 14.5px; margin-bottom: 14px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.case-tag {
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
}
.case-result {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; color: var(--secondary);
}
.case-result .icon, .case-result .material-symbols-outlined { font-size: 18px; }
.case-open { margin-top: auto; justify-content: center; }
/* A drawn wireframe of the live page, tinted with the case's own two accents. Art, not a
   screenshot: nothing of a client's page is ever embedded here. */
.case-shot {
  display: block; width: 100%; height: auto; margin-bottom: 16px;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.case-shot .cs-band { fill: var(--case-a, var(--primary)); }
.case-shot .cs-band-2 { fill: var(--case-b, var(--secondary)); }
.case-shot .cs-panel { fill: var(--bg-card); stroke: var(--border-color); }
.case-shot .cs-inner { fill: var(--bg-subtle); stroke: var(--border-color); }
.case-shot .cs-rule { stroke: var(--border-color); }
.case-shot .cs-line { fill: var(--border-strong); opacity: .5; }
.case-shot .cs-dot { fill: var(--border-strong); }
.cases-empty { text-align: center; color: var(--text-muted); }
.cases-note { margin-top: 22px; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.cases-note a { color: var(--primary); font-weight: 700; }

/* ---------- Price calculator ----------
   Two inputs on the left, the running total on the right. Every figure the visitor types is
   priced by the rules rendered into the page, so the arithmetic shown here is the arithmetic
   the platform quotes. */
.calc { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.calc-panel {
  padding: 24px 22px; border-radius: var(--radius-md);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-flat);
}
.calc-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 800; margin-bottom: 16px;
}
.calc-title .icon { font-size: 20px; color: var(--primary); flex: 0 0 auto; }
.calc-hint { color: var(--text-muted); font-size: 13px; margin: -8px 0 16px; }

/* The catalogue of things we build. A radio, not a list of buttons: the choice is one of
   six, and the browser's own control already answers arrow keys to a screen reader. */
.calc-types { display: grid; gap: 10px; }
.calc-type { position: relative; display: block; cursor: pointer; }
.calc-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-type-body {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  padding: 13px 15px; border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-color);
  background: var(--bg-soft);
  transition: border-color .16s ease, background .16s ease;
}
.calc-type input:checked + .calc-type-body {
  border-color: var(--primary); background: var(--primary-soft);
}
.calc-type input:focus-visible + .calc-type-body { outline: 2px solid var(--primary); outline-offset: 2px; }
.calc-type-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; }
.calc-type-name .icon { font-size: 18px; color: var(--primary); flex: 0 0 auto; }
.calc-type-sum { grid-column: 1; color: var(--text-muted); font-size: 12.5px; }
.calc-type-price { grid-row: 1 / span 2; grid-column: 2; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }

.calc-field { display: grid; gap: 6px; margin-bottom: 16px; }
.calc-field > span { font-size: 13.5px; font-weight: 700; }
.calc-field input {
  width: 100%; padding: 12px 14px; min-height: 46px;
  border-radius: var(--radius-sm); border: var(--border-width) solid var(--border-color);
  background: var(--bg-soft); color: var(--text);
  font-family: var(--mono); font-size: 15px;
}
.calc-field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.calc-field em { color: var(--text-dim); font-size: 12.5px; font-style: normal; font-family: var(--mono); }

/* The total. Sticky on a phone so the figure stays in view while the inputs are edited. */
.calc-total {
  padding: 22px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 2px solid var(--primary);
}
.calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; }
.calc-row + .calc-row { border-top: 1px solid var(--border-color); }
.calc-row span { color: var(--text-muted); font-size: 13.5px; }
.calc-row b { font-family: var(--mono); font-size: 15px; }
.calc-row.is-grand { margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--border-color); }
.calc-row.is-grand span { color: var(--text); font-weight: 700; }
.calc-row.is-grand b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.calc-note { margin-top: 14px; color: var(--text-dim); font-size: 12.5px; }
.calc-cta { margin-top: 16px; min-height: 48px; width: 100%; justify-content: center; }
/* A closing line under a section: centred, quiet, with one link in it. It used to be
   called .plans-note, from when the section above it was a table of subscription plans. */
.section-note { margin-top: 22px; text-align: center; color: var(--text-dim); font-size: 13px; }
.section-note a { color: var(--primary); font-weight: 700; }

/* ---------- Telegram alternative to the form ----------
   Deliberately the largest single control on the page: it is the escape hatch for a
   visitor the form itself would lose, so it must not read as a footnote. */
.alt-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin-top: 30px; padding: 26px 28px;
  border-radius: var(--radius-md);
  border: 2px solid var(--primary);
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--bg-card) 70%);
  box-shadow: var(--shadow-flat);
}
.alt-contact-copy { display: flex; align-items: flex-start; gap: 18px; flex: 1 1 360px; }
.alt-contact-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px;
  width: 54px; height: 54px; border-radius: var(--radius-full);
  background: var(--primary); color: var(--on-primary);
}
.alt-contact-mark .icon { font-size: 28px; }
.alt-contact h3 { font-size: 1.2rem; margin-bottom: 6px; }
.alt-contact p { color: var(--text-muted); font-size: 14px; }
.alt-contact-btn {
  flex: 0 0 auto; min-height: 58px; padding: 0 30px; gap: 10px;
  font-size: 15.5px; font-weight: 700; border-radius: var(--radius-full);
}
.alt-contact-btn .icon { font-size: 20px; }
.alt-contact-handle { font-weight: 600; opacity: .9; }
@media (max-width: 640px) {
  .alt-contact-btn { width: 100%; justify-content: center; }
}

/* ---------- Value cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.card {
  padding: 24px;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-flat);
}
.card:hover { border-color: var(--primary); box-shadow: var(--shadow-flat-hover); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: var(--radius-sm); background: var(--primary-soft);
}
.card-icon .icon, .card-icon .material-symbols-outlined { font-size: 24px; color: var(--primary); }
.card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.card-text { color: var(--text-muted); font-size: 14.5px; }
/* A card in the "what we build" grid carries a price beside its name and one way out, so
   the catalogue and the calculator above it quote the same figure. */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head .card-title { margin-bottom: 10px; }
.card-price { font-family: var(--mono); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--primary); white-space: nowrap; }
.card-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--primary); font-size: 13.5px; font-weight: 700;
}
.card-cta .icon { font-size: 17px; }
.card-cta:hover { text-decoration: underline; }

/* The "what we build" grid is its own layout: six services read as three rows of two or
   three, never as the four-column value strip. */
.services { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Telegram timeline ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
.step {
  display: flex; gap: 16px; padding: 22px;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-flat);
}
.step:hover { border-color: var(--primary); }.step-index {
  display: flex; align-items: center; justify-content: center; flex: 0 0 48px;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.step-index .icon, .step-index .material-symbols-outlined { font-size: 23px; color: var(--primary); }
.step-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 7px; }
.step-text { color: var(--text-muted); font-size: 14.5px; }
.step-num {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--secondary);
}

/* ---------- Theme presets demo ---------- */
/* A live preview: the container carries data-theme, so every token below it — and only
   below it — is the preset the visitor picked. */
.theme-switch {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 26px;
}
.theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-full); cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700;
}
.theme-btn:hover { border-color: var(--border-strong); color: var(--text-main); }
.theme-btn.is-active { border-color: var(--primary); color: var(--text-main); }
.theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-dot {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); flex: 0 0 auto;
}
.theme-btn.is-active .theme-dot { border-color: var(--primary); }

.theme-stage { max-width: 860px; margin: 0 auto; }
.theme-preview {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-main);
  color: var(--text-main);
  box-shadow: var(--shadow-flat);
  overflow: hidden;
}
.tp-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--bg-card); border-bottom: 1px solid var(--border-color);
}
.tp-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.tp-url { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.tp-body { padding: 26px 24px; display: grid; gap: 20px; }
.tp-hero { text-align: center; }
.tp-badge {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary);
  font-size: 11px; font-weight: 700;
}
.tp-title { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; margin-bottom: 9px; }
.tp-text { color: var(--text-muted); font-size: 14px; max-width: 46ch; margin: 0 auto 16px; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: var(--radius);
  border: var(--border-width) solid var(--border-color); background: var(--bg-card);
  color: var(--text-main); font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-flat);
}
.tp-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tp-card {
  display: grid; gap: 3px; padding: 16px;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-flat);
}
.tp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 7px;
  border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary);
}
.tp-icon .icon, .tp-icon .material-symbols-outlined { font-size: 19px; }
.tp-card b { font-size: 14px; }
.tp-card span:last-child { font-size: 12.5px; color: var(--text-muted); }
.tp-form {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 16px; border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-card);
}
.tp-input {
  padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-text);
  font-size: 13px;
}
.tp-submit { align-self: start; }
.theme-note { margin-top: 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 11px; }
.faq-item {
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-flat); overflow: hidden;
}
.faq-item.is-open { border-color: var(--primary); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 17px 20px; cursor: pointer;
  background: none; border: 0; text-align: left;
  color: var(--text-main); font-family: inherit; font-size: 15px; font-weight: 700;
}
.faq-q:hover { color: var(--primary); }
.faq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.faq-icon { font-size: 20px; color: var(--primary); flex: 0 0 auto; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; }
.faq-a-inner { padding: 0 20px 20px; color: var(--text-muted); font-size: 14.5px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border-color); background: var(--bg-card); padding: 40px 0; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; }
.footer-mark {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary);
}
.footer-mark .icon, .footer-mark .material-symbols-outlined { font-size: 20px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: var(--secondary-soft); color: var(--secondary);
  font-size: 12.5px; font-weight: 700;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); }
.footer-note { margin-top: 22px; color: var(--text-dim); font-size: 12.5px; }

/* ---------- Domain instructions (/domain) ----------
   The one page a client reads with a registrar's panel open in the next tab, so the two
   values they must retype are monospaced, large, and copyable. */
.dns-chip {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: var(--bg-card); border: var(--border-width) solid var(--border-color);
}
.dns-chip .icon { font-size: 22px; color: var(--primary); }
.dns-chip strong { display: block; font-family: var(--mono); font-size: 15px; }
.dns-chip span { font-size: 13px; color: var(--text-muted); }

.dns-card { margin-bottom: 18px; }
.dns-card h2 { font-size: 1.15rem; margin-bottom: 12px; }
.dns-card p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 12px; }
.dns-card p:last-child { margin-bottom: 0; }
.dns-card code, .dns-list code, .dns-note code, .step-text code {
  padding: 1px 6px; border-radius: 5px;
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  font-size: .9em; color: var(--text-main);
}

/* The steps are an ordered list here, so the browser's own numbering is dropped. */
.dns-steps { margin: 18px 0; padding: 0; list-style: none; }
.dns-steps .step-text { margin-bottom: 12px; }

.dns-list { display: grid; gap: 9px; margin: 0 0 12px; padding-left: 20px; list-style: none; }
.dns-list li { position: relative; color: var(--text-muted); font-size: 14px; }
.dns-list li::before {
  content: ""; position: absolute; left: -18px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.dns-note {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--text-main); font-size: 13.5px;
}

.dns-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.dns-table {
  width: 100%; border-collapse: collapse;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 14px;
}
.dns-table th, .dns-table td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--border-color); }
.dns-table th {
  background: var(--bg-subtle); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.dns-table tr:last-child td { border-bottom: 0; }
.dns-table code { background: none; border: 0; padding: 0; }
.dns-table .dns-ip { font-weight: 700; color: var(--primary); }

.dns-copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px; font-size: 13.5px; color: var(--text-muted);
}
.dns-copy-btn { min-height: 44px; }
.dns-copy-btn code { background: none; border: 0; padding: 0; font-weight: 700; }
.dns-copy-status { color: var(--secondary); font-size: 12.5px; }

.dns-faq { display: grid; gap: 6px; }
.dns-faq dt { font-weight: 700; font-size: 14.5px; margin-top: 10px; }
.dns-faq dd { color: var(--text-muted); font-size: 14px; }

.dns-foot { margin-top: 24px; text-align: center; color: var(--text-dim); font-size: 13px; }
.dns-foot a { color: var(--primary); font-weight: 700; }

/* ---------- Offer strip ---------- */
/* The offer, stated once, immediately under the hero: price, what it includes, the three
   facts a visitor checks next, and the one primary action. */
.offer-strip {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.offer-strip-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-top: 18px; padding-bottom: 18px;
}
.offer-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
/* Every tier is priced in the strip, base first, so a visitor who only wants hosting sees
   their price without scrolling down to the table. */
.offer-plans { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.offer-plan {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 7px;
  padding: 7px 14px; border-radius: var(--radius);
  border: var(--border-width) solid var(--border-color); background: var(--bg-card);
}
.offer-plan b { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; }
.offer-plan small { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.offer-plan em {
  flex-basis: 100%; font-style: normal;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim);
}
.offer-plan.is-featured { border-color: var(--primary); }
.offer-plan.is-featured em { color: var(--primary); }
.offer-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.offer-price small { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.offer-desc { color: var(--text-muted); font-size: 14px; max-width: 56ch; }
.offer-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-muted); font-size: 13px; }
.offer-facts span { display: inline-flex; align-items: center; gap: 6px; }
.offer-facts .icon, .offer-facts .material-symbols-outlined { font-size: 17px; color: var(--secondary); }
.offer-cta { justify-content: center; min-height: 46px; }

/* ---------- Contact / how to start ---------- */
.hero-note { margin-top: 18px; font-size: 13px; color: var(--text-dim); }
.hero-note a { color: var(--primary); font-weight: 700; }

.section-contact { padding-bottom: 90px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.contact-copy .section-head { text-align: left; margin: 0 0 20px; max-width: none; }
.contact-copy .section-title { margin-bottom: 12px; }
.contact-copy .section-sub { margin-bottom: 20px; }
/* The three "how we start" steps sit in the second column as a stack, whatever the
   breakpoint — the global `.steps` grid would make them three slivers inside it. */
.contact-grid .steps { grid-template-columns: 1fr; }
.contact-alt {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-color);
  font-size: 14px; color: var(--text-muted);
}
.contact-alt a { color: var(--primary); font-weight: 700; }

/* Mobile-only sticky call to action. `hidden` in the markup so it can never cover
   content without scripting, and shown only once the visitor has scrolled past the hero. */
.mobile-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px; border-radius: var(--radius-full);
  background: var(--primary); color: var(--on-primary);
  font-weight: 800; font-size: 15px; box-shadow: var(--shadow-flat-hover);
}
.mobile-cta.is-visible { display: inline-flex; }
.mobile-cta .icon, .mobile-cta .material-symbols-outlined { font-size: 20px; }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .cases { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* Two columns from tablet up: the catalogue beside the figures it produces. */
  .calc { grid-template-columns: 1.15fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .tp-grid { grid-template-columns: repeat(3, 1fr); }
  .tp-form { grid-template-columns: 1fr auto; align-items: center; }
  .tabs { flex-wrap: wrap; justify-content: center; overflow-x: visible; margin: 0 0 30px; padding: 0; }
  /* The sticky mobile bar is a phone affordance; on a tablet or desktop the hero CTA is
     always in reach, so it would only cover content. */
  .mobile-cta { display: none !important; }
}
@media (min-width: 1024px) {
  .hero { padding: 72px 0 80px; }
  .calc-total { position: sticky; top: 90px; }
  .panel-grid { grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 48px; }
  .offer-strip-inner { flex-direction: row; align-items: center; gap: 26px; }
  .offer-main { flex-direction: column; gap: 2px; }
  .offer-facts { margin-left: auto; }
  .offer-cta { flex: 0 0 auto; }
}
@media (min-width: 900px) {
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-icon { transition: none; }
}