:root{
  --bg:#f4fbff;
  --ink:#0b1b2a;
  --muted: rgba(11,27,42,.72);

  --white:#fff;
  --stroke: rgba(11,27,42,.12);
  --shadow: 0 18px 40px rgba(9, 30, 66, .14);

  --yellow:#ffcc42;
  --yellow2:#ffb800;
  --blue:#2f79c8;
  --blue2:#1f62b1;

  --font: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --container: 1180px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background:
   background:
    radial-gradient(1200px 600px at 20% 10%, rgba(47, 121, 200, .14), transparent 55%),
    radial-gradient(1000px 600px at 80% 25%, rgba(255, 204, 66, .14), transparent 55%),
    linear-gradient(180deg, #e7f6ff 0%, var(--bg) 55%, #eefbff 100%);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.skip{
  position:absolute;
  left:-999px;
  top:12px;
  background:#000;
  color:#fff;
  padding:10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip:focus{ left: 12px; }

/* ===== Header ===== */
.siteHeader{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.siteHeader.isElevated{
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

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

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 150px;
}
.brand__logo{
  width: 120px;
  height: auto;
  /*border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(47,121,200,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);*/
}
.brand__name{
  font-weight: 900;
  letter-spacing: .3px;
}

.nav__links{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.06);
  flex: 1;
  justify-content: center;
}
.nav__links a{
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: rgba(11,27,42,.84);
  transition: transform .18s ease, background .18s ease;
}
.nav__links a:hover{
  background: rgba(47,121,200,.10);
  transform: translateY(-1px);
}
.nav__links a.isActive{
  background: rgba(255,204,66,.50);
  color: rgba(11,27,42,.92);
}

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

/* Flat icon buttons */
.iconBtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.iconBtn i{
  font-size: 16px;
  color: rgba(11,27,42,.86);
}
.iconBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,.12);
}
.iconBtn:active{ transform: translateY(0); }

.cartBtn{ position: relative; }
.cartBtn__badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width: 20px;
  height: 20px;
  display:grid;
  place-items:center;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow2));
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 900;
  font-size: 12px;
  transform-origin: center;
}

/* ===== Expandable Search ===== */
.search{
  display:flex;
  align-items:center;
  gap: 10px;
}
.search__form{
  display:flex;
  align-items:center;
  gap: 8px;

  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;

  transition: width .22s ease, opacity .22s ease;
}
.search.isOpen .search__form{
  width: 260px;
  opacity: 1;
  pointer-events: auto;
}
.search__input{
  width: 100%;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  padding: 0 12px;
  outline: none;
  font-weight: 700;
}
.search__input:focus{
  border-color: rgba(47,121,200,.35);
  box-shadow: 0 0 0 4px rgba(47,121,200,.12);
}
.search__go{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.search__go:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(0,0,0,.10);
}

/* Mobile menu button */
.menuBtn{
  display:none; /* shows on mobile */
  width: 44px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.menuBtn:hover{ transform: translateY(-2px); box-shadow: 0 16px 26px rgba(0,0,0,.12); }
.menuBtn__bars{
  width: 18px;
  height: 2px;
  background: rgba(11,27,42,.86);
  border-radius: 4px;
  position: relative;
}
.menuBtn__bars::before,
.menuBtn__bars::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(11,27,42,.86);
  border-radius: 4px;
}
.menuBtn__bars::before{ top:-6px; }
.menuBtn__bars::after{ top:6px; }

/* Mobile dropdown */
.mobileMenu{
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94);
}
.mobileMenu__inner{ padding: 14px 0 18px; }
.mobileMenu__links{ display:grid; gap: 10px; }
.mobileMenu__links a{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.84);
  transition: transform .18s ease, background .18s ease;
}
.mobileMenu__links a:hover{
  background: rgba(47,121,200,.10);
  transform: translateY(-1px);
}

/* ===== HERO ===== */
/* ===== HERO ===== */
.hero{
  position: relative;
  min-height: 500px;
  display:flex;
  padding-top:
  /*align-items:center;*/
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  background: url("../imgs/hero-bg.png") center/cover no-repeat;
}

/* overlay full width 
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.18) 100%);
  pointer-events:none;
}*/

/* ✅ container alignment */
.hero__inner{
  position: relative;
 /* width: 100%;*/
  padding: 55px 0;
  display: flex;
  justify-content: flex-start;
}

/* ✅ this guarantees text block stays inside container width */
.hero__content{
  max-width: 680px;
  width: 100%;
}

/* title/sub same */
.hero__title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.05;
    letter-spacing: -.3px;
    color: #fff;
	font-weight:600;
}
.hero__sub{
  margin: 0 0 16px;
  color: rgba(11,27,42,.72);
  font-weight: 600;
  line-height: 1.5;
  max-width: 560px;
  color: #fff;
}
.hero__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;px;
}

/* Buttons */
.btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  user-select:none;
}
.btn--primary{
  background: linear-gradient(180deg, var(--yellow), var(--yellow2));
  box-shadow: 0 16px 26px rgba(255, 184, 0, .22);
}
.btn--ghost{ background: rgba(255,255,255,.80); }
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}
.btn:active{ transform: translateY(0); }

.btn__shine{
  position:absolute;
  inset: -2px;
  border-radius: 999px;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
}
.btn--primary:hover .btn__shine{
  opacity: 1;
  animation: shine 1.1s ease forwards;
}
@keyframes shine{
  to{ transform: translateX(120%); opacity: 0; }
}

/* ===== Layout ===== */
.section{ padding: 26px 0 44px; }

.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

/* Left paint rail */
.rail{
  position: sticky;
  top: 92px;
  display:grid;
  gap: 12px;
  align-self: start;
}

/* Paint brush look */
.railCard{
  display: grid;
  place-items: center;
  text-align: center;

  padding: 18px 14px;
  min-height: 110px;              /* adjust height as needed */
  border-radius: 0;               /* remove rounded (set 18px if you still want) */

  color: #fff;

  background: url("../imgs/leftbg.png") center/cover no-repeat;
  border: 0;
  box-shadow: none;

  position: relative;
  overflow: hidden;

  transition: transform .18s ease;
}

.railCard:hover{
  transform: translateY(-2px);
}

/* Active rail card background */
.railCard.active{
  background: url("../imgs/leftbg-active.png") no-repeat center / 100% 100%;
}


/* make sure railCard can hold an overlay */
.railCard{
  position: relative;
  overflow: hidden; /* optional */
}

/* ===== ACTIVE ARROW (desktop: right) ===== */
.railCard.active::after{
  content: "";
  position: absolute;
  right: 12px;               /* adjust */
  top: 50%;
  transform: translateY(-50%);

  width: 18px;               /* adjust */
  height: 18px;

  /* arrow color (use white on your active bg) */
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;

  /* makes it a ">" arrow */
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.95;
}


/* =========================
   LOGIN PAGE — SPACING + TYPO FIX
   ========================= */

.loginWrap{
  padding: clamp(22px, 3vw, 38px) 0 28px;
}

/* Better proportions */
.loginShell{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

/* ---------- Left panel ---------- */
.loginHero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 340px at 20% 20%, rgba(47,121,200,.18), transparent 60%),
    radial-gradient(700px 340px at 80% 30%, rgba(255,204,66,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  padding: 28px;
}

.loginHero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 14px;
}

.loginHero__title{
  margin: 18px 0 12px;
  font-size: clamp(34px, 3vw, 44px); /* BIGGER */
  line-height: 1.06;
  letter-spacing: .2px;
}

