/* ============================================================
   HOSTEMCLOUD — homepage tokens
   Deep blue + electric aqua. The legacy alias names are remapped:
   --yellow-* = aqua signature, --purple-* = navy ink,
   --magenta-* = blue accent. Typefaces: Space Grotesk / Hanken / Space Mono.
   ============================================================ */

:root {
  /* HOSTEMCLOUD palette — deep blue + electric aqua.
     Legacy alias names retained so every shared component stays coherent:
     --yellow-* = the bright AQUA signature fill (was yellow)
     --purple-* = navy ink / dark surfaces
     --magenta-* = blue accent (highlighted words) */
  --yellow-100:#D6FCFA; --yellow-200:#14E2E2;
  --purple-100:#8AB0FF; --purple-200:#0C1430; --purple-300:#070C1C;
  --magenta-100:#D6FCFA; --magenta-200:#1F5BFF; --magenta-300:#0BBFC4;

  /* Real blue scale = primary action + accents */
  --blue-50:#EEF3FF; --blue-100:#DCE7FF; --blue-200:#BBD0FF; --blue-300:#8AB0FF;
  --blue-400:#4D85FF; --blue-500:#1F5BFF; --blue-600:#1647D6; --blue-700:#0F3BB0;
  --blue-800:#0C2E86; --blue-900:#0A2266;
  --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; --warning:#1F5BFF;

  --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);
  --e4:0 24px 60px rgba(14,23,38,.16),0 6px 16px rgba(14,23,38,.07);

  --maxw:1200px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
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 { margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.08; }
p { margin:0; text-wrap:pretty; }
a { text-decoration:none; color:inherit; }

.shell { max-width:var(--maxw); margin:0 auto; padding:0 40px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-600); font-weight:600;
}
.eyebrow .bar { width:24px; height:2px; background:var(--blue-500); }
.eyebrow.on-dark { color:var(--blue-300); }

