/* CopyCraft.fun — Liquid Glass theme */
:root{
  --bg-1:#0f1020; /* deep space */
  --txt:#e8e9f1;
  --muted:#b7b9c9;
  --brand-1:#7c5cff; /* iris */
  --brand-2:#00e0b8; /* aqua mint */
  --brand-3:#ff6b9f; /* candy */
  --glass:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.28);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --radius-xl:1.25rem; /* rounded-2xl */
  --radius-full:999px; /* rounded-full */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--txt); background:var(--bg-1); line-height:1.6;
  overflow-x:hidden;
}

/* Background: layered animated blobs + subtle grid */
.bg-layers{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 10% 20%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(50vmax 50vmax at 90% 10%, rgba(0,224,184,.20), transparent 55%),
    radial-gradient(55vmax 55vmax at 80% 80%, rgba(255,107,159,.18), transparent 60%),
    linear-gradient(180deg, #0f1020 0%, #0c0d1a 100%);
}

.container{ width:min(1120px, 92%); margin-inline:auto; }

.site-header{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--txt); }
.brand-icon{ width:28px; height:28px; }
.brand-text{ font-weight:800; letter-spacing:.2px; }
.brand-text .dot{ color:var(--brand-2); }

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ color:var(--muted); text-decoration:none; padding:.5rem .75rem; border-radius:var(--radius-full); transition:.25s ease; }
.nav a:hover{ color:var(--txt); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.nav .cta.small{ padding:.6rem .9rem; background:linear-gradient(135deg,var(--brand-1),var(--brand-3)); color:#111; font-weight:700; box-shadow:0 8px 20px rgba(124,92,255,.35); }

/* Glass card */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border:1px solid var(--stroke);
  border-top-color:rgba(255,255,255,.55);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.hero{ padding:64px 0 32px; }
.hero-card{ padding:32px; position:relative; overflow:hidden; }
.hero-card:before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 120deg at 10% 10%, rgba(124,92,255,.35), rgba(0,224,184,.25), rgba(255,107,159,.35), rgba(124,92,255,.35));
  filter:blur(26px); opacity:.6; z-index:-1;
}
.eyebrow{ color:var(--brand-2); text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:.78rem; }
.hero h1{ font-size:clamp(2rem, 3.6vw, 3.2rem); line-height:1.1; margin:.25rem 0 .5rem; }
.lede{ color:var(--muted); font-size:1.1rem; max-width:48ch; }

.cta-row{ display:flex; gap:.75rem; margin-top:1.2rem; flex-wrap:wrap; }
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:var(--radius-full); text-decoration:none; font-weight:700; transition:.25s ease; cursor:pointer; border:0; }
.cta.primary{ color:#0b0b0f; background:linear-gradient(135deg,var(--brand-2),var(--brand-1)); box-shadow:0 14px 30px rgba(0,224,184,.28); }
.cta.primary:hover{ transform:translateY(-1px); box-shadow:0 18px 36px rgba(0,224,184,.34); }
.cta.secondary{ color:var(--txt); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.cta.secondary:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.16); }
.cta.wide{ width:100%; }

.channels{ display:flex; gap:.5rem; list-style:none; padding:0; margin:1rem 0 0; flex-wrap:wrap; }
.channels li{
  padding:.4rem .7rem; border-radius:var(--radius-full); color:#0c0d1a; font-weight:700;
  background:linear-gradient(135deg, rgba(124,92,255,.85), rgba(0,224,184,.85));
}

.features{ padding:40px 0; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature{ padding:22px; }
.feature .pill{ display:inline-block; padding:.35rem .7rem; border-radius:var(--radius-full); background:rgba(255,255,255,.12); color:var(--txt); font-weight:700; font-size:.8rem; }
.feature h3{ margin:.5rem 0 .25rem; }
.feature p{ color:var(--muted); }

.ab-demo{ padding:28px 0; }
.demo{ padding:18px; }
.demo-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.variant-toggle{ display:flex; background:rgba(255,255,255,.06); padding:6px; border-radius:var(--radius-full); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.toggle{ appearance:none; border:0; background:transparent; color:var(--muted); font-weight:700; padding:.55rem .9rem; border-radius:var(--radius-full); cursor:pointer; }
.toggle.active{ color:#0c0d1a; background:linear-gradient(135deg,var(--brand-3),var(--brand-1)); box-shadow:0 8px 22px rgba(255,107,159,.35); }

.metrics{ display:flex; gap:14px; flex-wrap:wrap; }
.metric{ min-width:110px; padding:10px 14px; border-radius:var(--radius-xl); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); text-align:center; }
.metric span{ display:block; font-size:1.1rem; font-weight:800; }
.metric label{ display:block; font-size:.78rem; color:var(--muted); }

.demo-body{ padding:10px; }
.ad-card{ padding:20px; border-radius:var(--radius-xl); background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); box-shadow:var(--shadow); }
.ad-eyebrow{ color:var(--brand-2); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; }
.ad-headline{ margin:.3rem 0 .35rem; }
.ad-copy{ color:var(--muted); margin-bottom:1rem; }

.note{ color:var(--muted); font-size:.9rem; margin:.5rem 2px; }

.testimonials{ padding:30px 0; }
.quote{ padding:20px; }
.quote footer{ color:var(--muted); }

.cta-final{ padding:40px 0 72px; }
.cta-panel{ padding:28px; text-align:center; }

.site-footer{ padding:30px 0 48px; color:var(--muted); }
.site-footer .row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .hero-card{ padding:22px; }
  .feature{ padding:18px; }
  .quote{ padding:18px; }
}