/* Combined landing styles (Dark Architect aesthetic) */
:root{ --bg:#0b0b0e; --panel:#111216; --panel2:#14161b; --text:#eae9e4; --muted:#a7a39a; --gold:#c99b2e; --gold-weak:rgba(201,155,46,.22); --line:rgba(255,255,255,.08); --veil:linear-gradient(90deg, rgba(201,155,46,.12), rgba(201,155,46,.06)); }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 50% -10%, rgba(201,155,46,.06), transparent), var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
.noise{position:fixed; inset:0; pointer-events:none; opacity:.06; background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"160\"><filter id=\"n\"><feTurbulence baseFrequency=\"0.8\" numOctaves=\"2\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.4\"/></svg>');}
.container{width:min(1100px, 92%); margin:0 auto}
.micro{font-size:12px}.muted{color:var(--muted)}.center{text-align:center}
.site-header{position:sticky; top:0; z-index:10; backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(20,20,26,.85), rgba(20,20,26,.35));}
.brand{display:flex; align-items:center; gap:10px}.brand.small .wordmark{font-size:14px}
.logo{width:28px; height:28px; filter: drop-shadow(0 0 6px rgba(201,155,46,.4))}
.wordmark{letter-spacing:.06em}.nav{display:flex; align-items:center; gap:12px}
.nav-link{color:var(--text); text-decoration:none; border:1px solid transparent; padding:6px 8px; border-radius:10px}
.nav-link:hover{border-color:var(--gold-weak)}
.btn{border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, #151621, #101219); color:var(--text); padding:12px 16px; border-radius:12px; cursor:pointer; transition: transform .08s ease, border-color .2s, box-shadow .2s}
.btn.small{padding:8px 10px; border-radius:10px}.btn:hover{transform: translateY(-1px); border-color: var(--gold-weak)}
.btn.primary{border-color:var(--gold-weak); background:var(--gold); color:#0b0b0e; font-weight:700}.btn.primary:hover{box-shadow:0 0 14px rgba(201,155,46,.5)}.btn.ghost{background:transparent}
.hero{position:relative; min-height:86vh; display:grid; place-items:center; padding:48px 20px 72px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.portal-wrap{position:absolute; inset:-10% -20% 0 -20%; display:grid; place-items:center; pointer-events:none}
.portal-grid{width:1200px; max-width:90vw; opacity:.7; mix-blend:screen; transform:translateY(-6vh); filter: drop-shadow(0 30px 120px rgba(0,0,0,.7))}
.portal-door{position:absolute; width:min(520px, 70vw); height:min(720px, 90vh); border-radius:32px; background: radial-gradient(40% 50% at 50% 60%, rgba(201,155,46,.55), rgba(201,155,46,.15) 55%, transparent 70%); box-shadow: 0 0 140px rgba(201,155,46,.24), inset 0 0 120px rgba(201,155,46,.28); mask-image: radial-gradient(70% 90% at 50% 60%, black 55%, transparent 70%); animation: pulse 4.6s ease-in-out infinite;}
.glow::after{content:''; position:absolute; inset:-4px; border-radius:34px; border:1px solid var(--gold-weak); pointer-events:none}
.door-iris{position:absolute; inset:14% 10%; border-radius:24px; background:radial-gradient(40% 55% at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.25) 60%, rgba(0,0,0,.6) 72%); mix-blend:multiply; animation: breathe 6s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hero-copy{position:relative; z-index:2; text-align:center; max-width:720px}
.eyebrow{display:inline-block; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); background:var(--veil); padding:6px 10px; border:1px solid var(--gold-weak); border-radius:12px}
h1{font-family:'Spectral SC', serif; font-weight:700; font-size:44px; letter-spacing:.02em; margin:.6rem 0 .6rem; color:var(--gold)}
.lede{color:var(--muted); font-size:18px; line-height:1.6; margin:0 auto 18px}
.consent{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:10px}
.scroll-hint{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.8}
.scroll-hint .chev{width:12px; height:12px; border-right:2px solid var(--text); border-bottom:2px solid var(--text); transform:rotate(45deg); animation: bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}
.section-title{margin:0 0 14px; font-size:28px}
.how{padding:58px 0; background:linear-gradient(180deg, rgba(17,18,22,.9), rgba(17,18,22,.6))}
.how-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px}
.how-card{padding:18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow:0 18px 60px rgba(0,0,0,.4)}
.how-card .sigil{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--gold-weak); color:var(--gold); background:var(--veil); margin-bottom:8px}
.phases{padding:58px 0}
.phase-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px}
.phase-card{display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, var(--panel), var(--panel2));}
.phase-card .num{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--gold-weak); color:var(--gold); background:var(--veil)}
.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:28px 0; background:linear-gradient(180deg, rgba(17,18,22,.8), rgba(17,18,22,.5))}
.foot-grid{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.foot-nav a{color:var(--text); text-decoration:none; margin-left:16px; border-bottom:1px dotted transparent}
.foot-nav a:hover{border-bottom-color:var(--gold-weak)}
.open-seq{position:fixed; inset:0; display:none; place-items:center; z-index:999; pointer-events:none;}
.open-seq .rings{position:absolute; width:20vmax; height:20vmax; border-radius:50%; border:1px solid rgba(201,155,46,.35); box-shadow:0 0 120px rgba(201,155,46,.35);}
.open-seq .flash{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(201,155,46,.6), transparent 65%); opacity:0}
.opening .open-seq{display:grid; animation: fadeIn .2s forwards}
.opening .open-seq .rings{animation: ringOut 1.2s ease-out forwards}
.opening .open-seq .flash{animation: flashOut 1.3s ease-out forwards .05s}
@keyframes ringOut{0%{transform:scale(0.3); opacity:1}100%{transform:scale(8); opacity:0}}
@keyframes flashOut{0%{opacity:.9}100%{opacity:0}}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:640px){ h1{font-size:34px} .hero{min-height:84vh} .portal-door{width:86vw; height:76vh} }
/* === Poster-style hero using hero-portal.jpg (no baked text) === */
.hero { 
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 0;
  border-bottom: none;
  overflow: hidden;
}

