:root{
  --bg:#F7F8FB;
  --bg2:#FFFFFF;
  --surface:rgba(255,255,255,.82);
  --card:#FFFFFF;
  --text:#0B1220;
  --muted:#556070;
  --line:rgba(11,18,32,.10);
  --line2:rgba(11,18,32,.14);
  --accent:#2F6BFF;
  --accent2:#00C2FF;
  --ok:#0BBE73;
  --warn:#D39B0B;
  --shadow:0 22px 60px rgba(11,18,32,.12);
  --shadow2:0 12px 30px rgba(11,18,32,.10);
  --radius:20px;

  /* Compat vars (used by some premium sections) */
  --mc-text: var(--text);
  --mc-text-muted: var(--muted);
  --mc-border-soft: var(--line);
  --mc-border-strong: var(--line2);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Ensure HTML [hidden] works even when components set display */
[hidden]{display:none!important}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* Background:
     - fixed on desktop (so it doesn't "repeat" visually on very long pages)
     - subtle drift animation for a premium feel (disabled for reduced-motion) */
  background-image:
    radial-gradient(900px 520px at 12% 3%, rgba(47,107,255,.16), transparent 55%),
    radial-gradient(740px 480px at 86% 0%, rgba(0,194,255,.18), transparent 54%),
    radial-gradient(860px 520px at 44% 110%, rgba(47,107,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-repeat:no-repeat;
  background-position: 12% 3%, 86% 0%, 44% 110%, 0 0;
}
@media (min-width:980px){
  body{background-attachment:fixed}
}
@media (prefers-reduced-motion:no-preference){
  @media (min-width:980px){
    body{animation:mcBgDrift 18s ease-in-out infinite alternate}
  }
}
@keyframes mcBgDrift{
  from{background-position: 12% 3%, 86% 0%, 44% 110%, 0 0}
  to{background-position: 16% 6%, 82% 3%, 46% 108%, 0 0}
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.96}
.container{width:min(1348px, 92%); margin:0 auto}

.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:14px;
  box-shadow:var(--shadow2);
  z-index:9999;
}

/* Header */
.header{
  position:sticky; top:0; z-index:40;
  background: rgba(247,248,251,.74);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  transition: transform .22s ease, margin-bottom .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.header.is-scrolled{box-shadow:0 10px 30px rgba(11,18,32,.08)}

/* Hide-on-scroll (down) — collapses layout space too */
.header.is-hidden{
  transform: translateY(calc(-1 * var(--header-h, 120px)));
  margin-bottom: calc(-1 * var(--header-h, 120px));
}

/* When scrolling up: show header, but hide the topbar */
.header.is-compact .topbar{
  max-height:0;
  opacity:0;
  padding:0;
  border-bottom:0;
  pointer-events:none;
  /* prevent any overflow artifacts while compact */
  overflow:hidden;
}

/* Top bar (above logo) */
.topbar{
  border-bottom:1px solid var(--line);
  background: rgba(247,248,251,.66);
  max-height:64px;
  /* allow currency/lang dropdowns to render outside */
  overflow:visible;
  position:relative;
  z-index:80;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:6px 0;
}
.topbar__tagline{
  font-size:11.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:56vw;
}
.topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* Quick site search (top bar) */
.topsearch{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:3px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.62);
  border:1px solid var(--line2);
  width:220px;
  max-width:220px;
  transition:
    width .22s ease,
    max-width .22s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
  z-index:120;
}

/* Expand on hover/focus for comfortable long queries */
.topsearch:hover,
.topsearch:focus-within,
.topsearch.is-open{
  width:380px;
  max-width:min(380px, 52vw);
}
.topsearch:focus-within{
  background: rgba(255,255,255,.88);
  border-color: rgba(47,107,255,.26);
  box-shadow: 0 14px 36px rgba(47,107,255,.10);
  transform: translateY(-1px);
}
.topsearch__icon{
  display:inline-flex;
  color:var(--muted);
}
.topsearch__icon svg{width:14px; height:14px}
.topsearch__input{
  appearance:none;
  border:0;
  outline:none;
  background:transparent;
  font-size:12px;
  color:var(--text);
  width:100%;
}
.topsearch__input::placeholder{color: rgba(34,45,64,.48)}
.topsearch__results{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  right:auto;
  width:100%;
  border-radius:18px;
  /* Opaque enough so the header menu doesn't "shine through" */
  background: rgba(255,255,255,.98);
  border:1px solid rgba(17,24,39,.12);
  box-shadow: 0 18px 50px rgba(11,18,32,.18);
  backdrop-filter: blur(14px);
  overflow:hidden;
  z-index:9999;
}
.topsearch__results[hidden]{display:none}
.sr-item{display:block; padding:12px 14px; text-decoration:none; color:var(--text); border-top:1px solid rgba(17,24,39,.08)}
.sr-item:first-child{border-top:0}
.sr-item:hover{background: rgba(47,107,255,.06)}
.sr-item__t{font-weight:800; font-size:13.5px; line-height:1.2}
.sr-item__d{margin-top:3px; font-size:12px; color:var(--muted); line-height:1.35}
.sr-empty{padding:12px 14px; font-size:12.5px; color:var(--muted)}

@media (max-width: 980px){
  .topsearch{display:none}
}

.topbar .btn--small{padding:7px 10px; border-radius:12px; font-size:12px}

/* Make dropdown buttons in the topbar a bit more compact */
.topbar .lang__btn,
.topbar .currency__btn{padding:7px 10px; border-radius:12px; font-size:12px}

/* Compact controls inside topbar */
.topbar .lang__btn,
.topbar .currency__btn{
  padding:8px 10px;
  border-radius:12px;
  font-size:12.5px;
}

/* Main header row */
.header__right{display:flex; align-items:center; gap:12px}

/* Phone/email dropdown */
.contact{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.contact__phone{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--line2);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.contact__phone:hover{box-shadow:var(--shadow2)}
.contact__email{
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
}
.contact__email:hover{color:var(--text); text-decoration:underline}
.contact__menu{
  position:absolute;
  right:0;
  /* small gap + hover bridge, so you can move the mouse into the menu */
  top:calc(100% + 6px);
  width:min(320px, 86vw);
  padding:10px;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:18px;
  box-shadow:var(--shadow2);
  display:none;
  z-index:9999;
}

.contact__menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
}
.contact:hover .contact__menu,
.contact.is-open .contact__menu{display:block}
.contact__item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
}
.contact__item:hover{background:rgba(11,18,32,.04)}
.contact__item strong{font-weight:900}
.contact__item span{font-size:12px; color:var(--muted)}
.contact__divider{height:1px; background:var(--line); margin:8px 4px}

/* Dropdown contact details (email / address / hours) */
.contact__info{display:grid; gap:10px; padding:6px 8px 4px}
.contact__row{display:grid; gap:2px}
.contact__k{font-size:12px; color:var(--muted)}
.contact__v{color:var(--text); font-weight:700; line-height:1.35}
.contact__v a{color:var(--text); text-decoration:none; font-weight:900}
.contact__v a:hover{text-decoration:underline}

@media (max-width:979px){
  .topbar__tagline{display:none}
  .contact__email{display:none}
  .contact__phone{padding:10px 10px}
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
  position:relative;
  z-index:60;
}

.brand{display:flex; align-items:center; gap:10px; min-width:260px}
.brand__dot{
  width:11px; height:11px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 7px rgba(47,107,255,.10);
}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted); margin-left:6px; display:none}
@media (min-width:980px){ .brand__tag{display:inline} }

.nav{
  display:none;
  gap:4px;
  align-items:center;
  padding:6px;
  border-radius:18px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.70);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:900;
  color:rgba(11,18,32,.62);
  padding:9px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition: background .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav__link:hover{
  background: rgba(47,107,255,.08);
  border-color: rgba(47,107,255,.14);
  color:var(--text);
  transform: translateY(-1px);
}
.nav__link.is-active{
  background: linear-gradient(135deg, rgba(47,107,255,.18), rgba(0,194,255,.14));
  color:var(--text);
  border:1px solid rgba(47,107,255,.22);
  box-shadow: 0 10px 28px rgba(47,107,255,.10);
}
@media (min-width:980px){ .nav{display:flex} }

.header__actions{display:flex; align-items:center; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:14px;
  background: linear-gradient(135deg, rgba(47,107,255,.95), rgba(0,194,255,.95));
  color:#fff; font-weight:800; border:0;
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn:active{transform: translateY(0)}

.btn--ghost{
  background: rgba(255,255,255,.70);
  color:var(--text);
  border:1px solid var(--line2);
  box-shadow:none;
}
.btn--ghost:hover{box-shadow:var(--shadow2)}
.btn--small{padding:10px 12px; border-radius:12px; font-size:13px}
.btn--full{width:100%}

.muted{color:var(--muted)}
.link{color:var(--acc); text-decoration:none; font-weight:900}
.link:hover{text-decoration:underline}

.note{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(47,107,255,.04);
  color:var(--muted);
  line-height:1.6;
}
.small{font-size:12px}

.burger{
  width:42px; height:42px; border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--line2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background:var(--text); margin:2px 0; border-radius:3px}
@media (min-width:980px){ .burger{display:none} }

.lang{position:relative}
.lang__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--line2);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.lang__menu{
  display:none;
  position:absolute; right:0; top:48px;
  min-width:140px;
  background: rgba(255,255,255,.98);
  border:1px solid var(--line2);
  border-radius:14px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  z-index:2000;
}
.lang__menu a{
  display:block; padding:10px 12px;
  color:var(--muted);
}
.lang__menu a:hover{background:rgba(11,18,32,.04); color:var(--text)}
.lang.is-open .lang__menu{display:block}

/* Currency dropdown (same UX as language) */
.currency{position:relative}
.currency__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--line2);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.currency__menu{
  display:none;
  position:absolute; right:0; top:48px;
  min-width:140px;
  background: rgba(255,255,255,.98);
  border:1px solid var(--line2);
  border-radius:14px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  z-index:2000;
}
.currency__menu button{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--muted);
  font: inherit;
}
.currency__menu button:hover{background:rgba(11,18,32,.04); color:var(--text)}
.currency__menu button.is-active{color:var(--text); font-weight:900}
.currency.is-open .currency__menu{display:block}

