/* ==========================================================================
   Nivara Edge – design system
   1 tokens · 2 base · 3 layout · 4 header/mega/drawer · 5 hero · 6 cards ·
   7 sections · 8 calculator · 9 forms · 10 footer/floats · 11 article/legal · 12 motion
   ========================================================================== */

/* 1 ── tokens */
:root {
  --primary-900: #0A2A66; --primary-700: #123E8C; --primary-500: #2563EB;
  --gold: #D4A646; --gold-700: #9A7418; --success: #16A34A;
  --bg: #FFFFFF; --bg-soft: #F5F8FD; --text: #0F1B33; --muted: #5B6B82; --border: #E3E9F2;
  --r-sm: 12px; --r: 20px; --r-lg: 24px;
  --sh-1: 0 1px 2px rgba(10,42,102,.06), 0 4px 12px rgba(10,42,102,.05);
  --sh-2: 0 2px 4px rgba(10,42,102,.05), 0 12px 32px rgba(10,42,102,.10);
  --sh-3: 0 8px 16px rgba(10,42,102,.08), 0 28px 64px rgba(10,42,102,.16);
  --font-h: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1200px;
  --header-h: 76px;
}
/* per-service tints */
.t-mf      { --tint-bg: #EAF1FF; --tint-fg: #1D4ED8; }
.t-health  { --tint-bg: #E2F6F0; --tint-fg: #0B7F69; }
.t-life    { --tint-bg: #ECEBFF; --tint-fg: #4338CA; }
.t-general { --tint-bg: #FFF0DF; --tint-fg: #B45309; }
.t-fd      { --tint-bg: #FBF3DA; --tint-fg: #8A6410; }
.t-nps     { --tint-bg: #F2E9FF; --tint-fg: #6D28D9; }
.t-ins     { --tint-bg: #E2F3FD; --tint-fg: #0369A1; }

/* 2 ── base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-b); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-h); color: var(--primary-900); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); }
h2 { font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem); }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--primary-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-500); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--primary-900); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; color: #fff; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 820px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* 3 ── layout helpers */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section.alt { background: var(--bg-soft); }
.section.tight { padding: 24px 0 56px; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.light h2, .section-head.light .section-sub { color: #fff; }
.section-title { margin-bottom: .35em; }
.section-sub { color: var(--muted); font-size: 1.0625rem; margin: 0; }
.eyebrow { display: inline-block; font-family: var(--font-h); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-700); margin: 0 0 12px; position: relative; padding-bottom: 8px; }
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--gold); border-radius: 2px; }
.section-head.center .eyebrow::after { left: 50%; transform: translateX(-50%); }
.eyebrow.light { color: #F3D58B; }
.eyebrow.pill { background: #fff; border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; box-shadow: var(--sh-1); }
.eyebrow.pill::after { display: none; }
.card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.two-col { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
.two-col.top { align-items: start; }
.center-link { text-align: center; margin-top: 32px; }
.center-block { text-align: center; }
.split-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.split-head .section-head { margin-bottom: 24px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-family: var(--font-h); text-decoration: none; color: var(--primary-700); }
.link-arrow .ic { width: 1.1em; height: 1.1em; transition: transform .2s; }
.link-arrow:hover .ic { transform: translateX(3px); }
@media (min-width: 640px) { .card-grid.c2, .card-grid.c3, .card-grid.c4 { grid-template-columns: repeat(2, 1fr); } .container { padding: 0 24px; } }
@media (min-width: 992px) { .card-grid.c3 { grid-template-columns: repeat(3, 1fr); } .card-grid.c4 { grid-template-columns: repeat(4, 1fr); } .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-h); font-weight: 700; font-size: .9375rem; line-height: 1; padding: 13px 22px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-sm { padding: 10px 16px; font-size: .875rem; }
.btn-primary { background: var(--primary-700); color: #fff; box-shadow: 0 8px 20px rgba(18,62,140,.28); }
.btn-primary:hover { background: var(--primary-900); color: #fff; box-shadow: 0 12px 28px rgba(10,42,102,.35); }
.btn-ghost { background: #fff; color: var(--primary-700); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary-700); color: var(--primary-900); }
.btn-gold { background: var(--gold); color: var(--primary-900); }
.btn-gold:hover { background: #e2b857; color: var(--primary-900); }
.btn-wa { background: #fff; color: #0B6B3A; border-color: #BFE6CF; }
.btn-wa:hover { background: #ECFAF2; color: #075A30; }

/* 4 ── topbar / header / mega / drawer */
.topbar { background: var(--primary-900); color: #DCE6F7; font-size: .8125rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.topbar a { color: #DCE6F7; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; }
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 20px; }
.topbar .ic { width: 15px; height: 15px; color: var(--gold); }
.topbar-r > span { display: inline-flex; gap: 6px; align-items: center; }
.hide-sm { display: none !important; }
@media (min-width: 768px) { .hide-sm { display: inline-flex !important; } }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(10,42,102,.10); border-color: var(--border); --header-h: 64px; }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); transition: min-height .25s; }
.brand img { width: auto; height: 44px; transition: height .25s; }
.site-header.is-scrolled .brand img { height: 32px; }
.nav-toggle { background: none; border: 1px solid var(--border); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--primary-900); }
.nav-close { display: none; }
.site-nav { position: fixed; inset: 0; z-index: 150; background: #fff; padding: 72px 20px 32px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s; }
.site-nav.is-open { transform: none; visibility: visible; }
.site-nav .nav-close { display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--primary-900); }
.nav-list { display: flex; flex-direction: column; }
.nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 16px 4px; font-family: var(--font-h); font-weight: 700; font-size: 1.125rem; color: var(--primary-900); text-decoration: none; text-align: left; }
.nav-link[aria-current="page"], .nav-link.is-current { color: var(--primary-500); }
.mega-toggle .chev { transition: transform .2s; }
.mega-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mega { display: none; padding: 12px 0 8px; }
.mega.is-open { display: block; }
.mega-col { margin-bottom: 8px; }
.mega-h { font-family: var(--font-h); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.mega-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--text); }
.mega-link:hover, .mega-link[aria-current] { background: var(--tint-bg); }
.mega-link strong { display: block; font-family: var(--font-h); font-size: .9375rem; color: var(--primary-900); line-height: 1.2; }
.mega-link small { color: var(--muted); font-size: .8125rem; }
.ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint-bg, #EAF1FF); color: var(--tint-fg, var(--primary-700)); flex: none; }
.ico .ic { width: 22px; height: 22px; }
.ico.big { width: 60px; height: 60px; border-radius: 18px; }
.ico.big .ic { width: 30px; height: 30px; }
.mega-promo { background: linear-gradient(135deg, var(--primary-900), var(--primary-700)); color: #E8EFFC; border-radius: 18px; padding: 20px; margin-top: 12px; }
.mega-promo .mega-h { color: #F3D58B; margin-top: 0; }
.mega-promo p { font-size: .9375rem; }
.promo-link { display: inline-flex; gap: 6px; align-items: center; margin-left: 14px; color: #fff; font-weight: 600; font-size: .875rem; }
.nav-cta { width: 100%; margin-top: 24px; }
@media (min-width: 992px) {
  .nav-toggle { display: none; }
  .site-nav { position: static; transform: none; visibility: visible; padding: 0; background: none; overflow: visible; display: flex; align-items: center; gap: 12px; }
  .site-nav .nav-close { display: none; }
  .nav-list { flex-direction: row; align-items: center; gap: 2px; }
  .nav-link { border: 0; padding: 10px 14px; font-size: .9375rem; border-radius: 999px; width: auto; justify-content: flex-start; gap: 4px; }
  .nav-link:hover { background: var(--bg-soft); }
  .nav-cta { width: auto; margin: 0 0 0 8px; }
  .has-mega { position: static; }
  .mega { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); width: min(920px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; }
  .has-mega:hover .mega, .mega.is-open, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); display: grid; }
  .header-row { position: relative; }
  .mega-promo { margin-top: 0; }
}

/* 5 ── hero */
.hero { position: relative; padding: 40px 0 0; background: linear-gradient(180deg, #F4F8FF 0%, #fff 100%); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob.b1 { width: 420px; height: 420px; background: #BFD3FF; top: -120px; right: -80px; }
.blob.b2 { width: 320px; height: 320px; background: #FBE7B0; bottom: 60px; left: -100px; opacity: .55; }
.grid-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(18,62,140,.14) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(70% 60% at 80% 30%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 80% 30%, #000, transparent); }
.hero-grid { position: relative; display: grid; gap: 40px; align-items: center; padding-bottom: 36px; }
.hero h1 .grad { background: linear-gradient(90deg, var(--primary-700), var(--primary-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--muted); max-width: 40em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 24px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 500; font-size: .9375rem; }
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row .ic { color: var(--success); }
.hero-vis { position: relative; max-width: 520px; margin: 0 auto; width: 100%; }
.photo { position: relative; border-radius: 28px; overflow: hidden; background: var(--tint-bg, #EAF1FF); aspect-ratio: 4/3; box-shadow: var(--sh-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-tint { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(37,99,235,.10), rgba(10,42,102,.22)); }
.hero-photo { aspect-ratio: 8/9; border-radius: 36px 36px 120px 36px; }
.ph { background: linear-gradient(145deg, var(--tint-bg), #fff 120%); display: grid; place-items: center; }
.ph-blob { position: absolute; border-radius: 50%; filter: blur(36px); opacity: .7; }
.ph-blob.b1 { width: 55%; aspect-ratio: 1; background: var(--tint-fg); opacity: .22; top: -10%; right: -10%; }
.ph-blob.b2 { width: 45%; aspect-ratio: 1; background: var(--gold); opacity: .35; bottom: -12%; left: -8%; }
.ph-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--tint-fg) 1px, transparent 1.5px); background-size: 20px 20px; opacity: .18; }
.ph-icon { position: relative; display: grid; place-items: center; width: 34%; aspect-ratio: 1; background: #fff; border-radius: 30%; color: var(--tint-fg); box-shadow: var(--sh-2); }
.ph-icon .ic { width: 55%; height: 55%; stroke-width: 1.5; }
.glass { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sh-2); font-size: .875rem; }
.glass strong { display: block; font-family: var(--font-h); color: var(--primary-900); line-height: 1.2; }
.glass small { color: var(--muted); font-size: .75rem; }
.glass .ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: #EAF1FF; color: var(--primary-700); }
.glass.g1 { left: -8px; top: 12%; }
.glass.g2 { right: -8px; bottom: 26%; }
.glass.g3 { left: 8%; bottom: -12px; }
.spark { width: 120px; height: 36px; }
.tiles-wrap { position: relative; z-index: 2; margin-bottom: -60px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); text-decoration: none; box-shadow: var(--sh-2); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile .ico { margin-bottom: 8px; }
.tile strong { font-family: var(--font-h); color: var(--primary-900); font-size: .9375rem; line-height: 1.25; }
.tile small { color: var(--muted); font-size: .8125rem; }
.hero + .section { padding-top: clamp(104px, 10vw, 140px); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; padding-bottom: 48px; }
  .tiles { grid-template-columns: repeat(7, 1fr); gap: 14px; }
  .tile { padding: 18px 14px; }
  .glass.g1 { left: -40px; } .glass.g2 { right: -28px; }
}

/* inner page hero */
.page-hero { background: linear-gradient(160deg, var(--tint-bg, #EAF1FF), #fff 70%); padding: 28px 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: var(--tint-fg); opacity: .07; }
.page-hero-grid { position: relative; display: grid; gap: 32px; align-items: center; z-index: 1; }
.page-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); max-width: 18em; }
.page-hero .eyebrow { color: var(--tint-fg); }
.page-hero-vis { max-width: 520px; width: 100%; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--muted); margin-bottom: 20px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #B4C0D4; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary-700); }
.read-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9375rem; }
@media (min-width: 992px) { .page-hero-grid.has-vis { grid-template-columns: 1.15fr .85fr; gap: 56px; } }

/* 6 ── cards */
.svc-card, .type-card, .feature, .big-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 24px; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.svc-card:hover, .type-card:hover, .feature:hover, .big-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.svc-card .ico, .type-card .ico, .feature .ico { margin-bottom: 16px; }
.svc-card p, .type-card p, .feature p { color: var(--muted); font-size: .9375rem; }
.svc-card .link-arrow { margin-top: auto; padding-top: 8px; }
.feature .ico { background: #EAF1FF; color: var(--primary-700); }
.alt .feature, .alt .type-card { background: #fff; }
.ticks { margin: 0 0 16px; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.ticks .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--success); }
.big-card { text-decoration: none; color: var(--text); padding: 32px; }
.big-card .ico { margin-bottom: 20px; }
.big-card h3 { font-size: 1.375rem; }
.big-card p { color: var(--muted); }
.link-card { text-decoration: none; color: var(--text); }
.panel { background: var(--tint-bg); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
.panel .ico { background: #fff; margin-bottom: 16px; }
.panel h3 { margin-top: 0; }
.panel .btn { margin-top: 8px; }
.split-panels { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split-panels { grid-template-columns: 1fr 1fr; } }
.persona-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.persona { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font-weight: 500; }
.persona .ic { color: var(--primary-700); }
.related-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related { display: flex; gap: 14px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.related:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.related strong { display: block; font-family: var(--font-h); color: var(--primary-900); }
.related small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.related .go { margin-left: auto; color: var(--primary-700); }

/* 7 ── sections */
.seg { display: inline-flex; padding: 6px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); margin: 0 auto 32px; position: relative; left: 50%; transform: translateX(-50%); }
.seg-btn { display: inline-flex; gap: 8px; align-items: center; border: 0; background: transparent; padding: 12px 22px; border-radius: 999px; font-family: var(--font-h); font-weight: 700; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.seg-btn.is-active { background: #fff; color: var(--primary-700); box-shadow: var(--sh-1); }
.tab-panel { animation: fadeUp .4s ease both; }
.stats-band { background: linear-gradient(120deg, var(--primary-900), var(--primary-700)); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 24px 24px; }
.stats-grid { position: relative; display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); text-align: center; }
.stat strong { display: block; font-family: var(--font-h); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.stat strong::after { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin: 8px auto; }
.stat span { color: #C9D8F2; font-size: .9375rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.flow { display: grid; gap: 12px; align-items: center; justify-items: center; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.flow-node { width: 100%; text-align: center; padding: 28px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.flow-node .ico { margin-bottom: 12px; width: 56px; height: 56px; }
.flow-node strong { display: block; font-family: var(--font-h); color: var(--primary-900); font-size: 1.125rem; }
.flow-node small { color: var(--muted); }
.flow-node.main { background: linear-gradient(160deg, var(--primary-700), var(--primary-900)); border: 0; box-shadow: var(--sh-3); }
.flow-node.main strong { color: #fff; } .flow-node.main small { color: #C9D8F2; }
.flow-node.main .ico { background: rgba(255,255,255,.14); color: #fff; }
.flow-arrow { color: var(--gold-700); transform: rotate(90deg); }
.flow-note { display: block; color: var(--muted); font-size: .9375rem; max-width: 640px; margin: 28px auto 0; text-align: center; }
@media (min-width: 768px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; } .flow-arrow { transform: none; } }
.steps { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: s; position: relative; }
.step { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 24px; position: relative; }
.alt .step { background: #fff; }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-700); color: #fff; font-family: var(--font-h); font-weight: 800; margin-bottom: 14px; box-shadow: 0 0 0 6px #EAF1FF; }
.step p { color: var(--muted); font-size: .9375rem; margin: 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; border-top: 2px dashed #C7D6F0; } .step { background: transparent; border: 0; padding: 0 12px; text-align: center; z-index: 1; } .step-n { margin-inline: auto; } }
.quiz { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-2); }
.q { border: 0; padding: 0; margin: 0 0 24px; }
.q legend { font-family: var(--font-h); font-weight: 700; color: var(--primary-900); margin-bottom: 10px; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.opt span { display: block; padding: 11px 18px; border: 1.5px solid var(--border); border-radius: 999px; font-weight: 500; background: #fff; transition: all .15s; }
.opt input:checked + span { border-color: var(--primary-700); background: #EAF1FF; color: var(--primary-900); }
.opt input:focus-visible + span { outline: 3px solid var(--primary-500); outline-offset: 2px; }
.quiz-result { margin-top: 24px; padding: 24px; border-radius: var(--r); background: linear-gradient(135deg, #EAF1FF, #F6FAFF); border: 1px solid #CFE0FF; }
.quiz-result h3 { margin-top: 0; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: scroll 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.partner { flex: none; display: grid; place-items: center; width: 168px; height: 76px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px; font-weight: 700; color: var(--muted); }
.partner img { max-height: 48px; width: auto; object-fit: contain; }
.testi { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .testi { grid-template-columns: repeat(3, 1fr); } }
.testi-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); }
.testi-card .ic { color: var(--gold); width: 32px; height: 32px; margin-bottom: 12px; }
.testi-card cite { display: block; font-style: normal; font-weight: 700; font-family: var(--font-h); color: var(--primary-900); }
.testi-card small { color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.cmp { width: 100%; border-collapse: collapse; min-width: 520px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9375rem; }
.cmp thead th { background: var(--primary-900); color: #fff; font-family: var(--font-h); }
.cmp tbody th { background: var(--bg-soft); font-weight: 600; color: var(--primary-900); width: 28%; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { border: 1.5px solid var(--border); background: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .875rem; color: var(--muted); transition: all .15s; }
.chip:hover { border-color: var(--primary-700); color: var(--primary-700); }
.chip.is-active { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
.center-block .chips, .section-head.center + .chips { justify-content: center; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); transition: box-shadow .2s; }
.faq-item[open] { box-shadow: var(--sh-1); border-color: #C9D8F2; }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-family: var(--font-h); font-weight: 700; color: var(--primary-900); cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev { transition: transform .2s; color: var(--primary-700); }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-a { padding: 0 20px 18px; color: var(--muted); }
.faq-a p { margin: 0; }
.faq-item[hidden] { display: none; }
.cta-split { display: grid; grid-template-columns: 1fr; border-radius: 32px; overflow: hidden; box-shadow: var(--sh-3); background: #fff; border: 1px solid var(--border); }
.cta-info { background: linear-gradient(160deg, var(--primary-900), var(--primary-700)); color: #DCE6F7; padding: clamp(28px, 4vw, 48px); position: relative; }
.cta-info h2 { color: #fff; }
.cta-form { padding: clamp(24px, 4vw, 44px); }
.contact-list { display: grid; gap: 16px; margin-top: 28px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.12); color: #F3D58B; }
.contact-list small { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.contact-list a { color: #fff; font-weight: 600; }
.contact-list.dark .ic { background: #EAF1FF; color: var(--primary-700); }
.contact-list.dark { color: var(--text); }
@media (min-width: 992px) { .cta-split { grid-template-columns: .85fr 1.15fr; } }
.contact-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.contact-card .ico { margin-bottom: 10px; }
.contact-card small { color: var(--muted); }
.contact-card strong { font-family: var(--font-h); color: var(--primary-900); overflow-wrap: anywhere; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-2); }
.note-card { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FFF8E6; border: 1px solid #F2DDA3; color: #6B4E0B; }
.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh-1); aspect-ratio: 5/3; background: var(--bg-soft); }
.map-frame.wide { aspect-ratio: auto; height: clamp(260px, 38vw, 420px); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.disclaimer { display: flex; gap: 12px; padding: 16px 20px; border-radius: 16px; background: #F1F6FE; border: 1px solid #D5E3F8; color: #34476B; font-size: .875rem; }
.disclaimer .ic { color: var(--primary-700); margin-top: 2px; }
.disclaimer p { margin: 0; }
.art-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.art-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.art-thumb { display: grid; place-items: center; aspect-ratio: 16/8; background: linear-gradient(135deg, var(--tint-bg), #fff); color: var(--tint-fg); }
.art-thumb .ic { width: 56px; height: 56px; stroke-width: 1.4; }
.art-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.art-body h3 a { color: var(--primary-900); text-decoration: none; }
.art-body p { color: var(--muted); font-size: .9375rem; }
.art-body .link-arrow { margin-top: auto; }
.art-meta { display: flex; gap: 12px; align-items: center; font-size: .8125rem; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.cat { background: var(--tint-bg); color: var(--tint-fg); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.featured { display: grid; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-2); margin-bottom: 40px; }
.featured-vis { display: grid; place-items: center; min-height: 200px; background: linear-gradient(135deg, var(--tint-bg), #fff); color: var(--tint-fg); }
.featured-vis .ic { width: 88px; height: 88px; stroke-width: 1.2; }
.featured-body { padding: clamp(24px, 3vw, 40px); }
.featured-body h2 a { color: var(--primary-900); text-decoration: none; }
@media (min-width: 768px) { .featured { grid-template-columns: 1fr 1.2fr; } }
.art-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.art-tools .chips { margin: 0; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; }
.search input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1.5px solid var(--border); font: inherit; }
.count { color: var(--muted); font-size: .875rem; min-height: 1.5em; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* 8 ── calculator */
.calc-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 20px; scrollbar-width: thin; }
.calc-tab { display: inline-flex; gap: 8px; align-items: center; flex: none; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-family: var(--font-h); font-weight: 700; font-size: .875rem; color: var(--muted); }
.calc-tab .ic { width: 18px; height: 18px; }
.calc-tab.is-active { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
.calc-panel[hidden] { display: none; }
.calc { display: grid; gap: 24px; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-2); }
@media (min-width: 992px) { .calc { grid-template-columns: 1fr 1.05fr; gap: 48px; } }
.calc-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-soft); margin-bottom: 20px; }
.calc-switch button { border: 0; background: none; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-family: var(--font-h); color: var(--muted); }
.calc-switch button.is-active { background: #fff; color: var(--primary-700); box-shadow: var(--sh-1); }
.slider-row { margin-bottom: 22px; }
.slider-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.slider-top label { font-weight: 600; font-size: .9375rem; }
.slider-val { display: inline-flex; align-items: center; background: #EAF1FF; border-radius: 10px; padding: 0 10px; }
.slider-val span { color: var(--primary-700); font-weight: 700; }
.slider-val input { width: 7.5em; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--primary-700); text-align: right; padding: 8px 4px; font-variant-numeric: tabular-nums; }
.slider-val input:focus { outline: 2px solid var(--primary-500); border-radius: 6px; }
.slider-val .unit { margin-left: 2px; font-weight: 600; font-size: .875rem; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--primary-500) var(--pct, 0%), #DCE6F5 var(--pct, 0%)); outline-offset: 6px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--primary-700); box-shadow: 0 2px 8px rgba(10,42,102,.3); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--primary-700); cursor: grab; }
.calc-select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; background: #fff; }
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.res { padding: 16px; border-radius: 16px; background: var(--bg-soft); }
.res small { display: block; color: var(--muted); font-size: .8125rem; }
.res strong { font-family: var(--font-h); font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--primary-900); overflow-wrap: anywhere; }
.res.main { grid-column: 1 / -1; background: linear-gradient(135deg, var(--primary-900), var(--primary-700)); }
.res.main small { color: #C9D8F2; } .res.main strong { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
.res.good strong { color: var(--success); }
.chart-box { position: relative; height: 260px; }
.calc-note { font-size: .8125rem; color: var(--muted); margin-top: 16px; }
.calc-note b { color: var(--primary-900); }
.badge-ill { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-700); background: #FBF3DA; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.calc-cta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 9 ── forms */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; color: var(--primary-900); }
.req { color: #C0392B; } .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.field.has-error input, .field.has-error select { border-color: #C0392B; }
.field .err { color: #C0392B; font-size: .8125rem; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: .875rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary-700); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-status { margin: 14px 0 0; font-weight: 600; min-height: 1.4em; }
.form-status.ok { color: var(--success); } .form-status.bad { color: #C0392B; }
.form-note { font-size: .75rem; color: var(--muted); margin: 8px 0 0; }

/* 10 ── footer / floating */
.site-footer { background: var(--primary-900); color: #BFCDE8; padding: 64px 0 24px; margin-top: 0; }
.site-footer a { color: #DCE6F7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.f-logo img { height: 52px; width: auto; background: #fff; padding: 8px 14px; border-radius: 14px; }
.f-tag { font-family: var(--font-h); color: #F3D58B; font-weight: 700; margin: 16px 0 8px; }
.f-small { font-size: .875rem; }
.f-h { font-size: .8125rem; font-family: var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.f-list { display: grid; gap: 10px; font-size: .9375rem; }
.f-contact { font-style: normal; display: grid; gap: 12px; font-size: .9375rem; }
.f-contact p { display: flex; gap: 10px; margin: 0; }
.f-contact .ic { color: var(--gold); margin-top: 3px; width: 18px; height: 18px; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); }
.compliance { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; line-height: 1.7; color: #9FB2D6; }
.compliance p { margin: 0 0 8px; }
.reg-line { color: #DCE6F7; font-weight: 600; }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; }
.f-bottom p { margin: 0; }
.wa-float { position: fixed; right: 18px; bottom: 90px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 24px rgba(37,211,102,.45); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float .ic { width: 28px; height: 28px; }
.to-top { position: fixed; right: 22px; bottom: 156px; z-index: 89; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--primary-900); box-shadow: var(--sh-2); display: grid; place-items: center; }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(10,42,102,.10); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; font-size: .75rem; font-weight: 600; color: var(--primary-900); text-decoration: none; }
.mobile-bar a.mb-quote { background: var(--primary-700); color: #fff; }
body { padding-bottom: 64px; }
@media (min-width: 768px) { .mobile-bar { display: none; } body { padding-bottom: 0; } .wa-float { bottom: 24px; } .to-top { bottom: 92px; } }
@media (max-width: 767px) { .wa-float { display: none; } .to-top { bottom: 80px; right: 14px; } }

/* 11 ── article + legal */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 300; background: transparent; }
.read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary-500), var(--gold)); }
.article-layout, .legal { display: grid; gap: 40px; grid-template-columns: 1fr; }
.toc { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; align-self: start; }
.toc-h { font-family: var(--font-h); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { display: grid; gap: 8px; font-size: .9375rem; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--primary-700); }
@media (min-width: 992px) { .article-layout, .legal { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } .toc { position: sticky; top: calc(var(--header-h) + 24px); } }
.prose { max-width: 740px; font-size: 1.0625rem; }
.prose h2 { margin-top: 2em; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose .disclaimer { margin: 2em 0; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; margin: 2em 0; border-radius: var(--r); background: linear-gradient(135deg, #EAF1FF, #F6FAFF); border: 1px solid #CFE0FF; }
.inline-cta strong { display: block; font-family: var(--font-h); color: var(--primary-900); }
.inline-cta span { color: var(--muted); font-size: .9375rem; }
.author-box { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: var(--r); margin: 2em 0; font-size: .9375rem; }
.author-box strong { display: block; font-family: var(--font-h); }
.author-box span { color: var(--muted); }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #EAF1FF; color: var(--primary-700); flex: none; }
.share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.share a, .share button { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--primary-900); text-decoration: none; font-weight: 600; font-size: .875rem; }

/* 12 ── motion */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scroll { to { transform: translateX(-50%); } }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { .topbar, .site-header, .mobile-bar, .wa-float, .to-top { display: none !important; } }
.flow-note .ic { display: inline-block; vertical-align: -4px; margin-right: 8px; }

/* backdrop blur only where the nav is not a fixed drawer (a filter would trap the fixed drawer inside the header) */
@media (min-width: 992px) { .site-header { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); } }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; line-height: 1.25; } .hero-cta .btn { width: 100%; } }

/* ==========================================================================
   v2 - cinematic hero / finance-themed section backgrounds / photo system
   ========================================================================== */
:root { --navy-950: #061A40; }

/* 13 - cinematic hero */
.hero2 { position: relative; isolation: isolate; color: #fff; background: linear-gradient(135deg, #061A40 0%, #0A2A66 45%, #123E8C 100%); min-height: clamp(640px, 100vh, 860px); display: flex; align-items: center; padding: 56px 0 150px; overflow: hidden; }
.h2-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.h2-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.h2-photo .photo { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; }
.h2-photo img { filter: saturate(1.05) brightness(.95); mask-image: linear-gradient(to left, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%); }
.h2-photo .photo-tint { background: linear-gradient(180deg, transparent 50%, rgba(10,42,102,.35)); }
.h2-dots { position: absolute; inset: 0 40% 0 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 24px 24px; }
.orb { position: absolute; border-radius: 50%; animation: float 20s ease-in-out infinite; }
.orb.o1 { width: 500px; height: 500px; background: #2563EB; filter: blur(120px); opacity: .35; top: -160px; left: -140px; }
.orb.o2 { width: 300px; height: 300px; background: var(--gold); filter: blur(100px); opacity: .20; bottom: -60px; right: 6%; animation-delay: -9s; }
.h2-curves { position: absolute; inset: 0; width: 100%; height: 100%; }
.h2-curves path { stroke: var(--gold); stroke-opacity: .25; stroke-width: 2; stroke-dasharray: 2400; --len: 2400; animation: draw 3.2s ease-out .3s backwards; }
.h2-curves path:nth-child(2) { animation-delay: .7s; stroke-opacity: .18; }
.h2-curves path:nth-child(3) { animation-delay: 1.1s; stroke-opacity: .12; }
.h2-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; width: 100%; }
.h2-copy { max-width: 640px; }
.glass-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 22px; border-radius: 999px; font-size: .875rem; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glass-pill .ic { width: 16px; height: 16px; color: var(--gold); }
.hero2 h1 { color: #fff; font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); font-weight: 800; line-height: 1.08; }
.gold-word { position: relative; display: inline-block; }
.gw-t { background: linear-gradient(90deg, #F3D58B, #D4A646 60%, #B8862B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2-emblem { position: absolute; left: 50%; top: 50%; width: 220px; height: auto; transform: translate(-50%, -50%); opacity: .16; filter: brightness(0) invert(1); }
.h2-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(212,166,70,.28); transform: translate(-50%, -50%); }
.h2-ring.r1 { width: 340px; height: 340px; }
.h2-ring.r2 { width: 480px; height: 480px; border-color: rgba(255,255,255,.1); }
.gold-word .ul { position: absolute; left: 0; bottom: -8px; width: 100%; height: 12px; overflow: visible; }
.gold-word .ul path { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 400; --len: 400; animation: draw 1.2s ease-out 1s backwards; }
.h2-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.125rem); color: rgba(255,255,255,.82); max-width: 34em; margin-top: 24px; }
.hero2 .hero-cta { margin: 28px 0 14px; }
.btn-slide .ic { transition: transform .2s; }
.btn-slide:hover .ic { transform: translateX(5px); }
.hero2 .btn-gold { box-shadow: 0 10px 30px rgba(212,166,70,.4); }
.btn-glass { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; }
.h2-wa { margin: 0 0 22px; font-size: .9375rem; }
.h2-wa a { color: #F3D58B; font-weight: 600; text-decoration: none; }
.h2-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.9); }
.h2-trust li { display: inline-flex; gap: 8px; align-items: center; }
.h2-trust .ic { color: #5EE0A0; }
.h2-vis { position: relative; min-height: 360px; display: none; }
.gcard { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px rgba(3,14,40,.35); animation: bob 6s ease-in-out infinite; }
.gcard strong { display: block; font-family: var(--font-h); font-size: .9375rem; line-height: 1.25; }
.gcard small { color: rgba(255,255,255,.75); font-size: .75rem; }
.gc-a { top: 4%; right: 2%; flex-direction: column; align-items: stretch; width: 230px; gap: 6px; }
.gc-top { display: flex; justify-content: space-between; align-items: center; }
.ill-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(22,163,74,.25); color: #7CF0AE; }
.gc-spark { width: 100%; height: 56px; }
.gc-spark .area { fill: rgba(94,224,160,.18); }
.gc-spark .line { fill: none; stroke: #5EE0A0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 400; --len: 400; animation: draw 2.4s ease-out .8s backwards; }
.gc-b { top: 40%; left: -4%; animation-duration: 7.5s; animation-delay: -2s; }
.gc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(212,166,70,.25); color: #F3D58B; flex: none; }
.gc-c { bottom: 6%; right: 12%; animation-duration: 8.5s; animation-delay: -4s; }
.avs { display: inline-flex; }
.avs i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #123E8C; margin-left: -8px; background: linear-gradient(135deg, #F3D58B, #2563EB); }
.avs i:first-child { margin-left: 0; }
.avs i:nth-child(2) { background: linear-gradient(135deg, #5EE0A0, #123E8C); }
.avs i:nth-child(3) { background: linear-gradient(135deg, #fff, #D4A646); }
.h2-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; }
.scroll-cue { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.55); border-radius: 14px; display: none; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
.tiles-sec { position: relative; z-index: 3; margin-top: -88px; padding: 0 0 clamp(48px, 6vw, 72px); background: transparent; }
.tiles-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 60px; bottom: 0; z-index: -1; background-color: #fff; }
.tile { border-top: 3px solid var(--tint-fg); }
.tile .ico { transition: transform .2s; }
.tile:hover .ico { transform: scale(1.08); }
@media (min-width: 992px) {
  .h2-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .h2-vis { display: block; }
  .scroll-cue { display: block; }
}
@media (max-width: 991px) {
  .hero2 { display: block; padding: 0 0 130px; min-height: 0; }
  .h2-bg { position: static; }
  .h2-photo { position: relative; width: auto; height: 40vh; min-height: 220px; border-radius: 0 0 32px 32px; overflow: hidden; }
  .h2-photo:empty { display: none; }
  .h2-photo img { mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .h2-dots, .orb, .h2-curves { position: absolute; }
  .h2-grid { padding-top: 32px; }
  .h2-vis { display: block; min-height: 0; margin-top: 8px; }
  .gcard.gc-b, .gcard.gc-c { display: none; }
  .gc-a { position: relative; top: auto; right: auto; width: 100%; max-width: 320px; }
  .hero2 .hero-cta .btn { width: 100%; }
}

/* 14 - inner-page hero (navy + fading photo + service motif) */
.page-hero { background: linear-gradient(135deg, #061A40 0%, #0A2A66 55%, #123E8C 100%); border-bottom: 0; min-height: 360px; display: flex; align-items: center; padding: 36px 0 56px; color: #fff; }
.page-hero::after { width: 420px; height: 420px; right: auto; left: -120px; top: -160px; background: var(--tint-fg); opacity: .35; filter: blur(110px); }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 24px 24px; }
.page-hero .container { width: 100%; position: relative; }
.page-hero h1, .page-hero .lead { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.82); }
.page-hero .eyebrow { color: #F3D58B; }
.page-hero .crumbs ol, .page-hero .crumbs a, .page-hero .read-meta { color: rgba(255,255,255,.72); }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.45); }
.page-hero .btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.page-hero .btn-primary { background: var(--gold); color: var(--primary-900); box-shadow: 0 10px 28px rgba(212,166,70,.35); }
.page-hero .btn-primary:hover { background: #e2b857; color: var(--primary-900); }
.page-hero-vis .photo { border-radius: 24px; box-shadow: 0 24px 60px rgba(3,14,40,.45); }
.page-hero-vis .photo:has(img) { background: transparent; box-shadow: none; }
.page-hero-vis .photo img { mask-image: linear-gradient(to left, #000 65%, transparent 100%); -webkit-mask-image: linear-gradient(to left, #000 65%, transparent 100%); }
.page-hero-vis .ph { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.2); }
.page-hero-vis .ph-blob.b1 { background: var(--tint-fg); opacity: .5; }
.page-hero-vis .ph-dots { background-image: radial-gradient(#fff 1px, transparent 1.5px); opacity: .18; }
.page-hero-vis .ph-icon { background: rgba(255,255,255,.95); }
/* thin service-specific line motif, bottom-right */
.page-hero .container::after { content: ""; position: absolute; right: 16px; bottom: -48px; width: min(420px, 60%); height: 90px; opacity: .22; background-repeat: no-repeat; background-size: contain; background-position: right bottom; pointer-events: none; }
.motif-mf .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M0 80 L60 60 L110 68 L170 38 L230 46 L300 16 L400 4' fill='none' stroke='%23D4A646' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.motif-health .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M0 50 H120 L140 20 L170 80 L195 10 L220 50 H400' fill='none' stroke='%235EE0A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.motif-life .container::after, .motif-ins .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M330 4 C350 14 375 16 392 16 V44 C392 66 362 80 330 88 C298 80 268 66 268 44 V16 C285 16 310 14 330 4Z' fill='none' stroke='%23D4A646' stroke-width='3'/%3E%3C/svg%3E"); }
.motif-general .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cpath d='M20 70 H380 M60 70 L90 40 H200 L230 70' fill='none' stroke='%23FFB86B' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='120' cy='72' r='12' fill='none' stroke='%23FFB86B' stroke-width='3'/%3E%3Ccircle cx='300' cy='72' r='12' fill='none' stroke='%23FFB86B' stroke-width='3'/%3E%3C/svg%3E"); }
.motif-fd .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cg fill='none' stroke='%23D4A646' stroke-width='3'%3E%3Cellipse cx='340' cy='72' rx='34' ry='10'/%3E%3Cellipse cx='340' cy='54' rx='34' ry='10'/%3E%3Cellipse cx='340' cy='36' rx='34' ry='10'/%3E%3Cpath d='M100 80 V36 M140 80 V36 M180 80 V36 M80 30 L140 8 L200 30 Z M70 84 H210'/%3E%3C/g%3E%3C/svg%3E"); }
.motif-nps .container::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cg fill='none' stroke='%23D4A646' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='340' cy='44' r='18'/%3E%3Cpath d='M340 10 V16 M340 72 V78 M306 44 H312 M368 44 H374 M60 84 V20 H140 V84 M80 40 H90 M110 40 H120 M80 60 H90 M110 60 H120'/%3E%3C/g%3E%3C/svg%3E"); }

/* 15 - finance-themed section backgrounds */
.bg-rupee::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='60' y='80' font-size='64' text-anchor='middle' font-family='Georgia,serif' fill='%230A2A66' fill-opacity='.045'%3E%E2%82%B9%3C/text%3E%3C/svg%3E"); }
.bg-bars { background: var(--bg-soft); position: relative; overflow: hidden; }
.bg-bars::after { content: ""; position: absolute; right: -20px; bottom: 0; width: min(520px, 70%); height: 70%; opacity: .05; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cg fill='%230A2A66'%3E%3Crect x='10' y='140' width='36' height='60'/%3E%3Crect x='62' y='110' width='36' height='90'/%3E%3Crect x='114' y='120' width='36' height='80'/%3E%3Crect x='166' y='70' width='36' height='130'/%3E%3Crect x='218' y='30' width='36' height='170'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain; pointer-events: none; }
.bg-bars:has(#tab-protect[aria-selected="true"])::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath fill='%230A2A66' d='M150 8 C190 28 235 30 270 30 V100 C270 150 215 180 150 196 C85 180 30 150 30 100 V30 C65 30 110 28 150 8Z'/%3E%3C/svg%3E"); }
.bg-bars > .container { position: relative; z-index: 1; }
.stats-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='70' viewBox='0 0 600 70'%3E%3Cpath d='M0 50 L50 44 L90 52 L150 30 L200 38 L260 14 L310 28 L370 10 L420 30 L480 18 L540 34 L600 50' fill='none' stroke='%23D4A646' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 600px 70px; animation: ticker 40s linear infinite; pointer-events: none; }
.stats-grid { z-index: 1; }
.bg-coins { position: relative; overflow: hidden; background: linear-gradient(115deg, #fff 0 55%, #F5F8FD 55% 100%); }
.bg-coins::before, .bg-coins::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.bg-coins::before { width: 160px; height: 160px; right: 6%; top: 40px; border: 2px solid rgba(212,166,70,.45); box-shadow: 0 0 0 18px rgba(212,166,70,.08); }
.bg-coins::after { width: 110px; height: 110px; left: 3%; bottom: 40px; border: 2px solid rgba(37,99,235,.3); background: rgba(37,99,235,.05); }
.bg-coins > .container { position: relative; z-index: 1; }
.bg-calc { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 15% 20%, rgba(37,99,235,.55), transparent 60%), linear-gradient(135deg, #061A40, #1B2A7A 60%, #2E2A8C); }
.bg-calc .section-head h2 { color: #fff; }
.bg-calc .section-sub { color: rgba(255,255,255,.8); }
.bg-calc .eyebrow { color: #F3D58B; }
.bg-calc .calc { box-shadow: 0 30px 80px rgba(3,10,40,.5); }
.bg-hex { background-color: var(--bg-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66 L0 50 L0 16 L28 0 L56 16 L56 50 L28 66 L28 100 M0 50 L0 84 L28 100 L56 84 L56 50' fill='none' stroke='%23123E8C' stroke-opacity='.08'/%3E%3C/svg%3E"); }
.bg-journey { background: #fff; }
.bg-journey .step-n { box-shadow: 0 0 0 6px #FBF3DA; background: linear-gradient(135deg, var(--primary-700), var(--primary-900)); }
.bg-split { position: relative; overflow: hidden; background: #fff; }
.bg-split::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; background: var(--bg-img, linear-gradient(135deg, #0A2A66, #123E8C)) center/cover; display: none; }
.bg-split::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; background: linear-gradient(90deg, rgba(10,42,102,.45), transparent); display: none; }
.bg-split > .container { position: relative; z-index: 1; }
@media (min-width: 992px) {
  .bg-split::before, .bg-split::after { display: block; }
  .bg-split .quiz { margin-left: auto; margin-right: 0; max-width: 640px; }
  .bg-split .section-head { margin-left: auto; margin-right: 0; text-align: left; max-width: 640px; }
  .bg-split .section-head .eyebrow::after { left: 0; transform: none; }
}
.partner img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.partner:hover img { filter: none; opacity: 1; }
.bg-testi { position: relative; color: #fff; background: linear-gradient(rgba(6,26,64,.86), rgba(6,26,64,.9)), var(--bg-img, linear-gradient(135deg, #0A2A66, #123E8C)) center/cover; }
@media (min-width: 1024px) and (hover: hover) { .bg-testi { background-attachment: fixed; } }
.bg-testi .section-head h2 { color: #fff; }
.bg-testi .eyebrow { color: #F3D58B; }
.bg-testi .testi-card { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.bg-testi .testi-card cite { color: #fff; }
.bg-testi .testi-card small { color: rgba(255,255,255,.75); }
.bg-paper { background-color: var(--bg-soft); background-image: linear-gradient(rgba(10,42,102,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,42,102,.04) 1px, transparent 1px); background-size: 28px 28px; }
.bg-faq { position: relative; overflow: hidden; }
.bg-faq::after { content: "\20B9"; position: absolute; right: -2%; top: -6%; font: 800 clamp(220px, 32vw, 420px)/1 var(--font-h); color: transparent; -webkit-text-stroke: 2px rgba(18,62,140,.07); pointer-events: none; }
.bg-faq > .container { position: relative; z-index: 1; }
.bg-cta { position: relative; background: linear-gradient(135deg, rgba(6,26,64,.92), rgba(18,62,140,.82)), var(--bg-img, linear-gradient(135deg, #061A40, #123E8C)) center/cover; }
.bg-cta .cta-split { border: 0; border-top: 4px solid var(--gold); }
.site-footer { background-color: var(--navy-950); background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size: 22px 22px; border-top: 3px solid var(--gold); }

@keyframes draw { from { stroke-dashoffset: var(--len, 1); } to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 24px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes ticker { to { background-position: -600px 0; } }
@media (prefers-reduced-motion: reduce) {
  .h2-curves path, .gold-word .ul path, .gc-spark .line { stroke-dashoffset: 0 !important; }
}

/* ===== v3: stock photography ===== */
.svc-card.has-thumb { padding-top: 0; overflow: hidden; }
.svc-thumb { display: block; margin: 0 -24px 0; aspect-ratio: 16/9; overflow: hidden; position: relative; }
.svc-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,42,102,.45)); }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-card:hover .svc-thumb img { transform: scale(1.06); }
.svc-card.has-thumb .ico { margin-top: -26px; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(10,42,102,.18); border: 3px solid #fff; background: #fff; }
.art-thumb.has-img { position: relative; overflow: hidden; aspect-ratio: 16/9; padding: 0; }
.art-thumb.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.art-thumb.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,42,102,.5)); }
.art-card:hover .art-thumb.has-img img { transform: scale(1.06); }
.art-thumb.has-img .art-ic { position: absolute; left: 16px; bottom: 14px; z-index: 1; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.95); color: var(--tint-fg); }
.art-thumb.has-img .art-ic .ic { width: 22px; height: 22px; stroke-width: 2; }
.photo img { transition: transform .8s ease; }
.page-hero-vis .photo:has(img) img { border-radius: 24px; }
.h2-photo img { object-position: 65% 30%; }
.h2-photo .photo-tint { background: linear-gradient(90deg, rgba(10,42,102,.55) 0%, rgba(10,42,102,.12) 40%, transparent 65%), linear-gradient(180deg, rgba(6,26,64,.15) 0%, transparent 30%, transparent 60%, rgba(6,26,64,.55) 100%); }
.hero2 .gcard { background: rgba(8,30,74,.62); border-color: rgba(255,255,255,.28); box-shadow: 0 18px 40px rgba(3,14,40,.35); }
.hero2 .gcard, .hero2 .gcard strong { color: #fff; }
.hero2 .gcard small { color: rgba(255,255,255,.78); }
@media (max-width: 991px) { .h2-photo .photo-tint { background: linear-gradient(180deg, transparent 55%, rgba(6,26,64,.45) 100%); } .h2-photo img { object-position: 60% 20%; } }

/* ===== v3: "Which cover do I need?" — contained photo card ===== */
.bg-quiz { position: relative; overflow: hidden; background: linear-gradient(180deg, #F5F8FD 0%, #fff 100%); }
.bg-quiz::before { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.12), transparent 70%); pointer-events: none; }
.quiz-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.quiz-vis { position: relative; padding: 0 0 0 0; }
.quiz-vis .qv-photo { aspect-ratio: 4/5; border-radius: 28px; box-shadow: 0 30px 60px rgba(10,42,102,.18); }
.quiz-vis .qv-photo img { object-position: 50% 40%; }
.quiz-vis .qv-photo .photo-tint { background: linear-gradient(180deg, transparent 55%, rgba(10,42,102,.45)); }
.qv-ring { position: absolute; z-index: -1; right: -22px; top: -22px; width: 140px; height: 140px; border-radius: 50%; border: 2px dashed rgba(212,166,70,.6); }
.qv-badge { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px rgba(10,42,102,.16); max-width: 260px; animation: bob 6s ease-in-out infinite; }
.qv-badge .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; flex: none; }
.qv-badge strong { display: block; font-family: var(--font-h); font-size: .9rem; color: var(--primary-900, #0A2A66); line-height: 1.25; }
.qv-badge small { color: var(--muted); font-size: .75rem; }
.qv-top { top: 28px; right: -28px; }
.qv-top .ic { background: #EAF1FF; color: #2563EB; }
.qv-bottom { bottom: 32px; left: -28px; animation-delay: -3s; }
.qv-bottom .ic { background: #E7F7EE; color: #16A34A; }
.quiz-side .section-head { text-align: left; margin-left: 0; max-width: none; }
.quiz-side .quiz { max-width: none; margin: 0; }
@media (max-width: 991px) {
  .quiz-grid { grid-template-columns: 1fr; }
  .quiz-vis { max-width: 440px; margin: 0 auto; width: 100%; }
  .quiz-vis .qv-photo { aspect-ratio: 4/3; }
  .qv-top { right: 8px; } .qv-bottom { left: 8px; }
  .qv-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qv-badge { animation: none; } }
@media (max-width: 991px) { .qv-top { display: none; } .qv-bottom { left: 12px; bottom: 12px; } }
.qv-badge small { line-height: 1.35; display: block; }

/* ---- compliance / trust additions ---- */
.trust-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.3; border: 1px solid var(--gold, #D4A646); color: #F3D58B; background: rgba(255,255,255,.06); white-space: nowrap; }
.trust-badge .ic { width: 15px; height: 15px; flex: none; }
.trust-badge.on-light { border-color: var(--primary-700, #0A2A66); color: var(--primary-900, #061A40); background: #fff; }
.topbar .trust-badge { padding: 2px 10px; font-size: .75rem; }
.hero-badge { margin: 0 0 8px; }
.page-hero .hero-badge .trust-badge { color: #F3D58B; }
.mt-badge { margin-top: 20px; }
.mf-disc, .mf-disc strong { color: #fff; font-weight: 700; }
.f-bottom .f-gstin { margin-left: 12px; opacity: .85; }
.btn-wa-solid { background: #16A34A; color: #fff; border-color: #16A34A; }
.btn-wa-solid:hover { background: #128A3E; color: #fff; }
.btn-wa-solid .ic { color: #fff; margin-top: 0; }
.f-contact .f-wa-row { margin: -2px 0 2px 28px; }
.calc-disc { margin-top: 20px; }
.gc-c { max-width: 280px; }
.gc-c .gc-ic { background: rgba(212,166,70,.25); }
@media (max-width: 480px) { .trust-badge { white-space: normal; } }