/* ==========================================================================
   Vialux Ascenda — site stylesheet (geo-adapted, Caribbean light)
   Tokens: aqua-teal accent on off-white sea-glass surfaces, Rubik display.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  --bg: #F4FAFB;
  --surface: #FFFFFF;
  --surface-2: #E8F4F6;
  --border: #D2E7EB;
  --ink: #0F2E38;
  --muted: #4F6E77;
  --accent: #0E7490;
  --accent-hover: #0A5B72;
  --accent-tint: #DDF0F4;
  --aqua: #2FB9D6;
  --coral: #E2725B;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15, 46, 56, .07), 0 2px 8px rgba(15, 46, 56, .06);
  --shadow-md: 0 1px 2px rgba(15, 46, 56, .06), 0 10px 28px rgba(15, 46, 56, .10);
  --shadow-lg: 0 2px 6px rgba(15, 46, 56, .08), 0 18px 44px rgba(15, 46, 56, .14);

  --font-display: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/display-700.woff2') format('woff2');
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe, video, canvas { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.section { padding-block: clamp(44px, 6vw, 76px); }
.section--tint { background: var(--surface-2); }
.section--panel {
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(47, 185, 214, .16), transparent 68%),
    var(--surface);
  border-block: 1px solid var(--border);
}

.section-head { max-width: 720px; margin-bottom: clamp(22px, 3vw, 34px); }
.section-head p { color: var(--muted); font-size: 1.02rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid rgba(14, 116, 144, .22);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.prose { max-width: 760px; color: var(--ink); }
.prose p, .section p { color: inherit; }
.prose h2, .prose h3 { margin-top: 1.6em; }

.icon { width: 24px; height: 24px; flex: none; }
.icon--xs { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 300;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease),
              transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: rgba(14, 116, 144, .45);
}
.btn--ghost:hover {
  background: var(--accent-tint);
  color: var(--accent-hover);
  transform: translateY(-1px);
}
.btn--lg { padding: 15px 28px; font-size: 1.02rem; border-radius: var(--r-md); }
.btn--block { width: 100%; }
.section-cta { margin-top: clamp(20px, 3vw, 30px); }

/* ---- Icon badges / cards ---- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--accent-tint);
  border: 1px solid rgba(14, 116, 144, .18);
  border-radius: 13px;
  color: var(--accent);
}

.card, .sec-card, .adv-card, .step-card, .review-card, .company-card,
.vac-card, .concept-card, .guide-card, .prod-card, .article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease);
}
.card:hover, .sec-card:hover, .adv-card:hover, .review-card:hover,
.company-card:hover, .vac-card:hover, .concept-card:hover, .guide-card:hover,
.prod-card:hover, .article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(14, 116, 144, .35);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(244, 250, 251, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-md);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 68px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo__mark { width: 40px; height: 40px; }
.logo__tile { fill: var(--accent-tint); }
.logo__stroke { stroke: var(--accent); stroke-width: 4.2; }
.logo__dot { fill: var(--aqua); }
.logo__halo { fill: none; stroke: var(--aqua); stroke-opacity: .45; stroke-width: 1.6; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
}
.logo__word-accent { color: var(--accent); font-weight: 600; margin-left: 5px; }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav__item { position: relative; }
.main-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.main-nav__trigger:hover { color: var(--accent); background: var(--accent-tint); }
.nav-caret { transition: transform .16s var(--ease); }
.main-nav__item.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 264px;
  max-width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 140;
}
.dropdown.align-right { left: auto; right: 0; }
.dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 26px;
  width: 10px; height: 10px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.dropdown.align-right::before { left: auto; right: 26px; }
.main-nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown__list { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.dropdown__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  font-size: .92rem;
}
.dropdown__link:hover, .dropdown__link:focus-visible {
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.dropdown__link .icon { width: 14px; height: 14px; color: var(--accent); }
.dropdown__link.is-active { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }

.header-cta { flex: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 12px clamp(16px, 4vw, 40px) 20px;
}
.mobile-nav__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 8px; }
.mobile-nav__group a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .95rem;
}
.mobile-nav__group a:hover { background: var(--accent-tint); color: var(--accent-hover); }
.mobile-nav .btn { margin-top: 10px; }

/* ---- Ticker label row ---- */
.ticker-label {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: 7px;
  font-size: .8rem;
}
.ticker-label__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-label__text::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(47, 185, 214, .25);
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: 10px;
  font-size: .86rem;
  color: var(--muted);
}
.breadcrumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }

/* ---- Home hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 82% 8%, rgba(47, 185, 214, .18), transparent 65%),
    radial-gradient(640px 380px at 6% 90%, rgba(14, 116, 144, .10), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 116, 144, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 116, 144, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 70% at 55% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 55% 40%, #000 30%, transparent 100%);
  will-change: transform;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas:
    "copy form"
    "meta art";
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 84px);
}
.hero__copy { grid-area: copy; min-width: 0; }
.hero__form { grid-area: form; min-width: 0; }
.hero__meta2 { grid-area: meta; }
.hero__lead { color: var(--muted); font-size: 1.04rem; max-width: 56ch; }

.hero__art {
  position: relative;
  min-height: 340px;
}
.hero__art svg { width: 100%; height: auto; display: block; }

.hero__meta { margin: 18px 0 20px; }
.flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flags__caption { font-size: .9rem; color: var(--muted); margin-right: 2px; }
.flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  box-shadow: var(--shadow-sm);
}
.flag svg { width: 26px; height: 17px; border-radius: 3px; display: block; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 16px 9px 9px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.icon-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--accent-hover);
  border-color: rgba(14, 116, 144, .35);
}
.icon-link .icon { width: 21px; height: 21px; color: var(--accent); }

/* ---- Inner page hero ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 340px at 88% 0%, rgba(47, 185, 214, .16), transparent 65%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-hero__mesh {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(14, 116, 144, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 116, 144, .05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom left, #000 20%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom left, #000 20%, transparent 78%);
}
.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding-block: clamp(36px, 5vw, 64px);
}
.page-hero__inner > div:first-child { min-width: 0; }
.page-hero .hero__lead { margin-bottom: 0; }

/* ---- Exchange pill chips ---- */
.exchange-strip {
  padding-block: clamp(26px, 4vw, 40px);
  background:
    radial-gradient(700px 240px at 50% 120%, rgba(47, 185, 214, .12), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.exchange-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.exchange-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--accent-hover);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.exchange-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(14, 116, 144, .4);
}
.exchange-chip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(47, 185, 214, .22);
  flex: none;
}
.exchange-strip__note {
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  margin: 16px auto 0;
  max-width: 62ch;
}

/* ---- Calculator section ---- */
.calc-section {
  position: relative;
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(47, 185, 214, .13), transparent 66%),
    var(--bg);
}
.calc-lead { max-width: 66ch; color: var(--muted); }
.calc-deco { margin-top: 10px; }

