/* ============================================================
   Rapi.In Laundry — V3 Landing Page Stylesheet
   ============================================================
   Color Palette:
     Primary     #5DD6FD
     CTA / Blue  #0B6E99
     Deep Navy   #123B5D
     Soft Blue   #EAF7FC
     White       #FFFFFF
     Dark Text   #173E68
     Light Gray  #F5F9FC
     Yellow      #FFD166
     Coral       #FF626B
     Mid Text    #4A6580
     Light Text  #8DAABB
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --p:    #5DD6FD;
  --cta:  #0B6E99;
  --navy: #123B5D;
  --soft: #EAF7FC;
  --w:    #FFFFFF;
  --dark: #173E68;
  --gray: #F5F9FC;
  --yel:  #FFD166;
  --cor:  #FF626B;
  --mid:  #4A6580;
  --lt:   #8DAABB;
  --bdr:  rgba(11,110,153,.13);

  --r-xs:4px; --r-sm:10px; --r-md:16px;
  --r-lg:24px; --r-xl:36px; --r-pill:999px;

  --sh-xs:0 1px 4px rgba(18,59,93,.07);
  --sh-sm:0 2px 12px rgba(18,59,93,.09);
  --sh-md:0 8px 28px rgba(18,59,93,.13);
  --sh-lg:0 20px 56px rgba(18,59,93,.18);

  --ease:all .23s cubic-bezier(.4,0,.2,1);
  --fh:'Nunito','Plus Jakarta Sans',sans-serif;
  --fb:'Inter',system-ui,sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);color:var(--dark);background:var(--w);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ── Typography ── */
h1,h2,h3,h4{font-family:var(--fh);color:var(--navy);line-height:1.14}
h1{font-size:clamp(2rem,4.8vw,3.4rem);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.025em}
h3{font-size:clamp(1rem,1.8vw,1.25rem);font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{color:var(--mid);line-height:1.75}

/* ── Utilities ── */
.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:88px 0}
.text-center{text-align:center}

.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
      font-weight:700;letter-spacing:.09em;text-transform:uppercase;
      padding:.28rem .9rem;border-radius:var(--r-pill);margin-bottom:.85rem}
.chip-blue{background:var(--soft);color:var(--cta);border:1px solid rgba(93,214,253,.4)}
.chip-dark{background:rgba(18,59,93,.08);color:var(--navy);border:1px solid rgba(18,59,93,.15)}
.chip-white{background:rgba(255,255,255,.18);color:var(--w);border:1px solid rgba(255,255,255,.3)}

.section-intro{text-align:center;max-width:620px;margin-inline:auto;margin-bottom:3rem}
.section-intro h2{margin-bottom:.8rem}
.section-sub{font-size:.97rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     padding:.88rem 1.8rem;border-radius:var(--r-pill);font-weight:700;
     font-size:.95rem;font-family:var(--fb);border:2px solid transparent;
     transition:var(--ease);white-space:nowrap;line-height:1;cursor:pointer;
     text-decoration:none}
.btn-cta{background:var(--cta);color:var(--w);border-color:var(--cta)}
.btn-cta:hover{background:#09587d;transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,110,153,.35)}
.btn-primary{background:var(--p);color:var(--navy);border-color:var(--p)}
.btn-primary:hover{background:#3fc8f7;transform:translateY(-2px);box-shadow:0 8px 22px rgba(93,214,253,.4)}
.btn-navy{background:var(--navy);color:var(--w);border-color:var(--navy)}
.btn-navy:hover{background:var(--cta);transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,110,153,.35)}
.btn-ghost{background:transparent;color:var(--cta);border-color:var(--cta)}
.btn-ghost:hover{background:var(--cta);color:var(--w);transform:translateY(-2px)}
.btn-ghost-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost-dark:hover{background:var(--navy);color:var(--w)}
.btn-lg{padding:1.05rem 2.25rem;font-size:1rem}
.btn-block{width:100%}

/* ── Focus ── */
:focus-visible{outline:3px solid var(--p);outline-offset:3px;border-radius:4px}


/* ================================================================
   NAVBAR
   ================================================================ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--ease)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo img{height:42px;width:auto;object-fit:contain;border-radius:var(--r-xs);display:block}

/* Always light — hero bg is light blue */
#navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(11,110,153,.08)}

#navbar.scrolled{box-shadow:var(--sh-sm)}

.nav-links{display:flex;gap:1.65rem;align-items:center}
.nav-links a{font-size:.88rem;font-weight:600;color:var(--dark);transition:var(--ease);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;
                    height:2px;background:var(--p);transform:scaleX(0);transition:var(--ease)}
.nav-links a:hover{color:var(--cta)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:.5rem;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--dark);
                    border-radius:2px;transition:var(--ease)}

