:root{
  --pink-1:#ff7aa8;
  --pink-2:#ff89b2;
  --orange-1:#ff9a62;
  --orange-2:#ff7e2f;
  --text:#ffffff;
  --text-muted:rgba(255,255,255,0.7);
  --ring:rgba(255,255,255,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--pink-1),var(--pink-2));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  opacity:0; animation:fadeSwap 12s ease-in-out infinite alternate;
}
@keyframes fadeSwap{0%,45%{opacity:0}55%,100%{opacity:1}}
.site-header,.site-footer{position:fixed; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:20px}
.site-header{top:0} .site-footer{bottom:0}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.brand-svg{height:44px; width:auto; display:block; opacity:.95}
.hero{min-height:100svh; display:grid; place-content:center; text-align:center; padding:0 20px}
.title{font-size:clamp(56px,10vw,112px); line-height:1.02; margin:0 0 18px; font-weight:800; letter-spacing:-.02em}
.title .muted{opacity:.9}
.tagline{margin:0 0 32px; color:#ffffff; font-size:24px; font-weight:400; letter-spacing:.2px; max-width:880px; margin-left:auto; margin-right:auto}
.cta{appearance:none; border:1px solid rgba(255,255,255,.6); padding:16px 36px; border-radius:18px; background:rgba(255,255,255,.22); color:#fff; font-weight:700; font-size:18px; -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); box-shadow:0 24px 70px -18px rgba(255,120,90,.45), 0 1px 0 0 rgba(255,255,255,.35) inset; transition:box-shadow .2s, transform .2s, background .2s, border-color .2s}
.cta:hover{transform:translateY(-2px); background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.8); box-shadow:0 30px 90px -18px rgba(255,120,90,.5), 0 1px 0 0 rgba(255,255,255,.45) inset}
.cta:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 30px 90px -18px rgba(255,120,90,.5), 0 1px 0 0 rgba(255,255,255,.45) inset}
.legal{opacity:.7; font-size:12px; margin:0; padding-left:6px}
.social{display:flex; gap:14px; align-items:center; padding-right:6px}
.social a{display:inline-flex; width:22px; height:22px; color:#fff; opacity:.85; transition:opacity .2s, transform .2s, filter .3s}
.social a:hover{opacity:1; transform:translateY(-1px)}
.social svg{width:100%; height:100%}
@media (max-width:640px){.title{font-size:40px} .tagline{font-size:18px}}

/* Subtle design from sample */
#root{max-width:1280px; margin:0 auto; padding:2rem; text-align:center}
.logo{height:3rem; padding:.5rem; will-change:filter; transition:filter 300ms}
.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}
@keyframes logo-spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.brand .logo{animation:logo-spin infinite 20s linear}}
.card{padding:2em}
.read-the-docs{color:#d7d7d7}