
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Pacifico&display=swap');
:root{
  --accent-1:#ff3ea5;
  --accent-2:#ff8dcf;
  --accent-hover:#ff65b9;
  --accent-contrast:#fff;
  --body-bg:#ffffff;
  --body-fg:#1a1a1a;
  --muted-fg:#666;
  --card-bg:#ffffff;
  --card-border:#e5e5e5;
  --shadow:0 2px 10px rgb(0 0 0 / .08);
  --radius:16px;
  --max-width:1200px;
}
@media(prefers-color-scheme:dark){
  :root{
    --body-bg:#0f0f11;
    --body-fg:#f5f5f7;
    --muted-fg:#bbb;
    --card-bg:#1b1b1f;
    --card-border:#2a2a32;
    --shadow:0 2px 10px rgb(0 0 0 / .6);
  }
}
body.dark-mode{
  --body-bg:#0f0f11!important;
  --body-fg:#f5f5f7!important;
  --muted-fg:#bbb!important;
  --card-bg:#1b1b1f!important;
  --card-border:#2a2a32!important;
  --shadow:0 2px 10px rgb(0 0 0 / .6)!important;
}
/* trimmed; we reuse earlier CSS layout */

*{box-sizing:border-box;margin:0;padding:0;}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;background:var(--body-bg);color:var(--body-fg);display:flex;flex-direction:column;min-height:100vh;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent-1);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;color:var(--accent-hover);}
.wrapper{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:1rem;}
.hero{padding:6rem 1rem 5rem;text-align:center;position:relative;background:linear-gradient(135deg,var(--accent-1) 0%,var(--accent-2) 100%);color:#fff;}
.hero-logo{margin-inline:auto;margin-bottom:1.25rem;max-width:160px;}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;font-weight:800;}
.hero-tag{font-size:1.125rem;max-width:40ch;margin:1rem auto 2rem;line-height:1.35;}
.hero-ctas{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;}
.theme-toggle{position:absolute;top:1rem;right:1rem;background:rgb(255 255 255 / .2);backdrop-filter:blur(8px);padding:.5rem 1rem;border:1px solid rgb(255 255 255 / .4);border-radius:16px;font-size:1.25rem;line-height:1;}
.section-title{text-align:center;margin-bottom:.75em;font-size:clamp(1.5rem,2vw,2rem);}
.section-intro{text-align:center;max-width:60ch;margin:0 auto 2rem;}
.trust{padding:2.5rem 1rem;}
.trust-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;list-style:none;color:var(--muted-fg);font-size:1rem;}
.picks{padding:3rem 1rem;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:2rem;margin-top:2rem;}
.card{background:var(--card-bg);color:var(--body-fg);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 2px 10px rgb(0 0 0 / .08);display:flex;flex-direction:column;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 6px 20px rgb(0 0 0 / .15);}
.card-figure img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;}
.card-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;text-align:left;}
.card-title{font-size:1.25rem;font-weight:700;}
.card-text{font-size:1rem;color:var(--muted-fg);line-height:1.4;}
.card-bullets{list-style:disc;margin-left:1.25rem;display:grid;gap:.25rem;}
.btn{padding:.875rem 1.25rem;border-radius:16px;font-weight:700;display:inline-block;line-height:1.2;border:2px solid transparent;transition:all .15s ease;text-align:center;}
.btn-primary{background:var(--accent-1);color:#fff;}
.btn-primary:hover{background:var(--accent-1);color:#000;transform:translateY(-1px);}
.btn-outline{background:transparent;color:#fff;border-color:#fff;}
.btn-outline:hover{background:#fff;color:var(--accent-1);}
.btn-xl{font-size:1.125rem;padding:1rem 1.75rem;}
.btn-block{display:block;width:100%;}
.compare{padding:3rem 1rem;}
.table-wrap{overflow-x:auto;margin-top:2rem;}
.compare-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:600px;}
.compare-table th,.compare-table td{padding:.75rem 1rem;border:1px solid var(--card-border);text-align:left;line-height:1.3;}
.compare-table thead th{background:var(--accent-1);color:#fff;font-weight:700;}
.compare-note{text-align:center;margin-top:1rem;font-size:.85rem;color:var(--muted-fg);}
.how{padding:3rem 1rem;}
.how-steps{max-width:600px;margin-inline:auto;display:grid;gap:1.25rem;font-size:1.0625rem;line-height:1.4;}
.faq{padding:3rem 1rem;}
.faq-item{margin-bottom:1rem;border:1px solid var(--card-border);border-radius:16px;background:var(--card-bg);padding:1rem 1.25rem;box-shadow:0 2px 10px rgb(0 0 0 / .08);}
.faq-item summary{cursor:pointer;font-weight:700;}
.faq-item p{margin-top:1rem;color:var(--muted-fg);text-align:justify;}
.site-footer{background:var(--card-bg);border-top:1px solid var(--card-border);margin-top:4rem;}
.footer-inner{padding:2rem 1rem;text-align:center;display:grid;gap:1rem;}
.footer-nav{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap;font-size:.95rem;}
.footer-badges{margin-top:1rem;display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.875rem;color:var(--muted-fg);}
.footer-badges img{height:32px;width:auto;}
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:1000;background:var(--accent-1);padding:.5rem;text-align:center;box-shadow:0 -2px 10px rgb(0 0 0 / .25);}
.sticky-cta-btn{display:inline-block;padding:.75rem 1.5rem;background:transparent;color:#fff;font-weight:700;font-size:1.125rem;}
@media(min-width:600px){.sticky-cta{display:none;}}
.modal{position:fixed;inset:0;background:rgb(0 0 0 / .65);display:none;align-items:center;justify-content:center;padding:1rem;z-index:2000;}
.modal.show{display:flex;}
.modal-content{background:var(--card-bg);color:var(--body-fg);padding:2rem;max-width:420px;width:100%;border-radius:16px;text-align:center;box-shadow:0 2px 10px rgb(0 0 0 / .08);position:relative;}
.modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:none;font-size:2rem;line-height:1;color:var(--muted-fg);}
.modal-content input[type=email]{width:100%;padding:.75rem;margin-bottom:1rem;border:1px solid var(--card-border);border-radius:8px;font-size:1rem;}
.legal-wrap h4{font-size:1.25rem;margin-top:2rem;margin-bottom:.5rem;text-align:left;}
.legal-wrap p{text-align:justify;line-height:1.5;margin-top:1rem;}
