/* ProfitWizards public marketing site — dark, green, mysterious, technical.
   Reuses the Merlin theme vars from theme.css (--bg, --gold[green accent], etc). */

.pw {
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(47,232,132,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(47,232,132,.05), transparent 55%),
    var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pw main { flex: 1; }

/* ---- nav ---- */
.pw-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 7vw; position: sticky; top: 0; z-index: 20;
  background: rgba(3,7,13,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(47,232,132,.12);
}
.pw-brand {
  font-size: 20px; font-weight: 700; letter-spacing: .3px;
  color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.pw-brand-accent { color: var(--gold); }
.pw-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px 2px rgba(47,232,132,.7); display: inline-block;
}
.pw-links { display: flex; align-items: center; gap: 26px; }
.pw-links a { color: var(--muted); text-decoration: none; font-size: 15px; transition: color .15s; }
.pw-links a:hover { color: var(--text); }
.pw-links .pw-cta {
  background: var(--gold); color: #04120a; font-weight: 700; padding: 9px 18px;
  border-radius: 8px; box-shadow: 0 0 20px rgba(47,232,132,.25);
}
.pw-links .pw-cta:hover { color: #04120a; filter: brightness(1.08); }

/* ---- hero ---- */
.pw-hero { text-align: center; padding: 100px 7vw 80px; position: relative; }
.pw-eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(47,232,132,.3); border-radius: 100px;
  padding: 6px 16px; margin-bottom: 26px; background: rgba(47,232,132,.05);
}
.pw-hero h1 {
  font-size: clamp(38px, 6vw, 68px); line-height: 1.05; margin: 0 auto 22px;
  max-width: 14ch; color: var(--text); font-weight: 800; letter-spacing: -1px;
}
.pw-hero h1 .pw-brand-accent { text-shadow: 0 0 40px rgba(47,232,132,.4); }
.pw-lead {
  font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); max-width: 62ch;
  margin: 0 auto 38px; line-height: 1.6;
}
.pw-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.pw-hero-card {
  max-width: 68ch; margin: 38px auto 0; padding: 28px 34px;
  background: linear-gradient(180deg, rgba(10,23,16,.85), rgba(5,12,9,.9));
  border: 1px solid rgba(47,232,132,.16); border-radius: 14px;
  color: var(--muted); font-size: 17px; line-height: 1.7; text-align: left;
}
.pw-hero-card p { margin: 0 0 12px; }
.pw-hero-card p:last-child { margin-bottom: 0; }
.pw-hero-card strong { color: var(--text); }
.pw-hero-card em { color: var(--gold); font-style: normal; }
.pw-btn {
  display: inline-block; text-decoration: none; padding: 14px 30px; border-radius: 10px;
  font-weight: 700; font-size: 16px; transition: all .15s; cursor: pointer; border: none;
}
.pw-btn.primary {
  background: var(--gold); color: #04120a;
  box-shadow: 0 0 28px rgba(47,232,132,.3);
}
.pw-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pw-btn.ghost { background: transparent; color: var(--text); border: 1px solid rgba(47,232,132,.3); }
.pw-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---- sections ---- */
.pw-section { padding: 70px 7vw; max-width: 1180px; margin: 0 auto; }
.pw-section.narrow { max-width: 820px; }
.pw-section h2 {
  font-size: clamp(26px, 3.4vw, 38px); color: var(--text); margin: 0 0 14px; font-weight: 800;
  letter-spacing: -.5px;
}
.pw-section > p { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 70ch; }
.pw-section.narrow h1 { font-size: clamp(30px,4vw,44px); color: var(--text); margin: 0 0 18px; }
.pw-kicker { color: var(--gold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; }

.pw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 40px; }
.pw-grid-2col { grid-template-columns: repeat(2, 1fr); }