.mobile{display:none; border-top:1px solid var(--line); background: rgba(255,255,255,.92)}
.mobile.is-open{display:block}
.mobile__inner{padding:14px 0}

/* Mobile quick search (inside burger menu) */
.mobile__search{padding:4px 10px 12px}
.mobile__search .topsearch{display:flex; min-width:0; width:100%; max-width:none}
.mobile__search .topsearch__results{left:0; right:0; width:100%}
.mobile__link{
  display:block; padding:12px 10px; border-radius:14px;
  color:var(--muted);
}
.mobile__link:hover{background:rgba(11,18,32,.04); color:var(--text)}
.mobile__link.is-active{background:rgba(47,107,255,.10); color:var(--text); border:1px solid rgba(47,107,255,.18)}
.mobile__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
.mobile__langs a{margin-left:10px; color:var(--muted)}

.mobile__curr{display:flex; gap:6px; flex-wrap:wrap}
.mobile__curr button{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.86);
  font: inherit;
  font-weight:800;
  color:var(--muted);
  cursor:pointer;
}
.mobile__curr button.is-active{color:var(--text); border-color:rgba(47,107,255,.28); background:rgba(47,107,255,.08)}
.mobile__langs a:hover{color:var(--text)}

/* Hero */
.hero{padding:54px 0 18px}
.hero__inner{display:grid; gap:22px; align-items:center}
@media (min-width:980px){ .hero__inner{grid-template-columns: 1.2fr .95fr} }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.08);
  border-radius:999px;
  font-weight:800; font-size:13px;
}
h1{font-size: clamp(36px, 5.2vw, 56px); line-height:1.04; margin:14px 0 10px; letter-spacing:-.02em}
.lead{font-size:18px; line-height:1.62; color:var(--muted); margin:0 0 16px}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.badges{display:flex; gap:8px; flex-wrap:wrap}
.badges span{
  font-size:12px; color:var(--muted);
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
}

.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.trust__item{
  padding:14px 14px;
  border-radius:18px;
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.trust__num{font-weight:900}
.trust__label{font-size:12px; color:var(--muted); margin-top:4px}

.hero__card{position:relative}

/* ================================
   HOME – WOW refinements (scoped)
   ================================ */

.page-home .hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 26px;
}

.page-home .hero::before{
  content:"";
  position:absolute;
  inset:-140px -120px -220px -120px;
  background:
    radial-gradient(circle at 12% 20%, rgba(108,92,231,.22), transparent 55%),
    radial-gradient(circle at 92% 18%, rgba(255,102,173,.18), transparent 50%),
    radial-gradient(circle at 70% 120%, rgba(46,204,113,.14), transparent 55%);
  pointer-events:none;
  animation:mc-float 14s ease-in-out infinite alternate;
}

.page-home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
  opacity:.55;
  pointer-events:none;
}

.page-home .hero__inner{position:relative;z-index:1}

@keyframes mc-float{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-14px,0) scale(1.02)}
}

@media (prefers-reduced-motion: reduce){
  .page-home .hero::before{animation:none}
}

.page-home .hero h1{letter-spacing:-.035em}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page-home .hero h1{
    background:linear-gradient(110deg, var(--text), rgba(108,92,231,.96) 48%, rgba(255,102,173,.92));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

.page-home .badges span{
  background:rgba(255,255,255,.7);
  border-color:rgba(15,23,42,.08);
}

.page-home .glass{
  box-shadow:0 22px 70px rgba(2,8,23,.10);
}

.page-home .hero__card .glass{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.page-home .hero__card:hover .glass{
  transform:translate3d(0,-3px,0);
  box-shadow:0 28px 90px rgba(2,8,23,.12);
  border-color:rgba(108,92,231,.22);
}

.page-home .product{position:relative;overflow:hidden}
.page-home .product::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:26px;
  background:radial-gradient(circle at 15% 0, rgba(108,92,231,.18), transparent 55%),
             radial-gradient(circle at 85% 120%, rgba(255,102,173,.16), transparent 55%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.page-home .product:hover::before{opacity:1}

.page-home .product__icon{
  background:rgba(255,255,255,.85);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 10px 30px rgba(2,8,23,.07);
}

.section--tight{padding:34px 0 26px}

.wow-strip{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1.35rem;
  align-items:stretch;
  padding:1.25rem 1.25rem;
  border:1px solid var(--mc-border-soft);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  box-shadow:0 14px 55px rgba(2,8,23,.08);
  position:relative;
  overflow:hidden;
}

.wow-strip::before{
  content:"";
  position:absolute;
  /* Extend the color wash behind BOTH rows of locations */
  inset:-120px -70px -120px -70px;
  height:auto;
  background:
    radial-gradient(circle at 26% 28%, rgba(46,204,113,.13), transparent 60%),
    radial-gradient(circle at 80% 18%, rgba(108,92,231,.18), transparent 55%),
    radial-gradient(circle at 78% 78%, rgba(255,102,173,.14), transparent 58%),
    radial-gradient(circle at 18% 86%, rgba(46,204,113,.08), transparent 62%);
  pointer-events:none;
  z-index:0;
}

.wow-strip__copy{position:relative;z-index:1}
.wow-strip__k{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mc-muted);font-weight:700}
.wow-strip__title{margin:.28rem 0 .4rem;font-size:1.55rem;line-height:1.15}
.wow-strip__desc{margin:0 0 1.05rem;color:var(--mc-muted);max-width:52ch}
.wow-strip__actions{display:flex;gap:.6rem;flex-wrap:wrap}

.wow-strip__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  align-content:start;
}

/* Licenses icon: slightly larger + elegant tilt so it matches the visual weight */
.page-home .product__icon[data-icon="key"] svg{
  /* The key SVG has a slightly bottom-heavy viewBox – nudge up to be optically centered */
  transform: translateY(-1px) rotate(-18deg) scale(1.22);
  transform-origin: 50% 50%;
  display:block;
}

.wow-loc{
  display:flex;
  gap:.65rem;
  padding:.82rem .9rem;
  border:1px solid var(--mc-border-soft);
  border-radius:18px;
  background:rgba(255,255,255,.78);
}

.wow-loc .status-dot{
  flex:0 0 10px;
  width:10px;
  height:10px;
  min-height:10px;
  max-height:10px;
  align-self:flex-start;
  margin-top:.44rem;
}

.wow-loc__name{font-weight:750}
.wow-loc__sub{color:var(--mc-muted);font-size:.92rem;margin-top:.08rem}

@media (max-width: 900px){
  .page-home .hero{padding:56px 0 22px}
  .wow-strip{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .wow-strip__grid{grid-template-columns:1fr}
}
.glass{
  padding:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  border:1px solid var(--line2);
  box-shadow: var(--shadow);
}
.glass__top{display:flex; align-items:center; justify-content:space-between}
.glass__title{font-weight:900; letter-spacing:.2px}
.glass__pill{
  font-size:12px; color:var(--muted);
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.84);
}

/* Pills (status / badges) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:850;
  letter-spacing:-.01em;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.pill__dot{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.pill--ok{color:rgba(17,124,79,1);border-color:rgba(40,199,111,.35)!important;background:rgba(40,199,111,.12)!important}
.pill--warn{color:rgba(139,95,0,1);border-color:rgba(255,159,67,.35)!important;background:rgba(255,159,67,.14)!important}
.pill--down{color:rgba(150,32,32,1);border-color:rgba(234,84,85,.35)!important;background:rgba(234,84,85,.12)!important}
/* Alias classes (used by some pages) */
.pill--bad{color:rgba(150,32,32,1);border-color:rgba(234,84,85,.35)!important;background:rgba(234,84,85,.12)!important}
/* Neutral/failed (non-critical) */
.pill--fail{color:rgba(86,98,118,1);border-color:rgba(86,98,118,.25)!important;background:rgba(86,98,118,.10)!important}
.pill__dot--ok{background:var(--ok);box-shadow:0 0 0 0 rgba(40,199,111,0.0);animation:pillPulseOk 1.5s infinite}
.pill__dot--warn{background:var(--warn);box-shadow:0 0 0 0 rgba(255,159,67,0.0);animation:pillPulseWarn 1.5s infinite}
.pill__dot--down{background:var(--danger);box-shadow:0 0 0 0 rgba(234,84,85,0.0);animation:pillPulseDown 1.5s infinite}
/* Alias dots */
.pill__dot--bad{background:var(--danger);box-shadow:0 0 0 0 rgba(234,84,85,0.0);animation:pillPulseDown 1.5s infinite}
.pill__dot--fail{background:rgba(86,98,118,.85);box-shadow:none;animation:none}
@keyframes pillPulseOk{0%{box-shadow:0 0 0 0 rgba(40,199,111,.35)}70%{box-shadow:0 0 0 10px rgba(40,199,111,0)}100%{box-shadow:0 0 0 0 rgba(40,199,111,0)}}
@keyframes pillPulseWarn{0%{box-shadow:0 0 0 0 rgba(255,159,67,.35)}70%{box-shadow:0 0 0 10px rgba(255,159,67,0)}100%{box-shadow:0 0 0 0 rgba(255,159,67,0)}}
@keyframes pillPulseDown{0%{box-shadow:0 0 0 0 rgba(234,84,85,.35)}70%{box-shadow:0 0 0 10px rgba(234,84,85,0)}100%{box-shadow:0 0 0 0 rgba(234,84,85,0)}}

.terminal{
  margin-top:14px; padding:14px; border-radius:16px;
  background: rgba(11,18,32,.03);
  border:1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}
.terminal__line{padding:6px 0; color:rgba(11,18,32,.84)}
.t-dim{color:rgba(11,18,32,.42)}
.t-ok{color:var(--ok); font-weight:800}
.glass__bottom{display:flex; gap:10px; margin-top:14px}

/* Sections */
.section{padding:54px 0}
.section--alt{
  background: rgba(255,255,255,.55);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
.section__head h2{margin:0; font-size:28px; letter-spacing:-.01em}

.card{
  padding:18px;
  border-radius:var(--radius);
  background: var(--card);
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.card p{margin:.55em 0; color:var(--muted); line-height:1.65}
.card h3{margin:0 0 8px; letter-spacing:-.01em}

.grid4{display:grid; gap:12px; grid-template-columns:1fr}
.grid4>*{min-width:0}
@media (min-width:760px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1400px){ .grid4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.grid3{display:grid; gap:12px; grid-template-columns:1fr}
/* Better responsiveness: 2 cols on tablets, 3 cols on wide screens */
@media (min-width:760px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1260px){ .grid3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Prevent grid items from forcing overflow */
.grid3 > *{min-width:0}

.grid2{display:grid; gap:12px}
@media (min-width:860px){ .grid2{grid-template-columns:repeat(2,1fr)} }

.small{font-size:12px}

/* Tables (Domain pricing, DNS) */
.tableWrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}
.table th,
.table td{padding:12px 14px; border-bottom:1px solid rgba(11,18,32,.06)}
.table thead th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background: rgba(11,18,32,.02)}
.table tbody tr:hover{background: rgba(47,107,255,.04)}
.table code{font-size:12px}

/* Domain pricing tools */
.tableTools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 10px;flex-wrap:wrap}
.tableTools__left{flex:1 1 260px;min-width:220px}
.tableTools__right{flex:0 0 auto}
.input--slim{padding:10px 12px;border-radius:12px}
.chips--sm{gap:6px;margin:0}
.chips--sm .chip{padding:7px 10px;font-size:12px}

/* Domain pricing pagination */
.tableMore{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.tableMore__meta{flex:1 1 240px}
.tableMore__actions{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}

.tag--muted{background:rgba(11,18,32,0.05);border:1px solid rgba(11,18,32,0.08);color:rgba(11,18,32,0.76)}

/* Domains: inline WHOIS card */
.domain-whois__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.domain-whois__head h3{margin:0}
.domain-whois__body{display:grid;gap:8px}
.domain-whois__row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:16px;border:1px solid rgba(11,18,32,.08);background:rgba(255,255,255,.72)}
.domain-whois__label{font-weight:900;color:rgba(11,18,32,.78)}
.domain-whois__value{font-weight:800;color:rgba(11,18,32,.92);text-align:right;word-break:break-word}
.domain-whois__value code{font-weight:800}

/* Domains page polish */
.page-domains .tableWrap{border-radius:26px}
.page-domains .table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
}
.page-domains .table tbody tr:nth-child(odd){background:rgba(11,18,32,.015)}
.page-domains .table tbody tr:hover{background:rgba(47,107,255,.05)}
.page-domains .tableTools{margin-top:0}

/* Notes / mini cards */
.note{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(11,18,32,.02);
  padding:14px 16px;
}
.note__title{font-weight:900; margin-bottom:6px}
.note__body{color:var(--muted); line-height:1.6}
.link{color:var(--accent); font-weight:800}
.link:hover{color:var(--accent2)}

.mini{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.70);
  padding:14px;
}
.mini__title{font-weight:900}
.mini__desc{color:var(--muted); margin:6px 0 10px; line-height:1.6}

