/* Design Polish v1 */
:root{
  --safe-max: 1220px;
}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(15,23,42,.94) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.wrap.nav{
  max-width:var(--safe-max);
  min-height:82px;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:10px;
  padding-bottom:10px;
}

.brand{
  flex:0 0 auto;
  white-space:nowrap;
  line-height:1.25;
  font-size:30px !important;
  font-weight:900;
  letter-spacing:-.5px;
  color:#facc15 !important;
  text-decoration:none;
}

.links{
  flex:1;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:8px 14px;
  flex-wrap:wrap;
}

.links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 10px;
  border-radius:14px;
  color:#e5e7eb !important;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  transition:.18s ease;
}

.links a:hover{
  background:rgba(255,255,255,.07);
  color:#facc15 !important;
}

.links .installLink,
.installLink{
  background:#facc15 !important;
  color:#111827 !important;
  padding:10px 18px !important;
  border-radius:15px !important;
  box-shadow:0 10px 28px rgba(250,204,21,.18);
}

/* Hero */
section:first-of-type{
  padding-top:58px;
}

.heroBox{
  max-width:var(--safe-max);
  margin:auto;
  border-radius:34px !important;
  padding:50px 48px !important;
  border:1px solid rgba(250,204,21,.18) !important;
  box-shadow:0 25px 80px rgba(0,0,0,.28);
  background:
    radial-gradient(circle at 12% 10%, rgba(250,204,21,.10), transparent 32%),
    linear-gradient(135deg, rgba(30,41,59,.98), rgba(17,24,39,.98)) !important;
}

.heroBox .tag,
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(250,204,21,.35);
  background:rgba(250,204,21,.08);
  color:#facc15 !important;
  border-radius:999px;
  padding:8px 18px;
  font-size:15px;
  font-weight:900;
}

.heroBox h1{
  margin:22px 0 12px !important;
  font-size:54px !important;
  line-height:1.18 !important;
  letter-spacing:-1px;
}

.heroBox p{
  max-width:900px;
  font-size:21px !important;
  color:#e5e7eb;
  line-height:2;
}

.heroBox .btn,
.btn{
  border-radius:16px !important;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px !important;
  font-weight:900;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.heroBox .btn2,
.btn2{
  background:#111827 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12);
}

/* Search */
.searchBox,
form.searchBox{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:26px;
}

.searchBox input{
  min-height:56px;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:#111827 !important;
  color:#fff !important;
  padding:0 18px !important;
  font-size:17px !important;
}

.searchBox button{
  min-width:92px;
  min-height:56px;
  border-radius:18px !important;
}

/* Stats */
.heroStats,
.stats,
.statsGrid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:24px;
}

.heroStat,
.stat,
.countBox{
  border-radius:18px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#111827 !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.heroStat strong,
.stat strong,
.count{
  display:block;
  font-size:34px !important;
  padding:14px 10px 6px;
  text-align:center;
}

.heroStat span,
.stat span{
  display:block;
  padding:0 10px 16px;
  text-align:center;
  color:#e5e7eb;
  font-weight:800;
}

/* Sections and cards */
section{
  padding-top:55px;
  padding-bottom:20px;
}

.sectionTitle,
section h2{
  font-size:38px !important;
  line-height:1.3;
  margin-bottom:28px !important;
}

.card,
.lesson,
.pathLesson,
.faqItem,
.continueCard,
.pageBox,
.subBox{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 16px 45px rgba(0,0,0,.20);
}

.card,
.lesson,
.pathLesson{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card:hover,
.lesson:hover,
.pathLesson:hover{
  transform:translateY(-3px);
  border-color:rgba(250,204,21,.25) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}

.card h3,
.lesson strong{
  font-size:21px !important;
  line-height:1.6;
}

/* Footer */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:28px 16px !important;
  color:#cbd5e1;
}

/* Mobile */
@media(max-width:850px){
  .wrap.nav{
    flex-direction:column;
    min-height:auto;
    padding:18px 14px;
    gap:14px;
  }

  .brand{
    font-size:30px !important;
    text-align:center;
  }

  .menuToggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:64px;
    height:56px;
    border-radius:16px;
    background:#facc15 !important;
    color:#111827 !important;
    border:0;
    font-size:28px;
    font-weight:900;
  }

  .links{
    width:100%;
    display:none !important;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:rgba(15,23,42,.96);
  }

  .links.open,
  .nav.open .links,
  body.menuOpen .links{
    display:flex !important;
  }

  .links a{
    width:100%;
    min-height:56px;
    background:rgba(255,255,255,.05);
    font-size:19px;
  }

  .links .installLink{
    width:100%;
  }

  section:first-of-type{
    padding-top:30px;
  }

  .heroBox{
    padding:34px 22px !important;
    border-radius:28px !important;
    text-align:center;
  }

  .heroBox h1{
    font-size:38px !important;
  }

  .heroBox p{
    font-size:20px !important;
  }

  .searchBox,
  form.searchBox{
    flex-direction:row;
    gap:10px;
  }

  .searchBox input{
    min-width:0;
    flex:1;
  }

  .searchBox button{
    min-width:76px;
  }

  .heroStats,
  .stats,
  .statsGrid{
    grid-template-columns:1fr;
  }

  .sectionTitle,
  section h2{
    font-size:34px !important;
    text-align:center;
  }
}

