/* ============================================================
   MCS Corporate & SME Finance — Global Design System
   Premium Navy + Gold Financial Identity
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Design Tokens --- */
:root {
  --navy-950:  #04080f;
  --navy-900:  #060b18;
  --navy-800:  #0a1228;
  --navy-750:  #0d1632;
  --navy-700:  #121e40;
  --navy-600:  #182550;
  --navy-500:  #1e2d60;

  --gold-600:  #a06f18;
  --gold-500:  #c8922a;
  --gold-400:  #d4aa50;
  --gold-300:  #e2c478;
  --gold-200:  #edd89a;
  --gold-100:  #f5e8c4;
  --champagne: #e8d5a8;

  --white:     #ffffff;
  --off-white: #f4f0e9;
  --gray-100:  #e8e4db;
  --gray-200:  #d0cbbf;
  --text-muted: #7a8fa8;
  --text-light: #b8cad8;
  --text-body:  #cdd8e4;

  --bg-primary:    var(--navy-900);
  --bg-section:    var(--navy-800);
  --bg-card:       var(--navy-750);
  --bg-light:      var(--off-white);
  --accent-gold:   var(--gold-500);
  --accent-gold-light: var(--gold-400);
  --border-subtle: rgba(200, 146, 42, 0.2);
  --border-gold:   rgba(200, 146, 42, 0.5);

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

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1280px;
  --section-pad: clamp(60px, 8vw, 120px);
  --header-height: 80px;
  --header-height-scrolled: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm:   0 2px 8px rgba(4,8,15,0.4);
  --shadow-md:   0 8px 24px rgba(4,8,15,0.5);
  --shadow-lg:   0 16px 48px rgba(4,8,15,0.6);
  --shadow-gold: 0 0 24px rgba(200,146,42,0.15);

  --transition-fast: all 0.18s ease;
  --transition-base: all 0.28s ease;
  --transition-slow: all 0.45s cubic-bezier(0.25,0.1,0.25,1);
}

/* --- Reset & Base --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--font-serif); line-height:1.2; color:var(--white); font-weight:600; }
h1 { font-size:clamp(var(--text-4xl),5.5vw,var(--text-7xl)); }
h2 { font-size:clamp(var(--text-3xl),4vw,var(--text-5xl)); }
h3 { font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl)); }
h4 { font-size:var(--text-xl); }
p { font-family:var(--font-sans); color:var(--text-body); line-height:1.75; font-size:var(--text-base); }
a { color:var(--gold-400); text-decoration:none; transition:var(--transition-fast); }
a:hover { color:var(--gold-300); }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }

/* --- Layout --- */
.container {
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(20px,5vw,80px);
  padding-right:clamp(20px,5vw,80px);
}
.section { padding-top:var(--section-pad); padding-bottom:var(--section-pad); }
.section--dark  { background-color:var(--bg-primary); }
.section--mid   { background-color:var(--bg-section); }
.section--light { background-color:var(--off-white); }

/* --- Section Labels & Headings --- */
.section-label {
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-400);
  margin-bottom:var(--space-4);
}
.section-label::before {
  content:''; display:block; width:28px; height:1px; background:var(--gold-500);
}
.section-label--dark { color:var(--gold-600); }
.section-label--dark::before { background:var(--gold-600); }

.section-heading { color:var(--white); margin-bottom:var(--space-4); }
.section-heading--dark { color:var(--navy-800); }
.section-subheading {
  font-family:var(--font-sans);
  font-size:clamp(var(--text-base),1.5vw,var(--text-lg));
  color:var(--text-muted); max-width:600px; line-height:1.75;
}
.section-subheading--dark { color:var(--navy-600); }

