/* 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-stacking-fix: top-bar must paint above nav-row so lang dropdown is clickable over main-nav */
.site-header .top-bar { z-index: 10; }
.site-header .nav-row .container { z-index: 1; }

.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(1.8rem, 3.6vw, 2.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.05rem;
  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; }

.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; }
}


.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;
  }
}

/* ============================================================
   Article typography + image controls (blog post readability fix)
   ============================================================ */
/* Force the article container to a comfortable reading width */
article.container.content-area,
.content-area {
  /* Use the same width as .container (1200px) — matches the top menu and page-header */
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 40px 56px !important;
  font-size: 1rem;
  line-height: 1.72;
  color: #d4d0ea;
}
/* Inner text gets a comfortable reading width within the wider card */
article.container.content-area > p,
article.container.content-area > ul,
article.container.content-area > ol,
article.container.content-area > blockquote,
.content-area > p,
.content-area > ul,
.content-area > ol,
.content-area > blockquote {
  max-width: 880px;
}
article.container.content-area > h2,
article.container.content-area > h3,
.content-area > h2,
.content-area > h3 {
  max-width: 880px;
}
@media (max-width: 768px) {
  article.container.content-area,
  .content-area { padding: 24px 18px !important; }
}
.content-area p { margin: 0 0 1em; color: #d4d0ea; }
.content-area h2 {
  font-size: 1.5rem; color: #ffffff;
  margin: 1.6em 0 .5em; line-height: 1.3;
}
.content-area h3 { font-size: 1.2rem; color: #efeafd; margin: 1.4em 0 .4em; }
.content-area strong { color: #ffffff; }
.content-area a { color: #9b8cff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content-area a:hover { color: #d8cbff; }
.content-area ul, .content-area ol { padding-left: 1.4em; margin: 0 0 1em; }
.content-area li { margin: .4em 0; }
.content-area blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  border-left: 3px solid #6239EC;
  background: rgba(98,57,236,.08);
  border-radius: 0 8px 8px 0;
  color: #c8c4e8;
}

/* All inline images: smaller, centered, sane shadow */
.content-area img,
.content-area p > img {
  display: block !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  max-height: 420px !important;
  object-fit: contain;
  margin: 18px auto !important;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border: 1px solid rgba(155,140,255,.15);
}
/* Hide images that fail to load (broken src) — alt:empty pseudo-trick */
.content-area img[alt=""]:not([src]),
.content-area img[src=""],
.content-area img:not([src]) { display: none !important; }
/* Drop legacy float classes from MODX TinyMCE */
.content-area .justifyleft,
.content-area .justifyright,
.content-area img[style*="float"] {
  float: none !important;
  display: block !important;
  margin: 18px auto !important;
  max-width: 100% !important;
}
/* Prevent legacy width/height overflow */
.content-area img[width],
.content-area img[height] { width: auto !important; height: auto !important; }

/* Hero image at top of post — much smaller now */
.post-hero {
  display: block !important;
  max-width: 720px !important;
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  border-radius: 12px;
  margin: 8px auto 0 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.4);
}
.post-header { padding-bottom: 18px; }
.post-header .post-meta { color: #9b95c5; font-size: 0.92rem; margin-top: 6px; }

/* 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.05rem; color: #f3eeff; line-height: 1.35; }
.post-body p { color: #b7b3d8; font-size: 0.92rem; margin: 0 0 12px; flex: 1; }
.post-body time { color: #7d77a8; font-size: 0.82rem; }

/* Tags */
.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; }

/* Instructions list */
.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; flex: 0 0 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;
}

/* ============================================================
   Dropdown menus — pure CSS hover (more reliable than JS)
   ============================================================ */
/* Ensure the parent li is hover-target friendly */
.site-header .main-nav > li.has-children { position: relative; }
/* Show on hover or focus-within */
.site-header .main-nav > li.has-children:hover > .sub-menu,
.site-header .main-nav > li.has-children:focus-within > .sub-menu,
.site-header .main-nav > li.has-children.is-open > .sub-menu {
  display: block !important;
  animation: dropdown-fade-2 .15s ease-out;
}
@keyframes dropdown-fade-2 {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Bridge: invisible thicker padding above .sub-menu so mouse moving
   from <a> down into the menu doesn't pass over a "no-hover" gap. */
.site-header .main-nav > li.has-children > .sub-menu {
  margin-top: 0;
  padding-top: 14px;
}
.site-header .main-nav > li.has-children > .sub-menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
  pointer-events: auto;
}
/* Caret indicator */
.site-header .main-nav > li.has-children > a::after {
  content: " ▾";
  font-size: 0.7em;
  opacity: 0.65;
  margin-left: 2px;
  transition: transform 200ms ease;
  display: inline-block;
}
.site-header .main-nav > li.has-children:hover > a::after,
.site-header .main-nav > li.has-children.is-open > a::after {
  transform: rotate(180deg);
  opacity: 1;
}
/* Hide the manual <span class="caret"> we put inline (CSS provides it) */
.site-header .main-nav > li.has-children > a .caret { display: none; }

/* ============================================================
   Cover image + lede inside content-area card (post & content pages)
   ============================================================ */
.post-hero-inside {
  display: block;
  width: 100%;
  max-width: 720px;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 24px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  border: 1px solid rgba(155,140,255,0.15);
}
.post-lede {
  font-size: 1.12rem !important;
  color: #efeafd !important;
  font-weight: 500 !important;
  margin: 0 0 26px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(155,140,255,0.18);
  max-width: 880px !important;
  line-height: 1.55 !important;
}
@media (max-width: 600px) {
  .post-hero-inside { max-height: 240px; margin-bottom: 16px !important; }
  .post-lede { font-size: 1rem !important; margin-bottom: 18px !important; }
}

/* ============================================================
   News header: title + tag filter side-by-side
   ============================================================ */
.news-header { padding-bottom: 24px; }
.news-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: end;
}
.news-header-left { min-width: 0; }
.news-header-right { min-width: 0; }
.tag-cloud-block {
  background: rgba(20, 20, 43, 0.55);
  border: 1px solid rgba(98, 57, 236, 0.22);
  border-radius: 14px;
  padding: 14px 16px 12px;
  backdrop-filter: blur(8px);
}
.tag-cloud-title {
  color: #b7b3d8;
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.tag-cloud-block .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  padding: 0;
}
.tag-cloud-block .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(98, 57, 236, 0.10);
  border: 1px solid rgba(98, 57, 236, 0.28);
  color: #d4cbff;
  font-size: 0.84rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms, transform 140ms;
}
.tag-cloud-block .tag-pill:hover {
  background: rgba(98, 57, 236, 0.22);
  border-color: rgba(155, 140, 255, 0.55);
  color: #ffffff;
  transform: translateY(-1px);
}
.tag-cloud-block .tag-pill.active {
  background: linear-gradient(135deg, #6239EC 0%, #835FFD 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(98, 57, 236, 0.45);
}
.tag-cloud-block .tag-count {
  font-size: 0.72rem;
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
}
.tag-cloud-block .tag-pill.active .tag-count {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}
.no-results {
  color: #b7b3d8;
  text-align: center;
  padding: 40px 20px;
  font-size: 1rem;
}
@media (max-width: 900px) {
  .news-header-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .news-header-right { order: 2; }
}

/* ============================================================
   Tutorial step layout (screenshot + text, 2-column)
   ============================================================ */
.tutorial-langs {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(155,140,255,0.18);
}
.tutorial-langs .lang-flag {
  display: inline-block;
  width: 36px; height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: opacity 160ms, transform 160ms, border-color 160ms;
}
.tutorial-langs .lang-flag img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  max-height: none !important;
}
.tutorial-langs .lang-flag:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.tutorial-langs .lang-flag.active {
  opacity: 1;
  border-color: #9b8cff;
  box-shadow: 0 4px 12px rgba(155,140,255,0.3);
}

