/* PhotonForgeAI landing — Brand v1 palette, static only */
:root {
  --void: #05080D;
  --hull: #0B1118;
  --panel: #121B25;
  --core-cyan: #00C8D8;
  --deep-cyan: #00A0B0;
  --hex-amber: #E0861A;
  --ember: #F0B848;
  --signal: #E6F4F7;
  --telemetry: #7F95A3;
  --nominal: #2FD38A;
  --font-display: "Orbitron", "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;
  --max: 720px;
  --radius-chamfer: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--signal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* faint radial vignette behind hero emblem */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 28%, rgba(0, 200, 216, 0.12) 0%, transparent 70%);
  z-index: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel);
  color: var(--core-cyan);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

/* Chamfered panel (45° hex echo) */
.panel {
  background: var(--panel);
  border: 1px solid var(--deep-cyan);
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px
  );
  padding: 1.5rem 1.35rem;
}

.panel--gated {
  border-color: var(--hex-amber);
}

/* Header / Hero */
.site-header {
  position: relative;
  padding: 3rem 0 2.5rem;
  text-align: center;
}

.logo {
  display: block;
  width: min(392px, 92vw);
  height: auto;
  margin: 0 auto 1.25rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--core-cyan);
  margin: 0 0 0.75rem;
}

.tagline {
  margin: 0 auto 1.25rem;
  max-width: 34ch;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  color: var(--signal);
  font-weight: 400;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--hex-amber);
  padding: 0.4rem 0.85rem;
  background: var(--hull);
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px
  );
}

.badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--hex-amber);
  box-shadow: 0 0 8px rgba(224, 134, 26, 0.55);
  flex-shrink: 0;
}

main {
  padding-bottom: 3rem;
}

section {
  margin-bottom: 1.75rem;
}

h2 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--core-cyan);
  margin: 0 0 1rem;
}

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.points li {
  background: var(--hull);
  border: 1px solid var(--deep-cyan);
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
  padding: 1rem 1.1rem 1rem 1.15rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 0.9rem;
  align-items: start;
}

.points .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--core-cyan);
  border: 1px solid var(--deep-cyan);
  padding: 0.2rem 0.4rem;
  line-height: 1;
  margin-top: 0.15rem;
}

.points strong {
  display: block;
  font-weight: 600;
  color: var(--signal);
  margin-bottom: 0.2rem;
  font-size: 0.98rem;
}

.points p {
  margin: 0;
  color: var(--telemetry);
  font-size: 0.95rem;
  grid-column: 2;
}

.status-body {
  color: var(--telemetry);
  margin: 0 0 1rem;
}

.status-body strong {
  color: var(--ember);
  font-weight: 600;
}

.download-placeholder {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--void);
  border: 1px dashed var(--deep-cyan);
  color: var(--telemetry);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px
  );
}

.contact {
  text-align: center;
  padding: 0.5rem 0 1.5rem;
}

.contact a {
  color: var(--core-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--signal);
  border-bottom-color: var(--core-cyan);
  outline: none;
}
.contact a:focus-visible {
  outline: 2px solid var(--core-cyan);
  outline-offset: 4px;
}

.contact p {
  margin: 0.35rem 0;
  color: var(--telemetry);
  font-size: 0.95rem;
}

.site-footer {
  border-top: 1px solid var(--deep-cyan);
  padding: 1.25rem 0 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--telemetry);
}

.site-footer a {
  color: var(--core-cyan);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--signal);
  text-decoration: underline;
}

.site-footer .copy {
  margin: 0 0 0.35rem;
}

@media (min-width: 640px) {
  .site-header { padding-top: 4rem; }
  .logo { width: min(448px, 70vw); }
  .panel { padding: 1.75rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ——— A.T.O.M. fleetmate section (visually distinct) ——— */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.atom-section {
  margin: 2.5rem 0 2rem;
  padding: 1.75rem 0 0.5rem;
  text-align: center;
}

.atom-divider {
  height: 1px;
  margin: 0 auto 1.75rem;
  max-width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--hex-amber) 20%,
    var(--core-cyan) 50%,
    var(--hex-amber) 80%,
    transparent 100%
  );
  opacity: 0.55;
}

.atom-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.atom-section h2 {
  margin-bottom: 1.25rem;
  color: var(--ember);
  letter-spacing: 0.28em;
}