.nav-mobile{display:none;flex-direction:column;background:var(--w);
            padding:1rem 1.5rem 1.5rem;box-shadow:var(--sh-md);
            border-top:1px solid var(--bdr);gap:.15rem}
.nav-mobile.open{display:flex}
.nav-mobile a{font-weight:600;font-size:.95rem;padding:.7rem 0;color:var(--dark);
              border-bottom:1px solid rgba(11,110,153,.06);transition:var(--ease)}
.nav-mobile a:hover{color:var(--cta);padding-left:.5rem}
.nav-mobile .btn{margin-top:.85rem;justify-content:center}


/* ================================================================
   SECTION 1 — HERO
   ================================================================ */
#hero{position:relative;display:flex;flex-direction:column;overflow:hidden}

.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('Background Hero Section.png') center center/cover no-repeat
}

/* Stage = everything above benefit bar */
.hero-stage{position:relative;z-index:1;padding-top:68px}

.hero-cols{
  display:grid;
  grid-template-columns:50% 50%;
  min-height:calc(100vh - 68px - 110px);
  align-items:center;
  padding:52px 0 36px
}

/* ── Left column ── */
.hero-left{max-width:530px;padding-right:1.5rem}

/* COMING SOON — large pill */
.hero-cs{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--navy);color:var(--w);
  font-family:var(--fh);font-size:1.05rem;font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.6rem 1.6rem;border-radius:var(--r-pill);
  margin-bottom:1.4rem;
  box-shadow:0 4px 18px rgba(18,59,93,.3)
}
.cs-dot{width:9px;height:9px;background:#4ade80;border-radius:50%;
        animation:cspulse 2s ease-in-out infinite}
@keyframes cspulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}

.hero-left h1{color:var(--navy);margin-bottom:.95rem;line-height:1.1}
.hero-left h1 em{font-style:normal;color:var(--p)}

.hero-desc{font-size:.98rem;color:var(--mid);max-width:460px;margin-bottom:1.5rem;line-height:1.75}

/* Promo box */
.hero-promo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--w);border:1.5px solid rgba(93,214,253,.45);
  border-radius:var(--r-lg);padding:1.1rem 1.35rem;
  margin-bottom:1.4rem;box-shadow:var(--sh-sm)
}
.hp-left{display:flex;flex-direction:column;gap:.28rem}
.hp-plan{display:inline-block;font-family:var(--fh);font-size:.76rem;font-weight:800;
         letter-spacing:.06em;color:var(--cta);background:var(--soft);
         border:1px solid rgba(93,214,253,.4);padding:.2rem .8rem;
         border-radius:var(--r-pill);align-self:flex-start}
.hp-old{font-size:.86rem;color:var(--lt);text-decoration:line-through;font-weight:600;line-height:1}
.hp-new{font-family:var(--fh);font-size:1.95rem;font-weight:900;color:var(--navy);line-height:1.05}
.hp-new span{font-size:.82rem;font-weight:500;color:var(--mid)}
.hp-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.1rem}
.hp-coral{background:var(--cor);color:var(--w);font-size:.7rem;font-weight:800;
          padding:.22rem .75rem;border-radius:var(--r-pill);white-space:nowrap}
.hp-sep{width:1px;height:16px;background:var(--bdr)}
.hp-code{font-size:.8rem;color:var(--mid);font-weight:500}
.hp-code strong{font-family:'Courier New',monospace;color:var(--navy);letter-spacing:.1em}

