/* ══════════════════════════════════════════════════════════════
   ZATINO — Option B: Dark Hero + Light Content Hybrid
   NOTE: Class names match what main.js actually renders
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg-hero:       #0A0A0A;
  --bg-page:       #F8F6F3;
  --bg-soft:       #F0EBE3;
  --bg-surface:    #FFFFFF;

  --gold:          #A08020;
  --gold-light:    #C9A228;
  --gold-pale:     rgba(160, 128, 32, 0.10);
  --gold-line:     rgba(160, 128, 32, 0.20);
  --gold-glow:     rgba(160, 128, 32, 0.15);

  --text-primary:  #2A2520;
  --text-secondary:#6C6257;
  --text-hero:     rgba(255,255,255,0.75);
  --text-hero-muted: rgba(255,255,255,0.40);
  --ink-dark:      #1A1714;

  --border:        rgba(42, 37, 32, 0.10);
  --border-gold:   rgba(160, 128, 32, 0.20);
  --shadow-sm:     0 1px 4px rgba(42,37,32,0.06);
  --shadow-md:     0 4px 16px rgba(42,37,32,0.08);
  --shadow-lg:     0 8px 32px rgba(42,37,32,0.10);

  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 999px;
  --transition: 0.25s ease;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);font-size:1rem;line-height:1.7;
  color:var(--text-primary);background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-light)}
ul{list-style:none}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--gold-line);border-radius:3px}
::selection{background:var(--gold-pale);color:var(--text-primary)}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 var(--space-6)}
.container--narrow{max-width:760px}

/* ══════════════════════════════════════════════════════════════
   SITE HEADER / NAV — matches main.js rendered HTML structure
   ══════════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,0.97);
  border-bottom:1px solid var(--gold-line);
  backdrop-filter:blur(12px);
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;padding:0 var(--space-6);height:64px;
}

.site-logo{
  display:flex;align-items:center;gap:0.75rem;
  color:#fff;font-family:var(--font-serif);
  font-size:1.125rem;font-weight:600;letter-spacing:-0.01em;
  text-decoration:none;
}
.site-logo:hover{color:var(--gold-light)}
.logo-img{height:36px;width:auto}

.main-nav{
  display:flex;align-items:center;
}

.nav-list{
  display:flex;align-items:center;gap:0.25rem;
  list-style:none;margin:0;padding:0;
}

.nav-item{
  position:relative;
}

.nav-item > a{
  display:flex;align-items:center;gap:0.35rem;
  padding:0.5rem 0.75rem;border-radius:var(--radius-md);
  color:rgba(255,255,255,0.60);font-size:0.875rem;font-weight:500;
  transition:color var(--transition),background var(--transition);
  text-decoration:none;
}
.nav-item > a:hover{color:#fff;background:rgba(255,255,255,0.08)}
.nav-item.active > a{color:var(--gold-light)}

.nav-icon{
  display:flex;align-items:center;opacity:0.7;
}
.nav-icon svg{width:14px;height:14px}

/* Lang switcher */
.lang-switcher{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.5rem 0.75rem;
  margin-left:0.5rem;
  border-left:1px solid rgba(255,255,255,0.12);
}
.lang-label{
  display:flex;align-items:center;
  color:rgba(255,255,255,0.35);
}
.lang-btn{
  padding:0.25rem 0.5rem;border-radius:0.25rem;
  color:rgba(255,255,255,0.45);font-size:0.75rem;font-weight:600;
  letter-spacing:0.05em;cursor:pointer;
  background:none;border:none;transition:color var(--transition);
  text-decoration:none;
}
.lang-btn:hover{color:var(--gold-light)}

/* Mobile nav toggle */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:0.5rem;color:#fff;
}
.nav-toggle svg{width:24px;height:24px}

