Exit code: 0
Wall time: 3 seconds
Output:
/* ==========================================================================
   Nordic IPTV, design system
   ------------------------------------------------------------------------
   Two brand colours, paired by construction rather than by eye: nordic blue
   #1089F2 is hsl(208 90% 51%), and the green is the same saturation and
   lightness rotated to hsl(162 90% 51%) = #12F2AF. They therefore carry equal
   weight on screen, which is why they can sit side by side without one
   swamping the other.

   Gradient is a seasoning, not the dish. It appears on emphasis words, the
   12 month plan frame, and two deliberate surfaces. Everywhere else the two
   colours are used as flat, separate shades.

   Texture is ours: widely spaced diagonal hairlines with a faint signal-arc
   pattern on dark grounds, both masked so they never reach the text.

   Mobile first. Base rules are the phone, min-width queries adapt up.
   ========================================================================== */

@property --glint { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Nordic blue */
  --b-100: #DCEDFE;
  --b-200: #B4D8FC;
  --b-300: #7CBEF9;
  --b-400: #47A5F5;
  --b-500: #1089F2;
  --b-600: #0B6FC7;
  --b-700: #08579C;
  --b-800: #063F72;

  /* Green equivalent, same S and L as the blue */
  --g-100: #D5FCF0;
  --g-200: #A6F8DC;
  --g-300: #5CF4C4;
  --g-400: #12F2AF;
  --g-500: #0FD79B;
  --g-600: #0CB381;
  --g-700: #098A64;
  --g-800: #076B4E;

  /* Night, lifted so it reads as deep water */
  --d-950: #081729;
  --d-900: #0C1F38;
  --d-800: #122A48;
  --d-700: #1B3A5E;

  /* Light */
  --paper: #FFFFFF;
  --frost: #F4F8FD;
  --ice:   #E6F0FA;

  /* Ink */
  --ink:   #0C2036;
  --ink-2: #243B54;
  --body:  #4F657D;
  --muted: #8098B2;
  --on-d:    rgba(255,255,255,.80);
  --on-d-mu: rgba(255,255,255,.58);

  --amber: #FFC02E;
  --live:  #FF5C6B;

  /* Used sparingly */
  --grad: linear-gradient(112deg, #12F2AF 0%, #17C8D6 46%, #1089F2 100%);

  --line:   rgba(12,32,54,.11);
  --line-2: rgba(12,32,54,.18);
  --line-d: rgba(255,255,255,.15);

  --sh-1: 0 1px 3px rgba(12,32,54,.06);
  --sh-2: 0 12px 30px rgba(12,32,54,.09);
  --sh-3: 0 26px 64px rgba(12,32,54,.15);

  --f-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-p:  999px;

  --ease: cubic-bezier(.2,.8,.3,1);

  --shell: 1200px;
  --gutter: 20px;
  --pad: 66px;
  --hdr: 66px;
}

@media (min-width: 700px)  { :root { --gutter: 30px; --pad: 88px; --hdr: 74px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --pad: 112px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body { font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--b-600); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 7.4vw, 3.85rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.76rem, 5.4vw, 2.85rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.04rem, 2.3vw, 1.26rem); font-weight: 700; letter-spacing: -.025em; }
p  { text-wrap: pretty; }

::selection { background: var(--g-400); color: var(--d-950); }
:focus-visible { outline: 3px solid var(--g-400); outline-offset: 3px; border-radius: var(--r-sm); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--b-600); color: #fff; padding: 13px 22px; font-weight: 600; }
.skip:focus { left: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* Emphasis: gradient on dark, solid green on light */
.hl { color: var(--g-700); }
.sec-d .hl, .hero .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-b { color: var(--b-600); }
.sec-d .hl-b { color: var(--b-300); }

/* --------------------------------------------------------------------------
   3. Layout and texture
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }

.sec { padding-block: var(--pad); position: relative; overflow: hidden; }
.sec-frost { background: var(--frost); }
.sec-d { background: var(--d-900); color: var(--on-d); }
.sec-d h1, .sec-d h2, .sec-d h3 { color: #fff; }
.sec-tight { padding-block: calc(var(--pad) * .56); }

/* --- Textures. Four of them, so no two neighbouring sections read alike. --- */

.tex::before { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* 1. Hairline weave, widely spaced */
.tex-1::before {
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(12,32,54,.032) 26px 27px);
  mask-image: linear-gradient(180deg, #000, transparent 56%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 56%);
}
.sec-d.tex-1::before { background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.05) 26px 27px); }

/* 2. Frost grain: a fine two-phase dot lattice, like ice crystal */
.tex-2::before {
  background-image:
    radial-gradient(rgba(12,32,54,.11) .9px, transparent .9px),
    radial-gradient(rgba(12,32,54,.07) .9px, transparent .9px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
}
.sec-d.tex-2::before { background-image: radial-gradient(rgba(255,255,255,.13) .9px, transparent .9px), radial-gradient(rgba(255,255,255,.08) .9px, transparent .9px); }

/* 3. Signal rings, expanding from one corner */
.tex-3::before {
  background-image: repeating-radial-gradient(circle at 88% 6%, rgba(12,32,54,.055) 0 1px, transparent 1px 52px);
  mask-image: radial-gradient(circle at 88% 6%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 88% 6%, #000, transparent 72%);
}
.sec-d.tex-3::before { background-image: repeating-radial-gradient(circle at 88% 6%, rgba(255,255,255,.07) 0 1px, transparent 1px 52px); }

/* 5. The reference grid. Used once, on the pricing section only. */
.tex-5::before {
  background-image: linear-gradient(rgba(12,32,54,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,32,54,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
}
.sec-d.tex-5::before { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }

/* 4. Contour lines, like a depth chart of the fjord */
.tex-4::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(12,32,54,.035) 34px 35px);
  mask-image: linear-gradient(0deg, #000, transparent 62%);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 62%);
}
.sec-d.tex-4::before { background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.05) 34px 35px); }

/* One soft tint. Applied to two sections in the whole page, placed low so it
   never sits behind a heading. */
.tint > .tint-o {
  position: absolute; bottom: -24%; left: -12%; width: 50%; height: 72%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18,242,175,.12), transparent 74%);
}

