/* ─────────────────────────────────────────────────────────────
   NO BS! VENTURES — GLOBAL STYLESHEET
   Typography: Plus Jakarta Sans (brand) + Inter (body/UI)
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colors */
  --bg-dark:        #060E24;
  --bg-dark-alt:    #0A1530;
  --bg-light:       #F7F8FA;
  --bg-white:       #FFFFFF;
  --accent:         #2351F5;
  --accent-hover:   #1A3DD4;
  --accent-subtle:  #EEF2FF;
  --text-dark:      #FFFFFF;
  --text-light:     #0A0A14;
  --text-muted:     #64748B;
  --text-muted-dk:  rgba(255,255,255,0.55);
  --eyebrow-clr:    #2351F5;
  --border-light:   #E2E8F0;
  --border-dark:    rgba(255,255,255,0.1);
  --tag-bg:         #EEF2FF;
  --tag-text:       #2351F5;
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover:   0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      14px;
  --radius-pill:    999px;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);
  --ease-premium:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Font families */
  --font-brand: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;

  /* ── Typography scale ────────────────────────────── */
  /*
   * LEVEL 1 — Hero H1 (homepage hero only)
   * LEVEL 2 — Section Headline (major section titles, 56–64px)
   * LEVEL 3 — Subline / Statement (22–26px, medium emphasis)
   * LEVEL 4 — Narrative Body (same visual level as subline, regular weight)
   * LEVEL 5 — Card Titles (20–24px, bold)
   * LEVEL 6 — Card Body (18–20px, regular)
   * LEVEL 7 — Eyebrow Labels (12–13px, uppercase)
   * LEVEL 8 — Small UI / cues (15–16px, subtle)
   */

  /* L1 — Hero H1 */
  --type-hero-size:    clamp(48px, 6.5vw, 84px);
  --type-hero-weight:  800;
  --type-hero-lh:      0.98;
  --type-hero-ls:      -0.04em;

  /* L2 — Section Headline */
  --type-h2-size:      clamp(40px, 5vw, 64px);
  --type-h2-weight:    700;
  --type-h2-lh:        1.06;
  --type-h2-ls:        -0.03em;

  /* L5 — Card Titles */
  --type-h3-size:      clamp(18px, 1.8vw, 22px);
  --type-h3-weight:    700;
  --type-h3-lh:        1.25;
  --type-h3-ls:        -0.02em;

  /* L3 — Subline / Statement (22–26px) */
  --type-statement-size:   clamp(20px, 2.2vw, 26px);
  --type-statement-weight: 700;
  --type-statement-lh:     1.45;
  --type-statement-ls:     -0.02em;

  /* L4 — Narrative body (matches statement scale, regular weight) */
  --type-narrative-size:   clamp(18px, 1.9vw, 22px);
  --type-narrative-weight: 400;
  --type-narrative-lh:     1.68;

  /* L6 — Card body (18–20px) */
  --type-card-body-size:   clamp(16px, 1.6vw, 20px);
  --type-card-body-weight: 400;
  --type-card-body-lh:     1.68;

  /* L8 — Small UI / cue text (15–16px) */
  --type-intro-size:   clamp(15px, 1.45vw, 17px);
  --type-intro-weight: 400;
  --type-intro-lh:     1.65;

  /* Body */
  --type-body-size:    16px;
  --type-body-weight:  400;
  --type-body-lh:      1.65;

  /* Small body */
  --type-sm-size:      14px;
  --type-sm-weight:    400;
  --type-sm-lh:        1.6;

  /* L7 — Eyebrow label */
  --type-eyebrow-size:   12px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-ls:     0.12em;

  /* Button */
  --type-btn-size:   15px;
  --type-btn-weight: 600;

  /* Tag */
  --type-tag-size:   13px;
  --type-tag-weight: 600;

  /* ── Spacing ─────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-18:  72px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* Section vertical padding */
  --section-py:        var(--space-28);   /* desktop  ~112px */
  --section-py-tablet: var(--space-20);   /* tablet   ~80px  */
  --section-py-mobile: var(--space-16);   /* mobile   ~64px  */
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--text-light);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
p    { max-width: 68ch; }

