:root{
  --carbon:#0A0A0A;
  --carbon-soft:#111111;
  --arena:#EAE6E1;
  --burgundy:#8C1B3D;
  --taupe:#847E79;
  --mist:#D7D5D1;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--carbon);color:var(--arena)}
body{
  min-height:100vh;
  font-family:"Inter",Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}

.shell{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 25%, rgba(140,27,61,.10), transparent 30%),
    radial-gradient(circle at 15% 82%, rgba(234,230,225,.035), transparent 25%),
    linear-gradient(145deg, #080808 0%, #0A0A0A 48%, #0E0A0B 100%);
}

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.glow{
  position:absolute; border-radius:50%; filter:blur(100px); opacity:.18; pointer-events:none;
}
.glow-one{width:420px;height:420px;background:var(--burgundy);right:-160px;top:-110px}
.glow-two{width:300px;height:300px;background:#503943;left:-170px;bottom:-110px}

.hero{
  position:relative;
  z-index:2;
  width:min(920px, calc(100% - 48px));
  min-height:100vh;
  padding:48px 0 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.topline{
  position:absolute;
  top:34px; left:0; right:0;
  display:flex;
  justify-content:center;
  gap:26px;
  font-size:10px;
  letter-spacing:.34em;
  font-weight:500;
  color:rgba(234,230,225,.58);
}

.brand{
  width:min(520px, 78vw);
  height:auto;
  display:block;
  margin:0 auto 24px;
}

.divider{
  width:58px;
  height:1px;
  background:var(--burgundy);
  margin:4px 0 28px;
  box-shadow:0 0 14px rgba(140,27,61,.45);
}

.eyebrow{
  margin:0 0 18px;
  color:rgba(234,230,225,.62);
  font-size:11px;
  letter-spacing:.28em;
  font-weight:500;
}

h1{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:500;
  font-size:clamp(46px, 7vw, 86px);
  line-height:.98;
  letter-spacing:-.03em;
  margin:0;
  max-width:900px;
  color:var(--arena);
}

.intro{
  max-width:660px;
  margin:28px auto 0;
  font-size:clamp(15px, 1.65vw, 18px);
  line-height:1.75;
  font-weight:300;
  color:rgba(234,230,225,.72);
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:38px;
  min-width:190px;
  padding:15px 21px;
  border:1px solid rgba(234,230,225,.26);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.28s ease;
  background:rgba(255,255,255,.015);
  backdrop-filter:blur(8px);
}
.cta:hover{
  background:var(--arena);
  color:var(--carbon);
  border-color:var(--arena);
  transform:translateY(-2px);
}
.arrow{font-size:18px;line-height:1}

.email{
  margin:16px 0 0;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(234,230,225,.5);
}
.email a{text-decoration:none}
.email a:hover{color:var(--arena)}

footer{
  position:static;
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(234,230,225,.34);
}
.footer-dot{color:var(--burgundy)}

@media (max-width:640px){
  .hero{width:min(100% - 34px, 760px);padding:86px 0 88px}
  .topline{top:24px;gap:12px;font-size:8px;letter-spacing:.2em}
  .brand{width:min(420px, 88vw);margin-bottom:18px}
  .divider{margin-bottom:23px}
  .eyebrow{font-size:9px;letter-spacing:.22em}
  h1{font-size:clamp(43px, 14vw, 64px);max-width:95%}
  .intro{font-size:14px;line-height:1.65;margin-top:22px;max-width:92%}
  .cta{margin-top:30px}
  footer{margin-top:24px;flex-wrap:wrap;font-size:8px;gap:6px 9px}
}

@media (prefers-reduced-motion:no-preference){
  .brand,.eyebrow,h1,.intro,.cta,.email{
    opacity:0;
    animation:rise .75s ease forwards;
  }
  .eyebrow{animation-delay:.08s}
  h1{animation-delay:.14s}
  .intro{animation-delay:.22s}
  .cta{animation-delay:.30s}
  .email{animation-delay:.36s}
  @keyframes rise{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }
}