/* ==========================================================================
   DozeHost — Components
   ========================================================================== */

/* ---------- Buttons (SiteGround geometry: pill, 40px / 48px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  border: 0; border-radius: var(--radius-pill);
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--m { height: 40px; padding-inline: var(--sp-4); font-size: var(--text-2xs-size); }
.btn--l { height: 48px; padding-inline: var(--sp-5); font-size: var(--text-m-size); }

.btn--dark     { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: #000; }
.btn--contrast { background: var(--c-white); color: var(--c-black); }
.btn--contrast:hover { background: #ede9fe; color: #4f46e5; }
.btn--accent   { background: var(--c-accent); color: var(--c-on-accent); }
.btn--accent:hover { background: var(--c-accent-hover); }
.btn.btn--outline  { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.btn.btn--outline:hover { background: var(--c-surface-subtle); }
.btn--block { width: 100%; }
/* Dark indigo — "best value" plan CTA only, kept off the sitewide monochrome accent on purpose.
   Matches the brand gradient used elsewhere (#4f46e5 / #7c3aed) instead of clashing with it. */
.btn--indigo   { background: linear-gradient(135deg, #1e1b4b, #6d28d9); color: #ffffff; }
.btn--indigo:hover { background: linear-gradient(135deg, #17143a, #5b21b6); }

/* ---------- Eyebrow / pill label ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-xs);
}
.eyebrow--glass { background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-border-strong); }
.eyebrow--tint  { background: var(--c-accent-tint); color: var(--c-ink); }

/* ---------- Hero ---------- */
.hero {
  /* Light surface — see --hero-bg-* in tokens.css */
  background:
    radial-gradient(80% 60% at 85% 20%, rgba(139, 92, 246, 0.07), transparent 70%),
    radial-gradient(60% 50% at 10% 80%, rgba(59, 130, 246, 0.06), transparent 60%),
    linear-gradient(160deg, var(--hero-bg-from) 0%, var(--hero-bg-to) 100%);
  color: var(--c-ink);
  /* header sits inline above, so pad for its height */
  padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-12);
  margin-top: calc(var(--header-h) * -1);
  position: relative; overflow: hidden;
}
/* Dot-grid texture. Two radial layers offset half a cell make a denser weave.
   Masked so the dots fade before they reach the text — kept faint on purpose. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(99, 102, 241, 0.12) 1px, transparent 1.4px),
    radial-gradient(rgba(99, 102, 241, 0.07) 1px, transparent 1.4px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 32%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 100% at 78% 32%, #000 0%, transparent 68%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 50% -320px auto;
  width: 900px; height: 640px; transform: translateX(50%);
  background: radial-gradient(closest-side, var(--hero-glow), transparent 70%);
  pointer-events: none;
  animation: hero-glow 9s var(--ease) infinite;
}
@keyframes hero-glow {
  0%, 100% { opacity: 0.75; transform: translateX(50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(50%) scale(1.08); }
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 820px; margin-inline: auto; }
.hero__title { margin-top: var(--sp-4); }
.hero__sub { margin-top: var(--sp-4); color: var(--c-gray); font-size: 18px; line-height: 30px; }
.hero__cta { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.hero__meta {
  margin-top: var(--sp-6); display: flex; gap: var(--sp-5);
  justify-content: center; flex-wrap: wrap;
  color: var(--c-gray);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  font-family: var(--font-heading);
}
.hero--page { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-10); }

/* ---------- Hero: split layout (home) ----------
   SiteGround's hero is two-column with left-aligned copy and a photo on the
   right, not a centered stack. */
.hero--split { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-10); }
.hero--split .hero__inner {
  /* keep the .container width — only drop the narrow centred-hero cap */
  max-width: var(--container); text-align: left;
  display: grid; grid-template-columns: 1.3fr 0.7fr;
  gap: var(--sp-9); align-items: center;
}
.hero__copy { max-width: 620px; }
.hero--split .hero__title { margin-top: var(--sp-4); }
.hero--split .hero__sub { max-width: 480px; }
.hero--split .hero__cta { justify-content: flex-start; margin-top: var(--sp-6); }

/* Quick-link chips under the CTA */
.hero__quicklinks { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.quicklink {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quicklink:hover { background: var(--c-surface); border-color: rgba(0, 0, 0, 0.22); }
.quicklink__icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-s);
  background: var(--c-accent-soft); color: var(--c-accent);
  display: grid; place-items: center;
}
.quicklink__label {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-2xs-size);
}
.quicklink__arrow { margin-left: auto; opacity: 0.5; transition: transform var(--dur) var(--ease); }
.quicklink:hover .quicklink__arrow { transform: translateX(3px); opacity: 1; }

/* ---------- Hero: dark variant (homepage only) ----------
   Deep navy/indigo, not full black, so the existing violet/blue glows and
   the white photo card still pop. Scoped to .hero--split so inner pages
   (.hero--page) stay on the light surface. */
.hero--split {
  background:
    radial-gradient(80% 60% at 85% 15%, rgba(139, 92, 246, 0.22), transparent 65%),
    radial-gradient(60% 55% at 8% 85%, rgba(59, 130, 246, 0.16), transparent 60%),
    linear-gradient(160deg, #100d24 0%, #1b1440 55%, #221850 100%);
  color: #fff;
}
.hero--split::before { opacity: 0.6; }
.hero--split .eyebrow--glass {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.hero--split .hero__title { color: #fff; }
.hero--split .hero__sub { color: rgba(255, 255, 255, 0.68); }
.hero--split .btn--outline { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.hero--split .btn--outline:hover { background: rgba(255, 255, 255, 0.08); }
.hero--split .quicklink {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Hero: dark centered variant (content pages like Blog) ----------
   Same gradient as hero--split but for a single centered hero--page hero,
   no split columns needed. */
.hero--page.hero--dark {
  background:
    radial-gradient(80% 60% at 85% 15%, rgba(139, 92, 246, 0.22), transparent 65%),
    radial-gradient(60% 55% at 8% 85%, rgba(59, 130, 246, 0.16), transparent 60%),
    linear-gradient(160deg, #100d24 0%, #1b1440 55%, #221850 100%);
  color: #fff;
}
.hero--page.hero--dark .eyebrow--glass {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.hero--page.hero--dark .hero__title { color: #fff; }
.hero--page.hero--dark .hero__sub { color: rgba(255, 255, 255, 0.68); }
.hero--split .quicklink:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.hero--split .quicklink__icon { background: rgba(255, 255, 255, 0.12); color: #c7b8ff; }
.hero--split .quicklink__label { color: #fff; }
.hero--split .quicklink__arrow { color: #fff; }
.hero--split .hero__rating { border-top-color: rgba(255, 255, 255, 0.14); }
.hero--split .rating__text { color: rgba(255, 255, 255, 0.68); }
.hero--split .rating__text strong { color: #fff; }

/* Hero media */
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; max-height: 560px;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-xl);
  position: relative; z-index: 1;
}
/* Transparent cutout (no card frame, no crop) — sized up a bit vs the photo card */
.hero__media--cutout img {
  width: 118%; max-width: 118%; aspect-ratio: auto; max-height: 640px;
  object-fit: contain; object-position: bottom center;
  border-radius: 0; margin-left: -9%;
}
/* White card behind the cutout so a purple sweater never blends into the purple hero bg */
.hero__media__panel {
  position: absolute; z-index: 0;
  top: 2%; bottom: 0; left: -6%; right: -6%;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-l);
}
.hero__media::before {
  content: ""; position: absolute; inset: -12%; z-index: 0;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.10), transparent 72%);
  pointer-events: none;
  animation: hero-media-glow 8s var(--ease) infinite;
}
/* Decorative arc ring behind the photo. Conic-gradient segments masked into a
   ring — reads as intentional design, not a render glitch like thin dashes do. */
.hero__media::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 84%; aspect-ratio: 1; right: -11%; top: -10%;
  border-radius: 50%;
  background: conic-gradient(
    from 30deg,
    rgba(99, 102, 241, 0.14) 0deg,
    rgba(99, 102, 241, 0.07) 45deg,
    transparent 45deg,
    transparent 110deg,
    rgba(139, 92, 246, 0.12) 110deg,
    rgba(139, 92, 246, 0.06) 165deg,
    transparent 165deg,
    transparent 210deg,
    rgba(99, 102, 241, 0.14) 210deg,
    rgba(99, 102, 241, 0.07) 270deg,
    transparent 270deg,
    transparent 330deg,
    rgba(139, 92, 246, 0.10) 330deg,
    rgba(139, 92, 246, 0.05) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: hero-spin 36s linear infinite;
}
/* Second ring — thinner, larger, slower. No mask needed: a simple border circle. */
.hero__media .hero__deco::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 96%; aspect-ratio: 1; right: -14%; top: -14%;
  border: 1.5px solid rgba(99, 102, 241, 0.10);
  border-radius: 50%;
  animation: hero-spin 52s linear infinite reverse;
}
@keyframes hero-media-glow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2%, -3%) scale(1.05); }
}
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* Free-floating decorative chips/dots around the photo. Markup-driven so there
   can be several — pseudo-elements only give two. */
.hero__deco { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hero__deco span {
  position: absolute; display: block;
  animation: hero-float var(--t, 6s) var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
.hero__deco .deco--dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}
.hero__deco .deco--ring {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}
.hero__deco .deco--card {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 14px;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.deco--card.deco--a { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.deco--card.deco--d { background: linear-gradient(135deg, #f59e0b, #d97706); }
.deco--a { top: 10%; left: 7%; --t: 7s; }
.deco--b { top: 34%; right: 5%; --t: 5.5s; --d: -1.5s; }
.deco--c { bottom: 24%; left: 5%; --t: 6.5s; --d: -0.8s; }
.deco--d { top: 60%; right: 9%; --t: 8s; --d: -2s; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}
/* Floating stat card over the photo */
.hero__badge {
  position: absolute; left: 20px; bottom: 24px; z-index: 3;
  background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-l); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-l);
  display: flex; align-items: center; gap: var(--sp-3);
}
.hero__badge-num { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 28px; line-height: 32px; }
.hero__badge-label { font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh); color: rgba(255, 255, 255, 0.75); }

/* Badge variant: stacked list of server locations instead of one big stat */
.hero__badge--locations { flex-direction: column; align-items: flex-start; gap: 6px; }
.hero__badge-title {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}
.hero__badge-loc {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--text-2xs-size);
}
.hero__badge-loc svg { flex: none; opacity: 0.85; }

/* ---------- Hero: box-grid background (web-hosting page only) ---------- */
.hero--boxed::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(90% 90% at 30% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(90% 90% at 30% 30%, #000 0%, transparent 75%);
}

@media (max-width: 980px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .hero__copy { max-width: none; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 16 / 10; max-height: 320px; }
  .hero__media--cutout img {
    width: 100%; max-width: 100%; aspect-ratio: auto; max-height: 380px;
    margin-left: 0;
  }
  /* Overlaid on desktop, but at this size it covers the subject — let it flow. */
  .hero__badge {
    position: static; margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ---------- Rating block (Trustpilot-style) ---------- */
.rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rating__stars { display: flex; gap: 3px; }
.rating__star { width: 22px; height: 22px; border-radius: 3px; background: var(--c-accent); display: grid; place-items: center; color: var(--c-on-accent); }
.rating__text { font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh); color: var(--c-gray); }
.rating__text strong { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--c-ink); }
.hero__rating { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }

/* ---------- Cards ---------- */
.card {
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-m);
  background: var(--c-accent-tint); display: grid; place-items: center;
  margin-bottom: var(--sp-4);
}
.card__title { margin-bottom: var(--sp-2); }
.card__text { color: var(--c-gray); }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size); }

/* ---------- Plan card (icon-on-top pricing tile, grid--3) ---------- */
.plan-card {
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l);
  padding: var(--sp-8) var(--sp-7) var(--sp-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.plan-card__icon { width: 112px; height: 112px; margin-bottom: var(--sp-5); }
.plan-card__title { margin-bottom: var(--sp-2); }
.plan-card__desc { color: var(--c-gray); font-size: var(--text-m-size); line-height: var(--text-l-lh); min-height: 48px; }
.plan-card__price-label { margin-top: var(--sp-6); font-size: var(--text-3xs-size); color: var(--c-gray); }
.plan-card__price { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--title-4xl-size); color: var(--c-ink); }
.plan-card__price span { font-size: var(--text-2xs-size); font-weight: var(--fw-medium); color: var(--c-gray); }
.plan-card__cta {
  margin-top: var(--sp-6); width: 100%;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan-card__cta:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); }

/* ---------- Media card (image on top) ---------- */
.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { aspect-ratio: 16 / 8; overflow: hidden; background: var(--c-surface-subtle); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.card__media svg { width: 100%; height: 100%; display: block; transition: transform 500ms var(--ease); }
.card--media:hover .card__media img,
.card--media:hover .card__media svg { transform: scale(1.04); }
.card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; position: relative; }
.card__body .card__link { margin-top: auto; padding-top: var(--sp-3); }
.card--media .card__title { margin-bottom: 0; }
.card__badge {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px; border-radius: var(--radius-m);
  display: grid; place-items: center;
}
.card__badge--blue { background: #eff6ff; color: #3b82f6; }
.card__badge--cyan { background: #ecfeff; color: #0891b2; }
.card__badge--violet { background: #f5f3ff; color: #7c3aed; }
.card__badge--amber { background: #fffbeb; color: #d97706; }
.card__badge--rose { background: #fff1f2; color: #e11d48; }
.card__badge--green { background: #f0fdf4; color: #15a34a; }
.card__meta {
  display: inline-block; margin-bottom: var(--sp-2);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-gray);
}

/* ---------- TLD chips ---------- */
.tld-chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.tld-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tld-chip:hover { background: var(--c-accent-tint); transform: translateY(-2px); }
.tld-chip__ext { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-m-size); }
.tld-chip__price { font-size: var(--text-3xs-size); color: var(--c-gray); }

/* ---------- Support stat list ---------- */
.support-stats { display: grid; gap: var(--sp-5); }
.support-stat { display: flex; gap: var(--sp-4); align-items: flex-start; }
.support-stat__num {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: 32px; line-height: 40px; min-width: 96px;
}
.support-stat__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size); }
.support-stat__text { color: var(--c-gray); font-size: var(--text-2xs-size); }

/* ---------- Pricing ---------- */
.pricing-toggle {
  position: relative;
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--c-surface-subtle); border-radius: var(--radius-pill);
  margin: 0 auto var(--sp-6);
}
/* Positioned off the toggle itself (not a flex sibling) so the toggle stays
   dead-center regardless of the hint's width. */
.pricing-toggle-hint {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  color: #5b21b6; font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); white-space: nowrap;
}
.pricing-toggle-hint svg { flex: none; overflow: visible; }
.pricing-toggle__btn {
  border: 0; background: transparent; color: var(--c-gray);
  height: 36px; padding-inline: var(--sp-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pricing-toggle__btn.is-active { background: var(--c-white); color: var(--c-ink); box-shadow: var(--shadow-s); }
/* Reserves clearance for the featured plan's ribbon, which now floats above
   the card border instead of sitting in-flow (see .plan__ribbon). */
.plans-grid { margin-top: var(--sp-7); }

.plan {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  position: relative;
}
.plan--featured { border-color: #2e1065; box-shadow: var(--shadow-l); }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-white);
  padding: 3px var(--sp-3); border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-3xs-size);
}
.plan__name { }
.plan__desc { color: var(--c-gray); margin-top: var(--sp-2); min-height: 48px; }

.plan__price { margin-top: var(--sp-5); display: flex; align-items: baseline; gap: var(--sp-2); }
.plan__price-amount { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 40px; line-height: 48px; }
.plan__price-cycle { color: var(--c-gray); font-size: var(--text-2xs-size); }
.plan__price-was { color: var(--c-gray); text-decoration: line-through; font-size: var(--text-2xs-size); }
.plan__price-off {
  background: var(--c-accent-tint); color: var(--c-accent-strong);
  border-radius: var(--radius-xs); padding: 2px 6px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-3xs-size);
}
.plan__price-bdt { margin-top: var(--sp-1); color: var(--c-gray); font-size: var(--text-2xs-size); }
.plan__renew { margin-top: 2px; color: var(--c-gray); font-size: var(--text-3xs-size); }

.plan__cta { margin-top: var(--sp-5); }
.plan__features { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
.plan__features li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
}
.plan__features li + li { margin-top: var(--sp-3); }
.plan__features svg { flex: none; margin-top: 4px; color: var(--c-accent); }

/* ---------- Spec table (VPS / dedicated) ---------- */
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--c-border-strong); border-radius: var(--radius-l); }
.spec-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.spec-table th, .spec-table td { padding: var(--sp-4) var(--sp-5); text-align: left; }
.spec-table thead th {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-gray); background: var(--c-surface-subtle);
}
.spec-table tbody tr + tr { border-top: 1px solid var(--c-border); }
.spec-table tbody td { font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh); }
.spec-table__name { font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.spec-table__price { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-m-size); }

