/* RocketVPN — cosmic dark theme (2026).
   Loaded AFTER /css/rvpn-dark.css to layer effects on top of base tokens. */

/* ============ Animated starfield (3 parallax layers on body) ============ */
body { position: relative; overflow-x: hidden; }
body::before, body::after, .cosmos-layer {
  content: ""; position: fixed; inset: -10vh -10vw;
  pointer-events: none; z-index: 0;
}
body::before {
  /* tiny stars, fast drift */
  background-image:
    radial-gradient(1px 1px at 12% 18%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 71%, #d6c8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 33%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 87%, #b8a4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 44%, #cabbff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 79%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 53%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 96%, #b8a4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 23%, #ffffff 50%, transparent 51%);
  background-size: 220px 220px;
  animation: stars-drift 90s linear infinite;
  opacity: 0.85;
}
body::after {
  /* aurora / nebula glow */
  background:
    radial-gradient(ellipse 50% 35% at 18% 22%, rgba(98, 57, 236, 0.28), transparent 65%),
    radial-gradient(ellipse 45% 30% at 82% 65%, rgba(140, 54, 164, 0.24), transparent 65%),
    radial-gradient(ellipse 40% 25% at 50% 100%, rgba(50, 48, 157, 0.22), transparent 70%),
    radial-gradient(ellipse 35% 25% at 90% 10%, rgba(170, 145, 254, 0.18), transparent 65%);
  animation: nebula-shift 30s ease-in-out infinite alternate;
  filter: blur(2px);
}
@keyframes stars-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-220px, -220px, 0); }
}
@keyframes nebula-shift {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate(2vw, -1vh) scale(1.05); opacity: 1;    }
  100% { transform: translate(-1vw, 1vh) scale(0.97); opacity: 0.7;  }
}

/* Make sure all content sits ABOVE the cosmos */
.site-header, main, section, footer, .container { position: relative; z-index: 1; }

/* ============ Floating orbs (3 large, slow parallax) ============ */
.orb {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(60px); opacity: 0.45;
  mix-blend-mode: screen;
}
.orb-1 { width: 420px; height: 420px; top: 10vh; left: -100px;
  background: radial-gradient(circle, #6239EC 0%, transparent 70%);
  animation: orb-float-1 22s ease-in-out infinite; }
.orb-2 { width: 360px; height: 360px; top: 55vh; right: -60px;
  background: radial-gradient(circle, #8c36a4 0%, transparent 70%);
  animation: orb-float-2 28s ease-in-out infinite; }
.orb-3 { width: 280px; height: 280px; top: 120vh; left: 35vw;
  background: radial-gradient(circle, #835FFD 0%, transparent 70%);
  animation: orb-float-3 35s ease-in-out infinite; }
@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(60px, -40px); }
  66%      { transform: translate(-30px, 50px); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-50px, -30px); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, -60px); }
}

/* ============ Custom scrollbar ============ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--magenta));
  border-radius: 6px; border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-bright), #ff6ec4);
}

/* ============ Selection ============ */
::selection { background: rgba(131, 95, 253, 0.45); color: #fff; }

/* ============ Glass surfaces ============ */
.site-header {
  background: linear-gradient(180deg, rgba(2, 3, 28, 0.72), rgba(2, 3, 28, 0.55));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 200; /* above all hero/orbs/quantum stacking */
}

/* ============ Shimmer headline ============ */
.hero h1, .section-title, .shimmer {
  background: linear-gradient(120deg,
    #ffffff 0%, #b8a4ff 30%, #ff6ec4 50%, #b8a4ff 70%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-pan 8s ease-in-out infinite;
}
@keyframes shimmer-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============ Eyebrow with neon ring ============ */
.section-eyebrow {
  position: relative; display: inline-block;
  padding: 4px 14px; border-radius: 999px;
  background: rgba(131, 95, 253, 0.1);
  border: 1px solid rgba(131, 95, 253, 0.35);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; font-weight: 600;
  color: #b8a4ff;
  text-shadow: 0 0 18px rgba(131, 95, 253, 0.6);
}

/* ============ Buttons: animated gradient border + glow ============ */
.btn-primary {
  position: relative;
  background: var(--accent);
  box-shadow: 0 6px 24px rgba(98, 57, 236, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: -2px;
  background: conic-gradient(from 0deg,
    #6239EC, #ff6ec4, #835FFD, #2bf1ff, #6239EC);
  filter: blur(8px); opacity: 0;
  z-index: -1; border-radius: inherit;
  animation: spin-border 4s linear infinite;
  transition: opacity .25s;
}
.btn-primary:hover::before { opacity: 0.85; }
.btn-primary::after {
  /* light sweep on hover */
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-22deg);
  transition: left .6s ease-in-out;
}
.btn-primary:hover::after { left: 130%; }
@keyframes spin-border {
  to { transform: rotate(360deg); }
}

.btn-outline {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-outline::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-bright), transparent 40%, transparent 60%, var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5;
}
.btn-outline:hover::before { opacity: 1; }

/* Auth buttons in header — glow on register */
.site-header .auth .btn-register {
  position: relative;
  box-shadow: 0 4px 20px rgba(98, 57, 236, 0.4);
}
.site-header .auth .btn-register::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-bright), #ff6ec4);
  filter: blur(10px); opacity: 0; z-index: -1;
  transition: opacity .25s;
}
.site-header .auth .btn-register:hover::after { opacity: .7; }

