/* ReviveGuard Marketing Site — Main Stylesheet
   Pure CSS, no framework. Target: <10KB gzipped.
   Design: Dark navy + electric green accent. Trust + tech feel.
*/

/* ── Reset & Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0a0f1e;color:#e2e8f0;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ── CSS Custom Properties ──────────────────────────────────── */
:root{
  --green:#22c55e;
  --green-dim:#16a34a;
  --green-glow:rgba(34,197,94,.18);
  --navy:#0a0f1e;
  --navy-2:#0d1526;
  --navy-3:#111827;
  --card:#131f35;
  --border:#1e2d45;
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --text-dim:#64748b;
  --white:#fff;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --transition:.2s ease;
  --max-w:1140px;
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.2;font-weight:700;color:var(--white)}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.1rem}
p{color:var(--text-muted);font-size:1.05rem}
.lead{font-size:clamp(1.1rem,2vw,1.25rem);color:var(--text)}

/* ── Layout Helpers ─────────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section--sm{padding:3rem 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.text-center{text-align:center}
.text-green{color:var(--green)}
.gap-1{gap:.5rem}
.gap-2{gap:1rem}

/* ── Nav ────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.9rem 0;transition:background var(--transition),box-shadow var(--transition)}
.nav.scrolled{background:rgba(10,15,30,.95);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.nav__logo{font-size:1.3rem;font-weight:800;color:var(--white);display:flex;align-items:center;gap:.5rem}
.nav__logo span{color:var(--green)}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a{color:var(--text-muted);font-size:.95rem;font-weight:500;transition:color var(--transition)}
.nav__links a:hover{color:var(--white)}
.nav__cta{display:flex;align-items:center;gap:.75rem}
.nav__hamburger{display:none;flex-direction:column;gap:5px;padding:.4rem}
.nav__hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.nav__mobile{display:none;position:fixed;top:60px;left:0;right:0;background:var(--navy-2);border-bottom:1px solid var(--border);padding:1.5rem;z-index:99}
.nav__mobile.open{display:block}
.nav__mobile a{display:block;padding:.75rem 0;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:1rem}
.nav__mobile a:last-child{border:none}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.95rem;transition:all var(--transition);white-space:nowrap}
.btn--primary{background:var(--green);color:#0a0f1e}
.btn--primary:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,197,94,.3)}
.btn--outline{border:1.5px solid var(--border);color:var(--text)}
.btn--outline:hover{border-color:var(--green);color:var(--green)}
.btn--ghost{color:var(--text-muted);padding:.75rem 1rem}
.btn--ghost:hover{color:var(--white)}
.btn--lg{padding:1rem 2rem;font-size:1.05rem;border-radius:var(--radius)}
.btn--sm{padding:.5rem 1rem;font-size:.85rem}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px}
.hero__bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(34,197,94,.12) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(34,197,94,.06) 0%,transparent 60%)}
.hero__grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;opacity:.3}
.hero__content{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:var(--green);padding:.35rem 1rem;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:1.5rem}
.hero__badge::before{content:'';width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse-dot 2s infinite}
.hero__title{margin-bottom:1.25rem}
.hero__title em{font-style:normal;color:var(--green)}
.hero__sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--text-muted);max-width:620px;margin:0 auto 2.5rem}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__social-proof{margin-top:3.5rem;color:var(--text-dim);font-size:.9rem}
.hero__stars{color:#f59e0b;letter-spacing:2px;margin-bottom:.3rem}
.hero__dashboard-preview{margin-top:4rem;position:relative}
.hero__dashboard-preview::before{content:'';position:absolute;top:-1px;left:0;right:0;height:60px;background:linear-gradient(to bottom,var(--navy),transparent);z-index:1}
.dashboard-mockup{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:800px;margin:0 auto;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.mockup-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.mockup-dot{width:10px;height:10px;border-radius:50%}
.mockup-dot:nth-child(1){background:#ef4444}
.mockup-dot:nth-child(2){background:#f59e0b}
.mockup-dot:nth-child(3){background:#22c55e}
.mockup-url{background:rgba(255,255,255,.05);border-radius:4px;padding:.2rem .8rem;font-size:.75rem;color:var(--text-dim);margin-left:.5rem}
.mockup-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.mockup-stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem}
.mockup-stat__label{font-size:.7rem;color:var(--text-dim);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
.mockup-stat__val{font-size:1.2rem;font-weight:700;color:var(--white)}
.mockup-stat__val.green{color:var(--green)}
.mockup-stat__val.yellow{color:#f59e0b}
.mockup-sites{display:flex;flex-direction:column;gap:.5rem}
.mockup-site-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:.6rem 1rem;font-size:.82rem}
.mockup-site-name{color:var(--text);font-weight:500}
.mockup-site-badge{padding:.15rem .6rem;border-radius:4px;font-size:.7rem;font-weight:600}
.mockup-site-badge.up{background:rgba(34,197,94,.15);color:var(--green)}
.mockup-site-badge.warn{background:rgba(245,158,11,.15);color:#f59e0b}

/* ── Section Header ─────────────────────────────────────────── */
.section-header{text-align:center;margin-bottom:3.5rem}
.section-header .eyebrow{display:inline-block;color:var(--green);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.section-header h2{margin-bottom:.75rem}
.section-header p{max-width:560px;margin:0 auto}

/* ── Problem / Anxiety Section ──────────────────────────────── */
.problem{background:var(--navy-2)}
.problem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.problem__card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;position:relative;overflow:hidden}
.problem__card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ef4444,#f97316)}
.problem__icon{font-size:2rem;margin-bottom:1rem}
.problem__card h4{color:var(--white);margin-bottom:.5rem}
.problem__card p{font-size:.95rem}

