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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========================================================
   MODERN SAAS COLOR SYSTEM (REPLACES ALL DARK COLORS)
   ======================================================== */
:root {
        /* NEW PRIMARY COLORS */
    --primary-blue: #002a8b;
    --primary-blue-dark: #00050e;

    --primary-mint: #03251e;
    --primary-mint-dark: #011b15;

    /* NEW NEUTRALS */
    --light-bg: #F5F9FF;     /* replaces bg-main */
    --light-bg-alt: #F9FAFB; /* replaces bg-alt */
    --section-panel: #FFFFFF;

    /* TEXT COLORS */
    --text-dark: #1A1F26; 
    --text-med: #1d2125;
    --text-light: #F5F9FF;

    /* ACCENTS */


    /* BUTTON ALT (replaces orange) */
    --button-alt: #071533;

    /* FOOTER */
    --footer-bg: #FFFFFF;
}

/* ========================================================
   GLOBAL
   ======================================================== */




body {
    margin: 0;
     font-family: 'Lato', sans-serif;
    background: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.65;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 25px;
}

.section {
    padding: 40px 0;
}
.section p {
    line-height: 27px;
}



/* alt CTA button */
.alt .cta-primary {
    background: var(--button-alt);
}

/* ========================================================
   HERO — KEEP YOUR IMAGE, MODERNIZE TEXT/COLORS ONLY
   ======================================================== */

.hero {
    background-image: url("../../../../../assets/bighero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    padding: 40px 10px;
    text-align: center;
    color: var(--text-dark);
}

/* Soft white gradient overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
   
    background: linear-gradient(to right, #2957c773, #0082c8e6, #0082c8e6, #2957c773);
}




.hero-inner {
    position: relative;
    z-index: 2;
}

.hero-marker {
    /* background-color: rgba(255,255,255,0.7); */
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.hero h1 {
    font-size: clamp(24px, 40px, 48px);
    line-height:  clamp(24px, 40px, 48px);
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: none;
    color: #ffffff;
}

.hero p {
    line-height: 22px;
    padding: 5px 0;
    color: #ffffff;
}

.hero-sub {
    font-size: 1.4rem;
    max-width: 760px;
    margin: 0 auto 25px;
    color: var(--primary-mint-dark);
}

@media (min-width: 800px) {
.hero {
    padding: 80px 20px;
}

}

/* ========================================================
   VIDEO (UNCHANGED)
   ======================================================== */

.video {
    position: relative;
    margin-top: -130px;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    z-index: 100;
}

.video-player {
    width: 100%;
    max-width: 850px;
    /* aspect-ratio: 1 / 1; */
    /* aspect-ratio: 9 / 16; */
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
}

/* ========================================================
   INTRO SECTION — KEEP IMAGE, UPDATE COLOR OVERLAY
   ======================================================== */

.intro {
    position: relative;
    /* background-image: url("../../../../../assets/beechscene.jpg"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* margin-top: -398px; */
    padding: 0px 0px 40px 0px !important;
}

/* Light transparent overlay */
.intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:#ffffffeb;

}

.intro .container {
    /* margin-top: 327px !important; */
    position: relative;
    z-index: 1000;
}
.intro h2{
    color:#002a8b;
}
/* Light transparent overlay */


