/* ═══════════════════════════════════════════════════════════
   SYNGREEN LIFESCIENCES · Design System v7
   Primary Blue  #0050A4 · Primary Green #10A651 · Teal #10B7AA
   Dark Text     #2B2B2B · Off-White BG  #F8FAFC · Footer #002E5B
   Fonts: Poppins (headings & UI) · Lato (body)
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root {
  /* ── Brand Colours ───────────────────── */
  --blue:    #0050A4;
  --blue-l:  #1a6ec8;
  --blue-d:  #003D80;   /* hover state per spec */
  --blue-dk: #002E5B;   /* footer & topbar per spec */
  --green:   #10A651;
  --green-l: #0d9244;
  --green-d: #0a7a39;
  --teal:    #10B7AA;
  --teal-l:  #0da399;
  --teal-d:  #0a8d83;

  /* ── Backgrounds ─────────────────────── */
  --bg:      #F8FAFC;   /* Off White per spec */
  --bg2:     #edf1f7;
  --bg3:     #dce5f2;
  --white:   #ffffff;

  /* ── Borders ─────────────────────────── */
  --ln:      rgba(0,40,100,.09);
  --ln2:     rgba(0,40,100,.17);
  --ln3:     rgba(0,80,164,.30);

  /* ── Text ────────────────────────────── */
  --t1:      #2B2B2B;   /* Charcoal per spec */
  --t2:      #262b31;
  --t3:      #9aaabb;

  /* ── Shadows ─────────────────────────── */
  --sh1:     0 1px 4px rgba(0,30,80,.06),0 4px 12px rgba(0,30,80,.05);
  --sh2:     0 4px 16px rgba(0,30,80,.09),0 12px 32px rgba(0,30,80,.07);
  --sh3:     0 8px 28px rgba(0,30,80,.11),0 24px 56px rgba(0,30,80,.08);

  /* ── Typography ──────────────────────── */
  --fh: 'Poppins', sans-serif;   /* headings — SemiBold 600 */
  --fb: 'Poppins', sans-serif;      /* body — Regular 400 */
  --fm: 'Poppins', sans-serif;   /* UI / labels — Medium 500 */

  /* ── Radius ──────────────────────────── */
  --r1: 6px; --r2: 10px; --r3: 16px; --r4: 24px;
}

/* ── RESET ──────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TOPBAR ─────────────────────────────── */
.topbar {
  position: relative;
  z-index: 200;
  background: var(--blue-dk);
  padding: .46rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar-info {
  display: flex;
  gap: 1.75rem;
  font-size: .8rem;
  color: rgba(255,255,255,.80);
  font-family: var(--fm);
}
.topbar-info a {
  color: rgba(255,255,255,.80);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .38rem;
  transition: color .18s;
}
.topbar-info a:hover { color: #fff; }
.topbar-info svg { width: 11px; height: 11px; }

/* ── NAVBAR ─────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 199;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--ln);
  transition: box-shadow .3s;
}
.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,30,80,.10); }
.nav-logo { display: flex; align-items: center; gap: .68rem; text-decoration: none; }
.nav-logo img { height: 70px; width: auto; border-radius: 6px; object-fit: contain; }
.nav-logo-text .n1 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .92rem;
  color: var(--t1);
  letter-spacing: -.01em;
}
.nav-logo-text .n2 {
  font-size: .65rem;
  color: var(--t2);
  font-family: var(--fm);
  font-weight: 400;
}
.nav-links { display: flex; gap: .05rem; align-items: center; list-style: none; }
.nav-links a {
  padding: .4rem .82rem;
  border-radius: var(--r1);
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--fm);
  text-decoration: none;
  color: var(--t2);
  transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--t1); background: var(--bg); }
.nav-links a.active {
  color: var(--green-d);
  background: rgba(16,166,81,.09);
  font-weight: 600;
}

/* ── BUTTONS ─────────────────────────────── */
/* Spec — Primary: #0050A4 bg, white text, 6px radius, 14px 28px padding, hover #003D80 */
/* Spec — Secondary: 2px solid #10A651 border, green text, transparent bg; hover fill green */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: .95rem;
  font-family: var(--fm);
  cursor: pointer;
  border: none;
  transition: background .25s, transform .25s, box-shadow .25s, color .25s;
  padding: 14px 28px;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Primary Blue */
.btn-b {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,80,164,.24);
}
.btn-b:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,80,164,.34);
}

/* Primary Green */
.btn-g {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16,166,81,.28);
}
.btn-g:hover {
  background: var(--green-l);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,166,81,.36);
}

/* Secondary — green outline, fills on hover */
.btn-s {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-s:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

/* Teal */
.btn-t {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16,183,170,.24);
}
.btn-t:hover {
  background: var(--teal-l);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,183,170,.34);
}

