/* ==========================================================================
   Godfather MultiVentures: design tokens, base, typography, core components
   Layout system reproduced from the reference template; colour system derived
   from the Godfather Garuda emblem (gold #DEAA2E dominant, royal blue #083DA4).
   ========================================================================== */

:root {
  /* Brand (from logo) */
  --color-primary: #E2B03F;          /* emblem gold, tuned for UI fills */
  --color-primary-soft: #F7E8BF;
  --color-primary-deep: #85600E;     /* gold for text on light grounds (AA, 5.3:1 on white) */
  --color-secondary: #0B2146;        /* deep royal navy, from emblem blue */
  --color-secondary-2: #1F4E9E;      /* emblem royal blue, lifted */
  --color-secondary-900: #071632;

  /* Neutrals */
  --color-background: #F2F4F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F6F8;
  --color-heading: #0A1D3D;
  --color-text: #5E6474;
  --color-text-strong: #1F2533;
  --color-muted: #676D7B;
  --color-border: #D5DAE2;
  --color-border-soft: #E6E9EE;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --gradient-brand: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-2) 100%);
  --gradient-bar: linear-gradient(90deg, var(--color-primary) 0.58%, var(--color-secondary) 100%);
  --overlay-navy: rgba(9, 27, 58, 0.62);

  /* Typography */
  --font-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.2rem;      /* 19.2 (h5) */
  --text-xl: 1.5rem;      /* 24 (h4) */
  --text-2xl: 1.875rem;   /* 30 (h3) */
  --text-3xl: 3.5rem;     /* 56 section title */
  --text-4xl: 5rem;       /* 80 page title */
  --text-5xl: 5.9375rem;  /* 95 hero */
  --text-hero: 5.125rem;  /* 82 hero (two lines for the current headline) */
  --lh-body: 1.9;
  --lh-heading: 1.2;

  /* Layout */
  --container: 1340px;
  --gutter: 10px;
  --panel-inset: 20px;
  --section-y: 120px;
  --radius-panel: 30px;
  --radius-card: 20px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  --header-h-mobile: 72px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 10px 40px rgba(11, 33, 70, 0.07);
  --shadow-card: 5px 5px 12px rgba(11, 33, 70, 0.06);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.page-inner { background: var(--color-surface); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color .3s; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); color: var(--color-heading); font-weight: 600; line-height: 1.3; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; background: var(--color-secondary); color: #fff; padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-top: 40px; }
.section--tint { background: var(--color-background); }
.panel { position: relative; margin-inline: var(--panel-inset); border-radius: var(--radius-panel); overflow: hidden; }
.panel--white { background: var(--color-surface); }
.panel--dark { background: var(--color-secondary); color: #fff; }
.panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.panel > .container { position: relative; z-index: 2; }
.rule { border: 0; border-top: 1px solid var(--color-border-soft); margin: 80px 0 100px; }

/* ---------- Typography ---------- */
.section-title { font-size: var(--text-3xl); line-height: var(--lh-heading); font-weight: 600; color: var(--color-heading); }
.heading { position: relative; }
.heading--center { text-align: center; max-width: 780px; margin-inline: auto; }
.heading .eyebrow { margin-bottom: 15px; }
.fine-print { margin-top: 40px; font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); }
.intro-center { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.intro-center .eyebrow { margin-bottom: 15px; }
.intro-center p { margin-top: 20px; }
.outline-num {
  --stroke: currentColor;
  font-family: var(--font-display); font-weight: 600; line-height: 1.2;
  color: transparent; -webkit-text-stroke: 1px var(--stroke);
}

/* Eyebrow pill (reference "sub-title") */
.eyebrow {
  position: relative; display: inline-block;
  padding: 8px 19px 8px 36px; border-radius: 50px;
  font-family: var(--font-display); font-size: var(--text-base); line-height: 1.4; letter-spacing: 1.6px;
  color: var(--color-secondary); background: var(--color-surface);
}
.eyebrow::before { content: ""; position: absolute; left: 18px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eyebrow--grey { background: var(--color-background); }
.eyebrow--dark { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- Button (reference btn-style1: arrow swap on hover) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 10px 0 30px; border-radius: 40px; overflow: hidden;
  background: var(--color-primary); color: var(--color-secondary);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; line-height: 56px; white-space: nowrap;
  transition: padding .4s var(--ease-out), gap .4s var(--ease-out), background-color .3s;
}
.btn__label { display: inline-flex; transition: transform .4s var(--ease-out); }
.btn__arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-secondary); color: #fff; transition: scale .4s var(--ease-out), left .4s var(--ease-out);
}
.btn__arrow--l { position: absolute; left: -40px; scale: 0; }
.btn:hover, .btn:focus-visible { padding-left: 10px; padding-right: 38px; gap: 0; }
.btn:hover .btn__arrow--l, .btn:focus-visible .btn__arrow--l { left: 10px; scale: 1; }
.btn:hover .btn__arrow--r, .btn:focus-visible .btn__arrow--r { scale: 0; }
.btn:hover .btn__label, .btn:focus-visible .btn__label { transform: translateX(55px); }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; }

.pill-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 66px; padding: 0 10px 0 30px; border-radius: 50px; background: var(--color-surface);
  font-weight: 600; color: var(--color-text-strong);
}
.pill-link__icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: var(--color-secondary); color: #fff; transition: background-color .3s, color .3s, transform .3s; }
.pill-link:hover .pill-link__icon { background: var(--color-primary); color: var(--color-secondary); transform: rotate(45deg); }

.round-icon { display: grid; place-items: center; flex: none; width: 70px; height: 70px; border-radius: 50%; background: var(--color-primary); color: var(--color-secondary); }

/* ---------- Lists ---------- */
.checklist { display: grid; gap: 6px; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-strong); line-height: 1.6; }
.checklist__icon { flex: none; margin-top: 2px; }
.checklist__icon circle { fill: var(--color-secondary); stroke: var(--color-secondary); }
.checklist__icon path { stroke: #fff; }
.checklist--2col { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.checklist--plain { margin-top: 20px; }

.num-list { display: grid; gap: 22px; margin-top: 10px; }
.num-list li { display: flex; gap: 20px; align-items: flex-start; }
.num-list__n {
  flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-background); font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-heading);
}
.section--tint .num-list__n { background: var(--color-surface); }
.num-list h3 { font-size: 20px; font-weight: 500; margin: 6px 0 4px; }
.num-list--2col { grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 30px; }