/* Product cards */
.product{
  display:flex; flex-direction:column; gap:10px;
  padding:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.product__top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.product__icon{
  width:42px; height:42px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(47,107,255,.10);
  border:1px solid rgba(47,107,255,.14);
}
.product__icon svg{width:20px; height:20px}
.product__title{font-weight:900}
.product__desc{color:var(--muted); line-height:1.6; margin:0}
.product__meta{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(11,18,32,.03);
  color:var(--muted);
}
.product__actions{display:flex; gap:10px; margin-top:4px}

/* CTA */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:22px;
  border-radius:var(--radius);
  background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(0,194,255,.10));
  border:1px solid rgba(47,107,255,.18);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.cta__copy h2{margin:0 0 6px; font-size:22px}
.cta__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Callouts */
.callout{
  padding:14px 16px;
  border-radius:18px;
  background: rgba(11,18,32,.03);
  border:1px solid var(--line);
}
.callout strong{display:block; margin-bottom:4px}
.callout--soft{
  background: rgba(47,107,255,.06);
  border-color: rgba(47,107,255,.18);
}

/* Small utilities */
.m0{margin:0}
.mt6{margin-top:6px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}

.section--tight{padding:34px 0}

/* Page layout */
.page{padding:34px 0 56px}
.page__head{padding:10px 0 18px}
.page__head h1{font-size:38px; margin:0 0 6px}

/* Contact form */
.form{display:grid; gap:12px; max-width:720px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field--full{grid-column:1 / -1}
@media (max-width:720px){.form__grid{grid-template-columns:1fr}}
.field{display:grid; gap:7px}
label{font-weight:700}
input, textarea, select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.92);
  font: inherit;
}
select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.92);
  font: inherit;
  color:var(--text);
}
select:focus{outline:3px solid rgba(47,107,255,.18); border-color:rgba(47,107,255,.28)}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus, select:focus{outline:3px solid rgba(47,107,255,.18); border-color:rgba(47,107,255,.28)}

.field__hint{font-size:12px; color:var(--muted); line-height:1.4}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.form__row{display:grid; gap:12px}
@media (min-width:860px){ .form__row{grid-template-columns:1fr 1fr} }
.form__msg{min-height:22px; color:var(--muted)}
.form__msg.is-ok{color:rgba(0,140,77,1); font-weight:800}
.form__msg.is-bad{color:rgba(202,24,55,1); font-weight:800}
.form__msg.is-warn{color:rgba(153,92,0,1); font-weight:800}

.form__msg .domain-msg{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(11,18,32,.10);background:rgba(255,255,255,.65);color:inherit}
.form__msg .domain-msg__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.form__msg .domain-msg__domain{padding:6px 10px;border-radius:999px;background:rgba(11,18,32,.04);border:1px solid rgba(11,18,32,.08);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;color:rgba(11,18,32,.72);white-space:nowrap}
.form__msg .domain-msg__actions{display:flex;align-items:center;gap:8px}
.form__msg.is-ok .domain-msg{border-color:rgba(40,199,111,.26);background:rgba(40,199,111,.06)}
.form__msg.is-bad .domain-msg{border-color:rgba(255,66,92,.24);background:rgba(255,66,92,.06)}
.form__msg.is-warn .domain-msg{border-color:rgba(255,184,0,.22);background:rgba(255,184,0,.07)}
@media (max-width:520px){.form__msg .domain-msg{flex-direction:column;align-items:flex-start}}

.pre{
  margin:12px 0 0;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(11,18,32,.02);
  overflow:auto;
  max-height:520px;
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Hosting plans */
.plan{
  padding:20px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  display:flex; flex-direction:column;
}
.plan.is-featured{
  border-color: rgba(47,107,255,.28);
  box-shadow: 0 18px 36px rgba(47,107,255,.12), 0 10px 22px rgba(11,18,32,.06);
}
.plan__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.plan__name{font-weight:900}
.plan__price{display:flex; align-items:baseline; gap:8px; margin:8px 0 10px}
.plan__amount{font-size:34px; font-weight:1000; letter-spacing:-.02em}

/* VPS builder */
.builder{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.90));
  padding:16px;
}
.builder__row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:10px}
.builder__label{font-weight:900}
.builder__value{color:var(--muted)}
.builder input[type="range"]{width:100%; margin-top:6px}
.builder__total{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(11,18,32,.08);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.builder__actions{display:flex; gap:10px; flex-wrap:wrap}

/* VPS presets */
.preset{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(11,18,32,.02);
  padding:14px;
}
.preset.is-featured{
  background: rgba(47,107,255,.06);
  border-color: rgba(47,107,255,.22);
}
.preset__price{margin-top:10px; font-weight:1000}

/* Footer */
.footer{
  padding:48px 0 22px;
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.55);
}

.footer--pro .footer__grid{
  display:grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  gap:28px;
}

.footer__logo{display:inline-flex; align-items:center; gap:10px}
.footer__logo-name{font-weight:1000; letter-spacing:-.01em}

.footer__desc{margin:10px 0 16px; color:var(--muted); line-height:1.6; max-width:52ch}

.footer__title{
  margin:0 0 12px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}

.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer__list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.footer__list a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(47,107,255,.26);
  box-shadow: 0 0 0 6px rgba(47,107,255,.10);
  opacity:.0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}
.footer__list a:hover{
  background: rgba(47,107,255,.06);
  color:var(--text);
  transform: translateX(2px);
}
.footer__list a:hover::before{opacity:1; transform: scale(1)}

.footer__contact{display:grid; gap:10px}
.footer__contact-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.70);
  font-weight:900;
}
.footer__contact-link svg{opacity:.85}

.footer__phones{display:grid; gap:10px}
.footer__phone{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.70);
}
.footer__phone strong{font-weight:1000}
.footer__phone span{color:var(--muted); font-size:12px; white-space:nowrap}

.footer__hours{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12.5px}
.footer__hours-k{font-weight:900}
.footer__hours-v{color:var(--text); font-weight:1000}

.footer__social{display:flex; gap:10px; margin-top:8px}
.footer__social-btn{
  width:40px; height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.70);
}
.footer__social-btn:hover{box-shadow:var(--shadow2)}

.footer__bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Footer bottom: legal (left) + fiscals (right) */
.footer__bottom-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.footer__copy{color:var(--muted); font-weight:800}
.footer__sep{opacity:.65}
.footer__legal-link{
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(17,24,39,.18);
  text-underline-offset: 4px;
}
.footer__legal-link:hover{
  color:var(--text);
  text-decoration-color: rgba(17,24,39,.38);
}
.footer__legal-link:focus-visible{
  outline:2px solid rgba(59,130,246,.35);
  outline-offset:3px;
  border-radius:8px;
}

.footer__bottom-right{margin-left:auto}

.footer__fiscals{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fiscal{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.58);
}
.fiscal__cc{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:999px;
  color:var(--text);
  background: rgba(47,107,255,.10);
  border:1px solid rgba(47,107,255,.18);
}
.fiscal__name{font-weight:950; color:var(--text); font-size:12px}
.fiscal__id{color:var(--muted); font-weight:800; font-size:11px}

/* legacy bottom links removed */

@media (max-width: 980px){
  .footer--pro .footer__grid{grid-template-columns: 1.2fr 1fr; gap:22px}
}
@media (max-width: 640px){
  .footer{padding:38px 0 18px}
  .footer--pro .footer__grid{grid-template-columns: 1fr}
}

