#staggered-menu-mount {

  display: none !important;

}



/* ==========================================================================

   I TUBE • Master Design System & Stylesheet

   Theme: Obsidian Cyber-Luxe (Crimson #FF0055, Violet #9D4EDD, Cyan #00F5D4)

   ========================================================================== */



:root {

  --color-bg-base: #07050a;

  --color-bg-surface: #0e0a16;

  --color-bg-card: rgba(22, 17, 32, 0.72);

  --color-border: rgba(255, 255, 255, 0.09);

  --color-border-glow: rgba(255, 0, 85, 0.25);

  

  --color-crimson: #FF0055;

  --color-crimson-glow: rgba(255, 0, 85, 0.4);

  --color-violet: #9D4EDD;

  --color-violet-glow: rgba(157, 78, 221, 0.35);

  --color-cyan: #00F5D4;

  --color-cyan-glow: rgba(0, 245, 212, 0.35);



  --text-primary: #FFFFFF;

  --text-secondary: rgba(244, 244, 248, 0.68);

  --text-muted: rgba(244, 244, 248, 0.44);



  --font-display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-mono: 'JetBrains Mono', monospace;



  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

}



/* Zero Margin Space Mandate */

html, body {

  margin: 0 !important;

  padding: 0 !important;

  width: 100% !important;

  max-width: 100vw !important;

  overflow-x: clip !important;

  box-sizing: border-box !important;

  background-color: var(--color-bg-base);

  color: var(--text-primary);

  font-family: var(--font-body);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  line-height: 1.6;

}



*, *::before, *::after {

  box-sizing: inherit;

  -webkit-tap-highlight-color: transparent !important;

  -webkit-touch-callout: none;

}



*:focus {

  outline: none !important;

}



*:focus-visible {

  outline: 2px solid rgba(255, 0, 85, 0.6) !important;

  outline-offset: 2px;

}



/* Strict Themed Selection - Banned Default Browser Blue */

::selection {

  background: var(--color-crimson) !important;

  color: #FFFFFF !important;

}



::-moz-selection {

  background: var(--color-crimson) !important;

  color: #FFFFFF !important;

}



/* Remove blue highlighting on interactive elements */

button, a, .specular-button, .card-swap, .card-swap *, .infinite-spiral, .infinite-spiral *, .platform-tile, .stack-ctrl-btn, .header-cta-btn, .header-brand, canvas, .particle-text, .particle-text * {

  -webkit-user-select: none !important;

  -moz-user-select: none !important;

  -ms-user-select: none !important;

  user-select: none !important;

  -webkit-tap-highlight-color: transparent !important;

  outline: none !important;

}



/* Layout Container */

.page-wrapper {

  position: relative;

  width: 100%;

  overflow-x: clip;

}



/* Site Header */

.site-header {

  position: fixed;

  top: 16px;

  left: 0;

  width: 100%;

  z-index: 1000;

  display: flex;

  justify-content: center;

  align-items: center;

  pointer-events: none;

  padding: 0 24px;

  transition: top 0.35s var(--ease-smooth);

}



.site-header.is-scrolled {

  top: 12px;

}



.site-header > * {

  pointer-events: auto;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  max-width: 1140px;

  width: 100%;

  padding: 6px 8px 6px 16px;

  background: rgba(14, 10, 22, 0.82);

  border: 1px solid rgba(255, 0, 85, 0.28);

  border-radius: 9999px;

  backdrop-filter: blur(28px) saturate(1.8);

  -webkit-backdrop-filter: blur(28px) saturate(1.8);

  box-shadow: 

    0 20px 50px rgba(0, 0, 0, 0.85),

    0 0 35px rgba(255, 0, 85, 0.12),

    inset 0 1px 0 rgba(255, 255, 255, 0.14),

    inset 0 -1px 0 rgba(0, 245, 212, 0.08);

  transition: 

    background-color 0.35s ease,

    border-color 0.35s var(--ease-smooth),

    box-shadow 0.35s var(--ease-smooth);

}



.header-inner:hover {

  border-color: rgba(0, 245, 212, 0.42);

  box-shadow: 

    0 24px 60px rgba(0, 0, 0, 0.9),

    0 0 45px rgba(0, 245, 212, 0.18),

    0 0 25px rgba(255, 0, 85, 0.16),

    inset 0 1px 0 rgba(255, 255, 255, 0.22);

}



.site-header.is-scrolled .header-inner {

  background: rgba(10, 7, 16, 0.94);

  border-color: rgba(255, 0, 85, 0.36);

  box-shadow: 

    0 24px 60px rgba(0, 0, 0, 0.96),

    0 0 40px rgba(255, 0, 85, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 0.16);

}



/* Custom Header Logo & CTA */

.header-brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: var(--text-primary);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 1.15rem;

  letter-spacing: -0.02em;

  transition: opacity 0.25s ease;

  flex-shrink: 0;

}



.header-brand:hover {

  opacity: 0.95;

}



.header-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: transform 0.25s var(--ease-smooth);
}



.header-brand:hover .header-brand-icon {
  transform: scale(1.05);
  box-shadow: none !important;
  filter: none !important;
}



.header-brand-icon svg {

  width: 20px;

  height: 20px;

  fill: #FFFFFF;

  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));

}



.header-brand-icon circle {

  filter: drop-shadow(0 0 4px #00F5D4);

}



.header-brand span {

  background: linear-gradient(135deg, #FFFFFF 65%, rgba(244, 244, 248, 0.72) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight: 800;

}



/* PillNav Mount & Obsidian Theme Harmonization */

#pillnav-mount {

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 1;

  max-width: 680px;

}



#pillnav-mount .pill-nav {

  font-family: var(--font-body);

}



#pillnav-mount .pill-nav__item {

  font-weight: 600;

  letter-spacing: -0.01em;

  transition: color 0.2s ease, opacity 0.2s ease;

}



#pillnav-mount .pill-nav__surface {

  background: rgba(20, 14, 30, 0.65) !important;

  border-radius: 9999px;

  backdrop-filter: blur(16px) saturate(1.6);

  -webkit-backdrop-filter: blur(16px) saturate(1.6);

}



#pillnav-mount .pill-nav__glide {

  background: linear-gradient(135deg, var(--color-crimson) 0%, var(--color-violet) 100%) !important;

  box-shadow: 0 4px 18px rgba(255, 0, 85, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;

}



#pillnav-mount .pill-nav__ink {

  color: #FFFFFF !important;

  font-weight: 700 !important;

}



#pillnav-mount .pill-nav__dot {

  background: var(--color-cyan) !important;

  box-shadow: 0 0 10px var(--color-cyan), 0 0 4px var(--color-cyan) !important;

}



#pillnav-mount .pill-nav__rim {

  box-shadow: inset 0 0 0 1px rgba(255, 0, 85, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

}



/* Header Action CTA Button */

.header-cta-btn {

  --sb-radius: 9999px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: linear-gradient(135deg, var(--color-crimson) 0%, #c40040 100%) !important;

  color: #FFFFFF !important;

  padding: 9px 20px !important;

  border-radius: 9999px !important;

  font-family: var(--font-body);

  font-weight: 700;

  font-size: 0.88rem;

  letter-spacing: -0.01em;

  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  box-shadow: 0 4px 18px rgba(255, 0, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease, border-color 0.25s ease;

  flex-shrink: 0;

}



.header-cta-btn .specular-button__label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #FFFFFF !important;

}



.header-cta-btn svg {

  stroke: var(--color-cyan) !important;

  filter: drop-shadow(0 0 5px rgba(0, 245, 212, 0.7));

  transition: transform 0.25s ease;

}



.header-cta-btn:hover {

  transform: translateY(-2px);

  border-color: rgba(0, 245, 212, 0.6) !important;

  box-shadow: 0 8px 28px rgba(255, 0, 85, 0.65), 0 0 20px rgba(0, 245, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);

}



.header-cta-btn:hover svg {

  transform: translateY(1.5px);

}



/* Strictly remove the 2-lines collapse button & panel from desktop navigation bar */

#pillnav-mount .pill-nav__toggle,

#pillnav-mount .pill-nav__panel {

  display: none !important;

}



#pillnav-mount .pill-nav[data-collapsed] {

  display: inline-flex !important;

  width: auto !important;

}



#pillnav-mount .pill-nav[data-collapsed] .pill-nav__bar {

  display: flex !important;

}



/* ==========================================================================

   Mobile 2-Lines Menu Toggle (Visible only on phone at top-right corner)

   ========================================================================== */



.mobile-menu-toggle {

  display: none; /* hidden on desktop */

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  padding: 0;

  margin: 0;

  background: rgba(22, 17, 32, 0.85);

  border: 1px solid rgba(255, 0, 85, 0.32);

  border-radius: 12px;

  cursor: pointer;

  outline: none;

  -webkit-tap-highlight-color: transparent !important;

  box-shadow: 

    0 4px 16px rgba(0, 0, 0, 0.6),

    0 0 12px rgba(255, 0, 85, 0.15),

    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  transition: 

    transform 0.25s var(--ease-smooth),

    border-color 0.25s ease,

    box-shadow 0.25s ease,

    background-color 0.25s ease;

  position: relative;

  z-index: 10001;

  flex-shrink: 0;

}



.mobile-menu-toggle:hover,

