/* ========================
   RESET & BASE
   ======================== */

html{scroll-behavior:smooth;}
body{margin:0;font-family:'Red Hat Display',system-ui,sans-serif;color:#1a202c;background:#fff;-webkit-font-smoothing:antialiased;}

/* ========================
   DESIGN TOKENS
   ======================== */


/* ========================
   LAYOUT
   ======================== */
.wrap{max-width:1140px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.wrap{padding:0 24px;}}

/* ========================
   GLOBAL COMPONENTS
   ======================== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;padding:14px 28px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:all .2s ease;letter-spacing:-.01em;}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(161,30,92,.35);}
.btn--primary:hover{background:var(--primary-dark);box-shadow:0 6px 20px rgba(161,30,92,.45);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn--ghost-white{background:transparent;color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.22);}
.btn--ghost-white:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.07);}

.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:100px;}
.tag--coral{background:#faece7;color:#7a2a10;border:1px solid #f0c4b2;}
.tag--purple{background:#eeedfe;color:#3c3489;border:1px solid #c8c5f8;}
.tag--teal{background:var(--teal-light);color:var(--teal);border:1px solid var(--teal-mid);}
.tag--pink{background:#fbeaf0;color:#72243e;border:1px solid #f0b8cc;}
.tag--amber{background:#faeeda;color:#633806;border:1px solid #f0d0a0;}
.tag--gray{background:var(--surface);color:var(--muted);border:1px solid var(--border);}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:16px;}

.h2{font-size:clamp(28px,3.6vw,48px);font-weight:800;line-height:1.1;color:var(--navy);margin:0 0 18px;letter-spacing:-.03em;}
.h2 em{font-style:normal;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.lead{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:var(--muted);margin:0;}

.divider{border:none;margin:0;}

/* ========================
   NAV
   ======================== */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.nav__inner{max-width:1140px;margin:0 auto;padding:0 48px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:32px;}
.nav__logo{display:inline-flex;align-items:center;text-decoration:none;line-height:1;}
.nav__logo svg{height:28px;width:auto;display:block;}
.nav__links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
.nav__links a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;}
.nav__links a:hover{color:var(--text);}
@media(max-width:900px){.nav__links{display:none;}.nav__inner{padding:0 24px;}}

/* ========================
   SUB-NAV
   ======================== */
