/* =============================================================
   UniDevs — Cosmic landing layer
   "Uni → Universe": a premium, deep-space redesign of the home page.
   Scoped entirely under  body.cosmic  so the rest of the site is untouched.
   Loaded after main/custom/unidevs-refresh; overrides only on the home page.
   ============================================================= */

/* ----------  Fonts (self-hosted, see /assets/fonts)  ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clash-display/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clash-display/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clash-display/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi/Satoshi-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ----------  Tokens  ---------- */
body.cosmic {
  /* deep-space ramp (near-black blue, never pure #000 — keeps grain & glow alive) */
  --void:        #04050d;
  --ink:         #070a18;
  --ink-2:       #0a0f22;
  --navy:        #0b163f;   /* mid brand navy, kept for light-context use */
  --panel:       rgba(255, 255, 255, 0.038);
  --panel-2:     rgba(255, 255, 255, 0.06);
  --panel-solid: #0c1226;
  --hair:        rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.16);

  /* ink on light "daybreak" breather sections */
  --day-bg:      #eef1f8;
  --day-surface: #ffffff;
  --day-ink:     #0a1130;
  --day-muted:   #45506c;
  --day-hair:    #d8def0;

  /* type colors on dark */
  --text:   #eef1fb;
  --text-2: #b6c0da;   /* muted body — ~9:1 on --ink, safe */
  --text-3: #8b96b4;   /* labels / large only */

  /* accent — brand blue (calm on the eyes, evolved from primary #2b488c / navy)
     a soft periwinkle that stays legible on deep space without aqua harshness */
  --cyan:        #8098e8;   /* accent: links, highlights, icons, hairline glow */
  --cyan-strong: #aab9f5;   /* hover / labels */
  --cyan-deep:   #2b488c;   /* brand blue for the light "daybreak" section */
  --cyan-ink:    #ffffff;   /* text on a filled accent button */
  /* primary button color = brand #000032; a faint lift on btn-1 keeps it legible
     against the near-black background, with #000032 carrying the fill */
  --btn-1:       #16265e;   /* subtle top-left lift */
  --btn-2:       #000032;   /* the brand primary */
  --btn-border:  rgba(128, 152, 232, 0.4);
  --glow:        rgba(86, 116, 220, 0.50);
  --glow-soft:   rgba(86, 116, 220, 0.20);

  /* starlight gold — used sparingly as a spark */
  --gold: #f5c97b;

  --radius:    18px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  --shell: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.25rem);
  --section-y: clamp(5rem, 10vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* ease-out-quint-ish */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-scale */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 1100;
  --z-overlay: 1200;
}
body.cosmic { --panel-solid: #0c1226; }

/* ----------  Base  ---------- */
body.cosmic {
  background-color: var(--void);
  color: var(--text);
  font-family: "Satoshi", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* a single quiet star-dust field behind the whole page (the dark spine) */
body.cosmic::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(86, 116, 220, 0.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(31, 58, 147, 0.20), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(11, 22, 63, 0.55), transparent 60%),
    var(--void);
}

body.cosmic h1, body.cosmic h2, body.cosmic h3,
body.cosmic h4, body.cosmic h5, body.cosmic h6 {
  font-family: "Clash Display", "Satoshi", system-ui, sans-serif;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
body.cosmic p { color: var(--text-2); margin: 0; }
body.cosmic a { text-decoration: none; }
body.cosmic ::selection { background: var(--glow); color: #03100d; }
body.cosmic img { max-width: 100%; }

/* fine film grain to kill gradient banding & add a photographic feel */
body.cosmic .grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ----------  Layout helpers  ---------- */
body.cosmic .shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body.cosmic .shell-wide { max-width: 1340px; }
body.cosmic section { position: relative; }

/* section label — a restrained "telemetry" tag, used on only a couple sections
   (deliberately NOT an eyebrow above every heading) */
body.cosmic .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-strong);
  font-weight: 600;
}
body.cosmic .tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--glow);
}
body.cosmic .dek {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  text-wrap: pretty;
}
body.cosmic .section-head { max-width: 760px; }
body.cosmic .section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  margin: 1rem 0 1rem;
}

/* ----------  Buttons  ---------- */
body.cosmic .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "Satoshi", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 1rem 1.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
body.cosmic .c-btn .arr { transition: transform 0.35s var(--ease); }
body.cosmic .c-btn:hover .arr { transform: translateX(3px); }

body.cosmic .c-btn--primary {
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2));
  color: #fff;
  border-color: var(--btn-border);
  box-shadow: 0 10px 32px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.cosmic .c-btn--primary:hover {
  background: linear-gradient(135deg, #23398a, #0a1450);
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 16px 46px -12px var(--glow);
}
body.cosmic .c-btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-color: var(--hair-strong);
  backdrop-filter: blur(4px);
}
body.cosmic .c-btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan-strong);
  transform: translateY(-2px);
}
/* a light-section primary (on daybreak breather) */
body.cosmic .c-btn--ink {
  background: var(--day-ink);
  color: #fff;
}
body.cosmic .c-btn--ink:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(10, 17, 48, 0.6); }
body.cosmic .c-btn--outline-ink {
  background: transparent;
  color: var(--day-ink);
  border-color: var(--day-hair);
}
body.cosmic .c-btn--outline-ink:hover { border-color: var(--day-ink); }

/* =============================================================
   NAVBAR — transparent over the hero, frosts to solid on scroll
   ============================================================= */