.tutorial-step {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid rgba(155,140,255,0.10);
}
.tutorial-step:last-child { border-bottom: none; padding-bottom: 12px; }
.tutorial-step:first-of-type { padding-top: 12px; }
.tutorial-shot {
  position: sticky;
  top: 90px;
}
.tutorial-shot a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(155,140,255,0.20);
  background: rgba(15,12,40,0.6);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  transition: transform 200ms ease, border-color 200ms ease;
}
.tutorial-shot a:hover {
  transform: translateY(-3px);
  border-color: rgba(155,140,255,0.55);
}
.tutorial-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  max-height: none !important;
}
.tutorial-text h3 {
  font-size: 1.4rem !important;
  color: #ffffff !important;
  margin: 0 0 14px !important;
  background: linear-gradient(135deg, #d8cbff 0%, #6239ec 60%, #4f8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tutorial-text p {
  margin: 0 0 12px !important;
  line-height: 1.65 !important;
  color: #d4d0ea;
  max-width: 880px;
}
.tutorial-text strong { color: #ffffff; }

@media (max-width: 760px) {
  .tutorial-step {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 0;
  }
  .tutorial-shot {
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ============================================================
   Title inside card (post-article variant)
   ============================================================ */
.page-header.compact {
  padding: 60px 0 8px !important;
}
.post-article {
  padding-top: 32px !important;
}
.post-article > .section-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.post-article > .post-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important;
  margin: 0 0 14px !important;
  line-height: 1.25 !important;
  background: linear-gradient(135deg, #d8cbff 0%, #6239ec 60%, #4f8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 100% !important;
}
.post-article > .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 22px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(155,140,255,0.15);
}
.post-article > .post-meta time {
  color: #9b95c5;
  font-size: 0.92rem;
}
.post-article > .post-hero-inside {
  margin-top: 6px !important;
}

/* ============================================================
   Roadmap infographic — /information/ (Как подключиться)
   ============================================================ */
.roadmap-header { padding-bottom: 40px; }
.roadmap-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 8px 0 12px;
}

.roadmap {
  list-style: none;
  margin: 40px auto 60px;
  padding: 0;
  max-width: 880px;
  position: relative;
}
/* Vertical timeline line */
.roadmap::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 32px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(98, 57, 236, 0) 0%,
    rgba(98, 57, 236, 0.55) 8%,
    rgba(98, 57, 236, 0.55) 92%,
    rgba(98, 57, 236, 0) 100%
  );
  z-index: 0;
}

.roadmap-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 16px 0;
  position: relative;
  z-index: 1;
  animation: roadmap-fade 0.6s ease-out both;
  animation-delay: calc(var(--idx, 0) * 100ms);
}
@keyframes roadmap-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.roadmap-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6239EC 0%, #835FFD 50%, #FF6EC4 100%);
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 8px 22px rgba(98, 57, 236, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(15, 12, 40, 1),
    0 0 0 5px rgba(98, 57, 236, 0.55);
  position: relative;
  align-self: start;
  margin-top: 4px;
}
.roadmap-card {
  background: linear-gradient(135deg, rgba(28, 22, 65, 0.85), rgba(15, 12, 40, 0.92));
  border: 1px solid rgba(98, 57, 236, 0.28);
  border-radius: 14px;
  padding: 18px 22px;
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.roadmap-step:hover .roadmap-card {
  border-color: rgba(155, 140, 255, 0.55);
  transform: translateX(4px);
  box-shadow: 0 14px 32px rgba(98, 57, 236, 0.22);
}
/* Connecting arrow from circle to card */
.roadmap-card::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -10px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid rgba(98, 57, 236, 0.28);
}
.roadmap-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(98, 57, 236, 0.16);
  border: 1px solid rgba(155, 140, 255, 0.3);
  color: #d8cbff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap-card h3 {
  font-size: 1.18rem;
  color: #ffffff;
  margin: 0 56px 6px 0;
  line-height: 1.3;
}
.roadmap-card p {
  color: #c8c4e8;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 92%;
}

/* Final CTA card */
.roadmap-cta {
  margin: 50px auto 80px;
  max-width: 880px;
  padding: 44px 36px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(155, 140, 255, 0.20), transparent 70%),
    linear-gradient(135deg, rgba(98, 57, 236, 0.18), rgba(255, 110, 196, 0.10));
  border: 1px solid rgba(155, 140, 255, 0.45);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(2, 3, 28, 0.5);
  position: relative;
  overflow: hidden;
}
.roadmap-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 110, 196, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.roadmap-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 12px;
  background: linear-gradient(135deg, #ffffff 0%, #d8cbff 50%, #FF6EC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.roadmap-cta p {
  color: #c8c4e8;
  font-size: 1.05rem;
  margin: 0 0 26px;
  position: relative;
  z-index: 1;
}
.roadmap-cta .btn {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .roadmap::before { left: 24px; }
  .roadmap-step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .roadmap-num { width: 48px; height: 48px; font-size: 1.4rem; }
  .roadmap-card { padding: 16px 18px; }
  .roadmap-icon { width: 34px; height: 34px; top: 12px; right: 12px; }
  .roadmap-icon svg { width: 22px; height: 22px; }
  .roadmap-card h3 { font-size: 1.05rem; margin-right: 42px; }
  .roadmap-cta { padding: 32px 22px; margin-bottom: 60px; }
}

/* ============================================================
   Lightbox modal — click any image-link to enlarge in-page
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 3, 28, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 200ms ease;
  cursor: zoom-out;
  padding: 24px;
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lightbox-img {
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(155, 140, 255, 0.25);
  cursor: default;
  animation: lightbox-zoom 220ms cubic-bezier(0.2, 0.85, 0.4, 1);
}
@keyframes lightbox-zoom {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(28, 22, 65, 0.85);
  border: 1px solid rgba(155, 140, 255, 0.35);
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  transition: background 160ms, border-color 160ms, transform 160ms;
  z-index: 10001;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.lightbox-close:hover {
  background: rgba(98, 57, 236, 0.85);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.08);
}
.lightbox-close:active {
  transform: scale(0.96);
}
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.5rem; }
}

/* ============================================================
   Roadmap v2 — rich illustrated zigzag with connectors
   ============================================================ */
.roadmap-header { padding-bottom: 24px; }
.rm-wrap { padding-top: 8px; padding-bottom: 60px; }
.rm-list {
  list-style: none;
  margin: 30px auto 40px;
  padding: 0;
  max-width: var(--container);
  position: relative;
}
.rm-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 18px 0;
  position: relative;
  animation: rm-fadein .7s ease-out both;
  animation-delay: calc(var(--idx, 0) * 140ms);
  list-style: none;
}
.rm-step--right .rm-illust { order: 2; }
.rm-step--right .rm-text   { order: 1; text-align: right; }
.rm-step--right .rm-num    { margin-left: auto; }
.rm-illust {
  background: linear-gradient(135deg, rgba(28,22,65,0.65), rgba(15,12,40,0.88));
  border: 1px solid rgba(98,57,236,0.32);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 22px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,140,255,0.08);
  overflow: hidden;
  position: relative;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.rm-illust::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,110,196,0.12), transparent 60%);
  pointer-events: none;
}
.rm-step:hover .rm-illust {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(155,140,255,0.55);
  box-shadow: 0 30px 60px rgba(98,57,236,0.3);
}
.rm-illust svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.rm-text { padding: 4px 10px; }
.rm-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6239EC 0%, #835FFD 50%, #FF6EC4 100%);
  color: #fff;
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0 16px;
  box-shadow: 0 10px 26px rgba(98,57,236,0.5),
              inset 0 -3px 8px rgba(0,0,0,0.25),
              0 0 0 2px rgba(15,12,40,1),
              0 0 0 3px rgba(98,57,236,0.5);
  margin-bottom: 18px;
}
.rm-text h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.25;
  font-weight: 700;
}
.rm-text p {
  color: #c8c4e8;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Connector wrap (full-width row between steps) */
.rm-conn-wrap {
  list-style: none;
  height: 120px;
  padding: 0;
  margin: -10px 0;
  display: flex;
  position: relative;
  pointer-events: none;
}
.rm-conn-wrap--r { padding-left: 28%; padding-right: 28%; }
.rm-conn-wrap--l { padding-left: 28%; padding-right: 28%; }
.rm-conn {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(155,140,255,0.4));
}