/* ---- buttons (brand book §07) ---- */
.btn {
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-sm); padding:12px 22px; cursor:pointer;
  transition:all .16s ease; display:inline-flex; align-items:center; gap:9px; line-height:1; white-space:nowrap;
}
.btn--primary { background:var(--blue-500); color:#fff; box-shadow:var(--e1); }
.btn--primary:hover { background:var(--blue-600); transform:translateY(-1px); box-shadow:var(--e2); }
.btn--secondary { background:var(--n-0); color:var(--ink-900); border-color:var(--n-300); }
.btn--secondary:hover { border-color:var(--n-400); background:var(--n-50); }
.btn--ghost { background:transparent; color:var(--blue-600); }
.btn--ghost:hover { background:var(--blue-50); }
.btn--on-dark { background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn--on-dark:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }
.btn--lg { font-size:16px; padding:15px 28px; }
.btn .arr { transition:transform .16s ease; }
.btn:hover .arr { transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:50; 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;
}
.nav.scrolled { border-bottom-color:var(--line); box-shadow:var(--e1); }
.nav__inner { display:flex; align-items:center; gap:32px; height:72px; }
.nav__logo img { height:26px; width:auto; display:block; }
.nav__links { display:flex; gap:4px; margin-left:8px; }
.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__cta .signin { font-size:15px; font-weight:500; color:var(--text-soft); padding:8px 12px; }
.nav__cta .signin:hover { color:var(--ink-900); }
.nav__burger { display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; overflow:hidden; background:var(--n-0); }
.hero__visual { position:relative; }  /* anchor floating chip to the mockup, not the hero row */
.hero__grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1100px 620px at 78% 4%,#000,transparent 72%);
          mask-image:radial-gradient(1100px 620px at 78% 4%,#000,transparent 72%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:.9; pointer-events:none;
}
.hero__glow { position:absolute; top:-180px; right:-120px; width:760px; height:620px;
  background:radial-gradient(closest-side,var(--blue-100),transparent 70%); opacity:.65; pointer-events:none; }
.hero__inner { position:relative; display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center;
  padding:84px 0 92px; }
.hero__copy { max-width:560px; }
.hero h1 { font-size:62px; letter-spacing:-.035em; line-height:1.02; margin:24px 0 22px; }
.hero h1 .accent { color:var(--blue-500); }
.hero__sub { font-size:21px; font-weight:400; color:var(--text-soft); line-height:1.5; max-width:48ch; }
.hero__actions { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero__meta { display:flex; gap:28px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero__meta .item { display:flex; flex-direction:column; gap:2px; }
.hero__meta .item .v { font-size:24px; font-weight:700; letter-spacing:-.02em; }
.hero__meta .item .k { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); }

/* ---- product mockup ---- */
.mock {
  position:relative; background:var(--n-0); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e4); overflow:hidden; transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);
}
.mock__bar { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--n-25); }
.mock__bar .dot { width:10px; height:10px; border-radius:50%; background:var(--n-300); }
.mock__bar .title { margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.04em; }
.mock__bar .pill { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--success); background:var(--success-bg); padding:4px 9px; border-radius:20px; }
.mock__body { display:grid; grid-template-columns:64px 1fr; }
.mock__rail { border-right:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px; background:var(--n-25); }
.mock__rail .ico { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--n-400); }
.mock__rail .ico.active { background:var(--blue-50); color:var(--blue-600); }
.mock__main { padding:20px; }
.mock__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mock__row .h { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.mock__row .tag { font-family:var(--mono); font-size:10px; color:var(--text-mute); }
.mock__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.mock__stat { border:1px solid var(--line); border-radius:var(--r-md); padding:12px; }
.mock__stat .n { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.mock__stat .l { font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); margin-top:3px; }
.mock__stat .n.b { color:var(--blue-500); }
.mock__chart { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 16px 12px; }
.mock__chart .bars { display:flex; align-items:flex-end; gap:8px; height:96px; }
.mock__chart .bars .b { flex:1; border-radius:4px 4px 0 0; background:var(--blue-100); }
.mock__chart .bars .b.hi { background:var(--blue-500); }
.mock__chart .axis { display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:9px; color:var(--n-400); }
.mock__float {
  position:absolute; left:-26px; bottom:34px; background:var(--ink-900); color:#fff; border-radius:var(--r-md);
  padding:12px 16px; box-shadow:var(--e3); display:flex; align-items:center; gap:11px;
}
.mock__float .seven { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--blue-300); }
.mock__float .txt .t { font-size:13px; font-weight:600; }
.mock__float .txt .s { font-family:var(--mono); font-size:9.5px; color:var(--n-400); letter-spacing:.04em; text-transform:uppercase; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding:104px 0; }
.section--tint { background:var(--n-50); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--ink { background:var(--ink-900); color:#fff; }
.sec-head { max-width:680px; margin-bottom:52px; }
.sec-head h2 { font-size:44px; letter-spacing:-.03em; margin:18px 0 16px; }
.sec-head p { font-size:19px; color:var(--text-soft); line-height:1.5; }
.section--ink .sec-head p { color:var(--n-300); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc {
  background:var(--n-0); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  transition:border-color .18s, box-shadow .18s, transform .18s; position:relative;
}
.svc:hover { border-color:var(--blue-200); box-shadow:var(--e2); transform:translateY(-2px); }
.svc__ico { width:48px; height:48px; border-radius:var(--r-md); background:var(--blue-50); display:grid; place-items:center; margin-bottom:20px; }
.svc h4 { font-size:19px; letter-spacing:-.01em; margin-bottom:9px; }
.svc p { font-size:15px; color:var(--text-soft); line-height:1.55; }
.svc__num { position:absolute; top:26px; right:28px; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--n-300); }

/* ============================================================
   WHY CHOOSE US (dark)
   ============================================================ */
.why { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.why__copy h2 { font-size:46px; letter-spacing:-.03em; line-height:1.06; margin:18px 0 20px; }
.why__copy h2 .accent { color:var(--blue-400); }
.why__copy p { font-size:18px; color:var(--n-300); line-height:1.6; margin-bottom:16px; }
.why__points { margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.why__point { display:flex; gap:14px; align-items:flex-start; }
.why__point .ck { flex:0 0 24px; width:24px; height:24px; border-radius:7px; background:rgba(31,91,255,.16); color:var(--blue-300); display:grid; place-items:center; margin-top:2px; }
.why__point .t b { font-weight:600; color:#fff; }
.why__point .t span { color:var(--n-400); }

.why__stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink-700); border:1px solid var(--ink-700); border-radius:var(--r-lg); overflow:hidden; }
.stat { background:var(--ink-800); padding:34px 30px; }
.stat .n { font-size:46px; font-weight:800; letter-spacing:-.035em; line-height:1; }
.stat .n .u { font-size:24px; color:var(--blue-400); }
.stat .n.blue { color:var(--blue-400); }
.stat .l { font-size:14px; color:var(--n-300); margin-top:10px; line-height:1.45; }
.stat .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--n-500); margin-top:4px; }

/* ============================================================
   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 1fr; gap:40px; }
.footer__brand img { height:24px; width:auto; margin-bottom:18px; }
.footer__brand p { font-size:15px; color:var(--text-soft); max-width:30ch; margin-bottom:20px; }
.footer__social { display:flex; gap:10px; }
.footer__social a { width:36px; height:36px; border:1px solid var(--line); border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-mute); transition:all .15s; }
.footer__social a:hover { color:var(--blue-600); border-color:var(--blue-200); background:var(--blue-50); }
.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); }
.footer__bot .tag b { color:var(--ink-900); font-family:var(--sans); font-weight:600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
  .hero__inner { grid-template-columns:1fr; gap:48px; }
  .hero h1 { font-size:48px; }
  .why { grid-template-columns:1fr; gap:40px; }
  .svc-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .shell { padding:0 22px; }
  .nav__links, .nav__cta .signin { display:none; }
  .hero h1 { font-size:38px; }
  .hero__sub { font-size:18px; }
  .sec-head h2, .why__copy h2 { font-size:32px; }
  .svc-grid, .footer__top, .why__stats { grid-template-columns:1fr; }
  .section { padding:72px 0; }
  .mock { transform:none; }
  /* on phones the overhanging chip becomes a caption beneath the mockup —
     no negative offset to overflow the viewport */
  .mock__float { position:static; left:auto; bottom:auto; margin-top:14px; box-shadow:var(--e2); }
}

/* ============================================================
   ACCESSIBILITY  (QA pass — focus, motion, mask degradation)
   Base rules for every page that loads home.css. Dark systems
   (service-dark.css) re-tint the ring for contrast on ink.
   ============================================================ */

/* Visible keyboard focus. :focus-visible keeps it off mouse clicks.
   3px offset places the ring in the surrounding gap so it reads on
   light backgrounds, blue buttons, and tinted sections alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Dark bands inside otherwise-light pages need a light-side ring. */
.section--ink :where(a, button, .btn):focus-visible,
.cta :where(a, button, .btn):focus-visible { outline-color: var(--blue-300); }
/* Tighter offset under the blurred sticky nav so the ring isn't clipped. */
.nav__links a:focus-visible, .nav__cta a:focus-visible { outline-offset: 2px; }

/* Graceful degradation: if an engine supports neither mask prefix,
   drop the decorative grid rather than render it full-bleed. */
@supports not ((-webkit-mask-image: radial-gradient(#000, #0000)) or (mask-image: radial-gradient(#000, #0000))) {
  .hero__grid { opacity: .22; -webkit-mask-image: none; mask-image: none; }
}

/* Respect the OS "reduce motion" setting on every device. */
@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;
  }
}