.subnav{background:var(--surface);border-bottom:1px solid var(--border);}
.subnav__inner{max-width:1140px;margin:0 auto;padding:0 48px;height:52px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
@media(max-width:900px){.subnav__inner{padding:12px 24px;height:auto;}}
.subnav__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light);margin-right:8px;white-space:nowrap;}
.subnav__pill{font-size:12.5px;font-weight:600;padding:6px 16px;border-radius:100px;border:1.5px solid var(--border);color:var(--muted);background:#fff;text-decoration:none;transition:all .18s;font-family:inherit;white-space:nowrap;}
.subnav__pill:hover{border-color:var(--primary);color:var(--primary);}
@media(max-width:900px){.subnav__pill--mobile-hide{display:none;}}

/* ========================
   HERO — matches pages/index.html pattern
   ======================== */
.hero{background:linear-gradient(135deg,#a11e5c 0%,#BA535F 100%);position:relative;overflow:hidden;}
.hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 5% 100%,rgba(0,0,0,.18) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 95% 0%,rgba(255,255,255,.08) 0%,transparent 55%);}
.hero__grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,0,0,.1) 1px,transparent 1px);background-size:30px 30px;}
.hero__inner{max-width:1140px;margin:0 auto;padding:108px 48px 100px;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,580px) 1fr;align-items:center;gap:0;}
.hero__content{position:relative;z-index:2;}
.hero__visual{display:flex;justify-content:flex-end;align-items:center;margin-right:-48px;pointer-events:none;}
.hero__visual img{width:80%;mix-blend-mode:screen;display:block;user-select:none;filter:drop-shadow(0 32px 64px rgba(0,0,0,.2));}
@media(max-width:960px){.hero__visual{display:none;}.hero__inner{grid-template-columns:1fr;}}
@media(max-width:768px){.hero__inner{padding:88px 24px 72px;}}
@media(max-width:390px){
  .subnav__inner{
    padding:10px 16px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .subnav__inner::-webkit-scrollbar{display:none;}
  .subnav__label{display:none;}
  .subnav__pill{flex:0 0 auto;}
  .hero__inner{padding:56px 20px 40px;}
  .hero__tag{margin-bottom:18px;}
  .hero__title{font-size:34px;line-height:1.04;margin-bottom:18px;}
  .hero__sub{font-size:14px;line-height:1.6;margin-bottom:20px;}
  .hero__cta-row{margin-bottom:16px;}
  .hero__hint{display:block;font-size:12px;line-height:1.4;margin-top:0;}
}
@media(max-height:700px){
  .hero__inner{
    padding:40px 20px 14px;
  }
  .hero__tag{
    margin-top:40px;
  }
  .hero__title{
    font-size:27px;
    line-height:1.01;
  }
  .hero__sub{
    font-size:12px;
    line-height:1.38;
    margin-bottom: 5px;
  }
  .hero__cta-row{
    margin-top: -35px;
    gap:10px;
  }
  .btn--white,
  .btn--outline-white{
    padding:12px 18px;
    font-size:13px;
  }
  .hero__hint{
    display:block;
    font-size:10px;
    line-height:1.25;
    margin-top:0;
  }
}
.hero__tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:30px;}
.hero__tag-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.9);flex-shrink:0;}
.hero__title{font-size:clamp(50px,6.8vw,84px);font-weight:800;line-height:1.03;letter-spacing:-.045em;color:#fff;margin:0 0 28px;max-width:800px;}
.hero__title em{font-style:normal;color:rgba(255,255,255,.88);background:none;-webkit-text-fill-color:unset;}
.hero__sub{font-size:clamp(15px,1.65vw,18px);line-height:1.76;color:rgba(255,255,255,.78);max-width:560px;margin:0 0 48px;}
.hero__cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.hero__hint{font-size:13px;color:rgba(255,255,255,.52);font-style:italic;}
.btn--white{background:#fff;color:var(--primary);box-shadow:0 4px 18px rgba(0,0,0,.16);font-size:15px;padding:15px 30px;}
.btn--white:hover{background:#f9f0f5;transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,0,0,.2);}
.btn--outline-white{background:transparent;color:rgba(255,255,255,.88);border:1.5px solid rgba(255,255,255,.38);font-size:15px;padding:15px 30px;}
.btn--outline-white:hover{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.1);}

/* ========================
   SECTION LABEL
   ======================== */
.section-label{
  display:inline-flex;
  align-items:center;
  font-family:'Red Hat Display',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--secondary);
  border:1.5px solid rgba(186,83,95,.38);
  border-radius:8px;
  padding:7px 20px;
  margin-bottom:24px;
  text-transform:none;
  background:transparent;
}

/* ========================
   S1 — CORE USE CASES
   ======================== */
.s1{padding:var(--pad) 0;}
.s1__hd{margin-bottom:40px;}
.s1__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.s1__grid--2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.s1__grid{grid-template-columns:1fr 1fr;}.s1__grid--2{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.s1__grid{grid-template-columns:1fr;}.s1__grid--2{grid-template-columns:1fr;}}

/* Card shell — no padding, image bleeds to edges */
.s1__card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
  box-shadow:var(--sh-sm);
}
.s1__card:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);}

/* Image zone */
.s1__card-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  flex-shrink:0;
}