.mobile-menu-toggle:focus-visible {

  border-color: rgba(0, 245, 212, 0.6);

  box-shadow: 

    0 6px 20px rgba(0, 0, 0, 0.7),

    0 0 18px rgba(0, 245, 212, 0.3),

    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transform: scale(1.04);

}



.mobile-toggle-box {

  width: 20px;

  height: 13px;

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: flex-end;

}



.mobile-toggle-line {

  display: block;

  height: 2px;

  border-radius: 2px;

  transition: 

    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),

    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),

    background-color 0.3s ease,

    box-shadow 0.3s ease;

  transform-origin: center;

}



/* Top line (full length) */

.mobile-toggle-line--top {

  width: 20px;

  background: #FFFFFF;

  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);

}



/* Bottom line (cyber cyan accent, offset 2-line modern aesthetic) */

.mobile-toggle-line--bottom {

  width: 14px;

  background: var(--color-cyan);

  box-shadow: 0 0 8px rgba(0, 245, 212, 0.7);

}



.mobile-menu-toggle:hover .mobile-toggle-line--bottom {

  width: 20px;

}



/* Morphed state when menu is open: forms a glowing Cyber-Luxe 'X' */

.mobile-menu-toggle.is-active {

  border-color: rgba(0, 245, 212, 0.6);

  box-shadow: 

    0 6px 22px rgba(0, 0, 0, 0.8),

    0 0 20px rgba(0, 245, 212, 0.35),

    inset 0 1px 0 rgba(255, 255, 255, 0.25);

}



.mobile-menu-toggle.is-active .mobile-toggle-box {

  justify-content: center;

}



.mobile-menu-toggle.is-active .mobile-toggle-line--top {

  width: 18px;

  background: var(--color-crimson);

  box-shadow: 0 0 10px rgba(255, 0, 85, 0.8);

  transform: translateY(1px) rotate(45deg);

}



.mobile-menu-toggle.is-active .mobile-toggle-line--bottom {

  width: 18px;

  background: var(--color-cyan);

  box-shadow: 0 0 10px rgba(0, 245, 212, 0.8);

  transform: translateY(-1px) rotate(-45deg);

}



/* ==========================================================================

   Cyber-Luxe Mobile Navigation Drawer & Backdrop

   ========================================================================== */



.mobile-nav-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(5, 3, 9, 0.78);

  backdrop-filter: blur(16px) saturate(1.8);

  -webkit-backdrop-filter: blur(16px) saturate(1.8);

  z-index: 9998;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s var(--ease-smooth);

}



.mobile-nav-backdrop.is-open {

  opacity: 1;

  pointer-events: auto;

}



.mobile-nav-drawer {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  max-width: 380px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  background: rgba(13, 9, 20, 0.95);

  backdrop-filter: blur(36px) saturate(2);

  -webkit-backdrop-filter: blur(36px) saturate(2);

  border-left: 1px solid rgba(255, 0, 85, 0.28);

  box-shadow: 

    -25px 0 60px rgba(0, 0, 0, 0.92),

    0 0 45px rgba(255, 0, 85, 0.15),

    inset 1px 0 0 rgba(255, 255, 255, 0.1);

  transform: translateX(100%);

  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);

  overflow-y: auto;

  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  padding: 24px 20px 32px 20px;

}



.mobile-nav-drawer.is-open {

  transform: translateX(0);

}



.mobile-nav-content {

  display: flex;

  flex-direction: column;

  min-height: 100%;

  gap: 20px;

}



/* Drawer Header Bar */

.mobile-nav-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.mobile-nav-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--text-primary);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 1.15rem;

  letter-spacing: -0.02em;

}



.mobile-nav-brand span {

  background: linear-gradient(135deg, #FFFFFF 65%, rgba(244, 244, 248, 0.72) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.mobile-nav-close-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: var(--text-secondary);

  cursor: pointer;

  outline: none;

  transition: all 0.25s ease;

}



.mobile-nav-close-btn:hover {

  background: rgba(255, 0, 85, 0.2);

  border-color: rgba(255, 0, 85, 0.5);

  color: #FFFFFF;

  transform: rotate(90deg);

}



/* Meta status badge */

.mobile-nav-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 8px 12px;

  background: rgba(22, 17, 32, 0.6);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 10px;

}



.mobile-nav-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-family: var(--font-mono);

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--color-cyan);

  letter-spacing: 0.04em;

}



.mobile-badge-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--color-cyan);

  box-shadow: 0 0 8px var(--color-cyan);

}



.mobile-nav-chip-text {

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--text-muted);

  letter-spacing: 0.02em;

}



/* Navigation Links */

.mobile-nav-links {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.mobile-nav-link {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 13px 16px;

  background: rgba(22, 17, 32, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 14px;

  text-decoration: none;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-weight: 600;

  font-size: 0.98rem;

  letter-spacing: -0.01em;

  transition: 

    background-color 0.22s ease,

    border-color 0.22s ease,

    color 0.22s ease,

    transform 0.22s var(--ease-smooth),

    box-shadow 0.22s ease;

  position: relative;

  overflow: hidden;

}



.mobile-nav-link::before {

  content: '';

  position: absolute;

  left: 0;

  top: 10%;

  bottom: 10%;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: linear-gradient(180deg, var(--color-crimson), var(--color-violet));

  opacity: 0;

  transition: opacity 0.2s ease;

}



.mobile-nav-link:hover,

.mobile-nav-link:active {

  background: rgba(30, 22, 44, 0.75);

  border-color: rgba(255, 0, 85, 0.35);

  color: #FFFFFF;

  transform: translateX(4px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 0, 85, 0.15);

}



.mobile-nav-link.active {

  background: rgba(32, 22, 48, 0.85);

  border-color: rgba(255, 0, 85, 0.45);

  color: #FFFFFF;

  box-shadow: 0 4px 18px rgba(255, 0, 85, 0.25);

}



.mobile-nav-link.active::before {

  opacity: 1;

}



.mobile-nav-icon {

  width: 34px;

  height: 34px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: var(--color-cyan);

  flex-shrink: 0;

  transition: all 0.22s ease;

}



.mobile-nav-link:hover .mobile-nav-icon,

.mobile-nav-link.active .mobile-nav-icon {

  background: linear-gradient(135deg, rgba(255, 0, 85, 0.25), rgba(157, 78, 221, 0.25));

  border-color: rgba(255, 0, 85, 0.4);

  color: #FFFFFF;

  box-shadow: 0 0 12px rgba(255, 0, 85, 0.3);

}



.mobile-nav-text {

  flex: 1;

  font-weight: 700;

}



.mobile-nav-arrow {

  color: var(--text-muted);

  transition: transform 0.22s ease, color 0.22s ease;

}



.mobile-nav-link:hover .mobile-nav-arrow,

.mobile-nav-link.active .mobile-nav-arrow {

  color: var(--color-cyan);

  transform: translateX(3px);

}



.mobile-nav-chip {

  padding: 3px 8px;

  border-radius: 6px;

  background: rgba(0, 245, 212, 0.15);

  border: 1px solid rgba(0, 245, 212, 0.4);

  color: var(--color-cyan);

  font-family: var(--font-mono);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.03em;

}



/* Quick Action Mobile Card */

.mobile-nav-cta-card {

  margin-top: auto;

  position: relative;

  background: linear-gradient(135deg, rgba(26, 18, 38, 0.85) 0%, rgba(16, 11, 24, 0.95) 100%);

  border: 1px solid rgba(255, 0, 85, 0.3);

  border-radius: 18px;

  padding: 18px 16px;

  overflow: hidden;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 85, 0.12);

}



.mobile-cta-glow {

  position: absolute;

  top: -20px;

  right: -20px;

  width: 90px;

  height: 90px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255, 0, 85, 0.35) 0%, transparent 70%);

  pointer-events: none;

}



.mobile-cta-body {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.mobile-cta-title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 1.05rem;

  color: #FFFFFF;

}



.mobile-cta-sub {

  font-size: 0.78rem;

  color: var(--text-muted);

  line-height: 1.4;

}



.mobile-cta-btn {

  margin-top: 6px;

  width: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: linear-gradient(135deg, var(--color-crimson) 0%, #c40040 100%) !important;

  color: #FFFFFF !important;

  padding: 11px 16px !important;

  border-radius: 12px !important;

  font-family: var(--font-body);

  font-weight: 700;

  font-size: 0.88rem;

  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  box-shadow: 0 6px 20px rgba(255, 0, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease;

}



.mobile-cta-btn svg {

  stroke: var(--color-cyan) !important;

}



.mobile-cta-btn:active {

  transform: scale(0.98);

}



.mobile-nav-footer {

  text-align: center;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-muted);

  letter-spacing: 0.03em;

  padding-top: 4px;

}



/* Body lock when mobile menu is open */

body.mobile-menu-open {

  overflow: hidden !important;

  touch-action: none !important;

}



/* Medium viewport responsiveness (between 769px and 1080px) */

@media (max-width: 1080px) and (min-width: 769px) {

  .site-header {

    padding: 0 14px;

  }

  .header-inner {

    padding: 6px 8px 6px 14px;

    gap: 12px;

  }

  .header-cta-btn {

    padding: 8px 16px;

    font-size: 0.82rem;

  }

  #pillnav-mount .pill-nav__item {

    padding: 0 12px !important;

    font-size: 13px !important;

  }

}



/* ==========================================================================

   Section Architecture & Independent Canvas Mounts

   ========================================================================== */