/* ── How It Works ───────────────────────────────────────────── */
.how-it-works{background:var(--navy)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
.steps::before{content:'';position:absolute;top:28px;left:calc(16.66% + .5rem);right:calc(16.66% + .5rem);height:1px;background:linear-gradient(90deg,var(--border),var(--green),var(--border))}
.step{text-align:center}
.step__num{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--green);color:var(--green);font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;position:relative;z-index:1}
.step h4{color:var(--white);margin-bottom:.5rem}
.step p{font-size:.9rem}

/* ── Features ───────────────────────────────────────────────── */
.features{background:var(--navy-2)}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.feature-item{display:flex;align-items:flex-start;gap:.9rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem}
.feature-item:hover{border-color:rgba(34,197,94,.3);transform:translateY(-2px);transition:all var(--transition)}
.feature-icon{flex-shrink:0;width:36px;height:36px;background:rgba(34,197,94,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.feature-item h4{color:var(--white);font-size:1rem;margin-bottom:.2rem}
.feature-item p{font-size:.88rem}

/* ── Pricing ────────────────────────────────────────────────── */
.pricing{background:var(--navy)}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.plan-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;position:relative;transition:all var(--transition)}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan-card--popular{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 16px 48px rgba(34,197,94,.15)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#0a0f1e;font-size:.75rem;font-weight:700;padding:.2rem .9rem;border-radius:99px;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.plan-name{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.5rem}
.plan-price{display:flex;align-items:baseline;gap:.25rem;margin-bottom:.25rem}
.plan-price strong{font-size:2.8rem;font-weight:800;color:var(--white);line-height:1}
.plan-price span{color:var(--text-muted)}
.plan-who{font-size:.9rem;color:var(--text-muted);margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.plan-features{flex:1;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem}
.plan-feature{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--text)}
.plan-feature::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0;margin-top:.05rem}
.plan-feature.no{color:var(--text-dim)}
.plan-feature.no::before{content:'–';color:var(--text-dim)}
.plan-cta{margin-top:auto}

/* ── Add-ons ────────────────────────────────────────────────── */
.addons{background:var(--navy-2)}
.addons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.addon-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.addon-card:hover{border-color:rgba(34,197,94,.25)}
.addon-name{font-size:.95rem;color:var(--white);font-weight:500}
.addon-desc{font-size:.82rem;color:var(--text-dim);margin-top:.1rem}
.addon-price{font-size:1.1rem;font-weight:700;color:var(--green);white-space:nowrap;flex-shrink:0}

/* ── Compare / Why Us ───────────────────────────────────────── */
.compare{background:var(--navy)}
.compare-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.compare-table{width:100%;border-collapse:collapse;font-size:.9rem}
.compare-table th{background:var(--card);padding:1rem 1.25rem;text-align:left;color:var(--text-dim);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.compare-table th:first-child{color:var(--white)}
.compare-table td{padding:.9rem 1.25rem;border-bottom:1px solid rgba(30,45,69,.6);color:var(--text-muted)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:rgba(255,255,255,.02)}
.compare-table td:first-child{color:var(--text);font-weight:500}
.compare-table .yes{color:var(--green);font-weight:700}
.compare-table .no{color:var(--text-dim)}
.compare-table .rg{color:var(--white);background:rgba(34,197,94,.06)}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials{background:var(--navy-2)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.testimonial-stars{color:#f59e0b;font-size:1rem;letter-spacing:2px}
.testimonial-text{color:var(--text);font-size:.95rem;line-height:1.7;flex:1}
.testimonial-text::before{content:'"';color:var(--green);font-size:2rem;line-height:0;vertical-align:-.4em;margin-right:.25rem}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#0ea5e9);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0}
.testimonial-name{font-size:.9rem;color:var(--white);font-weight:600}
.testimonial-role{font-size:.8rem;color:var(--text-dim)}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{background:var(--navy)}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.faq-question{width:100%;text-align:left;padding:1.1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;color:var(--white);font-weight:600;font-size:.95rem;background:none;transition:background var(--transition)}
.faq-question:hover{background:rgba(255,255,255,.03)}
.faq-question span{color:var(--text-dim);font-size:1.2rem;transition:transform var(--transition)}
.faq-item.open .faq-question span{transform:rotate(45deg);color:var(--green)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-answer p{padding:0 1.25rem 1.1rem;color:var(--text-muted);font-size:.93rem}
.faq-item.open .faq-answer{max-height:300px}

/* ── CTA Banner ─────────────────────────────────────────────── */
.cta-banner{background:linear-gradient(135deg,rgba(34,197,94,.12) 0%,rgba(14,165,233,.08) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-banner__inner{text-align:center;max-width:640px;margin:0 auto}
.cta-banner h2{margin-bottom:.75rem}
.cta-banner p{margin-bottom:2rem}
.cta-banner__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta-trust{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.cta-trust-item{display:flex;align-items:center;gap:.4rem;color:var(--text-dim);font-size:.85rem}
.cta-trust-item::before{content:'✓';color:var(--green)}

/* ── Footer ─────────────────────────────────────────────────── */
.footer{background:var(--navy-3);border-top:1px solid var(--border);padding:3rem 0 1.5rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer__brand p{font-size:.9rem;color:var(--text-dim);margin-top:.75rem;max-width:260px}
.footer__col h5{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:1rem}
.footer__col a{display:block;color:var(--text-dim);font-size:.9rem;margin-bottom:.5rem;transition:color var(--transition)}
.footer__col a:hover{color:var(--green)}
.footer__bottom{border-top:1px solid var(--border);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.footer__bottom p{font-size:.82rem;color:var(--text-dim)}
.footer__bottom-links{display:flex;gap:1.25rem}
.footer__bottom-links a{font-size:.82rem;color:var(--text-dim);transition:color var(--transition)}
.footer__bottom-links a:hover{color:var(--green)}

/* ── Status Dot / Live Indicator ────────────────────────────── */
.live-dot{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.live-dot{animation:pulse-dot 2s infinite}

/* ── Stat Counter Strip ─────────────────────────────────────── */
.stats-strip{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat-item{padding:1.75rem 1rem;border-right:1px solid var(--border)}
.stat-item:last-child{border:none}
.stat-item__num{font-size:2rem;font-weight:800;color:var(--white);line-height:1;margin-bottom:.25rem}
.stat-item__num span{color:var(--green)}
.stat-item__label{font-size:.82rem;color:var(--text-dim)}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2d4060}

/* ── Animations ─────────────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-2{grid-template-columns:1fr}
  .pricing__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .addons-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .section{padding:3.5rem 0}
  .nav__links,.nav__cta .btn--outline{display:none}
  .nav__hamburger{display:flex}
  .hero__actions{flex-direction:column;align-items:center}
  .problem__grid,.steps,.testimonial-grid,.compare-table,.stats-inner{grid-template-columns:1fr}
  .steps::before{display:none}
  .pricing__grid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .addons-grid{grid-template-columns:1fr}
  .mockup-stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--border)}
}
@media(max-width:480px){
  h1{font-size:2rem}
  .btn--lg{width:100%;justify-content:center}
  .mockup-stats{grid-template-columns:1fr}
}