@font-face { font-family:"Funnel Display"; src:url("fonts/FunnelDisplay-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("fonts/FunnelDisplay-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Host Grotesk"; src:url("fonts/HostGrotesk-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Host Grotesk"; src:url("fonts/HostGrotesk-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Roboto Mono"; src:url("fonts/RobotoMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }

:root{
  --black:#000; --creme:#ECE7E0; --black-brown:#47140B;
  --wash-deep:#150604; --wash-warm:#1E0805;
  --saffron-brown:#962817; --saffron-red:#FA3F06;
  --purple:#CA56ED; --gold:#FFBC09; --gold-20:rgba(255,188,9,.2);
  --txt-muted:#8C8C8C;
  --font-display:"Funnel Display",serif;
  --font-body:"Host Grotesk",system-ui,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--black); color:var(--creme);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}

.sf-stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px; position:relative; overflow:hidden;
}
.sf-stage::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%),
    url("img/marble.jpg") center/cover no-repeat;
  opacity:.55;
}
.sf-stage::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 50% at 50% 45%, rgba(250,63,6,.12), rgba(0,0,0,0) 70%);
}
.sf-inner{ position:relative; z-index:1; max-width:640px; }

.sf-wordmark{ height:34px; width:auto; margin-bottom:40px; opacity:.95; }

.sf-eyebrow{
  font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--saffron-brown); margin:0 0 18px;
}
.sf-title{
  font-family:var(--font-display); font-weight:300; font-size:clamp(44px,9vw,84px);
  line-height:.98; letter-spacing:-.01em; color:var(--creme); margin:0 0 20px;
}
.sf-lede{
  font-family:var(--font-body); font-weight:400; font-size:clamp(16px,2.4vw,19px);
  line-height:1.5; color:var(--creme); opacity:.82; margin:0 auto 34px; max-width:44ch;
}
.sf-chip{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--saffron-brown); border-radius:100px;
  padding:8px 16px; background:rgba(255,188,9,.04);
}
.sf-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold); animation:sf-pulse 1.8s ease-in-out infinite; }
@keyframes sf-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.sf-foot{
  position:relative; z-index:1; text-align:center; padding:20px 24px 30px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-muted);
}
.sf-foot a{ color:var(--saffron-brown); text-decoration:none; }
.sf-foot a:hover{ color:var(--gold); }