/* hamburger hidden by default — ≤640px media query shows it */
.pw-nav-toggle { display: none; }
.pw-feature {
  background: linear-gradient(180deg, rgba(10,23,16,.9), rgba(5,12,9,.9));
  border: 1px solid rgba(47,232,132,.14); border-radius: 14px; padding: 28px;
  transition: border-color .2s, transform .2s;
}
.pw-feature:hover { border-color: rgba(47,232,132,.4); transform: translateY(-3px); }
.pw-feature .pw-ico { font-size: 24px; color: var(--gold); margin-bottom: 14px; }
.pw-feature h3 { color: var(--text); font-size: 19px; margin: 0 0 8px; }
.pw-feature p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

.pw-band {
  background: linear-gradient(135deg, rgba(47,232,132,.08), rgba(47,232,132,.02));
  border-top: 1px solid rgba(47,232,132,.14); border-bottom: 1px solid rgba(47,232,132,.14);
  text-align: center; padding: 80px 7vw; margin-top: 30px;
}
.pw-band h2 { font-size: clamp(26px,3.6vw,40px); color: var(--text); margin: 0 0 16px; }
.pw-band p { color: var(--muted); font-size: 18px; max-width: 60ch; margin: 0 auto 30px; }

/* ---- prose (about/privacy/terms) ---- */
.pw-prose { color: var(--muted); font-size: 16px; line-height: 1.75; }
.pw-prose h2 { font-size: 22px; color: var(--text); margin: 34px 0 12px; }
.pw-prose p { margin: 0 0 16px; }
.pw-prose ul { margin: 0 0 16px; padding-left: 22px; }
.pw-prose li { margin-bottom: 8px; }
.pw-prose strong { color: var(--text); }

/* ---- capture form ---- */
.pw-form-wrap { max-width: 760px; margin: 0 auto; padding: 60px 7vw 80px; }
.pw-form-card {
  background: linear-gradient(180deg, rgba(10,23,16,.9), rgba(5,12,9,.95));
  border: 1px solid rgba(47,232,132,.18); border-radius: 18px; padding: 38px;
}
.pw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pw-form-grid .full { grid-column: 1 / -1; }
.pw-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.pw-field input, .pw-field textarea, .pw-field select {
  width: 100%; background: rgba(3,7,13,.8); border: 1px solid rgba(47,232,132,.2);
  border-radius: 9px; padding: 12px 14px; color: var(--text); font-size: 15px; font-family: inherit;
  box-sizing: border-box; transition: border-color .15s;
}
.pw-field input:focus, .pw-field textarea:focus, .pw-field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(47,232,132,.12);
}
.pw-field textarea { resize: vertical; min-height: 110px; }
.pw-assist {
  display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; padding: 14px 16px;
  background: rgba(47,232,132,.06); border: 1px solid rgba(47,232,132,.18); border-radius: 11px;
  font-size: 14px; color: var(--text); line-height: 1.5;
}
.pw-assist .pw-assist-ico { color: var(--gold); font-size: 18px; flex-shrink: 0; }
.pw-assist .pw-assist-text { flex: 1; }

/* ---- flash ---- */
.pw-flash { max-width: 760px; margin: 18px auto -10px; padding: 12px 18px; border-radius: 10px; font-size: 14px; }
.pw-flash.warning { background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.4); color: #f5d98a; }
.pw-flash.success { background: rgba(47,232,132,.1); border: 1px solid rgba(47,232,132,.4); color: var(--gold); }
.pw-flash.danger { background: rgba(239,83,80,.12); border: 1px solid rgba(239,83,80,.4); color: #ff9c99; }

/* ---- thank you ---- */
.pw-center { text-align: center; padding: 120px 7vw; }
.pw-center .pw-big-ico { font-size: 54px; color: var(--gold); text-shadow: 0 0 30px rgba(47,232,132,.5); margin-bottom: 20px; }

/* ---- footer ---- */
.pw-footer { border-top: 1px solid rgba(47,232,132,.12); padding: 44px 7vw 30px; margin-top: 40px; background: rgba(3,7,13,.6); }
.pw-footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; }
.pw-foot-brand { font-weight: 700; color: var(--text); }
.pw-foot-tag { color: var(--muted); font-weight: 400; font-size: 14px; margin: 10px 0 0; max-width: 32ch; }
.pw-foot-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.pw-foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.pw-foot-links a:hover { color: var(--gold); }
.pw-foot-legal { text-align: center; color: var(--muted); font-size: 12px; margin-top: 30px; opacity: .7; }