/* ----------- Float animation on illustration groups ----------- */
.rm-float {
  animation: rm-float 4.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rm-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes rm-fadein {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------- Step 1: cursor blink + button glow ----------- */
.rm1-cursor { animation: rm1-blink 1s steps(1, start) infinite; }
@keyframes rm1-blink { 50% { opacity: 0; } }
.rm1-btn {
  animation: rm1-btnglow 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rm1-btnglow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,110,196,0)); }
  50%     { filter: drop-shadow(0 0 10px rgba(255,110,196,0.7)); }
}

/* ----------- Step 2: envelope flap + stamp pop ----------- */
.rm2-flap {
  animation: rm2-flap 6s ease-in-out infinite;
  transform-origin: 215px 86px;
  transform-box: view-box;
}
@keyframes rm2-flap {
  0%,18%,86%,100% { transform: rotateX(0deg); }
  35%,75%         { transform: rotateX(-160deg); }
}
.rm2-stamp {
  animation: rm2-stamppop 6s ease-out infinite;
  transform-origin: 252px 78px;
  transform-box: view-box;
}
@keyframes rm2-stamppop {
  0%,40%        { transform: scale(0); opacity: 0; }
  50%           { transform: scale(1.3); opacity: 1; }
  60%,100%      { transform: scale(1); opacity: 1; }
}

/* ----------- Step 3: orbit rotation + hub pulse ----------- */
.rm3-orbit-outer {
  animation: rm3-rot 26s linear infinite;
  transform-origin: 160px 110px;
  transform-box: view-box;
}
.rm3-orbit-inner {
  animation: rm3-rot-rev 18s linear infinite;
  transform-origin: 160px 110px;
  transform-box: view-box;
}
@keyframes rm3-rot     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rm3-rot-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.rm3-pulse {
  animation: rm3-pulse 2.4s ease-out infinite;
  transform-origin: 160px 110px;
  transform-box: view-box;
  opacity: 0;
}
@keyframes rm3-pulse {
  0%   { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.6); }
}

/* ----------- Step 4: progress bars + download arrows ----------- */
.rm4-bar1, .rm4-bar2, .rm4-bar3 {
  animation: rm4-fill 3.2s ease-in-out infinite;
}
.rm4-bar1 { animation-delay: 0s;    width: 44px; }
.rm4-bar2 { animation-delay: 0.4s;  width: 84px; }
.rm4-bar3 { animation-delay: 0.8s;  width: 44px; }
@keyframes rm4-fill {
  0%       { width: 0; opacity: 0.4; }
  60%,80%  { opacity: 1; }
  100%     { opacity: 0.4; }
}
.rm4-arrows path {
  animation: rm4-arrow 1.8s ease-in-out infinite;
  transform-box: fill-box;
}
.rm4-arrows g:nth-child(2) path { animation-delay: 0.3s; }
.rm4-arrows g:nth-child(3) path { animation-delay: 0.6s; }
@keyframes rm4-arrow {
  0%,100% { transform: translateY(0);  opacity: 1; }
  50%     { transform: translateY(10px); opacity: 0.4; }
}

/* ----------- Step 5: shield pulse + flow ----------- */
.rm5-shield-pulse {
  animation: rm5-pulse 2.6s ease-out infinite;
  transform-origin: 250px 118px;
  transform-box: view-box;
  opacity: 0;
}
@keyframes rm5-pulse {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(1.6); }
}