/* ── HERO (DARK) ─────────────────────────────────────────── */
.hero{
  background:var(--bg-hero);
  min-height:520px;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:7.5rem 0 5rem;
  z-index:1;
}
.hero::before{
  content:'';position:absolute;inset:0;
  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='%23A08020' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3Cg fill='%23A08020' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0.4;
}
.hero__inner{
  position:relative;z-index:1;
  max-width:820px;margin:0 auto;padding:0 var(--space-6);
  text-align:center;
}
.hero__label{
  display:inline-block;
  font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-pale);
  border:1px solid var(--gold-line);
  padding:0.35rem 1rem;border-radius:var(--radius-full);
  margin-bottom:1.5rem;
}
.hero h1{
  font-family:var(--font-serif);
  font-size:clamp(2rem,5vw,3.75rem);
  font-weight:700;line-height:1.12;letter-spacing:-0.02em;
  color:#fff;margin-bottom:1.25rem;
}
.hero__sub{
  font-size:1.125rem;color:var(--text-hero);
  max-width:600px;margin:0 auto 2rem;line-height:1.8;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-group{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.75rem 1.5rem;border-radius:var(--radius-full);
  font-family:var(--font-sans);font-size:0.875rem;font-weight:600;
  letter-spacing:0.02em;cursor:pointer;
  transition:all var(--transition);
  border:1.5px solid transparent;white-space:nowrap;text-decoration:none;
}
.btn--primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn--primary:hover{
  background:var(--gold-light);border-color:var(--gold-light);
  color:#fff;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(160,128,32,0.35);
}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.25)}
.btn--outline:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5);color:#fff}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-pale)}
.btn--wide{width:100%}
.btn--sm{padding:0.5rem 1rem;font-size:0.75rem}

/* ── SECTIONS ─────────────────────────────────────────────── */
.section{padding:4rem 0}
.section--white{background:#fff}
.section--soft{background:var(--bg-soft)}
.section--soft-alt{background:#F5F1EC}

.section__label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.5rem;
}
.section__title{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:700;line-height:1.2;letter-spacing:-0.02em;
  color:var(--text-primary);margin-bottom:0.75rem;
}
.section__sub{
  font-size:1.0625rem;color:var(--text-secondary);
  max-width:580px;margin-bottom:2.5rem;line-height:1.75;
}
.section__header{text-align:center;margin-bottom:3rem}
.gold-divider{width:40px;height:2px;background:var(--gold);margin:0 auto 1.25rem}

/* ── CARDS ─────────────────────────────────────────────────── */
.card-grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(3,1fr);
}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:#fff;border-radius:var(--radius-lg);
  padding:2rem 1.5rem;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
  display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-gold);transform:translateY(-2px)}
.card__icon{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-pale);border-radius:var(--radius-md);
  color:var(--gold);margin-bottom:1.25rem;flex-shrink:0;
}
.card h3{
  font-family:var(--font-serif);font-size:1.125rem;font-weight:600;
  color:var(--text-primary);margin-bottom:0.75rem;line-height:1.3;
}
.card p{font-size:0.875rem;color:var(--text-secondary);line-height:1.75;flex:1}
.card__link{
  display:inline-block;margin-top:1.25rem;font-size:0.875rem;font-weight:600;
  color:var(--gold);transition:color var(--transition);
}
.card__link:hover{color:var(--gold-light)}
.card__tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
.card__tag{
  padding:0.2rem 0.75rem;background:var(--bg-soft);
  border:1px solid var(--border);border-radius:var(--radius-full);
  font-size:0.7rem;font-weight:500;color:var(--text-secondary);
}

/* ── CCP BANNER ────────────────────────────────────────────── */
.ccp-banner{
  background:linear-gradient(135deg,#0A0A0A 0%,#1a1500 100%);
  border:1px solid var(--gold-line);
  border-radius:var(--radius-lg);
  padding:3rem 2.5rem;
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  margin-bottom:3rem;
}
.ccp-banner__label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.5rem;
}
.ccp-banner h2{
  font-family:var(--font-serif);font-size:clamp(1.25rem,2.5vw,1.75rem);
  font-weight:700;color:#fff;margin-bottom:0.5rem;
}
.ccp-banner p{font-size:0.9rem;color:var(--text-hero);line-height:1.7}
.ccp-banner__meta{
  display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;min-width:200px;
}
.ccp-banner__date{font-size:0.875rem;color:var(--gold-light);font-weight:600}
.ccp-banner__cta .btn{padding:0.65rem 1.5rem;font-size:0.8125rem}