body.cosmic .main-header { z-index: var(--z-nav); }
body.cosmic .main-header .sticky-header {
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
    border-color 0.4s var(--ease), padding 0.3s var(--ease);
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid transparent;
}
body.cosmic .main-header .sticky-header.affix {
  background: rgba(7, 10, 24, 0.72);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--hair);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.9);
}
body.cosmic .ud-nav-brand-shell {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
}
body.cosmic .ud-nav-brand-shell img.logo-white { display: block; height: 40px; }
body.cosmic .ud-nav-brand-shell img.logo-color { display: none; }
body.cosmic .main-menu li a.nav-link {
  color: var(--text-2) !important;
  font-weight: 500;
  font-size: 0.96rem;
  padding: 0.6rem 0.95rem;
  min-height: 44px;            /* reliable tap target */
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color 0.25s var(--ease);
}
body.cosmic .main-menu li a.nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem; bottom: 0.35rem;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
  opacity: 0.85;
}
body.cosmic .main-menu li a.nav-link:hover { color: var(--text) !important; }
body.cosmic .main-menu li a.nav-link:hover::after { transform: scaleX(1); }
body.cosmic .main-header .action-btns .btn-primary {
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2));
  color: #fff;
  border: 1px solid var(--btn-border);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.25rem;
  box-shadow: 0 8px 26px -10px var(--glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
body.cosmic .main-header .action-btns .btn-primary:hover {
  background: linear-gradient(135deg, #23398a, #0a1450);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px var(--glow);
}
body.cosmic .navbar-toggler .far { color: var(--text); }

/* =============================================================
   HERO — edge to edge, video/photo background
   ============================================================= */
body.cosmic .cosmos-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
body.cosmic .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
body.cosmic .hero-bg img,
body.cosmic .hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* canvas starfield sits above the media, below the scrim text-protect */
body.cosmic .hero-stars {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
/* legibility scrim: dark from the left & bottom, lets the cosmos breathe top-right */
body.cosmic .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* lighter than before so the Earth stays clear; text legibility comes from the
     far-left anchor + a text-shadow on the headline rather than a heavy wash */
  background:
    linear-gradient(100deg, rgba(4, 5, 13, 0.86) 0%, rgba(4, 5, 13, 0.42) 30%, rgba(4, 5, 13, 0.1) 62%, transparent 100%),
    linear-gradient(to top, var(--void) 0%, rgba(4, 5, 13, 0.06) 16%, transparent 44%);
}
/* a soft planetary glow rising from the bottom edge */
body.cosmic .hero-horizon {
  position: absolute;
  left: 50%;
  bottom: -54vw;
  width: 150vw;
  height: 110vw;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(86, 116, 220, 0.16), rgba(86, 116, 220, 0.05) 55%, transparent 72%);
  pointer-events: none;
}

body.cosmic .hero-inner { position: relative; z-index: var(--z-content); max-width: 700px; }
body.cosmic .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  font-size: 0.82rem;
  color: var(--text-2);
  margin-bottom: 1.7rem;
}
body.cosmic .hero-eyebrow b {
  color: var(--text);
  font-weight: 600;
}
body.cosmic .hero-eyebrow .spark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  background: var(--glow-soft);
  color: var(--cyan-strong);
  font-weight: 600;
  font-size: 0.74rem;
}
body.cosmic .hero h1,
body.cosmic .hero-title {
  font-size: clamp(2.05rem, 4.4vw, 3.6rem);   /* smaller — lets the Earth breathe */
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.cosmic .hero-title .accent { color: var(--cyan); }
body.cosmic .hero-sub {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
  text-wrap: pretty;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.55);
}
body.cosmic .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.3rem;
}
/* trust strip */
body.cosmic .hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 2.75rem);
  margin-top: 3.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--hair);
}
body.cosmic .hero-trust .stat { display: flex; flex-direction: column; gap: 0.15rem; }
body.cosmic .hero-trust .stat b {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}
body.cosmic .hero-trust .stat span { font-size: 0.86rem; color: var(--text-3); }
body.cosmic .hero-trust .sep { width: 1px; height: 38px; background: var(--hair); }

/* scroll cue */
body.cosmic .hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-3);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
body.cosmic a.hero-scroll:hover {
  color: var(--cyan-strong);
  transform: translateX(-50%) translateY(3px);
}
body.cosmic a.hero-scroll:hover .mouse { border-color: var(--cyan); }
body.cosmic .hero-scroll .mouse {
  width: 22px; height: 36px;
  border: 1.5px solid var(--hair-strong);
  border-radius: 100px;
  position: relative;
}
body.cosmic .hero-scroll .mouse::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 7px;
  border-radius: 3px;
  background: var(--cyan);
  transform: translateX(-50%);
  animation: heroScroll 1.8s var(--ease) infinite;
}
@keyframes heroScroll {
  0% { opacity: 0; transform: translate(-50%, -4px); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 9px); }
  100% { opacity: 0; }
}

/* =============================================================
   Generic dark section scaffolding
   ============================================================= */
body.cosmic .band { padding-block: var(--section-y); position: relative; }
body.cosmic .band--ink { background: linear-gradient(180deg, var(--void), var(--ink) 40%, var(--ink)); }
body.cosmic .band--ink2 { background: var(--ink-2); }

/* hairline divider with a faint cyan node, used between dark bands */
body.cosmic .star-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
  position: relative;
}

