/* ============================================================
   KRUNUS — Direction 1 · ORBIT (light SaaS)
   Indigo accent #4f46e5 · Inter · soft cards · whitespace-led
   ============================================================ */

:root {
  --indigo-50:#eef2ff;
  --indigo-100:#e0e7ff;
  --indigo-200:#c7d2fe;
  --indigo-300:#a5b4fc;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;
  --indigo-900:#1e1b4b;

  --ink-900:#0b0d17;
  --ink-700:#2a2d3c;
  --ink-500:#5a5f74;
  --ink-400:#7a7f96;
  --ink-300:#aab0c5;
  --ink-200:#dde1ec;
  --ink-100:#eef1f7;
  --ink-50:#f6f8fc;
  --paper:#ffffff;

  --ok:#16a34a;
  --warn:#d97706;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;

  --shadow-1:0 1px 2px rgba(15,17,40,.05), 0 1px 1px rgba(15,17,40,.03);
  --shadow-2:0 6px 24px -8px rgba(31,28,99,.18), 0 2px 6px rgba(15,17,40,.06);
  --shadow-3:0 30px 60px -24px rgba(31,28,99,.30), 0 6px 18px rgba(15,17,40,.08);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--paper);
  color:var(--ink-900);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings:"cv11","ss01","ss03";
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
img, svg { display:block; max-width:100%; }

.wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
.muted { color:var(--ink-400); }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:14px; letter-spacing:-0.005em;
  height:44px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s;
  white-space:nowrap;
}
.btn--solid { background:var(--indigo-600); color:#fff; box-shadow:0 6px 16px -8px rgba(79,70,229,.6); }
.btn--solid:hover { background:var(--indigo-700); transform:translateY(-1px); }
.btn--ghost { background:#fff; color:var(--ink-900); border-color:var(--ink-200); }
.btn--ghost:hover { border-color:var(--ink-900); }
.btn--sm { height:34px; font-size:13px; padding:0 14px; }
.btn--lg { height:52px; font-size:15px; padding:0 26px; }

/* ---------- announcement bar ---------- */
.ann {
  background:linear-gradient(90deg, #1e1b4b 0%, #4f46e5 60%, #6366f1 100%);
  color:#e0e7ff; font-size:13px;
}
.ann__row { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0; flex-wrap:wrap; }
.ann__dot { width:8px; height:8px; border-radius:50%; background:#a5b4fc; box-shadow:0 0 0 4px rgba(165,180,252,.25); }
.ann__row b { color:#fff; font-weight:600; }
.ann__link { color:#fff; font-weight:600; text-decoration:none; padding-left:8px; border-left:1px solid rgba(255,255,255,.25); }

/* ---------- top util ---------- */
.util { background:#fafbff; border-bottom:1px solid var(--ink-100); font-size:13px; color:var(--ink-500); }
.util__row { display:flex; align-items:center; justify-content:space-between; height:38px; }
.util__left, .util__right { display:flex; align-items:center; gap:18px; }
.util__item { display:inline-flex; align-items:center; gap:7px; }
.util__item:hover { color:var(--ink-900); }
.util__sep { width:1px; height:14px; background:var(--ink-200); }
.util .i { width:14px; height:14px; }
.util__chev { font-size:10px; opacity:.6; }

/* ---------- header ---------- */
.hdr {
  background:#fff;
  border-bottom:1px solid var(--ink-100);
  position:relative; z-index:50;
}
.hdr__row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; height:76px; }
.hdr__logo img { height:36px; width:auto; }
.nav { display:flex; justify-content:center; }
.nav ul { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav__item { position:relative; }
.nav__link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:500; color:var(--ink-700);
  padding:10px 14px; border-radius:10px; cursor:pointer;
  transition:background .12s, color .12s;
}
.nav__link:hover { background:var(--ink-50); color:var(--ink-900); }
.nav__chev { font-size:10px; opacity:.6; }

.mega {
  position:absolute; left:-30px; top:100%;
  /* Top padding is the hover-region bridge — keeps the mouse inside .nav__item
     while traversing from the link down into the menu items. */
  padding:8px 14px 14px;
  width:auto; min-width:300px; max-width:380px;
  display:none; grid-template-columns:1fr;
  background:transparent; border:none;
  border-radius:18px;
  animation: megaFadeIn .14s ease-out;
}
.mega::before {
  content:""; position:absolute; left:14px; right:14px; top:8px; bottom:14px;
  background:#fff; border:1px solid var(--ink-100);
  border-radius:14px; box-shadow:0 16px 40px -16px rgba(11,13,23,.18), 0 2px 8px -2px rgba(11,13,23,.08);
  z-index:-1;
}
.nav__item:hover .mega,
.mega:hover { display:grid; }
@keyframes megaFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.mega__col { display:flex; flex-direction:column; gap:2px; padding:6px 4px; }
.mega__hd {
  font-size:10.5px; font-weight:700; color:var(--ink-400);
  text-transform:uppercase; letter-spacing:.1em;
  padding:6px 12px 10px; border-bottom:1px solid var(--ink-100); margin-bottom:6px;
}
.mega__row {
  display:flex; gap:12px; padding:11px 14px; border-radius:10px;
  transition:background .15s, transform .15s; align-items:flex-start;
  position:relative; cursor:pointer;
}
.mega__row:hover { background:var(--indigo-50); transform:translateX(2px); }
.mega__row:hover .mega__t { color:var(--indigo-600); }
.mega__row::after {
  content:"→"; position:absolute; right:14px; top:50%;
  transform:translateY(-50%) translateX(-4px);
  opacity:0; color:var(--indigo-600); font-size:13px; font-weight:700;
  transition:opacity .15s, transform .15s;
}
.mega__row:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
.mega__t { font-weight:600; font-size:14.5px; color:var(--ink-900); transition:color .15s; line-height:1.3; }
.mega__d { font-size:12.5px; color:var(--ink-500); line-height:1.4; margin-top:2px; }
.mega__ic {
  width:36px; height:36px; flex:0 0 36px; border-radius:10px;
  background:var(--indigo-50); position:relative;
  display:flex; align-items:center; justify-content:center;
  color:var(--indigo-600); font-weight:700;
}
.mega__ic::before {
  position:absolute; font-size:18px; line-height:1;
}
.ic-web::before { content:"🌐"; } .ic-wp::before { content:"W"; font-family:Georgia,serif; }
.ic-rs::before { content:"⇄"; } .ic-mg::before { content:"M"; font-family:Georgia,serif; }
.ic-vps::before { content:"▣"; } .ic-ded::before { content:"▥"; }
.ic-cl::before { content:"☁"; } .ic-gm::before { content:"◉"; }

.mega__col--side { border-left:1px solid var(--ink-100); padding-left:20px; }
.mega__promo {
  background:linear-gradient(180deg,var(--indigo-50),#fff);
  border:1px solid var(--indigo-100); border-radius:14px; padding:18px;
}
.mega__promo-eyebrow { font-size:11px; font-weight:600; color:var(--indigo-600); letter-spacing:.08em; text-transform:uppercase; }
.mega__promo-title { font-size:18px; font-weight:700; margin:4px 0 6px; }
.mega__promo-copy { font-size:13px; color:var(--ink-500); margin-bottom:14px; }

.hdr__cta { display:flex; gap:10px; align-items:center; }
.hdr__login { font-size:14px; font-weight:500; color:var(--ink-700); padding:8px 12px; }
.hdr__login:hover { color:var(--ink-900); }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; padding:80px 0 110px; }
.hero__halo { position:absolute; pointer-events:none; border-radius:50%; filter:blur(80px); opacity:.55; }
.hero__halo--1 { width:560px; height:560px; background:radial-gradient(circle, #c7d2fe 0%, transparent 70%); top:-160px; left:-160px; }
.hero__halo--2 { width:680px; height:680px; background:radial-gradient(circle, #a5b4fc 0%, transparent 70%); top:0; right:-220px; opacity:.45; }
.hero__grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%, black 30%, transparent 70%);
  pointer-events:none;
}
.hero__inner { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }

.pill {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--ink-200);
  border-radius:999px; padding:6px 14px;
  font-size:13px; color:var(--ink-700); font-weight:500;
  box-shadow:var(--shadow-1);
}
.pill__dot { width:8px; height:8px; border-radius:50%; background:var(--indigo-600); box-shadow:0 0 0 4px var(--indigo-100); }

.hero__title {
  font-size:clamp(40px, 5.4vw, 68px);
  font-weight:800; line-height:1.04; letter-spacing:-0.035em;
  margin:22px 0 18px;
  color:var(--ink-900);
  text-wrap:balance;
}
.hero__title-accent { color:var(--indigo-600); position:relative; white-space:nowrap; }
.hero__title-accent::after {
  content:""; position:absolute; left:0; right:0; bottom:6%;
  height:8px; background:var(--indigo-100); z-index:-1; border-radius:6px;
}
.hero__lede { font-size:18px; color:var(--ink-500); max-width:560px; margin:0 0 32px; text-wrap:pretty; }

.search {
  display:flex; align-items:center; gap:0;
  background:#fff; border:1px solid var(--ink-200); border-radius:14px;
  padding:6px; box-shadow:var(--shadow-2);
  max-width:560px;
}
.search__leading { padding:0 12px 0 14px; color:var(--ink-400); font-family:"JetBrains Mono",monospace; font-size:14px; }
.search__input {
  flex:1; height:44px; border:0; outline:0; background:transparent;
  font-size:15px; color:var(--ink-900); padding:0; font-family:"JetBrains Mono",monospace;
}
.search__input::placeholder { color:var(--ink-300); }
.search__tld {
  height:44px; border:0; background:var(--ink-50); border-radius:10px;
  padding:0 10px; font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--ink-700);
  margin-right:6px;
}
.search__btn { height:44px; }

.tlds { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; align-items:center; }
.tlds__label { font-size:13px; color:var(--ink-400); }
.tld {
  font-family:"JetBrains Mono",monospace; font-size:12.5px;
  background:#fff; border:1px solid var(--ink-200); border-radius:8px;
  padding:5px 10px; color:var(--ink-500);
}
.tld b { color:var(--ink-900); font-weight:600; margin-left:6px; }

.hero__trust { margin-top:34px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.hero__trust-row { display:flex; align-items:center; gap:12px; }
.hero__trust-text { font-size:14px; color:var(--ink-700); }
.hero__trust-text b { color:var(--ink-900); }
.stars { color:#f59e0b; letter-spacing:2px; font-size:15px; }
.hero__trust-badges { display:flex; gap:8px; }
.badge {
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border-radius:6px;
  background:var(--indigo-600); color:#fff; border:1px solid var(--indigo-700);
  box-shadow:0 4px 12px -6px rgba(79,70,229,.5);
}

/* ----- hero art ----- */
.hero__art { position:relative; height:520px; }
.card {
  position:absolute; background:#fff; border:1px solid var(--ink-100);
  border-radius:18px; box-shadow:var(--shadow-3);
  overflow:hidden;
}
.card--main { inset:20px 20px 60px 20px; }
.card__top {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--ink-100);
  background:#fbfcff;
}
.card__dots { display:flex; gap:6px; }
.card__dots i { width:10px; height:10px; border-radius:50%; background:var(--ink-200); }
.card__dots i:first-child { background:#ff5f57; }
.card__dots i:nth-child(2) { background:#febc2e; }
.card__dots i:last-child { background:#28c840; }
.card__url { flex:1; font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-500); background:#fff; border:1px solid var(--ink-100); padding:5px 10px; border-radius:6px; }
.card__pill { font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; background:#dcfce7; color:#166534; display:inline-flex; align-items:center; gap:5px; }
.card__pill::before { content:""; width:6px; height:6px; border-radius:50%; background:#22c55e; }

.card__body { padding:20px; }
.card__row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.card__metric-label { font-size:11.5px; color:var(--ink-400); font-weight:500; }
.card__metric-val { font-size:18px; font-weight:700; color:var(--ink-900); margin:2px 0 6px; font-feature-settings:"tnum"; }
.card__metric-val--ok { color:var(--ok); }
.bar { height:6px; background:var(--ink-100); border-radius:99px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--indigo-600); border-radius:99px; }

.card__chart { background:#fbfcff; border:1px solid var(--ink-100); border-radius:12px; padding:12px; }
.card__chart svg { width:100%; height:110px; }
.card__chart-label { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-500); padding:0 4px; }
.card__chart-label b { color:var(--ok); font-weight:600; }

.card__regions { display:flex; gap:8px; margin-top:14px; }
.region {
  flex:1; display:flex; align-items:center; gap:6px; justify-content:space-between;
  font-size:12px; color:var(--ink-700); font-weight:500;
  padding:8px 10px; background:var(--ink-50); border-radius:8px;
}
.region em { font-style:normal; font-family:"JetBrains Mono",monospace; color:var(--indigo-600); font-weight:600; }

.mini { position:absolute; background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-2); display:flex; gap:10px; align-items:center; max-width:240px; }
.mini__ic { width:32px; height:32px; border-radius:8px; background:var(--indigo-50); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 32px; }
.mini__ic--ok { background:#dcfce7; color:#166534; }
.mini__t { font-size:13px; font-weight:600; color:var(--ink-900); }
.mini__d { font-size:11.5px; color:var(--ink-400); }
.mini--ssl { top:0; right:-20px; animation:bob 6s ease-in-out infinite; }
.mini--deploy { bottom:40px; left:-10px; animation:bob 7s ease-in-out -2s infinite; }
.mini--bk { bottom:-10px; right:30px; animation:bob 5.5s ease-in-out -1s infinite; }
@keyframes bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- logos ---------- */
.logos { padding:40px 0 70px; }
.logos__lede { text-align:center; font-size:13.5px; font-weight:600; color:var(--ink-400); letter-spacing:.08em; text-transform:uppercase; margin-bottom:30px; }
.logos__row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:720px) { .logos__row { grid-template-columns:repeat(2,1fr); } }
.logo-text { font-family:Inter,sans-serif; font-weight:700; font-size:18px; color:var(--ink-900); letter-spacing:-.02em; opacity:.85; }
.logo-text:hover { opacity:1; }
.logo-slot {
  height:64px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, #f6f8fc, #f6f8fc 10px, #eef1f7 10px, #eef1f7 20px);
  border:1px dashed var(--ink-200); border-radius:12px;
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-400); letter-spacing:.06em;
}

/* ---------- section heads ---------- */
.sec-head { max-width:720px; margin-bottom:48px; }
.sec-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow { font-size:12px; font-weight:600; color:var(--indigo-600); letter-spacing:.10em; text-transform:uppercase; margin-bottom:14px; }
.sec-title { font-size:clamp(30px, 3.5vw, 44px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin:0 0 14px; text-wrap:balance; }
.sec-lede { font-size:17px; color:var(--ink-500); margin:0; text-wrap:pretty; }

/* ---------- category grid ---------- */
.cats { padding:80px 0; background:linear-gradient(180deg, #fff 0%, #fafbff 100%); }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat {
  position:relative;
  background:#fff; border:1px solid var(--ink-100); border-radius:18px;
  padding:24px 22px 22px; transition:transform .15s, border-color .15s, box-shadow .15s;
  display:flex; flex-direction:column; gap:8px;
  min-height:200px;
}
.cat:hover { transform:translateY(-3px); border-color:var(--indigo-200); box-shadow:var(--shadow-2); }
.cat__ic { width:44px; height:44px; border-radius:12px; background:var(--indigo-50); color:var(--indigo-600); margin-bottom:6px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; overflow:hidden; }
.cat__ic--web::before { content:"🌐"; } .cat__ic--wp::before { content:"W"; font-family:Georgia,serif; }
.cat__ic--mg::before { content:"M"; font-family:Georgia,serif; }
.cat__ic--vps::before { content:"▣"; } .cat__ic--cl::before { content:"☁"; }
.cat__ic--ded::before { content:"▥"; } .cat__ic--rs::before { content:"⇄"; }
.cat__ic--gm::before { content:"◉"; }
.cat__ic--gpu::before { content:"◆"; } /* fixes blank GPU card icon */
/* CMS-uploaded card icons — sized to fit inside the 44×44 pill,
   slight inset so PNG/SVG art has breathing room. */
.cat__ic img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; background:transparent; }
.cat__t { font-size:17px; font-weight:700; color:var(--ink-900); }
.cat__d { font-size:13.5px; color:var(--ink-500); flex:1; }
.cat__from { font-size:13px; color:var(--ink-400); }
.cat__from b { color:var(--ink-900); font-weight:700; font-size:15px; }
.cat__arrow { position:absolute; top:24px; right:22px; color:var(--ink-300); font-size:18px; transition:color .15s, transform .15s; }
.cat:hover .cat__arrow { color:var(--indigo-600); transform:translateX(2px); }
.cat__tag { position:absolute; top:24px; right:48px; font-size:10px; font-weight:700; letter-spacing:.08em; padding:3px 8px; border-radius:5px; background:var(--indigo-600); color:#fff; }

/* ---------- pricing ---------- */
.pricing { padding:100px 0; }
.toggle {
  display:inline-flex; padding:5px; background:var(--ink-50); border:1px solid var(--ink-100);
  border-radius:99px; margin-top:24px;
}
.toggle__opt {
  border:0; background:transparent; padding:9px 18px; border-radius:99px;
  font-size:13.5px; font-weight:600; color:var(--ink-500);
  display:inline-flex; align-items:center; gap:8px;
}
.toggle__opt.is-active { background:#fff; color:var(--ink-900); box-shadow:var(--shadow-1); }
.toggle__save { background:#dcfce7; color:#166534; font-size:11px; padding:2px 8px; border-radius:99px; font-weight:700; }

.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
.plan {
  background:#fff; border:1px solid var(--ink-100); border-radius:22px;
  padding:32px 28px; position:relative; display:flex; flex-direction:column; gap:14px;
}
.plan--featured {
  background:linear-gradient(180deg,#fff 0%,#fafbff 100%);
  border:2px solid var(--indigo-600);
  box-shadow:0 30px 60px -30px rgba(79,70,229,.4);
  transform:translateY(-8px);
}
.plan__ribbon {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--indigo-600); color:#fff; font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:99px; letter-spacing:.02em;
}
.plan__name { font-size:14px; font-weight:600; color:var(--indigo-600); letter-spacing:.06em; text-transform:uppercase; }
.plan__d { font-size:14px; color:var(--ink-500); margin:-8px 0 8px; }
.plan__price { display:flex; align-items:baseline; gap:2px; }
.plan__price sup { font-size:22px; color:var(--ink-700); font-weight:600; margin-right:4px; }
.plan__price-amt { font-size:54px; font-weight:800; letter-spacing:-0.04em; color:var(--ink-900); font-feature-settings:"tnum"; }
.plan__price-per { font-size:15px; color:var(--ink-400); margin-left:6px; }
.plan__renew { font-size:12.5px; color:var(--ink-400); }
.plan__cta { width:100%; margin-top:6px; }
.plan__list { list-style:none; margin:14px 0 0; padding:14px 0 0; display:flex; flex-direction:column; gap:10px; }
.plan__price--annual[hidden], .plan__price--monthly[hidden] { display:none; }
.hdr__logo-text { font-size:22px; font-weight:800; color:var(--indigo-600); letter-spacing:-0.02em; }

/* Brand-logo strip in the tech-stack section — monochrome dark, consistent height, bigger */
.logos__row img { max-height:44px; width:auto; max-width:180px; opacity:.85; filter:grayscale(1) brightness(.4); transition:opacity .2s, filter .2s; }
.logos__row img:hover { opacity:1; filter:none; }
.logo-slot { display:flex; align-items:center; justify-content:center; min-height:60px; }

/* Subhero: remove tight padding so heroes breathe more */
.subhero { padding:64px 0 40px; }
.subhero__inner { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.subhero__inner--center { grid-template-columns:1fr; text-align:center; max-width:880px; margin:0 auto; }
.subhero__inner--center .subhero__ctas { justify-content:center; }
.plan__list li { position:relative; padding-left:24px; font-size:14px; color:var(--ink-700); }
.plan__list li::before {
  content:""; position:absolute; left:0; top:6px;
  width:14px; height:14px; border-radius:50%; background:var(--indigo-50);
  background-image:linear-gradient(45deg, transparent 38%, var(--indigo-600) 38% 46%, transparent 46%, transparent 54%, var(--indigo-600) 54% 62%, transparent 62%);
}
.plan__list li::after {
  content:"✓"; position:absolute; left:2px; top:3px; color:var(--indigo-600); font-size:11px; font-weight:700;
  background:var(--indigo-50); width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.plan__list li::before { display:none; }

.pricing__foot { text-align:center; font-size:14px; color:var(--ink-500); margin-top:36px; }

/* ---------- feats ---------- */
.feats { padding:100px 0; background:linear-gradient(180deg,#fafbff 0%, #fff 100%); }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(180px,auto); gap:18px; }
.feat {
  background:#fff; border:1px solid var(--ink-100); border-radius:18px;
  padding:28px; position:relative; overflow:hidden;
}
.feat--tall { grid-row:span 2; }
.feat--wide { grid-column:span 2; }
.feat__ic { width:40px; height:40px; border-radius:10px; background:var(--indigo-50); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.feat__t { font-size:18px; font-weight:700; margin:0 0 8px; }
.feat__d { font-size:14px; color:var(--ink-500); margin:0; }

.feat__viz { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.vbar { display:flex; align-items:center; gap:10px; }
.vbar__l { font-size:12px; color:var(--ink-500); width:78px; }
.vbar__t { flex:1; height:10px; border-radius:99px; background:var(--indigo-600); display:block; }
.vbar__t--grey { background:var(--ink-200); }
.vbar b { font-size:12px; font-family:"JetBrains Mono",monospace; color:var(--ink-700); width:50px; text-align:right; }

.feat__chat { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.chat-row {
  align-self:flex-start; max-width:80%;
  background:var(--ink-50); border:1px solid var(--ink-100);
  padding:9px 13px; border-radius:14px 14px 14px 4px; font-size:13px; color:var(--ink-700);
}
.chat-row code { background:#fff; padding:1px 6px; border-radius:4px; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--indigo-600); }
.chat-row--me { align-self:flex-end; background:var(--indigo-600); color:#fff; border-color:transparent; border-radius:14px 14px 4px 14px; }
.chat-row--ok { background:#dcfce7; color:#166534; border-color:#bbf7d0; }

/* ---------- testimonials ---------- */
.testis { padding:100px 0; }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testi { margin:0; background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:28px; }
.testi blockquote { font-size:17px; line-height:1.5; color:var(--ink-700); margin:14px 0 22px; text-wrap:pretty; }
.testi figcaption { display:flex; align-items:center; gap:12px; }
.testi__av { width:40px; height:40px; border-radius:50%; background:var(--indigo-100); color:var(--indigo-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.testi figcaption b { font-size:14px; display:block; }
.testi figcaption span { font-size:12.5px; color:var(--ink-400); }

/* ---------- CTA ---------- */
.cta {
  margin:40px 0 80px; position:relative;
}
.cta__inner {
  background:linear-gradient(135deg, #1e1b4b 0%, #4f46e5 100%);
  border-radius:28px; padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
}
.cta__inner::before {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(165,180,252,.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(165,180,252,.18) 0%, transparent 40%);
  pointer-events:none;
}
.cta__t { font-size:clamp(28px, 3vw, 40px); font-weight:800; letter-spacing:-0.025em; margin:0 0 8px; position:relative; }
.cta__d { font-size:16px; color:rgba(255,255,255,.78); margin:0; position:relative; }
.cta__btns { display:flex; gap:12px; position:relative; }
.cta .btn--solid { background:#fff; color:var(--indigo-700); }
.cta .btn--solid:hover { background:#f6f8fc; }
.cta .btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.cta .btn--ghost:hover { background:rgba(255,255,255,.08); border-color:#fff; }

/* ===== sub-page hero ===== */
.subhero { position:relative; padding:80px 0 60px; overflow:hidden; }
.subhero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#fafbff 0%,#fff 100%); z-index:-2; }
.subhero__halo { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, #c7d2fe 0%, transparent 70%); filter:blur(80px); opacity:.5; pointer-events:none; z-index:-1; top:-200px; right:-150px; }
.crumb { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-400); margin-bottom:18px; }
.crumb a:hover { color:var(--indigo-600); }
.crumb span { color:var(--ink-300); }
.subhero__inner { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.subhero__inner--center { grid-template-columns:1fr; text-align:center; max-width:780px; margin:0 auto; }
.subhero__title { font-size:clamp(36px, 4.6vw, 60px); font-weight:800; letter-spacing:-0.035em; line-height:1.05; margin:14px 0 16px; text-wrap:balance; }
.subhero__title .acc { color:var(--indigo-600); }
.subhero__lede { font-size:17px; color:var(--ink-500); margin:0 0 26px; max-width:540px; text-wrap:pretty; }
.subhero__inner--center .subhero__lede { margin-left:auto; margin-right:auto; }
.subhero__ctas { display:flex; gap:10px; flex-wrap:wrap; }
.subhero__inner--center .subhero__ctas { justify-content:center; }
.subhero__art { background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:24px; box-shadow:var(--shadow-3); min-height:380px; display:flex; flex-direction:column; gap:14px; }

/* hero figure (image-slot styled) */
.fig {
  background:repeating-linear-gradient(135deg, #f6f8fc 0, #f6f8fc 12px, #eef1f7 12px, #eef1f7 24px);
  border:1px dashed var(--ink-200); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--ink-400); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; text-align:center; padding:24px;
}
.fig b { color:var(--ink-700); font-weight:700; }
.fig em { font-style:italic; font-family:"Inter",sans-serif; font-size:12.5px; color:var(--ink-400); letter-spacing:0; }

/* CMS-driven hero images (admin upload via /admin/page-settings).
   .subhero__img replaces the .fig placeholder inside the 2-col subhero layout.
   .subhero__topimg sits ABOVE the heading in centred subheros.
   .hero__img replaces the decorative browser card on the home page. */
.subhero__img {
  display:block; width:100%; height:auto; max-height:480px;
  object-fit:cover; border-radius:18px;
  border:1px solid var(--ink-100); box-shadow:var(--shadow-3);
}
.subhero__topimg {
  display:block; max-width:240px; width:auto; height:auto; max-height:180px;
  margin:0 auto 18px; object-fit:contain;
}
.subhero__inner:not(.subhero__inner--center) .subhero__topimg {
  margin:0 0 18px; /* left-aligned on 2-col layout (e.g. contact page) */
}
.hero__img {
  display:block; width:100%; height:auto; max-height:520px;
  object-fit:cover; border-radius:18px;
  box-shadow:var(--shadow-3);
}

/* feature mini icons (no emoji) */
.fchip { display:inline-flex; gap:10px; align-items:center; background:var(--indigo-50); color:var(--indigo-700); font-size:13px; font-weight:500; padding:7px 13px; border-radius:99px; }
.fchip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--indigo-600); }

/* product specs table */
.spec-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--ink-100); border-radius:18px; overflow:hidden; }
.spec-table th, .spec-table td { padding:18px 22px; text-align:left; font-size:14px; }
.spec-table th { font-weight:600; font-size:12px; letter-spacing:.06em; color:var(--ink-400); text-transform:uppercase; background:var(--ink-50); border-bottom:1px solid var(--ink-100); }
.spec-table td { border-bottom:1px solid var(--ink-100); color:var(--ink-700); }
.spec-table tr:last-child td { border-bottom:0; }
.spec-table tbody tr:hover td { background:#fafbff; }
.spec-table th.col-feat, .spec-table td.col-feat { color:var(--indigo-600); background:rgba(238,242,255,.4); }
.spec-table td.label { font-weight:600; color:var(--ink-900); }
.spec-table .tick { color:var(--ok); font-weight:700; }
.spec-table .cross { color:var(--ink-300); }
.spec-table .price-row td { font-family:"JetBrains Mono",monospace; font-size:15px; font-weight:700; color:var(--ink-900); }

/* FAQ */
.faq { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.faq__item { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:20px 22px; }
.faq__q { font-size:15.5px; font-weight:600; color:var(--ink-900); margin:0 0 6px; }
.faq__a { font-size:14px; color:var(--ink-500); margin:0; text-wrap:pretty; }

/* compact features grid (4-up) */
.f4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.f4__c { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:22px; }
.f4__ic { width:36px; height:36px; border-radius:10px; background:var(--indigo-50); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; margin-bottom:10px; font-family:"JetBrains Mono",monospace; }
.f4__t { font-size:15px; font-weight:700; margin:0 0 4px; }
.f4__d { font-size:13px; color:var(--ink-500); margin:0; text-wrap:pretty; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:24px; position:relative; }
.step__n { font-size:34px; font-weight:800; color:var(--indigo-200); letter-spacing:-0.04em; line-height:1; margin-bottom:8px; font-feature-settings:"tnum"; }
.step__t { font-size:16px; font-weight:700; margin:0 0 6px; }
.step__d { font-size:13.5px; color:var(--ink-500); margin:0; }

/* server config configurator */
.cfg { background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:26px; }
.cfg__row { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.cfg__row:last-child { margin-bottom:0; }
.cfg__lbl { font-size:13px; color:var(--ink-500); font-weight:500; display:flex; justify-content:space-between; align-items:center; }
.cfg__lbl b { color:var(--ink-900); font-weight:700; font-family:"JetBrains Mono",monospace; }
.cfg__slider { width:100%; height:6px; background:var(--ink-100); border-radius:99px; position:relative; }
.cfg__slider::after { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background:var(--indigo-600); border-radius:99px; }
.cfg__slider::before { content:""; position:absolute; left:38%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--indigo-600); box-shadow:var(--shadow-1); z-index:1; }
.cfg__opts { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cfg__opt { font-size:13px; font-weight:500; padding:9px 8px; text-align:center; border-radius:8px; background:var(--ink-50); border:1px solid var(--ink-100); cursor:pointer; color:var(--ink-700); }
.cfg__opt.is-sel { background:var(--indigo-600); color:#fff; border-color:var(--indigo-600); }
.cfg__total { display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; margin-top:16px; border-top:1px solid var(--ink-100); }
.cfg__total-lbl { font-size:13px; color:var(--ink-500); }
.cfg__total-amt { font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:800; color:var(--ink-900); }

/* contact form */
.cform { background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:32px; box-shadow:var(--shadow-2); }
.cform__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.cform__row--single { grid-template-columns:1fr; }
.cform__field label { display:block; font-size:13px; font-weight:600; color:var(--ink-700); margin-bottom:6px; }
.cform__field input, .cform__field select, .cform__field textarea {
  width:100%; height:46px; padding:0 14px; border:1px solid var(--ink-200); border-radius:10px;
  font:inherit; font-size:14px; color:var(--ink-900); background:#fff; outline:0; transition:border-color .12s, box-shadow .12s;
}
.cform__field textarea { height:140px; padding:12px 14px; resize:vertical; }
.cform__field input:focus, .cform__field select:focus, .cform__field textarea:focus { border-color:var(--indigo-600); box-shadow:0 0 0 4px var(--indigo-100); }

/* server racks ascii art for dedicated */
.rack { background:linear-gradient(180deg, #0b0d17 0%, #1a1c2e 100%); border-radius:14px; padding:20px; color:#aab0c5; font-family:"JetBrains Mono",monospace; font-size:11px; line-height:1.7; }
.rack b { color:#a5b4fc; }
.rack .ok { color:#22c55e; }

/* game banner */
.games { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.gtile { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:18px 14px; text-align:center; transition:transform .12s, border-color .12s; }
.gtile:hover { transform:translateY(-3px); border-color:var(--indigo-200); }
.gtile__art { height:80px; border-radius:10px; background:repeating-linear-gradient(135deg, #f6f8fc 0, #f6f8fc 10px, #eef1f7 10px, #eef1f7 20px); border:1px dashed var(--ink-200); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-400); margin-bottom:10px; }
.gtile__t { font-size:13px; font-weight:700; color:var(--ink-900); }
.gtile__p { font-size:12px; color:var(--ink-400); margin-top:2px; }

/* about timeline */
.tline { position:relative; display:flex; flex-direction:column; gap:30px; padding:10px 0; }
.tline::before { content:""; position:absolute; left:84px; top:0; bottom:0; width:1px; background:var(--ink-200); }
.tline__row { display:grid; grid-template-columns:90px 30px 1fr; gap:20px; align-items:start; }
.tline__year { font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:700; color:var(--ink-900); padding-top:2px; }
.tline__dot { width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--indigo-600); margin:6px 0 0 8px; position:relative; z-index:1; }
.tline__t { font-size:17px; font-weight:700; margin:0 0 4px; }
.tline__d { font-size:14px; color:var(--ink-500); margin:0; text-wrap:pretty; }

/* values / team grid */
.vals { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.val { background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:28px; }
.val__ic { width:42px; height:42px; border-radius:10px; background:var(--indigo-50); color:var(--indigo-700); display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:14px; font-family:"JetBrains Mono",monospace; }
.val__t { font-size:17px; font-weight:700; margin:0 0 6px; }
.val__d { font-size:14px; color:var(--ink-500); margin:0; text-wrap:pretty; }

.team { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tmem { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:14px; }
.tmem__av { height:160px; border-radius:10px; background:repeating-linear-gradient(135deg,#f6f8fc 0,#f6f8fc 12px,#eef1f7 12px,#eef1f7 24px); border:1px dashed var(--ink-200); margin-bottom:12px; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-400); }
.tmem__n { font-size:14.5px; font-weight:700; margin:0; }
.tmem__r { font-size:12.5px; color:var(--ink-400); }

/* domain hero search big */
.dom-search { background:#fff; border:1px solid var(--ink-200); border-radius:18px; padding:8px; box-shadow:var(--shadow-3); display:flex; gap:0; align-items:center; }
.dom-search input { flex:1; height:60px; border:0; outline:0; background:transparent; font-size:18px; color:var(--ink-900); padding:0 18px; font-family:"JetBrains Mono",monospace; }
.dom-search .btn { height:60px; padding:0 28px; font-size:15px; }

/* tlds grid for domain page */
.tldg { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.tldg__c { background:#fff; border:1px solid var(--ink-100); border-radius:12px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.tldg__t { font-family:"JetBrains Mono",monospace; font-size:18px; font-weight:700; color:var(--indigo-600); }
.tldg__p { font-size:13px; color:var(--ink-700); font-weight:600; }
.tldg__p s { color:var(--ink-300); font-weight:500; margin-right:6px; }
.tldg__d { font-size:11.5px; color:var(--ink-400); }

/* perf gauge for product pages */
.gauges { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gauge { background:#fff; border:1px solid var(--ink-100); border-radius:14px; padding:24px; text-align:center; }
.gauge__n { font-size:44px; font-weight:800; color:var(--indigo-600); letter-spacing:-0.03em; font-feature-settings:"tnum"; }
.gauge__n span { font-size:22px; color:var(--ink-400); margin-left:2px; font-weight:600; }
.gauge__l { font-size:13px; color:var(--ink-500); margin-top:4px; }

/* ---------- footer ---------- */
.ftr { background:#0b0d17; color:#aab0c5; padding:80px 0 30px; }
.ftr__top { display:grid; grid-template-columns:1.2fr 3fr; gap:60px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.ftr__logo { height:40px; width:auto; }
.ftr__pitch { font-size:14px; color:#aab0c5; margin:18px 0 16px; max-width:340px; line-height:1.55; }

/* Trust pills */
.ftr__trust { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ftr__pill {
    font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:6px;
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid transparent;
}
.ftr__pill--ssl { background:rgba(34,197,94,.10); color:#4ade80; border-color:rgba(34,197,94,.25); }
.ftr__pill--pci { background:rgba(99,102,241,.12); color:#a5b4fc; border-color:rgba(99,102,241,.35); }

/* Payment method strip */
.ftr__pays { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:18px; }
.ftr__pay {
    font-size:10px; font-weight:700; letter-spacing:.08em;
    padding:6px 9px; border-radius:5px;
    background:rgba(255,255,255,.05); color:#aab0c5;
    border:1px solid rgba(255,255,255,.08);
}
.ftr__social { display:flex; gap:10px; }
.ftr__social a {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(255,255,255,.06); color:#fff;
  font-size:13px; transition:background .12s;
}
.ftr__social a:hover { background:var(--indigo-600); }
.ftr__cols { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.ftr__hd { font-size:13px; font-weight:600; color:#fff; margin-bottom:14px; letter-spacing:.02em; }
.ftr__cols a { display:block; font-size:13.5px; color:#7a7f96; padding:4px 0; transition:color .12s; }
.ftr__cols a:hover { color:#fff; }
.ftr__bot { display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:#5a5f74; }
.ftr__legal { display:flex; gap:22px; }
.ftr__legal a:hover { color:#fff; }