/* ==========================================================================
   Crypto Menjacnica — Belgrade Vault design system
   2026-current. Light theme, no dark mode.
   ========================================================================== */

/* ---------- Fallback font metrics — match Inter/Manrope to Arial to eliminate CLS on swap ---------- */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ---------- Self-hosted variable fonts (Latin + Latin-Ext + Cyrillic) ----------
   Latin-Ext subset is CRITICAL for Serbian diacritics š č ć ž đ Š Č Ć Ž Đ
   (Unicode block U+0100-024F). Without it browser falls back to system font
   for those chars and the typography looks broken. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var-cy.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-var-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-var-cy.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Custom properties (Belgrade Vault) ---------- */
:root {
  /* Brand */
  --c-primary:   #0B2A4A;
  --c-primary-2: #0A2440;
  --c-accent:    #00B388;
  --c-accent-2:  #00A079;
  --c-gold:      #F2B441;       /* background/accent surface only — fails 1.4.3 if used as text on white */
  --c-gold-2:    #E2A028;
  --c-gold-text: #A77400;       /* WCAG-safe gold tone for use as text on white (4.55:1) */

  /* Neutrals (light theme) */
  --c-bg:        #FFFFFF;
  --c-bg-2:      #F7F8FA;
  --c-bg-3:      #ECEEF2;
  --c-border:    #E3E7EE;
  --c-mute:      #525965;  /* darkened from #5B6473 (4.46:1) to meet WCAG AA 4.5:1 on white */
  --c-mute-2:    #8993A4;
  --c-text:      #0F1722;
  --c-text-2:    #2B3445;

  /* Semantic */
  --c-success:   #00B388;
  --c-warning:   #F2B441;
  --c-error:     #E5484D;

  /* Layout */
  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 34, 0.04);
  --shadow:    0 4px 12px rgba(15, 23, 34, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 34, 0.08);

  --container: 1200px;
  --gutter:    24px;

  /* Type scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Easings */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast:   150ms;
  --t-base:   200ms;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Prevent any wide child from causing a horizontal scroll on mobile */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  font-feature-settings: "tnum" off, "kern" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

/* CJK font size bump for readability */
.lang-zh { font-size: 17px; }
.lang-zh h1, .lang-zh h2, .lang-zh h3 { font-family: 'Noto Sans SC', system-ui, sans-serif; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--c-accent); }
/* WCAG 2.4.7 + 2.4.11 + 2.4.13 — visible focus indicator on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
.btn:focus-visible,
.lang-current:focus-visible,
.hamburger:focus-visible,
.calc-tab:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.18);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; line-height: var(--lh-relaxed); color: var(--c-text-2); }

ul, ol { padding-left: 1.25rem; margin: 0 0 1em; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-primary);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-16);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: var(--fs-18); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-14); }

.btn-primary {
  background: var(--c-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--c-primary-2); color: #fff; }

.btn-secondary {
  background: var(--c-bg);
  color: var(--c-primary);
  border-color: var(--c-border);
}
.btn-secondary:hover { background: var(--c-bg-2); border-color: var(--c-primary); }

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:hover { background: var(--c-bg-2); }

.btn-accent {
  background: var(--c-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--c-accent-2); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
/* Container inside header acts as positioning context for the mobile dropdown */
.site-header .container { position: relative; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.brand { display: inline-flex; align-items: center; }
.brand .logo { height: 36px; width: auto; max-width: 240px; }
.footer-logo .logo { height: 44px; width: auto; max-width: 280px; margin-bottom: 12px; }

.site-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.site-nav a {
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-14);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.site-nav a:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent);
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.lang-switcher { position: relative; }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-14);
}
.lang-current:hover { border-color: var(--c-primary); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  list-style: none;
  margin: 0;
  display: none;
}
.lang-menu li { margin: 0; }
.lang-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-14);
}
.lang-menu a:hover { background: var(--c-bg-2); color: var(--c-primary); }
.lang-menu li[aria-current="true"] a { background: var(--c-bg-3); color: var(--c-primary); }
.lang-switcher.is-open .lang-menu { display: block; }

