/* ============================================================
   PHANTOM SIGNAL — shared styles
   Dark horror. Atmospheric hero. Blood red on black. No JS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Major+Mono+Display&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&display=swap');

:root {
  --bg: #060304;
  --bg-raised: #0d0709;
  --blood: #d10018;
  --blood-bright: #ff2438;
  --blood-dim: #5a0010;
  --text: #d8d0d2;
  --text-dim: #7d7478;
  --text-faint: #4a4347;
  --hairline: #1c1316;
  --max-width: 760px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Special Elite','Courier New',monospace;
  line-height: 1.75;
  font-size: 17px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* faint scanlines over everything */
body::after {
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none;
  background: repeating-linear-gradient(to bottom,
    transparent 0 3px, rgba(255,0,30,0.012) 3px 4px);
}

.wrap { max-width: var(--max-width); margin:0 auto; padding:0 28px; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: absolute; top:0; left:0; right:0; z-index:20;
  padding: 22px 0;
}
.nav-inner {
  max-width: 1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-mark svg {
  width:24px; height:24px;
  filter: drop-shadow(0 0 6px rgba(209,0,24,0.55));
}
.nav-logo-text {
  font-family:'Major Mono Display',monospace;
  font-size:13px; letter-spacing:0.18em; color:var(--text);
  text-transform:lowercase;
}
.nav-links { display:flex; gap:28px; }
.nav-links a {
  color: var(--text-dim); text-decoration:none;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  transition: color .3s ease;
}
.nav-links a:hover { color: var(--blood); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 120px 24px 80px;
  overflow:hidden;
}

/* particle / static cloud */
.hero-cloud {
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-58%);
  width: min(760px, 96vw); height: min(520px, 70vh);
  z-index:0; pointer-events:none;
}
.cloud-glow {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 55% 50% at 50% 42%,
    rgba(209,0,24,0.32) 0%,
    rgba(209,0,24,0.12) 30%,
    rgba(120,0,16,0.05) 50%,
    transparent 72%);
  filter: blur(6px);
}
/* grain dust over the glow */
.cloud-grain {
  position:absolute; inset:0; mix-blend-mode:screen; opacity:0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.06  0 0 0 0 0.1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 70%);
}
.cloud-signal {
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 90%; height:auto;
  opacity:0.85;
  filter: drop-shadow(0 0 18px rgba(209,0,24,0.5));
}

.hero-content { position:relative; z-index:2; max-width:680px; }

.badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background: rgba(13,7,9,0.7);
  backdrop-filter: blur(4px);
  margin-bottom:34px;
}
.badge-tag {
  font-size:9px; letter-spacing:0.2em; font-weight:700;
  padding:3px 8px; border-radius:999px;
  background: var(--blood); color:#fff;
}
.badge-label {
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--text-dim);
}

.hero-title {
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size: clamp(40px, 9vw, 86px);
  line-height: 1.04;
  letter-spacing:-0.01em;
  color: #f2eef0;
}
.hero-title em {
  font-style: italic; font-weight:400;
  color: var(--blood-bright);
  text-shadow: 0 0 30px rgba(255,36,56,0.4);
}

.hero-sub {
  margin: 26px auto 0;
  max-width: 440px;
  font-size: clamp(14px,2.6vw,16px);
  color: var(--text-dim);
  letter-spacing:0.03em;
  line-height:1.8;
}

.cta {
  display:inline-block; margin-top:40px;
  padding:14px 44px;
  border-radius:999px;
  background: var(--blood);
  color:#fff; text-decoration:none;
  font-family:'Major Mono Display',monospace;
  font-size:14px; letter-spacing:0.18em; text-transform:lowercase;
  box-shadow: 0 0 0 rgba(209,0,24,0);
  transition: box-shadow .4s ease, transform .2s ease, background .3s ease;
}
.cta:hover {
  background: var(--blood-bright);
  box-shadow: 0 0 36px rgba(209,0,24,0.5);
  transform: translateY(-1px);
}

.hero-fade {
  position:absolute; bottom:0; left:0; right:0; height:160px; z-index:1;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: 80px 0; }
.section-head {
  font-family:'Major Mono Display',monospace;
  font-weight:400; text-transform:lowercase;
  font-size: clamp(18px,4vw,26px);
  letter-spacing:0.08em;
  color: var(--text);
  text-align:center;
  margin-bottom: 48px;
}
.section-head::after {
  content:""; display:block; width:60px; height:1px; margin:18px auto 0;
  background: linear-gradient(to right, transparent, var(--blood), transparent);
}

.lede {
  text-align:center; font-size:clamp(16px,3vw,19px);
  color:var(--text); max-width:580px; margin:0 auto; line-height:1.9;
}
.lede .accent { color: var(--blood-bright); }

.features {
  margin:48px auto 0; max-width:520px; list-style:none;
  display:flex; flex-direction:column; gap:18px;
}
.features li {
  padding-left:26px; position:relative; color:var(--text-dim); font-size:15px;
}
.features li::before { content:"—"; position:absolute; left:0; color:var(--blood); }

/* ============================================================
   Story cards
   ============================================================ */