/* Save badge */
.hp-right{flex-shrink:0}
.hp-save{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:var(--yel);border:2px dashed rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(255,209,102,.5);
  animation:savepop 3.5s ease-in-out infinite
}
@keyframes savepop{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.07)}}
.hp-save-t{font-family:var(--fh);font-size:.75rem;font-weight:800;color:#7a4a00;line-height:1}
.hp-save-b{font-family:var(--fh);font-size:1rem;font-weight:900;color:#5a3200;line-height:1.1}

/* CTA */
.hero-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.05rem 2.4rem;background:var(--navy);color:var(--w);
  font-family:var(--fh);font-size:1.08rem;font-weight:800;
  border-radius:var(--r-pill);border:none;cursor:pointer;
  transition:var(--ease);box-shadow:0 6px 20px rgba(18,59,93,.3);
  margin-bottom:.85rem
}
.hero-cta-btn:hover{background:var(--cta);transform:translateY(-2px);
                    box-shadow:0 10px 28px rgba(11,110,153,.4)}

.hero-prv{display:flex;align-items:center;gap:.4rem;font-size:.79rem;color:var(--mid)}
.hero-prv svg{flex-shrink:0}
.hero-prv a{color:var(--cta);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hero-prv a:hover{opacity:.75}

/* Right column — empty; imagery from BG PNG */
.hero-right{}

/* ── Benefit bar ── */
.hero-bar{
  position:relative;z-index:1;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(93,214,253,.2);
  box-shadow:0 -1px 0 rgba(11,110,153,.05)
}
.hero-bar-row{display:flex;align-items:stretch;min-height:106px}
.hb-item{display:flex;align-items:center;gap:.9rem;flex:1;padding:1.2rem 1.4rem}
.hb-icon{flex-shrink:0;width:48px;height:48px;display:grid;place-items:center}
.hb-icon svg{width:46px;height:46px}
.hb-text strong{font-family:var(--fh);font-size:.93rem;font-weight:800;
                color:var(--navy);display:block;line-height:1.2;margin-bottom:.18rem}
.hb-text span{font-size:.8rem;color:var(--mid)}
.hb-sep{width:1px;background:var(--bdr);margin:1.2rem 0}


/* ================================================================
   SECTION 2 — PAIN POINTS + BANNER + HOW IT WORKS
   ================================================================ */
#section2{ background:var(--gray) }

/* ── PART A: Pain panel — no background image ── */
.s2-panel-pain{
  padding: 64px 0 56px;
  background: var(--gray);
}

.s2-pain-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.s2-pain-left{ }

.s2-h2-blue{
  color:var(--cta);
  display:block
}

.s2-subhead{
  font-family:var(--fh);font-size:1.05rem;font-weight:700;
  color:var(--navy);margin:1rem 0 .4rem;line-height:1.4
}
.s2-desc{ font-size:.92rem;color:var(--mid);max-width:360px }

/* 2×2 pain cards */
.pain-grid-2x2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem
}

.pain-card-v2{
  display:flex;gap:.75rem;align-items:flex-start;
  background: var(--w);
  border-radius:var(--r-md);
  padding:.9rem 1rem;
  box-shadow:var(--sh-sm);
  border:1px solid rgba(93,214,253,.18);
  transition:var(--ease)
}
.pain-card-v2:hover{ transform:translateY(-2px);box-shadow:var(--sh-md) }

.pcv2-icon{
  width:44px;height:44px;flex-shrink:0;
  background:var(--soft);
  border-radius:var(--r-sm);
  display:grid;place-items:center
}
.pcv2-text strong{
  display:block;font-size:.88rem;font-weight:700;
  color:var(--dark);margin-bottom:.25rem
}
.pcv2-text span{ font-size:.78rem;color:var(--mid);line-height:1.55 }

/* ── PART B: Transition banner ── */
.s2-banner{
  background:var(--navy);
  padding:1.4rem 0
}
.s2-banner-inner{
  display:flex;align-items:center;justify-content:center;
  gap:1.1rem;flex-wrap:wrap;text-align:center
}
.s2-banner-star{
  font-size:1.6rem;color:var(--yel);
  animation:starspin 4s linear infinite
}
@keyframes starspin{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.2) rotate(20deg)}
}
.s2-banner-text{
  display:flex;flex-direction:column;gap:.2rem
}
.s2-banner-text strong{
  font-family:var(--fh);font-size:1.15rem;font-weight:800;
  color:var(--w)
}
.s2-banner-text span{
  font-size:.87rem;color:rgba(255,255,255,.72)
}
.s2-banner-deco{ opacity:.8 }

