:root{
  --primary-bg:#1a1a1a;
  --secondary-bg:#101010;
  --primary-text:#f1f1f1;
  --secondary-text:#ccc;
  --accent-color:#8CDF8C;
  --hover-accent:#bef6be;
  --neutral-border:#2a2a2a;
  --light-border:#333;
  --font-main:'Inter',sans-serif;
  --muted:#c7c7c7;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-main);
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(140,223,140,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(140,223,140,.08), transparent 60%),
    var(--secondary-bg);
  color:var(--primary-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0 0 10px}
h1{font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(22px,3.2vw,34px)}
p{margin:0 0 12px;color:var(--secondary-text)}
a{text-decoration:none;color:var(--accent-color)}
.container{width:min(1120px,92%);margin-inline:auto}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;min-height:44px;border-radius:999px;font-weight:700;
  color:var(--primary-text);background:linear-gradient(180deg,#1c1c1c,#141414);
  border:1px solid var(--neutral-border);
  transition:transform .15s,box-shadow .15s,background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:14px 18px}
.btn-sm{padding:10px 14px}
.btn-primary{
  color:#000 !important; -webkit-text-fill-color:#000 !important; text-shadow:none !important;
  background:linear-gradient(180deg,var(--accent-color),#55d07f);
  border-color:rgba(140,223,140,.55);
  box-shadow:0 12px 30px rgba(140,223,140,.24);
}
.btn-primary:hover{box-shadow:0 14px 34px rgba(140,223,140,.30)}
.btn-primary *{color:#000 !important;-webkit-text-fill-color:#000 !important}
.btn-ghost{background:transparent;color:var(--primary-text);border-color:var(--light-border)}
.btn-ghost:hover{background:rgba(140,223,140,.12);color:var(--accent-color);border-color:var(--accent-color)}
.btn-nav{padding:10px 14px;border-radius:14px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(8px);
  background:rgba(16,16,16,.78);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{color:var(--secondary-text)}
.nav-links a:hover{color:var(--primary-text)}
.nav-toggle{display:none;background:transparent;border:0;padding:6px;color:var(--primary-text)}
.nav-mobile{display:none;flex-direction:column;gap:12px;padding:12px 16px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-mobile a{color:var(--primary-text);padding:10px 12px;border-radius:10px;background:#141414}

/* Hero */
.hero{position:relative;padding:64px 0 28px}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.ribbon{display:inline-block;padding:6px 10px;border-radius:999px;background:#172417;color:#bff1bf;border:1px solid rgba(140,223,140,.35);font-weight:600;font-size:.9rem;margin-bottom:10px}
.highlight{background:linear-gradient(90deg,var(--accent-color),#e5ffe5);-webkit-background-clip:text;color:transparent}
.hero-copy .sub{font-size:1.08rem;max-width:640px}
.hero-ctas{display:flex;gap:10px;margin:16px 0 6px}
.trust-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px;color:#d6f3d6}
.trust-list img{width:18px;height:18px;filter:brightness(0) invert(1)}

/* —— Laptop image/glow fix —— */
.hero-art-wrap{
  justify-self:end;max-width:min(560px,46vw);
  background:transparent !important;border:none !important;box-shadow:none !important;
  overflow:visible !important; isolation:isolate;
}
.hero-art{
  position:relative; width:100%;
  background:transparent !important;border:none !important;box-shadow:none !important;
  overflow:visible !important;
}
.hero-art::before,.hero-art::after{content:none !important;display:none !important}

.hero-art img{
  width:100%;
  height:auto;
  display:block;
  background:transparent !important;
  border:none;
  filter:
    drop-shadow(0 26px 70px rgba(140,223,140,.22))
    drop-shadow(0 18px 44px rgba(0,0,0,.45));
  transition:filter .28s ease, transform .28s ease;
}
.hero-art:hover img{
  filter:
    drop-shadow(0 32px 86px rgba(140,223,140,.32))
    drop-shadow(0 22px 54px rgba(0,0,0,.55));
  transform:translateY(-2px);
}
.hero-art figcaption,
.hero-art + figcaption{display:none !important}

.badges{
  display:block;
  margin:12px auto 0 auto;
  height:42px;
  width:auto;
  opacity:.98;
}
.hero-gradient{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 70% 30%, rgba(140,223,140,.10), transparent 60%)}
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;background:transparent;border:1px solid rgba(255,255,255,.1);color:#cdd5cd;border-radius:999px;padding:6px 10px;opacity:.7}
.scroll-cue:hover{opacity:1;border-color:rgba(255,255,255,.2)}
.js .fade-on-load{opacity:0;transform:translateY(10px)}
.js body.loaded .fade-on-load{opacity:1;transform:none;transition:opacity .45s ease, transform .45s ease}

/* Proof (divider + spacing) */
.proof{padding:24px 0 6px;border-top:1px solid rgba(255,255,255,.08);margin-top:20px;}
.proof .container{padding-top:20px;}
.proof .logos img{border-radius:14px;opacity:.92}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
blockquote{margin:0;padding:16px;border-radius:14px;background:var(--primary-bg);border:1px solid var(--neutral-border)}
blockquote footer{color:#c7c7c7;margin-top:6px}

/* Features */
.features{padding:60px 0}
.section-sub{max-width:720px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--primary-bg);border:1px solid var(--neutral-border);border-radius:14px;padding:16px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 16px 38px rgba(0,0,0,.55);transform:translateY(-2px)}
.card .icon{width:22px;height:22px;filter:brightness(0) saturate(100%) invert(71%) sepia(68%) saturate(500%) hue-rotate(61deg) brightness(95%) contrast(85%)}
.card h3{margin-top:10px}

/* How */
.how{padding:60px 0;background:linear-gradient(180deg, rgba(140,223,140,.06), rgba(0,0,0,0))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.step{position:relative;padding:16px;background:var(--primary-bg);border:1px solid var(--neutral-border);border-radius:14px}
.step-num{position:absolute;top:-12px;left:-12px;width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,var(--accent-color),#55d07f);color:#0f0f0f;display:grid;place-items:center;font-weight:800}
.cta-center{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.cta-note{color:#d8f2d8}

/* Pricing */
.pricing{padding:60px 0}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{background:var(--primary-bg);border:1px solid var(--neutral-border);border-radius:18px;padding:18px;position:relative}
.plan-name{font-weight:800;font-size:18px}
.plan-price{font-size:34px;font-weight:800;margin:6px 0 10px}
.plan .per{font-size:16px;color:var(--secondary-text)}
.plan-list{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px;color:#d7e8d7}
.plan.popular{border-color:rgba(140,223,140,.6);transform:translateY(-4px)}
.plan .badge{position:absolute;top:-10px;right:12px;padding:6px 10px;font-size:.82rem;border-radius:999px;background:#173a1e;border:1px solid rgba(140,223,140,.55);color:#c9f6cf}

/* Addon */
.addon{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#121212;border:1px solid var(--neutral-border);padding:14px 16px;border-radius:14px}
.addon .icon{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(71%) sepia(68%) saturate(500%) hue-rotate(61deg) brightness(95%) contrast(85%)}
.addon-left{display:flex;gap:12px;align-items:flex-start}
.addon-price{font-weight:800;font-size:22px}
.addon-bullets{margin:6px 0 0 0;padding-left:16px}
.addon-bullets li{margin:2px 0}
.note{color:#a9b4a9}

/* Resources */
.resources{padding:60px 0}
.card.res{cursor:default}

/* FAQ */
.faq{padding:60px 0}
.faq details{background:var(--primary-bg);border:1px solid var(--neutral-border);border-radius:14px;padding:12px 14px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin-top:8px}

/* Sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:-80px;z-index:60;background:rgba(16,16,16,.9);backdrop-filter:saturate(140%) blur(8px);border-top:1px solid rgba(255,255,255,.06);transition:transform .25s ease;transform:translateY(80px)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.sticky-msg{color:#d2e7d2}

/* --- Trust row normalization --- */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  margin-top: 12px;
}
.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-weak, #cfcfcf);
  line-height: 1.2;
}
.trust-list .icon-star { color: #f5c518; }
.trust-list .icon-star svg,
.trust-list img.icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* --- Proof lockup alignment --- */
.proof .logos {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.proof .logos .icon-star { color: #f5c518; }
.proof .logos .icon-star svg { width: 20px; height: 20px; display: block; }
.proof .logos .logos-label { color: var(--text-weak, #cfcfcf); font-weight: 500; }

/* Slightly larger on md+ */
@media (min-width: 768px) {
  .trust-list .icon-star svg,
  .trust-list img.icon { width: 20px; height: 20px; }
  .proof .logos .icon-star svg { width: 22px; height: 22px; }
}

/* ---------- MOBILE TRUST FIX ---------- */
/* Keep icons, but stack the item so the caret/arrow sits BELOW the label */
@media (max-width:640px){
  .trust-list li{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;                /* spacing between lines */
  }
  .trust-list .label{
    display:block;
    line-height:1.2;
  }
  /* If the caret is injected via ::after, place it on its own line */
  .trust-list .label::after{
    display:block !important;
    margin-top:2px;         /* push arrow down */
  }
}

/* Responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:20px}
  .hero-art-wrap{display:none}
  .quotes{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .badges{height:38px}
}
@media (max-width:600px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .grid-3,.plans{grid-template-columns:1fr}
  .hero{padding:56px 0 20px}
  .footer-inner{grid-template-columns:1fr}
  .badges{height:32px}
}