/* Ghost / Outline */
.btn-o {
  background: var(--white);
  color: var(--t1);
  border: 1.5px solid var(--ln2);
  box-shadow: var(--sh1);
  padding: 13px 27px;
}
.btn-o:hover {
  background: var(--bg2);
  border-color: var(--ln3);
  transform: translateY(-1px);
  box-shadow: var(--sh2);
}

/* Hero gradient CTA (Blue→Green per spec) */
.btn-hero {
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,80,164,.30);
}
.btn-hero:hover {
  background: linear-gradient(90deg, var(--blue-d) 0%, var(--green-l) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,80,164,.38);
}

.btn-sm   { padding: 9px 18px; font-size: 1rem; }
.btn-xs   { padding: 6px 12px; font-size: .74rem; }
.btn-pill { border-radius: 999px; }
.btn-w    { width: 100%; justify-content: center; }

/* ── LAYOUT ─────────────────────────────── */
/* Spec: max-width 1200px, section padding 80px top & bottom */
.wrap     { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }
.section  { padding: 80px 0; position: relative; }
.band     { padding: 80px 2.5rem; position: relative; }
.band-in  { max-width: 1200px; margin: 0 auto; }
.bg2 { background: var(--bg2); }
.bg3 { background: var(--bg3); }
.bw  { background: var(--white); }
.bt  { border-top: 1px solid var(--ln); }
.bb  { border-bottom: 1px solid var(--ln); }

/* ── TYPOGRAPHY ─────────────────────────── */
/* Font Hierarchy per spec:
   H1: 42–48px SemiBold (600) — Poppins
   H2: 32px SemiBold (600)    — Poppins
   H3: 24px Medium (500)      — Poppins
   Body: 16–18px Regular      — Lato
   Small: 14px Regular        — Lato
   Line-height: 1.6                        */

.eye {
  font-family: var(--fm);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-d);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .72rem;
}
.eye::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--teal);
  flex-shrink: 0;
  border-radius: 2px;
}
.eye.g { color: var(--green-d); }
.eye.g::before { background: var(--green); }
.eye.b { color: var(--blue); }
.eye.b::before { background: var(--blue); }
.eye.c { justify-content: center; }
.eye.c::before, .eye.c::after {
  content: '';
  flex: 1;
  max-width: 28px;
  height: 1.5px;
  background: var(--teal);
  border-radius: 2px;
}
.eye.c.g::before, .eye.c.g::after { background: var(--green); }
.eye.c.b::before, .eye.c.b::after { background: var(--blue); }

/* H1 — 42–48px SemiBold */
h2.h {
  font-family: var(--fh);
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--t1);
  margin-bottom: .88rem;
}
h2.h em  { font-style: italic; color: var(--teal-d); }
h2.h .g  { color: var(--green-d); }
h2.h .b  { color: var(--blue); }

/* H3 — 24px Medium */
h3.h {
  font-family: var(--fh);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--t1);
  margin-bottom: .72rem;
}
h3.h em { font-style: italic; color: var(--green-d); }

/* Body — 16px Regular, 1.6 line height */
.p    { font-size: 1rem;     color: var(--t2); line-height: 1.7; }
.p-lg { font-size: 1.125rem; color: var(--t2); line-height: 1.7; }
.p-sm { font-size: .95rem;  color: var(--t2); line-height: 1.65; }

/* ── CARDS ──────────────────────────────── */
.card {
  border: 1.5px solid var(--ln);
  border-radius: var(--r3);
  background: var(--white);
  padding: 1.8rem;
  box-shadow: var(--sh1);
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-5px); border-color: var(--ln2); box-shadow: var(--sh3); }
.card.hg:hover { border-color: rgba(16,166,81,.32);  box-shadow: 0 8px 28px rgba(16,166,81,.10),0 20px 48px rgba(0,30,80,.08); }
.card.hb:hover { border-color: rgba(0,80,164,.24);   box-shadow: 0 8px 28px rgba(0,80,164,.09),0 20px 48px rgba(0,30,80,.08); }
.card.ht:hover { border-color: rgba(16,183,170,.28); box-shadow: 0 8px 28px rgba(16,183,170,.09),0 20px 48px rgba(0,30,80,.08); }