/* ----------- CTA card ----------- */
.rm-cta {
  margin: 60px auto 80px;
  max-width: var(--container);
  padding: 56px 36px;
  text-align: center;
  background: linear-gradient(135deg, rgba(98,57,236,0.18), rgba(255,110,196,0.10));
  border: 1px solid rgba(155,140,255,0.45);
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(2,3,28,0.55);
  position: relative;
  overflow: hidden;
}
.rm-cta-glow {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.85;
}
.rm-cta h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 0 0 14px;
  background: linear-gradient(135deg, #ffffff 0%, #d8cbff 50%, #FF6EC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  position: relative; z-index: 1;
}
.rm-cta p {
  color: #d4d0ea;
  font-size: 1.1rem;
  margin: 0 0 28px;
  position: relative; z-index: 1;
}
.rm-cta .btn {
  position: relative; z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rm-step, .rm-float, .rm3-orbit-outer, .rm3-orbit-inner, .rm3-pulse,
  .rm1-cursor, .rm1-btn, .rm2-flap, .rm2-stamp,
  .rm4-bar1, .rm4-bar2, .rm4-bar3, .rm4-arrows path,
  .rm5-shield-pulse, .rm-cta-glow {
    animation: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .rm-step { grid-template-columns: 1fr; gap: 18px; padding: 18px 0; }
  .rm-step--right .rm-illust { order: 1; }
  .rm-step--right .rm-text   { order: 2; text-align: left; }
  .rm-step--right .rm-num    { margin-left: 0; }
  .rm-conn-wrap { height: 90px; padding-left: 16%; padding-right: 16%; }
  .rm-cta { padding: 40px 22px; }
}

/* ============================================================
   Contact form (cosmic-themed)
   ============================================================ */
.contact-intro { max-width: 780px; margin: 0 0 28px; color: #c8c4e8; }
.contact-intro p { margin: 0 0 12px; line-height: 1.65; }
.contact-intro a { color: #9b8cff; text-decoration: underline; }
.contact-intro a:hover { color: #d8cbff; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  margin: 16px 0 28px;
  position: relative;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #b7b3d8;
  letter-spacing: 0.02em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 12, 40, 0.65);
  border: 1px solid rgba(98, 57, 236, 0.32);
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #9b8cff;
  background: rgba(28, 22, 65, 0.85);
  box-shadow: 0 0 0 3px rgba(155, 140, 255, 0.18);
}
.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6f6a96;
}
.cf-captcha {
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
}
.cf-captcha .h-captcha {
  /* hCaptcha sets its own iframe sizing; just ensure no override. */
}
.cf-submit {
  align-self: flex-start;
  margin-top: 6px;
}
.cf-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.cf-status {
  min-height: 1.4em;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.94rem;
  margin-top: 4px;
}
.cf-status:empty { display: none; }
.cf-status--success {
  background: rgba(124, 255, 182, 0.12);
  border: 1px solid rgba(124, 255, 182, 0.45);
  color: #7CFFB6;
}
.cf-status--error {
  background: rgba(255, 110, 196, 0.12);
  border: 1px solid rgba(255, 110, 196, 0.45);
  color: #FF6EC4;
}
.contact-fallback {
  margin-top: 24px;
  color: #8c87b5;
  font-size: 0.92rem;
}
.contact-fallback strong { color: #d4cbff; }

@media (max-width: 600px) {
  .contact-form { gap: 14px; }
  .cf-submit { width: 100%; align-self: stretch; text-align: center; }
}

/* Footer non-link items (email, R_Support) — match the muted color of links */
.site-footer .footer-links-block .links span {
  display: inline-block;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #8C8CAE;
}

/* ============================================================
   Server Map — global coverage block
   ============================================================ */
.server-map { padding: 70px 0 30px; position: relative; }
.server-map-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.server-map-head .section-title { margin: 8px 0 12px; }
.server-map-lede { color: #c8c4e8; font-size: 1.05rem; line-height: 1.6; margin: 0; }

.server-map-canvas {
  position: relative;
  background: linear-gradient(135deg, rgba(28,22,65,0.55), rgba(15,12,40,0.75));
  border: 1px solid rgba(98,57,236,0.28);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 22px 44px rgba(0,0,0,0.45);
  overflow: hidden;
}
.server-map-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
}

/* Pin animation */
.srv-pin { transform-origin: center; transform-box: fill-box; }
.srv-pin-glow {
  animation: srv-glow 2.6s ease-out infinite;
  animation-delay: var(--pin-delay, 0s);
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
@keyframes srv-glow {
  0%   { opacity: 0.85; transform: scale(0.5); }
  60%  { opacity: 0.4;  transform: scale(1.4); }
  100% { opacity: 0;    transform: scale(2.0); }
}
.srv-pin-dot {
  filter: drop-shadow(0 0 4px rgba(255, 110, 196, 0.8));
}
.srv-pin:hover .srv-pin-dot { fill: #FFE066; }

/* Stat strip */
.server-map-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 16px;
  padding: 18px 8px;
  background: rgba(15, 12, 40, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(155, 140, 255, 0.18);
}
.map-stat { text-align: center; }
.map-stat-num {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #d8cbff 50%, #FF6EC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.map-stat-lbl {
  color: #b7b3d8;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Country flag rail */
.server-map-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 4px 4px;
}
.flag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  font-size: 1.2rem;
  background: rgba(15, 12, 40, 0.6);
  border: 1px solid rgba(155, 140, 255, 0.22);
  border-radius: 6px;
  cursor: default;
  transition: transform 160ms, border-color 160ms;
}
.flag-chip:hover {
  transform: translateY(-2px) scale(1.1);
  border-color: rgba(155, 140, 255, 0.65);
}

@media (max-width: 700px) {
  .server-map-stats { grid-template-columns: repeat(2, 1fr); }
  .server-map-canvas { padding: 14px 12px 12px; }
  .map-stat-num { font-size: 1.4rem; }
}

/* ============================================================
   Technologies block — protocol tabs
   ============================================================ */
.technologies-block { padding: 60px 0 80px; }
.tech-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.tech-head .section-title { margin: 8px 0 12px; }
.tech-lede { color: #c8c4e8; font-size: 1.05rem; line-height: 1.6; margin: 0; }

.tech-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 28px;
  max-width: 920px;
}
.tech-button {
  padding: 10px 18px;
  background: rgba(28, 22, 65, 0.7);
  border: 1px solid rgba(98, 57, 236, 0.35);
  border-radius: 999px;
  color: #d4cbff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms, transform 180ms, box-shadow 180ms;
}
.tech-button:hover {
  background: rgba(98, 57, 236, 0.22);
  border-color: rgba(155, 140, 255, 0.65);
  color: #ffffff;
  transform: translateY(-1px);
}
.tech-button.active {
  background: linear-gradient(135deg, #6239EC 0%, #835FFD 50%, #FF6EC4 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(98, 57, 236, 0.45);
  transform: translateY(-1px);
}

.tech-pans {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  min-height: 180px;
}
.tech-pan {
  display: none;
  background: linear-gradient(135deg, rgba(28, 22, 65, 0.8), rgba(15, 12, 40, 0.92));
  border: 1px solid rgba(98, 57, 236, 0.35);
  border-radius: 16px;
  padding: 30px 36px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  animation: tech-fade 0.32s ease-out;
}
.tech-pan.active { display: block; }
@keyframes tech-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tech-pan-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #d8cbff 0%, #FF6EC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tech-pan-text {
  color: #d4d0ea;
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 600px) {
  .tech-button { padding: 8px 14px; font-size: 0.88rem; }
  .tech-pan { padding: 22px 18px; }
  .tech-pan-title { font-size: 1.25rem; }
  .tech-pan-text { font-size: 0.95rem; }
}

/* ============================================================
   Collapsible tag cloud (3 rows by default + toggle button)
   ============================================================ */
.tag-cloud-block .tag-cloud[data-collapsible].is-collapsed {
  max-height: 116px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.tag-cloud-block .tag-cloud[data-collapsible]:not(.is-collapsed) {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.tag-cloud-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 16px;
  background: rgba(98, 57, 236, 0.18);
  border: 1px solid rgba(98, 57, 236, 0.45);
  border-radius: 999px;
  color: #d4cbff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
}
.tag-cloud-toggle:hover {
  background: rgba(98, 57, 236, 0.32);
  border-color: rgba(155, 140, 255, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
}
.tag-cloud-toggle::after {
  content: ' ▾';
  font-size: 0.8em;
  margin-left: 2px;
  transition: transform 200ms;
  display: inline-block;
}
.tag-cloud-toggle.is-expanded::after {
  transform: rotate(180deg);
}
@media (max-width: 600px) {
  .tag-cloud-block .tag-cloud[data-collapsible].is-collapsed { max-height: 100px; }
}

/* ============================================================
   Server Map v2 — dot-pattern continents + real SVG flag rail
   (Overrides legacy rules at lines ~2278..2380)
   ============================================================ */
.server-map { padding: 80px 0 40px; }
.server-map-head { max-width: 780px; margin: 0 auto 36px; text-align: center; }
.server-map-lede { color: #b7b3d8; max-width: 720px; margin: 12px auto 0; font-size: 1.02rem; line-height: 1.55; }

.server-map-canvas {
  background: linear-gradient(180deg, rgba(20,18,43,0.55) 0%, rgba(8,6,22,0.55) 100%);
  border: 1px solid rgba(98,57,236,0.18);
  border-radius: 24px;
  padding: 24px 24px 0;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.45);
}
.server-map-canvas::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(98,57,236,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.server-map-canvas .map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1000 / 500;
  position: relative; z-index: 1;
}

.map-svg .grid line {
  stroke: rgba(155,140,255,0.10);
  stroke-width: 0.6;
  stroke-dasharray: 2 4;
}

.map-svg .connections .conn {
  stroke: rgba(170,140,255,0.22);
  stroke-width: 0.7;
  fill: none;
  stroke-dasharray: 3 6;
  animation: mapConnFlow 5.5s linear infinite;
  animation-delay: var(--cd, 0s);
}
@keyframes mapConnFlow {
  0%   { stroke-dashoffset: 0;     opacity: 0.20; }
  50%  {                            opacity: 0.55; }
  100% { stroke-dashoffset: -180;  opacity: 0.20; }
}

.map-svg .srv-pin .halo {
  opacity: 0.7;
  transform-origin: center;
  transform-box: fill-box;
  animation: mapPinPulse 3.6s ease-out infinite;
  animation-delay: var(--pd, 0s);
}
.map-svg .srv-pin .halo-2 { animation-delay: calc(var(--pd, 0s) + 1.8s); }
.map-svg .srv-pin .dot         { filter: drop-shadow(0 0 4px rgba(255,110,196,0.55)); }
.map-svg .srv-pin.is-hub .dot  { filter: drop-shadow(0 0 9px rgba(170,140,255,0.85)); }
@keyframes mapPinPulse {
  0%   { transform: scale(0.45); opacity: 0.85; }
  70%  { transform: scale(1.7);  opacity: 0;    }
  100% { transform: scale(1.7);  opacity: 0;    }
}

.server-map-canvas .server-map-stats {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(98,57,236,0.18);
  border-radius: 0;
  margin: 6px 0 0;
  padding: 22px 6px;
  position: relative; z-index: 1;
}
.server-map-canvas .map-stat-num {
  font-size: 2.1rem;
  background: linear-gradient(135deg, #ffffff 0%, #c8baff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
.server-map-canvas .map-stat-lbl { font-size: 0.78rem; letter-spacing: 0.09em; }

.server-map-canvas .server-map-flags {
  padding: 8px 0 22px;
  gap: 10px;
  position: relative; z-index: 1;
}
.server-map-canvas .flag-chip {
  width: 36px; height: 27px;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(20,18,43,0.6);
  border: 1px solid rgba(155,140,255,0.18);
  font-size: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.server-map-canvas .flag-chip:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(170,140,255,0.55);
  box-shadow: 0 8px 18px rgba(98,57,236,0.45);
}
.server-map-canvas .flag-chip img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .server-map-canvas { padding: 14px 14px 0; border-radius: 18px; }
  .server-map-canvas .server-map-stats { grid-template-columns: repeat(2, 1fr); padding: 16px 2px; gap: 10px; }
  .server-map-canvas .map-stat-num { font-size: 1.55rem; }
}

/* === Protocol icons (Technologies block) === */
.tech-pan-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tech-pan-title .proto-icon {
  display: inline-flex;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  padding: 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(98,57,236,0.18) 0%, rgba(255,110,196,0.10) 100%);
  border: 1px solid rgba(155,140,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  filter: drop-shadow(0 4px 10px rgba(98,57,236,0.35));
}
.tech-pan-title .proto-icon svg { width: 100%; height: 100%; display: block; }

.tech-button .tech-btn-ico {
  display: inline-flex;
  width: 20px; height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.85;
  transition: opacity 180ms;
}
.tech-button .tech-btn-ico svg { width: 100%; height: 100%; display: block; }
.tech-button:hover .tech-btn-ico,
.tech-button.active .tech-btn-ico { opacity: 1; }

@media (max-width: 600px) {
  .tech-pan-title .proto-icon { width: 30px; height: 30px; flex-basis: 30px; padding: 4px; border-radius: 8px; }
  .tech-button .tech-btn-ico { width: 16px; height: 16px; margin-right: 6px; }
}

/* === Server Map v3: marquee flags + supernova pulse + shorter canvas === */
.server-map-canvas .map-svg {
  aspect-ratio: 1000 / 420;
  max-height: 460px;
  margin-inline: auto;
}

/* Supernova-style pin pulse: scale to a per-pin --ps, with two phase-offset halos */
.map-svg .srv-pin .halo {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: snovaPulse 3.6s ease-out infinite;
  animation-delay: var(--pd, 0s);
}
.map-svg .srv-pin .halo-2 {
  animation: snovaPulse 3.6s ease-out infinite;
  animation-delay: calc(var(--pd, 0s) + 1.8s);
}
.map-svg .srv-pin.is-hub .halo,
.map-svg .srv-pin.is-hub .halo-2 {
  animation-duration: 3.2s;
}
@keyframes snovaPulse {
  0%   { transform: scale(0.25); opacity: 0.95; }
  35%  { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(var(--ps, 1.8)); opacity: 0; }
}
.map-svg .srv-pin .dot {
  filter: drop-shadow(0 0 5px rgba(255,110,196,0.65));
  animation: snovaDotBlink 3.6s ease-out infinite;
  animation-delay: var(--pd, 0s);
}
@keyframes snovaDotBlink {
  0%, 5%   { transform: scale(1.25); filter: drop-shadow(0 0 9px rgba(255,200,230,0.95)); }
  100%     { transform: scale(1);    filter: drop-shadow(0 0 5px rgba(255,110,196,0.65)); }
}

/* Marquee flag rail */
.server-map-canvas .server-map-flags {
  position: relative;
  padding: 14px 0 22px;
  overflow: hidden;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.server-map-canvas .server-map-flags-track {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  animation: flagsMarquee 60s linear infinite;
  will-change: transform;
}
.server-map-canvas .server-map-flags:hover .server-map-flags-track {
  animation-play-state: paused;
}
@keyframes flagsMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.server-map-canvas .server-map-flags-track .flag-chip {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .map-svg .srv-pin .halo,
  .map-svg .srv-pin .halo-2,
  .map-svg .srv-pin .dot { animation: none !important; }
  .server-map-canvas .server-map-flags-track { animation: none !important; }
}
@media (max-width: 768px) {
  .server-map-canvas .server-map-flags-track { animation-duration: 45s; }
}

/* === Technologies v2: compact 1-row tabs + swipe-carousel panel === */
.tech-buttons {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 14px;
  margin: 0 auto 14px;
  max-width: 1200px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.tech-buttons::-webkit-scrollbar { display: none; }
.tech-button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 7px 14px;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tech-button .tech-btn-ico {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  flex: 0 0 14px;
}

/* Swipe-carousel panel */
.tech-pans {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 4px 4px 14px;
  margin: 0 auto;
  max-width: 1100px;
  scrollbar-width: none;
  min-height: 0;
}
.tech-pans::-webkit-scrollbar { display: none; }
.tech-pan {
  display: block !important;
  flex: 0 0 100%;
  scroll-snap-align: center;
  animation: none;
  opacity: 1;
}
@media (max-width: 720px) {
  .tech-button { padding: 6px 11px; font-size: 0.8rem; gap: 3px; }
  .tech-button .tech-btn-ico { width: 13px; height: 13px; margin-right: 3px; flex-basis: 13px; }
  .tech-buttons { gap: 6px; padding-bottom: 10px; }
}

/* === Testimonials v2: infinite swipe carousel, no arrows === */
.t-controls { display: none !important; }
.testimonial-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 24px;
  margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.testimonial-viewport::-webkit-scrollbar { display: none; }
.testimonial-viewport .testimonial-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow: visible;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding: 0 8px;
  margin: 0;
  width: max-content;
}
.testimonial-viewport .testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-viewport .testimonial { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-viewport { scroll-behavior: auto; }
}
/* ============================================================
   Mobile-Responsive Layer (final overrides)
   Breakpoints: 992 / 768 / 600 / 480
   Loaded after all earlier rules; uses single-class specificity
   so it cleanly wins over the section-specific media queries.
   ============================================================ */

/* ---------- Hamburger button styling ---------- */
.site-header .nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(28, 22, 65, 0.6);
  border: 1px solid rgba(98, 57, 236, 0.45);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms, border-color 160ms;
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle.is-open {
  background: rgba(98, 57, 236, 0.32);
  border-color: rgba(155, 140, 255, 0.7);
}
.site-header .nav-toggle .nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.6,.05,.3,.99), opacity 160ms;
}
.site-header .nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header .nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-header .nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Tablet & below (≤ 992px) ---------- */
@media (max-width: 992px) {
  .site-header .brand .slogan { display: none; }
}

/* ---------- Tablet (≤ 900px): header collapses ---------- */
@media (max-width: 900px) {
  .site-header .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .site-header .top-bar {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 14px 10px 0;
    align-items: center;
  }
  .site-header .brand { order: 1; flex: 0 1 auto; min-width: 0; }
  .site-header .top-right { order: 3; flex: 0 0 auto; gap: 8px; }
  .site-header .nav-row {
    display: none;
    background: linear-gradient(180deg, rgba(15, 12, 40, 0.98) 0%, rgba(28, 22, 65, 0.96) 100%);
    border-top: 1px solid rgba(98, 57, 236, 0.28);
    border-bottom: 1px solid rgba(98, 57, 236, 0.28);
    backdrop-filter: blur(10px);
  }
  .site-header .nav-row.open { display: block; }
  .site-header .nav-row.open .main-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 14px;
  }
  .site-header .nav-row.open .main-nav > li {
    position: static;
    border-bottom: 1px solid rgba(98, 57, 236, 0.16);
  }
  .site-header .nav-row.open .main-nav > li:last-child { border-bottom: none; }
  .site-header .nav-row.open .main-nav > li > a {
    padding: 14px 24px;
    font-size: 1rem;
    width: 100%;
    text-align: left;
  }
  .site-header .nav-row.open .main-nav .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 0 12px !important;
    margin-left: 12px;
    display: none !important;
  }
  .site-header .nav-row.open .main-nav > li.is-open > .sub-menu {
    display: block !important;
  }
  .site-header .nav-row.open .main-nav .sub-menu a {
    padding: 10px 18px !important;
    font-size: 0.92rem !important;
  }
}

/* ---------- Large phone & below (≤ 600px) ---------- */
@media (max-width: 600px) {
  /* Container: tighter gutter */
  .container { padding-left: 16px; padding-right: 16px; }

  /* Typography */
  .section-title { font-size: 1.55rem !important; line-height: 1.18; }
  .section-eyebrow {
    font-size: 0.72rem; letter-spacing: 0.18em;
    /* Center eyebrow pill on mobile (matches hero ROCKETVPN tag) */
    display: block;
    width: max-content;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .page-header .section-eyebrow { margin-left: 0; margin-right: 0; }

  /* Header brand: smaller logo, hide auth labels */
  .site-header .brand img { height: 56px !important; }
  .site-header .top-bar { padding: 8px 14px 8px 0; }
  .site-header .auth .btn-register span,
  .site-header .auth .btn-login span { display: none; }
  .site-header .auth .btn-register,
  .site-header .auth .btn-login {
    padding: 8px 10px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }
  .site-header .flagi { gap: 4px; }
  .site-header .flagi a { padding: 0; }
  .site-header .flagi img { width: 22px; height: 14px; }

  /* Hero: stack + scale */
  .hero { padding: 60px 0 50px; }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.1rem) !important; line-height: 1.15; }
  .hero .lede { font-size: 1rem; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { width: 100%; max-width: 320px; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .hero .text-side { text-align: center; }

  /* Buttons: touch-friendly */
  .btn { min-height: 44px; padding: 0.85em 1.4em; }
  .btn-lg { padding: 1em 1.6em; font-size: 1rem; }

  /* Features */
  .features { padding: 44px 0; }
  .features .section-title { margin-bottom: 28px; }
  .feature-grid { gap: 14px; }
  .feature-grid .feature-card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 22px 18px;
  }
  .feature-card h3 { font-size: 1.05rem; }
  .feature-card p { font-size: 0.92rem; }

  /* Pricing */
  .pricing-grid { gap: 14px; grid-template-columns: 1fr !important; }
  .price-card { padding: 24px 20px; }

  /* Technologies */
  .technologies-block { padding: 44px 0 60px; }
  .tech-pan { padding: 20px 16px !important; }
  .tech-pan-title { gap: 10px; }
  .tech-pan-title .proto-icon { width: 28px !important; height: 28px !important; flex-basis: 28px; padding: 4px !important; }

  /* Server map: shorter + 2-col stats + smaller pins */
  .server-map { padding: 44px 0 30px; }
  .server-map-canvas { padding: 12px 12px 0 !important; border-radius: 16px !important; }
  .server-map-canvas .map-svg {
    aspect-ratio: 1000 / 540 !important;
    max-height: 280px;
  }
  .server-map-canvas .server-map-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 14px 2px !important;
  }
  .server-map-canvas .map-stat-num { font-size: 1.4rem !important; }
  .server-map-canvas .map-stat-lbl { font-size: 0.65rem !important; }
  .server-map-canvas .flag-chip { width: 30px; height: 22px; }

  /* Testimonials */
  .testimonial-viewport .testimonial-track { gap: 14px; padding: 0 4px; }
  .testimonial { flex: 0 0 86vw !important; max-width: 320px; padding: 22px 18px !important; }
  .t-photo img { width: 56px; height: 56px; }
  .t-flag { width: 22px; height: 22px; }

  /* News header */
  .news-header-grid { gap: 18px !important; }
  .tag-cloud-block { padding: 12px 14px 10px !important; }
  .tag-cloud-block .tag-pill { padding: 4px 10px; font-size: 0.78rem; }
  .tag-cloud-toggle { font-size: 0.78rem; padding: 6px 14px; }

  /* Post grid */
  .post-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Footer */
  .foter-net,
  footer .container > * { flex-direction: column; align-items: stretch; }
  .footer-links-block,
  .footer-reg-form-block,
  .footer-contacts-block,
  .footer-soc-block,
  .footer-pay-block { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  footer .frf-input,
  footer input[type="email"],
  footer input[type="text"] { width: 100% !important; box-sizing: border-box; }

  /* Premium page */
  .prem-hero { padding: 56px 0 40px !important; }
  .prem-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .prem-hero-visual { height: 320px !important; }
  .prem-ipcard { width: 88% !important; }
  .prem-orbit-ring-1 { width: 240px !important; height: 240px !important; }
  .prem-orbit-ring-2 { width: 300px !important; height: 300px !important; }
  .prem-rate-card { padding: 32px 22px 26px !important; }
  .prem-rate-num { font-size: clamp(2.4rem, 12vw, 3.5rem) !important; }
  .prem-flow-steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  .prem-flow-line { display: none !important; }
  .prem-faq-item { padding: 12px 16px !important; }
  .prem-faq-item summary { font-size: 0.95rem; }

  /* Floating decorations: tone down */
  .orb-1, .orb-2, .orb-3 { transform: scale(0.6); opacity: 0.45 !important; }
  .hud-grid { opacity: 0.25 !important; }

  /* Body lock when nav menu open */
  body.nav-open { overflow: hidden; touch-action: none; }
}

/* ---------- Small phone (≤ 480px) ---------- */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .section-title { font-size: 1.35rem !important; }
  .hero h1 { font-size: clamp(1.55rem, 8vw, 1.85rem) !important; }
  .hero .lede { font-size: 0.94rem; }

  /* Header even tighter */
  .site-header .brand img { height: 48px !important; }
  .site-header .flagi a:nth-child(n+4) { display: none; }   /* show ≤3 lang chips inline; rest accessible via menu */
  .site-header .top-bar { gap: 6px; }

  /* Stats stay 2-col but tighter */
  .server-map-canvas .map-stat-num { font-size: 1.2rem !important; }
  .server-map-canvas .server-map-stats { padding: 12px 2px !important; }

  /* Testimonials full-bleed */
  .testimonial { flex-basis: 90vw !important; padding: 20px 16px !important; }

  /* Tech tab labels truncate-safe */
  .tech-button { font-size: 0.78rem !important; padding: 6px 10px !important; }

  /* Premium tighter */
  .prem-hero-visual { height: 260px !important; }
  .prem-ipcard { width: 92% !important; padding: 14px 18px 18px !important; }
  .prem-ipcard-head { margin-bottom: 12px !important; padding-bottom: 10px !important; }
  .prem-bars { height: 38px !important; }
}

/* ---------- Touch-only device: enforce 44px tap targets ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .site-header .main-nav > li > a { min-height: 44px; display: inline-flex; align-items: center; }
  .tag-pill { min-height: 36px; }
  .flag-chip,
  .tech-button { min-height: 36px; }
  .prem-faq-item summary { min-height: 44px; }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .orb-1, .orb-2, .orb-3, .sparkle,
  .prem-ipcard, .prem-orbit-ring, .prem-bars span, .prem-ip-cursor,
  .prem-pulse-dot, .prem-rate-card::before,
  .nav-toggle-bar { animation: none !important; transition: none !important; }
}

/* === Server Map v3 supernova pulse: bigger halos, varied per-pin duration === */
.map-svg .srv-pin .halo {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: snovaPulseV3 var(--pdur, 3.8s) ease-out infinite;
  animation-delay: var(--pd, 0s);
}
.map-svg .srv-pin .halo-2 {
  animation: snovaPulseV3 var(--pdur, 3.8s) ease-out infinite;
  animation-delay: calc(var(--pd, 0s) + var(--pdur, 3.8s) / 2);
}
@keyframes snovaPulseV3 {
  0%   { transform: scale(0.20); opacity: 0.95; }
  55%  { transform: scale(1.05); opacity: 0.50; }
  100% { transform: scale(var(--ps, 1.9)); opacity: 0; }
}
.map-svg .srv-pin--pink   .dot { filter: drop-shadow(0 0 5px rgba(255,110,196,0.75)); }
.map-svg .srv-pin--violet .dot { filter: drop-shadow(0 0 5px rgba(169,139,255,0.75)); }
.map-svg .srv-pin--cyan   .dot { filter: drop-shadow(0 0 5px rgba(110,231,255,0.80)); }
.map-svg .srv-pin--mint   .dot { filter: drop-shadow(0 0 5px rgba(110,255,183,0.75)); }
.map-svg .srv-pin--gold   .dot { filter: drop-shadow(0 0 5px rgba(255,214,110,0.85)); }
.map-svg .srv-pin.is-hub  .dot { filter: drop-shadow(0 0 10px rgba(199,179,255,0.95)); }
.map-svg .srv-pin .dot {
  animation: snovaDotBlinkV3 var(--pdur, 3.8s) ease-out infinite;
  animation-delay: var(--pd, 0s);
}
@keyframes snovaDotBlinkV3 {
  0%, 5%   { transform: scale(1.35); }
  100%     { transform: scale(1); }
}

/* ============================================================
   Mobile horizontal-overflow hard clipping
   Ensures no cosmic decoration / wide SVG / marquee ever pushes
   the document past the viewport edge on phones.
   ============================================================ */
html { overflow-x: hidden; }
html, body { max-width: 100vw; width: 100%; }
@supports (overflow: clip) {
  html { overflow-x: clip; overflow-clip-margin: 0; }
}

/* Belt-and-suspenders: clip every top-level section so a single offending
   child can't break the whole page. Sections that legitimately need
   horizontal scrolling (tech-buttons, testimonials, flag rail) all have
   their own inner scroller — the section itself stays bounded. */
.hero,
.hero.with-rocket,
.page-header,
.features,
.technologies-block,
.testimonials,
.server-map,
.prem-hero,
.prem-rate,
.prem-flow,
.prem-faq,
.prem-features,
section.pricing,
.news-header,
footer { overflow-x: clip; }
@supports not (overflow: clip) {
  .hero, .hero.with-rocket, .page-header, .features, .technologies-block,
  .testimonials, .server-map, .prem-hero, .prem-rate, .prem-flow, .prem-faq,
  .prem-features, section.pricing, .news-header, footer { overflow-x: hidden; }
}

/* Hero orbit + ring decorations stay inside their section */
.hero .orbit { left: 0; right: 0; width: auto; }
.satellite-stage, .rocket-stage { max-width: 100%; }
.satellite-stage svg, .rocket-stage svg {
  max-width: 100%; height: auto;
}

/* Premium orbit rings recentered + clipped on phone */
@media (max-width: 600px) {
  .prem-hero-visual { overflow: hidden; }
}

/* Body scroll-lock when nav-toggle menu is open (already set, restated for safety) */
body.nav-open { overflow: hidden; }

/* === Testimonials desktop side arrows === */
.testimonial-carousel {
  position: relative;
}
.t-arrow-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 22, 65, 0.78);
  border: 1px solid rgba(155, 140, 255, 0.40);
  border-radius: 50%;
  color: #d4cbff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: background 180ms, border-color 180ms, color 180ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
}
.t-arrow-side:hover {
  background: rgba(98, 57, 236, 0.55);
  border-color: rgba(199, 179, 255, 0.85);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(98, 57, 236, 0.55);
}
.t-arrow-side:active { transform: translateY(-50%) scale(0.94); }
.t-arrow-side svg { width: 22px; height: 22px; display: block; }
.t-arrow-prev { left: -22px; }
.t-arrow-next { right: -22px; }