.loginHero__sub{
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
  font-size: 16px; /* bigger */
  line-height: 1.65;
}

.loginHero__list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: rgba(11,27,42,.88);
  font-size: 15px; /* bigger */
}

.loginHero__list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.loginDot{
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(47,121,200,.12);
  flex: 0 0 auto;
}

.loginHero__art{
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 320px;
  height: 320px;
  opacity: .12;
  transform: rotate(10deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(47,121,200,.9), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,204,66,.9), transparent 55%);
  border-radius: 999px;
}

/* ---------- Right card ---------- */
.loginCard{
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
}

.loginCard__head{
  padding: 22px 24px 16px;          /* more breathing */
  border-bottom: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
}

.loginCard__title{
  margin: 0 0 6px;
  font-size: 24px;                  /* bigger */
  font-weight: 900;
  letter-spacing: .2px;
}

.loginCard__note{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.loginCard__body{
  padding: 22px 24px 24px;
}

/* error */
.loginError{
  display: none;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 66, 66, .10);
  border: 1px solid rgba(255, 66, 66, .22);
  color: rgba(120, 18, 18, .95);
  font-size: 14px;
  line-height: 1.4;
}
.loginError.isShow{ display:block; }

/* form spacing */
.loginForm{
  display: grid;
  gap: 14px;
}

.loginField{ display:grid; gap: 8px; }

.loginLabel{
  font-weight: 900;
  font-size: 14px;
}

.loginControl{ position: relative; }

.loginInput{
  width: 100%;
  padding: 14px 52px 14px 14px;     /* more padding */
  border-radius: 16px;
  border: 1px solid rgba(11,27,42,.14);
  background: #fff;
  font-family: var(--font);
  font-size: 16px;                  /* bigger */
  outline: none;
}

.loginInput::placeholder{
  color: rgba(11,27,42,.45);
}

.loginInput:focus{
  border-color: rgba(47,121,200,.60);
  box-shadow: 0 0 0 5px rgba(47,121,200,.14);
}

.loginIcon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  pointer-events: none;
  font-size: 16px;
}

.loginIconBtn{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border: 0;
  border-radius: 14px;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  cursor: pointer;
  font-size: 16px;
}

/* remember / forgot line */
.loginRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 2px;
}

.loginRemember{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 14px; /* bigger */
  color: rgba(11,27,42,.84);
  user-select:none;
}

.loginRemember input{
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.loginLink{
  font-size: 14px;
  font-weight: 900;
  color: var(--blue2);
  text-decoration: none;
}
.loginLink:hover{ text-decoration: underline; }

/* button: more height + space around */
.loginBtn{
  width: 100%;
  margin-top: 2px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 32px rgba(47,121,200,.22);
}
.loginBtn:active{ transform: translateY(1px); }

/* bottom note */
.loginFine{
  margin: 6px 0 0;
  text-align:center;
  font-size: 14px;                  /* smaller as requested */
  color: rgba(11,27,42,.68);
}

.loginFine__cta{
  margin-left: 4px;
  font-weight: 900;
  color: var(--blue2);
  text-decoration: none;
  position: relative;
}
.loginFine__cta::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: rgba(47,121,200,.35);
  border-radius: 99px;
}
.loginFine__cta:hover{ text-decoration: underline; }


/* =========================
   REGISTRATION PAGE
   ========================= */

.regWrap{
  padding: clamp(22px, 3vw, 38px) 0 28px;
}

.regShell{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

/* Left info */
.regHero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 340px at 20% 20%, rgba(47,121,200,.18), transparent 60%),
    radial-gradient(700px 340px at 80% 30%, rgba(255,204,66,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  padding: 28px;
}

.regHero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 14px;
}

.regHero__title{
  margin: 18px 0 12px;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: .2px;
}

.regHero__sub{
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.65;
}

.regHero__list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: rgba(11,27,42,.88);
  font-size: 15px;
}

.regHero__list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.regDot{
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(47,121,200,.12);
  flex: 0 0 auto;
}

.regHero__art{
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 320px;
  height: 320px;
  opacity: .12;
  transform: rotate(10deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(47,121,200,.9), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,204,66,.9), transparent 55%);
  border-radius: 999px;
}

/* Right form card */
.regCard{
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
}

.regCard__head{
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
}

.regCard__title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .2px;
}

.regCard__note{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.regCard__body{
  padding: 22px 24px 24px;
}

/* error */
.regError{
  display: none;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 66, 66, .10);
  border: 1px solid rgba(255, 66, 66, .22);
  color: rgba(120, 18, 18, .95);
  font-size: 14px;
  line-height: 1.4;
}
.regError.isShow{ display:block; }

/* form */
.regForm{
  display: grid;
  gap: 14px;
}

.regGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.regField{ display:grid; gap: 8px; }

.regLabel{
  font-weight: 900;
  font-size: 14px;
}

.regControl{ position: relative; }

.regInput{
  width: 100%;
  padding: 14px 52px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,27,42,.14);
  background: #fff;
  font-family: var(--font);
  font-size: 16px;
  outline: none;
}

.regInput::placeholder{
  color: rgba(11,27,42,.45);
}

.regInput:focus{
  border-color: rgba(47,121,200,.60);
  box-shadow: 0 0 0 5px rgba(47,121,200,.14);
}

.regIcon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  pointer-events: none;
  font-size: 16px;
}

.regIconBtn{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border: 0;
  border-radius: 14px;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  cursor: pointer;
  font-size: 16px;
}

.regHint{
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(11,27,42,.62);
}

.regRow{
  margin-top: 2px;
}

.regCheck{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(11,27,42,.78);
  user-select:none;
}

.regCheck input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.regLink{
  color: var(--blue2);
  font-weight: 900;
  text-decoration: none;
}
.regLink:hover{ text-decoration: underline; }

/* button */
.regBtn{
  width: 100%;
  margin-top: 2px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 32px rgba(47,121,200,.22);
}
.regBtn:active{ transform: translateY(1px); }

/* bottom note */
.regFine{
  margin: 6px 0 0;
  text-align:center;
  font-size: 13px;
  color: rgba(11,27,42,.68);
}

.regFine__cta{
  margin-left: 4px;
  font-weight: 900;
  color: var(--blue2);
  text-decoration: none;
  position: relative;
}
.regFine__cta::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: rgba(47,121,200,.35);
  border-radius: 99px;
}
.regFine__cta:hover{ text-decoration: underline; }

/* =========================
   FORGOT PASSWORD PAGE
   ========================= */

.fpWrap{
  padding: clamp(22px, 3vw, 38px) 0 28px;
}

.fpShell{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

/* Left info */
.fpHero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 340px at 20% 20%, rgba(47,121,200,.18), transparent 60%),
    radial-gradient(700px 340px at 80% 30%, rgba(255,204,66,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  padding: 28px;
}

.fpHero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 14px;
}

.fpHero__title{
  margin: 18px 0 12px;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: .2px;
}

.fpHero__sub{
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.65;
}

.fpHero__list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: rgba(11,27,42,.88);
  font-size: 15px;
}

.fpHero__list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fpDot{
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(47,121,200,.12);
  flex: 0 0 auto;
}

.fpHero__art{
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 320px;
  height: 320px;
  opacity: .12;
  transform: rotate(10deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(47,121,200,.9), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,204,66,.9), transparent 55%);
  border-radius: 999px;
}

/* Right form card */
.fpCard{
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
}

.fpCard__head{
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
}

.fpCard__title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .2px;
}

