/* ============================================================
   HOSTEMCLOUD — shared base
   Tokens, resets, site-nav, site-footer, and common utilities
   used by all non-home pages (ServiceLayout, BlogLayout).
   Brand: deep blue #1F5BFF accent · navy #070C1C ink · electric aqua #14E2E2
   ============================================================ */

:root {
  --yellow-100:#D6FCFA; --yellow-200:#14E2E2;
  --purple-100:#8AB0FF; --purple-200:#0C1430; --purple-300:#070C1C;
  --magenta-100:#D6FCFA; --magenta-200:#1F5BFF; --magenta-300:#0BBFC4;

  --blue-50:#EEF3FF; --blue-100:#DCE7FF; --blue-200:#BBD0FF; --blue-300:#8AB0FF;
  --blue-400:#4D85FF; --blue-500:#1F5BFF; --blue-600:#1647D6; --blue-700:#0F3BB0;
  --ink-900:#070C1C; --ink-800:#0C1430; --ink-700:#1B2740;
  --n-0:#FFFFFF; --n-25:#FBFCFE; --n-50:#F5F7FB; --n-100:#ECEFF5; --n-200:#DDE3EC;
  --n-300:#C2CBD9; --n-400:#98A4B6; --n-500:#6B7688; --n-600:#515C70; --n-700:#364152;
  --n-800:#232C3B; --n-900:#131A26;
  --success:#14B26A; --success-bg:#E2F7EE; --error:#E5326B;

  --text:var(--purple-200); --text-soft:#445065; --text-mute:#74808F;
  --line:var(--n-200); --line-soft:#EDF0F6;

  --display:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --e1:0 1px 2px rgba(14,23,38,.06),0 1px 1px rgba(14,23,38,.04);
  --e2:0 2px 4px rgba(14,23,38,.06),0 4px 12px rgba(14,23,38,.06);
  --e3:0 8px 24px rgba(14,23,38,.10),0 2px 6px rgba(14,23,38,.05);

  --maxw:1200px;
  --nav-h:72px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body {
  margin:0; font-family:var(--sans); color:var(--text); background:var(--n-0);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.1; }
p { margin:0; text-wrap:pretty; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   LAYOUT
   ============================================================ */
.shell {
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:clamp(16px, 5vw, 48px);
}

/* ============================================================
   PAGE HEADER / NAV
   ============================================================ */
.page-header { position:sticky; top:0; z-index:50; }
.nav {
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
  border-bottom-color:var(--line); box-shadow:var(--e1);
}
.nav__inner {
  display:flex; align-items:center; gap:32px; height:var(--nav-h);
}
.nav__logo {
  display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0;
}
.nav__wordmark {
  font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink-900);
}
.nav__links { display:flex; gap:4px; }
.nav__links a {
  font-size:15px; font-weight:500; color:var(--text-soft); padding:8px 14px; border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.nav__links a:hover { color:var(--ink-900); background:var(--n-50); }
.nav__cta { margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav__burger { display:none; }

/* nav language toggle */
.nav .langtoggle {
  display:inline-flex; align-items:center; border:1px solid var(--n-300);
  border-radius:var(--r-sm); overflow:hidden; background:var(--n-0);
}
.nav .langtoggle a {
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:6px 11px; background:transparent; color:var(--text-mute);
  cursor:pointer; transition:background .15s, color .15s; text-decoration:none;
}
.nav .langtoggle a.is-active { background:var(--ink-900); color:#fff; }

/* nav primary button */
.nav .btn--primary {
  font-family:var(--sans); font-weight:600; font-size:14px; padding:9px 18px;
  border-radius:var(--r-sm); background:var(--blue-500); color:#fff;
  border:1px solid transparent; cursor:pointer; transition:all .16s ease;
  display:inline-flex; align-items:center; text-decoration:none;
}
.nav .btn--primary:hover { background:var(--blue-600); transform:translateY(-1px); }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.footer { background:var(--n-0); border-top:1px solid var(--line); padding:72px 0 36px; }
.footer__top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer__brand p { font-size:15px; color:var(--text-soft); max-width:30ch; margin-bottom:20px; margin-top:0; }
.footer__col h5 {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute); margin:0 0 16px; font-weight:600;
}
.footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer__col a { font-size:15px; color:var(--text-soft); }
.footer__col a:hover { color:var(--blue-600); }
.footer__bot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:12px;
}
.footer__bot.copy { font-family:var(--mono); font-size:12px; color:var(--text-mute); letter-spacing:.02em; }
.footer__bot.tag { font-family:var(--mono); font-size:12px; color:var(--text-mute); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
  .footer__top { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1 / -1; }
}
@media (max-width:720px) {
  .nav__links { display:none; }
  .nav__wordmark { display:none; }
  .footer { padding:48px 0 28px; }
  .footer__top { grid-template-columns:1fr; }
}

/* ============================================================
   FOCUS / MOTION / A11Y
   ============================================================ */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--blue-600); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}