/* ============================================================
   GLOBAL RESET
   ============================================================ */
*{
  margin:0; 
  padding:0;
  font-family:'Nunito',sans-serif;
  box-sizing:border-box;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html {
  background-color: #f5f6f8;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body{
  background:#fff;
  width: 100%;
  max-width:1440px;
  margin:0 auto;
  box-shadow:0 0 40px rgba(26, 20, 95, .08);
  position:relative;
  overflow-x: hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  border-bottom:1px solid #e8eaed;
  padding:0 40px;
}

.navbar-inner{
  max-width:1280px;
  margin:0 auto;
  height:64px;
  display:flex;
  align-items:center;
  gap:32px;
}

.navbar-brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.navbar-logo{
  height:28px;
  width:auto;
  display:block;
}

.navbar-links{
  display:flex;
  align-items:center;
  gap:28px;
  flex:1;
}

.navbar-links a{
  color:#1A145F;
  font-size:15px;
  font-weight:700;
  transition:color .2s;
}

.navbar-links a:hover{
  color:#00A2C7;
}

.navbar-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}

.nav-login{
  color:#1A145F;
  font-size:15px;
  font-weight:700;
}

.nav-cta{
  background:#00A2C7;
  color:#fff;
  font-size:15px;
  font-weight:800;
  padding:10px 22px;
  border-radius:15px;
  transition:background .2s;
}

.nav-cta:hover{
  background:#0090b3;
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider{
  background:#00A2C7;
  position:relative;
  overflow:hidden;
  width:100%;
}

.slides-container{
  width:100%;
  overflow:hidden;
  position:relative;
}

.slides-wrapper{
  display:flex;
  will-change:transform;
  transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide{
  flex:0 0 100%;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:60px 80px 80px;
  position:relative;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
}

.home-page .hero-content{
  max-width:520px;
  flex-shrink:0;
  position:relative;
  z-index:2;
}

.section-label{
  color:#FFD15C;
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:block;
  margin-bottom:18px;
}

.home-page .hero-content h1{
  font-size:clamp(36px, 5vw, 60px);
  font-weight:900;
  line-height:1.08;
  color:#1A145F;
}

.home-page .hero-content h1 span{
  display:inline;
  color:#fff;
}

.hero-btn{
  display:inline-block;
  margin-top:30px;
  background:#1A145F;
  color:#fff;
  padding:16px 40px;
  border-radius:14px;
  font-weight:800;
  font-size:16px;
  transition:background .2s;
}

.hero-btn:hover{
  background:#120f45;
}

.hero-note{
  margin-top:16px;
  font-size:11px;
  max-width:420px;
  color:#064d63;
  line-height:1.5;
}

.hero-image{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:42%;
  z-index:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
}

.slider-controls{
  position:absolute;
  bottom:24px;
  left:80px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:10;
}

.slider-controls button{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}

.slider-controls button:hover{
  background:rgba(255,255,255,.2);
}

/* ============================================================
   PRODUCTS SECTION - HOME PAGE SPECIFIC
   ============================================================ */
.home-page .products-section{
  background:#00A2C7;
  padding:0 80px 70px;
}

.home-page .products-section h3{
  color:#fff;
  font-size:20px;
  font-weight:900;
  margin-bottom:20px;
  padding-bottom:16px;
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:24px;
}

.home-page .products-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.home-page .product-card{
  background:#fff;
  min-height:140px;
  border-radius:6px;
  padding:14px 14px 8px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.home-page .product-card h4{
  color:#1A145F;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  max-width:65%;
}

.home-page .product-card p{
  margin-top:4px;
  font-size:12px;
  color:#555;
  line-height:1.4;
  max-width:95%;
}

.home-page .product-card a{
  display:block;
  margin-top:auto;
  padding-top:10px;
  font-weight:800;
  font-size:13px;
  color:#0087C7;
  position:relative;
  z-index:2;
}

.home-page .product-card .card-image{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:80px;
  height:80px;
  overflow:hidden;
}

.home-page .product-card .card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ============================================================
   BENEFITS
   ============================================================ */
.home-page .benefits{
  padding:80px 80px 60px;
  text-align:center;
  background:#fff;
}

.home-page .benefits h2{
  font-size:clamp(28px, 3.5vw, 46px);
  color:#1A145F;
  font-weight:900;
  margin-bottom:60px;
  line-height:1.15;
}

.home-page .benefits h2 span{
  color:#00A2C7;
}

.home-page .benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.home-page .benefit-image{
  width:180px;
  height:180px;
  margin:0 auto 20px;
  overflow:hidden;
}

.home-page .benefit-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.home-page .benefit h3{
  font-size:18px;
  color:#1A145F;
  font-weight:900;
  margin-bottom:12px;
  line-height:1.3;
}

.home-page .benefit p{
  font-size:15px;
  color:#444;
  line-height:1.6;
}

/* ============================================================
   MORTGAGE RATES
   ============================================================ */
.home-page .rates{
  padding:70px 80px;
  text-align:left;
  background:#fff;
}

.home-page .rates h2{
  font-size:clamp(24px, 3vw, 40px);
  font-weight:900;
  color:#1A145F;
  margin-bottom:18px;
  line-height:1.15;
}

.home-page .rates h2 span{
  color:#00A2C7;
}

.home-page .rates-desc{
  font-size:16px;
  color:#444;
  margin-bottom:50px;
  max-width:900px;
}

.home-page .rates-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.home-page .rate-card{
  background:#fff;
  padding:44px 28px 28px;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.10);
  position:relative;
  text-align:left;
}

.home-page .rate-card > span{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  background:#00A2C7;
  padding:7px 18px;
  border-radius:50px;
  color:#fff;
  font-weight:800;
  font-size:11px;
  letter-spacing:.06em;
  white-space:nowrap;
}

.home-page .rate-card h3{
  font-size:36px;
  color:#00A2C7;
  font-weight:900;
  margin-top:4px;
}

.home-page .rate-card p{
  font-size:24px;
  font-weight:900;
  color:#1A145F;
  margin:0;
}

.home-page .rate-card h4{
  font-size:30px;
  font-weight:900;
  color:#1A145F;
  margin-top:6px;
}

.home-page .rate-card small{
  font-size:20px;
  font-weight:900;
  color:#1A145F;
}

.home-page .rates-note{
  font-size:12px;
  color:#888;
  text-align:center;
  margin-top:20px;
}

.home-page .rate-btn-wrap{
  text-align:center;
  margin-top:40px;
}

.home-page .rate-btn{
  display:block;
  background:#00A2C7;
  color:#fff;
  border:none;
  padding:16px 44px;
  border-radius:14px;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  transition:background .2s;
  text-decoration:none;
  margin: 40px auto 0;
  width: fit-content;
}

.home-page .rate-btn:hover{
  background:#0090b3;
}

/* ============================================================
   MONEY APP SECTION
   ============================================================ */
.money-app-section{
  position:relative;
  background-image:url('../images/BR20-255131_AppDownload_BG@2x.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

/* Upper transparent zone */
.money-top{
  position:relative;
  background:transparent;
  padding:70px 70px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-evenly;
  gap:40px;
  min-height:580px;
}

.phone-container{
  position:relative;
  width:290px;
  flex-shrink:0;
  z-index:2;
  margin-top:20px;
}

.phone-container img{
  width:100%;
  height:auto;
}

.money-content{
  flex:1;
  max-width:400px;
  padding-top:130px;
  z-index:2;
  position:relative;
}

.money-content h2{
  color:white;
  font-size:37px;
  line-height:1.1;
  font-weight:900;
}

.money-content h2 span{
  color:#1A145F;
}

.qr-download{
  margin-top:32px;
  width:310px;
}

.qr-download img{
  width:100%;
  height:auto;
}

/* Lower transparent zone */
.money-bottom{
  background:transparent;
  position:relative;
  padding:60px 80px 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.members-title{
  position:relative;
  z-index:2;
  flex:1;
}

.members-title h2{
  font-size:clamp(26px, 3vw, 44px);
  line-height:1.1;
  color:#fff;
  font-weight:900;
  max-width:380px;
}

.members-title h2 span{
  color:#1A145F;
}

.member-stats{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 60px;
}

.stat h3{
  font-size:clamp(28px, 3vw, 48px);
  color:#1A145F;
  font-weight:900;
  line-height:1;
}

.stat p{
  color:#fff;
  font-size:16px;
  font-weight:700;
  margin-top:2px;
}

/* Legacy absolute-positioned money-bg kept hidden so nothing breaks */
.money-bg{ display:none; }

/* ============================================================
   SECURITY SECTION
   ============================================================ */
.security-section{
  width:100%;
}

/* Featured-in logos strip */
.featured-top{
  min-height:200px;
  background:#00A2C7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:40px 80px;
}

.featured-top-label{
  color:rgba(255,255,255,.8);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
}

.featured-image{
  max-width:720px;
  width:100%;
}

.featured-image img{
  width:100%;
  height:auto;
}

/* Dark security zone */
.security-content{
  position:relative;
  min-height:600px;
  overflow:hidden;
  background:#241760;
  display:flex;
  align-items:center;
  padding:80px;
  gap:60px;
}

.security-bg{
  position:absolute;
  inset:0;
  z-index:1;
}

.security-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.safe-image{
  position:relative;
  z-index:3;
  width:340px;
  flex-shrink:0;
}

.safe-image img{
  width:100%;
  height:auto;
}

.security-text{
  position:relative;
  z-index:3;
  max-width:500px;
}

.security-text h2{
  font-size:clamp(28px, 3.5vw, 52px);
  line-height:1.1;
  color:#fff;
  font-weight:900;
  margin-bottom:36px;
}

.security-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 32px;
}

.security-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.tick-icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  margin-top:2px;
}

.security-item span{
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media(max-width:1024px){

  .navbar{
    padding:0 24px;
  }

  .navbar-links a{
    font-size:13px;
  }

  .hero-slider,
  .home-page .products-section{
    padding-left:40px;
    padding-right:40px;
  }

  .products-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .home-page .benefits,
  .home-page .rates,
  .money-top,
  .money-bottom,
  .security-content,
  .featured-top{
    padding-left:40px;
    padding-right:40px;
  }

  .home-page .rates-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .security-content{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:60px;
  }

  .security-list{
    grid-template-columns:1fr;
  }

  .security-item{
    justify-content:flex-start;
    text-align:left;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media(max-width:768px){

  /* Navbar */
  .navbar-inner{ gap:16px; }
  .navbar-links{ display:none; }

  /* Hero */
  .hero-slider{
    padding:0;
  }

  .slide{
    flex-direction:column;
    align-items:flex-start;
    padding:40px 20px 80px;
    min-height:auto;
    gap:20px;
  }

  .slider-controls{
    left:20px;
    bottom:16px;
  }

  .home-page .hero-content{
    max-width:100%;
    position:relative;
    z-index:2;
    width:100%;
  }

  .home-page .hero-content h1{
    font-size:clamp(28px, 8vw, 40px);
  }

  .hero-image{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    height:clamp(180px, 42vw, 280px);
    margin-top:8px;
    z-index:1;
    border-radius:12px;
    overflow:hidden;
  }

  .hero-image img{
    object-fit:cover;
    object-position:center center;
    height:100%;
    width:100%;
  }

  /* Products */
  .products-section{
    padding:0 20px 40px;
  }

  .products-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* Benefits */
  .home-page .benefits{
    padding:50px 20px;
  }

  .home-page .benefits-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .home-page .benefit-image{
    width:140px;
    height:140px;
  }

  /* Rates */
  .home-page .rates{
    padding:50px 20px;
  }

  .home-page .rates-grid{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }

  /* Money app */
  .money-top{
    flex-direction:column;
    align-items:center;
    padding:40px 20px 0;
    min-height:auto;
  }

  .phone-container{
    width:220px;
  }

  .money-content{
    padding-top:0;
    text-align:center;
  }

  .qr-download{
    width:260px;
    margin:28px auto 0;
  }

  .money-bottom{
    flex-direction:column;
    padding:40px 20px;
    gap:32px;
    text-align:center;
  }

  .members-title h2{
    max-width:100%;
  }

  .member-stats{
    gap:20px 40px;
  }

  /* Security */
  .featured-top{
    padding:32px 20px;
  }

  .security-content{
    flex-direction:column;
    padding:40px 20px;
    text-align:center;
    gap:30px;
  }

  .safe-image{
    width:240px;
  }

  .security-list{
    grid-template-columns:1fr;
  }

  .security-item{
    text-align:left;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================ */
@media(max-width:480px){

  .products-grid{
    grid-template-columns:1fr;
  }

  .home-page .rates-grid{
    grid-template-columns:1fr;
  }

  .home-page .rate-card{
    padding:40px 20px 20px;
  }
}

/* ===================================== */
/* CTA SECTION */
/* ===================================== */

.cta-section{
    background:#00A2C7;
    position:relative;
    overflow:hidden;
    min-height:750px;
    padding-top:70px;
}

/* Top dark line */

.cta-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#241760;
}

.cta-content{
    text-align:center;
    position:relative;
    z-index:5;
}

.cta-content h2{
    font-size:50px;
    line-height:1.05;
    font-weight:800;
    color:white;
}

.cta-content h2 span{
    color:#241760;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:45px;
    width:150px;
    height:52px;
    border-radius:18px;
    background:#241760;
    color:white;
    text-decoration:none;
    font-weight:800;
    font-size:18px;
}

/* Hands Image */

.hands-image{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:1100px;
    z-index:1;
}

.hands-image img{
    display:block;
    width:100%;
    height:auto;
}

/* ===================================== */
/* DISCLAIMER SECTION */
/* ===================================== */

.loan-terms-section{
    background:#e7e5ea;
    padding:70px 0 40px;
}

.loan-terms-container{
    max-width:1080px;
    margin:auto;
}

.loan-terms-container h3{
    text-align:center;
    color:#241760;
    font-size:13px;
    font-weight:800;
    text-decoration:underline;
    margin-bottom:25px;
}

.loan-terms-container p{
    color:#241760;
    font-size:11px;
    line-height:1.35;
    margin-bottom:18px;
}

/* ============================================================
   SCROLL FADE-IN ANIMATIONS
   ============================================================ */
.phone-container,
.featured-image,
.safe-image {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform, opacity;
}

.phone-container.animate-in,
.featured-image.animate-in,
.safe-image.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   AUTH SECTION (GET STARTED)
   ============================================================ */
body.signup-page{
    background:#f7f7f7;
}

/* HEADER */

.signup-header{
    height:60px;
    background:#ffffff;
    border-bottom:1px solid #d8d8d8;
    display:flex;
    align-items:center;
    padding:0 35px;
}

.logo-container{
    width:84px;
    height:20px;
}

.logo-container a{
    text-decoration:none;
    display:block;
}

.logo-container img{
    width:100%;
}

/* FORM SECTION */

.signup-form-section{
    display:flex;
    justify-content:center;
    padding:35px 20px 60px;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.signup-card{
    width:370px;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
}

.signup-card h1{
    color:#1b145e;
    font-size:27px;
    font-weight:900;
    margin-bottom:20px;
}

.name-row{
    display:flex;
    gap:8px;
}

.input-group{
    margin-bottom:14px;
    width:100%;
    max-width:100%;
}

.input-group label{
    display:block;
    font-size:12px;
    color:#444;
    margin-bottom:6px;
}

.input-group input,
.input-group select{
    width:100%;
    height:55px;
    border:1px solid #8f96a0;
    background:#fff;
    padding:0 12px;
    font-size:14px;
    box-sizing:border-box;
    max-width:100%;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.name-row .input-group{
    flex:1;
}

.terms-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:15px 0 25px;
}

.terms-box input{
    margin-top:4px;
}

.terms-box p{
    font-size:13px;
    line-height:1.5;
    font-weight:bold;
    color:#000;
}

.terms-box a{
    color:#00A2C7 !important;
}

.password-requirements{
    background:#f0f0f0;
    padding:12px 14px;
    border-radius:6px;
    margin-bottom:15px;
}

.password-requirements p{
    font-size:12px;
    font-weight:700;
    color:#1b145e;
    margin-bottom:6px;
}

.password-requirements ul{
    font-size:11px;
    color:#555;
    margin:0;
    padding-left:18px;
    line-height:1.4;
}

.password-requirements .req-item{
    color:#d32f2f;
    transition:color 0.3s ease;
}

.password-requirements .req-item.valid{
    color:#2e7d32;
}

.next-btn{
    width:100%;
    height:55px;
    background:#d8d8d8;
    border:none;
    color:#8c8c8c;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    box-sizing:border-box;
}

.login-link{
    text-align:center;
    margin-top:15px;
    font-size:14px;
    color:#000;
}

.login-link a{
    color:#00A2C7 !important;
    font-weight:bold;
}

/* FOOTER */

.signup-page .footer,
.account-page .footer,
footer.footer {
    background:#efefef;
    border-top:1px solid #ddd;
    padding:35px;
}

.signup-page .footer .footer-links,
.account-page .footer .footer-links,
footer.footer .footer-links {
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.signup-page .footer .footer-links a,
.account-page .footer .footer-links a,
footer.footer .footer-links a {
    color:#00A2C7;
    text-decoration:none;
    font-size:14px;
}

.signup-page .footer .footer-links a:hover,
.account-page .footer .footer-links a:hover,
footer.footer .footer-links a:hover {
    text-decoration:underline;
    color:#0087aa;
}

.signup-page .footer-text p,
.account-page .footer-text p,
footer.footer .footer-text p {
    font-size:13px;
    line-height:1.7;
    margin-bottom:18px;
    color:#333;
}

.signup-page .footer-text a,
.account-page .footer-text a,
footer.footer .footer-text a {
    color:#00A2C7;
    text-decoration:none;
}

.signup-page .footer-text a:hover,
.account-page .footer-text a:hover,
footer.footer .footer-text a:hover {
    text-decoration:underline;
    color:#0087aa;
}

.signup-page .footer-bottom,
.account-page .footer-bottom,
footer.footer .footer-bottom {
    margin-top:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.signup-page .footericons,
.account-page .footericons,
footer.footer .footericons {
    display:flex;
    gap:30px;
    align-items:center;
}

.signup-page .footer-icons,
.account-page .footer-icons,
footer.footer .footer-icons {
    display:flex;
    align-items:center;
    gap:8px;
}

.signup-page .footer-icons svg,
.account-page .footer-icons svg,
footer.footer .footer-icons svg {
    flex-shrink:0;
}

.signup-page .footer-icons p,
.account-page .footer-icons p,
footer.footer .footer-icons p {
    margin:0;
    font-size:14px;
    color:#333;
}

/* Signup page responsive styles */
@media(max-width:480px){
.signup-form-section{
padding:25px 0 40px;
}

.signup-card{
width:100%;
max-width:340px;
margin:0 auto;
padding:0 15px;
}

.signup-card h1{
font-size:24px;
}

.name-row{
flex-direction:column;
gap:12px;
}

.input-group input,
.input-group select{
height:50px;
font-size:16px;
padding:0 12px;
border-width:1px;
}

.terms-box p{
font-size:12px;
}

.next-btn{
height:50px;
font-size:16px;
}

.signup-page .footer{
padding:25px 15px;
}
}

/* ================================= */
/* LOGIN PAGE */
/* ================================= */

.login-page{
    background:#07A8D0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.login-wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.login-logo{
    margin-top:25px;
    margin-bottom:15px;
    width:140px;
}

.login-logo img{
    width:100%;
}

/* CARD */

.login-card{
    width:400px;
    max-width:100%;
    background:#f6f6f6;
    border-radius:22px;
    padding:35px 35px;
    box-sizing:border-box;
}

.login-card h1{
    text-align:center;
    font-size:36px;
    color:#241760;
    font-weight:500;
}

.login-card h3{
    text-align:center;
    margin-top:5px;
    margin-bottom:20px;
    color:#241760;
    font-size:13px;
    font-weight:700;
}

.login-field{
    margin-bottom:16px;
}

.login-field label{
    display:block;
    margin-bottom:5px;
    font-size:13px;
    color:#555;
}

.login-field input{
    width:100%;
    height:50px;
    border:1px solid #7a7a7a;
    border-radius:10px;
    padding:0 20px;
    font-size:16px;
    background:white;
    box-sizing:border-box;
}

.password-wrapper{
    position:relative;
}

.toggle-password{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:8px;
    border:none;
    background:white;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.reset-link{
    display:inline-block;
    margin-top:2px;
    margin-bottom:24px;
    text-decoration:none;
    color:#0087c7;
    font-size:15px;
}

.login-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:8px;
    background:#00A2C7;
    color:white;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    box-sizing:border-box;
}

.signup-section{
    color:white;
    font-size:16px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
}

.signup-section a{
    color:white;
    text-decoration:none;
    font-weight:800;
}

/* FOOTER */

.login-footer{
    height:45px;
    background:#00A2C7;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}

.login-footer a{
    color:white;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.login-footer span{
    color:white;
}

/* Login page responsive styles */
@media(max-width:480px){
.login-wrapper{
padding:0 15px;
}

.login-card{
width:100%;
padding:25px 15px;
}

.login-card h1{
font-size:28px;
}

.login-card h3{
font-size:12px;
}

.login-field input{
height:48px;
font-size:16px;
}

.login-btn{
height:48px;
font-size:16px;
}

.signup-section{
font-size:14px;
}

.login-footer{
padding:0 15px;
}
}

/* ================================= */
/* TWO-FACTOR PAGE */
/* ================================= */

.two-factor{
    background:white;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.logo-lock{
    margin-top: -90px;
    width:290px;
    height:290px;
}

.logo-lock img{
    width:100%;
    height: 100%;
}

.two-factor-wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
}

.two-factor-wrapper h1{
    color:black;
    font-size:28px;
    font-weight:700;
    text-align:center;
    margin-bottom:12px;
    margin-top: -30px;
}

.two-factor-wrapper h3{
    color:#555;
    font-size:16px;
    font-weight:400;
    text-align:center;
    margin-bottom:135px;
    max-width:550px;
}

.two-factor-btn{
    width:25%;
    height:50px;
    border:none;
    border-radius:10px;
    background:#00A2C7;
    color:white;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
}

.two-factor-btn:hover{
    background:#0096c4;
}

/* FOOTER */

.two-factor-footer{
    height:45px;
    background:#e8e8e8;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}

.two-factor-footer a{
    color:#1A145F;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.two-factor-footer span{
    color:#1A145F;
}

/* ================================= */
/* SECURITY METHOD PAGE */
/* ================================= */

.security-method-card{
    width:550px;
    background:#fafafa;
    border-radius:32px;
    padding:24px 28px;
    margin:auto;
    box-shadow:0 1px 8px rgba(0,0,0,.05);
}

.security-method-card h1{
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:#20284b;
    margin-bottom:22px;
}

.security-subtitle{
    text-align:center;
    font-size:18px;
    color:#20284b;
    line-height:1.55;
    margin-bottom:32px;
}

.security-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:32px 8px;
    border-top:1px solid transparent;
    border-bottom:1px solid #e4e4e4;
    cursor:pointer;
    transition:.2s;
}

.security-option:hover{
    background:#ffffff;
}

.option-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.option-icon{
    width:42px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.option-icon i{
    font-size:38px;
    color:#1d1d1d;
}

.option-left span{
    font-size:18px;
    color:#20284b;
    font-weight:500;
}

.arrow{
    font-size:22px;
    color:#8d8d8d;
}

/* ================================= */
/* PHONE VERIFICATION PAGE */
/* ================================= */

.phone-verification-card{
    width:500px;
    background:#fafafa;
    border-radius:32px;
    padding:24px 28px;
    margin:auto;
    box-shadow:0 1px 8px rgba(0,0,0,.05);
}

.phone-verification-card h1{
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:#20284b;
    margin-bottom:10px;
}

.verification-subtitle{
    text-align:center;
    font-size:16px;
    line-height:1.55;
    color:#20284b;
    margin-bottom:24px;
}

.country-box{
    background:#f3f3f3;
    border-radius:25px;
    height:68px;
    display:flex;
    align-items:center;
    padding:0 22px;
    gap:20px;
    margin-bottom:24px;
}

.country-flag{
    width:40px;
    height:30px;
    object-fit:contain;
    flex-shrink:0;
}

#countrySelect{
    flex:1;
    background:transparent;
    border:none;
    font-size:18px;
    color:#20284b;
    font-weight:500;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:30px;
    outline:none;
}

#countrySelect:focus{
    outline:none;
}

.phone-field{
    position:relative;
    margin-bottom:35px;
}

.phone-field label{
    position:absolute;
    left:28px;
    top:-12px;
    background:white;
    padding:0 8px;
    color:#4158ff;
    font-size:15px;
}

.phone-field input{
    width:100%;
    height:68px;
    border:3px solid #4158ff;
    border-radius:25px;
    padding:0 25px;
    font-size:18px;
}

.verification-note{
    font-size:13px;
    line-height:1.5;
}

.method{
    display:flex;
    align-items:center;
    gap:18px;
    margin:20px 0;
}

.method input{
    width:14px;
    height:14px;
}

.method label{
    font-size:18px;
}

.continue-btn{
    width:100%;
    height:68px;
    border:none;
    border-radius:25px;
    background:#0c9dc3;
    color:white;
    font-size:24px;
    font-weight:700;
    cursor:pointer;
}

.method{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
}

.method input[type="radio"]{
    width:20px;
    height:20px;
    cursor:pointer;
}

.method label{
    font-size:16px;
    color:#20284b;
    font-weight:500;
    cursor:pointer;
}

.continue-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:10px;
    background:#00A2C7;
    color:white;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    margin-top:16px;
}

.continue-btn:hover{
    background:#0096c4;
}

/* ================================= */
/* OTP SECTION STYLES */
/* ================================= */

.otp-section{
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid #e4e4e4;
}

.otp-section h2{
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#20284b;
    margin-bottom:8px;
}

.otp-subtitle{
    text-align:center;
    font-size:15px;
    line-height:1.5;
    color:#555;
    margin-bottom:24px;
}

.otp-subtitle span{
    font-weight:600;
    color:#20284b;
}

.otp-inputs{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:24px;
}

.otp-input{
    width:50px;
    height:60px;
    border:2px solid #e0e0e0;
    border-radius:12px;
    font-size:24px;
    font-weight:700;
    text-align:center;
    color:#20284b;
    background:#fff;
    transition:border-color 0.2s, box-shadow 0.2s;
}

.otp-input:focus{
    outline:none;
    border-color:#00A2C7;
    box-shadow:0 0 0 3px rgba(0, 162, 199, 0.1);
}

.otp-input::placeholder{
    color:#ccc;
}

.otp-message{
    text-align:center;
    font-size:14px;
    margin-bottom:20px;
    min-height:20px;
}

.otp-message.success{
    color:#28a745;
}

.otp-message.error{
    color:#dc3545;
}

.verify-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:10px;
    background:#00A2C7;
    color:white;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    margin-bottom:24px;
}

.verify-btn:hover{
    background:#0096c4;
}

.verify-btn:disabled{
    background:#ccc;
    cursor:not-allowed;
}

.resend-section{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.resend-text{
    font-size:14px;
    color:#555;
}

.resend-btn{
    background:none;
    border:none;
    color:#00A2C7;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    padding:0;
}

.resend-btn:hover:not(:disabled){
    text-decoration:underline;
}

.resend-btn:disabled{
    color:#ccc;
    cursor:not-allowed;
}

.timer{
    font-size:14px;
    color:#555;
    font-weight:600;
}

/* OTP Section Responsive Styles */
@media(max-width:768px){
    .phone-verification-card{
        width:100%;
        max-width:450px;
        padding:20px 24px;
    }

    .phone-verification-card h1{
        font-size:24px;
    }

    .verification-subtitle{
        font-size:15px;
    }

    .otp-inputs{
        gap:8px;
    }

    .otp-input{
        width:45px;
        height:55px;
        font-size:22px;
    }

    .otp-section h2{
        font-size:22px;
    }
}

@media(max-width:480px){
    .phone-verification-card{
        width:100%;
        max-width:340px;
        padding:18px 20px;
    }

    .phone-verification-card h1{
        font-size:22px;
    }

    .verification-subtitle{
        font-size:14px;
    }

    .otp-inputs{
        gap:6px;
    }

    .otp-input{
        width:40px;
        height:50px;
        font-size:20px;
    }

    .otp-section h2{
        font-size:20px;
    }

    .otp-subtitle{
        font-size:14px;
    }

    .verify-btn,
    .continue-btn{
        height:48px;
        font-size:16px;
    }
}

/* ================================= */
/* BANKING PAGE */
/* ================================= */

body.banking-page {
    background: #fff;
    min-height: 100vh;
    display: block;
    font-family: 'Nunito', sans-serif;
}

.db-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
}

.db-nav-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.db-nav-logo {
    height: 28px;
    width: auto;
    margin-right: 12px;
}

.db-nav-links {
    display: flex;
    align-items: center;
}

.db-nav-links a {
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 9px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.db-nav-links a:hover {
    color: #07A8D0;
    background: rgba(7, 168, 208, 0.09);
}

.db-nav-links a.db-active {
    color: #1a1a1a;
    font-weight: 800;
    position: relative;
}

.db-nav-links a.db-active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 9px;
    right: 9px;
    height: 2.5px;
    background: #1a1a1a;
    border-radius: 2px;
}

.db-nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.db-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 17px;
    transition: background 0.2s;
}

.db-icon-btn:hover {
    background: #f0f0f0;
}

.db-apy-banner {
    background: #1a2a5e;
    display: flex;
    justify-content: flex-end;
    padding: 7px 24px;
}

.db-apy-inner {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.db-apy-plus-badge {
    width: 20px;
    height: 20px;
    background: #07A8D0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    flex-shrink: 0;
}

.db-main {
    background: #07A8D0;
    padding: 18px 60px 32px;
}

.db-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.db-action-btns {
    display: flex;
    gap: 28px;
    align-items: center;
}

.db-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
}

.db-action-icon {
    color: #fff;
    font-size: 22px;
}

.db-action-btn span {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.db-welcome {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 25px;
    margin-top: -10px;
}

/* Product grid */
.db-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 26px;
}

.db-product-card {
    background: #fff;
    border-radius: 16px;
    padding: 15px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.db-product-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
}

.db-product-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 3px;
}

.db-product-info p {
    font-size: 13px;
    color: #777;
    font-weight: 500;
}

.db-product-cta {
    font-size: 14px;
    font-weight: 600;
    color: #07A8D0;
    white-space: nowrap;
    margin-left: 14px;
    text-align: right;
    flex-shrink: 0;
}

.db-explore-wrap {
    display: flex;
    justify-content: center;
}

.db-explore-btn {
    border: 2px solid rgba(255,255,255,0.9);
    background: transparent;
    color: #fff;
    padding: 17px 20px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: background 0.2s;
}

.db-explore-btn:hover {
    background: white;
    color: #07A8D0;
}

.db-relay-section {
    background: #f9f9f9;
    padding: 32px 60px 24px;
}

.db-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.db-section-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
}

.db-view-link {
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}

.db-view-link:hover {
    color: #07A8D0;
}

.db-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.db-insight-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
}

.db-insight-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.db-insight-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.db-pts-badge {
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}

.db-insight-card h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 10px;
}

.db-insight-cta {
    color: #07A8D0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: block;
    margin-bottom: 14px;
}

/* Credit score bar */
.db-credit-track {
    height: 8px;
    background: #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 5px;
}

.db-credit-fill {
    height: 100%;
    width: 52%;
    background: linear-gradient(to right, #ef5350, #f57c00, #fbc02d, #66bb6a);
    border-radius: 6px;
}

.db-credit-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #aaa;
    font-weight: 600;
}

/* Mini line chart */
.db-mini-chart {
    width: 100%;
    height: 55px;
    display: block;
}

.db-benefits-section {
    background: #f9f9f9;
    padding: 0 60px 32px;
}

.db-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.db-benefit-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: box-shadow 0.2s;
    min-width: 0;
    box-sizing: border-box;
}

.db-benefit-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.db-benefit-body {
    flex: 1;
    min-width: 0;
}

.db-benefit-tag {
    font-size: 10.5px;
    color: #aaa;
    font-weight: 700;
    margin-bottom: 5px;
}

.db-benefit-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 30px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.db-benefit-cta {
    color: #07A8D0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* Image placeholder slots — replace src="" with your actual image path */
.db-benefit-img {
    width: 150px;
    height: 84px;
    object-fit: cover;
    border-radius: 5px;
    margin-left: 16px;
    flex-shrink: 0;
    background: #dde0e8;
    display: block;
}

.db-tools-section {
    background: #f9f9f9;
    padding: 32px 60px;
}

.db-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.db-tool-card {
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}

.db-tool-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.db-tool-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.db-tool-card h4 {
    font-size: 15.5px;
    font-weight: 700;
    color: #1a1a1a;
}

.db-legal-section {
    background: #f0f0ed;
    padding: 32px 60px;
}

.db-legal-top {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.db-legal-heading {
    font-size: 20px;
    font-weight: 900;
    color: #1a1a1a;
    flex-shrink: 0;
    padding-top: 2px;
}

.db-legal-links-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 20px 120px;
}

.db-legal-links-grid a {
    color: #07A8D0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.db-legal-links-grid a:hover {
    text-decoration: underline;
}

.db-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-privacy-badge .badge-icons {
    background: #07A8D0;
    color: #fff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.db-invest-warning {
    border: 1.5px solid #1a1a1a;
    text-align: center;
    padding: 2px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.db-legal-text {
    font-size: 12px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 14px;
    font-weight: bolder;
}

.db-legal-text a {
    color: #07A8D0;
}

.db-footer {
    background: #f0f0ed;
    padding: 22px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.db-footer-copy {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.db-footer-trust {
    display: flex;
    align-items: center;
    gap: 18px;
}

.db-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    font-weight: 600;
}

.db-trust-item i {
    font-size: 14px;
    color: #555;
}

/* ===================================================
   BANKING LANDING PAGE (Screen 1, 2, 3)
   =================================================== */
body.banking-landing-page {
    background: #ffffff;
    min-height: 100vh;
    font-family: 'Nunito', sans-serif;
    color: #1a1a1a;
}

/* ---- TOP NAV ---- */
.bl-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
}

.bl-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bl-nav-left a {
    text-decoration: none;
    display: block;
}

.bl-nav-logo {
    height: 28px;
    width: auto;
}

.bl-nav-divider {
    width: 1px;
    height: 22px;
    background: #ddd;
}

.bl-nav-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.bl-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bl-exit-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.bl-exit-btn:hover {
    color: #00A2C7;
    background: rgba(0, 162, 199, 0.08);
}

.bl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00A2C7;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---- SCREEN CONTAINER ---- */
.bl-screen {
    display: none;
}
.bl-screen.active {
    display: block;
}

/* ---- SAME-FILE OFFER SCREENS ---- */
.cc-screen-content {
    padding: 70px 50px;
    max-width: 900px;
    margin: 0 auto;
}

.cc-screen-header {
    max-width: 500px;
    margin: 0 auto 40px;
    text-align: center;
}

.cc-screen-title {
    font-size: 35px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.cc-screen-subtitle {
    font-size: 16px;
    color: #000000;
    line-height: 1.6;
}

.cc-offers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.cc-offer-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 16px 40px rgba(26, 20, 95, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cc-offer-image-placeholder {
    width: 100%;
    min-height: 220px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-offer-card h3 {
    font-size: 24px;
    color: #000000;
    margin: 0;
    text-align: center;
}

.cc-offer-card p {
    color: #000000;
    line-height: 1.7;
    margin: 0;
    flex: 1;
    text-align: center;
}

.cc-offer-card-btn {
    color: white;
    background-color: #00A2C7;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 14px 20px;
    border-radius: 11px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: block;
    text-decoration: none;
}

.cc-offer-card-btnx {
    background-color: rgb(244, 244, 243);
    color: #00A2C7;
    border: 1.7px solid #00A2C7;
    border-width: 1.7px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 14px 20px;
    border-radius: 11px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: block;
}

/* Override hero secondary styles when used on white offer cards */
.cc-offer-card .cc-btn-secondary.cc-offer-card-btn,
.cc-offer-card button.cc-btn-secondary {
    background-color: rgb(244, 244, 243);
    color: #00A2C7;
    border: 1.7px solid #00A2C7;
    padding: 14px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}

.cc-offer-card .cc-btn-primary.cc-offer-card-btn,
.cc-offer-card a.cc-btn-primary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-size: 15px;
    display: block;
    text-align: center;
}

.cc-back-btn {
    display: inline-flex;
    margin-top: 12px;
}

.cc-mail-screen {
    position: relative;
    min-height: calc(100vh - 64px);
    padding: 60px 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.cc-mail-offer-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cc-mail-offer-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cc-mail-screen-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: 40px 32px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 12px;
}

.cc-mail-screen-content h2 {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 18px;
    margin-top: 0;
    line-height: 1.2;
}

.cc-mail-screen-content p {
    font-size: clamp(14px, 2vw, 16px);
    color: #ffffff;
    line-height: 1.75;
    margin-bottom: 10px;
}

.cc-mail-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.cc-mail-form input {
    width: 100%;
    border: 1px solid #d7dde7;
    border-radius: 4px;
    padding: 16px 18px;
    font-size: 16px;
    color: #1a145f;
    outline: none;
    box-sizing: border-box;
}

.cc-mail-form input::placeholder {
    color: #9ea7b6;
}

@media (max-width: 1024px) {
    .cc-offers-grid {
        grid-template-columns: 1fr;
    }

    .cc-screen-content,
    .cc-mail-screen {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 768px) {
    .cc-screen-content,
    .cc-mail-screen {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---- HERO (Screen 1) ---- */
.bl-hero {
    background: #00A2C7;
    position: relative;
    overflow: hidden;
    padding: 60px 180px 100px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
}

.bl-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.bl-hero-content {
    max-width: 520px;
}

.bl-hero-content h1 {
    font-size: 35px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 36px;
}

.bl-get-started-btn {
    display: inline-block;
    background: #1A145F;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    padding: 16px 36px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.bl-get-started-btn:hover {
    background: #120f45;
}

/* ---- HERO DECORATIONS ---- */
.bl-hero-card-wrap {
    position: relative;
    width: 380px;
    height: 240px;
    flex-shrink: 0;
}

.bl-hero-card-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

/* ---- FEATURES (Screen 1) ---- */
.bl-features {
    background: #ffffff;
    padding: 80px 170px 70px;
}

.bl-features-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 80px;
}

.bl-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.bl-feature-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bl-feature-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-feature-text h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.bl-feature-text p {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    line-height: 1.5;
}

/* ---- BOTTOM CTA BAR ---- */
.bl-cta-bar {
    background: #00A2C7;
    padding: 15px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-cta-bar-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
}

.bl-cta-bar-btn:hover {
    opacity: 0.85;
}

/* ---- LEGAL FOOTER ---- */
.bl-legal {
    background: #ffffff;
    padding: 40px 170px;
    border-top: 1px solid #eeeeee;
}

.bl-legal p {
    max-width: 1100px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 600px;
    color: #000000;
    line-height: 1.8;
}

/* ============================================================
   SCREENS 2 & 3: FORM FLOW PAGES
   ============================================================ */
.bl-flow-container {
    background: #FAF9F6;
    min-height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    padding: 60px 40px 80px;
}

.bl-flow-content {
    width: 100%;
    max-width: 600px;
}

.bl-flow-content h2 {
    font-size: 34px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 12px;
}

/* ---- SCREEN 2: OPTION CARDS ---- */
.bl-options-list {
    margin-bottom: 40px;
}

.bl-option-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.bl-option-card:hover {
    border-color: #00A2C7;
    box-shadow: 0 6px 20px rgba(0,162,199,0.1);
    transform: translateY(-1px);
}

.bl-option-icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #1a1a1a;
    flex-shrink: 0;
}

.bl-option-details h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.bl-option-details p {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
}

/* ---- BACK BUTTON (Square with rounded corners, teal border) ---- */
.bl-back-square-btn {
    width: 75px;
    height: 56px;
    border-radius: 18px;
    border: 1.5px solid #00A2C7;
    background: transparent;
    color: #00A2C7;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.bl-back-square-btn:hover {
    background: #00A2C7;
    color: #ffffff;
}

/* ---- SCREEN 3: ADDRESS FIELD ---- */
.bl-address-wrapper {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 18px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
}

.bl-address-wrapper label {
    font-size: 12px;
    font-weight: 700;
    color: #777;
    margin-bottom: 2px;
}

.bl-address-wrapper input {
    border: none;
    outline: none;
    font-size: 17px;
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    color: #1a1a1a;
    padding: 4px 24px 4px 0;
    width: 100%;
}

.bl-address-clear-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #bbb;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s;
}

.bl-address-clear-btn:hover {
    color: #666;
}

/* ---- CHECKBOX ---- */
.bl-checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    cursor: pointer;
}

.bl-checkbox-container input[type="checkbox"] {
    display: none;
}

.bl-custom-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #00A2C7;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    transition: background 0.2s, border-color 0.2s;
}

.bl-custom-checkbox i {
    opacity: 0;
    transition: opacity 0.2s;
}

.bl-checkbox-container input[type="checkbox"]:checked + .bl-custom-checkbox {
    background: #00A2C7;
    border-color: #00A2C7;
}

.bl-checkbox-container input[type="checkbox"]:checked + .bl-custom-checkbox i {
    opacity: 1;
}

.bl-checkbox-label {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    user-select: none;
}

/* ---- BOTTOM BUTTONS ROW ---- */
.bl-buttons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bl-next-pill-btn {
    background: #00A2C7;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 16px 52px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: background 0.2s, transform 0.1s;
}

.bl-next-pill-btn:hover {
    background: #0090b3;
}

/* ===================================================
   NEW FLOW FIELD STYLES (Joint & Dynamic Address)
   =================================================== */
.bl-input-wrapper {
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    border-radius: 18px;
    padding: 16px 22px;
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
}

.bl-input-wrapper:focus-within {
    border-color: #1a1a1a;
}

.bl-input-wrapper input,
.bl-input-wrapper select {
    border: none;
    outline: none;
    font-size: 17px;
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    color: #1a1a1a;
    width: 100%;
    background: transparent;
}

.bl-input-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 30px;
}

.bl-input-wrapper.select-wrapper .dropdown-arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 16px;
}

/* Checkbox Consent Card */
.bl-joint-consent-card {
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    margin-bottom: 20px;
}

.bl-consent-label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #1a1a1a;
    margin: 0;
    flex: 1;
}

/* Address Screen Custom Grid and Styling */
.bl-address-wrapper.light-border {
    border: 1.5px solid #e0e0e0;
}

.bl-address-wrapper.light-border:focus-within {
    border-color: #000000;
}

.bl-address-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.bl-address-row .half-width {
    flex: 1;
    margin-bottom: 0;
}

/* Active Street Address Border */
.bl-address-wrapper.active-field {
    border: 2px solid #000000;
}

/* ============================================================
   RELAY CREDIT SCORE SCREEN
   ============================================================ */
#screen-credit-score .bl-flow-content {
    max-width: 640px;
}

#screen-credit-score .rcs-image-placeholder {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen-credit-score .rcs-image-placeholder img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#screen-credit-score .bl-flow-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 32px;
    text-align: center;
    line-height: 1.2;
}