.app-section {

  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 120px 32px;

  box-sizing: border-box;

  overflow: hidden;

  isolation: isolate;

}



.section-bg-mount {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 1;

  overflow: hidden;

}



.section-bg-mount canvas {

  position: absolute;

  inset: 0;

  width: 100% !important;

  height: 100% !important;

  display: block;

}



.section-content {

  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 1280px;

  margin: 0 auto;

}



/* ==========================================================================

   Hero Section (#hero)

   ========================================================================== */



#hero {

  min-height: 100vh;

  padding-top: 140px;

  padding-bottom: 80px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: 56px;

  width: 100%;

}



.hero-badge-pill {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  padding: 8px 18px;

  border-radius: 9999px;

  margin-bottom: 24px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(12px);

}



.hero-badge-pill svg {

  width: 16px;

  height: 16px;

  color: var(--color-cyan);

}



.hero-badge-pill span {

  font-family: var(--font-mono);

  font-size: 0.82rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  color: var(--text-primary);

  text-transform: uppercase;

}



/* ParticleText Kinetic Typography Hero Heading Mount */

.hero-title-mount {

  margin: 0 0 16px 0;

  height: 130px;

  width: 100%;

  max-width: 620px;

  position: relative;

  overflow: visible;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent !important;

}



.hero-title-mount .particle-text {

  width: 100% !important;

  height: 100% !important;

  min-height: 130px !important;

  overflow: visible !important;

  -webkit-tap-highlight-color: transparent !important;

}



.hero-title-mount .particle-text__canvas {

  pointer-events: auto;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent !important;

}



.hero-title-mount .hero-title-raw {

  display: none !important;

}



.hero-subtitle-mount {

  min-height: 48px;

  margin-bottom: 20px;

}



.hero-subtitle-raw {

  font-family: var(--font-display);

  font-size: clamp(1.15rem, 2.2vw, 1.7rem);

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--color-cyan);

  text-transform: uppercase;

  margin: 0;

}



.hero-desc-mount {

  min-height: 96px;

  margin-bottom: 36px;

  max-width: 620px;

}



.hero-desc-raw {

  font-family: var(--font-body);

  font-size: 1.1rem;

  line-height: 1.75;

  color: var(--text-secondary);

  margin: 0;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 16px;

  margin-bottom: 44px;

}



/* Specular Primary Button */

.btn-primary-specular {

  --sb-radius: 9999px;

  --sb-tint: var(--color-crimson);

  --sb-tint-opacity: 0.15;

  --sb-text-color: #FFFFFF;

  background: linear-gradient(135deg, #FF0055 0%, #B8003D 100%);

  color: #FFFFFF;

  padding: 16px 36px;

  border-radius: 9999px;

  font-size: 1.05rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 12px 36px rgba(255, 0, 85, 0.45);

  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease;

}



.btn-primary-specular:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 48px rgba(255, 0, 85, 0.65);

}



.btn-secondary-specular {

  --sb-radius: 9999px;

  --sb-tint: #FFFFFF;

  --sb-tint-opacity: 0.05;

  background: rgba(255, 255, 255, 0.04);

  color: var(--text-primary);

  padding: 16px 32px;

  border-radius: 9999px;

  font-size: 1.02rem;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(14px);

  transition: all 0.25s var(--ease-smooth);

}



.btn-secondary-specular:hover {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.25);

  transform: translateY(-2px);

}



/* Hero Live Metrics Bar */

.hero-metrics-bar {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  padding-top: 28px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  max-width: 620px;

}



.metric-item {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.metric-val {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 800;

  color: var(--text-primary);

  letter-spacing: -0.02em;

}



.metric-val.glow-red {

  color: var(--color-crimson);

  text-shadow: 0 0 20px rgba(255, 0, 85, 0.5);

}



.metric-val.glow-cyan {

  color: var(--color-cyan);

  text-shadow: 0 0 20px rgba(0, 245, 212, 0.5);

}



.metric-label {

  font-family: var(--font-body);

  font-size: 0.78rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-weight: 600;

}



/* Hero Showcase Graphic / Device Preview */

.hero-preview-flank {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}



.hero-phone-stage {

  position: relative;

  width: 320px;

  height: 580px;

  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.9)) drop-shadow(0 10px 30px rgba(255, 0, 85, 0.2));

  transition: transform 0.4s var(--ease-smooth);

}



.hero-phone-stage:hover {

  transform: translateY(-8px) scale(1.02);

}



.hero-phone-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.hero-floating-capsule {

  position: absolute;

  background: rgba(18, 14, 28, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.14);

  backdrop-filter: blur(20px);

  border-radius: 16px;

  padding: 12px 18px;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);

  display: flex;

  align-items: center;

  gap: 12px;

  z-index: 5;

  animation: floatCapsule 4s ease-in-out infinite alternate;

}



.hero-floating-capsule.capsule-top {

  top: 40px;

  left: -48px;

}



.hero-floating-capsule.capsule-bottom {

  bottom: 60px;

  right: -36px;

  animation-delay: -2s;

}



@keyframes floatCapsule {

  0% { transform: translateY(0); }

  100% { transform: translateY(-10px); }

}



.capsule-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.capsule-icon.red {

  background: rgba(255, 0, 85, 0.15);

  color: var(--color-crimson);

  border: 1px solid rgba(255, 0, 85, 0.3);

}



.capsule-icon.cyan {

  background: rgba(0, 245, 212, 0.15);

  color: var(--color-cyan);

  border: 1px solid rgba(0, 245, 212, 0.3);

}



.capsule-icon svg {

  width: 18px;

  height: 18px;

}



.capsule-text strong {

  display: block;

  font-size: 0.88rem;

  color: var(--text-primary);

  font-family: var(--font-body);

}



.capsule-text span {

  display: block;

  font-size: 0.74rem;

  color: var(--text-muted);

}



/* ==========================================================================

   Features Section (#features) - Swipe Cards Mandate

   Rule D: NEVER add swipe cards into another card.

   NEVER place swipe cards in center.

   ALWAYS place swipe cards on the RIGHT side and add descriptive text on the LEFT side.

   NEVER duplicate with a static card grid underneath.

   ========================================================================== */



#features {

  padding: 140px 32px;

}



.features-split-layout {

  display: grid;

  grid-template-columns: 1fr 1.1fr;

  align-items: center;

  gap: 60px;

  width: 100%;

}



.features-left-info {

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.section-tagline-mount {

  min-height: 40px;

  margin-bottom: 8px;

}



.section-tagline-raw {

  font-family: var(--font-mono);

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--color-crimson);

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.features-heading-mount {

  min-height: 100px;

  margin-bottom: 16px;

  overflow: visible !important;

}



.features-heading-raw {

  font-family: var(--font-display);

  font-size: clamp(2.2rem, 4.5vw, 3.6rem);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -0.03em;

  color: var(--text-primary);

  text-transform: uppercase;

  margin: 0;

}



.features-desc-mount {

  min-height: 90px;

  margin-bottom: 32px;

}



.features-desc-raw {

  font-family: var(--font-body);

  font-size: 1.05rem;

  line-height: 1.7;

  color: var(--text-secondary);

  margin: 0;

}



/* Active Card Feature Monitor Panel */

.features-active-monitor {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 20px;

  padding: 24px 28px;

  margin-bottom: 32px;

  backdrop-filter: blur(16px);

  position: relative;

  overflow: hidden;

}



.features-active-monitor::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 4px;

  height: 100%;

  background: linear-gradient(180deg, var(--color-crimson), var(--color-cyan));

}



.monitor-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

}



.monitor-counter {

  font-family: var(--font-mono);

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--color-cyan);

  letter-spacing: 0.05em;

}



.monitor-badge {

  font-size: 0.72rem;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 9999px;

  background: rgba(255, 0, 85, 0.15);

  color: var(--color-crimson);

  border: 1px solid rgba(255, 0, 85, 0.3);

  text-transform: uppercase;

}



.monitor-title {

  font-family: var(--font-display);

  font-size: 1.35rem;

  font-weight: 700;

  color: var(--text-primary);

  margin: 0 0 8px 0;

  letter-spacing: -0.01em;

}



.monitor-desc {

  font-family: var(--font-body);

  font-size: 0.94rem;

  color: var(--text-secondary);

  line-height: 1.6;

  margin: 0;

}



/* Navigation Controls for Card Stack */

.stack-nav-controls {

  display: flex;

  align-items: center;

  gap: 16px;

}



.stack-ctrl-btn {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--text-primary);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.25s var(--ease-smooth);

}



.stack-ctrl-btn:hover {

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.3);

  transform: scale(1.05);

}



.stack-ctrl-btn svg {

  width: 20px;

  height: 20px;

}



.stack-progress-dots {

  display: flex;

  align-items: center;

  gap: 8px;

}



.dot-item {

  width: 8px;

  height: 8px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.2);

  transition: all 0.3s ease;

}



.dot-item.active {

  width: 24px;

  background: var(--color-crimson);

  box-shadow: 0 0 12px var(--color-crimson-glow);

}



/* Right Flank: Unboxed Card Swap Mount */

.features-right-stage {

  position: relative;

  width: 100%;

  height: 520px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden !important;

}



#cardswap-stage-mount {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden !important;

}



/* Pure Design CardSwap Architecture (Zero Images Mandate) */

.card-swap-item {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  background: linear-gradient(165deg, #140d1e 0%, #09060e 100%);

  border-radius: inherit;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.07);

  box-sizing: border-box;

}