/* =============================================================
   MISSION — one crew: launch / upgrade / support
   ============================================================= */
body.cosmic .mission-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
body.cosmic .mission-copy h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.06;
  margin: 1.1rem 0 1.2rem;
}
body.cosmic .mission-tracks { display: flex; flex-direction: column; gap: 0.9rem; }
body.cosmic .track {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
body.cosmic .track:hover {
  border-color: var(--hair-strong);
  background: var(--panel-2);
  transform: translateY(-3px);
}
body.cosmic .track-num {
  font-family: "Clash Display", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cyan);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  background: rgba(86, 116, 220, 0.06);
}
body.cosmic .track h3 { font-size: 1.18rem; margin-bottom: 0.3rem; }
body.cosmic .track p { font-size: 0.97rem; line-height: 1.55; }

/* =============================================================
   CAPABILITIES — a constellation of services
   ============================================================= */
body.cosmic .cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* exactly 6 services → clean 3×2 */
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hair);  /* the grid lines show through the 1px gaps */
}
@media (max-width: 900px) { body.cosmic .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.cosmic .cap-grid { grid-template-columns: 1fr; } }
body.cosmic .cap {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.3rem);
  background: var(--ink);
  transition: background 0.4s var(--ease);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
body.cosmic .cap:hover { background: var(--ink-2); }
body.cosmic .cap::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), var(--glow-soft), transparent 70%);
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
body.cosmic .cap:hover::after { opacity: 1; }
body.cosmic .cap-node {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cyan-strong);
  margin-bottom: 1.15rem;
}
body.cosmic .cap-node svg { width: 19px; height: 19px; }
body.cosmic .cap h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
body.cosmic .cap p { font-size: 0.95rem; line-height: 1.55; color: var(--text-2); }
body.cosmic .cap-index {
  position: absolute;
  top: 1.4rem; right: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-3);
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}

/* =============================================================
   INDUSTRIES — light "daybreak" breather (landing on a world)
   ============================================================= */
body.cosmic .band--day {
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(86, 116, 220, 0.10), transparent 60%),
    var(--day-bg);
  color: var(--day-ink);
  /* a daylight "island" emerging from the void — rounded on every corner */
  border-radius: clamp(30px, 5vw, 68px);
  box-shadow: 0 -40px 120px -60px rgba(86, 116, 220, 0.5);
}
/* a touch of breathing room so the void shows around the rounded island */
body.cosmic .band--day + .band--day,
body.cosmic .band + .band--day { margin-top: clamp(0.5rem, 2vw, 1.4rem); }
body.cosmic .band--day:has(+ .band) { margin-bottom: clamp(0.5rem, 2vw, 1.4rem); }
body.cosmic .band--day h2,
body.cosmic .band--day h3 { color: var(--day-ink); }
body.cosmic .band--day p { color: var(--day-muted); }
body.cosmic .band--day .tag { color: var(--cyan-deep); }
body.cosmic .band--day .tag::before { background: var(--cyan-deep); box-shadow: 0 0 8px rgba(43, 72, 140,0.5); }
body.cosmic .band--day .dek { color: var(--day-muted); }

