/* ============================================================
   DESIGN TOKENS — change things here first.

   Everything on the site reads from these variables.
   Edit one value, every page follows.

     :root                      desktop defaults
     BAND 1  >= 1600px          widescreen
     BAND 2  1024-1599px        desktop / laptop
     BAND 3  900-1023px         tablet landscape
     BAND 4  768-899px          tablet portrait
     BAND 5  481-767px          mobile landscape
     BAND 6  <= 480px           mobile portrait

   Bands do not overlap. Edit one, the others do not move.

   ── QUICK REFERENCE: FONTS ──────────────────────────────────
   --rv-font            →  Inter  (body / UI text)
   --rv-hero-display    →  Exo 2  (hero headlines)
   --rv-hero-body       →  Bai Jamjuree  (hero sub-text)

   ── QUICK REFERENCE: COLORS ─────────────────────────────────
   --rv-dark-bg         →  #121212  (page background)
   --rv-card-bg         →  #1A1A1A  (card background)
   --rv-card-hover      →  #252525  (card hover state)
   --rv-grey-accent     →  #2A2A2A  (borders / subtle accent)
   --rv-light-text      →  #F5F5F5  (primary text)
   --rv-grey-text       →  #AAAAAA  (muted / secondary text)
   --rv-grey-loader     →  #444444  (loader / skeleton)
   --rv-accent          →  #1FE0C3  (brand accent – teal)
   --rv-accent-rgb      →  31, 224, 195  (same accent as RGB)
   ============================================================ */

:root {
  --rv-dark-bg:     #121212;
  --rv-card-bg:     #1A1A1A;
  --rv-card-hover:  #252525;
  --rv-grey-accent: #2A2A2A;
  --rv-light-text:  #F5F5F5;
  --rv-grey-text:   #AAAAAA;
  --rv-grey-loader: #444444;
  --rv-accent:      #1FE0C3;
  --rv-hero-scrim:  0.10;

  --background:        var(--rv-dark-bg);
  --foreground:        var(--rv-light-text);
  --card:              var(--rv-card-bg);
  --card-foreground:   var(--rv-light-text);
  --muted-foreground:  var(--rv-grey-text);
  --border:            var(--rv-grey-accent);
  --accent-foreground: var(--rv-dark-bg);

  --rv-accent-rgb: 31, 224, 195;
  --rv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


  --rv-hero-display: 'Exo 2', 'Titillium Web', var(--rv-font);
  --rv-hero-body:    'Bai Jamjuree', var(--rv-font);
}

/* base size defaults (desktop). Responsive bands below override these. */
:root {
  --rv-band-y: 100px;  --rv-gutter: 20px;  --rv-inner-max: 1280px;
    --rv-about-h2: 52px; --rv-about-p: 20px;
    --rv-cta-h2: 48px;   --rv-cta-p: 22px;
    --rv-faq-title: 48px; --rv-faq-sub: 24px; --rv-faq-q: 17px; --rv-faq-a: 16px;
    --rv-faq-pad: 24px 32px;
    --rv-final-h2: 48px; --rv-final-p: 18px;
    --rv-btn-pad: 18px 36px; --rv-btn-size: 18px;
    --rv-footer-link: 1rem;
    --rv-connect-h2: 48px; --rv-connect-sub: 20px; --rv-connect-gap: 60px;
    --rv-connect-cols: 1fr 1fr; --rv-map-h: 520px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 56px 48px;
    --rv-card-icon: 30px; --rv-card-title: 26px; --rv-card-desc: 19px;
    --rv-card-value: 24px; --rv-social-icon: 22px;
    --rv-hdr-h: 96px; --rv-hdr-logo: 50px; --rv-hdr-brand: 18px;
    --rv-hero-h1: 130px; --rv-hero-h1-track: 0.02em; --rv-hero-lead-shift: 6.5vh; --rv-hero-lead: 31px;
    --rv-hero-ctitle: 40px; --rv-hero-cbody: 23px; --rv-hero-cicon: 54px;
    --rv-hero-cgap: 64px; --rv-hero-btn: 24px; --rv-hero-btn-pad: 20px 42px;
    --rv-hdr-pill-h: 56px; --rv-hdr-pill-x: 28px; --rv-hdr-link: 13px;
    --rv-hdr-icon: 19px; --rv-hdr-gap: 22px;
    --rv-circle-op: 1;
    --c1: 180px; --c3: 220px; --c4: 90px; --c5: 160px; --c6: 280px; --c8: 100px;

  --rv-hero-btn-top: 10vh;
  --rv-hero-btn-bot: 24vh;
  --rv-hero-c2-nudge: 2px;
}


