/* ==========================================================
   PowerWorkEarn — landing page (self-contained, v2)
   This file does NOT rely on styles.css. Every rule needed
   for this page lives here so nothing in the legacy sheet
   (body{text-align:center}, old .container, etc.) can leak in.
   ========================================================== */

#pwe-root, #pwe-root *, #pwe-root *::before, #pwe-root *::after{
  box-sizing:border-box;
}
#pwe-root{
  --forest:#1D8A5F;
  --forest-deep:#176E4C;
  --green:#2BAE7A;
  --green-light:#123A2C;
  --gold:#F2B705;
  --gold-deep:#F5C637;
  --ink:#F2F0EA;
  --ink-soft:#C9C6BC;
  --ink-mute:#8E8B82;
  --paper:#12140F;
  --white:#1B1E17;
  --line:#2E3128;

  display:block;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
#pwe-root h1,#pwe-root h2,#pwe-root h3,#pwe-root h4{
  font-family:'Sora',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  text-align:left;
}
#pwe-root p{margin:0; text-align:left;}
#pwe-root a{text-decoration:none; color:inherit;}
#pwe-root img{max-width:100%; display:block;}
#pwe-root button{font-family:inherit; cursor:pointer;}
#pwe-root ul{list-style:none; margin:0; padding:0;}

.pwe-wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .pwe-wrap{padding:0 18px;} }