body.cosmic .ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 5 sectors + 1 CTA tile → clean 3×2 */
  gap: 1.1rem;
  margin-top: clamp(2.4rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { body.cosmic .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.cosmic .ind-grid { grid-template-columns: 1fr; } }

/* the closing "your sector?" tile that rounds the grid to 3×2 */
body.cosmic .ind--cta {
  background: linear-gradient(155deg, #1a2a5e, #11204a);
  border-color: transparent;
  color: #fff;
  justify-content: center;
}
body.cosmic .ind--cta h3 { color: #fff; }
body.cosmic .ind--cta p { color: #c5cef0; }
body.cosmic .ind--cta .ind-link { color: #fff; margin-top: 1.25rem; }
body.cosmic .ind--cta .ind-link:hover { color: #fff; gap: 0.75rem; }
body.cosmic .ind--cta:hover { box-shadow: 0 24px 48px -26px rgba(20, 33, 74, 0.7); }
body.cosmic .ind {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.65rem;
  background: var(--day-surface);
  border: 1px solid var(--day-hair);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
body.cosmic .ind:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(10, 17, 48, 0.4);
  border-color: rgba(43, 72, 140, 0.5);
}
body.cosmic .ind h3 { font-size: 1.2rem; margin-bottom: 0.55rem; }
body.cosmic .ind p { font-size: 0.94rem; line-height: 1.55; color: var(--day-muted); }
body.cosmic .ind-use {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.88rem;
  color: var(--day-ink);
}
body.cosmic .ind-use b { color: var(--cyan-deep); }
body.cosmic .ind-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1rem;
  font-weight: 600; font-size: 0.9rem;
  color: var(--day-ink);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
body.cosmic .ind-link:hover { gap: 0.75rem; color: var(--cyan-deep); }
body.cosmic .ind-foot { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* =============================================================
   PROCESS — the launch sequence (numbering is earned here)
   ============================================================= */
body.cosmic .seq {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
/* the trajectory line */
body.cosmic .seq::before {
  content: "";
  position: absolute;
  top: 25px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-strong) 12%, var(--hair-strong) 88%, transparent);
}
body.cosmic .seq-step { position: relative; padding: 0 0.9rem; }
body.cosmic .seq-node {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 1.4rem;
  background: var(--ink);
  border: 1px solid var(--hair-strong);
  color: var(--cyan);
  font-family: "Clash Display", sans-serif;
  font-weight: 600; font-size: 1.1rem;
  position: relative;
  z-index: 1;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
body.cosmic .seq-step:hover .seq-node {
  border-color: var(--cyan);
  color: var(--cyan-strong);
  box-shadow: 0 0 0 6px rgba(86, 116, 220, 0.08), 0 0 26px -4px var(--glow);
}
body.cosmic .seq-step h3 { font-size: 1.1rem; text-align: center; margin-bottom: 0.5rem; }
body.cosmic .seq-step p { font-size: 0.9rem; line-height: 1.5; text-align: center; color: var(--text-2); }

/* =============================================================
   PROOF — testimonials (static, premium) + clients
   ============================================================= */
body.cosmic .proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));  /* shrink-safe at 320px */
  gap: 1.2rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
body.cosmic .quote {
  display: flex;
  flex-direction: column;
  padding: 1.9rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  position: relative;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
}
body.cosmic .quote:hover { border-color: var(--hair-strong); background: var(--panel-2); transform: translateY(-3px); }
body.cosmic .quote-mark {
  font-family: "Clash Display", serif;
  font-size: 3.4rem;
  line-height: 0.5;
  color: var(--cyan);
  opacity: 0.5;
  height: 1.4rem;
}
body.cosmic .quote-title { font-weight: 600; color: var(--text); margin: 0.4rem 0 0.55rem; font-size: 1.06rem; }
body.cosmic .quote p { font-size: 0.99rem; line-height: 1.62; color: var(--text-2); }
body.cosmic .quote-by {
  display: flex; align-items: center; gap: 0.8rem;
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
body.cosmic .quote-av {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}
body.cosmic .quote-by b { display: block; color: var(--text); font-size: 0.95rem; font-weight: 600; }
body.cosmic .quote-by span { font-size: 0.82rem; color: var(--text-3); }

/* clients — a calm grayscale logo wall that lights up on hover */
body.cosmic .clients {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--day-hair);
}
body.cosmic .clients-label {
  text-align: center;
  color: var(--day-muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
body.cosmic .client-wall { width: 100%; }
body.cosmic .client-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.15rem;
}
body.cosmic .client-logo--dup { display: none; }   /* desktop shows a single set */

/* mobile: continuous auto-slider (duplicate set makes the -50% loop seamless) */
@media (max-width: 640px) {
  body.cosmic .client-wall {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  body.cosmic .client-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 0.85rem;
    animation: clientMarquee 20s linear infinite;
  }
  body.cosmic .client-logo { flex: 0 0 auto; }
  body.cosmic .client-logo--dup { display: inline-flex; }
}
@keyframes clientMarquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  body.cosmic .client-track { animation: none; }
  body.cosmic .client-wall { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
body.cosmic .client-logo {
  display: inline-flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hair);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
body.cosmic .client-logo img {
  height: 50px;
  width: auto;
  display: block;
  opacity: 0.82;
  transition: opacity 0.4s var(--ease);
}
body.cosmic .client-logo:hover { transform: translateY(-3px); border-color: var(--hair-strong); }
body.cosmic .client-logo:hover img { opacity: 1; }
body.cosmic .client-logo .fallback {
  display: grid; place-items: center;
  height: 50px; padding: 0 1.2rem;
  font-weight: 600; color: var(--text); font-size: 0.92rem;
  background: var(--panel);
}
/* dark-section fallback for the logo wall (kept in case it's reused on dark) */
body.cosmic .band--ink2 .clients,
body.cosmic .band--ink .clients { border-top-color: var(--hair); }
body.cosmic .band--ink2 .clients-label,
body.cosmic .band--ink .clients-label { color: var(--text-3); }

/* ----------  Atmospheric section background image (subtle, darkened)  ---------- */
body.cosmic .band--bg { isolation: isolate; }
body.cosmic .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body.cosmic .section-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;             /* clearer cosmic imagery */
}
body.cosmic .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* keep top/bottom blended into the void; a gentle wash keeps text readable */
  background:
    radial-gradient(125% 85% at 50% 38%, transparent 0%, rgba(4, 5, 13, 0.3) 78%),
    linear-gradient(180deg, var(--void) 0%, rgba(4, 5, 13, 0.22) 24%, rgba(4, 5, 13, 0.22) 76%, var(--void) 100%);
}
/* right-anchored variant: keep the text side (left) darker, reveal the image on the right */
body.cosmic .section-bg--right img { object-position: right center; }

/* launch CTA: glowing Earth horizon rises from below, dark sky behind the text */
body.cosmic .launch .section-bg img { object-position: center 64%; opacity: 0.72; }
body.cosmic .launch .section-bg::after {
  background:
    radial-gradient(115% 75% at 50% 30%, rgba(4, 5, 13, 0.88) 0%, rgba(4, 5, 13, 0.5) 58%, rgba(4, 5, 13, 0.12) 100%),
    linear-gradient(180deg, var(--void) 0%, rgba(4, 5, 13, 0.28) 40%, transparent 72%, rgba(4, 5, 13, 0.55) 100%);
}
body.cosmic .section-bg--right::after {
  background:
    linear-gradient(90deg, rgba(4, 5, 13, 0.9) 0%, rgba(4, 5, 13, 0.55) 34%, rgba(4, 5, 13, 0.12) 66%, transparent 100%),
    linear-gradient(180deg, var(--void) 0%, transparent 24%, transparent 76%, var(--void) 100%);
}
body.cosmic .band--bg > .shell { position: relative; z-index: 1; }

/* ----------  Trust strip — lead line + client logo wall + stats  ---------- */
body.cosmic .trust-band {
  background: var(--ink);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
body.cosmic .trust-lead {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--text-2);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.6;
  text-wrap: pretty;
}
body.cosmic .trust-lead b { color: var(--text); font-weight: 600; }
body.cosmic .trust-band .client-wall { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
body.cosmic .trust-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
}
body.cosmic .trust-stats > span:not(.sep) { color: var(--text-2); font-size: 0.98rem; }
body.cosmic .trust-stats b {
  color: var(--text);
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  font-feature-settings: "tnum";
  margin-right: 0.35rem;
}
body.cosmic .trust-stats .sep { width: 1px; height: 26px; background: var(--hair-strong); }
@media (max-width: 600px) {
  body.cosmic .trust-stats { gap: 0.6rem 1.3rem; }
  body.cosmic .trust-stats .sep { display: none; }
}

/* =============================================================
   ENGAGEMENT MODELS — ways to work with us
   ============================================================= */
body.cosmic .eng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
@media (max-width: 880px) { body.cosmic .eng-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.cosmic .eng-grid { grid-template-columns: 1fr; } }
body.cosmic .eng {
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.6rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
body.cosmic .eng:hover { border-color: var(--hair-strong); background: var(--panel-2); transform: translateY(-3px); }
body.cosmic .eng-ic {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--hair-strong);
  background: rgba(86, 116, 220, 0.08);
  color: var(--cyan-strong);
  margin-bottom: 1.1rem;
}
body.cosmic .eng-ic svg { width: 22px; height: 22px; }
body.cosmic .eng h3 { font-size: 1.14rem; margin-bottom: 0.5rem; }
body.cosmic .eng p { font-size: 0.95rem; line-height: 1.55; color: var(--text-2); }
body.cosmic .eng--cta {
  background: linear-gradient(155deg, rgba(86, 116, 220, 0.16), var(--panel) 70%);
  border-color: var(--hair-strong);
  justify-content: center;
}
body.cosmic .eng--cta p { color: var(--text-2); margin-bottom: 1.1rem; }
body.cosmic .eng-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--cyan-strong); font-weight: 600; font-size: 0.95rem;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
  margin-top: auto;
}
body.cosmic .eng-link:hover { gap: 0.75rem; color: var(--text); }

/* =============================================================
   FAQ — sticky intro + accordion
   ============================================================= */
body.cosmic .faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { body.cosmic .faq-layout { grid-template-columns: 1fr; gap: 2rem; } }
@media (min-width: 881px) { body.cosmic .faq-intro { position: sticky; top: 6.5rem; } }
body.cosmic .faq-intro h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
body.cosmic .faq-intro .c-btn { margin-top: 1.6rem; }
body.cosmic .faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
body.cosmic .faq-item {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 1.4rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
body.cosmic .faq-item[open] { border-color: var(--hair-strong); background: var(--panel-2); }
body.cosmic .faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text);
}
body.cosmic .faq-item summary::-webkit-details-marker { display: none; }
body.cosmic .faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
body.cosmic .faq-mark::before,
body.cosmic .faq-mark::after {
  content: "";
  position: absolute;
  background: var(--cyan-strong);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
body.cosmic .faq-mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
body.cosmic .faq-mark::after { top: 0; left: 8px; width: 2px; height: 18px; }
body.cosmic .faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }
body.cosmic .faq-a { padding: 0 0 1.3rem; }
body.cosmic .faq-a p { color: var(--text-2); font-size: 0.99rem; line-height: 1.62; max-width: 60ch; }

/* =============================================================
   WHY US — comparison (full panels, no side-stripes)
   ============================================================= */
body.cosmic .why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 4 items → clean 2×2 */
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
@media (max-width: 700px) { body.cosmic .why-grid { grid-template-columns: 1fr; } }
body.cosmic .why {
  position: relative;
  overflow: hidden;
  padding: 1.7rem 1.75rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
/* distinct hover gesture (a top accent line) so the panel grids don't all share one move */
body.cosmic .why::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform: scaleX(0);
  transition: transform 0.55s var(--ease);
}
body.cosmic .why:hover { border-color: var(--hair-strong); background: var(--panel-2); }
body.cosmic .why:hover::after { transform: scaleX(1); }
body.cosmic .why-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-3);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hair);
  border-radius: 100px;
  margin-bottom: 1rem;
}
body.cosmic .why-tag i { color: #f08c8c; font-style: normal; }
body.cosmic .why h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
body.cosmic .why h3 .spark { color: var(--cyan); }
body.cosmic .why p { font-size: 0.96rem; line-height: 1.58; color: var(--text-2); }

/* =============================================================
   FINAL CTA — start your mission
   ============================================================= */
body.cosmic .launch {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(5rem, 11vw, 9rem);
  isolation: isolate;
}
body.cosmic .launch::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -60%;
  width: 130vw; height: 130vw;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(86, 116, 220, 0.22), rgba(86, 116, 220, 0.06) 45%, transparent 70%);
}
body.cosmic .launch-inner { max-width: 720px; margin-inline: auto; position: relative; z-index: 1; }
body.cosmic .launch h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  margin-bottom: 1.1rem;
}
body.cosmic .launch p { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-2); margin-inline: auto; max-width: 52ch; }
body.cosmic .launch .hero-cta { justify-content: center; margin-top: 2.2rem; }
body.cosmic .launch-meta { margin-top: 1.6rem; font-size: 0.88rem; color: var(--text-3); }