@media (min-width: 1600px) {
:root {
    --rv-band-y: 130px;  --rv-gutter: 24px;  --rv-inner-max: 1440px;
    --rv-about-h2: 60px; --rv-about-p: 21px;
    --rv-cta-h2: 54px;   --rv-cta-p: 23px;
    --rv-faq-title: 54px; --rv-faq-sub: 25px; --rv-faq-q: 18px; --rv-faq-a: 17px;
    --rv-faq-pad: 26px 36px;
    --rv-final-h2: 54px; --rv-final-p: 19px;
    --rv-btn-pad: 20px 40px; --rv-btn-size: 19px;
    --rv-footer-link: 1.05rem;
    --rv-connect-h2: 54px; --rv-connect-sub: 21px; --rv-connect-gap: 70px;
    --rv-connect-cols: 1fr 1fr; --rv-map-h: 580px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 64px 56px;
    --rv-card-icon: 32px; --rv-card-title: 28px; --rv-card-desc: 20px;
    --rv-card-value: 26px; --rv-social-icon: 24px;
    --rv-hdr-h: 104px; --rv-hdr-logo: 55px; --rv-hdr-brand: 20px;
    --rv-hero-h1: 150px; --rv-hero-h1-track: 0.02em; --rv-hero-lead-shift: 7vh; --rv-hero-lead: 34px;
    --rv-hero-ctitle: 46px; --rv-hero-cbody: 25px; --rv-hero-cicon: 60px;
    --rv-hero-cgap: 80px; --rv-hero-btn: 26px; --rv-hero-btn-pad: 22px 48px;
    --rv-hdr-pill-h: 60px; --rv-hdr-pill-x: 32px; --rv-hdr-link: 14px;
    --rv-hdr-icon: 20px; --rv-hdr-gap: 26px;
    --rv-circle-op: 1;
    --c1: 200px; --c3: 250px; --c4: 100px; --c5: 180px; --c6: 320px; --c8: 115px;
  }
}

