/* ========================================
   Speedo Internet — Design Foundation
   ======================================== */

:root {
  --color-primary: #433b97;
  --color-primary-light: #5b50c8;
  --color-accent: #49c6ff;
  --color-background: #07111f;
  --color-background-secondary: #0d1829;
  --color-surface: #101c30;
  --color-white: #ffffff;
  --color-text: #e8eef8;
  --color-text-muted: #a5b4cb;
  --color-border: rgb(232 238 248 / 12%);
  --color-overlay: rgb(7 17 31 / 72%);
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --container-width: 1280px;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --shadow-glow: 0 0 2.5rem rgb(73 198 255 / 18%);
  --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 20%);
  --transition-base: 240ms cubic-bezier(.2, .8, .2, 1);
  --z-loader: 1000;
  --z-modal: 900;
  --z-header: 100;
}

/* Reset and global document defaults */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--color-background); scroll-behavior: auto; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-scroll-locked { overflow: hidden; }
body.is-loading main,
body.is-loading .site-footer { visibility: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--color-primary-light); color: var(--color-white); }

/* Typography */
h1, h2, h3, h4, h5, h6, p { margin-block: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.75rem, 7vw, 5.75rem); }
h2 { font-size: clamp(2.125rem, 4.5vw, 4rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
p { color: var(--color-text-muted); }

/* Layout primitives */
.container { width: min(100% - (var(--container-gutter) * 2), var(--container-width)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(4rem, 9vw, 8.75rem); }
.section--compact { padding-block: clamp(3rem, 6vw, 6rem); }
.section__eyebrow { margin-bottom: 1rem; color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section__heading { max-width: 16ch; }
.section__intro { max-width: 40rem; margin-top: 1.25rem; font-size: clamp(1rem, 1.3vw, 1.125rem); }

/* Reusable actions */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.25rem;
  padding: .875rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.button span[aria-hidden="true"] { display: inline-block; transition: transform var(--transition-base); }.button:hover span[aria-hidden="true"] { transform: translateX(.2rem); }
.button--primary { background: var(--color-primary-light); box-shadow: 0 .75rem 1.75rem rgb(67 59 151 / 30%); color: var(--color-white); }
.button--primary:hover { background: var(--color-primary); box-shadow: 0 1rem 2.25rem rgb(67 59 151 / 40%); }
.button--secondary { border-color: var(--color-border); background: rgb(255 255 255 / 4%); color: var(--color-text); }
.button--secondary:hover { border-color: rgb(73 198 255 / 55%); background: rgb(73 198 255 / 9%); }

/* Accessibility */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.skip-link { position: fixed; z-index: calc(var(--z-loader) + 1); top: 1rem; left: 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-background); transform: translateY(-200%); transition: transform var(--transition-base); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.u-text-accent { color: var(--color-accent); }
.u-text-muted { color: var(--color-text-muted); }
.u-visually-hidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }

/* Loader */
.site-loader { position: fixed; z-index: var(--z-loader); inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--color-background); }
.site-loader__brand { position: relative; width: min(22rem, 74vw); }.site-loader__logo { width: 100%; height: auto; filter: drop-shadow(0 0 1.5rem rgb(73 198 255 / 10%)); }.site-loader__signal-mask { position: absolute; top: 4%; left: 69%; width: 18%; height: 15%; background: var(--color-background); }.site-loader__signal { position: absolute; top: 3%; left: 69%; width: 18%; height: 17%; }.site-loader__signal i { position: absolute; right: 50%; bottom: 0; border: 2px solid var(--color-white); border-bottom: 0; border-radius: 100% 100% 0 0; opacity: 0; transform: translateX(50%) scale(.6); animation: loader-signal 1.35s ease-out 1 both paused; }.site-loader.is-ready .site-loader__signal i { animation-play-state: running; }.site-loader__signal i:nth-child(1) { width: 27%; height: 27%; animation-delay: 0s; }.site-loader__signal i:nth-child(2) { width: 55%; height: 55%; animation-delay: .18s; }.site-loader__signal i:nth-child(3) { width: 90%; height: 90%; animation-delay: .36s; } @keyframes loader-signal { 0% { opacity: 0; transform: translateX(50%) scale(.55); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(50%) scale(1.12); } }
.site-loader__fallback { position: relative; z-index: 1; display: none; place-items: center; width: 5rem; aspect-ratio: 1; border: 1px solid rgb(73 198 255 / 40%); border-radius: 50%; box-shadow: var(--shadow-glow); color: var(--color-white); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; }
.site-loader.is-media-unavailable .site-loader__fallback { display: grid; }
.site-loader.is-media-unavailable .site-loader__brand { display: none; }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: #07111f; }
.hero__mesh { position: absolute; z-index: -3; inset: -20%; background: radial-gradient(circle at 72% 36%, rgb(91 80 200 / 31%), transparent 24%), radial-gradient(circle at 25% 72%, rgb(73 198 255 / 14%), transparent 24%), radial-gradient(circle at 66% 78%, rgb(67 59 151 / 17%), transparent 26%); filter: blur(2rem); animation: mesh-drift 15s ease-in-out infinite alternate; }
.hero__grid { position: absolute; z-index: -2; inset: 0; opacity: .2; background-image: linear-gradient(rgb(165 180 203 / 13%) 1px, transparent 1px), linear-gradient(90deg, rgb(165 180 203 / 13%) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero__cursor-glow { position: absolute; z-index: -1; top: 50%; left: 50%; width: 28rem; aspect-ratio: 1; border-radius: 50%; background: rgb(73 198 255 / 10%); filter: blur(3rem); pointer-events: none; transform: translate(-50%, -50%); }
.hero__logo { position: absolute; z-index: 3; top: clamp(1.25rem, 3vw, 2.25rem); left: var(--container-gutter); display: block; width: clamp(7.5rem, 12vw, 10.5rem); }.hero__logo img { width: 100%; height: auto; filter: drop-shadow(0 .35rem .8rem rgb(0 0 0 / 28%)); }
.hero__container { display: grid; grid-template-columns: minmax(0, .95fr) minmax(24rem, 1.05fr); grid-template-rows: 1fr auto; align-items: center; min-height: 100svh; padding-top: clamp(7rem, 10vw, 9rem); padding-bottom: 2.5rem; }
.hero__content { position: relative; z-index: 2; max-width: 43rem; }
.hero__eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--color-text); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero__eyebrow span { width: 2.25rem; height: 1px; background: var(--color-accent); box-shadow: 0 0 .75rem var(--color-accent); }
.hero__title { max-width: 10.5ch; font-size: clamp(3rem, 5.6vw, 5.6rem); }
.hero__title-line { display: block; overflow: hidden; }
.hero__word { display: inline-block; }
.hero__word--accent { color: var(--color-accent); text-shadow: 0 0 1.75rem rgb(73 198 255 / 26%); }
.hero__description { max-width: 34rem; margin-top: 1.6rem; font-size: clamp(1rem, 1.4vw, 1.13rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__visual { position: relative; z-index: 1; align-self: center; justify-self: end; width: min(100%, 41rem); min-height: 32rem; }
.hero__visual-glow { position: absolute; top: 44%; left: 50%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: rgb(91 80 200 / 37%); box-shadow: 0 0 6rem 2rem rgb(73 198 255 / 10%); filter: blur(1rem); transform: translate(-50%, -50%); }
.hero__router { position: absolute; z-index: 1; bottom: 2%; left: 50%; width: min(39rem, 116%); filter: drop-shadow(0 2.5rem 2.2rem rgb(0 0 0 / 52%)); transform: translateX(-50%); }
.hero__speed-card { position: absolute; z-index: 2; display: grid; min-width: 8rem; padding: .85rem 1rem; border: 1px solid rgb(232 238 248 / 17%); border-radius: var(--radius-sm); background: rgb(16 28 48 / 68%); box-shadow: var(--shadow-card); backdrop-filter: blur(1rem); }
.hero__speed-card strong { color: var(--color-white); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1; }
.hero__speed-card span { margin-top: .25rem; color: var(--color-accent); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hero__speed-card--top { top: 14%; right: 0; }.hero__speed-card--middle { top: 47%; left: 1%; }.hero__speed-card--bottom { right: 7%; bottom: 7%; }
.hero__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 42rem); margin: 1rem 0 0; border-top: 1px solid var(--color-border); }
.hero__stat { padding: 1.2rem 1.5rem 0 0; }.hero__stat + .hero__stat { padding-left: 1.5rem; border-left: 1px solid var(--color-border); }
.hero__stat dt { font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; }.hero__stat dd { margin: .15rem 0 0; font-size: .75rem; }
.hero__particles { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }.hero__particle { position: absolute; width: .25rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 .75rem .12rem var(--color-accent); animation: particle-float var(--particle-duration, 7s) ease-in-out infinite alternate; }
.hero__particle:nth-child(1) { top: 18%; left: 52%; --particle-duration: 8s; }.hero__particle:nth-child(2) { top: 30%; left: 89%; --particle-duration: 6s; }.hero__particle:nth-child(3) { top: 72%; left: 43%; --particle-duration: 9s; }.hero__particle:nth-child(4) { top: 12%; left: 76%; --particle-duration: 7s; }.hero__particle:nth-child(5) { top: 83%; left: 84%; --particle-duration: 8s; }.hero__particle:nth-child(6) { top: 52%; left: 10%; --particle-duration: 9s; }.hero__particle:nth-child(7) { top: 37%; left: 60%; --particle-duration: 7s; }.hero__particle:nth-child(8) { top: 90%; left: 23%; --particle-duration: 8s; }.hero__particle:nth-child(9) { top: 63%; left: 94%; --particle-duration: 6s; }
@keyframes mesh-drift { to { transform: translate3d(4%, -2%, 0) scale(1.06); } } @keyframes particle-float { to { transform: translate3d(1.5rem, -2.5rem, 0); opacity: .25; } }

/* Why Speedo */
.why-speedo { isolation: isolate; overflow: hidden; background: var(--color-background-secondary); }
.why-speedo::before { position: absolute; z-index: -2; top: -18rem; right: -16rem; width: 42rem; aspect-ratio: 1; border-radius: 50%; background: rgb(67 59 151 / 17%); content: ""; filter: blur(5rem); }.why-speedo__header { max-width: 47rem; }
.why-speedo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.why-speedo__card { position: relative; min-height: 16rem; padding: clamp(1.4rem, 2.5vw, 2rem); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(135deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), var(--shadow-card); backdrop-filter: blur(1.25rem); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }.why-speedo__card::before { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgb(73 198 255 / 17%), transparent 42%); content: ""; opacity: 0; transition: opacity var(--transition-base); pointer-events: none; }.why-speedo__card:hover { border-color: rgb(73 198 255 / 45%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%), 0 1.5rem 3.5rem rgb(0 0 0 / 26%), 0 0 2rem rgb(73 198 255 / 12%); transform: translateY(-.5rem); }.why-speedo__card:hover::before { opacity: 1; }
.why-speedo__icon { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; margin-bottom: 1.5rem; border: 1px solid rgb(73 198 255 / 25%); border-radius: .9rem; background: rgb(73 198 255 / 8%); box-shadow: 0 0 1.5rem rgb(73 198 255 / 10%); color: var(--color-accent); }.why-speedo__icon svg { width: 1.45rem; height: 1.45rem; }.why-speedo__card h3 { position: relative; font-size: 1.18rem; letter-spacing: -.02em; }.why-speedo__card p { position: relative; margin-top: .65rem; font-size: .875rem; line-height: 1.65; }
.why-speedo__network { position: absolute; z-index: -1; inset: 0; opacity: .36; pointer-events: none; }.why-speedo__network::before, .why-speedo__network::after { position: absolute; width: 30rem; height: 1px; background: linear-gradient(90deg, transparent, rgb(73 198 255 / 52%), transparent); content: ""; transform-origin: left; }.why-speedo__network::before { top: 19%; right: -4rem; transform: rotate(-23deg); }.why-speedo__network::after { bottom: 18%; left: -7rem; transform: rotate(18deg); }.why-speedo__network span { position: absolute; width: .3rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 .9rem .15rem rgb(73 198 255 / 65%); animation: network-pulse 3.5s ease-in-out infinite; }.why-speedo__network span:nth-child(1) { top: 13%; right: 18%; }.why-speedo__network span:nth-child(2) { top: 27%; right: 36%; animation-delay: .8s; }.why-speedo__network span:nth-child(3) { top: 45%; left: 8%; animation-delay: 1.5s; }.why-speedo__network span:nth-child(4) { bottom: 23%; left: 25%; animation-delay: 2s; }.why-speedo__network span:nth-child(5) { bottom: 17%; left: 43%; animation-delay: 1.1s; }.why-speedo__network span:nth-child(6) { bottom: 28%; right: 11%; animation-delay: 2.5s; } @keyframes network-pulse { 50% { opacity: .25; transform: scale(.6); } }

/* Broadband Plans */
.plans { overflow: hidden; background: var(--color-background); }.plans__header { max-width: 45rem; }.plans__grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.plans__card { position: relative; display: flex; flex-direction: column; min-height: 29rem; padding: 2rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); }.plans__card::before { position: absolute; z-index: 0; inset: -1px; border-radius: inherit; background: conic-gradient(from var(--plan-border-angle, 0deg), transparent 0 20%, rgb(73 198 255 / 80%) 30%, transparent 43% 70%, rgb(91 80 200 / 80%) 81%, transparent 93%); content: ""; opacity: 0; animation: plan-border 3.4s linear infinite; transition: opacity var(--transition-base); }.plans__card::after { position: absolute; z-index: 0; inset: 1px; border-radius: calc(var(--radius-md) - 1px); background: var(--color-surface); content: ""; }.plans__card > * { position: relative; z-index: 1; }.plans__card:hover { box-shadow: 0 1.6rem 3.5rem rgb(0 0 0 / 33%), 0 0 2.5rem rgb(73 198 255 / 12%); transform: translateY(-.6rem) scale(1.015); }.plans__card:hover::before, .plans__card--recommended::before { opacity: 1; }
.plans__grid.is-plan-hovering .plans__card::before { opacity: 0; animation-play-state: paused; }.plans__grid.is-plan-hovering .plans__card.is-border-active::before { opacity: 1; animation-play-state: running; }
.plans__card--recommended { border-color: rgb(73 198 255 / 46%); background: linear-gradient(160deg, rgb(91 80 200 / 20%), var(--color-surface) 48%); box-shadow: 0 1.4rem 3.5rem rgb(0 0 0 / 30%), 0 0 2.5rem rgb(73 198 255 / 9%); }.plans__card--recommended::after { background: linear-gradient(160deg, #152340, var(--color-surface) 48%); }.plans__badge { align-self: flex-start; margin: -2rem -2rem 1.65rem; padding: .6rem 2rem; background: var(--color-primary-light); color: var(--color-white); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.plans__name { color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.plans__card h3 { margin-top: .65rem; font-size: clamp(2rem, 3vw, 2.75rem); }.plans__card h3 span { color: var(--color-text-muted); font-family: var(--font-body); font-size: .82rem; font-weight: 500; letter-spacing: 0; }.plans__price { display: flex; align-items: baseline; gap: .35rem; margin-top: 1.35rem; }.plans__price strong { color: var(--color-white); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; }.plans__price span { color: var(--color-text-muted); font-size: .8rem; }
.plans__features { display: grid; gap: .85rem; padding: 0; margin: 2rem 0; list-style: none; }.plans__features li { display: flex; align-items: center; gap: .65rem; color: var(--color-text-muted); font-size: .85rem; }.plans__features li::before { width: 1.15rem; aspect-ratio: 1; border-radius: 50%; background: rgb(73 198 255 / 12%); color: var(--color-accent); content: "✓"; font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; }.plans__card .button { width: 100%; margin-top: auto; } @property --plan-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @keyframes plan-border { to { --plan-border-angle: 360deg; } }

.plans__speed { color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.plans__price [data-plan-price] { color: var(--color-white); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; }.plans__price small { color: var(--color-text-muted); font-size: .8rem; }
.plans__terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: 1.25rem; padding: .3rem; border: 1px solid var(--color-border); border-radius: .75rem; background: rgb(7 17 31 / 48%); }.plans__term { min-width: 0; padding: .55rem .3rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--color-text-muted); font-size: .7rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); }.plans__term:hover { color: var(--color-white); }.plans__term.is-selected { border-color: rgb(73 198 255 / 38%); background: rgb(73 198 255 / 13%); box-shadow: 0 0 1rem rgb(73 198 255 / 8%); color: var(--color-accent); }.plans__term:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.plans__iptv { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; padding: 1.4rem 1.6rem; border: 1px solid rgb(73 198 255 / 24%); border-radius: var(--radius-md); background: linear-gradient(110deg, rgb(91 80 200 / 18%), rgb(16 28 48 / 88%)); box-shadow: var(--shadow-card), inset 0 1px 0 rgb(255 255 255 / 6%); }.plans__iptv-icon { display: grid; flex: 0 0 auto; place-items: center; width: 3rem; aspect-ratio: 1; border: 1px solid rgb(73 198 255 / 35%); border-radius: .9rem; background: rgb(73 198 255 / 9%); color: var(--color-accent); box-shadow: 0 0 1.5rem rgb(73 198 255 / 10%); }.plans__iptv div { flex: 1 1 auto; }.plans__iptv p { color: var(--color-accent); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.plans__iptv h3 { margin-top: .2rem; font-size: 1.35rem; }.plans__iptv div > span { color: var(--color-text-muted); font-size: .8rem; }.plans__iptv .button { flex: 0 0 auto; }
/* Coverage Checker */
.coverage { isolation: isolate; overflow: hidden; background: var(--color-background-secondary); }.coverage__container { display: grid; grid-template-columns: minmax(0, .92fr) minmax(23rem, .8fr); align-items: center; gap: clamp(2.5rem, 8vw, 8rem); }.coverage__map { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: .42; background-image: radial-gradient(circle, rgb(73 198 255 / 28%) 1px, transparent 1px); background-size: 2rem 2rem; mask-image: linear-gradient(90deg, transparent, black 30%, transparent 90%); }.coverage__map::before { position: absolute; top: 8%; right: -10%; width: 43rem; aspect-ratio: 1; border: 1px solid rgb(73 198 255 / 16%); border-radius: 45% 55% 51% 49%; box-shadow: 0 0 0 3rem rgb(73 198 255 / 3%), 0 0 0 7rem rgb(73 198 255 / 2%); content: ""; transform: rotate(-15deg); }.coverage__route { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); transform-origin: left; }.coverage__route--one { top: 38%; right: 2%; width: 38rem; transform: rotate(-25deg); }.coverage__route--two { bottom: 24%; right: 14%; width: 31rem; transform: rotate(17deg); }.coverage__point { position: absolute; width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 1rem .18rem rgb(73 198 255 / 60%); animation: coverage-pulse 2.8s ease-in-out infinite; }.coverage__point--one { top: 25%; right: 19%; }.coverage__point--two { top: 52%; right: 43%; animation-delay: .7s; }.coverage__point--three { bottom: 21%; right: 13%; animation-delay: 1.5s; } @keyframes coverage-pulse { 50% { opacity: .35; transform: scale(.6); } }
.coverage__panel { padding: clamp(1.4rem, 3vw, 2.25rem); border: 1px solid rgb(232 238 248 / 14%); border-radius: var(--radius-lg); background: rgb(16 28 48 / 74%); box-shadow: var(--shadow-card), 0 0 3rem rgb(73 198 255 / 7%); backdrop-filter: blur(1.3rem); }.coverage__label { display: block; margin-bottom: .7rem; color: var(--color-text); font-size: .82rem; font-weight: 600; }.coverage__controls { display: flex; gap: .7rem; }.coverage__input { flex: 1; min-width: 0; height: 3.25rem; padding: 0 1rem; border: 1px solid var(--color-border); border-radius: .75rem; outline: none; background: rgb(7 17 31 / 60%); color: var(--color-white); transition: border-color var(--transition-base), box-shadow var(--transition-base); }.coverage__input::placeholder { color: rgb(165 180 203 / 67%); }.coverage__input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .25rem rgb(73 198 255 / 12%); }.coverage__input[aria-invalid="true"] { border-color: #ff778d; }.coverage__submit { position: relative; flex: 0 0 auto; }.coverage__help, .coverage__message { margin-top: .8rem; font-size: .75rem; }.coverage__message { min-height: 1.2em; color: #ff9cad; }.coverage__submit.is-loading { pointer-events: none; }.coverage__submit.is-loading [data-coverage-button-text] { opacity: 0; }.coverage__spinner { position: absolute; width: 1rem; aspect-ratio: 1; border: 2px solid rgb(255 255 255 / 35%); border-top-color: var(--color-white); border-radius: 50%; opacity: 0; animation: spin .7s linear infinite; }.coverage__submit.is-loading .coverage__spinner { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } }
.coverage__result { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.25rem; padding: 1rem; border: 1px solid; border-radius: var(--radius-sm); }.coverage__result[hidden] { display: none; }.coverage__result-icon { display: grid; flex: 0 0 auto; place-items: center; width: 1.65rem; aspect-ratio: 1; border-radius: 50%; font-size: .8rem; font-weight: 700; }.coverage__result strong { font-size: .87rem; }.coverage__result p { margin-top: .18rem; font-size: .76rem; line-height: 1.5; }.coverage__result--success { border-color: rgb(73 198 255 / 29%); background: rgb(73 198 255 / 8%); }.coverage__result--success .coverage__result-icon { background: var(--color-accent); color: var(--color-background); }.coverage__result--failure { border-color: rgb(255 119 141 / 25%); background: rgb(255 119 141 / 7%); }.coverage__result--failure .coverage__result-icon { background: #ff778d; color: var(--color-background); }

/* Services */
.services { isolation: isolate; overflow: hidden; background: var(--color-background); }.services__header { max-width: 48rem; }.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }.services__card { position: relative; min-height: 15.5rem; padding: clamp(1.4rem, 2.5vw, 2rem); overflow: hidden; border: 1px solid rgb(232 238 248 / 11%); border-radius: var(--radius-md); background: linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(16 28 48 / 57%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); backdrop-filter: blur(1rem); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }.services__card::after { position: absolute; right: -25%; bottom: -60%; width: 13rem; aspect-ratio: 1; border-radius: 50%; background: rgb(73 198 255 / 12%); content: ""; filter: blur(2.5rem); opacity: 0; transition: opacity var(--transition-base); }.services__card:hover { border-color: rgb(73 198 255 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 1.35rem 3rem rgb(0 0 0 / 30%), 0 0 2.2rem rgb(73 198 255 / 11%); transform: translateY(-.5rem); }.services__card:hover::after { opacity: 1; }.services__icon { display: grid; place-items: center; width: 3.1rem; aspect-ratio: 1; margin-bottom: 1.5rem; border: 1px solid rgb(91 80 200 / 40%); border-radius: .9rem; background: linear-gradient(135deg, rgb(91 80 200 / 25%), rgb(73 198 255 / 8%)); color: var(--color-accent); transition: transform var(--transition-base), box-shadow var(--transition-base); }.services__icon svg { width: 1.5rem; height: 1.5rem; }.services__card:hover .services__icon { box-shadow: 0 0 1.6rem rgb(73 198 255 / 25%); transform: scale(1.08) rotate(-4deg); }.services__card h3, .services__card p { position: relative; z-index: 1; }.services__card h3 { font-size: 1.18rem; letter-spacing: -.02em; }.services__card p { margin-top: .65rem; font-size: .875rem; line-height: 1.65; }
.services__connections { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: .5; pointer-events: none; }.services__connections span { position: absolute; width: 38rem; height: 1px; background: linear-gradient(90deg, transparent, rgb(73 198 255 / 65%), transparent); animation: connection-flow 6s linear infinite; }.services__connections span:nth-child(1) { top: 18%; left: -12rem; --line-angle: 25deg; transform: rotate(var(--line-angle)); }.services__connections span:nth-child(2) { top: 48%; right: -16rem; --line-angle: -22deg; transform: rotate(var(--line-angle)); animation-delay: -2s; }.services__connections span:nth-child(3) { bottom: 13%; left: 23%; --line-angle: 11deg; transform: rotate(var(--line-angle)); animation-delay: -4s; }.services__connections i { position: absolute; width: .38rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 .8rem .13rem var(--color-accent); animation: service-node 3s ease-in-out infinite; }.services__connections i:nth-of-type(1) { top: 26%; left: 18%; }.services__connections i:nth-of-type(2) { top: 53%; right: 20%; animation-delay: 1s; }.services__connections i:nth-of-type(3) { bottom: 18%; left: 50%; animation-delay: 2s; } @keyframes connection-flow { 50% { opacity: .25; transform: translateX(2.5rem) rotate(var(--line-angle)); } } @keyframes service-node { 50% { opacity: .25; transform: scale(.55); } }

/* Installation Process */
.installation { overflow: hidden; background: var(--color-background-secondary); }.installation__header { max-width: 43rem; }.installation__timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 3rem); padding: 0; margin: clamp(3rem, 7vw, 5.5rem) 0 0; list-style: none; }.installation__timeline::before { position: absolute; z-index: 0; top: 1.65rem; right: 9%; left: 9%; height: 2px; background: linear-gradient(90deg, rgb(67 59 151 / 38%), var(--color-accent), rgb(67 59 151 / 38%)); background-size: 200% 100%; box-shadow: 0 0 1.15rem rgb(73 198 255 / 52%); content: ""; animation: fiber-flow 3.8s linear infinite; }.installation__step { position: relative; z-index: 1; }.installation__marker { display: grid; place-items: center; width: 3.3rem; aspect-ratio: 1; border: 1px solid rgb(73 198 255 / 50%); border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 .45rem var(--color-background-secondary), 0 0 1.6rem rgb(73 198 255 / 27%); color: var(--color-accent); font-family: var(--font-heading); font-size: .75rem; font-weight: 600; }.installation__step:not(:last-child) .installation__marker::after { position: absolute; top: 1.15rem; right: clamp(-2.2rem, -2.4vw, -1.1rem); color: var(--color-accent); content: "→"; font-size: 1.1rem; opacity: .9; }.installation__step-content { max-width: 15rem; margin-top: 1.75rem; }.installation__label { color: var(--color-accent); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.installation__step h3 { margin-top: .55rem; font-size: 1.2rem; letter-spacing: -.02em; }.installation__step-content > p:last-child { margin-top: .65rem; font-size: .85rem; line-height: 1.65; } @keyframes fiber-flow { to { background-position: 200% 0; } }

/* Speed Test CTA */
.speed-test { background: var(--color-background); }.speed-test__card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .48fr); align-items: center; min-height: 25rem; padding: clamp(2rem, 6vw, 5rem); overflow: hidden; border: 1px solid rgb(232 238 248 / 15%); border-radius: var(--radius-lg); background: rgb(16 28 48 / 78%); box-shadow: var(--shadow-card), inset 0 1px 0 rgb(255 255 255 / 8%); backdrop-filter: blur(1.5rem); }.speed-test__gradient { position: absolute; z-index: -2; inset: -35%; background: radial-gradient(circle at 30% 60%, rgb(73 198 255 / 23%), transparent 23%), radial-gradient(circle at 75% 35%, rgb(91 80 200 / 42%), transparent 28%), radial-gradient(circle at 60% 72%, rgb(67 59 151 / 28%), transparent 24%); animation: speed-gradient 10s ease-in-out infinite alternate; }.speed-test__content { max-width: 38rem; }.speed-test__content .section__eyebrow { margin-bottom: 1rem; }.speed-test__content h2 { max-width: 13ch; font-size: clamp(2rem, 4.3vw, 3.75rem); }.speed-test__content > p:not(.section__eyebrow) { max-width: 30rem; margin-top: 1.25rem; font-size: 1.05rem; }.speed-test__button { margin-top: 2rem; }.speed-test__orb { position: relative; justify-self: center; display: grid; place-items: center; width: min(17rem, 28vw); min-width: 12rem; aspect-ratio: 1; border: 1px solid rgb(73 198 255 / 38%); border-radius: 50%; background: radial-gradient(circle at 36% 31%, rgb(255 255 255 / 13%), transparent 15%), rgb(7 17 31 / 39%); box-shadow: inset 0 0 3rem rgb(73 198 255 / 14%), 0 0 3rem rgb(73 198 255 / 20%); animation: speed-orb 4.2s ease-in-out infinite alternate; }.speed-test__orb::before, .speed-test__orb::after { position: absolute; border: 1px solid rgb(73 198 255 / 22%); border-radius: 50%; content: ""; }.speed-test__orb::before { inset: 10%; }.speed-test__orb::after { inset: -12%; border-style: dashed; animation: spin 14s linear infinite; }.speed-test__orb span { position: absolute; top: 31%; color: var(--color-accent); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.speed-test__orb strong { margin-top: 1rem; color: var(--color-white); font-family: var(--font-heading); font-size: 4.5rem; font-weight: 500; line-height: 1; }.speed-test__particles { position: absolute; z-index: -1; inset: 0; pointer-events: none; }.speed-test__particles span { position: absolute; width: .3rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 .8rem .14rem var(--color-accent); animation: speed-particle 5s ease-in-out infinite alternate; }.speed-test__particles span:nth-child(1) { top: 20%; left: 52%; }.speed-test__particles span:nth-child(2) { top: 72%; left: 43%; animation-delay: .7s; }.speed-test__particles span:nth-child(3) { top: 16%; right: 12%; animation-delay: 1.6s; }.speed-test__particles span:nth-child(4) { right: 29%; bottom: 14%; animation-delay: 2.1s; }.speed-test__particles span:nth-child(5) { top: 52%; left: 10%; animation-delay: .9s; }.speed-test__particles span:nth-child(6) { top: 38%; right: 39%; animation-delay: 2.7s; } @keyframes speed-gradient { to { transform: translate3d(5%, -3%, 0) scale(1.08); } } @keyframes speed-orb { to { transform: translateY(-.75rem) rotate(3deg); box-shadow: inset 0 0 4rem rgb(73 198 255 / 25%), 0 0 4rem rgb(73 198 255 / 31%); } } @keyframes speed-particle { to { opacity: .25; transform: translate3d(1.8rem, -2.2rem, 0); } }
.speed-test-dialog { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; padding: 1.25rem; }.speed-test-dialog[hidden] { display: none; }.speed-test-dialog__backdrop { position: absolute; inset: 0; background: rgb(7 17 31 / 78%); backdrop-filter: blur(.65rem); }.speed-test-dialog__panel { position: relative; width: min(100%, 43rem); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; border: 1px solid rgb(73 198 255 / 32%); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(21 35 64 / 98%), rgb(8 18 32 / 98%)); box-shadow: 0 2rem 5rem rgb(0 0 0 / 48%), 0 0 3rem rgb(73 198 255 / 12%); }.speed-test-dialog__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text); font-size: 1.35rem; line-height: 1; }.speed-test-dialog__close:hover { border-color: var(--color-accent); color: var(--color-accent); }.speed-test-dialog__panel h2 { max-width: 15ch; font-size: clamp(1.8rem, 4vw, 2.7rem); }.speed-test-dialog__description { margin-top: .75rem; font-size: .9rem; }.speed-test-dialog__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 2rem; }.speed-test-dialog__metrics div { padding: 1rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgb(255 255 255 / 4%); }.speed-test-dialog__metrics span, .speed-test-dialog__metrics small { display: block; color: var(--color-text-muted); font-size: .67rem; }.speed-test-dialog__metrics strong { display: inline-block; margin: .35rem .22rem 0 0; color: var(--color-white); font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; }.speed-test-dialog__progress { height: .35rem; margin-top: 1.5rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 8%); }.speed-test-dialog__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent)); box-shadow: 0 0 1rem var(--color-accent); transition: width 160ms linear; }.speed-test-dialog__action { margin-top: 1.25rem; }.speed-test-dialog__notice { margin-top: 1rem; color: var(--color-text-muted); font-size: .72rem; line-height: 1.55; }

