:root{
  --brand:#CE412B;
  --brand-text:#E04E36;
  --accent:var(--brand-text);
  --accent-dim:color-mix(in srgb, var(--brand) 62%, #0f1114);
  --accent-bg:color-mix(in srgb, var(--brand) 20%, #0f1114);
  --gold:color-mix(in srgb, var(--brand-text) 78%, #ffffff);
}

body{
  background:
    radial-gradient(1100px 600px at 75% -10%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%),
    radial-gradient(900px 700px at 10% 20%, color-mix(in srgb, var(--brand) 2.5%, transparent), transparent 60%),
    var(--bg);
}

::selection{background:var(--brand);color:#fff}

.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:color-mix(in srgb, var(--brand) 86%, #000);box-shadow:0 6px 28px -8px color-mix(in srgb, var(--brand) 55%, transparent)}
.cta-row .btn-primary{background:linear-gradient(105deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 84%, #000) 100%);color:#fff}
.cta-row .btn-primary:hover{background:linear-gradient(105deg, color-mix(in srgb, var(--brand) 90%, #000) 0%, color-mix(in srgb, var(--brand) 76%, #000) 100%);box-shadow:0 6px 30px -8px color-mix(in srgb, var(--brand) 55%, transparent)}
@keyframes cta-breathe{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent)}
  50%{box-shadow:0 6px 30px -8px color-mix(in srgb, var(--brand) 50%, transparent)}
}

.hero::before{background:none;animation:none}
.hero-fx{background:radial-gradient(660px 520px at 70% 42%, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--brand) 3%, transparent) 48%, transparent 70%)}
.hero-fx::before{background:radial-gradient(640px 580px at 14% 62%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 64%)}
.hero-fx::after{background:radial-gradient(440px 360px at 50% 66%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 64%)}
.hero-vignette{
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 32%, transparent 58%, color-mix(in srgb, var(--brand) 8%, transparent) 100%),
    radial-gradient(126% 122% at 50% 38%, transparent 48%, rgba(7,8,10,.5) 100%),
    linear-gradient(180deg, rgba(7,8,10,.32) 0%, transparent 22%, transparent 66%, rgba(7,8,10,.62) 100%);
}
.hero-topo path{stroke:color-mix(in srgb, var(--brand) 18%, transparent)}
.hero-topo .t-gold path{stroke:color-mix(in srgb, var(--gold) 14%, transparent)}
.hero-motes{display:none}

.hero h1 .accent::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(100deg, color-mix(in srgb, var(--brand) 40%, transparent) 0%, color-mix(in srgb, var(--brand) 26%, transparent) 100%);
}

.screen{box-shadow:0 0 0 1px rgba(255,255,255,.01) inset,0 30px 60px -30px rgba(0,0,0,.7),0 0 100px -30px color-mix(in srgb, var(--brand) 22%, transparent)}

.step-num::after{
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-text) 90%, transparent), transparent),
    linear-gradient(90deg, var(--accent-dim), transparent);
  background-size:38% 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-55% 0, 0 0;
}
@keyframes glyph-bob{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 color-mix(in srgb, var(--brand) 0%, transparent))}
  50%{transform:translateY(-3px);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 50%, transparent))}
}

.sticky-cta{background:var(--brand);color:#fff}
.sticky-cta:hover{background:color-mix(in srgb, var(--brand) 86%, #000)}
.sticky-cta__label{color:#fff}
.sticky-cta .pi-arrow-right{color:#fff}
.sticky-cta__save{background:#0c0c0c;color:var(--brand-text)}

.created-by__avatar{border-radius:6px}

.cr-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;position:relative;z-index:1}
.cr-shot{margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0a0c0e;box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent) inset,0 30px 70px -28px rgba(0,0,0,.8),0 0 120px -30px color-mix(in srgb, var(--brand) 22%, transparent)}
.cr-shot img{display:block;width:100%;height:auto}
.hero .cr-shot{max-width:680px;margin-left:0;margin-right:auto}
.hero p.lead{margin-top:18px}
.cr-note{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-muted);max-width:52ch;line-height:1.6}
.cr-note b{color:var(--brand-text);font-weight:500}
.download-text p + p{margin-top:10px}

.js-reveal #own-land .viewer-copy,
.js-reveal #own-land .viewer-media,
.js-reveal #get .download-card{opacity:0;transform:translate3d(0,20px,0);transition:opacity .55s ease var(--rd,0ms), transform .55s ease var(--rd,0ms)}
.js-reveal #own-land .viewer-copy.is-in,
.js-reveal #own-land .viewer-media.is-in,
.js-reveal #get .download-card.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js-reveal #own-land .viewer-copy,
  .js-reveal #own-land .viewer-media,
  .js-reveal #get .download-card{opacity:1;transform:none;transition:none}
}

@media (max-width: 980px){
  .cr-hero-grid{grid-template-columns:1fr;gap:28px}
  .hero .cr-shot{width:100%;max-width:560px;margin-inline:auto}
}
@media (max-width: 880px){
  .nav-links a[href="#own-land"]{display:none}
}
@media (max-width: 600px){
  .cr-brand-sub{display:none}
}