/* ── ICON BADGES ─────────────────────────── */
.ib     { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.ib svg { width: 21px; height: 21px; }
.ibg    { background: rgba(16,166,81,.09);  border: 1.5px solid rgba(16,166,81,.22);  color: var(--green-d); }
.ibb    { background: rgba(0,80,164,.07);   border: 1.5px solid rgba(0,80,164,.18);   color: var(--blue); }
.ibt    { background: rgba(16,183,170,.09); border: 1.5px solid rgba(16,183,170,.22); color: var(--teal-d); }

/* ── CHIPS ──────────────────────────────── */
.chip {
  display: inline-block;
  font-size: .72rem;
  font-family: var(--fm);
  font-weight: 500;
  padding: .24rem .56rem;
  border-radius: 5px;
  border: 1px solid var(--ln2);
  background: var(--bg2);
  color: var(--t2);
}
.chip.g { border-color: rgba(16,166,81,.28);  background: rgba(16,166,81,.07);  color: var(--green-d); }
.chip.b { border-color: rgba(0,80,164,.20);   background: rgba(0,80,164,.06);   color: var(--blue-d); }
.chip.t { border-color: rgba(16,183,170,.24); background: rgba(16,183,170,.07); color: var(--teal-d); }
.chips  { display: flex; flex-wrap: wrap; gap: .36rem; }

/* ── STATUS TAG ─────────────────────────── */
.htag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fm);
  font-size: .7rem;
  font-weight: 600;
  color: var(--green-d);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .34rem .7rem;
  border: 1.5px solid rgba(16,166,81,.28);
  border-radius: 6px;
  background: rgba(16,166,81,.06);
  margin-bottom: 1.3rem;
}
.htag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(16,166,81,.5);
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── TICKER ─────────────────────────────── */
.ticker {
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
  background: linear-gradient(90deg,rgba(16,166,81,.04),rgba(0,80,164,.03),rgba(16,183,170,.03));
  padding: .58rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.t-track { display: inline-flex; animation: tick 34s linear infinite; }
.t-track:hover { animation-play-state: paused; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.6rem;
  font-family: var(--fm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--t2);
}
.t-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--green); }

/* ── ARROW LINKS ─────────────────────────── */
.al {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .84rem;
  font-weight: 600;
  font-family: var(--fm);
  color: var(--green-d);
  text-decoration: none;
  transition: gap .2s;
}
.al:hover { gap: .62rem; }
.al svg { width: 13px; height: 13px; }
.al.t { color: var(--teal-d); }
.al.b { color: var(--blue); }

/* ── REVEAL ANIMATIONS ───────────────────── */
/* Spec: fade-in / slide-up, 0.3–0.5s, no bouncing */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .45s ease, transform .45s ease; }
.rv.in { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;}
.d4{transition-delay:.4s;} .d5{transition-delay:.5s;} .d6{transition-delay:.6s;}

/* ── FORMS ──────────────────────────────── */
.ff { margin-bottom: 1.05rem; }
.ff label {
  display: block;
  font-size: .75rem;
  font-family: var(--fm);
  font-weight: 500;
  color: var(--t2);
  margin-bottom: .38rem;
  letter-spacing: .04em;
}
.ff input, .ff textarea, .ff select {
  width: 100%;
  padding: .7rem .95rem;
  background: var(--white);
  border: 1.5px solid var(--ln2);
  border-radius: var(--r1);
  color: var(--t1);
  font-family: var(--fb);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  box-shadow: 0 1px 2px rgba(0,30,80,.04);
}
.ff input:focus, .ff textarea:focus, .ff select:focus {
  border-color: rgba(16,166,81,.45);
  box-shadow: 0 0 0 3px rgba(16,166,81,.09);
}
.ff input::placeholder, .ff textarea::placeholder { color: var(--t3); }
.ff textarea { resize: vertical; min-height: 115px; }
.ff select option { background: #fff; color: var(--t1); }
.frow    { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.fstatus { margin-top: .85rem; font-size: .8rem; color: var(--green-d); font-family: var(--fm); font-weight: 600; }

/* ── SECTION DIVIDER ─────────────────────── */
.sec-div { height: 1px; background: linear-gradient(90deg,transparent,var(--ln2),transparent); margin: 0; }

/* ── ACCENT BANDS ────────────────────────── */
.accent-band {
  background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 50%, var(--teal) 100%);
  position: relative;
  overflow: hidden;
}
.accent-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.blue-band {
  background: linear-gradient(135deg, var(--blue-dk) 0%, var(--blue) 60%, var(--blue-l) 100%);
  position: relative;
  overflow: hidden;
}
.blue-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px at 80% 50%,rgba(16,183,170,.14),transparent 55%),
              radial-gradient(500px at 8% 80%,rgba(255,255,255,.05),transparent 50%);
}

/* Hero gradient band — Blue→Green per spec */
.hero-band {
  background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
  position: relative;
  overflow: hidden;
}

