:root {
  color-scheme: dark;
  --ink: #0a0a0b;
  --panel: #141517;
  --silver: #c8cad1;
  --text: #ffffff;
  --text-muted: rgba(200,202,209,.65);
  --text-soft: rgba(200,202,209,.6);
  --primary: #ffffff;
  --primary-ink: #0a0a0b;
  --mint: #64f4c4;
  --azure: #6fb7ff;
  --ember: #ffb15f;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --surface: rgba(255,255,255,.04);
  --surface-hover: rgba(255,255,255,.06);
  --selection-text: #0a0a0b;
  --text-stroke-color: rgba(255,255,255,.6);
  --project-metric-bg: rgba(10,10,11,.7);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #f5f5f7;
  --panel: #ffffff;
  --silver: #5b6068;
  --text: #111317;
  --text-muted: rgba(17,19,23,.8);
  --text-soft: rgba(17,19,23,.66);
  --primary: #111317;
  --primary-ink: #ffffff;
  --mint: #0f946f;
  --azure: #246fc9;
  --ember: #b55b16;
  --line: rgba(10,10,11,.13);
  --line-strong: rgba(10,10,11,.24);
  --surface: rgba(255,255,255,.86);
  --surface-hover: rgba(255,255,255,.92);
  --selection-text: #ffffff;
  --text-stroke-color: rgba(10,10,11,.52);
  --project-metric-bg: rgba(255,255,255,.94);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  transition: background-color .25s, color .25s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--mint);
  color: var(--selection-text);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  padding: .7rem 1rem;
  transition: transform .15s;
}

.skip-link:focus { transform: translateY(0); }

:where(a, button):focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ========== NAV ========== */
header nav {
  border-color: var(--line) !important;
}

#main-nav[data-theme="dark"] {
  background: rgba(10,10,11,.24) !important;
  border-color: rgba(255,255,255,.11) !important;
}

#main-nav[data-theme="light"] {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(10,10,11,.16) !important;
}

/* ========== HERO ========== */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, var(--ink));
}

.text-stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}

.hero-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 2rem;
  max-width: 36rem;
}

.trust-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: .85rem;
  transition: border-color .2s;
}

.trust-chip:hover { border-color: var(--line-strong); }

.trust-chip strong {
  display: block;
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}

.trust-chip span {
  display: block;
  margin-top: .35rem;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ========== BUTTONS ========== */
.magnetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  border-radius: 6px;
  padding: .85rem 1.2rem;
  font-weight: 700;
  font-size: .95rem;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  will-change: transform;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.magnetic-primary {
  background: var(--primary);
  color: var(--primary-ink);
}

.magnetic-primary:hover { opacity: .9; }

.magnetic-ghost {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.magnetic-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.magnetic-btn:hover { transform: translateY(-1px); }

.magnetic-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
  animation: shimmer-sweep 4s ease-in-out infinite;
  z-index: 1;
}

.magnetic-btn > * {
  position: relative;
  z-index: 2;
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  30%  { transform: translateX(150%) skewX(-20deg); }
  100% { transform: translateX(150%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .magnetic-btn::before {
    animation: none;
    transform: translateX(-150%);
  }
}

/* ========== SECTIONS ========== */
.section-band {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
}

.eyebrow {
  color: var(--mint);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: .75rem;
  text-transform: uppercase;
}

.section-title {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 1rem;
  transition: border-color .2s;
}

.metric:hover { border-color: var(--line-strong); }

.metric strong {
  display: block;
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: .5rem;
  color: var(--text-soft);
  font-size: .85rem;
  line-height: 1.3;
}

.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text);
  font-weight: 600;
  opacity: .7;
  transition: opacity .2s;
}

.quiet-link:hover { opacity: 1; }

/* ========== SERVICE CARDS ========== */
.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 1.5rem;
  transition: border-color .2s, background .2s;
  min-height: 18rem;
}

.service-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.icon-shell {
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: var(--accent);
}

.accent-mint { --accent: var(--mint); }
.accent-azure { --accent: var(--azure); }
.accent-ember { --accent: var(--ember); }

.pill {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .6rem;
  text-transform: uppercase;
}

.service-card h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 1.5rem;
}

.service-card p {
  margin-top: .6rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: .92rem;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .9rem;
}