.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  color: var(--c-text);
  align-items: center;
  justify-content: center;
}
/* SVG icons guarantee identical line thickness across all browsers
   (previous span-based approach had margin-collapse rendering inconsistencies). */
.hamburger-icon {
  display: block;
  margin: 0 auto;
}
.hamburger-icon-x { display: none; }
.hamburger.is-open .hamburger-icon-bars { display: none; }
.hamburger.is-open .hamburger-icon-x { display: block; }

/* ---- Mobile dropdown menu (<= 900px) ---- */
@media (max-width: 900px) {
  .hamburger { display: inline-flex; }

  /* Hide nav by default; turn it into a positioned dropdown when .is-open */
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 12px 28px rgba(15, 23, 34, 0.14);
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    z-index: 110;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-bg-2);
    border-radius: 0;
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: var(--c-bg-2);
    color: var(--c-primary);
    border-bottom-color: var(--c-bg-2);
    outline: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 64px 0 80px;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(0, 179, 136, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(242, 180, 65, 0.10), transparent 60%),
    var(--c-bg);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 16px;
  padding: 4px 10px;
  background: rgba(0, 179, 136, 0.1);
  border-radius: 999px;
}
.hero-title {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin-bottom: 16px;
}
.hero-sub {
  font-size: var(--fs-18);
  color: var(--c-text-2);
  margin-bottom: 24px;
}
.hero-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 8px;
}
.hero-checks li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  color: var(--c-text);
  font-size: var(--fs-14);
}
.hero-checks li svg { color: var(--c-accent); }

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 56px; }
}

/* ---------- Calculator ---------- */
.calc {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.calc-header { margin-bottom: 16px; }
.calc-title { font-size: var(--fs-20); margin: 0 0 6px; }
.calc-sub { font-size: var(--fs-14); color: var(--c-mute); margin: 0; }

.calc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-bg-2);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 16px;
}
.calc-tab {
  background: transparent;
  border: 0;
  padding: 10px;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-mute);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.calc-tab-active {
  background: var(--c-bg);
  color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}

.calc-form { display: grid; gap: 12px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .calc-row { grid-template-columns: 1fr; } }

.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-label { font-size: var(--fs-12); font-weight: 700; color: var(--c-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.calc-field select,
.calc-field input {
  min-height: 48px;
  padding: 0 12px;
  font-size: var(--fs-16);
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-feature-settings: "tnum" on;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.calc-field select:focus-visible,
.calc-field input:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.18);
}

.calc-hint { font-size: var(--fs-12); color: var(--c-mute); margin: 0; }

.calc-rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-14);
  color: var(--c-mute);
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-border);
}
.calc-rate-value {
  font-weight: 800;
  color: var(--c-primary);
  font-size: var(--fs-16);
  font-feature-settings: "tnum" on;
}
.calc-rate-updated { font-size: var(--fs-12); color: var(--c-mute-2); }

.calc-result {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-feature-settings: "tnum" on;
}
.calc-result-line { display: flex; justify-content: space-between; align-items: baseline; }
.calc-result-label { font-size: var(--fs-14); color: var(--c-mute); }
.calc-result-value { font-weight: 700; color: var(--c-text); }
.calc-result-net .calc-result-value { color: var(--c-accent); font-size: var(--fs-20); }
.calc-result-fee .calc-result-value { color: var(--c-gold-text); }
.calc-result-total .calc-result-value { font-size: var(--fs-18); }

.calc-error {
  color: var(--c-error);
  font-size: var(--fs-14);
  font-weight: 600;
  min-height: 1.5em;
}
.calc-error:empty { display: none; }

.calc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .calc-cta { grid-template-columns: 1fr; } }