@media (max-width: 768px) {
  .t-arrow-side { display: none !important; }
}
@media (min-width: 1500px) {
  .t-arrow-prev { left: -28px; }
  .t-arrow-next { right: -28px; }
}

/* === Pricing horizontal swipe-carousel on mobile (Platinum first, peek next) === */
@media (max-width: 600px) {
  section.pricing > .container > .pricing-grid {
    grid-template-columns: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 6px 16px 18px;
    margin: 0 -16px;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
  }
  section.pricing > .container > .pricing-grid::-webkit-scrollbar { display: none; }
  section.pricing > .container > .pricing-grid .price-card {
    flex: 0 0 86%;
    max-width: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Platinum/popular card first so initial scroll position shows it */
  section.pricing > .container > .pricing-grid .price-card.popular { order: -1; }
}

/* === Flag marquee: keep full-size chips on mobile, minimal edge fade === */
@media (max-width: 600px) {
  .server-map-canvas .flag-chip {
    width: 36px !important;
    height: 27px !important;
  }
  .server-map-canvas .server-map-flags {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%) !important;
            mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%) !important;
  }
}

/* === Pricing mobile order: Platinum → Gold → Silver → Bronze === */
@media (max-width: 600px) {
  section.pricing > .container > .pricing-grid .price-card.popular { order: 0 !important; }
  section.pricing > .container > .pricing-grid .price-card:nth-child(1) { order: 4; }
  section.pricing > .container > .pricing-grid .price-card:nth-child(2) { order: 3; }
  section.pricing > .container > .pricing-grid .price-card:nth-child(3) { order: 2; }
  section.pricing > .container > .pricing-grid .price-card:nth-child(4) { order: 1; }
}

