@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/readex-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* ==========================================================================
   Brooj — "clean & simple" design system
   White space, one type family (Readex Pro, Arabic + Latin), thin line icons,
   brooj.net blue (#0075D3) as the only accent, deep ink for the few dark cards.
   Logical properties keep RTL and LTR in sync.
   ========================================================================== */

:root {
  --ink:        #0E1330;   /* headings, dark cards */
  --ink-2:      #0A0E26;   /* footer */
  --text:       #1D2440;
  --muted:      #5A6480;
  --subtle:     #657089;
  --line:       #E6EBF3;
  --line-2:     #D9E0EC;
  --paper:      #FFFFFF;
  --surface:    #F7F9FC;   /* alternate sections */
  --brand:      #0075D3;   /* brooj.net blue: buttons, links, active states */
  --brand-dark: #005DAA;
  --brand-tint: #EEF6FF;
  --indigo:     #272162;   /* brooj.net gradient start, used sparingly */
  --sky:        #25A3DA;   /* brooj.net logo blue: accents on dark */
  --good:       #12945F;
  --good-tint:  #E6F6EE;
  --amber:      #F2B51D;
  --amber-tint: #FFF6DC;
  --danger:     #B42323;
  --on-ink:     #AEB8D3;

  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --shadow-1: 0 1px 2px rgba(14, 19, 48, .05), 0 6px 20px rgba(14, 19, 48, .05);
  --shadow-2: 0 2px 4px rgba(14, 19, 48, .04), 0 24px 50px rgba(14, 19, 48, .10);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--brand);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.75; text-rendering: optimizeLegibility; }