@media(min-width:851px){
  .menuToggle{
    display:none !important;
  }
}

/* Design Polish v2 - Hero balance and stats fix */

/* make main hero centered and premium */
.heroBox{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

.heroBox:before{
  content:"";
  position:absolute;
  left:55px;
  top:50%;
  width:310px;
  height:310px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(250,204,21,.18), rgba(250,204,21,.03) 48%, transparent 70%);
  border:1px solid rgba(250,204,21,.14);
  opacity:.9;
}

.heroBox:after{
  content:"دبلوم";
  position:absolute;
  left:120px;
  top:50%;
  width:180px;
  height:180px;
  transform:translateY(-50%);
  border-radius:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.72);
  border:1px solid rgba(250,204,21,.22);
  color:#facc15;
  font-size:34px;
  font-weight:900;
  box-shadow:0 30px 80px rgba(0,0,0,.30);
}

.heroBox > *{
  position:relative;
  z-index:2;
  max-width:820px;
}

.heroBox h1{
  text-shadow:0 12px 35px rgba(0,0,0,.28);
}

.heroBox p{
  text-wrap:balance;
}

/* better hero buttons spacing */
.heroBox .btn{
  margin-top:12px;
  margin-inline-start:8px;
}

/* improve search inside hero */
.heroBox form,
.heroBox .searchBox{
  width:100%;
  max-width:760px;
  margin-top:28px !important;
}

.heroBox input[type="text"],
.heroBox input[type="search"],
.heroBox .searchBox input{
  height:58px !important;
  font-size:18px !important;
  border-radius:18px !important;
}

.heroBox button,
.heroBox .searchBox button{
  height:58px !important;
  font-size:16px !important;
  font-weight:900 !important;
}

/* fix stats: no yellow bars */
.heroStats,
.stats,
.statsGrid{
  max-width:760px;
  width:100%;
}

.heroStat,
.stat,
.countBox{
  padding:22px 16px !important;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.96)) !important;
  border:1px solid rgba(250,204,21,.16) !important;
}

.heroStat strong,
.stat strong,
.count,
.heroStat .count,
.stat .count{
  background:transparent !important;
  color:#facc15 !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font-size:40px !important;
  line-height:1.1 !important;
  box-shadow:none !important;
}

.heroStat span,
.stat span,
.countBox span,
.heroStat p,
.stat p{
  color:#e5e7eb !important;
  font-size:16px !important;
  font-weight:800 !important;
  margin:0 !important;
  padding:0 !important;
}

/* more elegant nav on desktop */
@media(min-width:851px){
  .wrap.nav{
    min-height:96px;
  }

  .brand{
    font-size:32px !important;
  }

  .links{
    gap:6px 10px;
  }

  .links a{
    font-size:15px;
    padding:7px 9px;
  }

  .links .installLink{
    padding:9px 17px !important;
  }
}

/* mobile hero cleanup */
@media(max-width:850px){
  .heroBox{
    min-height:auto;
    align-items:center;
  }

  .heroBox:before,
  .heroBox:after{
    display:none;
  }

  .heroBox form,
  .heroBox .searchBox{
    max-width:100%;
  }

  .heroBox .btn{
    margin:6px 4px;
  }

  .heroStat,
  .stat,
  .countBox{
    padding:24px 14px !important;
  }
}

/* Design Polish v2 - Hero balance and stats fix */

/* make main hero centered and premium */
.heroBox{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

.heroBox:before{
  content:"";
  position:absolute;
  left:55px;
  top:50%;
  width:310px;
  height:310px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(250,204,21,.18), rgba(250,204,21,.03) 48%, transparent 70%);
  border:1px solid rgba(250,204,21,.14);
  opacity:.9;
}