/* === Feature cards: center-align on mobile === */
@media (max-width: 600px) {
  .feature-card {
    text-align: center;
    align-items: center;
  }
  .feature-card .icon {
    margin-left: auto;
    margin-right: auto;
  }
  .feature-card h3,
  .feature-card p {
    text-align: center;
  }
}

/* === Map: zoom content on mobile to remove edge whitespace === */
@media (max-width: 768px) {
  .server-map-canvas { padding: 10px 8px 0 !important; }
  .server-map-canvas .map-svg { aspect-ratio: 1000/420 !important; max-height: 320px; }
  .map-svg .map-content {
    transform: translate(-40px, -20px) scale(1.18);
    transform-origin: 500px 240px;
    transform-box: view-box;
  }
}
@media (max-width: 600px) {
  .server-map-canvas { padding: 8px 6px 0 !important; }
  .server-map-canvas .map-svg { aspect-ratio: 1000/440 !important; max-height: 300px; }
  .map-svg .map-content {
    transform: translate(-50px, -20px) scale(1.22);
  }
}
@media (max-width: 480px) {
  .server-map-canvas .map-svg { aspect-ratio: 1000/460 !important; }
  .map-svg .map-content {
    transform: translate(-55px, -15px) scale(1.26);
  }
}

/* === Feature cards: center alignment on ALL viewports === */
.feature-card {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.feature-card .icon {
  margin-left: auto;
  margin-right: auto;
}
.feature-card h3,
.feature-card p {
  text-align: center;
}

/* === Map: subtle desktop zoom to fill canvas (lighter than mobile) === */
.map-svg .map-content {
  transform: translate(-25px, -15px) scale(1.10);
  transform-origin: 500px 240px;
  transform-box: view-box;
}

/* === Cheburator-style L-bracket corner frames (mobile only) === */
.frame-corners {
  display: none;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 5;
}
.frame-corner {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 0 solid rgba(155, 140, 255, 0.55);
  filter: drop-shadow(0 0 6px rgba(98, 57, 236, 0.45));
  pointer-events: none;
}
.frame-corner-tl {
  top: 10px; left: 10px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  border-top-left-radius: 10px;
}
.frame-corner-tr {
  top: 10px; right: 10px;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  border-top-right-radius: 10px;
}
.frame-corner-bl {
  bottom: 10px; left: 10px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  border-bottom-left-radius: 10px;
}
.frame-corner-br {
  bottom: 10px; right: 10px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
  border-bottom-right-radius: 10px;
}
@media (max-width: 900px) {
  .frame-corners { display: block; }
}
@media (max-width: 480px) {
  .frame-corner { width: 38px; height: 38px; }
  .frame-corner-tl, .frame-corner-tr { top: 8px; }
  .frame-corner-bl, .frame-corner-br { bottom: 8px; }
  .frame-corner-tl, .frame-corner-bl { left: 8px; }
  .frame-corner-tr, .frame-corner-br { right: 8px; }
}

/* === Header sticky: stronger guarantees (overrides any clip ancestor) === */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 300 !important;
  isolation: isolate;
}
@media (max-width: 900px) {
  /* Nav-row dropdown anchored to bottom of sticky top-bar */
  .site-header .nav-row.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* === Fix: body overflow-x: hidden was breaking position:sticky on header === */
/* overflow-x: hidden implicitly makes body a scroll container (overflow-y becomes auto),
   which captures sticky and stops it from anchoring to the viewport. Use 'clip' instead:
   same visual containment, no scroll container creation. */
@supports (overflow: clip) {
  body { overflow-x: clip !important; overflow-y: visible !important; }
}

/* === Corner frames: smaller === */
.frame-corner {
  width: 28px !important;
  height: 28px !important;
}
.frame-corner-tl, .frame-corner-tr { top: 8px !important; }
.frame-corner-bl, .frame-corner-br { bottom: 8px !important; }
.frame-corner-tl, .frame-corner-bl { left: 8px !important; }
.frame-corner-tr, .frame-corner-br { right: 8px !important; }
@media (max-width: 480px) {
  .frame-corner { width: 22px !important; height: 22px !important; }
  .frame-corner-tl, .frame-corner-tr { top: 6px !important; }
  .frame-corner-bl, .frame-corner-br { bottom: 6px !important; }
  .frame-corner-tl, .frame-corner-bl { left: 6px !important; }
  .frame-corner-tr, .frame-corner-br { right: 6px !important; }
}

/* === Corner frames v2: bottom only, smaller, raised === */
.frame-corner-tl, .frame-corner-tr { display: none !important; }
.frame-corner-bl, .frame-corner-br {
  width: 20px !important;
  height: 20px !important;
  bottom: 18px !important;
}
.frame-corner-bl { left: 8px !important; }
.frame-corner-br { right: 8px !important; }
@media (max-width: 480px) {
  .frame-corner-bl, .frame-corner-br {
    width: 16px !important;
    height: 16px !important;
    bottom: 16px !important;
  }
  .frame-corner-bl { left: 6px !important; }
  .frame-corner-br { right: 6px !important; }
}

/* === Corner frames: sharp rectangular corners === */
.frame-corner,
.frame-corner-tl, .frame-corner-tr,
.frame-corner-bl, .frame-corner-br {
  border-radius: 0 !important;
}

/* === Corner frames: anchor each corner directly to viewport,
   use dvh to follow mobile-Chrome address-bar resizing === */
.frame-corners {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  pointer-events: none !important;
}
.frame-corner-bl, .frame-corner-br {
  position: fixed !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  z-index: 5 !important;
}
.frame-corner-bl { left: 8px !important; right: auto !important; top: auto !important; }
.frame-corner-br { right: 8px !important; left: auto !important; top: auto !important; }
@media (max-width: 480px) {
  .frame-corner-bl, .frame-corner-br {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  .frame-corner-bl { left: 6px !important; }
  .frame-corner-br { right: 6px !important; }
}

/* === Corner frames v3: copy cheburator.bot HUD-corners 1:1
   Single fixed wrapper with inset, children as absolute pseudo-corners.
   z-index: -1 puts the whole layer behind interactive content;
   no nested fixed positioning = no Chrome-mobile address-bar bug.   === */

/* Reset everything we set in previous iterations */
.frame-corners,
.frame-corner,
.frame-corner-tl, .frame-corner-tr,
.frame-corner-bl, .frame-corner-br {
  all: revert;
}

/* Wrapper: single fixed layer behind content */
.frame-corners {
  position: fixed !important;
  inset: 14px;
  z-index: -1;
  pointer-events: none;
  display: none;
}
@media (max-width: 900px) {
  .frame-corners { display: block; }
}
@media (max-width: 600px) {
  .frame-corners { inset: 8px; }
}

/* Each corner: absolute inside the fixed wrapper */
.frame-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(155, 140, 255, 0.55);
  border-radius: 0;
  pointer-events: none;
  background: transparent;
}
@media (max-width: 600px) {
  .frame-corner { width: 18px; height: 18px; }
}

/* Hide top corners — user wants bottom only */
.frame-corner-tl,
.frame-corner-tr { display: none !important; }

/* Bottom-left: only show bottom + left borders */
.frame-corner-bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}
/* Bottom-right: only show bottom + right borders */
.frame-corner-br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

