@font-face {
  font-family: "Mona Sans";
  src: url(../fonts/mona-sans-latin-var.woff2) format("woff2");
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Web";
  src: url(../fonts/jetbrains-mono-latin-var.woff2) format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --ink: #0f1417;
  --ink-2: #161d21;
  --ink-3: #1d262b;
  --graphite: #2c3134;
  --paper: #f2f5f5;
  --paper-2: #e7eced;
  --white: #fff;

  --fg-dark: #0e1a20;
  --fg-dark-2: #475e69;
  --fg-light: #e9f1f4;
  --fg-light-2: #93a8b2;

  --brand-900: #304d5b;
  --brand-700: #4c7c92;
  --brand-500: #7fafc5;
  --brand-300: #afcddb;

  --wifi-field: #609cb8;
  --vpn-field: #72ba8a;
  --wifi: #74b6d8;      /* on dark */
  --vpn: #84cf9e;       /* on dark */
  --wifi-ink: #1f6f96;  /* on light */
  --vpn-ink: #1d6f41;   /* on light */
  --ok: #7fd49b;
  /* the four example networks */
  --office: #74b6d8;  --office-ink: #1f6f96;
  --guest: #84cf9e;   --guest-ink: #1d6f41;
  --team: #e7c07c;    --team-ink: #7a5a12;
  --iot: #b4a3ee;     --iot-ink: #5a46a8;
  --warn: #e9b864;
  --bad: #e2715f;

  --line-dark: rgba(175, 205, 219, .14);
  --line-light: rgba(14, 26, 32, .10);

  --sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono Web", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --nav-h: 64px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--fg-light);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 420;
  font-feature-settings: "ss01" on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
code, pre, kbd, samp { font-family: var(--mono); font-size: 1em; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
::selection { background: var(--brand-300); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.1em; height: 1.1em; flex: none; fill: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--wifi); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* themes */
.theme-dark  { background: var(--ink);   color: var(--fg-light); }
.theme-light { background: var(--paper); color: var(--fg-dark); }
.theme-white { background: var(--white); color: var(--fg-dark); }

/* type */
.h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 640; font-stretch: 108%; text-wrap: balance;
}
.h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 620; font-stretch: 106%; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.24rem); line-height: 1.5; max-width: 40em; text-wrap: pretty; }
.theme-dark .lead { color: #bcccd4; }
.theme-light .lead, .theme-white .lead { color: var(--fg-dark-2); }
.fine { font-size: .84rem; color: var(--fg-dark-2); line-height: 1.45; }
.fine--dark { color: var(--fg-light-2); }
.kicker, .eyebrow {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  display: block; margin-bottom: 1.4rem;
}
.kicker::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: .7em; background: currentColor; opacity: .5; }
.theme-dark .kicker, .theme-dark .eyebrow { color: var(--fg-light-2); }
.theme-light .kicker, .theme-white .kicker { color: var(--fg-dark-2); }
.kicker--wifi { color: var(--wifi-ink) !important; }
.kicker--vpn { color: var(--vpn-ink) !important; }
.c-guest { color: var(--guest); }
.c-office { color: var(--office); }
.c-iot { color: var(--iot); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(127, 212, 155, .18); }
.dot--wifi { background: var(--wifi); }
.dot--vpn { background: var(--vpn); }