/* Datacenters map (optional placeholder) */
.map{margin-top:18px}
.map__inner{
  position:relative;
  height:260px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(420px 240px at 25% 35%, rgba(47,107,255,.10), transparent 60%),
    radial-gradient(420px 240px at 70% 50%, rgba(0,194,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  overflow:hidden;
}
.map__inner:after{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(11,18,32,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,18,32,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.4;
  pointer-events:none;
}
.map__pin{
  position:absolute;
  width:12px; height:12px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 8px rgba(47,107,255,.14);
}

/* Status */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  font-weight:900;
}
.dot{width:10px; height:10px; border-radius:50%}
.dot--ok{background: var(--ok); box-shadow: 0 0 0 6px rgba(11,190,115,.14)}
.status-card__row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Reveal */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1; transform:none}


/* --- Nav dropdown + status pill --- */
.nav__dropdown{position:relative;display:inline-flex;align-items:center}
.nav__link--drop{gap:8px}
.nav__menu{
  position:absolute;top:calc(100% + 8px);left:-8px;
  min-width:220px;padding:10px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(11,18,32,0.12);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(11,18,32,0.12);
  backdrop-filter: blur(10px);
  display:none;
}

/* Hover-bridge so the submenu doesn't close while moving the mouse to it */
.nav__menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-12px;
  height:12px;
}
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu,
.nav__dropdown.is-open .nav__menu{display:block}
.nav__menu-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  color:var(--text);
}
.nav__menu-link:hover{background:rgba(47,107,255,0.08)}
.nav__dropdown.is-active > .nav__link--drop{
  background: linear-gradient(135deg, rgba(47,107,255,.18), rgba(0,194,255,.14));
  color:var(--text);
  border-color: rgba(47,107,255,.22);
  box-shadow: 0 10px 28px rgba(47,107,255,.10);
}