.calc-note { font-size: var(--fs-12); color: var(--c-mute); margin: 0; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--c-bg-2); padding: 28px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.trust-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; margin: 0; }
.trust-grid li { display: flex; flex-direction: column; gap: 4px; }
.trust-grid strong { font-family: 'Manrope', sans-serif; font-size: var(--fs-24); font-weight: 800; color: var(--c-primary); font-feature-settings: "tnum" on; }
.trust-grid span { font-size: var(--fs-14); color: var(--c-mute); }

@media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Section title (shared) ---------- */
.section-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 0 0 12px; }
.section-sub { font-size: var(--fs-18); color: var(--c-mute); margin: 0 0 32px; max-width: 720px; }

/* ---------- How ---------- */
.how { padding: 80px 0; }
.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.how-steps li {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.how-steps li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.how-num {
  width: 40px; height: 40px;
  background: var(--c-primary);
  color: var(--c-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-18);
  margin-bottom: 8px;
}
.how-steps h3 { font-size: var(--fs-20); margin: 0; }
@media (max-width: 800px) { .how-steps { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services { padding: 80px 0; background: var(--c-bg-2); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
.service-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-gold);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-24);
  font-family: 'Manrope', sans-serif;
  margin-bottom: 12px;
}
.service-card h3 { font-size: var(--fs-18); margin: 0 0 6px; }
.service-card p { margin: 0; font-size: var(--fs-14); color: var(--c-mute); }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } }

/* ---------- Why ---------- */
.why { padding: 80px 0; }
.why-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.why-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.why-list li { padding-left: 28px; position: relative; }
.why-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  background: var(--c-accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center;
  -webkit-mask-size: contain;
}
.why-coins {
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
}
.why-coins-label {
  color: var(--c-gold);
  font-weight: 700;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.coin-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.coin-pill {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) { .why-inner { grid-template-columns: 1fr; } }

/* ---------- Map ---------- */
.map { padding: 80px 0; background: var(--c-bg-2); }
.map-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: stretch;
}
.map-info {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.map-address { font-style: normal; line-height: 1.5; }
.map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-3);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border);
}
.map-load {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3));
  border: 0;
  font-weight: 700;
  color: var(--c-primary);
  font-size: var(--fs-16);
  cursor: pointer;
}
.map-load:hover { background: var(--c-bg-3); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { padding: 80px 0; }
.faq-list { display: grid; gap: 8px; max-width: 860px; }
.faq-item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-16);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { transition: transform var(--t-base) var(--ease-out); color: var(--c-mute); flex-shrink: 0; }
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--c-accent); }
.faq-answer { padding: 0 20px 18px; color: var(--c-text-2); }
.faq-answer p { margin: 0; }

/* ---------- Final CTA ---------- */
.cta-final {
  padding: 72px 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(0, 179, 136, 0.12), transparent 60%),
    var(--c-primary);
  color: #fff;
}
.cta-final-inner { text-align: center; }
.cta-final .section-title { color: #fff; }
.cta-final-sub { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-18); margin: 0 auto 28px; max-width: 640px; }
.cta-final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-final .btn-secondary,
.cta-final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cta-final .btn-secondary:hover,
.cta-final .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }

/* ---------- Scroll-to-top floating button ---------- */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background 150ms var(--ease-out);
  box-shadow: 0 6px 20px rgba(15, 23, 34, 0.18);
  z-index: 90;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover { background: var(--c-accent); }