/* Content zone */
.s1__card-body{
  padding:28px 28px 32px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Category heading — large, dark */
.s1__card-title{
  font-size:clamp(24px,2.2vw,32px);
  font-weight:800;
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.1;
  letter-spacing:-.03em;
}

/* Tagline — rose accent */
.s1__card-tagline{
  font-size:clamp(14px,1.3vw,17px);
  font-weight:600;
  color:var(--secondary);
  margin:0 0 18px;
  line-height:1.35;
  letter-spacing:-.01em;
}

/* Body copy */
.s1__card-text{
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 20px;
  flex:1;
}

/* Employer callout — keep as subtle inset */
.s1__card-employer{
  background:var(--surface);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  padding:12px 16px;
  margin-bottom:16px;
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}
.s1__card-employer strong{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:6px;
}

/* Relevant for */
.s1__proof{
  font-size:13px;
  color:var(--teal);
  line-height:1.6;
  margin:0 0 24px;
}
.s1__proof strong{
  display:block;
  font-weight:700;
  margin-bottom:2px;
}

/* CTA button */
.s1__card-btn{display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  padding:13px 28px;
  border-radius:8px;
  background:var(--secondary);
  color:#fff;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
  align-self:flex-start;
  margin-top:auto;
  box-shadow:0 4px 14px rgba(186,83,95,.28);
  letter-spacing:-.01em;}
.s1__card-btn:hover{background:var(--primary);box-shadow:0 6px 20px rgba(161,30,92,.35);transform:translateY(-1px);}

/* ========================
   HOT BANNER — STABLECOIN
   ======================== */
.hot-banner{
  margin-top:32px;
  border-radius:var(--r-xl);
  display:grid;
  grid-template-columns:1fr 420px;
  min-height:360px;
  position:relative;
  /* Keep the background on ::before so the image can extend beyond the edges */
}
.hot-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:#dff4f3;
  border-radius:var(--r-xl);
  pointer-events:none;
  z-index:0;
}
.hot-banner__body{
  padding:52px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}
.hot-badge{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  font-weight:600;
  color:var(--teal);
  border:1.5px solid rgba(1,182,177,.45);
  border-radius:8px;
  padding:6px 16px;
  margin-bottom:24px;
  align-self:flex-start;
  background:transparent;
  letter-spacing:-.01em;
}
.hot-banner__title{
  font-size:clamp(24px,2.8vw,36px);
  font-weight:800;
  color:var(--navy);
  margin:0 0 6px;
  letter-spacing:-.03em;
  line-height:1.1;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:14px;
}
.hot-banner__live{
  font-size:clamp(18px,2vw,26px);
  font-weight:700;
  color:var(--primary);
  letter-spacing:-.02em;
}
.hot-banner__sub{
  font-size:16px;
  font-weight:600;
  color:var(--navy);
  margin:0 0 20px;
  opacity:.75;
}
.hot-banner__text{
  font-size:14px;
  line-height:1.7;
  color:#4a5568;
  margin:0 0 32px;
  max-width:480px;
}
.hot-banner__btn{display:inline-flex;
  align-items:center;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  padding:12px 26px;
  border-radius:8px;
  background:var(--secondary);
  color:#fff;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
  align-self:flex-start;
  box-shadow:0 4px 14px rgba(186,83,95,.3);}
.hot-banner__btn:hover{background:var(--primary);box-shadow:0 6px 20px rgba(161,30,92,.35);transform:translateY(-1px);}
.hot-banner__img{
  position:relative;
  overflow:visible;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hot-banner__img img{
  width:130%;
  max-width:600px;
  position:absolute;
  bottom:-20px;
  right:-40px;
  display:block;
  filter:drop-shadow(0 24px 48px rgba(1,182,177,.18));
}
@media(max-width:900px){
  .hot-banner{grid-template-columns:1fr;}
  .hot-banner__img{display:none;}
  .hot-banner__body{padding:36px 32px;}
}
@media(max-width:600px){
  .hot-banner__body{padding:28px 24px;}
}

/* ========================
   S2 — FAN & COMMUNITY
   ======================== */
.s2{background:var(--surface);padding:var(--pad) 0;}
.s2__hd{margin-bottom:40px;}
.s2__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:700px){.s2__grid{grid-template-columns:1fr;}}
.s2__card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;box-shadow:var(--sh-sm);}
.s2__card:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);}
.s2__card .tag{margin-bottom:16px;align-self:flex-start;}
.s2__card-title{font-size:18px;font-weight:700;color:var(--navy);margin:0 0 14px;line-height:1.25;letter-spacing:-.02em;}
.s2__card-text{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 14px;}
.s2__card-text:last-child{margin-bottom:0;}
.s2__proof{font-size:12px;color:var(--light);margin-top:12px;line-height:1.5;}

