/* =========================================================
   Jannah's Path — shared brand system
   Used by index.html (Jannah's Path) and plus.html (JP Plus)
   ========================================================= */

/* ============ Brand tokens (from JP brand kit) ============ */
:root{
  --cream:        #FFF9E5;
  --cream-deep:   #FBF1D2;
  --charcoal:     #27272F;
  --charcoal-soft:#3a3a44;
  --teal:         #0097B2;
  --teal-deep:    #22A7A8;
  --green:        #7ED957;
  --green-soft:   #6FD161;
  --mid:          #43BA82;
  --white:        #FFFFFF;

  --grad: linear-gradient(120deg, var(--green) 0%, var(--mid) 50%, var(--teal) 100%);
  --grad-text: linear-gradient(100deg, #6FD161 0%, #43BA82 48%, #1FA0B0 100%);

  --ink-60: rgba(39,39,47,.62);
  --ink-45: rgba(39,39,47,.45);

  --shadow-sm: 0 2px 10px rgba(39,39,47,.06);
  --shadow-md: 0 18px 50px -20px rgba(39,39,47,.28);
  --shadow-glow: 0 22px 60px -18px rgba(67,186,130,.55);

  --radius: 22px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============ Ambient background ============ */
.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.orb.a{ width:520px; height:520px; top:-180px; right:-120px;
        background:radial-gradient(circle at 30% 30%, var(--green), transparent 70%); }
.orb.b{ width:480px; height:480px; top:38%; left:-180px;
        background:radial-gradient(circle at 50% 50%, var(--teal), transparent 70%); opacity:.32; }
.orb.c{ width:420px; height:420px; bottom:-160px; right:8%;
        background:radial-gradient(circle at 50% 50%, var(--mid), transparent 70%); opacity:.34; }

/* ============ Logo mark ============ */
.jp-logo{
  background-image:url("pfp.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-radius:50%; display:inline-block; flex:none;
}

/* ============ Nav ============ */
header.nav{ position:relative; z-index:5; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .jp-logo{ width:42px; height:42px; box-shadow:var(--shadow-sm); }
.brand b{ font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-link{ font-weight:700; font-size:.92rem; color:var(--ink-60);
  transition:color .25s var(--ease); }
.nav-link:hover{ color:var(--charcoal); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem; padding:11px 20px; border-radius:100px;
  background:var(--charcoal); color:var(--cream);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ============ Hero ============ */
.hero{ position:relative; z-index:2; text-align:center; padding:46px 0 70px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep);
  background:rgba(255,255,255,.7); border:1px solid rgba(67,186,130,.28);
  padding:9px 18px; border-radius:100px; box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(126,217,87,.7); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(126,217,87,.6);}
  70%{box-shadow:0 0 0 12px rgba(126,217,87,0);} 100%{box-shadow:0 0 0 0 rgba(126,217,87,0);} }

.hero h1{
  font-weight:900; letter-spacing:-.035em; line-height:1.02;
  font-size: clamp(2.7rem, 7vw, 5.2rem);
  margin:26px auto 0; max-width:15ch;
}
.hero p.lede{
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color:var(--ink-60); font-weight:500;
  max-width:60ch; margin:22px auto 0;
}
.hero-logo{ width:96px; height:96px; margin:0 auto;
  box-shadow:var(--shadow-glow); animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* ============ Pills ============ */
.meta-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 0; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid rgba(39,39,47,.08);
  padding:12px 20px; border-radius:14px; box-shadow:var(--shadow-sm);
  font-weight:600; font-size:.98rem;
}
.pill svg{ width:19px; height:19px; color:var(--mid); flex:none; }

/* ============ Countdown ============ */
.countdown{ display:flex; gap:14px; justify-content:center; margin:32px 0 0; }
.cd-box{
  background:var(--charcoal); color:var(--cream);
  border-radius:18px; padding:18px 8px 14px; min-width:84px;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.cd-box::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); }
.cd-num{ font-weight:900; font-size:2.1rem; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; }
.cd-lbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:rgba(255,249,229,.6); margin-top:7px; font-weight:600; }

/* ============ Buttons ============ */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin:40px 0 0; }
.btn-primary{
  display:inline-flex; align-items:center; gap:11px;
  font-weight:800; font-size:1.06rem; letter-spacing:-.01em;
  color:var(--white); background:var(--grad);
  padding:18px 36px; border-radius:100px; border:none; cursor:pointer;
  box-shadow:var(--shadow-glow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.015); filter:brightness(1.04);
  box-shadow:0 28px 70px -16px rgba(67,186,130,.7); }
.btn-primary svg{ width:20px; height:20px; transition:transform .3s var(--ease); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:1rem; color:var(--charcoal);
  background:var(--white); border:1px solid rgba(39,39,47,.12);
  padding:16px 30px; border-radius:100px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.reassure{ font-size:.9rem; color:var(--ink-45); font-weight:500; }
.reassure b{ color:var(--charcoal-soft); font-weight:700; }

/* ============ Section shells ============ */
section{ position:relative; z-index:2; }
.sec-pad{ padding:64px 0; }
.sec-head{ text-align:center; max-width:46ch; margin:0 auto 46px; }
.sec-head .kicker{ font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mid); }
.sec-head h2{ font-weight:900; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(1.9rem, 4vw, 2.9rem); margin:12px 0 0; }
.sec-head p{ color:var(--ink-60); font-size:1.08rem; margin:16px auto 0; font-weight:500; }

/* ============ Feature cards ============ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  background:var(--white); border:1px solid rgba(39,39,47,.06);
  border-radius:var(--radius); padding:30px 26px;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card .ico{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(126,217,87,.18), rgba(0,151,178,.16));
  margin-bottom:18px;
}
.card .ico svg{ width:27px; height:27px; color:var(--teal-deep); }
.card h3{ font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.card p{ color:var(--ink-60); margin-top:9px; font-size:.97rem; font-weight:500; }

/* ============ Steps ============ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ position:relative; padding:30px 26px 28px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,241,210,.6));
  border:1px solid rgba(67,186,130,.18); }
.step .n{ font-weight:900; font-size:1rem; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--white); background:var(--grad);
  box-shadow:var(--shadow-sm); }
.step h4{ font-weight:800; font-size:1.1rem; margin:16px 0 0; letter-spacing:-.02em; }
.step p{ color:var(--ink-60); margin-top:8px; font-size:.95rem; font-weight:500; }

/* ============ Community banner ============ */
.community{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.community.flip .frame{ order:2; transform:rotate(1.4deg); }
.community .frame{ position:relative; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-md); border:1px solid rgba(39,39,47,.06);
  transform:rotate(-1.4deg); transition:transform .4s var(--ease); }
.community .frame:hover{ transform:rotate(0deg) scale(1.01); }
.community .frame::after{ content:""; position:absolute; inset:0; border-radius:22px;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.6); pointer-events:none; }
.community .frame img{ width:100%; height:auto; display:block; }
.community .copy .kicker{ font-weight:700; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mid); }
.community .copy h2{ font-weight:900; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.7rem); margin:12px 0 0; }
.community .copy p{ color:var(--ink-60); font-size:1.08rem; margin:16px 0 0; font-weight:500; }
.community .stats{ display:flex; gap:26px; margin:26px 0 28px; }
.community .stat b{ display:block; font-weight:900; font-size:1.7rem; letter-spacing:-.03em; line-height:1; }
.community .stat span{ color:var(--ink-60); font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; }