.head { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.head p { margin-top: 15px; font-size: 1.02rem; }
.sec-d .head p { color: var(--on-d); }

/* Compact labels are reserved for the sections the user explicitly marked. */
.tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 9px 18px; border-radius: var(--r-p); background: var(--g-100); color: var(--g-800); font-family: var(--f-display); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sec-d .tag { background: rgba(18,242,175,.13); color: var(--g-300); }
.tag .ic { width: 1em; height: 1em; }
/* Gradient variant, used on the three sections that ask for more weight */
.tag-grad { background: var(--grad); color: var(--d-950); box-shadow: 0 8px 22px rgba(18,242,175,.26); }
.sec-d .tag-grad { background: var(--grad); color: var(--d-950); }
.tag-grad .ic { color: var(--d-950); }

.grid { display: grid; gap: 16px; }
@media (min-width: 640px)  { .g-2 { grid-template-columns: repeat(2,1fr); } .g-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   4. Glass
   -------------------------------------------------------------------------- */

.glass {
  position: relative;
  background: linear-gradient(152deg, rgba(255,255,255,.18), rgba(255,255,255,.055) 62%);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(4,14,28,.30);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: .94rem; letter-spacing: -.012em;
  padding: 16px 30px; border-radius: var(--r-p);
  position: relative; overflow: hidden; white-space: nowrap; isolation: isolate;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .ic { width: 1.05em; height: 1.05em; }
.btn-sm { padding: 11px 20px; font-size: .84rem; }
.btn-lg { padding: 19px 36px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }

.btn-pri { color: #fff; background: var(--b-500); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(6,63,114,.34), 0 4px 12px rgba(16,137,242,.24); }
.btn-pri:hover { background: var(--b-600); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,137,242,.34), 0 0 0 4px rgba(16,137,242,.16); }

.btn-grn { color: var(--d-950); background: var(--g-400); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(7,107,78,.26), 0 4px 12px rgba(18,242,175,.24); }
.btn-grn:hover { background: var(--g-300); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18,242,175,.34), 0 0 0 4px rgba(18,242,175,.18); }

.btn-wa { color: #fff; background: #22C35E; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(12,110,50,.3); }
.btn-wa:hover { background: #1BA850; transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(34,195,94,.18); }

.btn-line { color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); }
.btn-line:hover { border-color: var(--b-500); color: var(--b-600); transform: translateY(-2px); box-shadow: var(--sh-1); }

.btn-ghost-d { color: #fff; border: 1.5px solid rgba(255,255,255,.24); }
.btn-ghost-d:hover { border-color: var(--g-400); color: var(--g-300); transform: translateY(-2px); }

/* VIP offer button. Glass shell, white chip, static hairline ring, a conic
   glint that travels the border, and a sheen that sweeps on hover. */
.btn-vip {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 8px 26px 8px 8px; border-radius: var(--r-p);
  isolation: isolate; overflow: hidden; white-space: nowrap;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.055));
  backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 18px 40px -18px rgba(0,0,0,.75);
  font-family: var(--f-display); font-weight: 800; font-size: 1.02rem; color: #fff;
  transition: transform .24s var(--ease), box-shadow .24s ease, background .24s ease;
}
/* static hairline ring */
.btn-vip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: rgba(255,255,255,.24);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* sheen */
.btn-vip::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .8s var(--ease);
}
.btn-vip:hover { transform: translateY(-4px); background: linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 30px 60px -22px rgba(0,0,0,.75), 0 0 34px -8px rgba(18,242,175,.5); }
.btn-vip:hover::after { transform: translateX(130%); }
.btn-vip:active { transform: translateY(-1px) scale(.99); }
/* travelling glint, our two colours rather than plain white */
.btn-vip .glint {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--glint),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 58deg,
    rgba(18,242,175,.95) 84deg, rgba(255,255,255,.98) 96deg, rgba(16,137,242,.95) 108deg,
    rgba(255,255,255,0) 134deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glint 4.5s linear infinite;
}
@keyframes glint { to { --glint: 360deg; } }
.btn-vip .chip { position: relative; z-index: 3; display: inline-grid; place-items: center; height: 46px; padding: 0 17px; border-radius: var(--r-p); background: #fff; color: var(--ink); font-size: .92rem; font-weight: 800; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.btn-vip .lbl, .btn-vip .ic { position: relative; z-index: 3; }
.btn-vip .ic { width: 1.1em; height: 1.1em; transition: transform .24s var(--ease); }
.btn-vip:hover .ic { transform: translateX(5px); }

.link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: var(--b-600); }
.link .ic { transition: transform .2s ease; }
.link:hover .ic { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header, liquid glass
   -------------------------------------------------------------------------- */

.hdr { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: calc(100% - 20px); max-width: var(--shell); z-index: 100; }
.hdr-in {
  position: relative; display: flex; align-items: center; gap: 14px; height: var(--hdr);
  padding: 0 10px 0 16px; border-radius: var(--r-p); overflow: hidden;
  background: linear-gradient(152deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 60%);
  backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(255,255,255,.08), 0 14px 40px rgba(4,14,28,.34);
  transition: background .3s ease, box-shadow .3s ease;
}
.hdr-in::before { content: ""; position: absolute; top: 0; left: 8%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); z-index: 1; }
/* The actual refraction: a layer behind the nav content that bends whatever
   is scrolling underneath the pill instead of just blurring it, which is
   the difference between a filter and real glass. Guarded so a browser
   without backdrop-filter support keeps the plain blurred pill and loses
   nothing. */