/* === Fix: white overscroll gap + corner-frame z-index === */
/* Dark html background prevents the white flash visible when the page
   overscrolls past content on mobile Chrome/Safari. */
html { background: #02031C !important; }
/* Disable elastic overscroll so address bar/viewport changes don't
   produce flashes of background or jitter on fixed elements. */
html, body { overscroll-behavior-y: none; }

/* Bring corner frames above body background so they always render
   correctly regardless of overscroll state. pointer-events: none
   ensures they still don't block clicks. */
.frame-corners { z-index: 5 !important; }

/* === Fix v2: bottom of page must stay deep-blue + corners pinned to visual viewport === */

/* 1. body gradient now cycles BACK to deep blue at the bottom so the bottom
   of long pages stays the brand deep navy, not the section dark-grey. */
body {
  background: linear-gradient(180deg,
    #02031C 0%,
    #0F0B22 30%,
    #15122b 60%,
    #0F0B22 85%,
    #02031C 100%
  ) !important;
}

/* 2. html matches the deepest body color so overscroll never flashes. */
html {
  background: #02031C !important;
}

/* 3. Corner-frame wrapper: explicit 100dvh height makes the wrapper track
   the dynamic visual viewport, so children at bottom: X stay locked to
   the visible bottom edge even when Chrome's address bar hides/shows. */
.frame-corners {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  inset: auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Children: absolute inside the dvh-sized wrapper.
   Use 'top: calc(...)' instead of 'bottom: X' — Chrome mobile handles
   top-anchored fixed/absolute positions more predictably during scroll. */
.frame-corner-bl,
.frame-corner-br {
  position: absolute !important;
  top: calc(100dvh - 38px) !important;
  bottom: auto !important;
}
.frame-corner-bl { left: 8px !important; right: auto !important; }
.frame-corner-br { right: 8px !important; left: auto !important; }
@media (max-width: 480px) {
  .frame-corner-bl,
  .frame-corner-br {
    top: calc(100dvh - 26px) !important;
  }
  .frame-corner-bl { left: 6px !important; }
  .frame-corner-br { right: 6px !important; }
}

/* ============================================================
   Language switcher — single current flag + dropdown
   ============================================================ */

.site-header .lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-header .lang-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(28, 22, 65, 0.65);
  border: 1px solid rgba(98, 57, 236, 0.35);
  border-radius: 999px;
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.site-header .lang-current:hover {
  background: rgba(98, 57, 236, 0.22);
  border-color: rgba(155, 140, 255, 0.55);
}

.site-header .lang-current img {
  width: 26px;
  height: 17px;
  border-radius: 3px;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

.site-header .lang-current .lang-current-caret {
  color: #c9c4ec;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.85;
  transition: transform 200ms ease;
}

.site-header .lang-switcher.is-open .lang-current-caret {
  transform: rotate(180deg);
}

/* Dropdown panel ----------------------------------------------- */

.site-header .lang-switcher .flagi {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  gap: 4px;
  min-width: 132px;

  background: linear-gradient(160deg, rgba(28, 22, 65, 0.98), rgba(15, 12, 40, 0.99));
  border: 1px solid rgba(98, 57, 236, 0.45);
  border-radius: 12px;
  box-shadow:
    0 18px 40px rgba(2, 3, 28, 0.85),
    0 0 24px rgba(131, 95, 253, 0.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  z-index: 9999;
}

.site-header .lang-switcher.is-open .flagi {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header .lang-switcher .flagi li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .lang-switcher .flagi a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #c9c4ec;
  transition: background 140ms ease, color 140ms ease, transform 100ms ease;
  border-left: 2px solid transparent;
}

.site-header .lang-switcher .flagi a:hover {
  background: rgba(98, 57, 236, 0.22);
  color: #ffffff;
  border-left-color: #9b8cff;
}

.site-header .lang-switcher .flagi a img {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

.site-header .lang-switcher .flagi a .lang-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-header .lang-switcher .flagi a.active {
  background: rgba(98, 57, 236, 0.32);
  color: #ffffff;
  border-left-color: #c547ff;
}

/* Hide the now-deleted .frame-corner spans (just in case any remain cached) */
.frame-corners, .frame-corner { display: none !important; }

/* ============================================================
   Mobile performance — disable heavy animations on small/touch
   devices and reduce paint load.
   ============================================================ */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Stars: keep visible but static (no twinkle) */
  .sparkle {
    animation: none !important;
    opacity: 0.55 !important;
    transform: scale(1) !important;
    will-change: auto !important;
  }
  /* Cut sparkle count visually — hide every other one to reduce clutter */
  .sparkle:nth-child(3n) { display: none !important; }

  /* Orbs: freeze floats, dim further */
  .orb, .orb-1, .orb-2, .orb-3 {
    animation: none !important;
    opacity: 0.30 !important;
    filter: blur(36px) !important;
    will-change: auto !important;
  }

  /* HUD grid: lighter */
  .grid-hud {
    opacity: 0.18 !important;
  }

  /* Disable shimmer/glow pulses that paint constantly */
  .hero h1, .section-title {
    animation: none !important;
    background-position: 0 0 !important;
  }

  /* Heavy backdrop-filter blurs are GPU-killers on older phones */
  .site-header,
  .site-header .nav-row,
  .site-header .lang-switcher .flagi {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Halo / rocket effects: stop spinning */
  .rocket-stage::before,
  .rocket-body,
  .rocket-flames,
  .rocket-spark,
  .rocket-window-glow,
  .hero .orbit,
  .hero .orbit::before,
  .hero .orbit::after,
  .comet {
    animation: none !important;
  }
}

/* ============================================================
   Mobile language switcher tweak — push the dropdown so it
   doesn't overflow the viewport on narrow screens.
   ============================================================ */

@media (max-width: 480px) {
  .site-header .lang-switcher .flagi {
    right: 0;
    min-width: 140px;
  }
  .site-header .lang-current {
    padding: 4px 8px 4px 5px;
  }
  .site-header .lang-current img {
    width: 22px;
    height: 14px;
  }
}