.status-dot{
  width:10px;height:10px;border-radius:999px;
  display:inline-block;margin-right:8px;vertical-align:middle;
  flex:0 0 10px; min-width:10px; min-height:10px; max-width:10px; max-height:10px;
}
.status-dot--ok{background:#28c76f}
/* Pulse only when the system is not fully operational (warn/down). */
.status-pill .status-dot--warn,
.status-pill .status-dot--down{
  animation-iteration-count:infinite;
}

/* Pulse the Status badge dot inside header/mobile menus when warn/down (continuous). */
.nav__link [data-status-dot].status-dot--warn,
.nav__link [data-status-dot].status-dot--down,
.mobile__link [data-status-dot].status-dot--warn,
.mobile__link [data-status-dot].status-dot--down{
  animation-iteration-count:infinite;
}
.status-dot--warn{background:#ff9f43;animation-name:statusPulseWarn;animation-iteration-count:infinite;animation-timing-function:ease-out}
.status-dot--down{background:#ea5455;animation-name:statusPulseDown;animation-iteration-count:infinite;animation-timing-function:ease-out}

.status-row__state .status-dot,
.status-pill .status-dot,
.incident__title .status-dot{margin-right:0}
@keyframes statusPulseOk{
  0%{box-shadow:0 0 0 0 rgba(40,199,111,0.28)}
  70%{box-shadow:0 0 0 12px rgba(40,199,111,0)}
  100%{box-shadow:0 0 0 0 rgba(40,199,111,0)}
}

@keyframes statusPulseWarn{
  0%{box-shadow:0 0 0 0 rgba(255,159,67,0.0)}
  70%{box-shadow:0 0 0 10px rgba(255,159,67,0.12)}
  100%{box-shadow:0 0 0 0 rgba(255,159,67,0.0)}
}
@keyframes statusPulseDown{
  0%{box-shadow:0 0 0 0 rgba(234,84,85,0.0)}
  70%{box-shadow:0 0 0 12px rgba(234,84,85,0.16)}
  100%{box-shadow:0 0 0 0 rgba(234,84,85,0.0)}
}

.status-dot--warn{animation-duration:1.2s}
.status-dot--down{animation-duration:0.9s}

@media (prefers-reduced-motion: reduce){
  .status-dot--ok,.status-dot--warn,.status-dot--down{animation:none !important}
}


.mobile__group{padding:10px 0;border-top:1px solid rgba(255,255,255,0.10)}
.mobile__group-title{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.70);margin:6px 0}
.mobile__link--sub{padding-left:18px;opacity:0.95}



/* --- Status page --- */
.page-status .hero.hero--small{padding:28px 0 10px}
.page-status .hero.hero--small h1{font-size:38px;letter-spacing:-0.02em;margin:0 0 8px}
.page-status .hero.hero--small .lead{font-size:16px;line-height:1.45;margin:0;max-width:64ch}
@media (max-width: 720px){
  .page-status .hero.hero--small{padding:22px 0 8px}
  .page-status .hero.hero--small h1{font-size:30px}
  .page-status .hero.hero--small .lead{font-size:15px}
}

.status-top{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px}
.status-top__right{display:flex;gap:14px;align-items:center}
.status-split{display:grid;gap:14px;margin-top:14px}
@media (min-width:980px){ .status-split{grid-template-columns:1fr 1fr; align-items:start} }
.status-pill{display:flex;gap:12px;align-items:center}
.status-pill__title{font-weight:800;font-size:18px}
.metric{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.55);border:1px solid rgba(11,18,32,0.10)}
.metric__label{font-size:12px;color:rgba(11,18,32,0.65);margin-bottom:2px}
.metric__value{font-weight:900;font-size:18px}
.status-card__head{padding:14px 14px 0}
.status-card__head h3{margin:0;font-weight:900;font-size:15px;letter-spacing:-0.01em}
.metric__sub{margin-top:4px;font-size:12px;color:rgba(11,18,32,0.65)}

.status-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
/* DB lines (vendor + version + host:port on one line) */
.status-db-lines{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.status-db-line{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.50);border:1px solid rgba(11,18,32,0.08)}
.status-db-line__text{display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.15}
.status-db-line__ver{opacity:.9}
.status-db-line__host{white-space:nowrap}

.status-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.50);border:1px solid rgba(11,18,32,0.08)}
.status-row__state{display:flex;align-items:flex-start;gap:8px;color:rgba(11,18,32,0.85)}
.status-row__name{display:flex;flex-direction:column;line-height:1.15}
.status-row__meta{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.status-code{font-family:var(--mc-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:rgba(11,18,32,0.04);border:1px solid rgba(11,18,32,0.08);white-space:nowrap}

.status-tag{
  display:inline-block;
  font-family:var(--mc-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size:11px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(47,107,255,0.06);
  border:1px solid rgba(11,18,32,0.08);
  white-space:nowrap;
  vertical-align:middle;
}
.status-tag--origin{
  background:rgba(40,199,111,0.06);
  border-color:rgba(40,199,111,0.18);
}
.status-php-lines{
  columns:2;
  column-gap:18px;
}
.status-php-lines .status-db-line{break-inside:avoid;page-break-inside:avoid}
@media (max-width: 900px){
  .status-php-lines{columns:1}
}

.status-masonry{column-gap:14px;margin-top:14px}
.status-masonry__item{break-inside:avoid;margin:0 0 14px;display:inline-block;width:100%}
@media (min-width: 1060px){
  .status-masonry{column-count:3}
}
@media (min-width: 760px) and (max-width: 1059px){
  .status-masonry{column-count:2}
}
@media (max-width: 759px){
  .status-masonry{column-count:1}
}

.incident-list{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.incident{position:relative;padding:14px 14px;border-radius:18px;background:rgba(255,255,255,0.62);border:1px solid rgba(11,18,32,0.08);box-shadow:0 14px 30px rgba(11,18,32,0.06);border-left:0 !important}
.incident--critical{border-color:rgba(234,84,85,0.24);box-shadow:0 14px 30px rgba(234,84,85,0.06)}
.incident--degraded{border-color:rgba(255,159,67,0.24);box-shadow:0 14px 30px rgba(255,159,67,0.06)}
.incident--maint{border-color:rgba(255,159,67,0.24)}

.incident__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.incident__title{display:flex;gap:10px;align-items:flex-start}
.incident__title .status-dot{width:10px;height:10px;margin-top:4px}
.incident__name{font-weight:900;font-size:15px;line-height:1.2}

.incident__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

.incident__updates{margin-top:10px;padding-left:16px;position:relative;display:flex;flex-direction:column;gap:10px}
.incident__updates:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:rgba(11,18,32,0.10);border-radius:99px}

.incident__update{display:grid;grid-template-columns:140px 1fr;gap:12px;position:relative;padding:12px 0}
.incident__update:before{content:"";position:absolute;left:-12px;top:18px;width:10px;height:10px;border-radius:999px;background:rgb(255 255 255);border:2px solid rgba(11,18,32,0.18)}
.incident--critical .incident__update:before{border-color:rgba(234,84,85,0.45)}
.incident--degraded .incident__update:before,.incident--maint .incident__update:before{border-color:rgba(255,159,67,0.45)}

.incident__time{font-size:12px;color:rgba(11,18,32,0.62);padding-top:2px;white-space:nowrap;font-weight:800;letter-spacing:.01em}

.incident__bubble{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.70);
  border:1px solid rgba(11,18,32,0.08);
  box-shadow:0 12px 26px rgba(11,18,32,0.05);
}
.incident__bubble .badge{margin-bottom:6px}
.incident__msg{margin-top:2px;line-height:1.35}

/* --- Roadmap --- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.50);border:1px solid rgba(11,18,32,0.10);cursor:pointer}
.chip.is-active{background:rgba(47,107,255,0.12);border-color:rgba(47,107,255,0.25)}
.timeline{display:flex;flex-direction:column;gap:14px}
.tl-item{position:relative}
.tl-badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:8px;background:rgba(255,255,255,0.55);border:1px solid rgba(11,18,32,0.10)}
.tl-badge--planned{color:#0B1220}
.tl-badge--in_progress{color:#0B1220}
.tl-badge--done{color:#0B1220}
.tl-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tl-eta{font-size:12px;color:rgba(11,18,32,0.62);white-space:nowrap}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(11,18,32,0.06)}

/* --- Changelog --- */
.changelog{display:flex;flex-direction:column;gap:14px}
.release__head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.release__version{font-weight:900}
.release__date{font-size:12px;color:rgba(11,18,32,0.62)}
.release__title{margin-top:8px}
.release__list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.release__item{display:flex;gap:10px;align-items:flex-start}
.badge{font-size:12px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid rgba(11,18,32,0.10);background: rgb(255 255 255);white-space:nowrap}
.badge--new{background:rgba(47,107,255,0.10)}
.badge--improved{background:rgba(40,199,111,0.10)}
.badge--fix{background:rgba(255,159,67,0.10)}
.badge--security{background:rgba(234,84,85,0.10)}

/* Status badges (Status page) */
.badge--ok{background:rgba(40,199,111,0.10);border-color:rgba(40,199,111,0.22)}
.badge--warn{background:rgba(255,159,67,0.10);border-color:rgba(255,159,67,0.25)}
.badge--down{background:rgba(234,84,85,0.10);border-color:rgba(234,84,85,0.25)}
.badge--neutral{background:rgba(11,18,32,0.06);border-color:rgba(11,18,32,0.12)}

/* --- Clients --- */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.client{display:flex;gap:12px;align-items:center;padding:14px}
.client__logo{width:120px;flex:0 0 120px}
.client__logo img{width:100%;height:auto;display:block}
.client__name{font-weight:900}
.client__since{font-size:12px;color:rgba(11,18,32,0.62)}
@media (max-width: 900px){
  .clients{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .clients{grid-template-columns:1fr}
  .status-top{flex-direction:column;align-items:flex-start}
  .status-top__right{width:100%;justify-content:space-between}
}


/* --- Pricing --- */
.billing{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px;margin-bottom:18px}
.billing__label{font-weight:900;margin-bottom:8px}
.billing__periods{display:flex;gap:10px;flex-wrap:wrap}
.save{font-weight:900;padding:8px 12px;border-radius:999px;background:rgba(40,199,111,0.12);border:1px solid rgba(40,199,111,0.25)}

.pricing-group{margin-top:18px}
.pricing-group__head h2{margin:0}
.pricing-group__head p{margin-top:6px}

.plan__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.plan__name{font-weight:900;font-size:18px;margin-bottom:6px}
.plan__price{display:flex;align-items:baseline;gap:10px;margin:14px 0 10px}
.plan__amount{font-weight:950;font-size:32px}
.plan__per{color:rgba(11,18,32,0.62)}
.plan__features{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.plan__features li{background:rgba(255,255,255,0.45);border:1px solid rgba(11,18,32,0.08);padding:9px 10px;border-radius:14px}
.plan__benefits{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.plan__benefits span{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(47,107,255,.08);border:1px solid rgba(47,107,255,.18);color:var(--text);font-size:12px;font-weight:800}
.plan__cta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.plan--rec{outline:2px solid rgba(47,107,255,0.22);box-shadow:0 22px 80px rgba(47,107,255,0.10)}
.pill--accent{background:rgba(47,107,255,0.12);border:1px solid rgba(47,107,255,0.25);color:var(--accent)}

.addon__name{font-weight:900;font-size:18px}
.addon__price{margin-top:12px}

/* -----------------------------
   Nameserver terminal (Home)
------------------------------ */
.terminal--ns{padding:14px 14px 12px}
.terminal--ns .terminal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.terminal--ns .terminal__head-right{display:flex;align-items:center;gap:10px}
.terminal--ns .terminal__label{font-weight:700;letter-spacing:-.01em}
.terminal--ns .terminal__actions{display:flex;align-items:center;gap:10px}
.terminal--ns .terminal__ping{display:inline-flex;align-items:center;gap:8px;font-size:12px;opacity:.9}
.terminal--ns .terminal__rows{display:flex;flex-direction:column;gap:8px}
.terminal--ns .terminal__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid rgba(11,18,32,.08);border-radius:12px;background:rgba(255,255,255,.70)}
.terminal--ns .terminal__cell{min-width:0}
.terminal--ns .terminal__host{display:flex;align-items:center;gap:10px;min-width:0}
.terminal--ns .terminal__ip{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.terminal--ns .terminal__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{appearance:none;border:1px solid rgba(11,18,32,.12);background:rgba(11,18,32,.03);color:var(--text);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.copy-btn:hover{background:rgba(47,107,255,.08);border-color:rgba(47,107,255,.18)}
.copy-btn:active{transform:scale(.98)}
.copy-btn--icon{width:34px;height:32px;padding:0;display:grid;place-items:center}
.copy-all{display:inline-flex;align-items:center;gap:8px;font-weight:900}
.copy-all svg{width:16px;height:16px}
.copy-all span{font-size:11px;letter-spacing:.08em}
.terminal--ns .copy-icon{width:34px;height:32px;padding:0;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(11,18,32,.12);background:rgba(11,18,32,.03);color:var(--text);cursor:pointer;transition:transform .15s ease, background .15s ease, border-color .15s ease}
.terminal--ns .copy-icon svg{width:18px;height:18px}
.terminal--ns .copy-icon:hover{background:rgba(47,107,255,.08);border-color:rgba(47,107,255,.18);transform:translateY(-1px)}
.terminal--ns .copy-icon:active{transform:translateY(0)}
@media (max-width:520px){.terminal--ns .terminal__row{grid-template-columns:1fr;grid-auto-rows:auto;gap:8px}}

/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast__inner{pointer-events:none;display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(15,18,28,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35);color:#fff;font-size:13px}
.toast__dot{width:8px;height:8px;border-radius:999px;background:var(--brand)}
.toast--err .toast__dot{background:var(--danger)}

/* -----------------------------
   Home: Stats & Reviews
------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.stat__value{font-size:24px;font-weight:800;letter-spacing:-.02em}
.stat__label{margin-top:6px;font-weight:600}
.stat__note{margin-top:2px;font-size:12px;opacity:.75}
@media (max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:10px}
.review__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.review__who{min-width:0}
.review__name{font-weight:700}
.review__meta{font-size:12px;opacity:.75}
.review__stars{font-size:14px;letter-spacing:.08em}
.review__text{line-height:1.6;opacity:.92}
@media (max-width:980px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reviews{grid-template-columns:1fr}}

/* -----------------------------
   Platform: Stack
------------------------------ */
.stack-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stack-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(47,107,255,.08);border:1px solid rgba(47,107,255,.18);font-weight:800}
.stack-badge__dot{width:8px;height:8px;border-radius:999px;background:var(--brand)}
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stack-card{padding:14px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));box-shadow:0 10px 22px rgba(11,18,32,.06)}
.stack-card__name{font-weight:900;letter-spacing:-.01em}
.stack-card__ver{margin-top:4px;color:var(--muted);font-size:13px}
@media (max-width:980px){.stack-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stack-grid{grid-template-columns:1fr}}

.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.feature{display:flex;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(11,18,32,.02)}
.feature__dot{width:10px;height:10px;border-radius:999px;background:rgba(47,107,255,.35);border:1px solid rgba(47,107,255,.25);margin-top:5px;flex:0 0 auto}
.feature__body strong{display:block}
.feature__body p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
@media (max-width:780px){.feature-grid{grid-template-columns:1fr}}

/* -----------------------------
   Datacenters: Map
------------------------------ */
.dc{display:grid;grid-template-columns:1.35fr .85fr;gap:14px;align-items:stretch}
@media (max-width:980px){.dc{grid-template-columns:1fr}}
.dc__map{position:relative;overflow:hidden}
.dc__map-inner{position:relative;aspect-ratio:16/9;min-height:340px}
.dc__svg{position:absolute;inset:0;width:100%;height:100%}
.dc__ocean{fill:rgba(47,107,255,.06)}
.dc__grid{stroke:rgba(11,18,32,.06);stroke-width:1}
.dc__continent{fill:rgba(11,18,32,.07);stroke:rgba(11,18,32,.08);stroke-width:1}
.dc__pins{position:absolute;inset:0}
.dc-pin{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-60%);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.82);box-shadow:0 12px 24px rgba(11,18,32,.10);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.dc-pin:hover{transform:translate(-50%,-64%);box-shadow:0 16px 30px rgba(11,18,32,.14)}
.dc-pin.is-active{border-color:rgba(47,107,255,.45)}
.dc-pin__dot{width:10px;height:10px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 0 rgba(40,199,111,0.0);animation:pillPulseOk 1.5s infinite}
.dc-pin__label{font-weight:800;font-size:12px;color:rgba(11,18,32,.82);white-space:nowrap}

.dc-panel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.dc-panel__title{font-weight:900;font-size:18px;letter-spacing:-.01em}
.dc-panel__meta{font-size:12px;color:var(--muted)}
.dc-panel__notes{margin:10px 0 0;color:var(--muted);line-height:1.6}
.dc-panel__services{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dc-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.dc-card__title{font-weight:900}
.dc-card__tier{font-size:12px;color:var(--muted)}
.dc-card__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* --- Google Maps embeds --- */
.gmap{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow);
}
.gmap__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(12px);
}
.gmap__bar .muted{margin:0}
.gmap__controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gmap__inner{
  position:relative;
  aspect-ratio: 16 / 9;
  min-height: 260px;
}
.gmap__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  transform: translateZ(0);
}

/* Status: card head / locations / incidents toggles */
.status-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.status-card-head .small{line-height:1.25}
.status-row--btn{appearance:none;-webkit-appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.status-row--btn:focus{outline:none}
.status-row--btn:focus-visible{box-shadow:0 0 0 3px rgba(108,92,231,.2)}
.status-row--btn.is-selected{border-color:var(--mc-accent);box-shadow:0 0 0 3px rgba(108,92,231,.15)}
.status-row__chev{opacity:.55;margin-left:8px}
.status-row--btn:hover .status-row__chev{opacity:.9}
.status-map-empty{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--mc-border-soft);border-radius:18px;background:rgba(255,255,255,.45)}
html[data-theme="dark"] .status-map-empty{background:rgba(0,0,0,.15)}
.status-map-empty__icon{font-size:18px}
.status-map-empty__title{font-weight:650}
.status-map-empty.is-hidden{display:none}
.gmap.is-hidden{display:none}
@media (max-width: 720px){
  .incident__meta{align-items:flex-start}
  .incident__update{grid-template-columns:1fr}
  .incident__time{padding-top:0}
}
.incident__toggle{display:inline-flex;align-items:center;gap:6px}
.incident__toggle .incident__chev{transition:transform .16s ease;opacity:.75}
.incident__toggle[aria-expanded="true"] .incident__chev{transform:rotate(90deg)}


/* Copy icon buttons (home nameservers) */
.copy-icon{
  width:34px; height:32px;
  border-radius:12px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.86);
  color:var(--text);
  cursor:pointer;
}
.copy-icon svg{width:18px; height:18px}
.copy-icon:hover{background:rgba(47,107,255,.10); border-color:rgba(47,107,255,.18)}