/* ============ Tier / upsell cards ============ */
.tiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:stretch; }
.tier{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid rgba(39,39,47,.08);
  border-radius:26px; padding:34px 30px 32px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tier:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.tier.featured{ background:var(--charcoal); color:var(--cream); border-color:transparent; }
.tier.featured::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); }
.tier .t-name{ font-weight:900; font-size:1.35rem; letter-spacing:-.025em; }
.tier .t-sub{ font-size:.95rem; font-weight:500; color:var(--ink-60); margin-top:6px; }
.tier.featured .t-sub{ color:rgba(255,249,229,.7); }
.tier .t-price{ font-weight:900; font-size:2.4rem; letter-spacing:-.04em; line-height:1; margin:20px 0 0; }
.tier .t-price small{ font-size:.9rem; font-weight:700; letter-spacing:0; color:var(--ink-45); }
.tier.featured .t-price small{ color:rgba(255,249,229,.6); }
.tier .t-was{
  font-size:1.35rem; font-weight:700; color:var(--ink-45); margin-right:10px;
  text-decoration:line-through; text-decoration-thickness:2px;
}
.tier.featured .t-was{ color:rgba(255,249,229,.45); }
.tier .t-offer{
  margin-top:12px; font-size:.88rem; font-weight:600; color:var(--ink-60);
  display:flex; align-items:flex-start; gap:7px;
}
.tier .t-offer svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--mid); }
.tier .t-offer b{ font-weight:800; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.tier.featured .t-offer{ color:rgba(255,249,229,.72); }
.tier.featured .t-offer b{ color:var(--cream); }
.tier.featured .t-offer svg{ color:var(--green); }
.tier .t-cta{ margin-top:26px; }
.tier ul{ list-style:none; margin:22px 0 0; display:grid; gap:11px; flex:1; }
.tier li{ display:flex; align-items:flex-start; gap:11px; font-size:.97rem; font-weight:500; }
.tier li svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--mid); }
.tier.featured li svg{ color:var(--green); }