.heroBox:after{
  content:"دبلوم";
  position:absolute;
  left:120px;
  top:50%;
  width:180px;
  height:180px;
  transform:translateY(-50%);
  border-radius:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.72);
  border:1px solid rgba(250,204,21,.22);
  color:#facc15;
  font-size:34px;
  font-weight:900;
  box-shadow:0 30px 80px rgba(0,0,0,.30);
}

.heroBox > *{
  position:relative;
  z-index:2;
  max-width:820px;
}

.heroBox h1{
  text-shadow:0 12px 35px rgba(0,0,0,.28);
}

.heroBox p{
  text-wrap:balance;
}

/* better hero buttons spacing */
.heroBox .btn{
  margin-top:12px;
  margin-inline-start:8px;
}

/* improve search inside hero */
.heroBox form,
.heroBox .searchBox{
  width:100%;
  max-width:760px;
  margin-top:28px !important;
}

.heroBox input[type="text"],
.heroBox input[type="search"],
.heroBox .searchBox input{
  height:58px !important;
  font-size:18px !important;
  border-radius:18px !important;
}

.heroBox button,
.heroBox .searchBox button{
  height:58px !important;
  font-size:16px !important;
  font-weight:900 !important;
}

/* fix stats: no yellow bars */
.heroStats,
.stats,
.statsGrid{
  max-width:760px;
  width:100%;
}

.heroStat,
.stat,
.countBox{
  padding:22px 16px !important;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.96)) !important;
  border:1px solid rgba(250,204,21,.16) !important;
}

.heroStat strong,
.stat strong,
.count,
.heroStat .count,
.stat .count{
  background:transparent !important;
  color:#facc15 !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font-size:40px !important;
  line-height:1.1 !important;
  box-shadow:none !important;
}

.heroStat span,
.stat span,
.countBox span,
.heroStat p,
.stat p{
  color:#e5e7eb !important;
  font-size:16px !important;
  font-weight:800 !important;
  margin:0 !important;
  padding:0 !important;
}

/* more elegant nav on desktop */
@media(min-width:851px){
  .wrap.nav{
    min-height:96px;
  }

  .brand{
    font-size:32px !important;
  }

  .links{
    gap:6px 10px;
  }

  .links a{
    font-size:15px;
    padding:7px 9px;
  }

  .links .installLink{
    padding:9px 17px !important;
  }
}

/* mobile hero cleanup */
@media(max-width:850px){
  .heroBox{
    min-height:auto;
    align-items:center;
  }

  .heroBox:before,
  .heroBox:after{
    display:none;
  }

  .heroBox form,
  .heroBox .searchBox{
    max-width:100%;
  }

  .heroBox .btn{
    margin:6px 4px;
  }

  .heroStat,
  .stat,
  .countBox{
    padding:24px 14px !important;
  }
}

/* Design Polish v3 - clean hero layout */

/* إزالة الزخرفة التي دخلت فوق الأزرار */
.heroBox:before,
.heroBox:after{
  display:none !important;
}

/* ترتيب الهيرو بشكل نظيف */
.heroBox{
  min-height:auto !important;
  align-items:stretch !important;
  text-align:right !important;
  padding:56px 52px !important;
  max-width:1120px !important;
}

.heroBox > *{
  max-width:100% !important;
}

.heroBox .tag{
  width:max-content;
  margin-bottom:12px;
}

.heroBox h1{
  font-size:56px !important;
  margin:18px 0 16px !important;
}

.heroBox p{
  max-width:850px !important;
  margin:0 0 22px !important;
  font-size:21px !important;
  line-height:2 !important;
}

/* الأزرار جنب بعض وبعيد عن البحث */
.heroBox > a.btn{
  display:inline-flex !important;
  width:auto !important;
  margin:8px 0 18px 10px !important;
  vertical-align:middle;
}

/* مربع البحث */
.heroBox .searchBox,
.heroBox form{
  margin-top:16px !important;
  max-width:100% !important;
}

.heroBox .searchBox input,
.heroBox input[type="text"],
.heroBox input[type="search"]{
  height:58px !important;
  font-size:17px !important;
}

.heroBox .searchBox button,
.heroBox button{
  height:58px !important;
}

/* الإحصائيات */
.heroStats,
.stats,
.statsGrid{
  max-width:100% !important;
  margin-top:28px !important;
  gap:18px !important;
}