.service-card > .mb-8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

/* ========== PROJECTS ========== */
.projects-section {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.project-spotlight {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.project-copy {
  background: var(--ink);
  padding: 1rem;
}

.project-copy h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
}

.project-copy > p:not(.eyebrow) {
  margin-top: .6rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: .92rem;
}

.project-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}

.project-feature-row span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .5rem;
}

.project-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}

.project-visual {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  aspect-ratio: 4 / 3;
}

.project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: .9;
  transition: opacity .3s;
}

.project-visual:hover img { opacity: 1; }

.project-metrics {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}

.project-metrics div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--project-metric-bg);
  padding: .45rem .55rem;
  backdrop-filter: blur(12px);
}

.project-metrics strong {
  display: block;
  color: var(--mint);
  font-family: Sora, "DM Sans", sans-serif;
  font-size: .9rem;
  line-height: 1;
}

.project-metrics span {
  display: block;
  margin-top: .2rem;
  color: var(--text-soft);
  font-size: .65rem;
  font-weight: 600;
}

/* ========== HOSTING ========== */
.hosting-section {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
}

.hosting-hero { margin-bottom: 3rem; }

.hosting-feature-grid {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  background: var(--line);
}

.hosting-feature {
  background: var(--ink);
  padding: 1.5rem;
}

.hosting-feature h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1rem;
}

.hosting-feature p {
  margin-top: .5rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-size: .9rem;
}

.plans-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 4rem;
  align-items: flex-start;
}

.billing-toggle {
  display: inline-flex;
  gap: .15rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: .2rem;
}

.billing-toggle button {
  min-height: 2.4rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 600;
  padding: .45rem .8rem;
  font-size: .9rem;
  transition: background .2s, color .2s;
}

.billing-toggle button.is-active,
.billing-toggle button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-ink);
}

.hosting-plans {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
}

.hosting-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 1.5rem;
  transition: border-color .2s;
}

.hosting-plan:hover { border-color: var(--line-strong); }

.hosting-plan.is-featured {
  border-color: rgba(100,244,196,.3);
  background: rgba(100,244,196,.04);
}

.plan-ribbon {
  display: inline-flex;
  border-radius: 6px;
  background: var(--mint);
  color: var(--primary-ink);
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: .3rem .6rem;
  text-transform: uppercase;
}

.hosting-plan h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.hosting-plan > div:first-child p {
  margin-top: .4rem;
  color: var(--text-soft);
  line-height: 1.5;
  font-size: .9rem;
}

.plan-icon {
  display: grid;
  flex: 0 0 auto;
  height: 2.5rem;
  width: 2.5rem;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--mint);
}

.plan-price {
  margin: 1.5rem 0 1rem;
}

.plan-price strong {
  display: block;
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: .9;
}

.plan-price span {
  color: var(--text-soft);
  font-weight: 600;
  font-size: .9rem;
}

.plan-savings {
  margin: -.4rem 0 1rem;
  color: var(--mint);
  font-size: .8rem;
  font-weight: 600;
}

.hosting-plan ul {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosting-plan li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--text-muted);
  font-size: .9rem;
}

.hosting-plan li svg { color: var(--mint); flex: 0 0 auto; }

.plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-top: 1.5rem;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  transition: background .2s, transform .15s;
}

.plan-cta:hover { opacity: .9; transform: translateY(-1px); }

.hosting-proof {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  margin-top: 3rem;
  padding: 1.5rem;
}

.hosting-proof h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
}

/* ========== CAPABILITY MATRIX ========== */
.filter-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 600;
  padding: .55rem .85rem;
  transition: background .2s, color .2s;
}

.filter-btn:hover { background: var(--surface-hover); }

.filter-btn.is-active,
.filter-btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-ink);
}

.matrix-grid {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}

.matrix-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: .7rem .8rem;
  text-align: left;
  transition: border-color .2s, background .2s;
  font-size: .92rem;
}

.matrix-item:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.matrix-item svg { color: var(--mint); flex: 0 0 auto; }

/* ========== STACK MARQUEE ========== */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee span {
  margin-right: 2rem;
  color: var(--text-soft);
  font-family: Sora, "DM Sans", sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  font-weight: 700;
  white-space: nowrap;
}