/* ── PART C: How It Works panel ── */
.s2-panel-how{
  background:var(--gray);
  padding:64px 0 80px
}

.how-head{text-align:center;margin-bottom:3rem}
.how-head h2{margin-bottom:.4rem}
.how-head p{font-size:.93rem}

/* 3-column step row */
.how-steps-v2{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  position:relative;
  align-items:start
}

/* Dashed connecting line between step numbers */
.hsv2-line{
  position:absolute;
  top:24px;                       /* vertically centred with the number circles */
  left:calc(16.6% + 26px);
  right:calc(16.6% + 26px);
  height:2px;
  background:linear-gradient(90deg,var(--p),var(--cta));
  z-index:0;
  border-radius:2px
}

.hsv2-step{
  display:flex;flex-direction:column;align-items:center;
  gap:.75rem;position:relative;z-index:1
}

/* Numbered circle */
.hsv2-num{
  width:50px;height:50px;
  border-radius:50%;
  background:var(--navy);color:var(--w);
  display:grid;place-items:center;
  font-family:var(--fh);font-weight:900;font-size:1.1rem;
  border:4px solid var(--gray);
  box-shadow:0 0 0 3px var(--p);
  flex-shrink:0
}

/* Card below the number */
.hsv2-card{
  background:var(--w);
  border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.75rem;
  box-shadow:var(--sh-sm);
  border:1px solid var(--bdr);
  text-align:center;
  width:100%;
  transition:var(--ease)
}
.hsv2-card:hover{ transform:translateY(-3px);box-shadow:var(--sh-md) }

/* Illustration area */
.hsv2-illo{
  width:80px;height:80px;
  background:var(--soft);
  border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 1rem
}

.hsv2-card h4{
  font-size:.97rem;color:var(--navy);
  margin-bottom:.4rem
}
.hsv2-card p{ font-size:.82rem;color:var(--mid);line-height:1.65 }


/* ================================================================
   SECTION 3 — SERVICES & PRICING
   ================================================================ */
#services{background:var(--w)}

.svc-card{
  max-width:660px;margin-inline:auto;
  background:linear-gradient(135deg,var(--navy) 0%,var(--cta) 100%);
  border-radius:var(--r-xl);padding:3rem 2.75rem;text-align:center;
  box-shadow:var(--sh-lg);position:relative;overflow:hidden
}
.svc-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 20% 50%,
              rgba(93,214,253,.18) 0%,transparent 60%),
             radial-gradient(ellipse 50% 50% at 80% 20%,
              rgba(255,255,255,.06) 0%,transparent 50%)
}
.svc-card>*{position:relative;z-index:1}
.svc-card .chip{margin-bottom:.75rem}
.svc-card h2{color:var(--w);margin-bottom:.6rem}
.svc-price{
  font-family:var(--fh);font-size:clamp(2.4rem,6vw,4rem);
  font-weight:900;color:var(--p);line-height:1;margin:1.1rem 0 .5rem
}
.svc-price span{font-size:1.1rem;font-weight:500;color:rgba(255,255,255,.65)}
.svc-card>p{color:rgba(255,255,255,.75);font-size:.93rem;max-width:420px;
            margin-inline:auto;line-height:1.75}
.svc-note{
  display:inline-block;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);
  font-size:.78rem;font-weight:600;padding:.38rem 1rem;
  border-radius:var(--r-pill);margin-top:1.25rem
}


/* ================================================================
   SECTION 4 — MEMBERSHIP PLANS
   ================================================================ */
#plans{background:var(--gray)}

.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-bottom:2rem}

.plan-card{
  background:var(--w);border-radius:var(--r-lg);border:1.5px solid var(--bdr);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-sm);transition:var(--ease)
}
.plan-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}