/* ============ Holographic flag hover ============ */
.site-header .flagi a {
  position: relative; overflow: hidden;
}
.site-header .flagi a::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.4), transparent 60%);
  transform: translateX(-100%); transition: transform .5s;
}
.site-header .flagi a:hover::after { transform: translateX(100%); }
.site-header .flagi a.active {
  box-shadow: 0 0 12px rgba(131, 95, 253, 0.7);
}

/* ============ Main nav: shimmer underline + glow on hover ============ */
.site-header .main-nav > li > a {
  position: relative; overflow: hidden;
}
.site-header .main-nav > li > a::before {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright), #ff6ec4);
  transform: translateX(-50%);
  transition: width .3s ease;
  box-shadow: 0 0 10px var(--accent-bright);
}
.site-header .main-nav > li > a:hover::before,
.site-header .main-nav > li.current > a::before {
  width: 80%;
}
.site-header .main-nav > li > a::after {
  /* slow shimmer wave */
  content: ""; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(131,95,253,0.12), transparent);
  transition: left .6s;
}
.site-header .main-nav > li > a:hover::after { left: 150%; }

/* Make sub-menu glassmorphic */
.site-header .main-nav .sub-menu {
  background: rgba(20, 20, 43, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(131, 95, 253, 0.25);
  box-shadow: 0 16px 40px rgba(2, 3, 28, 0.6), 0 0 0 1px rgba(131, 95, 253, 0.15) inset;
}
.site-header .main-nav .sub-menu a {
  border-left: 2px solid transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.site-header .main-nav .sub-menu a:hover {
  border-left-color: var(--accent-bright);
  background: rgba(131, 95, 253, 0.1);
}

/* ============ Feature cards: glass + holographic edge + tilt-glow ============ */
.feature-card {
  background: linear-gradient(180deg, rgba(28, 22, 65, 0.7), rgba(20, 20, 43, 0.5));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.18);
  position: relative; overflow: hidden;
}
.feature-card::before {
  /* aurora sheen */
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0deg, rgba(131, 95, 253, 0.25) 80deg,
    rgba(255, 110, 196, 0.18) 160deg, transparent 240deg);
  opacity: 0; transition: opacity .4s;
  animation: spin-aurora 14s linear infinite;
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }
.feature-card::after {
  /* inner glow on top edge */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  opacity: 0; transition: opacity .3s;
}
.feature-card:hover::after { opacity: 1; }
.feature-card:hover {
  border-color: rgba(131, 95, 253, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(98, 57, 236, 0.25);
}
.feature-card > * { position: relative; z-index: 1; }
@keyframes spin-aurora {
  to { transform: rotate(360deg); }
}
.feature-card .icon {
  position: relative;
  background: linear-gradient(135deg, var(--accent), var(--magenta));
  box-shadow: 0 8px 24px rgba(98, 57, 236, 0.35);
}
.feature-card .icon::after {
  content: ""; position: absolute; inset: -3px;
  background: linear-gradient(135deg, var(--accent-bright), #ff6ec4);
  border-radius: inherit; filter: blur(8px); opacity: 0;
  transition: opacity .3s; z-index: -1;
}
.feature-card:hover .icon::after { opacity: .65; }

/* ============ Pricing cards: glow + popular ring ============ */
.price-card {
  background: linear-gradient(180deg, rgba(28, 22, 65, 0.7), rgba(20, 20, 43, 0.6));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.18);
  overflow: hidden;
}
.price-card::before {
  /* corner glow */
  content: ""; position: absolute; top: -40%; right: -40%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(131, 95, 253, 0.35), transparent 70%);
  filter: blur(20px); opacity: .5;
  transition: opacity .3s, transform .5s;
  pointer-events: none;
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(131,95,253,0.5); }
.price-card:hover::before { opacity: .85; transform: scale(1.2); }
.price-card.popular {
  border: none;
  background: linear-gradient(180deg, rgba(38, 30, 78, 0.85), rgba(28, 22, 65, 0.7));
}
.price-card.popular::after {
  /* animated gradient ring */
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg,
    var(--accent), #ff6ec4, #2bf1ff, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 6s linear infinite;
  pointer-events: none;
}
.price-card .price {
  background: linear-gradient(135deg, #ffffff, #b8a4ff 60%, #ff6ec4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.price-card > * { position: relative; z-index: 1; }

/* ============ Section divider — animated horizon ============ */
.cosmic-divider {
  height: 1px; margin: 64px auto; max-width: 800px;
  background: linear-gradient(90deg, transparent, rgba(131,95,253,0.6), transparent);
  position: relative;
}
.cosmic-divider::after {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 16px var(--accent-bright);
  transform: translateX(-50%);
  animation: divider-pulse 3s ease-in-out infinite;
}
@keyframes divider-pulse {
  0%, 100% { opacity: .4; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.4); }
}

/* ============ Hero — orbit ring decoration ============ */
.hero .orbit {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  border: 1px solid rgba(131, 95, 253, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.hero .orbit::before, .hero .orbit::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(131, 95, 253, 0.12);
  border-radius: 50%;
}
.hero .orbit::before { transform: scale(1.4); animation: orbit-rotate 60s linear infinite; }
.hero .orbit::after  { transform: scale(1.8); animation: orbit-rotate 90s linear infinite reverse; }
@keyframes orbit-rotate { to { transform: scale(var(--s, 1.4)) rotate(360deg); } }

/* ============ Generic content (.content-area for non-home pages) ============ */
.content-area {
  background: rgba(20, 20, 43, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.18);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin: 64px 0;
}
.content-area h1 {
  margin-top: 0; margin-bottom: .6em;
}
.content-area h2, .content-area h3 { margin-top: 1.2em; }
.content-area p { color: var(--text-2); }
.content-area a { color: var(--accent-bright); }
.content-area img { max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--border); margin: 1em 0; }

/* Old WYSIWYG float classes (legacy from TinyMCE) */
.content-area .justifyleft  { float: left;  margin: 6px 18px 12px 0; max-width: 50%; }
.content-area .justifyright { float: right; margin: 6px 0 12px 18px; max-width: 50%; }
.content-area .justifycenter,
.content-area .aligncenter  { display: block; margin: 1em auto; }
.content-area > p::after,
.content-area > div::after { content: ""; display: table; clear: both; }
@media (max-width: 700px) {
  .content-area .justifyleft,
  .content-area .justifyright { float: none; max-width: 100%; margin: 1em 0; }
}

/* Hero image at the top of a blog post */
.blog-post { position: relative; }
.post-hero {
  margin: 0 0 -1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(131, 95, 253, 0.18);
  border-bottom: none;
  aspect-ratio: 21 / 9;
}
.post-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.blog-post .content-area { margin: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: none; }
.blog-post:not(:has(.post-hero)) .content-area { border-radius: var(--radius-lg); border-top: 1px solid rgba(131,95,253,0.18); }
.content-area ul, .content-area ol { padding-left: 1.5em; color: var(--text-2); }
.content-area li { margin: .4em 0; }
.content-area blockquote {
  margin: 1em 0; padding: 14px 18px; border-left: 3px solid var(--accent-bright);
  background: rgba(131, 95, 253, 0.08);
  border-radius: 0 8px 8px 0; font-style: italic;
}
.content-area pre, .content-area code {
  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .9em;
}
.content-area pre { padding: 14px; overflow-x: auto; }
.content-area table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.content-area th, .content-area td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.content-area th { color: var(--text); font-weight: 600; }
@media (max-width: 768px) { .content-area { padding: 24px 18px; } }

/* ============ Two-column with sidebar (instructions, FAQ, blog) ============ */
.with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 991px) {
  .with-sidebar { grid-template-columns: 1fr; }
}
.sidebar {
  background: rgba(20, 20, 43, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.18);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky; top: 130px;
}
.sidebar h3 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-2); margin-bottom: 1em;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar ul li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.sidebar ul li:last-child { border-bottom: none; }
.sidebar ul a {
  color: var(--text-2); text-decoration: none; font-size: .92rem;
  display: block; padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s, padding .15s;
}
.sidebar ul a:hover, .sidebar ul li.active a {
  color: var(--text); background: rgba(131,95,253,0.12);
  padding-left: 14px;
}