/* ========== PROCESS ========== */
.timeline {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  background: var(--line);
}

.timeline-step {
  background: var(--ink);
  padding: 1.5rem;
}

.timeline-step span {
  color: var(--ember);
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.timeline-step h3 {
  font-family: Sora, "DM Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 2rem;
}

.timeline-step p {
  margin-top: .5rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-size: .92rem;
}

/* ========== CONTACT ========== */
.contact-glow {
  position: absolute;
  inset: 12% 4% auto auto;
  height: 22rem;
  width: 42rem;
  max-width: 90vw;
  background: linear-gradient(90deg, rgba(100,244,196,.15), rgba(111,183,255,.12));
  filter: blur(70px);
  opacity: .6;
}

.map-panel {
  min-height: 28rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.map-panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 28rem;
  border: 0;
}

/* ========== FOOTER ========== */
footer {
  border-top: 1px solid var(--line);
  padding: 2rem;
  text-align: center;
  color: var(--text-soft);
  font-size: .85rem;
}

/* ========== LIGHT THEME ========== */
:root[data-theme="light"] .skip-link {
  background: var(--primary);
  color: var(--primary-ink);
}

:root[data-theme="light"] .text-white,
:root[data-theme="light"] .quiet-link,
:root[data-theme="light"] .matrix-item,
:root[data-theme="light"] .magnetic-ghost {
  color: var(--text) !important;
}

:root[data-theme="light"] .text-silver,
:root[data-theme="light"] .text-silver\/70 {
  color: var(--text-muted) !important;
}

:root[data-theme="light"] .border-white\/10,
:root[data-theme="light"] .border-white\/15 {
  border-color: var(--line) !important;
}

:root[data-theme="light"] .bg-white\/8 {
  background-color: rgba(255,255,255,.72) !important;
}

:root[data-theme="light"] .text-stroke {
  -webkit-text-stroke-color: var(--text-stroke-color);
}

:root[data-theme="light"] .filter-btn:hover {
  background: rgba(10,10,11,.055);
}

:root[data-theme="light"] .magnetic-primary,
:root[data-theme="light"] .plan-cta,
:root[data-theme="light"] .billing-toggle button.is-active,
:root[data-theme="light"] .billing-toggle button[aria-pressed="true"],
:root[data-theme="light"] .filter-btn.is-active,
:root[data-theme="light"] .filter-btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-ink);
}

:root[data-theme="light"] .magnetic-primary:hover,
:root[data-theme="light"] .plan-cta:hover {
  background: rgba(17,19,23,.9);
}

:root[data-theme="light"] .magnetic-ghost,
:root[data-theme="light"] .billing-toggle,
:root[data-theme="light"] .hosting-plan,
:root[data-theme="light"] .hosting-proof,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .trust-chip,
:root[data-theme="light"] .metric,
:root[data-theme="light"] .filter-btn,
:root[data-theme="light"] .matrix-item,
:root[data-theme="light"] .project-feature-row span {
  box-shadow: 0 16px 50px rgba(18,28,45,.09);
}

:root[data-theme="light"] .section-title,
:root[data-theme="light"] .service-card h3,
:root[data-theme="light"] .project-copy h3,
:root[data-theme="light"] .hosting-feature h3,
:root[data-theme="light"] .hosting-plan h3,
:root[data-theme="light"] .timeline-step h3,
:root[data-theme="light"] .hosting-proof h3 {
  color: var(--text);
}

:root[data-theme="light"] .project-copy,
:root[data-theme="light"] .hosting-feature,
:root[data-theme="light"] .timeline-step {
  background: rgba(255,255,255,.82);
}

:root[data-theme="light"] .project-spotlight,
:root[data-theme="light"] .hosting-feature-grid,
:root[data-theme="light"] .timeline {
  background: rgba(10,10,11,.14);
  box-shadow: 0 22px 70px rgba(18,28,45,.08);
}

:root[data-theme="light"] .eyebrow {
  color: #0a7f61;
}

:root[data-theme="light"] .hero-trust-grid .trust-chip strong,
:root[data-theme="light"] .metric strong,
:root[data-theme="light"] .plan-price strong {
  color: var(--text);
}