/* Plan benefits */
.plan__benefits{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.plan__benefit{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.78);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}
@media (max-width: 860px){
  .gmap__bar{align-items:flex-start; flex-direction:column}
  .gmap__inner{min-height: 240px}
}

/* Utility */
.colstack{display:flex;flex-direction:column;gap:14px}
@media (max-width: 720px){
  .gmap__bar{flex-direction:column;align-items:stretch}
  .gmap__controls{width:100%;justify-content:space-between}
  .gmap__controls select,
  .gmap__controls .input{width:100%}
}


/* --- Update7: Datacenters select + premium tweaks --- */
.dc__map-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dc__map-actions{margin-left:auto}
.dc-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:10px 12px;border-radius:12px;border:1px solid rgba(11,18,32,.10);background:rgba(255,255,255,.75);backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(11,18,32,.08);font-weight:600;color:rgba(11,18,32,.88);min-width:240px}
.dc-select:focus{outline:none;box-shadow:0 0 0 4px rgba(47,107,255,.16),0 10px 26px rgba(11,18,32,.10)}
@media(max-width:640px){.dc__map-actions{width:100%}.dc-select{width:100%;min-width:0}}

/* --- Update7: Hosting pricing switch + savings pill --- */
.periods{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media(max-width:680px){.periods{flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .periods::-webkit-scrollbar{height:6px}
}

/* Hosting: period selector block (more compact & premium) */
.page-hosting .billing{display:block;padding:22px;margin-bottom:22px;border-radius:26px}
.page-hosting .billing .grid2{align-items:center;gap:18px}
.page-hosting .billing .periods{margin-top:0;justify-content:flex-end}
.page-hosting .billing .chip{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(11,18,32,.12);font-weight:900}
.page-hosting .billing .chip:hover{border-color:rgba(47,107,255,.22);background:rgba(47,107,255,.06)}
.page-hosting .billing .chip.is-active{background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.30)}
@media(max-width:720px){.page-hosting .billing{padding:18px;border-radius:22px}.page-hosting .billing .grid2{gap:12px}.page-hosting .billing .periods{justify-content:flex-start}}
.plan__price{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.plan__price-row{display:flex;align-items:baseline;gap:8px}
.plan__currency{font-weight:800;letter-spacing:-.02em}
.plan__price-sub{display:flex;align-items:center;gap:10px}
.save-pill{font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:rgba(40,199,111,.12);border:1px solid rgba(40,199,111,.22);color:rgba(11,18,32,.85);white-space:nowrap}
.save-pill.is-hidden{display:none}
.muted.small{font-size:12px}

/* --- Update10: Hosting plans (Start/Pro/Business) + calculator --- */
.plan__meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.plan__tag{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--line2); background: rgba(47,107,255,.08); color: rgba(11,18,32,.90); font-weight:900; font-size:12px; white-space:nowrap}
.plan__tag--ok{background: rgba(40,199,111,.10); border-color: rgba(40,199,111,.20)}
.plan__price--calc{align-items:flex-start}
.hosting-calc{padding:22px}

/* --- Update11: Hosting layout polish (arrangement + readability) --- */
.hero__grid{display:grid;gap:24px;align-items:start}
@media (min-width:980px){.hero__grid{grid-template-columns:1.25fr .95fr;gap:28px}}

/* Hosting hero — single column (clean) */
.page-hosting .hero__grid--single{grid-template-columns:1fr;gap:18px}


.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips .chip{background:rgba(255,255,255,.72);border:1px solid rgba(11,18,32,.10);color:rgba(11,18,32,.72);font-weight:800}

.card--glass{background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));border:1px solid rgba(11,18,32,.10);box-shadow:0 18px 42px rgba(11,18,32,.08)}

.section__head--stack{flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:22px}
.section__head--stack h2{margin:0 0 6px}

/* Section head: title left, action right */
.section__head--between{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.section__head--between h2{margin:0 0 6px}
.section__actions{display:flex;align-items:center;gap:10px}

.plan{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.plan:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(11,18,32,.10);border-color:rgba(47,107,255,.22)}
.plan.is-featured:hover{box-shadow:0 28px 80px rgba(47,107,255,.14),0 22px 60px rgba(11,18,32,.10)}

.plan__top{align-items:flex-start}
.plan__name{font-size:19px;letter-spacing:-.01em}
.plan__currency{font-size:12px;color:rgba(11,18,32,.68)}
.plan__amount{font-size:34px;letter-spacing:-.02em}

.plan__features{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px;flex:1}
.plan__features li{position:relative;padding:11px 12px 11px 40px;border-radius:16px;border:1px solid rgba(11,18,32,.08);background:rgba(255,255,255,.56);color:rgba(11,18,32,.92)}
.plan__features li:before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:999px;background:rgba(40,199,111,.12);border:1px solid rgba(40,199,111,.20)}
.plan__features li:after{content:"";position:absolute;left:14px;top:50%;transform:translate(0,-50%);width:18px;height:18px;background:rgba(17,124,79,1);--mc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--mc-check);mask-image:var(--mc-check);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:12px 12px;mask-size:12px 12px}

.plan__cta{margin-top:16px}
@media (max-width:520px){.plan__cta .btn{width:100%}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Update12: Hosting professional layout (equal heights + aligned badges/CTAs) --- */
/* Hosting plans grid: prevent cards from sticking / overflowing */
.page-hosting #plans .grid4{
  align-items:stretch;
  gap:30px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 720px){
  .page-hosting #plans .grid4{gap:16px; grid-template-columns:1fr}
}

.page-hosting #plans .plan{height:100%; position:relative; z-index:1; border-color:var(--plan-accent, rgba(11,18,32,.10))}
.page-hosting #plans .plan:hover{z-index:50}

/* Badges outside card corner */
.page-hosting #plans .plan__badge{position:absolute;top:-12px;left:18px;z-index:4}
.page-hosting #plans .plan__badge .badge{box-shadow:0 10px 26px rgba(11,18,32,.10);white-space:nowrap}

/* Different outlines per plan */
.page-hosting #plans .plan--start{--plan-accent: rgba(47,107,255,.18)}
.page-hosting #plans .plan--pro{--plan-accent: rgba(47,107,255,.28)}
.page-hosting #plans .plan--premium{--plan-accent: rgba(142,100,255,.22)}
.page-hosting #plans .plan--enterprise{--plan-accent: rgba(255,145,66,.22)}
.page-hosting #plans .plan:hover{border-color:var(--plan-accent, rgba(47,107,255,.22))}

/* Make top rows align visually */
.page-hosting #plans .plan__top{gap:16px; margin-bottom:14px}
.page-hosting #plans .plan__top > div:first-child{flex:1; min-width:0}
.page-hosting #plans .plan__top > div:first-child{display:flex; flex-direction:column; align-items:flex-start}
.page-hosting #plans .plan__name{margin-top:6px}
.page-hosting #plans .plan__meta{margin-top:10px; display:flex; gap:10px; flex-wrap:nowrap; align-items:center}
.page-hosting #plans .plan__tag{white-space:nowrap}
@media(max-width:520px){.page-hosting #plans .plan__meta{flex-wrap:wrap}}

/* Hosting plan tooltip (Enterprise traffic) */
.page-hosting .plan-tipWrap{position:relative;display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.page-hosting .plan-i{width:18px;height:18px;border-radius:999px;border:1px solid rgba(11,18,32,0.18);background:rgb(255 255 255);font-size:12px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:rgba(11,18,32,0.78);cursor:help;padding:0}
.page-hosting .plan-tip{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;max-width:320px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.95);border:1px solid rgba(11,18,32,0.10);box-shadow:0 18px 42px rgba(11,18,32,0.10);display:none;z-index:9999}
.page-hosting .plan-tip strong{display:block;font-size:14px;margin-bottom:4px}
.page-hosting .plan-tip span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.page-hosting .plan-tipWrap:hover .plan-tip,
.page-hosting .plan-tipWrap:focus-within .plan-tip{display:block}


/* Ensure features list never shows bullets, even if earlier CSS cached */
.page-hosting #plans .plan__features{list-style:none !important; padding-left:0 !important}

/* CTA: one compact wide button */
.page-hosting #plans .plan__cta{margin-top:auto}
.page-hosting #plans .btn--wide{width:100%; justify-content:center; min-height:44px; padding:12px 14px; border-radius:16px; font-weight:1000}

/* Price block: consistent spacing */
.page-hosting #plans .plan__price{min-width:132px}
.page-hosting #plans .plan__price-row{gap:8px}
.page-hosting #plans .plan__amount{line-height:1}

/* Featured card: subtle lift baseline */
.page-hosting #plans .plan.is-featured{transform:translateY(-4px)}
.page-hosting #plans .plan.is-featured:hover{transform:translateY(-6px)}

/* Animated outline for featured */
.page-hosting #plans .plan.is-featured::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;background:linear-gradient(90deg, rgba(47,107,255,.75), rgba(146,105,255,.55), rgba(47,107,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;filter:saturate(120%);animation:mcBorder 3.4s linear infinite;opacity:.85}
@keyframes mcBorder{0%{filter:hue-rotate(0deg) saturate(120%)}100%{filter:hue-rotate(360deg) saturate(120%)}}
@media (max-width: 920px){
  .page-hosting #plans .plan.is-featured{transform:none}
  .page-hosting #plans .plan.is-featured:hover{transform:translateY(-2px)}
}

/* Section head: always stacked on hosting */
.page-hosting #plans .section__head--between .muted{margin:0}

/* --- Update13: Hosting comparison table (premium + sticky + mobile plan switch) --- */
.page-hosting .compare{margin-top:18px}
.page-hosting .compare__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.page-hosting .compare__tabs{display:flex;gap:8px;flex-wrap:wrap}
.page-hosting .compare__tabs .chip{background:rgba(255,255,255,.78);border:1px solid rgba(11,18,32,.10);font-weight:900;color:rgba(11,18,32,.72)}
.page-hosting .compare__tabs .chip.is-active{background:rgba(47,107,255,.10);border-color:rgba(47,107,255,.25);color:rgba(11,18,32,.92)}
.page-hosting .compare__wrap{position:relative}
.page-hosting .compare__wrap:before,
.page-hosting .compare__wrap:after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:4;display:none}
.page-hosting .compare__wrap:before{left:0;background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));display:none}
.page-hosting .compare__wrap:after{right:0;background:linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));display:none}