/* FAQ */
.faq { background: var(--color-background-secondary); }.faq__container { display: grid; grid-template-columns: minmax(0, .75fr) minmax(25rem, 1fr); align-items: start; gap: clamp(2.5rem, 9vw, 9rem); }.faq__header { position: sticky; top: 2rem; max-width: 29rem; }.faq__list { display: grid; gap: .75rem; }.faq__item { overflow: hidden; border: 1px solid rgb(232 238 248 / 11%); border-radius: var(--radius-sm); background: rgb(16 28 48 / 60%); transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base); }.faq__item.is-open { border-color: rgb(73 198 255 / 36%); background: rgb(16 28 48 / 86%); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 17%), 0 0 1.8rem rgb(73 198 255 / 7%); }.faq__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.35rem 1.4rem; border: 0; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-size: 1rem; font-weight: 500; text-align: left; }.faq__plus { position: relative; flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-left: 1rem; color: var(--color-accent); }.faq__plus::before, .faq__plus::after { position: absolute; top: 50%; left: 50%; width: 100%; height: 1.5px; background: currentColor; content: ""; transition: transform var(--transition-base); }.faq__plus::before { transform: translate(-50%, -50%); }.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }.faq__item.is-open .faq__plus::after { transform: translate(-50%, -50%) rotate(0); }.faq__answer { padding: 0 4.2rem 1.4rem 1.4rem; }.faq__answer p { font-size: .9rem; line-height: 1.65; }