/* ---------- Feature row (alternating media/text) ---------- */
.feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); align-items: center; }
.feature-row + .feature-row { margin-top: var(--sp-11); }
.feature-row--reverse .feature-row__media { order: -1; }
.feature-row__media {
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--c-accent-tint); aspect-ratio: 4 / 3;
}
.feature-row__text p { margin-top: var(--sp-3); color: var(--c-gray); }
.feature-row__list { margin-top: var(--sp-5); }
.feature-row__list li { display: flex; gap: var(--sp-2); font-size: var(--text-2xs-size); }
.feature-row__list li + li { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .feature-row--reverse .feature-row__media { order: 0; }
}

/* ---------- Domain search ---------- */
.domain-search {
  display: flex; gap: var(--sp-2);
  background: var(--c-white); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill); padding: 6px 6px 6px var(--sp-5);
  max-width: 620px; margin-inline: auto;
}
.domain-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--text-l-size); color: var(--c-ink);
}
.domain-tlds {
  display: flex; gap: var(--sp-5); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.domain-tld { text-align: center; }
.domain-tld__ext { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-m-size); }
.domain-tld__price { color: var(--c-gray); font-size: var(--text-3xs-size); }

/* ---------- Stats ---------- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 44px; line-height: 56px; }
.stat__label { color: var(--c-gray); font-size: var(--text-2xs-size); }

/* ---------- Testimonials ---------- */
.quote { }
.quote__text { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--title-xl-size); line-height: var(--title-xl-lh); }
.quote__author { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.quote__avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--c-accent-tint); flex: none; object-fit: cover; }
.quote__stars { display: flex; gap: 2px; margin-bottom: var(--sp-3); color: var(--c-accent); }
.quote--card { background: var(--c-white); border-radius: var(--radius-l); padding: var(--sp-5); border: 1px solid var(--c-border-strong); }
.quote--card .quote__text { font-size: var(--title-l-size); line-height: var(--title-l-lh); }
.quote__name { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size); }
.quote__role { color: var(--c-gray); font-size: var(--text-3xs-size); }

