/* ================================
   ALPHA BANK — HEADER ONLY
   Matching dashboard theme colors
   ================================ */

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#F5F7FB;
  color:#0F172A;
}

/* layout container */
.ab-container{
  width: min(1150px, 92%);
  margin: 0 auto;
}

/* header */
.ab-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid #E6EBF2;
  backdrop-filter: blur(10px);
}

.ab-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;

  /* entrance animation */
  animation: abFadeDown .55s ease both;
}

@keyframes abFadeDown{
  from{ opacity:0; transform: translateY(-10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* brand */
.ab-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}

.ab-brand__badge{
  width:46px;
  height:46px;
  border-radius:14px;
  background: linear-gradient(180deg,#0B1220,#111B33);
  box-shadow: 0px 16px 30px rgba(2,6,23,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  /* subtle floating animation */
  animation: abFloat 3.2s ease-in-out infinite;
}
@keyframes abFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

.ab-brand__badge img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

.ab-brand__name{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
}
.ab-brand__tag{
  font-size:12px;
  color:#64748B;
  margin-top:3px;
}

/* desktop nav */
.ab-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ab-nav__link{
  text-decoration:none;
  color:#64748B;
  font-weight:650;
  padding:8px 10px;
  border-radius:12px;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.ab-nav__link:hover{
  background:#EEF2FF;
  color:#0F172A;
  transform: translateY(-1px);
}
.ab-nav__link--active{
  background: rgba(37,99,235,.12);
  color:#0F172A;
  border: 1px solid rgba(37,99,235,.20);
}

/* actions + buttons */
.ab-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}

.ab-btn--primary{
  background:#2563EB;
  color:#fff;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}
.ab-btn--primary:hover{ opacity:.93; transform: translateY(-1px); }

.ab-btn--ghost{
  background:#fff;
  color:#0F172A;
  border-color:#E6EBF2;
}
.ab-btn--ghost:hover{ border-color:#D7DEEA; transform: translateY(-1px); }

/* mobile menu button */
.ab-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#fff;
  border:1px solid #E6EBF2;
  box-shadow: 0px 10px 18px rgba(15,23,42,.06);
  cursor:pointer;
  position:relative;
}
.ab-menu-btn span{
  width:18px;
  height:2px;
  background:#0F172A;
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.ab-menu-btn span::before,
.ab-menu-btn span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#0F172A;
}
.ab-menu-btn span::before{ top:-6px; }
.ab-menu-btn span::after{ top:6px; }

/* mobile drawer */
.ab-drawer[hidden]{ display:none; }
.ab-drawer{
  position:fixed;
  inset:0;
  z-index:80;
}
.ab-drawer__overlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
  animation: abFade .18s ease both;
}
@keyframes abFade{ from{opacity:0} to{opacity:1} }

.ab-drawer__panel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width: min(360px, 88vw);
  background:#fff;
  border-left:1px solid #E6EBF2;
  box-shadow: -18px 0 40px rgba(2,6,23,.25);
  padding:18px;

  transform: translateX(12px);
  animation: abSlideIn .22s ease forwards;
}
@keyframes abSlideIn{
  to{ transform: translateX(0); }
}

.ab-drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.ab-drawer__close{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid #E6EBF2;
  background:#fff;
  cursor:pointer;
}

.ab-drawer__nav{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.ab-drawer__nav a{
  padding:12px 12px;
  border:1px solid #E6EBF2;
  border-radius:14px;
  background:#F8FAFF;
  color:#0F172A;
  font-weight:750;
  text-decoration:none;
  transition: background .2s ease, transform .15s ease;
}
.ab-drawer__nav a:hover{
  background:#EEF2FF;
  transform: translateY(-1px);
}

.ab-drawer__actions{
  display:grid;
  gap:10px;
  margin-top:14px;
}

/* responsive */
@media (max-width: 980px){
  .ab-nav{ display:none; }
  .ab-menu-btn{ display:inline-flex; }
}

/* ================================
   HERO SECTION (Section 2)
   ================================ */

.ab-hero{
  padding: 42px 0 18px;
}

.ab-hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

/* Left text */
.ab-hero__text{
  padding-top: 8px;
  animation: abHeroIn .65s ease both;
}

@keyframes abHeroIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.ab-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid #E6EBF2;
  box-shadow: 0px 10px 18px rgba(15,23,42,.05);
  color:#64748B;
  font-weight:750;
  font-size:13px;
}

.ab-hero__badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: #06B6D4;
  box-shadow: 0 0 0 6px rgba(6,182,212,.12);
}

.ab-hero__title{
  margin: 14px 0 10px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.6px;
}

.ab-hero__title .accent{
  background: linear-gradient(90deg,#2563EB,#06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ab-hero__lead{
  margin: 0;
  color:#64748B;
  font-size: 16px;
  max-width: 62ch;
}

/* CTA buttons already use .ab-btn styles from header */
.ab-hero__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* Stats */
.ab-hero__stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.stat{
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #E6EBF2;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.stat__num{
  font-weight: 900;
  color:#0F172A;
}
.stat__label{
  color:#64748B;
  font-size: 12px;
  margin-top: 3px;
}

/* Right “app card” */
.ab-hero__cardWrap{
  position: relative;
  display:flex;
  align-items: stretch;
  justify-content: center;
  animation: abCardIn .75s ease both;
}

@keyframes abCardIn{
  from{ opacity:0; transform: translateY(12px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.ab-hero__card{
  width:100%;
  max-width: 420px;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 20px;
  box-shadow: 0px 18px 40px rgba(2,6,23,.12);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.ab-hero__cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mini-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.mini-badge{
  width:40px;
  height:40px;
  border-radius: 14px;
  background: linear-gradient(180deg,#0B1220,#111B33);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0px 16px 30px rgba(2,6,23,.20);
}

.mini-badge img{
  width:24px;
  height:24px;
  object-fit:contain;
}

.mini-title{ font-weight: 900; line-height: 1; }
.mini-sub{ font-size:12px; color:#64748B; margin-top: 2px; }

.chip{
  width:48px;
  height:34px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(37,99,235,.20), rgba(6,182,212,.22));
  border:1px solid rgba(6,182,212,.25);
}

/* Balance */
.ab-hero__balance{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #F8FAFF;
  border: 1px solid #E6EBF2;
}

.ab-hero__balance .label{
  color:#64748B;
  font-size: 12px;
}
.ab-hero__balance .value{
  font-weight: 950;
  font-size: 26px;
  margin-top: 4px;
  letter-spacing: -0.3px;
}

/* Quick buttons */
.ab-hero__quick{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.qbtn{
  border:1px solid #E6EBF2;
  background:#fff;
  border-radius: 14px;
  padding: 10px 0;
  font-weight: 800;
  color:#0F172A;
  cursor:pointer;
  transition: transform .15s ease, border-color .2s ease;
}
.qbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.35);
}

/* Transactions list */
.ab-hero__list{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.tx{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  background:#fff;
  border:1px solid #E6EBF2;
}

.tx__icon{
  width:38px;
  height:38px;
  border-radius: 14px;
  background: rgba(37,99,235,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.tx__meta{ flex: 1; }
.tx__name{ font-weight: 900; line-height: 1.1; }
.tx__time{ color:#64748B; font-size: 12px; margin-top: 2px; }

.tx__amt{
  font-weight: 900;
  color:#0F172A;
}
.tx__amt.plus{
  color:#06B6D4;
}

/* Glow effect inside card */
.ab-hero__cardGlow{
  position:absolute;
  inset: -60px -60px auto auto;
  width:220px;
  height:220px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.12), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

/* Decorative blobs behind */
.blob{
  position:absolute;
  width:160px;
  height:160px;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .55;
  z-index: -1;
  animation: abBlob 6s ease-in-out infinite;
}
.blob--1{
  left: -40px;
  top: 40px;
  background: rgba(37,99,235,.30);
}
.blob--2{
  right: -50px;
  bottom: 40px;
  background: rgba(6,182,212,.28);
  animation-delay: 1.2s;
}

@keyframes abBlob{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}

/* Responsive */
@media (max-width: 980px){
  .ab-hero__grid{
    grid-template-columns: 1fr;
  }
  .ab-hero__title{
    font-size: 40px;
  }
}

@media (max-width: 560px){
  .ab-hero{ padding-top: 28px; }
  .ab-hero__title{ font-size: 34px; }
  .ab-hero__quick{ grid-template-columns: repeat(2, 1fr); }
  .stat{ min-width: 140px; }
}

/* ================================
   FEATURES / SERVICES (Section 3)
   ================================ */

.ab-features{
  padding: 18px 0 26px;
}

/* Section heading */
.ab-sectionHead{
  max-width: 680px;
  margin-bottom: 14px;
  animation: abFadeUp .6s ease both;
}

.ab-sectionHead__title{
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.4px;
}

.ab-sectionHead__desc{
  margin: 8px 0 0;
  color: #64748B;
  line-height: 1.6;
}

/* Grid */
.ab-features__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Cards */
.ab-featureCard{
  background: #FFFFFF;
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  animation: abFadeUp .65s ease both;
}

.ab-featureCard:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-featureCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
}

.ab-featureCard__title{
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.ab-featureCard__text{
  margin: 0;
  color: #64748B;
  line-height: 1.6;
  font-size: 14px;
}

/* CTA box under features */
.ab-features__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-features__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-features__ctaText{
  margin: 6px 0 0;
  color: #64748B;
}

.ab-features__ctaActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Animation keyframe (reused) */
@keyframes abFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 980px){
  .ab-features__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ab-sectionHead__title{
    font-size: 24px;
  }

  .ab-features__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   TRUST / SECURITY (Section 4)
   ================================ */

.ab-trust{
  padding: 18px 0 30px;
}

.ab-trust__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

/* Left side */
.ab-kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E6EBF2;
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0px 10px 18px rgba(15,23,42,.05);
}

.ab-trust__title{
  margin: 12px 0 8px;
  font-size: 32px;
  letter-spacing: -0.5px;
}

.ab-trust__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
  max-width: 66ch;
}

.ab-trust__points{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.point{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease;
}

.point:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.point__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.point__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.point__text{
  color:#64748B;
  margin-top: 3px;
  line-height: 1.6;
  font-size: 14px;
}

.ab-trust__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Right panel */
.ab-trust__panel{
  background: #FFFFFF;
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  position: relative;
  overflow:hidden;
}

/* soft glow inside panel */
.ab-trust__panel::before{
  content:"";
  position:absolute;
  inset: -60px -60px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.12), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

.panelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position: relative;
  z-index: 1;
}

.panelTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.panelTag{
  font-size: 12px;
  font-weight: 900;
  color: #0F172A;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.14);
  border: 1px solid rgba(6,182,212,0.25);
}

.panelList{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.panelItem{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #E6EBF2;
  background: rgba(248,250,255,0.9);
}

.panelDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.10);
  flex: 0 0 auto;
}

.panelName{
  font-weight: 900;
  line-height: 1.1;
}

.panelSub{
  color:#64748B;
  font-size: 12px;
  margin-top: 2px;
}

/* Panel stats */
.ab-trust__stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.tstat{
  background: #fff;
  border: 1px solid #E6EBF2;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.tstat__num{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.tstat__label{
  color:#64748B;
  font-size: 12px;
  margin-top: 3px;
}

/* Responsive */
@media (max-width: 980px){
  .ab-trust__grid{
    grid-template-columns: 1fr;
  }
  .ab-trust__title{
    font-size: 28px;
  }
}

@media (max-width: 560px){
  .ab-trust__stats{
    grid-template-columns: 1fr;
  }
}

/* ================================
   INVESTMENT PLANS (Section 5)
   ================================ */

.ab-invest{
  padding: 18px 0 30px;
}

.ab-invest__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Plan card */
.ab-plan{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  overflow:hidden;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-plan:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-plan__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.ab-plan__name{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 18px;
}

.ab-plan__sub{
  color:#64748B;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.ab-plan__rate{
  min-width: 72px;
  text-align:center;
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
}

.ab-plan__rate .big{
  display:block;
  font-weight: 950;
  font-size: 18px;
  line-height: 1;
}

.ab-plan__rate .small{
  display:block;
  color:#64748B;
  font-weight: 800;
  font-size: 11px;
  margin-top: 3px;
}

/* plan list */
.ab-plan__list{
  list-style:none;
  padding:0;
  margin: 12px 0 14px;
  display:grid;
  gap: 10px;
}

.ab-plan__list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background:#F8FAFF;
  border:1px solid #E6EBF2;
}

.ab-plan__list li span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.ab-plan__list li b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

.ab-plan__btn{
  width:100%;
  justify-content:center;
}

/* Featured plan */
.ab-plan--featured{
  border-color: rgba(37,99,235,0.30);
  box-shadow: 0px 22px 46px rgba(2,6,23,.12);
}

.ab-plan__ribbon{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color:#0F172A;
  background: rgba(6,182,212,0.16);
  border: 1px solid rgba(6,182,212,0.24);
}

/* Bottom note */
.ab-invest__note{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-invest__noteTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invest__noteText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-invest__noteActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-invest__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ab-invest__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   LOAN OPTIONS (Section 6)
   ================================ */

.ab-loans{
  padding: 18px 0 34px;
}

.ab-loans__grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 14px;
  align-items: start;
}

/* Left panel */
.ab-loans__panel{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  position: sticky;
  top: 92px; /* stays visible after header on desktop */
}

.ab-loans__panelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ab-loans__panelTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-loans__panelTag{
  font-size: 12px;
  font-weight: 950;
  color: #0F172A;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.22);
}

.ab-loans__panelBox{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.ab-loans__panelBox .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background:#F8FAFF;
  border:1px solid #E6EBF2;
}

.ab-loans__panelBox .row span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.ab-loans__panelBox .row b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

.ab-loans__panelNote{
  margin-top: 12px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-loans__panelActions{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

/* Right cards */
.ab-loans__cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ab-loanCard{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-loanCard:hover{
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.28);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-loanCard__top{
  display:flex;
  gap: 10px;
  align-items:center;
}

.ab-loanCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(6,182,212,0.14), rgba(37,99,235,0.12));
  border: 1px solid rgba(6,182,212,0.16);
  font-size: 18px;
  flex: 0 0 auto;
}

.ab-loanCard__name{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-loanCard__sub{
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
}

.ab-loanCard__list{
  list-style:none;
  padding:0;
  margin: 12px 0 14px;
  display:grid;
  gap: 10px;
}

.ab-loanCard__list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background:#F8FAFF;
  border:1px solid #E6EBF2;
}

.ab-loanCard__list li span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.ab-loanCard__list li b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

.ab-loanCard__btn{
  width:100%;
  justify-content:center;
}

/* Responsive */
@media (max-width: 980px){
  .ab-loans__grid{
    grid-template-columns: 1fr;
  }
  .ab-loans__panel{
    position: relative;
    top: auto;
  }
  .ab-loans__cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ab-loans__cards{
    grid-template-columns: 1fr;
  }
}


/* ================================
   TESTIMONIALS (Section 7)
   ================================ */

.ab-testimonials{
  padding: 18px 0 34px;
}

.ab-testimonials__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* review card */
.ab-review{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-review:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-review__top{
  display:flex;
  align-items:center;
  gap:10px;
}

.ab-review__avatar{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
}

.ab-review__meta{
  flex: 1;
}

.ab-review__name{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.ab-review__sub{
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
}

.ab-review__stars{
  font-weight: 950;
  color: #2563EB;
  letter-spacing: 1px;
}

.ab-review__text{
  margin: 12px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

/* Highlight card */
.ab-review--highlight{
  border-color: rgba(6,182,212,0.26);
  box-shadow: 0px 22px 46px rgba(2,6,23,.12);
}

.ab-review__badge{
  position:absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color:#0F172A;
  background: rgba(6,182,212,0.16);
  border: 1px solid rgba(6,182,212,0.24);
}

/* CTA under testimonials */
.ab-testimonials__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-testimonials__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-testimonials__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-testimonials__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-testimonials__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ab-testimonials__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   FAQ (Section 8)
   ================================ */

.ab-faq{
  padding: 18px 0 34px;
}

.ab-faq__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

/* FAQ list */
.ab-faqItem{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  overflow:hidden;
}

.ab-faqItem:not(:last-child){
  margin-bottom: 10px;
}

.ab-faqItem__btn{
  width: 100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 950;
  color:#0F172A;
  letter-spacing: -0.2px;
}

.ab-faqItem__icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-weight: 950;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.ab-faqItem__panel{
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
  transition: max-height .25s ease, padding .25s ease;
}

/* open state (JS toggles this class) */
.ab-faqItem.is-open .ab-faqItem__panel{
  max-height: 240px;
  padding: 0 16px 14px;
}

.ab-faqItem.is-open .ab-faqItem__icon{
  transform: rotate(45deg);
}

/* Side card */
.ab-faq__side{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  position: sticky;
  top: 92px;
}

.ab-faq__sideTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 18px;
}

.ab-faq__sideText{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-faq__sideActions{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.ab-faq__sideFoot{
  margin-top: 12px;
  color:#64748B;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 980px){
  .ab-faq__grid{
    grid-template-columns: 1fr;
  }
  .ab-faq__side{
    position: relative;
    top: auto;
  }
}


/* ================================
   FOOTER (Section 9)
   ================================ */

.ab-footer{
  margin-top: 18px;
  background: #FFFFFF;
  border-top: 1px solid #E6EBF2;
}

.ab-footer__grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr .8fr .8fr 1.2fr;
  gap: 16px;
  padding: 28px 0;
}

/* Brand */
.ab-footer__brand{
  max-width: 360px;
}

.ab-footer__logo{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg,#0B1220,#111B33);
  box-shadow: 0px 16px 30px rgba(2,6,23,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ab-footer__logo img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ab-footer__name{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-footer__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

/* Social */
.ab-footer__social{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ab-footer__social a{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid #E6EBF2;
  background: #F8FAFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#0F172A;
  text-decoration:none;
  transition: transform .15s ease, border-color .2s ease;
}

.ab-footer__social a:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.28);
}

/* Columns */
.ab-footer_col .ab-footer_title{
  font-weight: 950;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

.ab-footer__col a{
  display:block;
  color:#64748B;
  text-decoration:none;
  font-weight: 700;
  margin: 8px 0;
}

.ab-footer__col a:hover{
  color:#0F172A;
}

/* CTA box */
.ab-footer__cta{
  border: 1px solid #E6EBF2;
  background: linear-gradient(120deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08));
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.ab-footer__ctaTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-footer__ctaText{
  margin-top: 6px;
  color:#64748B;
  line-height: 1.7;
  font-size: 13px;
}

.ab-footer__ctaActions{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.ab-footer__note{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
}

/* Bottom bar */
.ab-footer__bottom{
  border-top: 1px solid #E6EBF2;
  padding: 14px 0;
  color:#64748B;
  font-size: 13px;
}

.ab-footer__bottomInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ab-footer__bottomLinks{
  display:flex;
  align-items:center;
  gap: 8px;
}

.ab-footer__bottomLinks a{
  color:#64748B;
  text-decoration:none;
  font-weight: 700;
}

.ab-footer__bottomLinks a:hover{
  color:#0F172A;
}

/* Responsive */
@media (max-width: 980px){
  .ab-footer__grid{
    grid-template-columns: 1fr 1fr;
  }
  .ab-footer__brand{
    max-width: none;
  }
}

@media (max-width: 560px){
  .ab-footer__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   PERSONAL PAGE INTRO (Personal.html)
   ================================ */

.ab-pageIntro{
  padding: 26px 0 10px;
}


/* ================================
   PERSONAL: ACCOUNTS (personal.html)
   ================================ */

.ab-pAccounts{
  padding: 10px 0 28px;
}

.ab-pAccounts__hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 8px;
}

.ab-pAccounts__heroText{
  background: #fff;
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.ab-pAccounts__kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(37,99,235,0.14);
  font-weight: 950;
  color:#0F172A;
  font-size: 12px;
}

.ab-pAccounts__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-pAccounts__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-pAccounts__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-pAccounts__miniStats{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.miniStat{
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 16px;
  background:#F8FAFF;
  border:1px solid #E6EBF2;
}

.miniStat__num{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.miniStat__label{
  margin-top: 3px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Right visual card */
.ab-pAccounts__heroCard{
  background: #0B1220;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow:hidden;
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.pCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pChip{
  width: 46px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(6,182,212,0.18));
  border: 1px solid rgba(255,255,255,0.12);
}

.pBadge{
  font-size: 12px;
  font-weight: 950;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.22);
  border: 1px solid rgba(37,99,235,0.25);
}

.pCardMid{
  margin-top: 16px;
}

.pCardLabel{
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
}

.pCardValue{
  margin-top: 6px;
  color: #fff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.3px;
}

.pBars{
  margin-top: 14px;
  display:flex;
  gap: 8px;
  align-items:flex-end;
  height: 110px;
}

.pBars .bar{
  flex: 1;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(6,182,212,0.65), rgba(37,99,235,0.70));
  opacity: .9;
}

.pCardGlow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Services grid */
.ab-pAccounts__grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ab-pService{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-pService:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-pService__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
}

.ab-pService__title{
  margin: 12px 0 6px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-pService__text{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-pService__meta{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
  font-weight: 800;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-pAccounts__hero{
    grid-template-columns: 1fr;
  }
  .ab-pAccounts__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ab-pAccounts__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   PERSONAL: CARDS (personal.html)
   ================================ */

.ab-pCards{
  padding: 10px 0 30px;
}

.ab-pCards__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: center;
}

/* Left content */
.ab-pCards__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-pCards__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-pCards__bullets{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.b{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease;
}

.b:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.b__icon{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.b__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.b__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-pCards__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Right stack */
.ab-pCards__stack{
  position: relative;
  min-height: 360px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  overflow:hidden;
  padding: 16px;
}

/* Card mock */
.ab-cardMock{
  background: #0B1220;
  color:#fff;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  width: 92%;
  max-width: 380px;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ab-cardMock--one{
  top: 16px;
}

.ab-cardMock--two{
  top: 122px;
  opacity: .92;
  transform: translateX(-50%) scale(.98);
}

.ab-cardMock__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ab-cardMock__brand{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-cardMock__brand img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ab-cardMock__chip{
  width: 46px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(6,182,212,0.18));
  border: 1px solid rgba(255,255,255,0.12);
}

.ab-cardMock__num{
  margin-top: 18px;
  font-weight: 950;
  letter-spacing: 1px;
}

.ab-cardMock__row{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

.ab-cardMock__label{
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  font-weight: 800;
}

.ab-cardMock__value{
  margin-top: 4px;
  font-weight: 900;
  font-size: 12px;
}

/* Mini info box */
.ab-pCards__mini{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.miniLine{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.miniLine:not(:last-child){
  border-bottom: 1px solid #E6EBF2;
}

.miniLine span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.miniLine b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

/* Glow */
.ab-pCards__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-pCards__grid{
    grid-template-columns: 1fr;
  }
  .ab-pCards__stack{
    min-height: 420px;
  }
}

@media (max-width: 560px){
  .ab-pCards__title{
    font-size: 24px;
  }
  .ab-cardMock{
    width: 94%;
  }
}

/* ================================
   PERSONAL: SAVINGS & BUDGET (personal.html)
   ================================ */

.ab-pBudget{
  padding: 10px 0 30px;
}

.ab-pBudget__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.ab-pBudget__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-pBudget__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

/* Goal card */
.ab-pBudget__goal{
  margin-top: 14px;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.goalTop{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}

.goalTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.goalSub{
  margin-top: 4px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

.goalAmt{
  font-weight: 950;
  letter-spacing: -0.2px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 13px;
  white-space: nowrap;
}

/* Progress bar */
.goalBar{
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: #F1F5F9;
  overflow:hidden;
  border: 1px solid #E6EBF2;
}

.goalFill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,.90), rgba(6,182,212,.88));
}

.goalFoot{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.goalFoot b{
  color:#0F172A;
  font-weight: 950;
}

.ab-pBudget__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Right category cards */
.ab-pBudget__cards{
  display:grid;
  gap: 14px;
}

.ab-bCat{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-bCat:hover{
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-bCat__top{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ab-bCat__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(6,182,212,0.14), rgba(37,99,235,0.12));
  border: 1px solid rgba(6,182,212,0.16);
  font-size: 18px;
  flex: 0 0 auto;
}

.ab-bCat__name{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.ab-bCat__sub{
  margin-top: 3px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

.ab-bCat__amt{
  margin-left:auto;
  font-weight: 950;
  color:#0F172A;
  background:#F8FAFF;
  border: 1px solid #E6EBF2;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* mini progress bar */
.ab-bCat__bar{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: #F1F5F9;
  overflow:hidden;
  border: 1px solid #E6EBF2;
}

.ab-bCat__bar > div{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,.90), rgba(6,182,212,.88));
}

/* Responsive */
@media (max-width: 980px){
  .ab-pBudget__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-pBudget__title{
    font-size: 24px;
  }
}

/* ================================
   PERSONAL: CTA (personal.html)
   ================================ */

.ab-pCta{
  padding: 10px 0 34px;
}

.ab-pCta__box{
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  overflow:hidden;
}

.ab-pCta__kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid #E6EBF2;
  font-weight: 950;
  color:#0F172A;
  font-size: 12px;
}

.ab-pCta__title{
  margin: 12px 0 8px;
  font-size: 30px;
  letter-spacing: -0.5px;
}

.ab-pCta__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
  max-width: 70ch;
}

.ab-pCta__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-pCta__trust{
  margin-top: 14px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ab-pCta__trust .tag{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid #E6EBF2;
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

/* Right phone mock */
.ab-pCta__right{
  position: relative;
  min-height: 340px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ab-phone{
  width: 320px;
  max-width: 100%;
  border-radius: 26px;
  background: #0B1220;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-phone__top{
  height: 44px;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ab-phone__top .dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

.ab-phone__screen{
  padding: 14px;
}

.ab-phone__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#fff;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-phone__brand img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ab-phone__card{
  margin-top: 12px;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(120deg, rgba(37,99,235,0.22), rgba(6,182,212,0.18));
  border: 1px solid rgba(255,255,255,0.10);
}

.ab-phone__cardTitle{
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 800;
}

.ab-phone__cardValue{
  margin-top: 6px;
  color:#fff;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.3px;
}

.ab-phone__pillRow{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ab-phone__pillRow .pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff;
  font-weight: 800;
  font-size: 12px;
}

.ab-phone__list{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.ab-phone__list .item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color:#fff;
}

.ab-phone__list .item span{
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: 12px;
}

.ab-phone__list .item b{
  font-weight: 950;
  font-size: 12px;
}

/* Glow */
.ab-pCta__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-pCta__box{
    grid-template-columns: 1fr;
  }
  .ab-pCta__right{
    min-height: 300px;
  }
}

@media (max-width: 560px){
  .ab-pCta__title{
    font-size: 24px;
  }
}


/* ================================
   BUSINESS: ACCOUNTS (business.html)
   ================================ */

.ab-bizAccounts{
  padding: 10px 0 30px;
}

.ab-bizAccounts__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Left content */
.ab-bizAccounts__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-bizAccounts__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-bizAccounts__points{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.bizPoint{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease;
}

.bizPoint:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.bizPoint__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.bizPoint__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.bizPoint__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-bizAccounts__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-bizAccounts__mini{
  margin-top: 14px;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.miniRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.miniRow:not(:last-child){
  border-bottom: 1px solid #E6EBF2;
}

.miniRow span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.miniRow b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

/* Right panel */
.ab-bizAccounts__panel{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  position: relative;
  overflow:hidden;
}

.bizPanelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.bizPanelTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.bizPanelTag{
  font-size: 12px;
  font-weight: 950;
  color:#0F172A;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.14);
  border: 1px solid rgba(6,182,212,0.24);
}

.bizRoles{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.role{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #E6EBF2;
  background: #F8FAFF;
}

.role__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.10);
  flex: 0 0 auto;
}

.role__dot--alt{
  background: #06B6D4;
  box-shadow: 0 0 0 6px rgba(6,182,212,0.12);
}

.role__meta{
  flex: 1;
}

.role__name{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.role__sub{
  margin-top: 2px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

.role__pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.20);
  color:#0F172A;
}

/* Payment cards */
.bizPayments{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.payCard{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #E6EBF2;
  background: rgba(248,250,255,0.9);
}

.payCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(6,182,212,0.14), rgba(37,99,235,0.12));
  border: 1px solid rgba(6,182,212,0.16);
  font-size: 18px;
  flex: 0 0 auto;
}

.payCard__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.payCard__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

/* Glow */
.bizGlow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-bizAccounts__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-bizAccounts__title{
    font-size: 24px;
  }
}


/* ================================
   BUSINESS: GROWTH (business.html)
   ================================ */

.ab-bizGrowth{
  padding: 10px 0 34px;
}

.ab-bizGrowth__grid{
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Tools list */
.ab-bizTools{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ab-bizTool{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-bizTool:hover{
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-bizTool__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(6,182,212,0.14), rgba(37,99,235,0.12));
  border: 1px solid rgba(6,182,212,0.16);
  font-size: 18px;
  flex: 0 0 auto;
}

.ab-bizTool__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.ab-bizTool__text{
  margin-top: 4px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

/* Loan highlight card */
.ab-bizLoanCard{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background: #0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-bizLoanCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-bizLoanCard__kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 950;
  font-size: 12px;
}

.ab-bizLoanCard__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-bizLoanCard__title{
  margin: 12px 0 8px;
  font-weight: 950;
  letter-spacing: -0.3px;
  font-size: 22px;
}

.ab-bizLoanCard__desc{
  margin: 0;
  color: rgba(255,255,255,0.76);
  line-height: 1.7;
}

.ab-bizLoanCard__stats{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.lStat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.lStat__label{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.lStat__value{
  font-weight: 950;
  font-size: 12px;
}

.ab-bizLoanCard__actions{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.ab-bizLoanCard__foot{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
}

/* Glow */
.ab-bizLoanCard__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-bizGrowth__grid{
    grid-template-columns: 1fr;
  }
  .ab-bizTools{
    grid-template-columns: 1fr;
  }
}


/* ================================
   BUSINESS: PROOF + CTA (business.html)
   ================================ */

.ab-bizProof{
  padding: 10px 0 34px;
}

.ab-bizProof__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Review card */
.ab-bizReview{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}

.ab-bizReview:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-bizReview__top{
  display:flex;
  align-items:center;
  gap:10px;
}

.ab-bizReview__avatar{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
}

.ab-bizReview__meta{
  flex: 1;
}

.ab-bizReview__name{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.ab-bizReview__sub{
  margin-top: 3px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

.ab-bizReview__stars{
  font-weight: 950;
  color: #2563EB;
  letter-spacing: 1px;
}

.ab-bizReview__text{
  margin: 12px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

/* Highlight */
.ab-bizReview--highlight{
  border-color: rgba(6,182,212,0.26);
  box-shadow: 0px 22px 46px rgba(2,6,23,.12);
}

.ab-bizReview__badge{
  position:absolute;
  right: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color:#0F172A;
  background: rgba(6,182,212,0.16);
  border: 1px solid rgba(6,182,212,0.24);
}

/* CTA box */
.ab-bizProof__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-bizProof__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-bizProof__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-bizProof__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-bizProof__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   CARDS: SHOWCASE (cards.html)
   ================================ */

.ab-cShowcase{
  padding: 10px 0 30px;
}

.ab-cShowcase__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: center;
}

/* Left */
.ab-cShowcase__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-cShowcase__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-cShowcase__features{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.cFeat{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease;
}

.cFeat:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.cFeat__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.cFeat__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.cFeat__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-cShowcase__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-cShowcase__note{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Right visual */
.ab-cShowcase__visual{
  position: relative;
}

.ab-cardStack{
  position: relative;
  min-height: 420px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 18px 40px rgba(2,6,23,.10);
  overflow:hidden;
  padding: 16px;
}

.ab-cardLux{
  background: #0B1220;
  color:#fff;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  width: 92%;
  max-width: 420px;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ab-cardLux--top{ top: 16px; }
.ab-cardLux--back{
  top: 132px;
  opacity: .92;
  transform: translateX(-50%) scale(.98);
}

.ab-cardLux__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ab-cardLux__brand{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-cardLux__brand img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ab-cardLux__chip{
  width: 46px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(6,182,212,0.18));
  border: 1px solid rgba(255,255,255,0.12);
}

.ab-cardLux__mid{
  margin-top: 16px;
}

.ab-cardLux__label{
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
}

.ab-cardLux__num{
  margin-top: 6px;
  font-weight: 950;
  letter-spacing: 1px;
}

.ab-cardLux__row{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

.ab-cardLux__small{
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  font-weight: 800;
}

.ab-cardLux__val{
  margin-top: 4px;
  font-weight: 900;
  font-size: 12px;
}

/* controls card */
.ab-cardControls{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #E6EBF2;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
}

.ab-cardControls__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.ab-cardControls__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.ab-cardControls__row:not(:last-child){
  border-bottom: 1px solid #E6EBF2;
}

.ab-cardControls__row span{
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
}

.ab-cardControls__row b{
  color:#0F172A;
  font-weight: 950;
  font-size: 12px;
}

/* glow */
.ab-cardStack__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-cShowcase__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-cShowcase__title{
    font-size: 24px;
  }
  .ab-cardLux{
    width: 94%;
  }
}


.ab-cTypes{
  padding: 10px 0 34px;
}

.ab-cTypes__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ab-cType{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  overflow:hidden;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-cType:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-cType__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-cType__badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-weight: 950;
  font-size: 12px;
  color:#0F172A;
}

.ab-cType__price{
  font-weight: 950;
  color:#0F172A;
  background:#F8FAFF;
  border: 1px solid #E6EBF2;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

.ab-cType__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 18px;
}

.ab-cType__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-cType__list{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color:#64748B;
  line-height: 1.8;
  font-weight: 700;
  font-size: 13px;
}

.ab-cType__cta{
  margin-top: 14px;
}

/* Dark featured card */
.ab-cType--dark{
  background: #0B1220;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  color:#fff;
}

.ab-cType--dark .ab-cType__price{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
  color:#fff;
}

.ab-cType--dark .ab-cType__desc,
.ab-cType--dark .ab-cType__list{
  color: rgba(255,255,255,0.76);
}

.ab-cType--dark .ab-cType__badge{
  background: rgba(6,182,212,0.18);
  border-color: rgba(6,182,212,0.22);
  color:#fff;
}

.ab-cType__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

.ab-cTypes__note{
  margin-top: 12px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .ab-cTypes__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   CARDS: TYPES (cards.html)
   ================================ */

.ab-cTypes{
  padding: 10px 0 34px;
}

.ab-cTypes__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ab-cType{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  overflow:hidden;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-cType:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-cType__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-cType__badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-weight: 950;
  font-size: 12px;
  color:#0F172A;
}

.ab-cType__price{
  font-weight: 950;
  color:#0F172A;
  background:#F8FAFF;
  border: 1px solid #E6EBF2;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

.ab-cType__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 18px;
}

.ab-cType__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-cType__list{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color:#64748B;
  line-height: 1.8;
  font-weight: 700;
  font-size: 13px;
}

.ab-cType__cta{
  margin-top: 14px;
}

/* Dark featured card */
.ab-cType--dark{
  background: #0B1220;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  color:#fff;
}

.ab-cType--dark .ab-cType__price{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
  color:#fff;
}

.ab-cType--dark .ab-cType__desc,
.ab-cType--dark .ab-cType__list{
  color: rgba(255,255,255,0.76);
}

.ab-cType--dark .ab-cType__badge{
  background: rgba(6,182,212,0.18);
  border-color: rgba(6,182,212,0.22);
  color:#fff;
}

.ab-cType__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

.ab-cTypes__note{
  margin-top: 12px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .ab-cTypes__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   CARDS: SECURITY (cards.html)
   ================================ */

.ab-cSecurity{
  padding: 10px 0 34px;
}

.ab-cSecurity__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.ab-cSecurity__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-cSecurity__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-cSecurity__list{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

/* Left items */
.secItem{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
  transition: transform .15s ease, border-color .2s ease;
}

.secItem:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.secItem__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.secItem__body{
  flex: 1;
}

.secItem__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.secItem__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.secItem__tag{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color:#0F172A;
  background: rgba(6,182,212,0.14);
  border: 1px solid rgba(6,182,212,0.20);
  white-space: nowrap;
}

.ab-cSecurity__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Right panel */
.ab-cSecurity__panel{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background: #0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.secPanel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.secPanel__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.secPanel__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.22);
  border: 1px solid rgba(37,99,235,0.25);
  font-weight: 950;
  font-size: 12px;
}

.secPanel__status{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.secLine{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.secLine span{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.secLine b{
  font-weight: 950;
  font-size: 12px;
}

.secPanel__info{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.secInfo__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-size: 18px;
  flex: 0 0 auto;
}

.secInfo__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.secInfo__text{
  margin-top: 4px;
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
  font-size: 13px;
}

/* Glow */
.secPanel__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-cSecurity__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-cSecurity__title{
    font-size: 24px;
  }
}

/* ================================
   CARDS: FAQ + CTA (cards.html)
   ================================ */

.ab-cFaq{
  padding: 10px 0 34px;
}

.ab-cFaq__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.ab-faqCol{
  display:grid;
  gap: 14px;
}

.ab-faq{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-faq:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-faq__q{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-faq__a{
  margin-top: 8px;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

/* CTA */
.ab-cFaq__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-cFaq__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-cFaq__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-cFaq__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-cFaq__grid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   LOANS: TYPES (loans.html)
   ================================ */

.ab-loanTypes{
  padding: 10px 0 34px;
}

.ab-loanTypes__wrap{
  margin-top: 12px;
  display:grid;
  gap: 14px;
}

/* Loan block container */
.ab-loanBlock{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  overflow:hidden;
}

.ab-loanBlock__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.ab-loanBlock__title{
  margin: 10px 0 0;
  font-weight: 950;
  letter-spacing: -0.3px;
  font-size: 20px;
}

.ab-loanBlock__tag{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.18);
  font-weight: 950;
  font-size: 12px;
  color:#0F172A;
}

/* Grid of loan cards */
.ab-loanGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ab-loanCard{
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  background:#fff;
  box-shadow: 0px 12px 28px rgba(15,23,42,.06);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-loanCard:hover{
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-loanCard__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

.ab-loanCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(6,182,212,0.14), rgba(37,99,235,0.12));
  border: 1px solid rgba(6,182,212,0.16);
  font-size: 18px;
}

.ab-loanCard__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.14);
  border: 1px solid rgba(6,182,212,0.20);
  font-weight: 950;
  font-size: 11px;
  color:#0F172A;
}

.ab-loanCard__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-loanCard__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-loanCard__list{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color:#64748B;
  line-height: 1.8;
  font-weight: 700;
  font-size: 13px;
}

.ab-loanBlock__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dark block (business loans) */
.ab-loanBlock--dark{
  background:#0B1220;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  color:#fff;
}

.ab-kicker--dark{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color:#fff;
}

.ab-loanBlock__tag--dark{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  color:#fff;
}

.ab-loanCard--dark{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
}

.ab-loanCard--dark:hover{
  border-color: rgba(6,182,212,0.25);
  box-shadow: 0px 18px 36px rgba(2,6,23,.20);
}

.ab-loanCard--dark .ab-loanCard__desc,
.ab-loanCard--dark .ab-loanCard__list{
  color: rgba(255,255,255,0.76);
}

.ab-loanCard__pill--dark{
  background: rgba(6,182,212,0.18);
  border-color: rgba(6,182,212,0.22);
  color:#fff;
}

/* Glow */
.ab-loanBlock__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-loanGrid{
    grid-template-columns: 1fr;
  }
}


/* ================================
   LOANS: CALCULATOR (loans.html)
   ================================ */

.ab-loanCalc{
  padding: 10px 0 34px;
}

.ab-loanCalc__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Left */
.ab-loanCalc__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-loanCalc__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-loanCalc__bullets{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.calcBullet{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease;
}

.calcBullet:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.calcBullet__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
  flex: 0 0 auto;
}

.calcBullet__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.calcBullet__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-loanCalc__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-loanCalc__note{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Right panel */
.ab-loanCalc__panel{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background: #0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.calcTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.calcTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.calcPill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.calcInputs{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.calcField{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.calcLabel{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
  margin-bottom: 8px;
}

.calcBox{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}

.calcPrefix{
  font-weight: 950;
  color: rgba(255,255,255,0.85);
}

.calcValue{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.calcHint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  font-weight: 700;
}

.calcResult{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.18);
}

.calcResult__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.calcResult__row:not(:last-child){
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.calcResult__row span{
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: 12px;
}

.calcResult__row b{
  font-weight: 950;
  font-size: 12px;
}

.calcFoot{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
}

.calcGlow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-loanCalc__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-loanCalc__title{
    font-size: 24px;
  }
}


/* ================================
   LOANS: HOW IT WORKS (loans.html)
   ================================ */

.ab-loanHow{
  padding: 10px 0 34px;
}

.ab-loanHow__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.ab-loanHow__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-loanHow__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-loanHow__steps{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.howStep{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
  transition: transform .15s ease, border-color .2s ease;
}

.howStep:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.howStep__num{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color:#0F172A;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  flex: 0 0 auto;
}

.howStep__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.howStep__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-loanHow__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Tracker panel */
.ab-loanTracker{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background: #0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-loanTracker__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-loanTracker__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-loanTracker__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-loanTracker__card{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.trkRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.trkRow:not(:last-child){
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.trkRow span{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.trkRow b{
  font-weight: 950;
  font-size: 12px;
}

.ab-loanTracker__timeline{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.trkStep{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.trkDot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
  flex: 0 0 auto;
  margin-top: 2px;
}

.trkBody{
  flex: 1;
}

.trkTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.trkText{
  margin-top: 3px;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.trkTime{
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
}

/* states */
.trkStep--done .trkDot{
  background: #06B6D4;
  box-shadow: 0 0 0 6px rgba(6,182,212,0.12);
}
.trkStep--active{
  border-color: rgba(6,182,212,0.22);
}
.trkStep--active .trkDot{
  background: #2563EB;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.12);
}

.ab-loanTracker__note{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
}

.ab-loanTracker__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-loanHow__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-loanHow__title{
    font-size: 24px;
  }
}

/* ================================
   LOANS: FAQ + CTA (loans.html)
   ================================ */

.ab-loanFaq{
  padding: 10px 0 34px;
}

.ab-loanFaq__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

/* CTA */
.ab-loanFaq__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-loanFaq__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-loanFaq__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-loanFaq__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-loanFaq__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   INVESTMENTS: PLANS (investments.html)
   ================================ */

.ab-invPlans{
  padding: 10px 0 34px;
}

.ab-invPlans__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Left */
.ab-invPlans__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-invPlans__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-invPlans__cards{
  margin-top: 14px;
  display:grid;
  gap: 14px;
}

.ab-invPlan{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  position: relative;
  overflow:hidden;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-invPlan:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-invPlan__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-invPlan__badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-weight: 950;
  font-size: 12px;
  color:#0F172A;
}

.ab-invPlan__rate{
  font-weight: 950;
  color:#0F172A;
  background:#F8FAFF;
  border: 1px solid #E6EBF2;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

.ab-invPlan__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-invPlan__text{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-invPlan__list{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color:#64748B;
  line-height: 1.8;
  font-weight: 700;
  font-size: 13px;
}

.ab-invPlans__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-invPlans__note{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Dark featured plan */
.ab-invPlan--dark{
  background:#0B1220;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  color:#fff;
}

.ab-invPlan--dark .ab-invPlan__text,
.ab-invPlan--dark .ab-invPlan__list{
  color: rgba(255,255,255,0.76);
}

.ab-invPlan__badge--dark{
  background: rgba(6,182,212,0.18);
  border-color: rgba(6,182,212,0.22);
  color:#fff;
}

.ab-invPlan__rate--dark{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
  color:#fff;
}

.ab-invPlan__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Right preview panel */
.ab-invPreview{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:#0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-invPreview__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-invPreview__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invPreview__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-invPreview__card{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.invRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
}

.invRow:not(:last-child){
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.invRow span{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.invRow b{
  font-weight: 950;
  font-size: 12px;
}

.ab-invBars{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.invBar{
  display:grid;
  gap: 6px;
}

.invBar__label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
}

.invBar__track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}

.invBar__track span{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(6,182,212,0.85), rgba(37,99,235,0.85));
}

.ab-invPreview__note{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
}

.ab-invPreview__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-invPlans__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-invPlans__title{
    font-size: 24px;
  }
}

/* ================================
   INVESTMENTS: CATEGORIES (investments.html)
   ================================ */

.ab-invCats{
  padding: 10px 0 34px;
}

.ab-invCats__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ab-invCat{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow:hidden;
}

.ab-invCat:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-invCat__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
}

.ab-invCat__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-invCat__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-invCat__meta{
  margin-top: 12px;
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Highlight card */
.ab-invCat--dark{
  background:#0B1220;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  color:#fff;
}

.ab-invCat__badge{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
}

.ab-invCat__icon--dark{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
}

.ab-invCat--dark .ab-invCat__desc{
  color: rgba(255,255,255,0.76);
}

.ab-invCat__meta--dark{
  color: rgba(255,255,255,0.76);
}

.ab-invCat__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* CTA */
.ab-invCats__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-invCats__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invCats__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-invCats__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-invCats__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   INVESTMENTS: HOW IT WORKS (investments.html)
   ================================ */

.ab-invHow{
  padding: 10px 0 34px;
}

.ab-invHow__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.ab-invHow__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-invHow__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-invHow__steps{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.invStep{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
  transition: transform .15s ease, border-color .2s ease;
}

.invStep:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
}

.invStep__num{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color:#0F172A;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  flex: 0 0 auto;
}

.invStep__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.invStep__text{
  margin-top: 3px;
  color:#64748B;
  line-height: 1.6;
  font-size: 14px;
}

.ab-invHow__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ab-invHow__note{
  margin-top: 10px;
  color:#64748B;
  font-size: 12px;
  font-weight: 700;
}

/* Report panel */
.ab-invReport{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:#0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-invReport__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-invReport__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invReport__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-invReport__summary{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sumCard{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.sumCard__label{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.sumCard__value{
  margin-top: 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invReport__list{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.repRow{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.repLeft{
  display:flex;
  gap: 10px;
  align-items:center;
}

.repDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06B6D4;
  box-shadow: 0 0 0 6px rgba(6,182,212,0.12);
}

.repDot--alt{
  background: #2563EB;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.12);
}

.repDot--muted{
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
}

.repTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.repSub{
  margin-top: 3px;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
}

.repRight{
  text-align:right;
}

.repPct{
  font-weight: 950;
  font-size: 12px;
}

.repAmt{
  margin-top: 3px;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
}

.ab-invReport__note{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
}

.ab-invReport__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-invHow__grid{
    grid-template-columns: 1fr;
  }
  .ab-invReport__summary{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-invHow__title{
    font-size: 24px;
  }
}

/* ================================
   INVESTMENTS: FAQ + CTA (investments.html)
   ================================ */

.ab-invFaq{
  padding: 10px 0 34px;
}

.ab-invFaq__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.ab-invFaq__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-invFaq__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-invFaq__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-invFaq__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-invFaq__grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   SECURITY: FEATURES (security.html)
   ================================ */

.ab-secFeat{
  padding: 10px 0 34px;
}

.ab-secFeat__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.ab-secFeat__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-secFeat__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-secFeat__cards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ab-secCard{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-secCard:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-secCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
}

.ab-secCard__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-secCard__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-secFeat__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Right panel */
.ab-secPanel{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:#0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-secPanel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-secPanel__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-secPanel__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-secPanel__rows{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.secRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.secRow span{
  color: rgba(255,255,255,0.76);
  font-weight: 800;
  font-size: 12px;
}

.secRow b{
  font-weight: 950;
  font-size: 12px;
}

.ab-secPanel__tip{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.ab-secPanel__tipIcon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-size: 18px;
  flex: 0 0 auto;
}

.ab-secPanel__tipTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-secPanel__tipText{
  margin-top: 4px;
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
  font-size: 13px;
}

.ab-secPanel__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-secFeat__grid{
    grid-template-columns: 1fr;
  }
  .ab-secFeat__cards{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-secFeat__title{
    font-size: 24px;
  }
}

/* ================================
   SECURITY: BEST PRACTICES (security.html)
   ================================ */

.ab-secTips{
  padding: 10px 0 34px;
}

.ab-secTips__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.ab-secTips__title{
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.ab-secTips__desc{
  margin: 0;
  color:#64748B;
  line-height: 1.7;
}

.ab-secTips__cards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ab-tipCard{
  background:#fff;
  border:1px solid #E6EBF2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab-tipCard:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0px 18px 36px rgba(15,23,42,.10);
}

.ab-tipCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(120deg, rgba(37,99,235,0.14), rgba(6,182,212,0.12));
  border: 1px solid rgba(37,99,235,0.14);
  font-size: 18px;
}

.ab-tipCard__name{
  margin-top: 12px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
}

.ab-tipCard__desc{
  margin: 8px 0 0;
  color:#64748B;
  line-height: 1.7;
  font-size: 14px;
}

.ab-secTips__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Checklist panel */
.ab-secCheck{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:#0B1220;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0px 22px 46px rgba(2,6,23,.18);
  overflow:hidden;
}

.ab-secCheck__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.ab-secCheck__title{
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-secCheck__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6,182,212,0.18);
  border: 1px solid rgba(6,182,212,0.22);
  font-weight: 950;
  font-size: 12px;
}

.ab-secCheck__list{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.chkRow{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  gap: 10px;
}

.chkIcon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.chkBody{
  flex: 1;
}

.chkTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.chkText{
  margin-top: 3px;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
}

.chkState{
  font-weight: 950;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
}

/* On/Off styles */
.chkRow--on .chkIcon{
  background: rgba(6,182,212,0.18);
  border-color: rgba(6,182,212,0.22);
}
.chkRow--off{
  border-color: rgba(255,255,255,0.16);
}
.chkRow--off .chkIcon{
  background: rgba(245,158,11,0.16);
  border-color: rgba(245245,158,11,0.22);
}
.chkRow--off .chkState{
  background: rgba(245,158,11,0.16);
  border-color: rgba(245,158,11,0.22);
}

.ab-secCheck__cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.18);
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.6;
}

.ab-secCheck__glow{
  position:absolute;
  inset: -60px -60px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,.22), rgba(37,99,235,.16), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .ab-secTips__grid{
    grid-template-columns: 1fr;
  }
  .ab-secTips__cards{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px){
  .ab-secTips__title{
    font-size: 24px;
  }
}


/* ================================
   SECURITY: FAQ + CTA (security.html)
   ================================ */

.ab-secFaq{
  padding: 10px 0 34px;
}

.ab-secFaq__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.ab-secFaq__cta{
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(6,182,212,0.10));
  border: 1px solid rgba(230,235,242,0.9);
  box-shadow: 0px 12px 28px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ab-secFaq__ctaTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.ab-secFaq__ctaText{
  margin: 6px 0 0;
  color:#64748B;
}

.ab-secFaq__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .ab-secFaq__grid{
    grid-template-columns: 1fr;
  }
}