/* ========================================================
   REVGEN — Brand Stylesheet
   Colors, type and components based on REVGEN Brand Book v1.0
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Primary */
  --rg-blue: #1C35EA;
  --rg-blue-dark: #16299f;
  --rg-navy: #0D1322;
  --rg-offwhite: #F2F4F7;

  /* Neutral */
  --rg-white: #FFFFFF;
  --rg-gray-100: #E5E7EA;
  --rg-gray-300: #9CA3AF;
  --rg-gray-600: #6B7280;
  --rg-black: #111027;

  --rg-radius: 14px;
  --rg-radius-lg: 24px;
  --rg-max: 1180px;

  --rg-shadow: 0 20px 50px -20px rgba(13,19,34,0.35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  color: var(--rg-black);
  background: var(--rg-white);
  -webkit-font-smoothing: antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em 0; font-weight:600; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0 0 1em 0; }
.container{ max-width: var(--rg-max); margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Poppins', sans-serif; font-weight:600; font-size:15px;
  padding:14px 28px; border-radius: 999px; border:2px solid transparent;
  cursor:pointer; transition: all .2s ease; white-space:nowrap;
}
.btn-primary{ background: var(--rg-blue); color:#fff; }
.btn-primary:hover{ background: var(--rg-blue-dark); transform: translateY(-1px); }
.btn-dark{ background: var(--rg-black); color:#fff; }
.btn-dark:hover{ background:#000; transform: translateY(-1px); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,0.35); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.btn-outline-dark{ background: transparent; border-color: var(--rg-black); color: var(--rg-black); }
.btn-outline-dark:hover{ background: var(--rg-black); color:#fff; }
.btn-block{ width:100%; }

/* ---------- Top bar ---------- */
.topbar{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rg-gray-100);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-size:24px; font-weight:700; letter-spacing:-0.02em; color: var(--rg-black);
  display:flex; align-items:center; gap:8px;
}
.logo .mark{
  width:30px; height:30px; border-radius:8px; background: var(--rg-black);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:16px;
}
.logo-img{ height:24px; width:auto; display:block; }
footer .logo-img{ height:28px; }
.nav{ display:flex; align-items:center; gap:36px; }
.nav a{ font-size:15px; font-weight:500; color: var(--rg-black); opacity:.75; transition:opacity .15s; }
.nav a:hover, .nav a.active{ opacity:1; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--rg-black); margin:5px 0; border-radius:2px; }

@media (max-width: 900px){
  .nav{
    position:fixed; top:76px; left:0; right:0; height:calc(100vh - 76px);
    background:#fff; flex-direction:column;
    align-items:flex-start; padding:24px; gap:20px; transform: translateY(-8px);
    opacity:0; pointer-events:none; transition: all .2s ease; overflow:auto;
  }
  .nav.open{ opacity:1; pointer-events:auto; transform: translateY(0); }
  .nav a{ font-size:18px; opacity:1; }
  .nav-toggle{ display:block; }
  .nav-actions .btn-primary-desktop{ display:none; }
}

/* ---------- Hero (dark) ---------- */
.hero{
  background: radial-gradient(circle at 15% 0%, #1a2a63 0%, var(--rg-navy) 55%, var(--rg-black) 100%);
  color:#fff; position:relative; overflow:hidden;
  padding: 96px 0 110px;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:520px; height:520px;
  background: radial-gradient(circle, rgba(28,53,234,0.45) 0%, rgba(28,53,234,0) 70%);
}
.hero .container{ position:relative; z-index:1; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color: #b9c2ff;
  background: rgba(28,53,234,0.18); border:1px solid rgba(28,53,234,0.4);
  padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
.hero h1{ font-size: clamp(34px, 5vw, 60px); font-weight:700; max-width:820px; color:#fff; }
.hero h1 .accent{ color:#7d8bff; }
.hero .lead{ font-size:19px; color: #c7ccdd; max-width:600px; margin-bottom:32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.14); padding-top:28px; }
.hero-stats div{ flex:1; min-width:150px; padding-right:24px; }
.hero-stats .num{ font-size:28px; font-weight:700; color:#fff; }
.hero-stats .label{ font-size:13.5px; color:#9aa0c2; margin-top:2px; }

/* ---------- Sections ---------- */
section{ padding: 88px 0; }
.section-tight{ padding: 64px 0; }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head .kicker{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--rg-blue); margin-bottom:10px; display:block;
}
.section-head h2{ font-size: clamp(26px, 3.4vw, 38px); }
.section-head p{ color: var(--rg-gray-600); font-size:16.5px; }
.bg-offwhite{ background: var(--rg-offwhite); }
.bg-navy{ background: var(--rg-navy); color:#fff; }
.bg-navy .section-head p{ color:#aeb4d4; }
.bg-navy h2, .bg-navy h3{ color:#fff; }

/* ---------- Grid helpers ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--rg-gray-100); border-radius: var(--rg-radius);
  padding:28px; transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--rg-shadow); transform: translateY(-3px); }
.card .icon{
  width:46px; height:46px; border-radius:12px; background: rgba(28,53,234,0.1);
  color: var(--rg-blue); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; font-size:20px;
}
.card h3{ font-size:18px; }
.card p{ color: var(--rg-gray-600); font-size:15px; margin-bottom:0; }

/* ---------- Offer cards ---------- */
.offer-card{
  background:#fff; border:1px solid var(--rg-gray-100); border-radius: var(--rg-radius-lg);
  padding:36px; display:flex; flex-direction:column; height:100%;
}
.offer-card.featured{ border:2px solid var(--rg-blue); box-shadow: var(--rg-shadow); position:relative; }
.offer-card .tag{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--rg-blue); margin-bottom:10px;
}
.offer-card .badge{
  position:absolute; top:-13px; right:28px; background: var(--rg-blue); color:#fff;
  font-size:12px; font-weight:600; padding:5px 14px; border-radius:999px;
}
.offer-card h3{ font-size:24px; margin-bottom:4px; }
.offer-card .price{ font-size:34px; font-weight:700; margin:10px 0 4px; }
.offer-card .price span{ font-size:15px; font-weight:500; color: var(--rg-gray-600); }
.offer-card .for{ font-size:14.5px; color: var(--rg-gray-600); margin-bottom:22px; }
.feat-group{ margin-bottom:18px; }
.feat-group h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color: var(--rg-gray-600); margin-bottom:10px; margin-top:22px; }
.feat-group h4:first-child{ margin-top:0; }
.feat-group ul{ list-style:none; padding:0; margin:0; }
.feat-group li{ display:flex; gap:10px; font-size:14.5px; margin-bottom:9px; align-items:flex-start; }
.feat-group li::before{ content:"✓"; color: var(--rg-blue); font-weight:700; flex-shrink:0; }
.offer-card .not-included{ font-size:13.5px; color: var(--rg-gray-300); margin-top:auto; padding-top:18px; border-top:1px dashed var(--rg-gray-100); }
.offer-card .btn{ margin-top:22px; }

/* ---------- Pains/Gains ---------- */
.pg-list{ display:flex; flex-direction:column; gap:14px; }
.pg-item{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:12px; background:#fff; border:1px solid var(--rg-gray-100); }
.pg-item .dot{ width:8px; height:8px; border-radius:50%; margin-top:8px; flex-shrink:0; }
.pg-item.pain .dot{ background:#e5484d; }
.pg-item.gain .dot{ background: var(--rg-blue); }
.pg-item p{ margin:0; font-size:15px; color: var(--rg-black); }

/* ---------- Steps / process ---------- */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap:0; }
.step{ display:flex; gap:24px; padding:28px 0; border-top:1px solid var(--rg-gray-100); }
.step:first-child{ border-top:none; }
.step .num{
  counter-increment: step; font-weight:700; font-size:18px; color: var(--rg-blue);
  width:56px; flex-shrink:0;
}
.step .num::before{ content: "0" counter(step); }
.step h3{ font-size:19px; margin-bottom:6px; }
.step p{ color: var(--rg-gray-600); margin:0; font-size:15px; }

/* ---------- Chart / imagery block (css-drawn, matches brand imagery style) ---------- */
.chart-block{
  background: linear-gradient(160deg, #0d1322 0%, #1c35ea 140%);
  border-radius: var(--rg-radius-lg); padding:32px; height:100%; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden;
}
.chart-bars{ display:flex; align-items:flex-end; gap:10px; height:140px; margin-bottom:10px; }
.chart-bars span{ flex:1; background: rgba(255,255,255,0.85); border-radius:4px 4px 0 0; }
.chart-block .cap{ color:#dfe3ff; font-size:14px; font-weight:500; }

/* Process timeline visual (90-day roadmap, mirrors the 5 process steps) */
.tl-wrap{ height:140px; display:flex; flex-direction:column; justify-content:center; margin-bottom:14px; }
.tl-row{ position:relative; display:flex; justify-content:space-between; }
.tl-line-track{ position:absolute; top:8px; left:5%; right:5%; height:3px; background:rgba(255,255,255,0.18); border-radius:2px; z-index:0; }
.tl-line-fill{ position:absolute; top:8px; left:5%; height:3px; width:56%; background:#fff; border-radius:2px; z-index:1; }
.tl-node{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.tl-dot{ width:16px; height:16px; border-radius:50%; background:#0d1322; border:2.5px solid rgba(255,255,255,0.4); box-sizing:border-box; }
.tl-node.done .tl-dot{ background:#fff; border-color:#fff; }
.tl-day{ font-size:11px; font-weight:600; color:#9aa0d6; white-space:nowrap; }
.tl-node.done .tl-day{ color:#fff; }

/* ---------- Logo strip ---------- */
.logo-strip{ display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:center; opacity:.6; }
.logo-strip span{ font-weight:600; font-size:15px; color: var(--rg-gray-600); }

/* ---------- Testimonial / quote ---------- */
.quote-card{ background: var(--rg-navy); color:#fff; border-radius: var(--rg-radius-lg); padding:40px; }
.quote-card p{ font-size:20px; line-height:1.5; font-weight:400; color:#fff; }
.quote-card .who{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.quote-card .avatar{ width:44px; height:44px; border-radius:50%; background: var(--rg-blue); display:flex; align-items:center; justify-content:center; font-weight:700; }
.quote-card .who .name{ font-weight:600; font-size:14.5px; }
.quote-card .who .role{ font-size:13px; color:#9aa0c2; }

/* ---------- Placeholder note ---------- */
.placeholder-note{
  background: #FFF8E6; border:1px dashed #E3B341; color:#8a6416; border-radius:12px;
  padding:16px 20px; font-size:14px; margin-bottom:32px;
}

/* ---------- Forms ---------- */
.form-card{ background:#fff; border-radius: var(--rg-radius-lg); border:1px solid var(--rg-gray-100); padding:36px; box-shadow: var(--rg-shadow); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--rg-gray-100);
  font-family:'Poppins', sans-serif; font-size:14.5px; background: var(--rg-offwhite); transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--rg-blue); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:12.5px; color: var(--rg-gray-300); margin-top:14px; text-align:center; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--rg-blue); color:#fff; border-radius: var(--rg-radius-lg);
  padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin-bottom:8px; font-size: clamp(22px,3vw,30px); }
.cta-band p{ color:#dfe3ff; margin:0; }

/* ---------- Footer ---------- */
footer{ background: var(--rg-black); color:#fff; padding:64px 0 28px; }
footer .foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:40px; margin-bottom:48px; }
footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#8890b5; margin-bottom:16px; }
footer ul li{ margin-bottom:10px; }
footer a{ color:#c7ccdd; font-size:14.5px; }
footer a:hover{ color:#fff; }
footer .foot-desc{ color:#9aa0c2; font-size:14.5px; max-width:280px; }
footer .foot-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7c84ab; }
footer .logo{ color:#fff; }
footer .logo .mark{ background:#fff; color: var(--rg-black); }
@media (max-width: 900px){ footer .foot-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- Page hero (light, sub pages) ---------- */
.page-hero{ background: var(--rg-offwhite); padding: 64px 0 56px; }
.page-hero .kicker{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--rg-blue); margin-bottom:12px; display:block; }
.page-hero h1{ font-size: clamp(30px,4vw,46px); max-width:720px; }
.page-hero p{ font-size:17px; color: var(--rg-gray-600); max-width:600px; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.small{ font-size:13.5px; color: var(--rg-gray-600); }