/* Headers */
.plan-hdr{padding:1.6rem 1.75rem 1.4rem;position:relative}
.plan-hdr-start{background:linear-gradient(135deg,#e4f3fc,#ceeaf9)}
.plan-hdr-plus{background:linear-gradient(135deg,var(--navy),#1a4f7a)}
.plan-hdr-pro{background:linear-gradient(135deg,var(--cta),#0d8abe)}

.plan-name{font-family:var(--fh);font-size:1.1rem;font-weight:900;
           letter-spacing:.02em;margin-bottom:.45rem}
.plan-hdr-start .plan-name{color:var(--navy)}
.plan-hdr-plus  .plan-name,.plan-hdr-pro .plan-name{color:var(--w)}

.plan-p-old{font-size:.84rem;font-weight:600;text-decoration:line-through;line-height:1;margin-bottom:.18rem}
.plan-hdr-start .plan-p-old{color:rgba(18,59,93,.4)}
.plan-hdr-plus  .plan-p-old,.plan-hdr-pro .plan-p-old{color:rgba(255,255,255,.4)}

.plan-p-new{font-family:var(--fh);font-size:2.05rem;font-weight:900;line-height:1;margin-bottom:.35rem}
.plan-hdr-start .plan-p-new{color:var(--navy)}
.plan-hdr-plus  .plan-p-new{color:var(--p)}
.plan-hdr-pro   .plan-p-new{color:var(--w)}

.plan-p-period{font-size:.8rem;font-weight:500;vertical-align:baseline;opacity:.65}

/* Quota badge row */
.plan-quota-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.plan-quota-badge{
  font-size:.74rem;font-weight:800;padding:.22rem .75rem;
  border-radius:var(--r-pill)
}
.plan-hdr-start .plan-quota-badge{background:rgba(93,214,253,.22);color:var(--navy)}
.plan-hdr-plus  .plan-quota-badge{background:rgba(93,214,253,.25);color:var(--w)}
.plan-hdr-pro   .plan-quota-badge{background:rgba(255,255,255,.18);color:var(--w)}

.plan-quota-label{font-size:.74rem;font-weight:500}
.plan-hdr-start .plan-quota-label{color:var(--mid)}
.plan-hdr-plus  .plan-quota-label,.plan-hdr-pro .plan-quota-label{color:rgba(255,255,255,.65)}

/* Body */
.plan-body{padding:1.4rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:1rem;flex:1}

.plan-detail{display:flex;justify-content:space-between;align-items:center;
             font-size:.84rem;padding-bottom:.55rem;border-bottom:1px solid var(--bdr)}
.plan-detail-lbl{color:var(--mid);font-weight:500}
.plan-detail-val{color:var(--navy);font-weight:700}

.plan-feats{display:flex;flex-direction:column;gap:.5rem}
.plan-feat{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--dark)}
.plan-feat-chk{color:var(--cta);font-size:.92rem;flex-shrink:0;margin-top:.1rem}

.plan-cta{margin-top:auto}



/* ================================================================
   SECTION 5 — FAQ
   ================================================================ */
#faq{background:var(--w)}

.faq-wrap{max-width:780px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--bdr)}
.faq-btn{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;border:none;text-align:left;
  padding:1.25rem 0;gap:1rem;cursor:pointer;transition:var(--ease)
}
.faq-btn:hover .faq-q{color:var(--cta)}
.faq-q{font-family:var(--fh);font-size:.97rem;font-weight:700;
       color:var(--dark);transition:var(--ease);line-height:1.4}
.faq-ic{
  width:28px;height:28px;border-radius:50%;background:var(--soft);
  display:grid;place-items:center;color:var(--cta);
  font-size:1.1rem;font-weight:700;flex-shrink:0;transition:var(--ease)
}
.faq-item.open .faq-ic{background:var(--navy);color:var(--w);transform:rotate(45deg)}
.faq-item.open .faq-q{color:var(--navy)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .36s ease}
.faq-item.open .faq-ans{max-height:320px}
.faq-ans p{padding-bottom:1.3rem;font-size:.9rem;color:var(--mid);line-height:1.8}


/* ================================================================
   SECTION 6 — EARLY ACCESS + FOOTER
   ================================================================ */
#early-access{
  background:linear-gradient(135deg,var(--navy) 0%,var(--cta) 100%);
  position:relative;overflow:hidden
}
#early-access::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 15% 50%,
              rgba(93,214,253,.18) 0%,transparent 60%),
             radial-gradient(ellipse 50% 50% at 85% 20%,
              rgba(255,255,255,.05) 0%,transparent 50%)
}

.ea-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4.5rem;align-items:start;padding:88px 0
}

