/* ==========================================================================
   Zing markbit — dark forest + copper, orbital composition (animation-led)
   Tokens, layout primitive, header/nav, hero, sections, cards, tables,
   forms (beacon), reviews, calculator band, footer, special-offer, modal.
   ========================================================================== */

/* ---- Self-hosted display font (Outfit, 2 weights) ---- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-700.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --bg: #0D1F17;
  --surface: #14291E;
  --surface-2: #1B3326;
  --border: #284434;
  --text: #E9F2EC;
  --muted: #A3B8AC;
  --accent: #D98E4A;
  --accent-hover: #E6A66B;
  --accent-ink: #2A1608;
  --accent-tint: rgba(217, 142, 74, .15);
  --accent-tint-2: rgba(217, 142, 74, .07);
  --eagle: #C63C3C;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(4, 12, 8, .35), 0 2px 8px rgba(217, 142, 74, .06);
  --shadow-md: 0 2px 4px rgba(4, 12, 8, .4), 0 10px 28px rgba(4, 12, 8, .35), 0 2px 12px rgba(217, 142, 74, .07);
  --shadow-lg: 0 4px 8px rgba(4, 12, 8, .45), 0 22px 56px rgba(4, 12, 8, .5);
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --container: 1200px;
  --tick: 180ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 85% -140px, rgba(217, 142, 74, .10), transparent 62%),
    radial-gradient(900px 600px at -10% 24%, rgba(35, 82, 60, .32), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; transition: color var(--tick) var(--ease); }
a:hover { color: var(--accent-hover); }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
strong { color: var(--text); font-weight: 650; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  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;
  padding: 12px 24px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease),
              background var(--tick) var(--ease), border-color var(--tick) var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--header { padding: 10px 18px; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13, 31, 23, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--tick) var(--ease), background var(--tick) var(--ease);
}
.site-header.is-scrolled { background: rgba(13, 31, 23, .97); box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 72px; position: relative;
}

.logo-link { display: inline-flex; align-items: center; color: inherit; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 40px; height: 40px; }
.logo__word {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: .01em; color: var(--text); white-space: nowrap;
}
.logo__word b { color: var(--accent); font-weight: 700; }

.main-nav { margin-inline: auto; }
.main-nav__list { display: flex; gap: 6px; 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-body); font-size: .93rem; font-weight: 550; color: var(--text);
  background: none; border: 0; padding: 10px 12px; cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--tick) var(--ease), background var(--tick) var(--ease);
}
.main-nav__trigger:hover { color: var(--accent); background: var(--accent-tint-2); }
.nav-caret { transition: transform var(--tick) var(--ease); }
.has-drop.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 0px); left: 0;
  min-width: 264px; max-width: 320px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 8px; z-index: 110;
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
}
.dropdown::before {
  content: ""; position: absolute; top: -5px; left: 22px;
  width: 10px; height: 10px; rotate: 45deg;
  background: var(--bg); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.dropdown.align-right { left: auto; right: 0; }
.dropdown.align-right::before { left: auto; right: 22px; }
.has-drop.is-open .dropdown { opacity: 1; transform: translateY(0); visibility: visible; }
.dropdown__list { list-style: none; margin: 0; padding: 0; }
.dropdown__link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text); font-size: .92rem;
}
.dropdown__link .icon { color: var(--accent); }
.dropdown__link:hover, .dropdown__link:focus-visible { background: var(--accent-tint); color: var(--text); }
.dropdown__link.is-active { background: var(--accent-tint-2); color: var(--accent); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  width: 44px; height: 44px; align-items: center; justify-content: center; 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 {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 12px clamp(16px, 4vw, 40px) 20px;
}
.mobile-nav__group { border-bottom: 1px solid var(--border); }
.mobile-nav__group summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer;
  padding: 14px 4px; font-weight: 600; color: var(--text);
}
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group ul { list-style: none; margin: 0 0 12px; padding: 0 0 0 6px; }
.mobile-nav__group a { display: block; padding: 9px 8px; color: var(--muted); border-radius: var(--r-sm); }
.mobile-nav__group a:hover, .mobile-nav__group a[aria-current="page"] { color: var(--accent); background: var(--accent-tint-2); }
.mobile-nav .btn { margin-top: 16px; }

/* ---- Ticker row (beacon injects after header) ---- */
.beacon-ticker {
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.beacon-ticker__inner {
  max-width: var(--container); margin-inline: auto;
  padding: 9px clamp(16px, 4vw, 40px);
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: thin;
}
.beacon-ticker__sym { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.beacon-ticker__sym b { color: var(--text); font-weight: 600; margin-left: 4px; }

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

/* ---- Page hero (inner pages) ---- */
.page-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 380px at 78% 18%, rgba(217, 142, 74, .12), transparent 65%),
    radial-gradient(520px 320px at 8% 88%, rgba(35, 82, 60, .4), transparent 62%),
    var(--surface);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(217, 142, 74, .13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 42%, #000 100%);
}
.page-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(44px, 6vw, 76px);
}
.page-hero__lead { color: var(--muted); font-size: 1.04rem; max-width: 56ch; }