/* Footer: now a single simple footer styled in unidevs-refresh.css (.site-footer),
   identical on every page — no cosmic-specific overrides needed. */

/* =============================================================
   PROOF on the light "daybreak" band — quote cards go light
   ============================================================= */
body.cosmic .band--day .quote {
  background: var(--day-surface);
  border-color: var(--day-hair);
  box-shadow: 0 18px 40px -30px rgba(10, 17, 48, 0.4);
}
body.cosmic .band--day .quote:hover {
  border-color: rgba(43, 72, 140, 0.42);
  background: #fff;
  box-shadow: 0 26px 52px -30px rgba(10, 17, 48, 0.45);
}
body.cosmic .band--day .quote-mark { color: var(--cyan-deep); opacity: 0.42; }
body.cosmic .band--day .quote-title { color: var(--day-ink); }
body.cosmic .band--day .quote p { color: var(--day-muted); }
body.cosmic .band--day .quote-by { border-top-color: var(--day-hair); }
body.cosmic .band--day .quote-by b { color: var(--day-ink); }
body.cosmic .band--day .quote-by span { color: var(--day-muted); }
body.cosmic .band--day .quote-av { border-color: var(--day-hair); background: var(--day-bg); }

/* =============================================================
   FOCUS — visible keyboard ring (the cosmic CTAs override box-shadow,
   so we add an explicit outline; never removed by reduced-motion)
   ============================================================= */
