/* =====================================================
   PROSPERO WEBWORKS — style.css
   Part 1: Foundation + Loader + Header
   ===================================================== */

/* ---------- Design tokens ---------- */
:root {
  --bg: #05070d;
  --bg-2: #0a0f1c;
  --surface: rgba(12, 18, 34, 0.72);
  --border: rgba(120, 160, 255, 0.14);
  --text: #eaf2ff;
  --muted: #8a9bb8;

  --a1: #00e5ff;   /* electric cyan */
  --a2: #7c4dff;   /* neon violet  */
  --a3: #ff2bd6;   /* hot magenta  */
  --grad: linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3));

  --header-h: 76px;
  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tech: "Orbitron", "Space Grotesk", system-ui, sans-serif;
}

/* Accent themes (switched from the dropdown) */
:root[data-accent="aurora"] { --a1: #00ffa3; --a2: #00b3ff; --a3: #7c4dff; }
:root[data-accent="plasma"] { --a1: #ff9d00; --a2: #ff2bd6; --a3: #7c4dff; }
html, body { overflow-x: hidden; max-width: 100%; }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 10px); scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading, body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--a2); color: #fff; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 10001;
  background: var(--a1); color: #001018; padding: 10px 16px; border-radius: 8px; font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 6px; }

/* Reduce motion (system OR user toggle) */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Background layers ---------- */
#bgCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.bg-glow { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(110px); opacity: .28; }
.bg-glow-1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: var(--a2); }
.bg-glow-2 { width: 40vmax; height: 40vmax; right: -14vmax; top: 22vh; background: var(--a1); opacity: .16; }

main { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1002;
  background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 14px var(--a1);
}

/* =====================================================
   LOADER  (Uiverse moon + rocket by anand_4957)
   ===================================================== */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #0d1836 0%, #060a17 55%, #03050b 100%);
  transition: opacity .45s var(--ease), visibility .45s, transform .45s var(--ease);
}
.loader.done { opacity: 0; visibility: hidden; transform: scale(1.06); pointer-events: none; }