/* ── STATS BAR ───────────────────────────────────────────── */
.stats-bar{
  background:linear-gradient(90deg,#0A0A0A,#151515);
  padding:2rem 0;border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.stats-bar__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;
}
.stat__number{
  font-family:var(--font-serif);font-size:2.5rem;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:0.5rem;
}
.stat__label{font-size:0.8125rem;color:var(--text-hero-muted);letter-spacing:0.02em}

/* ── WHY SECTION (dark bg) ─────────────────────────────────── */
.why-section{
  background:linear-gradient(135deg,#0A0A0A,#0D0D0D);
  padding:4rem 0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.why-card{
  padding:2rem 1.5rem;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(160,128,32,0.12);
  border-radius:var(--radius-lg);
  transition:background var(--transition),border-color var(--transition);
}
.why-card:hover{background:rgba(255,255,255,0.06);border-color:var(--gold-glow)}
.why-card__num{
  font-family:var(--font-serif);font-size:2.5rem;font-weight:700;
  color:var(--gold);opacity:0.4;line-height:1;margin-bottom:1rem;
}
.why-card h3{
  font-family:var(--font-serif);font-size:1.125rem;font-weight:600;
  color:#fff;margin-bottom:0.5rem;
}
.why-card p{font-size:0.8125rem;color:rgba(255,255,255,0.45);line-height:1.75}

/* ── PROOF ────────────────────────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.proof-block{
  background:#fff;border-radius:var(--radius-lg);padding:1.5rem;
  border:1px solid var(--border);
}
.proof-block h3{
  font-family:var(--font-serif);font-size:0.9375rem;font-weight:600;
  color:var(--text-primary);margin-bottom:1rem;
  padding-bottom:0.75rem;border-bottom:1px solid var(--border);
}
.proof-list{display:flex;flex-direction:column;gap:0.6rem}
.proof-list li{
  font-size:0.8125rem;color:var(--text-secondary);
  padding-left:1.25rem;position:relative;line-height:1.5;
}
.proof-list li::before{
  content:'';position:absolute;left:0;top:0.5em;
  width:5px;height:5px;background:var(--gold);
  border-radius:50%;opacity:0.6;
}

/* ── CONTACT ──────────────────────────────────────────────── */
.contact-form{
  display:flex;flex-direction:column;gap:1.25rem;
  background:#fff;padding:2.5rem;border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:0.375rem}
.form-group--full{grid-column:1/-1}
.form-group label{
  font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-secondary);
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:0.75rem 1rem;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);color:var(--text-primary);
  font-family:var(--font-sans);font-size:0.875rem;
  transition:border-color var(--transition),box-shadow var(--transition);
  appearance:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale);
}
.form-group textarea{resize:vertical;min-height:90px}
.contact-info{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;
  font-size:0.875rem;color:var(--text-secondary);
}
.contact-info strong{color:var(--text-primary)}

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero{
  background:linear-gradient(135deg,#0A0A0A,#111);
  padding:4rem 0 3rem;text-align:center;
  border-bottom:1px solid var(--gold-line);
}
.page-hero__label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.75rem;
}
.page-hero__title{
  font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,3rem);
  font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.02em;margin-bottom:0.75rem;
}
.page-hero__lead{font-size:1.0625rem;color:var(--text-hero);max-width:560px;margin:0 auto;line-height:1.7}

/* ══════════════════════════════════════════════════════════════
   FOOTER — matches main.js rendered HTML structure
   ══════════════════════════════════════════════════════════════ */