.atom-panel {
  background: var(--hull);
  border: 1px solid rgba(224, 134, 26, 0.55);
  border-top: 2px solid var(--hex-amber);
  text-align: left;
  padding: 1.35rem 1.25rem 1.25rem;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px
  );
}

.atom-lead {
  margin: 0 0 0.85rem;
  color: var(--signal);
  font-size: 1rem;
}

.atom-status {
  margin: 0 0 1rem;
  color: var(--telemetry);
  font-size: 0.95rem;
}

.atom-status strong {
  color: var(--ember);
  font-weight: 600;
}

.atom-disclaimer {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(127, 149, 163, 0.25);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--telemetry);
}

/* Photon-forge animation stage around A.T.O.M. logo */
.forge {
  position: relative;
  width: min(390px, 78vw);
  height: min(390px, 78vw);
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
}

.atom-logo {
  position: relative;
  z-index: 5;
  width: 72%;
  height: auto;
  background: var(--void);
  /* soft circular crop so black square doesn't dominate the forge */
  clip-path: circle(48% at 50% 46%);
}

.forge-core-pulse {
  position: absolute;
  z-index: 1;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 216, 0.45) 0%, rgba(0, 200, 216, 0.12) 45%, transparent 70%);
  animation: forge-pulse 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.forge-ring {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
  pointer-events: none;
}

.forge-ring--outer {
  animation: forge-spin 18s linear infinite;
}

.forge-ring--mid {
  animation: forge-spin-rev 12s linear infinite;
}

.forge-ring--inner {
  animation: forge-spin 9s linear infinite;
}

.forge-spark {
  position: absolute;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 6px rgba(240, 184, 72, 0.9);
  will-change: transform, opacity;
  animation: forge-spark 3.6s ease-out infinite;
}

.forge-spark--1 { top: 48%; left: 48%; animation-delay: 0s; --sx: 0px; --sy: -110px; }
.forge-spark--2 { top: 48%; left: 48%; animation-delay: 0.55s; --sx: 95px; --sy: -55px; background: var(--hex-amber); }
.forge-spark--3 { top: 48%; left: 48%; animation-delay: 1.1s; --sx: 95px; --sy: 60px; }
.forge-spark--4 { top: 48%; left: 48%; animation-delay: 1.65s; --sx: 0px; --sy: 110px; background: var(--core-cyan); box-shadow: 0 0 6px rgba(0, 200, 216, 0.9); }
.forge-spark--5 { top: 48%; left: 48%; animation-delay: 2.2s; --sx: -95px; --sy: 55px; background: var(--hex-amber); }
.forge-spark--6 { top: 48%; left: 48%; animation-delay: 2.75s; --sx: -95px; --sy: -55px; }

@keyframes forge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes forge-spin-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes forge-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.28); opacity: 1; }
}

@keyframes forge-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .forge-core-pulse,
  .forge-ring,
  .forge-spark {
    animation: none !important;
  }
  .forge-core-pulse { opacity: 0.5; }
  .forge-spark { display: none; }
}

/* Photons travelling the hex rings */
.forge-photons {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}


@media (prefers-reduced-motion: reduce) { .forge-photons { display: none; } }