/* ============ Offer strip (hero) ============ */
.offer-strip{
  display:inline-flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--white); border:1px solid rgba(39,39,47,.08);
  padding:24px 34px; border-radius:24px; box-shadow:var(--shadow-md);
  margin-top:34px; position:relative; overflow:hidden;
}
.offer-strip::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); }
.offer-price{ display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; }
.offer-was{
  font-weight:700; font-size:1.6rem; color:var(--ink-45);
  text-decoration:line-through; text-decoration-thickness:2px;
}
.offer-now{ font-weight:900; font-size:3rem; letter-spacing:-.05em; line-height:1; }
.offer-per{ font-weight:700; font-size:1rem; color:var(--ink-60); }
.offer-line{
  font-weight:600; font-size:.98rem; color:var(--ink-60);
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
}
.offer-line svg{ width:17px; height:17px; color:var(--mid); flex:none; }
.offer-line b{ color:var(--charcoal); font-weight:800; font-variant-numeric:tabular-nums; }

/* when the promo lapses, every trace of urgency goes quietly away */
body.offer-ended .offer-only{ display:none !important; }
body.offer-ended .offer-was,
body.offer-ended .price-was,
body.offer-ended .t-was{ display:none; }

/* ============ Pricing (Plus page) ============ */
.price-wrap{ max-width:560px; margin:0 auto; }
.price-card{
  position:relative; overflow:hidden; text-align:center;
  background:var(--white); border:1px solid rgba(39,39,47,.08);
  border-radius:30px; padding:44px 34px 38px; box-shadow:var(--shadow-md);
}
.price-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad); }
.sale-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); background:var(--grad);
  padding:8px 16px; border-radius:100px; box-shadow:var(--shadow-sm);
}
.price-row{ display:flex; align-items:baseline; justify-content:center; gap:14px; margin:22px 0 0; }
.price-was{ font-weight:700; font-size:1.5rem; color:var(--ink-45); text-decoration:line-through;
  text-decoration-thickness:2px; }
.price-now{ font-weight:900; font-size:4rem; letter-spacing:-.05em; line-height:1; }
.price-per{ font-weight:700; font-size:1rem; color:var(--ink-60); }
.price-save{ font-weight:700; font-size:.95rem; color:var(--mid); margin-top:10px; }
.price-feats{ list-style:none; text-align:left; margin:28px auto 0; max-width:400px; display:grid; gap:12px; }
.price-feats li{ display:flex; align-items:flex-start; gap:12px; font-weight:500; font-size:1rem; }
.price-feats li svg{ width:20px; height:20px; flex:none; margin-top:3px; color:var(--mid); }
.price-card .btn-primary{ margin-top:30px; width:100%; justify-content:center; }
.price-note{ font-size:.86rem; color:var(--ink-45); margin-top:16px; font-weight:500; }

/* ============ Final CTA band ============ */
.cta-band{ position:relative; z-index:2; padding:30px 0 90px; }
.cta-card{
  position:relative; overflow:hidden; text-align:center;
  background:var(--charcoal); color:var(--cream);
  border-radius:34px; padding:64px 32px;
  box-shadow:var(--shadow-md);
}
.cta-card::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(126,217,87,.45), transparent 70%);
  top:-160px; left:-80px; filter:blur(20px); }
.cta-card::after{ content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,151,178,.4), transparent 70%);
  bottom:-180px; right:-60px; filter:blur(20px); }
.cta-card > *{ position:relative; z-index:1; }
.cta-card .jp-logo{ width:78px; height:78px; margin:0 auto 22px; box-shadow:var(--shadow-glow); }
.cta-card h2{ font-weight:900; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(2rem,4.4vw,3.1rem); }
.cta-card p{ color:rgba(255,249,229,.72); font-size:1.1rem; margin:16px auto 0; max-width:48ch; font-weight:500; }
.cta-card .btn-primary{ margin-top:34px; }

/* ============ Footer ============ */
footer{ position:relative; z-index:2; padding:36px 0 56px; text-align:center; }
.foot-brand{ display:inline-flex; align-items:center; gap:11px; }
.foot-brand .jp-logo{ width:34px; height:34px; }
.foot-brand b{ font-weight:800; }
footer p{ color:var(--ink-45); font-size:.88rem; margin-top:14px; }
footer .tiny{ margin-top:8px; font-size:.8rem; color:var(--ink-45); }
.foot-links{ display:flex; gap:22px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.foot-links a{ font-weight:700; font-size:.88rem; color:var(--ink-60); transition:color .25s var(--ease); }
.foot-links a:hover{ color:var(--charcoal); }

/* ============ Reveal animation ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============ Responsive ============ */
@media (max-width:860px){
  .cards, .steps, .tiers{ grid-template-columns:1fr; }
  .nav-cta{ display:none; }
  .community, .community.flip{ grid-template-columns:1fr; gap:28px; }
  .community .frame, .community.flip .frame{ transform:none; order:0; }
}
@media (max-width:480px){
  .countdown{ gap:9px; }
  .cd-box{ min-width:0; flex:1; padding:14px 4px 11px; }
  .cd-num{ font-size:1.7rem; }
  .pill{ font-size:.9rem; padding:11px 16px; }
  .btn-primary, .btn-ghost{ width:100%; justify-content:center; }
  .price-now{ font-size:3.2rem; }
  .price-card{ padding:34px 22px 30px; }
  .community .stats{ gap:18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}