:root{
  --bg:#0a0a0a;
  --text:#f0f0f0;
  --muted:#8a8a8a;
  --pill:#c9c9c9;
  --pill-text:#1a1a1a;
  --input:#111111;
  --border:#333333;
  --accent:#8b4513;
  --accent-light:#a0522d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* Top Right Pills */
.nav{
  position:fixed;
  top:22px;
  right:22px;
  display:flex;
  gap:16px;
  z-index:10;
}
.pill{
  text-decoration:none;
  color:var(--pill-text);
  background:var(--pill);
  padding:10px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.6px;
  transition:transform .2s ease, opacity .2s ease;
}
.pill:hover{ transform:translateY(-1px); opacity:.95 }

/* Main hero */
.hero{
  max-width:1100px;
  margin:120px auto 40px;
  padding:0 24px;
  display:grid;
  grid-template-columns: 320px 1px minmax(260px, 1fr);
  gap:36px;
  align-items:center;
}

/* Left logo block */
.logo-grid{
  position:relative;
  height:320px;
  border:2px solid var(--border);
  background:
    radial-gradient(circle at 30% 30%, #1a1a1a 0%, #0a0a0a 70%),
    linear-gradient(45deg, transparent 49%, var(--accent) 49%, var(--accent) 51%, transparent 51%);
  background-size: 100% 100%, 40px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo-grid::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(45deg, transparent 65%, rgba(139, 69, 19, 0.1) 100%);
  pointer-events:none;
}
.grid-letters{
  position:relative;
  text-align:left;
  line-height:1.15;
  letter-spacing:.45em;
  padding:24px 18px;
  font-weight:800;
  font-size:38px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  background:linear-gradient(45deg, #f0f0f0, #c9c9c9);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.grid-letters span{ display:block }
.grid-letters .tm{
  display:inline-block;
  font-size:16px;
  letter-spacing:normal;
  font-weight:700;
  color:var(--accent);
  vertical-align:super;
}

/* Divider */
.divider{
  width:3px;
  height:260px;
  background:linear-gradient(to bottom, var(--accent), var(--accent-light), var(--accent));
  justify-self:center;
  border-radius:2px;
}

/* Headline */
.headline h1{
  margin:0;
  font-size:80px;
  line-height:.95;
  letter-spacing:.02em;
  font-weight:800;
  position:relative;
}
.headline h1 span{ 
  display:block;
  position:relative;
}
.headline h1 span:first-child::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:60px;
  height:3px;
  background:var(--accent);
}
.subline{
  margin:.75rem 0 0;
  color:var(--accent-light);
  letter-spacing:.2em;
  font-size:14px;
  font-style:italic;
  position:relative;
  padding-left:20px;
}
.subline::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--accent);
}

/* Signup */
.signup{
  max-width:920px;
  margin:36px auto 0;
  padding:0 24px;
  text-align:center;
  position:relative;
}
.signup::after{
  content:'';
  position:absolute;
  bottom:-15px;
  left:50%;
  transform:translateX(-50%);
  width:min(800px, 95vw);
  height:4px;
  background:linear-gradient(to right, 
    transparent 0%, 
    var(--accent) 15%, 
    var(--accent-light) 30%, 
    var(--accent-light) 70%, 
    var(--accent) 85%, 
    transparent 100%);
  border-radius:2px;
  box-shadow: 0 0 15px rgba(139, 69, 19, 0.4);
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(139, 69, 19, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 25px rgba(139, 69, 19, 0.7);
  }
}
.invite{
  font-size:14px;
  letter-spacing:.12em;
  color:#cfcfcf;
  margin:14px 0 18px;
}
.form{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
input[type="email"]{
  width:min(560px, 90vw);
  padding:18px 18px;
  background:var(--input);
  border:2px solid var(--border);
  color:var(--text);
  border-radius:6px;
  font-weight:500;
  outline:none;
  transition:border-color .3s ease;
  font-family:inherit;
}
input[type="email"]:focus{
  border-color:var(--accent);
}
input::placeholder{ 
  color:#8a8a8a; 
  letter-spacing:.08em;
  font-style:italic;
}

.cta{
  padding:18px 34px;
  border-radius:8px;
  border:2px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.12em;
  cursor:pointer;
  position:relative;
  transition:all .3s ease;
  overflow:hidden;
}
.cta::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.2), transparent);
  transition:left .6s ease;
}
.cta:hover{
  background:var(--accent);
  color:#0a0a0a;
  transform:translateY(-2px);
}
.cta:hover::before{ left:100% }
.cta:active{ transform:translateY(0) }

.rule{
  border:0; height:1px; width:min(720px, 90vw);
  margin:30px auto 0;
  background:linear-gradient(to right, transparent, var(--accent), transparent);
}

/* Footer */
.footer{
  margin-top:auto;
  padding:32px 24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1100px;
  width:100%;
  margin-left:auto; margin-right:auto;
}
.social{ display:flex; gap:18px }
.social-link{
  display:inline-grid; place-items:center;
  width:36px; height:36px;
  border:1px solid var(--accent);
  border-radius:6px;
  color:var(--accent); text-decoration:none; font-weight:700;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.social-link::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:var(--accent);
  opacity:0;
  transition:opacity .3s ease;
}
.social-link:hover{
  color:#0a0a0a;
  transform:scale(1.1);
}
.social-link:hover::before{ opacity:1 }
.copy{ 
  color:var(--muted); 
  font-size:12px; 
  letter-spacing:.06em;
  position:relative;
  padding-left:16px;
}
.copy::before{
  content:'©';
  position:absolute;
  left:0;
  color:var(--accent);
}

/* A11y */
.sr-only{ position:absolute; left:-9999px }

/* Responsiveness */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    gap:20px;
    text-align:center;
  }
  .divider{ display:none }
  .logo-grid{ margin-inline:auto }
  .headline h1{ font-size:60px }
}
@media (max-width: 520px){
  .headline h1{ font-size:44px }
  .grid-letters{ font-size:30px; letter-spacing:.35em }
  .pill{ padding:9px 16px; font-size:13px }
}