.fpCard__note{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.fpCard__body{
  padding: 22px 24px 24px;
}

/* error */
.fpError{
  display: none;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 66, 66, .10);
  border: 1px solid rgba(255, 66, 66, .22);
  color: rgba(120, 18, 18, .95);
  font-size: 14px;
  line-height: 1.4;
}
.fpError.isShow{ display:block; }

/* form */
.fpForm{
  display: grid;
  gap: 14px;
}

.fpField{ display:grid; gap: 8px; }

.fpLabel{
  font-weight: 900;
  font-size: 14px;
}

.fpControl{ position: relative; }

.fpInput{
  width: 100%;
  padding: 14px 52px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,27,42,.14);
  background: #fff;
  font-family: var(--font);
  font-size: 16px;
  outline: none;
}

.fpInput::placeholder{
  color: rgba(11,27,42,.45);
}

.fpInput:focus{
  border-color: rgba(47,121,200,.60);
  box-shadow: 0 0 0 5px rgba(47,121,200,.14);
}

.fpIcon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  pointer-events: none;
  font-size: 16px;
}

.fpHint{
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(11,27,42,.62);
}

/* button */
.fpBtn{
  width: 100%;
  margin-top: 2px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 32px rgba(47,121,200,.22);
}
.fpBtn:active{ transform: translateY(1px); }

/* bottom note */
.fpFine{
  margin: 6px 0 0;
  text-align:center;
  font-size: 13px;
  color: rgba(11,27,42,.68);
}

.fpFine__cta{
  margin-left: 4px;
  font-weight: 900;
  color: var(--blue2);
  text-decoration: none;
  position: relative;
}
.fpFine__cta::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: rgba(47,121,200,.35);
  border-radius: 99px;
}
.fpFine__cta:hover{ text-decoration: underline; }

}


/* =========================
   ABOUT US PAGE
   ========================= */

.aboutHero{
  padding: clamp(22px, 3vw, 42px) 0 22px;
}

.aboutHero__inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.aboutPill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  font-size: 14px;
}

.aboutHero__title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1.06;
  letter-spacing: .2px;
}

.aboutHero__sub{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 65ch;
}

.aboutHero__points{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.aboutPoint{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 24px rgba(9, 30, 66, .08);
}

.aboutPoint__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  font-size: 18px;
  flex: 0 0 auto;
}

.aboutPoint strong{
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 4px;
}
.aboutPoint p{
  margin: 0;
  color: rgba(11,27,42,.72);
  font-size: 14px;
  line-height: 1.5;
}

/* Right image stack */
.aboutStack{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 340px at 20% 20%, rgba(47,121,200,.14), transparent 60%),
    radial-gradient(700px 340px at 80% 30%, rgba(255,204,66,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
  padding: 18px;
  min-height: 420px;
}

.aboutPhoto{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.10);
  background: #fff;
  box-shadow: 0 16px 32px rgba(9, 30, 66, .12);
}
.aboutPhoto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aboutPhoto--a{
  height: 220px;
}
.aboutPhoto--b{
  position: absolute;
  right: 18px;
  bottom: 110px;
  width: 54%;
  height: 170px;
}

.aboutStats{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.aboutStat{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(11,27,42,.10);
  border-radius: 18px;
  padding: 12px 12px;
  text-align: left;
  box-shadow: 0 12px 24px rgba(9, 30, 66, .08);
}

.aboutStat strong{
  display: block;
  font-size: 18px;
  font-weight: 900;
}
.aboutStat span{
  display: block;
  margin-top: 2px;
  color: rgba(11,27,42,.68);
  font-size: 12px;
  line-height: 1.3;
}

/* Shared headings */
.aboutHead{
  margin-bottom: 14px;
}
.aboutH2{
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
}
.aboutH3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
}
.aboutSub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.aboutP{
  margin: 0;
  color: rgba(11,27,42,.78);
  font-size: 15px;
  line-height: 1.75;
}

.aboutPillRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.aboutTag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
  color: rgba(11,27,42,.82);
}

/* Story card */
.aboutStory__inner{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
  padding: 6px 0;
}

.aboutStory__card{
  border-radius: 26px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow);
  padding: 22px;
}

.aboutStory__media{
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.10);
  box-shadow: var(--shadow);
  background: #fff;
}
.aboutStory__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Timeline */
.aboutTimeline{
  margin-top: 12px;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}

.aboutStep{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 14px 8px;
  position: relative;
}

.aboutStep:not(:last-child){
  border-bottom: 1px dashed rgba(11,27,42,.18);
}

.aboutStep__dot{
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(47,121,200,.12);
}

/* Team */
.teamGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.teamCard{
  border-radius: 26px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 18px;
}

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

.teamCard__avatar{
  width: 98px;
  height: 98px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(11,27,42,.10);
  background: #fff;
}

.teamCard__name{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}
.teamCard__role{
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(11,27,42,.62);
  font-weight: 800;
}
.teamCard__bio{
  margin: 0;
  color: rgba(11,27,42,.78);
  font-size: 14px;
  line-height: 1.7;
}
.teamCard__linkRow{
  margin: 10px 0 0;
}
.teamLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  color: var(--blue2);
  text-decoration: none;
}
.teamLink:hover{ text-decoration: underline; }

/* Sessions card */
.sessionsCard{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  border-radius: 26px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sessionsCard__left{
  padding: 22px;
}
.sessionsCard__right{
  background: #fff;
}
.sessionsCard__right img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sessionsBadges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.sessionsBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(47,121,200,.08);
  color: rgba(11,27,42,.84);
  font-weight: 900;
  font-size: 13px;
}

.sessionsActions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.abt{
background:
    radial-gradient(1200px 600px at 20% 10%, rgba(47, 121, 200, .14), transparent 55%),
    radial-gradient(1000px 600px at 80% 25%, rgba(255, 204, 66, .14), transparent 55%),
    linear-gradient(180deg, #e7f6ff 0%, var(--bg) 55%, #eefbff 100%);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* =========================
   BLOG LISTING (NO FILTER / NO JS)
   ========================= */

.blogWrap{ padding: clamp(22px, 3vw, 42px) 0 30px; }

.blogHead{
  margin-bottom: 16px;
}

.blogPill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  font-size: 14px;
}

.blogHead__title{
  margin: 12px 0 8px;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: .2px;
}

.blogHead__sub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 75ch;
}

/* meta */
.blogMeta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(11,27,42,.62);
  font-size: 12px;
  font-weight: 800;
}

.blogTag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  font-weight: 900;
}

.blogDot{ opacity: .6; }

/* featured */
.blogFeat{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  margin: 16px 0 18px;
}

.blogFeat__media{
  min-height: 280px;
  background: #fff;
}
.blogFeat__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blogFeat__body{
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.blogFeat__title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.blogFeat__text{
  margin: 0;
  color: rgba(11,27,42,.74);
  font-size: 14px;
  line-height: 1.7;
}

.blogFeat__cta{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--blue2);
}

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

.blogCard{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(9,30,66,.12);
  display: grid;
}

.blogCard__media{
  height: 220px;
  background: #fff;
  display: block;
}
.blogCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blogCard__body{
  padding: 14px 14px 16px;
  display: grid;
  gap: 10px;
}

.blogCard__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}
.blogCard__title a{
  color: inherit;
  text-decoration: none;
}
.blogCard__title a:hover{ text-decoration: underline; }

.blogCard__text{
  margin: 0;
  color: rgba(11,27,42,.74);
  font-size: 13px;
  line-height: 1.65;
}

.blogCard__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 13px;
  color: var(--blue2);
  text-decoration: none;
}
.blogCard__cta:hover{ text-decoration: underline; }