/* ================================================================
   RESPONSIVE — tablet (≤960px)
   ================================================================ */
@media (max-width: 960px) {
  .pw-hero { padding: 70px 5vw 60px; }
  .pw-section { padding: 50px 5vw; }
  .pw-band { padding: 60px 5vw; }
  .pw-grid { gap: 16px; }
}

/* ================================================================
   RESPONSIVE — mobile (≤640px)
   ================================================================ */
@media (max-width: 640px) {
  /* -- nav: hamburger toggle -- */
  .pw-nav { padding: 14px 5vw; flex-wrap: wrap; }
  .pw-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid rgba(47,232,132,.3); border-radius: 6px;
    color: var(--gold); font-size: 22px; width: 38px; height: 38px; cursor: pointer;
  }
  .pw-links {
    display: none; flex-direction: column; width: 100%; gap: 0;
    margin-top: 12px; border-top: 1px solid rgba(47,232,132,.12); padding-top: 10px;
  }
  .pw-links.open { display: flex; }
  .pw-links a {
    padding: 10px 0; font-size: 15px; border-bottom: 1px solid rgba(47,232,132,.08);
  }
  .pw-links .pw-cta {
    margin-top: 6px; text-align: center; border-bottom: none;
  }

  /* -- hero -- */
  .pw-hero { padding: 50px 5vw 44px; }
  .pw-eyebrow { font-size: 10px; letter-spacing: 2px; padding: 5px 12px; }
  .pw-hero h1 { font-size: clamp(28px, 7vw, 42px); }
  .pw-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .pw-hero-actions .pw-btn { text-align: center; }
  .pw-hero-card { padding: 20px 18px; font-size: 15px; margin-top: 28px; }

  /* -- sections + grids -- */
  .pw-section { padding: 40px 5vw; }
  .pw-grid { grid-template-columns: 1fr !important; gap: 14px; margin-top: 24px; }
  .pw-feature { padding: 22px 18px; }
  .pw-feature h3 { font-size: 17px; }
  .pw-feature p { font-size: 14px; }

  /* -- CTA band -- */
  .pw-band { padding: 50px 5vw; }
  .pw-band h2 { font-size: clamp(22px, 5vw, 30px); }
  .pw-band p { font-size: 15px; }
  .pw-band .pw-btn { width: 100%; text-align: center; box-sizing: border-box; }

  /* -- form -- */
  .pw-form-wrap { padding: 30px 4vw 50px; }
  .pw-form-card { padding: 22px 16px; }
  .pw-form-grid { grid-template-columns: 1fr; }

  /* -- footer -- */
  .pw-footer { padding: 30px 5vw 20px; }
  .pw-footer-inner { flex-direction: column; gap: 18px; }
  .pw-foot-links { flex-direction: column; gap: 10px; }
  .pw-foot-legal { margin-top: 18px; }

  /* -- thank-you -- */
  .pw-center { padding: 70px 5vw; }

  /* -- prose (about/privacy/terms) -- */
  .pw-prose { font-size: 15px; }
  .pw-prose h2 { font-size: 19px; }

  /* -- buttons -- */
  .pw-btn { padding: 12px 22px; font-size: 15px; }
}

/* ================================================================
   RESPONSIVE — very small phones (≤380px)
   ================================================================ */
@media (max-width: 380px) {
  .pw-hero h1 { font-size: 26px; }
  .pw-section h2 { font-size: 22px; }
  .pw-brand { font-size: 17px; }
  .pw-hero-card { padding: 16px 14px; font-size: 14px; }
  .pw-form-card { padding: 18px 12px; }
  .pw-feature { padding: 18px 14px; }
}