/* ============ Blog list + post ============ */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gutter);
}
.blog-card {
  background: rgba(20, 20, 43, 0.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.18);
  border-radius: var(--radius-lg);
  padding: 24px; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s;
  display: flex; flex-direction: column;
}
/* When card has a thumbnail: side-by-side layout (image left, text right) */
.blog-card.has-thumb { padding: 0; flex-direction: row; align-items: stretch; }
.blog-card.has-thumb .b-body { padding: 18px 22px; flex: 1; min-width: 0; }
.blog-card:hover { border-color: rgba(131,95,253,0.5); transform: translateY(-3px); }

/* Thumbnail — compact, fixed width, full card height */
.blog-card .b-thumb {
  display: block; flex: 0 0 180px;
  align-self: stretch;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
  overflow: hidden;
  position: relative;
  border-right: 1px solid rgba(131, 95, 253, 0.18);
}
.blog-card .b-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.blog-card:hover .b-thumb img { transform: scale(1.05); }

/* On mobile fall back to stacked: thumb on top, fixed height */
@media (max-width: 600px) {
  .blog-card.has-thumb { flex-direction: column; }
  .blog-card .b-thumb {
    flex: 0 0 160px;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(131, 95, 253, 0.18);
  }
}

.blog-card h3 { font-size: 1.15rem; }
.blog-card h3 a { color: var(--text); text-decoration: none; }
.blog-card h3 a:hover { color: var(--accent-bright); }
.blog-card .meta { color: var(--text-muted); font-size: .82rem; margin-bottom: .8em;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.blog-card .meta .tag {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(131, 95, 253, 0.15); color: var(--accent-bright);
  font-size: .72rem; font-weight: 600;
}
.blog-card .excerpt { color: var(--text-2); font-size: .93rem; margin-bottom: 1em; }
.blog-card .read-more {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-bright); font-weight: 600; font-size: .9rem;
  text-decoration: none;
}
.blog-card .read-more::after { content: "→"; transition: transform .2s; }
.blog-card .read-more:hover::after { transform: translateX(4px); }