/* ---- Ridge divider between sections ---- */
.ridge-divider {
  height: 46px;
  background-color: var(--surface-2);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 30 C 90 12 170 26 250 18 C 340 9 420 24 510 14 C 600 5 690 22 780 13 C 870 4 950 20 1040 12 C 1120 5 1160 14 1200 10 L1200 46 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 30 C 90 12 170 26 250 18 C 340 9 420 24 510 14 C 600 5 690 22 780 13 C 870 4 950 20 1040 12 C 1120 5 1160 14 1200 10 L1200 46 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* ---- Steps ---- */
.steps-section {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='none'%3E%3Cpath d='M-20 230 C 80 200 130 170 200 130 C 270 92 330 60 420 30' fill='none' stroke='%232FB9D6' stroke-opacity='.20' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='120' cy='188' r='5' fill='%230E7490' fill-opacity='.18'/%3E%3Ccircle cx='250' cy='110' r='5' fill='%230E7490' fill-opacity='.18'/%3E%3Ccircle cx='360' cy='52' r='5' fill='%230E7490' fill-opacity='.18'/%3E%3C/svg%3E") right center / 46% auto no-repeat,
    var(--surface-2);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.step-card { padding: 22px 20px; }
.step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 12px;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: .4em; }
.step-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---- Comparison table ---- */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: 13px 16px; text-align: left; }
.compare thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: .92rem;
}
.compare tbody tr + tbody tr, .compare tbody tr { border-top: 1px solid var(--border); }
.compare tbody tr:nth-child(even) { background: rgba(232, 244, 246, .45); }
.compare td:first-child { color: var(--ink); font-size: .95rem; }
.mark-yes { color: #0B7A48; font-size: 1.05rem; width: 42px; }
.mark-no { color: #C2453A; font-size: 1.05rem; width: 42px; }

/* ---- Security cards ---- */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.sec-card { padding: 22px 20px; }
.sec-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.02rem;
}
.sec-card .icon-badge { width: 42px; height: 42px; border-radius: 11px; }
.sec-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---- Reviews ---- */
.reviews-section {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%232FB9D6' stroke-opacity='.22'%3E%3Cpath d='M40 200 L150 120 L260 170 L370 80 L480 130'/%3E%3Cpath d='M150 120 L370 80'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='.28'%3E%3Ccircle cx='150' cy='120' r='4'/%3E%3Ccircle cx='260' cy='170' r='4'/%3E%3Ccircle cx='370' cy='80' r='4'/%3E%3Ccircle cx='480' cy='130' r='4'/%3E%3Ccircle cx='40' cy='200' r='4'/%3E%3C/g%3E%3C/svg%3E") right top / 480px auto no-repeat,
    var(--surface);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.review-card { padding: 22px 20px; display: flex; flex-direction: column; }
.review-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.review-card__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #E4F6FA, var(--accent-tint));
  border: 1px solid rgba(14, 116, 144, .3);
  color: var(--accent);
}
.review-card__fallback .icon { width: 27px; height: 27px; }
.review-card__name { font-family: var(--font-display); font-weight: 600; }
.review-card__role { color: var(--muted); font-size: .84rem; }
.review-card__text { color: var(--ink); font-size: .95rem; flex: 1; }
.review-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  font-size: .84rem;
  color: var(--muted);
}
.review-card__stats b { color: var(--ink); }
.review-card__stats .up { color: #0B7A48; }
.reviews-note {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: .86rem;
}

/* ---- Company block ---- */
.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.company-facts { margin: 18px 0; display: grid; gap: 10px; }
.company-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--accent);
}
.company-facts dt .icon { width: 17px; height: 17px; }
.company-facts dd { margin: 0 0 6px 25px; color: var(--ink); font-size: .95rem; }
.company-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.company-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink);
}
.company-card .icon-badge { width: 40px; height: 40px; border-radius: 11px; }
.company-card .icon-badge .icon { width: 20px; height: 20px; }

/* ---- Advantages ---- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.adv-card {
  display: flex;
  gap: 14px;
  padding: 22px 20px;
  align-items: flex-start;
}
.adv-card h3 { font-size: 1rem; margin-bottom: .35em; }
.adv-card p { color: var(--muted); font-size: .92rem; margin: 0; }
@media (min-width: 900px) {
  .adv-grid > :nth-child(even) { transform: translateY(14px); }
  .adv-grid > :nth-child(even):hover { transform: translateY(12px); }
}

/* ---- Form block (formFactory wrapper) ---- */
.form-block { max-width: 470px; }
.form-block__heading {
  font-size: 1.12rem;
  margin-bottom: .55em;
}
.form-block__intro { color: var(--muted); font-size: .92rem; margin-bottom: 12px; }
.form-block__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 20px 18px;
}
.form-block--extra { margin-inline: auto; }
.form-legal {
  font-size: .78rem;
  color: var(--muted);
  margin: 10px 2px 0;
}
.form-manager {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  margin: 8px 2px 0;
}
.form-manager .icon { width: 15px; height: 15px; }

/* beacon formFactory fields, restyled to sit inside the card */
.beacon-form__label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 5px;
}
.beacon-form__row { margin-bottom: 13px; }
.beacon-form__input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.beacon-form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 185, 214, .3);
  background: var(--surface);
}
.beacon-form__submit {
  width: 100%;
  margin-top: 4px;
  padding: 13px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.beacon-form__submit:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: 10px; max-width: 820px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .99rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--accent); transition: transform .16s var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item__answer { padding: 0 18px 16px; color: var(--muted); font-size: .95rem; }
.faq-item__answer p { margin: 0; }
.faq-item__answer ul { margin: 8px 0 0; padding-left: 20px; }

/* ---- Tables (generic) ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  margin: 14px 0 22px;
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table-wrap th, .table-wrap td { padding: 12px 15px; text-align: left; font-size: .93rem; vertical-align: top; }
.table-wrap thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: .88rem;
}
.table-wrap tbody tr { border-top: 1px solid var(--border); }
.table-wrap tbody tr:nth-child(even) { background: rgba(232, 244, 246, .4); }

/* ---- Data table of company facts (about) ---- */
.fact-table dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--accent);
  padding: 11px 0 3px;
}
.fact-table dd { margin: 0; padding-bottom: 8px; border-bottom: 1px dashed var(--border); color: var(--ink); }