.page-hosting .table--compare{min-width:720px}
.page-hosting .table--compare thead th{position:sticky;top:0;z-index:3;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(8px)}
.page-hosting .table--compare th:first-child,
.page-hosting .table--compare td:first-child{position:sticky;left:0;z-index:6;background:rgba(255,255,255,.95)}
.page-hosting .table--compare thead th:first-child{z-index:8}
.page-hosting .table--compare tbody tr:nth-child(odd){background:rgba(11,18,32,.01)}
.page-hosting .table--compare tbody tr:hover{background:rgba(47,107,255,.05)}
.page-hosting .table--compare td{vertical-align:middle}

/* Compare table: allow tooltip overflow */
.page-hosting .compare .tableWrap{overflow-x:auto; overflow-y:visible;}

/* Compare feature tooltip */
.page-hosting .cmp-feature{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:10;}
.page-hosting .cmp-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;
  border:1px solid rgba(11,18,32,.18);
  background:rgba(255,255,255,.9);
  color:rgba(11,18,32,.72);
  font-size:12px;font-weight:900;line-height:1;
  cursor:help;flex:0 0 auto;padding:0;
}
.page-hosting .cmp-i:hover{border-color:rgba(47,107,255,.28);box-shadow:0 10px 18px rgba(11,18,32,.08)}
.page-hosting .cmp-tip{
  position:absolute;left:0;top:calc(100% + 10px);
  width:280px;max-width:min(320px, 86vw);
  padding:12px 12px;border-radius:16px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(11,18,32,.14);
  opacity:0;transform:translateY(-6px);
  pointer-events:none;z-index:9999;
}
.page-hosting .cmp-tip strong{display:block;font-size:14px;margin-bottom:4px}
.page-hosting .cmp-tip span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.page-hosting .cmp-i:hover + .cmp-tip,
.page-hosting .cmp-i:focus + .cmp-tip{
  opacity:1;transform:translateY(0);pointer-events:auto;
}

/* Vertical dividers for easier scanning */
.page-hosting .table--compare th:first-child,
.page-hosting .table--compare td:first-child{
  border-right:1px solid rgba(11,18,32,.08);
}
.page-hosting .table--compare th:not(:first-child),
.page-hosting .table--compare td:not(:first-child){
  border-left:1px solid rgba(11,18,32,.06);
}


.page-hosting .cmp-head{display:flex;flex-direction:column;gap:8px;min-width:170px}
.page-hosting .cmp-title{font-weight:1000;letter-spacing:-.01em}
.page-hosting .cmp-tags{display:flex;gap:8px;flex-wrap:wrap}
.page-hosting .cmp-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(11,18,32,.10);background:rgba(11,18,32,.03);font-size:12px;font-weight:900;color:rgba(11,18,32,.78);white-space:nowrap}
.page-hosting .cmp-tag--ok{background:rgba(40,199,111,.10);border-color:rgba(40,199,111,.20);color:rgba(11,18,32,.92)}
.page-hosting .cmp-badge{margin-left:8px;display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(47,107,255,.10);border:1px solid rgba(47,107,255,.22);color:rgba(11,18,32,.90);font-size:11px;font-weight:1000}

.page-hosting .cmp-yes{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:rgba(40,199,111,.12);border:1px solid rgba(40,199,111,.20);color:rgba(17,124,79,1);font-weight:1000}
.page-hosting .cmp-yes:before{content:"✓"}
.page-hosting .cmp-diff td{background:rgba(47,107,255,.04)}
.page-hosting .cmp-diff td:first-child{font-weight:1000}

.page-hosting .compare__hint{margin-top:10px}

/* Mobile: select a single plan column */
@media (max-width: 860px){
  .page-hosting .compare__head{align-items:flex-start;flex-direction:column}
  .page-hosting .table--compare{min-width:660px}
  .page-hosting .compare[data-compare="micro"] .table--compare{min-width:420px}
  .page-hosting .compare[data-compare="start"] .table--compare{min-width:420px}
  .page-hosting .compare[data-compare="pro"] .table--compare{min-width:420px}
  .page-hosting .compare[data-compare="premium"] .table--compare{min-width:420px}
  .page-hosting .compare[data-compare="enterprise"] .table--compare{min-width:420px}

  .page-hosting .compare[data-compare="micro"] [data-plan-col]:not([data-plan-col="micro"]) {display:none}
  .page-hosting .compare[data-compare="start"] [data-plan-col]:not([data-plan-col="start"]) {display:none}
  .page-hosting .compare[data-compare="pro"] [data-plan-col]:not([data-plan-col="pro"]) {display:none}
  .page-hosting .compare[data-compare="premium"] [data-plan-col]:not([data-plan-col="premium"]) {display:none}
  .page-hosting .compare[data-compare="enterprise"] [data-plan-col]:not([data-plan-col="enterprise"]) {display:none}
}

/* Desktop/tablet: always show all columns */
@media (min-width: 861px){
  .page-hosting .compare__tabs{display:none}
  .page-hosting .compare [data-plan-col]{display:table-cell !important}
}

/* --- Update16: Hosting custom builder (resources) --- */
.page-hosting .hosting-builder{display:flex;flex-direction:column;gap:16px}
.page-hosting .hosting-builder__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-hosting .plan__price--calc{min-width:260px}
@media (max-width:820px){
  .page-hosting .hosting-builder__head{flex-direction:column}
  .page-hosting .plan__price--calc{min-width:0;width:100%;align-items:flex-start}
}
.page-hosting .hosting-builder__grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.page-hosting .hosting-builder__grid{grid-template-columns:1fr}}
.page-hosting .hb-field{padding:12px;border-radius:16px;border:1px solid rgba(11,18,32,.10);background:rgba(11,18,32,.02)}
.page-hosting .hb-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900}
.page-hosting .hb-hint{font-size:12px;color:rgba(11,18,32,.62);margin-top:4px}
.page-hosting .hb-control{display:flex;align-items:center;gap:12px;margin-top:10px}
.page-hosting .hb-control input[type="range"]{width:100%}
.page-hosting .hb-number{width:96px;padding:10px 10px;border-radius:12px;border:1px solid rgba(11,18,32,.14);background:rgba(255,255,255,.80);font-weight:900}
.page-hosting .hb-number:focus{outline:none;box-shadow:0 0 0 4px rgba(47,107,255,.16)}
.page-hosting .hb-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.page-hosting .hb-toggle input{transform:scale(1.1)}
.page-hosting .hb-summary{display:flex;flex-wrap:wrap;gap:8px}
.page-hosting .hb-summary .chip{padding:8px 12px}

/* =========================================================
   Hosting plans – clarity tweaks
   ========================================================= */

.page-hosting #plans .plan__features--diff li{
  background: rgba(47,107,255,.04);
  border-color: rgba(47,107,255,.14);
}
.page-hosting #plans .plan__features--diff li:before{
  background: rgba(47,107,255,.10);
  border-color: rgba(47,107,255,.22);
}
.page-hosting #plans .plan__features--diff li:after{
  background: rgba(47,107,255,1);
}

.page-hosting .hosting-includes{padding: 18px;}
.page-hosting .hosting-includes__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 18px;
  margin-bottom: 12px;
}
.page-hosting .hosting-includes__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 920px){
  .page-hosting .hosting-includes__list{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 520px){
  .page-hosting .hosting-includes__head{flex-direction:column; align-items:flex-start;}
  .page-hosting .hosting-includes__list{grid-template-columns:1fr;}
}

.page-hosting .hosting-includes__list li{
  position:relative;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--mc-border-soft);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.page-hosting .hosting-includes__list li:before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform: translate(0, -50%);
  width:18px;
  height:18px;
  border-radius:999px;
  background: rgba(17,124,79,.10);
  border: 1px solid rgba(17,124,79,.18);
}
.page-hosting .hosting-includes__list li:after{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform: translate(0, -50%);
  width:18px;
  height:18px;
  background: rgba(17,124,79,1);
  --mc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--mc-check);
  mask-image:var(--mc-check);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:12px 12px;
  mask-size:12px 12px;
}

/* =============================
   HOSTING – FIXED RECOMMENDED + HORIZONTAL SCROLL
   ============================= */

/* Safety: avoid accidental horizontal page scroll on Hosting */
body.page-hosting{overflow-x:hidden}

.page-hosting .hosting-plan-set{
  margin-top: 22px;
}

.page-hosting .hosting-plan-set__head{
  margin-bottom: 12px;
}

.page-hosting .plan-set__row{
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 20px;
  align-items: start;
}

/* Prevent page from becoming wider than the viewport (grid items default to min-width:auto) */
.page-hosting .plan-set__row > *{min-width:0}
.page-hosting .plan-set__scrollWrap{min-width:0}

@media (max-width: 980px){
  .page-hosting .plan-set__row{
    grid-template-columns: 1fr;
  }
}

.page-hosting .plan-set__featured .plan{
  height: auto;
}

@media (min-width: 981px){
  /* Keep the recommended plan visible while scrolling the page */
  .page-hosting .plan-set__featured{
    position: sticky;
    top: 124px;
    align-self: start;
  }
}

.page-hosting .plan-set__scrollWrap{
  position: relative;
  border-radius: 22px;
}