#screen-credit-score .benefits-card {
    background: #F1EFEC;
    border-radius: 20px;
    padding: 36px 40px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#screen-credit-score .benefit {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

#screen-credit-score .benefit:not(:last-child) {
    margin-bottom: 36px;
}

#screen-credit-score .benefit-icon {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #222;
    flex-shrink: 0;
    padding-top: 2px;
}

#screen-credit-score .benefit-icon--tu span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #222;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    line-height: 1;
}

#screen-credit-score .benefit-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1a1a1a;
    line-height: 1.3;
}

#screen-credit-score .benefit-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

#screen-credit-score .rcs-prefill-text {
    margin: 24px 0 0;
    text-align: center;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

#screen-credit-score .rcs-buttons-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

@media (max-width: 768px) {
    #screen-credit-score .bl-flow-content h2 {
        font-size: 2rem;
    }

    #screen-credit-score .benefits-card {
        padding: 28px 24px;
    }

    #screen-credit-score .benefit-text h3 {
        font-size: 1.15rem;
    }

    #screen-credit-score .benefit-text p {
        font-size: 0.9rem;
    }
}

@media (max-width: 500px) {
    #screen-credit-score .rcs-image-placeholder {
        max-width: 260px;
    }

    #screen-credit-score .bl-flow-content h2 {
        font-size: 1.75rem;
    }

    #screen-credit-score .benefit {
        gap: 14px;
    }

    #screen-credit-score .benefit-icon {
        font-size: 22px;
        width: 32px;
    }

    #screen-credit-score .benefit-text h3 {
        font-size: 1.05rem;
    }

    #screen-credit-score .benefit-text p {
        font-size: 0.85rem;
    }
}

/*==============================
        VERIFY PHONE PAGE
==============================*/

.verify-phone-section{
    height:calc(100vh - 80px);
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#F8F7F4;
    overflow:hidden;
}

.verify-image{
    display:flex;
    align-items:center;
    overflow:hidden;
}

.verify-image img{
    width:100%;
    max-width:700px;
    object-fit:contain;
}

.verify-content{
    background:#fff;
    display:flex;
    flex-direction:column;
    padding:50px;
    overflow-y:auto;
}

.verify-content h1{
    text-align:center;
    font-size:1.7rem;
    font-weight:600;
    margin-bottom:10px;
    color:#111;
}

.intro{
    text-align:center;
    font-size:1rem;
    line-height:1.6;
    color:#222;
    max-width:400px;
    margin:0 auto 30px;
}

.phone-input{
    width:100%;
    max-width:390px;
    height:58px;
    border:2px solid #E3E3E3;
    border-radius:19px;
    padding:0 28px;
    font-size:1rem;
    outline:none;
    margin:0 auto 20px;
    display:block;
    transition:.3s;
}

.phone-input:focus{
    border-color:#00A8D6;
}

.phone-input::placeholder{
    color:#777;
}

.terms{
    font-size:0.9rem;
    line-height:1.5;
    color:#555;
    margin:0 auto 46px;
    max-width:390px;
    text-align:center;
}


.terms a{
    color:#555;
    text-decoration:underline;
}

.next-btn{
    width:100%;
    max-width:390px;
    height:58px;
    border:none;
    border-radius:19px;
    background:#D8D6D3;
    color:#fff;
    font-size:0.9rem;
    font-weight:600;
    cursor:not-allowed;
    margin:0 auto 30px;
    display:block;
}

.next-btn.enabled{
    background:#11A7D5;
    cursor:pointer;
}

.next-btn.enabled:hover{
    background:#0096C7;
}

.shield{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    font-size:0.8rem;
    margin:0 auto;
}

.shield i{
    font-size:15px;
}

.shield a{
    color:#111;
    text-decoration:underline;
}

@media(max-width:1100px){
.verify-phone-section{
grid-template-columns:1fr;
}

.verify-image{
padding:40px 20px 10px;
}

.verify-image img{
max-width:450px;
}

.verify-content{
padding:50px 35px;
}

}

@media(max-width:768px){
.verify-content h1{
font-size:1.5rem;
}

.intro{
font-size:0.95rem;
}

.phone-input{
height:54px;
font-size:16px;
max-width:100%;
}

.next-btn{
height:54px;
font-size:16px;
margin-bottom:30px;
max-width:100%;
}

.terms{
font-size:0.9rem;
}

}

@media(max-width:480px){
.verify-content{
padding:35px 20px;
}

.verify-content h1{
font-size:1.9rem;
}

.phone-input{
padding:0 20px;
}

}

/* ======================================================
   SCREEN: FIND VEHICLE
   ====================================================== */
.vehicle-page{
    width:100%;
    background:#fff;
}

.vehicle-container{
    width:100%;
    max-width:630px;
    margin: 0 auto;
    padding: 80px 0px 40px;
}

.vehicle-container h1{
    font-size:30px;
    font-weight:600;
    margin-bottom:18px;
    color:#111;
}

.vehicle-text{
    font-size:18px;
    color:#222;
    line-height:1.6;
    margin-bottom:28px;
}

.vehicle-text a{
    color:#0086A8;
    text-decoration:none;
    font-weight:600;
}

.vehicle-container select{
    width:100%;
    max-width:500px;
    height:74px;
    margin-bottom:22px;
    border-radius:12px;
    border:1px solid #bdbdbd;
    padding:0 22px;
    font-size:20px;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.vehicle-container select:disabled{
    background:#f1f1f1;
    color:#999;
    cursor:not-allowed;
}

.vehicle-container select:focus{
    outline:none;
    border:2px solid #0086A8;
}

.small-text{
    margin-top:15px;
    font-size:15px;
    color:#444;
    line-height:1.6;
}

.button-area{
    display:flex;
    justify-content:flex-end;
    margin-top:38px;
}

.button-area button{
    width:190px;
    height:65px;
    border:none;
    border-radius:12px;
    background:#0086A8;
    color:#fff;
    font-size:22px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.button-area button:disabled{
    background:#d3d3d3;
    cursor:not-allowed;
}

.button-area button:hover:not(:disabled){
    background:#007596;
}

@media(max-width:768px){

.vehicle-container h1{
font-size:1.5rem;
}

.vehicle-text{
font-size:16px;
}

.vehicle-container select{
height:54px;
font-size:16px;
max-width:100%;
}

.button-area{
justify-content:center;
}

.button-area button{
width:100%;
height:54px;
font-size:16px;
}
}


/* ============================================================
   CREDIT CARD PAGE
   ============================================================ */
body.credit-card-page {
    background: #ffffff;
    min-height: 100vh;
    font-family: 'Nunito', sans-serif;
}

/* ---- SECTION 1: HERO WITH BLUE BACKGROUND AND CURVE ---- */
.cc-hero-section {
    background: #00A2C7;
    position: relative;
    padding: 80px 60px 120px;
    overflow: hidden;
}

/* Single external curve using SVG */
.cc-hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,100 C480,100 720,0 1440,0 L1440,100 L0,100 Z" fill="%23ffffff"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

.cc-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cc-hero-badge {
    display: inline-block;
    background: #FFD15C;
    padding: 8px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
}

.cc-hero-badge span {
    color: #1A145F;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cc-hero-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 16px;
}

.cc-hero-subtitle {
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 32px;
    max-width: 480px;
}

.cc-hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.cc-btn-primary {
    background: #1A145F;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.cc-btn-primary:hover {
    background: #120f45;
}

.cc-btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1.6px solid #ffffff;
    padding: 14px 30px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cc-btn-secondary:hover {
    background: #ffffff;
    color: #00A2C7;
}

.cc-btn-sm {
    padding: 12px 24px;
    font-size: 14px;
}

/* Image placeholders */
.cc-hero-images {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.cc-img-placeholder {
    position: absolute;
}

.cc-yellow-ring {
    top: 20px;
    right: 0px;
    width: 130px;
    height: 130px;
}

.cc-cone {
    top: 45%;
    left: 50px;
    width: 180px;
    height: 220px;
}

.cc-magenta-sphere {
    bottom: 130px;
    left: 170px;
    width: 60px;
    height: 60px;
}

.cc-blue-sphere {
    bottom: 80px;
    right: 140px;
    width: 100px;
    height: 100px;
}

/* ---- SECTION 2: OUR CREDIT CARDS ---- */
.cc-cards-section {
    padding: 80px 60px;
    background: #ffffff;
}

.cc-section-title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: #1A145F;
    margin-bottom: 48px;
    text-align: center;
}

.cc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.cc-card-item {
    text-align: left;
}

.cc-card-image-placeholder {
    width: 100%;
    height: 200px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-card-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cc-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 12px;
}

.cc-card-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

.cc-card-desc span{
    color: #00A2C7;
    text-decoration: underline;
}

.check-offers-action {
    background: #00A2C7;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.check-offers-action:hover {
    background: #ffffff;
    color: #00A2C7;
}

.respond-mail-action {
    background: white;
    color: #00A2C7;
    border: 1.6px solid #00A2C7;
    padding: 14px 30px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.respond-mail-action:hover {
    background: #00A2C7;
    color: #ffffff;
}

.cc-cards-footer-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 48px;
}

/* ---- SECTION 3: YOUR GUIDE TO ALL THINGS CREDIT CARDS ---- */
.cc-guide-section {
    padding: 80px 60px;
    background: #f9f9f9;
}

@media (min-width: 769px) {
    .cc-guide-section .cc-section-title {
        text-align: center;
    }
}

.cc-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.cc-guide-card {
    background: #ffffff;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.cc-guide-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cc-guide-image-placeholder {
    width: 100%;
    height: 180px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-guide-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A145F;
    padding: 20px 24px 12px;
    margin: 0;
}

.cc-guide-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    padding: 0 24px 24px;
    margin: 0;
}

.cc-guide-footer {
    text-align: center;
}

.cc-btn-outline {
    background: transparent;
    color: #00A2C7;
    border: 1.6px solid #00A2C7;
    padding: 14px 32px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cc-btn-outline:hover {
    background: #00A2C7;
    color: #ffffff;
}

/* ---- SECTION 4: GET STARTED CTA ---- */
.cc-cta-section {
    background: #00A2C7;
    position: relative;
    padding: 65px 60px;
    overflow: hidden;
    text-align: center;
}

.cc-cta-content {
    position: relative;
    z-index: 2;
}

.cc-cta-title {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 16px;
}

.cc-cta-subtitle {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 32px;
}

.cc-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- SECTION 4: LEGAL TEXT ---- */
.cc-legal-section {
    background: #ffffff;
    padding: 40px 60px;
    max-width: 900px;
    margin: 0 auto;
}

.cc-legal-text {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
    .cc-cards-grid,
    .cc-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cc-hero-section,
    .cc-cards-section,
    .cc-guide-section,
    .cc-cta-section {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 768px) {
    .cc-cards-grid,
    .cc-guide-grid {
        grid-template-columns: 1fr;
    }
    
    .cc-hero-section,
    .cc-cards-section,
    .cc-guide-section,
    .cc-cta-section {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .cc-hero-buttons,
    .cc-card-buttons,
    .cc-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cc-btn-primary,
    .cc-btn-secondary,
    .cc-btn-outline {
        width: 100%;
        text-align: center;
    }
    
    .cc-yellow-ring {
        width: 80px;
        height: 80px;
        right: 40px;
    }
    
    .cc-cone {
        width: 70px;
        height: 100px;
        left: 40px;
    }
}

/* ---- SHOP CREDIT CARDS / RECOMMENDATIONS ---- */
.cc-shop-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 60px 80px;
}

.cc-shop-header {
    margin-bottom: 32px;
}

.cc-shop-title {
    font-size: 35px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 16px;
}

.cc-shop-subtitle {
    font-size: 16px;
    color: #000000;
    line-height: 1.6;
    max-width: 720px;
    margin-bottom: 12px;
}

.cc-shop-disclosure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
}

.cc-shop-disclosure a {
    color: #000000;
    text-decoration: underline;
    font-weight: 600;
}

.cc-shop-disclosure i {
    font-size: 14px;
    color: #666666;
}

.cc-shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.cc-shop-filter-btn {
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.cc-shop-filter-btn:hover {
    background: #f5f5f5;
}

.cc-rec-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px 32px 24px;
    background: #ffffff;
}

.cc-rec-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 24px;
}

.cc-rec-card-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
}

.cc-rec-card-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.cc-rec-card-image {
    width: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-rec-card-image img {
    max-width: 100%;
    height: auto;
}

.cc-rec-card-image--placeholder {
    min-height: 100px;
    color: #666666;
    font-size: 14px;
    font-weight: 600;
}

.cc-rec-apply-btn {
    width: 100%;
    background: #007a8c;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.cc-rec-apply-btn:hover {
    background: #006274;
}

.cc-rec-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #666666;
    line-height: 1.4;
}

.cc-rec-secure i {
    font-size: 11px;
}

.cc-rec-terms {
    font-size: 12px;
    color: #000000;
    text-decoration: underline;
}

.cc-rec-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.cc-rec-stat {
    min-width: 0;
}

.cc-rec-stat dt {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
}

.cc-rec-stat dd {
    margin: 0;
    font-size: 14px;
    color: #333333;
    line-height: 1.45;
}

.cc-rec-features {
    margin: 0 0 20px;
    padding-left: 18px;
    color: #000000;
    font-size: 14px;
    line-height: 1.6;
}

.cc-rec-features li + li {
    margin-top: 4px;
}

.cc-rec-view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #007a8c;
    cursor: pointer;
    font-family: inherit;
}

.cc-rec-view-more i {
    font-size: 12px;
}