/* ─── GLOBAL HEADING STYLES ──────────────────────────────── */
h1 {
  font-family: var(--font-brand);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--type-hero-lh);
  letter-spacing: var(--type-hero-ls);
}
h2 {
  font-family: var(--font-brand);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}
h3 {
  font-family: var(--font-brand);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1023px) { .container { padding: 0 48px; } }
@media (max-width: 639px)  { .container { padding: 0 24px; } }

/* ─── NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  transition: background 250ms var(--ease);
}
.nav.scrolled {
  background: rgba(6,14,36,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.nav-logo-text {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
  transition: opacity 200ms var(--ease);
}
.nav-logo:hover .nav-logo-img { opacity: 0.78; }

/* ─── CTA LOGO (homepage final CTA) ─────────────────────── */
.cta-logo {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 40px;
  opacity: 0.92;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted-dk);
  transition: color 200ms var(--ease-premium);
  white-space: nowrap;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 220ms var(--ease-premium);
}
.nav-links a:hover { color: var(--text-dark); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active {
  color: var(--text-dark);
  font-weight: 600;
}
.nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Mobile nav */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all 200ms var(--ease);
}
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 99;
  padding: 80px 24px 32px;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-dark);
  transition: color 150ms var(--ease);
}
.mobile-menu a.active { color: var(--accent); }
.mobile-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 767px) {
  .nav-links   { display: none; }
  .hamburger   { display: flex; }
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--type-btn-size);
  font-weight: var(--type-btn-weight);
  line-height: 1;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: background 240ms var(--ease-premium), box-shadow 240ms var(--ease-premium),
              transform 240ms var(--ease-premium), border-color 220ms var(--ease-premium),
              color 160ms var(--ease-premium);
  white-space: nowrap;
}
.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px rgba(35,81,245,0.32);
  transform: translateY(-2px);
}
.btn-ghost-dark {
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid rgba(255,255,255,0.22);
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}
.btn-ghost-light {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-ghost-light:hover { background: var(--accent-subtle); transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 14px; }

.btn-arrow .arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-premium);
}
.btn-arrow:hover .arrow { transform: translateX(6px); }

.cta-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 639px) {
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .btn { justify-content: center; }
}

/* ─── EYEBROW LABEL ──────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--eyebrow-clr);
  margin-bottom: 18px;
}

/* ─── SECTION BASE ───────────────────────────────────────── */
.section { padding: var(--section-py) 0; }
@media (max-width: 1023px) { .section { padding: var(--section-py-tablet) 0; } }
@media (max-width: 639px)  { .section { padding: var(--section-py-mobile) 0; } }

/* ─── SECTION HEADLINE ───────────────────────────────────── */
.section-headline {
  font-family: var(--font-brand);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--text-light);
  margin-bottom: 14px;
}
.section-headline.on-dark { color: var(--text-dark); }

/* ─── STATEMENT BLOCKS ───────────────────────────────────── */
.statement {
  font-family: var(--font-brand);
  font-size: var(--type-statement-size);
  font-weight: var(--type-statement-weight);
  line-height: var(--type-statement-lh);
  letter-spacing: var(--type-statement-ls);
  margin-bottom: 28px;
}
.statement:last-child { margin-bottom: 0; }
.statement.on-dark    { color: var(--text-dark); }
.statement.on-light   { color: var(--text-light); }
.statement.accent     { color: var(--accent); }
.statement.accent-border {
  color: var(--text-light);
  padding-left: 24px;
  border-left: 3px solid var(--accent);
}
.statement.muted {
  color: var(--text-muted);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
}

/* ─── INTRO TEXT ─────────────────────────────────────────── */
.intro-text {
  font-family: var(--font-body);
  font-size: var(--type-intro-size);
  font-weight: var(--type-intro-weight);
  line-height: var(--type-intro-lh);
  max-width: 620px;
}
.intro-text.on-dark   { color: var(--text-muted-dk); }
.intro-text.on-light  { color: var(--text-muted); }