.page-hosting .plan-set__scroll{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 12px 44px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(11,18,32,.35) transparent;
  cursor: grab;
  overscroll-behavior-inline: contain;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.page-hosting .plan-set__scroll.is-dragging{cursor: grabbing}
.page-hosting .plan-set__scroll.is-dragging *{user-select:none}

.page-hosting .plan-set__scroll::-webkit-scrollbar{height:8px}
.page-hosting .plan-set__scroll::-webkit-scrollbar-track{background:transparent}
.page-hosting .plan-set__scroll::-webkit-scrollbar-thumb{
  background: rgba(11,18,32,.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.page-hosting .plan-set__scroll::-webkit-scrollbar-thumb:hover{background: rgba(11,18,32,.32)}

.page-hosting .plan-set__scroll .plan{
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 360px;
  scroll-snap-align: start;
}

.page-hosting .plan-set__scroll:focus{
  outline: none;
}

.page-hosting .plan-set__scrollWrap:before,
.page-hosting .plan-set__scrollWrap:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: .9;
  z-index: 1;
}

.page-hosting .plan-set__scrollWrap:before{
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0));
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}

.page-hosting .plan-set__scrollWrap:after{
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}

/* Carousel controls + progress */
.page-hosting .plan-set__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  color: var(--text);
  cursor: pointer;
  z-index: 3;
}

.page-hosting .plan-set__nav--prev{left: 10px}
.page-hosting .plan-set__nav--next{right: 10px}

.page-hosting .plan-set__nav[disabled]{
  opacity: .35;
  pointer-events: none;
}

/* Don't overpower the layout on touch screens */
@media (hover: hover){
  .page-hosting .plan-set__nav{opacity: 0; transition: opacity .18s ease, transform .18s ease}
  .page-hosting .plan-set__scrollWrap:hover .plan-set__nav{opacity: 1}
  .page-hosting .plan-set__scrollWrap:hover .plan-set__nav--prev{transform: translateY(-50%) translateX(-2px)}
  .page-hosting .plan-set__scrollWrap:hover .plan-set__nav--next{transform: translateY(-50%) translateX(2px)}
}

.page-hosting .plan-set__scrollWrap.is-single .plan-set__nav{
  display: none;
}

@media (max-width: 980px){
  .page-hosting .plan-set__scrollWrap:before,
  .page-hosting .plan-set__scrollWrap:after{
    width: 22px;
  }
}

.page-hosting .plan__tier{
  margin-top: 2px;
  font-size: 14px;
  color: var(--mc-text-muted);
}


/* Compare table: sticky first column for readability */
.page-hosting .table--compare{
  border-collapse: separate;
  border-spacing: 0;
}
.page-hosting .compare__wrap{
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior: contain;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.page-hosting .compare__wrap.is-pointer-down{user-select:none}
.page-hosting .compare__wrap.is-dragging{cursor: grabbing}
.page-hosting .table--compare th:first-child,
.page-hosting .table--compare td:first-child{
  position: sticky;
  left: 0;
  z-index: 6;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 10px 0 20px rgba(16,24,40,.06);
}
.page-hosting .table--compare thead th:first-child{
  z-index: 8;
}

/* ============================================
   Hosting: fixed period selector (right side)
   ============================================ */
.period-float{
  position: fixed;
  right: 2%;
  bottom: 4%;
  top: auto;
  z-index: 90;
  width: 118px;
  padding: 10px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(11,18,32,.12);
}
.period-float__help{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-weight: 700;
  cursor: help;
  padding: 0;
}
.period-float__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.period-float__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.period-float__toggle .pf-chevron{
  display:inline-block;
  transform: rotate(0deg);
  transition: transform .16s ease;
  line-height: 1;
  font-size: 18px;
}
.period-float.is-collapsed .pf-chevron{ transform: rotate(180deg); }
.period-float.is-collapsed .period-float__list{ display:none; }
.period-float.is-collapsed{ width: 74px; }

.period-float__tip{
  position: absolute;
  right: calc(100% + 12px);
  top: 0;
  width: 280px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(11,18,32,.14);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.period-float__tip strong{display:block; font-size: 14px; margin-bottom: 4px}
.period-float__tip span{display:block; color: var(--muted); font-size: 13px; line-height: 1.35}
.period-float__help:hover + .period-float__tip,
.period-float__help:focus + .period-float__tip{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.period-float__list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-btn{
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}
.pf-btn:hover{transform: translateY(-1px); border-color: var(--line2)}
.pf-btn.is-active{
  border-color: rgba(47,107,255,.50);
  box-shadow: 0 10px 22px rgba(47,107,255,.18);
}

/* Responsive: turn into a bottom bar on small screens */
@media (max-width: 860px){
  .period-float{
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .period-float__tip{
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 10px);
    width: min(420px, calc(100vw - 24px));
    transform: translateY(6px);
  }
  .period-float__list{
    margin: 0;
    flex: 1;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .period-float__list::-webkit-scrollbar{display:none}
  .pf-btn{
    width: auto;
    white-space: nowrap;
  }
}

@media print{.period-float{display:none}}



/* --- Update33: Hosting UI fixes (tooltip above everything, spacing, cleaner carousel scrollbar) --- */
/* Tooltip must not be clipped by the horizontal scroller */
.page-hosting .plan-set__scroll{overflow-y: visible}
.page-hosting .plan-tipWrap{z-index: 9999}
.page-hosting .plan-tip{z-index: 10000}

/* Add breathing room between meta tags and CTA (while keeping equal heights) */
.page-hosting .plan__meta{margin-bottom:0; padding-bottom:22px}

/* Reduce scrollbar footprint / remove white fades; keep drag + arrows */
.page-hosting .plan-set__scroll{padding:10px 12px 14px; scrollbar-width:none; scrollbar-color:transparent transparent}
.page-hosting .plan-set__scroll::-webkit-scrollbar{height:0;width:0}
.page-hosting .plan-set__scrollWrap:before,
.page-hosting .plan-set__scrollWrap:after{display:none !important; content:none !important}

/* Status DB table */
.status-table-wrap{overflow:auto}
.status-table{width:100%;border-collapse:collapse}
.status-table th,.status-table td{padding:10px 10px;border-top:1px solid rgba(255,255,255,0.10);text-align:left;vertical-align:top}
.status-table thead th{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.75);border-top:0}
.status-table td code.status-code{display:inline-block;padding:6px 8px;border-radius:10px}
.status-td-name{white-space:nowrap}
.status-td-name .status-dot{margin-right:10px}
@media (max-width: 640px){
  .status-td-name{white-space:normal}
  .status-table th:nth-child(2),.status-table td:nth-child(2){display:none}
}


/* Scroll quick controls (Up / Down) */
.scrollnav{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.scrollnav.is-visible{opacity:1; pointer-events:auto; transform: translateY(0)}
.scrollnav__btn{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 40px rgba(11,18,32,.16);
  backdrop-filter: blur(14px);
  display:grid; place-items:center;
  cursor:pointer;
  color:var(--text);
}
.scrollnav__btn:hover{transform: translateY(-1px)}
.scrollnav__btn:active{transform: translateY(0)}
.scrollnav__btn svg{display:block}

@media (max-width: 720px){
  .scrollnav{right:12px; bottom:12px}
  .scrollnav__btn{width:42px; height:42px; border-radius:16px}
}

/* ================================
   WHOIS
   ================================ */

.whois__meta{
  font-size:.92rem;
  color:var(--muted);
  text-align:right;
  line-height:1.2;
  padding-top:2px;
}

.whois__tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(17,24,39,.10);
}

.whois__tab{
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: .93rem;
  cursor:pointer;
  color: var(--text);
}

.whois__tab:hover{transform: translateY(-1px)}
.whois__tab:active{transform: translateY(0)}
.whois__tab.is-active{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 10px 28px rgba(59,130,246,.16);
}

.whois__panel{display:none; padding-top:12px}
.whois__panel.is-active{display:block}

.whois__kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(17,24,39,.10);
}
.whois__kv:last-child{border-bottom:none}
.whois__k{color:var(--muted); font-weight:700}
.whois__v{color:var(--text)}

.whois__tags{display:flex; flex-wrap:wrap; gap:8px}
.whois__tags .tag{
  border-radius: 999px;
  padding: 6px 10px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  font-size: .88rem;
}

.whois__history{
  display:grid;
  gap: 12px;
}
.whois__hist-item{
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 12px 14px;
}
.whois__hist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.whois__hist-head .t{font-weight:900}
.whois__hist-sub{color:var(--muted); font-size:.9rem; margin-top:2px}
.whois__hist-body{margin-top:10px; display:grid; gap:6px}
.whois__hist-line{display:flex; gap:10px; align-items:center}
.whois__hist-line .dot{width:10px; height:10px; border-radius:999px; border:2px solid rgba(239,68,68,.45); background:rgba(255,255,255,.9)}
.whois__hist-line .txt{color:var(--text)}
.whois__hist-head .badge{
  display:inline-flex;
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.86rem;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.85);
}

@media (max-width: 820px){
  .whois__kv{grid-template-columns: 1fr;}
}

/* Domains: bulk availability */
.domain-bulk{margin-top:12px}
.domain-bulk__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.domain-bulk__title{display:flex;flex-direction:column;gap:6px}
.domain-bulk__base{font-size:14px;font-weight:700;background:rgba(0,0,0,.04);border:1px solid var(--border);padding:6px 10px;border-radius:999px;display:inline-block}
.domain-bulk__stats{display:flex;gap:8px;flex-wrap:wrap}
.domain-bulk__list{display:grid;gap:8px;margin-top:12px}
.domain-bulk__row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--border);background:var(--card);cursor:pointer;text-align:left;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.domain-bulk__row:hover{transform:translateY(-1px);box-shadow:0 12px 20px rgba(11,18,32,.06)}
.domain-bulk__row[data-status="available"]{border-color:rgba(40,199,111,.28)}
.domain-bulk__row[data-status="taken"]{border-color:rgba(234,84,85,.24)}
.domain-bulk__row[data-status="failed"]{border-color:rgba(86,98,118,.22)}
.domain-bulk__row[data-status="checking"]{border-color:rgba(255,159,67,.22)}
.domain-bulk__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.domain-bulk__domain{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:13px;background:rgba(0,0,0,.04);border:1px solid var(--border);padding:4px 8px;border-radius:999px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.domain-bulk__right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.domain-bulk__price{font-weight:900;font-size:12px;border:1px solid var(--border);background:rgba(0,0,0,.035);padding:6px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.domain-bulk__price--na{color:var(--muted);font-weight:800}
.domain-bulk__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.domain-bulk__actions{display:flex;align-items:center;gap:10px}