/* ============ Testimonials carousel ============ */
.testimonials { padding: 64px 0; position: relative; }
.testimonials .section-eyebrow { display: block; text-align: center; margin: 0 auto 12px; max-width: max-content; }
.testimonials .section-title { margin-bottom: 40px; }

/* Prev/Next arrow buttons */
.t-controls {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.t-arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(28, 22, 65, 0.7);
  border: 1px solid rgba(131, 95, 253, 0.35);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, opacity .15s;
}
.t-arrow:hover {
  background: var(--accent);
  border-color: var(--accent-bright);
  box-shadow: 0 0 18px rgba(131, 95, 253, 0.5);
}
.t-arrow:active { transform: scale(0.94); }
.t-arrow[disabled] { opacity: 0.35; cursor: not-allowed; }
.t-arrow[disabled]:hover { background: rgba(28, 22, 65, 0.7); border-color: rgba(131, 95, 253, 0.35); box-shadow: none; }
.testimonial-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding: 8px 4px 24px;
  margin: 0 -8px;
  scroll-padding-left: 8px;
}
.testimonial-track::-webkit-scrollbar { height: 8px; }
.testimonial-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent), var(--magenta));
  border-radius: 999px;
}
.testimonial {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(28, 22, 65, 0.72), rgba(20, 20, 43, 0.55));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(131, 95, 253, 0.22);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.testimonial:hover {
  border-color: rgba(131, 95, 253, 0.5);
  transform: translateY(-3px);
}
.testimonial::before {
  /* Big quote glyph in the corner */
  content: "\201C";
  position: absolute; top: -18px; right: 14px;
  font-size: 110px; line-height: 1;
  color: rgba(131, 95, 253, 0.18);
  font-family: Georgia, serif;
  pointer-events: none;
}
.testimonial .t-photo {
  position: relative;
  width: 64px; height: 64px;
  margin-bottom: 14px;
}
.testimonial .t-photo img:not(.t-flag) {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(131, 95, 253, 0.45);
  box-shadow: 0 0 14px rgba(131, 95, 253, 0.35);
}
.testimonial .t-flag {
  position: absolute;
  bottom: -2px; right: -4px;
  width: 22px; height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--bg-card);
  object-fit: cover;
}
.testimonial .t-name {
  color: var(--text);
  font-weight: 600; font-size: 1.05rem;
  margin-bottom: 2px;
}
.testimonial .t-role {
  color: var(--text-muted);
  font-size: .8rem;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.testimonial .t-quote {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  position: relative;
}

/* Tag cloud (sidebar). Styles BOTH our .tag-pill and taglister's
   default .tl-tag output, so it works regardless of which template
   variant emits the markup. */
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0; margin: 0;
}
.tag-cloud .tag-pill,
.tag-cloud .tl-tag {
  display: inline-flex; list-style: none;
}
.tag-cloud .tl-tag { margin: 0; }
.tag-cloud .tag-pill,
.tag-cloud .tl-tag a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(131, 95, 253, 0.10);
  border: 1px solid rgba(131, 95, 253, 0.25);
  color: var(--text-2); font-size: .82rem; font-weight: 500;
  text-decoration: none; line-height: 1.4;
  transition: background .15s, border-color .15s, color .15s;
}
.tag-cloud .tag-pill:hover,
.tag-cloud .tl-tag a:hover {
  background: rgba(131, 95, 253, 0.22);
  border-color: var(--accent-bright);
  color: var(--text);
}
.tag-cloud .tag-pill .count {
  font-size: .72rem; opacity: .65;
}
.tag-cloud .tag-pill.active,
.tag-cloud .tl-tag.active a {
  background: var(--accent); border-color: var(--accent-bright); color: #fff;
}
/* Weight-driven font scale (taglister tl-tag-weightN) */
.tag-cloud .tl-tag-weight1 a { font-size: .78rem; }
.tag-cloud .tl-tag-weight2 a { font-size: .85rem; }
.tag-cloud .tl-tag-weight3 a { font-size: .92rem; }
.tag-cloud .tl-tag-weight4 a { font-size: .98rem; }
.tag-cloud .tl-tag-weight5 a { font-size: 1.05rem; font-weight: 600; }

