/* b.css — Deep Space: starfield, aurora, orbital ring. */
@font-face {
  font-family: "Space Grotesk";
  src: url(fonts/space-grotesk.woff2) format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #04060D;
  --ink: #E8ECF4;
  --muted: #8A93A6;
  --cyan: #22D3EE;
  --violet: #8B5CF6;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mark: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --align: center;
  --strip-justify: center;
  --mark-track: -0.03em;
}

.pitch { margin-inline: auto; }

.mark {
  font-weight: 700;
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%,
    var(--cyan) 48%, var(--violet) 58%,
    var(--ink) 68%, var(--ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  /* Fallback for browsers without background-clip: text (the gradient-text
     effect above): keep the wordmark visible in solid --ink. The @supports
     block below opts into `color: transparent` only where background-clip:
     text actually exists, and forced-colors mode overrides both further
     down — do not delete this as dead code. */
  color: var(--ink);
  animation: shimmer 7s ease-in-out infinite;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mark { color: transparent; }
}
@keyframes shimmer {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}
.mark .tld { -webkit-text-fill-color: var(--muted); color: var(--muted); }

@media (forced-colors: active) {
  .mark { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .mark .tld { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

.strip li { position: relative; }
.strip li + li::before {
  content: ""; position: absolute; left: calc(-1 * clamp(0.75rem, 2vw, 1.5rem) / 2);
  top: 0.15em; bottom: 0.15em; width: 1px; background: rgba(138, 147, 166, 0.3);
}

/* --- border beam on the CTA (Inspira pattern: rotating conic, masked to 1px) --- */
.cta {
  border-radius: 999px;
  background: rgba(232, 236, 244, 0.02);
  color: var(--muted);
}
.cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam, 0deg),
    transparent 0turn, var(--cyan) 0.08turn, var(--violet) 0.16turn, transparent 0.24turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 4s linear infinite;
}
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam: 360deg; } }

/* --- effect layer --- */
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.30;
}
.aurora-1 {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(circle, var(--cyan), transparent 66%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 54vmax; height: 54vmax; right: -16vmax; bottom: -20vmax;
  background: radial-gradient(circle, var(--violet), transparent 66%);
  animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, -9vmax) scale(1.1); } }

.orbit {
  position: absolute; left: 50%; top: 50%;
  width: min(96vmin, 900px); aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0.22;
  animation: spin 48s linear infinite;
}
.orbit ellipse { fill: none; stroke: var(--cyan); stroke-width: 0.5; }
.orbit ellipse:nth-child(2) { stroke: var(--violet); }
@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .orbit  { animation: none; }
  .mark   { animation: none; background-position: 130% 0; }
  .cta::before { animation: none; }
}

/* --- enquiry form --- */
.enquiry { margin-top: clamp(2rem, 5vw, 3.5rem); text-align: left; }
.enquiry p { margin: 0 0 1rem; }
.enquiry label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.enquiry .opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.enquiry input, .enquiry textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  background: rgba(232, 236, 244, 0.04);
  border: 1px solid rgba(138, 147, 166, 0.3);
  border-radius: 6px;
  color: var(--ink); font: inherit; font-size: 1rem;
}
.enquiry input:focus-visible, .enquiry textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.enquiry button {
  padding: 0.8rem 1.6rem; border: 0; border-radius: 999px;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  color: var(--bg); font: inherit; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.enquiry button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sent {
  margin-top: clamp(2rem, 5vw, 3.5rem); padding: 1rem 1.25rem;
  border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 8px;
  color: var(--ink);
}