/* ---------- Accordion (FAQ) ---------- */
.accordion { max-width: 820px; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--c-border-strong); }
.accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; background: none; border: 0; text-align: left; color: inherit;
  font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--title-l-size);
}
.accordion__icon { flex: none; transition: transform var(--dur) var(--ease); }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: none; padding-bottom: var(--sp-5); color: var(--c-gray); max-width: 680px; }
.accordion__item.is-open .accordion__panel { display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-m);
  border-radius: var(--radius-xl); padding: var(--sp-10) var(--sp-8); text-align: center;
}
.cta-band p { margin-top: var(--sp-3); color: var(--c-gray); max-width: 560px; margin-inline: auto; }
.cta-band .btn { margin-top: var(--sp-6); }

/* Brand variant — dark gradient CTA (homepage closer) */
.cta-band--brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 85% 12%, rgba(139, 92, 246, 0.35), transparent 65%),
    radial-gradient(60% 55% at 8% 92%, rgba(59, 130, 246, 0.22), transparent 60%),
    linear-gradient(160deg, #100d24 0%, #1b1440 55%, #221850 100%);
  color: #fff; border-color: rgba(255, 255, 255, 0.08);
}
.cta-band--brand h2 { color: #fff; }
.cta-band--brand p { color: rgba(255, 255, 255, 0.7); }
.cta-band__price {
  display: inline-flex; margin-bottom: var(--sp-3);
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
}
.cta-band__cta.btn { gap: var(--sp-2); }
.cta-band__cta svg { transition: transform var(--dur) var(--ease); }
.cta-band__cta:hover svg { transform: translateX(4px); }
.cta-band__seal {
  position: absolute; top: 22px; right: 22px;
  width: 108px; height: 108px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; transform: rotate(-8deg); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 11px; line-height: 1.25;
}
@media (max-width: 640px) {
  .cta-band__seal { position: static; margin: 0 auto var(--sp-4); transform: none; }
}

/* ---------- Trust bar (logo marquee + rating badges) ---------- */
.trust-bar {
  padding-block: var(--sp-8); text-align: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 160% at 12% 50%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(55% 160% at 88% 50%, rgba(139, 92, 246, 0.10), transparent 70%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.trust-bar__label {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-3xs-size); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-gray); margin-bottom: var(--sp-2);
}
.trust-bar__copy {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--title-l-size); line-height: var(--title-l-lh);
  color: var(--c-ink); max-width: 640px; margin: 0 auto var(--sp-5);
}