/* Two photons on tilted, precessing orbits (opposite directions) */
.forge-photons .orbit { transform-box: view-box; transform-origin: 50% 50%; }
.orbit--a { animation: orbit-a 9s ease-in-out infinite; }
.orbit--b { animation: orbit-b 11s ease-in-out infinite; }
@keyframes orbit-a {
  0%   { transform: rotate(-32deg) scale(1); }
  50%  { transform: rotate(28deg) scale(0.9); }
  100% { transform: rotate(-32deg) scale(1); }
}
@keyframes orbit-b {
  0%   { transform: rotate(32deg) scale(0.92); }
  50%  { transform: rotate(-26deg) scale(1.02); }
  100% { transform: rotate(32deg) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit--a, .orbit--b { animation: none; }
}
/* Photons orbit the whole A.T.O.M. image, in front of it */
.forge { margin-top: 3.5rem; margin-bottom: 4rem; }
.forge-photons { inset: -18%; width: 136%; height: 136%; z-index: 6; }
.atom-features { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.atom-features li { position: relative; padding-left: 1.1rem; color: var(--telemetry); font-size: 0.93rem; line-height: 1.5; }
.atom-features li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--core-cyan); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.atom-features strong { color: var(--signal); font-weight: 600; }
.atom-roadmap { margin: 0 0 0.85rem; color: var(--telemetry); font-size: 0.93rem; }
.atom-roadmap strong { color: var(--ember); font-weight: 600; }

.tarah { margin: 1.5rem auto 1.25rem; max-width: 300px; text-align: center; }
.tarah-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; display: block; width: 100%; height: auto; border-radius: 50%; border: 1px solid rgba(0,200,216,0.45); box-shadow: 0 0 28px rgba(0,200,216,0.35), 0 0 60px rgba(224,134,26,0.15); animation: tarah-glow 4s ease-in-out infinite alternate; }
.tarah-video, .tarah-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tarah-still { display: none; }
.tarah-shield { position: absolute; inset: 0; z-index: 2; background: transparent; }
.tarah-video::-webkit-media-controls, .tarah-video::-webkit-media-controls-enclosure { display: none !important; }
.tarah figcaption { margin-top: 0.75rem; color: var(--telemetry); font-size: 0.9rem; }
.tarah figcaption strong { color: var(--signal); font-family: 'Orbitron','Exo 2',sans-serif; letter-spacing: 0.06em; margin-right: 0.35rem; }
@keyframes tarah-glow { from { box-shadow: 0 0 20px rgba(0,200,216,0.25), 0 0 50px rgba(224,134,26,0.10); } to { box-shadow: 0 0 34px rgba(0,200,216,0.45), 0 0 70px rgba(224,134,26,0.20); } }
@media (prefers-reduced-motion: reduce) { .tarah-frame { animation: none; } .tarah-video { display: none; } .tarah-still { display: block; } }

/* atom-landing */
.logo { width: min(300px, 70vw); }
@media (min-width: 720px) { .logo { width: min(320px, 50vw); } }
.atom-section { margin-top: 0; padding-top: 0; }
.atom-section .tarah { margin-top: 0.75rem; max-width: 340px; }
.atom-section .atom-kicker { margin-top: 0.5rem; }

/* T.A.R.A.H. hologram: recreated from A.T.O.M. hologram.rs values (CSS only) */
.tarah-video, .tarah-still { filter: brightness(0.97) saturate(0.95); animation: holo-flick 0.86s steps(1, end) infinite; }
.holo-tint, .holo-glow, .holo-scan, .holo-dip, .holo-rings { position: absolute; pointer-events: none; z-index: 1; }
.holo-tint { inset: 0; background: rgb(235, 245, 255); mix-blend-mode: multiply; opacity: 0.9; }
.holo-glow { inset: 0; background: radial-gradient(circle, rgba(26,94,102,0.10) 0%, rgba(26,94,102,0.07) 35%, rgba(26,94,102,0.04) 70%, rgba(26,94,102,0) 100%); mix-blend-mode: screen; }
.holo-dip { inset: 0; background: #000; opacity: 0; animation: holo-dip 2.7s linear infinite; }
.holo-scan { left: 0; right: 0; height: 10%; top: -10%;
  background: repeating-linear-gradient(to bottom, rgba(58,196,200,0.16) 0 1px, transparent 1px 6%);
  -webkit-mask-image: radial-gradient(ellipse 36% 50% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 36% 50% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  animation: holo-scan 3.33s linear infinite; }
.holo-rings { inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-inner { transform-origin: 0 0; animation: holo-spin 25.13s linear infinite; }
.ring-outer { transform-origin: 0 0; animation: holo-spin-rev 15.71s linear infinite; }
@keyframes holo-spin { to { transform: rotate(360deg); } }
@keyframes holo-spin-rev { to { transform: rotate(-360deg); } }
@keyframes holo-scan { from { top: -10%; } to { top: 115%; } }
@keyframes holo-dip { 0%, 99.1% { opacity: 0; } 99.55% { opacity: 0.22; } 100% { opacity: 0; } }
@keyframes holo-flick {
  0% { filter: brightness(0.95) saturate(0.95); } 11% { filter: brightness(0.99) saturate(0.95); }
  23% { filter: brightness(0.94) saturate(0.95); } 34% { filter: brightness(1) saturate(0.95); }
  46% { filter: brightness(0.96) saturate(0.95); } 57% { filter: brightness(0.93) saturate(0.95); }
  69% { filter: brightness(0.98) saturate(0.95); } 80% { filter: brightness(0.95) saturate(0.95); }
  91% { filter: brightness(1) saturate(0.95); } }
@media (prefers-reduced-motion: reduce) { .tarah-video, .tarah-still, .holo-dip, .holo-scan, .ring-inner, .ring-outer { animation: none; } .holo-scan { display: none; } }