@media (max-width: 768px) {
    .cc-shop-content {
        padding: 32px 24px 60px;
    }

    .cc-shop-title {
        font-size: 28px;
    }

    .cc-rec-card-body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cc-rec-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/*=============================
        RELAY HERO
=============================*/

.relay-hero{
    background: linear-gradient(to bottom,#17B5E4 0%,#17B5E4 265px,#F7F5F2 265px,#F7F5F2 100%);
    padding:70px 0 80px;
}

.relay-container{
    width:min(92%,1320px);
    margin:auto;
}

.relay-title{
    color:#fff;
    font-size:3rem;
    font-weight:700;
    margin-bottom:40px;
}

.relay-grid{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:28px;
    align-items:start;
}

/*=============================
        LEFT CARD
=============================*/

.networth-card{
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.networth-card h2{
    font-size:2rem;
    margin-bottom:12px;
}

.networth-text{
    color:#555;
    line-height:1.6;
    margin-bottom:28px;
}

.networth-heading{
    font-size:2rem;
    margin-bottom:30px;
}

.info-icon{
    color:#999;
    font-size:18px;
}

.account-list{
    display:flex;
    flex-direction:column;
}

.account-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid #E7E7E7;
}

.account-item:last-child{
    border-bottom:none;
}

.account-item span{
    font-size:1.15rem;
}

.account-item button{
    border:none;
    background:none;
    font-size:2rem;
    cursor:pointer;
    color:#222;
}

/*=============================
        RIGHT SIDE
=============================*/

.relay-right{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.feature-card{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:18px;
    align-items:center;
    background:#fff;
    border-radius:22px;
    padding:24px;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.feature-image{
    background:#ECEAE7;
    border-radius:18px;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.feature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.feature-content h3{
    font-size:2rem;
    margin-bottom:12px;
}

.feature-content p{
    color:#555;
    line-height:1.6;
    margin-bottom:25px;
}

/*=============================
            BUTTONS
=============================*/

.primary-btn,
.outline-btn{
    display:block;
    width:100%;
    text-align:center;
    text-decoration:none;
    padding:16px;
    border-radius:15px;
    font-size:1.15rem;
    font-weight:600;
    transition:.3s;
}

.primary-btn{
    background:#00A8D8;
    color:#fff;
}

.primary-btn:hover{
    background:#0097c3;
}

.outline-btn{
    border:2px solid #00A8D8;
    color:#00A8D8;
}

.outline-btn:hover{
    background:#00A8D8;
    color:#fff;
}

/*=============================
        FEATURES
=============================*/

.relay-features{
    background:#F7F5F2;
    padding:20px 0 90px;
}

.features-container{
    width:min(92%,1320px);
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:34px;
}

.mini-feature{
    background:#fff;
    border-radius:24px;
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    padding:34px;
    box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.mini-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#F1F1F1;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
}

.mini-content h2{
    font-size:2rem;
    margin-bottom:10px;
}

.mini-content p{
    color:#555;
    font-size:1.2rem;
}

.mini-feature a{
    text-decoration:none;
    color:#00A8D8;
    font-weight:700;
    font-size:1.5rem;
}

/*=============================
        RESPONSIVE
=============================*/

@media(max-width:1100px){

.relay-grid{
grid-template-columns:1fr;
}

.feature-card{
grid-template-columns:1fr;
}

.feature-image{
height:220px;
}

}

@media(max-width:768px){

.relay-title{
font-size:2.2rem;
}

.networth-card{
padding:22px;
}

.feature-content h3{
font-size:1.5rem;
}

.mini-feature{
grid-template-columns:1fr;
text-align:center;
gap:25px;
}

.mini-icon{
margin:auto;
}

.mini-feature a{
justify-self:center;
}

}

@media(max-width:500px){

.feature-image{
height:170px;
}

.primary-btn,
.outline-btn{
font-size:1rem;
}

.account-item span{
font-size:1rem;
}

}

/*====================================
            FOOTER
====================================*/

.relay-footer{
    background:#F7F5F2;
    padding:70px 0;
}

.relay-footer-container{
    width:min(92%,1320px);
    margin:auto;
}

.relay-footer-container .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    margin-bottom:35px;
}

.relay-footer-container .footer-links a{
    text-decoration:none;
    color:#00A2C7;
    font-size:1.2rem;
    font-weight:600;
}

.relay-footer-container .footer-links a:hover{
    text-decoration:underline;
    color:#0087aa;
}

.relay-footer-container .footer-description{
    font-size:1.1rem;
    line-height:2;
    color:#222;
    margin-bottom:45px;
}

.relay-footer-container .investment-box{
    border:2px solid #444;
    padding:28px;
    text-align:center;
    margin-bottom:45px;
}

.relay-footer-container .investment-box h3{
    margin-bottom:18px;
    font-size:1.5rem;
}

.relay-footer-container .investment-box ul{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.relay-footer-container .investment-box li{
    font-size:1.1rem;
    position:relative;
}

.relay-footer-container .investment-box li::before{
    content:"•";
    margin-right:10px;
}

.relay-footer-container .footer-paragraphs{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.relay-footer-container .footer-paragraphs p{
    font-size:1.1rem;
    line-height:1.8;
}

.relay-footer-container .footer-paragraphs a{
    color:#00A2C7;
    text-decoration:none;
}

.relay-footer-container .footer-paragraphs a:hover{
    text-decoration:underline;
    color:#0087aa;
}

.relay-footer-container .see-disclaimer{
    color:#000;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:600;
}

.relay-footer-container .footer-bottom{
    margin-top:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:25px;
}

.relay-footer-container .footer-bottom p{
    font-size:1.1rem;
}

.relay-footer-container .footer-icons{
    display:flex;
    gap:50px;
}

.relay-footer-container .footer-icon{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.15rem;
}

.relay-footer-container .footer-icon i{
    font-size:28px;
    color:#666;
}

/*==========================
        Responsive
===========================*/

@media(max-width:768px){

.account-page .footer .footer-links{
gap:18px;
}

.account-page .footer-bottom{
flex-direction:column;
align-items:flex-start;
}

.account-page .footer-icons{
flex-direction:column;
gap:20px;
}

.investment-box ul{
flex-direction:column;
gap:15px;
}

}

/* ======================================================
   SCREEN: SMART CARD
   ====================================================== */
/* ================= HERO ================= */

.smart-card-hero{
    width:100%;
    background:#fbf9f6;
    padding:50px 18% 90px;
}

.smart-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    max-width: 1400px;
    margin: 0 auto;
}

.smart-left{
    flex:1;
}

.card-label{
    font-size:18px;
    color:#111;
    margin-bottom:10px;
}

.smart-left h1{
    font-size:35px;
    line-height:1.15;
    font-weight:700;
    color:#1d2142;
    max-width:800px;
}

.smart-left sup{
    font-size:18px;
}

.apply-btn{
    margin-top:100px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:317px;
    height:51px;
    background:#05A7CE;
    border-radius:15px;
    color:white;
    text-decoration:none;
    font-size:16.8px;
    font-weight:700;
    transition:.3s;
}

.apply-btn:hover{
    background:#028cb0;
}

/* Right */

.smart-right{
    flex:1;
    display:flex;
    justify-content:center;
}

.smart-card-image{
    width:100%;
    max-width:650px;
    height:auto;
}

/* ================= FEATURES ================= */

.smart-features{
    margin-top:120px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:90px;
}

.feature-box{
    display:flex;
    flex-direction:column;
}

.feature-icon{
    font-size:35px;
    color:#202020;
    margin-bottom:10px;
}

.feature-box p{
    font-size:16px;
    line-height:1.4;
    color:#202020;
    font-weight: 600;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
.smart-left h1{
font-size:58px;
}

.apply-btn{
width:360px;
font-size:28px;
}

.feature-box p{
font-size:23px;
}

}

@media(max-width:992px){

.smart-container{
flex-direction:column;
text-align:center;
}

.smart-left h1{
margin:auto;
}

.apply-btn{
margin-top:45px;
}

.smart-features{
grid-template-columns:1fr;
gap:60px;
margin-top:90px;
text-align:center;
}

.feature-box{
align-items:center;
}

}

@media(max-width:768px){

.smart-card-hero{
padding:50px 25px 70px;
}

.card-label{
font-size:18px;
}

.smart-left h1{
font-size:42px;
}

.apply-btn{
width:100%;
height:70px;
font-size:24px;
}

.smart-card-image{
max-width:420px;
}

.feature-icon{
font-size:46px;
}

.feature-box p{
font-size:20px;
}

}

@media(max-width:500px){

.smart-left h1{
font-size:34px;
}

.feature-box p{
font-size:18px;
}

}

/*======================
SMART BENEFITS
======================*/

.smart-card-page .smart-benefits{

    background:#fbf9f6;
    padding:40px 7% 90px;

}

.smart-card-page .benefits-container{

    max-width:850px;
    margin:auto;

}

.smart-card-page .benefits-container h2{

    text-align:center;
    font-size:40px;
    font-weight:700;
    color:#1d2142;
    margin-bottom:45px;
}

/* Cards */

.smart-card-page .benefit-card{
    background:#fff;
    border-radius:20px;
    padding:6px 26px 6px;
    margin-bottom:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.smart-card-page .benefit-text{
    flex:1;
}

.smart-card-page .benefit-text h3{
    font-size:30px;
    color:#1d2142;
    margin-bottom:5px;
    font-weight: 600;
}

.smart-card-page .benefit-description{
    font-size:15px;
    margin-bottom:15px;
    color:#222;
}

.smart-card-page .benefit-text ul{
    list-style:none;
}

.smart-card-page .benefit-text li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:7px;
    font-size:15px;
    color:#222;
}

.smart-card-page .benefit-text li i{
    font-size:16px;
    color:#222;
}

.smart-card-page .benefit-text sup{
    font-size:8px;
}

.smart-card-page .benefit-image{
    width:220px;
    display:flex;
    justify-content:center;
}

.smart-card-page .benefit-image img{
    width:100%;
    height:auto;
}

/* Link */

.faq-link{
    display:inline-block;
    margin:18px 0 55px;
    color:#1d2142;
    font-size:15px;
    font-weight: 600;
}

.faq-link span{
    text-decoration:underline;
}

/* Buttons */

.smart-card-page .benefit-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
}

.outline-btn{
    width:246px;
    height:54px;
    background:white;
    border:2px solid #05A7CE;
    color:#05A7CE;
    font-size:17px;
    font-weight:800;
    border-radius:15px;
    cursor:pointer;
    transition:.3s;
}

.outline-btn:hover{
    background:#05A7CE;
    color:white;
}

.filled-btn{
    width:246px;
    height:54px;
    background:#05A7CE;
    color:white;
    border:none;
    font-size:17px;
    font-weight:800;
    border-radius:15px;
    cursor:pointer;
    transition:.3s;
}

.filled-btn:hover{
    background:#028cb0;
}

/*======================
RESPONSIVE
======================*/

@media(max-width:992px){

.smart-card-page .benefit-card{

flex-direction:column;

text-align:center;

}

.smart-card-page .benefit-text li{

justify-content:center;

}

.smart-card-page .benefit-buttons{

flex-direction:column;

align-items:center;

}

.outline-btn,
.filled-btn{

width:100%;

max-width:400px;

}

}

@media(max-width:768px){

.smart-card-page .smart-benefits{
padding:50px 20px 70px;
}

.smart-card-page .benefits-container h2{
font-size:1.75rem;
margin-bottom:28px;
}

.smart-card-page .benefit-card{
padding:24px 20px;
flex-direction:column;
text-align:center;
gap:24px;
}

.smart-card-page .benefit-text h3{
font-size:1.35rem;
}

.smart-card-page .benefit-description{
font-size:0.9rem;
line-height:1.55;
}

.smart-card-page .benefit-text li{
font-size:0.88rem;
justify-content:center;
}

.smart-card-page .benefit-image{
width:100%;
max-width:180px;
margin:0 auto;
}

.smart-card-page .benefit-buttons{
flex-direction:column;
align-items:stretch;
}

.outline-btn,
.filled-btn{
width:100%;
max-width:none;
height:50px;
font-size:15px;
}

.faq-link{
font-size:0.9rem;
}

}

/* ============================================================
   INSURANCE PAGE
   ============================================================ */

body.insurance-page{
    background:#fff;
    min-height:100vh;
}

/* ================= HERO SECTION ================= */
.insurance-hero{
    width:100%;
    background:#f8f6f3;
    padding:70px 7%;
}

/* HERO */

.insurance-hero .hero-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
    margin-bottom:100px;
}

.insurance-hero .hero-text{
    flex:0 0 auto;
    max-width:620px;
}

.insurance-hero .hero-text h1{
    font-size:64px;
    font-weight:700;
    line-height:1.08;
    color:#111;
    max-width:620px;
}

.insurance-hero .hero-image{
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.umbrella-placeholder{
    width:480px;
    height:430px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.umbrella-placeholder img{
    max-width:100%;
    height:auto;
    display:block;
}

/* OPTIONS */

.insurance-options h2{
    font-size:46px;
    margin-bottom:35px;
    color:#111;
    font-weight:600;
}

.option-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.option-card{
    background:#fff;
    border-radius:20px;
    height:210px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    cursor:pointer;
    transition:.3s;
}

.option-card:hover{
    transform:translateY(-8px);
}

.option-image{
    width:90px;
    height:90px;
    margin-bottom:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.option-card h3{
    font-size:34px;
    font-weight:500;
    color:#111;
}

@media(max-width:1200px){

.insurance-hero .hero-container{
flex-direction:column;
text-align:center;
}

.insurance-hero .hero-text h1{
max-width:100%;
font-size:52px;
}

.option-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.insurance-hero .hero-text h1{
font-size:40px;
}

.insurance-options h2{
font-size:34px;
}

.option-grid{
grid-template-columns:1fr;
}

.umbrella-placeholder{
width:100%;
height:320px;
}

.option-card{
height:180px;
}

.option-card h3{
font-size:28px;
}

}

/*==================================================
            INSURANCE PROVIDERS SECTION
==================================================*/

.providers-section{
    background:#f8f7f4;
    padding:90px 0 110px;
}

.providers-container{
    width:min(92%,1400px);
    margin:auto;
}

/*=====================
        TOP TEXT
=====================*/

.providers-text{
    font-size:1.35rem;
    color:#222;
    margin-bottom:12px;
    max-width:820px;
    line-height:1.7;
}

.advertising-link{
    display:inline-block;
    color:#111;
    text-decoration:underline;
    font-size:0.85rem;
    font-weight:700;
    margin-bottom:45px;
}

/*=====================
      FILTER BUTTONS
=====================*/

.filter-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:55px;
}

.filter-btn{
    border:1px solid #d9d9d9;
    background:#fff;
    color:#444;
    border-radius:999px;
    padding:10px 24px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.filter-btn:hover{
    background:#f0f0f0;
}

.filter-btn.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

/*=====================
      CAROUSEL
=====================*/

.providers-wrapper{
    display:flex;
    align-items:center;
    gap:20px;
}

.providers-slider{
    flex:1;
    position:relative;
}

.providers-page{
    display:none;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:25px;
}

.providers-page.active{
    display:grid;
}

/*=====================
        CARD
=====================*/

.provider-card{
    background:#fff;
    border-radius:22px;
    padding:28px;
    min-height:420px;
    display:flex;
    flex-direction:column;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
    animation:fadeIn .35s ease;
}

.provider-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.provider-logo{
    width:110px;
    height:70px;
    background:#ececec;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    overflow:hidden;
}

.provider-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.provider-card h2{
    font-size:2rem;
    margin-bottom:18px;
    color:#111;
}

.provider-card p{
    color:#444;
    line-height:1.7;
    font-size:1.08rem;
    margin-bottom:auto;
}

.provider-card a{
    margin-top:35px;
    color:#111;
    font-weight:700;
    text-decoration:none;
    font-size:1.1rem;
}

.provider-card a:hover{
    text-decoration:underline;
}

/*=====================
        ARROWS
=====================*/

.carousel-btn{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid #e0e0e0;
    background:#fff;
    color:#111;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    z-index:10;
}

.carousel-btn:hover{
    background:#f9f9f9;
}

.prev-btn{
    visibility:hidden; /* Hidden initially */
}

/*=====================
        DOTS
=====================*/

.slider-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:45px;
}

.dot{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#d2d2d2;
}

.dot.active{
    width:36px;
    border-radius:40px;
    background:#111;
}

/*=====================
      RESPONSIVE
=====================*/

@media(max-width:1300px){

.providers-page{
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
}

}

@media(max-width:900px){

.providers-wrapper{
flex-direction:column;
}

.carousel-btn{
display:none;
}

.providers-page{
grid-template-columns:1fr;
grid-template-rows:auto;
}

.filter-buttons{
justify-content:center;
}

.providers-text{
text-align:center;
max-width:100%;
}

.advertising-link{
display:block;
text-align:center;
}

}

@media(max-width:600px){

.providers-section{
padding:70px 20px;
}

.filter-btn{
width:100%;
}

.provider-card{
min-height:auto;
padding:24px;
}

.provider-card h2{
font-size:1.6rem;
}

.provider-card p{
font-size:1rem;
}

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*=========================================
        INSURANCE RESOURCES
==========================================*/

.insurance-resources{
    background:#F8F7F4;
    padding:110px 0;
}

.resources-container{
    width:min(92%,1400px);
    margin:auto;
}

.resources-container h2{
    font-size:4rem;
    color:#111;
    font-weight:700;
    margin-bottom:60px;
}

/*==========================
        GRID
===========================*/

.resources-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

/*==========================
        CARD
===========================*/

.resource-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
}

.resource-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

/*==========================
        IMAGE
===========================*/

.resource-image{
    height:250px;
    background:#e8e8e8;
    display:flex;
    justify-content:center;
    align-items:center;
}

.resource-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*==========================
        CONTENT
===========================*/

.resource-content{
    padding:35px;
}

.resource-category{
    color:#777;
    font-size:.95rem;
    letter-spacing:2px;
    font-weight:700;
}

.resource-content h3{
    margin:20px 0;
    font-size:2rem;
    color:#111;
    line-height:1.3;
}

.resource-content p{
    color:#555;
    font-size:1.1rem;
    line-height:1.8;
    margin-bottom:35px;
}

.resource-content a{
    color:#111;
    text-decoration:none;
    font-weight:700;
    font-size:1.15rem;
}

.resource-content a:hover{
    text-decoration:underline;
}

/*==========================
        RESPONSIVE
===========================*/

@media(max-width:1100px){

.resources-grid{
grid-template-columns:1fr;
}

.resources-container h2{
text-align:center;
font-size:3rem;
}

.resource-image{
height:280px;
}

}

@media(max-width:768px){

.insurance-resources{
padding:80px 20px;
}

.resources-container h2{
font-size:2.4rem;
}

.resource-content{
padding:25px;
}

.resource-content h3{
font-size:1.6rem;
}

.resource-content p{
font-size:1rem;
}

}

/*=========================================
                FAQ SECTION
==========================================*/

.insurance-faq{
    background:#F8F7F4;
    padding:110px 0;
}

.faq-container{
    width:min(92%,1100px);
    margin:auto;
}

.faq-container h2{
    text-align:center;
    font-size:3.8rem;
    color:#111;
    margin-bottom:70px;
}

/*============================*/

.faq-item{
    border-bottom:1px solid #d9d9d9;
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:32px 0;
    text-align:left;
}

.faq-question span:first-child{
    font-size:1.6rem;
    font-weight:600;
    color:#111;
    max-width:90%;
    line-height:1.4;
}

.faq-icon{
    font-size:3rem;
    color:#00A9CE;
    transition:.3s;
}

/*============================*/

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer p{
    padding-bottom:28px;
    color:#555;
    line-height:1.8;
    font-size:1.1rem;
}

/*============================*/

.faq-item.active .faq-answer{
    max-height:250px;
}

.faq-item.active .faq-icon{
    transform:rotate(180deg);
}

/*============================
        RESPONSIVE
=============================*/

@media(max-width:768px){

.faq-container h2{
font-size:2.5rem;
}

.faq-question span:first-child{
font-size:1.25rem;
}

.faq-icon{
font-size:2.3rem;
}

}

@media(max-width:500px){

.insurance-faq{
padding:80px 20px;
}

.faq-container h2{
font-size:2rem;
}

.faq-question{
padding:24px 0;
}

.faq-question span:first-child{
font-size:1.05rem;
}

.faq-answer p{
font-size:.95rem;
}

}

/* ============================================================
   PRODUCTS PAGE: MONEY RIGHT HERO
   ============================================================ */

.products-page .money-right-hero{
    width:100%;
    background:#05A7CF;
    padding:clamp(36px, 8vw, 60px) clamp(16px, 4vw, 20px);
    text-align:center;
    box-sizing:border-box;
}

.products-page .money-container{
    max-width:900px;
    margin:auto;
    width:100%;
    box-sizing:border-box;
}

.products-page .money-right-hero h1{
    font-size:clamp(1.75rem, 6vw, 3.4rem);
    font-weight:800;
    color:#fff;
    line-height:1.1;
    margin-bottom:10px;
    word-wrap:break-word;
}

.products-page .money-right-hero h1 span{
    font-size:0.45em;
    top:-0.5em;
    position:relative;
}

.products-page .money-right-hero p{
    color:white;
    font-size:clamp(1rem, 2.8vw, 1.35rem);
    line-height:1.5;
    max-width:640px;
    margin:auto;
}


/*====================
RESPONSIVE
====================*/

@media(max-width:992px){

.products-page .money-right-hero{
padding:60px 20px;
}

.products-page .money-right-hero h1{
font-size:56px;
}

.products-page .money-right-hero p{
font-size:21px;
}

}


@media(max-width:768px){

.products-page .money-right-hero{
padding:55px 20px;
}

.products-page .money-right-hero h1{
font-size:42px;
}

.products-page .money-right-hero p{
font-size:18px;
line-height:1.6;
}

}


@media(max-width:480px){

.products-page .money-right-hero h1{
font-size:34px;
}

.products-page .money-right-hero p{
font-size:17px;
}

}

/*=========================
    PRODUCTS SECTION
=========================*/

.products-section{
    background:#e7e5ea;
    padding:35px 40px 60px;
}

/* ============================================================
   PRODUCTS PAGE: PRODUCTS SECTION
   ============================================================ */
.products-page .products-grid{
    max-width:1700px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

/* CARD */
.products-page .product-card{
    background:#fff;
    display:flex;
    flex-direction:column;
    min-height:200px;
}

.products-page .product-top{
    display:flex;
    align-items:flex-start;
    gap:28px;
    padding:12px;
    min-height:230px;
}


/* IMAGE PLACEHOLDER */
.products-page .product-image{
    width:130px;
    height:130px;
    border-radius:50%;
    background: #10A9CF;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:15px;
    text-align:center;
    overflow:hidden;
}

.products-page .product-image img{
    width:100%;
    height:100%;
    object-fit: fill;
    display:block;
}

/* TEXT */

.products-page .product-info{
    flex:1;
}

.products-page .product-info h2{
    font-size:23px;
    color: black;
    margin-bottom:18px;
    line-height:1.2;
}

.products-page .product-info p{
    font-size:16px;
    color:black;
    line-height:1.4;
    margin-bottom:20px;
}

.products-page .product-info a{
    text-decoration:none;
    color:#008db8;
    font-size:17px;
    font-weight:800;
}


/* LINKS */
.products-page .product-links{
    border-top:1px solid #ddd;
    padding:12px 10px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.products-page .product-links a{
    color:#006d96;
    font-weight:800;
    text-decoration:underline;
    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:1200px){

.products-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.products-page .benefits-section{
    padding:60px 20px;
}

.products-page .benefits-image{
    width:280px;
    height:280px;
}

.products-page .benefits-content h2{
    font-size:32px;
}

.products-page .benefits-content p{
    font-size:16px;
}

.products-page .benefits-content a{
    font-size:16px;
}

.products-page .products-grid{
grid-template-columns:1fr;
}

.products-page .product-top{
flex-direction:column;
align-items:center;
text-align:center;
}

.products-page .product-image{
width:150px;
height:150px;
}

.products-page .product-links{
text-align:center;
}

}

@media(max-width:480px){

.products-page .products-section{
padding:25px 15px;
}

.products-page .product-top{
padding:25px;
}

.products-page .product-links{
padding:25px;
}

.products-page .product-info h2{
font-size:24px;
}

.products-page .product-info p{
font-size:16px;
}

.products-page .product-links a{
font-size:16px;
}

}

/*==================================
        BENEFITS SECTION
==================================*/

.products-page .benefits-section{
    background:#fff;
    padding:80px 40px;
}

.products-page .benefits-container{
    max-width:1450px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.products-page .benefits-image{
    width:400px;
    height:400px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.products-page .benefits-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.products-page .benefits-content{
    flex:1;
    text-align:left;
}

.products-page .benefits-content h2{
    font-size:42px;
    line-height:1.1;
    color:#23184B;
    margin-bottom:15px;
    font-weight:900;
}

.products-page .benefits-content p{
    font-size:18px;
    color:#444;
    line-height:1.6;
    margin-bottom:25px;
}

.products-page .benefits-content a{
    color:#00A2C7;
    font-size:18px;
    font-weight:800;
    text-decoration:none;
}

.products-page .benefits-content a:hover{
    text-decoration:underline;
}

.member-benefits-page .benefits-section{
    background:#fff;
    padding:120px 90px;
}

.member-benefits-page .benefits-container{
    max-width:1450px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

.member-benefits-page .benefits-image{
    width:450px;
    height:450px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.member-benefits-page .benefits-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.member-benefits-page .benefits-content{
    flex:1;
    text-align:left !important;
}

.member-benefits-page .benefits-content h2{
    font-size:46px;
    line-height:1.1;
    color:#23184B;
    margin-bottom:10px;
    font-weight:900;
    text-align:left !important;
}

.member-benefits-page .benefits-content p{
    font-size:15px;
    line-height:1.4;
    color:#444;
    margin-bottom:15px;
    text-align:left !important;
}

.member-benefits-page .benefits-content a{
    text-decoration:none;
    color:#008FBE;
    font-size:15px;
    font-weight:700;
    text-align:left !important;
}

/*==================================
        MORE ABOUT SOFI
==================================*/

.member-benefits-page .more-sofi{
    background:#24134F;
    padding:80px 40px;
}

.member-benefits-page .more-container{
    max-width:1650px;
    margin:auto;
}

.member-benefits-page .more-container h2{
    text-align:center;
    color:white;
    font-size:48px;
    margin-bottom:36px;
    font-weight:900;
}

.member-benefits-page .more-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.member-benefits-page .more-card{
    background:linear-gradient(to right, #544783 50%, #44376D 50%);
    background-size:200% 100%;
    background-position:right bottom;
    height:154px;
    display:flex;
    align-items:center;
    padding-left:60px;
    text-decoration:none;
    color:white;
    font-size:30px;
    font-weight:800;
    transition:background-position .5s ease;
}

.member-benefits-page .more-card:hover{
    background-position:left bottom;
}

/*============================
        RESPONSIVE
============================*/

@media(max-width:1200px){

.products-page .benefits-container{
    flex-direction:column;
    text-align:center;
}

.products-page .benefits-image{
    width:350px;
    height:350px;
}

.products-page .benefits-content{
    text-align:center;
}

.products-page .benefits-content h2{
    text-align:center;
}

.member-benefits-page .benefits-container{
flex-direction:column;
}

.member-benefits-page .benefits-image{
width:450px;
height:450px;
}

.member-benefits-page .benefits-content h2{
font-size:56px;
}

.member-benefits-page .benefits-content p{
font-size:22px;
}

.member-benefits-page .more-container h2{
font-size:56px;
}

.member-benefits-page .more-card{
font-size:38px;
padding-left:45px;
}

}

@media(max-width:768px){

.member-benefits-page .benefits-section{
padding:70px 20px;
}

.member-benefits-page .benefits-image{
width:320px;
height:320px;
}

.member-benefits-page .benefits-content h2{
font-size:42px;
}

.member-benefits-page .benefits-content p{
font-size:18px;
}

.member-benefits-page .benefits-content a{
font-size:22px;
}

.member-benefits-page .more-sofi{
padding:60px 20px;
}

.member-benefits-page .more-grid{
grid-template-columns:1fr;
}

.member-benefits-page .more-container h2{
font-size:42px;
}

.member-benefits-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}

}

@media(max-width:480px){

.member-benefits-page .benefits-image{
width:260px;
height:260px;
}

.member-benefits-page .benefits-content h2{
font-size:34px;
}

.member-benefits-page .more-card{
font-size:24px;
height:120px;
}

/* Leadership page responsive styles */
@media(max-width:1200px){
.leadership-page .more-container h2{
font-size:56px;
}

.leadership-page .more-card{
font-size:38px;
padding-left:45px;
}
}

@media(max-width:768px){
.leadership-page .more-sofi{
padding:60px 20px;
}

.leadership-page .more-grid{
grid-template-columns:1fr;
}

.leadership-page .more-container h2{
font-size:42px;
}

.leadership-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}
}

@media(max-width:480px){
.leadership-page .more-card{
font-size:24px;
height:120px;
}
}

}

/*==========================
    MEMBER BENEFITS: HERO
==========================*/

.member-hero{
    position:relative;
    width:100%;
    min-height:clamp(320px, 55vw, 550px);
    height:auto;
    overflow:hidden;
}

.member-bg{
    position:absolute;
    inset:0;
    background-size:cover;
}

.member-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.member-overlay{
    position:relative;
    z-index:2;
    width:100%;
    min-height:clamp(320px, 55vw, 550px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:clamp(40px, 8vw, 60px) clamp(16px, 4vw, 24px);
    box-sizing:border-box;
}

.member-overlay h1{
    color:#fff;
    font-size:clamp(1.75rem, 5.5vw, 3.4rem);
    font-weight:900;
    line-height:1.25;
    max-width:min(1000px, 100%);
    word-wrap:break-word;
}

/*MEMBER BENEFITS INTRO*/

.member-benefits-page .benefits-intro{
    position:relative;
    width:100%;
    min-height:690px;
    overflow:hidden;
    background:#fafafa;
}

.member-benefits-page .benefits-bg{
    position:absolute;
    inset:0;
    background:#f7f7f7;
    background:url(images/MB19-5215_Membership_AtAGlance_BG@2x.jpg)
    center/cover no-repeat;
    z-index:1;
}

.member-benefits-page .benefits-contents{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:auto;
    padding:100px 60px;
    text-align:center;
}

.member-benefits-page .benefits-contents h2{
    font-size:47px;
    font-weight:900;
    color:#24185e;
    line-height:1.18;
    max-width:1200px;
    margin:auto;
}

.member-benefits-page .benefit-wrapper{
    display:flex;
    justify-content:space-evenly;
    align-items:flex-start;
    margin-top:70px;
    gap:120px;
    flex-wrap:wrap;
}

.member-benefits-page .benefit-box{
    width:450px;
    text-align:center;
}

.member-benefits-page .benefit-pic{
    width:130px;
    height:130px;
    margin:auto;
    border-radius:50%;
    background:#dddddd;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.member-benefits-page .benefit-pic img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.member-benefits-page .benefit-box h3{
    margin-top:45px;
    font-size:28px;
    color:#24185e;
    font-weight:800;
}

.member-benefits-page .benefit-box p{
    margin-top:15px;
    font-size:16px;
    color:#2d2d2d;
    line-height:1.7;
}

.learn-more{
    margin-top:65px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:#0098c7;
    font-size:28px;
    font-weight:500;
    transition:.3s;
}

.learn-more:hover{
    color:#007ea8;
}

.down-arrow{
    font-size:45px;
    animation:bounce 1.6s infinite;
}

@keyframes bounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(10px);
    }
}

html{
    scroll-behavior:smooth;
}

/*===============================
        MONEY GOALS
================================*/

.money-goals{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#ffffff;
    padding:90px 0px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
}

/* LEFT */

.money-left{
    position:relative;
    width:60%;
    max-width:800px;
}

.money-image{
    width:100%;
    height:950px;
    background:#d9d9d9;
    background:url(images/MB19-5152_FinancialPlanner-MemberPage-DesktopSize@2x.jpg)
    center/cover no-repeat;
}

.money-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left;
}

/* Heading */

.money-title{
    position:absolute;
    top:55px;
    left:45px;
}

.money-title h2{
    font-size:60px;
    font-weight:900;
    line-height:1.12;
    color:#24185d;
}

/* Member label */

.member-tag{
    position:absolute;
    left:35px;
    bottom:80px;
    background:#AB989D;
    color:#24185d;
    padding:11px 14px;
    font-size:16px;
}

/*============================
      RIGHT SIDE
=============================*/

.member-benefits-page .money-right{
    width:35%;
    margin-left:-200px;
    margin-top:90px;
    z-index:20;
    position:relative;
}

.member-benefits-page .benefit-card-new{
    background:#fff;
    padding:18px 17px;
    margin-bottom:15px;
    box-shadow:0 7px 20px rgba(0,0,0.05,.15);
    border-left:7px solid #c0006f;
}

.member-benefits-page .benefit-card-new h3{
    font-size:33px;
    color:#24185d;
    font-weight:800;
}

.member-benefits-page .benefit-card-new p{
    font-size:15px;
    line-height:1.7;
    color:#444;
}

.member-benefits-page .benefit-card-new a{
    color:#008dc3;
    text-decoration:underline;
}

/*==================================
      COMMUNITY BENEFITS
===================================*/

.community-section{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#ffffff;
    padding:90px 0px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
}

/* LEFT */

.community-left{
    position:relative;
    width:60%;
    max-width:800px;
}

.community-image{
    width:100%;
    height:940px;
    background:#1498b5;
    background:url(images/MB19-5152_Events-MemberPage-DesktopSize-AccessibleBlue@2x.jpg)
    center/cover no-repeat;
}

/* If using an image tag */

.community-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left;
}

/* Heading */

.community-title{
    position:absolute;
    top:55px;
    left:45px;
}

.community-title h2{
    font-size:60px;
    font-weight:900;
    line-height:1.12;
    color: white;
}

/* Bottom member label */

.community-tag{
    background:#007c98;
    color:white;
    position:absolute;
    left:35px;
    bottom:80px;
    padding:11px 14px;
    font-size:16px;
}

.community-tag strong{
    font-weight:900;
}

/*============================
      RIGHT SIDE
=============================*/

.community-right{
    width:35%;
    margin-left:-200px;
    margin-top:180px;
    z-index:20;
    position:relative;
}

.community-card{
    background:#fff;
    padding:18px 17px;
    margin-bottom:15px;
    box-shadow:0 7px 20px rgba(0,0,0.05,.15);
    border-left:7px solid #f1c64f;
}

.community-card h3{
    font-size:33px;
    color:#24185d;
    font-weight:800;
}

.community-card p{
    font-size:15px;
    line-height:1.7;
    color:#444;
}

.community-card a{
    color:#0094c6;
    text-decoration:underline;
}

/*==========================
    PART 5
==========================*/

.members-section{
    position:relative;
    width:100%;
    min-height:1180px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Background image */

.members-bg{
    position:absolute;
    inset:0;
    background:#edf0f3;
    background-image:url(images/MB19-5152_MembershipLP_TestimonialsBG@2x.jpg);
    background-size:cover;
    background-position:center;
}

/* Content */

.members-overlay{
    position:relative;
    z-index:2;
    width:1200px;
    margin-top:25%;
    text-align:center;
}

.members-overlay h2{
    font-size:57px;
    font-weight:900;
    color:#22195b;
    margin-bottom:7px;
}

.members-overlay h2 span{
    color:#007c98;
}

.members-subtitle{
    font-size:25px;
    color:#1b1b1b;
    margin-bottom:80px;
}

.members-subtitle span{
    color: #007c98;
}

.testimonial-wrapper{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.testimonial-card{
    background:white;
    width:455px;
    padding:60px 45px 45px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    position:relative;
}

.profile-circle{
    width:78px;
    height:78px;
    border-radius:50%;
    background:#d9d9d9;
    position:absolute;
    left:50%;
    top:-39px;
    transform:translateX(-50%);
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.profile-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.testimonial-text{
    font-size:15.5px;
    line-height:1.8;
    color:#2b2b2b;
    margin-bottom:35px;
}

.testimonial-card h4{
    color:#22195b;
    font-size:15.5px;
    margin-bottom:5px;
    font-weight: 800;
}

.testimonial-card span{
    color:#444;
    font-size:15.5px;
}

.member-btn{
    width:235px;
    height:60px;
    margin-top:70px;
    background:#23145b;
    color:white;
    border:none;
    border-radius:18px;
    padding:22px 30px;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.member-btn:hover{
    background:#160c45;
    transform:translateY(-3px);
}

/* Responsive */

@media(max-width:1200px){

.member-hero{
height:450px;
}

.member-overlay h1{
font-size:48px;
}

.member-benefits-page .benefits-intro{
min-height:600px;
}

.member-benefits-page .benefits-contents{
padding:80px 40px;
}

.member-benefits-page .benefits-contents h2{
font-size:40px;
}

.member-benefits-page .benefit-wrapper{
gap:60px;
}

.member-benefits-page .benefit-box{
width:400px;
}

.money-goals{
padding:70px 0;
}

.money-left{
width:55%;
}

.money-image{
height:800px;
}

.money-title h2{
font-size:50px;
}

.member-tag{
font-size:14px;
padding:9px 12px;
}

.member-benefits-page .money-right{
width:40%;
margin-left:0;
margin-top:70px;
}

.member-benefits-page .benefit-card-new h3{
font-size:28px;
}

.community-section{
padding:70px 0;
}

.community-left{
width:55%;
}

.community-image{
height:800px;
}

.community-title h2{
font-size:50px;
}

.community-tag{
font-size:14px;
padding:9px 12px;
}

.community-right{
width:40%;
margin-left:-150px;
margin-top:70px;
}

.community-card h3{
font-size:28px;
}

}

@media(max-width:900px){

.member-hero{
height:400px;
}

.member-overlay h1{
font-size:42px;
}

.member-benefits-page .benefits-intro{
min-height:550px;
}

.member-benefits-page .benefits-contents{
padding:60px 30px;
}

.member-benefits-page .benefits-contents h2{
font-size:36px;
}

.member-benefits-page .benefit-wrapper{
gap:40px;
flex-direction:column;
align-items:center;
}

.member-benefits-page .benefit-box{
width:100%;
max-width:400px;
}

.money-goals{
flex-direction:column;
padding:60px 20px;
}

.money-left{
width:100%;
max-width:100%;
}

.money-image{
height:500px;
}

.money-title h2{
font-size:42px;
left:30px;
top:40px;
}

.member-tag{
left:25px;
bottom:50px;
}

.member-benefits-page .money-right{
width:100%;
margin-left:0;
margin-top:40px;
max-width:600px;
}

.member-benefits-page .benefit-card-new h3{
font-size:24px;
}

.community-section{
flex-direction:column;
padding:60px 20px;
}

.community-left{
width:100%;
max-width:100%;
}

.community-image{
height:500px;
}

.community-title h2{
font-size:42px;
left:30px;
top:40px;
}

.community-tag{
left:25px;
bottom:50px;
}

.community-right{
width:100%;
margin-left:0;
margin-top:40px;
max-width:600px;
}

.community-card h3{
font-size:24px;
}

.members-overlay{
width:90%;
}

.members-overlay h2{
font-size:45px;
}

.members-subtitle{
font-size:20px;
}

.testimonial-card{
width:100%;
}

}

/*==========================
    WANT IN
==========================*/

.want-in{
    height:460px;
    background-image:url("../images/MB19-5152_MembershipLP_ChampagneTray_Destkop@2x2.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}

.want-in-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.15);
    display:flex;
    align-items:center;
}

.want-in-content{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.want-in-content h1{
    color:white;
    font-size:3rem;
    line-height:1.2;
    max-width:600px;
    margin-bottom:40px;
}

/* ================= FAQ ================= */

.faq-section{
    padding:80px 20px;
}

.faq-section h2{
    text-align:center;
    font-size:50px;
    margin-bottom:60px;
}

.faq-containers{
    max-width:900px;
    margin:auto;
}

.faq-item{
    border-bottom:1px solid #ddd;
    padding:25px 0;
}

.faq-questions{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    cursor:pointer;
    gap:20px;
}

.faq-questions h3{
    font-size:23px;
    line-height:1.4;
    font-weight:600;
}

.icon{
    font-size:35px;
    color:#0076A8;
    min-width:40px;
    text-align:center;
    transition:.3s;
}

.faq-answers{
    max-height:500px;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answers p{
    margin-top:18px;
    color:#666;
    line-height:1.8;
    font-size:17px;
    max-width:750px;
}

.faq-item:not(.active) .faq-answers{
    max-height:0;
}

.faq-btn{
    display:block;
    margin:50px auto 0;
    padding:16px 35px;
    border:2px solid #0076A8;
    background:white;
    color:#0076A8;
    font-size:17px;
    border-radius:40px;
    cursor:pointer;
    transition:.3s;
}

.faq-btn:hover{
    background:#0076A8;
    color:white;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

.member-hero{
height:350px;
}

.member-overlay h1{
font-size:36px;
max-width:90%;
}

.member-benefits-page .benefits-intro{
min-height:500px;
}

.member-benefits-page .benefits-contents{
padding:50px 20px;
}

.member-benefits-page .benefits-contents h2{
font-size:32px;
}

.member-benefits-page .benefit-wrapper{
gap:30px;
}

.member-benefits-page .benefit-box{
width:100%;
max-width:350px;
}

.member-benefits-page .benefit-pic{
width:110px;
height:110px;
}

.member-benefits-page .benefit-box h3{
font-size:24px;
margin-top:35px;
}

.member-benefits-page .benefit-box p{
font-size:15px;
}

.money-goals{
padding:50px 15px;
}

.money-image{
height:400px;
}

.money-title h2{
font-size:36px;
left:20px;
top:35px;
}

.member-tag{
font-size:13px;
padding:8px 10px;
left:20px;
bottom:40px;
}

.member-benefits-page .money-right{
margin-top:30px;
max-width:100%;
}

.member-benefits-page .benefit-card-new h3{
font-size:22px;
}

.member-benefits-page .benefit-card-new p{
font-size:14px;
}

.community-section{
padding:50px 15px;
}

.community-image{
height:400px;
}

.community-title h2{
font-size:36px;
left:20px;
top:35px;
}

.community-tag{
font-size:13px;
padding:8px 10px;
left:20px;
bottom:40px;
}

.community-right{
margin-top:30px;
max-width:100%;
}

.community-card h3{
font-size:22px;
}

.community-card p{
font-size:14px;
}

.want-in{
    height:400px;
}

.want-in-content h1{
    font-size:2.2rem;
}

.faq-section h2{
    font-size:38px;
}

.faq-questions h3{
    font-size:20px;
}

}

@media(max-width:500px){

.member-hero{
height:300px;
}

.member-overlay h1{
font-size:30px;
line-height:1.2;
}

.member-btn{
width:100%;
max-width:280px;
font-size:15px;
padding:18px 25px;
}

.member-benefits-page .benefits-intro{
min-height:450px;
}

.member-benefits-page .benefits-contents{
padding:40px 15px;
}

.member-benefits-page .benefits-contents h2{
font-size:28px;
}

.member-benefits-page .benefit-wrapper{
gap:25px;
}

.member-benefits-page .benefit-box{
width:100%;
max-width:300px;
}

.member-benefits-page .benefit-pic{
width:100px;
height:100px;
}

.member-benefits-page .benefit-box h3{
font-size:22px;
margin-top:30px;
}

.member-benefits-page .benefit-box p{
font-size:14px;
}

.money-goals{
padding:40px 15px;
}

.money-image{
height:350px;
}

.money-title h2{
font-size:30px;
left:15px;
top:30px;
}

.member-tag{
font-size:12px;
padding:7px 9px;
left:15px;
bottom:35px;
}

.member-benefits-page .money-right{
margin-top:25px;
}

.member-benefits-page .benefit-card-new h3{
font-size:20px;
}

.member-benefits-page .benefit-card-new p{
font-size:13px;
}

.community-section{
padding:40px 15px;
}

.community-image{
height:350px;
}

.community-title h2{
font-size:30px;
left:15px;
top:30px;
}

.community-tag{
font-size:12px;
padding:7px 9px;
left:15px;
bottom:35px;
}

.community-right{
margin-top:25px;
}

.community-card h3{
font-size:20px;
}

.community-card p{
font-size:13px;
}

.want-in{
height:350px;
}

.want-in-content h1{
font-size:1.7rem;
}

.hero-btn{
width:100%;
}

.faq-section{
padding:60px 18px;
}

.faq-section h2{
font-size:34px;
}

.faq-questions{
align-items:center;
}

.faq-questions h3{
font-size:17px;
}

.faq-answers p{
font-size:15px;
}

.icon{
font-size:28px;
}

}

/*===============================
        LEARN
================================*/

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/* ================= HEADER ================= */
.learn-page .learn-header{
    background:#24164b;
    color:white;
    position:sticky;
    top:0;
    z-index:1000;
}

.learn-page .learn-header .container{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    height:70px;
    gap:40px;
}

.learn-page .learn-logo{
    font-size:2rem;
    font-weight:700;
}

.learn-page .learn-menu{
    display:flex;
    gap:60px;
}

.menu-item{
    position:relative;
}

.dropdown{
    position:absolute;
    top:100%;
    left:0;
    background:#24164b;
    min-width:250px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    border-radius:8px;
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all 0.3s ease;
    z-index:1001;
}

.menu-item:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown a{
    display:block;
    padding:10px 20px;
    color:#333;
    text-decoration:none;
    font-size:0.8rem;
    transition:background 0.2s ease;
}

.menu-item .dropdown span{
    color: #dc7874
}

.dropdown a:hover{
    color:#0076A8;
}

.learn-page .learn-menu a{
    color:white;
    text-decoration:none;
    font-size:1.1rem;
}

.arrow{
    margin-left:8px;
}

/* ================= HERO ================= */
.learn-page .learn-hero{
    width:93%;
    max-width:1400px;
    margin:40px auto;
    display:grid;
    grid-template-columns:34% 66%;
}

/* LEFT */
.hero-left{
    background:#24164b;
    color:white;
    padding:60px 45px;
}

.hero-left h1{
    font-size:3.7rem;
    margin-bottom:24px;
    font-weight: 900;
}

.hero-left p{
    font-size:1.5rem;
    line-height:1.6;
}

/* RIGHT */
.hero-right{
    padding:70px 45px;
}

.pink-line{
    width:90px;
    height:20px;
    background:#e68484;
    margin-bottom:30px;

    /* background:url("YOUR-PINK-LINE"); */
}

.hero-right h2{
    font-size:3.7rem;
    font-weight: 800;
    color:#24164b;
    margin-bottom:55px;
}

/* ================= GRID ================= */
.topics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px 30px;
}

.topic{
    display:flex;
    align-items:center;
    gap:20px;
    text-decoration:none;
}

.topic-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background: #00a8e1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topic-icon i {
    color: #fff;
    font-size: 1.3rem;
}

.topic span{
    color:#222;
    font-size:1.1rem;
    font-weight:800;
    line-height:1.3;
}

.topic:hover span{
    text-decoration: underline;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px){

.learn-hero{
    grid-template-columns:1fr;
}

.hero-left{
    text-align:center;
}

.hero-left p{
    max-width:700px;
    margin:auto;
}

}

@media(max-width:900px){

.topics{
    grid-template-columns:repeat(2,1fr);
}

.hero-right h2{
    font-size:3rem;
}

.hero-left h1{
    font-size:3rem;
}

.hero-left p{
    font-size:1.3rem;
}

}

@media(max-width:600px){

.learn-page .learn-header .container{
    flex-direction:column;
    height:auto;
    padding:20px 0;
    gap:20px;
}

.learn-page .learn-menu{
    gap:25px;
}

.hero-right{
    padding:45px 25px;
}

.hero-left{
    padding:45px 25px;
}

.hero-right h2{
    font-size:2.3rem;
}

.topics{
    grid-template-columns:1fr;
}

.topic span{
    font-size:1.2rem;
}

}

/* ================= MOST POPULAR ================= */
.popular{
    background:#edf2f5;
    padding:80px 0;
}

.popular-container{
    width:93%;
    max-width:1450px;
    margin:auto;
}

.popular h2{
    font-size:3rem;
    color:#24164b;
    margin-bottom:35px;
    font-weight: 900;
}

/* ================= GRID ================= */
.popular-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

/* ================= CARD ================= */
.popular-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid #ddd;
    transition:.35s;
    cursor:pointer;
}

.popular-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.card-image{
    width:100%;
    height:200px;
    overflow:hidden;
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.popular-card:hover img{
    transform:scale(1.06);
}

.card-content{
    padding:25px;
}

.category{
    display:block;
    color:black;
    font-size:1rem;
    margin-bottom:7px;
}

.card-content h3{
    color:#0a86b6;
    font-size:1.4rem;
    transition:.3s;
    font-weight: 800;
}

.popular-card:hover h3{
    color:#065b82;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px){

.popular-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.popular{
    padding:60px 0;
}

.popular h2{
    font-size:2.8rem;
}

.popular-grid{
    grid-template-columns:1fr;
}

.card-image{
    height:240px;
}

.category{
    font-size:1.2rem;
}

.card-content h3{
    font-size:1.6rem;
}

}

/* ================= PART 3 ================= */
.resources{
    width:93%;
    max-width:1450px;
    margin:80px auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

/* ================= BOX ================= */
.resource-box{
    background:#e8e5ea;
    padding:40px;
}

.resource-box h2{
    color:#24164b;
    font-size:2.9rem;
    margin-bottom:20px;
    font-weight: 900;
}

.resource-intro{
    color:#333;
    font-size:1.1rem;
    line-height:1.7;
    margin-bottom:40px;
}

/* ================= LEFT LINKS ================= */
.resource-links{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.resource-item{
    display:flex;
    align-items:center;
    gap:25px;
    background:white;
    padding:22px;
    text-decoration:none;
    transition:.3s;
}

.resource-item:hover{
    transform:translateX(8px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.resource-item span{
    color:#0a86b6;
    font-size:1.2rem;
    font-weight:800;
    line-height:1.35;
}

/* ================= RIGHT ARTICLES ================= */
.article-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.article-item{
    background:white;
    padding:25px;
    text-decoration:none;
    transition:.3s;
}

.article-item:hover{
    transform:translateX(8px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.article-item h3{
    color:#0a86b6;
    margin-bottom:3px;
    font-size:1.2rem;
    font-weight:800;
}

.article-item p{
    font-size:1rem;
    color:#0a86b6;
    font-weight:500;
    line-height:1.35;
}

/* ================= FOOTER LINK ================= */
.resource-footer{
    display:inline-block;
    margin-top:35px;
    color:#0a86b6;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:600;
}

.resource-footer:hover{
    text-decoration:underline;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px){

.resources{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.resource-box{
    padding:35px;
}

.resource-box h2{
    font-size:2.5rem;
}

.resource-item{
    gap:18px;
    padding:18px;
}

.resource-item img{
    width:48px;
    height:48px;
}

.resource-item span{
    font-size:1.15rem;
}

.article-item h3{
    font-size:1.3rem;
}

}

@media(max-width:500px){

.resource-box{
    padding:25px;
}

.resource-box h2{
    font-size:2rem;
}

.resource-item{
    flex-direction:column;
    text-align:center;
}

.resource-item span{
    font-size:1rem;
}

}

/* ================= GUIDE SECTION ================= */
.life-guide{
    background:#edf2f5;
    padding:80px 0;
}

.guide-container{
    width:90%;
    max-width:1450px;
    margin:auto;
}

.guide-header{
    margin-bottom:55px;
}

.guide-header h2{
    font-size:2.8rem;
    color:#24164b;
    margin-bottom:8px;
    font-weight: 900;
}

.guide-header p{
    font-size:1rem;
    color:#444;
    line-height:1.7;
    max-width:470px;
}

/* ================= GRID ================= */
.guide-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

/* ================= CARD ================= */
.guide-card{
    text-decoration:none;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid #ddd;
    transition:.35s;
}

.guide-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.guide-image{
    position:relative;
    height:230px;
    overflow:hidden;
}

.guide-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.guide-card:hover img{
    transform:scale(1.08);
}

/* Dark overlay */
.guide-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.30);
}

/* Text Overlay */
.overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:2;
    padding:30px;
}

.overlay h3{
    color:white;
    font-size:2rem;
    font-weight:700;
    line-height:1.2;
}

/* Bottom */
.guide-content{
    padding:22px;
    color:#0b84b3;
    text-align:center;
    font-size:1.2rem;
    font-weight:700;
    line-height:1.4;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

.guide-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.guide-header h2{
    font-size:2.8rem;
}

.guide-image{
    height:260px;
}

.overlay h3{
    font-size:1.6rem;
}

.guide-content{
    font-size:1rem;
}

}

@media(max-width:600px){

.guide-grid{
    grid-template-columns:1fr;
}

.guide-header h2{
    font-size:2.2rem;
}

.guide-image{
    height:230px;
}

.overlay h3{
    font-size:1.4rem;
}

}

/*===============================
        ABOUT
================================*/

.about-hero{
    height:550px;
    background-image:url("../images/BR20-148604_AboutUsLP_Hero_Desktop@2x.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

.hero-contents{
    max-width:700px;
    margin:0 auto;
}

.small-title{
    color:#FDBB3D;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
}

.hero-contents h1{
    margin-top:15px;
    color:white;
    font-size:3.7rem;
    line-height:1.08;
    font-weight:900;
}

.hero-contents h1 span{
    color:#24164b;
}

/* ================= MISSION ================= */

.mission{
    background:#24164b;
    padding:70px 0;
}

.mission-container{
    width:90%;
    max-width:1000px;
    margin:auto;
}

.mission h2{
    color:white;
    font-size:1.9rem;
    font-weight: 900;
    line-height:1.1;
    max-width:750px;
    margin:0 auto 30px;
}

.mission p{
    color:white;
    font-size:1.45rem;
    line-height:1.6;
    max-width:750px;
    margin:0 auto 20px;
}

.mission strong{
    font-weight:900;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

.hero-contents h1{
    font-size:3.8rem;
}

.mission h2{
    font-size:2rem;
}

.mission p{
    font-size:1.2rem;
}

}

@media(max-width:768px){

.about-hero{
    height:500px;
}

.hero-contents h1{
    font-size:3rem;
}

.mission{
    padding:60px 0;
}

}

@media(max-width:500px){

.about-hero{
    height:420px;
}

.hero-contents h1{
    font-size:2.2rem;
}

.small-title{
    font-size:15px;
}

.mission h2{
    font-size:1.6rem;
}

.mission p{
    font-size:1rem;
    line-height:1.7;
}

}

/*================ VALUES ================*/

.values{
    padding:90px 0;
    background:#fff;
}

.values-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}

.values-left img{
    width:100%;
    display:block;
}

.values-right h2{
    font-size:2.8rem;
    color:#24164b;
    margin-bottom:5px;
    font-weight:900;
}

.values-right p{
    font-size:1rem;
    line-height:1.7;
    color:#444;
    margin-bottom:38px;
    max-width:600px;
}

.values-btn{
    display:inline-block;
    background:#007AA8;
    color:#fff;
    text-decoration:none;
    padding:10px 18px;
    border-radius:12px;
    font-weight:700;
    transition:.3s;
}

.values-btn:hover{
    background:#005f84;
}

/*================ BANNER ================*/

.values-banner{
    width:86%;
    max-width:1100px;
    margin:90px auto 0;
    position:relative;
    overflow:hidden;
    border-radius:0;
    min-height:110px;
}

/* The image covers the entire banner */
.banner-right{
    position:absolute;
    inset:0;
    z-index:0;
}

.banner-right img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* The text sits on top of the image, on the left, no background color */
.banner-left{
    position:relative;
    z-index:1;
    background:transparent;
    color:#fff;
    display:flex;
    align-items:center;
    gap:25px;
    padding:25px 25px;
    width:59%;
}

.banner-badge{
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.75);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
}

.banner-badge-inner{
    width:100%;
    height:100%;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.5);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    position:relative;
}

.banner-badge-inner i{
    font-size:1.5rem;
    color:#fff;
    line-height:1;
}

.badge-label-top,
.badge-label-bot{
    font-size:0.45rem;
    font-weight:800;
    letter-spacing:0.12em;
    color:#fff;
    text-transform:uppercase;
    line-height:1;
}

.banner-left p{
    font-size:1rem;
    line-height:1.5;
    font-weight:500;
}

/*================ RESPONSIVE ================*/

@media(max-width:991px){

    .values-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .values-right p{
        margin:auto auto 40px;
    }

    .values-banner{
        border-radius:30px;
    }

    .banner-left{
        width:70%;
    }

}

@media(max-width:768px){

    .values{
        padding:70px 0;
    }

    .values-right h2{
        font-size:2.8rem;
    }

    .banner-left{
        flex-direction:column;
        text-align:center;
        width:85%;
    }

}

@media(max-width:500px){

    .values-right h2{
        font-size:2.2rem;
    }

    .values-right p{
        font-size:1rem;
    }

    .values-btn{
        padding:15px 30px;
    }

    .banner-left{
        padding:25px;
    }

}

/*================ STORY SECTION ================*/

.story-section{
    position:relative;
    overflow:hidden;
    background:#24164b;
    padding:70px 0 90px;
}

.story-pattern{
    position:absolute;
    top:0;
    right:0;
    width:48%;
    pointer-events:none;
    z-index:0;
}

.story-pattern img{
    width:100%;
    display:block;
}

.story-container{
    width:90%;
    max-width:1350px;
    margin:auto;
    position:relative;
    z-index:2;
}

.story-title{
    text-align:center;
    color:#fff;
    font-size:3.4rem;
    font-weight:900;
    margin-bottom:55px;
}

/*================ STORY CARD ================*/

.story-card-wrapper{
    position:relative;
    min-height:420px;
    margin-bottom:10px;
    padding-bottom:28px;
}

.story-card{
    background-color: white;
    border-radius: 17px;
    padding: 23px;
    position:absolute;
    width:min(360px, calc(100% - 24px));
    min-height:280px;
    height:auto;
    left:0;
    top:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    transition: left .45s cubic-bezier(.25,.8,.25,1), opacity .25s ease, transform .25s ease;
    box-sizing:border-box;
}

.story-pointer{
    position:absolute;
    width:0;
    height:0;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:22px solid white;
    top:100%;
    left:40px;
    transform:translateX(-50%);
    transition:left .45s ease;
}

.story-icon{
    width:86px;
    margin-bottom:18px;
}

.story-icon img{
    width:100%;
    display:block;
}

.story-card h3{
    color:#24164b;
    font-size:2rem;
    margin-bottom:18px;
}

.story-card p{
    color:#333;
    line-height:1.8;
    font-size:1rem;
}

/*================ TIMELINE ================*/

.timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:70px;
}

.timeline-line{
    position:absolute;
    top:18px;
    left:0;
    width:100%;
    height:4px;
    background:#6d6393;
    border-radius:50px;
}

.timeline-progress{
    position:absolute;
    top:18px;
    left:0;
    width:0;
    height:4px;
    background:#00A8E0;
    border-radius:50px;
    transition:width .45s ease;
}

.timeline-year{
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    position:relative;
    font-size:.95rem;
    font-weight:600;
    z-index:2;
}

.timeline-year span{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    margin:0 auto 12px;
    transition:.3s;
}

.timeline-year.active span{
    width:28px;
    height:28px;
    background:#24164b;
    border:5px solid #00A8E0;
    box-shadow:0 0 0 6px rgba(0,168,224,.18);
}

.timeline-year.completed span{
    background:#00A8E0;
}

.timeline-year.completed{
    color:#00A8E0;
}

.timeline-year:hover span{
    transform:scale(1.2);
}

.timeline-year:hover{
    color:#00A8E0;
}

/*================ RESPONSIVE ================*/

@media(max-width:992px){

    .story-title{
        font-size:3rem;
    }

    .story-card{
        width:100%;
        max-width:500px;
    }

    .timeline{
        overflow-x:auto;
        justify-content:flex-start;
        gap:55px;
        padding-bottom:20px;
        scrollbar-width:none;
    }

    .timeline::-webkit-scrollbar{
        display:none;
    }

    .timeline-line,
    .timeline-progress{
        width:1450px;
    }

}

@media(max-width:768px){

    .story-title{
        font-size:2rem;
        margin-bottom:32px;
        padding:0 8px;
    }

    .story-card-wrapper{
        min-height:auto;
        margin-bottom:0;
        padding-bottom:0;
        display:flex;
        justify-content:center;
    }

    .story-card{
        position:relative;
        left:auto !important;
        transform:none !important;
        width:calc(100% - 16px);
        max-width:500px;
        margin:0 auto;
    }

    .story-pointer{
        display:none;
    }

    .timeline{
        margin-top:36px;
    }

}

@media(max-width:480px){

    .story-card h3{
        font-size:1.6rem;
    }

    .story-card p{
        font-size:.95rem;
    }

}

/*================ STATISTICS ================*/

.stats{
    background:#24164b;
    padding:50px 0 100px;
}

.stats-container{
    width:90%;
    max-width:1350px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px;
}

.stat-card{
    text-align:center;
    color:#fff;
}

.stat-icon{
    position:relative;
    width:110px;
    height:110px;
    margin:0 auto 30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.pink-line{
    position:absolute;
    width:110px;
    height:65px;
    background:rgba(239,139,134,0.75);
    border-radius:33px;
    top:18px;
    left:6px;
    transform:rotate(-18deg);
    z-index:2;
}

.stat-icon i{
    font-size:4rem;
    color:white;
    position:relative;
    z-index:2;
}

.stat-card h3{
    font-size:3.2rem;
    margin-bottom:15px;
    font-weight:900;
}

.stat-card p{
    font-size:1.3rem;
    color:white;
    font-weight:800;
}

/*================ RESPONSIVE ================*/

@media(max-width:900px){

    .stats-container{
        grid-template-columns:1fr;
        gap:70px;
    }

}

@media(max-width:600px){

    .stat-card h3{
        font-size:2rem;
    }

    .stat-card p{
        font-size:1rem;
    }

    .stat-icon{
        width:90px;
        height:90px;
    }

    .stat-icon i{
        font-size:3rem;
    }

}

/*==================================
        ABOUT SOFI MORE
==================================*/

.more-sofis{
    background:#006B87;
    padding:80px 40px;
}

.more-containers{
    max-width:1650px;
    margin:auto;
}

.more-containers h2{
    text-align:center;
    color:white;
    font-size:48px;
    margin-bottom:36px;
    font-weight:900;
}

.more-grids{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.more-cards{
    background:linear-gradient(to right, white 50%, #007D9C 50%);
    background-size:200% 100%;
    background-position:right bottom;
    height:154px;
    display:flex;
    align-items:center;
    padding-left:60px;
    text-decoration:none;
    color:white;
    font-size:30px;
    font-weight:800;
    transition:background-position .5s ease, color .5s ease;
}

.more-cards:hover{
    background-position:left bottom;
    color:black;
}

/*============================
        RESPONSIVE
============================*/

@media(max-width:1200px){

.more-containers h2{
font-size:56px;
}

.more-cards{
font-size:38px;
padding-left:45px;
}

}

@media(max-width:768px){

.more-sofis{
padding:60px 20px;
}

.more-grids{
grid-template-columns:1fr;
}

.more-containers h2{
font-size:42px;
}

.more-cards{
height:150px;
font-size:28px;
padding-left:30px;
}

}

/* ============================================================
   SOFI LAB - SOFI SIGNATURE BLUE & WHITE THEME STYLES
   ============================================================ */

/* Theme Variables for SoFi Lab */
:root {
  --sofi-blue: #1A145F;
  --sofi-blue-light: #2A2375;
  --sofi-cyan: #00A2C7;
  --sofi-cyan-hover: #0090b3;
  --sofi-cyan-light: #e6f6f9;
  --sofi-bg-light: #f5f6f8;
  --sofi-card-bg: #ffffff;
  --sofi-border: #e8eaed;
  --sofi-text-main: #1A145F;
  --sofi-text-sub: #4F566B;
  --sofi-text-muted: #8c94a6;
  --sofi-emerald: #10B981;
  --sofi-gold: #F59E0B;
  --sofi-shadow: 0 10px 30px rgba(26, 20, 95, 0.07);
  --sofi-shadow-hover: 0 15px 35px rgba(26, 20, 95, 0.12);
}

/* Page Base */
.sofi-lab-page {
  background-color: var(--sofi-bg-light);
  color: var(--sofi-text-sub);
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
}

/* Sticky Sub-Navbar */
.lab-subnav {
  position: sticky;
  top: 0;
  z-index: 990;
  background: #ffffff;
  border-bottom: 1px solid var(--sofi-border);
  padding: 0 20px;
  box-shadow: 0 4px 15px rgba(26, 20, 95, 0.04);
}

.lab-subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 15px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lab-subnav-inner::-webkit-scrollbar {
  display: none;
}

.lab-subnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sofi-blue);
  font-weight: 800;
  font-size: 1.15rem;
  white-space: nowrap;
}

.lab-subnav-brand i {
  font-size: 1.3rem;
  color: var(--sofi-cyan);
}

.lab-subnav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
}

.lab-subnav-links a {
  color: var(--sofi-text-main);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.25s ease;
}

.lab-subnav-links a:hover,
.lab-subnav-links a.nav-active {
  color: var(--sofi-cyan);
  background: var(--sofi-cyan-light);
}

.lab-subnav-cta {
  background: var(--sofi-cyan) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 162, 199, 0.3);
  transition: background 0.2s ease !important;
}

.lab-subnav-cta:hover {
  background: var(--sofi-cyan-hover) !important;
}

/* Common Section Container */
.lab-section {
  padding: 70px 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.lab-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 45px;
}

.lab-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sofi-cyan-light);
  border: 1px solid rgba(0, 162, 199, 0.25);
  color: var(--sofi-cyan);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.lab-badge i {
  font-size: 0.9rem;
}

.lab-section-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--sofi-blue);
  margin-bottom: 14px;
}

.lab-section-title span {
  color: var(--sofi-cyan);
}

.lab-section-subtitle {
  font-size: 1.1rem;
  color: var(--sofi-text-sub);
  line-height: 1.6;
}

/* HERO SECTION */
.lab-hero {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 50vw, 520px);
  overflow: hidden;
}

.lab-hero .member-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}

.lab-hero .member-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-hero .member-overlay {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  min-height: clamp(320px, 50vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 20px);
  box-sizing: border-box;
}

.lab-hero-content {
  max-width: min(1000px, 100%);
  width: 100%;
  text-align: center;
  color: white;
  box-sizing: border-box;
}

.lab-hero-title {
  font-size: clamp(1.65rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: white;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.lab-hero-title span {
  color: #00A2C7;
}

.lab-hero-desc {
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 35px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.lab-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 38px;
}

.lab-hero-actions .member-btn,
.lab-hero-actions .hero-btn {
  padding: 16px 20px;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 0 !important;
  transition: all 0.3s ease;
}

.lab-hero-actions .member-btn {
  background: #00A2C7;
  color: white;
  border: 2px solid #00A2C7;
}

.lab-hero-actions .member-btn:hover {
  background: #0090b3;
  transform: translateY(-2px);
}

.lab-hero-actions .hero-btn {
  background: white;
  color: #00A2C7;
  border: 2px solid white;
}

.lab-hero-actions .hero-btn:hover {
  background: #00A2C7;
  color: white;
  border-color: #00A2C7;
  transform: translateY(-2px);
}

.btn-lab-primary {
  background: var(--sofi-cyan);
  color: #ffffff;
  font-weight: 800;
  padding: 13px 30px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 162, 199, 0.3);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  font-size: 0.98rem;
}

.btn-lab-primary:hover {
  background: var(--sofi-cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 162, 199, 0.4);
}

.btn-lab-secondary {
  background: #ffffff;
  border: 2px solid var(--sofi-blue);
  color: var(--sofi-blue);
  font-weight: 800;
  padding: 12px 26px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
  font-size: 0.98rem;
}

.btn-lab-secondary:hover {
  background: var(--sofi-blue);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Stats Row */
.lab-stats-rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  padding: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.lab-stats-other-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  padding: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-number span {
  color: #00A2C7;
}

.stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero Visual Box */
.lab-hero-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--sofi-border);
  box-shadow: var(--sofi-shadow);
  background: #ffffff;
}

.lab-hero-media-wrapper {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4f9 0%, #e6f6f9 100%);
  padding: 30px;
}

.lab-center-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 15px 35px rgba(26, 20, 95, 0.08);
}

.lab-icon-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--sofi-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 2rem;
  color: var(--sofi-cyan);
  box-shadow: 0 8px 20px rgba(26, 20, 95, 0.2);
}

/* QUICK SERVICE CARDS (HERO 4 CARDS) */
.hero-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 45px;
}

.hero-service-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 18px;
  padding: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 15px rgba(26, 20, 95, 0.04);
  display: flex;
  flex-direction: column;
}

.hero-service-card:hover {
  transform: translateY(-5px);
  border-color: var(--sofi-cyan);
  box-shadow: var(--sofi-shadow-hover);
}

.hsc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sofi-cyan-light);
  color: var(--sofi-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.hsc-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--sofi-blue);
}

.hsc-desc {
  font-size: 0.88rem;
  color: var(--sofi-text-sub);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.hsc-link {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--sofi-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.hsc-link i {
  transition: transform 0.2s ease;
}

.hero-service-card:hover .hsc-link i {
  transform: translateX(5px);
}

/* SECTION 1: DETAILED SERVICES (PAGE & CARDS) */
.service-block-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 30px;
  box-shadow: var(--sofi-shadow);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 35px;
  align-items: center;
  transition: all 0.3s ease;
  scroll-margin-top: 80px;
}

.service-block-card:hover {
  box-shadow: var(--sofi-shadow-hover);
  border-color: rgba(0, 162, 199, 0.4);
}

.sd-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--sofi-blue);
  margin-bottom: 14px;
}