.loader-stars {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 28% 78%, #9fdcff, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 63% 66%, #ffd6fb, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 30%, #fff, transparent 60%),
    radial-gradient(1px 1px at 90% 82%, #9fdcff, transparent 60%),
    radial-gradient(1px 1px at 6% 60%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 90%, #fff, transparent 60%),
    radial-gradient(1px 1px at 86% 8%, #fff, transparent 60%);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

.loader .container {
  display: flex;
  height: 370px;
  width: 370px;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
}

.loader .moon {
  background-color: #39beff;
  height: 170px;
  width: 170px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  left: 0; right: 0; top: 0; bottom: 0;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(57, 190, 255, .45);
}

.loader .crater {
  background-color: #31b4ff;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: relative;
}
.loader .crater:before {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: -5px 0 0 2px #1ca4f9;
  top: 2px;
  left: 7px;
}
.loader .crater1 { top: 27px; left: 90px; transform: scale(0.9); }
.loader .crater2 { bottom: 15px; left: 61px; transform: scale(0.6); }
.loader .crater3 { left: 15px; transform: scale(0.75); }
.loader .crater4 { left: 107px; top: 32px; transform: scale(1.18); }
.loader .crater5 { left: 33px; bottom: 4px; transform: scale(0.65); }

.loader .shadow {
  height: 190px;
  width: 190px;
  box-shadow: 21px 0 0 5px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  position: relative;
  bottom: 157.5px;
  right: 46px;
}

.loader .eye {
  background-color: #161616;
  height: 12px;
  width: 12px;
  position: relative;
  border-radius: 50%;
}
.loader .eye-l { bottom: 255px; left: 59px; }
.loader .eye-r { bottom: 267px; left: 101px; }

.loader .mouth {
  height: 5px;
  width: 10px;
  border: 3px solid #161616;
  position: relative;
  bottom: 262px;
  left: 79px;
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.loader .blush {
  background-color: #1ca4f9;
  height: 7.5px;
  width: 7.5px;
  position: relative;
  border-radius: 50%;
}
.loader .blush1 { bottom: 273px; left: 50px; }
.loader .blush2 { bottom: 281px; left: 115px; }

.loader .orbit {
  height: 280px;
  width: 280px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  left: 0; right: 0; top: 0; bottom: 0;
  animation: spin 10s infinite linear;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.loader .rocket {
  background-color: #fafcf7;
  height: 50px;
  width: 25px;
  border-radius: 50% 50% 0 0;
  position: relative;
  left: -11px;
  top: 112px;
  overflow: visible;
}
.loader .rocket:before {
  content: "";
  position: absolute;
  background-color: #39beff;
  height: 20px;
  width: 55px;
  border-radius: 50% 50% 0 0;
  z-index: -1;
  right: -15px;
  bottom: 0;
}
.loader .rocket:after {
  content: "";
  position: absolute;
  background-color: #39beff;
  height: 4px;
  width: 15px;
  border-radius: 0 0 2px 2px;
  bottom: -4px;
  left: 4.3px;
}
.loader .rocket .fire {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 30px;
  background: radial-gradient(ellipse at center, #ffec85 0%, #ffae34 40%, #ec760c 70%, #cd4606 90%, rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  animation: flame 0.3s infinite alternate;
  z-index: -1;
}
@keyframes flame {
  0%   { transform: translateX(-50%) scaleY(1);   opacity: 0.9; }
  100% { transform: translateX(-50%) scaleY(1.4); opacity: 0.5; }
}
.loader .rocket .gas {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(200, 200, 200, 0.6);
  border-radius: 50%;
  animation: gas 1.5s infinite ease-out;
}
.loader .rocket .gas:nth-child(3) { animation-delay: 0.3s; left: 40%; }
.loader .rocket .gas:nth-child(4) { animation-delay: 0.6s; left: 60%; }
@keyframes gas {
  0%   { transform: translateX(-50%) scale(0.5); opacity: 0.8; }
  100% { transform: translateX(-50%) translateY(40px) scale(1.8); opacity: 0; }
}

.loader .window {
  background-color: #151845;
  height: 10px;
  width: 10px;
  border: 2px solid #b8d2ec;
  border-radius: 50%;
  position: relative;
  top: 17px;
  left: 5px;
}

.loader .curve {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: rotate 10s linear infinite;
  fill: transparent;
}
@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader .curve text {
  letter-spacing: 20px;
  text-transform: uppercase;
  font: 1.5em "Fira Sans", sans-serif;
  fill: #95d5ff;
  filter: drop-shadow(0 2px 8px rgb(21, 117, 207));
}

/* Loader progress info */
.loader-info { position: relative; margin-top: 6px; text-align: center; width: min(320px, 78vw); }
.loader-brand {
  font-family: var(--font-tech); font-weight: 800; letter-spacing: .28em; font-size: .82rem; color: #dff3ff;
}
.loader-brand span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader-bar {
  margin: 14px 0 8px; height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.loader-bar i {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: var(--grad); box-shadow: 0 0 14px var(--a1);
  transition: width .25s linear;
}
.loader-percent { font-family: var(--font-tech); font-size: .75rem; color: var(--muted); letter-spacing: .15em; }

/* Scale the loader scene on smaller screens (keeps original pixel-perfect layout) */
@media (max-width: 420px), (max-height: 640px) {
  .loader .container { transform: scale(.8); margin: -37px 0; }
}
@media (max-width: 340px), (max-height: 520px) {
  .loader .container { transform: scale(.62); margin: -70px 0; }
}

/* =====================================================
   HEADER
   ===================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  transform: translateY(-100%);
  opacity: 0;
  transition: height .35s var(--ease), background .35s, box-shadow .35s, transform .7s var(--ease), opacity .7s;
}
body:not(.is-loading) .header { transform: translateY(0); opacity: 1; }

.header::before {          /* glass layer */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 7, 13, .78), rgba(5, 7, 13, .35));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
.header.scrolled { --header-h: 64px; }
.header.scrolled::before {
  background: rgba(6, 10, 20, .88);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 1px 0 rgba(0, 229, 255, .08);
}
.header.scrolled::after {   /* glowing bottom line */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--a1), var(--a2), var(--a3), transparent);
  opacity: .7;
}

.header-inner {
  height: 100%;
  max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 0 rgba(0, 229, 255, .5);
  animation: logoPulse 3.5s ease-in-out infinite;
  transition: transform .4s var(--ease);
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.08); }
.brand-logo img { width: 34px; height: 34px; object-fit: contain; }
@keyframes logoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 255, .35); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-family: var(--font-tech); font-weight: 800; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
}
.brand-text em {
  font-style: normal; font-size: .68rem; letter-spacing: .5em; text-transform: uppercase; font-weight: 600;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Nav (desktop) ---------- */
.nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  font-size: .95rem; font-weight: 500; color: #b9c8e0;
  transition: color .25s, background .25s;
}
.nav-num {
  font-family: var(--font-tech); font-size: .58rem; color: var(--a1); opacity: 0;
  transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
  box-shadow: 0 0 10px var(--a1);
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.nav-link:hover .nav-num, .nav-link.active .nav-num { opacity: .9; transform: none; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }

.btn-cta-mobile { display: none; }

/* ---------- Buttons ---------- */
.btn-cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px; font-weight: 600; font-size: .92rem; color: #02060f;
  background: var(--grad); background-size: 200% 200%;
  overflow: hidden; isolation: isolate;
  box-shadow: 0 8px 26px -8px var(--a2), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: transform .3s var(--ease), box-shadow .3s, background-position .6s;
}
.btn-cta::before {           /* shine sweep */
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn-cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 14px 34px -8px var(--a1); }
.btn-cta:hover::before { left: 130%; }
.btn-cta:active { transform: translateY(0) scale(.97); }
.btn-cta svg { transition: transform .3s var(--ease); }
.btn-cta:hover svg { transform: translateX(4px); }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dd-toggle {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: #cfe0ff;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.dd-toggle:hover { background: rgba(255, 255, 255, .08); border-color: rgba(0, 229, 255, .45); color: var(--a1); }
.dd-toggle[aria-expanded="true"] {
  border-color: var(--a1); color: var(--a1); background: rgba(0, 229, 255, .08);
  box-shadow: 0 0 22px -4px var(--a1);
}
.dd-toggle svg { transition: transform .4s var(--ease); }
.dd-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.dd-menu {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 1100;
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top right;
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(47, 129, 247, .25), 0 0 40px -12px var(--a2);
}
.dd-menu[hidden] { display: flex; }     /* keep animating; visibility handles hiding */
.dropdown.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu::before {                      /* arrow */
  content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px;
  background: #0D1117; transform: rotate(45deg);
  border-left: 1px solid rgba(47, 129, 247, .25); border-top: 1px solid rgba(47, 129, 247, .25);
}

/* --- Uiverse dropdown by Yaroslav205728 (adapted) --- */
.input {
  display: flex;
  flex-direction: column;
  width: 236px;
  background-color: #0D1117;
  justify-content: center;
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
  gap: 2px;
}
.value {
  background-color: transparent;
  border: none;
  padding: 10px;
  color: white;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: .9rem;
  text-align: left;
}
.value:not(:active):hover,
.value:focus {
  background-color: #21262C;
}
.value:focus,
.value:active {
  background-color: #1A1F24;
  outline: none;
}
.value::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  width: 5px;
  height: 80%;
  background-color: #2F81F7;
  border-radius: 5px;
  opacity: 0;
}
.value:focus::before,
.value:active::before {
  opacity: 1;
}
.value svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.value span { flex: 1; }
.value b { color: var(--a1); font-weight: 600; }
.value:hover svg path { fill: var(--a1); }

/* ---------- Hamburger ---------- */
.hamburger {
  display: none; position: relative; width: 44px; height: 44px; cursor: pointer;
  border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  transition: border-color .25s, background .25s;
}
.hamburger span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #e6f1ff;
  transition: transform .4s var(--ease), opacity .25s, top .4s var(--ease), background .3s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; width: 60%; left: 12px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger:hover span:nth-child(2) { width: calc(100% - 24px); }
.hamburger[aria-expanded="true"] { border-color: var(--a1); background: rgba(0, 229, 255, .08); }
.hamburger[aria-expanded="true"] span { background: var(--a1); }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 998; background: rgba(2, 4, 10, .6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.nav-overlay.show { opacity: 1; visibility: visible; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2000;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: 12px; font-size: .9rem; max-width: calc(100vw - 32px);
  background: rgba(10, 16, 32, .94); border: 1px solid var(--a1); color: #eaf6ff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 26px -6px var(--a1);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .nav-link { padding: 10px 10px; font-size: .9rem; }
  .btn-cta-desktop span { display: none; }
  .btn-cta-desktop { padding: 11px 13px; }
}

@media (max-width: 960px) {
  .hamburger { display: block; }
  .btn-cta-desktop { display: none; }

  .nav {
    position: fixed; z-index: 999;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0;
    height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 22px;
    padding: 22px clamp(18px, 5vw, 32px) calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(circle at 85% 0%, rgba(124, 77, 255, .22), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(0, 229, 255, .16), transparent 55%),
      rgba(5, 8, 16, .97);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    transform: translateY(-16px); opacity: 0; visibility: hidden;
    transition: transform .5s var(--ease), opacity .4s, visibility .5s;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 6px; }
  .nav-list li {
    opacity: 0; transform: translateX(-24px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.open .nav-list li { opacity: 1; transform: none; }
  .nav.open .nav-list li:nth-child(1) { transition-delay: .06s; }
  .nav.open .nav-list li:nth-child(2) { transition-delay: .11s; }
  .nav.open .nav-list li:nth-child(3) { transition-delay: .16s; }
  .nav.open .nav-list li:nth-child(4) { transition-delay: .21s; }
  .nav.open .nav-list li:nth-child(5) { transition-delay: .26s; }
  .nav.open .nav-list li:nth-child(6) { transition-delay: .31s; }
  .nav.open .nav-list li:nth-child(7) { transition-delay: .36s; }

  .nav-link {
    width: 100%; padding: 16px 18px; font-size: 1.15rem; font-weight: 600; color: #e8f1ff;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 14px;
  }
  .nav-num { opacity: .9; transform: none; font-size: .7rem; min-width: 22px; }
  .nav-link::after { left: 18px; right: 18px; bottom: 8px; }
  .nav-link.active { border-color: rgba(0, 229, 255, .5); background: rgba(0, 229, 255, .07); }

  .btn-cta-mobile {
    display: inline-flex; justify-content: center; padding: 16px 20px; font-size: 1.05rem;
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s, box-shadow .3s;
  }
  .nav.open .btn-cta-mobile { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  :root { --header-h: 68px; }
  .header.scrolled { --header-h: 60px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-logo img { width: 30px; height: 30px; }
  .brand-text strong { font-size: .92rem; letter-spacing: .1em; }
  .brand-text em { font-size: .6rem; letter-spacing: .38em; }
  .header-actions { gap: 8px; }
  .dd-toggle, .hamburger { width: 42px; height: 42px; }
  /* dropdown becomes a centred-safe sheet on tiny screens */
  .dd-menu { right: -54px; }
  .dd-menu::before { right: 72px; }
  .input { width: min(236px, calc(100vw - 32px)); }
}

@media (max-width: 340px) {
  .brand-text em { display: none; }
  .dd-menu { right: -50px; }
}

@media (hover: none) {
  .nav-link:hover { background: transparent; }
}

/* ========== HERO ========== */
#earthCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero{position:relative;min-height:100vh;min-height:100svh;--d:min(76vw,34svh)}
.hero-pin{position:relative;min-height:100svh;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3svh,28px);padding:calc(var(--header-h) + 16px) clamp(16px,4vw,56px) 60px}
.rv{opacity:0;transition:opacity .45s var(--ease)}
body:not(.is-loading) .rv{opacity:1;transition-delay:calc(var(--i,0)*.08s + .08s)}

.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(0,229,255,.07),transparent);animation:scan 7s linear infinite}
@keyframes scan{to{transform:translateY(120vh)}}
.chip{position:absolute;font:600 .72rem var(--font-tech);letter-spacing:.1em;color:var(--a1);opacity:.28;padding:5px 10px;border:1px solid var(--border);border-radius:8px;animation:drift 9s ease-in-out infinite alternate}
.c1{left:4%;top:24%}.c2{left:46%;top:14%;animation-delay:-2s}.c3{left:8%;bottom:20%;animation-delay:-4s}.c4{right:6%;top:20%;animation-delay:-1s}.c5{left:42%;bottom:14%;animation-delay:-6s}
@keyframes drift{to{transform:translateY(-22px) rotate(2deg)}}

.hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative}
.hero-content{display:contents}
.hero-badge{order:1;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;font:600 clamp(.62rem,2.7vw,.78rem)/1 var(--font-tech);letter-spacing:.12em;text-transform:uppercase;color:var(--a1);background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.3);box-shadow:0 0 30px -8px var(--a1)}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--a1);box-shadow:0 0 10px var(--a1);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
.hero-title{order:2;margin:0;display:flex;flex-direction:column;font-family:var(--font-tech);font-weight:900;line-height:1;font-size:clamp(2.3rem,12.4vw,4.6rem)}
.hero-title span{-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.t1{background-image:linear-gradient(90deg,#f3eeff,var(--a1));filter:drop-shadow(0 0 22px rgba(0,229,255,.25))}
.t2{background-image:linear-gradient(90deg,var(--a2),var(--a3));filter:drop-shadow(0 0 26px rgba(124,77,255,.4))}
.hero-tag{order:3;margin:0;min-height:2.7em;font:600 clamp(1.02rem,4.4vw,1.55rem)/1.3 "Exo 2",var(--font-body);color:var(--a1)}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:3px;vertical-align:-.18em;background:var(--a1);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-cta{order:5;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-cta .btn-cta,.btn-ghost{padding:14px 26px;font:700 .85rem var(--font-tech);letter-spacing:.1em;text-transform:uppercase}
.btn-ghost{display:inline-flex;align-items:center;border-radius:12px;color:var(--a1);border:1px solid rgba(0,229,255,.4);background:rgba(0,229,255,.05);transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(0,229,255,.12);box-shadow:0 12px 30px -10px var(--a1)}

.hero-visual{order:4;position:relative;width:100%;height:calc(var(--d) + 20px)}
.earth-anchor{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%}
.earth-anchor.fallback{overflow:visible;background:radial-gradient(circle at 34% 28%,#88efff 0%,#247fca 18%,#123e83 42%,#07152f 68%,#020711 76%);box-shadow:0 0 24px rgba(58,187,255,.55),0 0 74px rgba(0,140,255,.28),inset -18px -10px 26px rgba(0,0,0,.65)}
.earth-anchor.fallback::before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse at 31% 38%,rgba(101,242,210,.85) 0 5%,transparent 6%),radial-gradient(ellipse at 59% 56%,rgba(117,225,192,.78) 0 8%,transparent 9%),radial-gradient(ellipse at 72% 31%,rgba(94,221,190,.65) 0 5%,transparent 6%),repeating-linear-gradient(90deg,transparent 0 17%,rgba(145,226,255,.10) 17.2% 17.5%,transparent 17.8% 34%);opacity:.65;mask-image:radial-gradient(circle,#000 54%,transparent 72%)}
.earth-hud{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:8px;font:600 .62rem var(--font-tech);letter-spacing:.18em;color:var(--muted)}
.earth-hud i{width:6px;height:6px;border-radius:50%;background:#ffc46b;box-shadow:0 0 10px #ffb03a;animation:pulse 1.4s infinite}
.earth-hud b{color:#ffd28a}

.robot{position:absolute;right:2%;bottom:14px;z-index:2;height:calc(var(--d)*.78);aspect-ratio:300/420;filter:drop-shadow(0 18px 34px rgba(0,0,0,.65));pointer-events:none}
.robot svg{width:100%;height:100%;overflow:visible}
.r-fl{animation:float 4s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.r-hd{animation:hbob 5s ease-in-out infinite alternate;transform-origin:150px 136px}
@keyframes hbob{from{transform:rotate(-2deg)}to{transform:rotate(2deg) translateY(-2px)}}
#rHead{transform-origin:150px 136px;transition:transform .25s}
#rEyes{transition:transform .2s}
.r-eye{transform-origin:center;transform-box:fill-box;animation:eyes 5s infinite}
@keyframes eyes{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.r-scan{animation:vscan 2.6s ease-in-out infinite alternate}
@keyframes vscan{to{transform:translateX(82px)}}
.r-tip{animation:pulse 1.2s infinite}
.r-spin{transform-origin:150px 204px;animation:spin 6s linear infinite}
.r-core{opacity:calc(.55 + var(--lit,0)*.45)}
.r-arm.l{transform-origin:72px 176px;animation:swing 3.2s ease-in-out infinite alternate}
.r-arm.r{transform-origin:228px 176px;animation:wave 1.3s ease-in-out infinite alternate}
@keyframes swing{to{transform:rotate(5deg)}}
@keyframes wave{from{transform:rotate(-125deg)}to{transform:rotate(-155deg)}}
.r-fire{transform-origin:150px 336px;animation:flame .18s infinite alternate}
@keyframes flame{to{transform:scaleY(1.35);opacity:.7}}
.r-ring{transform-origin:150px 396px;animation:ring 2.4s ease-out infinite}
.r-ring.r2{animation-delay:1.2s}
@keyframes ring{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}

.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;position:relative;text-align:center;max-width:720px;margin:6px auto 0;width:100%}
.hero-stats strong{display:block;font:800 clamp(1.7rem,7.5vw,2.6rem)/1.1 var(--font-tech);font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats sup{font-size:.45em;margin-left:2px;vertical-align:.9em;color:var(--a2);-webkit-text-fill-color:var(--a2)}
.hero-stats li>span{display:block;margin-top:4px;font:500 .68rem/1.3 var(--font-tech);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:8px;white-space:nowrap;font:500 .58rem var(--font-tech);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{width:20px;height:32px;border:1.5px solid var(--muted);border-radius:12px;position:relative}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--a1);animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

@media (min-width:640px){.hero-stats{grid-template-columns:repeat(4,1fr)}.hero-stats li+li::before{content:"";position:absolute;top:10%;height:80%;width:1px;margin-left:-5px;background:linear-gradient(transparent,var(--border),transparent)}}
@media (min-width:992px){
  .hero{--d:min(44vw,62svh);height:125vh;height:125svh}
  .hero-pin{position:sticky;top:0;height:100svh;min-height:0;padding-bottom:70px}
  .scroll-cue{display:flex}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;text-align:left;gap:20px}
  .hero-content{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2.4svh,22px)}
  .hero-title{font-size:clamp(3.2rem,6.2vw,6.8rem)}
  .hero-tag{font-size:clamp(1.2rem,1.8vw,1.75rem)}
  .hero-cta{justify-content:flex-start}
  .hero-stats{margin:0;max-width:760px;text-align:left}
  .hero-stats li>span{margin-top:2px}
}
@media (max-height:700px) and (min-width:992px){.hero-title{font-size:clamp(2.8rem,5.2vw,5rem)}.hero-stats strong{font-size:1.9rem}}
@media (max-width:640px){.chip.c2,.chip.c4,.chip.c5{display:none}.robot{right:0}}


/* =====================================================
   APPEND: Services (lamp) + Pricing (all cards) + Portfolio (desk switcher)
   ===================================================== */

/* ---------- shared ---------- */
.sx-wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:clamp(70px,11vw,120px) clamp(16px,4vw,48px)}
.sx-head{text-align:center;margin-bottom:clamp(30px,6vw,60px)}
.sx-kicker{display:inline-block;padding:6px 14px;border-radius:99px;font:700 .72rem var(--font-tech);letter-spacing:.14em;color:var(--a1);border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.06)}
.sx-head h2{margin:14px 0 8px;font:900 clamp(1.9rem,6vw,3.5rem)/1.1 var(--font-tech);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.sx-head p{margin:0;color:var(--muted);font-size:clamp(.95rem,2.4vw,1.15rem)}
.sx{opacity:0;translate:0 34px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.sx.in{opacity:1;translate:0 0}

/* ---------- AR/holographic backdrop (each section gets one) ---------- */
.sx-holo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:600px}
.sx-grid-floor{position:absolute;left:-20%;right:-20%;bottom:-10%;height:65%;
  background-image:linear-gradient(rgba(0,229,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.16) 1px,transparent 1px);
  background-size:44px 44px;transform:rotateX(72deg);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 92%)}
.sx-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,229,255,.14);opacity:.5}
.sx-ring.r1{width:60vmax;height:60vmax;left:50%;top:6%;transform:translateX(-50%);animation:holoSpin 60s linear infinite}
.sx-ring.r2{width:40vmax;height:40vmax;left:50%;top:14%;transform:translateX(-50%);border-color:rgba(124,77,255,.16);animation:holoSpin 44s linear infinite reverse}
@keyframes holoSpin{to{transform:translateX(-50%) rotate(360deg)}}

/* card base: 3D tilt + spotlight + holographic sheen */
.sx-card{position:relative;overflow:hidden;border-radius:20px;padding:24px;isolation:isolate;
  background:linear-gradient(160deg,rgba(18,26,50,.88),rgba(8,12,26,.92));border:1px solid var(--border);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ease),border-color .3s,box-shadow .4s,opacity .8s var(--ease),translate .8s var(--ease),filter .8s var(--ease)}
.sx-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(0,229,255,.18),transparent 62%)}
.sx-card::after{content:"";position:absolute;left:-60%;top:0;width:40%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.sx-card:hover{border-color:rgba(0,229,255,.55);box-shadow:0 26px 60px -22px var(--a2),0 0 40px -14px var(--a1)}
.sx-card:hover::before{opacity:1}
.sx-card:hover::after{left:130%}
.sx-card:active{transform:perspective(900px) scale(.975)}
.sx-card h3{margin:14px 0 4px;font:800 1.12rem/1.25 var(--font-tech);color:#fff;position:relative;z-index:2}
.sx-card p{margin:10px 0 18px;color:#a9b8d2;font-size:.95rem;line-height:1.55;position:relative;z-index:2}
.sx-card small{display:block;color:var(--a1);font:600 .74rem var(--font-tech);letter-spacing:.06em;position:relative;z-index:2}
.sx-ico{position:relative;z-index:2;display:grid;place-items:center;width:60px;height:60px;font-size:1.9rem;border-radius:16px;
  background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(124,77,255,.2));border:1px solid var(--border);
  transition:transform .5s var(--ease),box-shadow .4s}
.sx-card:hover .sx-ico{transform:rotate(-8deg) scale(1.15);box-shadow:0 0 30px -4px var(--a1)}
.sx-chip{position:absolute;top:18px;right:18px;z-index:2;padding:5px 10px;border-radius:99px;font:700 .62rem var(--font-tech);letter-spacing:.06em;color:#ffd28a;background:rgba(255,176,58,.12);border:1px solid rgba(255,176,58,.4)}

.sx-btn{position:relative;z-index:2;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:12px;
  font:700 .76rem var(--font-tech);letter-spacing:.06em;cursor:pointer;color:#02060f;background:var(--grad);
  transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.sx-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px var(--a1)}
.sx-btn:active{transform:scale(.94)}
.sx-btn.ghost{color:var(--a1);background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.35)}
.sx-btn.ghost:hover{background:rgba(0,229,255,.14)}
.rip{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.75);pointer-events:none;animation:rip .6s ease-out forwards;z-index:3}
@keyframes rip{to{transform:scale(30);opacity:0}}

/* =====================================================
   SERVICES: the desk lamp
   ===================================================== */
.svc{position:relative;overflow:hidden;--sl:0;background:linear-gradient(180deg,transparent,rgba(2,4,10,.55) 18%,rgba(2,4,10,.55) 88%,transparent)}
.svc .sx-wrap{padding-top:clamp(200px,28vw,250px)}
.svc-lamp{position:absolute;z-index:1;left:50%;top:0;width:min(190px,42vw);transform:translateX(-50%);pointer-events:none}
.svc-lamp svg{display:block;width:100%;overflow:visible}
.svc-bulb{fill:#fff6d0;opacity:calc(.2 + var(--sl)*.8);filter:drop-shadow(0 0 calc(4px + var(--sl)*26px) var(--a1))}
.svc.on .svc-bulb{animation:flick .9s steps(1) 1}
@keyframes flick{0%{opacity:.2}15%{opacity:1}30%{opacity:.3}45%{opacity:1}60%{opacity:.5}100%{opacity:1}}
.svc-cone{position:absolute;left:50%;top:92%;width:min(1200px,96vw);height:min(820px,92vh);transform:translateX(-50%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--a1),transparent 88%);opacity:calc(var(--sl)*.2)}
.svc-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.svc-card{opacity:.2;filter:brightness(.45) saturate(.4);translate:0 44px}
.svc-card.lit{opacity:1;filter:none;translate:0 0}

/* =====================================================
   PRICING: 3D Holographic, Deep Interactive Cards
   ===================================================== */
:root {
  --perspective: 1200px;
  --transition-smooth: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-click: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --holo-grad: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.15) 40%, rgba(0,229,255,0.2) 50%, rgba(124,77,255,0.15) 60%, transparent 80%);
}