@media (max-width: 720px) {
  .scroll-top { bottom: 16px; right: 16px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); padding: 56px 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
/* footer-logo .logo now sized in .brand block */
.footer-tagline { color: var(--c-mute); font-size: var(--fs-14); margin: 0; }
.footer-title { font-size: var(--fs-14); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-mute); margin-bottom: 12px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-list a { color: var(--c-text-2); font-size: var(--fs-14); }
.footer-list a:hover { color: var(--c-primary); }
.footer-address { font-style: normal; font-size: var(--fs-14); color: var(--c-text-2); line-height: 1.6; }
.footer-hours { font-size: var(--fs-14); color: var(--c-text-2); margin: 8px 0 0; }
.footer-bottom {
  border-top: 1px solid var(--c-border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-copy { font-size: var(--fs-12); color: var(--c-mute); margin: 0; }
.footer-risk-mini { font-size: var(--fs-12); color: var(--c-mute-2); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile responsive safety net ---------- */
@media (max-width: 720px) {
  .container { padding-inline: 24px; }
  .hero { padding: 32px 0 48px; }
  .hero-title { font-size: clamp(26px, 7vw, 36px); }
  .hero-sub { font-size: var(--fs-16); }
  .section-title { font-size: clamp(24px, 6vw, 32px); }
  .section-sub { font-size: var(--fs-16); }
  .how, .services, .why, .faq { padding: 48px 0; }
  .calc { padding: 16px; }
  .calc-tabs { font-size: var(--fs-14); }
  .trust-grid { gap: 16px; }
  .trust-grid strong { font-size: var(--fs-20); }
  .cta-final { padding: 48px 0; }
  .cta-final-actions { flex-direction: column; align-items: stretch; }
  .cta-final-actions .btn { width: 100%; }
  .site-footer { padding: 40px 0 20px; }
  .footer-grid { gap: 28px; }
  .lang-current { padding: 0 10px; }

  /* Header tightening on mobile */
  .header-inner { min-height: 68px; gap: 12px; }
  .brand .logo { height: 40px; max-width: 240px; }
  .header-actions { gap: 8px; }
}

/* Always-on overflow guard for very narrow viewports */
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .brand .logo { max-width: 180px; height: 34px; }
  .lang-current { padding: 0 8px; font-size: var(--fs-12); }
  .container { padding-inline: 18px; }
}

/* Ensure blog content always has breathing room on every viewport */
.blog-post-content > .prose,
.blog-post-content > .author-card,
.blog-post-content > .blog-post-cta,
.blog-post-content > .blog-post-tags {
  padding-inline: 0;
}
@media (max-width: 480px) {
  .blog-post-title { font-size: clamp(22px, 6.2vw, 28px); }
  .prose h2 { font-size: var(--fs-20); }
  .prose h3 { font-size: var(--fs-18); }
}

/* ---------- Blog index ---------- */
.blog-index { padding: 56px 0 80px; }
.blog-header { margin-bottom: 40px; max-width: 720px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
.blog-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg-2); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-meta { font-size: var(--fs-12); color: var(--c-mute); display: flex; gap: 8px; align-items: center; }
.blog-card-meta .dot { color: var(--c-border); }
.blog-card-title { font-size: var(--fs-20); margin: 0; line-height: 1.25; }
.blog-card-title a { color: var(--c-text); }
.blog-card-title a:hover { color: var(--c-primary); }
.blog-card-desc { color: var(--c-mute); margin: 0; flex: 1; font-size: var(--fs-14); }
.blog-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag-pill { display: inline-block; padding: 4px 10px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-12); color: var(--c-mute); font-weight: 600; }
.blog-empty { padding: 40px 0; color: var(--c-mute); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Blog post ---------- */
.blog-post-header { padding-block: 40px 28px; background: var(--c-bg-2); border-bottom: 1px solid var(--c-border); }
.breadcrumb { font-size: var(--fs-12); color: var(--c-mute); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--c-mute); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { color: var(--c-border); }
.breadcrumb .current { color: var(--c-text); font-weight: 600; }
.blog-post-title { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 12px; max-width: 880px; }
.blog-post-desc { color: var(--c-mute); font-size: var(--fs-18); margin: 0 0 14px; max-width: 720px; }
.blog-post-meta { font-size: var(--fs-14); color: var(--c-mute); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.blog-post-meta .dot { color: var(--c-border); }
.blog-post-meta .meta-author strong { color: var(--c-text); }

.blog-post-hero { padding-block: 32px 0; }
.blog-post-hero img,
.blog-post-hero svg { width: 100%; height: auto; border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-card-image svg { width: 100%; height: 100%; display: block; }

.blog-post-content { padding-block: 32px 64px; }
.prose { max-width: 720px; margin: 0 auto; font-size: var(--fs-18); line-height: 1.7; color: var(--c-text-2); }
.prose h2 { font-size: var(--fs-28); margin: 2em 0 0.6em; color: var(--c-text); line-height: 1.2; scroll-margin-top: 90px; }
.prose h3 { font-size: var(--fs-20); margin: 1.5em 0 0.5em; color: var(--c-text); line-height: 1.3; scroll-margin-top: 90px; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--c-accent); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--c-primary); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.prose li { margin: 0 0 0.5em; }
.prose strong { color: var(--c-text); }
.prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--c-accent); background: var(--c-bg-2); border-radius: 0 var(--radius) var(--radius) 0; color: var(--c-text); font-style: italic; }
.prose code { background: var(--c-bg-3); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Monaco, monospace; }
.prose pre { background: var(--c-primary); color: #fff; padding: 16px; border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--fs-14); display: block; overflow-x: auto; white-space: normal; }
.prose th, .prose td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-border); }
.prose th { background: var(--c-bg-2); font-weight: 700; color: var(--c-text); }
.prose img { border-radius: var(--radius); max-width: 100%; height: auto; }
.prose, .prose * { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
.prose pre { max-width: 100%; }
@media (max-width: 720px) {
  .blog-post-content { padding-block: 24px 56px; }
  .blog-post-header { padding-block: 28px 24px; }
  .blog-post-hero { padding-block-start: 16px; }
  .blog-post-hero img,
  .blog-post-hero svg { border-radius: var(--radius); }
  .blog-post-title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2; }
  .blog-post-desc { font-size: var(--fs-16); }
  .blog-post-meta { font-size: var(--fs-12); gap: 6px; }
  .prose { font-size: var(--fs-16); line-height: 1.65; }
  .prose h2 { font-size: var(--fs-24); margin: 1.5em 0 0.5em; line-height: 1.25; }
  .prose h3 { font-size: var(--fs-18); margin: 1.3em 0 0.4em; }
  .prose p, .prose ul, .prose ol { margin: 0 0 1em; }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose blockquote { padding: 12px 16px; margin: 1.2em 0; }
  .blog-post-cta { padding: 24px 18px; margin-top: 36px; }
  .blog-post-cta h2 { font-size: var(--fs-20); }
  .blog-post-cta p { font-size: var(--fs-14); }
  .blog-post-cta-actions { flex-direction: column; gap: 10px; }
  .blog-post-cta-actions .btn { width: 100%; }
  .author-card { padding: 16px 18px; margin: 32px auto 0; }
  .blog-index { padding: 32px 0 56px; }
  .blog-header { margin-bottom: 24px; }
  .related-posts { padding: 40px 0; }
  .breadcrumb { font-size: var(--fs-12); }
}
.prose .anchor { color: var(--c-mute-2); opacity: 0; transition: opacity var(--t-fast); text-decoration: none; padding-right: 6px; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }

.author-card {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 20px 24px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.author-card-name { font-size: var(--fs-16); margin: 0 0 6px; color: var(--c-primary); }
.author-card-bio { font-size: var(--fs-14); color: var(--c-mute); margin: 0; }

.blog-post-tags { max-width: 720px; margin: 24px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }

.blog-post-cta {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 32px;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
}
.blog-post-cta h2 { color: #fff; font-size: var(--fs-24); margin: 0 0 8px; }
.blog-post-cta p { color: rgba(255,255,255,.78); margin: 0 0 20px; }
.blog-post-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.blog-post-cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.blog-post-cta .btn-secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.related-posts { padding: 56px 0; background: var(--c-bg-2); border-top: 1px solid var(--c-border); }
.related-posts .section-title { font-size: var(--fs-28); margin-bottom: 24px; }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-final, .calc-cta { display: none; }
}