.card-swap-head {

  padding: 10px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  background: rgba(12, 8, 18, 0.85);

  flex-shrink: 0;

}



.card-swap-head-left {

  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

}



.card-swap-icon {

  width: 24px;

  height: 24px;

  border-radius: 6px;

  background: rgba(255, 0, 85, 0.12);

  border: 1px solid rgba(255, 0, 85, 0.28);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-crimson);

  flex-shrink: 0;

}



.card-swap-icon svg {

  width: 15px;

  height: 15px;

}



.card-swap-title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.92rem;

  color: var(--text-primary);

  letter-spacing: -0.01em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.card-swap-badge {

  font-family: var(--font-mono);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 2px 7px;

  border-radius: 999px;

  background: rgba(0, 245, 212, 0.08);

  border: 1px solid rgba(0, 245, 212, 0.25);

  color: var(--color-cyan);

  flex-shrink: 0;

}



.card-swap-design-stage {

  flex: 1;

  min-height: 0;

  position: relative;

  padding: 10px 14px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 8px;

  background: radial-gradient(circle at 50% 25%, rgba(157, 78, 221, 0.1) 0%, rgba(9, 6, 14, 0.98) 75%);

  overflow: hidden;

}



/* Card 1: Player stage */

.player-mock-frame {

  background: rgba(0, 0, 0, 0.45);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  padding: 8px 10px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.player-top-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.68rem;

}



.player-res-tag {

  color: var(--color-cyan);

  font-weight: 700;

  letter-spacing: 0.05em;

}



.player-pip-indicator {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #10B981;

  font-weight: 600;

}



.pip-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #10B981;

  box-shadow: 0 0 6px #10B981;

  animation: pipPulse 1.5s infinite;

}



@keyframes pipPulse {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.4; transform: scale(0.8); }

}



.player-center-play {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  color: rgba(255, 255, 255, 0.85);

}



.player-scrubber-box {

  display: flex;

  flex-direction: column;

  gap: 3px;

}



.mock-scrubber {

  position: relative;

  width: 100%;

  height: 4px;

  background: rgba(255, 255, 255, 0.12);

  border-radius: 999px;

}



.mock-scrubber-fill {

  height: 100%;

  background: linear-gradient(90deg, #FF0055 0%, #00F5D4 100%);

  border-radius: 999px;

  position: relative;

}



.mock-scrubber-thumb {

  position: absolute;

  right: -3px;

  top: -3px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow: 0 0 8px rgba(0, 245, 212, 0.8);

}



.player-time-row {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--text-muted);

}