/* ---- History timeline ---- */
.history-timeline { position: relative; margin-top: 18px; padding-left: 26px; }
.history-timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--aqua), var(--accent));
  border-radius: 2px;
}
.history-timeline__item { position: relative; padding: 0 0 22px; }
.history-timeline__item::before {
  content: "";
  position: absolute;
  left: -26px; top: 6px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
}
.history-timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  font-size: 1.02rem;
}
.history-timeline__item p { color: var(--muted); margin: 4px 0 0; }

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.map-embed {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Careers ---- */
.vac-list { display: grid; gap: 14px; margin-top: 18px; }
.vac-card { padding: 20px 22px; }
.vac-card h3 { font-size: 1.05rem; margin-bottom: .3em; }
.vac-card p { color: var(--muted); font-size: .93rem; margin: 0 0 10px; }
.vac-card .btn { margin-top: 6px; }
.vac-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--accent); margin-bottom: 8px; }
.vac-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vac-meta .icon { width: 14px; height: 14px; }

/* ---- Guide / concept cards ---- */
.guide-grid, .concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 14px 0 20px;
}
.guide-card, .concept-card { padding: 20px; }
.guide-card h3, .concept-card h3 { display: flex; gap: 11px; align-items: center; font-size: 1rem; }
.guide-card p, .concept-card p { color: var(--muted); font-size: .93rem; margin: 0; }
.mini-table { min-width: 480px; }

/* ---- Articles ---- */
.article-card { padding: 22px 24px; margin-bottom: 18px; }
.article-card h3 { font-size: 1.15rem; }
.article-card p { color: var(--muted); }
.article-card .article-meta { font-size: .82rem; color: var(--accent); font-weight: 600; }