/* CTA side */
.ea-cta h2{color:var(--w);margin-bottom:.9rem}
.ea-cta>p{color:rgba(255,255,255,.75);font-size:.95rem;margin-bottom:2rem;line-height:1.8}

/* Form card */
.ea-card{
  background:var(--w);border-radius:var(--r-lg);
  padding:2rem 2rem 1.75rem;box-shadow:var(--sh-lg)
}
.ea-card h3{margin-bottom:.3rem;font-size:1.1rem}
.ea-card>p{font-size:.85rem;margin-bottom:1.1rem}

.preview-note{
  display:flex;align-items:center;gap:.55rem;
  background:#fef9ec;border:1px solid #f59e0b;
  border-radius:var(--r-sm);padding:.6rem 1rem;
  font-size:.77rem;color:#92400e;font-weight:600;margin-bottom:1.1rem
}

.form-grp{margin-bottom:.9rem}
.form-grp label{display:block;font-size:.82rem;font-weight:700;
                color:var(--dark);margin-bottom:.38rem}
.form-grp input{
  width:100%;padding:.75rem 1rem;border:1.5px solid var(--bdr);
  border-radius:var(--r-sm);font-family:var(--fb);font-size:.92rem;
  color:var(--dark);background:var(--w);outline:none;transition:var(--ease)
}
.form-grp input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(93,214,253,.2)}
.form-grp input.invalid{border-color:var(--cor)}
.f-err{font-size:.74rem;color:var(--cor);margin-top:.28rem;display:none}
.f-err.show{display:block}

.btn-submit{
  width:100%;padding:.93rem;font-size:.95rem;font-weight:700;
  font-family:var(--fb);border-radius:var(--r-pill);border:none;
  transition:var(--ease);cursor:not-allowed;background:var(--lt);color:var(--w);margin-top:.85rem
}
.btn-submit.active{background:var(--cta);cursor:pointer}
.btn-submit.active:hover{background:#09587d;transform:translateY(-2px)}

.ea-prv{
  font-size:.74rem;color:var(--lt);text-align:center;margin-top:.75rem;line-height:1.6
}
.ea-prv a{color:var(--cta);text-decoration:underline;text-underline-offset:3px}
.ea-disc{font-size:.73rem;color:var(--lt);text-align:center;
         margin-top:.5rem;font-style:italic;line-height:1.6}

/* ── Footer ── */
footer{background:#0d2a46;color:rgba(255,255,255,.65);padding:56px 0 28px}

.ft-grid{
  display:grid;grid-template-columns:2fr 1fr 1.3fr 1.5fr;
  gap:2.25rem;margin-bottom:2.5rem
}
.ft-logo{height:42px;width:auto;object-fit:contain;margin-bottom:.7rem;
         filter:brightness(0) invert(1);opacity:.85}
.ft-brand p{font-size:.85rem;color:rgba(255,255,255,.48);line-height:1.75;margin-bottom:1rem}
.ft-socials{display:flex;gap:.5rem;flex-wrap:wrap}
.ft-soc{
  display:flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.58);
  font-size:.75rem;font-weight:600;padding:.3rem .8rem;
  border-radius:var(--r-pill);transition:var(--ease)
}
.ft-soc:hover{background:rgba(255,255,255,.15);color:var(--w)}
.ft-col h5{font-family:var(--fh);font-size:.78rem;font-weight:800;
           letter-spacing:.08em;text-transform:uppercase;
           color:var(--w);margin-bottom:.95rem}
.ft-col ul{display:flex;flex-direction:column;gap:.48rem}
.ft-col ul a{font-size:.85rem;color:rgba(255,255,255,.48);transition:var(--ease)}
.ft-col ul a:hover{color:var(--w);padding-left:.35rem}
.ft-row{display:flex;gap:.6rem;align-items:flex-start;
        font-size:.85rem;color:rgba(255,255,255,.48);margin-bottom:.6rem}
.ft-divider{border:none;border-top:1px solid rgba(255,255,255,.08);margin-bottom:1.4rem}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;
           flex-wrap:wrap;gap:.75rem}