.post-meta {
  color: var(--text-muted); font-size: .9rem;
  margin-bottom: 1.5em; display: flex; gap: 16px; flex-wrap: wrap;
}
.post-meta .tag {
  padding: 2px 10px; border-radius: 999px;
  background: rgba(131, 95, 253, 0.15); color: var(--accent-bright);
  font-weight: 600;
}

/* ============ Contact form ============ */
.contact-form {
  max-width: 560px; margin: 0 auto;
  background: rgba(20, 20, 43, 0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(131, 95, 253, 0.25);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
}
.contact-form::before {
  /* gradient ring */
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(131,95,253,0.55), transparent 50%, rgba(255,110,196,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.contact-form > * { position: relative; }
.contact-form label { display: block; color: var(--text-2); margin-bottom: .35em;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.contact-form input, .contact-form textarea {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 12px 14px; color: var(--text);
  font-family: inherit; font-size: 1rem;
  margin-bottom: 1em; outline: none;
  transition: border-color .15s, background .15s;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--accent-bright);
  background: rgba(131, 95, 253, 0.08);
  box-shadow: 0 0 0 3px rgba(131, 95, 253, 0.18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { width: 100%; }

/* ============ Comets — true tear-drop shape via SVG mask ============
   The .comet element is an inline-block whose visual shape is an
   SVG-defined teardrop (long tapered tail to the LEFT, rounded glowing
   head to the RIGHT). A linear-gradient fills that masked area so the
   tail naturally fades from bright nucleus to transparent over its
   length. drop-shadow(es) provide the surrounding nebula-glow.

   Per-instance tuning via CSS vars:
     --c-top        starting y position
     --c-fall       vertical distance traveled left
     --c-dur        total flight time
     --c-delay      start offset
     --c-tail-len   visual tail length (px)
     --c-color      tint of the tail/head
*/
.comet {
  position: fixed;
  top: var(--c-top, 12vh);
  left: 110vw;
  width: var(--c-tail-len, 320px);
  height: 18px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, opacity;
  animation: comet-fly var(--c-dur, 14s) linear infinite;
  animation-delay: var(--c-delay, 0s);

  /* Teardrop shape: tapered horizontal "tail" + circular "head" cap */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'%3E%3Cpath d='M318 9 Q300 1 250 4 L8 8.3 Q0 9 8 9.7 L250 14 Q300 17 318 9 Z' fill='black'/%3E%3Ccircle cx='309' cy='9' r='8' fill='black'/%3E%3C/svg%3E")
    no-repeat right center / 100% 100%;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'%3E%3Cpath d='M318 9 Q300 1 250 4 L8 8.3 Q0 9 8 9.7 L250 14 Q300 17 318 9 Z' fill='black'/%3E%3Ccircle cx='309' cy='9' r='8' fill='black'/%3E%3C/svg%3E")
    no-repeat right center / 100% 100%;

  /* Tail body — bright nucleus on right fading into deep purple haze on left */
  background: linear-gradient(to left,
    #ffffff 0%,
    var(--c-color, #ffffff) 4%,
    var(--c-color, #b8a4ff) 10%,
    rgba(184, 164, 255, 0.7) 22%,
    rgba(131, 95, 253, 0.35) 50%,
    rgba(98, 57, 236, 0.12) 75%,
    transparent 100%);

  /* External glow — drop-shadow respects the mask so the halo follows
     the teardrop, not a rectangle */
  filter:
    drop-shadow(0 0 4px var(--c-color, #ffffff))
    drop-shadow(0 0 14px var(--c-color, #b8a4ff))
    drop-shadow(0 0 36px rgba(131, 95, 253, 0.55));
}

/* Color variants */
.comet.violet { --c-color: #b8a4ff; }
.comet.cyan   { --c-color: #2bf1ff; }
.comet.pink   { --c-color: #ff6ec4; }
.comet.gold   { --c-color: #ffd180; }

@keyframes comet-fly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--c-tilt, 0deg)); }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-130vw, var(--c-fall, 14vh)) rotate(var(--c-tilt, 0deg)); }
}

/* ============ Twinkling pinpoint stars (CSS-only sparkle) ============ */
.sparkle {
  position: fixed; pointer-events: none; z-index: 0;
  width: 3px; height: 3px;
  background: #ffffff; border-radius: 50%;
  box-shadow: 0 0 6px #b8a4ff;
  opacity: 0;
  animation: twinkle var(--s-dur, 4s) ease-in-out infinite;
  animation-delay: var(--s-delay, 0s);
}
.sparkle.violet { background: #b8a4ff; box-shadow: 0 0 8px #835FFD; }
.sparkle.cyan   { background: #2bf1ff; box-shadow: 0 0 8px #2bf1ff; }
.sparkle.pink   { background: #ff6ec4; box-shadow: 0 0 8px #ff6ec4; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* ============ Subtle grid overlay (HUD-style) ============ */
.grid-hud {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(131, 95, 253, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 95, 253, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 80%);
}

/* ============ Rocket — replaces quantum computer ============
   Stylized SVG rocket: chrome body, holographic window, animated
   exhaust flames + falling sparks, floats gently up/down with a
   parallax-glow halo behind. */
.rocket-stage {
  position: relative;
  width: 320px; height: 420px;
  margin: 0 auto;
  pointer-events: none;
}
.rocket-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rocket-stage::before {
  /* big violet halo behind the rocket */
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  background: radial-gradient(circle,
    rgba(131, 95, 253, 0.35) 0%,
    rgba(140, 54, 164, 0.18) 35%,
    transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: rocket-halo 5s ease-in-out infinite alternate;
}
@keyframes rocket-halo {
  0%   { transform: scale(0.95); opacity: .7; }
  100% { transform: scale(1.1);  opacity: 1;  }
}

/* Rocket body floats up and down */
.rocket-body {
  transform-origin: center;
  animation: rocket-float 4.5s ease-in-out infinite;
}
@keyframes rocket-float {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1deg); }
}

/* Engine flames — pulsate quickly */
.rocket-flames {
  transform-origin: 160px 282px;
  animation: flame-pulse .25s ease-in-out infinite alternate;
}
@keyframes flame-pulse {
  0%   { transform: scaleY(0.92) scaleX(0.96); opacity: .9; }
  100% { transform: scaleY(1.08) scaleX(1.04); opacity: 1;  }
}

/* Falling sparks emitted from the engine */
.rocket-spark {
  transform-origin: center;
  opacity: 0;
  animation: spark-fall var(--sp-dur, 1.6s) linear infinite;
  animation-delay: var(--sp-delay, 0s);
}
@keyframes spark-fall {
  0%   { transform: translate(0, 0)   scale(1);   opacity: 1; }
  100% { transform: translate(var(--sp-x, 0), 80px) scale(.3); opacity: 0; }
}

/* Window glow — slow blink */
.rocket-window-glow {
  animation: window-glow 3s ease-in-out infinite alternate;
}
@keyframes window-glow {
  0%   { opacity: .6; }
  100% { opacity: 1;  }
}

/* Hero with the rocket: side-by-side on wide, stacked on mobile */
.hero.with-rocket { padding: 80px 0 96px; }
.hero.with-rocket .hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  text-align: left;
}
.hero.with-rocket .hero-grid > .text-side { max-width: 620px; }
.hero.with-rocket .hero-grid h1 { text-align: left; }
.hero.with-rocket .hero-grid .lede { margin-left: 0; }
.hero.with-rocket .hero-grid .actions { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero.with-rocket .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero.with-rocket .hero-grid h1 { text-align: center; }
  .hero.with-rocket .hero-grid .lede { margin-left: auto; margin-right: auto; }
  .hero.with-rocket .hero-grid .actions { justify-content: center; }
  .rocket-stage { width: 260px; height: 340px; }
}

/* ============ Reduced motion accessibility ============ */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .orb,
  .feature-card::before, .price-card.popular::after,
  .btn-primary::before, .hero .orbit, .hero .orbit::before, .hero .orbit::after,
  .shimmer, .hero h1, .section-title, .cosmic-divider::after,
  .comet, .sparkle, .rocket-body, .rocket-flames, .rocket-spark, .rocket-window-glow, .rocket-stage::before {
    animation: none !important;
  }
}

/* ============================================================
   Content pages, blog, instructions — added for Astro migration
   ============================================================ */
.page-header {
  padding: 90px 0 36px;
  position: relative;
}
.page-header h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  margin: 8px 0 12px;
  background: linear-gradient(135deg, #d8cbff 0%, #6239ec 60%, #4f8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-header .lede {
  color: #b7b3d8;
  font-size: 1.1rem;
  max-width: 720px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9b8cff;
  font-size: 0.92rem;
  text-decoration: none;
  margin-bottom: 14px;
}
.back-link:hover { color: #d8cbff; }

.content-area {
  padding: 24px 0 80px;
  color: #d4d0ea;
  line-height: 1.72;
}
.content-area h2, .content-area h3 {
  color: #ffffff;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.content-area p { margin: 0 0 1em; }
.content-area a { color: #9b8cff; }
.content-area a:hover { color: #c4b6ff; }
.content-area img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 18px 0;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.content-area ul, .content-area ol { padding-left: 1.3em; margin: 0 0 1em; }
.content-area li { margin: 0.3em 0; }
.content-area table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(98,57,236,.22);
  border-radius: 10px;
  overflow: hidden;
}
.content-area th, .content-area td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.content-area th {
  background: rgba(98,57,236,.18);
  color: #efeafd;
}

/* Blog list (post grid) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  padding: 20px 0 80px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(28,22,65,.85), rgba(15,12,40,.92));
  border: 1px solid rgba(98,57,236,.25);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(98,57,236,.25);
  border-color: rgba(155,140,255,.55);
}
.post-cover {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: rgba(98,57,236,.12);
}
.post-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.post-body h3 { margin: 0 0 8px; font-size: 1.08rem; color: #f3eeff; line-height: 1.35; }
.post-body p { color: #b7b3d8; font-size: 0.94rem; margin: 0 0 12px; flex: 1; }
.post-body time { color: #7d77a8; font-size: 0.82rem; }

/* Tag filter pills */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 4px;
}
.tag-pill {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(98,57,236,.12);
  border: 1px solid rgba(98,57,236,.32);
  color: #d4cbff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.tag-pill:hover, .tag-pill.active {
  background: rgba(98,57,236,.32);
  border-color: rgba(155,140,255,.7);
  color: #ffffff;
}
.tag-pill.sm { padding: 3px 10px; font-size: 0.78rem; }

.post-header .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.post-header .post-meta time { color: #8c87b5; font-size: 0.88rem; }
.post-hero {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 14px;
  margin-top: 8px;
}

/* Instructions list + side nav */
.instr-grid {
  list-style: none;
  padding: 12px 0 60px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.instr-grid li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(28,22,65,.55);
  border: 1px solid rgba(98,57,236,.22);
  border-radius: 12px;
  color: #efeafd;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.instr-grid li a:hover {
  background: rgba(98,57,236,.18);
  border-color: rgba(155,140,255,.55);
  transform: translateX(3px);
}
.instr-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(98,57,236,.28);
  color: #d4cbff;
  font-size: 0.7rem;
}
.instr-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  padding: 20px 0 80px;
}
.instr-side ul { list-style: none; padding: 0; margin: 0; position: sticky; top: 90px; }
.instr-side li a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #b7b3d8;
  text-decoration: none;
  font-size: 0.94rem;
  border-left: 2px solid transparent;
}
.instr-side li a:hover { color: #ffffff; background: rgba(98,57,236,.1); }
.instr-side li.active a {
  color: #ffffff;
  background: rgba(98,57,236,.2);
  border-left-color: #9b8cff;
}
@media (max-width: 820px) {
  .instr-layout { grid-template-columns: 1fr; }
  .instr-side ul { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .instr-side li a { padding: 6px 10px; border-left: none; border: 1px solid rgba(98,57,236,.28); border-radius: 999px; font-size: 0.82rem; }
  .instr-side li.active a { border-color: #9b8cff; }
}

/* ============================================================
   Dropdown sub-menus in main-nav (added 2026-05-11 evening)
   ============================================================ */
.main-nav { position: relative; }
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a .caret {
  display: inline-block;
  font-size: 0.7em;
  margin-left: 4px;
  transform: translateY(-1px);
  transition: transform 200ms ease;
  opacity: 0.8;
}
.main-nav .has-sub.open > a .caret { transform: rotate(180deg) translateY(1px); }
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: linear-gradient(160deg, rgba(28, 22, 65, 0.98) 0%, rgba(15, 12, 40, 0.99) 100%);
  border: 1px solid rgba(98, 57, 236, 0.45);
  border-radius: 10px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(155, 140, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.main-nav .has-sub.open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(2px);
}
.main-nav .sub-menu li { padding: 0; margin: 0; }
.main-nav .sub-menu a {
  display: block;
  padding: 9px 16px;
  color: #d4cbff;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus {
  background: rgba(98, 57, 236, 0.18);
  color: #ffffff;
  border-left-color: #9b8cff;
}

/* Mobile: collapse into accordion behavior; keep menu inline below trigger */
@media (max-width: 900px) {
  .main-nav .sub-menu {
    position: static;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(98, 57, 236, 0.18);
    background: rgba(15, 12, 40, 0.9);
    box-shadow: none;
    padding-left: 12px;
  }
  .main-nav .has-sub:not(.open) > .sub-menu {
    display: none;
  }
  .main-nav .has-sub > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ============================================================
   Satellite hero art (replaces rocket on home pages)
   ============================================================ */
.satellite-stage {
  width: 100%;
  max-width: 420px;
  position: relative;
  margin: 0 auto;
  filter: drop-shadow(0 18px 36px rgba(98,57,236,0.35));
}
.satellite-stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.satellite-craft {
  transform-origin: 200px 110px;
  animation: sat-yaw 14s ease-in-out infinite alternate;
}
@keyframes sat-yaw {
  0%   { transform: rotate(-4deg) translateY(-3px); }
  50%  { transform: rotate( 2deg) translateY( 2px); }
  100% { transform: rotate(-1deg) translateY(-1px); }
}
.sat-beacon {
  transform-origin: 200px 48px;
  animation: sat-beacon-pulse 1.6s ease-in-out infinite;
}
@keyframes sat-beacon-pulse {
  0%,100% { transform: scale(1);   opacity: 0.6; }
  50%     { transform: scale(2.4); opacity: 0.0; }
}
.sat-signal {
  transform-origin: 200px 50px;
  animation: sat-signal-pulse 2.4s ease-in-out infinite;
}
@keyframes sat-signal-pulse {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 0.2; }
}
.sat-star {
  animation: sat-star-twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--st-delay, 0s);
}
@keyframes sat-star-twinkle {
  0%,100% { opacity: 0.25; transform: scale(1);   }
  50%     { opacity: 1.00; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .satellite-craft, .sat-beacon, .sat-signal, .sat-star {
    animation: none !important;
  }
}