/* Container Perspective Setup */
.pr {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,77,255,.14), transparent 60%);
  perspective: var(--perspective);
}

.pr-group {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(30px, 5vw, 50px);
}

.pr-group h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 800 1.1rem var(--font-tech);
  color: #fff;
}

.pr-group h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 30px; /* Increased gap slightly for 3D clearance */
  align-items: stretch;
  transform-style: preserve-3d;
}

/* =====================================================
   THE CORE 3D CARD
   ===================================================== */
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 20px;
  background: rgba(8, 12, 28, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  
  /* 3D and Animation Setup */
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  transition: var(--transition-smooth);
  cursor: pointer;
}

/* Pseudo-layer for the 3D Holographic Foil Effect */
.pr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--holo-grad);
  background-size: 300% 300%;
  background-position: 0% 0%;
  opacity: 0;
  mix-blend-mode: color-dodge;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Deep Ambient Glow Shadow behind card */
.pr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 50px -20px transparent;
  z-index: -1;
  transition: var(--transition-smooth);
}

/* =====================================================
   INTERACTION STATES (Hover & Click)
   ===================================================== */

/* Premium Smooth Hover */
@media (hover: hover) {
  .pr-card:hover {
    background: rgba(11, 18, 38, 0.8);
    border-color: rgba(0, 229, 255, 0.2);
    /* Tilts slightly up and pulls toward the user */
    transform: translate3d(0, -10px, 30px) rotateX(4deg);
  }

  /* Activate Foil & Shift its position on hover */
  .pr-card:hover::before {
    opacity: 1;
    animation: holoShine 3s ease infinite alternate;
  }

  .pr-card:hover::after {
    box-shadow: 0 45px 70px -10px rgba(0, 0, 0, 0.9), 0 0 40px -10px rgba(124, 77, 255, 0.2);
  }
}