/* ---------- Testimonials background (dark, to separate from Support above) ---------- */
.testimonials-bg {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 80% at 12% 15%, rgba(99, 102, 241, 0.28), transparent 65%),
    radial-gradient(50% 75% at 90% 10%, rgba(139, 92, 246, 0.24), transparent 60%),
    radial-gradient(60% 70% at 50% 105%, rgba(59, 130, 246, 0.14), transparent 60%),
    linear-gradient(160deg, #17142c 0%, #000 55%, #000000 100%);
}
.testimonials-bg > .container { position: relative; z-index: 1; }
.testimonials-bg .section__head h2 { color: #fff; }
.testimonials-bg .section__head p { color: rgba(255, 255, 255, 0.68); }
.testimonials-bg .btn--outline {
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.testimonials-bg .btn--outline:hover { background: rgba(255, 255, 255, 0.08); }
.testimonials-bg__quote {
  position: absolute; top: 50%; z-index: 0; pointer-events: none;
  width: 220px; height: 220px; transform: translateY(-50%);
  color: #a5b4fc; opacity: 0.1;
}
.testimonials-bg__quote--l { left: -50px; }
.testimonials-bg__quote--r { right: -50px; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 900px) {
  .testimonials-bg__quote { width: 140px; height: 140px; }
}
.trust-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.trust-marquee__track {
  display: flex; align-items: center; gap: var(--sp-9);
  width: max-content;
  animation: trust-scroll 32s linear infinite;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
.trust-marquee__item {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--title-l-size); color: var(--c-ink); opacity: 0.4;
  white-space: nowrap;
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track { animation: none; }
}

.trust-badges { display: flex; gap: var(--sp-4); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.trust-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-strong); background: var(--c-white);
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-3xs-size); color: var(--c-ink);
}
.trust-badge__stars { color: #fbbc05; letter-spacing: 1px; font-size: 12px; }
.trust-badge--trustpilot .trust-badge__stars { color: #00b67a; }
@media (max-width: 640px) {
  .trust-marquee__item { font-size: var(--title-xl-size); }
}

/* ---------- Logo strip ---------- */
.logo-strip { display: flex; gap: var(--sp-8); align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0.55; }
.logo-strip span { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--title-l-size); }

/* ---------- Form ---------- */
.field { display: block; }
.field + .field { margin-top: var(--sp-4); }
.field__label { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size); margin-bottom: var(--sp-2); }
.field__input, .field__textarea, .field__select {
  width: 100%; padding: 12px var(--sp-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-m);
  font-family: var(--font-body); font-size: var(--text-l-size); color: var(--c-ink);
  background: var(--c-white);
  transition: border-color var(--dur) var(--ease);
}
.field__input:focus, .field__textarea:focus, .field__select:focus { border-color: var(--c-ink); outline: none; }
.field__textarea { min-height: 140px; resize: vertical; }