.hdr-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hdr-in::after { backdrop-filter: url(#glass-distort); -webkit-backdrop-filter: url(#glass-distort); opacity: .5; }
}
.hdr.is-stuck { position: fixed; top: 8px; }
.hdr.is-stuck .hdr-in { background: linear-gradient(152deg, rgba(18,42,72,.88), rgba(18,42,72,.74) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 44px rgba(4,14,28,.48); }

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { display: block; width: 38px; height: 38px; }
.brand-txt { font-family: var(--f-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.04em; color: #fff; line-height: 1; }
.brand-txt b { font-weight: 800; color: var(--g-400); }

.nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 26px; }
.nav-list a { position: relative; font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.84); transition: color .18s ease; }
.nav-list a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; border-radius: 2px; background: var(--g-400); transition: width .25s var(--ease); }
.nav-list a:hover { color: #fff; }
.nav-list a:hover::after { width: 100%; }
.hdr-right { display: none; }

.burger { display: flex; flex-direction: column; gap: 5px; padding: 9px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .28s var(--ease), opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 32px var(--gutter); background: var(--d-950); overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav-x { position: absolute; top: 16px; right: 20px; font-size: 2.2rem; line-height: 1; color: #fff; }
.mnav-list { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 26px; }
.mnav-list a { display: block; padding: 12px 8px; font-family: var(--f-display); font-size: 1.42rem; font-weight: 700; color: #fff; }
.mnav .btn { width: 100%; max-width: 300px; }
.mnav-contact { display: flex; gap: 10px; margin-top: 22px; width: 100%; max-width: 300px; }
.mnav-contact a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: var(--r-p); border: 1px solid var(--line-d); font-size: .84rem; font-weight: 600; color: #fff; }

@media (min-width: 1024px) { .nav, .hdr-right { display: flex; align-items: center; } .burger { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--hdr) + 34px); padding-bottom: 0;
  background:
    radial-gradient(760px 420px at 24% -6%, rgba(18,242,175,.16), transparent 62%),
    radial-gradient(880px 520px at 82% 8%, rgba(16,137,242,.26), transparent 64%),
    linear-gradient(180deg, var(--d-950), var(--d-900) 60%, var(--d-800));
  color: var(--on-d);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(102deg, transparent 0 58px, rgba(18,242,175,.05) 58px 60px, transparent 60px 118px),
    repeating-linear-gradient(78deg, transparent 0 92px, rgba(16,137,242,.06) 92px 94px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent 76%);
}
.hero-in { position: relative; display: grid; gap: 26px; padding-bottom: 38px; }
.hero-copy { text-align: center; }
.hero h1 { color: #fff; margin-bottom: 15px; font-size: clamp(2.05rem, 6.6vw, 3.4rem); }
.hero .lede { font-size: .97rem; max-width: 56ch; margin: 0 auto 24px; color: var(--on-d); }

/* Trustpilot, official light block */
.tp { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; margin-bottom: 22px; border-radius: var(--r-p); background: #fff; box-shadow: 0 8px 22px rgba(4,14,28,.26); }
.tp-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: .86rem; font-weight: 700; color: #191919; }
.tp-name .ic { width: 1.05em; height: 1.05em; color: #00B67A; }
.tp-stars { display: flex; gap: 2px; }
.tp-stars span { display: grid; place-items: center; width: 21px; height: 21px; background: #00B67A; }
.tp-stars .ic { width: 14px; height: 14px; color: #fff; }
.tp em { font-style: normal; font-size: .8rem; color: #4a4a4a; }
.tp em b { color: #191919; font-weight: 700; }

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Countdown, tiles with a live dot */
.count { display: flex; align-items: center; gap: 11px; }
.count-lbl { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--on-d-mu); }
.count-lbl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-400); box-shadow: 0 0 0 0 rgba(18,242,175,.55); animation: pulse 1.9s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18,242,175,.55); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.count-t { display: flex; align-items: center; gap: 5px; }
.count-t .t { display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 9px 6px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.count-t b { font-family: var(--f-display); font-weight: 800; font-size: 1.14rem; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.count-t i { font-style: normal; font-size: .56rem; letter-spacing: .12em; color: var(--on-d-mu); margin-top: 4px; }
.count-t .c { font-family: var(--f-display); font-weight: 800; color: rgba(255,255,255,.35); }

/* Trust row: bare inline items, no box, small. It reassures, it does not
   demand a third of the hero. */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 20px; }
.trust div { display: inline-flex; align-items: center; gap: 7px; }
.trust .ic { width: 1em; height: 1em; color: var(--g-400); }
.trust b { font-size: .78rem; font-weight: 600; color: var(--on-d); letter-spacing: -.01em; }

.devrow { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-d); }
.devrow img { width: 100%; max-width: min(430px,100%); margin-inline: auto; opacity: .8; }

.hero-art { position: relative; display: grid; place-items: center; }
.hero-art::before { content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(18,242,175,.20), rgba(16,137,242,.20) 52%, transparent 74%); }
.hero-art img { position: relative; filter: drop-shadow(0 30px 56px rgba(4,14,28,.6)); }

@media (min-width: 960px) {
  .hero { padding-top: calc(var(--hdr) + 84px); }
  .hero-in { grid-template-columns: 1.04fr .96fr; align-items: center; gap: 46px; padding-bottom: 66px; }
  .hero-copy { text-align: left; }
  .hero .lede { margin-inline: 0; font-size: 1.1rem; }
  .hero-cta { flex-direction: row; justify-content: flex-start; gap: 24px; }
  .devrow img { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   8. Channel rail
   -------------------------------------------------------------------------- */

.rail { display: grid; gap: 30px; align-items: start; }
.rail-copy p { margin-bottom: 22px; }
.checks { display: grid; gap: 12px; margin-bottom: 26px; }
.checks li { display: flex; align-items: flex-start; gap: 11px; font-size: .89rem; }
.checks .tick { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: .12em; border-radius: 50%; background: var(--g-100); color: var(--g-700); }
.sec-d .checks .tick { background: rgba(18,242,175,.16); color: var(--g-300); }
.checks .tick .ic { width: 11px; height: 11px; }

.chan-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.chan-tab { padding: 9px 17px; border-radius: var(--r-p); background: var(--paper); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-2); transition: all .18s ease; }
.chan-tab:hover { border-color: var(--g-500); color: var(--g-800); }
.chan-tab.is-on { background: var(--d-900); border-color: var(--d-900); color: #fff; }
.chan-list { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.chan-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-sm); font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: all .18s ease; }
.chan-list li:nth-child(odd) { background: var(--frost); }
.chan-list li:hover { background: var(--b-100); }
.chan-list li.is-on { background: var(--d-900); color: #fff; }
.chan-list .no { font-family: var(--f-display); font-weight: 800; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; min-width: 34px; }
.chan-list li.is-on .no { color: var(--g-400); }
.chan-list .hd { margin-left: auto; padding: 3px 9px; border-radius: var(--r-p); background: var(--g-100); color: var(--g-800); font-size: .64rem; font-weight: 800; letter-spacing: .04em; }
.chan-list li.is-on .hd { background: rgba(18,242,175,.2); color: var(--g-300); }
.chan-foot { margin-top: 14px; font-size: .82rem; font-weight: 600; color: var(--muted); text-align: center; }

@media (min-width: 900px) { .rail { grid-template-columns: .9fr 1.1fr; gap: 54px; } }

/* --------------------------------------------------------------------------
   9. Split blocks, no frame around artwork
   -------------------------------------------------------------------------- */

.split { display: grid; gap: 32px; align-items: center; }
.split h2 { margin-bottom: 14px; }
.split p { margin-bottom: 24px; }
.split-art { position: relative; display: grid; place-items: center; }
.split-art img { width: 100%; filter: drop-shadow(0 26px 50px rgba(4,14,28,.4)); }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: 58px; } .split-rev .split-art { order: 2; } }

.slot { display: grid; place-items: center; text-align: center; min-height: 230px; padding: 28px; border-radius: var(--r-xl); background: radial-gradient(closest-side, rgba(16,137,242,.13), transparent 78%); color: var(--muted); }
.sec-d .slot { background: radial-gradient(closest-side, rgba(18,242,175,.13), transparent 78%); color: var(--on-d-mu); }
.slot .ic { width: 2em; height: 2em; margin: 0 auto 10px; opacity: .5; }
.slot b { display: block; font-family: var(--f-display); font-size: .92rem; color: var(--ink-2); }
.sec-d .slot b { color: #fff; }
.slot span { display: block; margin-top: 4px; font-size: .76rem; }

/* --------------------------------------------------------------------------
   10. Offer band
   -------------------------------------------------------------------------- */

.offer { position: relative; display: grid; gap: 22px; padding: 32px 26px; border-radius: var(--r-xl); overflow: hidden; background: var(--d-900); color: #fff; align-items: center; }
Exit code: 0
Wall time: 1.6 seconds
Output:
.offer::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.05) 26px 27px); }
.offer::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad); }
.offer > * { position: relative; }
.offer-pct { display: flex; align-items: baseline; gap: 4px; font-family: var(--f-display); font-weight: 800; line-height: .86; letter-spacing: -.055em; color: var(--g-400); }
.offer-pct b { font-size: clamp(3.2rem,13vw,4.6rem); }
.offer-pct i { font-style: normal; font-size: clamp(1.1rem,4vw,1.5rem); }
.offer h3 { font-size: clamp(1.16rem,4vw,1.55rem); color: #fff; margin-bottom: 7px; }
.offer p { color: var(--on-d-mu); font-size: .9rem; max-width: 46ch; }
@media (min-width: 800px) { .offer { grid-template-columns: auto 1fr auto; gap: 36px; padding: 42px 46px; } }

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */

.card { position: relative; padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .24s var(--ease), box-shadow .24s ease, border-color .24s ease; }
.card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, rgba(18,242,175,.10), transparent); transition: height .4s var(--ease); }
.card::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; background: var(--g-400); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--g-200); }
.card:hover::before { height: 62%; }
.card:hover::after { transform: scaleX(1); }
.card > * { position: relative; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .89rem; }
.card .ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: var(--b-100); color: var(--b-600); }
.card .ico .ic { width: 1.32em; height: 1.32em; }
.sec-d .card { background: rgba(255,255,255,.05); border-color: var(--line-d); }
.sec-d .card:hover { border-color: rgba(18,242,175,.42); }
.sec-d .card p { color: var(--on-d); }
.sec-d .card .ico { background: rgba(16,137,242,.22); color: var(--b-300); }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */

.pricing { background: var(--frost); }
.screens { max-width: 640px; margin: 0 auto 38px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.screens-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; font-family: var(--f-display); font-weight: 700; font-size: .98rem; color: var(--ink); }
.step-n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--b-500); color: #fff; font-size: .76rem; font-weight: 800; }
.opts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.opt { position: relative; padding: 15px 6px; border-radius: var(--r-sm); background: var(--paper); border: 2px solid var(--line); text-align: center; transition: all .18s ease; }
.opt:hover { border-color: var(--b-300); }
.opt.is-on { border-color: var(--b-500); background: var(--b-100); }
.opt b { display: block; font-family: var(--f-display); font-size: 1.14rem; font-weight: 800; color: var(--ink); }
.opt span { display: block; font-size: .68rem; color: var(--muted); }
.opt .pop { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--r-p); background: var(--g-400); color: var(--d-950); font-size: .58rem; font-weight: 800; white-space: nowrap; }
.screens-note { margin-top: 14px; font-size: .79rem; color: var(--muted); text-align: center; }

.plans { display: grid; gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); transition: transform .24s var(--ease), box-shadow .24s ease, border-color .24s ease; }
.plan:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--b-200); }
.plan-name { font-family: var(--f-display); font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.plan-off { display: inline-block; margin-left: 8px; padding: 4px 11px; border-radius: var(--r-p); background: var(--g-100); color: var(--g-800); font-family: var(--f-display); font-size: .66rem; font-weight: 800; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 15px 0 4px; }
.plan-price b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(2.2rem,7vw,2.7rem); color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-sub { font-size: .84rem; color: var(--body); margin-bottom: 22px; }
.plan-sub s { color: var(--muted); }
.plan .btn { margin-bottom: 22px; }
.plan-feat { display: grid; gap: 11px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.plan-feat li { display: flex; align-items: flex-start; gap: 11px; font-size: .84rem; color: var(--body); }
.plan-feat .tick { display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: .1em; border-radius: 50%; background: var(--g-100); color: var(--g-700); }
.plan-feat .tick .ic { width: 11px; height: 11px; }

.plan-best { background: var(--d-900); border-color: transparent; color: var(--on-d); box-shadow: 0 26px 60px rgba(12,32,54,.28); }
.plan-best::before { content: ""; position: absolute; inset: -2px; border-radius: var(--r-xl); padding: 2px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan-best .plan-name, .plan-best .plan-price b { color: #fff; }
.plan-best .plan-sub, .plan-best .plan-feat li { color: var(--on-d); }
.plan-best .plan-feat { border-top-color: var(--line-d); }
.plan-best .plan-feat .tick { background: rgba(18,242,175,.18); color: var(--g-300); }
.plan-best .plan-off { background: var(--g-400); color: var(--d-950); }
.plan-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: var(--r-p); background: var(--g-400); color: var(--d-950); font-family: var(--f-display); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(18,242,175,.32); }
.plan-flag .ic { width: .95em; height: .95em; }

.pay { margin-top: 32px; text-align: center; }
.pay p { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.pay p .ic { color: var(--g-600); }
.pay img { margin-inline: auto; max-width: min(420px,100%); }

@media (min-width: 640px)  { .plans { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(4,1fr); align-items: center; } .plan-best { padding-block: 42px; } }

/* --------------------------------------------------------------------------
   13. Steps
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: 18px; }
.step { position: relative; padding: 30px 26px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .24s var(--ease), box-shadow .24s ease, border-color .24s ease; }
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--b-200); }
.step-no { position: absolute; top: 26px; left: 26px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--d-900); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.04em; }
.step-no::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--g-400); opacity: .4; }
.step-ico { position: absolute; top: 30px; right: 26px; color: var(--b-300); }
.step-ico .ic { width: 1.6em; height: 1.6em; }
.step h3 { margin: 74px 0 9px; }
.step p { font-size: .88rem; margin-bottom: 20px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3,1fr); } }

/* Dark glass variant. Cards sit as frosted panels on the fjord, the number
   is punched through in aurora rather than boxed in navy. */
.sec-d .step { background: rgba(255,255,255,.055); border-color: var(--line-d); }
.sec-d .step:hover { background: rgba(255,255,255,.09); border-color: rgba(18,242,175,.4); }
.sec-d .step p { color: var(--on-d-mu); }
.sec-d .step-no { background: var(--grad); color: var(--d-950); box-shadow: 0 10px 26px rgba(18,242,175,.28); }
.sec-d .step-no::after { border-color: rgba(255,255,255,.4); }
.sec-d .step-ico { color: var(--g-400); }

/* --------------------------------------------------------------------------
   14. Reviews
   -------------------------------------------------------------------------- */

.renew { display: inline-flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; margin-bottom: 20px; border-radius: var(--r-p); background: rgba(18,242,175,.10); border: 1px solid rgba(18,242,175,.34); }
.renew b { display: grid; place-items: center; padding: 9px 16px; border-radius: var(--r-p); background: var(--g-400); color: var(--d-950); font-family: var(--f-display); font-size: .95rem; font-weight: 800; }
.renew span { font-family: var(--f-display); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }

.wa-cards { display: grid; gap: 18px; }
.wa-card { border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid var(--line-d); transition: transform .24s var(--ease), border-color .24s ease; }
.wa-card:hover { transform: translateY(-5px); border-color: rgba(18,242,175,.4); }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; }
.wa-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(18,242,175,.18); color: var(--g-300); font-family: var(--f-display); font-weight: 800; font-size: .8rem; flex: none; }
.wa-head b { display: block; font-family: var(--f-display); font-size: .88rem; color: #fff; }
.wa-head span { display: block; font-size: .74rem; color: var(--on-d-mu); }
.wa-head .ic { margin-left: auto; color: #25D366; width: 1.35em; height: 1.35em; }
.wa-shot { display: block; width: 100%; }
.wa-slot { display: grid; place-items: center; text-align: center; aspect-ratio: 3/4; padding: 22px; background: rgba(255,255,255,.03); color: var(--on-d-mu); border-top: 1px solid var(--line-d); }
.wa-slot .ic { width: 1.8em; height: 1.8em; margin: 0 auto 10px; opacity: .5; }
.wa-slot b { display: block; font-family: var(--f-display); font-size: .88rem; color: #fff; }
.wa-slot span { display: block; margin-top: 4px; font-size: .75rem; }
@media (min-width: 700px)  { .wa-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .wa-cards { grid-template-columns: repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   15. Sport
   -------------------------------------------------------------------------- */

/* No container. The artwork sits open on the section, the disciplines run
   under it as bare pills, and the closing line is a lockup, not a box. */
.sport-art { position: relative; display: grid; place-items: center; }
.sport-art img { width: 100%; filter: drop-shadow(0 26px 54px rgba(4,14,28,.45)); }
.sport-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 26px; }
.sport-tags li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-p); background: var(--paper); border: 1px solid var(--line); font-family: var(--f-display); font-size: .82rem; font-weight: 700; color: var(--ink-2); transition: all .22s var(--ease); }
.sport-tags li:hover { border-color: var(--g-400); color: var(--g-800); transform: translateY(-3px); box-shadow: var(--sh-1); }
.sport-tags .ic { width: 1.05em; height: 1.05em; color: var(--g-600); }

/* Closing lockup: a rule, an oversized line, a single action */
.sport-cta { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 20px; justify-items: center; text-align: center; }
.sport-cta b { font-family: var(--f-display); font-size: clamp(1.3rem,5vw,2.1rem); font-weight: 800; letter-spacing: -.04em; color: var(--ink); max-width: 20ch; line-height: 1.12; }
.sport-cta b em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 800px) { .sport-cta { grid-template-columns: 1fr auto; justify-items: start; text-align: left; align-items: center; gap: 32px; } }

/* --------------------------------------------------------------------------
   16. Coverage, iceberg
   -------------------------------------------------------------------------- */

/* Coverage. The berg is a backdrop the cards sit into, not a picture stuck
   above them, so the two read as one composition. */
.berg-wrap { position: relative; padding-top: 8px; }
.berg { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: min(1080px, 132%); pointer-events: none; opacity: .95; }
.cov { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding-top: clamp(150px, 26vw, 250px); }
.cov-c {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px;
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(158deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 14px 30px rgba(4,14,28,.30);
  transition: transform .24s var(--ease), border-color .24s ease;
}
.cov-c:hover { transform: translateY(-6px); border-color: rgba(18,242,175,.46); }
/* Flag: proper depth. Rounded plate, inner rim, gloss sweep across the top. */
.cov-flag { position: relative; width: 52px; height: 36px; border-radius: 8px; overflow: hidden; flex: none; box-shadow: 0 8px 18px rgba(4,14,28,.5), inset 0 0 0 1px rgba(255,255,255,.28); }
.cov-flag svg { width: 100%; height: 100%; display: block; }
.cov-flag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.42) 0 28%, rgba(255,255,255,.06) 46%, transparent 62%); }
.cov-c b { display: block; font-family: var(--f-display); font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.035em; }
.cov-c span { display: block; margin-top: 3px; font-size: .74rem; color: var(--on-d-mu); }
@media (min-width: 760px) {
  .cov { grid-template-columns: repeat(5,1fr); gap: 12px; }
  .cov-c { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
  .cov-flag { width: 58px; height: 40px; }
}

/* --------------------------------------------------------------------------
   17. Explainer with the animated flow
   -------------------------------------------------------------------------- */

/* The diagram has a floor below which its labels stop being readable, so it
   scrolls inside its own box on narrow screens rather than shrinking. */
.flow-wrap { position: relative; padding: 26px 18px; border-radius: var(--r-xl); background: rgba(255,255,255,.04); border: 1px solid var(--line-d); margin-bottom: 34px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow { display: block; width: 100%; min-width: 620px; height: auto; margin-inline: auto; }
.fx-line { fill: none; stroke: url(#fx-grad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; animation: fxflow 1.6s linear infinite; }
@keyframes fxflow { to { stroke-dashoffset: -24; } }
.fx-ring { fill: none; stroke: rgba(18,242,175,.5); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; animation: fxring 3.4s ease-out infinite; }
.fx-ring.r2 { animation-delay: 1.1s; }
.fx-ring.r3 { animation-delay: 2.2s; }
@keyframes fxring { 0% { transform: scale(.92); opacity: .65; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-line { animation: none; } .fx-ring { animation: none; opacity: .18; } }

/* What you get: one gradient framed panel of checks, no cable comparison */
.wx { position: relative; padding: 30px 26px; border-radius: var(--r-xl); background: rgba(255,255,255,.045); }
.wx::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.wx h3 { margin-bottom: 22px; font-size: 1.16rem; color: #fff; text-align: center; }
.wx ul { display: grid; gap: 14px; }
.wx li { display: flex; align-items: flex-start; gap: 13px; font-size: .9rem; color: var(--on-d); }
.wx .mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: .05em; border-radius: 50%; background: rgba(18,242,175,.18); color: var(--g-300); box-shadow: 0 0 0 1px rgba(18,242,175,.28); }
.wx .mark .ic { width: 12px; height: 12px; }
@media (min-width: 760px) { .wx { padding: 38px 40px; } .wx ul { grid-template-columns: repeat(2,1fr); gap: 16px 34px; } }

.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 34px; }
.stat { padding: 24px 16px; border-radius: var(--r-lg); text-align: center; }
.stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem,6vw,2.3rem); letter-spacing: -.045em; color: var(--g-400); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font-size: .78rem; color: var(--on-d-mu); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4,1fr); } }

/* --------------------------------------------------------------------------
   18. Support and FAQs
   -------------------------------------------------------------------------- */

.sup-grid { display: grid; gap: 32px; align-items: center; }
.sup-art { position: relative; }
.sup-art img { width: 100%; border-radius: var(--r-xl); display: block; }
.sup-response { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-p); background: rgba(255,255,255,.14); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(4,14,28,.4); font-family: var(--f-display); font-size: .78rem; font-weight: 700; color: #fff; }
.sup-response .ic { width: 1.05em; height: 1.05em; color: var(--g-400); }
.sup-nobots { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: .82rem; font-weight: 600; color: var(--on-d-mu); }
.sup-nobots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-400); box-shadow: 0 0 0 0 rgba(18,242,175,.55); animation: pulse 1.9s infinite; flex: none; }
.sup-list { display: grid; gap: 12px; margin-top: 24px; }
.sup-c { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid var(--line-d); transition: all .22s var(--ease); }
.sup-c:hover { transform: translateX(5px); border-color: rgba(18,242,175,.42); background: rgba(255,255,255,.08); }
.sup-c .ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(16,137,242,.22); color: var(--b-300); }
.sup-c .ico .ic { width: 1.3em; height: 1.3em; }
.sup-c b { display: block; font-family: var(--f-display); font-size: .95rem; color: #fff; }
.sup-c span { display: block; font-size: .8rem; color: var(--on-d-mu); }
@media (min-width: 860px) { .sup-grid { grid-template-columns: 1fr 1fr; gap: 54px; } }

.faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; }
.faq-i { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .26s ease, box-shadow .26s ease; }
.faq-i[open] { border-color: var(--g-300); box-shadow: var(--sh-2); }
.faq-q { display: flex; align-items: center; gap: 15px; padding: 19px 22px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 700; font-size: .98rem; color: var(--ink); }
.faq-q::-webkit-details-marker { display: none; }
.faq-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--b-100); color: var(--b-700); font-family: var(--f-display); font-weight: 800; font-size: .84rem; transition: background .26s ease, color .26s ease; }
.faq-i[open] .faq-mark { background: var(--g-400); color: var(--d-950); }
.faq-sign { margin-left: auto; flex: none; color: var(--b-600); transition: transform .34s var(--ease), color .26s ease; }
.faq-sign .ic { width: 15px; height: 15px; }
.faq-i[open] .faq-sign { transform: rotate(135deg); color: var(--g-700); }
.faq-a { padding: 0 22px 20px 59px; font-size: .9rem; }
.faq-a p + p { margin-top: 10px; }
.faq-i[open] .faq-a { animation: faqIn .34s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   18b. Why it actually works: animated icons
   Each icon animates the thing it describes rather than just sitting there.
   -------------------------------------------------------------------------- */

.works { display: grid; gap: 16px; }
.work { position: relative; padding: 28px 24px; border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid var(--line-d); overflow: hidden; transition: transform .24s var(--ease), border-color .24s ease, background .24s ease; }
.work:hover { transform: translateY(-5px); border-color: rgba(18,242,175,.4); background: rgba(255,255,255,.075); }
.work h3 { margin-bottom: 8px; }
.work p { font-size: .88rem; color: var(--on-d); }
.wico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: rgba(16,137,242,.16); border: 1px solid rgba(124,190,249,.24); }
.wico svg { width: 28px; height: 28px; overflow: visible; }
@media (min-width: 640px)  { .works { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .works { grid-template-columns: repeat(4,1fr); } }

/* equaliser bars: steady throughput */
.ia-bar { fill: var(--g-400); transform-box: fill-box; transform-origin: bottom; animation: eqbar 1.4s ease-in-out infinite; }
.ia-bar:nth-of-type(2) { animation-delay: .12s; }
.ia-bar:nth-of-type(3) { animation-delay: .24s; }
.ia-bar:nth-of-type(4) { animation-delay: .36s; }
@keyframes eqbar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* cast ripples: reaches every screen */
.ia-wave { fill: none; stroke: var(--b-300); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: 8% 92%; animation: ripple 2.1s ease-out infinite; }
.ia-wave.w2 { animation-delay: .45s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.55); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }

/* bolt: instant activation */
.ia-bolt { fill: var(--g-400); transform-box: fill-box; transform-origin: center; animation: boltglow 2.4s ease-in-out infinite; }
@keyframes boltglow { 0%,100% { opacity: .62; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* shield ring: protection */
.ia-ring { fill: none; stroke: var(--g-400); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; opacity: 0; animation: shieldpulse 2.8s ease-out infinite; }
@keyframes shieldpulse { 0% { transform: scale(.82); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }

/* --------------------------------------------------------------------------
   19. Footer. Mirrors the reference structure.
   -------------------------------------------------------------------------- */

.ftr { position: relative; background: var(--d-950); color: var(--on-d-mu); padding-block: 62px 26px; overflow: hidden; }
.ftr::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.035) 26px 27px); pointer-events: none; }
.ftr::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.ftr .wrap { position: relative; }

.foot-grid { display: grid; gap: 36px; padding-bottom: 34px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-txt { font-size: .87rem; line-height: 1.7; max-width: 46ch; color: var(--on-d-mu); }
.foot-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 18px; border-radius: var(--r-p); background: rgba(255,255,255,.05); border: 1px solid var(--line-d); font-family: var(--f-display); font-size: .85rem; font-weight: 700; color: #fff; transition: all .22s var(--ease); }
.foot-mail:hover { border-color: var(--g-400); color: var(--g-300); transform: translateY(-2px); }
.foot-mail .ic { width: 1.05em; height: 1.05em; color: var(--g-400); }

.foot-col h3 { font-family: var(--f-display); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.foot-col ul { display: grid; gap: 12px; }
.foot-col a { font-size: .87rem; color: var(--on-d-mu); transition: color .18s ease, padding-left .18s ease; }
.foot-col a:hover { color: var(--g-300); padding-left: 4px; }

.foot-note { padding: 22px 0; border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.foot-note p { font-size: .78rem; line-height: 1.7; color: rgba(255,255,255,.42); max-width: 92ch; }
.foot-note a { color: var(--g-400); text-decoration: underline; text-underline-offset: 3px; }

.foot-bottom { display: grid; gap: 20px; align-items: center; padding-top: 24px; justify-items: center; }
.foot-copy { font-size: .8rem; color: rgba(255,255,255,.42); }
.foot-pay { width: 100%; max-width: min(368px,100%); height: auto; opacity: .9; }

@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; }
  .foot-bottom { grid-template-columns: 1fr auto; justify-items: start; }
  .foot-pay { justify-self: end; }
}

/* --------------------------------------------------------------------------
   19b. Service proof, two column: lead + stage on the left, full list right
   -------------------------------------------------------------------------- */

.svc-eyebrow { display: inline-block; margin-bottom: 14px; padding: 9px 18px; border-radius: var(--r-p); background: var(--grad); color: var(--d-950); font-family: var(--f-display); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.svc-split { display: grid; gap: 34px; align-items: start; }
.svc-lead { font-size: 1.06rem; line-height: 1.7; color: var(--on-d); margin-bottom: 20px; }
.svc-lead strong { color: #fff; font-weight: 700; }
.svc-lead em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.svc-tags li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: var(--r-p); background: rgba(255,255,255,.06); border: 1px solid var(--line-d); font-family: var(--f-display); font-size: .8rem; font-weight: 700; color: #fff; }
.svc-tags .ic { width: 1.05em; height: 1.05em; color: var(--g-400); }
.svc-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-d); background: rgba(255,255,255,.04); margin-bottom: 26px; }
.svc-stage img, .svc-stage .slot { width: 100%; display: block; }

.svc-panel { padding: 26px 22px; border-radius: var(--r-xl); background: rgba(255,255,255,.045); border: 1px solid var(--line-d); }
.svc-panel-h { font-family: var(--f-display); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); margin-bottom: 20px; }
.svc-flist { display: grid; gap: 18px; }
.svc-frow { display: flex; gap: 14px; }
.svc-frow > .ic { width: 22px; height: 22px; flex: none; margin-top: .15em; color: var(--g-400); }
.svc-frow h3 { font-size: 1rem; margin-bottom: 5px; color: #fff; }
.svc-frow p { font-size: .87rem; color: var(--on-d-mu); }
.svc-frow--hl { padding: 16px; margin-top: 4px; border-radius: var(--r-lg); background: rgba(18,242,175,.08); border: 1px solid rgba(18,242,175,.28); }
@media (min-width: 980px) { .svc-split { grid-template-columns: 1fr 1fr; gap: 46px; } .svc-panel { padding: 34px 30px; } }

/* --------------------------------------------------------------------------
   19c. Explainer, light. Flow diagram, copy, checks, stats, CTA.
   -------------------------------------------------------------------------- */

.explain { background: var(--frost); }
.explain .flow-wrap { background: var(--paper); border-color: var(--line); box-shadow: var(--sh-1); }
.explain .fx-ring { stroke: rgba(12,179,129,.55); }
.wx-copy { max-width: 78ch; margin: 0 auto 34px; text-align: center; }
.wx-copy p { font-size: 1rem; line-height: 1.78; }
.wx-div { display: flex; align-items: center; gap: 16px; margin: 24px auto; max-width: 320px; }
.wx-div span { flex: 1; height: 1px; background: var(--line-2); }
.wx-div .ic { width: 1.4em; height: 1.4em; color: var(--g-600); }
.explain-sub { text-align: center; font-size: clamp(1.2rem,4vw,1.6rem); margin-bottom: 26px; }

.wx-checks-wrap { position: relative; max-width: 940px; margin: 0 auto 38px; padding: 30px 26px; border-radius: var(--r-xl); background: var(--paper); }
.wx-checks-wrap::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.wx-checks { display: grid; gap: 15px; }
.wx-checks li { display: flex; align-items: flex-start; gap: 13px; font-size: .92rem; color: var(--ink-2); }
.wx-ck { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: .02em; border-radius: 50%; background: var(--g-100); color: var(--g-700); }
.wx-ck .ic { width: 13px; height: 13px; }
@media (min-width: 760px) { .wx-checks { grid-template-columns: repeat(2,1fr); gap: 17px 32px; } .wx-checks-wrap { padding: 38px 40px; } }

.wx-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 34px; }
.wx-stat { padding: 24px 16px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); text-align: center; transition: transform .24s var(--ease), box-shadow .24s ease; }
.wx-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.wx-stat-ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 13px; background: var(--b-100); color: var(--b-600); }
.wx-stat-ic .ic { width: 1.28em; height: 1.28em; }
.wx-stat-num { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem,5.4vw,2.1rem); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-stat-lbl { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted); }
@media (min-width: 700px) { .wx-stats { grid-template-columns: repeat(4,1fr); } }