/* Tactile Responsive Click Response */
.pr-card:active {
  transform: translate3d(0, -2px, 5px) rotateX(1deg) scale(0.97);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.8);
  transition: var(--transition-click);
}

/* =====================================================
   HOT CARD (FEATURED PLAN) VARIANT
   ===================================================== */
.pr-card.hot {
  background: rgba(11, 18, 38, 0.8);
  border: 1px solid transparent;
  box-shadow: 0 0 40px -15px var(--a2);
}

/* Advanced Animated Border for .hot using mask */
.pr-card.hot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--a1), var(--a2), var(--a3), var(--a1));
  background-size: 300% 300%;
  animation: bdr 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) {
  .pr-card.hot:hover {
    box-shadow: 0 45px 70px -10px rgba(0, 0, 0, 0.9), 0 0 50px -5px var(--a2);
  }
}

/* =====================================================
   INNER CARD ELEMENTS (Layered 3D Pop)
   ===================================================== */
.pr-badge {
  position: relative;
  z-index: 6;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 99px;
  font: 700 .65rem var(--font-tech);
  letter-spacing: .08em;
  color: var(--a1);
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.25);
  transform: translateZ(20px); /* Pops outward */
  transition: var(--transition-smooth);
}

.hot .pr-badge {
  color: #02060f;
  background: var(--grad);
  border-color: transparent;
}

.pr-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  transform: translateZ(25px);
  transition: var(--transition-smooth);
}

.pr-top .sx-ico {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5);
}

.pr-top h4 {
  margin: 0;
  font: 800 1.1rem var(--font-tech);
  color: #fff;
}

.pr-price {
  position: relative;
  z-index: 2;
  margin: 20px 0 6px;
  font: 900 clamp(2rem, 4.8vw, 2.6rem)/1 var(--font-tech);
  background: linear-gradient(90deg, #fff, var(--a1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateZ(35px); /* Highest Z-index pop */
  transition: var(--transition-smooth);
}

.pr-list {
  position: relative;
  z-index: 2;
  flex: 1;
  margin: 16px 0 26px;
  display: grid;
  gap: 10px;
  transform: translateZ(15px);
  transition: var(--transition-smooth);
}

.pr-list li {
  display: flex;
  gap: 10px;
  font-size: .92rem;
  color: #cbd8ee;
  align-items: center;
}

.pr-list li b {
  color: #5dffb0;
  font-weight: 700;
}

.pr-list li.warn {
  color: #ffd28a;
}

.pr-list li.warn b {
  color: #ffb03a;
}

.pr-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  transform: translateZ(20px);
  transition: var(--transition-smooth);
}