body.cosmic a:focus-visible,
body.cosmic button:focus-visible,
body.cosmic .c-btn:focus-visible,
body.cosmic .btn:focus-visible,
body.cosmic .navbar-toggler:focus-visible,
body.cosmic input:focus-visible,
body.cosmic [tabindex]:focus-visible {
  outline: 2px solid var(--cyan-strong);
  outline-offset: 3px;
  border-radius: 6px;
}
body.cosmic .band--day a:focus-visible,
body.cosmic .band--day button:focus-visible,
body.cosmic .band--day .c-btn:focus-visible,
body.cosmic .band--day .btn:focus-visible {
  outline-color: var(--cyan-deep);
}

/* =============================================================
   MOTION — reveal-on-scroll (enhances already-visible content)
   ============================================================= */
/* hidden state only applies when JS is present (html.js set pre-paint),
   so the page never ships blank in no-JS / headless renders */
html.js body.cosmic [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js body.cosmic [data-reveal].is-in { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991px) {
  body.cosmic .mission-grid { grid-template-columns: 1fr; }
  body.cosmic .seq { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  body.cosmic .seq::before { display: none; }
}
@media (max-width: 767px) {
  body.cosmic .main-menu li a.nav-link { color: var(--navy) !important; }  /* offcanvas is light */
  body.cosmic .hero-trust { gap: 1.1rem 1.6rem; }
  body.cosmic .hero-trust .sep { display: none; }
  body.cosmic .seq { grid-template-columns: 1fr; }
  body.cosmic .hero-scroll { display: none; }
}

/* offcanvas mobile menu stays on its light panel — keep brand-color logo */
body.cosmic .offcanvas .main-menu li a.nav-link { color: var(--navy) !important; }
body.cosmic .offcanvas .main-menu li a.nav-link:hover { color: var(--cyan-deep) !important; }

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  body.cosmic *, body.cosmic *::before, body.cosmic *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js body.cosmic [data-reveal] { opacity: 1; transform: none; }
  body.cosmic .marquee-track { animation: none; }
  body.cosmic .hero-scroll .mouse::after { animation: none; }
}

/* =============================================================
   PRELOADER — cosmic loading screen: a glowing orbit around the mark
   ============================================================= */
body.cosmic #preloader {
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(86, 116, 220, 0.16), transparent 70%),
    radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.55) 100%),
    var(--void);
}
body.cosmic #preloader .preloader-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
}
/* faint full orbit track */
body.cosmic #preloader .preloader-wrap::after {
  content: "";
  grid-area: 1 / 1;
  width: 152px; height: 152px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
}
/* glowing arc that sweeps the orbit */
body.cosmic #preloader .preloader-wrap::before {
  content: "";
  grid-area: 1 / 1;
  width: 152px; height: 152px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--cyan) 84%, var(--cyan-strong) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 7px var(--glow));
  animation: orbitSpin 1.5s linear infinite;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
body.cosmic .preloader-icon {
  grid-area: 1 / 1;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 22px rgba(86, 116, 220, 0.55));
  animation: cosmicPulse 2s var(--ease) infinite;
}
@keyframes cosmicPulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.07); opacity: 1; }
}
body.cosmic .preloader-wrap .loading-bar { display: none; }   /* the orbit replaces the bar */

/* =============================================================
   FOOTER — drop the watermark, add a real closing statement
   ============================================================= */
body.cosmic .ud-footer::after { content: none; }   /* removes the logo watermark */
body.cosmic .ud-footer::before {
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(86, 116, 220, 0.16), transparent 60%),
    radial-gradient(700px 320px at 92% 110%, rgba(11, 22, 63, 0.55), transparent 55%);
}
/* a hairline "horizon" with a faint glow along the top edge */
body.cosmic .ud-footer {
  padding-top: 0;
}
body.cosmic .ud-footer .container { padding-top: clamp(3.5rem, 6vw, 5rem); }
body.cosmic .ud-footer::before { border-top: 1px solid var(--hair); }