.sd-desc {
  font-size: 1.02rem;
  color: var(--sofi-text-sub);
  line-height: 1.65;
  margin-bottom: 22px;
}

.sd-features-list {
  list-style: none;
  margin-bottom: 25px;
}

.sd-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--sofi-text-main);
  margin-bottom: 10px;
  line-height: 1.5;
  font-weight: 600;
}

.sd-features-list i {
  color: var(--sofi-cyan);
  margin-top: 3px;
  font-size: 1rem;
}

.sd-visual-box {
  background: var(--sofi-bg-light);
  border: 1px solid var(--sofi-border);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sd-visual-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PROCESS WORKFLOW STEPS */
.process-section {
  margin-top: 60px;
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  padding: 40px 30px;
  box-shadow: var(--sofi-shadow);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-top: 25px;
}

.process-step {
  text-align: center;
  background: var(--sofi-bg-light);
  border: 1px solid var(--sofi-border);
  border-radius: 16px;
  padding: 20px 12px;
  transition: transform 0.25s ease;
}

.process-step:hover {
  transform: translateY(-4px);
  border-color: var(--sofi-cyan);
}

.step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sofi-blue);
  color: #ffffff;
  font-weight: 900;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 6px;
}

.step-desc {
  font-size: 0.8rem;
  color: var(--sofi-text-sub);
  line-height: 1.4;
}