.heroStat,
.stat,
.countBox{
  min-height:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.heroStat strong,
.stat strong,
.count{
  font-size:42px !important;
  margin-bottom:10px !important;
}

/* خلفية أعلى الصفحة */
section:first-of-type{
  padding-top:42px !important;
}

/* موبايل */
@media(max-width:850px){
  .heroBox{
    padding:34px 22px !important;
    text-align:center !important;
  }

  .heroBox .tag{
    margin-left:auto;
    margin-right:auto;
  }

  .heroBox h1{
    font-size:38px !important;
  }

  .heroBox p{
    font-size:20px !important;
  }

  .heroBox > a.btn{
    margin:7px 4px 12px !important;
  }
}

/* Design Polish v4 - Lesson page premium */

/* صفحة الدرس */
.article{
  max-width:1040px !important;
}

.article > .box,
.article .lessonBox,
.articleCard,
.article > div{
  border-radius:30px;
}

/* كرت عنوان الدرس */
.article h1{
  font-size:50px !important;
  line-height:1.35 !important;
  color:#facc15 !important;
  margin-bottom:18px !important;
  text-wrap:balance;
}

.article > p,
.article .lead{
  font-size:21px !important;
  color:#e5e7eb !important;
  line-height:2 !important;
}

/* معلومات الدرس */
.article .tag,
.article .meta,
.article small{
  font-weight:800;
}

/* فقرات محتوى الدرس */
.article p{
  line-height:2.15 !important;
}

.article .content p,
.articleContent p,
.lessonContent p{
  background:rgba(17,24,39,.72);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:18px 20px;
  margin:14px 0;
  font-size:20px;
}

/* أزرار المشاركة */
.shareButtons,
.shareBox{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0;
}

.shareButtons a,
.shareBox a,
.article a[href*="whatsapp"],
.article a[href*="facebook"],
.article a[href*="twitter"],
.article a[href*="x.com"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 18px;
  border-radius:15px;
  background:#111827;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font-weight:900;
}

/* أزرار الرجوع */
.article .btn,
.article a.btn{
  border-radius:16px !important;
}

/* الدروس المرتبطة */
.related,
.relatedLessons{
  max-width:1120px;
  margin:35px auto 0;
}

.related h2,
.relatedLessons h2{
  font-size:36px !important;
  color:#fff !important;
  margin-bottom:22px !important;
}

.related .grid,
.relatedLessons .grid{
  gap:18px !important;
}

.related .card,
.relatedLessons .card,
.related .lesson,
.relatedLessons .lesson{
  padding:24px !important;
  border-radius:26px !important;
}

/* التعليقات */
.comments,
.commentBox{
  margin-top:35px;
  background:#1e293b;
  border:1px solid rgba(250,204,21,.15);
  border-radius:28px;
  padding:28px;
}

.comments h2,
.commentBox h2{
  color:#facc15 !important;
  font-size:34px !important;
}

.commentItem{
  border-radius:18px !important;
  padding:18px !important;
  margin:12px 0 !important;
}

.comments input,
.comments textarea,
.commentBox input,
.commentBox textarea{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:#111827 !important;
  color:#fff !important;
  font-size:17px !important;
}

.comments textarea,
.commentBox textarea{
  min-height:130px;
}

/* صفحة الأقسام والدروس */
.grid{
  gap:20px !important;
}

.card,
.lesson{
  padding:26px !important;
}

.card p,
.lesson p{
  font-size:18px !important;
  line-height:1.9 !important;
}

/* زر العودة للأعلى */
.backToTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#facc15;
  color:#111827 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  z-index:99998;
  box-shadow:0 15px 35px rgba(0,0,0,.35);
}

/* تحسين الموبايل */
@media(max-width:850px){
  .article h1{
    font-size:34px !important;
    text-align:center;
  }

  .article > p,
  .article .lead{
    font-size:19px !important;
    text-align:center;
  }

  .article .content p,
  .articleContent p,
  .lessonContent p{
    font-size:19px;
    padding:16px;
  }

  .shareButtons,
  .shareBox{
    justify-content:center;
  }

  .comments,
  .commentBox{
    padding:20px;
  }

  .backToTop{
    right:14px;
    bottom:74px;
  }
}


/* Viral test promo */
.testPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.testPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.testPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .testPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .testPromoHome h2{
    font-size:32px !important;
  }
}


/* Problem start homepage promo */
.problemPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.problemPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.problemPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .problemPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .problemPromoHome h2{
    font-size:32px !important;
  }
}


/* Mistakes homepage promo */
.mistakesPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.mistakesPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.mistakesPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .mistakesPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .mistakesPromoHome h2{
    font-size:32px !important;
  }
}