.wx-cta { display: inline-flex; align-items: center; gap: 12px; padding: 8px 26px 8px 8px; border-radius: var(--r-p); background: var(--d-900); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 1rem; box-shadow: 0 12px 30px rgba(12,32,54,.28); transition: transform .22s var(--ease), box-shadow .22s ease; }
.wx-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12,32,54,.36); }
.wx-cta .off { display: inline-grid; place-items: center; height: 42px; padding: 0 16px; border-radius: var(--r-p); background: var(--grad); color: var(--d-950); font-size: .86rem; font-weight: 800; }

/* --------------------------------------------------------------------------
   19d. Coverage, aurora ribbon. No iceberg.
   -------------------------------------------------------------------------- */

.aurora-wrap { position: relative; margin-bottom: 34px; }
.aurora { display: block; width: 100%; height: auto; }
.ar-band { fill: none; stroke-linecap: round; opacity: .85; }
.ar-band.b1 { stroke: url(#ar-g1); stroke-width: 26; filter: blur(6px); animation: arsway 9s ease-in-out infinite; }
.ar-band.b2 { stroke: url(#ar-g2); stroke-width: 16; filter: blur(3px); animation: arsway 11s ease-in-out infinite reverse; }
.ar-band.b3 { stroke: url(#ar-g1); stroke-width: 6; opacity: .55; animation: arsway 13s ease-in-out infinite; }
@keyframes arsway { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .ar-band { animation: none !important; } }

/* --------------------------------------------------------------------------
   20. Prose and blog
   -------------------------------------------------------------------------- */

.prose-main { padding-top: calc(var(--hdr) + 68px); padding-bottom: var(--pad); }
.prose { max-width: 740px; margin-inline: auto; padding-inline: var(--gutter); }
.prose-head { margin-bottom: 30px; }
.prose-meta { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.prose-fig { margin-bottom: 26px; border-radius: var(--r-lg); overflow: hidden; }
.prose h2 { margin: 34px 0 12px; }
.prose h3 { margin: 24px 0 9px; }
.prose p { margin-bottom: 15px; }
.prose ul, .prose ol { margin: 0 0 15px 20px; }
.prose ul li { list-style: disc; margin-bottom: 7px; }
.prose ol li { list-style: decimal; margin-bottom: 7px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 22px 0; padding: 18px 22px; border-left: 3px solid var(--g-400); background: var(--frost); }

.cards { display: grid; gap: 18px; }
.card-fig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-title { font-size: 1.05rem; margin: 14px 0 8px; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--b-600); }
.pager { margin-top: 34px; text-align: center; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding-inline: 12px; margin: 0 3px; border: 1px solid var(--line); border-radius: var(--r-p); font-weight: 600; font-size: .88rem; }
.pager .page-numbers.current { background: var(--b-500); color: #fff; border-color: transparent; }
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   21. Reveal on scroll
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   22. Preserved current HERO/header and FAQ only
   -------------------------------------------------------------------------- */

.hdr { top:14px; width:calc(100% - 28px); max-width:1180px; }
.hdr-in {
  height:64px; padding:0 9px 0 20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:linear-gradient(135deg,rgba(8,29,50,.78),rgba(10,43,70,.65));
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(4,21,38,.38),0 18px 44px -24px rgba(2,15,28,.92);
}
.hdr-in::before {
  content:""; position:absolute; inset:0; height:auto; border-radius:inherit;
  z-index:1; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.15),transparent 24%,transparent 72%,rgba(18,242,175,.07));
  filter:none; mask-image:none; -webkit-mask-image:none;
}
.hdr-in::after {
  content:""; position:absolute; left:22px; right:22px; bottom:0; top:auto;
  height:1px; z-index:2; opacity:1; border-radius:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(92,244,196,.52),rgba(16,137,242,.54),transparent);
  box-shadow:none; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
.hdr-in > * { position:relative; z-index:3; }
.hdr.is-stuck { top:8px; }
.hdr.is-stuck .hdr-in { background:linear-gradient(135deg,rgba(8,29,50,.94),rgba(10,43,70,.91)); }
.brand { gap:0; min-width:172px; }
.brand-mark { display:none; }
.brand-txt { display:inline-flex; align-items:center; gap:2px; color:#fff; font-size:1.16rem; line-height:1; letter-spacing:0; }
.brand-nordic { display:inline-flex; align-items:center; }
.brand-o {
  position:relative; display:inline-grid; place-items:center; width:.91em; height:.91em;
  margin:0 .015em; border-radius:50%; background:#1089f2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 5px 12px -7px rgba(16,137,242,.85);
}
.brand-o i {
  width:0; height:0; margin-left:2px;
  border-top:.21em solid transparent; border-bottom:.21em solid transparent; border-left:.31em solid #fff;
}
.brand-txt b {
  margin-left:1px; color:transparent;
  background:linear-gradient(100deg,#5cf4c4 0%,#1089f2 68%,#fff 100%);
  -webkit-background-clip:text; background-clip:text;
}
.nav-list { gap:24px; }
.nav-list a { font-size:.82rem; font-weight:600; }
.hdr-right .btn {
  min-height:44px!important; padding:0 16px!important; color:var(--b-700);
  background:#fff; box-shadow:0 8px 22px -15px rgba(0,0,0,.9),inset 0 1px 0 #fff;
}
.hdr-right .btn .ic {
  width:1em!important; height:1em!important; margin:0!important; padding:0!important;
  border-radius:0!important; color:var(--b-600)!important; background:none!important;
}

.faq { gap:12px; }
.faq-i {
  overflow:hidden; border:1px solid var(--line); border-left:1px solid var(--line);
  border-radius:18px; background:#fff; box-shadow:none;
}
.faq-i[open] { border-color:var(--g-300); box-shadow:var(--sh-2); }
.faq-i[open] .faq-q { color:var(--ink); }

@media (max-width:699px) {
  .hdr { top:9px; width:calc(100% - 16px); }
  .hdr-in { height:58px; padding:0 9px 0 14px; border-radius:15px; }
  .brand { min-width:0; gap:0; }
  .brand-txt { font-size:.95rem; }
  .faq-q { padding:17px 16px; }
  .faq-a { padding:0 16px 18px 16px; }
}