/* ---- Sections ---- */
.section { padding-block: clamp(48px, 7vw, 84px); position: relative; }
.section--tint {
  background:
    radial-gradient(800px 420px at 12% 0%, rgba(35, 82, 60, .35), transparent 60%),
    var(--surface);
  border-block: 1px solid var(--border);
}
.section--panel { background: var(--surface-2); border-block: 1px solid var(--border); }

.section-head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head .lead { color: var(--muted); font-size: 1.03rem; }
.section-cta { margin-top: clamp(22px, 3vw, 34px); display: flex; gap: 14px; flex-wrap: wrap; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ---- Home hero (orbital) ---- */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 520px at 82% 12%, rgba(217, 142, 74, .13), transparent 62%),
    radial-gradient(700px 480px at -6% 96%, rgba(35, 82, 60, .45), transparent 60%),
    var(--bg);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(163, 184, 172, .14) 1px, transparent 1.5px);
  background-size: 30px 30px;
  mask-image: radial-gradient(820px 560px at 70% 40%, #000 30%, transparent 78%);
  will-change: transform;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
.hero__lead { color: var(--muted); font-size: 1.05rem; max-width: 58ch; }
.hero .tick { color: var(--accent); }

.hero__visual {
  position: absolute; top: 50%; right: clamp(-40px, 2vw, 60px);
  width: clamp(420px, 46vw, 640px); height: auto;
  translate: 0 -52%;
  z-index: 1; pointer-events: none;
  opacity: .9;
}
.hero-orbit__ring { stroke: rgba(163, 184, 172, .30); stroke-dasharray: 2 7; fill: none; }
.hero-orbit__coin circle:first-child { fill: rgba(217, 142, 74, .14); stroke: var(--accent); }
.hero-orbit__coin .coin-glyph { stroke: var(--accent); }
.hero-orbit__candle { fill: var(--accent); }
.hero-orbit__candle--down { fill: #6E8F7C; }
.hero-orbit__glow { fill: rgba(217, 142, 74, .10); }

.hero__meta { margin-top: 22px; }

.flags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.flags__caption { color: var(--muted); font-size: .93rem; margin-right: 2px; }
.flag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 12px 5px 6px; border-radius: 999px;
  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; margin-top: 20px; }
.icon-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-size: .93rem; font-weight: 550;
  background: var(--surface); border: 1px solid var(--border);
  padding: 9px 16px 9px 10px; border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--tick) var(--ease), border-color var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.icon-link:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent);
}

/* ---- Form block (beacon formFactory wrapper) ---- */
.form-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: clamp(20px, 3vw, 30px);
  max-width: 520px;
}
.form-block__heading { font-size: 1.28rem; margin-bottom: 6px; }
.form-block__intro { color: var(--muted); font-size: .93rem; margin-bottom: 14px; }
.form-block__card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.form-legal { font-size: .82rem; color: var(--muted); margin: 12px 2px 4px; }
.form-manager { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--accent); margin: 6px 2px 0; }
.form-manager .icon { color: var(--accent); }

.beacon-form__label { display: block; font-size: .84rem; color: var(--muted); margin-bottom: 5px; }
.beacon-form__row { margin-bottom: 12px; }
.beacon-form__input {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font: inherit; font-size: .95rem;
  transition: border-color var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.beacon-form__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.beacon-form__submit {
  display: block; width: 100%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 650; font-size: 1rem;
  border: 0; border-radius: var(--r-md); padding: 13px 18px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--tick) var(--ease), transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.beacon-form__submit:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.beacon-form__submit:active { transform: translateY(0); }

/* ---- Exchange strip ---- */
.exchange-strip {
  padding-block: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(700px 300px at 50% 120%, rgba(217, 142, 74, .08), transparent 70%),
    var(--surface);
}
.exchange-strip__title { font-size: 1.02rem; color: var(--muted); font-weight: 550; margin-bottom: 16px; text-align: center; }
.exchange-strip__row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.exchange-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 650; letter-spacing: .04em;
  font-size: .95rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 22px;
  transition: border-color var(--tick) var(--ease), transform var(--tick) var(--ease), color var(--tick) var(--ease);
}
.exchange-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.exchange-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.exchange-strip__note { text-align: center; color: var(--muted); font-size: .88rem; margin: 18px auto 0; max-width: 62ch; }

