/* ─────────────────────────────────────────────────────────────────
   REELOYO — magenta (approved creatives), feed-shaped, mobile-first.
   Deliberately NOT Filmoyo: Filmoyo is dark cinema, wide measure, a
   left rail and 21:9 film frames. Reeloyo is a phone-column: a narrow
   centred stack, 9:16 media, magenta gradients, repeat/loop motifs.
   Palette taken from the live app (app.reeloyo.com), not invented.
   ───────────────────────────────────────────────────────────────── */
:root{
  /* Palette sampled from the APPROVED affiliate creatives, not invented and not
     taken from the app. ceo ruling 2026-09-05: the banner is the owner-approved
     artifact; banner-to-landing consistency is the top-of-funnel leak. The app
     is currently ember (#FF4D26) — that mismatch is knowingly accepted and is
     Andrew's to settle. Reversible: only these variables change. */
  --brand:#D633C5;        --brand-rgb:214,51,197;
  --brand-hot:#DE35CC;
  --brand-deep:#C62FB8;
  --violet:#8B5CF6;       --violet-rgb:139,92,246;
  --ground:#0A0017;
  --ground-2:#070012;
  --night:#000000;
  --text:#FFFFFF;
  --body:#E9DFEE;
  --dim:#9E8CA8;
  --line:rgba(255,255,255,.12);
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --display:"Archivo Black",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --col:680px;            /* the phone column — structural, palette-independent */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--body);font-family:var(--sans);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 620px at 50% -8%, rgba(214,51,197,.20), transparent 62%),
    radial-gradient(700px 520px at 88% 22%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(760px 620px at 8% 58%, rgba(139,92,246,.12), transparent 64%),
    linear-gradient(180deg,#0A0017,#070012 48%,#000000);
  background-attachment:fixed;
}
img,video{max-width:100%;display:block}
a{color:var(--brand-hot)}

/* the column: everything lives in a narrow stack, phone-shaped */
.col{max-width:var(--col);margin:0 auto;padding:0 22px}
section{position:relative;padding:76px 0}
section.tight{padding:52px 0 64px}
section.band{
  background:linear-gradient(180deg,rgba(214,51,197,.09),rgba(139,92,246,.03));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.04;letter-spacing:-.02em;margin:0 0 18px;color:var(--text)}
h1{font-size:clamp(34px,7.4vw,54px);text-transform:uppercase}
h2{font-size:clamp(26px,5vw,38px);text-transform:uppercase}
h3{font-size:clamp(19px,3vw,23px);text-transform:none;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px
}
.lede{font-size:20px;color:var(--body)}
.small{font-size:14.5px;color:var(--dim)}

/* the repeat motif — a loop bar, Reeloyo's signature rule */
.loop{display:flex;gap:5px;margin:0 0 20px}
.loop i{height:4px;width:26px;border-radius:99px;background:var(--brand);opacity:.9}
.loop i:nth-child(2){background:var(--brand-hot);width:14px}
.loop i:nth-child(3){background:var(--violet);width:8px}

/* phone-shaped media — 9:16 is the product */
.phone{
  width:min(320px,78vw);margin:26px auto;border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#07050C;
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.03)
}
.phone .slot{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center}
.phone img,.phone video{width:100%;height:100%;object-fit:cover}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--brand),var(--violet));color:#12001B;
  font-weight:800;font-size:17px;text-decoration:none;padding:17px 30px;border-radius:14px;
  min-height:52px;box-shadow:0 10px 30px rgba(214,51,197,.36);transition:.15s
}
.btn:hover{filter:brightness(1.06);box-shadow:0 14px 38px rgba(214,51,197,.46)}
.btn-ghost{background:transparent;color:var(--brand-hot);border:1px solid var(--brand-hot);box-shadow:none}
.cta{text-align:center;margin:30px 0 0}
.micro{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:11px}

.card{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px;margin:0 0 14px
}
.card .n{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--brand);display:block;margin-bottom:8px
}
footer{border-top:1px solid var(--line);padding:40px 0;text-align:center}
footer a{color:var(--dim);text-decoration:none;margin:0 11px;font-size:14.5px;display:inline-block;min-height:44px;line-height:44px}
footer a:hover{color:var(--brand-hot)}
footer p{color:var(--dim);font-size:13.5px;margin-top:10px}
[id]{scroll-margin-top:88px}
@media(max-width:620px){
  section{padding:56px 0}
  .col{padding:0 18px}
}