.ft-bottom p{font-size:.77rem;color:rgba(255,255,255,.32)}


/* ================================================================
   MODALS
   ================================================================ */
.modal-bd{
  position:fixed;inset:0;background:rgba(18,59,93,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .27s ease
}
.modal-bd.open{opacity:1;pointer-events:all}
.modal-box{
  background:var(--w);border-radius:var(--r-lg);padding:2.1rem 2.1rem 1.8rem;
  width:100%;max-width:470px;box-shadow:var(--sh-lg);position:relative;
  transform:translateY(16px) scale(.97);opacity:0;
  transition:transform .27s ease,opacity .27s ease;max-height:90vh;overflow-y:auto
}
.modal-bd.open .modal-box{transform:none;opacity:1}
.modal-close{
  position:absolute;top:.9rem;right:.9rem;
  width:30px;height:30px;border-radius:50%;
  background:var(--soft);display:grid;place-items:center;
  font-size:.9rem;color:var(--mid);cursor:pointer;
  transition:var(--ease);border:none
}
.modal-close:hover{background:var(--navy);color:var(--w)}
.modal-box h3{margin-bottom:.3rem}
.modal-box>p{font-size:.86rem;color:var(--mid)}

/* Privacy */
.prv-content{font-size:.87rem;color:var(--mid);line-height:1.8}
.prv-content p{margin-bottom:.9rem}
.prv-content h4{color:var(--navy);margin:.85rem 0 .3rem}
.prv-preview-note{
  background:var(--soft);border:1px solid rgba(93,214,253,.4);
  border-radius:var(--r-sm);padding:.7rem 1rem;font-size:.78rem;
  color:var(--cta);font-weight:600;margin-top:.8rem
}


/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal{opacity:0;transform:translateY(22px);
        transition:opacity .54s ease,transform .54s ease}
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s}
.rd3{transition-delay:.3s} .rd4{transition-delay:.4s}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1024px){
  /* Hero */
  .hero-cols{grid-template-columns:1fr;min-height:auto;
             padding:52px 0 32px;text-align:center}
  .hero-left{padding-right:0;max-width:580px;margin-inline:auto}
  .hero-right{display:none}
  .hp-meta{justify-content:center}
  .hero-cta-btn{width:100%;max-width:400px}
  .hero-prv{justify-content:center}
  .hero-promo{justify-content:center}
  /* Benefit bar */
  .hero-bar-row{flex-wrap:wrap}
  .hb-item{flex:1 1 200px}
  .hb-sep{display:none}
  /* Section 2 */
  .s2-pain-layout{ grid-template-columns: 1fr }
  .how-steps-v2{ grid-template-columns:1fr;gap:1.75rem }
  .hsv2-line{ display:none }
  /* Plans */
  .plans-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  /* EA */
  .ea-inner{grid-template-columns:1fr;gap:3rem;padding:72px 0}
  /* Footer */
  .ft-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .section{padding:72px 0}
  h1{font-size:clamp(1.9rem,7vw,2.6rem)}
  .nav-links,.nav-cta-desktop{display:none}
  .nav-hamburger{display:flex}
  /* Hero benefit bar stacks */
  .hb-item{flex:1 1 100%;border-top:1px solid var(--bdr);padding:.95rem 1rem}
  .hb-item:first-child{border-top:none}
  /* Section 2 */
  .s2-pain-layout{ grid-template-columns:1fr }
  .s2-pain-left{ text-align:center }
  .s2-desc{ max-width:100%;margin-inline:auto }
  .pain-grid-2x2{ grid-template-columns:1fr }
  .how-steps-v2{ grid-template-columns:1fr }
  .hsv2-line{ display:none }
  .s2-banner-text strong{ font-size:1rem }
  .hp-new{font-size:1.65rem}
  /* Footer */
  .ft-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;text-align:center}
  /* EA */
  .ea-inner{text-align:center}
}

@media(max-width:480px){
  .plans-grid{max-width:100%}
  .modal-box{padding:1.7rem 1.2rem 1.5rem}
  .hero-promo{flex-direction:column;align-items:flex-start;gap:.7rem}
  .hp-save{width:62px;height:62px}
  .hp-save-b{font-size:.88rem}
}