.site-footer{
  background:var(--ink-dark);
  border-top:1px solid var(--gold-glow);
  padding:3rem 0 2rem;
}
.footer-inner{
  max-width:1120px;margin:0 auto;padding:0 var(--space-6);
}
.footer-brand{
  margin-bottom:1.5rem;
}
.footer-logo{
  display:block;
  font-family:var(--font-serif);font-size:1.125rem;font-weight:600;
  color:#fff;margin-bottom:0.25rem;
}
.footer-tagline{font-size:0.8125rem;color:rgba(255,255,255,0.3)}
.footer-contact{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  font-size:0.8125rem;color:rgba(255,255,255,0.4);
  margin-bottom:1.25rem;
}
.footer-contact a{color:rgba(255,255,255,0.6);transition:color var(--transition)}
.footer-contact a:hover{color:var(--gold-light)}
.footer-links{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  margin-bottom:1.5rem;
}
.footer-links a{
  font-size:0.8125rem;color:rgba(255,255,255,0.4);transition:color var(--transition);
}
.footer-links a:hover{color:#fff}
.footer-copy{
  font-size:0.75rem;color:rgba(255,255,255,0.2);
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.06);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .proof-grid,.why-grid{grid-template-columns:1fr}
  .stats-bar__grid{grid-template-columns:repeat(2,1fr)}
  .ccp-banner{grid-template-columns:1fr}
}
@media(max-width:640px){
  .section{padding:3rem 0}
  .card-grid,.card-grid--2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero{padding:3.5rem 0}
  .main-nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:rgba(10,10,10,0.98);
    border-bottom:1px solid var(--gold-line);
    padding:1rem;
  }
  .main-nav.open{display:block}
  .nav-list{flex-direction:column;align-items:flex-start;gap:0.25rem}
  .nav-item > a{width:100%}
  .nav-toggle{display:flex}
  .btn-group{flex-direction:column;align-items:center}
  .btn{width:100%;max-width:280px}
  .footer-contact{flex-direction:column;gap:0.5rem}
  .footer-links{flex-wrap:wrap;gap:1rem}
  .ccp-banner{padding:2rem 1.5rem}
  .stats-bar__grid{grid-template-columns:1fr 1fr}
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate-in{animation:fadeInUp 0.6s ease forwards}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE v3 — 10 Module Structure (2026-03-22)
   ══════════════════════════════════════════════════════════════ */

/* ── HOMEPAGE SECTION BASE ─────────────────────────────── */
.hp-section {
  padding: 5rem 0;
}
.hp-section--dark {
  background: #0A0A0A;
  color: #F0E6D2;
}
.hp-section--warm {
  background: #F8F6F3;
}
.hp-section--card {
  background: #F2EFE9;
}
.hp-section__label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hp-section--dark .hp-section__label {
  color: var(--gold-light);
}
.hp-section__title {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.hp-section--dark .hp-section__title {
  color: #F0E6D2;
}
.hp-section__lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 640px;
}
.hp-section--dark .hp-section__lead {
  color: rgba(240,230,210,0.6);
}
.hp-section__header {
  max-width: 700px;
  margin-bottom: 3rem;
}
.hp-section__header--center {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-group--center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.btn--primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn--primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(160,128,32,0.3);
}
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.btn--outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-pale);
}
.btn--wide {
  width: 100%;
}
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* ── MODULE 1: HERO ───────────────────────────────────── */
.hp-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: #0A0A0A;
  overflow: hidden;
}
.hp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.94) 0%,
    rgba(10,10,10,0.62) 60%,
    rgba(10,10,10,0.28) 100%
  );
  z-index: 1;
}
.hp-hero__content {
  position: relative;
  z-index: 2;
  padding: 7.5rem var(--space-6) 5rem;
  max-width: 700px;
}
.hp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
}
.hp-hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold-light);
}
.hp-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  color: #F0E6D2;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hp-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(240,230,210,0.6);
  max-width: 580px;
  margin-bottom: 2.5rem;
}
.hp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hp-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(240,230,210,0.3);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: hp-bounce 2s infinite;
}
@keyframes hp-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
.hp-hero__scroll svg { opacity: 0.5; }

