/* ============================================================
   Investment Finance Hub — custom theme
   Palette: deep petrol navy + aqua teal + champagne gold
   Bootstrap 5.3 is loaded first; this file only extends it.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --ink:        #04131b;
  --navy:       #071c28;
  --navy-2:     #0b2a3a;
  --navy-3:     #113a4e;
  --teal:       #16bda9;
  --teal-strong:#0e9d8d;
  --teal-soft:  #d6f6f1;
  --gold:       #e9b872;
  --gold-strong:#c9913f;
  --paper:      #f3f8fb;
  --card:       #ffffff;
  --line:       #dde7ee;
  --muted:      #55707f;
  --shadow-sm:  0 2px 10px rgba(7, 28, 40, .06);
  --shadow-md:  0 18px 40px -22px rgba(7, 28, 40, .35);
  --shadow-lg:  0 30px 70px -30px rgba(7, 28, 40, .45);
  --radius-sm:  .6rem;
  --radius:     1rem;
  --radius-lg:  1.6rem;
  --font-head:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: #17323f;
  --bs-border-color: var(--line);
  --bs-link-color: var(--teal-strong);
  --bs-link-hover-color: var(--navy-3);
  --bs-primary: #16bda9;
}

/* ---------- 2. Base ---------- */
* { scroll-bar-color: var(--teal); }
/* single source of anchor offset: sticky topbar(44) + navbar(74) + progress(3) + breathing room.
   Do NOT add scroll-margin-top to targets as well - Chrome adds the two together. */