/* pagination */
.blogPager{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pagerBtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(11,27,42,.12);
}

.pagerBtn--ghost{
  background: rgba(255,255,255,.84);
  color: rgba(11,27,42,.84);
}

.pagerBtn--primary{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  color: #fff;
  border-color: rgba(47,121,200,.30);
  box-shadow: 0 16px 32px rgba(47,121,200,.20);
}

.pagerNums{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pagerNum{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.84);
  color: rgba(11,27,42,.84);
}
.pagerNum.isActive{
  background: rgba(47,121,200,.12);
  border-color: rgba(47,121,200,.35);
  color: var(--blue2);
}

/* =========================
   BLOG DETAIL PAGE
   ========================= */

.blogDWrap{ padding: clamp(22px, 3vw, 42px) 0 30px; }

.blogDLayout{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

/* Main card */
.blogDMain{
  border-radius: 26px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* breadcrumb */
.blogDBread{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
  color: rgba(11,27,42,.62);
  font-size: 13px;
  font-weight: 800;
}
.blogDBread a{
  color: rgba(11,27,42,.72);
  text-decoration: none;
}
.blogDBread a:hover{ text-decoration: underline; }
.blogDBread__current{ color: rgba(11,27,42,.85); }

/* head */
.blogDHead{
  padding: 12px 20px 16px;
}

.blogDMeta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(11,27,42,.62);
  font-size: 12px;
  font-weight: 800;
}

.blogDTag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  font-weight: 900;
}

.blogDTitle{
  margin: 10px 0 8px;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .2px;
}

.blogDSub{
  margin: 0;
  color: rgba(11,27,42,.72);
  font-size: 15px;
  line-height: 1.75;
  max-width: 80ch;
}

/* author row */
.blogDAuthor{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(11,27,42,.10);
  padding-top: 14px;
}

.blogDAuthor__avatar{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(11,27,42,.10);
  background: #fff;
}

.blogDAuthor__info{
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 180px;
}
.blogDAuthor__info strong{
  font-weight: 900;
  font-size: 14px;
}
.blogDAuthor__info span{
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,27,42,.62);
}

.blogDShare{
  display: flex;
  gap: 8px;
  align-items: center;
}
.blogDShare__btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.90);
  color: rgba(11,27,42,.74);
}
.blogDShare__btn:hover{
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  border-color: rgba(47,121,200,.25);
}

/* hero image */
.blogDHero{
  margin: 0;
  border-top: 1px solid rgba(11,27,42,.10);
  border-bottom: 1px solid rgba(11,27,42,.10);
  background: #fff;
}
.blogDHero img{
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.blogDCaption{
  padding: 10px 20px 12px;
  font-size: 12px;
  color: rgba(11,27,42,.62);
  font-weight: 800;
}

/* content */
.blogDContent{
  padding: 18px 20px 6px;
  color: rgba(11,27,42,.78);
  font-size: 15px;
  line-height: 1.9;
}
.blogDContent p{ margin: 0 0 14px; }

.blogDContent h2{
  margin: 18px 0 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  color: rgba(11,27,42,.92);
}
.blogDContent h3{
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(11,27,42,.92);
}
.blogDContent ul{
  margin: 8px 0 16px 18px;
  padding: 0;
}
.blogDContent li{ margin: 6px 0; }

/* quote */
.blogDQuote{
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 260px at 20% 20%, rgba(47,121,200,.12), transparent 60%),
    radial-gradient(700px 260px at 80% 30%, rgba(255,204,66,.14), transparent 55%),
    rgba(255,255,255,.90);
  font-weight: 900;
  color: rgba(11,27,42,.86);
}

/* callout */
.blogDCallout{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 28px rgba(9,30,66,.08);
  margin: 14px 0 18px;
}
.blogDCallout__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  font-size: 18px;
  flex: 0 0 auto;
}
.blogDCallout strong{
  display: block;
  font-weight: 900;
  margin-bottom: 2px;
}
.blogDCallout p{
  margin: 0;
  color: rgba(11,27,42,.72);
  font-size: 14px;
  line-height: 1.6;
}

/* footer of article */
.blogDFoot{
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(11,27,42,.10);
  display: grid;
  gap: 12px;
}

.blogDTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blogDChip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.12);
  background: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,27,42,.76);
}

.blogDNav{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.blogDNav__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(11,27,42,.12);
}
.blogDNav__btn--ghost{
  background: rgba(255,255,255,.84);
  color: rgba(11,27,42,.84);
}
.blogDNav__btn--primary{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  color: #fff;
  border-color: rgba(47,121,200,.30);
  box-shadow: 0 16px 32px rgba(47,121,200,.20);
}

/* Sidebar */
.blogDSide{
  display: grid;
  gap: 14px;
}

.sideCard{
  border-radius: 22px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 16px;
}

.sideCard__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.sideToc{
  display: grid;
  gap: 8px;
}
.sideToc a{
  text-decoration: none;
  color: rgba(11,27,42,.78);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
}
.sideToc a:hover{
  background: rgba(47,121,200,.10);
  color: var(--blue2);
  border-color: rgba(47,121,200,.22);
}

.sideNote{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(11,27,42,.58);
  line-height: 1.5;
}