/* Quotes homepage promo */
.quotesPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.quotesPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.quotesPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .quotesPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .quotesPromoHome h2{
    font-size:32px !important;
  }
}


/* Ask Fidaa homepage promo */
.askPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.askPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.askPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .askPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .askPromoHome h2{
    font-size:32px !important;
  }
}


/* Stories homepage promo */
.storiesPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.storiesPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.storiesPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .storiesPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .storiesPromoHome h2{
    font-size:32px !important;
  }
}


/* Married homepage promo */
.marriedPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.marriedPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.marriedPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .marriedPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .marriedPromoHome h2{
    font-size:32px !important;
  }
}


/* For women homepage promo */
.forWomenPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.forWomenPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.forWomenPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .forWomenPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .forWomenPromoHome h2{
    font-size:32px !important;
  }
}


/* Challenge homepage promo */
.challengePromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.challengePromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.challengePromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .challengePromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .challengePromoHome h2{
    font-size:32px !important;
  }
}


/* Library homepage promo */
.libraryPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.libraryPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.libraryPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .libraryPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .libraryPromoHome h2{
    font-size:32px !important;
  }
}

/* Smart internal linking */
.relatedPathsSection{
  margin:34px 0 0;
}
.relatedHead{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.22);
  border-radius:28px;
  padding:28px;
  margin:24px 0 16px;
  text-align:center;
}
.relatedHead h2{
  color:#facc15 !important;
  font-size:34px !important;
  margin:12px 0 8px !important;
}
.relatedHead p{
  color:#e5e7eb;
  font-size:19px;
  line-height:1.9;
  margin:0;
}
.relatedPathsGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:18px 0;
}
.relatedPathCard{
  display:block;
  background:#1e293b;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:22px;
  text-decoration:none;
  transition:.18s ease;
}
.relatedPathCard:hover{
  transform:translateY(-3px);
  border-color:rgba(250,204,21,.34);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.relatedIcon{
  font-size:36px;
  margin-bottom:10px;
}
.relatedPathCard h3{
  color:#facc15 !important;
  font-size:22px !important;
  margin:0 0 8px !important;
  line-height:1.4;
}
.relatedPathCard p{
  color:#e5e7eb;
  line-height:1.8;
  margin:0 0 12px;
}
.relatedPathCard strong{
  color:#facc15;
}
.relatedMainCta{
  background:#111827;
  border:1px solid rgba(250,204,21,.22);
  border-radius:28px;
  padding:28px;
  margin:20px 0 30px;
  text-align:center;
}
.relatedMainCta h2{
  color:#facc15 !important;
  margin:0 0 10px !important;
}
.relatedMainCta p{
  color:#e5e7eb;
  font-size:18px;
  line-height:1.9;
}
.relatedBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:15px;
  padding:12px 18px;
  font-weight:900;
  margin:4px;
}
.relatedBtn.gold{
  background:#facc15;
  color:#111827;
}
.relatedBtn.dark{
  background:#1e293b;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.smartFooterLinks{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:18px auto 10px;
  max-width:1000px;
}
.smartFooterLinks a{
  background:#111827;
  border:1px solid rgba(255,255,255,.10);
  color:#facc15 !important;
  text-decoration:none;
  border-radius:999px;
  padding:7px 12px;
  font-weight:900;
  font-size:13px;
}
@media(max-width:1050px){
  .relatedPathsGrid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:650px){
  .relatedPathsGrid{
    grid-template-columns:1fr;
  }
  .relatedHead{
    padding:24px 18px;
  }
  .relatedHead h2{
    font-size:28px !important;
  }
  .relatedMainCta{
    padding:24px 18px;
  }
}


/* Social posts homepage promo */
.socialPostsPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.socialPostsPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.socialPostsPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .socialPostsPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .socialPostsPromoHome h2{
    font-size:32px !important;
  }
}


/* Content plan homepage promo */
.contentPlanPromoHome{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:34px;
  margin:22px 0;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.contentPlanPromoHome h2{
  color:#facc15 !important;
  font-size:40px !important;
  margin:16px 0 10px !important;
}
.contentPlanPromoHome p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:850px;
}
@media(max-width:850px){
  .contentPlanPromoHome{
    text-align:center;
    padding:28px 20px;
  }
  .contentPlanPromoHome h2{
    font-size:32px !important;
  }
}