/* ---------- Buttons ---------- */
.pwe-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-weight:600; font-size:14px; padding:11px 20px; border-radius:10px;
  border:1.5px solid transparent; transition:transform .12s ease, background .15s ease;
  white-space:nowrap;
}
.pwe-btn:active{transform:scale(.97);}
.pwe-btn-primary{background:var(--green); color:#fff;}
.pwe-btn-primary:hover{background:var(--forest-deep);}
.pwe-btn-dark{background:var(--forest); color:#fff;}
.pwe-btn-dark:hover{background:var(--forest-deep);}
.pwe-btn-ghost{background:transparent; color:var(--ink); border-color:#D8D5CC;}
.pwe-btn-ghost:hover{border-color:var(--ink-mute);}
.pwe-btn-lg{padding:14px 24px; font-size:14.5px; border-radius:11px;}

/* ---------- Header ---------- */
.pwe-header{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.pwe-header-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px;}
.pwe-logo{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pwe-logo-mark{width:38px; height:38px; border-radius:10px; background:var(--forest); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pwe-logo-mark svg{width:19px; height:28px;}
.pwe-logo-word{font-family:'Sora',sans-serif; font-weight:700; font-size:17px; color:var(--ink); white-space:nowrap;}
.pwe-logo-word span{color:var(--green);}
.pwe-nav{display:flex; gap:26px;}
.pwe-nav a{font-size:14px; font-weight:500; color:var(--ink); opacity:.72;}
.pwe-nav a:hover{opacity:1;}
.pwe-header-actions{display:flex; gap:9px; align-items:center; flex-shrink:0;}
.pwe-drawer-btn{display:none; background:none; border:none; font-size:20px; color:var(--ink); padding:6px;}

@media (max-width:880px){
  .pwe-nav{display:none;}
  .pwe-drawer-btn{display:inline-flex;}
}
@media (max-width:480px){
  .pwe-header-actions .pwe-btn span{display:none;}
  .pwe-header-actions .pwe-btn{padding:10px 13px;}
  .pwe-logo-word{font-size:15px;}
}

.pwe-mobile-nav{display:none; flex-direction:column; padding:6px 0 16px;}
.pwe-mobile-nav.open{display:flex;}
.pwe-mobile-nav a{padding:12px 2px; font-size:15px; font-weight:500; border-bottom:1px solid var(--line);}

/* ---------- Hero ---------- */
.pwe-hero{padding:48px 0 0; position:relative; overflow:hidden;}
.pwe-hero::before{
  content:"";
  position:absolute; top:-120px; right:-140px;
  width:420px; height:420px; border-radius:50%;
  background:var(--green-light);
  z-index:0;
}
.pwe-hero::after{
  content:"";
  position:absolute; top:60px; right:60px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(242,183,5,0.14);
  z-index:0;
}
.pwe-hero .pwe-wrap{position:relative; z-index:1;}
.pwe-hero-inner{max-width:640px;}
@media (max-width:880px){
  .pwe-hero::before{width:280px; height:280px; top:-90px; right:-110px;}
  .pwe-hero::after{width:110px; height:110px; top:30px; right:30px;}
}
.pwe-eyebrow{display:inline-flex; align-items:center; gap:7px; background:var(--green-light); color:var(--green); font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:20px; margin-bottom:16px;}
.pwe-eyebrow .pwe-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.pwe-hero h1{font-size:40px; line-height:1.16; margin-bottom:16px;}
.pwe-hero h1 .pwe-accent{color:var(--green);}
.pwe-hero-sub{font-size:16px; line-height:1.6; color:var(--ink-soft); margin-bottom:26px; max-width:520px;}
.pwe-hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;}

.pwe-earn-strip{background:var(--white); border:1px solid var(--line); border-radius:16px; display:flex; box-shadow:0 4px 14px rgba(11,61,46,.06); max-width:520px;}
.pwe-earn-item{flex:1; padding:14px 16px;}
.pwe-earn-item + .pwe-earn-item{border-left:1px solid var(--line);}
.pwe-earn-num{font-family:'Sora',sans-serif; font-weight:700; font-size:18px; color:var(--forest); display:block;}
.pwe-earn-label{font-size:11px; color:var(--ink-mute); margin-top:2px; display:block;}
@media (max-width:480px){
  .pwe-hero h1{font-size:30px;}
  .pwe-earn-strip{flex-direction:column;}
  .pwe-earn-item + .pwe-earn-item{border-left:none; border-top:1px solid var(--line);}
}

/* Task strip — simple grid, no horizontal scroll (avoids flex/overflow edge cases on mobile) */
.pwe-task-strip-wrap{margin-top:36px; padding-bottom:44px;}
.pwe-task-strip-label{font-size:12px; font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}
.pwe-task-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;}
.pwe-task-pill{background:var(--white); border:1px solid var(--line); border-radius:13px; padding:12px 14px; display:flex; align-items:center; gap:10px;}
.pwe-task-check{width:22px; height:22px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pwe-task-check svg{width:10px; height:10px; display:block;}
.pwe-task-title{font-size:12.5px; font-weight:600; line-height:1.3;}
.pwe-task-amt{font-size:11.5px; color:var(--green); font-weight:700; font-family:'Sora',sans-serif; line-height:1.3;}
@media (max-width:480px){
  .pwe-task-row{grid-template-columns:1fr 1fr;}
}

/* ---------- Section shell ---------- */
.pwe-section{padding:58px 0;}
.pwe-section-head{max-width:600px; margin:0 0 34px;}
.pwe-section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.pwe-section-head.center h2, .pwe-section-head.center p{text-align:center;}
.pwe-section-head h2{font-size:28px; margin-bottom:10px;}
.pwe-section-head p{font-size:15px; color:var(--ink-soft); line-height:1.6;}
@media (max-width:640px){
  .pwe-section{padding:44px 0;}
  .pwe-section-head h2{font-size:22px;}
}

/* ---------- Features ---------- */
.pwe-feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.pwe-feature{background:var(--white); border:1px solid var(--line); border-radius:15px; padding:24px;}
.pwe-feature-icon{width:42px; height:42px; border-radius:11px; background:var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px;}
.pwe-feature h3{font-size:15.5px; margin-bottom:7px; line-height:1.35;}
.pwe-feature p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
@media (max-width:880px){ .pwe-feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pwe-feature-grid{grid-template-columns:1fr;} }

/* ---------- Pricing ---------- */
.pwe-pricing-intro{max-width:640px; margin:0 auto 32px; text-align:center; font-size:14.5px; color:var(--ink-soft); line-height:1.65;}
.pwe-plans{display:flex; justify-content:center;}
.pwe-plan{background:var(--white); border:2px solid var(--forest); border-radius:20px; padding:28px; width:100%; max-width:340px; position:relative;}
.pwe-plan-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--forest-deep); font-size:11px; font-weight:700; padding:5px 13px; border-radius:20px; white-space:nowrap;}
.pwe-plan-head{display:flex; align-items:center; gap:9px; margin-bottom:16px;}
.pwe-plan-icon{width:34px; height:34px; border-radius:9px; background:var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:15px;}
.pwe-plan h3{font-size:16px;}
.pwe-plan-price{display:flex; align-items:baseline; gap:6px; margin-bottom:20px;}
.pwe-plan-price .amt{font-family:'Sora',sans-serif; font-weight:700; font-size:30px; color:var(--forest);}
.pwe-plan-price .per{font-size:12.5px; color:var(--ink-mute);}
.pwe-plan ul{display:flex; flex-direction:column; gap:11px; margin-bottom:24px;}
.pwe-plan li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.pwe-plan li i{color:var(--green); font-size:12px; margin-top:3px; flex-shrink:0;}
.pwe-plan .pwe-btn{width:100%;}

/* ---------- Testimonials ---------- */
.pwe-testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.pwe-testimonial{background:var(--white); border:1px solid var(--line); border-radius:15px; padding:22px;}
.pwe-testimonial p{font-size:13px; color:var(--ink-soft); line-height:1.65; margin-bottom:16px;}
.pwe-testi-who{display:flex; align-items:center; gap:10px;}
.pwe-testi-who img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.pwe-testi-who span{font-size:13px; font-weight:600;}
@media (max-width:880px){ .pwe-testimonials{grid-template-columns:1fr;} }

/* ---------- Partner strip ---------- */
.pwe-partner-strip{overflow:hidden; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pwe-partner-track{display:flex; gap:56px; align-items:center; width:max-content; animation:pweScroll 24s linear infinite;}
.pwe-partner-track img{height:28px; width:auto; opacity:.55; filter:grayscale(1);}
@keyframes pweScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .pwe-partner-track{animation:none; overflow-x:auto;} }

/* ---------- CTA ---------- */
.pwe-cta{background:var(--forest); border-radius:20px; padding:46px 32px; text-align:center; color:#fff; position:relative; overflow:hidden;}
.pwe-cta::before{
  content:"";
  position:absolute; bottom:-90px; left:-70px;
  width:220px; height:220px; border-radius:50%;
  background:rgba(242,183,5,0.10);
  z-index:0;
}
.pwe-cta > *{position:relative; z-index:1;}
.pwe-cta h2{color:#fff; font-size:25px; margin-bottom:9px; text-align:center;}
.pwe-cta p{color:rgba(255,255,255,.78); font-size:14.5px; margin-bottom:22px; text-align:center;}
@media (max-width:560px){ .pwe-cta{padding:34px 20px;} .pwe-cta h2{font-size:20px;} }

/* ---------- Stats ---------- */
.pwe-stats{display:flex; justify-content:center; gap:52px; flex-wrap:wrap; text-align:center;}
.pwe-stat{text-align:center;}
.pwe-stat-icon{width:48px; height:48px; border-radius:13px; background:var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 10px;}
.pwe-stat h3{font-size:27px; font-family:'Sora',sans-serif; color:var(--forest); text-align:center;}
.pwe-stat p{font-size:13px; color:var(--ink-mute); margin-top:4px; text-align:center;}

/* ---------- FAQ ---------- */
.pwe-faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.pwe-faq-item{background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.pwe-faq-q{width:100%; background:none; border:none; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; text-align:left; color:var(--ink);}
.pwe-faq-q i{transition:transform .2s; color:var(--ink-mute); flex-shrink:0;}
.pwe-faq-item.open .pwe-faq-q i{transform:rotate(180deg); color:var(--green);}
.pwe-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.pwe-faq-a-inner{padding:0 20px 18px; font-size:13px; color:var(--ink-soft); line-height:1.7; white-space:pre-line; text-align:left;}
.pwe-faq-item.open .pwe-faq-a{max-height:2400px;}

/* ---------- Footer ---------- */
.pwe-footer{background:var(--forest); color:rgba(255,255,255,.82); padding:48px 0 22px;}
.pwe-footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; margin-bottom:32px;}
.pwe-footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.pwe-footer-logo .pwe-logo-mark{background:rgba(255,255,255,.1);}
.pwe-footer-logo-word{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:#fff;}
.pwe-footer-desc{font-size:13px; line-height:1.6; max-width:270px; color:rgba(255,255,255,.65);}
.pwe-footer h4{color:#fff; font-size:13px; font-weight:600; margin-bottom:13px; font-family:'Inter',sans-serif;}
.pwe-footer-links{display:flex; flex-direction:column; gap:9px;}
.pwe-footer-links a,.pwe-footer-links span{font-size:13px; color:rgba(255,255,255,.65); display:block;}
.pwe-footer-links a:hover{color:#fff;}
.pwe-footer-social{display:flex; gap:9px;}
.pwe-footer-social a{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px;}
.pwe-footer-social a:hover{background:rgba(255,255,255,.16);}
.pwe-footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:18px; text-align:center; font-size:12px; color:rgba(255,255,255,.5);}
@media (max-width:880px){ .pwe-footer-grid{grid-template-columns:1fr 1fr; row-gap:26px;} }
@media (max-width:520px){ .pwe-footer-grid{grid-template-columns:1fr;} }

/* ---------- Scroll to top ---------- */
.pwe-scrolltop{position:fixed; bottom:22px; right:22px; width:42px; height:42px; border-radius:50%; background:var(--forest); color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(11,61,46,.3); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40;}
.pwe-scrolltop.visible{opacity:1; pointer-events:auto;}

/* ---------- Reveal on scroll ----------
   Content is visible by default (opacity:1). JS only ADDS a
   temporary "pre-reveal" class to elements it can see and
   successfully observe; if JS fails or errors, everything
   simply stays visible instead of disappearing. */
.pwe-reveal{opacity:1; transform:none;}
.pwe-reveal.pre-reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.pwe-reveal.pre-reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .pwe-reveal.pre-reveal{opacity:1; transform:none; transition:none;} }