.sidePost{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,42,.10);
  background: rgba(255,255,255,.88);
  text-decoration: none;
  color: inherit;
  margin-top: 10px;
}
.sidePost__img{
  width: 64px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(11,27,42,.10);
}
.sidePost__meta{
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: rgba(11,27,42,.58);
  margin-bottom: 2px;
}
.sidePost__title{
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.sideCta{
  border-radius: 22px;
  border: 1px solid rgba(11,27,42,.10);
  background:
    radial-gradient(700px 260px at 20% 20%, rgba(47,121,200,.12), transparent 60%),
    radial-gradient(700px 260px at 80% 30%, rgba(255,204,66,.14), transparent 55%),
    rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 16px;
}

.sideCta__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.sideCta__text{
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(11,27,42,.72);
  line-height: 1.6;
}

/* responsive */
@media (max-width: 980px){
  .blogFeat{ grid-template-columns: 1fr; }
  .blogFeat__media{ min-height: 220px; }
  .blogGrid{ grid-template-columns: 1fr; }
  .blogPager{ flex-direction: column; }
   .blogDLayout{ grid-template-columns: 1fr; }
  .blogDHero img{ height: 240px; }
  .blogDAuthor{ flex-wrap: wrap; }
}



/* ===== MOBILE: arrow points down ===== */
@media (max-width: 980px){
  .railCard.active::after{
    right: 14px;            /* or set to 50% if you want centered */
    top: auto;
    bottom: 10px;
    transform: rotate(45deg); /* down arrow "v" */
  left: 50%;
right: auto;
transform: translateX(-50%) rotate(45deg);
  
  }
  
  .fpShell{ grid-template-columns: 1fr; }
  .fpHero{ padding: 22px; }
  .fpHero__art{ display:none; }
  .fpCard__head{ padding: 18px 18px 14px; }
  .fpCard__body{ padding: 18px; }
   .loginShell{ grid-template-columns: 1fr; }
  .loginHero{ padding: 22px; }
  .loginHero__art{ display:none; }
  .loginCard__head{ padding: 18px 18px 14px; }
  .loginCard__body{ padding: 18px; }
  
   .regShell{ grid-template-columns: 1fr; }
  .regHero{ padding: 22px; }
  .regHero__art{ display:none; }
  .regCard__head{ padding: 18px 18px 14px; }
  .regCard__body{ padding: 18px; }
  .regGrid{ grid-template-columns: 1fr; }
}

/* Optional: make text pop only on active (no borders/shadows) */
.railCard.active .railCard__title,
.railCard.active .railCard__age,
.railCard.active .railCard__sub{
  color: #fff; /* or whatever looks best on active bg */
}


/* Ensure text stacks nicely */
.railCard__title,
.railCard__age,
.railCard__sub{
  margin: 0;
  line-height: 1.15;
}
.aboutHero__inner,
  .aboutStory__inner{
    grid-template-columns: 1fr;
  }
  .aboutStack{
    min-height: 380px;
  }
  .aboutPhoto--b{
    position: static;
    width: 100%;
    height: 180px;
    margin-top: 12px;
  }
  .aboutStats{
    position: static;
    margin-top: 12p
  }
/* Optional: spacing between lines */
.railCard__title{ font-weight: 900; letter-spacing: .8px; }
.railCard__age{ font-weight: 900; font-size: 22px; margin-top: 4px; }
.railCard__sub{ font-weight: 700; margin-top: 4px; opacity: .95; }
.railCard__title{ position: relative; display:block; font-weight: 900; letter-spacing: .8px; }
.railCard__age{
  position: relative;
  display:block;
  font-weight: 900;
  font-size: 22px;
  margin-top: 2px;
  color: rgba(255,204,66,.98);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.railCard__sub{ position: relative; display:block; margin-top: 4px; font-weight: 700; opacity: .95; }

/* Content panels */
.block{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 16px;
}

.block__head{
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.block__title{ margin: 0; font-size: 22px;color: #0f75bc;
    font-weight: 600; }
.block__sub{ margin: 0; color: var(--muted); font-weight: 600; font-size: 14px; }
.block__head{
  display: grid;
  grid-template-columns: 1fr auto; /* left + right */
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.block__headLeft{
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom:10px;
}

/* Force button to right top */
.viewAllBtn{
  justify-self: end;     /* ✅ right side */
  align-self: start;     /* ✅ top aligned */
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.viewAllBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
  background: rgba(47,121,200,.08);
}


/* Cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.digi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 30px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 44px rgba(0,0,0,.14);
}

.card__media{
  height: 164px;
  display:grid;
  place-items:center;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(160px 100px at 35% 35%, rgba(47,121,200,.18), transparent 60%),
    linear-gradient(180deg, rgba(47,121,200,.10), rgba(255,255,255,0));
}
.card__media img{
  width: 74%;
  max-height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.18));
  transition: transform .2s ease;
  text-align:center;
}
.card:hover .card__media img{
  transform: scale(1.04) rotate(-.6deg);
}

.card__body{ padding: 12px; text-align: center;}
.card__title{ margin: 0 0 6px; font-size: 15px; line-height: 1.15; font-weight: 600;}
.card__meta{ margin: 0 0 25px; color: var(--muted); font-weight: 700; font-size: 13px; }

.card__actions{ display:flex; gap: 10px; }

.btnMini{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  cursor:pointer;
  font-size:15px;
  font-weight: 500;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btnMini--ghost{ background: rgba(255,255,255,.82); }
.btnMini--primary{ background: linear-gradient(180deg, var(--yellow), var(--yellow2)); }
.btnMini:hover{ transform: translateY(-2px); box-shadow: 0 14px 24px rgba(0,0,0,.12); }
.btnMini:active{ transform: translateY(0); }

/* CTA */
.cta{
  border-radius: 22px;
  background:
    radial-gradient(520px 240px at 20% 30%, rgba(255,204,66,.22), transparent 60%),
    radial-gradient(520px 240px at 80% 20%, rgba(47,121,200,.18), transparent 60%),
    rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  padding: 18px;
}
.cta__inner{ display:flex; flex-direction: column; gap: 10px; align-items:center; text-align:center; }
.cta__title{ margin:0; font-size: 22px; }
.cta__sub{ margin:0; color: var(--muted); font-weight: 700; }
.cta__actions{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:center; }

/* Footer */
.siteFooter{
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}
.siteFooter__inner{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  color: rgba(11,27,42,.78);
  font-weight: 700;
}
.siteFooter__links{ display:flex; gap: 12px; }
.siteFooter__links a{
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .18s ease, transform .18s ease;
}
.siteFooter__links a:hover{
  background: rgba(47,121,200,.10);
  transform: translateY(-1px);
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.isVisible{ opacity: 1; transform: translateY(0); }

#main{
  position: relative;
  background-image: url("../imgs/bg.jpg");
  background-repeat: repeat;          /* change to no-repeat if you want */
  background-position: center top;
  background-size: cover;             /* or "auto" if it's a pattern */
  background-attachment: fixed;       /* parallax feel */
  min-height: 100%;
}

/* Optional overlay so content stays readable */
#main::before{
  content: "";
  position: absolute;
  inset: 0;
 /* background-image: url("../imgs/dotted.png");*/
  background-repeat: repeat-y;        /* repeat only vertically */
  background-position: 18% center;    /* 25% from left, vertically centered */
  background-size: auto;              /* use the image width as-is */
  pointer-events: none;
  z-index: 0;
  filter: opacity(.5);   /* 50% opacity */
}

/* Ensure sections appear above overlay */
#main > *{
  position: relative;
  z-index: 1;
}

/*product detail page*/

:root{
  --pdp-bg: #eaf6ff;
  --pdp-ink: #0b1b2a;
  --pdp-muted: rgba(11,27,42,.72);
  --pdp-white: #fff;

  --pdp-stroke: rgba(11,27,42,.12);
  --pdp-shadow: 0 18px 40px rgba(9,30,66,.14);

  --pdp-blue: #2f79c8;
  --pdp-blue2: #1f62b1;
  --pdp-yellow: #ffcc42;
}

.pdp{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(47,121,200,.18), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,204,66,.18), transparent 55%),
    var(--pdp-bg);
  color: var(--pdp-ink);
  padding: 22px 0 40px;
}