/* buttons */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: var(--h); padding: 0 1.25em; border-radius: 999px; border: 1px solid transparent; background-color: transparent;
  font-weight: 580; font-size: .98rem; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.btn .i { transition: transform .35s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--sm { --h: 38px; font-size: .9rem; padding: 0 1.05em; }
.btn--lg { --h: 54px; font-size: 1.04rem; padding: 0 1.55em; }
.btn--block { width: 100%; }
.btn--primary { background: var(--fg-light); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px -12px rgba(116,182,216,.55); }
.btn--primary:hover { background: #fff; }
.theme-light .btn--primary, .theme-white .btn--primary { background: var(--ink); color: var(--fg-light); box-shadow: none; }
.theme-light .btn--primary:hover { background: #000; }
.btn--ghost { background-color: transparent; border-color: rgba(233, 241, 244, .32); color: var(--fg-light); }
.btn--ghost:hover { border-color: rgba(233, 241, 244, .5); background: rgba(233,241,244,.05); }
.btn--ghost:hover .i { transform: translateY(2px); }
.btn--dark { background: var(--ink); color: var(--fg-light); }
.btn--dark:hover { background: #000; }
.btn--vpn { background: var(--vpn); color: var(--ink); }
.btn--vpn:hover { background: #9ee0b3; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.linkbtn { display: inline-flex; gap: .4em; align-items: center; background: none; border: 0; padding: 0; font-size: .86rem; color: var(--fg-dark-2); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--ease-out); border-bottom: 1px solid transparent; color: var(--fg-light); }
.nav.is-scrolled { background: rgba(15, 20, 23, .72); border-bottom-color: var(--line-dark); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
.nav[data-over="light"].is-scrolled { background: rgba(242, 245, 245, .78); border-bottom-color: var(--line-light); color: var(--fg-dark); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.nav__brand { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; position: relative; flex: none; }
.logo, .logo img, .nav__product { flex: none; }
.logo { display: inline-flex; align-items: center; gap: 9px; transition: opacity .3s; }
.logo img:first-child { width: 28px; height: 28px; }
.logo img:last-child { width: 62px; height: auto; }
.logo--light-bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.nav[data-over="light"].is-scrolled .logo--dark-bg { opacity: 0; }
.nav[data-over="light"].is-scrolled .logo--light-bg { opacity: 1; }
.nav__product { font-family: var(--mono); font-size: .86rem; font-weight: 500; opacity: .75; margin-left: 3px; transform: translateY(1px); }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: .92rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; opacity: .78; transition: opacity .2s, background-color .2s; }
.nav__links a:hover { opacity: 1; background: rgba(127, 175, 197, .12); }
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-current { opacity: 1; position: relative; }
.nav__links a.is-current::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.menu a.is-current { color: var(--guest); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav .btn--primary { box-shadow: none; }
.nav[data-over="light"].is-scrolled .btn--primary { background: var(--ink); color: var(--fg-light); }
.nav__menu { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; border-color: rgba(127,175,197,.35); background: none; position: relative; }
.nav__menu i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out); }
.nav__menu i:first-of-type { top: 15px; } .nav__menu i:last-of-type { top: 23px; }
.nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.menu { position: absolute; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; background: #0f1417; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 10px var(--gut) 24px; border-bottom: 1px solid var(--line-dark); color: var(--fg-light); }
.menu nav { display: grid; }
.menu[hidden] { display: none; }
.menu a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; font-size: 1.15rem; font-weight: 560; }
@media (max-width: 1100px) { .nav__links { display: none; } .nav__menu { display: block; } .nav__actions { margin-left: auto; } }
.menu__cta { margin-top: 18px; justify-self: start; display: none; }
@media (max-width: 420px) { .nav__inner { gap: 12px; } .nav .btn--sm { padding: 0 .8em; font-size: .8rem; --h: 34px; } .nav__menu { width: 36px; height: 36px; } .nav__menu i:first-of-type { top: 13px; } .nav__menu i:last-of-type { top: 21px; } }
@media (max-width: 359px) { .nav__actions .btn { display: none; } .menu__cta { display: inline-flex; } }

/* perforation texture (the node's vent pattern) */
.perf { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(175, 205, 219, .17) 1.05px, transparent 1.6px); background-size: 15px 15px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000, transparent 72%); }
.perf--final { -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 55%, #000, transparent 75%); mask-image: radial-gradient(ellipse 50% 60% at 50% 55%, #000, transparent 75%); }

/* ==========================================================================
   Stage primitives (SVG + positioned HTML tags)
   ========================================================================== */
.stage { position: relative; }
.stage__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tags { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(15, 20, 23, .72); border: 1px solid var(--line-dark); color: var(--fg-light);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tag .i { width: 14px; height: 14px; }
.tag small { font-size: 10.5px; opacity: .7; margin-left: .3em; }
.tag--muted { color: var(--fg-light-2); border-style: dashed; }
.tag--label { background: none; border: 0; color: var(--fg-light-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tag--cloud { border-color: rgba(233, 241, 244, .28); }
.tag--node { background: var(--fg-light); color: var(--ink); border: 0; font-weight: 600; }
.tag--vpn { border-color: rgba(132, 207, 158, .45); color: #c9f0d6; }
.tag--wifi { border-color: rgba(116, 182, 216, .45); color: #cfe9f6; }
.tag--dim { opacity: .6; }
.tag--ok { color: #c9f0d6; border-color: rgba(127, 212, 155, .5); }
.tag--sm { font-size: 10.5px; padding: 5px 8px; }

.ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln--cloud { stroke: rgba(233, 241, 244, .45); stroke-width: 1.4; stroke-dasharray: 2 7; }
.ln--vpn { stroke: var(--vpn); stroke-width: 2.2; }
.ln--dim { opacity: .45; stroke-width: 1.6; }
.ln--dash { stroke-dasharray: 7 7; stroke-width: 1.8; }
.rings circle { fill: none; stroke: var(--wifi); stroke-width: 1.5; }
.pkt { fill: #d9f7e3; }
.pkt--cloud { fill: #e9f1f4; }


/* ==========================================================================
   Badges: what is available today, in development, planned
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: .45em; padding: 3px 9px; border-radius: 999px; font-family: var(--mono); font-size: .72em; letter-spacing: .04em; font-weight: 500; line-height: 1.5; vertical-align: .12em; white-space: nowrap; }
.badge--dev { border: 1px dashed currentColor; color: inherit; opacity: .92; }
.badge--dev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--team); box-shadow: 0 0 0 0 rgba(231,192,124,.6); animation: devPulse 2.4s infinite; }
.badge--planned { border: 1px dotted currentColor; color: inherit; opacity: .92; }
.badge--planned::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.badge--today { background: rgba(132,207,158,.16); color: var(--guest-ink); }
.theme-dark .badge--today, .card--dark .badge--today, .org--live .badge--today { color: var(--guest); }
.badge--today::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--fit { border: 1px solid var(--line-light); color: var(--fg-dark-2); }
@keyframes devPulse { 0% { box-shadow: 0 0 0 0 rgba(231,192,124,.55); } 70% { box-shadow: 0 0 0 7px rgba(231,192,124,0); } 100% { box-shadow: 0 0 0 0 rgba(231,192,124,0); } }
.kicker--plain::before { display: none; }

/* network chips */
.net { display: inline-flex; align-items: center; gap: .45em; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-light); color: var(--fg-dark-2); background: rgba(255,255,255,.6); transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease-out); white-space: nowrap; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b9c6cc; transition: background-color .4s; }
.theme-dark .net, .site .net { background: rgba(15,20,23,.55); border-color: var(--line-dark); color: var(--fg-light-2); }
.net--office.on::before { background: var(--office); } .net--guest.on::before { background: var(--guest); } .net--team.on::before { background: var(--team); } .net--iot.on::before { background: var(--iot); }
.net.on { color: var(--fg-dark); border-color: transparent; }
.net--office.on { background: rgba(116,182,216,.22); } .net--guest.on { background: rgba(132,207,158,.24); } .net--team.on { background: rgba(231,192,124,.28); } .net--iot.on { background: rgba(180,163,238,.26); }
.theme-dark .net.on, .site .net.on { color: var(--fg-light); }

/* ==========================================================================
   Home hero: real photo, four separate networks leave the node
   ========================================================================== */
.hero { position: relative; min-height: 100svh; padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) 0 clamp(40px, 6vh, 72px); overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--ink)); pointer-events: none; z-index: -1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100svh - var(--nav-h) - 120px); }
.hero__title { font-size: clamp(2.2rem, 3.9vw, 3.45rem); line-height: 1; letter-spacing: -.048em; font-weight: 660; font-stretch: 104%; margin-bottom: 1.6rem; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: inline-block; }
.nowrap { white-space: nowrap; }
@media (max-width: 600px) { .hero__title { font-size: min(2.2rem, calc((100vw - 40px) / 10.6)); } .hero__title .line > .nowrap { white-space: normal; } }
.hero__lead { font-size: clamp(1.04rem, 1.25vw, 1.2rem); line-height: 1.52; color: #bccbd3; max-width: 31em; margin-bottom: 2rem; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.6rem; }
.hero__note { display: inline-flex; align-items: center; gap: .6em; font-size: .92rem; color: var(--fg-light-2); }
.js [data-hero-in] { opacity: 0; transform: translateY(14px); }
.js [data-hero-line] { transform: translateY(105%); }
.js .hero.is-in [data-hero-in] { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .hero.is-in [data-hero-line] { transform: none; transition: transform 1.1s var(--ease-out); }
.js .hero.is-in [data-hero-in]:nth-child(3) { transition-delay: .28s; }
.js .hero.is-in [data-hero-in]:nth-child(4) { transition-delay: .38s; }
.js .hero.is-in [data-hero-in]:nth-child(5) { transition-delay: .48s; }
.js .hero.is-in .line:nth-child(2) [data-hero-line] { transition-delay: .09s; }

.hstage { position: relative; margin: 0; }
.hstage__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #1b2226; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04); }
.hstage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 34% 62%; }
.hstage__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,16,0) 45%, rgba(10,14,16,.38)); pointer-events: none; }
.hstage__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.hstage .tags { z-index: 2; }
.lane { fill: none; stroke-linecap: round; stroke-width: 3; }
.lane--under { stroke: rgba(8,12,14,.45); stroke-width: 7; }
.lane--office { stroke: var(--office); } .lane--guest { stroke: var(--guest); } .lane--team { stroke: var(--team); } .lane--iot { stroke: var(--iot); }
.lane--cloud { stroke: rgba(255,255,255,.9); stroke-width: 2; stroke-dasharray: 2 8; }
.pk--office { fill: var(--office); } .pk--guest { fill: var(--guest); } .pk--team { fill: var(--team); } .pk--iot { fill: var(--iot); } .pk--cloud { fill: #fff; }
.pk--office, .pk--guest, .pk--team, .pk--iot { stroke: rgba(8,12,14,.5); stroke-width: 1.5; }
.tag--net { display: grid; grid-template-columns: auto auto; column-gap: 7px; row-gap: 3px; align-items: center; padding: 7px 12px 7px 10px; font-size: 12.5px; border-radius: 12px; transform: translate(0, -50%); transform-origin: left center; }
.tag--net small { grid-column: 2; margin-left: 0; font-size: 10px; }
@media (max-width: 1280px) { .tag--net small { display: none; } }
.tag--net .dot { width: 9px; height: 9px; }
.tag--office .dot { background: var(--office); } .tag--guest .dot { background: var(--guest); } .tag--team .dot { background: var(--team); } .tag--iot .dot { background: var(--iot); }
.tag--office { border-color: rgba(116,182,216,.6); } .tag--guest { border-color: rgba(132,207,158,.6); } .tag--team { border-color: rgba(231,192,124,.6); } .tag--iot { border-color: rgba(180,163,238,.6); }
.credit { position: absolute; right: 14px; bottom: 10px; z-index: 3; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.credit--static { position: static; text-shadow: none; color: var(--fg-dark-2); }
.hstage__credit { margin-top: 8px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--fg-light-2); }
.hstage__sites { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.hsite { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-light-2); padding: 6px 10px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,.02); transition: border-color .4s, color .4s; }
.hsite .i { width: 13px; height: 13px; }
.hsite i { width: 7px; height: 7px; border-radius: 50%; background: #2c3a41; transition: background-color .35s, transform .45s var(--ease-out); }
.hsite i:nth-of-type(1).on { background: var(--office); } .hsite i:nth-of-type(2).on { background: var(--guest); } .hsite i:nth-of-type(3).on { background: var(--team); } .hsite i:nth-of-type(4).on { background: var(--iot); }
.hsite i.on { transform: scale(1.15); }
.hsite.on { color: var(--fg-light); border-color: rgba(233,241,244,.28); }
.hstage__cap { text-align: center; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-light-2); }
.js .hstage:not(.is-ready) { visibility: hidden; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
}
@media (max-width: 560px) {
  .tag { font-size: 10px; padding: 5px 8px; }
  .tag--net small { display: none; }
  .tag .i { width: 12px; height: 12px; }
  .hstage__frame { border-radius: 18px; }
  .hsite { font-size: 10.5px; padding: 5px 8px; }
}

/* ==========================================================================
   Sub-page hero and split layout
   ========================================================================== */
.phero { position: relative; padding: calc(var(--nav-h) + clamp(48px, 9vh, 110px)) 0 clamp(64px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.phero--compact { padding-bottom: clamp(40px, 6vw, 72px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.phero__copy--wide { max-width: 50rem; }
.phero__title { font-size: clamp(2.2rem, 3.7vw, 3.6rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 660; font-stretch: 104%; margin-bottom: 1.4rem; text-wrap: balance; }
.phero .lead { margin-bottom: 1.6rem; }
.lead--strong { color: var(--fg-light) !important; font-weight: 560; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--rev .split__head { order: 2; }
.split__head { margin-bottom: 0; }
.split__head .hero__cta { margin-top: 1.6rem; }
.subhead { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 620; letter-spacing: -.02em; margin: clamp(56px, 8vw, 96px) 0 22px; }
@media (max-width: 960px) {
  .phero__grid, .split { grid-template-columns: 1fr; }
  .split--rev .split__head { order: 0; }
}

/* ==========================================================================
   Real console screens in a window frame
   ========================================================================== */
.shot { margin: 0; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 40px 80px -40px rgba(8,12,14,.55), 0 0 0 1px rgba(14,26,32,.08); background: #fff; }
.shot--dark { background: #0b0d0f; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; font-family: var(--mono); font-size: 11px; color: #4f6068; border-bottom: 1px solid rgba(14,26,32,.08); background: #f6f8f8; }
.shot--dark .shot__bar { background: #15191c; border-bottom-color: rgba(255,255,255,.06); color: #7f9098; }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dde0; }
.shot--dark .shot__bar i { background: #2b3338; }
.shot__bar span { margin-left: 8px; }
.shot__img { position: relative; }
.shot__img img { width: 100%; height: auto; display: block; }
.shot__cap { padding: 10px 14px 12px; font-size: .84rem; color: var(--fg-light-2); background: #0f1316; border-top: 1px solid rgba(255,255,255,.06); }
.shot--light .shot__cap { background: #f6f8f8; color: var(--fg-dark-2); border-top-color: rgba(14,26,32,.08); }
.shot--wide { max-width: 1100px; }
.hl { position: absolute; left: 1.4%; width: 97.2%; top: calc(var(--t) * 1% - 4.3%); height: 8.6%; border-radius: 8px; border: 2px solid; pointer-events: none; }
.hl--guest { border-color: var(--guest-ink); background: rgba(132,207,158,.16); }
.hl--office { border-color: var(--office-ink); background: rgba(116,182,216,.14); }
.hl--team { border-color: #b7892e; background: rgba(231,192,124,.18); }
.hl--iot { border-color: var(--iot-ink); background: rgba(180,163,238,.18); }
.hl--all { top: 38%; height: 57%; border-color: #2c3134; background: rgba(44,49,52,.05); }
/* ==========================================================================
   How it works (colour-field chameleon)
   ========================================================================== */
.how { --how-bg: var(--graphite); --how-fg: var(--fg-light); --how-fg-2: rgba(233,241,244,.86); position: relative; color: var(--how-fg); isolation: isolate; }
.how__bg { position: absolute; inset: 0; background: var(--how-bg); z-index: -1; }
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.how__intro { padding-top: clamp(96px, 16vh, 160px); }
.how__intro .kicker { color: var(--how-fg-2); }
.how__intro .h2 em { font-style: normal; opacity: .6; }
.how__list { counter-reset: s; }
.how__step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem; transition: opacity .5s; }
.how__step:last-child { min-height: 100vh; }
.how__num { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--how-fg-2); margin-bottom: 1rem; display: block; }
.how__step h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 640; font-stretch: 106%; margin-bottom: 1rem; }
.how__step p { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--how-fg-2); }
.how__stickywrap { position: sticky; top: 0; height: 100vh; height: 100svh; align-self: start; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); padding-bottom: 24px; }
.how__stage { width: 100%; margin: 0; }
.how__stage .ln--ink { stroke: var(--how-fg); stroke-width: 1.6; opacity: .75; }
.how__stage .ln--bold { stroke-width: 2.6; opacity: .95; }
.how__stage .ln--thin { stroke-width: 1.3; opacity: .55; }
.how__stage .ln--wg { stroke: var(--how-fg); stroke-width: 1.7; stroke-dasharray: 6 7; opacity: .85; }
.how__stage .pkt--ink, .how__stage .pkt { fill: var(--how-fg); }
.how__stage .rings--ink circle { stroke: var(--how-fg); stroke-width: 1.4; }
.how__stage [data-layer] { transition: none; }
.tag--ink { background: color-mix(in srgb, var(--how-bg) 70%, transparent); color: var(--how-fg); border-color: color-mix(in srgb, var(--how-fg) 30%, transparent); }
.tag--ink .dot { background: var(--how-fg); }
.tag--soft { opacity: .7; }
.plug { font-size: 13px; line-height: 1; }
.how__progress { display: flex; gap: 6px; margin-top: 48px; justify-content: center; }
.how__progress i { width: 26px; height: 3px; border-radius: 3px; background: var(--how-fg); opacity: .22; transition: opacity .4s, width .4s var(--ease-out); }
.how__progress i.on { opacity: .9; width: 44px; }
.no-js .how__stage [data-layer] { opacity: 1; }
@media (max-width: 900px) {
  .how__grid { grid-template-columns: 1fr; }
  .how__steps { display: contents; }
  .how__intro { grid-row: 1; padding-top: 88px; padding-bottom: 12px; }
  .how__stickywrap { grid-row: 2; top: var(--nav-h); height: auto; padding: 4px 0 10px; z-index: 2; background: var(--how-bg); margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .how__stickywrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--how-bg), transparent); pointer-events: none; }
  .how__list { grid-row: 3; position: relative; z-index: 1; }
  .how__stage { max-width: 520px; margin: 0 auto; width: 100%; }
  .how__step { min-height: 62vh; justify-content: center; }
  .how__step:first-child { margin-top: -6vh; }
  .how__step:last-child { min-height: 62vh; padding-bottom: 12vh; }
  .how__progress { margin-top: 2px; }
  .how__stage .tag small { display: none; }
}

/* floating effect cards next to the screen in the colour-field section */
.how__stage { position: relative; aspect-ratio: auto; }
.how__stage .shot { position: relative; z-index: 1; }
.fx { position: absolute; z-index: 2; right: -14px; bottom: -34px; min-width: 210px; padding: 13px 14px; border-radius: 14px; background: rgba(15,20,23,.88); color: var(--fg-light); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; gap: 6px; font-size: .86rem; }
.fx__k { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-light-2); }
.fx b { font-size: 1.05rem; font-weight: 640; }
.fx small { color: var(--fg-light-2); }
.fx em { justify-self: start; font-style: normal; font-weight: 600; font-size: .8rem; background: var(--fg-light); color: var(--ink); padding: 5px 12px; border-radius: 9px; }
.fx__row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.fx__row code { font-family: var(--mono); font-size: .72rem; color: var(--fg-light-2); }
.fx__row.is-off { color: #f0a092; } .fx__row.is-off code { color: #f0a092; }
.fx__icons { display: flex; gap: 10px; color: var(--iot); } .fx__icons .i { width: 26px; height: 26px; }
.fx .ok { color: var(--guest); }
.fx--sites .fx__row { grid-template-columns: auto 1fr auto; }
@media (max-width: 900px) { .fx { right: 8px; bottom: -22px; min-width: 0; font-size: .78rem; padding: 10px 12px; } .fx b { font-size: .95rem; } }

/* ==========================================================================
   Generic section + cards
   ========================================================================== */
.sec { position: relative; padding: clamp(88px, 13vw, 168px) 0; overflow: clip; }
.sec__head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 52rem; }
.sec__head .h2 { margin-bottom: 1.1rem; }
.card { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line-light); padding: clamp(22px, 3vw, 36px); box-shadow: 0 1px 0 rgba(14,26,32,.02), 0 30px 60px -40px rgba(14,26,32,.25); position: relative; overflow: hidden; }
.card--dark { background: var(--ink); color: var(--fg-light); border-color: transparent; }
.card__head { margin-bottom: 26px; }
.card__head h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 620; margin: 14px 0 10px; }
.card__head p { color: var(--fg-dark-2); max-width: 34em; }
.card--dark .card__head p { color: var(--fg-light-2); }
.card__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.card__head--row h3 { margin-bottom: 0; }
.chip { display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; font-weight: 500; }
.chip--wifi { background: rgba(96, 156, 184, .14); color: var(--wifi-ink); }
.chip--vpn { background: rgba(114, 186, 138, .16); color: var(--vpn-ink); }
.chip--vpn-dark { background: rgba(132, 207, 158, .13); color: var(--vpn); }

.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* switch */
.switch { --w: 44px; width: var(--w); height: 26px; border-radius: 999px; border: 0; background: #cfd9dd; position: relative; transition: background-color .3s; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .35s var(--ease-out); }
.switch[aria-checked="true"] { background: var(--wifi-field); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch--dark { background: #33434b; }
.switch--dark[aria-checked="true"] { background: var(--vpn); }

/* ==========================================================================
   Home · Airfy cloud: one console, every site follows
   ========================================================================== */
.cloud-sec { background: radial-gradient(120% 70% at 50% 0%, #17232a, var(--ink) 60%); }
.cloud-sec .perf { -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 12%, #000, transparent 70%); mask-image: radial-gradient(ellipse 70% 40% at 50% 12%, #000, transparent 70%); }
.cloud { position: relative; }
.cloud__shot { max-width: 920px; margin: 0 auto; z-index: 1; }
.cloud__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.cloud__wires path { fill: none; stroke: rgba(175,205,219,.22); stroke-width: 1.4; }
.cloud__wires path.hot { stroke: rgba(233,241,244,.6); }
.cloud__wires circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(233,241,244,.9)); }
.cloud__actions { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cloud__msg { font-size: .9rem; color: var(--fg-light-2); min-height: 1.4em; }
.site__nets { display: flex; flex-wrap: wrap; gap: 5px; }
.site__nets .net { font-size: .64rem; padding: 3px 7px; }
.site.pulse { border-color: rgba(233,241,244,.6); }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(48px, 7vw, 80px); }
.facts3 li { border-top: 1px solid var(--line-dark); padding-top: 16px; display: grid; gap: 6px; }
.facts3 b { font-weight: 620; font-size: 1.05rem; }
.facts3 span { color: var(--fg-light-2); }
@media (max-width: 760px) { .facts3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home · who does what, tunnel line
   ========================================================================== */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.role { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); }
.role__i { width: 30px; height: 30px; color: var(--office-ink); margin-bottom: 18px; }
.role h3 { font-size: 1.25rem; font-weight: 640; letter-spacing: -.015em; margin-bottom: 8px; }
.role p { color: var(--fg-dark-2); }
.role--accent { background: var(--ink); color: var(--fg-light); border-color: transparent; }
.role--accent p { color: var(--fg-light-2); } .role--accent .role__i { color: var(--guest); }
.tline { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: .4em .8em; align-items: center; padding: 16px 20px; border-radius: 14px; border: 1px dashed rgba(14,26,32,.2); color: var(--fg-dark-2); }
.tline > .i { color: var(--fg-dark); }
.tline a { color: var(--fg-dark); font-weight: 600; text-decoration: none; display: inline-flex; gap: .3em; align-items: center; }
.tline a:hover .i { transform: translateX(3px); } .tline a .i { transition: transform .3s var(--ease-out); }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } }

.inuse { margin: clamp(56px, 8vw, 96px) auto 0; position: relative; max-width: 820px; }
.inuse img { width: 100%; height: auto; border-radius: 22px; }
.inuse figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .86rem; color: var(--fg-dark-2); }
.inuse figcaption .credit--static { font-family: var(--mono); font-size: .76rem; }

.qa__tag--dev { background: rgba(231,192,124,.24); color: #7a5a12; }

.cta-band { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* site cards */
.sites { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 20px); margin-top: 72px; position: relative; z-index: 1; }
@media (max-width: 860px) { .sites { grid-template-columns: repeat(2, 1fr); margin-top: 56px; } .site__ov { padding: 10px; } }
.site { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3); border: 1px solid var(--line-dark); transition: border-color .4s, transform .6s var(--ease-out); }
.site img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.site:hover img { transform: scale(1.06); }
.site::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,23,.1) 30%, rgba(15,20,23,.88)); pointer-events: none; }
.site__ov { position: absolute; inset: auto 0 0; padding: 14px; z-index: 1; }
.site__name { font-weight: 640; font-size: 1.05rem; line-height: 1.1; margin-bottom: 10px; }
.site__name small { display: block; font-weight: 450; font-size: .82rem; color: var(--fg-light-2); margin-top: 2px; }
.site__kv { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px; justify-content: start; font-size: .78rem; margin-bottom: 10px; }
.site__kv dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-light-2); }
.site__kv dd { display: flex; align-items: center; gap: 5px; font-weight: 560; }
.site__kv .dot { width: 6px; height: 6px; box-shadow: none; }
.site__cfg { font-family: var(--mono); font-size: .7rem; letter-spacing: .02em; color: var(--fg-light-2); padding: 6px 8px; border-radius: 8px; background: rgba(15,20,23,.6); border: 1px solid var(--line-dark); transition: color .3s, border-color .3s, background-color .3s; }
.site.pulse { border-color: rgba(132,207,158,.8); }
.site.pulse .site__cfg { color: var(--vpn); border-color: rgba(132,207,158,.5); background: rgba(20,40,30,.7); }
/* ==========================================================================
   Node (hardware)
   ========================================================================== */
.node { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.node__title { font-size: clamp(3rem, 7vw, 6.4rem); letter-spacing: -.05em; font-stretch: 112%; margin-bottom: 1.2rem; }
.facts { margin-top: 2.2rem; border-top: 1px solid var(--line-light); }
.facts div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.facts dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dark-2); padding-top: .25em; }
.facts dd { font-weight: 520; }
.node__main { position: relative; aspect-ratio: 1200 / 900; display: grid; place-items: center; }
.node__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .45s, transform .8s var(--ease-out); }
.node__main img.swap { opacity: 0; transform: scale(.985); }
.node__thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.node__thumbs button { width: 76px; height: 60px; border-radius: 12px; background: #fff; border: 1px solid var(--line-light); padding: 4px; transition: border-color .25s, transform .25s var(--ease-out); }
.node__thumbs button:hover { transform: translateY(-2px); }
.node__thumbs button.is-on { border-color: var(--fg-dark); }
.node__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 900px) { .node { grid-template-columns: 1fr; } .facts div { grid-template-columns: 9em 1fr; } }

/* ==========================================================================
   Straight answers
   ========================================================================== */
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qa { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 22px 22px 24px; }
.qa__q { font-size: 1.06rem; font-weight: 620; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.qa p { color: var(--fg-dark-2); font-size: .96rem; }
.qa a { color: var(--wifi-ink); font-weight: 560; }
.qa__tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.qa__tag--yes { background: rgba(114,186,138,.18); color: var(--vpn-ink); }
.qa__tag--note { background: rgba(233,184,100,.22); color: #85591a; }
.js .answers [data-reveal] { transition-delay: calc(var(--i, 0) * 60ms); }
@media (max-width: 1000px) { .answers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .answers { grid-template-columns: 1fr; } }

/* ==========================================================================
   Outlook (agents)
   ========================================================================== */
.next { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.next .lead { margin: 1.2rem 0 1rem; }
.badge { display: inline-flex; align-items: center; gap: .5em; padding: 6px 11px; border-radius: 999px; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
.agent { position: relative; border-radius: 20px; background: #11181c; border: 1px dashed rgba(233,184,100,.35); padding: 18px; overflow: hidden; }
.agent__head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 14px; }
.agent__head .i { color: var(--warn); }
.agent__list { display: grid; gap: 6px; }
.agent__list li { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 10px; background: var(--ink-2); font-size: .92rem; transition: background-color .4s, box-shadow .4s; }
.agent__list .st { color: var(--fg-light-2); background: rgba(233,241,244,.06); }
.agent__list .st.ok { color: var(--vpn); background: rgba(132,207,158,.12); }
.agent__list .st.flag { color: var(--warn); background: rgba(233,184,100,.14); }
.agent__list li.flagged { box-shadow: inset 0 0 0 1px rgba(233,184,100,.5); }
.agent__finding { margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(233,184,100,.08); border: 1px solid rgba(233,184,100,.3); font-size: .9rem; color: #e6dccb; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease-out); }
.agent__finding.on { opacity: 1; transform: none; }
.agent__finding b { color: var(--fg-light); display: block; margin-bottom: 2px; }
.agent__acts { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.agent__btn { font-size: .8rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--fg-light); }
.agent__btn--pri { background: var(--fg-light); color: var(--ink); border-color: transparent; font-weight: 600; }
.agent__who { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--fg-light-2); letter-spacing: .04em; }
.agent__scan { position: absolute; left: 0; right: 0; height: 60px; top: 0; background: linear-gradient(transparent, rgba(233,184,100,.12), transparent); pointer-events: none; opacity: 0; }
@media (max-width: 900px) { .next { grid-template-columns: 1fr; } }

/* ==========================================================================
   Partners + final CTA + footer
   ========================================================================== */
.partners-sec { padding: clamp(64px, 9vw, 110px) 0; }
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 80px); align-items: end; }
.partners p:not(.kicker) { color: var(--fg-dark-2); margin-bottom: 1.4rem; max-width: 30em; font-size: 1.08rem; }
@media (max-width: 800px) { .partners { grid-template-columns: 1fr; } }

.final { position: relative; padding: clamp(96px, 14vw, 180px) 0 clamp(96px, 12vw, 150px); text-align: center; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; left: 50%; top: 38%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(116,182,216,.2), rgba(132,207,158,.07) 40%, transparent 65%); z-index: -1; }
.final__inner { display: flex; flex-direction: column; align-items: center; }
.final__title { font-size: clamp(2.8rem, 7.5vw, 6.8rem); line-height: .95; letter-spacing: -.05em; font-weight: 660; font-stretch: 110%; margin-bottom: 1.4rem; }
.final .lead { margin: 0 auto 2.2rem; max-width: 34em; }

.foot { border-top: 1px solid var(--line-dark); padding: 56px 0 44px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px 48px; }
.foot__company { margin-top: 14px; font-size: .86rem !important; }
.foot__brand img { width: 128px; height: auto; margin-bottom: 18px; }
.foot__brand p { color: var(--fg-light-2); font-size: .94rem; }
.foot__nav { display: grid; gap: 10px; align-content: start; }
.foot__nav a { color: var(--fg-light-2); text-decoration: none; font-size: .94rem; }
.foot__nav a:hover { color: var(--fg-light); }
.foot__plain { color: var(--fg-light-2); font-size: .94rem; }
.foot__fine { grid-column: 1 / -1; border-top: 1px solid var(--line-dark); padding-top: 22px; font-size: .78rem; color: #6d828c; }
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ==========================================================================
   WiFi page
   ========================================================================== */
.types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.type { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 18px 18px 20px; display: grid; gap: 10px; align-content: start; }
.type code { font-size: 1rem; font-weight: 600; color: var(--fg-dark); }
.type code span { font-weight: 400; font-size: .8rem; color: var(--fg-dark-2); margin-left: .3em; }
.type p { font-size: .95rem; color: var(--fg-dark-2); }
@media (max-width: 1100px) { .types { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .types { grid-template-columns: 1fr 1fr; } }

.ticks { display: grid; gap: 14px; margin-top: 1.4rem; }
.ticks li { padding-left: 26px; position: relative; color: #bccbd3; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--guest); }
.ticks b { color: var(--fg-light); font-weight: 620; }
.signin { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.phone { width: 214px; height: 430px; border-radius: 38px; background: #0d1215; padding: 9px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.8), inset 0 0 0 1.5px #2a3338; flex: none; }
.phone__screen { height: 100%; border-radius: 30px; background: linear-gradient(170deg, #eef4f6, #dfe9ed); overflow: hidden; position: relative; color: var(--fg-dark); }
.phone__bar { display: flex; justify-content: space-between; padding: 12px 18px 0; font-size: 11px; font-weight: 600; }
.phone__ssid { font-family: var(--mono); font-weight: 500; font-size: 10px; background: rgba(132,207,158,.3); color: var(--guest-ink); padding: 2px 7px; border-radius: 99px; }
.pages { position: absolute; inset: 44px 0 14px; display: flex; transition: transform .7s var(--ease-io); }
.pg { flex: 0 0 calc(100% - 28px); margin: 0 14px; width: calc(100% - 28px); background: #fff; border-radius: 18px; padding: 20px 16px; display: flex; flex-direction: column; box-shadow: 0 10px 30px -18px rgba(14,26,32,.4); position: relative; }
.pg--ok { align-items: center; justify-content: center; text-align: center; gap: 4px; }
.pg--ok .ok { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--vpn-field); color: #fff; margin-bottom: 8px; }
.pg__n { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--fg-dark-2); }
.portal__logo { display: flex; gap: 4px; margin-bottom: 18px; }
.portal__logo span { width: 12px; height: 12px; border-radius: 50%; background: #c9d3d7; }
.portal__logo span:nth-child(2) { background: #a9b6bb; } .portal__logo span:nth-child(3) { background: #7d8b91; }
.portal__hi { font-size: 19px; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; font-stretch: 106%; }
.portal__txt { font-size: 11.5px; line-height: 1.45; color: var(--fg-dark-2); margin-bottom: 16px; }
.portal__txt--icon { display: flex; gap: 6px; align-items: center; justify-content: center; }
.portal__txt .i { width: 14px; height: 14px; }
.portal__chk { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--fg-dark-2); margin-bottom: auto; }
.portal__chk i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #9fb2ba; position: relative; flex: none; }
.portal__chk i.on { background: var(--vpn-field); border-color: var(--vpn-field); }
.portal__chk i.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.portal__btn { display: block; text-align: center; background: var(--ink); color: #fff; border-radius: 12px; padding: 11px; font-size: 13px; font-weight: 600; margin-top: auto; margin-bottom: 18px; }
.hook { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--fg-light-2); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-dark); position: relative; }
.hook .i { color: var(--guest); width: 18px; height: 18px; }
.hook i { width: 46px; height: 2px; background: linear-gradient(90deg, transparent, var(--guest), transparent); background-size: 200% 100%; animation: hookFlow 1.6s linear infinite; }
.hook__to { color: var(--fg-light); }
.hook.fire { border-color: rgba(132,207,158,.6); }
@keyframes hookFlow { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.sched { position: relative; padding: 26px 24px 18px; display: grid; gap: 14px; }
.sched__row { display: grid; grid-template-columns: 74px 1fr 40px; gap: 12px; align-items: center; }
.sched__row em { font-style: normal; font-family: var(--mono); font-size: .76rem; color: var(--fg-dark-2); }
.sched__row em.off { color: #b3402f; }
.sched__bar { position: relative; height: 22px; border-radius: 7px; background: repeating-linear-gradient(90deg, #e7ecee 0 calc(100% / 24 - 1px), #dfe5e8 calc(100% / 24 - 1px) calc(100% / 24)); overflow: hidden; }
.sched__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 7px; background: var(--guest); opacity: .85; }
.sched__row:nth-child(2) .sched__bar i { background: var(--team); }
.sched__axis { display: flex; justify-content: space-between; margin-left: 86px; margin-right: 52px; font-family: var(--mono); font-size: .68rem; color: var(--fg-dark-2); }
.sched__now { position: absolute; top: 18px; bottom: 34px; width: 2px; background: var(--ink); left: 0; border-radius: 2px; }
@media (max-width: 560px) {
  .sched { padding: 22px 16px 16px; }
  .sched__row { grid-template-columns: 58px 1fr 30px; gap: 8px; }
  .sched__axis { margin-left: 66px; margin-right: 38px; font-size: .6rem; }
  .sched__axis span:nth-child(2), .sched__axis span:nth-child(4) { visibility: hidden; }
}
.sched__now::before { content: "now"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .62rem; color: var(--fg-dark); }

.filter { padding: clamp(18px, 2.4vw, 28px); }
.filter__grid { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 18px; align-items: center; }
.filter__h { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dark-2); text-align: center; }
.filter__k { font-size: .95rem; }
.filter__grid--11 { gap: 8px 22px; }
.filter__grid--11 .filter__k { padding: 4px 0; border-bottom: 1px solid var(--line-light); }
.filter__grid--11 .filter__h:first-child { text-align: left; }

.keys-card .keys__viz { max-width: 380px; }
.keys { display: grid; gap: 16px; }
.keys__viz { width: 100%; max-width: 420px; margin: 0 auto -6px; display: block; overflow: visible; }
.keys__hub { fill: var(--ink); }
.keys__hubtxt { fill: #fff; font: 500 10px var(--mono); }
.keys__viz .rings circle { stroke: var(--wifi-field); stroke-width: 1.2; }
.keys__dev circle { fill: #fff; stroke: var(--fg-dark); stroke-width: 1.4; transition: stroke .4s, fill .4s; }
.keys__dev text { font: 500 9.5px var(--mono); fill: var(--fg-dark-2); }
.keys__dev.off circle { stroke: var(--bad); fill: #fbeeeb; }
.keys__link { stroke: var(--wifi-ink); stroke-width: 1.6; fill: none; transition: stroke .3s; }
.keys__link.off { stroke: var(--bad); stroke-dasharray: 3 5; }
.keys__list { display: grid; gap: 8px; }
.keys__list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--paper); transition: background-color .4s, opacity .4s; }
.keys__list .i { color: var(--wifi-ink); }
.keys__name { font-weight: 540; font-size: .95rem; }
.keys__list code { font-family: var(--mono); font-size: .78rem; color: var(--fg-dark-2); transition: color .3s; }
.keys__btn { border: 1px solid var(--line-light); background: #fff; border-radius: 999px; font-size: .8rem; font-weight: 580; padding: 6px 12px; transition: background-color .2s, color .2s, border-color .2s; }
.keys__btn:hover { border-color: var(--bad); color: var(--bad); }
.keys__list li.off { background: #fbeeeb; }
.keys__list li.off code { text-decoration: line-through; color: var(--bad); }
.keys__list li.off .keys__btn { pointer-events: none; border-color: transparent; background: none; color: var(--bad); }
.keys__list li.off .i { color: var(--bad); }
.keys__status { font-size: .9rem; color: var(--fg-dark-2); min-height: 1.4em; }
/* ==========================================================================
   Technology page
   ========================================================================== */
.diagram { position: relative; margin: 0; }
.diagram--mgmt { aspect-ratio: 1000 / 260; margin-top: clamp(40px, 6vw, 72px); }
.diagram--tunnel { aspect-ratio: 1000 / 420; padding: 0; }
.diagram__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow { fill: none; stroke: transparent; stroke-width: 2; }
.flow--base { stroke: rgba(175,205,219,.3); stroke-width: 1.6; stroke-dasharray: 3 6; }
.theme-light .flow--base, .card .flow--base { stroke: rgba(14,26,32,.25); }
.flow--base.flow--team { stroke: var(--team); stroke-dasharray: none; stroke-width: 3; opacity: .9; }
.tunnel { fill: none; stroke: rgba(132,207,158,.28); stroke-width: 26; stroke-linecap: round; }
.fpk { fill: #fff; } .fpk--cfg { fill: var(--fg-light); } .fpk--status { fill: var(--guest); }
.card .fpk--cfg, .theme-light .fpk--cfg { fill: var(--ink); }
.fpk--team { fill: #b7892e; } .fpk--guest { fill: var(--guest-ink); }
.dbox { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 16px; border-radius: 14px; background: #141b1f; border: 1px solid var(--line-dark); color: var(--fg-light); min-width: 150px; }
.dbox b { display: inline-flex; align-items: center; gap: .4em; font-weight: 620; }
.dbox small { color: var(--fg-light-2); font-size: .78rem; }
.dbox__k { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-light-2); }
.dbox--cloud { border-color: rgba(233,241,244,.35); background: #18242a; }
.card .dbox { background: var(--white); border-color: var(--line-light); color: var(--fg-dark); box-shadow: 0 10px 30px -20px rgba(14,26,32,.4); }
.card .dbox__k, .card .dbox small { color: var(--fg-dark-2); }
.card .dbox--net { border-color: #d9b26a; }
.dlabel { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); font-family: var(--mono); font-size: 11px; color: var(--fg-light-2); white-space: nowrap; display: inline-flex; gap: .4em; align-items: center; }
.card .dlabel { color: var(--fg-dark-2); }
.dlabel--lock { color: var(--guest-ink) !important; background: #fff; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(29,111,65,.3); }
.dlabel .i { width: 13px; height: 13px; }
.where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(36px, 5vw, 56px); }
.where__item { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 16px; border: 1px dashed var(--line-dark); }
.where__item--now { border-style: solid; background: rgba(132,207,158,.06); }
.where__item .badge { justify-self: start; }
.where__item b { font-weight: 620; }
.where__item span:last-child { color: var(--fg-light-2); font-size: .94rem; }
@media (max-width: 760px) {
  .where { grid-template-columns: 1fr; }
  .diagram--mgmt { aspect-ratio: auto; display: grid; gap: 10px; }
  .diagram--mgmt .diagram__svg, .diagram--mgmt .dlabel { display: none; }
  .diagram--mgmt .dbox { position: static; transform: none; }
  .dbox { min-width: 0; padding: 9px 11px; font-size: .86rem; }
  .diagram--tunnel .dbox { font-size: .74rem; padding: 6px 8px; }
  .diagram--tunnel .dbox--left { left: 2%; transform: translate(0, -50%); }
  .diagram--tunnel .dbox--right { left: auto; right: 2%; transform: translate(0, -50%); }
  .diagram--tunnel .dlabel { font-size: 9.5px; }
}

.dev-sec { background: #0c1012; }
.devblock { border: 1px dashed rgba(231,192,124,.4); border-radius: 28px; padding: clamp(22px, 4vw, 48px); }
.card--darker { background: #12181b; color: var(--fg-light); border-color: var(--line-dark); }
.card--darker .card__head p { color: var(--fg-light-2); }
.vpn { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2vw, 24px); }
.map { position: relative; aspect-ratio: 760 / 420; border-radius: 18px; background: #0d1214; overflow: hidden; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__link { fill: none; stroke: var(--team); stroke-width: 2; opacity: .3; stroke-dasharray: 5 6; transition: opacity .4s, stroke-width .4s; }
.map__link.on { opacity: .9; stroke-width: 2.6; }
.map__pk { fill: var(--team); }
.map__hq--unused { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); background: var(--fg-light); color: var(--ink); border-radius: 14px; padding: 10px 14px; }
.map__hqlabel { display: flex; align-items: center; gap: .5em; font-weight: 640; }
.map__site { white-space: nowrap; position: absolute; top: calc(var(--y) * 1%); transform: translateY(-50%); display: flex; align-items: center; gap: 8px; background: #192125; color: var(--fg-light); border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: .84rem; font-weight: 540; transition: border-color .3s; }
.map__site--l { left: 3%; } .map__site--r { right: 3%; } .map__site--c { left: calc(var(--x) * 1%); transform: translate(-50%, -50%); }
.map__site--hq { background: var(--fg-light); color: var(--ink); border-color: transparent; font-weight: 640; }
.map__site--hq b { background: var(--ink); }
.map__site[aria-pressed="true"] { border-color: var(--team); }
.map__site b { width: 24px; height: 24px; border-radius: 50%; background: #2a353b; display: grid; place-items: center; }
.map__site b::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--team); }
.map__readout { margin-top: 14px; font-size: .9rem; color: var(--fg-light-2); }
.wg__list { display: grid; gap: 6px; }
.wg__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #192125; font-size: .9rem; color: var(--fg-light-2); }
.wg__list .i { color: var(--team); }
@media (max-width: 1000px) { .vpn { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .map { aspect-ratio: 4 / 5; } .map__site { font-size: .76rem; padding: 4px 9px 4px 4px; } .map__site b { width: 20px; height: 20px; } }

.h2__date { display: block; margin-top: .5rem; font-family: var(--mono); font-size: .3em; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-dark-2); font-stretch: 100%; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); }
.cmp h3 { font-size: 1.2rem; font-weight: 640; letter-spacing: -.015em; margin-bottom: 14px; }
.cmp dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-light); }
.cmp dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--fg-dark-2); padding-top: .2em; }
.cmp dd { line-height: 1.45; }
.cmp .is-us dt { color: var(--fg-dark); font-weight: 600; }
.cmp .is-us { background: linear-gradient(90deg, rgba(132,207,158,.12), transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.src { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .7rem; font-weight: 600; text-decoration: none; padding: 1px 6px; border-radius: 5px; background: rgba(14,26,32,.07); color: var(--office-ink); margin-left: .25em; vertical-align: .1em; }
.src:hover { background: rgba(31,111,150,.15); }
.src--own { color: var(--guest-ink); }
.sources { margin-top: 26px; display: grid; gap: 6px; font-size: .84rem; color: var(--fg-dark-2); }
.sources b { font-family: var(--mono); font-size: .76rem; display: inline-block; width: 2.6em; color: var(--fg-dark); }
.sources a { color: var(--office-ink); word-break: break-word; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* ==========================================================================
   Enterprise page
   ========================================================================== */
.seq { padding: clamp(18px, 2.4vw, 28px); }
.seq__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.seq__steps li { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--fg-dark-2); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-light); transition: border-color .4s, color .4s, background-color .4s; }
.seq__n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--mono); font-size: .72rem; background: var(--paper-2); }
.seq[data-step="1"] .seq__steps li:nth-child(1), .seq[data-step="2"] .seq__steps li:nth-child(2), .seq[data-step="3"] .seq__steps li:nth-child(3) { border-color: var(--ink); color: var(--fg-dark); background: var(--paper); }
.seq__stage { position: relative; height: 260px; border-radius: 16px; background: var(--paper); overflow: hidden; }
.seq__node { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); width: 84px; height: 62px; border-radius: 10px; background: #2c3134; display: grid; grid-template-columns: repeat(3, 6px); gap: 6px; place-content: center; box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); transition: box-shadow .5s; }
.seq__node i { width: 6px; height: 6px; border-radius: 50%; background: #11161a; }
.seq[data-step="2"] .seq__node { box-shadow: 0 0 0 4px rgba(116,182,216,.3), 0 14px 24px -14px rgba(0,0,0,.6); }
.seq[data-step="3"] .seq__node { box-shadow: 0 0 0 6px rgba(132,207,158,.25), 0 14px 24px -14px rgba(0,0,0,.6); }
.seq__plug { position: absolute; font-family: var(--mono); font-size: .7rem; color: var(--fg-dark-2); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-light); background: #fff; opacity: .35; transition: opacity .4s; }
.seq__plug--p { left: calc(50% - 150px); top: 115px; } .seq__plug--i { left: calc(50% + 62px); top: 115px; }
.seq[data-step="1"] .seq__plug, .seq[data-step="2"] .seq__plug, .seq[data-step="3"] .seq__plug { opacity: 1; }
.seq__nets { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.seq__nets .net { transform: translateY(8px); opacity: 0; }
.seq[data-step="3"] .seq__nets .net { transform: none; opacity: 1; }
.seq[data-step="3"] .seq__nets .net:nth-child(2) { transition-delay: .1s; } .seq[data-step="3"] .seq__nets .net:nth-child(3) { transition-delay: .2s; } .seq[data-step="3"] .seq__nets .net:nth-child(4) { transition-delay: .3s; }
.seq[data-step="3"] .seq__nets .net--office::before { background: var(--office); } .seq[data-step="3"] .seq__nets .net--guest::before { background: var(--guest); } .seq[data-step="3"] .seq__nets .net--team::before { background: var(--team); } .seq[data-step="3"] .seq__nets .net--iot::before { background: var(--iot); }
@media (max-width: 560px) { .seq__steps { grid-template-columns: 1fr; } .seq__plug--p { left: 8px; } .seq__plug--i { left: auto; right: 8px; } }

.orgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.org { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 8px; align-content: start; }
.org .badge { justify-self: start; margin-bottom: 6px; }
.org h3 { font-size: 1.2rem; font-weight: 640; letter-spacing: -.015em; margin-bottom: 4px; }
.org p { color: var(--fg-dark-2); font-size: .96rem; }
.org__k { font-family: var(--mono); font-size: .68rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dark) !important; margin-top: 6px; }
.org--live { background: var(--ink); border-color: transparent; color: var(--fg-light); grid-row: span 1; }
.org--live p { color: var(--fg-light-2); } .org--live .org__k { color: var(--fg-light) !important; }
@media (max-width: 1000px) { .orgs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .orgs { grid-template-columns: 1fr; } }

/* ==========================================================================
   Industries page
   ========================================================================== */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jump a { text-decoration: none; font-size: .9rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--fg-light); transition: border-color .2s, background-color .2s; }
.jump a:hover { border-color: rgba(233,241,244,.45); background: rgba(233,241,244,.05); }
.inds .wrap { display: grid; gap: clamp(20px, 3vw, 36px); }
.ind { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; background: var(--white); border: 1px solid var(--line-light); border-radius: 28px; padding: clamp(14px, 1.6vw, 20px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.ind:nth-child(even) .ind__img { order: 2; }
.ind__img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; }
.ind__body { padding: clamp(6px, 1.5vw, 18px); }
.ind__body .h3 { margin-bottom: 18px; }
.groups { display: grid; gap: 10px; margin-bottom: 18px; }
.groups li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: baseline; color: var(--fg-dark-2); }
.groups .net { justify-self: start; }
.groups b { color: var(--fg-dark); font-weight: 620; }
.ind__change { padding-top: 14px; border-top: 1px solid var(--line-light); color: var(--fg-dark); }
.ind__change b { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dark-2); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 900px) { .ind { grid-template-columns: 1fr; } .ind:nth-child(even) .ind__img { order: 0; } .ind__img { max-height: 260px; } }

/* ==========================================================================
   Partners page
   ========================================================================== */
.accounts { position: relative; margin: 0; aspect-ratio: 400 / 330; border-radius: 26px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.02); }
.accounts__svg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * 300 / 330); }
.accounts__svg .fpk { r: 4; }
.accounts__console { position: absolute; left: 50%; top: calc(100% * 72 / 330); transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 2px; padding: 12px 22px; border-radius: 14px; background: var(--fg-light); color: var(--ink); }
.accounts__console .dbox__k { color: var(--fg-dark-2); }
.accounts__list li { position: absolute; left: calc(var(--x) * 1%); top: calc(100% * 168 / 330); transform: translateX(-50%); width: 20%; display: grid; gap: 8px; justify-items: center; padding: 12px 6px; border-radius: 12px; background: #141b1f; border: 1px solid var(--line-dark); font-size: .84rem; }
.accounts__list span { display: flex; gap: 4px; }
.accounts__list i { width: 8px; height: 8px; border-radius: 2px; background: var(--guest); opacity: .8; }
.accounts__cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-light-2); }
@media (max-width: 560px) { .accounts__list li { font-size: .7rem; padding: 8px 4px; } .accounts__console { padding: 8px 14px; } }
.stack { display: grid; gap: 10px; }
.stack__item { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--line-light); }
.stack__item .badge { grid-row: span 2; }
.stack__item b { font-weight: 640; font-size: 1.08rem; }
.stack__item span:last-child { color: var(--fg-dark-2); grid-column: 2; }
.stack__item--plan { background: transparent; border-style: dashed; border-color: rgba(14,26,32,.22); }
/* ==========================================================================
   Reduced motion: final states, no loops, no scrubbing
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 620px) {
  .keys__list li { grid-template-columns: auto 1fr auto; }
  .keys__list code { grid-column: 2; grid-row: 2; }
  .keys__list .keys__btn { grid-row: 1 / span 2; grid-column: 3; }
}

/* ==========================================================================
   WiFi hero: one site, four networks, kept apart (own drawing, no network internals)
   ========================================================================== */
.seg { margin: 0; border-radius: 22px; border: 1px solid var(--line-dark); background: #11171a; padding: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.seg__lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 14px; overflow: hidden; }
.seg__lane { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 18px 8px 120px; min-height: 300px; background: rgba(255,255,255,.02); }
.seg__lane + .seg__lane { border-left: 2px dashed rgba(175,205,219,.22); }
.seg__lane code { font-family: var(--mono); font-size: .72rem; color: var(--fg-light-2); }
.seg__devs { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; color: var(--fg-light); }
.seg__devs .i { width: 22px; height: 22px; }
.seg__lane--office .seg__devs { color: var(--office); } .seg__lane--guest .seg__devs { color: var(--guest); } .seg__lane--team .seg__devs { color: var(--team); } .seg__lane--iot .seg__devs { color: var(--iot); }
.seg__dot { position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; top: 96px; animation: segDot 2.6s var(--ease-io) infinite; }
.seg__lane--office .seg__dot { background: var(--office); } .seg__lane--guest .seg__dot { background: var(--guest); animation-delay: .5s; } .seg__lane--team .seg__dot { background: var(--team); animation-delay: 1s; } .seg__lane--iot .seg__dot { background: var(--iot); animation-delay: 1.5s; }
@keyframes segDot { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(110px); opacity: 0; } }
.seg__cap { margin-top: 14px; font-size: .86rem; color: var(--fg-light-2); text-align: center; }
@media (max-width: 560px) { .seg { padding: 12px; } .seg__lane { padding: 14px 4px 96px; min-height: 240px; } .seg__lane code { font-size: .62rem; } .seg__devs .i { width: 18px; height: 18px; } .seg__devs { gap: 4px; } }

/* Technology: guests and staff, two separate boxes (no path, no tunnel end) */
.apart { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-light); background: var(--white); box-shadow: 0 30px 60px -40px rgba(14,26,32,.3); }
.apart__box { display: grid; gap: 14px; justify-items: start; padding: clamp(22px, 3vw, 34px); min-height: 220px; align-content: start; }
.apart__box + .apart__box { border-left: 2px dashed rgba(14,26,32,.18); }
.apart__box b { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 640; letter-spacing: -.015em; }
.apart__box--guest { background: linear-gradient(160deg, rgba(132,207,158,.16), transparent 70%); }
.apart__box--staff { background: linear-gradient(160deg, rgba(116,182,216,.16), transparent 70%); }
.apart__devs { display: flex; gap: 10px; margin-top: auto; color: var(--fg-dark-2); }
.apart__devs .i { width: 24px; height: 24px; }
@media (max-width: 560px) { .apart { grid-template-columns: 1fr; } .apart__box + .apart__box { border-left: 0; border-top: 2px dashed rgba(14,26,32,.18); } .apart__box { min-height: 0; } }

/* ==========================================================================
   The Airfy family: header switcher, footer band, mobile menu section
   ========================================================================== */
.fam { position: relative; flex: none; margin-left: 6px; }
.fam__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(127,175,197,.35); background: transparent; color: inherit; font-size: .82rem; font-weight: 520; transition: border-color .2s, background-color .2s; }
.fam__btn:hover, .fam__btn[aria-expanded="true"] { border-color: currentColor; background: rgba(127,175,197,.1); }
.fam__btn .i { width: 15px; height: 15px; }
.fam__srlabel { display: none; }
.fam__panel { position: absolute; top: calc(100% + 12px); left: 0; width: min(440px, calc(100vw - 32px)); padding: 16px; border-radius: 18px; background: #11181c; color: var(--fg-light); border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); z-index: 60; }
.fam__panel[hidden] { display: none; }
.fam__k, .menu__k { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-light-2); margin-bottom: 10px; }
.fam__list, .menu__family { display: grid; gap: 2px; }
.fam__list a, .menu__family a { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-size: .9rem; line-height: 1.35; color: var(--fg-light-2); transition: background-color .2s, color .2s; }
.fam__list a:hover, .menu__family a:hover { background: rgba(127,175,197,.1); color: var(--fg-light); }
.fam__list b, .menu__family b, .family__list b { color: var(--fg-light); font-weight: 620; }
.fam__list .is-current a, .menu__family .is-current a { background: rgba(132,207,158,.1); }
.here { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; background: var(--guest); color: var(--ink); vertical-align: .1em; white-space: nowrap; }
.menu__k { margin-top: 22px; }
.menu__family a { padding: 9px 0; border-radius: 0; border-bottom: 1px solid var(--line-dark); font-size: .92rem; }
.menu__family .is-current a { background: none; }
@media (max-width: 1280px) { .fam__btnlabel { display: none; } .fam__btn { width: 34px; padding: 0; justify-content: center; } }
@media (max-width: 420px) { .fam { margin-left: 0; } .fam__btn { width: 32px; height: 32px; } .fam__panel { position: fixed; left: 16px; right: 16px; top: calc(var(--nav-h) + 4px); width: auto; } }

.family { border-bottom: 1px solid var(--line-dark); padding-bottom: 40px; margin-bottom: 48px; }
.family__title { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 640; letter-spacing: -.02em; margin-bottom: 20px; }
.family__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.family__list a { display: block; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-dark); text-decoration: none; color: var(--fg-light-2); font-size: .92rem; line-height: 1.4; transition: border-color .2s, background-color .2s, transform .3s var(--ease-out); }
.family__list a:hover { border-color: rgba(233,241,244,.4); background: rgba(233,241,244,.04); transform: translateY(-2px); }
.family__list .is-current a { border-color: rgba(132,207,158,.55); background: rgba(132,207,158,.08); }
.family__list b { display: block; font-size: 1rem; margin-bottom: 2px; }
/* in the card layout the domain is the title; the colon stays in the text for copying and screen readers */
.family__list .colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) { .family__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .family__list { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact form (every page, #contact)
   ========================================================================== */
.contact { position: relative; padding: clamp(80px, 11vw, 140px) 0; overflow: hidden; isolation: isolate; scroll-margin-top: var(--nav-h); }
.contact::before { content: ""; position: absolute; left: 30%; top: 40%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(116,182,216,.16), rgba(132,207,158,.06) 40%, transparent 65%); z-index: -1; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -.045em; font-weight: 660; font-stretch: 106%; margin-bottom: 1.2rem; text-wrap: balance; }
.contact__card { background: var(--paper); color: var(--fg-dark); border-radius: 24px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.cform__note { font-size: .86rem; line-height: 1.5; color: var(--fg-dark-2); margin-bottom: 18px; padding: 10px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); }
.cform__note a, .cform__err a, .cform__noscript a { color: var(--office-ink); font-weight: 600; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .86rem; font-weight: 580; margin-bottom: 6px; }
.field label span { font-weight: 400; color: var(--fg-dark-2); }
.field input, .field textarea { width: 100%; border: 1px solid #c3cfd4; background: #fff; border-radius: 12px; padding: 11px 13px; font-size: 1rem; color: var(--fg-dark); transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--office-ink); box-shadow: 0 0 0 3px rgba(31,111,150,.18); }
.field [aria-invalid="true"] { border-color: #b3402f; }
.cform__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cform__ts:not(:empty) { margin: 4px 0 12px; }
.cform__err { color: #a3372a; font-size: .9rem; min-height: 1.3em; margin-bottom: 12px; }
.cform button[disabled] { opacity: .6; pointer-events: none; }
.cform__done { text-align: left; padding: 8px 0; }
.cform__done h3 { font-size: 1.6rem; font-weight: 660; letter-spacing: -.02em; margin: 12px 0 8px; outline: none; }
.cform__done p { color: var(--fg-dark-2); }
.cform__ok { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--vpn-field); color: #fff; }
.cform__noscript { margin-top: 12px; font-size: .9rem; color: var(--fg-dark-2); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* Industries: optional subline and tagline under an article heading (senior living) */
.ind__body .h3 + .ind__sub { margin-top: -10px; }
.ind__sub { font-size: 1.05rem; color: var(--fg-dark-2); margin-bottom: 10px; }
.ind__tag { display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--fg-dark); padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line-light); background: var(--paper); margin-bottom: 18px; }