/* Contact */
.contact { position: relative; isolation: isolate; overflow: hidden; background: var(--color-background); }.contact__ambient { position: absolute; z-index: -1; top: 8%; right: -15rem; width: 38rem; aspect-ratio: 1; border-radius: 50%; background: rgb(91 80 200 / 20%); box-shadow: 0 0 7rem 3rem rgb(73 198 255 / 8%); filter: blur(3rem); }.contact__container { display: grid; grid-template-columns: minmax(0, .72fr) minmax(29rem, 1fr); align-items: center; gap: clamp(2.5rem, 9vw, 9rem); }.contact__intro { max-width: 31rem; }.contact__note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }.contact__note span { color: var(--color-accent); }.contact__note p { font-size: .8rem; }.contact__form { padding: clamp(1.4rem, 3vw, 2.35rem); border: 1px solid rgb(232 238 248 / 14%); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(16 28 48 / 76%)); box-shadow: var(--shadow-card), inset 0 1px 0 rgb(255 255 255 / 7%); backdrop-filter: blur(1.3rem); }.contact__form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.contact__field { display: grid; gap: .5rem; }.contact__field--full { grid-column: 1 / -1; }.contact__field label { color: var(--color-text); font-size: .78rem; font-weight: 600; }.contact__field input, .contact__field select, .contact__field textarea { width: 100%; border: 1px solid var(--color-border); border-radius: .7rem; outline: 0; background: rgb(7 17 31 / 62%); color: var(--color-text); transition: border-color var(--transition-base), box-shadow var(--transition-base); }.contact__field input, .contact__field select { height: 3rem; padding: 0 .9rem; }.contact__field textarea { min-height: 7rem; padding: .8rem .9rem; resize: vertical; }.contact__field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.25rem, calc(100% - .7rem) 1.25rem; background-size: .3rem .3rem, .3rem .3rem; background-repeat: no-repeat; }.contact__field input::placeholder, .contact__field textarea::placeholder { color: rgb(165 180 203 / 60%); }.contact__field input:focus, .contact__field select:focus, .contact__field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .22rem rgb(73 198 255 / 10%); }.contact__field.is-invalid input, .contact__field.is-invalid select, .contact__field.is-invalid textarea { border-color: #ff778d; }.contact__captcha { display: flex; align-items: center; gap: .75rem; width: fit-content; margin-top: 1.4rem; color: var(--color-text-muted); font-size: .78rem; cursor: pointer; }.contact__captcha input { position: absolute; opacity: 0; }.contact__captcha-box { display: grid; place-items: center; width: 1.2rem; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: .25rem; color: transparent; transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); }.contact__captcha input:checked + .contact__captcha-box { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-background); }.contact__captcha input:focus-visible + .contact__captcha-box { outline: 2px solid var(--color-accent); outline-offset: 3px; }.contact__captcha small { display: block; margin-top: .08rem; color: rgb(165 180 203 / 65%); font-size: .65rem; }.contact__form-message { min-height: 1.2em; margin-top: .85rem; color: #ff9cad; font-size: .75rem; }.contact__submit { margin-top: .55rem; }
.contact-success { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; padding: 1.25rem; }.contact-success[hidden] { display: none; }.contact-success__backdrop { position: absolute; inset: 0; background: rgb(7 17 31 / 78%); backdrop-filter: blur(.5rem); }.contact-success__dialog { position: relative; width: min(100%, 29rem); padding: 2.5rem; border: 1px solid rgb(73 198 255 / 32%); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 2rem 5rem rgb(0 0 0 / 45%), 0 0 3rem rgb(73 198 255 / 13%); text-align: center; }.contact-success__icon { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--color-accent); color: var(--color-background); font-weight: 700; }.contact-success__dialog h2 { font-size: 1.5rem; }.contact-success__dialog p { margin-top: .75rem; font-size: .875rem; }.contact-success__dialog .button { margin-top: 1.5rem; }
.contact__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.contact-success--error .contact-success__dialog { border-color: rgb(255 119 141 / 38%); box-shadow: 0 2rem 5rem rgb(0 0 0 / 45%), 0 0 3rem rgb(255 119 141 / 12%); }.contact-success--error .contact-success__icon { background: #ff778d; }

/* Contact number check */
.contact__human-check { display: flex; align-items: center; gap: .75rem; width: min(100%, 24rem); margin-top: 1.4rem; padding: .65rem .75rem .65rem 1rem; border: 1px solid var(--color-border); border-radius: .8rem; background: rgb(7 17 31 / 48%); }.contact__human-check-copy { display: grid; flex: 1 1 auto; gap: .15rem; }.contact__human-check-label { color: var(--color-text-muted); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.contact__human-check strong { color: var(--color-text); font-size: .85rem; font-weight: 600; }.contact__human-check input { width: 4.6rem; height: 2.35rem; padding: 0 .55rem; border: 1px solid var(--color-border); border-radius: .55rem; outline: 0; background: rgb(16 28 48 / 86%); color: var(--color-text); text-align: center; transition: border-color var(--transition-base), box-shadow var(--transition-base); }.contact__human-check input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .2rem rgb(73 198 255 / 10%); }.contact__human-check.is-invalid { border-color: rgb(255 119 141 / 60%); }.contact__human-refresh { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: rgb(73 198 255 / 9%); color: var(--color-accent); font-size: 1.15rem; transition: transform var(--transition-base), background-color var(--transition-base); }.contact__human-refresh:hover { background: rgb(73 198 255 / 17%); transform: rotate(100deg); }

/* Footer */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 7vw, 6rem); background: #050c16; }.site-footer__fiber { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--color-primary-light) 25%, var(--color-accent) 50%, var(--color-primary-light) 75%, transparent 100%); background-size: 200% 100%; box-shadow: 0 0 1rem rgb(73 198 255 / 70%); animation: footer-fiber 4s linear infinite; }.site-footer__grid { display: grid; grid-template-columns: minmax(16rem, 1.55fr) repeat(2, minmax(10rem, .65fr)); gap: clamp(2.5rem, 7vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); }.site-footer__logo { display: block; width: min(11rem, 100%); }.site-footer__logo img { width: 100%; height: auto; }.site-footer__brand > p { max-width: 20rem; margin-top: 1.5rem; font-size: .83rem; line-height: 1.7; }.site-footer__socials { display: flex; gap: .65rem; margin-top: 1.5rem; }.site-footer__socials a { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base); }.site-footer__socials a:hover { border-color: var(--color-accent); background: rgb(73 198 255 / 10%); color: var(--color-accent); transform: translateY(-.2rem); }.site-footer__socials svg { width: 1rem; height: 1rem; }.site-footer__links, .site-footer__contact { display: grid; align-content: start; gap: .7rem; }.site-footer h2 { margin-bottom: .65rem; color: var(--color-white); font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.site-footer__links a, .site-footer__contact a, .site-footer__contact p { color: var(--color-text-muted); font-size: .83rem; font-style: normal; transition: color var(--transition-base); }.site-footer__links a:hover, .site-footer__contact a:hover { color: var(--color-accent); }.site-footer__contact p { margin-top: .45rem; line-height: 1.7; }.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--color-border); }.site-footer__bottom p, .site-footer__bottom a { color: rgb(165 180 203 / 76%); font-size: .72rem; }.site-footer__bottom div { display: flex; gap: 1.25rem; }.site-footer__bottom a:hover { color: var(--color-accent); } @keyframes footer-fiber { to { background-position: 200% 0; } }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--color-primary-light) var(--color-background); }
*::-webkit-scrollbar { width: .65rem; }
*::-webkit-scrollbar-track { background: var(--color-background); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--color-background); border-radius: 999px; background: var(--color-primary-light); }
*::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Responsive breakpoints */
@media (max-width: 767px) {
  :root { --container-gutter: 1.25rem; }
  .button { width: 100%; }
  .hero__container { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding-top: 7.5rem; padding-bottom: 1.5rem; }
  .hero__logo { top: 1.15rem; width: 7.25rem; }
  .hero__title { max-width: 9.5ch; }.hero__visual { order: 2; align-self: center; width: min(100%, 29rem); min-height: 23rem; margin-top: 1rem; }.hero__router { width: 106%; }.hero__speed-card { min-width: 6.7rem; padding: .65rem .75rem; }.hero__speed-card strong { font-size: 1.05rem; }.hero__speed-card--top { top: 8%; }.hero__speed-card--middle { left: 0; }.hero__speed-card--bottom { right: 0; bottom: 5%; }.hero__stats { order: 3; width: 100%; margin-top: 0; }.hero__stat { padding: 1rem .65rem 0 0; }.hero__stat + .hero__stat { padding-left: .65rem; }.hero__stat dd { font-size: .65rem; }
  .why-speedo__grid { grid-template-columns: 1fr; }.why-speedo__card { min-height: auto; }.why-speedo__network { display: none; }
  .plans__grid { grid-template-columns: 1fr; }.plans__card { min-height: auto; }.plans__iptv { flex-direction: column; align-items: flex-start; }.plans__iptv .button { width: 100%; }
  .coverage__container { grid-template-columns: 1fr; gap: 2rem; }.coverage__controls { flex-direction: column; }.coverage__submit { width: 100%; }.coverage__map { opacity: .18; }
  .services__grid { grid-template-columns: 1fr; }.services__card { min-height: auto; }.services__connections { opacity: .22; }
  .installation__timeline { display: grid; grid-template-columns: 1fr; gap: 2.25rem; margin-top: 3rem; padding-left: 3.8rem; }.installation__timeline::before { top: 1.65rem; bottom: 1.65rem; left: 1.62rem; width: 2px; height: auto; background: linear-gradient(180deg, rgb(67 59 151 / 38%), var(--color-accent), rgb(67 59 151 / 38%)); background-size: 100% 200%; }.installation__marker { position: absolute; top: 0; left: -3.8rem; }.installation__step:not(:last-child) .installation__marker::after { top: auto; right: auto; bottom: -1.95rem; left: 1.05rem; content: "↓"; }.installation__step-content { max-width: 30rem; margin-top: 0; }
  .speed-test__card { grid-template-columns: 1fr; text-align: center; }.speed-test__content { margin-inline: auto; }.speed-test__content h2 { margin-inline: auto; }.speed-test__content > p:not(.section__eyebrow) { margin-inline: auto; }.speed-test__orb { width: min(15rem, 55vw); margin-top: 2.75rem; }.speed-test__button { width: 100%; }
  .speed-test-dialog__metrics { grid-template-columns: repeat(2, 1fr); }.speed-test-dialog__action { width: 100%; }
  .faq__container { grid-template-columns: 1fr; gap: 2.5rem; }.faq__header { position: static; }.faq__trigger { padding: 1.15rem; }.faq__answer { padding: 0 3.2rem 1.15rem 1.15rem; }
  .contact__container { grid-template-columns: 1fr; gap: 2.5rem; }.contact__form-grid { grid-template-columns: 1fr; }.contact__field--full { grid-column: auto; }.contact__submit { width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }.site-footer__bottom { flex-direction: column; align-items: flex-start; }.site-footer__bottom div { flex-wrap: wrap; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --container-gutter: 2rem; }
  .why-speedo__grid { grid-template-columns: repeat(2, 1fr); }
  .plans__grid { grid-template-columns: repeat(2, 1fr); }
  .coverage__container { grid-template-columns: 1fr; gap: 3rem; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Legal and consent content */
.contact__privacy { margin: .85rem 0 0; color: var(--color-text-muted, #a8b4c4); font-size: .82rem; line-height: 1.6; }
.contact__privacy a, .legal-page a { color: #43d9ff; text-underline-offset: .18em; }
.legal-page { min-height: 100vh; margin: 0; background: #07111f; color: #eaf4ff; font-family: Inter, system-ui, sans-serif; }
.legal-page__main { width: min(900px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 5rem; }
.legal-page__back { display: inline-block; margin-bottom: 1.5rem; }
.legal-page__card { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(120, 211, 255, .18); border-radius: 1.5rem; background: rgba(13, 29, 48, .92); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.legal-page__card h1 { margin: .25rem 0 1rem; font-family: Poppins, Inter, sans-serif; font-size: clamp(2rem, 6vw, 3.5rem); }
.legal-page__card h2 { margin: 2rem 0 .5rem; font-size: 1.2rem; }
.legal-page__card p { color: #c4cfdb; line-height: 1.75; }