/* Centricap — holding page. Same palette as the main build (Centricap-Hero/
   css/hero.css) but standalone: no GSAP, no build step, nothing to break. */

:root {
  --navy-900: #04141d;
  --steel: #3a89c0;
  --cyan: #00aeef;
  --ink: #e9f2f8;
  --ink-dim: rgba(233, 242, 248, 0.68);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--navy-900); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.hold {
  position: relative; z-index: 1;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 22px);
  padding: clamp(24px, 6vw, 48px); text-align: center;
}
.hold__mark { width: clamp(56px, 8vw, 88px); height: auto; }
.hold__word { width: clamp(180px, 22vw, 280px); height: auto; }
.hold__tag {
  margin: clamp(4px, 1vh, 10px) 0 0; font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  letter-spacing: 0.01em; color: var(--ink-dim);
}

/* faint ambient motion — a small, quiet echo of the main site's hero field,
   built with plain CSS so this page has zero JS dependencies.
   Each `.orbit` is a zero-size pivot sitting exactly at the field's centre;
   rotating it carries its one `.dot` child (offset by `top`) around in a
   true circle. This is the CSS equivalent of the main build's svgOrigin
   trick: rotate around the shared centre point, not the dot's own box. */
.field {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.ring {
  position: absolute; top: 50%; left: 50%; width: 640px; height: 640px;
  margin: -320px 0 0 -320px; border-radius: 50%;
  border: 1px solid rgba(58, 137, 192, 0.25);
  animation: spin 220s linear infinite;
}
.orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.orbit--1 { animation: spin 46s linear infinite; }
.orbit--2 { animation: spin 34s linear infinite reverse; }
.orbit--3 { animation: spin 62s linear infinite; }
.dot {
  position: absolute; top: -220px; left: -2.5px; width: 5px; height: 5px;
  border-radius: 50%; opacity: 0.55;
}
.orbit--2 .dot { top: -150px; }
.orbit--3 .dot { top: -280px; }
.dot--cyan { background: var(--cyan); }
.dot--steel { background: var(--steel); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ring, .orbit { animation: none; }
}