.mock-pills-row {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



.mock-pill {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  padding: 3px 8px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: var(--text-secondary);

  white-space: nowrap;

}



.mock-pill.active {

  background: rgba(0, 245, 212, 0.12);

  border-color: rgba(0, 245, 212, 0.35);

  color: var(--color-cyan);

  font-weight: 600;

}



.mock-pill.pink {

  background: rgba(255, 0, 85, 0.12);

  border-color: rgba(255, 0, 85, 0.35);

  color: #ff3377;

  font-weight: 600;

}



/* Card 2: iMusic stage */

.music-now-playing-box {

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(0, 0, 0, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  padding: 8px 10px;

}



.music-disc-spin {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: radial-gradient(circle, #251238 25%, #0d0714 70%);

  border: 2px solid rgba(0, 245, 212, 0.4);

  box-shadow: 0 0 10px rgba(0, 245, 212, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  animation: discSpin 8s linear infinite;

}



@keyframes discSpin {

  100% { transform: rotate(360deg); }

}



.disc-hole {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: #09060e;

  border: 1px solid rgba(255, 0, 85, 0.6);

}



.music-meta-col {

  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;

}



.music-track-title {

  font-weight: 700;

  font-size: 0.82rem;

  color: var(--text-primary);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.music-track-artist {

  font-family: var(--font-mono);

  font-size: 0.66rem;

  color: var(--color-cyan);

}



.music-lyrics-preview {

  font-size: 0.72rem;

  font-style: italic;

  color: rgba(255, 255, 255, 0.65);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.wave-bars-wrap {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 3px;

  height: 32px;

  padding-top: 4px;

}



.wave-bar {

  width: 4px;

  border-radius: 3px;

  background: linear-gradient(180deg, #00F5D4 0%, #9D4EDD 50%, #FF0055 100%);

  animation: wavePulse 1.2s ease-in-out infinite alternate;

}



.bar-1  { height: 12px; animation-delay: 0.05s; }

.bar-2  { height: 24px; animation-delay: 0.15s; }

.bar-3  { height: 18px; animation-delay: 0.25s; }

.bar-4  { height: 30px; animation-delay: 0.35s; }

.bar-5  { height: 16px; animation-delay: 0.45s; }

.bar-6  { height: 26px; animation-delay: 0.55s; }

.bar-7  { height: 22px; animation-delay: 0.65s; }

.bar-8  { height: 28px; animation-delay: 0.1s; }

.bar-9  { height: 14px; animation-delay: 0.2s; }

.bar-10 { height: 29px; animation-delay: 0.3s; }

.bar-11 { height: 19px; animation-delay: 0.4s; }

.bar-12 { height: 25px; animation-delay: 0.5s; }

.bar-13 { height: 15px; animation-delay: 0.6s; }

.bar-14 { height: 22px; animation-delay: 0.7s; }



@keyframes wavePulse {

  0% { transform: scaleY(0.3); opacity: 0.5; }

  100% { transform: scaleY(1); opacity: 1; }

}



/* Card 3: Shorts stage */

.shorts-mock-stage {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  height: 100%;

}



.shorts-viewport-card {

  flex: 1;

  height: 95px;

  background: linear-gradient(180deg, rgba(20, 14, 30, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%);

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 8px;

  padding: 8px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.shorts-sound-pill {

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--color-cyan);

  background: rgba(0, 245, 212, 0.1);

  padding: 2px 6px;

  border-radius: 4px;

  width: fit-content;

}



.shorts-gesture-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}



.chevron-up {

  width: 16px;

  height: 16px;

  stroke: var(--color-cyan);

  animation: chevronSlide 1.2s ease-in-out infinite;

}



@keyframes chevronSlide {

  0% { transform: translateY(3px); opacity: 0.4; }

  50% { transform: translateY(-3px); opacity: 1; }

  100% { transform: translateY(3px); opacity: 0.4; }

}



.swipe-hint-text {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-muted);

}



.shorts-action-rail {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.shorts-rail-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: rgba(255, 255, 255, 0.8);

}



.shorts-rail-btn svg {

  width: 14px;

  height: 14px;

  color: var(--color-crimson);

}



/* Card 4: Search stage */

.mock-search-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  background: rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(0, 245, 212, 0.25);

  border-radius: 8px;

  font-size: 0.78rem;

  color: rgba(255, 255, 255, 0.85);

}



.mock-caret {

  display: inline-block;

  width: 2px;

  height: 13px;

  background: var(--color-cyan);

  animation: blinkCaret 1s step-end infinite;

  margin-left: auto;

}



@keyframes blinkCaret {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}



.search-result-chip {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 8px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 6px;

}



.result-thumb-box {

  width: 38px;

  height: 24px;

  border-radius: 4px;

  background: rgba(255, 0, 85, 0.15);

  border: 1px solid rgba(255, 0, 85, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-mono);

  font-size: 0.58rem;

  color: #ff3377;

  font-weight: 700;

  flex-shrink: 0;

}



.result-meta-col {

  display: flex;

  flex-direction: column;

  gap: 1px;

  min-width: 0;

}



.res-title {

  font-size: 0.74rem;

  font-weight: 600;

  color: var(--text-primary);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.res-sub {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-muted);

}



/* Card 5: Themes stage */

.theme-swatches-row {

  display: flex;

  align-items: stretch;

  gap: 8px;

}



.theme-swatch {

  flex: 1;

  padding: 6px 8px;

  border-radius: 8px;

  display: flex;

  flex-direction: column;

  gap: 2px;

  font-size: 0.72rem;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.theme-swatch.amoled {

  background: #000000;

  border-color: var(--color-cyan);

  box-shadow: 0 0 12px rgba(0, 245, 212, 0.2);

  color: var(--color-cyan);

}



.swatch-indicator {

  font-family: var(--font-mono);

  font-size: 0.58rem;

  font-weight: 700;

  color: var(--color-cyan);

}



.theme-swatch.dark {

  background: #0e0a16;

  color: #c4b5fd;

}



.theme-swatch.light {

  background: #f4f4f5;

  color: #18181b;

}



.swatch-name {

  font-weight: 700;

  font-size: 0.72rem;

}



.swatch-hex {

  font-family: var(--font-mono);

  font-size: 0.6rem;

  opacity: 0.75;

}



.amoled-stat-badge {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 5px 8px;

  background: rgba(0, 245, 212, 0.08);

  border: 1px solid rgba(0, 245, 212, 0.25);

  border-radius: 6px;

  font-size: 0.68rem;

  color: var(--color-cyan);

  font-weight: 600;

}



/* Card 6: Discovery stage */

.channel-header-mock {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 8px;

  background: rgba(0, 0, 0, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 6px;

}



.channel-avatar-mock {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: linear-gradient(135deg, #FF0055, #9D4EDD);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  flex-shrink: 0;

}



.channel-meta-mock {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.channel-name-txt {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-weight: 700;

  font-size: 0.76rem;

  color: var(--text-primary);

  white-space: nowrap;

}



.channel-sub-txt {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-muted);

}



.disc-showcase-row {

  display: flex;

  align-items: center;

  gap: 6px;

}



.disc-tile {

  flex: 1;

  height: 42px;

  border-radius: 6px;

  background: linear-gradient(135deg, rgba(30, 20, 42, 0.9), rgba(14, 10, 22, 0.95));

  border: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-mono);

  font-size: 0.6rem;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.75);

}



/* Card 7: Account stage */

.account-sync-banner {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 10px;

  background: rgba(0, 245, 212, 0.06);

  border: 1px solid rgba(0, 245, 212, 0.22);

  border-radius: 8px;

}



.auth-shield-icon {

  width: 30px;

  height: 30px;

  border-radius: 8px;

  background: rgba(0, 245, 212, 0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.auth-meta-col {

  display: flex;

  flex-direction: column;

  gap: 1px;

}



.auth-status-title {

  font-weight: 700;

  font-size: 0.76rem;

  color: var(--color-cyan);

}



.auth-status-sub {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-muted);

}



/* Card swap bottom content */

.card-swap-content {

  padding: 9px 14px;

  background: rgba(10, 6, 16, 0.95);

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;

  flex-direction: column;

  gap: 4px;

  flex-shrink: 0;

}



.card-swap-desc {

  font-size: 0.76rem;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.72);

  margin: 0;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.card-swap-tech-chips {

  display: flex;

  align-items: center;

  gap: 5px;

  flex-wrap: wrap;

}



.card-swap-tech-chips span {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-muted);

  background: rgba(255, 255, 255, 0.03);

  padding: 1px 5px;

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.06);

}



/* ==========================================================================

   Continuous Right-Flank S-Curve Corridor

   Rule C: Spans across minimum of TWO sections!

   Unboxed, borderless, continuous vertical S-curve corridor on the RIGHT flank.

   ========================================================================== */



.dual-section-corridor {

  position: relative;

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: stretch;

}



.corridor-left-stream {

  position: relative;

  width: 100%;

  display: flex;

  flex-direction: column;

}



/* Individual sections in left stream */

.corridor-section {

  position: relative;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 120px 48px;

  isolation: isolate;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.corridor-section-inner {

  position: relative;

  z-index: 10;

  max-width: 560px;

}



.corridor-tagline-mount {

  min-height: 36px;

  margin-bottom: 8px;

}



.corridor-tagline-raw {

  font-family: var(--font-mono);

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.corridor-tagline-raw.tag-red {

  color: var(--color-crimson);

}



.corridor-tagline-raw.tag-cyan {

  color: var(--color-cyan);

}



.corridor-title-mount {

  min-height: 90px;

  margin-bottom: 18px;

  overflow: visible !important;

}



.corridor-title-raw {

  font-family: var(--font-display);

  font-size: clamp(2rem, 3.8vw, 3.2rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.03em;

  color: var(--text-primary);

  text-transform: uppercase;

  margin: 0;

}



.corridor-desc-mount {

  min-height: 96px;

  margin-bottom: 32px;

}



.corridor-desc-raw {

  font-family: var(--font-body);

  font-size: 1.05rem;

  line-height: 1.75;

  color: var(--text-secondary);

  margin: 0;

}



/* Feature bullets */

.corridor-features-list {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-bottom: 36px;

}



.feature-bullet {

  display: flex;

  align-items: flex-start;

  gap: 14px;

}



.bullet-icon {

  width: 24px;

  height: 24px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  margin-top: 2px;

}



.bullet-icon.red {

  background: rgba(255, 0, 85, 0.15);

  color: var(--color-crimson);

}



.bullet-icon.cyan {

  background: rgba(0, 245, 212, 0.15);

  color: var(--color-cyan);

}



.bullet-icon svg {

  width: 14px;

  height: 14px;

}



.bullet-text strong {

  display: block;

  font-size: 0.98rem;

  color: var(--text-primary);

  font-family: var(--font-body);

  font-weight: 700;

}



.bullet-text p {

  margin: 4px 0 0 0;

  font-size: 0.88rem;

  color: var(--text-muted);

  line-height: 1.5;

}



/* Right Flank: Sticky Sweeping Continuous Vertical S-Curve Corridor */

.corridor-right-spiral-flank {

  position: -webkit-sticky !important;

  position: sticky !important;

  top: 0 !important;

  height: 100vh !important;

  align-self: start !important;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: visible !important;

  z-index: 20;

}



#infinite-spiral-mount {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Custom styling for InfiniteSpiral cards to look like sleek phones */

.infinite-spiral__item {

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  border-radius: 20px !important;

  background: #0d0916 !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 0, 85, 0.15) !important;

  overflow: hidden !important;

  cursor: grab !important;

  transition: border-color 0.3s ease !important;

}



.infinite-spiral__item:active {

  cursor: grabbing !important;

}



.infinite-spiral__item:hover {

  border-color: var(--color-cyan) !important;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 245, 212, 0.25) !important;

}



/* ==========================================================================

   Community & Developers Section (#developers)

   Master Community Driven Open-Source Card

   ========================================================================== */



#developers {

  padding: 120px 32px 100px 32px;

  position: relative;

  overflow: visible !important;

}



/* ==========================================================================

   Developers Header: Clean Normal Section Heading (No Rails, Lines or Brackets)

   ========================================================================== */

.developers-header-block {

  text-align: center;

  margin: 0 auto 56px auto;

  position: relative;

  z-index: 10002 !important;

  max-width: 1380px;

  width: 100%;

}



.developers-normal-heading {

  font-family: var(--font-display, 'Syne', sans-serif);

  font-size: clamp(1.8rem, 2.6vw, 2.5rem);

  font-weight: 800;

  letter-spacing: 0.32em;

  color: #FFFFFF;

  text-transform: uppercase;

  margin: 0;

  padding: 0;

  padding-left: 0.32em;

  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 255, 255, 0.2);

}



@media (max-width: 960px) {

  .developers-header-block {

    display: none !important;

  }

}



/* ==========================================================================

   Desktop View: 3D Landscape Lanyard Cards (Darkboy & Venom)

   ========================================================================== */

.developers-desktop-stage {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  max-width: 1380px;

  margin: 0 auto;

  align-items: center;

  justify-items: center;

  position: relative;

  overflow: visible !important;

}



.developer-card-unit {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

  width: 100%;

  overflow: visible !important;

}



/* Free-Floating Borderless Lanyard Mount Canvas (Rule D Mandate - Unboxed, Max Z-Index) */

.lanyard-mount-container {

  position: relative;

  width: 100%;

  height: 700px;

  min-height: 660px;

  overflow: visible !important;

  z-index: 9999 !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  pointer-events: none;

}



.lanyard-mount-box {

  position: absolute;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  overflow: visible !important;

  z-index: 9999 !important;

  pointer-events: none;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.lanyard-mount-box canvas {

  pointer-events: auto !important;

  cursor: grab;

}



.lanyard-mount-box canvas:active {

  cursor: grabbing;

}



/* On Desktop (min-width: 961px): Hide Mobile Community Card */

@media (min-width: 961px) {

  .community-master-card {

    display: none !important;

  }

}



/* ==========================================================================

   Phone / Mobile View: Community Driven Glass Card

   ========================================================================== */

.community-master-card {

  max-width: 1240px;

  margin: 0 auto;

  background: rgba(18, 17, 24, 0.75);

  backdrop-filter: blur(28px);

  -webkit-backdrop-filter: blur(28px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 32px;

  padding: 64px 72px;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 56px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(255, 0, 85, 0.04);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  user-select: none !important;

  -webkit-user-select: none !important;

}



.community-master-card:hover {

  border-color: rgba(255, 255, 255, 0.16);

  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.75), 0 0 60px rgba(0, 245, 212, 0.06);

}



/* Ambient glow in background of card */

.community-glow-aura {

  position: absolute;

  top: -30%;

  right: -20%;

  width: 700px;

  height: 700px;

  background: radial-gradient(circle, rgba(255, 0, 85, 0.1) 0%, rgba(0, 245, 212, 0.06) 45%, transparent 70%);

  filter: blur(60px);

  pointer-events: none;

  z-index: 0;

}



/* Left Column */

.community-left-content {

  flex: 1.2;

  position: relative;

  z-index: 2;

  text-align: left;

}



.community-badge-wrap {

  margin-bottom: 20px;

}



.community-pill-badge {

  display: inline-block;

  padding: 6px 16px;

  border-radius: 999px;

  background: rgba(255, 0, 85, 0.12);

  border: 1px solid rgba(255, 0, 85, 0.35);

  color: var(--color-crimson);

  font-family: var(--font-mono);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.community-headline {

  font-family: var(--font-display);

  font-size: clamp(2.2rem, 3.8vw, 3.2rem);

  font-weight: 800;

  color: #FFFFFF;

  line-height: 1.15;

  letter-spacing: -0.025em;

  margin: 0 0 20px 0;

}



.community-description {

  font-family: var(--font-body);

  font-size: 1.05rem;

  line-height: 1.7;

  color: var(--text-secondary);

  margin: 0 0 36px 0;

  max-width: 560px;

}



.community-actions-row {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}



.community-btn-github {

  text-decoration: none;

  --sb-radius: 999px;

  display: inline-flex;

}



.community-btn-github .specular-button__label {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px 28px;

  font-size: 0.95rem;

  font-weight: 700;

  font-family: var(--font-body);

}



.community-btn-github svg {

  color: #FFD700;

}



.community-license-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 22px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #E2E8F0;

  font-family: var(--font-mono);

  font-size: 0.88rem;

  font-weight: 700;

  letter-spacing: 0.05em;

}



.community-ecosystem-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 20px;

  border-radius: 999px;

  background: rgba(0, 245, 212, 0.08);

  border: 1px solid rgba(0, 245, 212, 0.25);

  color: var(--color-cyan);

  text-decoration: none;

  font-family: var(--font-mono);

  font-size: 0.84rem;

  font-weight: 600;

  transition: all 0.2s ease;

}



.community-ecosystem-link:hover {

  background: rgba(0, 245, 212, 0.16);

  border-color: var(--color-cyan);

  color: #FFFFFF;

  transform: translateY(-1px);

}



/* Right Column (Staggered Chips) */

.community-right-chips {

  flex: 0.95;

  width: 100%;

  max-width: 460px;

  display: flex;

  flex-direction: column;

  gap: 18px;

  position: relative;

  z-index: 2;

}



.dev-community-chip {

  width: 100%;

  background: rgba(26, 25, 33, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 20px;

  padding: 18px 22px;

  display: flex;

  align-items: center;

  gap: 16px;

  text-decoration: none;

  position: relative;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}



.dev-community-chip:hover {

  transform: translateX(-4px);

  background: rgba(33, 31, 42, 0.95);

  border-color: rgba(255, 255, 255, 0.2);

  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5);

}



.dev-community-chip.chip-darkboy:hover {

  border-color: rgba(255, 0, 85, 0.45);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 0, 85, 0.15);

}



.dev-community-chip.chip-venom:hover {

  border-color: rgba(0, 245, 212, 0.45);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 245, 212, 0.15);

}



/* Staggered offset for version badge on desktop */

@media (min-width: 961px) {

  .dev-community-chip.chip-version {

    transform: translateX(20px);

  }

  .dev-community-chip.chip-version:hover {

    transform: translateX(16px);

  }

}



.chip-avatar-wrapper {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  position: relative;

}



.chip-avatar-wrapper.avatar-darkboy {

  background: rgba(255, 0, 85, 0.15);

  border: 2px solid rgba(255, 0, 85, 0.6);

}



.chip-avatar-wrapper.avatar-venom {

  background: rgba(0, 245, 212, 0.15);

  border: 2px solid rgba(0, 245, 212, 0.6);

}



.chip-avatar-wrapper.avatar-version {

  background: rgba(208, 188, 255, 0.15);

  border: 2px solid rgba(208, 188, 255, 0.4);

  color: #D0BCFF;

}



.chip-avatar-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  display: block;

}



.chip-info-box {

  flex: 1;

  min-width: 0;

  text-align: left;

}



.chip-name-row {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.chip-verified-icon {

  flex-shrink: 0;

  color: #00F5D4;

}



.chip-darkboy .chip-verified-icon {

  color: #FF0055;

}



.chip-dev-name {

  font-family: var(--font-display);

  font-size: 1.18rem;

  font-weight: 800;

  color: #FFFFFF;

  letter-spacing: -0.01em;

}



.chip-dev-handle {

  font-family: var(--font-mono);

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--text-muted);

}



.chip-darkboy:hover .chip-dev-handle {

  color: var(--color-crimson);

}



.chip-venom:hover .chip-dev-handle {

  color: var(--color-cyan);

}



.chip-dev-role {

  font-family: var(--font-body);

  font-size: 0.88rem;

  color: var(--text-secondary);

  margin: 3px 0 0 0;

  font-weight: 600;

}



.chip-dev-sub {

  display: block;

  font-family: var(--font-mono);

  font-size: 0.72rem;

  color: var(--text-muted);

  margin-top: 2px;

  letter-spacing: 0.02em;

}



.chip-version-title {

  font-family: var(--font-body);

  font-size: 0.98rem;

  font-weight: 700;

  color: #FFFFFF;

  margin: 0;

}



.chip-version-tag {

  font-family: var(--font-mono);

  font-size: 0.82rem;

  font-weight: 600;

  color: #D0BCFF;

  margin: 3px 0 0 0;

}



.chip-arrow-icon {

  color: var(--text-muted);

  opacity: 0.5;

  transition: all 0.2s ease;

  flex-shrink: 0;

}



.dev-community-chip:hover .chip-arrow-icon {

  opacity: 1;

  color: #FFFFFF;

  transform: translate(2px, -2px);

}



.chip-status-dot-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 20px;

  height: 20px;

}



.chip-live-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #10B981;

  box-shadow: 0 0 10px #10B981;

  animation: pulse-dot 2s infinite ease-in-out;

}