/* ---------- Elevated Services cards ---------- */
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);perspective:1200px}
.svc-card{--svc-accent:var(--a1);--svc-accent-rgb:0,229,255;min-height:320px;padding:24px;display:flex;flex-direction:column;transform-style:preserve-3d;border-color:rgba(var(--svc-accent-rgb),.24);background:linear-gradient(150deg,rgba(19,29,55,.96),rgba(7,11,25,.98) 68%);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px -34px rgba(var(--svc-accent-rgb),.8)}
.svc-card--2{--svc-accent:#ffb84d;--svc-accent-rgb:255,184,77}
.svc-card--3{--svc-accent:#55e7bd;--svc-accent-rgb:85,231,189}
.svc-card--4{--svc-accent:#ff6dc8;--svc-accent-rgb:255,109,200}
.svc-card--5{--svc-accent:#a98bff;--svc-accent-rgb:169,139,255}
.svc-card--6{--svc-accent:#79aaff;--svc-accent-rgb:121,170,255}
.svc-card::before{background:radial-gradient(240px circle at var(--mx,85%) var(--my,10%),rgba(var(--svc-accent-rgb),.2),transparent 68%),linear-gradient(145deg,rgba(var(--svc-accent-rgb),.08),transparent 48%);opacity:.82}
.svc-card.sx-card:hover::before{background:radial-gradient(240px circle at var(--mx,85%) var(--my,10%),rgba(var(--svc-accent-rgb),.24),transparent 68%),linear-gradient(145deg,rgba(var(--svc-accent-rgb),.1),transparent 48%)}
.svc-card::after{background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent)}
.sx-card.svc-card:hover{border-color:rgba(var(--svc-accent-rgb),.7);box-shadow:inset 0 1px rgba(255,255,255,.12),0 28px 64px -30px rgba(var(--svc-accent-rgb),.68),0 0 30px -18px var(--svc-accent)}
.svc-card-top{position:relative;z-index:2;display:flex;align-items:center;min-height:64px;margin-bottom:22px}
.svc-card .sx-ico{width:58px;height:58px;border-radius:18px;border-color:rgba(var(--svc-accent-rgb),.45);background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 40%),linear-gradient(145deg,rgba(var(--svc-accent-rgb),.24),rgba(12,18,37,.9));box-shadow:inset 0 1px rgba(255,255,255,.18),0 12px 26px -12px rgba(var(--svc-accent-rgb),.9);transform:translateZ(28px)}
.svc-card:hover .sx-ico{transform:translateZ(42px) rotate(-9deg) scale(1.08);box-shadow:inset 0 1px rgba(255,255,255,.24),0 16px 32px -10px rgba(var(--svc-accent-rgb),.92)}
.svc-number{position:relative;z-index:2;margin-left:12px;color:rgba(234,242,255,.58);font:600 .62rem var(--font-tech);letter-spacing:.11em}
.svc-orbit{position:absolute;right:2px;top:-12px;width:94px;height:94px;border:1px solid rgba(var(--svc-accent-rgb),.2);border-radius:50%;transform:rotateX(66deg) rotateZ(-28deg);box-shadow:0 0 28px -14px var(--svc-accent)}
.svc-orbit::before,.svc-orbit::after{content:"";position:absolute;border:1px solid rgba(var(--svc-accent-rgb),.17);border-radius:50%;inset:11px -8px;transform:rotate(55deg)}
.svc-orbit::after{inset:21px -15px;transform:rotate(-48deg)}
.svc-orbit i{position:absolute;top:9px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--svc-accent);box-shadow:0 0 14px var(--svc-accent)}
.svc-card h3{margin:0 0 5px;font-size:clamp(1rem,1.4vw,1.2rem);transform:translateZ(18px)}
.svc-card small{color:var(--svc-accent);font-size:.66rem}
.svc-card p{max-width:34ch;margin:12px 0 22px;color:#b8c5dc;transform:translateZ(12px)}
.svc-card .sx-chip{color:#ffe1a1;background:rgba(255,184,77,.14);border-color:rgba(255,184,77,.44)}
.svc-card-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;transform:translateZ(20px)}
.svc-card .sx-btn{gap:12px;padding:10px 13px;border-color:rgba(var(--svc-accent-rgb),.42);color:var(--svc-accent);background:rgba(var(--svc-accent-rgb),.08)}
.svc-card .sx-btn span{font-size:1rem;transition:transform .25s var(--ease)}
.svc-card .sx-btn:hover span{transform:translate(2px,-2px)}
.svc-foot-note{color:rgba(234,242,255,.4);font:600 .52rem var(--font-tech);letter-spacing:.08em;text-align:right}

/* ---------- Pricing: luminous plan showroom, distinct from Services ---------- */
.pr{overflow:hidden;background:radial-gradient(ellipse at 12% 42%,rgba(0,229,255,.09),transparent 38%),radial-gradient(ellipse at 88% 58%,rgba(255,43,214,.1),transparent 40%),linear-gradient(180deg,rgba(9,13,26,.18),rgba(9,13,26,.78))}
.pr .sx-grid-floor{background-image:linear-gradient(rgba(124,77,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(124,77,255,.13) 1px,transparent 1px);background-size:52px 52px}
.pr-group{padding:22px;border:1px solid rgba(153,171,255,.12);border-radius:24px;background:linear-gradient(145deg,rgba(14,20,40,.62),rgba(8,12,25,.38));box-shadow:inset 0 1px rgba(255,255,255,.035),0 22px 70px -56px rgba(124,77,255,.7)}
.pr-group h3{gap:13px;margin-bottom:20px;font-size:clamp(.92rem,2.1vw,1.12rem)}
.pr-group h3::after{height:1px;background:linear-gradient(90deg,rgba(153,171,255,.28),transparent)}
.pr-group-index{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(0,229,255,.3);border-radius:11px;color:var(--a1);font:700 .65rem var(--font-tech);background:linear-gradient(145deg,rgba(0,229,255,.14),rgba(124,77,255,.12));box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 20px -12px var(--a1)}
.pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,2vw,22px)}
.pr-card{min-height:410px;padding:22px;border-radius:22px;border-color:rgba(165,183,255,.16);background:radial-gradient(ellipse at 82% 0%,rgba(124,77,255,.17),transparent 48%),linear-gradient(155deg,rgba(21,29,56,.96),rgba(8,12,26,.98) 70%);box-shadow:inset 0 1px rgba(255,255,255,.09),0 24px 58px -42px rgba(0,229,255,.52);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pr-card::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 60%),var(--holo-grad);background-size:auto,300% 300%;mix-blend-mode:screen;opacity:0}
.pr-card::after{box-shadow:0 25px 60px -30px rgba(0,0,0,.95),0 0 42px -22px var(--a2)}
.pr-card:hover{border-color:rgba(0,229,255,.46);box-shadow:inset 0 1px rgba(255,255,255,.12),0 34px 76px -36px rgba(0,229,255,.5),0 0 38px -24px var(--a3)}
.pr-card-topline{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.pr-card-mark{color:var(--a3);font-size:1.15rem;text-shadow:0 0 16px var(--a3);transform:translateZ(22px)}
.pr-badge{padding:6px 10px;font-size:.58rem;color:#a9eefa;background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.25)}
.hot .pr-badge{color:#07101b;background:linear-gradient(100deg,#66f0ff,#a58bff 56%,#ff83d8);box-shadow:0 6px 22px -12px var(--a1)}
.pr-top{margin-top:16px;gap:12px}
.pr-top .sx-ico{width:54px;height:54px;border-radius:17px;border-color:rgba(124,77,255,.36);background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.22),transparent 42%),linear-gradient(145deg,rgba(0,229,255,.17),rgba(124,77,255,.25) 65%,rgba(255,43,214,.12));box-shadow:inset 0 1px rgba(255,255,255,.14),0 12px 25px -14px var(--a2)}
.pr-top h4{font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.35}
.pr-price-wrap{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:22px;padding-bottom:13px;border-bottom:1px solid rgba(165,183,255,.14);transform:translateZ(34px)}
.pr-price{margin:0;background:linear-gradient(110deg,#fff 4%,#8ceeff 50%,#ff9be8 100%);background-clip:text;-webkit-background-clip:text}
.pr-price-caption{padding-bottom:4px;color:rgba(202,215,241,.46);font:600 .5rem var(--font-tech);letter-spacing:.1em;text-align:right}
.pr-feature-heading{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-top:17px;color:rgba(234,242,255,.68);font:700 .61rem var(--font-tech);letter-spacing:.1em;text-transform:uppercase}
.pr-feature-heading i{height:1px;flex:1;background:linear-gradient(90deg,rgba(165,183,255,.22),transparent)}
.pr-list{gap:12px;margin:12px 0 24px}
.pr-list li{font-size:.86rem;color:#d0d9eb}
.pr-list li b{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:6px;color:#76f4c1;background:rgba(62,226,164,.1);font-size:.68rem}
.pr-list li.warn b{color:#ffc773;background:rgba(255,176,58,.12)}
.pr-actions{margin-top:auto;gap:9px}
.pr-actions .sx-btn{min-height:42px;flex:1;padding:10px 12px;text-align:center}
.pr-actions .sx-btn.ghost{flex:0 1 auto}
.pr-card.hot{border-color:rgba(124,77,255,.42);background:radial-gradient(ellipse at 86% 0%,rgba(255,43,214,.17),transparent 46%),linear-gradient(155deg,rgba(27,25,58,.98),rgba(9,12,29,.99) 70%);box-shadow:inset 0 1px rgba(255,255,255,.11),0 26px 65px -40px rgba(124,77,255,.9)}
.pr-card.hot::after{z-index:1;inset:-1px;padding:1px;background:linear-gradient(135deg,rgba(0,229,255,.8),rgba(124,77,255,.78),rgba(255,43,214,.7),rgba(0,229,255,.8));background-size:260% 260%;animation:bdr 8s linear infinite;box-shadow:none}
.pr-group--2 .pr-card:nth-child(2){transform:perspective(1100px) translateY(-8px) translateZ(8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-color:rgba(255,43,214,.44);background:radial-gradient(ellipse at 78% 0%,rgba(255,43,214,.23),transparent 47%),linear-gradient(150deg,rgba(29,24,58,.99),rgba(9,12,28,.99) 72%)}
.pr .pr-card:hover{transform:perspective(1100px) translate3d(0,-7px,22px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pr-group--2 .pr-card:nth-child(2):hover{transform:perspective(1100px) translate3d(0,-12px,28px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pr-group--2 .pr-card:nth-child(2) .pr-top .sx-ico{background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.25),transparent 42%),linear-gradient(145deg,rgba(255,43,214,.24),rgba(124,77,255,.33) 60%,rgba(0,229,255,.16));box-shadow:inset 0 1px rgba(255,255,255,.16),0 14px 30px -12px var(--a3)}
.pr-group--3 .pr-card{min-height:370px}

@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-group{padding:18px}.pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}.pr-group--2 .pr-card:nth-child(2){transform:none}}
@media(max-width:600px){.svc .sx-wrap{padding-top:clamp(170px,48vw,220px)}.svc-grid{grid-template-columns:minmax(0,1fr);gap:15px}.svc-card{min-height:285px;padding:20px}.svc-card-top{margin-bottom:17px}.svc-orbit{right:5px;top:-8px;width:82px;height:82px}.svc-card p{max-width:40ch}.svc-foot-note{font-size:.46rem}.pr .sx-wrap{padding-left:14px;padding-right:14px}.pr-group{padding:14px;margin-bottom:18px;border-radius:19px}.pr-group h3{gap:9px}.pr-grid{grid-template-columns:minmax(0,1fr);gap:14px}.pr-card,.pr-group--3 .pr-card{min-height:0;padding:20px}.pr-top{margin-top:13px}.pr-price-wrap{margin-top:17px}.pr-list{margin-bottom:20px}.pr-actions{display:grid;grid-template-columns:1fr}.pr-actions .sx-btn,.pr-actions .sx-btn.ghost{width:100%}}
@media(hover:none){.svc-card:hover .sx-ico{transform:translateZ(28px)}.svc-card::before{opacity:.58}.pr-card::before{opacity:.22}.pr .pr-card:hover,.pr-group--2 .pr-card:nth-child(2):hover{transform:none}}
@media(prefers-reduced-motion:reduce){.svc-card::after,.pr-card.hot::after{animation:none}.svc-card,.pr-card,.svc-card .sx-ico,.sx-btn{transition:none}}

/* =====================================================
   KEYFRAMES & ANIMATIONS
   ===================================================== */
@keyframes bdr {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes holoShine {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* =====================================================
   PROSPERO WEBWORKS — sections.css
   Portfolio (3D showcase + grid) + Contact (form + character)
   Link this AFTER style.css.
   ===================================================== */

/* =====================================================
   PORTFOLIO
   ===================================================== */
.pf {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.10), transparent 62%);
}
.pf .sx-wrap { padding-top: clamp(70px,11vw,120px); }
.pf-character{position:relative;z-index:2;width:min(100%,980px);margin:0 auto clamp(34px,5vw,60px)}
.pf-character .ct-scene{min-height:clamp(230px,27vw,340px);border-color:rgba(124,77,255,.28);background:radial-gradient(circle at 30% 20%,rgba(124,77,255,.28),transparent 55%),radial-gradient(circle at 80% 80%,rgba(0,229,255,.22),transparent 55%),linear-gradient(160deg,rgba(18,25,54,.95),rgba(6,9,18,.98));box-shadow:inset 0 1px rgba(255,255,255,.08),0 28px 70px -50px var(--a2)}
.pf-character .ct-scene svg{width:min(78%,420px)}

/* ---- 3D rotating showcase (Uiverse-style ring, adapted, image-based) ---- */
.pf-ring-stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 34vw, 340px);
  margin: 0 auto clamp(40px, 7vw, 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.pf-ring-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(70vw, 640px); height: min(70vw, 640px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.12), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}
.pf-ring {
  --w: clamp(96px, 12vw, 150px);
  --h: clamp(130px, 17vw, 200px);
  --translateZ: calc((var(--w) + var(--h)) * 0.62);
  --rotateX: -13deg;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rotateX));
  animation: pfRotate 26s linear infinite;
}
html.reduce-motion .pf-ring { animation: none; transform: perspective(1000px) rotateX(var(--rotateX)) rotateY(0deg); }
@keyframes pfRotate {
  from { transform: perspective(1000px) rotateX(var(--rotateX)) rotateY(0); }
  to   { transform: perspective(1000px) rotateX(var(--rotateX)) rotateY(1turn); }
}
.pf-ring-card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(var(--pf-c, 0,229,255), .55);
  box-shadow: 0 0 26px -8px rgba(var(--pf-c, 0,229,255), .6);
  transform: rotateY(calc((360deg / var(--pf-n, 8)) * var(--pf-i, 0))) translateZ(var(--translateZ));
  background: #0a0f1c;
}
.pf-ring-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.15) contrast(1.05);
}
.pf-ring-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(var(--pf-c,0,229,255),.12) 0%, rgba(var(--pf-c,0,229,255),.4) 85%, rgba(var(--pf-c,0,229,255),.65) 100%);
  mix-blend-mode: overlay;
}

/* ---- Filter chips ---- */
.pf-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: clamp(24px, 4vw, 38px); position: relative; z-index: 2;
}
.pf-chip {
  padding: 8px 16px; border-radius: 99px; cursor: pointer;
  font: 700 .74rem var(--font-tech); letter-spacing: .06em; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.pf-chip:hover { color: #fff; transform: translateY(-2px); }
.pf-chip.active { color: #02060f; background: var(--grad); border-color: transparent; box-shadow: 0 8px 22px -8px var(--a1); }

/* ---- Responsive grid of project cards ---- */
.pf-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.pf-card {
  --pf-c: 0,229,255;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(18,26,50,.9), rgba(8,12,26,.94));
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  opacity: 0; translate: 0 34px; filter: brightness(.5);
  transition: opacity .7s var(--ease), translate .7s var(--ease), filter .7s var(--ease),
              transform .45s var(--ease), border-color .3s, box-shadow .4s;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.pf-card.in { opacity: 1; translate: 0 0; filter: none; }
.pf-card:hover { border-color: rgba(var(--pf-c),.6); box-shadow: 0 26px 60px -22px rgba(var(--pf-c),.5), 0 0 40px -14px rgba(var(--pf-c),.6); }
.pf-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0a0f1c; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s; }
.pf-card:hover .pf-thumb img { transform: scale(1.08); filter: saturate(1.2); }
.pf-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,7,13,.92) 100%);
}
.pf-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 99px; font: 700 .64rem var(--font-tech); letter-spacing: .07em;
  color: #02060f; background: linear-gradient(90deg, rgba(var(--pf-c),1), rgba(var(--pf-c),.6));
}
.pf-live {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 99px; font: 700 .6rem var(--font-tech); letter-spacing: .06em; color: #bdf7cf;
  background: rgba(10, 20, 14, .55); border: 1px solid rgba(93,255,176,.4);
}
.pf-live i { width: 6px; height: 6px; border-radius: 50%; background: #5dffb0; box-shadow: 0 0 8px #5dffb0; animation: pulse 1.6s infinite; }
.pf-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; z-index: 2; }
.pf-body h3 { margin: 0; font: 800 1.05rem var(--font-tech); color: #fff; }
.pf-body p { margin: 0; color: #a9b8d2; font-size: .88rem; line-height: 1.55; flex: 1; }
.pf-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-stack span {
  font: 600 .62rem var(--font-tech); letter-spacing: .04em; color: var(--a1);
  padding: 3px 9px; border-radius: 99px; background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.22);
}
.pf-open {
  margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 12px; font: 700 .78rem var(--font-tech); letter-spacing: .05em;
  color: #02060f; background: linear-gradient(90deg, rgb(var(--pf-c)), var(--a2));
  transition: transform .3s var(--ease), box-shadow .3s; position: relative; overflow: hidden;
}
.pf-open:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(var(--pf-c),.7); }
.pf-open svg { transition: transform .3s var(--ease); }
.pf-open:hover svg { transform: translate(3px,-3px); }

