@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=IBM+Plex+Mono:wght@400;700&display=swap');

:root{
  --bg-a:#ffceec;
  --bg-b:#9896f0;
  --ink:#1B1031;
  --ink-soft:rgba(27,16,49,.74);
  --white:#fff;
  --primary:#7d00fa;
  --primary-soft:rgba(125,0,250,.18);
  --accent:#FF746D;
  --stroke:rgba(27,16,49,.10);
  --glass:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.62);
  --shadow:0 18px 60px rgba(27,16,49,.18);
  --radius:26px;
  --radius-sm:18px;
  --focus-ring:0 0 0 4px rgba(125,0,250,.28);
  --content-w:980px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg-a),var(--bg-b));
  min-height:100vh;
}

a{color:var(--primary);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-style:wavy}

.container{max-width:var(--content-w);margin:0 auto;padding:0 20px}
.site-main{padding:32px 0 64px}

.skip-link{
  position:absolute;left:-999px;top:10px;
  background:var(--white);padding:10px 14px;
  border-radius:999px;box-shadow:var(--shadow);
}
.skip-link:focus{left:10px;outline:none;box-shadow:var(--focus-ring),var(--shadow)}

.bg-sparkles{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.45) 0 2px, transparent 3px) 0 0/120px 120px,
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0/160px 160px,
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.25) 0 2px, transparent 3px) 0 0/180px 180px;
  filter:blur(.2px);
  opacity:.75;
}

.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15));
  border-bottom:1px solid rgba(255,255,255,.45);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;
}
.brand-logo{height:44px;width:auto}

.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:999px;
  border:0;text-decoration:none;font-weight:700;
  color:var(--ink);
  background:linear-gradient(90deg,var(--accent),var(--primary));
  box-shadow:0 10px 24px rgba(125,0,250,.15);
  transition:transform .12s ease, filter .12s ease;
}
.button:hover{transform:translateY(-1px);filter:saturate(1.05)}
.button:focus{outline:none;box-shadow:var(--focus-ring),0 10px 24px rgba(125,0,250,.15)}
.button--ghost{
  background:rgba(255,255,255,.65);
  border:2px solid rgba(125,0,250,.22);
  box-shadow:none;
}
.button--small{padding:8px 14px;font-size:.92rem}

.card{
  background:var(--glass);
  border:2px solid rgba(125,0,250,.14);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:22px;
}

.hero-card{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:center;
}
.hero-media img{
  width:100%;
  border-radius:var(--radius-sm);
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 14px 40px rgba(27,16,49,.12);
}

.chip{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  background:rgba(255,255,255,.85);
  border:2px solid rgba(125,0,250,.18);
  width:max-content;
}

h1{font-size:clamp(2rem,4vw,2.75rem);line-height:1.15;margin:10px 0 10px}
.h3{font-size:1.35rem;margin:.2rem 0 .8rem}
.lead{font-size:1.1rem;color:var(--ink-soft);margin:.2rem 0 1.2rem}
.fineprint{font-size:.95rem;color:rgba(27,16,49,.68);margin:14px 0 0}

.facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:14px 0 18px;
}
.fact{
  padding:12px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(125,0,250,.18);
}
.fact-label{font-size:.85rem;color:rgba(27,16,49,.6)}
.fact-value{font-weight:700}
.price{font-size:1.06rem}
.muted{color:rgba(27,16,49,.55);font-weight:600}

.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.grid-2{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.stack{display:grid;gap:18px}

.pretty-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pretty-list li{
  padding-left:28px;position:relative;
}
.pretty-list li::before{
  content:"✦";
  position:absolute;left:0;top:0;
  color:var(--primary);
}
.pretty-list.compact{gap:8px}

.callout--soft{background:rgba(255,255,255,.68)}

.accordion{display:grid;gap:10px;margin-top:10px}
.accordion-trigger{
  width:100%;
  text-align:left;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(125,0,250,.18);
  padding:12px 14px;
  border-radius:18px;
  font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
}
.accordion-trigger:focus{outline:none;box-shadow:var(--focus-ring)}
.accordion-panel{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(125,0,250,.12);
  border-radius:18px;
  padding:12px 14px;
}

.split{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.badge-cloud{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.badge{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(125,0,250,.18);
  font-weight:700;
  font-size:.92rem;
}

.contact-card{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:14px 0 8px;
}
.contact-item{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(125,0,250,.18);
  border-radius:18px;
  padding:14px;
}
.contact-label{font-size:.85rem;color:rgba(27,16,49,.62);margin-bottom:6px}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
.contact-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

.sticker{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.sticker-inner{
  background:rgba(255,255,255,.72);
  border:2px dashed rgba(125,0,250,.28);
  border-radius:22px;
  padding:18px 16px;
  text-align:center;
  width:min(260px,100%);
  transform:rotate(-2deg);
}
.sticker-emoji{font-size:2rem;display:block}
.sticker-text{font-weight:800;margin-top:6px}

.toast{
  margin-top:14px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(125,0,250,.18);
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
}

.site-footer{padding:26px 0 40px}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width: 900px){
  .hero-card{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .contact-card{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .badge-cloud{justify-content:flex-start}
}

/* --- Spacing tune-up (paste at END of styles.css) --- */
:root{
  --space-1: 10px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 32px;
}

/* More vertical breathing room overall */
.site-main{ padding: 40px 0 84px; }

/* Space between your main "sections" (containers) */
.site-main > .container + .container{
  margin-top: var(--space-4);
}

/* Slightly roomier cards */
.card{ padding: 24px; }

/* Hero: more gap between text + image */
.hero-card{ gap: var(--space-4); }

/* Price/info tiles + CTA spacing */
.facts{
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.cta-row{ gap: var(--space-2); }

/* Main two-column layout: bigger gap between the cards */
.grid-2{
  margin-top: 0;            /* let section spacing handle it */
  gap: var(--space-4);
}
.stack{ gap: var(--space-4); }

/* Accordion: slightly more room */
.accordion{
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Contact blocks: roomier */
.contact-grid{
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
}

/* The “split” section (VOD + badges) */
.split{ gap: var(--space-4); }

/* Mobile: keep it airy */
@media (max-width: 900px){
  .site-main > .container + .container{ margin-top: var(--space-5); }
}