.hero-bg{
  position: absolute; inset: 0;
  background: url("../assets/hero-portal.jpg") center / cover no-repeat;
  /* nudge tones to match site palette */
  filter: saturate(0.9) contrast(1.02) brightness(.92);
}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
  pointer-events:none;
}

.hero-copy.poster{
  position: relative; z-index: 2;
  text-align: center;
  max-width: min(760px, 92vw);
  padding: 12vh 4vw 10vh;
}

/* pill like "BPDBLUEPRINT.COM" */
.domain-pill{
  display:inline-block;
  font: 600 13px/1 Inter, system-ui, -apple-system;
  letter-spacing: .28em; 
  text-transform: uppercase;
  color: #d8c38a;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(216,195,138,.55);
  background: rgba(216,195,138,.08);
  box-shadow: inset 0 0 0 1px rgba(201,155,46,.18);
}

/* big serif poster title */
.poster-title{
  margin: 18px 0 8px;
  font-family: 'Spectral SC', serif;
  font-weight: 700;
  font-size: clamp(36px, 7.6vw, 72px);
  letter-spacing: .01em;
  color: #d6b66e; /* warm gold */
  text-shadow: 0 2px 22px rgba(201,155,46,.22);
}

/* subline */
.poster-sub{
  margin: 0 0 30px;
  color: #eae9e4;
  opacity: .9;
  font-size: clamp(16px, 2.3vw, 22px);
}

/* outline button to match poster */
.btn.cta-outline{
  background: transparent;
  border-radius: 14px;
  border: 1px solid rgba(216,195,138,.7);
  color: #e8dcc0;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 14px 24px;
  box-shadow: 0 0 0 1px rgba(201,155,46,.14), 0 6px 28px rgba(0,0,0,.45);
}
.btn.cta-outline:hover{
  box-shadow: 0 0 0 1px rgba(201,155,46,.22), 0 10px 40px rgba(0,0,0,.6);
  transform: translateY(-1px);
}

.poster-cta{ justify-content:center; }
.poster-consent{ margin-top: 16px; opacity: .9; }

/* If old elements exist, hide them on this page */
.portal-wrap, .scroll-hint { display: none !important; }
/* ===== Mobile Hamburger (Dark Architect) ===== */
:root{
  --gold:#c99b2e; --gold-weak:rgba(201,155,46,.22);
  --panel:#111216; --panel2:#14161b; --text:#eae9e4;
}

.hamburger{
  display:none; position:relative; width:42px; height:34px;
  border:1px solid var(--gold-weak); border-radius:10px;
  background:linear-gradient(180deg,#171922,#111218);
  cursor:pointer; padding:8px; gap:4px;
}
.hamburger span{
  display:block; height:2px; background:rgba(232,226,210,.92);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Drawer shell */
.mobile-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(86vw, 340px);
  background:linear-gradient(180deg, rgba(17,18,22,.98), rgba(17,18,22,.92));
  border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-28px 0 90px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition: transform .22s ease-out;
  z-index: 50;
}
.mobile-drawer[aria-hidden="false"]{ transform:translateX(0); }

.drawer-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px); z-index: 40;
}

/* Drawer content */
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.close-drawer{
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  background:#12131a; color:var(--text); width:36px; height:32px; cursor:pointer;
}
.drawer-links{ list-style:none; padding:10px 12px; margin:0; display:grid; gap:6px; }
.drawer-link{
  display:block; padding:12px 12px; border-radius:12px; text-decoration:none;
  color:var(--text); border:1px solid transparent;
  background:linear-gradient(180deg,#151821,#101219);
}
.drawer-link:hover{ border-color: var(--gold-weak); }
.drawer-link.enter{
  border-color: var(--gold-weak); color:#0b0b0e; background:var(--gold); font-weight:700;
}

/* Responsive toggle: show hamburger, hide desktop nav */
@media (max-width: 820px){
  .nav-desktop{ display:none; }
  .hamburger{ display:flex; flex-direction:column; justify-content:center; }
}