/* closing CTA row (rendered only on the cosmic home page) */
body.cosmic .ud-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair);
}
body.cosmic .ud-footer-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 0 0.6rem;
}
body.cosmic .ud-footer-cta p { color: var(--text-2); max-width: 46ch; margin: 0; }
body.cosmic .ud-footer-cta .accent { color: var(--cyan); }
body.cosmic .ud-footer-top { border-bottom-color: var(--hair); }
body.cosmic .ud-footer-brand p { color: var(--text-2); }
body.cosmic .ud-footer-links a { color: var(--text-2); }
body.cosmic .ud-footer-links a:hover { color: var(--cyan-strong); }

/* =============================================================
   INNER PAGE shells — cosmic header for non-home routes
   ============================================================= */
body.cosmic .cpage {
  position: relative;
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
body.cosmic .cpage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(86, 116, 220, 0.16), transparent 60%),
    radial-gradient(900px 520px at 6% 6%, rgba(31, 58, 147, 0.2), transparent 55%);
}
body.cosmic .cpage-head { max-width: 760px; }
body.cosmic .cpage-head h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 1.1rem;
}
body.cosmic .cpage-head .accent { color: var(--cyan); }
body.cosmic .cpage-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* =============================================================
   FORMS — cosmic inputs / buttons (used by contact + booking)
   ============================================================= */
body.cosmic .form-control,
body.cosmic .input-group .form-control {
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.05rem;
  font-family: "Satoshi", sans-serif;
  font-size: 0.98rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.cosmic .form-control::placeholder { color: var(--text-3); opacity: 1; }
body.cosmic .form-control:focus {
  background: var(--panel-2);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(86, 116, 220, 0.18);
  outline: none;
  color: var(--text);
}
body.cosmic label,
body.cosmic .ud-booking-label {
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

/* Bootstrap button overrides so every CTA on a cosmic page matches */
body.cosmic .btn.btn-primary {
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2));
  border: 1px solid var(--btn-border);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.4rem;
  box-shadow: 0 10px 30px -12px var(--glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
body.cosmic .btn.btn-primary:hover {
  background: linear-gradient(135deg, #23398a, #0a1450);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -14px var(--glow);
}
body.cosmic .btn.btn-outline-primary {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hair-strong);
  color: var(--text);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
body.cosmic .btn.btn-outline-primary:hover {
  border-color: var(--cyan);
  color: var(--cyan-strong);
  background: var(--panel);
}

/* =============================================================
   CONTACT page
   ============================================================= */
body.cosmic .contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { body.cosmic .contact-grid { grid-template-columns: 1fr; } }

body.cosmic .contact-methods { display: flex; flex-direction: column; gap: 1rem; }
body.cosmic .contact-method {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
body.cosmic .contact-method:hover { border-color: var(--hair-strong); background: var(--panel-2); transform: translateY(-3px); }
body.cosmic .contact-method .ic {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid var(--hair-strong);
  background: rgba(86, 116, 220, 0.08);
  color: var(--cyan-strong);
  font-size: 1.15rem;
}
body.cosmic .contact-method h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
body.cosmic .contact-method p { font-size: 0.88rem; color: var(--text-3); margin-bottom: 0.2rem; }
body.cosmic .contact-method a { color: var(--cyan-strong); font-weight: 500; font-size: 0.96rem; }
body.cosmic .contact-method a:hover { color: var(--text); }

body.cosmic .contact-aside {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(86, 116, 220, 0.12), var(--panel) 60%);
}
body.cosmic .contact-aside h2 { font-size: 1.4rem; margin-bottom: 0.7rem; }
body.cosmic .contact-aside p { color: var(--text-2); margin-bottom: 1.4rem; }
body.cosmic .contact-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
body.cosmic .contact-steps li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--text-2); font-size: 0.95rem; }
body.cosmic .contact-steps .n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  color: var(--cyan-strong);
  font-size: 0.82rem; font-weight: 600;
  font-family: "Clash Display", sans-serif;
}

/* =============================================================
   BOOKING page — two columns: context (left) + form card (right)
   ============================================================= */
body.cosmic .booking {
  position: relative;
  padding-top: clamp(7.5rem, 14vh, 11rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
body.cosmic .booking::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 560px at 84% -10%, rgba(86, 116, 220, 0.16), transparent 60%),
    radial-gradient(820px 480px at 2% 6%, rgba(31, 58, 147, 0.18), transparent 55%);
}
body.cosmic .booking-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: start;
}
@media (max-width: 940px) { body.cosmic .booking-layout { grid-template-columns: 1fr; } }

/* left — context */
@media (min-width: 941px) { body.cosmic .booking-aside { position: sticky; top: 6.5rem; } }
body.cosmic .booking-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cyan-strong);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
body.cosmic .booking-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--glow);
}
body.cosmic .booking h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
body.cosmic .booking h1 .accent { color: var(--cyan); }
body.cosmic .booking-lead {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
}
body.cosmic .booking-points { list-style: none; margin: 1.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.95rem; }
body.cosmic .booking-points li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--text); font-size: 0.98rem; line-height: 1.45; }
body.cosmic .booking-points .ck {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(86, 116, 220, 0.16);
  border: 1px solid var(--hair-strong);
  color: var(--cyan-strong);
  font-size: 0.66rem;
}
body.cosmic .booking-trust {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--text-3);
  font-size: 0.86rem;
}
body.cosmic .booking-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
body.cosmic .booking-trust b { color: var(--text); font-weight: 600; }