html[lang="en"] body { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
a { color: var(--brand); text-underline-offset: .2em; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
main:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.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; }
.muted { color: var(--muted); }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-s); }
.skip:focus { top: 1rem; }
html:not(.js) [data-js-only] { display: none !important; }
.icon { width: 1.25rem; height: 1.25rem; }
bdi { unicode-bidi: isolate; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.2rem;
  border-radius: var(--r-s); border: 1px solid transparent; font: inherit; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn-primary, .btn-accent { background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-accent:hover { background: var(--brand-dark); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1F2650; color: #fff; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--line-2); color: var(--ink); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost-brand { background: #fff; color: var(--brand); border-color: var(--line-2); }
.btn-ghost-brand:hover { border-color: var(--brand); color: var(--brand); }
.btn-small { min-height: 2.2rem; padding: .3rem .9rem; font-size: .9rem; background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-small:hover { border-color: var(--ink); color: var(--ink); }
.btn-login { min-height: 2.5rem; padding: .35rem 1rem; background: var(--ink); color: #fff; gap: .4rem; }
.btn-login:hover { background: #1F2650; color: #fff; }
.btn-login .icon { width: 1rem; height: 1rem; }

/* ---------- Promo bar ---------- */
.promo-bar { background: var(--ink); color: #fff; font-size: .88rem; }
.promo-bar[hidden] { display: none; }
.promo-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem 1rem; min-height: 2.5rem; padding-block: .3rem; }
.promo-text { display: flex; align-items: center; gap: .5rem; }
.promo-off { color: var(--ink); background: var(--amber); font-weight: 600; font-size: .8rem; padding: .05rem .5rem; border-radius: 6px; }
.promo-code { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border: 1px dashed rgba(255, 255, 255, .5); border-radius: 6px; background: transparent; color: #fff; font: inherit; font-weight: 600; letter-spacing: .05em; cursor: copy; }
.promo-code .icon { width: .85rem; height: .85rem; }
.promo-code:hover { border-color: #fff; }
.promo-code.is-copied { background: #fff; color: var(--ink); border-style: solid; }
.promo-timer { display: inline-flex; gap: .35rem; align-items: center; color: var(--on-ink); }
.promo-timer time, .promo-days { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.promo-cta { color: #fff; font-weight: 500; }
.promo-cta:hover { color: #fff; }
.promo-bar :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
@media (max-width: 40rem) { .promo-row { font-size: .8rem; } .promo-cta, .promo-timer > span:first-child { display: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.header-row { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 1.6rem; height: 1.6rem; fill: var(--brand); }
.brand-mark .brand-led { fill: #fff; }
.brand-name { font-size: 1.3rem; line-height: 1; }
.brand-logo { height: 2.9rem; width: auto; display: block; }
.site-footer .brand-logo { height: 3.75rem; }
@media (max-width: 40rem) { .brand-logo { height: 2.5rem; } }
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex: 1; }
.nav-links { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-link, .nav-group-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .7rem; border-radius: 8px; color: var(--muted); text-decoration: none; font: inherit; font-size: .95rem; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-group-btn:hover, .nav-group-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface); }
.nav-link[aria-current="page"], .nav-group-btn.is-here { color: var(--ink); font-weight: 500; }
.chev { width: .7rem; height: .7rem; transition: transform .15s; }
.nav-group-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-group { position: static; }
.nav-tools { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.lang-switch { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); text-decoration: none; font-size: .92rem; }
.lang-switch .icon { width: 1rem; height: 1rem; }
.lang-switch:hover { color: var(--ink); }
.nav-toggle { display: none; }

/* Mega menu */
.mega {
  position: absolute; top: 100%; inset-inline: 0; z-index: 60; padding-block-start: .5rem;
  visibility: hidden; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.nav-group.is-open > .mega, html:not(.js) .nav-group:hover > .mega, html:not(.js) .nav-group:focus-within > .mega {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s;
}
.mega-inner { max-width: 50rem; display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: .75rem; box-shadow: var(--shadow-2); }
.mega-main { display: flex; flex-direction: column; }
.mega-kicker { font-size: .78rem; font-weight: 500; color: var(--subtle); padding: .35rem .75rem .5rem; }
html[lang="en"] .mega-kicker { text-transform: uppercase; letter-spacing: .05em; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px .25rem; align-content: start; }
.mega-link { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .75rem; border-radius: var(--r-s); color: var(--text); text-decoration: none; }
.mega-link:hover, .mega-link[aria-current="page"] { background: var(--surface); color: var(--text); }
.mega-icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; border: 1px solid var(--line); color: var(--brand); background: #fff; }
.mega-icon .icon { width: 1.15rem; height: 1.15rem; }
.mega-text { display: grid; line-height: 1.45; gap: .1rem; }
.mega-title { font-weight: 500; color: var(--ink); }
.mega-short { font-size: .85rem; color: var(--muted); }
.mega-from { font-size: .8rem; color: var(--brand); font-weight: 500; }
.mega-from[hidden] { display: none; }
.mega-kids { list-style: none; margin: -.15rem 0 .35rem; padding: 0; padding-inline-start: 3.8rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.mega-kids a { display: inline-block; padding: .1rem .55rem; border-radius: 6px; border: 1px solid var(--line); font-size: .8rem; color: var(--ink); text-decoration: none; }
.mega-kids a:hover, .mega-kids a[aria-current="page"] { border-color: var(--brand); color: var(--brand); }
.mega-stack { margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; padding: .75rem .75rem .25rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.mega-stack b { font-weight: 500; color: var(--ink); padding: .05rem .5rem; border-radius: 6px; background: var(--surface); }
.mega-promo { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: var(--r-s); background: var(--ink); color: #fff; }
.mega-lead { font-size: .9rem; line-height: 1.6; color: var(--on-ink); }
.mega-cta { margin-block-start: auto; color: #fff; font-weight: 500; text-decoration: none; }
.mega-cta::after { content: " ←"; } [dir="ltr"] .mega-cta::after { content: " →"; }
.mega-cta:hover { color: #fff; text-decoration: underline; }

/* Currency */
.cur-dd { position: relative; }
.cur-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .75rem; border-radius: var(--r-s); border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.cur-btn:hover, .cur-btn[aria-expanded="true"] { border-color: var(--ink); }
.cur-btn .chev { width: .65rem; height: .65rem; }
.cur-menu { position: absolute; top: calc(100% + .4rem); inset-inline-end: 0; z-index: 70; min-width: 14rem; list-style: none; margin: 0; padding: .3rem; display: grid; gap: 1px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow-2);
  visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility 0s linear .12s; }
.cur-dd.is-open > .cur-menu, html:not(.js) .cur-dd:hover > .cur-menu, html:not(.js) .cur-dd:focus-within > .cur-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.cur-menu a { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 7px; color: var(--text); text-decoration: none; font-size: .92rem; }
.cur-menu a:hover, .cur-menu a[aria-current] { background: var(--surface); }
.cur-menu b { min-width: 2.5rem; font-weight: 600; color: var(--ink); }
.cur-menu span { flex: 1; color: var(--muted); }
.cur-check { width: 1rem; height: 1rem; color: var(--brand); visibility: hidden; }
.cur-menu a[aria-current] .cur-check { visibility: visible; }

@media (max-width: 64rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; margin-inline-start: auto; background: #fff; border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--r-s); padding: .4rem .8rem; font: inherit; cursor: pointer; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.05rem; height: 2px; background: currentColor; position: relative; content: ""; }
  .nav-toggle-bars::before { position: absolute; top: -6px; } .nav-toggle-bars::after { position: absolute; top: 6px; }
  .header-row { flex-wrap: wrap; }
  .js .site-nav { display: none; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem; padding-block: .25rem 1rem; }
  .js .site-nav.is-open { display: flex; }
  .nav-links { flex-direction: column; }
  .nav-link, .nav-group-btn { width: 100%; justify-content: space-between; padding: .75rem .25rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .mega { position: static; padding: 0 0 .5rem; visibility: visible; opacity: 1; transform: none; pointer-events: auto; display: none; transition: none; }
  .nav-group.is-open > .mega, html:not(.js) .nav-group > .mega { display: block; }
  .mega-inner { grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 0; max-width: none; }
  .mega-promo, .mega-kicker { display: none; }
  .mega-list { grid-template-columns: 1fr; }
  .nav-tools { margin: 0; flex-wrap: wrap; justify-content: space-between; }
  .cur-menu { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ---------- Hero ---------- */
.hero, .svc-hero {
  position: relative; background-color: #fff;
  background-image: radial-gradient(#E3E8F2 1px, transparent 1.2px);
  background-size: 20px 20px; border-bottom: 1px solid var(--line);
}
.hero::after, .svc-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, #fff); pointer-events: none; }
.hero > *, .svc-hero > * { position: relative; z-index: 1; }
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { max-width: 17ch; }
.hero-lead { margin-block: 1rem 1.75rem; font-size: var(--step-1); color: var(--muted); max-width: 44ch; line-height: 1.7; }
.hero-art { position: relative; }
.tld-chips { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tld-chips li { display: inline-flex; align-items: baseline; gap: .45rem; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .9rem; }
.chip-tld { font-weight: 600; color: var(--ink); }
.chip-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-offers { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .92rem; color: var(--muted); }
.hero-offers li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-offers .icon { width: 1rem; height: 1rem; color: var(--good); }
.hero-compact { padding-block: 0 clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.hero-compact .hero-grid { padding-block-start: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 34rem; width: 100%; margin-inline: auto; }
}

/* Domain search */
.domain-search { width: min(100%, 38rem); }
.ds-row { display: grid; grid-template-columns: 1fr auto auto; gap: .35rem; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: .35rem; box-shadow: var(--shadow-1); }
.ds-row:focus-within { border-color: var(--brand); }
.ds-field { position: relative; display: flex; align-items: center; min-width: 0; }
.ds-field .icon { position: absolute; inset-inline-start: .85rem; width: 1.15rem; height: 1.15rem; color: var(--subtle); pointer-events: none; }
.ds-field input { width: 100%; min-width: 0; min-height: 2.9rem; padding-inline: 2.6rem .75rem; font: inherit; font-size: 1rem; color: var(--text); background: transparent; border: 0; border-radius: var(--r-s); }
.ds-field input::placeholder { color: var(--subtle); }
.ds-field input:focus-visible { box-shadow: none; }
.ds-row:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.ds-type { display: flex; border: 0; margin: 0; padding: 3px; background: var(--surface); border-radius: var(--r-s); }
.ds-type label { position: relative; display: flex; }
.ds-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-type span { display: flex; align-items: center; min-height: 2.4rem; padding: 0 .9rem; border-radius: 7px; color: var(--muted); font-size: .92rem; }
.ds-type input:checked + span { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(14, 19, 48, .12); }
.ds-type input:focus-visible + span { box-shadow: var(--focus); }
.ds-row .btn { min-height: 2.9rem; padding-inline: 1.5rem; }
.ds-msg { margin-block-start: .6rem; font-size: var(--step--1); color: var(--muted); }
.ds-msg.is-error { color: var(--danger); font-weight: 500; }
@media (max-width: 40rem) {
  .ds-row { grid-template-columns: 1fr 1fr; }
  .ds-field { grid-column: 1 / -1; }
}

/* Service hero */
.svc-hero { padding-block: 0 clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.crumbs { padding-block: 1rem 0; font-size: var(--step--1); color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li + li::before { content: "/"; margin-inline-end: .35rem; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block-start: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.svc-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .15rem .7rem; background: #fff; }
.svc-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--good); }
.svc-hero h1 { margin-block: .9rem .6rem; }
.svc-lead { font-size: var(--step-1); color: var(--muted); max-width: 48ch; line-height: 1.7; }
.svc-highlights { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .4rem; }
.svc-highlights li { display: flex; gap: .55rem; align-items: center; }
.svc-highlights .icon { width: 1.05rem; height: 1.05rem; color: var(--brand); flex: none; }
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-block-start: 1.5rem; }
.svc-from { color: var(--muted); }
.svc-from bdi { color: var(--ink); font-weight: 600; }
.svc-hero-art { width: 100%; }
@media (max-width: 52rem) { .svc-hero-grid { grid-template-columns: 1fr; } }

/* Stack badges */
.stack { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-block-start: 1.1rem; }
.stack-label { font-size: .82rem; color: var(--subtle); }
.stack-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.stack-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 7px; border: 1px solid var(--line); background: #fff; font-size: .85rem; color: var(--ink); }

/* ---------- Visual: product UI (and a server photo on server pages) ---------- */
.visual { position: relative; }
.visual-photo { padding: 2% 4% 12%; }
.visual-photo .render { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(14, 19, 48, .18)); }
.mk-card { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-m); padding: .85rem .95rem; box-shadow: var(--shadow-2); font-size: .82rem; line-height: 1.45; }
.visual-photo .mk { position: absolute; inset: 0; pointer-events: none; }
.visual-photo .mk-card { position: absolute; }
.visual-photo .mk-status { inset-inline-start: 0; bottom: 0; width: 58%; }
.visual-photo .mk-term { inset-inline-end: 0; top: 0; width: 50%; }
.visual-ui .mk { display: grid; gap: 0; }
.visual-ui .mk-card { position: relative; }
.visual-ui .mk-term { width: 72%; margin-block-start: -1.5rem; margin-inline-start: auto; margin-inline-end: -1rem; z-index: 2; }
.visual-ui .mk-chip { justify-self: end; margin-block-end: -1.1rem; margin-inline-end: -.5rem; z-index: 2; }
.visual-ui .mk-domain { max-width: 28rem; }
.mk-dsearch .mk-list li { gap: .6rem; }
.mk-dsearch .mk-list b { font-size: .95rem; }
.mk-dsearch .mk-list em { font-style: normal; color: var(--brand); }
.mk-dsearch .mk-list .is-top { background: var(--brand-tint); }
.mk-dsearch .mk-price { font-size: .82rem; }
.mk-home { position: relative; padding-block: 1.9rem 0; }
.mk-home .mk-account { width: 88%; }
.mk-home .mk-account .mk-list li { padding-block: .7rem; }
.mk-home .mk-chip { position: absolute; top: 0; inset-inline-end: 0; margin: 0; z-index: 2; }
.mk-home .mk-status { width: 62%; margin-block-start: -2.5rem; margin-inline-start: auto; z-index: 2; }
.mk-account .mk-pill { flex: none; }
.mk-row { display: flex; align-items: center; gap: .6rem; }
.mk-grow { flex: 1; min-width: 0; }
.mk-os { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line); color: var(--brand); flex: none; }
.mk-os .icon { width: 1rem; height: 1rem; }
.mk-title { font-weight: 600; color: var(--ink); font-size: .9rem; }
.mk-sub { color: var(--subtle); font-size: .75rem; }
.mk-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.mk-pill.is-ok { background: var(--good-tint); color: #0B7A4B; }
.mk-pill i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.mk-meters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-block-start: .75rem; }
.mk-meter { border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .55rem; }
.mk-meter span { display: block; font-size: .7rem; color: var(--subtle); margin-block-end: .15rem; }
.mk-spark { width: 100%; height: 1.8rem; display: block; }
.mk-spark-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mk-spark-line.is-2 { stroke: var(--sky); }
.mk-term { background: var(--ink); border-color: var(--ink); color: #D5DDF5; font-family: var(--mono); font-size: .76rem; text-align: left; }
.mk-term p { white-space: nowrap; overflow: hidden; }
.mk-p { color: #5CE1A0; margin-inline-end: .35rem; }
.mk-caret { display: inline-block; width: .5em; height: 1em; vertical-align: -.15em; margin-inline-start: .2em; background: #D5DDF5; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mk-dots { display: inline-flex; gap: .3rem; margin-block-end: .4rem; }
.mk-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: #3A4265; }
.mk-window { padding: 0; overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.mk-bar .mk-dots { margin: 0; }
.mk-bar .mk-dots i { background: var(--line-2); }
.mk-bar-title { font-weight: 500; font-size: .78rem; color: var(--ink); }
.mk-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: .75rem; }
.mk-tool { display: grid; justify-items: center; gap: .3rem; padding: .7rem .3rem; border: 1px solid var(--line); border-radius: var(--r-s); text-align: center; }
.mk-tool .icon { width: 1.15rem; height: 1.15rem; color: var(--brand); }
.mk-tool b { font-size: .7rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.mk-tool:nth-child(4) { border-color: var(--brand); background: var(--brand-tint); }
.mk-chip { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; font-weight: 600; color: var(--ink); }
.mk-chip .icon { width: 1rem; height: 1rem; color: var(--good); }
.mk-chip em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .72rem; }
.mk-list { list-style: none; margin: 0; padding: .4rem; display: grid; gap: 2px; }
.mk-list li { display: flex; align-items: center; gap: .55rem; padding: .55rem .5rem; border-radius: 8px; }
.mk-list li + li { border-top: 1px solid var(--line); border-radius: 0; }
.mk-list .icon { width: 1rem; height: 1rem; color: var(--brand); flex: none; }
.mk-list b { flex: 1; font-weight: 500; color: var(--ink); font-size: .8rem; }
.mk-skel { height: .45rem; border-radius: 4px; background: var(--line); max-width: 6rem; }
.mk-avatars { display: inline-flex; }
.mk-avatars i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid #fff; margin-inline-start: -.35rem; background: #9CC6F0; }
.mk-avatars i:nth-child(2) { background: #F4CF6E; } .mk-avatars i:nth-child(3) { background: #8FE0B9; }
.mk-btn { font-size: .7rem; font-weight: 500; color: #fff; background: var(--brand); padding: .15rem .55rem; border-radius: 6px; }
.mk-bars { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; }
.mk-bars li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .5rem; font-size: .72rem; color: var(--muted); }
.mk-bars i { height: .4rem; border-radius: 4px; background: var(--brand); }
.mk-bars .b0 { width: 62%; } .mk-bars .b1 { width: 48%; background: var(--sky); } .mk-bars .b2 { width: 35%; } .mk-bars .b3 { width: 22%; background: var(--sky); }
.mk-browser .mk-url, .mk-dsearch .mk-url { display: inline-flex; align-items: center; gap: .3rem; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .1rem .5rem; font-size: .72rem; color: var(--ink); }
.mk-browser .mk-url .icon, .mk-dsearch .mk-url .icon { width: .75rem; height: .75rem; color: var(--good); }
.mk-page { padding: .75rem; display: grid; gap: .45rem; }
.mk-page .mk-hero { height: 4rem; border-radius: 8px; background: var(--brand-tint); border: 1px solid #D6E8FB; }
.mk-page .mk-l { height: .45rem; border-radius: 4px; background: var(--line); }
.mk-page .w80 { width: 80%; } .mk-page .w60 { width: 60%; }
.mk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.mk-cols i { height: 2rem; border-radius: 6px; border: 1px solid var(--line); }
.mk-domain { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.1rem; }
.mk-domain .mk-title { font-size: 1.15rem; }
.mk-domain .mk-title b { color: var(--brand); }
.mk-price { font-weight: 600; color: var(--ink); margin-inline-start: auto; }
.mk-price .cur[hidden] { display: none; }

/* ---------- Tech strip: official logos in uniform cards (logos are never recoloured) ---------- */
.ticker { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--surface)); padding-block: 1.6rem 1.8rem; }
.ticker-track { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.ticker-h { margin: 0 0 .9rem; text-align: center; font-size: .85rem; font-weight: 500; color: var(--subtle); }
html[lang="en"] .ticker-h { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.ticker-list { list-style: none; margin: 0 auto; padding: 0; max-width: 66rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: .75rem; }
.tk-item { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 4rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 1px 2px rgba(14, 19, 48, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tk-item:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 10px 24px -14px rgba(14, 19, 48, .35); }
.tk-item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 1.7rem; }
.tk-text { font-size: .95rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tk-text .icon { width: 1.15rem; height: 1.15rem; color: var(--brand); flex: none; }
@media (max-width: 40rem) {
  .ticker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tk-item { height: 3.4rem; }
  .tk-item img { max-height: 1.45rem; }
  .tk-text { font-size: .88rem; }
}

/* ---------- Sections ---------- */
.service, .tiles, .why, .steps, .faq, .finder-band { padding-block: var(--section); }
.service-alt, .why { background: var(--surface); border-block: 1px solid var(--line); }
.service-head { max-width: 44rem; margin-block-end: 2rem; }
.service-head p { margin-block-start: .5rem; color: var(--muted); font-size: var(--step-1); }
.tiles-title, .why h2 { text-align: center; margin-block-end: 2rem; }
.kicker { font-size: .85rem; font-weight: 500; color: var(--brand-dark); margin-block-end: .35rem; }

/* Tiles: bento grid, first tile is the dark feature card */
.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.tile:focus-within { box-shadow: var(--focus); }
.tile-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; border: 1px solid var(--line); color: var(--brand); margin-block-end: .5rem; }
.tile-icon .icon { width: 1.3rem; height: 1.3rem; }
.tile h3 { font-size: 1.05rem; font-weight: 600; }
.tile-link { text-decoration: none; color: inherit; }
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-link:focus-visible { box-shadow: none; }
.tile p { color: var(--muted); font-size: .92rem; }
.tile .tile-from { margin-block-start: auto; padding-block-start: .5rem; color: var(--ink); font-size: .9rem; }
.tile .tile-from bdi { font-weight: 600; }
.tile .tile-from[hidden] { display: none; }
.tile-cta { color: var(--brand); font-weight: 500; font-size: .92rem; }
.tile-cta::after { content: " ←"; } [dir="ltr"] .tile-cta::after { content: " →"; }
@media (min-width: 56rem) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  .tile:first-child:nth-last-child(4n+3) { grid-column: span 2; }
  .tile-grid:has(> .tile:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  .tile:first-child { background: var(--ink); border-color: var(--ink); color: #fff; padding: 1.75rem; }
  .tile:first-child h3 { color: #fff; font-size: 1.4rem; }
  .tile:first-child p, .tile:first-child .tile-from { color: var(--on-ink); }
  .tile:first-child .tile-from bdi { color: #fff; }
  .tile:first-child .tile-icon { border-color: #2A3160; color: var(--sky); width: 3rem; height: 3rem; }
  .tile:first-child .tile-cta { color: #fff; }
}
@media (max-width: 40rem) {
  .tile-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tile { padding: 1rem; }
  .tile p:not(.tile-from), .tile-cta { display: none; }
}

/* Why */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.why-grid > li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.35rem; }
.why-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; border: 1px solid var(--line); color: var(--brand); margin-block-end: .9rem; }
.why-icon .icon { width: 1.25rem; height: 1.25rem; }
.why h3 { margin-block-end: .3rem; font-size: 1.05rem; }
.why p { color: var(--muted); font-size: .95rem; }

/* Steps */
.steps { border-top: 1px solid var(--line); }
.step-list { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.step-list li { counter-increment: step; position: relative; padding-block-start: 3rem; }
.step-list li::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: .95rem; }
.step-list h3 { margin-block-end: .3rem; }
.step-list p { color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.05rem; font-weight: 500; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--subtle); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-block-end: 1.1rem; color: var(--muted); max-width: 62ch; }
@media (max-width: 48rem) { .faq-wrap { grid-template-columns: 1fr; } }

/* Contact */
.contact { background: var(--ink); color: var(--on-ink); padding-block: 3rem; }
.contact h2 { color: #fff; }
.contact p { margin-block-start: .4rem; }
.contact-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap; }
.contact-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.contact .btn-accent { background: #fff; color: var(--ink); }
.contact .btn-accent:hover { background: var(--brand-tint); color: var(--ink); }
.contact .btn-ghost { color: #fff; border-color: #2F3766; }
.contact .btn-ghost:hover { border-color: #fff; color: #fff; }
.contact :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }

/* Footer */
.site-footer { background: var(--ink-2); color: var(--on-ink); padding-block: 3.5rem 1.5rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.footer-brand p { margin-block-start: .8rem; max-width: 36ch; }
.site-footer .brand, .site-footer .brand:hover { color: #fff; }
.site-footer h2 { font-size: .95rem; color: #fff; font-weight: 500; margin-block-end: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px #fff; }
.footer-base { margin-block-start: 2.5rem; padding-block-start: 1.25rem; border-top: 1px solid #1C2247; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-meta { margin-block-start: 2.25rem; padding-block-start: 1.5rem; border-top: 1px solid #1C2247; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; }
.site-footer .ft-label { margin: 0 0 .6rem; font-size: .8rem; font-weight: 500; color: var(--on-ink); }
.site-footer .pay-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-item { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 2.4rem; min-width: 3.75rem; padding: .35rem .6rem; border-radius: 8px; background: #fff; }
.pay-item img { display: block; width: auto; height: auto; max-height: 1.4rem; max-width: 4.5rem; }
.pay-text { color: var(--ink); font-size: .82rem; font-weight: 500; }
.pay-text .icon { width: 1.05rem; height: 1.05rem; color: var(--brand); }
.ft-locale { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.site-footer .ft-seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.ft-seg a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .8rem; border-radius: 8px; border: 1px solid #262E5C; color: var(--on-ink); font-size: .85rem; font-weight: 500; }
.ft-seg a:hover { border-color: #3A4380; color: #fff; }
.ft-seg a[aria-current] { background: #fff; border-color: #fff; color: var(--ink); }
.ft-address { margin-block-start: 1rem; font-style: normal; display: grid; gap: .45rem; }
.ft-address p { display: flex; gap: .45rem; align-items: flex-start; margin: 0; max-width: 30ch; }
.ft-address .icon { width: 1rem; height: 1rem; flex: none; margin-block-start: .2em; color: var(--sky); }
.ft-office { font-size: .8rem; color: #fff; font-weight: 500; }
.ft-company { margin-block-start: 1.1rem; font-size: .88rem; }
.ft-company-name { color: #fff; }
.ft-legal { display: inline-block; margin-inline-start: .5rem; font-size: .8rem; opacity: .85; }
.contact-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-block-start: .5rem; font-size: .92rem; }
.contact-meta a { color: inherit; font-weight: 600; }
@media (max-width: 40rem) { .footer-meta { flex-direction: column; align-items: stretch; } }

/* Floating WhatsApp chat (site.contact.whatsapp). Opposite corner to the plan-finder button. */
.wa-float { position: fixed; z-index: 46; inset-block-end: 1rem; inset-inline-start: 1rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(145deg, var(--sky), var(--brand) 55%, var(--brand-dark)); box-shadow: 0 10px 24px -8px rgba(0, 117, 211, .6), 0 2px 6px rgba(14, 19, 48, .18); text-decoration: none; animation: wa-in .5s ease-out .6s both, wa-nudge 6s ease-in-out 3s infinite; }
.wa-float img { width: 1.6rem; height: 1.6rem; display: block; }
.wa-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: wa-ring 2.4s ease-out 1.2s infinite; pointer-events: none; }
.wa-hint { position: absolute; inset-inline-start: calc(100% + .6rem); top: 50%; transform: translateY(-50%); padding: .35rem .7rem; border-radius: 8px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wa-float:hover .wa-hint, .wa-float:focus-visible .wa-hint { opacity: 1; }
.wa-float:hover { filter: brightness(1.08); }
.wa-float:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes wa-nudge { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -12deg; } 94% { rotate: 10deg; } 97% { rotate: -6deg; } }
@media (max-width: 56rem) { .has-sticky .wa-float { inset-block-end: 4.75rem; } }
@media (hover: none) { .wa-hint { display: none; } }
@media print { .wa-float { display: none; } }
@media (max-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

.notfound { padding-block: calc(var(--section) * 1.5); }
.notfound p { margin-block: 1rem 1.75rem; color: var(--muted); max-width: 50ch; }

/* ---------- Page tabs ---------- */
.page-tabs { position: sticky; top: 4rem; z-index: 40; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.page-tabs .wrap { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.page-tabs a { flex: none; padding: .8rem .85rem; color: var(--muted); text-decoration: none; font-size: .95rem; border-bottom: 2px solid transparent; }
.page-tabs a:hover, .page-tabs a.is-active { color: var(--ink); border-bottom-color: var(--brand); }

/* ---------- Plans ---------- */
.cycle-switch { border: 0; padding: 0; margin: 0 0 1.5rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.cycle-switch legend { float: inline-start; font-weight: 500; margin-inline-end: .9rem; padding: 0; color: var(--ink); }
.cycle-options { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); }
.cycle-options label { position: relative; display: flex; }
.cycle-options input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cycle-options span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 7px; font-size: .92rem; color: var(--muted); }
.cycle-options input:checked + span { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(14, 19, 48, .12); }
.cycle-options input:focus-visible + span { box-shadow: var(--focus); }
.save-chip { font-style: normal; font-size: .72rem; font-weight: 600; padding: .02rem .4rem; border-radius: 5px; background: var(--good-tint); color: #0B7A4B; }
.save-chip[hidden] { display: none; }

.plan-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.plan { position: relative; flex: 1 1 16rem; max-width: 24rem; display: flex; flex-direction: column; gap: .85rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); transition: border-color .15s, box-shadow .15s; }
.plan:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.plan-flag { position: absolute; top: -.7rem; inset-inline-start: 1.25rem; font-size: .75rem; font-weight: 600; padding: .1rem .6rem; border-radius: 99px; background: var(--brand); color: #fff; }
.plan-name { font-size: 1.2rem; font-weight: 600; }
.plan-note { color: var(--muted); font-size: .92rem; }
.plan-buy { display: flex; flex-direction: column; gap: .5rem; }
.plan-buy[hidden] { display: none; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; }
.price .amount { font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price .per { color: var(--muted); font-size: .92rem; }
.price-na { color: var(--muted); }
.billed { font-size: .85rem; color: var(--muted); }
.billed bdi { color: var(--ink); font-weight: 500; }
.saving { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; font-size: .8rem; color: var(--subtle); }
.save-badge { font-weight: 600; font-size: .75rem; padding: .02rem .45rem; border-radius: 5px; background: var(--good-tint); color: #0B7A4B; }
.promo-line { display: flex; gap: .4rem; align-items: flex-start; font-size: .82rem; padding: .45rem .6rem; border-radius: 8px; background: var(--amber-tint); color: #6B4E00; }
.promo-line .icon { width: .9rem; height: .9rem; flex: none; margin-block-start: .25em; }
.setup { font-size: .82rem; color: var(--muted); }
.plan .btn { width: 100%; }
.plan .btn-ink { background: #fff; color: var(--ink); border-color: var(--line-2); }
.plan .btn-ink:hover { border-color: var(--ink); }
.specs { margin: 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; }
.spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--muted); }
.spec-row dd { margin: 0; font-weight: 500; color: var(--ink); text-align: end; font-variant-numeric: tabular-nums; }
.features { list-style: none; margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .45rem; }
.features li { display: flex; gap: .5rem; align-items: flex-start; font-size: .94rem; }
.features .icon { flex: none; width: 1rem; height: 1rem; margin-block-start: .3em; color: var(--good); }
.more-features summary { list-style: none; cursor: pointer; display: inline-flex; gap: .35rem; padding-block: .3rem; color: var(--brand); font-weight: 500; font-size: .92rem; }
.more-features summary::-webkit-details-marker { display: none; }
.more-features summary::after { content: "+"; }
.more-features[open] summary::after { content: "−"; }
.more-features .features { border-top: 0; padding-block-start: .3rem; }
.nudge { margin-block-start: auto; }
.nudge-line { display: flex; gap: .45rem; align-items: flex-start; margin-block-start: .5rem; padding: .6rem .7rem; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); font-size: .8rem; line-height: 1.55; }
.nudge-line[hidden] { display: none; }
.nudge-line .icon { width: .95rem; height: .95rem; color: var(--brand); flex: none; margin-block-start: .2em; }
.nudge-line b { color: var(--ink); font-weight: 600; }
.nudge-go { margin-block-start: .5rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--brand); cursor: pointer; }
.nudge-go::after { content: " ←"; } [dir="ltr"] .nudge-go::after { content: " →"; }
/* Suggested plan: the one dark card */
.plan.is-featured { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-2); }
.plan.is-featured .plan-name, .plan.is-featured .price .amount, .plan.is-featured .spec-row dd, .plan.is-featured .billed bdi, .plan.is-featured .nudge-line b { color: #fff; }
.plan.is-featured .price .per, .plan.is-featured .billed, .plan.is-featured .spec-row dt, .plan.is-featured .plan-note, .plan.is-featured .setup, .plan.is-featured .saving { color: var(--on-ink); }
.plan.is-featured .btn-ink { background: var(--brand); border-color: var(--brand); color: #fff; }
.plan.is-featured .btn-ink:hover { background: var(--brand-dark); }
.plan.is-featured .specs, .plan.is-featured .features, .plan.is-featured .spec-row { border-color: #252C57; }
.plan.is-featured .features .icon { color: #5CE1A0; }
.plan.is-featured .more-features summary { color: #8CC8FF; }
.plan.is-featured .promo-line { background: #1B2250; color: #F4D98A; }
.plan.is-featured .nudge-line { background: #151B45; border-color: #252C57; color: var(--on-ink); }
.plan.is-featured .nudge-line .icon { color: var(--sky); }
.plan.is-featured .tip-btn { color: var(--on-ink); }
.plan.is-featured .tip { background: #fff; color: var(--ink); }
.plan.is-featured :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--r-m); }
.notice p { max-width: 50ch; }
.price-meta { padding-block: 1.25rem 0; color: var(--subtle); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* Glossary tooltips */
.term { position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.tip-btn { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0; flex: none; border: 1px solid currentColor; border-radius: 50%; background: none; color: var(--subtle); font: 600 .65rem/1 var(--font); cursor: help; }
.tip-btn:hover, .tip-btn:focus-visible { color: var(--brand); }
.tip { display: none; position: absolute; inset-block-end: calc(100% + .45rem); inset-inline-start: 0; z-index: 30; width: max-content; max-width: 17rem; padding: .55rem .7rem; border-radius: 8px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 400; line-height: 1.55; text-align: start; white-space: normal; box-shadow: var(--shadow-2); }
.term:hover .tip, .tip-btn:focus + .tip, .tip-btn:focus-visible + .tip { display: block; }
@media (max-width: 48rem) {
  .tip { position: fixed; inset-block-end: 1rem; inset-inline: 1rem; width: auto; max-width: none; z-index: 60; }
  .term:hover .tip { display: none; }
  .tip-btn:focus + .tip, .tip-btn:focus-visible + .tip { display: block; }
}

/* ---------- Tables ---------- */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; }
.tld-table { width: 100%; border-collapse: collapse; min-width: 32rem; }
.tld-table caption { text-align: start; padding: 1rem 1.25rem .25rem; font-weight: 500; color: var(--ink); }
.tld-table th, .tld-table td { padding: .8rem 1.25rem; text-align: start; border-top: 1px solid var(--line); }
.tld-table thead th { color: var(--subtle); font-weight: 400; font-size: .9rem; }
.tld-table tbody th { font-weight: 600; color: var(--ink); }
.tld-table td { font-variant-numeric: tabular-nums; }

/* ---------- Domains page ---------- */
.dom-stats { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.dom-stats li { display: grid; gap: .1rem; }
.dom-stats b { font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dom-stats span { font-size: .85rem; color: var(--muted); }
.tld-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
.tld-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color .15s, box-shadow .15s; }
.tld-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.tld-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tld-card-name { font-size: 1.6rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tld-card-price { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.tld-card-price small { font-size: .78rem; font-weight: 400; color: var(--muted); }
.tld-card-renew { font-size: .85rem; color: var(--muted); }
.tld-card .btn { margin-block-start: auto; align-self: flex-start; }
.tld-card-renew + .btn, .tld-card-price + .btn { margin-block-start: .75rem; }
.tld-badge { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 500; background: var(--brand-tint); color: var(--brand-dark); vertical-align: .1em; }
.tld-badge.is-sale { background: #FFF4D6; color: #7A5800; }
.tld-badge.is-new { background: var(--good-tint); color: #0B7A4B; }
.tldx { display: grid; gap: .9rem; }
.tldx-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.tldx-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.tldx-search .icon { position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--subtle); pointer-events: none; }
.tldx-search input { width: 100%; padding: .7rem 1rem; padding-inline-start: 2.5rem; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; font: inherit; color: var(--ink); }
.tldx-search input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.tldx-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }
.tldx-sort select { padding: .55rem 2rem .55rem .75rem; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; font: inherit; color: var(--ink); }
.tldx-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.tldx-cats button { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--line-2); border-radius: 99px; background: #fff; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; }
.tldx-cats button span { font-size: .75rem; color: var(--subtle); }
.tldx-cats button:hover { border-color: var(--brand); }
.tldx-cats button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tldx-cats button[aria-pressed="true"] span { color: var(--on-ink); }
.tldx-count { font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.tldx .table-scroll { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); max-height: 42rem; overflow: auto; }
.tld-table-full { min-width: 46rem; }
.tld-table-full thead th { position: sticky; top: 0; background: #fff; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); border-top: 0; }
.tld-table-full tbody tr:hover { background: var(--surface); }
.tld-table-full tbody th bdi { font-size: 1.02rem; }
.tld-years { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.tld-extras { white-space: nowrap; }
.tld-addon { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 7px; border: 1px solid var(--line); color: var(--brand); margin-inline-end: .2rem; }
.tld-addon .icon { width: .95rem; height: .95rem; }
.tld-go { text-align: end; }
.tldx-empty { padding: 1.5rem; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-m); }
.tldx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; color: var(--muted); }
.tldx-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.tldx-legend .icon { width: .95rem; height: .95rem; color: var(--brand); }
.domain-features .why-grid { margin-block-start: 2rem; }
.domain-features h2 { text-align: center; }
@media (max-width: 40rem) {
  .tldx-sort { width: 100%; justify-content: space-between; }
  .tld-cards { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tld-card { padding: 1rem; }
  .tld-card-name { font-size: 1.3rem; }
  .tld-card-price { font-size: 1rem; }
  /* Full list as stacked rows: extension + price on top, the rest labelled underneath */
  .tldx .table-scroll { max-height: 36rem; }
  .tld-table-full { min-width: 0; display: block; }
  .tld-table-full thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tld-table-full tbody { display: block; }
  .tld-table-full tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .75rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }
  .tld-table-full tr:first-child { border-top: 0; }
  .tld-table-full th, .tld-table-full td { padding: 0; border: 0; }
  .tld-table-full .tld-register { font-weight: 600; color: var(--ink); text-align: end; }
  .tld-table-full .tld-renew, .tld-table-full .tld-transfer, .tld-table-full .tld-years { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
  .tld-table-full .tld-renew::before, .tld-table-full .tld-transfer::before, .tld-table-full .tld-years::before { content: attr(data-label); }
  .tld-table-full .tld-extras { grid-column: 1; }
  .tld-table-full .tld-go { grid-column: 2; }
}
.matrix, .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.matrix { min-width: 40rem; }
.matrix th, .matrix td, .compare-table th, .compare-table td { padding: .7rem 1rem; text-align: start; border-top: 1px solid var(--line); vertical-align: middle; font-size: .93rem; }
.matrix thead th, .compare-table thead th { border-top: 0; }
.matrix thead th { color: var(--ink); font-weight: 600; }
.matrix thead a { color: inherit; }
.matrix tbody th[scope="row"], .compare-table tbody th[scope="row"] { font-weight: 400; color: var(--text); }
.matrix-group th, .compare-group th { background: var(--surface); color: var(--ink); font-weight: 500; font-size: .88rem; padding-block: .55rem; }
.matrix .icon, .compare-table .icon { display: inline-block; vertical-align: -.15em; }
.matrix-group .icon { width: 1rem; height: 1rem; margin-inline-end: .4rem; color: var(--brand); }
.matrix td.is-yes { color: var(--ink); font-size: .88rem; }
.matrix td.is-yes .icon { width: .95rem; height: .95rem; margin-inline-end: .3rem; color: var(--good); }
.matrix td.is-na, .compare-table td.is-no { color: var(--line-2); }
.matrix-legend { margin-block-start: .75rem; color: var(--subtle); font-size: var(--step--1); }
.matrix th:first-child, .matrix td:first-child, .compare-table th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; }
.matrix-group th:first-child, .compare-group th:first-child { background: var(--surface); }
.compare-hint { display: none; color: var(--subtle); font-size: var(--step--1); margin-block-end: .6rem; }
.compare-table { min-width: 44rem; table-layout: fixed; }
.compare-table thead th:first-child, .compare-table tbody th[scope="row"] { width: 14rem; }
.compare-table thead th { vertical-align: top; padding-block: 1.1rem; }
.compare-table thead th.is-featured { background: var(--ink); color: #fff; border-radius: var(--r-s) var(--r-s) 0 0; }
.compare-corner { color: var(--subtle); font-weight: 400; vertical-align: bottom !important; }
.compare-flag { display: inline-block; margin-block-end: .35rem; padding: .05rem .5rem; border-radius: 99px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 600; }
.compare-name { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.compare-table thead th.is-featured .compare-name, .compare-table thead th.is-featured .compare-price { color: #fff; }
.compare-buy { display: grid; gap: .5rem; margin-block-start: .4rem; }
.compare-buy[hidden] { display: none; }
.compare-price { font-size: 1.1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.compare-price small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.compare-price.is-na { font-size: .92rem; font-weight: 400; color: var(--muted); }
.compare-table thead th.is-featured .compare-price small { color: var(--on-ink); }
.compare-table thead th.is-featured .btn-small { background: var(--brand); border-color: var(--brand); color: #fff; }
.compare-table td { text-align: center; }
.compare-table td.is-value { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.compare-table td.is-featured { background: #F6F8FD; }
.compare-table td .icon { width: 1.1rem; height: 1.1rem; }
.compare-table td.is-yes .icon { color: var(--good); }
@media (max-width: 56rem) { .compare-hint { display: block; } }

/* ---------- Server configurator ---------- */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.75rem; align-items: start; margin-block-end: 2.5rem; padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
.cfg-title { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.cfg-lead { color: var(--muted); margin-block: .2rem 1.2rem; }
.cfg-rail { --n: 3; }
.picker-range { --p: .5; --thumb: 22px; display: block; width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* The fill ends under the thumb's centre, which travels from thumb/2 to 100% - thumb/2. */
.picker-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)), var(--line) 0); }
[dir="rtl"] .picker-range::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--brand) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)), var(--line) 0); }
.picker-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--line); }
.picker-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--brand); }
.picker-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgba(14, 19, 48, .2); transition: transform .15s ease; }
.picker-range::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgba(14, 19, 48, .2); }
.picker-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.picker-range:focus-visible { box-shadow: none; }
.picker-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.picker-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
/* Aligned mode (≤5 plans): the slider spans from the centre of the first chip column to the
   centre of the last, so each stop sits exactly above its plan chip. */
.cfg-rail.is-aligned { padding-inline: calc(50% / var(--n) - var(--thumb, 22px) / 2); }
.cfg-chips { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.cfg-chips.is-aligned { --n: 3; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .35rem; }
.cfg-chips.is-aligned li { display: flex; justify-content: center; min-width: 0; }
.cfg-chips.is-aligned .picker-tick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tick { padding: .35rem .85rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.picker-tick:hover { border-color: var(--ink); }
.picker-tick.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cfg-h { margin-block: 1.5rem .6rem; font-size: .82rem; font-weight: 500; color: var(--subtle); }
html[lang="en"] .cfg-h { text-transform: uppercase; letter-spacing: .05em; }
.cfg-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cfg-spec { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .15rem .75rem; padding: .8rem .9rem; border-radius: var(--r-s); border: 1px solid var(--line); }
.cfg-spec dt { color: var(--muted); font-size: .88rem; }
.cfg-spec dd { margin: 0; font-weight: 600; font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cfg-meter { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-block-start: .35rem; }
.cfg-meter i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .35s ease; }
.cfg-meter .m0 { width: 0; } .cfg-meter .m1 { width: 5%; } .cfg-meter .m2 { width: 10%; } .cfg-meter .m3 { width: 15%; } .cfg-meter .m4 { width: 20%; }
.cfg-meter .m5 { width: 25%; } .cfg-meter .m6 { width: 30%; } .cfg-meter .m7 { width: 35%; } .cfg-meter .m8 { width: 40%; } .cfg-meter .m9 { width: 45%; }
.cfg-meter .m10 { width: 50%; } .cfg-meter .m11 { width: 55%; } .cfg-meter .m12 { width: 60%; } .cfg-meter .m13 { width: 65%; } .cfg-meter .m14 { width: 70%; }
.cfg-meter .m15 { width: 75%; } .cfg-meter .m16 { width: 80%; } .cfg-meter .m17 { width: 85%; } .cfg-meter .m18 { width: 90%; } .cfg-meter .m19 { width: 95%; } .cfg-meter .m20 { width: 100%; }
.cfg-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
.cfg-feats li { display: flex; gap: .5rem; align-items: flex-start; }
.cfg-feats .icon { width: 1rem; height: 1rem; color: var(--good); flex: none; margin-block-start: .3em; }
.cfg-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.cfg-facts div { padding: .6rem .85rem; border: 1px dashed var(--line-2); border-radius: var(--r-s); }
.cfg-facts dt { font-size: .8rem; color: var(--subtle); }
.cfg-facts dd { margin: 0; font-weight: 500; color: var(--ink); }
.cfg-side { position: sticky; top: 8rem; display: grid; gap: .9rem; padding: 1.25rem; border-radius: var(--r-m); background: var(--ink); color: var(--on-ink); }
.cfg-art { position: relative; display: grid; place-items: center; }
.cfg-art > img { grid-area: 1 / 1; width: 100%; height: auto; position: relative; }
/* Tier images cross-fade; the glow behind grows with the plan level (--lvl, 0..1). */
.cfg-art > .cfg-tier { opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .45s ease, transform .45s ease; }
.cfg-art > .cfg-tier.is-on { opacity: 1; transform: none; }
.cfg-glow { grid-area: 1 / 1; width: 80%; aspect-ratio: 2 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(54, 204, 248, .55), rgba(54, 204, 248, 0)); opacity: calc(.25 + var(--lvl, .5) * .6); transform: scale(calc(.8 + var(--lvl, .5) * .35)); transition: opacity .45s ease, transform .45s ease; }
.cfg-step { font-size: .8rem; color: var(--on-ink); }
.cfg-sum-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-block: .1rem .5rem; }
.pp-name { font-size: 1.35rem; font-weight: 600; color: #fff; }
.pp-flag { font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--brand); color: #fff; }
.pp { animation: fade .25s ease-out; }
.pp[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pp-price { display: grid; gap: .6rem; }
.pp-price[hidden] { display: none; }
.cfg-price { display: grid; gap: .35rem; }
.cfg-side .price .amount { color: #fff; font-size: 1.9rem; }
.cfg-side .price .per, .cfg-side .billed, .cfg-side .saving, .cfg-side .setup { color: var(--on-ink); }
.cfg-side .billed bdi { color: #fff; }
.cfg-side .promo-line { background: #1B2250; color: #F4D98A; }
.cfg-side .btn-primary { width: 100%; }
.cfg-side .nudge-line { background: #151B45; border-color: #252C57; color: var(--on-ink); }
.cfg-side .nudge-line b { color: #fff; }
.cfg-side .nudge-line .icon { color: var(--sky); }
.cfg-side .nudge-go { color: #8CC8FF; }
.cfg-side :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
@media (max-width: 56rem) {
  .cfg { grid-template-columns: 1fr; }
  .cfg-side { position: static; order: -1; }
  .cfg-art { max-width: 14rem; margin-inline: auto; }
}
@media (max-width: 34rem) { .cfg-specs, .cfg-feats { grid-template-columns: 1fr; } }

/* ---------- Panels hub, features, explorer ---------- */
.panel-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.panel-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
.panel-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.panel-card-top { display: flex; gap: .85rem; align-items: center; }
.panel-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 10px; border: 1px solid var(--line); color: var(--brand); }
.panel-card h3 { font-size: 1.2rem; }
.panel-card-short { color: var(--muted); font-size: .92rem; }
.panel-card-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.panel-card-points li { display: flex; gap: .5rem; font-size: .94rem; }
.panel-card-points .icon { width: 1rem; height: 1rem; flex: none; margin-block-start: .3em; color: var(--good); }
.panel-card .stack { margin: 0; }
.panel-card-foot { margin-block-start: auto; display: grid; gap: .7rem; padding-block-start: 1rem; border-top: 1px solid var(--line); }
.panel-from { color: var(--muted); }
.panel-from bdi { color: var(--ink); font-weight: 600; }

.ftabs-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1.25rem; }
.ftabs-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: inherit; font-size: .94rem; cursor: pointer; }
.ftabs-tab .icon { width: 1rem; height: 1rem; }
.ftabs-tab .count { font-size: .75rem; color: var(--subtle); }
.ftabs-tab:hover { color: var(--ink); border-color: var(--ink); }
.ftabs-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ftabs-tab[aria-selected="true"] .count { color: var(--on-ink); }
.ftabs-panel + .ftabs-panel { margin-block-start: 2rem; }
.js .ftabs-panel + .ftabs-panel { margin-block-start: 0; }
.ftabs-heading { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin-block-end: 1rem; }
.ftabs-heading .icon { width: 1.1rem; height: 1.1rem; color: var(--brand); }
.js .ftabs-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fcards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fcard { position: relative; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; }
.fcard-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; border: 1px solid var(--line); color: var(--brand); margin-block-end: .8rem; }
.fcard-icon .icon { width: 1.1rem; height: 1.1rem; }
.fcard h4 { font-size: 1rem; margin-block-end: .25rem; }
.fcard p { color: var(--muted); font-size: .93rem; }

.px { position: relative; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; overflow: hidden; box-shadow: var(--shadow-1); }
.px-bar { display: flex; align-items: center; gap: 1rem; padding: .65rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.px-dots { display: inline-flex; gap: .35rem; }
.px-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-2); }
.px-title { font-weight: 600; color: var(--ink); }
.px-search { margin-inline-start: auto; position: relative; display: flex; align-items: center; }
.px-search .icon { position: absolute; inset-inline-start: .6rem; width: .95rem; height: .95rem; color: var(--subtle); pointer-events: none; }
.px-search input { width: min(15rem, 42vw); padding: .4rem .7rem; padding-inline-start: 2rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: inherit; font-size: .9rem; }
.px-search input:focus-visible { border-color: var(--brand); box-shadow: none; }
.px-body { display: grid; grid-template-columns: 1fr; }
.js .px-body { grid-template-columns: 12.5rem minmax(0, 1fr) 15rem; min-height: 21rem; }
.px-side { display: flex; flex-direction: column; gap: 2px; padding: .6rem; border-inline-end: 1px solid var(--line); }
.px-cat { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: .93rem; text-align: start; cursor: pointer; }
.px-cat .icon { width: 1rem; height: 1rem; flex: none; }
.px-cat .count { margin-inline-start: auto; font-size: .75rem; color: var(--subtle); }
.px-cat:hover { background: var(--surface); color: var(--ink); }
.px-cat[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 500; }
.px-cat[aria-selected="true"] .icon { color: var(--brand); }
.px.is-searching .px-cat[aria-selected="true"] { background: none; font-weight: 400; }
.px-main { padding: 1.1rem; }
.px-section + .px-section { margin-block-start: 1.5rem; }
.js .px-section + .px-section { margin-block-start: 0; }
.js .px.is-searching .px-section + .px-section:not([hidden]) { margin-block-start: 1.25rem; }
.px-heading { font-size: .88rem; color: var(--subtle); font-weight: 500; margin-block-end: .7rem; }
.px-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.js .px-tools { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.px-tools li[hidden] { display: none; }
.px-tool { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; gap: .25rem .55rem; align-items: center; align-content: start; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.px-tool:hover { border-color: var(--line-2); }
.px-tool-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 7px; background: var(--surface); color: var(--brand); }
.px-tool-icon .icon { width: 1rem; height: 1rem; }
.px-tool-name { font-weight: 500; font-size: .9rem; color: var(--ink); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.px-tool-desc { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; }
.js .px-tool-desc { display: none; }
.px-tool.is-plugin .px-tool-icon { background: var(--amber-tint); color: #8A6300; }
.px-plugin { font-style: normal; font-size: .78rem; color: #8A6300; }
.px-tool[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.px-empty { color: var(--muted); padding: 1rem 0; }
.px-detail { padding: 1.1rem; border-inline-start: 1px solid var(--line); background: var(--surface); }
.px-detail-empty { display: grid; justify-items: center; gap: .6rem; text-align: center; color: var(--subtle); padding-block: 3rem 1rem; font-size: .92rem; }
.px-detail-empty[hidden] { display: none; }
.px-detail-empty .icon { width: 1.75rem; height: 1.75rem; color: var(--line-2); }
.px-detail-cat { font-size: .8rem; color: var(--brand-dark); }
.px-detail-name { font-size: 1.15rem; margin-block: .2rem .1rem; text-align: start; }
.px-detail-label { color: var(--muted); font-size: .9rem; margin-block-end: .8rem; }
.px-foot { padding: .55rem 1rem; border-top: 1px solid var(--line); color: var(--subtle); font-size: .82rem; }
@media (max-width: 64rem) {
  .js .px-body { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .px-detail { display: none; }
  .js .px-tools li:has(> .px-tool[aria-pressed="true"]) { grid-column: 1 / -1; }
  .js .px-tool[aria-pressed="true"] .px-tool-desc { display: block; }
}
@media (max-width: 40rem) {
  .js .px-body { grid-template-columns: 1fr; }
  .px-side { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .px-cat { flex: none; }
  .px-cat .count { display: none; }
  .px-bar { flex-wrap: wrap; }
  .px-search, .px-search input { width: 100%; }
  .js .px-tools { grid-template-columns: 1fr 1fr; }
}

/* ---------- Plan finder ---------- */
.finder-band { border-block: 1px solid var(--line); background: var(--surface); }
.finder-band-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 2.5rem; align-items: start; }
.finder-band-copy p:not(.kicker) { color: var(--muted); margin-block-start: .6rem; font-size: var(--step-1); }
.finder { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); box-shadow: var(--shadow-1); }
.finder-top { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.finder-step { font-size: .82rem; color: var(--subtle); white-space: nowrap; }
.finder-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.finder-progress i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: inherit; transition: width .3s ease; }
.fq { border: 0; margin: 0; padding: 0; }
.fq[hidden] { display: none; }
.fq-title { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-block-end: 1rem; padding: 0; }
.fq-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.fq-sites, .fq-traffic { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.fq-opt { position: relative; display: flex; }
.fq-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fq-card { flex: 1; display: grid; gap: .1rem; padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.fq-card b { color: var(--ink); font-weight: 500; }
.fq-card small { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.fq-opt:hover .fq-card { border-color: var(--ink); }
.fq-opt input:checked + .fq-card { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.fq-opt input:focus-visible + .fq-card { box-shadow: var(--focus); }
.finder-nav { margin-block-start: 1rem; display: flex; }
.finder-nav [hidden], .finder-restart[hidden] { display: none; }
.finder-restart { margin-block-start: 1rem; background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.finder-result { outline: none; }
.fr-kicker { font-size: .85rem; color: var(--subtle); margin-block-end: .75rem; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.fr-card { position: relative; display: grid; gap: .45rem; padding: 1.35rem; border-radius: var(--r-m); border: 1px solid var(--line); background: #fff; }
.fr-card.is-best { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.fr-badge { justify-self: start; font-size: .72rem; font-weight: 600; padding: .05rem .55rem; border-radius: 99px; background: var(--brand); color: #fff; }
.fr-card.is-growth .fr-badge { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.fr-svc { font-size: .82rem; color: var(--subtle); }
.fr-card.is-best .fr-svc { color: var(--on-ink); }
.fr-plan { font-size: 1.35rem; }
.fr-card.is-best .fr-plan { color: #fff; }
.fr-price { display: flex; align-items: baseline; gap: .3rem; }
.fr-amt { font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fr-card.is-best .fr-amt { color: #fff; }
.fr-price.is-big .fr-amt { font-size: 2.1rem; }
.fr-per, .fr-note { font-size: .85rem; color: var(--subtle); }
.fr-card.is-best .fr-per, .fr-card.is-best .fr-note { color: var(--on-ink); }
.fr-save { justify-self: start; font-size: .75rem; font-weight: 600; padding: .02rem .5rem; border-radius: 5px; background: var(--good-tint); color: #0B7A4B; }
.fr-specs { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.fr-specs li { display: grid; padding: .5rem .65rem; border-radius: 8px; border: 1px solid #252C57; font-size: .78rem; }
.fr-specs b { font-size: .98rem; color: #fff; font-weight: 500; }
.fr-why { font-weight: 500; margin-block-start: .35rem; font-size: .9rem; color: inherit; }
.fr-card.is-best .fr-why { color: #fff; }
.fr-reasons, .fr-gains { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.fr-reasons li::before { content: "✓"; margin-inline-end: .45rem; color: #5CE1A0; }
.fr-gains li::before { content: "+"; margin-inline-end: .45rem; color: var(--brand); font-weight: 600; }
.fr-order { margin-block-start: .5rem; }
.fr-details { color: #8CC8FF; font-size: .9rem; justify-self: start; }
.fr-details:hover { color: #fff; }
.fr-none { color: var(--muted); margin-block-end: 1rem; }
.fr-card.is-best :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.finder-noscript { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.finder-hero .finder-head { max-width: 44rem; margin-block: 1rem 1.5rem; }
.finder-hero { padding-block-end: var(--section); }
@media (max-width: 60rem) { .finder-band-grid, .fr-grid { grid-template-columns: 1fr; } }

/* ---------- Floating finder button, sticky mobile CTA, scroll progress ---------- */
.fab { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 45; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .92rem; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .fab { opacity: 1; transform: none; pointer-events: auto; }
.fab .icon { width: 1rem; height: 1rem; color: #5CE1A0; }
.fab:hover { color: #fff; background: #1F2650; }
.fab:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 46; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; padding-block-end: env(safe-area-inset-bottom, 0px); }
.sticky-cta.is-shown { transform: none; }
.sticky-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.sticky-cta-text { display: grid; line-height: 1.3; }
.sticky-cta-text b { color: var(--ink); font-weight: 500; font-size: .95rem; }
.sticky-from { font-size: .82rem; color: var(--muted); }
.sticky-from[hidden] { display: none; }
@media (min-width: 56.01rem) { .sticky-cta { display: none; } }
@media (max-width: 56rem) { .has-sticky .fab { inset-block-end: 4.75rem; } }
.scroll-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 80; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .scroll-progress i { transform-origin: right; }

/* ---------- Reveal (starts visible for non-JS; JS adds a short fade-up) ---------- */
.can-reveal [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .45s ease-out, transform .45s ease-out; }
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.can-reveal [data-reveal].rv1 { transition-delay: .05s; } .can-reveal [data-reveal].rv2 { transition-delay: .1s; } .can-reveal [data-reveal].rv3 { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Preview installs (site.demo_notice) */
.demo-bar { margin: 0; padding: .45rem var(--gutter); background: #FFF4D6; color: #5C4300; font-size: .85rem; text-align: center; border-bottom: 1px solid #F2DFA6; }
.footer-credit { font-size: .78rem; }
.footer-credit a { color: inherit; }

/* ---------- Animated scenes (views/partials/anim.php) — decorative, transform/opacity only ---------- */
.anim { display: block; width: 100%; height: auto; overflow: visible; }
.anim text { font: 600 11px var(--font); fill: var(--brand-dark); text-anchor: middle; direction: ltr; }

/* Hero network background */
.hero, .svc-hero { position: relative; isolation: isolate; }
.hero-net { position: absolute; inset-inline: 0; bottom: 0; height: 58%; z-index: -1; pointer-events: none; overflow: hidden; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 35%, #000 80%, transparent); }
.hero-net .anim { width: 100%; height: 100%; }
.anim-network .an-links path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 6 8; animation: an-dash 18s linear infinite; }
.anim-network .an-nodes circle { fill: #fff; stroke: var(--sky); stroke-width: 2; }
.anim-network .an-nodes .an-hub { fill: var(--brand); stroke: #fff; }
.anim-network .an-pings circle { fill: none; stroke: var(--brand); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: an-ping 3s ease-out infinite; }
.anim-network .an-pings circle:nth-child(2) { animation-delay: 1.4s; stroke: var(--sky); }
.anim-network .an-p1 { fill: var(--brand); } .anim-network .an-p2 { fill: var(--sky); } .anim-network .an-p3 { fill: var(--good); }

/* Domain globe */
.an-halo { fill: var(--brand-tint); transform-box: fill-box; transform-origin: center; animation: an-breathe 4s ease-in-out infinite; }
.an-globe circle, .an-globe ellipse, .an-globe path { fill: none; stroke: var(--brand); stroke-width: 2.2; }
.an-globe > circle { fill: #fff; }
.an-meridian { transform-box: fill-box; transform-origin: center; animation: an-spin-y 6s linear infinite; }
.an-m2 { animation-delay: -3s; }
.an-tag rect { fill: #fff; stroke: var(--line-2); }
.an-tag { animation: an-float 4s ease-in-out infinite; }
.an-t2 { animation-delay: -1.3s; } .an-t3 { animation-delay: -2.6s; }

/* Server rack */
.an-case { fill: var(--ink); }
.an-unit { fill: #1B2347; stroke: #2A3566; }
.an-slot { fill: #2E3A6E; }
.an-led { fill: var(--sky); animation: an-blink 1.6s steps(2, jump-none) infinite; }
.an-ledb { fill: var(--good); }
.an-led2 { animation-delay: -.4s; } .an-led3 { animation-delay: -.9s; } .an-led4 { animation-delay: -1.2s; }
.an-bar { fill: var(--brand); transform-box: fill-box; transform-origin: bottom; animation: an-eq 1.8s ease-in-out infinite; }
.an-b2 { fill: var(--sky); animation-delay: -.6s; } .an-b3 { fill: var(--sky); animation-delay: -1.1s; }

/* Security shield */
.an-shield { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 2.5; }
.an-scan { fill: rgba(37, 163, 218, .28); animation: an-scan 3.2s ease-in-out infinite; }
.an-lock rect { fill: var(--brand); }
.an-shackle { fill: none; stroke: var(--brand-dark); stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom left; animation: an-shackle 3.2s ease-in-out infinite; }
.an-key { fill: #fff; } .an-keyline { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.an-checks circle { fill: var(--good); } .an-checks path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.an-checks { transform-box: fill-box; transform-origin: center; animation: an-pop 3.2s ease-out infinite; }

/* Clients */
.an-screen { fill: #fff; stroke: var(--line-2); stroke-width: 2; }
.an-screenbar { stroke: var(--line-2); stroke-width: 2; }
.an-stand { fill: none; stroke: var(--line-2); stroke-width: 2; }
.an-chart { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: an-draw 4s ease-in-out infinite; }
.an-user circle, .an-user path { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 2; }
.an-user { animation: an-float 3.6s ease-in-out infinite; }
.an-u2 { animation-delay: -1.2s; } .an-u3 { animation-delay: -2.4s; }
.an-wire { fill: none; stroke: var(--sky); stroke-width: 2; stroke-dasharray: 4 5; animation: an-dash 3s linear infinite; }
.an-heart path { fill: #E5486D; }
.an-heart { transform-box: fill-box; transform-origin: center; animation: an-heart 3.6s ease-in-out infinite; }

/* Journey section (home): four scenes joined by a moving dashed line, in reading order */
.journey { padding-block: var(--section); background: linear-gradient(180deg, var(--surface), #fff); overflow: hidden; }
.journey h2 { text-align: center; margin: 0 0 .5rem; font-size: var(--step-2); }
.journey-lead { text-align: center; color: var(--muted); margin: 0 auto 2.5rem; max-width: 40rem; }
.journey-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.journey-list::before { content: ""; position: absolute; inset-inline: 12%; top: 5.25rem; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--sky) 0 8px, transparent 8px 16px); background-size: 32px 2px; animation: an-flow 1.6s linear infinite; }
[dir="rtl"] .journey-list::before { animation-direction: reverse; }
.journey-list > li { position: relative; z-index: 1; text-align: center; }
.journey-art { width: 100%; max-width: 11rem; margin: 0 auto .75rem; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); transition: transform .3s ease, box-shadow .3s ease; }
.journey-list > li:hover .journey-art { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.journey-step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 600; margin-block-end: .4rem; }
.journey-list h3 { margin: 0 0 .3rem; font-size: var(--step-1); }
.journey-list p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 56rem) {
  .journey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .journey-list::before { display: none; }
}
@media (max-width: 30rem) { .journey-art { max-width: 9rem; } }

/* Small scene beside a service hero / tile when there is no photo */
.svc-anim { max-width: 22rem; margin-inline: auto; }

@keyframes an-dash { to { stroke-dashoffset: -280; } }
@keyframes an-flow { to { background-position: 32px 0; } }
@keyframes an-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
@keyframes an-breathe { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes an-spin-y { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } }
@keyframes an-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes an-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes an-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes an-scan { 0% { transform: translateY(0); } 50% { transform: translateY(120px); } 100% { transform: translateY(0); } }
@keyframes an-shackle { 0%, 35%, 100% { transform: translateY(0); } 50%, 65% { transform: translateY(-5px); } }
@keyframes an-pop { 0%, 55% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 1; } }
@keyframes an-draw { 0% { stroke-dashoffset: 90; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 90; } }
@keyframes an-heart { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.25); } 80% { transform: scale(.95); } }

@media (prefers-reduced-motion: reduce) {
  .anim *, .journey-list::before { animation: none !important; }
  .anim-network .an-packets, .anim-network .an-pings { display: none; }
  .an-chart { stroke-dashoffset: 0; }
  .an-checks { transform: none; opacity: 1; }
}

/* ---------- More scenes ---------- */
.anim .an-label { font-size: 10px; fill: var(--muted); }
/* speed */
.an-gauge { fill: none; stroke: var(--line-2); stroke-width: 10; stroke-linecap: round; }
.an-gauge-fill { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 189; stroke-dashoffset: 189; animation: an-gauge 3.6s ease-in-out infinite; }
.an-ticks path { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.an-needle path { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.an-needle circle { fill: var(--ink); }
.an-needle { transform-origin: 100px 112px; animation: an-needle 3.6s ease-in-out infinite; }
.an-streaks path { stroke: var(--sky); stroke-width: 3; stroke-linecap: round; animation: an-streak 1.2s linear infinite; }
.an-streaks path:nth-child(2) { animation-delay: -.4s; } .an-streaks path:nth-child(3) { animation-delay: -.8s; }
/* panel */
.an-window { fill: #fff; stroke: var(--line-2); stroke-width: 2; }
.an-winbar { stroke: var(--line-2); stroke-width: 2; }
.an-dot { fill: var(--line-2); }
.an-line { fill: var(--line); }
.an-track { fill: var(--line-2); animation: an-track 4.5s ease-in-out infinite; }
.an-knob { fill: #fff; stroke: var(--line-2); animation: an-knob 4.5s ease-in-out infinite; }
.an-s2 .an-track, .an-s2 .an-knob { animation-delay: -1.5s; }
.an-s3 .an-track, .an-s3 .an-knob { animation-delay: -3s; }
.an-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.5; }
.an-cursor { animation: an-cursor 4.5s ease-in-out infinite; }
/* cloud */
.an-cloud { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 2.5; animation: an-float 5s ease-in-out infinite; }
.an-rain path { stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 6; animation: an-dash 1.4s linear infinite; }
.an-vm rect:first-child { fill: var(--ink); }
.an-vmline { fill: #2E3A6E; } .an-vmled { fill: var(--good); animation: an-blink 1.4s steps(2, jump-none) infinite; }
.an-vm { transform-box: fill-box; transform-origin: bottom; animation: an-vmgrow 4.5s ease-in-out infinite; }
.an-v2 { animation-delay: .3s; } .an-v3 { animation-delay: .6s; }
.an-up path { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: an-float 2s ease-in-out infinite; }
/* backup */
.an-arc { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; }
.an-arrow { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.an-cycle { transform-origin: 100px 80px; animation: an-rotate 6s linear infinite; }
.an-db ellipse, .an-db path { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.an-dbline { fill: none !important; }
/* storage */
.an-folder { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 2.5; }
.an-file rect { fill: #fff; stroke: var(--line-2); stroke-width: 2; }
.an-file path { stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; }
.an-file { animation: an-drop 4s ease-in-out infinite; }
.an-f2 { animation-delay: -2s; }
.an-team circle { fill: #fff; stroke: var(--brand); stroke-width: 2; animation: an-blink 2.4s ease-in-out infinite; }
.an-team circle:nth-child(2) { animation-delay: -.8s; } .an-team circle:nth-child(3) { animation-delay: -1.6s; }
.an-sync { stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; animation: an-dash 2s linear infinite; }
/* dns */
.an-rec rect:first-child { fill: var(--surface); stroke: var(--line); }
.an-rec text { font-size: 9px; fill: var(--brand-dark); }
.an-recline { fill: var(--line-2); }
.an-recled { fill: var(--good); }
.an-rec { animation: an-recflash 4s ease-in-out infinite; }
.an-r2 { animation-delay: .5s; } .an-r3 { animation-delay: 1s; } .an-r4 { animation-delay: 1.5s; }
/* transfer */
.an-box rect { fill: #fff; stroke: var(--line-2); stroke-width: 2; }
.an-box path { stroke: var(--line-2); stroke-width: 2.5; stroke-linecap: round; }
.an-to rect { stroke: var(--brand); }
.an-path { fill: none; stroke: var(--sky); stroke-width: 2; stroke-dasharray: 4 5; animation: an-dash 2s linear infinite; }
.an-token rect { fill: var(--brand); } .an-token text { fill: #fff; font-size: 10px; }
.an-token { animation: an-move 3.6s ease-in-out infinite; }
[dir="rtl"] .an-token { animation-name: an-move-rtl; }
.an-key2 circle, .an-key2 path { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.an-key2 { animation: an-float 3s ease-in-out infinite; }
/* email */
.an-env rect { fill: #fff; stroke: var(--brand); stroke-width: 2.5; }
.an-flap { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.an-env { animation: an-fly 4s ease-in-out infinite; }
.an-trail path { stroke: var(--sky); stroke-width: 3; stroke-linecap: round; animation: an-streak 1.2s linear infinite; }
.an-badge circle { fill: #E5486D; } .an-badge .an-badge-t { fill: #fff; font-size: 11px; }
.an-badge { transform-box: fill-box; transform-origin: center; animation: an-pop 4s ease-out infinite; }
/* lost (404) */
.anim-lost .an-path { stroke: var(--line-2); }
.an-search circle { fill: #fff; stroke: var(--brand); stroke-width: 4; }
.an-search path { stroke: var(--brand); stroke-width: 6; stroke-linecap: round; }
.an-search { animation: an-wander 6s ease-in-out infinite; }
.an-q { font-size: 22px; fill: var(--brand); animation: an-wander 6s ease-in-out infinite; }

/* Interactive behaviour: scenes start moving when scrolled into view; hover lifts and glows */
.can-reveal [data-reveal]:not(.is-in) .anim * { animation-play-state: paused; }
.scene-card .anim, .tile-anim .anim { transition: transform .35s ease, filter .35s ease; }
.scene-card:hover .anim, .tile:hover .tile-anim .anim { transform: scale(1.06); filter: drop-shadow(0 8px 14px rgba(0, 117, 211, .18)); }

/* Tiles: mini scene on top of each service tile */
.tile-anim { display: block; height: 5.5rem; margin: -.25rem 0 .5rem; border-radius: 10px; background: linear-gradient(180deg, var(--brand-tint), #fff); overflow: hidden; }
.tile-anim .anim { height: 100%; width: auto; margin-inline: auto; }

/* Scene strip (service, domains, 404 pages) */
.scene-strip { padding-block: var(--section); }
.scene-strip h2 { text-align: center; margin: 0 0 2rem; font-size: var(--step-2); }
.scene-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.scene-card { text-align: center; padding: 1.25rem 1rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); transition: box-shadow .3s ease, border-color .3s ease; }
.scene-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.scene-card .anim { max-width: 11rem; margin: 0 auto .75rem; }
.scene-card h3 { margin: 0; font-size: var(--step-1); }
.scene-card p { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }
.notfound .anim { max-width: 14rem; margin: 0 auto 1.5rem; }

@keyframes an-gauge { 0%, 100% { stroke-dashoffset: 160; } 50%, 70% { stroke-dashoffset: 20; } }
@keyframes an-needle { 0%, 100% { transform: rotate(-70deg); } 50%, 70% { transform: rotate(62deg); } }
@keyframes an-streak { 0% { transform: translateX(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-14px); opacity: 0; } }
@keyframes an-track { 0%, 30%, 100% { fill: var(--line-2); } 40%, 90% { fill: var(--good); } }
@keyframes an-knob { 0%, 30%, 100% { transform: translateX(0); } 40%, 90% { transform: translateX(14px); } }
@keyframes an-cursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-8px, -52px); } 60% { transform: translate(-8px, -26px); } 80% { transform: translate(-8px, 0); } }
@keyframes an-vmgrow { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1); } }
@keyframes an-rotate { to { transform: rotate(360deg); } }
@keyframes an-drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes an-recflash { 0%, 70%, 100% { opacity: .55; } 10%, 30% { opacity: 1; } }
@keyframes an-move { 0%, 15% { transform: translateX(-30px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateX(30px); opacity: 0; } }
@keyframes an-move-rtl { 0%, 15% { transform: translateX(30px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateX(-30px); opacity: 0; } }
@keyframes an-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -6px) rotate(-3deg); } }
@keyframes an-wander { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-22px, 8px); } 66% { transform: translate(20px, 4px); } }

@media (prefers-reduced-motion: reduce) {
  .scene-card:hover .anim, .tile:hover .tile-anim .anim { transform: none; }
  .an-gauge-fill { stroke-dashoffset: 60; } .an-needle { transform: rotate(20deg); }
}
.tile-grid > .tile:first-child .tile-anim { background: rgba(255, 255, 255, .06); }


/* ---------- Audit fixes (2026-11): motion, mobile, accessibility ---------- */
/* Scenes pause when off screen (site.js toggles .an-off) or when the visitor turns motion off. */
svg.anim.an-off, svg.anim.an-off * { animation-play-state: paused !important; }
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.no-motion .anim-network .an-packets, .no-motion .anim-network .an-pings { display: none; }
/* Small screens: drop the costliest part of the hero network (SMIL packets and pings). */
@media (max-width: 56rem) { .hero-net .an-packets, .hero-net .an-pings { display: none; } }

/* Pause-animations switch in the footer */
.motion-toggle { display: none; }
.js .motion-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin-block-start: 1rem; padding: .4rem 1rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; color: var(--on-ink); font: inherit; font-size: .88rem; cursor: pointer; }
.motion-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }
.motion-toggle svg { width: 1rem; height: 1rem; flex: none; }
.motion-toggle .mt-play { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: block; }
.motion-toggle[aria-pressed="true"] .mt-pause { display: none; }

/* Tooltips: Escape hides them; larger invisible tap area around the small "?" button. */
.tips-off .tip { display: none !important; }
.tip-btn { position: relative; }
.tip-btn::after { content: ""; position: absolute; inset: -12px; }

/* Domain search: keep text clear of the icon whatever direction the typed text takes. */
[dir="rtl"] .ds-field input { padding-right: 2.6rem; padding-left: .75rem; }
[dir="ltr"] .ds-field input { padding-left: 2.6rem; padding-right: .75rem; }
.ds-row:focus-within { box-shadow: var(--focus); }

/* WhatsApp button waits until the hero is scrolled past (site.js adds .wa-wait / .is-shown). */
.wa-float.wa-wait:not(.is-shown) { visibility: hidden; opacity: 0; pointer-events: none; }

/* Footer leaves room for the floating buttons and the sticky order bar. */
.site-footer { padding-block-end: 5.5rem; }
@media (max-width: 56rem) { .has-sticky .site-footer { padding-block-end: calc(9.5rem + env(safe-area-inset-bottom)); } }
.site-footer ul:not(.pay-list) a { display: inline-block; padding-block: .25rem; }

/* Open mobile menu scrolls inside the viewport instead of running off screen. */
@media (max-width: 64rem) {
  .js .site-nav.is-open { max-height: calc(100dvh - 4.25rem); overflow-y: auto; overscroll-behavior: contain; }
}

/* Plan comparison on small phones: narrower label column so a full plan column fits. */
@media (max-width: 40rem) {
  .compare-table { min-width: 34rem; }
  .compare-table thead th:first-child, .compare-table tbody th[scope="row"] { width: 7.5rem; }
  .compare-table th, .compare-table td { padding-inline: .6rem; }
}

/* Touch screens: comfortable tap targets (WCAG 2.5.8 / web.dev tap targets). */
@media (pointer: coarse) {
  .btn-small, .tldx-cats button, .nav-toggle, summary, .ftabs-tab { min-height: 2.75rem; }
  select { min-height: 2.75rem; }
}

/* Small text: badges and chips no smaller than 12px. */
.save-chip, .tld-badge, .compare-flag, .pp-flag, .mk-url { font-size: .75rem; }
@media (max-width: 24rem) { .mk-dsearch .mk-btn { display: none; } }