html { scroll-behavior: smooth; scroll-padding-top: 158px; }
body {
  font-family: var(--font-body);
  color: #17323f;
  background: var(--card);
  font-size: 1.03rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, .font-head {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
}
h1 { font-size: clamp(2.35rem, 5.1vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.16; }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.28; }
p { color: #35505e; }
a { text-decoration: none; color: var(--teal-strong); }
a:hover { color: var(--navy-3); }
a.text-reset:hover { color: var(--teal-strong) !important; }
img { max-width: 100%; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 3px solid rgba(22, 189, 169, .55); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container--narrow { max-width: 820px; }

/* ---------- 3. Helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal-strong);
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--gold); display: inline-block; }
.eyebrow--light { color: var(--gold); }
.eyebrow--light::before { background: var(--teal); }
.lead-muted { color: var(--muted); font-size: 1.09rem; }
.text-navy { color: var(--navy) !important; }
.text-muted-2 { color: var(--muted) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-navy-grad {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(22, 189, 169, .28), transparent 60%),
    radial-gradient(760px 380px at 92% 8%, rgba(233, 184, 114, .22), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
}
.bg-grid-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.divider-gold { width: 64px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--teal)); }
.rounded-img { border-radius: var(--radius-lg); }
.shadow-soft { box-shadow: var(--shadow-md); }
.fs-sm { font-size: .9rem; }
.fs-xs { font-size: .8rem; }

/* ---------- 4. Buttons ---------- */
.navbar .nav-item .btn { white-space: nowrap; }
.btn { font-weight: 700; border-radius: 99px; padding: .72rem 1.5rem; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-brand { background: var(--teal); border: 1px solid var(--teal); color: #03222c; }
.btn-brand:hover, .btn-brand:focus { background: var(--teal-strong); border-color: var(--teal-strong); color: #fff; box-shadow: 0 14px 26px -14px rgba(14, 157, 141, .9); }
.btn-gold { background: var(--gold); border: 1px solid var(--gold); color: #2a1c05; }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-strong); border-color: var(--gold-strong); color: #fff; box-shadow: 0 14px 26px -14px rgba(201, 145, 63, .85); }
.btn-outline-light-2 { border: 1px solid rgba(255,255,255,.4); color: #eaf6f8; }
.btn-outline-light-2:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-outline-brand { border: 1.5px solid var(--teal-strong); color: var(--teal-strong); background: transparent; }
.btn-outline-brand:hover { background: var(--teal-strong); color: #fff; }
.btn-lg-2 { padding: .9rem 1.9rem; font-size: 1.02rem; }

/* ---------- 5. Topbar + navbar ---------- */
.topbar {
  background: var(--ink);
  color: #a9c6d1;
  font-size: .84rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar a { color: #a9c6d1; }
.topbar a:hover { color: var(--gold); }
.topbar .sep { color: rgba(255,255,255,.2); }

.navbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: .55rem;
  transition: box-shadow .25s ease, padding .25s ease;
}
.navbar.is-stuck { box-shadow: 0 12px 30px -22px rgba(7,28,40,.5); padding-block: .35rem; }
.navbar-brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(150deg, var(--navy-3), var(--navy) 55%, var(--teal-strong));
  color: var(--gold); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 18px -10px rgba(7,28,40,.6);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-head); font-size: 1.16rem; color: var(--navy); font-weight: 700; }
.brand-text span { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-strong); font-weight: 700; }
.navbar .nav-link { color: #24424f; font-weight: 600; font-size: .96rem; padding: .5rem .82rem !important; border-radius: 99px; }
.navbar .nav-link:hover { color: var(--navy); background: var(--teal-soft); }
.navbar .nav-link.active { color: var(--navy); background: var(--teal-soft); }
.navbar-toggler { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .35rem .55rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(22,189,169,.25); }
@media (max-width: 991.98px) {
  .navbar-collapse { padding-top: .6rem; }
  .navbar .nav-link { padding: .6rem .8rem !important; }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; color: #eaf6f8; padding: clamp(3.6rem, 8vw, 6.6rem) 0 clamp(3.4rem, 7vw, 5.6rem); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -46% -10%; height: 60%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(22,189,169,.18), transparent 70%);
  pointer-events: none;
}
.hero h1, .hero h2 { color: #fff; }
.hero p { color: #b6d3dd; font-size: 1.1rem; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.14); }
.hero__badge {
  position: absolute; left: clamp(-1rem, -1.4vw, -.5rem); bottom: 1.6rem;
  background: rgba(4, 19, 27, .78); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); border-radius: var(--radius);
  padding: .85rem 1.1rem; display: flex; align-items: center; gap: .8rem;
  box-shadow: var(--shadow-md);
}
.hero__badge b { color: #fff; font-family: var(--font-head); font-size: 1.35rem; line-height: 1; display: block; }
.hero__badge small { color: #9fc0cc; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.hero .badge-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem;
  border-radius: 99px; background: rgba(22,189,169,.14); border: 1px solid rgba(22,189,169,.4);
  color: #8ff0e2; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.hero-stats { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.6rem; }
.hero-stats .num { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; line-height: 1; }
.hero-stats .lbl { color: #93b4c1; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- 7. Page banner (inner pages) ---------- */
.page-hero { position: relative; padding: clamp(2.6rem, 5vw, 4rem) 0; color: #eaf6f8; overflow: hidden; }
.article-hero { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); }
.page-hero p { color: #b6d3dd; max-width: 62ch; }
.breadcrumb-custom { font-size: .86rem; color: #9fc0cc; }
.breadcrumb-custom a { color: #cfe6ee; }
.breadcrumb-custom a:hover { color: var(--gold); }
.breadcrumb-custom .slash { margin-inline: .5rem; color: rgba(255,255,255,.35); }

/* ---------- 8. Section scaffolding ---------- */
.section { padding: clamp(3.4rem, 7vw, 5.6rem) 0; }
.section--after-hero { padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.section--tight { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.section-head { max-width: 68ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-on-dark h2, .section-on-dark h3 { color: #fff; }
.section-on-dark p { color: #b6d3dd; }

/* ---------- 9. Cards ---------- */
.card-2 {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  height: 100%; overflow: hidden; display: flex; flex-direction: column;
}
.card-2:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: rgba(22,189,169,.5); }
.card-2__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.card-2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-2:hover .card-2__media img { transform: scale(1.055); }
.card-2__media .tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  background: rgba(4,19,27,.72); color: #9ff0e3; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); border-radius: 99px; padding: .25rem .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.card-2__body { padding: 1.45rem 1.45rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; }
.card-2__body h3 { margin: 0; }
.card-2__body p { margin: 0; color: #4a6472; flex: 1 1 auto; }
.card-2 .btn { align-self: flex-start; }
.card-2__meta { display: flex; gap: .55rem; align-items: center; font-size: .8rem; color: var(--muted); font-weight: 600; }
.card-2__meta i { color: var(--teal-strong); }

/* Generic feature / info cards */
.tile {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  padding: 1.5rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile h3, .tile h4 { font-size: 1.08rem; margin-bottom: .4rem; font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.tile p { font-size: .95rem; margin: 0; color: #4a6472; }
.icon-chip {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-soft), #eaf9ff); color: var(--teal-strong);
  font-size: 1.4rem; border: 1px solid rgba(22,189,169,.28); margin-bottom: 1rem;
}
.icon-chip--gold { background: linear-gradient(150deg, #fdf0dc, #fff8ee); color: var(--gold-strong); border-color: rgba(233,184,114,.5); }
.icon-chip--dark { background: linear-gradient(150deg, var(--navy-2), var(--navy)); color: var(--gold); border-color: rgba(255,255,255,.12); }

/* ---------- 10. Numbered steps ---------- */
.steps { counter-reset: stepc; }
.step {
  position: relative; counter-increment: stepc; padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13); height: 100%;
}
.step::before {
  content: "0" counter(stepc);
  font-family: var(--font-head); font-size: 2.1rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px rgba(233,184,114,.85);
  display: block; margin-bottom: .9rem;
}
.step h3 { font-size: 1.12rem; color: #fff; margin-bottom: .45rem; }
.step p { font-size: .94rem; margin: 0; color: #a9c6d1; }

/* ---------- 11. Testimonials ---------- */
.testimonial-card {
  background: linear-gradient(165deg, #ffffff, #f6fbfd);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem 1.6rem; height: 100%; position: relative;
  box-shadow: var(--shadow-sm);
}
.testimonial-card::before {
  content: "\201C"; position: absolute; top: -.15rem; right: 1.1rem;
  font-family: var(--font-head); font-size: 5.4rem; line-height: 1; color: rgba(22,189,169,.16);
}
.testimonial-card blockquote { margin: .9rem 0 1.35rem; color: #33505e; font-size: 1.01rem; }
.stars { color: var(--gold-strong); letter-spacing: .12em; font-size: .9rem; }
.avatar-initial {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 800; color: #fff; font-size: .95rem; letter-spacing: .02em;
  background: linear-gradient(145deg, var(--navy-3), var(--navy));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.avatar-initial--teal { background: linear-gradient(145deg, var(--teal), var(--teal-strong)); color: #052630; }
.avatar-initial--gold { background: linear-gradient(145deg, var(--gold), var(--gold-strong)); color: #2c1d05; }
.who { display: flex; align-items: center; gap: .8rem; }
.who b { color: var(--navy); font-weight: 800; font-size: .98rem; }

/* ---------- 12. Lists / checks ---------- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 2.1rem; color: #33505e; }
.check-list li::before {
  content: "\f26e"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .12rem;
  width: 22px; height: 22px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-strong);
  font-size: .78rem; display: grid; place-items: center; font-weight: 700;
}
.check-list--gold li::before { background: rgba(233,184,114,.2); color: var(--gold-strong); }
.check-list--on-dark li { color: #c3dbe4; }
.check-list--on-dark li::before { background: rgba(22,189,169,.18); color: #7fe9db; }

/* ---------- 13. Blog ---------- */
.article { max-width: 780px; }
.article > p { margin-bottom: 1.45rem; color: #2b4855; }
.article h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin: 2.6rem 0 1rem; }
.article h2::before { content: ""; display: block; width: 42px; height: 3px; border-radius: 99px; background: var(--gold); margin-bottom: .85rem; }
.article h3 { font-size: 1.2rem; margin: 2rem 0 .8rem; }
.article ul, .article ol { margin-bottom: 1.5rem; color: #2b4855; }
.article li { margin-bottom: .45rem; }
.article .lead { color: #3c5866; font-size: 1.13rem; font-weight: 500; }
.article blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--teal);
  background: linear-gradient(100deg, var(--teal-soft), #f6fefc); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head); font-size: 1.16rem; color: var(--navy);
}
.article blockquote p { margin: 0; color: var(--navy); }
.callout {
  border: 1px dashed rgba(22,189,169,.55); background: #f4fdfb; border-radius: var(--radius);
  padding: 1.2rem 1.35rem; margin: 2rem 0; font-size: .95rem;
}
.callout--warn { border-color: rgba(201,145,63,.5); background: #fffaf1; }
.article-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--navy); }
.article-cover img { width: 100%; display: block; aspect-ratio: 16 / 7; object-fit: cover; }
.article-cover--svg .svg-cover { width: 100%; height: auto; display: block; aspect-ratio: 16 / 7; }
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.15rem; align-items: center; font-size: .85rem; font-weight: 600; color: var(--muted); }
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.toc { position: sticky; top: 120px; border-left: 2px solid var(--line); padding-left: 1.1rem; }
.toc a { display: block; color: var(--muted); font-size: .9rem; font-weight: 600; padding: .28rem 0; }
.toc a:hover, .toc a.active { color: var(--teal-strong); }
.share-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.share-row .btn { padding: .5rem 1rem; font-size: .88rem; }

/* ---------- 14. Forms ---------- */
.form-label { font-weight: 700; font-size: .87rem; color: var(--navy); }
.form-control, .form-select {
  border-radius: var(--radius-sm); border: 1.5px solid var(--line); padding: .74rem .95rem;
  background: #fbfdfe; font-size: .98rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 .22rem rgba(22,189,169,.16); background: #fff; }
.form-control::placeholder { color: #9db3bd; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #d98b7a; background-color: #fffafa; }
.was-validated .form-control:valid, .form-control.is-valid { border-color: rgba(22,189,169,.6); background-image: none; box-shadow: none; }
.was-validated .form-select:invalid, .form-select.is-invalid { border-color: #d98b7a; }
.invalid-feedback { color: #b4573f; font-weight: 600; font-size: .83rem; }
/* Our feedback nodes sit inside a .form-group wrapper, so Bootstrap's sibling
   selector cannot see them; drive visibility from the JS-managed .is-invalid flag. */
.is-invalid ~ .invalid-feedback,
.form-group:focus-within .is-invalid ~ .invalid-feedback { display: block; }
input.is-invalid ~ * .invalid-feedback,
.form-group .is-invalid:has(~ * .invalid-feedback) { display: block; }
.form-group:has(.is-invalid) .invalid-feedback { display: block; }
.input-group-icon { position: relative; }
.input-group-icon .form-control { padding-left: 2.6rem; }
.input-group-icon > i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--teal-strong); z-index: 3; }
.form-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--shadow-md);
}
.form-note { font-size: .82rem; color: var(--muted); }
.form-success {
  border-radius: var(--radius); padding: 1.35rem 1.45rem; border: 1px solid rgba(22,189,169,.45);
  background: linear-gradient(120deg, #f2fdfb, #eafaf6); color: #14564c;
}
.form-success h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: #0d5449; margin-bottom: .35rem; }
.form-success ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.opt-grid { display: grid; gap: .6rem; }
.opt-check {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem;
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; background: #fbfdfe;
  transition: border-color .2s ease, background .2s ease;
}
.opt-check:hover { border-color: rgba(22,189,169,.6); }
.opt-check input { margin-top: .28rem; accent-color: var(--teal-strong); }
.opt-check.checked { border-color: var(--teal); background: #f2fdfb; }
.opt-check b { display: block; font-size: .95rem; color: var(--navy); }
.opt-check span { font-size: .84rem; color: var(--muted); }

/* ---------- 15. Contact info ---------- */
.info-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); height: 100%; }
.info-card .icon-chip { margin: 0; width: 46px; height: 46px; font-size: 1.2rem; }
.info-card b { display: block; color: var(--navy); font-size: .95rem; }
.info-card a, .info-card p { color: #4a6472; font-size: .93rem; margin: .1rem 0 0; overflow-wrap: anywhere; }
.info-card a { word-break: normal; }
.info-card a:hover { color: var(--teal-strong); }
.map-frame { border: 0; width: 100%; height: 100%; min-height: 380px; border-radius: var(--radius-lg); filter: saturate(.92); }
.map-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 380px; background: var(--navy); }

/* ---------- 16. Stats strip ---------- */
.stat-strip { display: grid; gap: 1rem; }
.stat { text-align: center; padding: 1.15rem .6rem; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.stat .v { font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: #fff; line-height: 1; }
.stat .k { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: #93b4c1; margin-top: .45rem; }

/* ---------- 17. Pricing / facts table ---------- */
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.spec-table th, .spec-table td { padding: .8rem .95rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 700; width: 40%; background: #f8fbfd; }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--line); }
.spec-table th:first-child { border-left: 1px solid var(--line); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.spec-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- 18. Accordion / FAQ ---------- */
.accordion-2 { --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius); --bs-accordion-inner-border-radius: var(--radius); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(22,189,169,.2); }
.accordion-2 .accordion-button { font-family: var(--font-body); font-weight: 700; color: var(--navy); background: #fff; padding: 1.15rem 1.3rem; }
.accordion-2 .accordion-button:not(.collapsed) { background: var(--teal-soft); color: var(--navy); box-shadow: inset 0 -1px 0 var(--line); }
.accordion-2 .accordion-button::after { filter: hue-rotate(160deg) saturate(2); }
.accordion-2 .accordion-body { padding: 1.1rem 1.3rem 1.35rem; color: #3d5865; font-size: .97rem; }

/* ---------- 19. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 48%, #0f4f5c 100%);
  padding: clamp(2rem, 4.6vw, 3.4rem); color: #eaf6f8; box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(460px 200px at 88% 12%, rgba(233,184,114,.3), transparent 62%),
              radial-gradient(420px 220px at 6% 96%, rgba(22,189,169,.28), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b6d3dd; }

/* ---------- 20. Newsletter strip ---------- */
.newsletter-strip { border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(120deg, #ffffff, var(--teal-soft)); padding: clamp(1.5rem, 3.4vw, 2.4rem); }

/* ---------- 21. Footer ---------- */
.footer { background: var(--ink); color: #9fbdca; padding-top: clamp(2.6rem, 5vw, 4rem); }
.footer h4 { font-family: var(--font-body); font-weight: 800; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.05rem; }
.footer a { color: #9fbdca; font-size: .95rem; }
.footer a:hover { color: var(--gold); }
.footer .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer .footer-brand p { font-size: .94rem; color: #8fadbb; }
.social-row { display: flex; gap: .55rem; }
.social-row a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #cfe6ee;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-row a:hover { background: var(--teal); color: #04222b; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 2.2rem; padding: 1.1rem 0 1.5rem; font-size: .86rem; color: #7d9ba8; }
.footer-bottom a { font-size: .86rem; }
.footer .disclaimer { font-size: .8rem; color: #7d9ba8; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: .9rem 1.05rem; background: rgba(255,255,255,.03); }

/* ---------- 22. Misc ---------- */
.back-to-top {
  position: fixed; right: 1.1rem; bottom: 1.2rem; z-index: 1030;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: var(--navy); color: var(--gold); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .28s ease; cursor: pointer;
  box-shadow: var(--shadow-md);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--teal); color: #04222b; }
.toast-stack { position: fixed; right: 1rem; bottom: 4.4rem; z-index: 1090; display: grid; gap: .6rem; max-width: min(340px, 88vw); }
.toast-2 {
  border-radius: var(--radius); padding: .85rem 1rem; font-size: .92rem; font-weight: 600;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--navy);
  animation: slideIn .32s ease both; display: flex; gap: .7rem; align-items: flex-start;
}
.toast-2 i { font-size: 1.15rem; }
.toast-2.ok { border-left: 4px solid var(--teal); }
.toast-2.ok i { color: var(--teal-strong); }
.toast-2.warn { border-left: 4px solid var(--gold-strong); }
.toast-2.warn i { color: var(--gold-strong); }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pill-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-nav a {
  border: 1px solid var(--line); border-radius: 99px; padding: .45rem 1rem;
  font-size: .88rem; font-weight: 700; color: var(--muted); background: #fff;
}
.pill-nav a:hover { border-color: var(--teal); color: var(--teal-strong); }
.pill-nav a.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.badge-soft { background: var(--teal-soft); color: #0d5449; border-radius: 99px; padding: .28rem .7rem; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.badge-soft--gold { background: #fdf1de; color: #8a5c15; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001s !important; }
}

.legal h2 { font-size: 1.32rem; margin: 2.3rem 0 .75rem; }
.legal h2:first-of-type { margin-top: 1.4rem; }
.legal p, .legal li { font-size: .98rem; color: #3c5866; }
.legal ul { padding-left: 1.15rem; }
.legal .legal-updated { font-size: .86rem; color: var(--muted); }
.tidy-list { list-style: none; padding: 0; margin: 0; }
.tidy-list li { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.tidy-list li:last-child { border-bottom: 0; }

/* ---------- 23. Responsive tweaks ---------- */
@media (max-width: 767.98px) {
  html, body { overflow-x: clip; }
  .topbar .topbar-hide-sm { display: none !important; }
  .hero__badge { left: 0; right: .5rem; bottom: .75rem; max-width: calc(100% - 1rem); }
  .cta-band { text-align: left; }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding-inline: .78rem; }
}

/* ---------- 24. Reading progress (article pages) ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1080; background: rgba(255,255,255,.12); }
.read-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold)); box-shadow: 0 0 12px rgba(22,189,169,.6); }