.pdp__wrap{
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.pdp__breadcrumb ol{
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0 0 14px;
  color: var(--pdp-muted);
  font-size: 14px;
}
.pdp__breadcrumb li{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.pdp__breadcrumb li + li::before{
  content: "›";
  opacity: .6;
}
.pdp__breadcrumb a{
  color: inherit;
  text-decoration: none;
}
.pdp__breadcrumb a:hover{ text-decoration: underline; }

.pdp__top{
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 22px;
  align-items: start;
}

.pdp__head{
  margin-bottom: 12px;
}

.pdp__age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdf7a, #ffbf2f);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
  font-size: 14px;
}

.pdp__title{
  margin: 10px 0 6px;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pdp__titleSub{
  font-weight: 600;
  font-size: .55em;
  color: var(--pdp-muted);
}

.pdp__oneLiner{
  margin: 0 0 10px;
  color: var(--pdp-muted);
  font-size: 16px;
  max-width: 66ch;
}

.pdp__rating{
  display: flex;
  align-items: center;
  gap: 10px;
}
.stars{
  display: inline-flex;
  gap: 3px;
  font-size: 18px;
  line-height: 1;
}
.star{ opacity: .25; }
.star.isOn{ opacity: 1; }
.star.isHalf{ opacity: .65; }
.pdp__ratingMeta{
  color: var(--pdp-muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.pdp__reviewsLink{
  color: var(--pdp-blue2);
  text-decoration: none;
  font-weight: 600;
}
.pdp__reviewsLink:hover{ text-decoration: underline; }
.dot{ opacity: .5; }

/* ===== Gallery ===== */
.gallery{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--pdp-shadow);
  backdrop-filter: blur(10px);
}
.gallery__stage{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 1px solid var(--pdp-stroke);
}
.gallery__img{
  transition: opacity .22s ease, transform .22s ease;
  opacity: 1;
  transform: scale(1);
}
.gallery__img.isFading{
  opacity: 0;
  transform: scale(1.01);
}

.gallery__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.18);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  font-size: 26px;
  cursor: pointer;
}
.gallery__nav:hover{ transform: translateY(-50%) scale(1.04); }
.gallery__nav:active{ transform: translateY(-50%) scale(.98); }
.gallery__nav--prev{ left: 12px; }
.gallery__nav--next{ right: 12px; }

.gallery__thumbs{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gallery__thumb{
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.12);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.gallery__thumb img{
    width: 60px;
    height: 72px;
    object-fit: cover;
    margin: auto;
    display: block;
}
.gallery__thumb.isActive{
  outline: 3px solid rgba(47,121,200,.35);
  border-color: rgba(47,121,200,.55);
}

/* ===== Buy card ===== */
.buyCard{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  box-shadow: var(--pdp-shadow);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.buyTabs{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid var(--pdp-stroke);
}
.buyTabs__tab{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 12px;
  font-weight: 800;
  color: rgba(11,27,42,.8);
  cursor: pointer;
  position: relative;
}
.buyTabs__tab:hover{ background: rgba(47,121,200,.08); }
.buyTabs__tab.isActive{
  background: linear-gradient(180deg, rgba(47,121,200,.95), rgba(31,98,177,.92));
  color: #fff;
}
.buyPanel{
  display: none;
  padding: 16px 16px 18px;
}
.buyPanel.isActive{ display: block; }

.buyCard__title{
  margin: 6px 0 12px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.buyCard__note{
  margin: 0 0 12px;
  color: var(--pdp-muted);
}

.volumes{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.volume{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,27,42,.10);
}
.volume__left{
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.volume__thumb{
 width: 56px;
    height: 62px;
    border-radius: 10px;
    /* border: 1px solid rgba(11, 27, 42, .10); */
    object-fit: cover;
}
.volume__meta{ min-width: 0; }
.volume__name{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.volume__price{
  font-weight: 900;
  color: #a66400;
  font-size: 14px;
  margin-top: 2px;
}

.qty{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.14);
  overflow: hidden;
  background: #fff;
}
.qty__btn{
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}
.qty__btn:hover{ background: rgba(47,121,200,.08); }
.qty__input{
  width: 48px;
  height: 34px;
  border: 0;
  text-align: center;
  font-weight: 900;
  outline: none;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.buyCard__summary{
  border-top: 1px dashed rgba(11,27,42,.22);
  padding-top: 12px;
  margin-top: 6px;
}.summaryRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
}

.dashed {
  border-bottom: 1px dashed #ddd;
}

.summaryHint {
  font-size: 12px;
  color: #777;
  margin: 2px 0 0;
}

.summaryTotal {
  font-size: 16px;
  font-weight: 600;
  padding-top: 10px;
}

.buyCard__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 14px;
}

.btn{
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}
.btn--primary{
  background: linear-gradient(180deg, #ffdb73, #ffbf2f);
  box-shadow: 0 14px 26px rgba(255, 191, 47, .35);
}
.btn--secondary{
  background: linear-gradient(180deg, rgba(47,121,200,.95), rgba(31,98,177,.92));
  color: #fff;
  box-shadow: 0 14px 26px rgba(47,121,200,.24);
}
.btn--ghost{
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(11,27,42,.14);
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

/* Offer card */
.offerCard{
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(900px 220px at 10% 15%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(180deg, rgba(255, 246, 224, .98), rgba(255, 236, 196, .92));
  border: 1px solid rgba(166, 100, 0, .22);
  padding: 16px 16px 18px;
  padding-right: 120px; /* space for mascot */
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}

.offerCard__badge{
  font-weight: 1000;
  color: #7a4300;
  font-size: 18px;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.offerCard__zoro{
  position: absolute;
  right: 10px;
  bottom: -6px;
  width: 120px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

.offerList{
  margin: 0 0 10px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.offerList li{
  position: relative;
  padding-left: 30px;
  color: rgba(11,27,42,.85);
  font-weight: 700;
}

.offerList li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  background: rgba(61, 180, 90, .18);
  border: 1px solid rgba(61, 180, 90, .40);
  color: #1d7a34;
}

.offerCard__link{
  text-decoration: none;
  font-weight: 1000;
  color: #1f62b1;
}
.offerCard__link:hover{ text-decoration: underline; }

/* ===== Bottom tabs ===== */
.pdpTabs{
  margin-top: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  box-shadow: var(--pdp-shadow);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.pdpTabs__bar{
  display: flex;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--pdp-stroke);
  overflow-x: auto;
}
.pdpTabs__tab{
  border: 1px solid rgba(11,27,42,.14);
  background: rgba(255,255,255,.85);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.pdpTabs__tab.isActive{
  background: linear-gradient(180deg, rgba(47,121,200,.95), rgba(31,98,177,.92));
  color: #fff;
  border-color: rgba(47,121,200,.35);
}
.pdpTabs__panels{
  padding: 14px 16px 18px;
}
.pdpPanel{ display:none; }
.pdpPanel.isActive{ display:block; }
.pdpPanel h2{ margin: 6px 0 10px; }

.reviewCard{
  border: 1px solid rgba(11,27,42,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  padding: 12px;
}
.reviewCard__title{ font-weight: 1000; margin: 0 0 6px; }
.reviewCard__text{ margin: 0; color: rgba(11,27,42,.8); }

.faq{
  border: 1px solid rgba(11,27,42,.12);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.85);
  margin: 10px 0;
}
.faq summary{
  font-weight: 900;
  cursor: pointer;
}



/* ===== Gallery: vertical thumbnails when product image is tall ===== */
.gallery{
  padding: 14px;

  /* 2-column layout: thumbs left, main image right */
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 15px;
  align-items: start;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  box-shadow: var(--pdp-shadow);
  backdrop-filter: blur(10px);
}

/* Place stage on right */
.gallery__stage{
  grid-column: 2;
  grid-row: 1;

  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative; /* important for arrows */
  background: #fff;
  border: 1px solid var(--pdp-stroke);
}

/* Main image (tall-friendly) */
.gallery__img{
  width: 100%;
  display: block;

  aspect-ratio: auto;                 /* remove fixed ratio */
  height: clamp(480px, 52vh, 620px);  /* control visible height */
  object-fit: contain;                /* show full vertical image */
  background: #b2dafd;                /* clean background behind image */

  /* smooth transition */
  transition: opacity .22s ease, transform .22s ease;
  opacity: 1;
  transform: scale(1);

  position: relative;
  z-index: 1; /* keep image below arrows */
}

/* If you are using fading class in JS */
.gallery__img.isFading{
  opacity: 0;
  transform: scale(1.01);
}

/* Nav arrows (fix: always visible + above image) */
.gallery__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,42,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);

  display: grid;
  place-items: center;
  font-size: 26px;
  cursor: pointer;

  z-index: 5;                 /* critical */
  opacity: 1 !important;       /* critical */
  visibility: visible !important;
  pointer-events: auto;
}

.gallery__nav:hover{ transform: translateY(-50%) scale(1.04); }
.gallery__nav:active{ transform: translateY(-50%) scale(.98); }
.gallery__nav--prev{ left: 12px; }
.gallery__nav--next{ right: 12px; }

/* Thumbs rail on left */
.gallery__thumbs{
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

/* Thumb button */
.gallery__thumb{
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11,27,42,.12);
  background: #fff;
  cursor: pointer;
  position: relative;
}

.gallery__thumb img{
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
}

.gallery__thumb.isActive{
  outline: 3px solid rgba(47,121,200,.35);
  border-color: rgba(47,121,200,.55);
}

/* ===== SEO Box ===== */
.seoBox{
  margin-top: 18px;
  padding: 18px 0 10px;
}
.seoBox__inner{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.seoBox__inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 18% 20%, rgba(255,204,66,.20), transparent 60%),
    radial-gradient(520px 240px at 80% 40%, rgba(47,121,200,.16), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.seoBox__title{
  position: relative;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
}
.seoBox__text{
  position: relative;
  color: rgba(11,27,42,.78);
  font-weight: 600;
  line-height: 1.6;
}
.seoBox__text p{ margin: 0 0 10px; }
.seoBox__text p:last-child{ margin-bottom: 0; }

/* ===== Footer ===== */
.footer{
  margin-top: 14px;
  background: rgba(255,255,255,.86);
  border-top: 1px solid rgba(0,0,0,.10);
  padding: 18px 0 10px;
}

.footer__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.footerBrand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.footerBrand__logo{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(47,121,200,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.footerBrand__text{
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.footerBrand__text strong{
  font-size: 16px;
  letter-spacing: .2px;
}
.footerBrand__text span{
  font-size: 13px;
  color: rgba(11,27,42,.70);
  font-weight: 700;
}

.footerNav{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 10px;
}
.footerNav a{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.footerNav a:hover{
  transform: translateY(-2px);
  background: rgba(47,121,200,.08);
  box-shadow: 0 14px 24px rgba(0,0,0,.10);
}

.footerSocial{
  display:flex;
  gap: 10px;
}
.socialBtn{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.74);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.socialBtn i{
  font-size: 16px;
  color: rgba(11,27,42,.84);
}
.socialBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,.12);
}

/* bottom row */
.footer__bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}
.footer__copy{
  margin:0;
  color: rgba(11,27,42,.76);
  font-weight: 400;
       font-size: 14px;
}
.footer__links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:flex-end;
}
.footer__links a{
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(11,27,42,.78);
  font-weight: 400;
      font-size: 14px;
  transition: background .18s ease, transform .18s ease;
}
.footer__links a:hover{
  background: rgba(47,121,200,.08);
  transform: translateY(-1px);
}

/* ===== Buy card head ===== */
.buyCard__head{
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.buyCard__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.buyCard__hint{
  margin: 0;
  color: rgba(11,27,42,.72);
  font-weight: 700;
  font-size: 13px;
}

/* ===== Volumes Grid ===== */
.volGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 12px;
    height: 250px;

    overflow-y: auto;   /* vertical scroll */
    overflow-x: hidden; /* hide horizontal scroll */
}
.buyCard__summary {
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
}

.summaryRow {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}

.summaryHint {
  font-size: 13px;
  color: #777;
  margin: 4px 0 8px;
}

.summaryTotal {
  font-size: 16px;
  font-weight: 600;
  border-top: 1px dashed #ddd;
  padding-top: 8px;
  margin-top: 8px;
}

/* Volume item (toggle button) */
.volItem{
 width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .84);
    padding: 7px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 5px;
    align-items: center;
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.volItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,.10);
}

/* Thumbnail wrapper */
.volItem__thumb {
    width: 30px;
    height: 42px;
    /* border-radius: 12px; */
    /* border: 1px solid rgba(0, 0, 0, .08); */
    /* overflow: hidden; */
    /* background: rgba(0, 0, 0, .04); */
    display: grid;
    place-items: center;
}
.volItem__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder if image missing */
.volItem__thumb.isEmpty{
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(47,121,200,.22), transparent 60%),
    radial-gradient(26px 26px at 70% 70%, rgba(255,204,66,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
}

/* Text - ✅ allow full title visibility */
.volItem__meta{
  min-width: 0;
  display: grid;
  gap: 4px;
}
.volItem__name{
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  color: rgba(11,27,42,.92);

  /* ✅ show full title */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.volItem__price{
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,27,42,.74);
}

/* Selected state */
.volItem.isSelected{
  border-color: rgba(255,184,0,.70);
  background: linear-gradient(180deg, rgba(255,204,66,.36), rgba(255,255,255,.92));
  box-shadow: 0 16px 28px rgba(255,184,0,.16);
}
.volItem.isSelected .volItem__price{
  color: rgba(11,27,42,.86);
}

.comboGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ inline 3 cards */
  gap: 14px;
  margin-top: 14px;
}

/* Individual combo card */
.comboCard{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  box-shadow: 0 16px 30px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.comboCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(0,0,0,.14);
}

/* Badge */
.comboBadge{
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb800, #ffd666);
  color: #1a1a1a;
  letter-spacing: .4px;
}

.comboBadge--alt{
  background: linear-gradient(90deg, #2f79c8, #6fa8e6);
  color: #fff;
}

.comboBadge--gold{
  background: linear-gradient(90deg, #c89b3c, #ffd700);
}

/* Titles */
.comboCard h3{
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 900;
}

.comboSub{
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,27,42,.72);
}

/* List */
.comboList{
  list-style: none;
  padding: 0;
  margin: 6px 0;
  display: grid;
  gap: 6px;
}

.comboList li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,27,42,.82);
}

.comboList i{
  color: #2f79c8;   /* flat blue tick */
  font-size: 14px;
  margin-top: 2px;
}

/* Price row */
.comboPriceRow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.comboMRP{
  text-decoration: line-through;
  font-weight: 800;
  color: rgba(11,27,42,.48);
}

.comboPrice{
  font-size: 18px;
  font-weight: 900;
  color: rgba(11,27,42,.92);
}

/* Button inside combo */
.comboCard .btn{
  margin-top: 8px;
}

/* Note */
.comboNote{
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,27,42,.62);
}


/* ===== What's Inside ===== */
.insideWrap h2{
  margin: 0 0 12px;
}

.insideCards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Each card */
.insideCard{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 14px;

  display: grid;
  grid-template-columns: 46px 1fr; /* ✅ fixed icon column */
  gap: 12px;
  align-items: start;

  box-shadow: 0 16px 30px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.insideCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 38px rgba(0,0,0,.12);
}

/* Icon box (perfect alignment) */
.insideIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(47,121,200,.10);
  border: 1px solid rgba(47,121,200,.16);
}

.insideIcon i{
  font-size: 18px;
  line-height: 1;
  color: rgba(11,27,42,.88);
}

/* Text block */
.insideBody h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}

.insideBody p{
  margin: 0;
  color: rgba(11,27,42,.72);
  font-weight: 700;
  line-height: 1.5;
}


/* ===== Overview Feature List ===== */
.featureList{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.featureList li{
  display: grid;
  grid-template-columns: 46px 1fr; /* ✅ fixed icon column like insideCards */
  gap: 12px;
  align-items: start;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 12px 14px;

  box-shadow: 0 14px 26px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.featureList li:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(0,0,0,.12);
}

/* Icon box */
.featureList .fi{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(47,121,200,.10);
  border: 1px solid rgba(47,121,200,.16);
}

.featureList .fi i{
  font-size: 18px;
  line-height: 1;
  color: rgba(11,27,42,.88);
}

/* Text */
.featureList li span:last-child{
  font-weight: 800;
  color: rgba(11,27,42,.80);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 720px){
  .featureList li{
    grid-template-columns: 44px 1fr;
    padding: 12px;
  }
  .featureList .fi{
    width: 44px;
    height: 44px;
  }
  
    .insideCards{
    grid-template-columns: 1fr;
  }
}
/* Highlighted Combo tab */
.pdpTabs__tab--combo{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;

  border: 1px solid rgba(255,184,0,.55);
  background: linear-gradient(180deg, rgba(255,204,66,.55), rgba(255,255,255,.92));
  box-shadow: 0 14px 26px rgba(255,184,0,.18);

  transform: translateY(-1px);
}

/* small pill (SAVE) */
.pdpTabs__tab--combo .tabPill{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11,27,42,.92);
  color: #fff;
  letter-spacing: .4px;
}

/* glow pulse to pull attention */
.pdpTabs__tab--combo::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,184,0,.45);
  animation: comboPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes comboPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,184,0,.45); }
  60%{ box-shadow: 0 0 0 10px rgba(255,184,0,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,184,0,0); }
}