@keyframes pulse-dot {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.5; transform: scale(0.85); }

}



@media (max-width: 960px) {

  .developers-desktop-stage {

    display: none !important;

  }

  .community-master-card {

    display: flex !important;

    flex-direction: column;

    padding: 44px 28px;

    gap: 40px;

    border-radius: 24px;

  }

  .community-left-content {

    text-align: center;

  }

  .community-description {

    margin-left: auto;

    margin-right: auto;

  }

  .community-actions-row {

    justify-content: center;

  }

  .community-right-chips {

    max-width: 100%;

  }

}



/* ==========================================================================

   Download Section (#download) - Laser Flow Mandate

   Rule D: Cards in the Last Section of Website: ALWAYS apply laser-flow-interactive-effect

   with scroll-trigger activation. Laser illumination colors MUST match website palette.

   ========================================================================== */



#download {

  min-height: 100vh;

  padding: 140px 32px 100px 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.download-laser-mount {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 5;

}



.download-stage-container {

  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.download-header {

  max-width: 680px;

  margin: 0 auto 36px auto;

}



.download-title-mount {

  min-height: 80px;

  margin-bottom: 16px;

  overflow: visible !important;

}



.download-title-raw {

  font-family: var(--font-display);

  font-size: clamp(2.4rem, 4.5vw, 3.8rem);

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: -0.03em;

  color: var(--text-primary);

  text-transform: uppercase;

  margin: 0;

}



.download-desc-mount {

  min-height: 60px;

  margin-bottom: 12px;

}



.download-desc-raw {

  font-family: var(--font-body);

  font-size: 1.05rem;

  color: var(--text-secondary);

  line-height: 1.6;

  margin: 0;

}



/* ==========================================================================

   Android Download Card (AirBeats Architecture • Specular Cyber-Luxe)

   ========================================================================== */



.android-card {

  position: relative;

  width: 100%;

  max-width: 520px;

  margin: 0 auto;

  background: rgba(18, 13, 26, 0.92);

  border: 1px solid rgba(255, 0, 85, 0.38);

  border-radius: 28px;

  padding: 34px 30px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 0, 85, 0.22);

  backdrop-filter: blur(28px);

  text-align: left;

  transform-style: preserve-3d;

  transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;

  user-select: none !important;

  -webkit-user-select: none !important;

  will-change: transform;

}



.android-card:hover {

  border-color: var(--color-cyan);

  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.92), 0 0 55px rgba(0, 245, 212, 0.28);

}



.card-edge-glow {

  position: absolute;

  inset: -1px;

  border-radius: inherit;

  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 85, 0.25), transparent 70%);

  pointer-events: none;

  z-index: 1;

}



.android-card-inner {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

}



/* Header: Squircle Android Brand */

.android-card-header {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 20px;

}



.android-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}



.android-card-title-col {

  flex: 1;

  min-width: 0;

}



.android-card-title {

  font-family: var(--font-display);

  font-size: 1.55rem;

  font-weight: 800;

  color: #FFFFFF;

  margin: 0;

  line-height: 1.15;

}



.android-card-subtitle {

  font-family: var(--font-body);

  font-size: 0.88rem;

  color: var(--text-secondary);

  margin: 3px 0 0 0;

}



/* Build Type Selector (AirBeats Stable vs Nightly) */

.android-build-selector-wrap {

  margin-bottom: 16px;

}



.android-build-selector {

  display: inline-flex;

  align-items: center;

  padding: 4px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);

  gap: 4px;

}



.android-build-tab {

  border: none;

  background: transparent;

  padding: 6px 14px;

  border-radius: 999px;

  font-family: var(--font-mono);

  font-size: 0.76rem;

  font-weight: 700;

  color: var(--text-muted);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

  transition: all 0.22s var(--ease-smooth);

  user-select: none !important;

  -webkit-user-select: none !important;

}



.android-build-tab svg {

  flex-shrink: 0;

}



.android-build-tab.active-stable {

  background: rgba(0, 245, 212, 0.18);

  border: 1px solid rgba(0, 245, 212, 0.5);

  color: var(--color-cyan);

  box-shadow: 0 0 16px rgba(0, 245, 212, 0.35);

}



.android-build-tab.active-nightly {

  background: rgba(157, 78, 221, 0.24);

  border: 1px solid rgba(157, 78, 221, 0.6);

  color: #c77dff;

  box-shadow: 0 0 16px rgba(157, 78, 221, 0.4);

}



.android-build-tab.inactive:hover {

  color: #FFFFFF;

  background: rgba(255, 255, 255, 0.08);

}



/* Chips Row */

.android-chips-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-bottom: 18px;

}



