:root { --bg:#fcfbff; --surface:#fff; --text:#37466f; --muted:#7482a3; --line:#e7e9f6; --blue:#7c89d8; --blue-dark:#5966c2; --red:#e49696; --red-dark:#cf8080; --yellow:#eb7f95; --max:1180px; --shadow:0 14px 32px rgba(97,106,166,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Nunito","Poppins","Segoe UI",Arial,sans-serif; color:var(--text); line-height:1.6; background:radial-gradient(circle at 8% 7%, rgba(255,213,186,.40), rgba(255,213,186,0) 36%), radial-gradient(circle at 95% 8%, rgba(208,218,255,.42), rgba(208,218,255,0) 40%), var(--bg); }
.container { width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

header { position:sticky; top:0; z-index:60; background:linear-gradient(90deg, rgba(255,248,250,.98), rgba(246,249,255,.98)); border-bottom:1px solid #ece1f3; backdrop-filter:blur(8px); box-shadow: 0 4px 12px rgba(140,122,165,.12); }
.nav { min-height: 78px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; }
.brand { display: flex; align-items: center; gap: 0.62rem; text-decoration: none; color: #434e80; font-weight: 800; font-size: 1.14rem; flex: 0 0 auto; }
.brand img,.f-logo { width:42px; height:42px; border-radius:10px; border:1px solid #dbe6f9; object-fit:contain; background:#fff; padding:3px; }
.links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: nowrap; flex: 1; justify-content: center; }
.links a { text-decoration: none; color: #505d8a; font-size: 0.98rem; font-weight: 700; white-space: nowrap; }
.links a:hover { color: #5966c2; }
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(89, 102, 194, .28);
  outline-offset: 2px;
}
.trust-note-wrap { padding: 0.4rem 0 0.15rem; }
.trust-note { margin: 0; text-align: center; color: #5966c2; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; }
.btn { border:0; border-radius:999px; padding:.75rem 1.2rem; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; cursor:pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn-primary { background: var(--yellow); color:#fff; border:1px solid #d9647d; box-shadow:0 10px 22px rgba(217,100,125,.2); }
.btn-primary:hover { background: #e34a5c; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background:#fff; color:var(--blue-dark); border:1px solid #dfe4f8; }
.nav-cta { border-radius:4px; padding:.72rem 1.08rem; min-width:120px; }

.hero { padding:1.6rem 0 1.2rem; }
.hero-box { border:1px solid #efcfb4; border-radius:20px; background:linear-gradient(135deg,#ffe8dc 0%,#ffd9c9 55%,#ffe7c6 100%); padding:clamp(1.2rem,2.5vw,2rem); box-shadow:var(--shadow); }
.hero h1 { margin:0; font-size:clamp(2.15rem,5vw,3.35rem); line-height:1.08; letter-spacing:-.01em; }
.hero p { margin:.8rem 0 0; color:#2f3b5f; max-width:66ch; }
.hero-cta { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }

.section { padding:2.2rem 0; content-visibility:auto; contain-intrinsic-size:1px 740px; }
.section h2 { margin: 0; text-align: center; font-size: clamp(1.55rem, 3.3vw, 2.3rem); line-height: 1.16; letter-spacing: -0.01em; }
.sub { margin:.55rem auto 0; max-width:72ch; text-align:center; color:var(--muted); font-size:.94rem; }

.plans { margin-top:1.1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.plan { background:#fff; border:1px solid #e1e9fb; border-radius:16px; padding:1rem; box-shadow:0 8px 20px rgba(29,53,116,.07); position:relative; }
.plan.featured { border:2px solid #efcfb4; box-shadow:0 12px 20px rgba(180,150,130,.18); }
.badge { position:absolute; top:-10px; right:12px; background:#fff3ec; color:#7b5f4d; border:1px solid #efcfb4; border-radius:999px; font-size:.7rem; font-weight:800; padding:.22rem .5rem; }
.plan h3 { margin:0; color:#224595; font-size:1.02rem; }
.price { margin-top:.5rem; font-size:1.9rem; line-height:1; font-weight:800; color:var(--blue-dark); }
.price span { font-size:.88rem; color:var(--muted); font-weight:600; }
.old { margin-top:.28rem; color:#7a86a5; text-decoration:line-through; font-size:.83rem; }
.plan ul { margin:.8rem 0 0; padding:0; list-style:none; display:grid; gap:.38rem; color:#43557b; font-size:.87rem; font-weight:600; }
.plan li::before { content:"✓ "; color:var(--green,#1ea763); font-weight:800; }

.chips { margin-top:.9rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.chip { background:#fff; border:1px solid #e1e9fb; border-radius:12px; text-align:center; padding:.7rem; font-size:.86rem; font-weight:700; color:#445680; }

.includes { margin-top:1rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.inc { background:#fff; border:1px solid #e2eafc; border-radius:13px; padding:.8rem; }
.inc h4 { margin:0; color:#24489d; font-size:.92rem; }
.inc p { margin:.35rem 0 0; color:var(--muted); font-size:.82rem; }

.steps { margin-top:1rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.step { background:#fff; border:1px solid #e2eafc; border-radius:13px; padding:.82rem; }
.n { width:28px; height:28px; border-radius:50%; background:#fff3ec; border:1px solid #efcfb4; color:#7b5f4d; display:grid; place-items:center; font-size:.8rem; font-weight:700; margin-bottom:.4rem; }
.step h5 { margin:0; color:#24489d; font-size:.9rem; }
.step p { margin:.34rem 0 0; color:var(--muted); font-size:.82rem; }

.proof-grid { margin-top:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
blockquote { margin:0; background:#fff; border:1px solid #e2eafc; border-radius:13px; padding:.86rem; color:#44577d; font-size:.87rem; }
blockquote footer { margin-top:.5rem; color:#24489d; font-size:.8rem; font-weight:700; }

.cta-panel { margin-top:1rem; background:#f6f4ff; border:1px solid #e3def8; border-radius:16px; padding:1rem; display:flex; justify-content:space-between; align-items:center; gap:.7rem; flex-wrap:wrap; }

footer { margin-top:1.5rem; border-top:1px solid var(--line); padding:1.2rem 0 2rem; color:#66779b; font-size:.84rem; background:#fff; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:1rem; }
.f h6 { margin:0; color:#24489d; font-size:.87rem; }
.f a,.f p { margin:.34rem 0 0; display:block; text-decoration:none; color:#5e6f94; font-size:.8rem; line-height:1.45; }
.social-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.55rem; }
.social-row a { text-decoration: none; color: #24489d; font-size: 0.76rem; font-weight: 700; border: 1px solid #d9e5fb; border-radius: 999px; padding: 0.2rem 0.55rem; background: #f7faff; }
.footer-connect { margin-top: 0.6rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.c-btn { text-decoration: none; border-radius: 999px; padding: 0.32rem 0.7rem; font-size: 0.76rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.c-btn-wa { background: #d9f3e7; color: #2e6a50; border: 1px solid #bde8d6; }
.c-btn-call { background: #ffe3e3; color: #8d4f4f; border: 1px solid #f5c3c3; }
.legal { margin-top:.9rem; padding-top:.8rem; border-top:1px solid #eaf0fb; display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.replace-note { margin-top: 0.55rem; text-align: center; color: #6d7ca0; font-size: 0.78rem; font-weight: 600; }

.mobile-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:80; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid #dfe8fc; backdrop-filter:blur(8px); box-shadow: 0 4px 12px rgba(140,122,165,.12); }
.mobile-cta .btn { width:100%; }

@media (max-width:1080px) {
  .nav { min-height:72px; gap:.9rem; }
  .links { gap:.92rem; justify-content:flex-start; }
  .links a { font-size:.86rem; }
  .plans,.includes,.steps,.proof-grid,.footer-grid,.chips { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "links links";
    min-height:auto;
    padding:.55rem 0 .35rem;
    row-gap:.45rem;
  }
  .brand { grid-area: brand; }
  .nav-cta {
    grid-area: cta;
    min-width:auto;
    padding:.52rem .86rem;
    font-size:.82rem;
  }
  .links {
    grid-area: links;
    width:100%;
    justify-content:flex-start;
    gap:.38rem;
    overflow:visible;
    flex-wrap:wrap;
    padding-bottom:0;
  }
  .links a {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    font-size:.76rem;
    background:#fff;
    border:1px solid #e1e8fb;
    border-radius:999px;
    padding:.3rem .54rem;
  }
  .brand span { font-size:1rem; }
}
@media (max-width:720px) {
  .container { width:min(var(--max), calc(100% - .9rem)); }
  .nav { gap:.4rem; }
  .brand img { width:36px; height:36px; }
  .brand span { font-size:.95rem; }
  .nav-cta { padding:.42rem .66rem; font-size:.76rem; }
  .hero { padding:1rem 0 .75rem; }
  .section { padding:1.45rem 0; }
  .hero h1 { font-size: clamp(1.82rem, 8.6vw, 2.28rem); line-height: 1.12; }
  .hero p { font-size:.92rem; }
  .plans,.includes,.steps,.proof-grid,.footer-grid,.chips { grid-template-columns:1fr; }
  .hero-cta a,.cta-panel .btn,.mobile-cta .btn { width:100%; }
  body { padding-bottom:68px; }
  .mobile-cta { display:block; }
}