:root[data-theme="light"] .magnetic-ghost:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .matrix-item:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

:root[data-theme="light"] .trust-chip:hover,
:root[data-theme="light"] .metric:hover,
:root[data-theme="light"] .hosting-plan:hover {
  border-color: var(--line-strong);
}

:root[data-theme="light"] .trust-chip span,
:root[data-theme="light"] .metric span,
:root[data-theme="light"] .service-card p,
:root[data-theme="light"] .project-copy > p:not(.eyebrow),
:root[data-theme="light"] .project-feature-row span,
:root[data-theme="light"] .hosting-feature p,
:root[data-theme="light"] .hosting-plan > div:first-child p,
:root[data-theme="light"] .plan-price span,
:root[data-theme="light"] .hosting-plan li,
:root[data-theme="light"] .filter-btn,
:root[data-theme="light"] .marquee span,
:root[data-theme="light"] .timeline-step p,
:root[data-theme="light"] footer {
  color: var(--text-muted);
}

:root[data-theme="light"] .icon-shell,
:root[data-theme="light"] .plan-icon {
  background: rgba(10,10,11,.055);
}

:root[data-theme="light"] .project-visual img {
  opacity: .94;
}

:root[data-theme="light"] .project-metrics div {
  background: var(--project-metric-bg);
  box-shadow: 0 12px 36px rgba(18,28,45,.12);
}

:root[data-theme="light"] .project-metrics span {
  color: var(--text-muted);
}

:root[data-theme="light"] .hosting-plan.is-featured {
  background: rgba(15,148,111,.075);
}

:root[data-theme="light"] .plan-ribbon {
  background: var(--mint);
  color: #ffffff;
}

:root[data-theme="light"] .contact-glow {
  opacity: .38;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 768px) {
  .hosting-hero,
  .plans-head,
  .hosting-proof {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .plans-head { flex-direction: row; align-items: flex-end; }

  .hosting-feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hosting-plans {
    grid-template-columns: 1fr 1.08fr 1fr;
    align-items: stretch;
  }

  .projects-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .project-spotlight {
    grid-template-rows: auto auto;
  }

  .project-copy { padding: 1.4rem; }

  .project-actions { flex-direction: row; }

  .project-visual {
    border-top: 1px solid var(--line);
    aspect-ratio: 4 / 3;
  }

  .timeline {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  header nav { padding: .6rem .8rem !important; }

  .hero-visual::after {
    background: linear-gradient(180deg, transparent 25%, var(--ink));
  }

  .section-band,
  .projects-section,
  .hosting-section {
    padding: 3.5rem 0;
  }

  .project-metrics {
    position: static;
    grid-template-columns: 1fr;
    margin-top: .75rem;
  }

  .project-visual img {
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--panel);
  }

  .hosting-feature-grid { grid-template-columns: 1fr; }

  .hosting-plan { min-height: auto; }

  .hero-trust-grid { grid-template-columns: 1fr; }

  .service-card { min-height: auto; }
}

/* ========== ANIMATIONS ========== */
@keyframes marquee {
  to { transform: translateX(-33.333%); }
}

@keyframes liquid-shimmer {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes specular-drift {
  0%   { background-position: 0% 0%; }
  33%  { background-position: 100% 60%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 0%; }
}

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--silver);
  font-size: 0.875rem;
}
.site-footer strong { color: var(--ink); display: block; }
.site-footer a { color: var(--silver); text-decoration: none; }
.site-footer a:hover { color: var(--mint); }
.site-footer div { display: flex; flex-direction: column; gap: 0.25rem; }

.check-list-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: .9rem 1rem;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.55;
}
.check-list-item svg { color: var(--mint); flex: 0 0 auto; margin-top: .15rem; }

/* ========== REVEAL ON SCROLL ========== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 0;
    transform: none;
    transition: opacity 120ms ease-out;
    transition-delay: 0ms !important;
  }
  .reveal.is-in,
  .reveal-stagger.is-in > * {
    opacity: 1;
  }
}

@media (scripting: none) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========== HERO NAME LETTER ANIMATION ========== */
.hero-letters > span > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-letters.is-in > span > span {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-letters > span > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (scripting: none) {
  .hero-letters > span > span {
    opacity: 1 !important;
    transform: none !important;
  }
}