.version-chip {

  font-family: var(--font-mono);

  font-size: 0.74rem;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--text-primary);

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.version-chip--stable {

  background: rgba(0, 245, 212, 0.12);

  border-color: rgba(0, 245, 212, 0.32);

  color: var(--color-cyan);

}



.version-chip--nightly {

  background: rgba(157, 78, 221, 0.16);

  border-color: rgba(157, 78, 221, 0.4);

  color: #d8b4fe;

}



.version-size-chip {

  font-family: var(--font-mono);

  font-size: 0.74rem;

  color: var(--text-secondary);

}



/* Action Triggers: Changelog & Previous versions */

.android-actions-subrow {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 18px;

  margin-bottom: 22px;

}



.card-action-trigger {

  border: none;

  background: transparent;

  color: var(--color-cyan);

  font-family: var(--font-mono);

  font-size: 0.78rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

  padding: 0;

  transition: all 0.2s ease;

  user-select: none !important;

  -webkit-user-select: none !important;

}



.card-action-trigger:hover {

  color: #FFFFFF;

  text-shadow: 0 0 10px var(--color-cyan);

}



.card-action-trigger svg {

  flex-shrink: 0;

  transition: transform 0.2s ease;

}



.card-action-trigger:hover svg {

  transform: translateY(-1px);

}



/* Action Bar: Download Button & Subtext */

.card-action-bar {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 0;

  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.btn-android-download {

  --sb-radius: 16px;

  --sb-tint: var(--color-crimson);

  --sb-tint-opacity: 0.25;

  width: 100%;

  justify-content: center;

  background: linear-gradient(135deg, #FF0055 0%, #aa003a 100%);

  color: #FFFFFF;

  padding: 15px 24px;

  border-radius: 16px;

  font-size: 1.05rem;

  font-weight: 800;

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 12px 36px rgba(255, 0, 85, 0.55);

  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s ease, background 0.3s ease;

  user-select: none !important;

  -webkit-user-select: none !important;

}



.btn-android-download:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 48px rgba(255, 0, 85, 0.75);

}



.btn-android-download.nightly-active {

  background: linear-gradient(135deg, #9D4EDD 0%, #5a189a 100%);

  box-shadow: 0 12px 36px rgba(157, 78, 221, 0.55);

}



.btn-android-download.nightly-active:hover {

  box-shadow: 0 18px 48px rgba(157, 78, 221, 0.75);

}



.card-requirements-text {

  font-family: var(--font-body);

  font-size: 0.78rem;

  color: var(--text-muted);

  margin: 0;

  text-align: center;

}



/* ==========================================================================

   Obsidian Glass Dialogs (AirBeats Architecture)

   ========================================================================== */



.glass-dialog {

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(14, 10, 22, 0.96);

  border-radius: 24px;

  padding: 0;

  color: var(--text-primary);

  max-width: 680px;

  width: 90vw;

  max-height: 85vh;

  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 0, 85, 0.25);

  backdrop-filter: blur(32px);

  overflow: hidden;

  position: fixed;

  inset: 0;

  margin: auto;

  z-index: 10000;

}



.glass-dialog::backdrop {

  background: rgba(4, 2, 8, 0.82);

  backdrop-filter: blur(12px);

}



.dialog-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 26px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);

  background: rgba(255, 255, 255, 0.02);

}



.dialog-header-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.dialog-icon-pill {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: rgba(0, 245, 212, 0.12);

  border: 1px solid rgba(0, 245, 212, 0.3);

  color: var(--color-cyan);

  display: flex;

  align-items: center;

  justify-content: center;

}



.dialog-title {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 800;

  margin: 0;

  color: #FFFFFF;

}



.dialog-close-btn {

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: var(--text-secondary);

  width: 34px;

  height: 34px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

}



.dialog-close-btn:hover {

  background: rgba(255, 0, 85, 0.2);

  border-color: var(--color-crimson);

  color: #FFFFFF;

}



.dialog-content--scroll {

  padding: 24px 26px;

  max-height: calc(85vh - 80px);

  overflow-y: auto;

}



.changelog-entry {

  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}



.changelog-entry:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}



.changelog-entry-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

}



.changelog-date {

  font-family: var(--font-mono);

  font-size: 0.76rem;

  color: var(--text-muted);

}



.changelog-list {

  margin: 0;

  padding-left: 18px;

  color: var(--text-secondary);

  font-size: 0.88rem;

  line-height: 1.6;

}



.changelog-list li {

  margin-bottom: 8px;

}



.changelog-list strong {

  color: #FFFFFF;

}



/* Dynamic Changelog & Markdown Typography */
.dialog-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

.dialog-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 245, 212, 0.2);
  border-top-color: var(--color-cyan);
  border-radius: 50%;
  animation: itubeDialogSpin 0.8s linear infinite;
}

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

.changelog-release-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.changelog-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.changelog-body p {
  margin: 0 0 12px 0;
}

.changelog-body p:last-child {
  margin-bottom: 0;
}

.changelog-h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 20px 0 10px 0;
  letter-spacing: -0.01em;
}

.changelog-h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-cyan);
  margin: 18px 0 8px 0;
}

.changelog-h4 {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 14px 0 6px 0;
}

.changelog-quote {
  margin: 14px 0;
  padding: 10px 16px;
  background: rgba(0, 245, 212, 0.04);
  border-left: 3px solid var(--color-cyan);
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  line-height: 1.6;
}

.changelog-quote p {
  margin: 0;
}

.changelog-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 20px 0;
}

.changelog-banner-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 12px 0 16px 0;
  display: block;
}

.changelog-link {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.changelog-link:hover {
  opacity: 0.8;
}

.changelog-body code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: #00F5D4;
}

.changelog-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.changelog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.changelog-table th {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-cyan);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.changelog-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.changelog-table tr:last-child td {
  border-bottom: none;
}

.versions-loading-cell {
  text-align: center;
  padding: 32px 14px !important;
}

/* Previous Versions Table */

.versions-table-wrap {

  overflow-x: auto;

}



.versions-table {

  width: 100%;

  border-collapse: collapse;

  text-align: left;

  font-size: 0.85rem;

}



.versions-table th {

  padding: 10px 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--text-muted);

  font-family: var(--font-mono);

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.versions-table td {

  padding: 12px 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  color: var(--text-secondary);

}



.version-tag-pill {

  font-family: var(--font-mono);

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.08);

  color: #FFFFFF;

  margin-right: 6px;

}



.version-tag-pill.active {

  background: rgba(0, 245, 212, 0.15);

  color: var(--color-cyan);

  border: 1px solid rgba(0, 245, 212, 0.35);

}



.version-type-note {

  font-size: 0.74rem;

  color: var(--text-muted);

}



.btn-version-dl {

  display: inline-block;

  padding: 5px 12px;

  border-radius: 8px;

  background: rgba(0, 245, 212, 0.12);

  border: 1px solid rgba(0, 245, 212, 0.35);

  color: var(--color-cyan);

  text-decoration: none;

  font-family: var(--font-mono);

  font-size: 0.75rem;

  font-weight: 700;

  transition: all 0.2s ease;

}



.btn-version-dl:hover {

  background: var(--color-cyan);

  color: #000000;

  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4);

}



@media (max-width: 540px) {

  .android-card {

    padding: 24px 18px;

    border-radius: 22px;

  }

}



/* ==========================================================================

   Footer

   ========================================================================== */



.site-footer {

  position: relative;

  z-index: 10;

  background: #040206;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding: 56px 32px 32px 32px;

}



.footer-inner {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 40px;

}



.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 12px;

  max-width: 400px;

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--text-primary);

  letter-spacing: 0.04em;

}



.footer-copy {

  font-size: 0.88rem;

  line-height: 1.55;

  color: var(--text-secondary);

  margin: 0;

}



.footer-github-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--text-primary);

  font-family: var(--font-mono);

  font-size: 0.78rem;

  text-decoration: none;

  width: fit-content;

  transition: all 0.25s ease;

}



.footer-github-badge:hover {

  background: rgba(0, 245, 212, 0.08);

  border-color: rgba(0, 245, 212, 0.35);

  color: var(--color-cyan);

}



.footer-github-tag {

  padding: 1px 6px;

  border-radius: 4px;

  background: rgba(255, 0, 85, 0.18);

  color: #ff3377;

  font-size: 0.68rem;

  font-weight: 700;

}



.footer-nav-col {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.footer-nav-title {

  font-family: var(--font-mono);

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 14px 24px;

}



.footer-link {

  color: var(--text-secondary);

  text-decoration: none;

  font-size: 0.9rem;

  transition: color 0.2s ease;

}



.footer-link:hover {

  color: var(--color-cyan);

}



.footer-bottom-bar {

  max-width: 1200px;

  margin: 44px auto 0 auto;

  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.footer-bottom-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  font-size: 0.8rem;

  color: var(--text-muted);

}



.footer-license {

  margin: 0;

}



.footer-legal-links {

  display: flex;

  align-items: center;

  gap: 10px;

}



.footer-legal-links a {

  color: var(--text-muted);

  text-decoration: none;

  transition: color 0.2s ease;

}



.footer-legal-links a:hover {

  color: var(--text-primary);

}



/* ==========================================================================

   Custom Floating Toast Notification

   Rule J: Zero Browser Alert Policy (No alert(), confirm(), prompt())

   ========================================================================== */



.toast-container {

  position: fixed;

  bottom: 32px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 99999;

  display: flex;

  flex-direction: column;

  gap: 12px;

  pointer-events: none;

}



.toast-item {

  pointer-events: auto;

  background: rgba(18, 14, 28, 0.95);

  border: 1px solid var(--color-crimson);

  border-radius: 16px;

  padding: 16px 24px;

  display: flex;

  align-items: center;

  gap: 14px;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 0, 85, 0.4);

  backdrop-filter: blur(20px);

  color: var(--text-primary);

  font-family: var(--font-body);

  font-size: 0.94rem;

  animation: toastPop 0.4s var(--ease-out-expo) forwards;

}