@media (min-width: 1024px) and (max-width: 1599px) {
:root {
    --rv-band-y: 100px;  --rv-gutter: 20px;  --rv-inner-max: 1280px;
    --rv-about-h2: 52px; --rv-about-p: 20px;
    --rv-cta-h2: 48px;   --rv-cta-p: 22px;
    --rv-faq-title: 48px; --rv-faq-sub: 24px; --rv-faq-q: 17px; --rv-faq-a: 16px;
    --rv-faq-pad: 24px 32px;
    --rv-final-h2: 48px; --rv-final-p: 18px;
    --rv-btn-pad: 18px 36px; --rv-btn-size: 18px;
    --rv-footer-link: 1rem;
    --rv-connect-h2: 48px; --rv-connect-sub: 20px; --rv-connect-gap: 60px;
    --rv-connect-cols: 1fr 1fr; --rv-map-h: 520px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 56px 48px;
    --rv-card-icon: 30px; --rv-card-title: 26px; --rv-card-desc: 19px;
    --rv-card-value: 24px; --rv-social-icon: 22px;
    --rv-hdr-h: 96px; --rv-hdr-logo: 50px; --rv-hdr-brand: 18px;
    --rv-hero-h1: 130px; --rv-hero-h1-track: 0.02em; --rv-hero-lead-shift: 6.5vh; --rv-hero-lead: 31px;
    --rv-hero-ctitle: 40px; --rv-hero-cbody: 23px; --rv-hero-cicon: 54px;
    --rv-hero-cgap: 64px; --rv-hero-btn: 24px; --rv-hero-btn-pad: 20px 42px;
    --rv-hdr-pill-h: 56px; --rv-hdr-pill-x: 28px; --rv-hdr-link: 13px;
    --rv-hdr-icon: 19px; --rv-hdr-gap: 22px;
    --rv-circle-op: 1;
    --c1: 180px; --c3: 220px; --c4: 90px; --c5: 160px; --c6: 280px; --c8: 100px;
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
:root {
    --rv-band-y: 84px;   --rv-gutter: 24px;  --rv-inner-max: 100%;
    --rv-about-h2: 42px; --rv-about-p: 19px;
    --rv-cta-h2: 40px;   --rv-cta-p: 20px;
    --rv-faq-title: 40px; --rv-faq-sub: 21px; --rv-faq-q: 16px; --rv-faq-a: 16px;
    --rv-faq-pad: 22px 26px;
    --rv-final-h2: 40px; --rv-final-p: 17px;
    --rv-btn-pad: 17px 34px; --rv-btn-size: 17px;
    --rv-footer-link: 0.95rem;
    --rv-connect-h2: 40px; --rv-connect-sub: 18px; --rv-connect-gap: 44px;
    --rv-connect-cols: 1fr; --rv-map-h: 420px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 44px 40px;
    --rv-card-icon: 28px; --rv-card-title: 23px; --rv-card-desc: 17px;
    --rv-card-value: 22px; --rv-social-icon: 22px;
    --rv-hdr-h: 88px; --rv-hdr-logo: 47px; --rv-hdr-brand: 16px;
    --rv-hero-h1: 84px; --rv-hero-h1-track: 0.015em; --rv-hero-lead-shift: 1vh; --rv-hero-lead: 25px;
    --rv-hero-ctitle: 32px; --rv-hero-cbody: 19px; --rv-hero-cicon: 46px;
    --rv-hero-cgap: 44px; --rv-hero-btn: 21px; --rv-hero-btn-pad: 18px 38px;
    --rv-hdr-pill-h: 52px; --rv-hdr-pill-x: 18px; --rv-hdr-link: 13px;
    --rv-hdr-icon: 20px; --rv-hdr-gap: 18px;
    --rv-circle-op: 0.95;
    --c1: 160px; --c3: 200px; --c4: 80px; --c5: 140px; --c6: 250px; --c8: 95px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
:root {
    --rv-band-y: 76px;   --rv-gutter: 24px;  --rv-inner-max: 100%;
    --rv-about-h2: 38px; --rv-about-p: 18px;
    --rv-cta-h2: 36px;   --rv-cta-p: 19px;
    --rv-faq-title: 36px; --rv-faq-sub: 20px; --rv-faq-q: 16px; --rv-faq-a: 15px;
    --rv-faq-pad: 20px 24px;
    --rv-final-h2: 36px; --rv-final-p: 17px;
    --rv-btn-pad: 16px 32px; --rv-btn-size: 17px;
    --rv-footer-link: 0.9rem;
    --rv-connect-h2: 36px; --rv-connect-sub: 18px; --rv-connect-gap: 40px;
    --rv-connect-cols: 1fr; --rv-map-h: 400px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 40px 36px;
    --rv-card-icon: 26px; --rv-card-title: 22px; --rv-card-desc: 16px;
    --rv-card-value: 21px; --rv-social-icon: 21px;
    --rv-hdr-h: 84px; --rv-hdr-logo: 43px; --rv-hdr-brand: 15px;
    --rv-hero-h1: 70px; --rv-hero-h1-track: 0.015em; --rv-hero-lead-shift: -1.2vh; --rv-hero-lead: 23px;
    --rv-hero-ctitle: 30px; --rv-hero-cbody: 18px; --rv-hero-cicon: 44px;
    --rv-hero-cgap: 40px; --rv-hero-btn: 20px; --rv-hero-btn-pad: 17px 36px;
    --rv-hdr-pill-h: 50px; --rv-hdr-pill-x: 18px; --rv-hdr-link: 13px;
    --rv-hdr-icon: 20px; --rv-hdr-gap: 18px;
    --rv-circle-op: 0.9;
    --c1: 140px; --c3: 180px; --c4: 70px; --c5: 130px; --c6: 220px; --c8: 85px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
:root {
    --rv-band-y: 64px;   --rv-gutter: 20px;  --rv-inner-max: 100%;
    --rv-about-h2: 32px; --rv-about-p: 17px;
    --rv-cta-h2: 30px;   --rv-cta-p: 18px;
    --rv-faq-title: 30px; --rv-faq-sub: 18px; --rv-faq-q: 15px; --rv-faq-a: 15px;
    --rv-faq-pad: 18px 20px;
    --rv-final-h2: 30px; --rv-final-p: 16px;
    --rv-btn-pad: 15px 30px; --rv-btn-size: 16px;
    --rv-footer-link: 0.675rem;
    --rv-connect-h2: 30px; --rv-connect-sub: 17px; --rv-connect-gap: 34px;
    --rv-connect-cols: 1fr; --rv-map-h: 340px;
    --rv-cards-cols: 1fr 1fr; --rv-cards-gap: 34px 28px;
    --rv-card-icon: 24px; --rv-card-title: 20px; --rv-card-desc: 15px;
    --rv-card-value: 19px; --rv-social-icon: 20px;
    --rv-hdr-h: 76px; --rv-hdr-logo: 50px; --rv-hdr-brand: 17px;
    --rv-hero-h1: 58px; --rv-hero-h1-track: 0.01em; --rv-hero-h1-lh: 2.1; --rv-hero-lead-shift: -8.8vh; --rv-hero-lead: 20px;
    --rv-hero-ctitle: 26px; --rv-hero-cbody: 17px; --rv-hero-cicon: 40px;
    --rv-hero-cgap: 34px; --rv-hero-btn: 18px; --rv-hero-btn-pad: 16px 32px;
    --rv-hdr-pill-h: 46px; --rv-hdr-pill-x: 14px; --rv-hdr-link: 12px;
    --rv-hdr-icon: 19px; --rv-hdr-gap: 14px;
    --rv-circle-op: 0.8;
    --c1: 120px; --c3: 140px; --c4: 60px; --c5: 100px; --c6: 180px; --c8: 70px;
  }
}

@media (max-width: 480px) {
:root {
    --rv-band-y: 52px;   --rv-gutter: 18px;  --rv-inner-max: 100%;
    --rv-about-h2: 28px; --rv-about-p: 16px;
    --rv-cta-h2: 26px;   --rv-cta-p: 17px;
    --rv-faq-title: 26px; --rv-faq-sub: 16px; --rv-faq-q: 15px; --rv-faq-a: 14px;
    --rv-faq-pad: 16px 18px;
    --rv-final-h2: 26px; --rv-final-p: 15px;
    --rv-btn-pad: 14px 28px; --rv-btn-size: 16px;
    --rv-footer-link: 0.675rem;
    --rv-connect-h2: 26px; --rv-connect-sub: 16px; --rv-connect-gap: 30px;
    --rv-connect-cols: 1fr; --rv-map-h: 300px;
    --rv-cards-cols: 1fr; --rv-cards-gap: 34px;
    --rv-card-icon: 24px; --rv-card-title: 20px; --rv-card-desc: 15px;
    --rv-card-value: 19px; --rv-social-icon: 20px;
    --rv-hdr-h: 68px; --rv-hdr-logo: 42px; --rv-hdr-brand: 14px;
    --rv-hero-h1: 44px; --rv-hero-h1-track: 0.01em; --rv-hero-h1-lh: 2.2; --rv-hero-lead-shift: -12vh; --rv-hero-lead: 18px;
    --rv-hero-ctitle: 24px; --rv-hero-cbody: 16px; --rv-hero-cicon: 36px;
    --rv-hero-cgap: 30px; --rv-hero-btn: 17px; --rv-hero-btn-pad: 15px 30px;
    --rv-hdr-pill-h: 42px; --rv-hdr-pill-x: 8px; --rv-hdr-link: 12px;
    --rv-hdr-icon: 17px; --rv-hdr-gap: 8px;
    --rv-circle-op: 0.7;
    --c1: 100px; --c3: 120px; --c4: 50px; --c5: 80px; --c6: 150px; --c8: 60px;
  }
}