/* ── MODULE 2: CCP FOCUS ────────────────────────────────── */
.hp-ccp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.hp-ccp__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.hp-ccp__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hp-ccp__points li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--gold-pale);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A08020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.hp-ccp__card-wrap {
  position: relative;
}
.hp-ccp__badge {
  position: absolute;
  top: -16px;
  right: -16px;
  background: var(--gold);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  z-index: 1;
}
.hp-ccp__card {
  background: #0A0A0A;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  color: #F0E6D2;
  border: 1px solid var(--gold-glow);
}
.hp-ccp__card h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
  line-height: 1.3;
  color: #fff;
}
.hp-ccp__card p {
  font-size: 0.875rem;
  color: rgba(240,230,210,0.5);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* ── MODULE 3: WHY ZATINO ──────────────────────────────── */
.hp-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hp-why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hp-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.hp-why-card__icon {
  width: 48px;
  height: 48px;
  background: var(--gold-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.hp-why-card__icon svg { width: 24px; height: 24px; stroke: var(--gold); }
.hp-why-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}
.hp-why-card p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── MODULE 4: PROOF OF NETWORK ────────────────────────── */
.hp-proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.hp-proof__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.hp-proof__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-proof__blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.hp-proof-block {
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.hp-proof-block h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 0.625rem;
}
.hp-proof-block p {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── MODULE 5: SECTORS ─────────────────────────────────── */
.hp-sectors__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hp-sector-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
  cursor: default;
}
.hp-sector-tag:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── MODULE 6: WHO WORKS ───────────────────────────────── */
.hp-who__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hp-who-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.hp-who-item:nth-child(2n) { border-right: none; }
.hp-who-item:nth-last-child(-n+2) { border-bottom: none; }
.hp-who-item::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 7px;
}

/* ── MODULE 7: CHINA COVERAGE ──────────────────────────── */
.hp-china__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hp-china__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.hp-china__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-china__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.hp-city-chip {
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── MODULE 8: PROGRAMME EVIDENCE ──────────────────────── */
.hp-programme__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hp-programme__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.hp-programme__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-programme__micro {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--gold);
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(240,230,210,0.35);
  line-height: 1.65;
}

/* ── MODULE 9: ADDITIONAL SUPPORT ──────────────────────── */
.hp-support__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 2.5rem 3rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.hp-support__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--gold-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-support__icon svg { width: 28px; height: 28px; stroke: var(--gold); }
.hp-support__text h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}
.hp-support__text p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 580px;
}

/* ── MODULE 10: CONTACT CTA ────────────────────────────── */
.hp-contact {
  padding: 5rem 0;
  background: #0A0A0A;
  text-align: center;
}
.hp-contact .hp-section__lead {
  margin: 0 auto 2.5rem;
  max-width: 540px;
}

/* ── RESPONSIVE OVERRIDES ──────────────────────────────── */
@media (max-width: 900px) {
  .hp-ccp__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hp-proof__grid { grid-template-columns: 1fr; }
  .hp-proof__img { order: -1; }
  .hp-china__grid { grid-template-columns: 1fr; }
  .hp-programme__grid { grid-template-columns: 1fr; }
  .hp-programme__img { order: -1; }
  .hp-why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hp-section { padding: 3.5rem 0; }
  .hp-hero { min-height: 85vh; }
  .hp-hero__content { padding: 6rem var(--space-6) 4rem; }
  .hp-proof__blocks { grid-template-columns: 1fr; }
  .hp-who__list { grid-template-columns: 1fr; }
  .hp-who-item { border-right: none; }
  .hp-who-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .hp-who-item:last-child { border-bottom: none; }
  .hp-support__inner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .hp-why__grid { grid-template-columns: 1fr; }
  .btn-group--center { flex-direction: column; align-items: center; }
  .btn-group--center .btn { width: 100%; max-width: 280px; }
}