/* Light alt section */
.alt {
   position: relative;
     background-image: url("../../../../../assets/beechscene.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.alt::before {
    content: "";
    position: absolute;
    inset: 0;
    background:#f1efe8eb;

}
.alt .container{
z-index: 100!important;
    position:relative;
    text-align: center;
}
.alt .lead{
    text-align: center;
}
.alt .bullet-list {
    margin-left: 45px;
    width: fit-content;
    margin: 0 auto;
}
.alt .bullet-list li{
    text-align: left;
}
.alt p{
    margin: 20px;
}
/* ========================================================
   CTA BUTTONS — SaaS Style
   ======================================================== */

.cta-primary,
.cta-secondary {
    display: inline-block;
    padding: 16px 34px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 12px;
    transition: 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.cta-primary {
    background: var(--primary-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(58,120,242,0.25);
}
.cta-primary:hover {
    background: var(--primary-blue-dark);
}

.cta-secondary {
    background: var(--primary-mint);
    color: #fff;
    box-shadow: 0 4px 12px rgba(56,214,179,0.25);
}
.cta-secondary:hover {
    background: var(--primary-mint-dark);
}

/* ========================================================
   HEADINGS — MODERNIZED
   ======================================================== */
h1, h2, h3, .cta-primary, .cta-secondary {
    font-family: 'Montserrat', sans-serif;
}
h2 {
    font-size: clamp(34px, 40px, 44px);
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 20px;
    text-align: center;
    text-shadow: none;
    line-height: clamp(34px, 40px, 44px);

}

h3 {
    font-size: clamp(24px, 30px, 44px);
    color: var(--primary-mint-dark);
    font-weight: 700;
    line-height: clamp(24px, 40px, 54px); 
      
}

.lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--text-med);
}

/* ========================================================
   7-STEP SECTION — KEEP BACKGROUND IMAGE
   ======================================================== */

.step-section {
    /* background-image: url("../../../../../assets/hero.jpg"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    padding: 85px 0;
}

/* Light white overlay instead of deep navy */
.step-section::before {
    content: "";
    position: absolute;
    inset: 0;
     /* background: linear-gradient(to right, #2957c773, #0082c8e6, #0082c8e6, #2957c773); */
     background: linear-gradient(to right, #2957c7, #0082c8, #0082c8, #2957c7);
}

.step-section .container {
    position: relative;
    z-index: 2;
    padding: 25px;
    background-color: var(--section-panel);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* Steps */
.step {
    margin-bottom: 35px;
    padding: 24px;
    border-left: 6px solid var(--primary-blue);
    background: #fff;
    border-radius: 12px;
    transition: 0.3s ease;
}

.step:hover {
    background: var(--soft-sky);
}

.step h3 {
    color: var(--primary-mint-dark);
}
.step-section .cta-primary{
           background-color: #f06406;
    margin: 0 auto;
    width: fit-content;
    display: block;
}
.bullet-list{
    margin-left: 45px;
}
.bullet-list li::marker {
    font-size: larger;

}
/* ========================================================
   MONEY SHOT — KEEP BG VIDEO, LIGHTEN OVERLAY
   ======================================================== */

.money-shot {
    position: relative;
    padding: 90px 20px;
    overflow: hidden;
    color: var(--text-dark);
}

.money-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
   /*  opacity: 0.12; slightly more visible in light theme */
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Light gradient */
.money-overlay {
    position: absolute;
    inset: 0;
  background:#dae3e0e0;
    z-index: 2;
    pointer-events: none;
}

.money-shot .container {
    position: relative;
    z-index: 3;
}

.money-shot h2 {
    color: var(--primary-blue);
}

.money-shot .lead {
    color: var(--primary-mint-dark);
    font-size: 1.3rem;
}

/* List */
.money-list li {
    list-style: none;
    margin-bottom: 8px;
    font-size: 1.1rem;
}


.fomo a{
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    display: block;
}
.fomo {
   position: relative;
     background-image: url("../../../../../assets/beechscene.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fomo::before {
    content: "";
    position: absolute;
    inset: 0;
     background: linear-gradient(to right, #ff562298, #ff5722f2, #ff5722f2, #ff562298);
    /* background:#ff5722c7; */

}
.fomo .container{
z-index: 100!important;
    position:relative;
    color: #ffffff;

}
.fomo h2,.fomo h3, .fomo .lead{
    color: #ffffff;

}
/* ========================================================
   FOOTER — LIGHT NEUTRAL
   ======================================================== */

.footer {
    background: var(--footer-bg);
    color: var(--text-med);
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
    border-top: 1px solid #ddd;
}