.section-stories { background: linear-gradient(to bottom, var(--bg), #08040600); }
.story-grid {
  display:grid; grid-template-columns:1fr; gap:18px; max-width:600px; margin:0 auto;
}
.story-card {
  position:relative;
  padding:28px 28px 30px;
  border:1px solid var(--hairline);
  border-radius:14px;
  background: linear-gradient(160deg, var(--bg-raised), #08050700);
  transition: border-color .4s ease, box-shadow .4s ease, transform .2s ease;
}
.story-card:hover {
  border-color: var(--blood-dim);
  box-shadow: 0 0 32px rgba(209,0,24,0.12);
  transform: translateY(-2px);
}
.story-no {
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color: var(--blood); display:block; margin-bottom:12px;
}
.story-title {
  font-family:'Fraunces',Georgia,serif;
  font-weight:600; font-size: clamp(20px,4.5vw,26px);
  color:#f2eef0; line-height:1.2; margin-bottom:10px;
}
.story-teaser {
  font-size:14px; color:var(--text-dim); line-height:1.7; letter-spacing:0.01em;
}
.story-card--soon { opacity:0.6; }
.story-card--soon .story-title { color: var(--text-dim); font-style:italic; font-weight:400; }

/* ============================================================
   Download
   ============================================================ */
.section-download { padding-bottom: 60px; }
.stores { display:flex; flex-direction:column; align-items:center; gap:18px; }
.appstore-badge {
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 28px 14px 24px;
  border:1px solid var(--blood-dim); border-radius:12px;
  background: var(--bg-raised); color:var(--text); text-decoration:none;
  transition: border-color .4s ease, box-shadow .4s ease, transform .2s ease;
}
.appstore-badge:hover {
  border-color: var(--blood);
  box-shadow: 0 0 28px rgba(209,0,24,0.25);
  transform: translateY(-1px);
}
.appstore-badge svg { width:28px; height:28px; fill:var(--text); flex-shrink:0; }
.appstore-badge .badge-text { display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.appstore-badge .badge-small { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-dim); }
.appstore-badge .badge-large { font-family:'Major Mono Display',monospace; font-size:17px; letter-spacing:0.04em; }
.coming-soon { font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-faint); }

/* ============================================================
   Privacy policy
   ============================================================ */
.policy { padding: 40px 0 0; }
.policy h1 {
  font-family:'Major Mono Display',monospace; font-weight:400;
  font-size:clamp(22px,5vw,32px); letter-spacing:0.08em;
  color:var(--text); text-transform:lowercase; margin-bottom:8px;
}
.policy .meta { font-size:13px; color:var(--text-faint); letter-spacing:0.05em; margin-bottom:6px; }
.policy h2 {
  font-family:'Major Mono Display',monospace; font-weight:400;
  font-size:16px; letter-spacing:0.06em; color:var(--blood);
  text-transform:lowercase; margin:44px 0 14px;
}
.policy p { color:var(--text); margin-bottom:16px; font-size:16px; }
.policy a { color:var(--blood-bright); text-decoration:none; border-bottom:1px solid var(--blood-dim); transition:border-color .3s ease; }
.policy a:hover { border-color:var(--blood-bright); }
.policy ul { margin:0 0 16px; padding:0; list-style:none; }
.policy ul li { position:relative; padding-left:24px; margin-bottom:12px; color:var(--text); }
.policy ul li::before { content:"—"; position:absolute; left:0; color:var(--blood-dim); }
.back-link {
  display:inline-block; margin-top:8px;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--hairline);
  transition: color .3s ease, border-color .3s ease;
}
.back-link:hover { color:var(--blood); border-color:var(--blood-dim); }

/* privacy page reuses the centered header */
.site-header { padding:90px 0 20px; text-align:center; }
.header-mark { display:inline-block; margin-bottom:22px; }
.header-mark svg {
  width:46px; height:46px;
  filter: drop-shadow(0 0 14px rgba(209,0,24,0.5));
}
.logo-title {
  font-family:'Major Mono Display',monospace; font-size:clamp(28px,7vw,52px);
  font-weight:400; letter-spacing:0.18em; color:var(--blood);
  text-transform:lowercase; line-height:1.1;
  text-shadow:0 0 24px rgba(209,0,24,0.45),0 0 4px rgba(255,40,60,0.6);
}
.logo-title a { color:inherit; text-decoration:none; }
.tagline { margin-top:18px; font-size:clamp(11px,2.4vw,14px); letter-spacing:0.42em; text-transform:uppercase; color:var(--text-dim); }
.rule { width:100%; max-width:220px; height:1px; margin:48px auto; border:none;
  background:linear-gradient(to right,transparent,var(--blood-dim),var(--blood),var(--blood-dim),transparent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: 40px; padding:40px 0 60px; text-align:center;
  border-top:1px solid var(--hairline);
}
.footer-links { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:20px; }
.site-footer a {
  color:var(--text-dim); text-decoration:none;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase; transition:color .3s ease;
}
.site-footer a:hover { color:var(--blood); }
.copyright { font-size:11px; letter-spacing:0.12em; color:var(--text-faint); }
.copyright .sep { margin:0 10px; color:var(--hairline); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:480px){
  body{font-size:16px;}
  .nav-links{gap:16px;}
  .nav-links a{font-size:11px;letter-spacing:0.12em;}
  .wrap{padding:0 22px;}
  .footer-links{gap:18px;}
}