/* Add-your-project ghost card */
.pf-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 30px 20px; min-height: 100%;
  border: 1.5px dashed rgba(0,229,255,.35); border-radius: 20px;
  color: var(--muted); background: rgba(0,229,255,.03);
  opacity: 0; translate: 0 34px; transition: opacity .7s var(--ease), translate .7s var(--ease), border-color .3s, color .3s, background .3s;
}
.pf-add.in { opacity: 1; translate: 0 0; }
.pf-add:hover { border-color: var(--a1); color: #fff; background: rgba(0,229,255,.07); }
.pf-add span.plus {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; border: 1px solid rgba(0,229,255,.35); color: var(--a1);
}
.pf-add strong { font: 700 .88rem var(--font-tech); color: inherit; }
.pf-add small { font-size: .78rem; max-width: 220px; }

@media (hover: none) { .pf-card { transform: none !important; } }

/* =====================================================
   CONTACT
   ===================================================== */
.ct { position: relative; overflow: hidden; }
.ct .sx-wrap { padding-bottom: clamp(90px, 12vw, 140px); }
.ct-grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(30px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) { .ct-grid { grid-template-columns: .92fr 1.08fr; align-items: center; } }
.ct-grid.ct-grid--solo{grid-template-columns:minmax(0,1fr);max-width:900px;margin-inline:auto}

/* ---- Character scene ---- */
.ct-scene {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(300px, 40vw, 460px);
  background:
    radial-gradient(circle at 30% 20%, rgba(124,77,255,.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,229,255,.18), transparent 55%),
    linear-gradient(160deg, rgba(14,20,40,.9), rgba(6,9,18,.96));
  border: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; translate: 0 34px; transition: opacity .8s var(--ease), translate .8s var(--ease);
}
.ct-scene.in { opacity: 1; translate: 0 0; }
.ct-scene svg { width: min(92%, 420px); height: auto; display: block; overflow: visible; }
.ct-scene-tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 99px; font: 700 .68rem var(--font-tech); letter-spacing: .08em; color: var(--a1);
  background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.3);
}
.ct-scene-tag i { width: 6px; height: 6px; border-radius: 50%; background: #5dffb0; box-shadow: 0 0 8px #5dffb0; animation: pulse 1.6s infinite; }
.ct-note { position: absolute; z-index: 3; font: 700 1.1rem var(--font-tech); color: var(--a1); opacity: 0; animation: noteFloat 3.2s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 0 8px var(--a1)); }
.ct-note.n1 { left: 18%; top: 14%; animation-delay: 0s; }
.ct-note.n2 { right: 16%; top: 22%; animation-delay: 1.1s; color: var(--a2); filter: drop-shadow(0 0 8px var(--a2)); }
.ct-note.n3 { right: 30%; top: 8%; animation-delay: 2.1s; color: var(--a3); filter: drop-shadow(0 0 8px var(--a3)); }
@keyframes noteFloat { 0% { opacity: 0; transform: translateY(10px) rotate(-6deg) scale(.8); } 20% { opacity: .9; } 80% { opacity: .7; } 100% { opacity: 0; transform: translateY(-46px) rotate(8deg) scale(1.05); } }

/* character parts */
.ct-chair { transform-origin: 50% 100%; }
.ct-person { transform-origin: 210px 210px; animation: ctBob 3.4s ease-in-out infinite; }
@keyframes ctBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ct-head { transform-origin: 205px 118px; animation: ctNod 4.6s ease-in-out infinite; }
@keyframes ctNod { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.ct-arm-l { transform-origin: 168px 190px; animation: ctType 0.42s ease-in-out infinite alternate; }
.ct-arm-r { transform-origin: 246px 190px; animation: ctType 0.42s ease-in-out infinite alternate-reverse; }
@keyframes ctType { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(2px); } }
.ct-eye { animation: ctBlink 4.8s infinite; transform-origin: center; transform-box: fill-box; }
.ct-eye.e2 { animation-delay: .05s; }
@keyframes ctBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.ct-cable { stroke-dasharray: 5 5; animation: ctFlow 1.4s linear infinite; }
@keyframes ctFlow { to { stroke-dashoffset: -20; } }
.ct-screen-glow { animation: ctGlow 2.4s ease-in-out infinite alternate; }
@keyframes ctGlow { from { opacity: .5; } to { opacity: 1; } }
.ct-hp-glow { filter: drop-shadow(0 0 6px var(--a2)); animation: ctGlow 1.8s ease-in-out infinite alternate; }
.ct-formster-badge { animation: ctFloatSmall 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes ctFloatSmall { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

html.reduce-motion .ct-person, html.reduce-motion .ct-head, html.reduce-motion .ct-arm-l,
html.reduce-motion .ct-arm-r, html.reduce-motion .ct-eye, html.reduce-motion .ct-cable,
html.reduce-motion .ct-screen-glow, html.reduce-motion .ct-hp-glow, html.reduce-motion .ct-formster-badge,
html.reduce-motion .ct-note { animation: none !important; }

/* ---- Form panel ---- */
.ct-panel {
  position: relative; border-radius: 22px; padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(160deg, rgba(18,26,50,.88), rgba(8,12,26,.92));
  border: 1px solid var(--border);
  opacity: 0; translate: 0 34px; transition: opacity .8s var(--ease) .1s, translate .8s var(--ease) .1s;
}
.ct-panel.in { opacity: 1; translate: 0 0; }
.ct-panel h3 { margin: 0 0 6px; font: 900 clamp(1.3rem, 3vw, 1.7rem) var(--font-tech); color: #fff; }
.ct-panel > p { margin: 0 0 20px; color: var(--muted); font-size: .92rem; }
.ct-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ct-quick a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  font: 700 .78rem var(--font-tech); letter-spacing: .03em; color: #cfe0ff;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  transition: transform .3s var(--ease), border-color .3s, color .3s, background .3s;
}
.ct-quick a:hover { transform: translateY(-2px); border-color: rgba(0,229,255,.5); color: var(--a1); background: rgba(0,229,255,.07); }
.ct-form-wrap {
  position: relative; min-height: 480px; border-radius: 16px; overflow: hidden;
  background: rgba(4,6,14,.6); border: 1px solid var(--border);
}
.ct-form-wrap formester-standard-form { display: block; width: 100%; min-height: 480px; }
.ct-form-loading {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--muted); font: 600 .8rem var(--font-tech); letter-spacing: .06em; pointer-events: none;
  transition: opacity .4s;
}
.ct-form-loading .spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(0,229,255,.2); border-top-color: var(--a1); animation: ctSpin 0.9s linear infinite; }
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct-form-wrap.loaded .ct-form-loading { opacity: 0; visibility: hidden; }

@media (max-width: 480px) { .ct-form-wrap, .ct-form-wrap formester-standard-form { min-height: 560px; } }

/* =====================================================
   ABOUT + FAQ  (append to style.css)
   ===================================================== */

/* Earth fades out once you reach About (JS toggles html.no-earth) */
#earthCanvas{transition:opacity .7s ease}
html.no-earth #earthCanvas{opacity:0!important}

/* reveal helper */
.abv{opacity:0;translate:0 34px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.abv.in{opacity:1;translate:0 0}

/* ---------- ABOUT: deep-space universe ---------- */
.ab{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%,rgba(40,60,190,.35),transparent 70%),
    radial-gradient(ellipse 60% 35% at 95% 35%,rgba(124,77,255,.28),transparent 70%),
    radial-gradient(ellipse 60% 30% at 5% 85%,rgba(0,229,255,.16),transparent 70%),
    linear-gradient(180deg,#03050b 0%,#050817 45%,#03050b 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%)}
.ab-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ab .sx-wrap{z-index:2}

.ab-nebula{position:absolute;inset:0;z-index:0;pointer-events:none}
.ab-nebula i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32;animation:abDrift 24s ease-in-out infinite alternate}
.ab-nebula i:nth-child(1){width:44vmax;height:30vmax;left:-12vmax;top:14%;background:var(--a2)}
.ab-nebula i:nth-child(2){width:38vmax;height:28vmax;right:-10vmax;top:46%;background:var(--a3);opacity:.2;animation-delay:-8s}
.ab-nebula i:nth-child(3){width:34vmax;height:24vmax;left:20%;bottom:4%;background:var(--a1);opacity:.16;animation-delay:-14s}
@keyframes abDrift{to{transform:translate(6vmax,-4vmax) scale(1.15)}}

/* tilted orbit rings + planets */
.ab-orbits{position:absolute;left:-22vmax;bottom:6%;width:64vmax;height:64vmax;z-index:0;pointer-events:none;transform:rotateX(68deg) rotateZ(-18deg);perspective:800px;opacity:.7}
.ab-orbits .o{position:absolute;border-radius:50%;border:1px solid rgba(0,229,255,.16);animation:abSpinZ 50s linear infinite}
.ab-orbits .o1{inset:0}
.ab-orbits .o2{inset:12%;border-color:rgba(124,77,255,.22);animation-duration:34s;animation-direction:reverse}
.ab-orbits .o3{inset:26%;border-color:rgba(255,43,214,.2);animation-duration:22s}
.ab-orbits .o::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--a1);box-shadow:0 0 18px var(--a1)}
.ab-orbits .o2::after{background:var(--a2);box-shadow:0 0 18px var(--a2)}
.ab-orbits .o3::after{background:var(--a3);box-shadow:0 0 18px var(--a3);width:9px;height:9px}
@keyframes abSpinZ{to{transform:rotate(360deg)}}