/* When Combo tab becomes active, keep it strong but stop pulsing */
.pdpTabs__tab--combo.isActive::after{
  animation: none;
  box-shadow: 0 0 0 6px rgba(255,184,0,.18);
}



/* Responsive footer */
@media (max-width: 980px){
  .footer__top{
    flex-direction: column;
    align-items: flex-start;
  }
  .footerNav{ justify-content:flex-start; }
  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__links{ justify-content:flex-start; }
   .volGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ===== Mobile: thumbnails go to bottom like earlier ===== */
@media (max-width: 680px){
  /* IMPORTANT: reset the desktop 2-col grid */
  .gallery{
    display: block;
    padding: 14px;
  }

  .gallery__stage{
    width: 100%;
  }

  .gallery__thumbs{
    margin-top: 12px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;

    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .gallery__thumb img{
    height: 72px;
  }

  .gallery__img{
    height: auto;
    object-fit: cover;
    background: #fff;
  }
}

/* Smaller phones */
@media (max-width: 520px){
  .gallery__thumbs{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  html, body{
   max-width: 100%;
    overflow-x: hidden;
  }
  
  .nav__links{ display:none; }
  .menuBtn{ display:grid; place-items:center; } /* ✅ ensure visible */
  .brand__name{ display:none; }

  /* Search expands smaller on tablet */
  .search.isOpen .search__form{ width: 200px; }

  .layout{
    grid-template-columns: 1fr;
  }
#main{
    background-attachment: scroll;
    background-position: center top;
  }
  /* Rail becomes horizontal scroll (still visible, not removed) */
  .rail{
    position: static;
    top: auto;
    display:flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .railCard{
    min-width: 220px;
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  
  .digi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
   .pdp__top{
    grid-template-columns: 1fr;
  }
  .buyCard{
    position: static;
  }
  .gallery__thumbs{
    grid-template-columns: repeat(4, 1fr);
  }
  
  .footer__top{
    flex-direction: column;
    align-items: flex-start;
  }
  .footerNav{ justify-content:flex-start; }
  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__links{ justify-content:flex-start; }
}

@media (max-width: 560px){
  /* Search becomes full row under header when open */
  .search{
    position: relative;
  }
  .search.isOpen .search__form{
    width: 220px;
  }
  .digi-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }

  .hero{
    min-height: 320px;
  }
  .hero::before{
    background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 60%, rgba(255,255,255,.30) 100%);
  }
  .hero {background: url(../imgs/m-bg.jpg) center / cover no-repeat;}
  .brand__logo {width:110px}
  .nav__actions {display: flex; align-items: center;  gap: 7px;}
  .search { gap: 2px;}
  .brand{min-width: 140px;}
   .gallery__thumbs{
    grid-template-columns: repeat(3, 1fr);
  }
  .buyCard__actions{
    grid-template-columns: 1fr;
  }
  
  .block__head{
    grid-template-columns: 1fr auto;
  }
  .viewAllBtn{
    padding: 9px 12px;
  }
  .volGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
   .comboGrid{
    grid-template-columns: 1fr;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
/*digital education*/
/* ===== List layout ===== */
.list{
  display: grid;
  gap: 14px; /* spacing between rows */
}
/* ===== eBook Hero Banner ===== */
.ebookHero{
  position: relative;
  padding: 44px 0;
  overflow: hidden;

  /* ✅ You said you already have bg image */
 /* background-image: url("../imgs/bg.jpg"); /* change filename if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* soft overlay for text readability (optional) */
/*.ebookHero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.48) 42%,
    rgba(255,255,255,.12) 70%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}*/

.ebookHero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: center;
}

.ebookHero__title{
  margin: 0 0 12px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.05;
  font-weight: 1000;
  letter-spacing: -0.6px;
  color: rgba(11,27,42,.95);
}

.ebookHero__sub{
  margin: 0 0 18px;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 800;
  color: rgba(11,27,42,.74);
  max-width: 52ch;
}

.ebookHero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.heroBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 1000;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}

.heroBtn--primary{
  background: rgba(47,121,200,.94);
  color: #fff;
  box-shadow: 0 16px 30px rgba(47,121,200,.22);
}
.heroBtn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 38px rgba(47,121,200,.28);
}

.heroBtn--ghost{
  background: rgba(255,255,255,.78);
  color: rgba(11,27,42,.90);
}
.heroBtn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(0,0,0,.10);
}

.ebookHero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-weight: 900;
  color: rgba(11,27,42,.66);
  font-size: 13px;
}