/* WHY CHOOSE US CARDS */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 35px;
}

.why-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--sofi-shadow);
  transition: all 0.25s ease;
}

.why-card:hover {
  border-color: var(--sofi-cyan);
  box-shadow: var(--sofi-shadow-hover);
  transform: translateY(-4px);
}

.why-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sofi-cyan-light);
  color: var(--sofi-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}

.why-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 8px;
}

.why-desc {
  font-size: 0.88rem;
  color: var(--sofi-text-sub);
  line-height: 1.55;
}

/* SECTION 2: PRODUCTS & CATALOGUE */
.sofi-lab-page .catalogue-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  padding: 16px 24px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(26, 20, 95, 0.03);
}

.sofi-lab-page .cat-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sofi-lab-page .filter-btn {
  background: var(--sofi-bg-light);
  border: 1px solid var(--sofi-border);
  color: var(--sofi-text-main);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sofi-lab-page .filter-btn.active,
.sofi-lab-page .filter-btn:hover {
  background: var(--sofi-cyan);
  color: #ffffff;
  border-color: var(--sofi-cyan);
}

.sofi-lab-page .cat-search {
  position: relative;
  min-width: 250px;
}

.sofi-lab-page .cat-search input {
  width: 100%;
  background: var(--sofi-bg-light);
  border: 1px solid var(--sofi-border);
  border-radius: 30px;
  padding: 10px 16px 10px 40px;
  color: var(--sofi-text-main);
  font-size: 0.88rem;
  outline: none;
}

.sofi-lab-page .cat-search input:focus {
  border-color: var(--sofi-cyan);
  background: #ffffff;
}

.sofi-lab-page .cat-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sofi-text-muted);
}

.sofi-lab-page .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

.sofi-lab-page .product-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sofi-shadow);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sofi-lab-page .product-card:hover {
  transform: translateY(-5px);
  border-color: var(--sofi-cyan);
  box-shadow: var(--sofi-shadow-hover);
}

.sofi-lab-page .product-img-box {
  position: relative;
  height: 350px;
  background: linear-gradient(135deg, #f5f6f8 0%, #e6f6f9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--sofi-border);
  overflow: hidden;
}

.sofi-lab-page .product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sofi-lab-page .product-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sofi-blue);
}

.sofi-lab-page .product-img-placeholder i {
  font-size: 2.8rem;
  color: var(--sofi-cyan);
}

.sofi-lab-page .product-type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffffff;
  border: 1px solid var(--sofi-cyan);
  color: var(--sofi-cyan);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sofi-lab-page .product-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sofi-lab-page .product-category {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sofi-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.sofi-lab-page .product-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 8px;
}

.sofi-lab-page .product-desc {
  font-size: 0.88rem;
  color: var(--sofi-text-sub);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.sofi-lab-page .product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.sofi-lab-page .spec-tag {
  background: var(--sofi-bg-light);
  color: var(--sofi-text-sub);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--sofi-border);
}

.sofi-lab-page .product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--sofi-border);
}

.sofi-lab-page .product-price {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--sofi-blue);
}

.sofi-lab-page .product-price small {
  font-size: 0.75rem;
  color: var(--sofi-text-sub);
  font-weight: 600;
}

.sofi-lab-page .btn-product-quote {
  background: var(--sofi-cyan-light);
  border: 1px solid var(--sofi-cyan);
  color: var(--sofi-cyan);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sofi-lab-page .btn-product-quote:hover {
  background: var(--sofi-cyan);
  color: #ffffff;
}

/* SECTION 3: ABOUT SOFI LAB */
.about-lab-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 45px;
  align-items: center;
}

.about-lab-text p {
  font-size: 1.05rem;
  color: var(--sofi-text-sub);
  line-height: 1.7;
  margin-bottom: 18px;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 25px;
}

.value-item {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(26, 20, 95, 0.03);
}

.value-item i {
  font-size: 1.5rem;
  color: var(--sofi-cyan);
  margin-bottom: 8px;
}

.value-item h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 4px;
}

.value-item p {
  font-size: 0.82rem;
  color: var(--sofi-text-sub);
  margin: 0;
  line-height: 1.4;
}

/* TEAM GRID */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 45px;
}

.team-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--sofi-shadow);
  transition: transform 0.25s ease;
}

.team-card:hover {
  transform: translateY(-5px);
  border-color: var(--sofi-cyan);
}

.team-avatar {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: var(--sofi-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 2.2rem;
  color: var(--sofi-cyan);
  border: 3px solid var(--sofi-cyan-light);
}

.team-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 4px;
}

.team-role {
  font-size: 0.82rem;
  color: var(--sofi-cyan);
  font-weight: 800;
  margin-bottom: 10px;
}

.team-bio {
  font-size: 0.8rem;
  color: var(--sofi-text-sub);
  line-height: 1.4;
}

/* SECTION 4: ACHIEVEMENTS & BEFORE / AFTER SLIDER */
.slider-container-box {
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  padding: 35px;
  margin-bottom: 50px;
  box-shadow: var(--sofi-shadow);
}

.ba-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--sofi-border);
  box-shadow: 0 10px 30px rgba(26, 20, 95, 0.08);
  user-select: none;
}

.ba-before-img,
.ba-after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-before-img {
  color: var(--sofi-blue);
  z-index: 1;
  border-right: 3px solid var(--sofi-cyan);
}

.ba-before-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/billiet-propre.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
}

.ba-after-img {
  background: #e0f2fe;
  color: #ffffff;
  z-index: 10;
  width: 50%;
  overflow: hidden;
}

.ba-after-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/billiet-noir.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.36;
  z-index: -1;
}

.ba-demo-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 30px;
  width: 400px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  background: transparent;
}

.ba-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.ba-before-img .ba-badge {
  background: var(--sofi-cyan);
  color: #ffffff;
}

.ba-after-img .ba-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #F59E0B;
  border: 1px solid #F59E0B;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--sofi-cyan);
  z-index: 10;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sofi-cyan);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 162, 199, 0.4);
  font-size: 1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.gallery-item {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sofi-shadow);
  transition: transform 0.25s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
  border-color: var(--sofi-cyan);
}

.gallery-img-holder {
  height: 350px;
  background: linear-gradient(135deg, #f0f4f9, #e6f6f9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sofi-blue);
  overflow: hidden;
}

.gallery-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-img-holder i {
  font-size: 2.8rem;
  color: var(--sofi-cyan);
}

.gallery-caption {
  padding: 16px;
}

.gallery-caption h5 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 4px;
}

.gallery-caption p {
  font-size: 0.8rem;
  color: var(--sofi-text-sub);
  margin: 0;
}

/* SECTION 5: BLOG & RESOURCES */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sofi-shadow);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  border-color: var(--sofi-cyan);
  box-shadow: var(--sofi-shadow-hover);
}

.blog-cover {
  height: 150px;
  background: linear-gradient(135deg, var(--sofi-blue), var(--sofi-blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sofi-cyan);
  font-size: 3rem;
}

.blog-content {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-date {
  font-size: 0.78rem;
  color: var(--sofi-cyan);
  font-weight: 800;
  margin-bottom: 6px;
}

.blog-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 10px;
  line-height: 1.4;
}

.blog-snippet {
  font-size: 0.88rem;
  color: var(--sofi-text-sub);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}

.blog-read-btn {
  background: transparent;
  border: none;
  color: var(--sofi-cyan);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* SECTION 6: CONTACT & QUOTE FORM */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 35px;
}

.contact-form-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  padding: 35px;
  box-shadow: var(--sofi-shadow);
}

.form-group {
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sofi-text-main);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--sofi-bg-light);
  border: 1px solid var(--sofi-border);
  border-radius: 12px;
  padding: 11px 15px;
  color: var(--sofi-text-main);
  font-size: 0.92rem;
  outline: none;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sofi-cyan);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--sofi-cyan-light);
}

.contact-info-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--sofi-shadow);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.info-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--sofi-cyan-light);
  color: var(--sofi-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.info-details h5 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--sofi-blue);
  margin-bottom: 2px;
}

.info-details p {
  font-size: 0.88rem;
  color: var(--sofi-text-sub);
  line-height: 1.5;
  margin: 0;
}

/* Appointment Widget Box */
.appointment-box {
  background: var(--sofi-cyan-light);
  border: 1px solid rgba(0, 162, 199, 0.3);
  border-radius: 18px;
  padding: 20px;
  margin-top: 10px;
}

.appointment-box h5 {
  color: var(--sofi-blue);
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* TESTIMONIALS SECTION */
.testimonials-grid {
  display: flex;
  gap: 24px;
  margin-top: 35px;
  overflow-x: auto;
  padding: 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials-grid::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--sofi-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  min-width: 350px;
  max-width: 350px;
  flex-shrink: 0;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--sofi-cyan);
}

.t-stars {
  color: var(--sofi-gold);
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.t-quote {
  font-size: 0.92rem;
  color: var(--sofi-text-sub);
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
  flex: 1;
}

.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--sofi-border);
  padding-top: 14px;
}

.t-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sofi-blue);
  color: var(--sofi-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.t-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--sofi-blue);
}

.t-role {
  font-size: 0.78rem;
  color: var(--sofi-text-muted);
}

/* MODALS */
.lab-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(26, 20, 95, 0.4);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.lab-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lab-modal-card {
  background: #ffffff;
  border: 1px solid var(--sofi-border);
  border-radius: 24px;
  max-width: 580px;
  width: 100%;
  padding: 34px;
  position: relative;
  box-shadow: 0 25px 60px rgba(26, 20, 95, 0.2);
  transform: translateY(15px);
  transition: transform 0.3s ease;
}

.lab-modal-overlay.active .lab-modal-card {
  transform: translateY(0);
}

.lab-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--sofi-bg-light);
  border: none;
  color: var(--sofi-text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.lab-modal-close:hover {
  background: var(--sofi-cyan);
  color: #ffffff;
}

/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 1024px) {
  .lab-hero-grid,
  .about-lab-grid,
  .contact-grid,
  .service-block-card {
    grid-template-columns: 1fr;
  }

  .hero-services-grid,
  .why-us-grid,
  .team-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid,
  .gallery-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .lab-hero-title {
    font-size: 2.2rem;
  }

  .lab-section-title {
    font-size: 1.8rem;
  }

  .hero-services-grid,
  .why-us-grid,
  .team-grid,
  .products-grid,
  .gallery-grid,
  .blog-grid,
  .process-grid,
  .values-grid,
  .testimonials-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .lab-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--sofi-border);
    padding-bottom: 10px;
  }

  .ba-slider-wrapper {
    height: 320px;
  }

  .sofi-lab-page .catalogue-controls {
    flex-direction: column;
    align-items: stretch;
  }
}

/*==========================
VIEW MY RATE
==========================*/

.view-rate-section{
    width:100%;
    padding:70px 20px 80px;
    background:#faf8f5;
}

.rate-container{
    max-width:600px;
    margin:auto;
    text-align:center;
}

.rate-container h1{
    font-size:44px;
    line-height:1.06;
    color:#171717;
    font-weight:800;
    margin-bottom:40px;
}

.banking-landing-page .rate-benefits{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:fit-content;
    margin:0 auto 40px;
}

.banking-landing-page .benefit{
    display:flex;
    align-items:center;
    gap:14px;
}

.check-icon{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#22c55e;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:10px;
}

.banking-landing-page .benefit p{
    font-size:17px;
    color:#111;
}

.rate-form{
    display:flex;
    flex-direction:column;
}

.rate-form input[type=email]{
    height:65px;
    border:1px solid #d8d8d8;
    border-radius:26px;
    padding:0 25px;
    font-size:22px;
    outline:none;
    margin-bottom:25px;
}

.rate-form input[type=email]:focus{
    border-color:#00a8d6;
}


/* Checkbox */

.agree-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    text-align:left;
    margin-bottom:30px;
    cursor:pointer;
}

.agree-box input{
    display:none;
}

.custom-check{
    width:24px;
    height:24px;
    border-radius:6px;
    border:2px solid #00a8d6;
    flex-shrink:0;
    margin-top:2px;
}

.agree-box input:checked + .custom-check{
    background:#00a8d6;
    position:relative;
}

.agree-box input:checked + .custom-check::after{
    content:"✓";
    color:white;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.agree-text{
    font-size:15px;
    line-height:1.7;
    color:#4a4a4a;
}

.agree-text a{
    color:#009fd4;
    text-decoration:none;
    font-weight:700;
}

.agree-text a:hover{
    text-decoration:underline;
}


/* Button (Rate Page Specific) */

.banking-landing-page .rate-btn{
    height:65px;
    border:none;
    border-radius:26px;
    background:#d7d7d7;
    color:white;
    font-size:22px;
    font-weight:800;
    cursor:not-allowed;
    transition:.3s;
}

.banking-landing-page .rate-btn.enabled{
    background:#00a8d6;
    cursor:pointer;
}

.banking-landing-page .rate-btn.enabled:hover{
    background:#0095c8;
}

.login-link{
    margin-top:35px;
    font-size:20px;
}

.login-link a{
    color:#009fd4;
    text-decoration:none;
    font-weight:700;
}

.login-link a:hover{
    text-decoration:underline;
}


/* Responsive */

@media(max-width:768px){

    .rate-container h1{
        font-size:46px;
    }

    .benefit p{
        font-size:18px;
    }

    .rate-form input[type=email]{
        height:68px;
        font-size:22px;
    }

    .banking-landing-page .rate-btn{
        height:70px;
        font-size:24px;
    }

}

/*======================
        LOANS
=======================*/

.loan-hero{
    width:100%;
    margin:0;
    background:#f5f0e6;
    padding:60px 0;
}

.loan-hero-content{
    max-width:1400px;
    margin:0 auto;
    width:90%;
    display:flex;
    justify-content:space-between;
    gap:80px;
}

.loan-left{
    flex:1;
}

.loan-left h1{
    font-size:35px;
    font-weight:900;
    line-height:1.05;
    color:#111;
    margin-bottom:45px;
}

.goal-box{
    width:100%;
    max-width:500px;
    border:1px solid #ddd;
    border-radius:20px;
    padding:10px 20px;
    background:white;
}

.goal-box label{
    display:block;
    font-size:12px;
    color:#777;
}

.goal-box select{
    width:100%;
    border:none;
    outline:none;
    font-size:17px;
    font-weight:700;
    background:transparent;
    cursor:pointer;
}

.check-rate-btn{
    margin-top:40px;
    width:200px;
    height:59px;
    border:none;
    border-radius:20px;
    background:#00A9E0;
    color:white;
    font-size:18px;
    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.check-rate-btn:hover{
    background:#028fc0;
}

/*RIGHT SIDE*/
.loan-right{
    width:450px;
}

.top-icons{
    display:flex;
    justify-content:space-between;
    margin-bottom:35px;
}

.top-item{
    text-align:center;
}

.icon-circle{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#00A9E0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
}

.icon-circle i{
    color:white;
    font-size:15px;
}

.top-item span{
    display:block;
    margin-top:15px;
    font-size:22px;
    font-weight:600;
}

/*Did you know card*/
.did-you-know{
    background:#F3F2F1;
    border-radius:20px; 
    padding:30px;
    min-height:180px;
}

.did-you-know i{
    font-size:23px;
    margin-bottom:17px;
}

.did-you-know h3{
    font-size:25px;
    margin-bottom:5px;
}

.did-you-know p{
    font-size:15px;
    line-height:1.5;
    color:#333;
}

.loan-products{
    width:90%;
    margin:80px auto;
}

.loan-products h2{
    font-size:30px;
    font-weight:700;
    margin-bottom:22px;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:28px;
}

.loan-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:25px;
    overflow:hidden;
    transition:.3s;
}

.loan-card:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transform:translateY(-4px);
}

.large-card{
    grid-column:span 3;
    min-height:180px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px;
    position:relative;
    overflow:hidden;
}

.loan-info{
    width:65%;
    position:relative;
    z-index:2;
}

.loan-info h3{
    font-size:20px;
    margin-bottom:10px;
    font-weight:700;
}

.loan-info p{
    font-size:17px;
    color:#666;
    margin-bottom:20px;
    line-height:1.5;
}

.loan-buttons{
    display:flex;
    align-items:center;
    gap:20px;
}

.blue-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:140px;
    height:38px;
    background:#00A9E0;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

.blue-btn:hover{
    background:#0092c3;
}

.learn-btn{
    color:#00A9E0;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.learn-btn i{
    margin-left:8px;
}

.loan-image-placeholder{
    position:absolute;
    right:0;
    bottom:0;
    width:160px;
    height:150px;
    border-radius:0;
    background:transparent;
    flex-shrink:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    overflow:hidden;
    pointer-events:none;
}

.loan-image-placeholder img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:right bottom;
}

.small-card{
    grid-column:span 2;
    min-height:160px;
    padding:20px;
}

.small-card h3{
    font-size:20px;
    margin-bottom:10px;
    font-weight:800;
}

.small-card p{
    font-size:17px;
    color:#666;
    line-height:1.5;
    margin-bottom:17px;
}

@media(max-width:1200px){
    .products-grid{
        grid-template-columns:1fr;
    }

    .large-card{
        grid-column:span 1;
        flex-direction:column;
        text-align:center;
    }

    .loan-info{
        width:100%;
    }

    .small-card{
        grid-column:span 1;
    }

    .loan-buttons{
        justify-content:center;
    }

    .loan-image-placeholder{
        position:static;
        margin-top:25px;
    }
}

.sofi-learn{
    width:100%;
    margin:0;
    background:#f5f0e6;
    padding:90px 0;
}

.sofi-learn-content{
    max-width:1400px;
    margin:0 auto;
    width:90%;
}

.credit-card-page .learn-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
}

.credit-card-page .learn-header h2{
    font-size:40px;
    font-weight:700;
}

.credit-card-page .learn-header a{
    color:#00A9E0;
    text-decoration:none;
    font-size:24px;
    font-weight:700;
}

.credit-card-page .learn-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

.credit-card-page .learn-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:28px;
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:.3s;
}

.credit-card-page .learn-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.credit-card-page .learn-text{
    width:58%;
}

.credit-card-page .learn-text span{
    display:block;
    font-size:15px;
    color:#666;
    margin-bottom:17px;
}

.credit-card-page .learn-text h3{
    font-size:24px;
    line-height:1;
    margin-bottom:17px;
    font-weight:700;
}

.credit-card-page .blue-title{
    color:#00A9E0;
}

.credit-card-page .learn-text p{
    font-size:18px;
    line-height:1.3;
    color:#666;
}

.credit-card-page .learn-image{
    width:180px;
    height:130px;
    background:#f1f1f1;
    border-radius:12px;
    overflow:hidden;
    flex-shrink:0;
}

.credit-card-page .learn-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===================== LOAN TOOLS SECTION ===================== */

.loan-tools-section {
    background: #f5f0e6;
    padding: 60px 0;
}

.loan-section-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 30px;
}

.loan-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.loan-tool-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
    text-align: left;
}

.loan-tool-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.loan-tool-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.loan-tool-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

@media(max-width:1200px){
    .credit-card-page .learn-grid{
        grid-template-columns:1fr;
    }

    .credit-card-page .learn-card{
        flex-direction:column;
        text-align:center;
    }

    .credit-card-page .learn-text{
        width:100%;
    }

    .credit-card-page .learn-image{
        margin-top:30px;
    }
}

@media(max-width:768px){
    .loan-tools-grid {
        grid-template-columns: 1fr;
    }
}

.loan-footer{
    width:90%;
    margin:90px auto 0;
    padding-bottom:0;
}

.loan-footer .footer-links{
    display:grid;
    grid-template-columns:140px repeat(3,1fr);
    row-gap:22px;
    column-gap:30px;
    align-items:center;
    margin-bottom:50px;
}

.loan-footer .footer-links h3{
    font-size:44px;
    font-weight:800;
    grid-row:span 2;
}

.loan-footer .footer-links a{
    color:#00A2C7;
    text-decoration:none;
    font-size:30px;
    font-weight:600;
}

.loan-footer .footer-links a:hover{
    text-decoration:underline;
    color:#0087aa;
}

.loan-footer .footer-text p{
    font-size:24px;
    line-height:1.7;
    color:#222;
    margin-bottom:35px;
}

.loan-footer .footer-text a{
    color:#00A2C7;
    text-decoration:none;
}

.loan-footer .footer-text a:hover{
    text-decoration:underline;
    color:#0087aa;
}

.loan-footer .footer-text strong{
    font-weight:800;
}

.footer-text h4{
    font-size:32px;
    margin:50px 0;
    font-weight:800;
}

.loan-footer .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:30px;
    border-top:1px solid #e5e5e5;
    padding-top:35px;
    padding-bottom:0;
    margin-bottom:0;
}

.loan-footer .footer-bottom p{
    font-size:24px;
    margin-bottom:0;
}

.store-placeholder{
    width:220px;
    height:70px;
    border-radius:12px;
    background:#efefef;
    overflow:hidden;
}

.store-placeholder img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.security{
    display:flex;
    gap:35px;
    align-items:center;
}

.security-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.security-icon{
    width:40px;
    height:40px;
    overflow:hidden;
}

.security-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.security-item span{
    font-size:24px;
    font-weight:600;
}

@media(max-width:1200px){
    .loan-footer .footer-links{
        grid-template-columns:1fr;
    }

    .loan-footer .footer-links h3{
        grid-row:auto;
    }

    .loan-footer .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .security{
        flex-direction:column;
        align-items:flex-start;
    }
}

/*======================
        AT-WORK
=======================*/