/* ---------- Domain Hero (dark with bg image) ---------- */
.domain-hero {
  position: relative; overflow: hidden;
  padding-block: var(--section-pad-y);
  background: #0f172a url("https://images.unsplash.com/photo-1636690619068-eb3849be82d1?auto=format&fit=crop&w=1600&q=40") center / cover no-repeat;
  color: #fff;
}
/* Used as the page's sole hero (no separate hero--page above it) — needs the
   same generous top clearance every other page's first section gets. */
.domain-hero--first { padding-top: calc(var(--header-h) + var(--sp-8)); }
.domain-hero__overlay,
.domain-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.85) 100%);
}
.domain-hero__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; text-align: center; }
.domain-hero__content .eyebrow--light {
  display: inline-block; padding: var(--sp-1) var(--sp-3);
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); letter-spacing: 0.04em; text-transform: uppercase;
}
.domain-hero__sub { margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.7); font-size: var(--text-l-size); line-height: var(--text-l-lh); max-width: 560px; margin-inline: auto; }

.domain-search-pro {
  margin-top: var(--sp-6); display: flex; gap: 0;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill); padding: 6px;
  backdrop-filter: blur(12px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.domain-search-pro:focus-within {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.domain-search-pro__field {
  flex: 1; display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-4);
}
.domain-search-pro__icon { color: rgba(255, 255, 255, 0.5); flex: none; }
.domain-search-pro input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--text-l-size); color: #fff;
}
.domain-search-pro input::placeholder { color: rgba(255, 255, 255, 0.4); }
.domain-search-pro__btn { white-space: nowrap; }