.toast-item svg {

  width: 20px;

  height: 20px;

  color: var(--color-cyan);

  flex-shrink: 0;

}



@keyframes toastPop {

  0% { opacity: 0; transform: translateY(20px) scale(0.94); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}



/* ==========================================================================

   Strict Mobile Navbar Mandate & Dedicated Mobile Dock

   Rule L: On mobile screens (<= 768px), ALWAYS replace top navbar with

   dedicated mobile bottom dock (dock-interactive-effect).

   ========================================================================== */



.mobile-dock-wrapper {

  display: none !important;

}



@media (max-width: 768px) {

  /* Hide desktop site header on phone */

  .site-header {

    display: none !important;

  }



  /* Show StaggeredMenu mobile navigation */

  #staggered-menu-mount {

    display: block !important;

  }



  .header-inner {

    padding: 6px 8px 6px 14px !important;

    justify-content: space-between !important;

  }



  /* Hide desktop-only nav track & CTA button on phone */

  #pillnav-mount {

    display: none !important;

  }



  .header-cta-btn {

    display: none !important;

  }



  /* Display the 2-lines menu toggle at the top right corner */

  .mobile-menu-toggle {

    display: flex !important;

  }



  /* Completely remove bottom dock from mobile view per user request */

  .mobile-dock-wrapper {

    display: none !important;

  }



  /* Remove tagline badge line on phones / small devices per user request */

  .hero-badge-pill {

    display: none !important;

  }



  /* Zero margin & padding adaptation */

  .app-section {

    padding: 90px 20px;

  }



  #hero {

    padding-top: 60px;

  }



  .hero-title-mount {

    height: 105px !important;

    justify-content: center !important;

    margin: 0 auto 16px auto !important;

  }



  .hero-title-mount .particle-text {

    min-height: 105px !important;

  }



  .hero-grid {

    grid-template-columns: 1fr;

    gap: 40px;

    text-align: center;

  }



  .hero-actions {

    justify-content: center;

  }



  .hero-metrics-bar {

    margin: 0 auto;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

  }



  .hero-floating-capsule {

    display: none; /* Hide excessive clutter on tiny screens */

  }



  .features-split-layout {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .features-right-stage {

    height: 420px;

  }



  .dual-section-corridor {

    grid-template-columns: 1fr;

    display: flex;

    flex-direction: column;

  }



  .corridor-right-spiral-flank {

    position: relative !important;

    top: auto !important;

    height: 520px !important;

    width: 100% !important;

    overflow: hidden !important;

    align-self: center !important;

    z-index: 20;

  }



  .corridor-section {

    padding: 60px 20px;

    min-height: auto !important;

  }



  /* Responsive heading constraints for mobile viewports */

  .features-heading-raw,

  .download-title-raw {

    font-size: clamp(1.35rem, 6vw, 2.2rem) !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

    max-width: 100% !important;

  }



  .corridor-title-raw {

    font-size: clamp(1.2rem, 5.2vw, 1.95rem) !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

    max-width: 100% !important;

    line-height: 1.15 !important;

  }



  .corridor-tagline-raw {

    font-size: clamp(0.72rem, 3vw, 0.82rem) !important;

    word-break: break-word !important;

    letter-spacing: 0.05em !important;

  }



  .developers-normal-heading {

    font-size: clamp(1.5rem, 7vw, 2.4rem) !important;

    word-break: break-word !important;

  }



  .platform-tiles-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .download-command-deck {

    padding: 36px 20px;

  }



  .btn-apk-download {

    padding: 16px 28px;

    font-size: 1.05rem;

  }



  .comparison-matrix-table th,

  .comparison-matrix-table td {

    padding: 14px 16px;

    font-size: 0.85rem;

  }



  /* Fluid Responsive Typography for Mobile Viewports (Zero Clipping Mandate) */

  .features-heading-raw {

    font-size: clamp(1.4rem, 6.2vw, 2.15rem) !important;

    line-height: 1.15 !important;

    letter-spacing: -0.02em !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

  }



  .corridor-title-raw {

    font-size: clamp(1.35rem, 5.8vw, 2.05rem) !important;

    line-height: 1.15 !important;

    letter-spacing: -0.02em !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

  }



  .download-title-raw {

    font-size: clamp(1.4rem, 6.2vw, 2.15rem) !important;

    line-height: 1.15 !important;

    letter-spacing: -0.02em !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

  }



  .features-heading-mount,

  .corridor-title-mount,

  .download-title-mount {

    min-height: auto !important;

    height: auto !important;

    overflow: visible !important;

  }



  .developers-normal-heading {

    font-size: clamp(1.45rem, 6vw, 2.2rem) !important;

  }



  .community-headline {

    font-size: clamp(1.35rem, 5.5vw, 1.95rem) !important;

  }



  /* Responsive Footer Mobile overrides */

  .site-footer {

    padding: 36px 16px 48px 16px !important;

  }



  .footer-inner {

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    gap: 28px !important;

    width: 100% !important;

    max-width: 100% !important;

  }



  .footer-brand {

    align-items: center !important;

    text-align: center !important;

    max-width: 100% !important;

  }



  .footer-logo {

    justify-content: center !important;

  }



  .footer-copy {

    max-width: 320px !important;

    font-size: 0.82rem !important;

    line-height: 1.5 !important;

  }



  .footer-github-badge {

    margin: 4px auto 0 auto !important;

  }



  .footer-nav-col {

    align-items: center !important;

    width: 100% !important;

  }



  .footer-nav-title {

    display: none !important;

  }



  .footer-links {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 8px 10px !important;

    width: 100% !important;

    max-width: 340px !important;

    margin: 0 auto !important;

  }



  .footer-link {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 10px 12px !important;

    background: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 255, 255, 0.07) !important;

    border-radius: 10px !important;

    font-size: 0.84rem !important;

    color: var(--text-secondary) !important;

  }



  .footer-link:active {

    background: rgba(0, 245, 212, 0.08) !important;

    border-color: rgba(0, 245, 212, 0.3) !important;

    color: var(--color-cyan) !important;

  }



  .footer-bottom-bar {

    margin-top: 28px !important;

    padding-top: 18px !important;

    text-align: center !important;

  }



  .footer-bottom-inner {

    flex-direction: column !important;

    align-items: center !important;

    gap: 10px !important;

    text-align: center !important;

  }



  .footer-license {

    font-size: 0.74rem !important;

    line-height: 1.4 !important;

    max-width: 300px !important;

  }



  .footer-legal-links {

    font-size: 0.76rem !important;

    gap: 8px !important;

  }



}



@media (max-width: 480px) {

  .features-heading-raw,

  .download-title-raw {

    font-size: clamp(1.22rem, 6.5vw, 1.75rem) !important;

  }



  .corridor-title-raw {

    font-size: clamp(1.18rem, 6vw, 1.65rem) !important;

  }



  .android-card {

    padding: 22px 16px !important;

  }



  .android-actions-subrow {

    gap: 12px !important;

  }



  .card-action-trigger {

    font-size: 0.72rem !important;

  }

}



/* Strict Ban on Brand Icon Glow in Navbar and Footer */
.header-brand-icon,
.footer-logo .header-brand-icon,
.header-brand:hover .header-brand-icon,
.footer-logo:hover .header-brand-icon {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border: none !important;
}

/* CardSwap Pure-Design Text & Specs Stage */
.card-swap-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0d0918;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  height: 100%;
  box-sizing: border-box;
}

.card-swap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.card-swap-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-swap-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 0, 85, 0.12);
  border: 1px solid rgba(255, 0, 85, 0.28);
  color: #FF0055;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-swap-icon svg {
  width: 15px;
  height: 15px;
}

.card-swap-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.card-swap-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 245, 212, 0.1);
  color: #00F5D4;
  border: 1px solid rgba(0, 245, 212, 0.25);
  text-transform: uppercase;
}

.card-swap-text-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}

.card-stage-headline {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.card-stage-desc {
  font-size: 0.8rem;
  color: rgba(244, 244, 248, 0.72);
  line-height: 1.5;
  margin: 0;
}

.card-stage-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
  margin-top: 2px;
}

.card-spec-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.04);
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-spec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00F5D4;
  flex-shrink: 0;
  box-shadow: 0 0 6px #00F5D4;
}

.card-swap-tech-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-swap-tech-chips span {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Android Release Badge (Replaces Stable vs Nightly tabs) */
.android-release-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.android-release-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.28);
}

.android-release-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00F5D4;
  box-shadow: 0 0 8px #00F5D4;
}

.android-release-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: #00F5D4;
  letter-spacing: 0.04em;
}


/* Strict Ban on Download Card Avatar Glow */
.android-card-avatar,
.android-card:hover .android-card-avatar,
.android-card-avatar img {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}