.atwork-hero{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    padding:0px 230px;
    background:#f5f5f5;
}
.atwork-left{
    width:53%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px 0;
}
.new-badge{
    display:inline-block;
    background:#f8d88d;
    padding:5px 13px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    margin-bottom:20px;
    align-self: flex-start;
}
.atwork-left h1{
    font-size:43px;
    line-height:1.15;
    font-weight:800;
    color:#151515;
}
.atwork-left span{
    color:#0d95b9;
}
.atwork-right{
    width:43%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
.hero-flower-image{
    width:520px;
    height:330px;
}
.hero-flower-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit: contain;
    object-position: bottom;
}
.benefits-section{
    padding:70px 230px;
    background:#fff;
}
.benefits-wrapper{
    display:flex;
    justify-content:center;
    gap:90px;
    margin-bottom:80px;
}
.benefit-card{
    width:265px;
}
.benefit-icon{
    width:60px;
    height:60px;
}
.benefit-card h3{
    font-size:24px;
    line-height:1.25;
    font-weight:700;
    margin-bottom:18px;
    color:#151515;
}
.benefit-card p{
    font-size:18px;
    line-height:1.7;
    color:#333;
}
.get-started{
    max-width:1000px;
    margin:auto;
}
.title-row{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}
.arrow-image{
    width:34px;
    height:34px;
}
.arrow-image img {
    width: 100%;
    height: 100%;
    display: block;
}
.title-row h2{
    font-size:35px;
    font-weight:800;
    color:#151515;
    margin: 0;
}
.start-text{
    font-size:19px;
    line-height:1.8;
    color:#333;
    margin-bottom:45px;
}
.top-inputs{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}
.floating-input {
    position: relative;
    flex: 1;
}
.floating-input input,
.floating-input textarea {
    width: 100%;
    border: 1px solid #bfbfbf;
    padding: 26px 18px 8px;
    font-size: 18px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.floating-input input {
    height: 64px;
}
.floating-textarea {
    margin-bottom: 40px;
}
.floating-input textarea {
    height: 64px;
    resize: none;
}
.floating-input label {
    position: absolute;
    left: 18px;
    top: 20px;
    font-size: 18px;
    color: #666;
    transition: 0.34s ease all;
    pointer-events: none;
}
.floating-input input:focus ~ label,
.floating-input input:not(:placeholder-shown) ~ label,
.floating-input textarea:focus ~ label,
.floating-input textarea:not(:placeholder-shown) ~ label {
    top: 6px;
    font-size: 14px;
    color: #000;
}
.floating-input input:not(:focus):placeholder-shown::placeholder,
.floating-input textarea:not(:focus):placeholder-shown::placeholder {
    color: transparent;
}
.form-buttons{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:40px;
}
.form-buttons a{
    text-decoration:none;
    color:#008fc0;
    font-size:20px;
    font-weight:600;
}
.form-buttons button{
    width:220px;
    height:64px;
    background:#009bc7;
    color:#fff;
    border:none;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.form-buttons button:hover{
    background:#007ca2;
}
.form-buttons a:hover{
    color:#007ca2;
}

.atwork-footer{
    padding:10px 40px;
    background:#f5f5f5;
}
.atwork-footer .footer-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap: 20px;
    column-gap: 55px;
    margin-bottom:35px;
    margin-top:15px;
}
.atwork-footer .footer-links h3{
    font-size:26px;
    font-weight:700;
    color:#151515;
    width: 100%;
}
.atwork-footer .footer-links a{
    text-decoration:none;
    color:#00A2C7;
    font-size:18px;
    transition:.3s;
}
.atwork-footer .footer-links a:hover{
    text-decoration:underline;
    color:#0087aa;
}
.warning-box{
    border:1px solid #bfbfbf;
    padding:10px;
    font-size:16px;
    font-weight:700;
    color:#151515;
    margin-bottom:28px;
    line-height:1.6;
}
.atwork-footer p{
    font-size:16px;
    line-height:1.8;
    color:#222;
    margin-bottom:28px;
}
.atwork-footer strong{
    font-weight:700;
}
.atwork-footer a{
    color:#00A2C7;
    text-decoration:none;
}

.atwork-footer a:hover{
    text-decoration:underline;
    color:#0087aa;
}
.atwork-footer a:hover{
    text-decoration:underline;
}

/*======================
        BUSINESS
=======================*/

.business-page .business-hero{
    display:flex;
    min-height:380px;
}
.business-page .business-left{
    width:53%;
    background:#2b1458;
    color:#fff;
    padding:40px 110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.business-page .business-small-title{
    color:#00c3ea;
    font-size:15px;
    font-weight:700;
    margin-bottom:20px;
}
.business-page .business-left h1{
    font-size:45px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:40px;
}
.business-page .business-btn{
    width:230px;
    height:50px;
    border:none;
    border-radius:14px;
    background:#08a8d5;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.business-page .business-btn:hover{
    background:#008db5;
}
.business-page .business-left p{
    margin-top:18px;
    font-size:14px;
    color:#f2f2f2;
}
.business-page .business-right{
    width:47%;
}
.business-page .business-hero-image{
    width:100%;
    height:100%;
    background:#e9e9e9;
    background-size:cover;
    background-position:center;
}
.business-page .financial-products{
    padding:90px 110px;
    background:#fff;
}
.business-page .financial-products h2{
    font-size:44px;
    font-weight:800;
    margin-bottom:45px;
    color:#111;
}
.business-page .financial-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}
.business-page .financial-card{
    border:1px solid #ececec;
    border-radius:18px;
    padding:28px;
    background:#fff;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
}
.business-page .financial-image{
    width:150px;
    height:150px;
}
.business-page .financial-image img {
    width: 100%;
    height: 100%;
    display: block;
}
.business-page .financial-card h3{
    font-size:30px;
    margin-bottom:15px;
    color:#111;
}
.business-page .financial-card p{
    font-size:18px;
    line-height:1.6;
    color:#555;
    margin-bottom:28px;
    flex:1;
}
.business-page .financial-card button{
    border:none;
    background:#08a8d5;
    color:#fff;
    padding:14px 28px;
    border-radius:10px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    align-self:flex-start;
    margin-top:auto;
}
.business-page .financial-card button:hover{
    background:#008db5;
}
.business-page .financial-note{
    margin-top:35px;
    font-size:15px;
    color:#555;
}

.business-page .grow-business{
    padding:90px 110px;
    background:#f2eef4;
}
.business-page .grow-business > h2{
    font-size:46px;
    font-weight:800;
    color:#111;
    line-height:1.2;
    margin-bottom:25px;
}
.business-page .grow-business > p:not(.grow-note){
    font-size:20px;
    line-height:1.7;
    color:#555;
    margin-bottom:45px;
}
.business-page .grow-cards-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}
.business-page .grow-card{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:20px;
    padding:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.business-page .grow-logo{
    width:220px;
    height:140px;
    background:#ececec;
    border-radius:14px;
    flex-shrink:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.business-page .grow-logo img{
    width:50%;
    height:50%;
    object-fit:contain;
}
.business-page .grow-info{
    padding-left:22px;
}
.business-page .grow-info h3{
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
    color:#111;
}
.business-page .grow-info p{
    font-size:16px;
    line-height:1.6;
    color:#555;
    margin-bottom:15px;
}
.business-page .grow-info button{
    background:#08a8d5;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 20px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.business-page .grow-info button:hover{
    background:#008db5;
}
.business-page .grow-note{
    margin-top:30px;
    font-size:15px;
    line-height:1.7;
    color:#666;
}

.business-page .marketplace{
    background:#24104f;
    padding:90px 8%;
}
.business-page .marketplace-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
}
.business-page .marketplace-image{
    width:290px;
    height:290px;
}
.business-page .marketplace-content{
    max-width:760px;
}
.business-page .marketplace-content h2{
    color:#fff;
    font-size:43px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:40px;
}
.business-page .market-btn{
    display:inline-block;
    background:#00a9d6;
    color:#fff;
    text-decoration:none;
    padding:14px 40px;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}
.business-page .market-btn:hover{
    background:#0092bb;
}

.business-page .resources{
    display:block;
    padding:90px 8%;
    background:#fff;
    width:auto;
    max-width:none;
    margin:0;
}
.business-page .resources-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
}
.business-page .resources-header h2{
    font-size:46px;
    font-weight:800;
    color:#111;
}
.business-page .resources-header a{
    color:#444;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
}
.business-page .resources-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.business-page .resource-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}
.business-page .resource-card:hover{
    transform:translateY(-8px);
}
.business-page .resource-image{
    height:210px;
    background:#dcdcdc;
    overflow:hidden;
}
.business-page .resource-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.business-page .resource-content{
    padding:15px;
}
.business-page .resource-content h3{
    font-size:23px;
    font-weight:700;
    color:#111;
    line-height:1.3;
}

.business-page .business-footer{
    background:#f7f7f7;
    padding:80px 8%;
}
.business-page .business-footer .footer-links{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:35px;
    flex-wrap:nowrap;
}
.business-page .business-footer .footer-links h3{
    font-size:21px;
    font-weight:700;
    color:#111;
    margin:0;
}
.business-page .business-footer .footer-links a{
    text-decoration:none;
    color:#00A2C7;
    font-size:18px;
    line-height:1.4;
}

.business-page .business-footer .footer-links a:hover{
    text-decoration:underline;
    color:#0087aa;
}
.business-page .business-footer .privacy-icon{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#00a9d6;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
}
.business-page .footer-box{
    border:2px solid #111;
    text-align:center;
    padding:18px;
    font-size:18px;
    font-weight:700;
    letter-spacing:0.03em;
    margin-bottom:35px;
}
.business-page .footer-text{
    font-size:17px;
    line-height:1.8;
    color:#555;
    margin:0 0 20px;
}

@media(max-width:1200px){
    .business-page .financial-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .business-page .resources-grid{
        grid-template-columns:1fr;
    }
    .business-page .marketplace-container{
        flex-direction:column;
        text-align:center;
    }
}
@media(max-width:768px){
    .business-page .business-left h1{
        font-size:36px;
    }
    .business-page .financial-grid{
        grid-template-columns:1fr;
    }
    .business-page .financial-card{
        padding:20px;
    }
    .business-page .grow-cards-grid{
        grid-template-columns:1fr;
    }
    .business-page .grow-card{
        flex-direction:column;
        text-align:center;
    }
    .business-page .marketplace-content h2{
        font-size:32px;
    }
    .business-page .business-footer .footer-links{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* ===========================
   ACCOUNT PAGE
=========================== */

.account-page{
    background:#f8f7f4;
    width:100%;
    overflow-x:hidden;
}

/*HERO */

.profile-hero{
    background:#00A9D6;
    color:#fff;
    padding:55px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-hero.hidden-hero{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.hero-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:35px;
}

.profile-image{
    position:relative;
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    border:6px solid white;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

.profile-image img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.edit-profile{
    position:absolute;
    right:5px;
    bottom:5px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:white;
    cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#00A9D6;
}

.profile-details h1{
    font-size:46px;
    margin-bottom:12px;
    font-weight:700;
}

.profile-details p{
    font-size:23px;
}

/*MAIN */

.account-main{
    width:92%;
    max-width:1450px;
    margin:60px auto;
    display:grid;
    grid-template-columns:270px 1fr;
    gap:70px;
}

/*SIDEBAR */

.account-sidebar{
    position:sticky;
    top:30px;
    align-self:start;
    height:max-content;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.sidebar-section{
    margin-bottom:45px;
}

.sidebar-section h3{
    font-size:25px;
    margin-bottom:25px;
}

.sidebar-group-title{
    display:block;
    color:#222;
    text-decoration:none;
    font-size:25px;
    margin-bottom:25px;
    font-weight:700;
}

.sidebar-group-title:hover{
    color:#00A9D6;
}

.sidebar-section a{
    display:block;
    color:#222;
    text-decoration:none;
    font-size:18px;
    margin:20px 0;
    transition:.3s;
}

.sidebar-section a:hover{
    color:#00A9D6;
}

.active-title{
    color:#00A9D6;
    border-bottom:3px solid #00A9D6;
    display:inline-block;
    padding-bottom:8px;
}

.active-link{
    color:#00A9D6 !important;
    font-weight:700;
}

/*CONTENT */

.account-panel{
    display:none;
}

.account-panel.active{
    display:block;
}

.account-content section{
    margin-bottom:90px;
    padding-right: 120px;
    scroll-margin-top: 120px;
}

.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.section-header h2,
.account-content h2{
    font-size:25px;
    margin-bottom:0;
}

.account-content h3{
    font-size:24px;
    margin:35px 0 15px;
}

.account-content p{
    font-size:23px;
    line-height:1.7;
    color:#555;
}

.edit-link{
    color:#00A9D6;
    text-decoration:none;
    font-size:22px;
    font-weight:700;
}

.detail-list{
    border-top:1px solid #dcdcdc;
}

.detail-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:24px 0;
    border-bottom:1px solid #dcdcdc;
}

.detail-label{
    font-size:22px;
    color:#222;
    font-weight:500;
}

.detail-value{
    text-align:right;
    font-size:22px;
    color:#555;
}

/*CARDS */

.settings-card,
.history-card{
    background:white;
    border-radius:25px;
    margin-top:30px;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
    overflow:hidden;
}

.setting-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 35px;
}

.history-item{
    display:block;
    padding:28px 35px;
}

.setting-row h4,
.history-item h4{
    font-size:20px;
    margin-bottom:10px;
    display: block;
}

.history-item p{
    color:#777;
    font-size:18px;
    margin: 0;
}

.setting-row span{
    color:#777;
    font-size:18px;
}

.settings-card hr,
.history-card hr{
    border:none;
    border-top:1px solid #e5e5e5;
}

.settings-card a{
    display:block;
    padding:25px 35px;
    color:#00A9D6;
    text-decoration:none;
    font-size:22px;
    font-weight:600;
}

.history-card button{
    width:100%;
    border:none;
    background:white;
    padding:25px;
    cursor:pointer;
    font-size:22px;
    font-weight:700;
}

/*PRIVACY */

.privacy-group{
    margin:40px 0;
}

.privacy-group h4{
    font-size:23px;
    margin-bottom:20px;
}

.privacy-group label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-right:40px;
    margin-top:20px;
    font-size:20px;
}

input[type=radio]{
    width:22px;
    height:22px;
}

/*ICONS */

.fa-chevron-right{
    font-size:22px;
    color:#444;
}


/*RESPONSIVE */

@media(max-width:1100px){

.account-main{
grid-template-columns:1fr;
}

.account-sidebar{
position:relative;
top:0;
}

.hero-container{
flex-direction:column;
text-align:center;
}

.profile-details h1{
font-size:38px;
}

}

@media(max-width:768px){

.profile-details h1{
font-size:30px;
}

.profile-details p{
font-size:18px;
}

.sidebar-section h3{
font-size:26px;
}

.sidebar-section a{
font-size:20px;
}

.account-content h2{
font-size:34px;
}

.account-content h3{
font-size:25px;
}

.setting-row{
padding:20px;
}

.history-item{
padding:20px;
}

.setting-row h4{
font-size:22px;
}

.history-item h4{
font-size:22px;
display: block;
}

.setting-row span{
font-size:17px;
}

.history-item span{
font-size:17px;
}

.history-item p{
font-size:17px;
}

.account-content p{
font-size:18px;
}

}

/*NOTIFICATIONS PAGE*/

.notifications-page .notifications-shell{
    width:92%;
    max-width:700px;
    margin:0 auto;
    padding:45px 0 80px;
}

.notifications-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
}

.notifications-header h1{
    font-size:35px;
    font-weight:800;
    margin:0;
    color:#111;
}

.notifications-actions{
    display:flex;
    align-items:center;
    gap:24px;
}

.notifications-actions a{
    color:#00A9D6;
    font-size:28px;
    text-decoration:none;
}

.notifications-empty{
    min-height:100px;
    display:flex;
    align-items:center;
}

.notifications-empty p{
    font-size:18px;
    color:#666;
}

/*FOOTER*/

.account-footer{
    background:#fff;
    padding:50px 0;
    border-top:1px solid #ddd;
}

.footer-container{
    width:90%;
    max-width:1450px;
    margin:auto;
}

.footer-container .footer-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:35px;
    margin-bottom:35px;
}

.footer-container .footer-links h2{
    font-size:30px;
    color:#111;
    margin-right:20px;
}

.footer-container .footer-links a{
    text-decoration:none;
    color:#00A2C7;
    font-size:20px;
    font-weight:600;
    transition:.3s;
}

.footer-container .footer-links a:hover{
    text-decoration:underline;
    color:#0087aa;
}

.footer-container .footer-banner{
    border:2px solid #222;
    text-align:center;
    font-size:20px;
    font-weight:700;
    padding:12px;
    margin:35px 0;
}

.footer-container .footer-text{
    display:flex;
    flex-direction:column;
}

.footer-container .footer-text p{
    font-size:16px;
    line-height:1.8;
    color:#222;
}

.footer-container .footer-text a{
    color:#00A2C7;
    text-decoration:none;
}

.footer-container .footer-text a:hover{
    text-decoration:underline;
    color:#0087aa;
}

/*RESPONSIVE*/

@media(max-width:992px){

.footer-container .footer-links{
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.footer-container .footer-links h2{
margin-bottom:15px;
}

.footer-container .footer-banner{
font-size:16px;
}

.footer-container .footer-text p{
font-size:17px;
}

}

@media(max-width:768px){

.notifications-header{
flex-direction:column;
align-items:flex-start;
}

.notifications-header h1{
font-size:40px;
}

.notifications-actions a{
font-size:28px;
}

.notifications-empty p{
font-size:18px;
}

.account-footer{
padding:50px 0;
}

.footer-container .footer-links h2{
font-size:32px;
}

.footer-container .footer-links a{
font-size:18px;
}

.footer-container .footer-banner{
font-size:15px;
padding:10px;
}

.footer-container .footer-text p{
font-size:16px;
line-height:1.7;
}

}

/* ===========================
   HOW IT WORKS
=========================== */

.how-it-works-page .works-hero{
    position:relative;
    background:#006b83;
    overflow:hidden;
    padding:70px 40px;
    text-align:center;
}
.how-it-works-page .works-hero::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-420px;
    transform:translateX(-50%);
    width:900px;
    height:700px;
    background:#00A2C7;
    border-radius:50%;
    z-index:1;
}
.how-it-works-page .hero-content{
    position:relative;
    z-index:2;
    max-width:870px;
    margin:auto;
}
.how-it-works-page .hero-tag{
    display:block;
    color:#ffc74d;
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
}
.how-it-works-page .hero-content h1{
    color:#fff;
    font-size:65px;
    line-height:1.15;
    font-weight:900;
    margin-bottom:30px;
}
.how-it-works-page .hero-content p{
    color:#fff;
    font-size:24px;
    line-height:1.6;
    max-width:950px;
    margin:auto;
}
.how-it-works-page .phone-wrapper{
    position:relative;
    z-index:2;
    margin-top:80px;
}
.how-it-works-page .phone-frame{
    position:relative;
    width:300px;
    margin:auto;
}
.how-it-works-page .phone-case{
    width:100%;
    display:block;
}
.how-it-works-page .phone-video{
    position:absolute;
    top:12px;
    left:17px;
    right:17px;
    bottom:12px;
    overflow:hidden;
    border-radius:36px;
}
.how-it-works-page .phone-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.how-it-works-page .phone-note{
    position:relative;
    z-index:2;
    margin-top:25px;
    color:#fff;
    font-size:16px;
}

/* ===========================
   LEADERSHIP PAGE
=========================== */

.leadership-page .works-hero{
    position:relative;
    background:#006b83;
    overflow:hidden;
    padding:70px 40px;
    text-align:center;
}
.leadership-page .hero-content{
    position:relative;
    z-index:2;
    max-width:870px;
    margin:auto;
}
.leadership-page .hero-tag{
    display:block;
    color:#ffc74d;
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
}
.leadership-page .hero-content h1{
    color:#fff;
    font-size:65px;
    line-height:1.15;
    font-weight:900;
    margin-bottom:30px;
}
.leadership-page .hero-content p{
    color:#fff;
    font-size:24px;
    line-height:1.6;
    max-width:950px;
    margin:auto;
}

.leadership-page .works-footer{
    background:#f5f5f5;
    padding:30px 2% 0px;
}
.leadership-page .investment-title{
    font-size:15px;
    color:#222;
    margin-bottom:30px;
}
.leadership-page .footer-banner{
    border:1.5px solid #333;
    text-align:center;
    padding:4px;
    font-size:15px;
    font-weight:700;
    margin-bottom:45px;
}
.leadership-page .brokercheck{
    margin-bottom:35px;
}
.leadership-page .broker-logo{
    width:230px;
}
.leadership-page .footer-heading{
    font-size:16px;
    color:#222;
    margin-bottom:25px;
    text-decoration: underline;
}
.leadership-page .footer-text p{
    font-size:14px;
    line-height:1.5;
    color:#444;
    margin-bottom:15px;
}
.leadership-page .footer-text a{
    color:#00A2C7;
    text-decoration:none;
}
.leadership-page .footer-text a:hover{
    text-decoration:underline;
    color:#0087aa;
}
.leadership-page .footer-bottom{
    border-top:1px solid #e5e5e5;
    margin-top:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}
.leadership-page .security{
    display:flex;
    align-items:center;
    gap:15px;
}
.leadership-page .housing{
    display:flex;
    align-items:center;
    gap:15px;
}
.leadership-page .security-icon{
    width:90px;
    height:90px;
}
.leadership-page .housing-icon{
    width:45px;
    height:45px;
    background:#e5e5e5;
    border-radius:8px;
}
.leadership-page .security span,
.leadership-page .housing span{
    font-size:18px;
    color:#555;
}

/* ===========================
   PRODUCT SELECTION MODAL
=========================== */

.product-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.product-modal.active {
    display: block;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00A2C7;
    border-radius: 20px;
    max-width: 1250px;
    width: 90%;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 10002;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    position: relative;
}

.modal-header h2 {
    font-size: 50px;
    font-weight: 900;
    color: #fff;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    position: absolute;
    right: 0;
    top: 0%;
    transform: translateY(-50%);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.modal-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.modal-product-card {
    background: #fff;
    min-height: 140px;
    border-radius: 6px;
    padding: 14px 14px 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.modal-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-product-card h4 {
    color: #1A145F;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    max-width: 65%;
}

.modal-product-card p {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
    max-width: 95%;
}

.modal-product-card a {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    font-weight: 800;
    font-size: 13px;
    color: #0087C7;
    position: relative;
    z-index: 2;
}

.modal-product-card .card-image {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.modal-product-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal-footer {
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
}

.modal-footer p {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.modal-footer a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

.modal-footer a:hover {
    text-decoration: none;
}

/* Modal responsive styles */
@media(max-width: 1024px) {
    .modal-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 768px) {
    .modal-content {
        padding: 30px 20px;
        width: 95%;
    }

    .modal-header h2 {
        font-size: 22px;
    }

    .modal-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .modal-products-grid {
        grid-template-columns: 1fr;
    }
}

.leadership-page .more-sofi{
    background:#24134F;
    padding:80px 40px;
}

.leadership-page .more-container{
    max-width:1650px;
    margin:auto;
}

.leadership-page .more-container h2{
    text-align:center;
    color:white;
    font-size:48px;
    margin-bottom:36px;
    font-weight:900;
}

.leadership-page .more-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.leadership-page .more-card{
    background:linear-gradient(to right, #544783 50%, #44376D 50%);
    background-size:200% 100%;
    background-position:right bottom;
    height:154px;
    display:flex;
    align-items:center;
    padding-left:60px;
    text-decoration:none;
    color:white;
    font-size:30px;
    font-weight:800;
    transition:background-position .5s ease;
}

.leadership-page .more-card:hover{
    background-position:left bottom;
}

/* How it works page more section */
.how-it-works-page .more-sofi{
    background:#24134F;
    padding:80px 40px;
}

.how-it-works-page .more-container{
    max-width:1650px;
    margin:auto;
}

.how-it-works-page .more-container h2{
    text-align:center;
    color:white;
    font-size:48px;
    margin-bottom:36px;
    font-weight:900;
}

.how-it-works-page .more-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.how-it-works-page .more-card{
    background:linear-gradient(to right, #544783 50%, #44376D 50%);
    background-size:200% 100%;
    background-position:right bottom;
    height:154px;
    display:flex;
    align-items:center;
    padding-left:60px;
    text-decoration:none;
    color:white;
    font-size:30px;
    font-weight:800;
    transition:background-position .5s ease;
}

.how-it-works-page .more-card:hover{
    background-position:left bottom;
}

/* How it works page responsive styles */
@media(max-width:1200px){
.how-it-works-page .more-container h2{
font-size:56px;
}

.how-it-works-page .more-card{
font-size:38px;
padding-left:45px;
}
}

@media(max-width:768px){
.how-it-works-page .more-sofi{
padding:60px 20px;
}

.how-it-works-page .more-grid{
grid-template-columns:1fr;
}

.how-it-works-page .more-container h2{
font-size:42px;
}

.how-it-works-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}
}

@media(max-width:480px){
.how-it-works-page .more-card{
font-size:24px;
height:120px;
}
}

/* Leadership page responsive styles */
@media(max-width:1200px){
.leadership-page .more-container h2{
font-size:56px;
}

.leadership-page .more-card{
font-size:38px;
padding-left:45px;
}
}

@media(max-width:768px){
.leadership-page .more-sofi{
padding:60px 20px;
}

.leadership-page .more-grid{
grid-template-columns:1fr;
}

.leadership-page .more-container h2{
font-size:42px;
}

.leadership-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}
}

@media(max-width:480px){
.leadership-page .more-card{
font-size:24px;
height:120px;
}
}

/* Leadership page responsive styles */
@media(max-width:1200px){
.leadership-page .more-container h2{
font-size:56px;
}

.leadership-page .more-card{
font-size:38px;
padding-left:45px;
}
}

@media(max-width:768px){
.leadership-page .more-sofi{
padding:60px 20px;
}

.leadership-page .more-grid{
grid-template-columns:1fr;
}

.leadership-page .more-container h2{
font-size:42px;
}

.leadership-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}
}

@media(max-width:480px){
.leadership-page .more-card{
font-size:24px;
height:120px;
}
}

/* Products page more section */
.products-page .more-sofi{
    background:#24134F;
    padding:80px 40px;
}

.products-page .more-container{
    max-width:1650px;
    margin:auto;
}

.products-page .more-container h2{
    text-align:center;
    color:white;
    font-size:48px;
    margin-bottom:36px;
    font-weight:900;
}

.products-page .more-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.products-page .more-card{
    background:linear-gradient(to right, #544783 50%, #44376D 50%);
    background-size:200% 100%;
    background-position:right bottom;
    height:154px;
    display:flex;
    align-items:center;
    padding-left:60px;
    text-decoration:none;
    color:white;
    font-size:30px;
    font-weight:800;
    transition:background-position .5s ease;
}

.products-page .more-card:hover{
    background-position:left bottom;
}

/* Products page responsive styles */
@media(max-width:1200px){
.products-page .more-container h2{
font-size:56px;
}

.products-page .more-card{
font-size:38px;
padding-left:45px;
}
}

@media(max-width:768px){
.products-page .more-sofi{
padding:60px 20px;
}

.products-page .more-grid{
grid-template-columns:1fr;
}

.products-page .more-container h2{
font-size:42px;
}

.products-page .more-card{
height:150px;
font-size:28px;
padding-left:30px;
}
}

@media(max-width:480px){
.products-page .more-card{
font-size:24px;
height:120px;
}
}

.how-it-works-page .money-right{
    background:#f2f0f5;
    padding:110px 3%;
}
.how-it-works-page .money-header{
    max-width:860px;
    margin:auto;
    text-align:center;
}
.how-it-works-page .money-header h2{
    font-size:60px;
    font-weight:900;
    color:#24104f;
    margin-bottom:30px;
}
.how-it-works-page .money-header p{
    font-size:23px;
    color:#444;
    line-height:1.6;
}
.how-it-works-page .philosophy-box{
    margin-top:60px;
    background:#fff;
    border-radius:24px;
    padding:70px 60px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.how-it-works-page .philosophy-box h3{
    text-align:center;
    font-size:30px;
    color:#24104f;
    font-weight:800;
    margin-bottom:60px;
}
.how-it-works-page .philosophy-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.how-it-works-page .philosophy-item{
    text-align:center;
}
.how-it-works-page .circle-image{
    width:150px;
    height:150px;
    border-radius:50%;
    background:#e6e6e6;
    margin:0 auto 30px;
    overflow:hidden;
}
.how-it-works-page .philosophy-item h4{
    font-size:20px;
    color:#24104f;
    font-weight:800;
    line-height:1.35;
}

.how-it-works-page .works-footer{
    background:#f5f5f5;
    padding:30px 2% 0px;
}
.how-it-works-page .investment-title{
    font-size:15px;
    color:#222;
    margin-bottom:30px;
}
.how-it-works-page .footer-banner{
    border:1.5px solid #333;
    text-align:center;
    padding:4px;
    font-size:15px;
    font-weight:700;
    margin-bottom:45px;
}
.how-it-works-page .brokercheck{
    margin-bottom:35px;
}
.how-it-works-page .broker-logo{
    width:230px;
}

.how-it-works-page .footer-heading{
    font-size:16px;
    color:#222;
    margin-bottom:25px;
    text-decoration: underline;
}
.how-it-works-page .footer-text p{
    font-size:14px;
    line-height:1.5;
    color:#444;
    margin-bottom:15px;
}

.how-it-works-page .footer-text a{
    color:#00A2C7;
    text-decoration:none;
}

.how-it-works-page .footer-text a:hover{
    text-decoration:underline;
}
.how-it-works-page .footer-bottom{
    border-top:1px solid #e5e5e5;
    margin-top:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}
.how-it-works-page .security{
    display:flex;
    align-items:center;
    gap:15px;
}
.how-it-works-page .housing{
    display:flex;
    align-items:center;
    gap:15px;
}
.how-it-works-page .security-icon{
    width:90px;
    height:90px;
}
.how-it-works-page .security span,
.how-it-works-page .housing span{
    font-size:18px;
    color:#555;
}

/* ===========================
   LEADERSHIP
=========================== */

.leadership-section{
    padding:70px 0;
    background:#fff;
}
.leadership-container{
    width:94%;
    max-width:1350px;
    margin:auto;
}
.leaders-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-bottom:35px;
}

.leaders-row.centered-last-row {
    display: grid !important;
    grid-template-columns: repeat(3, 220px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 35px !important;
    max-width: 760px !important;
    width: fit-content !important;
    margin: 0 auto 35px auto !important;
}

.leaders-row.centered-last-row .leader-card {
    width: 220px !important;
    max-width: 220px !important;
    justify-self: center !important;
}
.leader-card{
    text-align:center;
    cursor:pointer;
    transition:.35s;
}
.leader-image{
    width:200px;
    height:200px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    transition:.35s;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:4px solid transparent;
}
.leader-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s;
    display:block;
}
.leader-card:hover .leader-image{
    transform:scale(1.08);
}
.leader-card.active .leader-image{
    border-color:#0099d8;
    box-shadow:0 0 0 4px rgba(0,153,216,.18);
    transform:none;
}

.leaders-row:last-of-type .leader-card.active .leader-image {
    transform:none;
}
.leader-card h3{
    margin-top:18px;
    font-size:22px;
    color:#17154a;
    font-weight:700;
}
.leader-card p{
    margin-top:8px;
    font-size:12px;
    font-weight:700;
    color:#444;
    text-transform:uppercase;
    letter-spacing:.7px;
    line-height:1.5;
}
.bio-card{
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    padding:38px 45px;
    margin-bottom:45px;
    animation:fadeIn .35s ease;
}
.bio-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:25px;
}

#bioName {
    font-size: 44px !important;
    font-weight: 900 !important;
    color: #17154a !important;
}

#bioTitle {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #17154a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

#bioText p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    margin: 0 0 14px !important;
}

#bioText p:last-child {
    margin-bottom: 0 !important;
}
.collapse-btn{
    background:none;
    border:none;
    color:#0099d8;
    font-weight:700;
    cursor:pointer;
    font-size:14px;
}
.collapse-btn:hover{
    color:#0077aa;
}
#bioCard{
    transition:.35s;
}
#bioText p{
    margin:0 0 16px;
    font-size:17px;
    color:#555;
    line-height:1.9;
}
#bioText p:last-child{
    margin-bottom:0;
}
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@media(max-width:1200px){
    .leaders-row{
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:900px){
    .leaders-row{
        grid-template-columns:repeat(2,1fr);
    }
    .bio-header{
        flex-direction:column;
        gap:20px;
    }
    .bio-header h2{
        font-size:38px;
    }
}
@media(max-width:600px){
    .leaders-row{
        grid-template-columns:1fr;
    }
    .leader-image{
        width:130px;
        height:130px;
    }
    .bio-card{
        padding:30px;
    }
    .bio-header h2{
        font-size:32px;
    }
}

.board-section{
    width:100%;
    max-width:1350px;
    margin: 0 auto;
    padding:70px 0px;
    background-color: #f3f3f3;
}
.board-container{
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.board-title{
    font-size:49px;
    font-weight:900;
    color:#17154a;
    margin-bottom:50px;
}
.board-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    justify-items:center;
}
.board-member{
    overflow:hidden;
    transition:.3s;
    width: 100%;
    max-width: 500px;
    text-align: center;
}
.board-member h3{
    padding:35px 35px 10px;
    font-size:20px;
    color:#17154a;
    font-weight:900;
}
.board-member span{
    display:block;
    padding:0 35px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
    color:#555;
    margin-bottom:5px;
    text-transform:uppercase;
}
.board-btn,
.collapse-board{
    margin: 20px auto 0;
    display: inline-block;
}
.board-btn{
    margin:30px 35px;
    background:none;
    border:none;
    color:#00a9d8;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    display:inline-block;
}
.board-btn:hover{
    color:#0078b0;
}
.board-member.active .board-btn{
    display:none;
}
.board-bio{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease,padding .15s ease;
    padding:0 15px;
}
.board-member.active .board-bio{
    max-height:1000px;
    padding:0 15px 15px;
}
.board-bio p{
    font-size:16px;
    line-height:1.6;
    color:#555;
    margin-bottom:20px;
    text-align:left;
}
.collapse-board{
    background:none;
    border:none;
    color:#00a9d8;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:0s;
    display:inline-block;
}
.collapse-board:hover{
    color:#0078b0;
}
@media(max-width:1100px){
    .board-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:700px){
    .board-grid{
        grid-template-columns:1fr;
    }
    .board-title{
        font-size:42px;
    }
}

/* ===========================
   PRESS
=========================== */

.press-hero{
height:523px;
background:url("../images/Press-Hero-Image-Desktop.jpg") center center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.press-overlay{
width:100%;
height:100%;
background:rgba(20,22,70,.35);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}

.press-overlay h1{
font-size:60px;
color:#fff;
font-weight:900;
margin-bottom:25px;
}

.press-overlay p{
font-size:24px;
color:#fff;
}

.press-overlay a{
color:#fff;
text-decoration:underline;
transition:.3s;
}

.press-releases{
padding:90px 0;
background:#fff;
}

.press-releases .container{
width:88%;
margin:auto;
}

.press-releases h2{
font-size:47px;
margin-bottom:35px;
color:#333;
font-weight:900;
}

.release-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:27px;
}

.release-card{
border:1px solid #dcdcdc;
padding:30px;
min-height:175px;
transition:.35s;
cursor:pointer;
background:#fff;
}

.release-card span{
font-size:16px;
display:block;
margin-bottom:14px;
color:#444;
}

.release-card h3{
font-size:19px;
line-height:1.2;
font-weight:800;
color:#007ea6;
transition:.4s;
}

.release-card:hover h3{
color:#16b5d6;
}

.archive-link{
display:inline-block;
margin-top:40px;
font-size:15px;
color:#007ea6;
text-decoration:none;
}

.news-section{
padding:90px 0;
background:#edf1f3;
}

.news-section .container{
width:88%;
margin:auto;
}

.news-section h2{
font-size:47px;
margin-bottom:35px;
color:#333;
font-weight:900;
}

.news-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:27px;
}