.tld-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); max-width: 640px; margin-inline: auto; }
.tld-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tld-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.25); }
.tld-card__ext { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-m-size); color: #fff; }
.tld-card__price { font-size: var(--text-3xs-size); color: rgba(255, 255, 255, 0.6); }
.tld-card__price small { font-size: 10px; }

@media (max-width: 700px) {
  .tld-grid { grid-template-columns: repeat(3, 1fr); }
  .domain-search-pro { flex-direction: column; border-radius: var(--radius-l); }
  .domain-search-pro__field { padding: var(--sp-2) var(--sp-3); }
  .domain-search-pro__btn { border-radius: var(--radius-pill); }
}

/* ---------- Control Row (UltaHost-style performance section) ---------- */
.control-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center;
}
.control-row__media {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #eef2ff, #f5f0ff);
  padding: var(--sp-5);
  box-shadow: var(--shadow-m);
}
.control-row__media img { width: 100%; height: auto; border-radius: var(--radius-l); display: block; }
.control-row__media .illus { width: 100%; height: auto; display: block; border-radius: var(--radius-l); }
.control-row__text .eyebrow { margin-bottom: var(--sp-1); }
.control-row__desc { margin-top: var(--sp-2); color: var(--c-gray); font-size: var(--text-m-size); line-height: 24px; }
.control-row__checks { margin-top: var(--sp-4); display: grid; gap: var(--sp-1); }
.control-row__checks li {
  display: flex; gap: var(--sp-2); align-items: center;
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  padding: 6px var(--sp-2); border-radius: var(--radius-m);
  transition: background var(--dur) var(--ease);
}
.control-row__checks li:hover { background: var(--c-surface-subtle); }
.control-row__checks svg { flex: none; color: #15a34a; }
.control-row__tags { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.control-row__text > .btn { min-width: 208px; }
.control-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
  background: var(--c-accent-tint); border: 1px solid var(--c-border-strong);
  font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--text-3xs-size);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.control-tag:hover { background: var(--c-surface); transform: translateY(-1px); }

.control-row--reverse { direction: rtl; }
.control-row--reverse > * { direction: ltr; }

.control-row__media { position: relative; }

/* ---------- Float Badges (overlaid on images) ---------- */
.float-badge {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-m);
  background: var(--c-white); box-shadow: var(--shadow-m);
  font-size: 12px; line-height: 1.3; white-space: nowrap;
  animation: float-bob 3s ease-in-out infinite;
  z-index: 2;
}
.float-badge span { display: flex; flex-direction: column; }
.float-badge strong { font-weight: var(--fw-semibold); font-size: 13px; }
.float-badge small { color: var(--c-gray); font-size: 11px; }
.float-badge--tl { top: 18px; left: 18px; }
.float-badge--tr { top: 18px; right: 18px; }
.float-badge--br { bottom: 18px; right: 18px; }
.float-badge--bl { bottom: 18px; left: 18px; }
.float-badge--blue { border-left: 3px solid #3b82f6; }
.float-badge--blue svg { color: #3b82f6; }
.float-badge--green { border-left: 3px solid #15a34a; }
.float-badge--green svg { color: #15a34a; }
.float-badge--violet { border-left: 3px solid #7c3aed; }
.float-badge--violet svg { color: #7c3aed; }
.float-badge--amber { border-left: 3px solid #d97706; }
.float-badge--amber svg { color: #d97706; }
.float-badge--rose { border-left: 3px solid #e11d48; }
.float-badge--rose svg { color: #e11d48; }

@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 900px) {
  .control-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .control-row--reverse { direction: ltr; }
  .control-row__media { order: -1; }
  .float-badge { display: none; }
}

/* ---------- Support Section ---------- */
.support-section {
  background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 100%);
}
.support-header { max-width: 820px; margin: 0 auto var(--sp-8); text-align: center; }
.support-header .title--5xl { white-space: nowrap; }
@media (max-width: 640px) { .support-header .title--5xl { white-space: normal; } }
.support-header__sub { margin-top: var(--sp-3); color: var(--c-gray); font-size: var(--text-l-size); line-height: var(--text-l-lh); }
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.support-grid--3 { grid-template-columns: repeat(3, 1fr); }
.support-card {
  background: var(--c-white); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l); padding: var(--sp-5);
  text-align: center; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.support-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.support-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: rgba(79, 70, 229, 0.2); }
.support-card:hover::before { opacity: 1; }
.support-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-m);
  background: var(--c-accent-tint); display: grid; place-items: center;
  margin: 0 auto var(--sp-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.support-card:hover .support-card__icon { background: #eef2ff; color: #4f46e5; }
.support-card__icon--blue { background: #eff6ff; color: #3b82f6; }
.support-card__icon--amber { background: #fffbeb; color: #d97706; }
.support-card__icon--green { background: #f0fdf4; color: #15a34a; }
.support-card__icon--violet { background: #f5f3ff; color: #7c3aed; }
.support-card__num {
  display: block; font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: 32px; line-height: 40px; margin-bottom: var(--sp-1);
}
.support-card__title {
  display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.support-card:hover .support-card__title { text-decoration-color: var(--c-ink); }
.support-card__text { display: block; margin-top: var(--sp-2); color: var(--c-gray); font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh); }
.support-cta { margin-top: var(--sp-8); display: flex; gap: var(--sp-3); justify-content: center; }

@media (max-width: 1000px) { .support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .support-grid { grid-template-columns: 1fr; } .support-cta { flex-direction: column; align-items: center; } }

/* ---------- Reviews (testimonials redesign) ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.review-card {
  background: var(--c-white); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l); padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.review-card--hidden { display: none; }
.review-card__text {
  margin-top: var(--sp-3);
  font-size: var(--text-l-size); line-height: var(--text-l-lh); color: var(--c-ink);
}
.review-card__text mark {
  background: linear-gradient(120deg, rgba(250, 204, 21, 0.25) 0%, rgba(234, 179, 8, 0.2) 100%);
  color: inherit; padding: 1px 4px; border-radius: 3px;
}
.review-card__author { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.review-card__name {
  display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
}
.review-card__company { display: block; color: var(--c-gray); font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh); }
.reviews-more { margin-top: var(--sp-6); text-align: center; }
.reviews-more .btn { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reviews-more .btn:hover { transform: translateY(-2px); }

@media (max-width: 1000px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Tooltip (CSS-only, hover + keyboard focus) ----------
   `title` is kept on the trigger as the accessible/native fallback (touch,
   screen readers); the styled bubble is presentation-only via ::after. */
.tooltip {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 1px dashed var(--c-gray-light);
  cursor: help;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px;
  background: var(--c-ink); color: var(--c-white);
  font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 12px; line-height: 18px;
  padding: 8px 10px; border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 20;
}
.tooltip::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--c-ink);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: 20;
}
.tooltip:hover::after, .tooltip:focus-visible::after,
.tooltip:hover::before, .tooltip:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.plan__price-cycle { margin-left: 2px; }

/* Ribbon for the recommended/featured plan is a small pill badge floating
   above the card's top border, centered horizontally. (Previously a
   full-width strip that had to overlap the card's rounded corners by
   padding-bottom, which left a large dead gap under the label — a pill
   sized to its own text has no such gap and needs no corner math.) */
.plan__ribbon {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #1e1b4b, #6d28d9); color: var(--c-white);
  box-shadow: var(--shadow-m);
  white-space: nowrap;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); letter-spacing: 0.04em; text-transform: uppercase;
}

.plan__cta { text-transform: uppercase; letter-spacing: 0.03em; }

/* Subheading inside a long, grouped plan feature list (e.g. "Core Features") */
.plan__features-heading {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); letter-spacing: 0.02em;
  color: var(--c-gray);
}
.plan__features li.plan__features-heading { display: block; }
.plan__features li.plan__features-heading + li { margin-top: var(--sp-3); }

/* Compact "all plans include" strip under the pricing section head */
.plans-meta {
  display: flex; gap: var(--sp-6); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-5);
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-2xs-size); color: var(--c-ink);
}
.plans-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.plans-meta svg { flex: none; color: var(--c-accent); }

/* Extra icon colours for "Included with every plan" (8 items need 8 hues;
   support-card only shipped 4 for the homepage's 4-stat row). */
.support-card__icon--cyan   { background: #ecfeff; color: #0891b2; }
.support-card__icon--rose   { background: #fff1f2; color: #e11d48; }
.support-card__icon--teal   { background: #f0fdfa; color: #0d9488; }
.support-card__icon--indigo { background: #eef2ff; color: #4f46e5; }

/* ---------- Reviews showcase ---------- */
.reviews-showcase {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 60% at 12% 0%, rgba(124, 58, 237, 0.35), transparent 60%),
    radial-gradient(50% 55% at 100% 100%, rgba(79, 70, 229, 0.28), transparent 60%),
    linear-gradient(180deg, #000000 0%, #0c0716 45%, #1a0b2e 100%);
}
.reviews-showcase > .container { position: relative; z-index: 1; }
.reviews-showcase__head { max-width: 640px; margin: 0 auto var(--sp-9); text-align: center; }
.reviews-showcase__head h2 { color: #fff; white-space: nowrap; }
.reviews-showcase__sub { margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.68); font-size: var(--title-xl-size); line-height: var(--title-xl-lh); }
@media (max-width: 700px) { .reviews-showcase__head h2 { white-space: normal; } }

/* Static 2-up grid — quote reads first, attribution sits below it. Body-copy
   size on purpose: these quotes are long, and 28px pull-quote type stops
   being readable past a sentence or two. */
.reviews-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); max-width: 980px; margin-inline: auto; }
.review-card2 {
  padding: var(--sp-6); border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review-card2:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.review-card2__text {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--text-l-size); line-height: 27px; color: rgba(255, 255, 255, 0.88);
}
.review-card2__text mark { background: rgba(129, 140, 248, 0.28); color: #fff; padding: 1px 6px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.25) inset; }
.review-card2__author {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; gap: var(--sp-3);
}
.review-card2__avatar {
  width: 42px; height: 42px; border-radius: var(--radius-pill); flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size);
}
.review-card2__meta { flex: 1; }
.review-card2__name { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size); color: #fff; }
.review-card2__role { display: block; font-size: var(--text-3xs-size); color: rgba(255, 255, 255, 0.55); }
.review-card2__stars { color: #fbbf24; letter-spacing: 2px; font-size: 13px; }

@media (max-width: 800px) {
  .reviews-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Fictional wordmark strip — see the HTML comment above its markup for why
   these aren't real company names. */
.brand-strip { margin-top: var(--sp-10); text-align: center; }
.brand-strip__label {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-3xs-size); letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-bottom: var(--sp-5);
}
.brand-strip__row { display: flex; gap: var(--sp-8); justify-content: center; flex-wrap: wrap; }
.brand-strip__logo {
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--title-l-size);
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Reveal on scroll ----------
   Fail-open: content is visible unless JS has confirmed it can animate
   (the .has-reveal flag is set by main.js). No JS = no hidden content. */
.has-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.has-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Blog category quick-nav ---------- */
.blog-cat-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.blog-cat-nav--left { justify-content: flex-start; }
.blog-cat-nav__link {
  display: inline-flex; align-items: center;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  background: var(--c-white); border: 1px solid var(--c-border-strong);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xs-size);
  color: var(--c-ink);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog-cat-nav__link:hover { background: var(--c-accent-tint); transform: translateY(-1px); }

/* ---------- Blog post body copy ---------- */
.prose { max-width: 720px; margin-inline: auto; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--title-2xl-size); line-height: var(--title-2xl-lh);
  margin-top: var(--sp-8);
}
.prose h3 {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--title-xl-size); line-height: var(--title-xl-lh);
  margin-top: var(--sp-7);
}
.prose p { color: var(--c-ink); font-size: var(--text-l-size); line-height: var(--text-l-lh); }
.prose ul, .prose ol { margin-top: var(--sp-3); padding-left: var(--sp-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: var(--text-l-size); line-height: var(--text-l-lh); margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-gray); }
.prose strong { font-weight: var(--fw-semibold); }
.prose a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  border-left: 3px solid var(--c-border-strong); padding-left: var(--sp-5);
  color: var(--c-gray); font-style: italic;
}

/* ---------- Blog post hero (featured image banner) ---------- */
.post-hero { max-width: 800px; margin: 0 auto var(--sp-8); }
.post-hero__media {
  aspect-ratio: 20 / 9; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-m);
}
.post-hero__media svg { width: 100%; height: 100%; display: block; }
.post-hero__meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); justify-content: center; flex-wrap: wrap; }
.post-hero__cat {
  display: inline-block; padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--c-accent-tint); color: var(--c-ink);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-3xs-size);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.post-hero__date { color: var(--c-gray); font-size: var(--text-2xs-size); }
.post-hero h1 { text-align: center; margin-top: var(--sp-4); }
.post-hero__sub { text-align: center; color: var(--c-gray); margin-top: var(--sp-3); font-size: var(--text-l-size); line-height: var(--text-l-lh); max-width: 640px; margin-inline: auto; }