/* ============================================================
   Neefit — premium ISP landing page
   Vercel / Geist-inspired design system
   ============================================================ */

/* -------- Design tokens -------- */
:root {
  /* neutrals */
  --black: #0a0a0a;
  --ink: #111114;
  --charcoal: #1c1c22;
  --gray-900: #171717;
  --gray-700: #33333a;
  --gray-500: #6b7280;
  --gray-400: #8b909a;
  --gray-300: #c7ccd4;
  --gray-200: #e6e8ec;
  --gray-100: #f2f3f5;
  --gray-50:  #f8f9fb;
  --white: #ffffff;

  /* brand accents (from logo) */
  --brand-red: #c72039;
  --brand-green: #009444;

  /* electric-blue accent */
  --blue: #0070f3;
  --blue-600: #0060df;
  --blue-700: #0250b8;
  --blue-100: #e8f1ff;
  --blue-glow: rgba(0, 112, 243, 0.35);

  /* semantic */
  --bg: var(--white);
  --fg: var(--ink);
  --muted: var(--gray-500);
  --border: #ececf0;
  --border-strong: #e0e0e6;

  /* shape & motion */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.05);
  --shadow-md: 0 8px 30px rgba(17, 17, 20, 0.06);
  --shadow-lg: 0 24px 60px rgba(17, 17, 20, 0.10);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --maxw: 1340px; /* unified content width — matches the nav/hero so everything aligns */
  --maxw-hero: 1340px; /* wider bound for nav + hero so content sits further left */
  --nav-h: 68px;
  --header-h: 158px; /* topbar + floating nav, used to slide the hero up behind them */
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.025em; font-weight: 650; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--blue); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--black); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   Brand
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__mark { display: inline-flex; color: var(--black); }
.brand__word {
  font-weight: 700; font-size: 20px; letter-spacing: -0.04em;
}
.brand--light, .brand--light .brand__word { color: #fff; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 550; font-size: 15px; line-height: 1;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { flex: none; }
.btn--sm { padding: 9px 15px; font-size: 14px; }
.btn--lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(0,112,243,.25), 0 8px 24px -8px var(--blue-glow);
}
.btn--primary:hover { background: var(--blue-600); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,112,243,.3), 0 14px 30px -8px var(--blue-glow); }
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: var(--white); color: var(--ink); border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover { border-color: var(--gray-400); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--glass {
  background: rgba(255,255,255,0.10); color: #fff;
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* ============================================================
   Top utility bar (above nav)
   ============================================================ */
.topbar {
  position: relative; z-index: 100;   /* stay above the hero image that slides up behind it */
  background: transparent;
  font-size: 13px;
  padding: 10px 0 0;
}
.topbar__inner {
  max-width: var(--maxw-hero);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Shared glass surface for the topbar chips */
.topbar__phone,
.topbar__social a {
  background: rgba(9,13,22,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.55);
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.topbar__phone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 100px;
  color: rgba(255,255,255,0.88); font-weight: 500; letter-spacing: -0.01em;
}
.topbar__phone svg { width: 16px; height: 16px; color: #4da3ff; flex: none; }
.topbar__phone:hover { color: #fff; border-color: rgba(255,255,255,0.24); transform: translateY(-1px); }
.topbar__social { display: inline-flex; align-items: center; gap: 8px; }
.topbar__social a {
  width: 38px; height: 38px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.82);
}
.topbar__social a svg { width: 16px; height: 16px; }
.topbar__social a:hover { color: #fff; border-color: rgba(255,255,255,0.24); transform: translateY(-2px); }
.topbar__social a[aria-label*="Facebook"]:hover { color: #4a8cff; }
.topbar__social a[aria-label*="WhatsApp"]:hover { color: #35d366; }
@media (max-width: 480px) {
  .topbar__phone { font-size: 12.5px; padding: 7px 13px; }
  .topbar__social a { width: 36px; height: 36px; }
  .topbar__inner { gap: 10px; }
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 12px 0;
  transition: padding .25s var(--ease);
}
/* The inner container becomes a floating glass pill */
.nav__inner {
  max-width: var(--maxw-hero);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 11px 11px 11px 22px;
  border-radius: 18px;
  background: rgba(9,13,22,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 40px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.is-scrolled { padding: 8px 0; }
.nav.is-scrolled .nav__inner {
  background: rgba(9,13,22,0.74);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 46px -14px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Brand logo — real brand colours, no backing */
.brand__logo { height: 52px; width: auto; display: block; }
.nav .brand { color: #fff; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  color: rgba(255,255,255,0.66); font-size: 14.5px; font-weight: 500;
  padding: 8px 14px; border-radius: 10px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.08); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

/* SelfCare ghost, restyled for the dark pill */
.nav__portal.btn--ghost {
  background: transparent; color: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.20);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav__portal.btn--ghost:hover {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.32); color: #fff;
}
.nav__portal svg { opacity: 0.9; }

.nav__toggle {
  display: none; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.20);
  border-radius: 11px; background: rgba(255,255,255,0.05); position: relative;
}
.nav__toggle span {
  position: absolute; left: 11px; width: 18px; height: 1.6px; background: #fff;
  border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav__mobile {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  margin-inline: 24px;
  background: rgba(11,15,24,0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 24px 54px -18px rgba(0,0,0,0.6);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: 12px; color: rgba(255,255,255,0.78); font-weight: 500; border-radius: 10px; }
.nav__mobile a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav__mobile .btn { margin-top: 10px; }

/* ---- Inner pages (no dark hero): light header to match the light sections ---- */
body:not(.home) .nav__inner {
  background: rgba(255,255,255,0.72);
  border-color: var(--border);
  box-shadow: 0 10px 30px -14px rgba(17,17,20,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
}
body:not(.home) .nav.is-scrolled .nav__inner {
  background: rgba(255,255,255,0.86);
  border-color: var(--border-strong);
  box-shadow: 0 14px 36px -14px rgba(17,17,20,0.16);
}
body:not(.home) .nav .brand { color: var(--ink); }
body:not(.home) .nav__links a { color: var(--gray-500); }
body:not(.home) .nav__links a:hover,
body:not(.home) .nav__links a[aria-current="page"] { color: var(--ink); background: var(--gray-100); }
body:not(.home) .nav__portal.btn--ghost { color: var(--ink); border-color: var(--border-strong); }
body:not(.home) .nav__portal.btn--ghost:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--ink); }
body:not(.home) .nav__toggle { border-color: var(--border-strong); background: #fff; }
body:not(.home) .nav__toggle span { background: var(--ink); }
body:not(.home) .nav__mobile {
  background: rgba(255,255,255,0.96);
  border-color: var(--border);
}
body:not(.home) .nav__mobile a { color: var(--gray-700); }
body:not(.home) .nav__mobile a:hover { background: var(--gray-100); color: var(--ink); }

/* Topbar chips, light variant */
body:not(.home) .topbar__phone,
body:not(.home) .topbar__social a {
  background: rgba(255,255,255,0.72);
  border-color: var(--border);
  box-shadow: 0 6px 18px -12px rgba(17,17,20,0.28);
}
body:not(.home) .topbar__phone { color: var(--gray-700); }
body:not(.home) .topbar__phone svg { color: var(--blue); }
body:not(.home) .topbar__social a { color: var(--gray-500); }
body:not(.home) .topbar__social a:hover { background: var(--gray-100); color: var(--ink); border-color: var(--border-strong); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 104px 0 56px;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  background: #05070d;
}

/* Homepage: slide the hero image up so it sits behind the transparent header.
   The hero's own dark background covers the top, so the page body stays light
   (keeping the sections below readable). */
.home .hero {
  margin-top: calc(-1 * (var(--header-h) + 6px));
  min-height: calc(100svh + 32px);
  padding-top: calc(var(--header-h) + 22px);
}

/* --- Cinematic background stack --- */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
  filter: saturate(0.82) brightness(0.9) contrast(1.06);
}
/* Deep midnight-blue → near-black editorial overlay */
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(1,2,6,0.94) 0%, rgba(3,5,12,0.8) 24%, rgba(5,9,20,0.52) 48%, rgba(8,16,34,0.2) 74%, rgba(10,20,40,0.06) 100%),
    linear-gradient(180deg, rgba(5,8,16,0.38) 0%, rgba(5,8,16,0.02) 34%, rgba(5,8,16,0.24) 74%, rgba(3,5,11,0.82) 100%);
}
/* Controlled warm glow from the sunset, kept to the right edge */
.hero__warm {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 88% 46%, rgba(255,150,74,0.18) 0%, rgba(255,120,60,0.06) 42%, transparent 72%);
  mix-blend-mode: screen;
}
/* Faint blue radial glow behind the headline */
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  top: 34%; left: 4%; width: 640px; height: 640px; max-width: 60vw;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(0,112,243,0.30) 0%, rgba(0,112,243,0.10) 38%, transparent 66%);
  filter: blur(30px);
  animation: heroGlow 18s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { transform: translateY(-50%) scale(1); opacity: 0.85; }
  100% { transform: translateY(-46%) scale(1.14); opacity: 1; }
}
/* Subtle fiber-path linework */
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; }
.hero__path {
  fill: none; stroke: url(#fiberTrace); stroke-width: 1.4;
  stroke-dasharray: 6 320; stroke-linecap: round;
  animation: fiberTrace 9s linear infinite;
}
.hero__path--2 { animation-delay: -4.5s; opacity: 0.7; }
@keyframes fiberTrace { to { stroke-dashoffset: -326; } }
/* Soft vignette */
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(130% 130% at 62% 40%, transparent 48%, rgba(2,4,9,0.42) 82%, rgba(1,2,6,0.7) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__path { animation: none; }
  .hero__glow { animation: none; }
}

/* --- Asymmetric layout: copy left, panel right --- */
.hero__content {
  position: relative; max-width: var(--maxw-hero);
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.hero__copy { max-width: 620px; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 550; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 13px; border-radius: 100px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  margin-bottom: 42px;
}
.hero__eyebrow .dot { width: 7px; height: 7px; background: #3b9bff; box-shadow: 0 0 0 3px rgba(59,155,255,.22); }

.hero__title {
  font-size: clamp(2.7rem, 6vw, 4.3rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1.0; text-wrap: balance;
  margin-bottom: 34px;
  text-shadow: 0 4px 60px rgba(0,0,0,.45);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: rgba(255,255,255,0.72); font-weight: 400; line-height: 1.55;
  max-width: 480px; margin-bottom: 46px;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.hero__micro { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 52px; }

/* Single clean horizontal proof strip */
.hero__proof {
  list-style: none; padding: 26px 0 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 620px;
}
.hero__proof li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: -0.01em;
}
.hero__proof li svg { width: 16px; height: 16px; color: rgba(255,255,255,0.55); }
.hero__proof-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); padding: 0 !important; }

/* --- Full-width feature bar (desktop) --- */
.hero__features {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 108px; z-index: 2;
  width: min(var(--maxw-hero), calc(100% - 48px));
  display: none; list-style: none; margin: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(9,13,22,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 40px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.hero__feature {
  flex: 1; display: flex; align-items: center; gap: 13px;
  padding: 4px 24px; min-width: 0;
}
.hero__feature + .hero__feature { border-left: 1px solid rgba(255,255,255,0.1); }
.hero__feature-ic {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  color: #bcd8ff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero__feature-ic svg { width: 21px; height: 21px; }
.hero__feature-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero__feature-txt strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.hero__feature-txt span { font-size: 12.5px; font-weight: 450; color: rgba(255,255,255,0.55); letter-spacing: -0.005em; }

/* Scroll to explore — bottom-left corner */
.hero__scroll {
  position: absolute; bottom: 30px; left: max(24px, calc((100% - var(--maxw-hero)) / 2));
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); z-index: 2;
  transition: color .2s var(--ease);
}
.hero__scroll:hover { color: rgba(255,255,255,0.9); }
.hero__scroll-line { position: relative; width: 46px; height: 1px; background: rgba(255,255,255,0.25); overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; width: 16px;
  background: linear-gradient(90deg, transparent, #4da3ff, transparent);
  animation: scrollTrace 2.2s var(--ease) infinite;
}
@keyframes scrollTrace { 0% { transform: translateX(-16px); } 100% { transform: translateX(46px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { animation: none; } }

/* On taller desktop screens, lift the hero content up out of dead-center so it
   doesn't float low with too much blank space above. Guarded by min-height so
   short viewports (where the scroll cue would be pushed off) stay untouched. */
@media (min-width: 1041px) and (min-height: 840px) {
  .home .hero__content { transform: translateY(-56px); }
}
/* Nudge the network-intelligence card slightly toward the right edge. */
@media (min-width: 1280px) {
  .hero__panel { margin-right: -30px; }
}

/* On desktop, swap the inline proof for the full-width feature bar. */
@media (min-width: 900px) {
  .hero__proof { display: none; }
  .hero__features { display: flex; }
  .home .hero { padding-bottom: 210px; }
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section--muted { background: var(--gray-50); border-block: 1px solid var(--border); }
.section--dark { background: var(--black); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.eyebrow .dot { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); }
.eyebrow--light { color: #6db3ff; }
.eyebrow--light .dot { background: #6db3ff; box-shadow: 0 0 0 4px rgba(109,179,255,.18); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.section__head { max-width: 640px; margin-bottom: 56px; }
.section__title { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.04em; margin-bottom: 16px; }
.section__lead { font-size: 1.1rem; color: var(--muted); }

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Service cards
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative; overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 120% at 100% 0, var(--blue-100) 0%, transparent 42%);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.card:hover::after { opacity: 1; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--gray-100); color: var(--ink); border: 1px solid var(--border);
  margin-bottom: 20px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card__icon svg { width: 24px; height: 24px; }
.card:hover .card__icon { background: var(--blue); color: #fff; border-color: var(--blue); }
.card h3 { font-size: 1.18rem; margin-bottom: 8px; letter-spacing: -0.03em; position: relative; }
.card p { color: var(--muted); font-size: 0.96rem; position: relative; }

/* ---- Service card variant: centered, dotted texture, "Read More" ---- */
.card--service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px 30px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
/* dotted texture behind the icon, fading downward */
.card--service::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 130px;
  color: rgba(17, 17, 20, 0.10);
  background-image: radial-gradient(currentColor 1.2px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
          mask-image: linear-gradient(180deg, #000, transparent 85%);
  opacity: .8; pointer-events: none;
}
/* keep the neutral look on hover — no blue corner glow here */
.card--service::after { display: none; }

/* neumorphic icon badge */
.card--service .card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--white); color: var(--ink); border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(17, 17, 20, 0.10), 0 2px 4px rgba(17, 17, 20, 0.06);
  margin: 0 auto 22px; position: relative; z-index: 1;
}
.card--service:hover .card__icon {
  background: var(--white); color: var(--ink); border-color: var(--border);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(17, 17, 20, 0.14), 0 3px 6px rgba(17, 17, 20, 0.07);
}
.card--service h3 { font-size: 1.15rem; margin-bottom: 12px; }
.card--service p {
  font-size: 0.92rem; line-height: 1.62; margin: 0 auto 22px;
  max-width: 27ch;
}

/* "Read More →" link pinned to the bottom, brand-red arrow */
.card__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  position: relative; z-index: 1;
  transition: color .25s var(--ease);
}
.card__arrow { color: var(--brand-red); transition: transform .25s var(--ease); }
.card--service:hover .card__more { color: var(--brand-red); }
.card--service:hover .card__arrow { transform: translateX(4px); }

/* ============================================================
   Services carousel (auto-scroll marquee · hover to pause)
   ============================================================ */
.services-carousel {
  position: relative;
  overflow: hidden;
  /* full-bleed: break out of the centered container to span the whole page */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* room for card lift + shadow, pulled back so section spacing is unchanged */
  padding: 30px 0;
  margin-top: -30px;
  margin-bottom: -30px;
  /* premium edge fade on both sides */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* swallow the scrollbar-width overflow the 100vw strip would add */
#services { overflow-x: clip; }
/* centre the heading to match the full-width, centered card strip */
#services .section__head { text-align: center; margin-inline: auto; }

/* centre the Packages heading to sit above its centered pricing grid */
#packages .section__head { text-align: center; margin-inline: auto; }
.services-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  will-change: transform;
  animation: services-scroll var(--carousel-duration, 48s) linear infinite;
}
/* pause when the visitor hovers the strip or focuses a card within it */
.services-carousel:hover .services-track,
.services-track:focus-within { animation-play-state: paused; }

.services-track .card {
  flex: 0 0 300px;
  width: 300px;
}

@keyframes services-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--carousel-shift, 50%)), 0, 0); }
}

/* Static fallback: no clone, no motion — wraps into centered rows */
.services-carousel.is-static {
  -webkit-mask-image: none; mask-image: none;
  padding: 0; margin: 0;
}
.services-carousel.is-static .services-track {
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .services-track { animation: none; }
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing { align-items: stretch; }
.price {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

.price--featured {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 24px 60px -20px var(--blue-glow);
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 40%);
}
.price--featured:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--blue), 0 34px 70px -24px var(--blue-glow); }

.price__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  padding: 6px 14px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 8px 20px -6px var(--blue-glow);
}
.price__head { margin-bottom: 18px; }
.price__head h3 { font-size: 1.25rem; letter-spacing: -0.03em; margin-bottom: 4px; }
.price__for { font-size: 0.85rem; color: var(--muted); }

.price__amount {
  display: flex; align-items: baseline; gap: 2px;
  font-size: 2.6rem; font-weight: 700; letter-spacing: -0.045em; color: var(--ink);
  margin-bottom: 14px;
}
.price__amount .tk { font-size: 1.4rem; font-weight: 600; margin-right: 2px; }
.price__amount .per { font-size: 0.95rem; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }

.price__speed {
  font-size: 0.92rem; color: var(--gray-700);
  padding: 10px 14px; background: var(--gray-100); border-radius: 10px;
  border: 1px solid var(--border); margin-bottom: 22px;
}
.price__speed strong { color: var(--blue); font-weight: 650; }
.price--featured .price__speed { background: var(--blue-100); border-color: #cfe4ff; }

.price__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; flex: 1; }
.price__list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--gray-700); }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070f3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.price__note { text-align: center; margin-top: 34px; color: var(--muted); font-size: 0.95rem; }
.price__note a { color: var(--blue); font-weight: 500; }
.price__note a:hover { text-decoration: underline; }

/* ============================================================
   Packages — redesigned plan cards (homepage)
   ============================================================ */
/* Let the feature strip close the section — trim the bottom padding */
#packages { padding-bottom: clamp(40px, 4vw, 56px); }
.plans {
  --plans-w: min(1300px, calc(100% + 170px));
  width: var(--plans-w); margin-inline: calc((100% - var(--plans-w)) / 2);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  align-items: stretch; padding-top: 16px;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 26px 26px;
  box-shadow: 0 1px 2px rgba(17,17,20,0.04);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
/* Scoped above .reveal.is-in so the hover lift actually applies once revealed */
.plans .plan:hover { transform: translateY(-8px); box-shadow: 0 30px 64px -26px rgba(17,17,20,0.24); border-color: var(--border-strong); }

/* Header: icon chip + name + descriptor */
.plan__top {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.plan__icon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(0,112,243,0.1);
}
.plan__icon svg { width: 23px; height: 23px; }
.plan__name { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.plan__for { font-size: 0.85rem; color: var(--muted); line-height: 1.35; margin-top: 4px; }

/* Speed headline */
.plan__speed { margin-bottom: 14px; }
.plan__mbps { display: flex; align-items: baseline; gap: 7px; }
.plan__mbps strong { font-size: 2.85rem; font-weight: 750; letter-spacing: -0.05em; color: var(--blue); line-height: 1; }
.plan__mbps { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.plan__speed-sub { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 6px; }

/* Price */
.plan__price {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 2.05rem; font-weight: 750; letter-spacing: -0.045em; color: var(--ink);
  margin-bottom: 18px;
}
.plan__price .tk { font-size: 1.15rem; font-weight: 600; margin-right: 1px; }
.plan__price .per { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }

/* Speed chip */
.plan__chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--gray-700);
  padding: 10px 14px; margin-bottom: 22px;
  background: var(--blue-100); border: 1px solid #d5e6ff; border-radius: 11px;
}
.plan__chip svg { width: 17px; height: 17px; color: var(--blue); flex: none; }
.plan__chip strong { color: var(--blue); font-weight: 700; }

/* Feature list */
.plan__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; flex: 1; align-content: start; }
.plan__list li {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.9rem; color: var(--gray-700); letter-spacing: -0.01em;
}
.plan__list li svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

/* Button */
.plan__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; border-radius: 12px;
  font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border-strong);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.plan__btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.plan__btn:hover { border-color: var(--blue); color: var(--blue); }
.plan__btn:hover svg { transform: translateX(3px); }
.plan__btn--primary {
  color: #fff; background: var(--blue); border-color: var(--blue);
  box-shadow: 0 12px 26px -10px var(--blue-glow);
}
.plan__btn--primary:hover { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }

/* Featured (dark) card */
.plan--featured {
  color: #fff;
  background: linear-gradient(180deg, #12151d 0%, #0a0c11 100%);
  border-color: rgba(0,112,243,0.55);
  box-shadow: 0 0 0 1px rgba(0,112,243,0.4), 0 30px 70px -28px rgba(0,112,243,0.5);
  top: -14px;
}
.plans .plan--featured:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(0,112,243,0.6), 0 44px 96px -30px rgba(0,112,243,0.62); }
.plan__badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 7px 15px; border-radius: 100px;
  box-shadow: 0 10px 24px -8px var(--blue-glow);
}
.plan__badge svg { width: 13px; height: 13px; }
.plan--featured .plan__top { border-bottom-color: rgba(255,255,255,0.12); }
.plan--featured .plan__icon {
  background: rgba(0,112,243,0.16); color: #6db1ff;
  box-shadow: inset 0 0 0 1px rgba(0,112,243,0.35), 0 0 22px -4px rgba(0,112,243,0.6);
}
.plan--featured .plan__name { color: #fff; }
.plan--featured .plan__for { color: rgba(255,255,255,0.62); }
.plan--featured .plan__mbps { color: #fff; }
.plan--featured .plan__mbps strong { color: #4d9bff; }
.plan--featured .plan__speed-sub { color: rgba(255,255,255,0.6); }
.plan--featured .plan__price { color: #fff; }
.plan--featured .plan__price .per { color: rgba(255,255,255,0.6); }
.plan--featured .plan__chip {
  background: rgba(0,112,243,0.14); border-color: rgba(0,112,243,0.4); color: rgba(255,255,255,0.82);
}
.plan--featured .plan__chip svg,
.plan--featured .plan__chip strong { color: #6db1ff; }
.plan--featured .plan__list li { color: rgba(255,255,255,0.82); }
.plan--featured .plan__list li svg { color: #4d9bff; }

/* Bottom trust/feature strip */
.plans-features {
  --plans-w: min(1300px, calc(100% + 170px));
  width: var(--plans-w); margin: 40px 0 0; margin-inline: calc((100% - var(--plans-w)) / 2);
  list-style: none; padding: 20px 8px;
  display: flex; align-items: stretch;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-md);
}
.plans-features li {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 9px; padding: 6px 18px;
}
.plans-features li + li { border-left: 1px solid var(--border); }
.plans-features li svg { width: 26px; height: 26px; color: var(--ink); }
.plans-features li span { display: flex; flex-direction: column; gap: 3px; }
.plans-features li strong { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.plans-features li span { font-size: 0.78rem; color: var(--muted); }
.plans-features li span strong { font-size: 0.95rem; }

@media (max-width: 1040px) {
  .plans { grid-template-columns: repeat(2, 1fr); width: auto; margin-inline: 0; }
  .plan--featured { top: 0; }
  .plans-features { flex-wrap: wrap; padding: 8px; width: auto; margin-inline: 0; }
  .plans-features li { flex: 1 1 30%; padding: 16px 12px; }
  .plans-features li + li { border-left: none; }
}
@media (max-width: 620px) {
  .plans { grid-template-columns: 1fr; }
  .plans-features li { flex: 1 1 45%; }
}

/* ============================================================
   Why Neefit
   ============================================================ */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.why__title { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.045em; }
.why__title .muted-ink { color: var(--gray-400); }
.why__body p { color: var(--gray-700); font-size: 1.05rem; }
.why__body p + p { margin-top: 16px; }

.why__features { list-style: none; padding: 0; margin: 0 0 64px; }
.why__features li {
  display: flex; align-items: center; gap: 12px;
  font-size: 1rem; font-weight: 500; color: var(--ink);
  padding: 18px 0; border-top: 1px solid var(--border);
}
.tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070f3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
/* Why-Neefit feature icons */
.why__ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(0,112,243,0.08);
  transition: transform .25s var(--ease);
}
.why__ic svg { width: 18px; height: 18px; }
.why__features li:hover .why__ic { transform: translateY(-2px); }

/* stats band */
.stats-head { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.stats-head .eyebrow { justify-content: center; }
.stats-head .section__title { margin-bottom: 12px; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.stat { background: var(--white); padding: 36px 28px; text-align: center; }
.stat__num {
  font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.05em;
  color: var(--ink); line-height: 1; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 0.9rem; color: var(--muted); }

/* ============================================================
   About
   ============================================================ */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about__media { position: relative; }
.about__media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.about__badge {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px 12px 12px;
  box-shadow: var(--shadow-md);
}
.about__badge strong { display: block; font-size: 0.9rem; letter-spacing: -0.02em; }
.about__badge span { font-size: 0.78rem; color: var(--muted); }
.brand__mark--sm { display: inline-flex; }

.about__text .eyebrow { margin-bottom: 16px; }
.about__text p { color: var(--gray-700); margin-top: 16px; font-size: 1.03rem; }
.about__text .section__title { margin-bottom: 4px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; font-weight: 550; color: var(--blue);
  transition: gap .2s var(--ease);
}
.link-arrow:hover { gap: 12px; }

/* ============================================================
   Contact (dark)
   ============================================================ */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.contact__title { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.045em; margin-bottom: 18px; }
.contact__lead { color: rgba(255,255,255,0.68); font-size: 1.08rem; max-width: 440px; margin-bottom: 40px; }

.contact__info { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.contact__info li { display: flex; align-items: center; gap: 16px; }
.contact__ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #6db3ff;
}
.contact__ic svg { width: 20px; height: 20px; }
.contact__info strong { display: block; font-size: 1rem; letter-spacing: -0.02em; }
.contact__info span { font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* form */
.contact__form {
  background: #131317;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  box-shadow: var(--shadow-lg);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.8); }
.field .opt { color: rgba(255,255,255,0.4); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.95rem; color: #fff;
  background: #0d0d10; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 12px 14px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,112,243,.25);
}
.field textarea { resize: vertical; min-height: 76px; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(255,255,255,0.5); pointer-events: none; }
.contact__form .btn--block { grid-column: 1 / -1; margin-top: 4px; }
.contact__note { grid-column: 1 / -1; font-size: 0.8rem; color: rgba(255,255,255,0.42); text-align: center; margin-top: -4px; }
.form-success {
  grid-column: 1 / -1; text-align: center; font-size: 0.92rem; color: #7ee0a8;
  background: rgba(52,199,123,.1); border: 1px solid rgba(52,199,123,.25);
  padding: 12px; border-radius: 10px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--black); color: rgba(255,255,255,0.62); padding: 72px 0 32px; }
.footer__inner {
  display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr 1.5fr; gap: 44px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand p { margin-top: 16px; max-width: 300px; font-size: 0.92rem; }
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
  transition: all .2s var(--ease);
}
.footer__social a svg { width: 18px; height: 18px; }
.footer__social a:hover { color: #fff; border-color: var(--blue); background: rgba(0,112,243,.15); transform: translateY(-2px); }

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { color: #fff; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.footer__col a { font-size: 0.92rem; color: rgba(255,255,255,0.62); transition: color .18s var(--ease); width: fit-content; }
.footer__col a:hover { color: #fff; }
.footer__muted { font-size: 0.92rem; color: rgba(255,255,255,0.42); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 26px; font-size: 0.85rem; color: rgba(255,255,255,0.45);
}
.footer__legal { display: flex; gap: 22px; }
.footer__legal a:hover { color: #fff; }
.footer__dev { color: rgba(255,255,255,0.68); font-weight: 500; transition: color .18s var(--ease); }
.footer__dev:hover { color: var(--blue); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .about { grid-template-columns: 1fr; gap: 36px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__actions .btn--sm { display: none; }
  .nav__toggle { display: block; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .why__features.grid--3 { grid-template-columns: 1fr; }
  .why__features li { padding: 14px 0; }
  .contact__form { grid-template-columns: 1fr; padding: 24px; }
  .field--full, .contact__form .field { grid-column: auto; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .hero { padding: 72px 0 90px; }
  .hero__trust { gap: 16px 28px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ============================================================
   Get Started page
   ============================================================ */
.gs {
  padding: 48px 0 clamp(72px, 9vw, 112px);
  background: transparent;
}
/* Inner pages: run the section's tint up behind the topbar + nav so there's
   no white seam under the floating nav — the header blends into the page. */
body:not(.home) {
  background:
    radial-gradient(72% 560px at 50% 0, var(--blue-100) 0%, transparent 74%),
    var(--bg);
  background-repeat: no-repeat;
}
.gs__crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); margin-bottom: 30px;
}
.gs__crumb a { color: var(--muted); transition: color .18s var(--ease); }
.gs__crumb a:hover { color: var(--ink); }
.gs__crumb svg { color: var(--gray-300); }
.gs__crumb span { color: var(--ink); font-weight: 500; }

.gs__head { max-width: 620px; margin-bottom: 44px; }
.gs__title { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -0.045em; margin-bottom: 16px; }
.gs__sub { font-size: 1.1rem; color: var(--muted); max-width: 540px; }

.gs__grid {
  display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 32px;
  align-items: start; margin-bottom: clamp(64px, 8vw, 104px);
}

/* ---- Form card ---- */
.gs__form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3vw, 38px);
}
.gs__form { display: grid; grid-template-columns: 1fr; gap: 18px; }
.gs__form-title { font-size: 1.35rem; letter-spacing: -0.03em; margin-bottom: 4px; }

.gs .field label { color: var(--gray-700); }
.gs .field input, .gs .field select, .gs .field textarea {
  font-family: inherit; font-size: 0.96rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 12px 14px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gs .field input::placeholder, .gs .field textarea::placeholder { color: var(--gray-400); }
.gs .field textarea { resize: vertical; min-height: 96px; }
.gs .field input:focus, .gs .field select:focus, .gs .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,112,243,.16);
}
.gs .field .opt { color: var(--gray-400); font-weight: 400; }
.select-wrap--light svg { color: var(--gray-500); }

.gs__geo { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.gs__locate { white-space: nowrap; height: 45px; }
.gs__geo-note {
  font-size: 0.85rem; color: var(--blue-700);
  background: var(--blue-100); border: 1px solid #cfe4ff;
  padding: 9px 12px; border-radius: 9px; margin-top: -4px;
}
.gs__geo-note.is-error { color: #a5341f; background: #fdeee9; border-color: #f6d3c6; }

.gs__terms {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 0.88rem; color: var(--gray-700); line-height: 1.5;
  padding: 4px 0; cursor: pointer;
}
.gs__terms input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); flex: none; cursor: pointer; }
.gs__terms a { color: var(--blue); font-weight: 500; }
.gs__terms a:hover { text-decoration: underline; }

.gs__submit { margin-top: 4px; }
.gs__submit svg { flex: none; }
.gs__form-note { font-size: 0.82rem; color: var(--muted); text-align: center; margin-top: -4px; }

/* ---- Sidebar ---- */
.gs__side { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 20px); }

.gs__summary {
  background: linear-gradient(180deg, #0f1013 0%, #17181d 100%);
  color: #fff; border-radius: var(--radius-lg); padding: 26px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-lg);
}
.gs__summary.is-pulse { animation: sumPulse .5s var(--ease); }
@keyframes sumPulse { 0% { box-shadow: 0 0 0 0 var(--blue-glow); } 100% { box-shadow: 0 0 0 10px rgba(0,112,243,0); } }
@media (prefers-reduced-motion: reduce) { .gs__summary.is-pulse { animation: none; } }
.gs__summary-tag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6db3ff; }
.gs__summary-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.04em; margin-top: 10px; }
.gs__summary-price { font-size: 1.05rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.gs__summary-speed {
  display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
  color: rgba(255,255,255,0.85); margin: 16px 0;
  padding: 10px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}
.gs__summary-speed .dot { background: #34c77b; box-shadow: 0 0 0 4px rgba(52,199,123,.18); }
.gs__summary-speed strong { color: #6db3ff; font-weight: 650; }
.gs__summary-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.gs__summary-list li { position: relative; padding-left: 24px; font-size: 0.88rem; color: rgba(255,255,255,0.78); }
.gs__summary-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(0,112,243,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236db3ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}
.gs__summary-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 500; color: #6db3ff; transition: gap .2s var(--ease); }
.gs__summary-link:hover { gap: 10px; }

.gs__trust {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px;
}
.gs__trust-tag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 8px; }
.gs__trust p { font-size: 0.92rem; color: var(--gray-700); }
.gs__trust strong { color: var(--ink); }

.gs__support { display: grid; gap: 4px; }
.gs__support-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.gs__support-row:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gs__support-row .contact__ic { background: var(--gray-100); border-color: var(--border); color: var(--blue); }
.gs__support-row strong { display: block; font-size: 0.94rem; letter-spacing: -0.02em; color: var(--ink); }
.gs__support-row small { font-size: 0.8rem; color: var(--muted); }

/* ---- Steps ---- */
.gs__steps-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.gs__steps-head .eyebrow { justify-content: center; }
.gs__steps-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step;
}
.gs__step {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gs__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.gs__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 8px 20px -8px var(--blue-glow);
}
.gs__step h3 { font-size: 1.08rem; letter-spacing: -0.03em; margin-bottom: 7px; }
.gs__step p { font-size: 0.92rem; color: var(--muted); }

@media (max-width: 960px) {
  .gs__grid { grid-template-columns: 1fr; gap: 24px; }
  .gs__side { position: static; grid-template-columns: 1fr; }
  .gs__steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .gs__geo { grid-template-columns: 1fr 1fr; }
  .gs__locate { grid-column: 1 / -1; }
  .gs__steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer division addresses
   ============================================================ */
.footer__addr { display: grid; gap: 3px; margin-bottom: 16px; }
.footer__addr strong { color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; }
.footer__addr span { font-size: 0.86rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
.footer__addr a { font-size: 0.86rem; color: rgba(255,255,255,0.62); width: fit-content; }
.footer__addr a:hover { color: #fff; }
.footer__site {
  display: inline-flex; align-items: center; gap: 5px;
  color: #6db3ff !important; font-weight: 500; font-size: 0.88rem; margin-top: 2px;
}
.footer__site:hover { color: #8fc4ff !important; }

/* ============================================================
   Generic page header (about / packages / ftp / contact)
   reuses .gs wrapper + .gs__crumb / .gs__head / .gs__title / .gs__sub
   ============================================================ */
.gs__head--center { max-width: 680px; margin-inline: auto; text-align: center; }
.gs__head--center .eyebrow { justify-content: center; }

/* section block inside a .gs page */
.gs__block { margin-bottom: clamp(56px, 7vw, 96px); }
.gs__block:last-child { margin-bottom: 0; }
.gs__block-head { max-width: 620px; margin-bottom: 40px; }

/* two-column contact layout */
.gs__contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: start; }
.gs__contact-side { display: grid; gap: 18px; }
.gs__addr-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gs__addr-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.gs__addr-card h3 { font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.gs__addr-card h3 .dot { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); }
.gs__addr-card p { font-size: 0.9rem; color: var(--gray-700); line-height: 1.55; }
.gs__addr-card a { color: var(--blue); font-weight: 500; font-size: 0.9rem; }
.gs__addr-card a:hover { text-decoration: underline; }
.gs__addr-meta { margin-top: 10px; display: grid; gap: 3px; }

/* about values / stats reuse .grid + .card */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: clamp(56px, 7vw, 88px); }
.about-story img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
.about-story h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); letter-spacing: -0.04em; margin-bottom: 14px; }
.about-story p { color: var(--gray-700); margin-top: 14px; }

/* ============================================================
   FTP / media server page
   ============================================================ */
.ftp-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--blue-100); border: 1px solid #cfe4ff; border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 40px;
}
.ftp-note svg { flex: none; color: var(--blue); width: 22px; height: 22px; margin-top: 1px; }
.ftp-note p { font-size: 0.92rem; color: var(--blue-700); }
.ftp-note strong { color: var(--blue-700); }

.ftp-card { display: flex; flex-direction: column; }
.ftp-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ftp-card h3 { font-size: 1.1rem; letter-spacing: -0.03em; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--gray-500); }
.status .dot { width: 7px; height: 7px; }
.status--up { color: #16794c; }
.status--up .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.status--soon { color: var(--gray-500); }
.status--soon .dot { background: var(--gray-400); box-shadow: 0 0 0 3px var(--gray-200); }
.ftp-card p.ftp-desc { color: var(--muted); font-size: 0.92rem; margin: 6px 0 14px; }
.ftp-meta { margin-top: auto; display: grid; gap: 0; }
.ftp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.85rem; padding: 9px 0; border-top: 1px solid var(--border); }
.ftp-row span { color: var(--muted); }
.ftp-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem; color: var(--blue); background: var(--gray-100);
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border);
}

/* FAQ (packages page) */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 550; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 4px 22px; color: var(--muted); font-size: 0.96rem; max-width: 720px; }

/* In-card feature list (services page) */
.svc-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; position: relative; }
.svc-list li { position: relative; padding-left: 24px; font-size: 0.9rem; color: var(--gray-700); }
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070f3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
/* Business hours (contact page) */
.hours { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 0; }
.hours li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.hours li:first-child { border-top: 0; }
.hours span { color: var(--gray-700); }
.hours strong { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.hours strong.closed { color: #b4341f; }

.svc-card { display: flex; flex-direction: column; }
.svc-price { margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
.svc-price strong { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .gs__contact { grid-template-columns: 1fr; gap: 24px; }
  .about-story { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Ghost button + SelfCare portal link
   ============================================================ */
.btn--ghost {
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--ink);
  transform: translateY(-1px);
}
.nav__portal { gap: 7px; }
.nav__portal svg { opacity: 0.85; }

/* ============================================================
   Happy clients — logo wall
   ============================================================ */
.clients__grid {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  align-items: center;
}
.clients__logo {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.clients__logo:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.clients__logo img {
  max-height: 42px; width: auto; max-width: 100%;
  opacity: 0.65; filter: grayscale(1);
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.clients__logo:hover img { opacity: 1; filter: grayscale(0); }
@media (max-width: 860px) { .clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .clients__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ============================================================
   Payment methods strip (above footer)
   ============================================================ */
.payments {
  background: var(--black);
  padding: 18px 0;
}
.payments__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.payments__scroll::-webkit-scrollbar { display: none; }
.payments__img {
  width: 100%;
  max-width: 1120px;
  height: auto;
  margin-inline: auto;
}
@media (max-width: 720px) {
  .payments { padding: 30px 0; }
  .payments__img { min-width: 660px; }
}

/* ============================================================
   Legal / Terms pages
   ============================================================ */
.legal { max-width: 780px; }
.legal__item { padding: 24px 0; border-top: 1px solid var(--border); }
.legal__item:first-child { border-top: none; padding-top: 8px; }
.legal__item h2,
.legal__contact h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.2rem; font-weight: 650; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: 12px;
}
.legal__num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-size: 0.9rem; font-weight: 650;
  color: var(--blue-700); background: var(--blue-100); border: 1px solid #cfe4ff;
}
.legal__item p,
.legal__contact p { color: var(--muted); line-height: 1.75; font-size: 1rem; }
.legal__item p + p { margin-top: 12px; }
.legal a { color: var(--blue); font-weight: 500; }
.legal a:hover { text-decoration: underline; }
.legal__contact {
  margin-top: 32px; padding: 28px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--gray-50);
}
.legal__contact h2 { margin-bottom: 10px; }

/* ============================================================
   BTRC approved tariff table
   ============================================================ */
.btrc {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  padding: clamp(14px, 2.2vw, 26px);
}
.btrc__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.btrc__img {
  width: 100%;
  max-width: 780px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}
@media (max-width: 640px) {
  .btrc__img { min-width: 560px; }
}

/* ============================================================
   Hero — premium enhancements
   ============================================================ */
/* Single electric-blue accent word */
.hero__grad {
  color: #2b8cff;
  text-shadow: 0 0 34px rgba(43,140,255,0.45);
}

/* Quiet secondary button (text + arrow) */
.btn--quiet {
  background: transparent; color: rgba(255,255,255,0.9);
  border-color: transparent; padding-inline: 12px;
}
.btn--quiet:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.btn--quiet svg { transition: transform .2s var(--ease); }
.btn--quiet:hover svg { transform: translateX(3px); }

/* Fine film grain for a cinematic finish */
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__aurora { animation: none; }
}

/* Network Intelligence glass panel — minimal dark translucent glass */
.hero__panel {
  position: relative; flex: none;
  width: 362px; padding: 26px;
  border-radius: 26px;
  background:
    radial-gradient(58% 52% at 14% -2%, rgba(74,152,255,0.22), transparent 72%),
    linear-gradient(155deg, rgba(14,20,34,0.34) 0%, rgba(8,12,22,0.30) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 34px 84px -32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.2);
  backdrop-filter: blur(9px) saturate(135%); -webkit-backdrop-filter: blur(9px) saturate(135%);
  color: #fff;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  animation: panelIn 1s var(--ease) 0.3s both;
}
.hero__panel:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 42px 92px -32px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.12);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.hero__panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.hero__panel-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.hero__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; color: rgba(255,255,255,0.85); }
.hero__live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d17d;
  box-shadow: 0 0 0 0 rgba(52,209,125,0.5);
  animation: livePulse 1.9s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,209,125,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(52,209,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,209,125,0); }
}

.hero__metric-num { font-size: 3.3rem; font-weight: 750; letter-spacing: -0.05em; line-height: 1; text-shadow: 0 0 26px rgba(90,165,255,0.28); }
.hero__metric-num span { font-size: 1.25rem; font-weight: 500; color: rgba(255,255,255,0.58); margin-left: 8px; letter-spacing: -0.02em; }
.hero__metric-label { font-size: 13.5px; color: rgba(255,255,255,0.55); margin-top: 8px; }

.hero__graph { margin: 20px 0 2px; height: 78px; }
.hero__graph svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hero__graph-grid { stroke: rgba(255,255,255,0.14); stroke-width: 1; stroke-dasharray: 2 5; }
.hero__graph-line {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: graphDraw 2.6s var(--ease) 0.5s forwards;
}
@keyframes graphDraw { to { stroke-dashoffset: 0; } }
.hero__graph-area { opacity: 0; animation: graphArea 1.4s var(--ease) 1.7s forwards; }
@keyframes graphArea { to { opacity: 1; } }
.hero__graph-packet { opacity: 0; filter: drop-shadow(0 0 5px rgba(160,210,255,0.95)); animation: graphPacket 3.6s linear 2.4s infinite; }
@keyframes graphPacket { 0% { opacity: 0; } 6% { opacity: 1; } 78% { opacity: 1; } 86%,100% { opacity: 0; } }
.hero__graph-dot { filter: drop-shadow(0 0 5px rgba(143,196,255,0.8)); animation: graphDot 2.2s ease-in-out 3.1s infinite; }
@keyframes graphDot { 0%,100% { opacity: 0.55; r: 3.2; } 50% { opacity: 1; r: 4.2; } }
.hero__graph-ping { transform-box: fill-box; transform-origin: center; animation: graphPing 2.6s ease-out 3.1s infinite; }
@keyframes graphPing { 0% { r: 3.2; opacity: 0.6; } 70%,100% { r: 13; opacity: 0; } }

.hero__panel-foot {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10);
}
.hero__panel-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hero__panel-stat strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.hero__panel-stat span { font-size: 12px; color: rgba(255,255,255,0.5); }
.hero__foot-div { width: 1px; align-self: stretch; background: rgba(255,255,255,0.12); }
.hero__panel-stat--icon { flex-direction: row; align-items: center; gap: 11px; }
.hero__panel-stat--icon svg { width: 24px; height: 24px; color: rgba(255,255,255,0.9); flex: none; }
.hero__panel-stat--icon span { font-size: 0.98rem; font-weight: 500; color: rgba(255,255,255,0.9); }

@media (prefers-reduced-motion: reduce) {
  .hero__panel { animation: none; }
  .hero__live-dot, .hero__graph-dot, .hero__graph-ping { animation: none; }
  .hero__graph-packet { animation: none; opacity: 0; }
  .hero__graph-area { animation: none; opacity: 1; }
  .hero__graph-line { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 1040px) {
  .hero__content { display: block; }
  .hero__copy { max-width: 640px; }
  .hero__panel { display: none; }
}