/* ---- Products overview ---- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.prod-card { padding: 24px 22px; display: flex; flex-direction: column; }
.prod-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; }
.prod-card p { color: var(--muted); font-size: .93rem; flex: 1; }

/* ---- Fees ---- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
}
.tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tier-card--hl { border-color: rgba(14, 116, 144, .45); box-shadow: var(--shadow-md); }
.tier-card h3 { font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tier-card .tier-min { font-size: .9rem; color: var(--accent); }
.tier-card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tier-card li { display: flex; gap: 8px; font-size: .9rem; color: var(--muted); }
.tier-card li .icon { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; }

/* ---- Error page ---- */
.error-page { text-align: center; padding-block: clamp(60px, 9vw, 110px); }
.error-page .error-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 6.5rem);
  color: var(--accent);
  line-height: 1;
}
.error-page p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ---- Payments sea texture ---- */
.payments-section {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 140' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232FB9D6' stroke-opacity='.28' stroke-width='2'%3E%3Cpath d='M0 90 C 60 70 120 110 180 90 C 240 70 300 110 360 90 C 420 70 480 110 540 90 C 570 80 585 85 600 90'/%3E%3Cpath d='M0 115 C 60 98 120 132 180 115 C 240 98 300 132 360 115 C 420 98 480 132 540 115 C 570 107 585 111 600 115'/%3E%3C/g%3E%3C/svg%3E") bottom center / 900px auto repeat-x,
    linear-gradient(to bottom, var(--surface), #F0F9FB);
}

/* ---- Footer ---- */
.site-footer {
  background:
    radial-gradient(800px 320px at 15% 0%, rgba(47, 185, 214, .10), transparent 60%),
    #0C2B33;
  color: #C9E4EB;
  padding-top: clamp(36px, 5vw, 56px);
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) repeat(2, minmax(140px, .8fr)) minmax(150px, 1.2fr);
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: 28px;
}
.footer-brand__note { color: #9CC4CE; font-size: .9rem; margin-top: 14px; }
.footer-brand__mail { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.footer-brand__mail .icon { width: 16px; height: 16px; color: var(--aqua); }
.site-footer .logo__word { color: #F0FAFC; }
.site-footer .logo__tile { fill: rgba(47, 185, 214, .18); }
.site-footer .logo__stroke { stroke: #7FD8E8; }
.site-footer .logo__dot { fill: #8FE3F2; }
.footer-col h3 {
  color: #F0FAFC;
  font-size: .95rem;
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footer-col a { color: #C9E4EB; font-size: .89rem; }
.footer-col a:hover { color: #8FE3F2; }
.footer-colwrap { display: grid; gap: 20px; }
.footer-disclaimer {
  border-top: 1px solid rgba(127, 216, 232, .22);
  padding: 20px 0 6px;
}
.footer-disclaimer h2 { color: #F0FAFC; font-size: 1rem; margin-bottom: 8px; }
.footer-disclaimer p { color: #9CC4CE; font-size: .82rem; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid rgba(127, 216, 232, .22);
  padding: 14px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: .82rem;
  color: #9CC4CE;
}
.footer-bottom a { color: #8FE3F2; }

/* ---- Special offer ---- */
.urgency-strip {
  background: linear-gradient(90deg, #0A5B72, #0E7490 55%, #2FB9D6);
  color: #fff;
  font-size: .86rem;
  padding-block: 9px;
}
.urgency-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 34px;
}
.urgency-strip b { font-weight: 700; }

.so-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 85% 6%, rgba(47, 185, 214, .2), transparent 62%),
    linear-gradient(to bottom, #EAF7FA, var(--bg));
  border-bottom: 1px solid var(--border);
}
.so-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  color: #fff;
  background: var(--coral);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 16px;
}
.so-hero__badge .icon { width: 15px; height: 15px; }
.so-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
}
.so-countdown__cell {
  display: grid;
  justify-items: center;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 10px 13px;
  min-width: 76px;
}
.so-countdown__cell b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.so-countdown__cell span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.so-countdown__sep { color: var(--accent); font-weight: 700; font-size: 1.4rem; font-family: var(--font-display); }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(100deg, #0A5B72, #0E7490 60%, #178BA8);
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3.4vw, 34px);
}
.cta-band p { color: #EAF8FB; font-size: 1.05rem; font-family: var(--font-display); font-weight: 600; margin: 0; max-width: 34ch; }
.cta-band .btn { background: #fff; color: #0A5B72; }
.cta-band .btn:hover { background: #DDF0F4; color: #084A5D; transform: translateY(-1px); }

.so-modal { display: none; }
.so-modal.is-open { display: block; }
.so-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 33, 41, .66);
  backdrop-filter: blur(3px);
  z-index: 400;
}
.so-modal__card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 401;
  width: min(92vw, 470px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 28px;
  text-align: center;
}
.so-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.so-modal__close:hover { background: var(--accent-tint); color: var(--accent-hover); }
.so-modal__art { width: 190px; height: auto; margin: 4px auto 10px; display: block; }
.so-modal__card h3 { font-size: 1.45rem; }
.so-modal__card .so-countdown { justify-content: center; }
.so-modal__card .btn { margin-top: 14px; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__grid { transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav:not([hidden]) { display: block; }
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "form"
      "meta"
      "art";
  }
  .hero__form { max-width: 470px; }
  .hero__art { min-height: 0; margin-top: 6px; }
  .page-hero__inner { grid-template-columns: 1fr; }
  .company-grid, .contact-grid { grid-template-columns: 1fr; }
  .steps-section { background: var(--surface-2); }
}
@media (max-width: 480px) {
  .adv-card { flex-direction: column; }
  .so-countdown__cell { min-width: 64px; padding: 8px 10px; }
  .so-countdown__cell b { font-size: 1.35rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .flag { font-size: .8rem; }
}

/* testimonial photos: fill the avatar badge edge to edge */
.review-card__fallback img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }

/* Production form widget integration: the beacon formFactory randomizes its
   field class names and leaves input colors to the page. These structural
   rules theme every input inside our form containers, covering both the
   page forms and the calculator modal, with this site's palette. */
.form-block input[type="text"], .form-block input[type="email"], .form-block input[type="tel"],
.form-block input[type="password"], .form-block select,
.calc-modal__content input[type="text"], .calc-modal__content input[type="email"],
.calc-modal__content input[type="tel"], .calc-modal__content input[type="password"],
.calc-modal__content select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.form-block input::placeholder, .calc-modal__content input::placeholder { color: #777777; }
.form-block input:focus, .calc-modal__content input:focus { outline: none; border-color: currentColor; }
.form-block .iti__country-list, .calc-modal__content .iti__country-list {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-top: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.form-block .iti__country:hover, .calc-modal__content .iti__country:hover,
.form-block .iti__highlight, .calc-modal__content .iti__highlight { background: #DDF0F4; }
.form-block .iti__selected-flag, .calc-modal__content .iti__selected-flag { background: transparent; }
.form-block .iti__selected-dial-code, .calc-modal__content .iti__selected-dial-code { color: #777777; }

.tv-ticker-wrapper {
    padding-top: 0 !important;
    height: 58px !important;
}