/* ---- Calculator band with data-flow motif ---- */
.calc-section {
  background:
    radial-gradient(820px 420px at 88% 10%, rgba(217, 142, 74, .10), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.calc-flow { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.calc-flow path {
  fill: none; stroke: var(--accent); stroke-opacity: .30; stroke-width: 1.5;
  stroke-dasharray: 6 130;
}
.calc-flow--2 path { stroke-opacity: .18; stroke-dasharray: 4 150; }
@keyframes flowdash { to { stroke-dashoffset: -136; } }
.calc-flow path { animation: flowdash 4.2s linear infinite; }
.calc-flow--2 path { animation-duration: 5.6s; animation-direction: reverse; }

.calc-viz {
  display: block; width: 100%; height: 130px;
  margin-top: 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.calc-lead { color: var(--muted); max-width: 68ch; }

/* ---- Steps ---- */
.steps-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease), border-color var(--tick) var(--ease);
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-tint); border-color: var(--accent); }
.step-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  margin-bottom: 12px;
}
.step-card h3 { margin-bottom: 6px; }
.step-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---- Comparison table ---- */
.compare-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--surface); }
.compare th, .compare td { padding: 13px 16px; text-align: left; font-size: .94rem; border-bottom: 1px solid var(--border); }
.compare thead th {
  background: var(--surface-2); font-family: var(--font-display); font-weight: 650;
  font-size: .95rem;
}
.compare thead th:nth-child(2) { color: var(--accent); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover td { background: var(--accent-tint-2); }
.mark-yes { color: #7FC98F; text-align: center !important; width: 120px; }
.mark-no { color: var(--eagle); text-align: center !important; width: 120px; }
.mark-yes b, .mark-no b { font-size: 1.05rem; }

/* ---- Tables (generic) ---- */
.table-wrap {
  overflow-x: auto; border-radius: var(--r-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--surface); }
.table-wrap th, .table-wrap td { padding: 12px 15px; text-align: left; font-size: .93rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table-wrap thead th { background: var(--surface-2); font-family: var(--font-display); font-weight: 650; white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:nth-child(even) td { background: rgba(27, 51, 38, .45); }
.table-wrap td b { color: var(--text); }

/* ---- Cards / grids ---- */
.cards-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards-grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.feature-card {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 22px;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease), border-color var(--tick) var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-tint); border-color: var(--accent); }
.feature-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.08rem; margin-bottom: 8px; }
.feature-card h3 .icon-badge { width: 42px; height: 42px; }
.feature-card p { color: var(--muted); font-size: .95rem; margin: 0; }

.risk-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.risk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.risk-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.06rem; margin-bottom: 8px; }
.risk-card h3 .icon-badge { width: 42px; height: 42px; background: rgba(198, 60, 60, .14); color: #D97878; }
.risk-card p { color: var(--muted); font-size: .95rem; }

/* ---- Reviews ---- */
.reviews-section {
  background:
    radial-gradient(700px 380px at 90% 8%, rgba(217, 142, 74, .09), transparent 62%),
    var(--surface);
  border-block: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.reviews-coins {
  position: absolute; inset: auto -60px -80px auto; width: 420px; height: 420px;
  pointer-events: none; opacity: .35;
}
.reviews-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); position: relative; }
.review-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-card__head { display: flex; align-items: center; gap: 13px; }
.review-card__fallback {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-tint); border: 1px solid var(--accent);
  color: var(--accent);
}
.review-card__fallback .icon { width: 26px; height: 26px; }
.review-card__name { font-weight: 650; }
.review-card__role { color: var(--muted); font-size: .86rem; }
.review-card__text { color: var(--text); font-size: .96rem; margin: 0; flex: 1; }
.review-card__stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
.review-card__stats b { color: var(--text); }
.review-card__stats .up { color: var(--accent); }
.reviews-note { color: var(--muted); font-size: .86rem; margin-top: 20px; }