.cta-band {
  background: linear-gradient(150deg, var(--blue-dk) 0%, var(--blue) 55%, var(--blue-l) 100%);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(700px at 90% 10%,rgba(16,183,170,.15),transparent 55%),
              radial-gradient(500px at 6% 90%,rgba(16,166,81,.12),transparent 55%);
}
.cta-band .eye               { color: rgba(255,255,255,.55); }
.cta-band .eye::before,
.cta-band .eye::after        { background: rgba(255,255,255,.25); }
.cta-band h2.h               { color: #fff; }
.cta-band h2.h em            { color: rgba(110,230,170,.9); }
.cta-band .p                 { color: rgba(255,255,255,.72); }
.cta-band .btn-o             { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); padding: 13px 27px; }
.cta-band .btn-o:hover       { background: rgba(255,255,255,.20); transform: translateY(-1px); }

/* ── FOOTER ─────────────────────────────── */
/* Spec: Dark Blue #002E5B bg · White text · Green hover on links */
.footer {
  background: var(--blue-dk);
  border-top: 1px solid rgba(0,0,0,.20);
  padding: 5rem 2.5rem 2.25rem;
}
.ft-in { max-width: 1200px; margin: 0 auto; }
.ft-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1.5fr;
  gap: 2.75rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ft-brand-name {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .5rem;
}
.ft-desc {
  font-size: .9rem;
  font-family: var(--fb);
  color: rgba(255,255,255,.70);
  line-height: 1.68;
  margin-top: .88rem;
  max-width: 33ch;
}
.ft-col h5 {
  font-family: var(--fm);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: .95rem;
}
.ft-col a {
  display: block;
  font-size: .9rem;
  font-family: var(--fb);
  color: rgba(255,255,255,.70);
  text-decoration: none;
  margin-bottom: .52rem;
  transition: color .2s;
}
.ft-col a:hover { color: var(--green); } /* spec: green hover */
.ft-col p {
  font-size: .82rem;
  font-family: var(--fb);
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin-bottom: .45rem;
}
.ft-bar {
  padding-top: 1.45rem;
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-family: var(--fm);
  color: rgba(255,255,255,.50);
  flex-wrap: wrap;
  gap: .5rem;
}

/* ── PAGE HERO ───────────────────────────── */
.phero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 2.5rem 4.5rem;
  text-align: center;
  background: linear-gradient(160deg, var(--white) 0%, var(--bg2) 100%);
  border-bottom: 1px solid var(--ln);
}
/* Subtle molecular pattern — spec 3–5% opacity */
.phero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230050A4' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='4'/%3E%3Ccircle cx='60' cy='20' r='4'/%3E%3Ccircle cx='40' cy='55' r='4'/%3E%3Cline x1='20' y1='20' x2='60' y2='20'/%3E%3Cline x1='60' y1='20' x2='40' y2='55'/%3E%3Cline x1='40' y1='55' x2='20' y2='20'/%3E%3C/g%3E%3C/svg%3E");
}
.phero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px at 50% -8%,rgba(16,166,81,.07) 0%,transparent 56%),
              radial-gradient(600px at 4% 90%,rgba(0,80,164,.06) 0%,transparent 52%),
              radial-gradient(500px at 96% 60%,rgba(16,183,170,.05) 0%,transparent 52%);
}
.phero-in {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.phero h1 {
  font-family: var(--fh);
  font-size: clamp(2.625rem, 4.8vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--t1);
  margin-bottom: 1.15rem;
}
.phero h1 em { font-style: italic; color: var(--green-d); }
.phero .p { max-width: 60ch; margin: 0 auto 2rem; }

/* ── TRUST BADGES ────────────────────────── */
/* Spec: GMP, WHO-GMP, ISO, export markets visible — builds immediate credibility */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  padding: 1rem 2.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--ln);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .72rem;
  font-family: var(--fm);
  font-weight: 600;
  color: var(--blue);
  padding: .28rem .7rem;
  border: 1.5px solid rgba(0,80,164,.20);
  border-radius: 5px;
  background: rgba(0,80,164,.04);
  letter-spacing: .02em;
}
.trust-badge svg { width: 13px; height: 13px; }
.trust-badge.g {
  color: var(--green-d);
  border-color: rgba(16,166,81,.25);
  background: rgba(16,166,81,.05);
}

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:1024px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media(max-width:768px) {
  .navbar  { padding: .68rem 1.25rem; }
  .nav-links { display: none; }
  .topbar .topbar-info a:not(:first-child) { display: none; }
  .wrap    { padding: 0 1.25rem; }
  .section { padding: 56px 1.25rem; }
  .band    { padding: 56px 1.25rem; }
  .phero   { padding: 4rem 1.25rem 3rem; }
  .phero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  h2.h     { font-size: 1.5rem; }
  .ft-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .ft-bar  { flex-direction: column; text-align: center; }
  .frow    { grid-template-columns: 1fr; }
  .btn     { padding: 12px 22px; }
  .trust-bar { padding: .75rem 1.25rem; gap: .6rem 1rem; }
}