/* Smart CTA per page */
.smartCtaSection{
  margin:28px 0;
}
.smartCtaBox{
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.15), transparent 36%),
    linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.24);
  border-radius:32px;
  padding:30px;
  box-shadow:0 20px 70px rgba(0,0,0,.24);
}
.smartCtaHead{
  text-align:center;
  margin-bottom:20px;
}
.smartCtaHead h2{
  color:#facc15 !important;
  font-size:38px !important;
  line-height:1.35;
  margin:12px 0 8px !important;
}
.smartCtaHead p{
  color:#e5e7eb;
  font-size:19px;
  line-height:1.9;
  margin:0;
}
.smartCtaGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.smartCtaCard{
  display:block;
  background:#111827;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:22px;
  text-decoration:none;
  transition:.18s ease;
}
.smartCtaCard:hover{
  transform:translateY(-3px);
  border-color:rgba(250,204,21,.38);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.smartCtaIcon{
  font-size:38px;
  margin-bottom:10px;
}
.smartCtaCard h3{
  color:#facc15 !important;
  font-size:23px !important;
  line-height:1.4;
  margin:0 0 8px !important;
}
.smartCtaCard p{
  color:#e5e7eb;
  line-height:1.8;
  margin:0 0 12px;
}
.smartCtaCard strong{
  color:#facc15;
}
.smartCtaMini{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.smartCtaMini a,
.smartCtaMini button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.smartCtaMini a{
  background:#facc15;
  color:#111827 !important;
}
.smartCtaMini button{
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
@media(max-width:900px){
  .smartCtaGrid{
    grid-template-columns:1fr;
  }
  .smartCtaBox{
    padding:24px 18px;
  }
  .smartCtaHead h2{
    font-size:29px !important;
  }
}

/* A/B test CTA */
.abTestSection{
  margin:26px 0;
}
.abTestBox{
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.16), transparent 34%),
    linear-gradient(135deg,#111827,#1e293b);
  border:1px solid rgba(250,204,21,.24);
  border-radius:30px;
  padding:32px;
  text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.abTestBox h2{
  color:#facc15 !important;
  font-size:38px !important;
  line-height:1.35;
  margin:12px 0 10px !important;
}
.abTestBox p{
  color:#e5e7eb;
  font-size:19px;
  line-height:2;
  max-width:850px;
  margin:0 auto 18px;
}
.abActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.abButton,
.abSecondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:16px;
  padding:12px 18px;
  font-weight:900;
}
.abButton{
  background:#facc15;
  color:#111827 !important;
}
.abSecondary{
  background:#111827;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12);
}
@media(max-width:850px){
  .abTestBox{
    padding:25px 18px;
  }
  .abTestBox h2{
    font-size:29px !important;
  }
}

/* Homepage spotlight optimized from admin */
.homeSpotlightSection{
  margin:28px 0;
}
.homeSpotlightBox{
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.18), transparent 35%),
    linear-gradient(135deg,#1e293b,#111827);
  border:1px solid rgba(250,204,21,.25);
  border-radius:34px;
  padding:34px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.homeSpotlightHead{
  text-align:center;
  margin-bottom:22px;
}
.homeSpotlightHead h2{
  color:#facc15 !important;
  font-size:42px !important;
  line-height:1.35;
  margin:12px 0 10px !important;
}
.homeSpotlightHead p{
  color:#e5e7eb;
  font-size:20px;
  line-height:2;
  max-width:900px;
  margin:0 auto;
}
.homeSpotlightGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}
.homeSpotlightCard{
  display:block;
  background:#111827;
  border:1px solid rgba(255,255,255,.09);
  border-radius:26px;
  padding:24px;
  text-decoration:none;
  transition:.18s ease;
}
.homeSpotlightCard:hover{
  transform:translateY(-3px);
  border-color:rgba(250,204,21,.4);
  box-shadow:0 20px 55px rgba(0,0,0,.25);
}
.homeSpotlightIcon{
  font-size:42px;
  margin-bottom:10px;
}
.homeSpotlightCard h3{
  color:#facc15 !important;
  font-size:25px !important;
  line-height:1.4;
  margin:0 0 10px !important;
}
.homeSpotlightCard p{
  color:#e5e7eb;
  line-height:1.9;
  margin:0 0 12px;
}
.homeSpotlightCard strong{
  color:#facc15;
}
@media(max-width:900px){
  .homeSpotlightGrid{
    grid-template-columns:1fr;
  }
  .homeSpotlightBox{
    padding:26px 18px;
  }
  .homeSpotlightHead h2{
    font-size:31px !important;
  }
}