/* Armor Media — coming soon / under construction
   Warm ember identity. Self-contained, Vercel-ready. */

:root{
  --bg:        #0b0908;
  --bg-1:      #110d0b;
  --bg-2:      #18130f;
  --ink:       #f4ede2;
  --ink-dim:   #a39788;
  --ink-mute:  #6b6155;
  --line:        rgba(244,237,226,0.08);
  --line-strong: rgba(244,237,226,0.16);
  --line-bright: rgba(244,237,226,0.26);
  --accent:    #ff7a45;
  --accent-ink: #0b0908;
  --accent-soft: rgba(255,122,69,0.14);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1320px;
  --nav-h: 64px;

  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  font-feature-settings: "ss01", "cv11";
}

a{ color: inherit; text-decoration: none; }
svg, canvas{ display: block; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--accent); color: var(--accent-ink); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--accent); margin-right:10px; vertical-align: middle;
  box-shadow: 0 0 14px var(--accent);
  animation: pulse 2.2s infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ============ STAGE ============ */
.stage{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Three.js canvas backdrop */
.bg-canvas-wrap{ position: absolute; inset: 0; z-index: 0; }
#bg-canvas{ width: 100%; height: 100%; }
.bg-vignette{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(11,9,8,0.55) 75%, var(--bg) 100%);
}
/* hairline grid */
.bg-grid{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%);
  opacity: 0.5;
}

/* ============ NAV ============ */
.nav{
  position: relative; z-index: 5;
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav-inner{
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand .mark{
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent), transparent 65%), var(--ink);
  position: relative;
  box-shadow: 0 0 20px var(--accent-soft);
}
.brand .mark::after{ content:""; position:absolute; inset:30%; border-radius:50%; background: var(--bg); }
.brand .wordmark{ font-family: var(--font-sans); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.brand .wordmark em{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.nav-right{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; }
@media (max-width: 560px){ .nav-right{ display: none; } }

/* ============ CONTENT ============ */
.content{
  position: relative; z-index: 4;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0 56px;
  min-height: 0;
}
.content-inner{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: rgba(255,122,69,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 100%;
}
.badge .eyebrow{ white-space: nowrap; }

.headline{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(42px, 8.4vw, 132px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.headline em{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.sub{
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* progress / build meter */
.build{
  margin-top: clamp(28px, 3.4vw, 44px);
  max-width: 460px;
}
.build .row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.build .row > span:first-child{ white-space: nowrap; }
.build .row .pct{ color: var(--ink); font-size: 13px; }
.build .bar{
  height: 4px;
  border-radius: 99px;
  background: var(--line-strong);
  overflow: hidden;
  position: relative;
}
.build .bar .fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #ffb088);
  border-radius: 99px;
  box-shadow: 0 0 20px var(--accent-soft);
  transition: width 1.6s cubic-bezier(.2,.7,.2,1);
}

/* contact row */
.actions{
  margin-top: 48px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.notify{
  display: flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 5px 5px 5px 20px;
  background: rgba(244,237,226,0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 420px;
  width: 100%;
  transition: border-color .25s;
}
.notify:focus-within{ border-color: var(--line-bright); }
.notify input{
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  min-width: 0;
}
.notify input::placeholder{ color: var(--ink-mute); }
.notify button{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  border-radius: 99px;
  transition: transform .2s, background .2s;
}
.notify button:hover{ transform: translateY(-1px); }
.notify .arrow{ transition: transform .2s; }
.notify button:hover .arrow{ transform: translateX(3px); }

.notify-done{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 14px;
  display: none;
}
.notify-done.show{ display: block; }

.email-direct{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.email-direct a{ color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color .2s; }
.email-direct a:hover{ border-color: var(--accent); }

/* contact CTA card */
.contact-cta{
  margin-top: clamp(28px, 3.4vw, 44px);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 22px 24px 22px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,122,69,0.10), rgba(244,237,226,0.02) 55%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px -28px rgba(0,0,0,0.7);
  max-width: 540px; width: 100%;
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.contact-cta::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,122,69,0.12), transparent 50%);
  opacity: 0; transition: opacity .35s;
}
.contact-cta:hover{
  transform: translateY(-3px);
  border-color: var(--line-bright);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 34px 80px -28px rgba(0,0,0,0.8);
}
.contact-cta:hover::after{ opacity: 1; }
.cta-left{ display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; }
.cta-kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cta-mail{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.cta-arrow{
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 20px;
  position: relative; z-index: 1;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.contact-cta:hover .cta-arrow{ transform: translateX(4px); }
@media (max-width: 480px){
  .contact-cta{ gap: 18px; padding: 18px 18px 18px 22px; }
  .cta-arrow{ width: 40px; height: 40px; font-size: 17px; }
}

/* ============ FOOTER STRIP ============ */
.foot{
  position: relative; z-index: 4;
  border-top: 1px solid var(--line);
}
.foot-inner{
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.foot-inner .links{ display: flex; gap: 20px; }
.foot-inner .links a{ transition: color .2s; }
.foot-inner .links a:hover{ color: var(--ink); }

@media (max-width: 600px){
  .content{ padding-top: 12px; justify-content: flex-start; }
  .content-inner{ padding-top: 8vh; }
  .badge{ margin-bottom: 22px; }
  .badge .eyebrow{ font-size: 10px; letter-spacing: 0.14em; }
  .headline{ font-size: clamp(40px, 13vw, 72px); line-height: 0.94; }
  .sub{ margin-top: 22px; }
  .build, .actions, .contact-cta{ margin-top: 30px; }
  .build{ max-width: 100%; }
  .contact-cta{ max-width: 100%; }
  .cta-mail{ font-size: clamp(18px, 5.4vw, 24px); word-break: break-all; }
}

/* Tablet — balance the big type and keep CTA comfortably in view */
@media (min-width: 601px) and (max-width: 1024px){
  .headline{ font-size: clamp(56px, 9vw, 104px); }
  .contact-cta{ max-width: 600px; }
}

/* Short / landscape phones — never trap content */
@media (max-height: 560px){
  .stage{ min-height: auto; }
  .content{ justify-content: flex-start; padding-top: 20px; }
  .headline{ font-size: clamp(34px, 7vw, 64px); }
}