/* Charmfling Landing — mint & peach theme, mobile-first */
:root{
  --bg:#0a1413; --bg-soft:#0e1716; --card:#11201e;
  --txt:#ecfffb; --muted:#bfe1da;
  --brand:#62f0c8; --brand-2:#ffc89a; --accent:#9fe3ff;
  --radius:1.1rem; --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1120px; --space:clamp(16px, 2vw, 28px);
}
*{box-sizing:border-box}
/* Make [hidden] actually hide for mobile nav */
[hidden]{display:none !important;}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial;
  color:var(--txt);
  background:
    radial-gradient(60vw 60vh at 20% -10%, rgba(98,240,200,.12), transparent 60%),
    radial-gradient(40vw 40vh at 100% 0%, rgba(255,200,154,.12), transparent 60%),
    var(--bg);
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin-inline:auto;padding:0 var(--space)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(var(--space) * 2)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space) * 1.25)}
@media (max-width:940px){.grid-2,.grid-3{grid-template-columns:1fr}}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:var(--space);top:var(--space);width:auto;height:auto;background:#fff;color:#000;padding:.5rem 1rem;border-radius:8px;z-index:999}

.site-header{
  position:sticky;top:0;z-index:10;background:rgba(14,23,22,.6);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.site-header .container{display:flex;align-items:center;gap:var(--space);padding:14px var(--space)}
.brand{display:flex;align-items:center;gap:.6rem}
.wordmark{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:1rem}
.cta-group{margin-left:auto;display:flex;gap:.6rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.1rem;border-radius:999px;border:1px solid transparent;
  font-weight:700;cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease; box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0e1716;border-color:transparent}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25);border-width:1px;border-style:solid;color:var(--txt)}
.hamburger{display:none;background:none;border:none;margin-left:.2rem}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* Mobile nav is visible on small screens only when NOT [hidden] */
.mobile-nav{display:none;flex-direction:column;gap:.6rem;padding:0 var(--space) var(--space)}
.mobile-nav a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
@media (max-width:860px){
 .nav,.cta-group{display:none}
 .hamburger{display:inline-block}
 .mobile-nav{display:flex}
}

.hero{padding:calc(var(--space) * 4) 0;background:
  radial-gradient(60vw 60vh at 80% -10%, rgba(98,240,200,.18), transparent 60%),
  radial-gradient(40vw 30vh at 10% 0%, rgba(159,227,255,.16), transparent 70%)}
h1{font-size:clamp(28px, 5vw, 54px);line-height:1.05;margin:0 0 1rem;font-weight:900}
.lead{font-size:clamp(16px, 2.2vw, 22px);color:var(--muted);margin-bottom:1.2rem}
.trust-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none}
.trust-chips li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:.5rem .75rem;border-radius:999px;color:#e1fff8}

.how,.features,.chat,.reviews,.split,.faq,.legal{padding:calc(var(--space) * 3) 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space);padding:0;list-style:none;margin:1.2rem 0 0}
.steps li{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);padding:1.2rem;border-radius:var(--radius)}
.steps h3{margin:.2rem 0 .6rem}
@media (max-width:940px){.steps{grid-template-columns:1fr}}

.features .card, .callout{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  padding:1.1rem;border-radius:var(--radius);box-shadow:var(--shadow)
}
.features h3{margin-top:.2rem}
.bullets{margin:.6rem 0 0;padding-left:1.2rem;color:var(--muted)}

.reviews .review{
  background:linear-gradient(180deg, rgba(98,240,200,.16), rgba(255,255,255,.03));
  border:1px solid rgba(98,240,200,.35);
  padding:1rem;border-radius:var(--radius);font-style:italic
}

.split .demo-form{
  display:grid;gap:.7rem;background:var(--card);border:1px solid rgba(255,255,255,.08);
  padding:1rem;border-radius:var(--radius)
}
.demo-form label{display:grid;gap:.35rem}
.demo-form input[type="text"], .demo-form input[type="email"]{
  background:#0f1b19;border:1px solid rgba(255,255,255,.2);border-radius:.8rem;padding:.8rem;color:var(--txt)
}
.demo-form .checkbox{display:flex;align-items:flex-start;gap:.6rem}
.demo-form .small{color:var(--muted);font-size:.9rem}

.faq details{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:var(--radius);margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:800}
.faq p{color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 0;background:var(--bg-soft)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:1rem}

.hero-art{position:relative}
.hero-art:after{
  content:""; position:absolute; inset:10% -10% -10% 30%;
  background:radial-gradient(40% 40% at 20% 20%, rgba(98,240,200,.25), transparent 60%);
  filter:blur(40px); z-index:-1
}

@media (prefers-reduced-motion:no-preference){
  .btn:hover{box-shadow:0 10px 24px rgba(98,240,200,.35)}
}