/* the loader moon says hi */
.ab-moon{position:absolute;right:6%;top:50%;width:clamp(70px,9vw,120px);aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;
  background:#39beff;box-shadow:0 0 70px rgba(57,190,255,.45),inset -14px -6px 0 rgba(0,0,0,.16);animation:abFloat 7s ease-in-out infinite alternate}
.ab-moon .cr{position:absolute;border-radius:50%;background:#31b4ff;box-shadow:inset -3px 0 0 #1ca4f9}
.ab-moon .c1{width:24%;height:24%;left:58%;top:12%}.ab-moon .c2{width:16%;height:16%;left:16%;top:70%}.ab-moon .c3{width:19%;height:19%;left:8%;top:14%}
.ab-moon .ey{position:absolute;top:44%;width:7%;height:7%;border-radius:50%;background:#161616}
.ab-moon .ey.l{left:30%}.ab-moon .ey.r{left:60%}
.ab-moon .mo{position:absolute;left:44%;top:56%;width:12%;height:6%;border:2px solid #161616;border-top:0;border-radius:0 0 99px 99px}
@keyframes abFloat{to{transform:translateY(-22px) rotate(6deg)}}

/* glass panels */
.ab-glass{position:relative;border-radius:24px;padding:clamp(20px,3vw,34px);
  background:linear-gradient(160deg,rgba(16,22,52,.74),rgba(6,9,22,.8));border:1px solid rgba(150,170,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 30px 80px -50px var(--a2)}
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
@media(min-width:992px){.ab-grid{grid-template-columns:1.05fr .95fr}}

.ab-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;font:700 .64rem var(--font-tech);letter-spacing:.1em;color:#bdf7cf;background:rgba(93,255,176,.07);border:1px solid rgba(93,255,176,.3)}
.ab-tag i{width:6px;height:6px;border-radius:50%;background:#5dffb0;box-shadow:0 0 8px #5dffb0;animation:pulse 1.6s infinite}
.ab-story h3{margin:16px 0 14px;font:900 clamp(1.3rem,3.2vw,1.9rem)/1.2 var(--font-tech);color:#fff}
.ab-story p{margin:0 0 14px;color:#b4c2dc;font-size:1rem;line-height:1.7}
.ab-story p.lead{color:#e6eeff;font-size:1.06rem}
.ab-story b{color:var(--a1);font-weight:600}

.ab-vs{display:grid;gap:12px;margin:20px 0}
@media(min-width:560px){.ab-vs{grid-template-columns:1fr 1fr}}
.ab-bub{padding:14px 16px;border-radius:16px;border:1px solid var(--border)}
.ab-bub small{display:block;margin-bottom:6px;font:700 .58rem var(--font-tech);letter-spacing:.14em;text-transform:uppercase}
.ab-bub p{margin:0 0 4px!important;font-size:.98rem!important;font-weight:600}
.ab-bub em{font-style:normal;font-size:.78rem;color:#8a9bb8}
.ab-bub.them{background:rgba(255,255,255,.03);border-style:dashed}
.ab-bub.them small{color:#8a9bb8}.ab-bub.them p{color:#9aa8c2!important}
.ab-bub.us{background:linear-gradient(145deg,rgba(0,229,255,.1),rgba(124,77,255,.16));border-color:rgba(0,229,255,.4);box-shadow:0 18px 40px -26px var(--a1)}
.ab-bub.us small{color:var(--a1)}.ab-bub.us p{color:#fff!important}

.ab-fx{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ab-fx b{width:100%;color:#ffd28a;font:700 .68rem var(--font-tech);letter-spacing:.08em}
.ab-fx span{padding:6px 12px;border-radius:99px;font-size:.82rem;color:#dbe6fb;background:rgba(255,255,255,.05);border:1px solid var(--border)}

/* terminal */
.ab-term{border-radius:18px;overflow:hidden;background:rgba(4,7,18,.92);border:1px solid rgba(0,229,255,.28);
  box-shadow:0 30px 80px -40px var(--a1),0 0 0 1px rgba(255,255,255,.03) inset}
.ab-term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:linear-gradient(180deg,#0f1630,#0a1024);border-bottom:1px solid var(--border)}
.ab-term-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.ab-term-bar i:nth-child(2){background:#febc2e}.ab-term-bar i:nth-child(3){background:#28c840}
.ab-term-bar span{margin-left:8px;font:500 .72rem ui-monospace,Menlo,Consolas,monospace;color:#8a9bb8}
.ab-term-bar em{margin-left:auto;font:700 .58rem var(--font-tech);letter-spacing:.12em;color:#5dffb0;font-style:normal}
.ab-term-body{padding:16px 14px 18px;overflow-x:auto;font:500 clamp(.7rem,1.9vw,.84rem)/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfe0ff}
.ab-ln{display:block;white-space:pre;opacity:0;transform:translateX(-8px)}
.ab-term.in .ab-ln{animation:abLn .45s var(--ease) forwards;animation-delay:calc(var(--n)*.2s + .3s)}
@keyframes abLn{to{opacity:1;transform:none}}
.ab-term .k{color:var(--a3)}.ab-term .s{color:#7dffb8}.ab-term .f{color:var(--a1)}.ab-term .g{color:#5dffb0}.ab-term .p{color:var(--a2);font-weight:700}
.ab-cur{display:inline-block;width:8px;height:1em;vertical-align:-.15em;background:var(--a1);animation:blink 1s steps(1) infinite}

/* stats */
.ab-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:clamp(30px,5vw,54px) 0}
@media(min-width:720px){.ab-stats{grid-template-columns:repeat(4,1fr)}}
.ab-stats li{padding:18px 14px;text-align:center;border-radius:18px;background:rgba(10,15,34,.6);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ab-stats strong{display:block;font:900 clamp(1.5rem,5vw,2.3rem)/1.1 var(--font-tech);background:linear-gradient(90deg,var(--a1),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-stats sup{font-size:.45em;margin-left:2px;color:var(--a2);-webkit-text-fill-color:var(--a2)}
.ab-stats li>span{display:block;margin-top:4px;font:500 .6rem var(--font-tech);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.ab-sub{text-align:center;margin:clamp(40px,7vw,76px) 0 clamp(20px,4vw,34px)}
.ab-sub h3{margin:12px 0 0;font:900 clamp(1.3rem,4vw,2.1rem)/1.15 var(--font-tech);color:#fff}

/* protocol cards */
.ab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}
.ab-card.abv{opacity:0;translate:0 30px;transition:opacity .8s var(--ease),translate .8s var(--ease),transform .45s var(--ease),border-color .3s,box-shadow .4s}
.ab-card.abv.in{opacity:1;translate:0 0}
.ab-card{--c:0,229,255;min-height:220px;background:linear-gradient(155deg,rgba(18,26,54,.85),rgba(7,10,24,.92));border-color:rgba(var(--c),.22)}
.ab-card:nth-child(2){--c:255,184,77}.ab-card:nth-child(3){--c:255,109,200}.ab-card:nth-child(4){--c:85,231,189}.ab-card:nth-child(5){--c:169,139,255}.ab-card:nth-child(6){--c:121,170,255}
.ab-card:hover{border-color:rgba(var(--c),.7);box-shadow:0 26px 60px -26px rgba(var(--c),.6)}
.ab-card .sx-ico{border-color:rgba(var(--c),.45);background:linear-gradient(145deg,rgba(var(--c),.22),rgba(12,18,37,.9))}
.ab-card em{position:absolute;top:20px;right:20px;z-index:2;font:600 .58rem var(--font-tech);letter-spacing:.12em;color:rgba(234,242,255,.4);font-style:normal}
.ab-card h3{font-size:1.02rem}

/* flight log */
.ab-log{position:relative;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);padding-left:22px;border-left:1px dashed rgba(0,229,255,.35);margin:0 0 0 4px}
.ab-log li{position:relative;padding:16px 18px;border-radius:16px;background:rgba(10,15,34,.66);border:1px solid var(--border)}
.ab-log li::before{content:"";position:absolute;left:-30px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--a1);box-shadow:0 0 14px var(--a1)}
.ab-log em{font:900 1.5rem var(--font-tech);font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-log h4{margin:2px 0 4px;font:800 1rem var(--font-tech);color:#fff}
.ab-log p{margin:0;color:#a9b8d2;font-size:.9rem;line-height:1.55}
.ab-rocket{display:none}
@media(min-width:860px){
  .ab-log{grid-template-columns:repeat(4,minmax(0,1fr));padding:34px 0 0;border-left:0;border-top:1px dashed rgba(0,229,255,.35);margin:20px 0 0}
  .ab-log li::before{left:24px;top:-42px}
  .ab-rocket{display:block;position:absolute;top:-24px;left:0;font-size:1.4rem;transform:rotate(45deg);filter:drop-shadow(0 0 10px var(--a1));animation:abFly 7s linear infinite}
}
@keyframes abFly{from{left:0}to{left:calc(100% - 28px)}}

/* tech ticker */
.ab-mq{margin:clamp(40px,7vw,70px) 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ab-mq-in{display:flex;width:max-content;animation:abMq 34s linear infinite}
.ab-mq:hover .ab-mq-in{animation-play-state:paused}
.ab-mq-in span{margin-right:12px;padding:9px 16px;border-radius:99px;white-space:nowrap;font:700 .74rem var(--font-tech);letter-spacing:.08em;color:var(--a1);background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.24)}
@keyframes abMq{to{transform:translateX(-50%)}}

/* cta */
.ab-cta{margin-top:clamp(40px,7vw,70px);text-align:center;padding:clamp(28px,5vw,52px) 20px;border-radius:28px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(124,77,255,.3),transparent 62%),linear-gradient(160deg,rgba(18,26,54,.9),rgba(6,9,22,.95));border:1px solid rgba(124,77,255,.4);box-shadow:0 30px 90px -50px var(--a2)}
.ab-cta h3{margin:0 0 8px;font:900 clamp(1.4rem,4.6vw,2.4rem)/1.15 var(--font-tech);color:#fff}
.ab-cta p{margin:0 0 22px;color:#b4c2dc}
.ab-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ab-cta-btns .btn-cta,.ab-cta-btns .btn-ghost{padding:14px 26px;font:700 .82rem var(--font-tech);letter-spacing:.08em;text-transform:uppercase}

@media(max-width:700px){.ab-moon{display:none}.ab-orbits{opacity:.45}}

/* ---------- FAQ ---------- */
.fq{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(124,77,255,.12),transparent 60%)}
.fq-floaters span{position:absolute;z-index:1;pointer-events:none;font:800 clamp(2rem,6vw,4rem) var(--font-tech);color:rgba(0,229,255,.07);animation:fqFloat 12s ease-in-out infinite alternate}
.fq-floaters span:nth-child(1){left:6%;top:14%}.fq-floaters span:nth-child(2){right:8%;top:22%;animation-delay:-3s;color:rgba(124,77,255,.1)}
.fq-floaters span:nth-child(3){left:12%;top:52%;animation-delay:-6s}.fq-floaters span:nth-child(4){right:10%;top:60%;animation-delay:-2s;color:rgba(255,43,214,.09)}
.fq-floaters span:nth-child(5){left:4%;bottom:14%;animation-delay:-8s}.fq-floaters span:nth-child(6){right:6%;bottom:8%;animation-delay:-5s}
.fq-floaters span:nth-child(7){left:48%;top:6%;animation-delay:-9s}
@keyframes fqFloat{to{transform:translateY(-30px) rotate(8deg)}}
.fq .sx-wrap{max-width:920px}

.fq-tools{display:grid;gap:14px;margin-bottom:22px}
.fq-search{display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:14px;color:var(--muted);background:rgba(8,12,28,.8);border:1px solid var(--border);transition:border-color .25s,box-shadow .25s}
.fq-search:focus-within{border-color:var(--a1);box-shadow:0 0 26px -8px var(--a1);color:var(--a1)}
.fq-search input{flex:1;min-width:0;padding:14px 0;background:transparent;border:0;outline:0;color:var(--text);font:500 .95rem var(--font-body)}
.fq-search input::placeholder{color:#6d7d9c}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px}
.fq-chip{padding:8px 15px;border-radius:99px;cursor:pointer;font:700 .72rem var(--font-tech);letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);transition:color .25s,background .25s,transform .25s var(--ease)}
.fq-chip:hover{color:#fff;transform:translateY(-2px)}
.fq-chip.active{color:#02060f;background:var(--grad);border-color:transparent;box-shadow:0 8px 22px -8px var(--a1)}

.fq-list{display:grid;gap:12px;overflow-anchor:none}
.fq-item{border-radius:18px;background:linear-gradient(160deg,rgba(18,26,50,.86),rgba(8,12,26,.92));border:1px solid var(--border);transition:border-color .3s,box-shadow .4s,opacity .8s var(--ease),translate .8s var(--ease)}
.fq-item[hidden]{display:none}
.fq-item:hover{border-color:rgba(0,229,255,.35)}
.fq-item.open{border-color:rgba(0,229,255,.55);box-shadow:0 22px 60px -34px var(--a1)}
.fq-item h3{margin:0}
.fq-q{width:100%;display:flex;align-items:center;gap:14px;padding:18px 18px;background:none;border:0;cursor:pointer;text-align:left;color:#fff;font:700 clamp(.92rem,2.4vw,1.06rem)/1.4 var(--font-body)}
.fq-n{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font:700 .64rem var(--font-tech);color:var(--a1);background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.25)}
.fq-qt{flex:1}
.fq-ic{position:relative;flex:0 0 auto;width:22px;height:22px;transition:transform .4s var(--ease)}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--a1)}
.fq-ic::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.fq-item.open .fq-ic{transform:rotate(180deg)}
.fq-item.open .fq-ic::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.fq-a>div{overflow:hidden}
.fq-item.open .fq-a{grid-template-rows:1fr}
.fq-a p{margin:0;padding:0 18px 20px 66px;color:#b4c2dc;font-size:.95rem;line-height:1.7}
.fq-a a{color:var(--a1);text-decoration:underline;text-underline-offset:3px}
.fq-a b{color:#fff}
@media(max-width:560px){.fq-a p{padding-left:18px}.fq-n{display:none}}
.fq-empty{margin:24px 0 0;text-align:center;color:var(--muted)}

.fq-cta{margin-top:clamp(30px,5vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-radius:22px;
  background:linear-gradient(120deg,rgba(0,229,255,.1),rgba(124,77,255,.16));border:1px solid rgba(0,229,255,.3)}
.fq-cta h3{margin:0 0 4px;font:900 1.25rem var(--font-tech);color:#fff}
.fq-cta p{margin:0;color:#b4c2dc;font-size:.92rem}

/* ---------- Site footer ---------- */
.site-footer{position:relative;z-index:1;overflow:hidden;isolation:isolate;border-top:1px solid rgba(111,155,255,.2);background:radial-gradient(ellipse at 12% 0%,rgba(0,229,255,.1),transparent 42%),radial-gradient(ellipse at 88% 35%,rgba(255,43,214,.09),transparent 38%),linear-gradient(180deg,#080d1b,#04060d 78%)}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(105,145,220,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(105,145,220,.055) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000,transparent 82%)}
.ft-wrap{max-width:1240px;margin:0 auto;padding:54px clamp(18px,4vw,48px) 20px}
.ft-top{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(28px,6vw,82px);padding-bottom:42px;border-bottom:1px solid rgba(130,155,210,.16)}
.ft-brand{display:inline-flex;align-items:center;gap:14px;color:#fff}
.ft-brand img{width:54px;height:54px;object-fit:contain;padding:5px;border:1px solid rgba(120,160,255,.2);border-radius:12px;background:rgba(255,255,255,.04)}
.ft-brand span{display:grid;gap:3px;line-height:1}
.ft-brand strong{font:800 1rem var(--font-tech);letter-spacing:.08em}
.ft-brand small{font:700 .62rem var(--font-tech);letter-spacing:.28em;color:var(--a1)}
.ft-brand-block>p{margin:15px 0 12px;color:#9aa9c3;font-size:.9rem;line-height:1.6}
.ft-universe{display:inline-flex;align-items:center;gap:8px;color:#d8e5ff;font:700 .77rem var(--font-tech);transition:color .2s,gap .2s}
.ft-universe:hover{gap:12px;color:var(--a1)}
.ft-quote{position:relative;margin:0;padding:20px 28px;border-left:2px solid var(--a1);background:linear-gradient(100deg,rgba(0,229,255,.055),transparent 78%)}
.ft-quote-label{color:var(--a1);font:700 .62rem var(--font-tech);letter-spacing:.16em}
.ft-quote p{max-width:650px;margin:12px 0 0;color:#edf4ff;font:700 clamp(1.25rem,2.2vw,1.85rem)/1.35 var(--font-tech)}
.ft-quote em{color:#00d9ff;font-style:normal}
.ft-quote-mark{position:absolute;right:18px;bottom:3px;color:rgba(255,109,200,.65);font-size:1.35rem}
.ft-grid{display:grid;grid-template-columns:1.05fr 1.15fr 1.25fr 1.35fr;gap:clamp(22px,3vw,42px);padding:34px 0 38px}
.ft-column h2{margin:0 0 16px;color:#fff;font:700 .72rem var(--font-tech);letter-spacing:.1em;text-transform:uppercase}
.ft-quick-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.ft-quick-links a{color:#9eacc4;font-size:.84rem;transition:color .2s,transform .2s}
.ft-quick-links a:hover{color:var(--a1);transform:translateX(3px)}
.ft-contact-link{display:flex;align-items:center;gap:10px;min-height:38px;color:#c5d3e9;font-size:.85rem;transition:color .2s}
.ft-contact-link svg{flex:0 0 auto;color:var(--a1)}
.ft-contact-link:hover{color:#fff}
.ft-whatsapp svg{color:#5dffb0}
.ft-reply-note{margin:8px 0 0;color:#73839f;font-size:.75rem}
.ft-mission{align-self:start;padding:18px 18px 16px;border:1px solid rgba(0,229,255,.23);border-top:2px solid var(--a1);background:linear-gradient(145deg,rgba(10,26,43,.74),rgba(9,11,24,.72));border-radius:8px}
.ft-mission-status{display:inline-flex;align-items:center;gap:8px;color:#8df5cb;font:700 .58rem var(--font-tech);letter-spacing:.1em}
.ft-mission-status i{width:7px;height:7px;border-radius:50%;background:#5dffb0;box-shadow:0 0 9px rgba(93,255,176,.7)}
.ft-mission h2{margin:13px 0 4px;color:#fff;font:800 1.1rem var(--font-tech)}
.ft-mission p{margin:0 0 14px;color:#9eacc4;font-size:.8rem}
.ft-launch{display:inline-flex;align-items:center;gap:9px;color:#70eaff;font:700 .75rem var(--font-tech);transition:gap .2s,color .2s}
.ft-launch:hover{gap:14px;color:#fff}
.ft-bottom{display:flex;align-items:center;gap:20px;padding-top:17px;border-top:1px solid rgba(130,155,210,.16);color:#75839d;font-size:.72rem}
.ft-made{margin-left:auto;color:#8d9bb4}
.ft-top-link{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;color:var(--a1);border:1px solid rgba(0,229,255,.3);border-radius:8px;transition:color .2s,background .2s,transform .2s}
.ft-top-link:hover{color:#04101a;background:var(--a1);transform:translateY(-2px)}
@media(max-width:900px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}.ft-mission{max-width:360px}}
@media(max-width:560px){.ft-wrap{padding-top:38px}.ft-top{grid-template-columns:1fr;gap:24px;padding-bottom:30px}.ft-quote{padding:17px 20px}.ft-quote-mark{right:10px}.ft-grid{grid-template-columns:1fr;gap:26px;padding:28px 0}.ft-quick-links{max-width:340px}.ft-mission{max-width:none}.ft-bottom{flex-wrap:wrap;gap:10px 16px}.ft-made{order:3;width:100%;margin:0}.ft-top-link{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.ft-universe,.ft-quick-links a,.ft-contact-link,.ft-launch,.ft-top-link{transition:none}}