.news-card{
background:#fff;
border:1px solid #d8d8d8;
}

.news-logo{
height:220px;
background:#11a9cf;
display:flex;
justify-content:center;
align-items:center;
font-size:38px;
color:#fff;
font-weight:900;
}

.news-content{
padding:26px;
}

.news-content span{
display:block;
margin-bottom:15px;
font-size:18px;
color:#444;
}

.news-content h3{
font-size:19px;
line-height:1.2;
color:#006f94;
transition:.3s;
cursor:pointer;
font-weight:800;
}

.news-content h3:hover{
color:#17b7d8;
}

@media(max-width:992px){

.release-grid{
grid-template-columns:1fr 1fr;
}

.news-grid{
grid-template-columns:1fr 1fr;
}

.press-overlay h1{
font-size:55px;
}

.press-releases h2,
.news-section h2{
font-size:42px;
}

}

@media(max-width:768px){

.release-grid{
grid-template-columns:1fr;
}

.news-grid{
grid-template-columns:1fr;
}

.press-overlay h1{
font-size:45px;
}

.press-overlay p{
font-size:18px;
}

.press-releases h2,
.news-section h2{
font-size:36px;
}

.news-logo{
height:180px;
}

}

/* ===========================
   OUR VALUES
=========================== */

.values-hero{
height:650px;
background:url("../images/Values_BG_Desktop@2x.jpg") center center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.values-overlay{
width:100%;
height:100%;
background:rgba(32,24,77,.70);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}

.hero-label{
color:#ff7d7d;
font-size:18px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}

.values-overlay h1{
font-size:78px;
font-weight:800;
color:#fff;
margin-bottom:30px;
}

.values-overlay p{
max-width:900px;
font-size:34px;
line-height:1.5;
color:#fff;
}

.values-overlay strong{
font-weight:800;
}

.value-section{
padding:110px 0;
background:#fff;
}

.light-bg{
background:#EDF0F2;
}

.container{
width:88%;
margin:auto;
}

.value-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

.value-row.reverse .value-image{
order:2;
}

.value-row.reverse .value-text{
order:1;
}

.value-image{
width:470px;
height:470px;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0;
}

.value-text{
flex:1;
}

.value-text span{
display:block;
margin-bottom:15px;
font-size:15px;
font-weight:800;
color:#ff7d7d;
letter-spacing:1px;
}

.value-text h2{
font-size:50px;
line-height:1.1;
font-weight:900;
color:#1d2154;
margin-bottom:24px;
}

.value-text p{
font-size:16px;
line-height:1.8;
color:#444;
max-width:650px;
}

@media(max-width:992px){

.value-row{
flex-direction:column;
text-align:center;
}

.value-row.reverse .value-image{
order:2;
}

.value-row.reverse .value-text{
order:1;
}

.value-image{
width:350px;
height:350px;
}

.values-overlay h1{
font-size:58px;
}

.values-overlay p{
font-size:24px;
}

.value-text h2{
font-size:44px;
}

}

@media(max-width:768px){

.values-hero{
height:560px;
}

.values-overlay h1{
font-size:42px;
}

.values-overlay p{
font-size:20px;
}

.value-image{
width:280px;
height:280px;
}

.value-text h2{
font-size:36px;
}

.value-text p{
font-size:18px;
}

}

/* =========================================================
   STUDENT LOAN PAGE (Fitop + Stages shared layout)
   ========================================================= */

.student-loan-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.learn-page {
  overflow-x: hidden;
}

/*SECTION 1 — HERO*/

.student-hero {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    padding: 90px 4%;
    box-sizing: border-box;
}

.student-hero-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    width: 100%;
    box-sizing: border-box;
}

/* LEFT SIDE */

.student-hero-text {
    min-width: 0;
}

.student-hero-icon i {
    font-size: 50px;
    margin-bottom: 10px;
    color: #00A2C7;
}