/* ─── TAGS ───────────────────────────────────────────────── */
.tag {
  font-family: var(--font-body);
  font-size: var(--type-tag-size);
  font-weight: var(--type-tag-weight);
  letter-spacing: 0.01em;
  background: var(--tag-bg);
  color: var(--tag-text);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  display: inline-block;
  line-height: 1;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── CARDS (shared) ─────────────────────────────────────── */
.card-base {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease);
}
.card-base:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}
@media (max-width: 639px) { .card-base { padding: 24px; } }

.card-title {
  font-family: var(--font-brand);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  color: var(--text-light);
  margin-bottom: 10px;
}
.card-body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ─── FINAL CTA (shared) ─────────────────────────────────── */
.final-cta {
  background: var(--bg-dark);
  padding: var(--space-32) 0;
  text-align: center;
}
@media (max-width: 639px) { .final-cta { padding: var(--space-20) 0; } }

.final-cta-inner { max-width: 600px; margin: 0 auto; }

.final-cta h2 {
  font-family: var(--font-brand);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.final-cta .support-line {
  font-family: var(--font-body);
  font-size: var(--type-intro-size);
  font-weight: 400;
  color: var(--text-muted-dk);
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta .cta-group { justify-content: center; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer { background: #181838; }

/* TOP BRAND MOMENT */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 100px 0 0;
}

/* LEFT — logo + tagline */
.footer-brand-col { display: flex; flex-direction: column; }
.footer-logo-img {
  width: 90px;
  height: auto;
  display: block;
  margin-bottom: 24px;
}
.footer-brand-tagline {
  font-family: var(--font-brand);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: #fff;
}

/* RIGHT — characters, centred vertically, not too large */
.footer-char-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer-characters {
  width: 80%;
  max-width: 340px;
  height: auto;
  display: block;
  opacity: 0.85;
}

/* CLOSING STATEMENT */
.footer-statement {
  font-family: var(--font-brand);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.75);
  margin-top: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-width: 100%;
}

/* NAV LINKS */
.footer-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 44px 0 40px;
}
.footer-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  transition: color 150ms var(--ease);
  white-space: nowrap;
}
.footer-nav a:hover { color: #93B8FF; }

/* BOTTOM BAR */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}
.footer-small {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.22);
  font-style: italic;
}

/* Responsive */
@media (max-width: 767px) {
  .footer-top {
    grid-template-columns: 1fr;
    padding: 64px 0 0;
    gap: 36px;
    text-align: center;
  }
  .footer-brand-col { align-items: center; }
  .footer-char-col { justify-content: center; }
  .footer-characters { max-width: 240px; width: 60%; }
  .footer-statement { margin-top: 44px; padding-bottom: 40px; }
  .footer-nav { gap: 20px 32px; padding: 36px 0 32px; justify-content: center; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-bottom: 36px;
  }
}
@media (max-width: 479px) {
  .footer-top { padding: 48px 0 0; }
  .footer-characters { max-width: 180px; }
  .footer-nav { gap: 16px 24px; }
}

/* ─── FLOAT IDLE ANIMATION ───────────────────────────────── */
@keyframes float-idle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

/* Apply to large character visuals only — not footer */
.vision-nobsy {
  animation: float-idle 6s ease-in-out infinite;
}
.why-image {
  animation: float-idle 7s ease-in-out infinite 0.8s;
}

/* Footer character — hover lift only, no idle float */
.footer-characters {
  transition: transform 400ms var(--ease-premium), opacity 300ms var(--ease);
}
.footer-char-col:hover .footer-characters {
  transform: translateY(-4px);
  opacity: 1;
}

/* Footer nav links — extend transition */
.footer-nav a {
  transition: color 200ms var(--ease-premium), opacity 200ms var(--ease-premium);
}

/* ─── ENTRANCE ANIMATIONS ────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms var(--ease-premium), transform 550ms var(--ease-premium);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 80ms; }
.fade-up:nth-child(3) { transition-delay: 160ms; }
.fade-up:nth-child(4) { transition-delay: 240ms; }
.fade-up:nth-child(5) { transition-delay: 320ms; }
.fade-up:nth-child(6) { transition-delay: 400ms; }
.fade-up:nth-child(7) { transition-delay: 480ms; }
.fade-up:nth-child(8) { transition-delay: 560ms; }

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; }
}