/* ---- Company block ---- */
.company-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
.company-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 18px 0 22px; }
.company-facts dt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.company-facts dt .icon { width: 18px; height: 18px; color: var(--accent); }
.company-facts dd { margin: 0; font-size: .95rem; }
.company-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.company-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 16px;
  color: var(--text); font-weight: 550; font-size: .93rem;
  transition: transform var(--tick) var(--ease), border-color var(--tick) var(--ease), box-shadow var(--tick) var(--ease);
}
.company-card:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.company-card .icon-badge { width: 38px; height: 38px; border-radius: var(--r-sm); }

.company-art {
  position: relative; min-height: 300px; height: 100%;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background:
    radial-gradient(420px 260px at 72% 18%, rgba(217, 142, 74, .12), transparent 70%),
    var(--surface);
  overflow: hidden;
}
.company-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Advantages ---- */
.adv-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.adv-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 22px; display: flex; gap: 15px; align-items: flex-start;
  transition: transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease), border-color var(--tick) var(--ease);
}
.adv-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-tint); }
.adv-card h3 { font-size: 1.04rem; margin-bottom: 6px; }
.adv-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: 4px 18px;
  transition: border-color var(--tick) var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; list-style: none;
  padding: 15px 0; font-weight: 600; font-family: var(--font-display); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--accent); transition: transform var(--tick) var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item__answer { color: var(--muted); padding: 0 0 16px; max-width: 72ch; }
.faq-item__answer p { margin-bottom: .6em; }

/* ---- Map ---- */
.map-embed {
  border-radius: var(--r-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); overflow: hidden;
  max-width: 860px; aspect-ratio: 16 / 9; min-height: 320px;
  background: var(--surface);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Article / doc typography ---- */
.doc-list { margin-bottom: 18px; }
.doc-list li::marker { color: var(--accent); }
.info-panel {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 16px 20px; margin: 18px 0;
}
.info-panel p { margin: 0; color: var(--muted); }
.info-panel--warn { border-left-color: var(--eagle); background: rgba(198, 60, 60, .08); }

.tier-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 30px; }
.tier-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px;
}
.tier-card--hot { border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-tint); }
.tier-card h3 { color: var(--accent); font-size: 1.1rem; }
.tier-card .price { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; margin: 4px 0 10px; }
.tier-card p { color: var(--muted); font-size: .92rem; }

.history-line { border-left: 2px solid var(--border); margin-left: 8px; padding-left: 26px; display: grid; gap: 20px; }
.history-item { position: relative; }
.history-item::before {
  content: ""; position: absolute; left: -33px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
}
.history-item h3 { font-size: 1.05rem; color: var(--accent); margin-bottom: 4px; }
.history-item p { color: var(--muted); margin: 0; }

.vacancy {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.vacancy h3 { margin-bottom: 4px; }
.vacancy__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vacancy__meta span {
  font-size: .8rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 11px; border-radius: 999px;
}
.vacancy p { color: var(--muted); font-size: .94rem; flex: 1 1 320px; margin: 0; }
.vacancy .btn { flex: none; }

.products-orbit { position: relative; }
.products-orbit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 88% 12%, transparent 68px, rgba(217, 142, 74, .14) 69px, rgba(217, 142, 74, .14) 70px, transparent 71px),
    radial-gradient(circle at 88% 12%, transparent 118px, rgba(163, 184, 172, .12) 119px, rgba(163, 184, 172, .12) 120px, transparent 121px);
  border-radius: var(--r-lg);
}