.student-hero-text h1 {
    font-size: clamp(2rem, 5vw, 60px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -1px;
    color: #1b174f;
    margin-bottom: 28px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.student-hero-text p {
    max-width: 550px;
    font-size: clamp(1rem, 2.2vw, 23px);
    line-height: 1.7;
    font-weight: 400;
    color: #27234e;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/*FEATURED ARTICLE CARD*/

.featured-student-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #d6d4dc;
    border-radius: 17px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

.featured-student-image {
    width: 100%;
    height: 400px;
    background: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.featured-student-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-student-content {
    padding: 30px 30px;
}

.featured-label {
    display: block;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #30304d;
    margin-bottom: 18px;
}

.featured-student-content h2 {
    font-size: clamp(1.1rem, 2.5vw, 25px);
    line-height: 1.35;
    font-weight: 900;
    color: #007b9f;
    transition: color 0.25s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Hover */

.featured-student-card:hover .featured-student-content h2 {
    color: #28a9c7;
}

/*SECTION 2 — THE BASICS*/

.basics-section {
    width: 100%;
    max-width: 100%;
    background: #edf1f3;
    padding: 65px 7.5% 80px;
    box-sizing: border-box;
}

.basics-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 48px);
    line-height: 1.15;
    font-weight: 900;
    color: #1b174f;
    letter-spacing: -0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.basics-section .section-title {
    margin-bottom: 45px;
}

/*ARTICLE GRID*/

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.article-card {
    background: #ffffff;
    overflow: hidden;
    border-radius: 13px;
    min-width: 0;
    max-width: 100%;
}

/*ARTICLE IMAGE PLACEHOLDER*/

.article-image {
    width: 100%;
    height: 220px;
    background: #dfe4e6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*ARTICLE TEXT*/

.article-card-content {
    min-height: 100px;
    padding: 28px;
    box-sizing: border-box;
}

.article-card-content p {
    font-size: clamp(0.9rem, 2vw, 18px);
    font-weight: 600;
    color: black;
    transition: color 0.25s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-card-content h3 {
    font-size: clamp(1rem, 2.2vw, 21px);
    line-height: 1.35;
    font-weight: 800;
    color: #007b9f;
    transition: color 0.25s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-card:hover .article-card-content h3 {
    color: #25a9c5;
}

.article-card:hover .article-card-content p {
    color: #25a9c5;
}

/*SECTION 3 — LET'S DO SOME MATH*/

.math-section {
    width: 100%;
    max-width: 100%;
    padding: 55px 7.5% 80px;
    background: #dedbe2;
    box-sizing: border-box;
}

.math-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.section-accent {
    width: 80px;
    height: 16px;
    background: #df7775;
    margin-bottom: 35px;
}

.math-section .section-title {
    margin-bottom: 45px;
}

/*MATH GRID*/

.math-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.math-grid-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.math-card {
    min-height: 220px;
    height: auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 36px 20px;
    border-radius: 13px;
    min-width: 0;
    box-sizing: border-box;
}

/*MATH ICON PLACEHOLDER*/

.topic-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    display: flex;
}

.math-card h3 {
    max-width: 100%;
    font-size: clamp(0.95rem, 2vw, 18px);
    line-height: 1.4;
    font-weight: 800;
    color: #007d9f;
    transition: color 0.25s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.math-card:hover h3 {
    color: #29a8c3;
}

/*SECTION 4 — BROWSE MORE FINANCIAL TOPICS*/

.topics-section {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    padding: 80px 7.5% 70px;
    box-sizing: border-box;
}

.topics-container {
    max-width: 1400px;
    margin: 0 auto;
    border: 1px solid #d8d8df;
    padding: 60px 45px 70px;
    width: 100%;
    box-sizing: border-box;
}

.topics-section .section-title {
    margin-bottom: 50px;
}

/*TOPICS GRID*/

.topics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 6vw, 80px);
    row-gap: 35px;
}

.topic-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 55px;
    min-width: 0;
}

.topic-item:hover span {
    color: #0088a9;
}

/*TOPIC ICON PLACEHOLDER*/

.topic-item .topic-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #08a8ca;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topic-item span {
    font-size: clamp(0.95rem, 2vw, 20px);
    font-weight: 700;
    color: #292746;
    transition: color 0.25s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
}

/*SECTION 5 — DISCLAIMER*/

.student-disclaimer {
    width: 100%;
    padding: 35px 7.5% 50px;
    background: #ffffff;
}

.student-disclaimer p {
    max-width: 1400px;
    margin: 0 auto 25px;
    font-size: 13px;
    line-height: 1.8;
    color: #55546b;
}

.student-disclaimer p:last-child {
    margin-bottom: 0;
}

/*RESPONSIVE — TABLET*/

@media (max-width: 1100px) {

    /* HERO */

    .student-hero {
        padding: 70px 5% 60px;
    }

    .student-hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .student-hero-text {
        padding-left: 0;
        max-width: 100%;
    }

    .student-hero-text h1 {
        font-size: clamp(2rem, 5.5vw, 48px);
        letter-spacing: -0.5px;
    }

    .student-hero-text p {
        max-width: 100%;
    }

    /* ARTICLE GRID */

    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    /* MATH */

    .math-grid,
    .math-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* TOPICS */

    .topics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }

    .topics-container {
        padding: 40px 28px 50px;
    }

}

/*RESPONSIVE — MOBILE*/

@media (max-width: 700px) {

    /* HERO */

    .student-hero {
        padding: 50px 16px 48px;
    }

    .student-hero-content {
        gap: 32px;
    }

    .student-hero-text h1 {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
        letter-spacing: -0.25px;
        margin-bottom: 18px;
    }

    .student-hero-text p {
        font-size: clamp(0.95rem, 3.5vw, 1.1rem);
        line-height: 1.6;
    }

    .student-hero-icon i {
        font-size: 36px;
    }

    .featured-student-image {
        height: clamp(180px, 45vw, 240px);
    }

    .featured-student-content {
        padding: 20px 18px;
    }

    .featured-student-content h2 {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

    .featured-label {
        font-size: 14px;
    }

    /* BASICS */

    .basics-section {
        padding: 48px 16px;
    }

    .section-title {
        font-size: clamp(1.45rem, 5.5vw, 1.85rem);
        margin-bottom: 28px;
    }

    .article-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .article-image {
        height: clamp(160px, 42vw, 200px);
    }

    .article-card-content {
        padding: 20px 18px;
    }

    .article-card-content h3 {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    }

    .article-card-content p {
        font-size: clamp(0.85rem, 3.2vw, 0.95rem);
    }

    /* MATH */

    .math-section {
        padding: 48px 16px;
    }

    .math-grid,
    .math-grid-three {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .math-card {
        min-height: auto;
        padding: 28px 18px;
    }

    .math-card h3 {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }

    /* TOPICS */

    .topics-section {
        padding: 48px 16px;
    }

    .topics-container {
        padding: 28px 18px 36px;
    }

    .topics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        column-gap: 0;
    }

    .topic-item {
        gap: 12px;
    }

    .topic-item span {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }

    .topic-item .topic-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    /* DISCLAIMER */

    .student-disclaimer {
        padding: 28px 16px 36px;
    }

    .student-disclaimer p {
        font-size: 12px;
    }

}


/*VERY SMALL SCREENS */

@media (max-width: 400px) {

    .student-hero {
        padding: 40px 14px 36px;
    }

    .student-hero-text h1 {
        font-size: 1.55rem;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .article-card-content {
        padding: 18px 14px;
    }

    .math-card {
        padding: 24px 14px;
    }

    .topics-container {
        padding: 22px 14px 28px;
    }

}

/* =========================================================
   LEARN PAGE DROPDOWN STYLES
   ========================================================= */

.learn-header .menu-item {
    position: relative;
}

.learn-header .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #24164b;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
}

.learn-header .menu-item:hover .dropdown {
    display: block;
}

.learn-header .dropdown a {
    display: block;
    padding: 10px 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.learn-header .dropdown a:hover {
    color: #00A2C7;
}

/* Learn page dropdown responsive styles */
@media(max-width: 768px) {
    .learn-header .dropdown {
        min-width: 180px;
    }
    
    .learn-header .dropdown a {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ===========================
   MOST RECENT 1
=========================== */

.article-page{
    width:100%;
    background:#fff;
    color:#242447;
}
.article-page a{
    color:#007fa7;
    text-decoration:underline;
}
.article-hero{
    width:100%;
    background:#edf2f5;
    padding:80px 20px;
    position:relative;
}
.article-hero-content{
    width:100%;
    max-width:840px;
    margin:0 auto;
}
.article-hero-content h1{
    max-width:840px;
    font-size:60px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-1.5px;
    color:#211d58;
    margin-bottom:18px;
}
.article-author{
    font-size:25px;
    line-height:1.5;
    color:#34354f;
    margin-bottom:22px;
}
.article-author a{
    color:#007fa7;
}
.article-disclaimer{
    max-width:840px;
    font-size:16px;
    line-height:1.45;
    font-weight:800;
    color:#262744;
    margin-bottom:32px;
}
.article-hero-image{
    width:100%;
    height:440px;
    background:#d8dee2;
    overflow:hidden;
    position:relative;
}
.article-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.article-body{
    width:100%;
    background:#fff;
    padding:60px 20px 90px;
    margin-top:-290px;
    position:relative;
    z-index:10;
}
.article-container{
    width:100%;
    max-width:840px;
    margin:0 auto;
}
.article-toc{
    border:1px solid #a8a8a8;
    border-top:5px solid #00758d;
    padding:24px 20px 22px;
    margin-bottom:25px;
}
.article-toc h3{
    font-size:17px;
    color:#292948;
    margin-bottom:18px;
}
.toc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:45px;
    row-gap:10px;
}
.toc-grid a{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:16px;
    line-height:1.45;
    color:#007fa7;
}
.article-introduction{
    margin-bottom:35px;
}
.article-introduction p{
    font-size:17px;
    line-height:1.55;
    color:#3e405a;
    margin-bottom:17px;
}
.key-points{
    border-left:3px solid #00a8d4;
    padding:0 0 0 35px;
    margin:35px 0 65px;
}
.key-points h3{
    font-size:20px;
    color:#34344f;
    margin-bottom:17px;
}
.key-points ul{
    padding-left:18px;
}
.key-points li{
    font-size:16px;
    line-height:1.55;
    color:#46475e;
    padding-left:5px;
    margin-bottom:15px;
}
.article-section{
    margin-bottom:70px;
    scroll-margin-top:100px;
}
.article-section h2{
    color:#00a1ca;
    font-size:51px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:-1px;
    margin-bottom:18px;
}
.article-section h3{
    color:#3a3b52;
    font-size:31px;
    line-height:1.25;
    font-weight:800;
    margin:38px 0 14px;
}
.article-section p{
    color:#4a4b61;
    font-size:16px;
    line-height:1.5;
    margin-bottom:20px;
}
.article-bullets{
    padding-left:40px;
    margin-top:18px;
}
.article-bullets li{
    color:#4a4b61;
    font-size:17px;
    line-height:1.65;
    padding-left:5px;
    margin-bottom:18px;
}
.article-section a:hover{
    color:#22adc8;
}
@media(max-width:900px){
    .article-hero{
        padding-top:60px;
    }
    .article-hero-content h1{
        font-size:48px;
    }
    .article-author{
        font-size:21px;
    }
    .article-hero-image{
        height:340px;
    }
    .article-body{
        margin-top:-200px;
    }
    .toc-grid{
        grid-template-columns:1fr;
    }
    .article-section h2{
        font-size:42px;
    }
}
@media(max-width:600px){
    .article-hero{
        padding:45px 15px 0;
    }
    .article-body{
        padding:0 15px 60px;
        margin-top:-150px;
    }
    .article-hero-content h1{
        font-size:38px;
    }
    .article-author{
        font-size:18px;
    }
    .article-disclaimer{
        font-size:15px;
    }
    .article-hero-image{
        height:250px;
    }
    .article-toc{
        padding:20px 15px;
    }
    .article-section h2{
        font-size:34px;
    }
    .article-section h3{
        font-size:26px;
    }
    .article-section p,
    .article-bullets li,
    .key-points li{
        font-size:16px;
    }
}

/* ================================================================
   GLOBAL RESPONSIVE OVERHAUL
   Hamburger Menus · Heroes · Card Images · Button Centering
   ================================================================ */

/* ─────────────────────────────────────────────
   HAMBURGER BUTTON — SHARED STYLES
───────────────────────────────────────────── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
  z-index: 1001;
}

.hamburger-btn:hover {
  background: rgba(0, 162, 199, 0.1);
}

.hamburger-btn .bar {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: #1A145F;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.hamburger-btn.open .bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger-btn.open .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.hamburger-btn.open .bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Dashboard & learn hamburger have dark / white bars */
.db-hamburger-btn .bar  { background: #1a1a1a; }
.learn-hamburger-btn .bar { background: #fff; }

/* ─────────────────────────────────────────────
   MAIN NAVBAR MOBILE MENU
───────────────────────────────────────────── */
.nav-mobile-menu {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 2px solid #e8eaed;
  box-shadow: 0 8px 24px rgba(26,20,95,0.10);
  z-index: 998;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.nav-mobile-menu.open {
  max-height: 520px;
}

.nav-mobile-menu-inner {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
}

.nav-mobile-menu a {
  display: block;
  padding: 13px 4px;
  color: #1A145F;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s;
  text-decoration: none;
}

.nav-mobile-menu a:last-child {
  border-bottom: none;
}

.nav-mobile-menu a:hover {
  color: #00A2C7;
}

.nav-mobile-menu .nav-cta-mobile {
  display: block;
  margin-top: 14px;
  background: #00A2C7;
  color: #fff !important;
  padding: 13px 28px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────
   DASHBOARD NAVBAR MOBILE MENU (.db-nav)
───────────────────────────────────────────── */
.db-mobile-menu {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 2px solid #e5e5e5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 998;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.db-mobile-menu.open {
  max-height: 520px;
}

.db-mobile-menu-inner {
  padding: 12px 24px 20px;
  display: flex;
  flex-direction: column;
}

.db-mobile-menu a {
  display: block;
  padding: 12px 4px;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  transition: color 0.2s;
}

.db-mobile-menu a:last-child {
  border-bottom: none;
}

.db-mobile-menu a:hover,
.db-mobile-menu a.db-active {
  color: #07A8D0;
}

/* ─────────────────────────────────────────────
   LEARN PAGE NAVBAR MOBILE MENU
───────────────────────────────────────────── */
.learn-mobile-menu {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  background: #24164b;
  z-index: 1000;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.learn-mobile-menu.open {
  max-height: 520px;
}

.learn-mobile-menu-inner {
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
}

.learn-mobile-menu a {
  display: block;
  padding: 13px 4px;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  transition: color 0.2s;
}

.learn-mobile-menu a:last-child {
  border-bottom: none;
}

.learn-mobile-menu a:hover {
  color: #00A2C7;
}

/* ─────────────────────────────────────────────
   TABLET (769px – 1024px) FIXES
───────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Show DB hamburger at tablet — db-nav has too many links */
  .db-nav { position: sticky; top: 0; padding: 0 24px; z-index: 999; }
  .db-nav-links { display: none; }
  .db-hamburger-btn { display: flex; }

  /* At-Work hero */
  .atwork-hero { padding: 50px 40px; flex-wrap: wrap; }
  .atwork-left { width: 100%; padding: 0; }
  .atwork-left h1 { font-size: 34px; }
  .atwork-right { width: 100%; justify-content: center; }
  .hero-flower-image { width: 100%; max-width: 440px; height: 250px; margin: 0 auto; }
  .benefits-section { padding: 60px 40px; }
  .benefits-wrapper { gap: 40px; flex-wrap: wrap; justify-content: center; }

  /* Business hero tablet */
  .business-page .business-hero { flex-direction: column; }
  .business-page .business-left { width: 100%; padding: 50px 60px; text-align: center; align-items: center; }
  .business-page .business-right { width: 100%; height: 300px; }
  .business-page .business-hero-image { height: 100%; }
  .business-page .business-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .business-page .financial-products { padding: 70px 40px; }
  .business-page .grow-business { padding: 70px 40px; }

  /* Insurance hero tablet */
  .insurance-hero { padding: 60px 40px; }
  .insurance-hero .hero-container { gap: 40px; margin-bottom: 60px; }
  .umbrella-placeholder { width: 340px; height: 320px; }

  /* Smart card tablet */
  .smart-card-hero { padding: 50px 40px 70px; }

  /* Banking landing hero tablet */
  .bl-hero { padding: 50px 60px 90px; }
  .bl-features { padding: 60px 40px; }

  /* DB dashboard padding tablet */
  .db-main { padding: 14px 28px 24px; }
  .db-relay-section { padding: 24px 28px 16px; }
  .db-benefits-section { padding: 0 28px 24px; }
  .db-tools-section { padding: 24px 28px; }
  .db-legal-section { padding: 24px 28px; }
  .db-footer { padding: 16px 28px; }

  /* CTA hands image */
  .hands-image { width: 90%; min-width: 0; }
}

/* ─────────────────────────────────────────────
   MOBILE (≤768px) — COMPREHENSIVE FIXES
───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ═══ NAVBAR — MAIN PUBLIC ═══ */
  .navbar { position: relative; }
  .navbar-inner { padding: 0 8px; justify-content: space-between; }
  .navbar-links,
  .navbar-actions { display: none !important; }
  .nav-hamburger-btn { display: flex; }

  /* ═══ NAVBAR — DASHBOARD ═══ */
  .db-nav { position: sticky; top: 0; padding: 0 16px; z-index: 999; }
  .db-nav-links { display: none !important; }
  .db-hamburger-btn { display: flex; }

  /* ═══ NAVBAR — LEARN PAGE ═══ */
  .learn-page .learn-header { position: relative; }
  .learn-page .learn-header .container {
    flex-direction: row !important;
    height: 70px !important;
    padding: 0 16px !important;
    gap: 0 !important;
    justify-content: space-between;
    align-items: center;
  }
  .learn-page .learn-menu { display: none !important; }
  .learn-hamburger-btn { display: flex; }

  /* ═══ HOME SLIDER HERO ═══ */
  .slide {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 20px 100px;
    min-height: auto;
    gap: 16px;
  }

  .hero-image {
    position: relative !important;
    width: 100%;
    height: 220px;
    inset: auto;
    margin-top: 0;
    z-index: 1;
  }

  .hero-image img {
    object-fit: cover;
    object-position: center top;
    height: 100%;
    width: 100%;
  }

  .home-page .hero-content {
    max-width: 100%;
    position: relative;
    z-index: 2;
  }

  .home-page .hero-content h1 {
    font-size: clamp(24px, 7vw, 36px);
  }

  .hero-btn {
    display: block;
    text-align: center;
    width: fit-content;
  }

  /* ═══ HOME PRODUCTS GRID ═══ */
  .home-page .products-section { padding: 0 16px 40px; }
  .home-page .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .home-page .product-card .card-image { width: 60px; height: 60px; right: -2px; bottom: -2px; }

  /* ═══ BUSINESS HERO ═══ */
  .business-page .business-hero { flex-direction: column; min-height: auto; }
  .business-page .business-left { width: 100%; padding: 40px 24px; text-align: center; align-items: center; }
  .business-page .business-left h1 { font-size: 28px; margin-bottom: 28px; }
  .business-page .business-btn { width: auto; padding: 0 32px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
  .business-page .business-right { width: 100%; height: 240px; }
  .business-page .business-hero-image { height: 100%; }
  .business-page .business-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Business section paddings */
  .business-page .financial-products { padding: 50px 20px; }
  .business-page .financial-products h2 { font-size: 30px; }
  .business-page .grow-business { padding: 50px 20px; }
  .business-page .grow-business > h2 { font-size: 30px; }
  .business-page .grow-business > p:not(.grow-note) { font-size: 17px; }
  .business-page .grow-card { flex-direction: column; text-align: center; align-items: center; }
  .business-page .grow-logo { width: 100%; max-width: 260px; height: 150px; }

  /* ═══ AT-WORK HERO ═══ */
  .atwork-hero { flex-direction: column; padding: 40px 20px; }
  .atwork-left { width: 100%; text-align: center; align-items: center; padding: 0; }
  .atwork-left h1 { font-size: 28px; }
  .atwork-right { width: 100%; justify-content: center; }
  .hero-flower-image { width: 100%; max-width: 380px; height: 200px; margin: 0 auto; }
  .benefits-section { padding: 50px 20px; }
  .benefits-wrapper { flex-direction: column; align-items: center; gap: 36px; }
  .benefit-card { width: 100%; max-width: 320px; text-align: center; }
  .form-buttons { flex-direction: column; align-items: center; gap: 16px; }
  .form-buttons button { width: 100%; max-width: 340px; }
  .top-inputs { flex-direction: column; gap: 0; }
  .new-badge { align-self: center; }

  /* ═══ INSURANCE HERO ═══ */
  .insurance-hero { padding: 50px 20px; }
  .insurance-hero .hero-container { flex-direction: column; text-align: center; gap: 36px; margin-bottom: 50px; }
  .insurance-hero .hero-text h1 { font-size: 34px; max-width: 100%; }
  .umbrella-placeholder { width: 100%; max-width: 300px; height: auto; aspect-ratio: auto; margin: 0 auto; }
  .umbrella-placeholder img { max-width: 100%; height: auto; }

  /* ═══ SMART CARD HERO ═══ */
  .smart-card-hero { padding: 40px 20px 60px; }
  .smart-container { flex-direction: column; text-align: center; gap: 28px; align-items: center; }
  .smart-left h1 { font-size: 26px; max-width: 100%; }
  .apply-btn { width: 100%; max-width: 300px; margin-top: 28px; font-size: 16px; }
  .smart-right { width: 100%; }
  .smart-card-image { max-width: 320px; margin: 0 auto; }
  .smart-features { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .smart-features .feature-box { align-items: center; }

  /* ═══ BANKING LANDING HERO ═══ */
  .bl-hero { padding: 40px 20px 80px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); }
  .bl-hero-inner { flex-direction: column; gap: 28px; align-items: flex-start; }
  .bl-hero-content h1 { font-size: 24px; }
  .bl-get-started-btn { display: block; text-align: center; }
  .bl-hero-card-wrap { width: 100%; max-width: 360px; height: 200px; }
  .bl-features { padding: 48px 20px; }
  .bl-features-grid { grid-template-columns: 1fr; gap: 24px; }

  /* ═══ ABOUT HERO ═══ */
  .about-hero { height: auto; min-height: 340px; padding: 60px 20px; background-position: center center; display: flex; align-items: center; }
  .hero-contents h1 { font-size: clamp(24px, 7vw, 40px); }
  .hero-contents { margin: 0 auto; max-width: 100%; text-align: center; }

  /* ═══ LEARN HERO ═══ */
  .learn-page .learn-hero { width: 100%; margin: 20px 0; grid-template-columns: 1fr; }
  .hero-left { padding: 40px 20px; text-align: center; }
  .hero-left h1 { font-size: 2.4rem; }
  .hero-left p { font-size: 1.2rem; }
  .hero-right { padding: 36px 20px; }
  .hero-right h2 { font-size: 2rem; margin-bottom: 36px; }

  /* ═══ HOW IT WORKS / LEADERSHIP HERO ═══ */
  .how-it-works-page .works-hero,
  .leadership-page .works-hero { padding: 50px 20px; }
  .how-it-works-page .hero-content h1,
  .leadership-page .hero-content h1 { font-size: clamp(30px, 8vw, 50px); }
  .how-it-works-page .hero-content p,
  .leadership-page .hero-content p { font-size: 18px; }
  .how-it-works-page .philosophy-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .how-it-works-page .money-header h2 { font-size: 34px; }
  .how-it-works-page .philosophy-box { padding: 36px 20px; }

  /* ═══ PRESS HERO ═══ */
  .press-hero { height: auto; min-height: 320px; }
  .press-overlay h1 { font-size: 34px; }
  .press-overlay p { font-size: 17px; }

  /* ═══ BANKING DASHBOARD PADDING ═══ */
  .db-main { padding: 14px 16px 24px; }
  .db-relay-section { padding: 24px 16px 16px; }
  .db-benefits-section { padding: 0 16px 24px; }
  .db-tools-section { padding: 24px 16px; }
  .db-legal-section { padding: 24px 16px; }
  .db-footer { padding: 16px; flex-direction: column; align-items: flex-start; }
  /* Dashboard grids */
  .db-product-grid { grid-template-columns: 1fr; gap: 8px; }
  .db-insight-grid { grid-template-columns: 1fr; gap: 12px; }
  .db-benefits-grid { grid-template-columns: 1fr; gap: 12px; }
  .db-tools-grid { grid-template-columns: 1fr; gap: 10px; }
  .db-legal-links-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
  /* DB benefit card image */
  .db-benefit-card { flex-wrap: wrap; }
  .db-benefit-img { width: 100%; max-width: 280px; height: 130px; margin-left: 0; margin-top: 12px; }

  /* ═══ CTA SECTION (home page) ═══ */
  .cta-section { min-height: auto; padding-top: 50px; padding-bottom: 380px; }
  .cta-content h2 { font-size: clamp(26px, 7vw, 40px); }
  .hands-image { width: 100%; min-width: 0; }

  /* ═══ LOAN PAGE ═══ */
  .loan-hero-content { flex-direction: column; gap: 36px; }
  .loan-left h1 { font-size: 28px; margin-bottom: 28px; }
  .loan-footer .footer-links a { font-size: 18px; }
  .loan-footer .footer-text p { font-size: 16px; }
  .footer-text h4 { font-size: 22px; margin: 30px 0; }
  .security-item span { font-size: 16px; }

  /* ═══ RELAY HERO ═══ */
  .relay-hero { padding: 48px 16px 56px; }
  .relay-title { font-size: 1.9rem; }

  /* ═══ MEMBER BENEFITS HERO ═══ */
  .member-hero { min-height: 300px; height: auto; }
  .member-overlay h1 { font-size: clamp(26px, 7vw, 42px); max-width: 92%; }

  /* ═══ ABOUT VALUES ═══ */
  .values-container { width: 92%; gap: 40px; }

  /* ═══ CARD IMAGES — RELAY FEATURE ═══ */
  .feature-card { grid-template-columns: 1fr; }
  .feature-image { height: 200px; }

  /* ═══ CREDIT CARD REC CARDS ═══ */
  .cc-rec-card-body { grid-template-columns: 1fr; gap: 24px; }

  /* ═══ CC HERO DECORATIONS (hide on mobile) ═══ */
  .cc-cone,
  .cc-magenta-sphere,
  .cc-blue-sphere { display: none; }

  /* ═══ GENERAL BUTTON CENTERING ═══ */
  .hero-btn,
  .business-page .business-btn,
  .member-btn,
  .want-in-content .hero-btn { margin-left: auto; margin-right: auto; }

  .rate-btn-wrap { text-align: center; }

  /* ═══ BANKING LANDING PAGE — BL-NAV ═══ */
  .bl-nav { padding: 0 16px; }

  /* ═══ SOFI LAB HERO ═══ */
  .lab-hero .member-overlay { padding: 50px 16px; min-height: auto; }
  .lab-hero-title { font-size: 2rem; }
  .lab-stats-rows { grid-template-columns: repeat(2, 1fr); }
  .lab-stats-other-row { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 12px; }
  .stat-item:last-child { border-bottom: none; }
  .hero-services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* ═══ SOFI LAB SUBNAV ═══ */
  .lab-subnav { overflow-x: auto; }
  .lab-subnav-inner { justify-content: flex-start; }
  .lab-subnav-links { gap: 8px; }

  /* ═══ ACCOUNT HERO ═══ */
  .profile-hero { padding: 30px 0; }
  .profile-details h1 { font-size: 28px; }
  .profile-details p { font-size: 18px; }

  /* ═══ ACCOUNT CONTENT ═══ */
  .account-content section { padding-right: 0; }
  .detail-row { grid-template-columns: 1fr; gap: 6px; }
  .detail-value { text-align: left; }

  /* ═══ AUTH & FORM CARDS ═══ */
  .signup-card,
  .login-card,
  .security-method-card,
  .phone-verification-card {
    max-width: 100%;
    width: 100%;
  }
  .two-factor-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ─────────────────────────────────────────────
   SMALL MOBILE (≤480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Home products — single column */
  .home-page .products-grid { grid-template-columns: 1fr; }

  /* How it works philosophy — single column */
  .how-it-works-page .philosophy-grid { grid-template-columns: 1fr; }

  /* Smart card features */
  .smart-features { gap: 28px; margin-top: 36px; }

  /* DB legal links */
  .db-legal-links-grid { grid-template-columns: 1fr; }

  /* Business financial card text */
  .business-page .financial-card h3 { font-size: 22px; }
  .business-page .financial-card p { font-size: 16px; }

  /* BL features */
  .bl-features-grid { gap: 18px; }
  .bl-hero-content h1 { font-size: 22px; }

  /* CTA section */
  .cta-section { padding-bottom: 320px; }

  /* Loan left */
  .loan-left h1 { font-size: 24px; }

  /* Lab stats */
  .lab-stats-rows,
  .lab-stats-other-row { grid-template-columns: 1fr; }

  /* Hero services grid */
  .hero-services-grid { grid-template-columns: 1fr; }

  /* DB welcome text */
  .db-welcome { font-size: 20px; }

  /* Account panel padding */
  .account-main { margin: 30px auto; gap: 30px; }
}

/* ─────────────────────────────────────────────
   NAVBAR Z-INDEX LAYERING (Learn page vs Main Nav)
───────────────────────────────────────────── */
header.navbar {
  z-index: 1005 !important;
}
.nav-mobile-menu {
  z-index: 1004 !important;
}
.nav-hamburger-btn {
  z-index: 1006 !important;
}

.learn-page .learn-header {
  z-index: 999 !important;
}
.learn-mobile-menu {
  z-index: 998 !important;
}

/* ─────────────────────────────────────────────
   LEARN MOBILE MENU ACCORDION STYLES
───────────────────────────────────────────── */
.learn-mobile-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.learn-mobile-group-title {
  padding: 14px 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.learn-mobile-group-title .arrow {
  transition: transform 0.3s ease;
  font-size: 14px;
}

.learn-mobile-group-title.open .arrow {
  transform: rotate(180deg);
}

.learn-mobile-sublinks {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.learn-mobile-sublinks.open {
  max-height: 600px;
  padding-top: 4px;
  padding-bottom: 8px;
}

.learn-mobile-sublinks a {
  display: block;
  padding: 10px 8px;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.learn-mobile-sublinks a:last-child {
  border-bottom: none !important;
}

.learn-mobile-sublinks a:hover {
  color: #00A2C7 !important;
}

/* ─────────────────────────────────────────────
   BEFORE / AFTER SLIDER TEXT CUT-OFF FIX
───────────────────────────────────────────── */
.ba-slider-wrapper {
  overflow: hidden;
  max-width: 100%;
}

.ba-demo-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 12px 16px;
  width: min(90%, 340px) !important;
  box-sizing: border-box;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  background: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ba-demo-content h4 {
  font-size: clamp(0.95rem, 3.2vw, 1.2rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

.ba-demo-content p {
  font-size: clamp(0.72rem, 2.5vw, 0.85rem) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.ba-demo-content .ba-badge {
  font-size: clamp(0.62rem, 2.2vw, 0.78rem) !important;
  padding: 4px 10px !important;
  margin-bottom: 6px !important;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   LEADERSHIP PAGE CENTERED LAST ROW RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 900px) {
  .leaders-row.centered-last-row {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 35px auto !important;
  }

  .leaders-row.centered-last-row .leader-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .leaders-row.centered-last-row {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 35px auto !important;
  }

  .leaders-row.centered-last-row .leader-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   PAGE-SPECIFIC RESPONSIVE FIXES (Round 2)
   SoFi Lab · Banking Landing · Credit Card · Loan · Relay
   Insurance · At Work · Business
   ================================================================ */

/* ── Banking Landing Footer ── */
@media (max-width: 1024px) {
  .bl-legal { padding: 32px 40px; }
  .bl-cta-bar { padding: 0 40px; }
}

@media (max-width: 768px) {
  .bl-legal { padding: 28px 20px; }
  .bl-legal p { font-size: 11px; line-height: 1.7; }
  .bl-cta-bar { padding: 0 20px; }
}

/* ── Credit Card: sticky nav on sub-screens ── */
#screen-check-offers .bl-nav,
#screen-shop-credit-cards .bl-nav,
#screen-respond-mail .bl-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}

@media (max-width: 768px) {
  .cc-screen-content { padding: 40px 20px; }
  .cc-screen-title { font-size: clamp(22px, 5vw, 30px); }
  .cc-screen-subtitle { font-size: 14px; }
  .cc-offer-card { padding: 24px 20px; }
  .cc-offer-image-placeholder { min-height: 160px; }

  .cc-mail-screen {
    padding: 40px 20px;
    min-height: calc(100vh - 64px);
    align-items: flex-start;
  }

  .cc-mail-screen-content {
    padding: 28px 20px;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.45);
  }

  .cc-mail-screen-content h2 { margin-top: 0; }

  .cc-cards-footer-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 4px;
  }

  .check-offers-action,
  .respond-mail-action {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ── SoFi Lab Products & Gear ── */
@media (max-width: 1024px) {
  .sofi-lab-page .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sofi-lab-page .product-img-box {
    height: 260px;
  }
}

@media (max-width: 640px) {
  .sofi-lab-page .products-grid {
    grid-template-columns: 1fr;
  }

  .sofi-lab-page .product-img-box {
    height: 220px;
  }

  .sofi-lab-page .product-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sofi-lab-page .product-price {
    text-align: center;
  }

  .sofi-lab-page .btn-product-quote {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
  }

  .sofi-lab-page .cat-filters {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sofi-lab-page .filter-btn {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
}

/* Prevent loan page grid rules from compressing SoFi Lab cards */
.sofi-lab-page .lab-section .products-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
}

@media (max-width: 1024px) {
  .sofi-lab-page .lab-section .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .sofi-lab-page .lab-section .products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Loan Hero ── */
@media (max-width: 1100px) {
  .loan-hero-content {
    flex-direction: column;
    gap: 40px;
    width: 92%;
  }

  .loan-right {
    width: 100%;
    max-width: 100%;
  }

  .loan-left h1 {
    font-size: 30px;
    margin-bottom: 28px;
  }

  .top-item span {
    font-size: 16px;
  }

  .did-you-know h3 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .loan-hero {
    padding: 40px 0;
  }

  .loan-left h1 {
    font-size: 26px;
  }

  .goal-box {
    max-width: 100%;
  }

  .check-rate-btn {
    width: 100%;
    max-width: 100%;
  }

  .did-you-know {
    padding: 22px;
    min-height: auto;
  }

  .loan-products {
    width: 92%;
    margin: 50px auto;
  }
}

/* ── Relay subpages: fixed nav + responsive content ── */
#screen-credit-score .bl-nav,
#screen-verify-phone .bl-nav,
#screen-vehicle-page .bl-nav,
.vehicle-page .bl-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}

@media (max-width: 768px) {
  .relay-title { font-size: 1.6rem; margin-bottom: 28px; }
  .networth-card h2 { font-size: 1.4rem; }
  .networth-heading { font-size: 1.4rem; margin-bottom: 20px; }
  .feature-content h3 { font-size: 1.25rem; }
  .feature-content p { font-size: 0.95rem; margin-bottom: 16px; }
  .mini-feature a { font-size: 1.1rem; }
  .account-item { padding: 16px 0; }
  .account-item span { font-size: 1rem; }
  .account-item button { font-size: 1.5rem; }

  .relay-footer-container .footer-links {
    gap: 16px 24px;
  }

  .relay-footer-container .footer-links a {
    font-size: 1rem;
  }

  .relay-footer-container .footer-description {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  #screen-credit-score .bl-flow-content h2 {
    font-size: 1.5rem;
  }

  #screen-credit-score .bl-flow-container {
    padding: 40px 20px 60px;
  }

  .verify-content h1 {
    font-size: 1.5rem !important;
  }

  .verify-content {
    padding: 32px 20px !important;
  }

  .intro {
    font-size: 0.95rem !important;
  }

  .phone-input {
    height: 54px !important;
    font-size: 16px !important;
    max-width: 100%;
  }

  .next-btn {
    height: 54px !important;
    font-size: 16px !important;
    max-width: 100%;
  }

  .vehicle-container {
    padding: 40px 20px;
    box-sizing: border-box;
  }

  .vehicle-container h1 {
    font-size: 1.5rem !important;
  }

  .vehicle-container select {
    height: 54px !important;
    font-size: 16px !important;
    max-width: 100%;
  }

  .button-area button {
    height: 54px !important;
    font-size: 16px !important;
  }
}

/* ── Insurance page ── */
@media (max-width: 768px) {
  .insurance-hero .hero-text h1 {
    font-size: clamp(28px, 7vw, 36px);
  }

  .insurance-options h2 {
    font-size: clamp(24px, 5vw, 30px);
  }

  .option-card h3 {
    font-size: clamp(18px, 4vw, 24px);
  }

  .option-image {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
  }

  .option-card {
    height: auto;
    min-height: 140px;
    padding: 20px 16px;
  }

  .providers-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .resources-container h2 {
    font-size: clamp(28px, 6vw, 40px);
  }

  .insurance-resources {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .insurance-hero {
    padding: 40px 16px;
  }

  .insurance-hero .hero-container {
    margin-bottom: 40px;
    gap: 24px;
  }

  .filter-buttons {
    gap: 10px;
  }

  .filter-btn {
    font-size: 0.85rem;
    padding: 10px 14px;
  }
}

/* ── At Work form fields on mobile ── */
@media (max-width: 768px) {
  .benefits-section {
    padding: 50px 20px;
  }

  .get-started {
    max-width: 100%;
  }

  .title-row h2 {
    font-size: 26px;
  }

  .start-text {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 28px;
  }

  .top-inputs {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .floating-input {
    width: 100%;
    min-width: 0;
  }

  .floating-input input,
  .floating-input textarea {
    width: 100%;
    font-size: 16px;
    padding: 22px 14px 8px;
    box-sizing: border-box;
  }

  .floating-input input {
    height: 56px;
  }

  .floating-input textarea {
    height: 120px;
    min-height: 120px;
  }

  .floating-input label {
    left: 14px;
    top: 18px;
    font-size: 14px;
    max-width: calc(100% - 28px);
    white-space: normal;
    line-height: 1.3;
  }

  .floating-input input:focus ~ label,
  .floating-input input:not(:placeholder-shown) ~ label,
  .floating-input textarea:focus ~ label,
  .floating-input textarea:not(:placeholder-shown) ~ label {
    top: 6px;
    font-size: 11px;
  }

  .form-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .form-buttons button {
    width: 100%;
    max-width: 100%;
    height: 54px;
    font-size: 17px;
  }

  .form-buttons a {
    text-align: center;
    font-size: 16px;
  }

  .atwork-footer {
    padding: 24px 20px;
  }

  .atwork-footer .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ── Business page hero & resources ── */
@media (max-width: 1024px) {
  .business-page .business-hero {
    flex-direction: column;
    min-height: auto;
  }

  .business-page .business-left {
    width: 100%;
    padding: 40px 40px;
  }

  .business-page .business-right {
    width: 100%;
    height: 280px;
  }

  .business-page .business-left h1 {
    font-size: clamp(28px, 5vw, 38px);
    margin-bottom: 28px;
  }

  .business-page .financial-products,
  .business-page .grow-business {
    padding: 60px 40px;
  }

  .business-page .resources {
    padding: 60px 5%;
  }

  .business-page .resources-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }

  .business-page .resources-header h2 {
    font-size: clamp(28px, 5vw, 38px);
  }

  .business-page .resources-header a {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .business-page .business-left {
    padding: 36px 20px;
    text-align: center;
    align-items: center;
  }

  .business-page .business-right {
    height: 220px;
  }

  .business-page .business-left h1 {
    font-size: 26px;
  }

  .business-page .financial-products h2,
  .business-page .grow-business > h2 {
    font-size: 26px;
  }

  .business-page .financial-products,
  .business-page .grow-business,
  .business-page .resources {
    padding: 48px 20px;
  }
}

/* ================================= */
/* PHONE CONNECTION MODAL */
/* ================================= */

.phone-modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}

.phone-modal-overlay.active{
    opacity:1;
    visibility:visible;
}

.phone-modal-card{
    background:#ffffff;
    border-radius:24px;
    padding:40px 36px;
    max-width:480px;
    width:90%;
    position:relative;
    transform:translateY(20px);
    transition:transform 0.3s ease;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
}

.phone-modal-overlay.active .phone-modal-card{
    transform:translateY(0);
}

.phone-modal-close{
    position:absolute;
    top:20px;
    right:20px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f5f5f5;
    border:none;
    color:#666;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s, color 0.2s;
}

.phone-modal-close:hover{
    background:#e0e0e0;
    color:#333;
}

.phone-modal-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(135deg, #00A2C7, #007a8c);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 24px;
    color:#ffffff;
    font-size:36px;
}

.phone-modal-title{
    font-size:28px;
    font-weight:700;
    color:#1A145F;
    text-align:center;
    margin-bottom:12px;
}

.phone-modal-subtitle{
    font-size:16px;
    line-height:1.6;
    color:#555;
    text-align:center;
    margin-bottom:28px;
}

.phone-modal-benefits{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:32px;
}

.phone-benefit-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    color:#333;
}

.phone-benefit-item i{
    color:#00A2C7;
    font-size:18px;
}

.phone-modal-primary-btn{
    width:100%;
    height:54px;
    border:none;
    border-radius:12px;
    background:#00A2C7;
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    margin-bottom:12px;
    transition:background 0.2s;
}

.phone-modal-primary-btn:hover{
    background:#0090b3;
}

.phone-modal-secondary-btn{
    width:100%;
    height:50px;
    border:2px solid #e0e0e0;
    border-radius:12px;
    background:#ffffff;
    color:#555;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:16px;
    transition:border-color 0.2s, color 0.2s;
}

.phone-modal-secondary-btn:hover{
    border-color:#00A2C7;
    color:#00A2C7;
}

.phone-modal-note{
    text-align:center;
    font-size:13px;
    color:#888;
    line-height:1.5;
}

.phone-modal-input-group{
    margin-bottom:24px;
}

.phone-modal-input-group label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#333;
    margin-bottom:8px;
}

.phone-modal-input{
    width:100%;
    padding:12px 16px;
    border:2px solid #e0e0e0;
    border-radius:8px;
    font-size:15px;
    color:#333;
    font-family:'Nunito', sans-serif;
    transition:border-color 0.2s;
    box-sizing:border-box;
}

.phone-modal-input:focus{
    outline:none;
    border-color:#00A2C7;
}

/* Phone Modal Responsive Styles */
@media(max-width:768px){
    .phone-modal-card{
        padding:32px 24px;
        max-width:400px;
    }

    .phone-modal-title{
        font-size:24px;
    }

    .phone-modal-subtitle{
        font-size:15px;
    }

    .phone-modal-icon{
        width:70px;
        height:70px;
        font-size:32px;
    }
}

@media(max-width:480px){
    .phone-modal-card{
        padding:28px 20px;
        max-width:340px;
    }

    .phone-modal-title{
        font-size:22px;
    }

    .phone-modal-subtitle{
        font-size:14px;
    }

    .phone-modal-primary-btn,
    .phone-modal-secondary-btn{
        height:50px;
        font-size:16px;
    }
}

/* ================================= */
/* PROFILE IMAGE LIGHTBOX */
/* ================================= */

.lightbox-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;
    max-width:90%;
    max-height:90%;
}

.lightbox-content img{
    max-width:100%;
    max-height:90vh;
    object-fit:contain;
    border-radius:8px;
}

.lightbox-close{
    position:absolute;
    top:-40px;
    right:0;
    background:none;
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    padding:8px;
    transition:opacity 0.2s;
}

.lightbox-close:hover{
    opacity:0.7;
}

/* ACCOUNT EDIT MODAL */
/* ================================= */

.edit-modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}

.edit-modal-overlay.active{
    opacity:1;
    visibility:visible;
}

.edit-modal-card{
    background:#ffffff;
    border-radius:16px;
    max-width:500px;
    width:90%;
    max-height:80vh;
    overflow:hidden;
    position:relative;
    transform:translateY(20px);
    transition:transform 0.3s ease;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
    display:flex;
    flex-direction:column;
}

.edit-modal-overlay.active .edit-modal-card{
    transform:translateY(0);
}

.edit-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    border-bottom:1px solid #e0e0e0;
    flex-shrink:0;
}

.edit-modal-header h3{
    font-size:22px;
    font-weight:700;
    color:#1A145F;
    margin:0;
}

.edit-modal-close{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f5f5f5;
    border:none;
    color:#666;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s, color 0.2s;
}

.edit-modal-close:hover{
    background:#e0e0e0;
    color:#333;
}

.edit-modal-body{
    padding:28px;
    overflow-y:auto;
    flex:1;
}

.edit-form-group{
    margin-bottom:20px;
}

.edit-form-group label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#333;
    margin-bottom:8px;
}

.edit-form-group input,
.edit-form-group select,
.edit-form-group textarea{
    width:100%;
    padding:12px 16px;
    border:2px solid #e0e0e0;
    border-radius:8px;
    font-size:15px;
    color:#333;
    font-family:'Nunito', sans-serif;
    transition:border-color 0.2s;
    box-sizing:border-box;
}

.edit-form-group input:focus,
.edit-form-group select:focus,
.edit-form-group textarea:focus{
    outline:none;
    border-color:#00A2C7;
}

.edit-form-group textarea{
    resize:vertical;
    min-height:80px;
}

.edit-modal-footer{
    display:flex;
    gap:12px;
    padding:20px 28px;
    border-top:1px solid #e0e0e0;
    flex-shrink:0;
}

.edit-modal-cancel{
    flex:1;
    height:48px;
    border:2px solid #e0e0e0;
    border-radius:8px;
    background:#ffffff;
    color:#555;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:border-color 0.2s, color 0.2s;
}

.edit-modal-cancel:hover{
    border-color:#00A2C7;
    color:#00A2C7;
}

.edit-modal-save{
    flex:1;
    height:48px;
    border:none;
    border-radius:8px;
    background:#00A2C7;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:background 0.2s;
}

.edit-modal-save:hover{
    background:#0090b3;
}

/* Edit Modal Responsive Styles */
@media(max-width:768px){
    .edit-modal-card{
        max-width:450px;
    }

    .edit-modal-header,
    .edit-modal-body,
    .edit-modal-footer{
        padding:20px 24px;
    }

    .edit-modal-header h3{
        font-size:20px;
    }
}

@media(max-width:480px){
    .edit-modal-card{
        max-width:340px;
    }

    .edit-modal-header,
    .edit-modal-body,
    .edit-modal-footer{
        padding:18px 20px;
    }

    .edit-modal-header h3{
        font-size:18px;
    }

    .edit-modal-cancel,
    .edit-modal-save{
        height:44px;
        font-size:15px;
    }
}

/* ================================= */
/* TOGGLE SWITCH STYLES */
/* ================================= */

.toggle-switch{
    position:relative;
    width:50px;
    height:28px;
}

.toggle-switch input{
    opacity:0;
    width:0;
    height:0;
}

.toggle-label{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#ccc;
    transition:0.3s;
    border-radius:28px;
}

.toggle-label:before{
    position:absolute;
    content:"";
    height:22px;
    width:22px;
    left:3px;
    bottom:3px;
    background-color:white;
    transition:0.3s;
    border-radius:50%;
}

.toggle-switch input:checked + .toggle-label{
    background-color:#00A2C7;
}

.toggle-switch input:checked + .toggle-label:before{
    transform:translateX(22px);
}

/* ── Smart card benefits tablet ── */
@media (max-width: 992px) {
  .smart-card-page .benefit-card {
    gap: 30px;
    padding: 24px;
  }

  .smart-card-page .benefit-text h3 {
    font-size: 1.5rem;
  }

  .smart-card-page .benefit-image {
    width: 180px;
  }
}

/* ============================================================
   ADMIN PAGE STYLES
   ============================================================ */
.admin-page {
    background: #f5f6f8;
    min-height: 100vh;
}

.admin-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.admin-logo a img {
    height: 40px;
}

.admin-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a3a5c;
}

.admin-view-btn {
    background: #1a3a5c;
    color: #fff;
    padding: 8.4px 19px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.admin-view-btn:hover {
    background: #2d5a87;
}

.admin-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-logout-btn {
    background: #dc3545;
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.admin-logout-btn:hover {
    background: #c82333;
}

.admin-notification-btn {
    background: #1a3a5c;
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    position: relative;
}

.admin-notification-btn:hover {
    background: #2d5a87;
}

.notification-badge {
    background: #dc3545;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.notification-badge.hidden {
    display: none;
}

.admin-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.admin-section {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a3a5c;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-section h2 i {
    color: #1a3a5c;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #1a3a5c;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Nunito', sans-serif;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1a3a5c;
}

.form-group textarea {
    resize: vertical;
}

.admin-submit-btn {
    background: #1a3a5c;
    color: #fff;
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.admin-submit-btn:hover {
    background: #2d5a87;
}

.admin-products-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 600px;
    overflow-y: auto;
}

.admin-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.admin-product-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-product-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.admin-product-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f6f8;
}

.admin-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-product-details {
    flex: 1;
}

.admin-product-details h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a3a5c;
    margin-bottom: 4px;
}

.admin-product-category {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
}

.admin-product-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a3a5c;
}

.admin-delete-btn {
    background: #dc3545;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s ease;
}

.admin-delete-btn:hover {
    background: #c82333;
}

.admin-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 0.95rem;
}

/* Admin Modal Styles */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.admin-modal-overlay.active {
    display: flex;
}

.admin-modal-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.admin-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0;
}

.admin-modal-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.admin-modal-close:hover {
    color: #dc3545;
}

.admin-modal-body {
    padding: 24px;
}

.admin-modal-body p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.admin-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    justify-content: flex-end;
}

.admin-modal-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
}

.admin-modal-cancel {
    background: #f5f6f8;
    color: #666;
}

.admin-modal-cancel:hover {
    background: #e0e0e0;
}

.admin-modal-confirm {
    background: #dc3545;
    color: #fff;
}

.admin-modal-confirm:hover {
    background: #c82333;
}

.admin-auth-card {
    max-width: 400px;
}

.auth-error {
    text-align: center;
}

.admin-notifications-card {
    max-width: 600px;
}

.notifications-list {
    max-height: 500px;
    overflow-y: auto;
}

.notification-item {
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f9f9f9;
}

.notification-item:last-child {
    margin-bottom: 0;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.notification-type {
    font-weight: 700;
    color: #1a3a5c;
    font-size: 0.9rem;
}

.notification-timestamp {
    font-size: 0.75rem;
    color: #666;
}

.notification-product {
    font-weight: 600;
    color: #00A2C7;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.notification-data {
    font-size: 0.85rem;
    color: #666;
}

.notification-data-row {
    display: flex;
    margin-bottom: 4px;
}

.notification-data-label {
    font-weight: 600;
    color: #333;
    margin-right: 8px;
    min-width: 100px;
}

.notification-data-value {
    color: #666;
}

.notification-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .admin-content {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .admin-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .admin-product-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .admin-delete-btn {
        width: 100%;
        justify-content: center;
    }
}