.ebookHero__meta i{
  margin-right: 6px;
  color: rgba(255,184,0,.95);
}

/* Right image */
.ebookHero__right{
  display: flex;
  justify-content: flex-end;
}

.ebookHero__right img{
  width: min(520px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.20));
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 900px){
  .ebookHero{
    padding: 34px 0;
  }
  .ebookHero__inner{
    grid-template-columns: 1fr;
  }
  .ebookHero__right{
    justify-content: center;
  }
  .ebookHero::before{
    background: rgba(255,255,255,.55);
  }
}

/* ===== Perks Bar (after hero) ===== */
.perkBar{
  padding: 0 0 22px;
  margin-top: -18px; /* pulls up into hero like your screenshot */
}

.perkBar__wrap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;

  border-radius: 20px;
  padding: 12px;
  /*background: rgba(255,255,255,.58);*/
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(5px);
  overflow: hidden;
}

/* Each perk */
.perk{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  position: relative;
}

.perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top: 14px;
  bottom: 14px;
  right: 0;
  width: 1px;
  background: rgba(11,27,42,.10); /* vertical divider */
}

/* Icon bubble */
.perk__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(47,121,200,.10);
  border: 1px solid rgba(47,121,200,.14);
}

.perk__icon i{
  font-size: 18px;
  line-height: 1;
  color: rgba(11,27,42,.88);
}

/* Text */
.perk__title{
  font-weight: 1000;
  font-size: 16px;
  line-height: 1.05;
  color: rgba(11,27,42,.92);
}
.perk__sub{
  margin-top: 3px;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(11,27,42,.65);
}

/* Hover micro animation */
.perk:hover .perk__icon{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(47,121,200,.16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pad30{padding-top:30px; display:block}

/* Responsive */
@media (max-width: 900px){
  .perkBar__wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .perk:nth-child(2)::after{ display:none; }
}

@media (max-width: 560px){
  .perkBar{
    margin-top: -10px;
  }
  .perkBar__wrap{
    grid-template-columns: 1fr;
  }
  .perk::after{ display:none; }
}