/* ---- Special offer ---- */
.urgency-strip {
  background: linear-gradient(90deg, #7A2A20, var(--eagle) 45%, #7A2A20);
  color: #FBE9E9; font-size: .88rem; font-weight: 550;
}
.urgency-strip .container {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  padding-block: 9px; text-align: center;
}
.urgency-strip b { color: #FFD9B0; }

.so-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 420px at 80% 10%, rgba(198, 60, 60, .14), transparent 62%),
    radial-gradient(700px 420px at 0% 90%, rgba(217, 142, 74, .12), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.so-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid var(--accent);
  font-size: .82rem; font-weight: 650; letter-spacing: .05em;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.so-countdown {
  display: inline-flex; align-items: flex-end; gap: 8px; margin: 22px 0 8px;
}
.so-countdown__cell {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 13px; min-width: 74px;
  box-shadow: var(--shadow-sm);
}
.so-countdown__cell b {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.so-countdown__cell span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background:
    radial-gradient(520px 260px at 88% 20%, rgba(217, 142, 74, .18), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--accent); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-tint);
  padding: clamp(22px, 3.5vw, 34px);
}
.cta-band p { margin: 0; font-size: 1.06rem; font-weight: 550; max-width: 46ch; }

.so-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--ease), visibility 180ms;
}
.so-modal.is-open { opacity: 1; visibility: visible; }
.so-modal__overlay { position: absolute; inset: 0; background: rgba(4, 12, 8, .78); backdrop-filter: blur(3px); }
.so-modal__card {
  position: relative; width: min(480px, 100%);
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 30px 26px 26px; text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform 180ms var(--ease);
}
.so-modal.is-open .so-modal__card { transform: none; }
.so-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: color var(--tick) var(--ease), border-color var(--tick) var(--ease);
}
.so-modal__close:hover { color: var(--text); border-color: var(--accent); }
.so-modal__art { width: 100%; max-width: 320px; margin: 0 auto 6px; display: block; }
.so-modal__card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.so-modal__card .btn { margin-top: 6px; }

/* ---- 404 ---- */
.error-hero { text-align: center; padding-block: clamp(70px, 12vw, 140px); }
.error-hero .code {
  font-family: var(--font-display); font-size: clamp(4.5rem, 14vw, 8rem);
  color: var(--accent); line-height: 1; letter-spacing: -.02em;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(800px 380px at 15% 0%, rgba(35, 82, 60, .3), transparent 62%),
    #0A1811;
  padding-top: clamp(40px, 6vw, 64px);
  margin-top: 0;
}
.footer-top {
  display: grid; gap: 30px;
  grid-template-columns: minmax(240px, 1.15fr) repeat(2, minmax(160px, .95fr)) minmax(160px, 1.3fr);
  padding-bottom: 34px;
}
.footer-brand__note { color: var(--muted); font-size: .92rem; max-width: 34ch; }
.footer-brand__mail, .footer-brand__hours {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .9rem;
}
.footer-brand__mail .icon, .footer-brand__hours .icon { color: var(--accent); }
.footer-colwrap { display: grid; gap: 24px; }
.footer-col h3 { font-size: .95rem; margin-bottom: 12px; color: var(--accent); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: inline-block; color: var(--muted); font-size: .89rem;
  padding: 3.5px 0;
}
.footer-col a:hover { color: var(--accent); }
.footer-disclaimer {
  border-top: 1px solid var(--border); padding-block: 22px;
}
.footer-disclaimer h2 { font-size: .98rem; margin-bottom: 8px; }
.footer-disclaimer p { color: var(--muted); font-size: .84rem; max-width: 108ch; margin: 0; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-block: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: var(--muted); font-size: .84rem;
}
.footer-bottom p { margin: 0; }

/* ---- Schema/footer scripts spacing ---- */
main { display: block; }

/* ---- Scroll reveal (enhancement only) ---- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal, .no-js .dropdown { opacity: 1; transform: none; visibility: visible; }

/* ---- Calculator module theming bridge ---- */
.calculator { color: var(--text); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .page-hero__inner, .company-grid { grid-template-columns: 1fr; }
  .company-art { min-height: 240px; }
  .hero__visual { right: -140px; opacity: .45; }
}

/* GSAP parallax writes transform; the base offset stays in `translate`. */

@media (max-width: 768px) {
  .main-nav { display: none; }
  .btn--header { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-inner { justify-content: space-between; }

  .hero__inner { grid-template-columns: 1fr; padding-block: 44px 52px; }
  .hero__visual {
    position: absolute; top: 0; right: -170px; left: auto;
    translate: none; width: 460px; opacity: .28;
  }
  .page-hero__inner { padding-block: 38px; }
  .form-block { max-width: 100%; }
  .footer-colwrap { grid-template-columns: 1fr 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  .hero__visual { width: 340px; right: -120px; }
  .exchange-chip { padding: 8px 16px; font-size: .88rem; }
  .so-countdown__cell { min-width: 62px; padding: 8px 10px; }
  .so-countdown__cell b { font-size: 1.4rem; }
  .footer-colwrap { grid-template-columns: 1fr; }
  .vacancy { flex-direction: column; align-items: flex-start; }
  .vacancy .btn { width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .calc-flow path { animation: none; stroke-dasharray: none; }
}

/* 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(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.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(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  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: rgba(217, 142, 74, .15); }
.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;
}