/* ========================
   S3 — WHY MBANQ (ANCHOR)
   ======================== */
.s3{padding:var(--pad) 0;}
.s3__panel{
  background:linear-gradient(135deg,#a11e5c 0%,#BA535F 100%);
  border-radius:var(--r-xl);
  overflow:hidden;
  position:relative;
}
.s3__panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 50% 70% at 95% 50%,rgba(0,0,0,.15) 0%,transparent 60%),
             radial-gradient(ellipse 40% 50% at 5% 100%,rgba(0,0,0,.12) 0%,transparent 55%);
  pointer-events:none;
}
.s3__panel-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  align-items:center;
  gap:0;
  position:relative;
  z-index:1;
}
.s3__panel-body{
  padding:64px 56px 52px;
}
.s3__panel-title{
  font-size:clamp(24px,2.8vw,36px);
  font-weight:800;
  color:#fff;
  margin:0 0 28px;
  line-height:1.12;
  letter-spacing:-.03em;
}
.s3__panel-text{
  font-size:15px;
  line-height:1.75;
  color:rgba(255,255,255,.72);
  margin:0 0 16px;
}
.s3__panel-text:last-of-type{margin-bottom:0;}
.s3__panel-img{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
}
.s3__panel-img img{
  width:100%;
  max-width:280px;
  height:auto;
  display:block;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.25));
}
.s3__cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:0 56px 52px;
  position:relative;
  z-index:1;
}
.s3__cta-row .btn{
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(4px);
  font-size:14px;
  padding:12px 24px;
}
.s3__cta-row .btn:first-child{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.5);
  font-weight:700;
}
.s3__cta-row .btn:hover{
  background:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.65);
  color:#fff;
  transform:translateY(-1px);
}
@media(max-width:900px){
  .s3__panel-grid{grid-template-columns:1fr;}
  .s3__panel-img{display:none;}
  .s3__panel-body{padding:48px 36px 36px;}
  .s3__cta-row{padding:0 36px 48px;}
}
@media(max-width:600px){
  .s3__panel-body{padding:36px 24px 28px;}
  .s3__cta-row{padding:0 24px 36px;}
}

/* ========================
   S4 — PRODUCTS GRID
   ======================== */
.s4{background:var(--surface);padding:var(--pad) 0;}
.s4__hd{margin-bottom:32px;}
.s4__intro{max-width:560px;font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 28px;}
.s4__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.s4__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.s4__grid{grid-template-columns:1fr;}}
.s4__card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px 24px;transition:box-shadow .2s,transform .2s;box-shadow:var(--sh-sm);}
.s4__card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.s4__card h4{font-size:14px;font-weight:700;color:var(--navy);margin:0 0 6px;letter-spacing:-.01em;}
.s4__card p{font-size:13px;color:var(--muted);margin:0 0 10px;line-height:1.55;}
.s4__card-link{font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;display:block;}
.s4__card-link:hover{color:var(--primary-dark);}

/* ========================
   CLOSING CTA
   ======================== */
.closing{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 100%);padding:0;position:relative;overflow:hidden;}
.closing::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 85% 50%,rgba(161,30,92,.28) 0%,transparent 70%);pointer-events:none;}
.closing__inner{max-width:1140px;margin:0 auto;padding:80px 48px 96px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:1;}
@media(max-width:900px){.closing__inner{padding:56px 24px 72px;flex-direction:column;align-items:flex-start;}}
.closing__text h2{font-size:clamp(22px,2.5vw,32px);font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:-.025em;}
.closing__text p{font-size:15px;color:rgba(255,255,255,.52);line-height:1.65;margin:0;max-width:440px;}
.closing__note{font-size:13px;color:rgba(255,255,255,.38);margin-top:16px;}
.closing__actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.closing .btn--primary{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);box-shadow:0 4px 20px rgba(161,30,92,.4);font-size:15px;padding:15px 32px;}