/* right — form card */
body.cosmic .booking-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: 0 50px 110px -60px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}
body.cosmic .ud-booking-steps { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; }
body.cosmic .ud-booking-steps span {
  flex: 1 1 0;
  text-align: center;
  padding: 0.6rem 0.55rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
body.cosmic .ud-booking-steps span.is-active {
  color: #fff;
  border-color: var(--cyan);
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2));
}
body.cosmic .ud-booking-title { font-size: 1.4rem; margin: 0 0 0.3rem; }
body.cosmic .booking-sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 1.4rem; }
body.cosmic .booking-field-label { display: block; color: var(--text-2); font-weight: 500; font-size: 0.9rem; margin-bottom: 0.6rem; }

/* step layout */
body.cosmic .booking-step { animation: none; }
body.cosmic #step1 .booking-next { width: 100%; margin-top: 1.4rem; }
body.cosmic .booking-actions { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
body.cosmic .booking-back { flex: 0 0 auto; width: 54px; padding-left: 0; padding-right: 0; }
body.cosmic .booking-next { flex: 1 1 auto; }
body.cosmic .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
body.cosmic .booking-col-full { grid-column: 1 / -1; }
@media (max-width: 520px) { body.cosmic .booking-grid { grid-template-columns: 1fr; } }

/* time slots — clean dark chips (the white-bg bug is fixed: bg is now set) */
body.cosmic .ud-time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.7rem;
  margin-top: 0.4rem;
}
body.cosmic .ud-time-slot { position: relative; margin: 0; }
body.cosmic .ud-time-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.cosmic .ud-time-slot span {
  display: block;
  text-align: center;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-weight: 500;
  font-feature-settings: "tnum";
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
body.cosmic .ud-time-slot span:hover { border-color: var(--cyan); background: var(--panel-2); transform: translateY(-1px); }
body.cosmic .ud-time-slot input:checked + span {
  border-color: var(--cyan);
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2));
  color: #fff;
  box-shadow: 0 0 0 1px var(--cyan) inset, 0 10px 24px -12px var(--glow);
}
body.cosmic .ud-time-slot input:focus-visible + span { outline: 2px solid var(--cyan-strong); outline-offset: 2px; }

/* loading + success */
body.cosmic .loading-box { padding: 1.75rem 0; }
body.cosmic .loading-box i { color: var(--cyan-strong); }
body.cosmic .loading-box h5 { color: var(--text); }
body.cosmic .success-box { text-align: center; padding: 1rem 0 0.5rem; }
body.cosmic .success-ic {
  width: 66px; height: 66px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.7rem;
  background: rgba(86, 116, 220, 0.16);
  border: 1px solid var(--hair-strong);
  color: var(--cyan-strong);
  box-shadow: 0 0 0 8px rgba(86, 116, 220, 0.06), 0 0 30px -6px var(--glow);
}
body.cosmic .success-box h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
body.cosmic .success-box p { color: var(--text-2); max-width: 38ch; margin: 0 auto; }

/* dark datepicker (overrides bootstrap-datepicker + custom.css + the #datepicker ID rule) */
body.cosmic #datepicker {
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 0.75rem;
}
body.cosmic .datepicker {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text);
}
body.cosmic .datepicker table { width: 100%; }
body.cosmic .datepicker thead th { color: var(--text-2); font-weight: 600; }
body.cosmic .datepicker thead th.dow { color: var(--text-3); font-size: 0.8rem; }
body.cosmic .datepicker .datepicker-switch,
body.cosmic .datepicker .prev,
body.cosmic .datepicker .next { color: var(--text); border-radius: 8px; }
body.cosmic .datepicker .datepicker-switch:hover,
body.cosmic .datepicker .prev:hover,
body.cosmic .datepicker .next:hover,
body.cosmic .datepicker thead th:hover { background: var(--panel-2) !important; color: var(--cyan-strong); }
body.cosmic .datepicker table tr td.day {
  color: var(--text);
  border-radius: 9px !important;
  transition: background 0.2s var(--ease);
}
body.cosmic .datepicker table tr td.day:hover { background: var(--panel-2) !important; color: var(--text) !important; }
body.cosmic .datepicker table tr td.old,
body.cosmic .datepicker table tr td.new { color: var(--text-3); opacity: 0.45; }
body.cosmic .datepicker table tr td.disabled,
body.cosmic .datepicker table tr td.disabled:hover {
  color: var(--text-3) !important;
  opacity: 0.32;
  background: transparent !important;
  cursor: not-allowed;
}
body.cosmic .datepicker table tr td.today,
body.cosmic .datepicker table tr td.today:hover {
  background: var(--panel-2) !important;
  color: var(--cyan-strong) !important;
  border: 1px solid var(--hair-strong);
}
body.cosmic .datepicker table tr td.active.day,
body.cosmic .datepicker table tr td.active.day:hover,
body.cosmic .datepicker table tr td.active:active {
  background: linear-gradient(135deg, var(--btn-1), var(--btn-2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -10px var(--glow);
}

@media (max-width: 575px) {
  body.cosmic .ud-booking-steps span { font-size: 0.78rem; padding: 0.5rem 0.4rem; }
}