/* Root vars */
:root{
  --navy: rgb(6, 29, 73); /* deep navy */
  --teal: rgb(234, 226, 214); /* light teal */
  --bg2: rgb(128, 174, 189);
  --muted:#9aa6ab;
  --bg:#ffffff;
  --accent:#d2eef0;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--navy)}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{padding:12px 0;text-align:center}
.small-logo{font-weight:700;color:var(--navy);font-family:Poppins, Montserrat;font-size:18px}
.small-logo img{width:52px;height:auto;display:inline-block;vertical-align:middle}

/* reduce header for very small screens */
@media (max-width:520px){
  .small-logo img{width:40px}
} 

/* HERO */
.hero{padding:clamp(48px, 10vh, 140px) 0;text-align:center;background:var(--bg)}
.brand{font-family:Poppins, Montserrat;font-weight:800;letter-spacing:-0.02em;color:var(--navy);font-size:clamp(64px, 16vw, 160px);margin:10px 0} 
.btn{display:inline-block;padding:12px 22px;border-radius:3px;text-decoration:none;font-weight:600}
.btn-cta{background:var(--bg2);color:#fff;margin-top:18px}
.btn-cta.light{background:#bedfe2;color:var(--navy)}
.btn.outline{background:var(--navy);color:#fff;padding:12px 24px;border-radius:3px}

/* FEATURE BANNER */
.feature-banner{background:var(--bg2);padding:clamp(40px, 8vh, 140px) 20px;text-align:center;min-height:clamp(260px, 34vh, 520px);display:flex;align-items:center;justify-content:center} 
.feature-text{max-width:900px;margin:0 auto;color:var(--teal);font-size:clamp(18px,4vw,28px);font-weight:300;line-height:1.6}

/* WHO */
.who{padding:clamp(56px, 14vh, 160px) 0}
.section-title{font-family:Montserrat;font-weight:800;color:var(--navy);font-size:clamp(40px, 7.5vw, 96px);letter-spacing: -0.05em;margin:0 0 30px}
/* section title enters from left */
.section-title[data-animate]{transform:translateX(-40px);opacity:0}
.section-title.in-view{transform:none;opacity:1}
.circle-list{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.circle-item{flex:1 1 180px;text-align:center}
.circle-item img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:8px solid #fff;box-shadow:0 10px 22px rgba(6,29,73,0.06)}
.circle-item p{color:var(--navy);font-size:15px;margin-top:14px}
@media (max-width:900px){
  .circle-item img{width:150px;height:150px}
}
@media (max-width:520px){
  .circle-item img{width:120px;height:120px}
  .section-title{font-size:clamp(28px,6vw,48px)}
}
/* BENEFITS */
:root{--benefit-img-width: clamp(360px, 45vw, 640px)}
.benefits{padding:clamp(40px, 10vh, 140px) 0;position:relative;overflow:visible;min-height:clamp(420px, 70vh, 820px)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
/* position the image absolutely flush to the left of the viewport */
.benefits-img{position:absolute;left:0;top:0;bottom:0;width:var(--benefit-img-width);overflow:hidden}
.benefits-img img{width:100%;height:100%;object-fit:cover;border-radius:0 12px 12px 0}
/* animate image from left */
.benefits-img[data-animate]{transform:translateX(-40px);opacity:0}
.benefits-img.in-view{transform:none;opacity:1}
/* align content to the right and avoid overlap with absolute image */
.benefits-content{text-align:right;margin-left:calc(var(--benefit-img-width) + 5px)}
.big-title{font-family:Montserrat;font-weight:900;transform: scaleY(0.9);letter-spacing: -0.05em;font-size:clamp(44px, 7vw, 110px);color:var(--navy);margin:0}
.divider{border:0;border-top:3px solid rgba(6,29,73,0.12);width:80%;margin:18px 0 24px;margin-left:auto}
.benefit-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.benefit-list li{display:flex;gap:30px 30px;align-items:flex-start}
.num{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;font-weight:700}
.benefit-list p{margin:0;color:var(--navy)}
@media (max-width:900px){
  /* on smaller screens the image becomes normal flow */
  :root{--benefit-img-width:100%}
  .benefits{min-height:auto}
  .benefits-img{position:relative;left:auto;top:auto;bottom:auto;width:100%;overflow:visible}
  .benefits-img img{height:auto;border-radius:6px}
  .benefits-content{text-align:left;margin-left:0}
}


/* HOW */
.how{background:var(--navy);color:#fff;padding:clamp(48px, 10vh, 140px) 0;text-align:center} 
/* Use same section title style but ensure color is white on dark bg */
.how .section-title{font-family:Poppins;margin:0;font-size:clamp(36px,6.5vw,84px);color:#fff}
/* Divider tailored for dark background */
.how .divider{border-top:2px solid rgba(255,255,255,0.12);width:60%;margin:18px auto 24px}
/* increase list sizes and spacing for readability */
.how-list{list-style:disc;margin:28px auto 28px;padding-left:26px;max-width:680px;text-align:left;color:#e8f3f9}
.how-list li{margin:14px 0;font-weight:300;font-size:clamp(16px,2.4vw,20px);line-height:1.6}

/* CTA FOOTER */
.big-cta{padding:clamp(64px, 12vh, 220px) 0;background:#fff;min-height:clamp(420px, 50vh, 780px)}
.big-cta .container{position:relative;min-height:clamp(260px,38vh,560px)}
.tiny{font-size:clamp(13px,1.25vw,16px);color:var(--navy);margin:18px 0 6px;text-align:center;letter-spacing:3px;position:relative}
/* horizontal bar above the tiny text - longer and navy */
.big-cta .tiny::before{content:"";display:block;width:280px;height:2px;background:var(--navy);margin:0 auto 12px;opacity:0;transform:translateY(-6px);transition:opacity .6s ease, transform .6s ease}
.big-cta .tiny.in-view::before{opacity:1;transform:none}
@media (max-width:900px){
  .big-cta .tiny::before{width:160px}
}
/* Large title aligned right with vertical rule */
.cta-title{font-family:Montserrat;letter-spacing: -0.05em;font-size:clamp(64px, 7vw, 160px);margin:0, 20px, 0, 50px;color:var(--navy);text-align:right;width:60%;margin-left:auto;line-height:0.86;display:block;position:relative}
.cta-title br{display:block;margin-bottom:-8px}
/* vertical rule positioned left of the title without overlapping */
.cta-title::before{content:'';position:absolute;right:calc(100% + 22px);top:10%;width:2px;height:72%;transform:none}
@media (max-width:900px){
  .cta-title{width:100%;text-align:center}
  .cta-title::before{display:none}
}
/* Buttons aligned to left bottom of the container */
.cta-buttons{left:0;bottom:0;display:flex;gap:48px;justify-content:flex-start}
.cta-buttons .btn{width:220px;padding:18px 0;border-radius:4px;text-align:center;font-weight:700}
.btn.outline{background:var(--navy);color:#fff;padding:18px 0;width:220px}

@media (max-width:900px){
  .cta-title{width:100%;text-align:center;font-size:clamp(40px,8vw,64px)}
  .cta-title::before{display:none}
  .cta-buttons{position:static;margin-top:28px;justify-content:center}
  .cta-buttons .btn{width:180px}
}

/* Footer tiny */
.site-footer{padding:30px 0;text-align:center}
.footer-logo{font-weight:800}
.footer-logo img{width:52px;height:auto;display:inline-block;vertical-align:middle}

/* Scroll animations */
[data-animate]{opacity:0;transform:translateY(20px) scale(.98);transition:opacity .72s cubic-bezier(.2,.9,.2,1), transform .72s cubic-bezier(.2,.9,.2,1);will-change:transform,opacity}
[data-animate].in-view{opacity:1;transform:none}
[data-animate].scale-only{transform:scale(.98);transition:transform .72s cubic-bezier(.2,.9,.2,1)}
.delay-1{transition-delay:.06s}
.delay-2{transition-delay:.14s}
.delay-3{transition-delay:.22s}
.delay-4{transition-delay:.30s}
@media (prefers-reduced-motion: reduce){*[data-animate]{transition:none!important;transform:none!important;opacity:1!important}}

/* Brand subtle pulse while in-view */
.brand{display:inline-block;will-change:transform}
.brand.in-view{animation:brandPulse 6s ease-in-out infinite}
@keyframes brandPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .brand.in-view{animation:none}
}

/* Button hover effects */
.btn{transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;will-change:transform,box-shadow}
.btn:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 20px rgba(6,29,73,0.12)}

/* Primary CTA (light teal) - hover to navy */
.btn-cta{background:var(--bg2);color:var(--teal)}
.btn-cta:hover{background:var(--navy);color:#fff}
.btn-cta.light{background:#bedfe2;color:var(--navy)}
.btn-cta.light:hover{background:rgb(194,210,204);color:var(--navy)}

/* Outline buttons: invert on hover using teal */
.btn.outline{background:var(--navy);color:#fff}
.btn.outline:hover{background:var(--teal);color:var(--navy);box-shadow:0 8px 18px rgba(6,29,73,0.08)}


/* Responsiveness */
@media (max-width:900px){
  .circle-list{justify-content:space-around}
  .two-col{grid-template-columns:1fr}
  .benefits-img{order:0}
  .big-title{font-size:40px}
}

@media (max-width:520px){
  .section-title{font-size:clamp(28px,6vw,48px)}
  .cta-title{font-size:clamp(28px,7vw,48px)}
  .benefit-list{grid-template-columns:1fr}
  .circle-item img{width:120px;height:120px}
}