.gold-rule {
  display:block; width:48px; height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  margin-bottom:var(--space-6);
}
.gold-rule--center { margin-left:auto; margin-right:auto; }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;
  padding:14px 32px; border-radius:var(--radius-sm);
  border:1.5px solid transparent; cursor:pointer;
  transition:var(--transition-base); text-decoration:none;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn--primary {
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:var(--navy-900); border-color:var(--gold-500);
}
.btn--primary:hover {
  color:var(--navy-900); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(200,146,42,0.35);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
}
.btn--outline {
  background:transparent; color:var(--white); border-color:rgba(255,255,255,0.3);
}
.btn--outline:hover {
  border-color:var(--gold-400); color:var(--gold-300);
  background:rgba(200,146,42,0.06); transform:translateY(-2px);
}
.btn--gold-outline {
  background:transparent; color:var(--gold-400); border-color:var(--gold-500);
}
.btn--gold-outline:hover {
  background:var(--gold-500); color:var(--navy-900); transform:translateY(-2px);
}
.btn--dark {
  background:var(--navy-800); color:var(--white); border-color:var(--navy-700);
}
.btn--dark:hover { background:var(--navy-700); transform:translateY(-2px); }
.btn--link {
  background:none; border:none; color:var(--gold-400);
  padding:0; font-size:var(--text-sm);
  display:inline-flex; align-items:center; gap:var(--space-2);
}
.btn--link:hover { color:var(--gold-300); gap:var(--space-3); }

/* --- Cards --- */
.card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--space-8);
  transition:var(--transition-base); position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md),var(--shadow-gold); border-color:var(--border-gold); }

/* --- Data Points --- */
.data-point { display:flex; flex-direction:column; gap:var(--space-1); }
.data-point__label { font-size:var(--text-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
.data-point__value { font-family:var(--font-serif); font-size:clamp(var(--text-2xl),3vw,var(--text-4xl)); color:var(--gold-400); line-height:1.1; font-weight:600; }
.data-point__sub { font-size:var(--text-xs); color:var(--text-muted); }

/* --- Forms --- */
.form-group { display:flex; flex-direction:column; gap:var(--space-2); }
.form-label { font-size:var(--text-xs); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }
.form-input,.form-select,.form-textarea {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm);
  padding:14px 18px; font-family:var(--font-sans); font-size:var(--text-sm);
  color:var(--white); transition:var(--transition-fast); outline:none; -webkit-appearance:none;
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted); }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--gold-500); background:rgba(200,146,42,0.05);
  box-shadow:0 0 0 3px rgba(200,146,42,0.1);
}
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8922A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px; cursor:pointer; color:var(--text-muted);
}
.form-select:focus { color:var(--white); }
.form-textarea { resize:vertical; min-height:120px; }

/* --- Icon Wrap --- */
.icon-wrap {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:rgba(200,146,42,0.1);
  border:1px solid rgba(200,146,42,0.2); flex-shrink:0; color:var(--gold-400);
}
.icon-wrap svg { width:24px; height:24px; }

/* --- Badge --- */
.badge {
  display:inline-block; font-size:0.7rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; padding:4px 12px;
  border-radius:20px; border:1px solid var(--border-gold);
  color:var(--gold-400); background:rgba(200,146,42,0.08);
}

/* --- Eligibility List --- */
.eligibility-list { display:flex; flex-direction:column; gap:var(--space-3); }
.eligibility-list li { display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); color:var(--text-body); line-height:1.5; }
.eligibility-list li::before { content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--gold-500); margin-top:6px; }

/* --- Scroll Reveal --- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s cubic-bezier(0.25,0.1,0.25,1), transform 0.65s cubic-bezier(0.25,0.1,0.25,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.reveal--delay-1 { transition-delay:0.1s; }
.reveal--delay-2 { transition-delay:0.2s; }
.reveal--delay-3 { transition-delay:0.3s; }
.reveal--delay-4 { transition-delay:0.4s; }
.reveal--delay-5 { transition-delay:0.5s; }

/* --- Utilities --- */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.stat-item { background:var(--bg-card); padding:var(--space-6) var(--space-8); display:flex; flex-direction:column; gap:var(--space-2); }
.gold-number { font-family:var(--font-serif); font-size:var(--text-xs); font-weight:600; color:var(--gold-500); letter-spacing:0.1em; opacity:0.7; }
.text-gold { color:var(--gold-400); } .text-muted { color:var(--text-muted); } .text-white { color:var(--white); } .text-center { text-align:center; }
.mb-2{margin-bottom:var(--space-2);} .mb-4{margin-bottom:var(--space-4);} .mb-6{margin-bottom:var(--space-6);} .mb-8{margin-bottom:var(--space-8);} .mb-12{margin-bottom:var(--space-12);}
.mt-4{margin-top:var(--space-4);} .mt-8{margin-top:var(--space-8);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} .btn:hover,.card:hover{transform:none;}}