/* =============================================================================
 * style.css
 * ─────────────────────────────────────────────────────────────────────────────
 * BrenduhNet public site stylesheet — all public-facing pages.
 *
 * DESIGN SYSTEM:
 *   Dark theme. Amber (#F59E0B) primary accent. Inter body, Orbitron headings.
 *   CSS custom properties defined in :root for all color/border tokens.
 *
 * COLOR TOKENS:
 *   --bg-deep        #07090c   Darkest background (body)
 *   --bg-panel       #0c0f14   Panel surfaces
 *   --bg-card        #111620   Card backgrounds
 *   --accent         #f59e0b   Primary amber accent
 *   --accent-bright  #fbbf24   Hover/active accent
 *   --accent-dim     #92610a   Muted accent (borders, inactive)
 *   --text-primary   #f0f2f5   Main body text
 *   --text-secondary #cdd2da   Secondary text
 *   --text-dim       #8890a0   Muted/label text
 *   --border         #1a2030   Standard border color
 *
 * SECTION MAP (by line):
 *   L1    :root design tokens
 *   L34   Ambient effects + animated schematic background
 *   L76   Navigation (hamburger, dropdown, overlay, domain badge)
 *   L196  Hero / identity (brand statement, launchpad modal)
 *   L388  Flagship intro section
 *   L530  Features section + bento grid
 *   L637  Expansion modules
 *   L707  Safety section
 *   L757  Comms protocols
 *   L801  Ecosystem
 *   L875  Specs
 *   L917  Roadmap
 *   L977  CTA
 *   L1041 How it works
 *   L1105 FAQ accordion
 *   L1170 Use cases
 *   L1228 Team
 *   L1301 Contact form
 *   L1358 Footer
 *   L1400 Ticker / marquee
 *   L1430 Keyframe animations
 *   L1445 Responsive breakpoints (mobile-first)
 *   L1597 Privacy page
 *   L1701 App page
 *   L1882 Email signup
 *   L1947 Social links
 *   L1988 Legal / IP notices
 *   L2011 Bug report floating button
 *   L2052 Product showcase (Steam-style)
 *   L2096 Responsive: tablet (1024px), mobile (768px), small (480px), touch
 *   L2289 Accordion sections
 *   L2366 Use case tags with hover tooltips
 *   L2432 Secondary nav items
 *   L2447 Page hero (non-homepage)
 *   L2481 Product cards grid
 *   L2560 Platform stats box
 *   L2602 Investor CTA box
 *   L2634 Product page hero (carpotato/homepotato)
 *   L2686 Cross-link card
 *   L2716 About page
 *   L2795 Footer polish
 * ============================================================================= */

/* Design tokens — all custom properties used throughout the site.
   bg-* = background layers (deep darkest, panel mid, card lightest)
   accent = amber brand color; accent-bright = hover state; accent-dim = muted/borders
   text-* = text hierarchy; border = standard divider color */
:root {
  --bg-deep: #07090c;
  --bg-panel: #0c0f14;
  --bg-card: #111620;
  --bg-card-hover: #161d2a;
  --accent: #f59e0b;
  --accent-bright: #fbbf24;
  --accent-dim: #92610a;
  --accent-red: #ef4444;
  --accent-green: #22c55e;
  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --accent-violet: #8b5cf6;
  --text-primary: #f0f2f5;
  --text-secondary: #cdd2da;
  --text-dim: #8890a0;
  --border: #1a2030;
  --border-light: #242d3d;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.7;
  font-size: 18px;
  font-weight: 500;
}

/* === AMBIENT EFFECTS === */
/* === ANIMATED SCHEMATIC BACKGROUND === */
#schematic-bg {
  position: fixed; inset: 0;
  z-index: 0; overflow: hidden;
  pointer-events: none;
  opacity: 0.45;
}
#schematic-bg svg {
  width: 100%; height: 100%;
  pointer-events: none;
}
#site-content {
  position: relative;
  z-index: 10;
}

/* PCB trace running animations — stroke-dasharray creates a dashed line,
   stroke-dashoffset animated over time creates the "signal flowing" illusion.
   Variants: normal speed (3s), slow (6s), fast (1.5s), reverse direction */
.trace-pulse       { stroke-dasharray: 8 4;  animation: dash-flow 3s linear infinite; }
.trace-pulse-slow  { stroke-dasharray: 12 6; animation: dash-flow 6s linear infinite; }
.trace-pulse-fast  { stroke-dasharray: 4 3;  animation: dash-flow 1.5s linear infinite; }
.trace-reverse     { stroke-dasharray: 8 4;  animation: dash-flow-rev 4s linear infinite; }
@keyframes dash-flow     { to { stroke-dashoffset: -200; } }
@keyframes dash-flow-rev { to { stroke-dashoffset: 200; } }

/* IC component pulsing glow — alternates between low/high opacity to simulate
   an active chip. lora and i2c variants have slightly different timing. */
.comp-glow      { animation: cpulse 2.5s ease-in-out infinite alternate; }
.comp-glow-lora { animation: cpulse-lora 3s ease-in-out infinite alternate; }
.comp-glow-i2c  { animation: cpulse-i2c 2s ease-in-out infinite alternate; }
@keyframes cpulse      { from { opacity: 0.4; } to { opacity: 1.0; } }
@keyframes cpulse-lora { from { opacity: 0.3; } to { opacity: 0.9; } }
@keyframes cpulse-i2c  { from { opacity: 0.3; } to { opacity: 0.9; } }

/* Background grid breathe — very subtle opacity oscillation on the schematic grid */
.grid-fade { animation: grid-breathe 8s ease-in-out infinite alternate; }
@keyframes grid-breathe { from { opacity: 0.03; } to { opacity: 0.08; } }

/* Fractal noise overlay — SVG feTurbulence filter rendered as a full-screen
   texture at 2.5% opacity. Adds film-grain feel without a real image file. */
.noise-overlay {
  position: fixed; inset: 0; opacity: 0.025;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* === NAVIGATION === */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  background: rgba(7, 9, 12, 0.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 2.5rem;
}

.nav-brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
}

.nav-brand .brand-mark {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.nav-brand .brand-mark svg {
  width: 36px; height: 36px;
}

.nav-brand .brand-text {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 1rem;
  letter-spacing: 4px; color: var(--text-primary);
  text-transform: uppercase;
}

.nav-brand .brand-text span { color: var(--text-dim); font-weight: 400; }

/* Hamburger button — 3 bars built via flex column with gap.
   Bars transform to X via JS toggling .open class (rotate + translateY). */
.hamburger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: 1px solid var(--border);
  cursor: pointer; padding: 8px 7px;
  transition: border-color 0.3s;
  position: relative; z-index: 110;
}

.hamburger:hover { border-color: var(--accent-dim); }

.hamburger span {
  display: block; width: 100%; height: 1.5px;
  background: var(--accent); transition: all 0.3s;
  transform-origin: center;
}

.hamburger.active { border-color: var(--accent); }
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Dropdown menu */
.nav-menu {
  position: fixed; top: 68px; right: 0;
  width: 320px; max-height: calc(100vh - 68px);
  background: rgba(7, 9, 12, 0.96);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 105;
  overflow-y: auto;
  list-style: none;
}

.nav-menu.open { transform: translateX(0); }

.nav-menu li { border-bottom: 1px solid var(--border); }
.nav-menu li:last-child { border-bottom: none; }

.nav-menu a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 2rem;
  text-decoration: none; color: var(--text-secondary);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600; font-size: 1rem;
  letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.25s;
}

.nav-menu a:hover {
  color: var(--accent);
  background: rgba(245, 158, 11, 0.04);
  padding-left: 2.5rem;
}

.nav-menu a .menu-icon {
  font-size: 1rem; width: 24px; text-align: center;
}

/* Overlay behind menu */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 104; opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.nav-overlay.open { opacity: 1; pointer-events: auto; }

/* Domain badge */

}

/* Hide old inline links — replaced by hamburger */
.nav-links { display: none; }

/* === HERO: BRENDUHNET IDENTITY === */
.hero {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8rem 2rem 4rem;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

.hero-eyebrow {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent);
  letter-spacing: 5px; text-transform: uppercase;
  margin-bottom: 2rem;
  animation: fadeIn 0.8s ease-out;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900; letter-spacing: clamp(2px, 1vw, 8px);
  line-height: 1.1; margin-bottom: 1rem;
  animation: fadeSlideUp 0.8s ease-out 0.1s both;
}

.hero-title .accent { color: var(--accent); }

.hero-tagline {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--text-secondary);
  font-weight: 500; max-width: 650px;
  margin: 0 auto 1.5rem;
  animation: fadeSlideUp 0.8s ease-out 0.2s both;
}

.hero-divider {
  width: 60px; height: 2px;
  background: var(--accent-dim);
  margin: 0 auto 2rem;
  animation: fadeSlideUp 0.8s ease-out 0.25s both;
}

.hero-desc {
  font-size: 1rem; color: var(--text-dim);
  max-width: 520px; margin: 0 auto 3rem;
  line-height: 1.8;
  animation: fadeSlideUp 0.8s ease-out 0.3s both;
}

.hero-launch-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 2.5rem;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s;
  animation: fadeSlideUp 0.8s ease-out 0.5s both;
}

.hero-launch-btn:hover {
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.hero-launch-btn .btn-arrow {
  transition: transform 0.3s;
}

.hero-launch-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* App download modal — full-screen overlay with centered card.
   Opened/closed by JS toggling .visible class on .launchpad-overlay. */
.launchpad-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
  display: flex; align-items: center; justify-content: center;
}

.launchpad-overlay.open {
  opacity: 1; pointer-events: auto;
}

.launchpad {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  width: 90%; max-width: 700px;
  padding: 3rem;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.launchpad-overlay.open .launchpad {
  transform: scale(1) translateY(0);
}

.launchpad-close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); font-size: 1.2rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
}

.launchpad-close:hover {
  border-color: var(--accent); color: var(--accent);
}

.launchpad-header {
  margin-bottom: 2rem;
}

.launchpad-header .lp-label {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent);
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.launchpad-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 800; letter-spacing: 2px;
}

.launchpad-header h2 .amber { color: var(--accent); }

.launchpad-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.lp-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text-primary);
  transition: all 0.3s;
}

.lp-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08);
}

.lp-card .lp-icon {
  font-size: 1.5rem; flex-shrink: 0;
  padding-top: 0.1rem;
}

.lp-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.3rem;
}

.lp-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.6;
}

@media (max-width: 768px) {
  .launchpad { padding: 2rem 1.5rem; }
  .launchpad-grid { grid-template-columns: 1fr; }
}

/* === FLAGSHIP INTRO === */
.flagship-intro {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.flagship-intro-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}

.flagship-left .fl-label {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent);
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}

.fl-label .fl-line {
  width: 30px; height: 1px; background: var(--accent-dim);
}

.flagship-left h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: 4px;
  line-height: 1.15; margin-bottom: 1.5rem;
}

.flagship-left h2 .amber { color: var(--accent); }

.flagship-left .fl-body {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.9;
  margin-bottom: 2rem;
}

.flagship-stats-row {
  display: flex; gap: 2.5rem; flex-wrap: wrap;
}

.fl-stat {
  display: flex; flex-direction: column;
}

.fl-stat .fl-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem; font-weight: 800;
  color: var(--accent); line-height: 1;
}

.fl-stat .fl-stat-label {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Flagship visual — schematic diagram */
.flagship-visual {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3rem;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: center;
}

.flagship-visual::before {
  content: 'SYSTEM TOPOLOGY';
  position: absolute; top: 1.2rem; left: 1.5rem;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 3px;
}

.topo-center {
  text-align: center; margin-bottom: 2rem;
}

.topo-hub {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 1.2rem 2rem;
  border: 2px solid var(--accent);
  background: rgba(245, 158, 11, 0.05);
  position: relative;
}

.topo-hub .th-label {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 2px; color: var(--accent);
}

.topo-hub .th-sub {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-top: 0.2rem;
}

.topo-connections {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}

.topo-node {
  text-align: center; padding: 1rem 0.5rem;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
  transition: all 0.3s;
}

.topo-node:hover {
  border-color: var(--accent-dim);
}

.topo-node .tn-icon { font-size: 1.3rem; margin-bottom: 0.4rem; display: block; }

.topo-node .tn-name {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 1px;
  color: var(--text-secondary);
}

.topo-node .tn-proto {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-top: 0.2rem;
}

.topo-lines {
  display: flex; justify-content: center; gap: 3.5rem;
  margin-bottom: 1rem; padding: 0 2rem;
}

.topo-line {
  width: 1px; height: 24px;
  border-left: 1px dashed var(--accent-dim);
}

/* === FEATURES SECTION === */
.features-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.features-inner {
  max-width: 1400px; margin: 0 auto;
}

.section-header {
  margin-bottom: 3.5rem;
  text-align: center;
}

.section-label {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent);
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex; align-items: center; gap: 0.75rem;
  justify-content: center;
}

.section-label .sl-line { width: 30px; height: 1px; background: var(--accent-dim); }

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: 3px;
  margin-bottom: 0.75rem;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.2rem; max-width: 600px;
  margin-left: auto; margin-right: auto;
}

/* Asymmetric bento grid — 6-column CSS grid where feature cells can span
   1, 2, or all 6 columns via .span-2 and .span-full modifier classes. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.bento-cell {
  background: var(--bg-card);
  padding: 2.5rem;
  transition: all 0.35s;
  position: relative; overflow: hidden;
}

.bento-cell:hover { background: var(--bg-card-hover); }

.bento-cell::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.4s;
}

.bento-cell:hover::after { width: 100%; }

.bento-cell.span-2 { grid-column: span 2; }
.bento-cell.span-full { grid-column: 1 / -1; }

.bento-cell .bc-icon {
  font-size: 1.5rem; margin-bottom: 1rem; display: block;
}

.bento-cell .bc-num {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 3px; margin-bottom: 0.75rem;
}

.bento-cell h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 1.5px; margin-bottom: 0.75rem;
}

.bento-cell p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

.bento-cell .bc-tags {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1rem;
}

.bc-tag {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.05);
}

/* === EXPANSION MODULES === */
.expansion-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.expansion-inner { max-width: 1400px; margin: 0 auto; }

.expansion-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3rem;
}

.exp-card {
  background: var(--bg-card);
  padding: 2.5rem;
  position: relative;
  transition: all 0.35s;
  overflow: hidden;
}

.exp-card:hover { background: var(--bg-card-hover); }

.exp-card .exp-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border-light);
  background: rgba(245, 158, 11, 0.03);
}

.exp-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 1.5px; margin-bottom: 0.6rem;
}

.exp-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

.exp-card .exp-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1rem;
}
.exp-card .exp-status.coming { color: var(--accent-violet); }

.exp-card .exp-status .exp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

.exp-card::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0; transition: opacity 0.4s;
}

.exp-card:hover::after { opacity: 1; }

/* === SAFETY === */
.safety-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.safety-inner { max-width: 1400px; margin: 0 auto; }

.safety-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}

.safety-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  position: relative;
  transition: all 0.35s;
  border-top: 3px solid transparent;
}

.safety-card:nth-child(1) { border-top-color: var(--accent-red); }
.safety-card:nth-child(2) { border-top-color: var(--accent); }
.safety-card:nth-child(3) { border-top-color: var(--accent-blue); }
.safety-card:nth-child(4) { border-top-color: var(--accent-red); }
.safety-card:nth-child(5) { border-top-color: var(--accent-green); }
.safety-card:nth-child(6) { border-top-color: var(--accent-cyan); }

.safety-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.safety-card .sc-icon {
  font-size: 2rem; margin-bottom: 1.2rem; display: block;
}

.safety-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.75rem;
}

.safety-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

/* === COMMS PROTOCOLS === */
.comms-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.comms-inner { max-width: 1400px; margin: 0 auto; }

.comms-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3rem;
}

.comms-cell {
  background: var(--bg-card);
  text-align: center; padding: 2.5rem 1rem;
  transition: all 0.3s;
  position: relative;
}

.comms-cell:hover { background: var(--bg-card-hover); }

.comms-cell .cc-icon { font-size: 1.75rem; margin-bottom: 0.8rem; display: block; }

.comms-cell h4 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.3rem;
}

.comms-cell p {
  font-size: 1rem; color: var(--text-dim); line-height: 1.6;
}

.comms-cell .cc-range {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent-dim);
  letter-spacing: 1px; margin-top: 0.6rem;
  display: block;
}

/* === ECOSYSTEM === */
.eco-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.eco-inner { max-width: 1400px; margin: 0 auto; }

.eco-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}

.eco-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  position: relative;
  transition: all 0.35s;
  display: flex; flex-direction: column;
}

.eco-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.06);
}

.eco-card .ec-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem;
}

.eco-card .ec-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem; font-weight: 900;
  color: rgba(245, 158, 11, 0.08); line-height: 1;
}

.eco-card .ec-badge {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 1px;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}

.eco-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.4rem;
  color: var(--accent);
}

.eco-card .ec-ver {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-bottom: 1rem;
}

.eco-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
  flex: 1;
}

.eco-card .ec-platform {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* === SPECS === */
.specs-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.specs-inner { max-width: 1400px; margin: 0 auto; }

.specs-columns {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; margin-top: 3rem;
}

.specs-group h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 3px; color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.spec-row {
  display: flex; justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(26, 32, 48, 0.5);
}

.spec-row .spec-key {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.spec-row .spec-val {
  font-size: 1rem; color: var(--text-primary);
  text-align: right;
}

/* === ROADMAP === */
.roadmap-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.roadmap-inner { max-width: 1400px; margin: 0 auto; }

.roadmap-timeline {
  display: flex; gap: 1.5rem; margin-top: 3rem;
}

.roadmap-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem;
  position: relative;
  transition: all 0.3s;
}

.roadmap-item:hover {
  border-color: var(--accent-dim);
}

.roadmap-item .ri-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 1rem;
}

.ri-status.live { color: var(--accent-green); }
.ri-status.dev { color: var(--accent); }
.ri-status.planned { color: var(--accent-violet); }

.ri-status .ri-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

.ri-status.live .ri-dot { animation: pulse-dot 2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.roadmap-item h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 1.5px; margin-bottom: 0.6rem;
}

.roadmap-item p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

/* === CTA === */
.cta-section {
  position: relative; z-index: 2;
  text-align: center;
  padding: 8rem 2rem;
  border-top: 1px solid var(--border);
}

.cta-section::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.05), transparent 65%);
  pointer-events: none;
}

.cta-section h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 800; letter-spacing: 5px;
  margin-bottom: 1rem;
}

.cta-section h2 .accent { color: var(--accent); }

.cta-section p {
  color: var(--text-secondary);
  font-size: 1.2rem; margin-bottom: 2.5rem;
  max-width: 500px; margin-left: auto; margin-right: auto;
}

.cta-buttons {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 1rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--accent); color: var(--bg-deep);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary:hover {
  background: var(--accent-bright);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* === HOW IT WORKS === */
.howitworks-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.howitworks-inner { max-width: 1400px; margin: 0 auto; }

.hiw-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 3rem; position: relative;
}

.hiw-steps::before {
  content: '';
  position: absolute; top: 48px;
  left: calc(12.5% + 24px); right: calc(12.5% + 24px);
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent), var(--accent-dim));
  opacity: 0.3;
}

.hiw-step {
  text-align: center; padding: 0 1.5rem;
  position: relative;
}

.hiw-num {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: var(--accent);
  border: 2px solid var(--accent);
  background: var(--bg-deep);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative; z-index: 2;
}

.hiw-icon {
  font-size: 2rem; display: block;
  margin-bottom: 0.75rem;
}

.hiw-step h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.6rem;
}

.hiw-step p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.75;
}

.hiw-step .hiw-detail {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-top: 0.75rem;
  line-height: 1.7;
}

/* === FAQ ===
   Pure CSS accordion — .faq-answer max-height transitions from 0 to a
   large value when .open is toggled by JS, creating a smooth expand effect.
   No JS height calculation needed; overflow: hidden clips the content. */
.faq-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.faq-inner { max-width: 900px; margin: 0 auto; }

.faq-list { margin-top: 3rem; }

.faq-item {
  border: 1px solid var(--border);
  margin-bottom: -1px;
  transition: all 0.3s;
}

.faq-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }

.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 2rem;
  cursor: pointer; background: var(--bg-card);
  transition: all 0.3s; gap: 1rem;
  -webkit-user-select: none; user-select: none;
}

.faq-question:hover { background: var(--bg-card-hover); }

.faq-question h3 {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.5px;
  flex: 1;
}

.faq-toggle {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 1.2rem; color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.faq-item.open .faq-toggle { transform: rotate(45deg); }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: rgba(0,0,0,0.2);
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer-inner {
  padding: 0 2rem 1.5rem;
  padding-top: 1rem;
}

.faq-answer-inner p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.85;
}

/* === USE CASES === */
.usecases-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.usecases-inner { max-width: 1400px; margin: 0 auto; }

.usecases-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3rem;
}

.uc-card {
  background: var(--bg-card);
  padding: 2.5rem;
  transition: all 0.35s;
  position: relative; overflow: hidden;
}

.uc-card:hover { background: var(--bg-card-hover); }

.uc-card::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0; transition: opacity 0.4s;
}

.uc-card:hover::after { opacity: 1; }

.uc-card .uc-icon {
  font-size: 2rem; margin-bottom: 1rem; display: block;
}

.uc-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 1.5px; margin-bottom: 0.6rem;
}

.uc-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

.uc-card .uc-examples {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-top: 1rem;
  line-height: 1.8;
}

/* === TEAM === */
.team-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}

.team-inner { max-width: 1400px; margin: 0 auto; }

.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  transition: all 0.35s;
  display: flex; flex-direction: column;
}

.team-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.06);
}

.team-card .tc-initial {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem; font-weight: 800;
  color: var(--accent);
  border: 2px solid var(--accent);
  background: rgba(245, 158, 11, 0.05);
  margin-bottom: 1.5rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.team-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.3rem;
}

.team-card .tc-title {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 1rem;
}

.team-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
  flex: 1;
}

.team-card .tc-roles {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.tc-role {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--accent-dim);
  background: rgba(245, 158, 11, 0.03);
}

/* === CONTACT === */
.contact-section {
  position: relative; z-index: 2;
  padding: 6rem 2rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.contact-inner { max-width: 1400px; margin: 0 auto; }

.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin-top: 3rem;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  display: flex; align-items: flex-start; gap: 1.5rem;
  transition: all 0.3s;
}

.contact-card:hover {
  border-color: var(--accent-dim);
}

.contact-card .cc-icon-wrap {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border: 1px solid var(--border-light);
  background: rgba(245, 158, 11, 0.03);
}

.contact-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.5rem;
}

.contact-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.8;
}

.contact-card a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.3s;
}

.contact-card a:hover {
  border-color: var(--accent);
}

/* === FOOTER === */
footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--border);
  padding: 3rem 2.5rem;
}

.footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1.5rem;
}

.footer-brand {
  display: flex; flex-direction: column; gap: 0.3rem;
}

.footer-brand .fb-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 1rem;
  letter-spacing: 3px; color: var(--text-dim);
}

.footer-right {
  display: flex; align-items: center; gap: 2rem;
}

.footer-right a {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; text-decoration: none;
  transition: color 0.3s;
}

.footer-right a:hover { color: var(--accent); }

.footer-note {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px;
}

/* === TICKER === */
.ticker-wrap {
  position: relative; z-index: 2;
  overflow: hidden;
  background: rgba(245, 158, 11, 0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0;
}

.ticker {
  display: flex; width: max-content;
  animation: ticker-scroll 65s linear infinite;
}

.ticker span {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 1rem; letter-spacing: 5px;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 0 1.5rem; white-space: nowrap;
  font-weight: 500;
}

.ticker .sep { color: var(--accent); margin: 0 1rem; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .flagship-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-cell.span-2 { grid-column: span 1; }
  .bento-cell.span-full { grid-column: 1 / -1; }
  .comms-strip { grid-template-columns: repeat(3, 1fr); }
  .expansion-grid { grid-template-columns: repeat(2, 1fr); }
  .usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .hiw-steps::before { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .roadmap-timeline { flex-direction: column; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .nav-menu { width: 100%; }
  .bento-grid { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }
  .expansion-grid { grid-template-columns: 1fr; }
  .usecases-grid { grid-template-columns: 1fr; }
  .hiw-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-question { padding: 1.25rem 1.5rem; }
  .faq-answer-inner { padding: 0 1.5rem 1.25rem; padding-top: 0.75rem; }
  .eco-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .specs-columns { grid-template-columns: 1fr; }
  .comms-strip { grid-template-columns: repeat(2, 1fr); }
  section, .flagship-intro, .features-section, .safety-section,
  .comms-section, .eco-section, .specs-section, .roadmap-section,
  .expansion-section, .contact-section, .usecases-section,
  .team-section { padding: 3.5rem 1.2rem; }
  .hero { padding: 100px 1.2rem 2.5rem; }
  .hero-tagline { font-size: 1rem; }
  .hero-body { font-size: 1rem; }
  .section-title { font-size: clamp(1.5rem, 4vw, 1.75rem); }
  .section-desc { font-size: 1rem; }
  .flagship-intro-inner { gap: 2rem; }

  /* Footer mobile fix */
  footer { padding: 2rem 1.2rem; }
  .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    align-items: center;
  }
  .footer-brand { align-items: center; }
  .footer-social { justify-content: center; }
  .footer-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  /* CTA mobile fix */
  .cta-section { padding: 3rem 1.2rem; }
  .cta-section h2 { font-size: clamp(1.5rem, 5vw, 1.75rem); }
  .cta-buttons { flex-direction: column; gap: 0.75rem; }
  .cta-buttons .btn { width: 100%; text-align: center; }
  .signup-form { flex-direction: column; margin-top: 1.5rem; }
  .signup-form input[type="email"] { min-width: 100%; }
  .signup-form button { width: 100%; }

  /* Ticker */
  .ticker-wrap { height: 36px; }
  .ticker span { font-size: 0.9rem; letter-spacing: 3px; }

  /* Flagship visual */
  .flagship-visual { text-align: center; }
  .flagship-stats-row { justify-content: center; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .nav-inner { padding: 0 1rem; height: 58px; }
  .nav-brand .brand-text { font-size: 1rem; letter-spacing: 2px; }
  .nav-brand svg { width: 28px; height: 28px; }
  .hero { padding: 90px 1rem 2rem; }
  .hero-title { letter-spacing: clamp(1px, 0.5vw, 4px); }
  .hero-eyebrow { font-size: 0.9rem; letter-spacing: 3px; }
  .hero-launch-btn { font-size: 0.9rem; padding: 0.8rem 1.5rem; letter-spacing: 2px; }
  section, .flagship-intro, .features-section, .safety-section,
  .comms-section, .eco-section, .specs-section, .roadmap-section,
  .expansion-section, .contact-section, .usecases-section,
  .team-section { padding: 2.5rem 1rem; }
  .section-header { margin-bottom: 1.5rem; }
  .section-title { letter-spacing: 2px; }
  .bento-cell, .safety-card, .exp-card, .uc-card, .eco-card { padding: 1.25rem; }
  .comms-strip { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .comms-cell { padding: 0.6rem; font-size: 0.9rem; }
  .hiw-step { padding: 0 0.25rem; }
  .hiw-num { width: 40px; height: 40px; font-size: 1rem; }
  .faq-question { padding: 1rem 1rem; }
  .faq-question h3 { font-size: 1.15rem; }
  .launchpad { padding: 1.5rem; width: 95%; }
  .launchpad-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .lp-card { padding: 1rem; }
  .ticker-wrap { height: 32px; }
  .ticker span { font-size: 0.9rem; letter-spacing: 2px; }

  /* Footer small phone */
  footer { padding: 1.5rem 1rem; }
  .footer-right { gap: 0.75rem; }
  .footer-right a { font-size: 0.9rem; }
  .footer-brand .fb-name { font-size: 0.9rem; letter-spacing: 2px; }
  .footer-note { font-size: 0.9rem; }
  .footer-social a { width: 28px; height: 28px; font-size: 0.9rem; }

  /* CTA small phone */
  .cta-section { padding: 2.5rem 1rem; }
  .cta-section p { font-size: 1rem; }
  .signup-note { font-size: 0.9rem; }

  /* Use cases discount banner */
  .usecases-section [style*="text-align: center"] span[style*="Orbitron"] {
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
  }

  /* Team cards */
  .tc-initial { width: 50px; height: 50px; font-size: 1rem; }
  .tc-roles { gap: 0.4rem; }
  .tc-role { font-size: 0.9rem; padding: 0.2rem 0.5rem; }
}

/* Smooth transitions for interactive elements */
.bento-cell, .safety-card, .exp-card, .uc-card, .eco-card, .faq-item,
.team-card, .contact-card, .comms-cell, .lp-card {
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .faq-question { min-height: 56px; }
  .hamburger { min-width: 48px; min-height: 48px; }
  .nav-menu a { min-height: 48px; display: flex; align-items: center; }
  .btn, .hero-launch-btn { min-height: 48px; }
  .comms-cell { min-height: 56px; }
}

/* Smooth scroll snap for mobile */
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* === PRIVACY PAGE === */
.privacy-wrapper {
  position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto;
  padding: 120px 2rem 6rem;
}

.privacy-header { margin-bottom: 3rem; }

.privacy-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: 3px;
  margin-bottom: 1rem;
}

.privacy-header .effective {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px;
}

.privacy-header .app-badge-label {
  display: inline-block; margin-top: 1rem;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 0.4rem 1rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.05);
}

.policy-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.3s;
}

.policy-section:hover { border-color: rgba(245, 158, 11, 0.15); }

.policy-section h2 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: 2px; color: var(--accent);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.policy-section p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.85;
  margin-bottom: 1rem;
}

.policy-section p:last-child { margin-bottom: 0; }

.policy-section ul { list-style: none; padding: 0; margin: 0.75rem 0; }

.policy-section li {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.85;
  padding: 0.35rem 0 0.35rem 1.5rem;
  position: relative;
}

.policy-section li::before {
  content: '\2014';
  position: absolute; left: 0;
  color: var(--accent-dim);
  font-weight: 600;
}

.policy-section strong { color: var(--text-primary); font-weight: 600; }

.policy-section a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.3s;
}

.policy-section a:hover { border-color: var(--accent); }

.highlight-box {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid var(--accent-dim);
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
}

.highlight-box p {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .privacy-wrapper { padding: 100px 1.2rem 4rem; }
  .policy-section { padding: 1.5rem; }
}

/* === APP PAGE === */
.app-hero {
  position: relative; z-index: 2;
  padding: 140px 2rem 5rem;
  text-align: center;
  max-width: 900px; margin: 0 auto;
}

.app-hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800; letter-spacing: 3px;
  margin-bottom: 1rem;
}

.app-hero h1 .amber { color: var(--accent); }

.app-hero .tagline {
  font-size: 1.2rem; color: var(--text-secondary);
  max-width: 600px; margin: 0 auto 2rem;
  line-height: 1.8;
}

.app-hero .badges {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2rem;
}

.app-badge {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 0.4rem 1rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.05);
}

.app-badge.green {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.play-store-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 2rem;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 1rem; font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s;
}

.play-store-btn .ps-sub {
  font-size: 0.9rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 2px;
  display: block;
}

.app-content {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: 0 2rem 6rem;
}

.app-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 5rem;
}

.feat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem;
  transition: all 0.3s;
}

.feat-card:hover {
  border-color: rgba(245, 158, 11, 0.15);
  background: var(--bg-card-hover);
}

.feat-card .fc-icon { font-size: 1.75rem; margin-bottom: 1rem; display: block; }

.feat-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.6rem;
}

.feat-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.75;
}

.privacy-callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3rem;
  margin-bottom: 5rem;
  text-align: center;
}

.privacy-callout h2 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 3px; margin-bottom: 1.5rem;
}

.privacy-pills {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.privacy-pill {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}

.privacy-callout a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}

.perms-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; margin-bottom: 5rem;
}

.perm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem 2rem;
  display: flex; align-items: flex-start; gap: 1rem;
}

.perm-card .perm-icon { font-size: 1.5rem; flex-shrink: 0; padding-top: 0.15rem; }

.perm-card h4 {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.9rem; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 0.3rem;
}

.perm-card p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.7;
}

.perm-status {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
  margin-top: 0.4rem; display: inline-block;
}

.perm-status.required { color: var(--accent); }
.perm-status.optional { color: #22c55e; }

@media (max-width: 768px) {
  .app-hero { padding: 110px 1.2rem 3rem; }
  .app-content { padding: 0 1.2rem 4rem; }
  .app-features-grid { grid-template-columns: 1fr; }
  .perms-grid { grid-template-columns: 1fr; }
  .privacy-callout { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .app-hero .badges { gap: 0.5rem; }
  .app-badge { font-size: 0.9rem; padding: 0.3rem 0.75rem; }
  .privacy-pills { gap: 0.5rem; }
  .privacy-pill { font-size: 0.9rem; padding: 0.4rem 0.75rem; }
}

/* === EMAIL SIGNUP === */
.signup-form {
  display: flex; gap: 0.75rem;
  max-width: 480px; margin: 2rem auto 0;
  flex-wrap: wrap; justify-content: center;
}

.signup-form input[type="email"] {
  flex: 1; min-width: 320px;
  padding: 0.85rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
}

.signup-form input[type="email"]::placeholder {
  color: var(--text-dim);
}

.signup-form input[type="email"]:focus {
  border-color: var(--accent);
}

.signup-form button {
  padding: 0.85rem 2rem;
  background: var(--accent);
  border: none;
  color: var(--bg-deep);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

.signup-form button:hover {
  background: var(--accent-bright);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.25);
}

.signup-success {
  display: none;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: #22c55e;
  letter-spacing: 1px; margin-top: 1rem;
  text-align: center;
}

.signup-note {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; margin-top: 0.75rem;
  text-align: center;
}

@media (max-width: 480px) {
  .signup-form { flex-direction: column; }
  .signup-form input[type="email"] { min-width: 100%; }
  .signup-form button { width: 100%; }
}

/* === SOCIAL LINKS ===
   Social icon links in footer — populated dynamically from site_settings
   by includes/footer.php. Section is hidden entirely if no platforms are enabled. */
.social-links {
  display: flex; gap: 1rem; align-items: center;
}

.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s;
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.05);
}

.footer-social {
  display: flex; gap: 0.75rem; align-items: center;
  margin-top: 0.75rem;
}

.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s;
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* === LEGAL / IP NOTICES === */
.legal-notice {
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; color: var(--text-dim);
  letter-spacing: 1px; line-height: 1.8;
  text-align: center;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
}

.patent-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
  font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.04);
  margin-top: 0.5rem;
}

/* Fixed floating button (bottom-right) linking to /bugs submission form.
   Emoji icon, amber glow on hover, stays above all content (z-index: 9999). */
.bug-report-btn {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  background: rgba(239, 68, 68, 0.9); color: #fff;
  border: none; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transition: all 0.3s;
}
.bug-report-btn:hover { transform: scale(1.1); background: #ef4444; }

.bug-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.bug-modal-overlay.open { display: flex; }
.bug-modal {
  background: var(--bg-card, #0c0f14); border: 1px solid var(--border, #1a2030);
  padding: 2rem; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.bug-modal h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ef4444; letter-spacing: 1px; margin-bottom: 1rem; }
.bug-modal label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-dim, #8890a0); margin-bottom: 0.25rem; margin-top: 0.75rem; }
.bug-modal input, .bug-modal select, .bug-modal textarea {
  width: 100%; padding: 0.6rem; background: var(--bg-deep, #07090c); border: 1px solid var(--border, #1a2030);
  color: var(--text-primary, #f0f2f5); font-size: 1rem; font-family: inherit;
}
.bug-modal input:focus, .bug-modal select:focus, .bug-modal textarea:focus { border-color: #ef4444; outline: none; }
.bug-modal textarea { min-height: 80px; resize: vertical; }
.bug-modal .bug-submit-row { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.bug-modal .bug-submit-btn {
  padding: 0.6rem 1.5rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; border: none;
  background: #ef4444; color: #fff; letter-spacing: 0.5px;
}
.bug-modal .bug-cancel-btn {
  padding: 0.6rem 1.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  background: none; color: var(--text-dim, #8890a0); border: 1px solid var(--border, #1a2030);
}
.bug-success { color: #22c55e; font-weight: 600; text-align: center; padding: 2rem; font-size: 1rem; }


/* ================================================================
   RESPONSIVE DESIGN — CONSOLIDATED
   Single source of truth for all breakpoints.
   DO NOT add responsive rules anywhere else in this file.
   ================================================================ */

/* --- Utility classes for product grids --- */
.product-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.product-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.variant-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1rem;
}
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    text-align: center;
    padding: 2rem;
}
.product-border-section {
    border-left: 4px solid var(--accent);
    margin-left: 2rem;
    margin-right: 2rem;
}

/* --- Global overflow protection --- */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .flagship-intro-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .bento-grid { grid-template-columns: 1fr 1fr; }
    .bento-cell.span-2 { grid-column: span 1; }
    .bento-cell.span-full { grid-column: 1 / -1; }
    .comms-strip { grid-template-columns: repeat(3, 1fr); }
    .expansion-grid { grid-template-columns: repeat(2, 1fr); }
    .usecases-grid { grid-template-columns: repeat(2, 1fr); }
    .hiw-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .hiw-steps::before { display: none; }
    .team-grid { grid-template-columns: 1fr; }
    .roadmap-timeline { flex-direction: column; }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    body { font-size: 16px; }
    .nav-menu { width: 100%; }

    /* Sections — uniform padding */
    section, .flagship-intro, .features-section, .safety-section,
    .comms-section, .eco-section, .specs-section, .roadmap-section,
    .expansion-section, .contact-section, .usecases-section,
    .team-section { padding: 3.5rem 1.2rem; }

    /* Footer stacks */
    .footer-inner {
        flex-direction: column; gap: 1.5rem;
        text-align: center; align-items: center;
    }
    .footer-brand { align-items: center; }
    .footer-right {
        flex-direction: row; flex-wrap: wrap; justify-content: center;
    }

    /* Homepage — flagship */
    .flagship-intro { padding: 3.5rem 1.2rem; }
    .flagship-intro-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .flagship-visual {
        min-height: 250px;
        padding: 1.25rem;
        text-align: center;
    }
    .flagship-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        justify-content: center;
    }
    .fl-stat-num { font-size: 2rem; }

    /* Homepage — topology */
    .topo-center { transform: scale(0.7); transform-origin: center; }
    .topo-connections {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .topo-node { padding: 0.6rem 0.3rem; }
    .topo-lines { gap: 1.5rem; padding: 0 0.5rem; }

    /* Product grids */
    .product-grid-2 { grid-template-columns: 1fr; }
    .product-grid-auto { grid-template-columns: 1fr; }
    .feature-grid-3 { grid-template-columns: 1fr; }

    /* Product page borders */
    .product-border-section {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-left-width: 3px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stats bar */
    .stats-bar { gap: 1.5rem; padding: 1.5rem 1rem; }
    .stats-bar > div { min-width: 40%; }

    /* Cards — reduce padding */
    .reveal[style*="padding: 2.5rem"],
    .reveal[style*="padding:2.5rem"] { padding: 1.25rem !important; }
    .reveal[style*="padding: 1.5rem"],
    .reveal[style*="padding:1.5rem"] { padding: 1rem !important; }

    /* Existing grids */
    .bento-grid { grid-template-columns: 1fr; }
    .hiw-steps { grid-template-columns: 1fr; }
    .launchpad-grid { grid-template-columns: 1fr; }

    /* Tables — horizontal scroll */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Privacy/App pages */
    .privacy-wrapper { padding: 100px 1.2rem 4rem; }
    .policy-section { padding: 1.5rem; }
    .app-hero { padding: 110px 1.2rem 3rem; }
    .app-content { padding: 0 1.2rem 4rem; }

    /* Admin panel */
    .admin-wrap { padding: 1rem; }
    .admin-header { flex-direction: column; gap: 0.75rem; text-align: center; }
    .stats-row, .build-row { grid-template-columns: 1fr 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
    .tabs { gap: 0.25rem; }
    .tab { font-size: 0.9rem; padding: 0.4rem 0.6rem; }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    body { font-size: 16px; }
    .nav-inner { padding: 0 1rem; height: 58px; }
    .nav-brand .brand-text { font-size: 1rem; letter-spacing: 2px; }
    .nav-brand svg { width: 28px; height: 28px; }

    /* Hero */
    .hero { padding: 90px 1rem 2rem; }
    .hero-title { letter-spacing: clamp(1px, 0.5vw, 4px); }
    .hero-eyebrow { font-size: 0.9rem; letter-spacing: 3px; }
    .hero-launch-btn { font-size: 0.9rem; padding: 0.8rem 1.5rem; letter-spacing: 2px; }

    /* Sections — tighter padding */
    section, .flagship-intro, .features-section, .safety-section,
    .comms-section, .eco-section, .specs-section, .roadmap-section,
    .expansion-section, .contact-section, .usecases-section,
    .team-section { padding: 2rem 0.8rem; }

    /* Cards */
    .bento-cell, .safety-card, .exp-card, .uc-card, .eco-card { padding: 1.25rem; }

    /* Comms strip */
    .comms-strip { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .comms-cell { padding: 0.6rem; font-size: 0.9rem; }

    /* How it works */
    .hiw-step { padding: 0 0.25rem; }
    .hiw-num { width: 40px; height: 40px; font-size: 1rem; }

    /* FAQ */
    .faq-question { padding: 1rem; }
    .faq-question h3 { font-size: 1.15rem; }

    /* Launchpad / ecosystem modal */
    .launchpad { padding: 1.5rem; width: 95%; }
    .launchpad-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .lp-card { padding: 1rem; }

    /* Flagship */
    .flagship-stats-row { grid-template-columns: 1fr; }
    .flagship-visual { min-height: 200px; }
    .topo-center { transform: scale(0.55); }
    .topo-connections { grid-template-columns: 1fr; }

    /* Product page */
    .product-border-section {
        border-left: none;
        border-top: 3px solid var(--accent);
        margin-left: 0;
        margin-right: 0;
        padding: 1.5rem 0.8rem;
    }
    .stats-bar { gap: 1rem; }
    .stats-bar > div { min-width: 45%; }
    .variant-grid-3 { grid-template-columns: 1fr; }

    /* Signup form */
    .signup-form { flex-direction: column; }
    .signup-form input[type="email"] { min-width: 100%; }

    /* App page badges */
    .app-hero .badges { gap: 0.5rem; }
    .app-badge { font-size: 0.9rem; padding: 0.3rem 0.75rem; }
}

/* ===== TOUCH DEVICES ===== */
@media (pointer: coarse) {
    .topo-node:hover { border-color: var(--border); }
    .bento-cell:hover { border-color: var(--border); }
    .exp-card:hover { transform: none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .animated-schematic * { animation: none !important; }
}

/* === ACCORDION SECTIONS ===
   Reusable accordion component (HomePotato specs, product FAQ sections).
   Same expand pattern as FAQ: max-height transition on .open class toggle by JS.
   .accordion-group wraps all items; .accordion-item holds the toggle + content. */
.accordion-group {
    max-width: 1000px;
    margin: 0 auto 2rem;
}
.accordion-item {
    border: 1px solid var(--border);
    margin-bottom: -1px;
    background: var(--bg-card);
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.accordion-header:hover {
    background: rgba(255,255,255,0.02);
}
.accordion-header h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.accordion-header .acc-arrow {
    font-size: 0.9rem;
    color: var(--text-dim);
    transition: transform 0.3s;
}
.accordion-item.open .acc-arrow {
    transform: rotate(180deg);
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.accordion-item.open .accordion-body {
    max-height: 3000px;
}
.accordion-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}
.accordion-content p {
    margin-bottom: 0.75rem;
}
.accordion-content .acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.accordion-content .acc-card {
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-deep);
}
.accordion-content .acc-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.accordion-content .acc-card p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 0;
}

/* Tag chips with hover tooltip popups — tooltip text stored in data-tooltip
   attribute, shown via ::after pseudo-element on hover. Pure CSS, no JS. */
.uc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.uc-tag {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: default;
    transition: all 0.2s;
}
.uc-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(245, 158, 11, 0.05);
}
.uc-tag.uc-home:hover {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}
.uc-tag::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
}
.uc-tag:hover::after {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .uc-tag::after {
        display: none;
    }
    .uc-tag {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }
}

/* .sr-only — visually hidden but readable by screen readers and crawlers.
   Used for hidden h1 tags on pages where the visual h1 is an SVG/image. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================
   POLISH REV 14 — Extracted inline styles
   ============================================ */

/* === NAV SECONDARY ITEMS === */
.nav-secondary-divider {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}
.nav-secondary-link {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* === PAGE HERO (non-homepage) === */
.page-hero {
    padding: 5rem 2rem 3rem;
    text-align: center;
}
.page-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}
.page-eyebrow {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 1rem;
}
.page-eyebrow-green {
    color: #22c55e;
}
.page-hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.page-hero-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 3rem;
}

/* === PRODUCT CARDS GRID (product.html) === */
.product-cards-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 768px) {
    .product-cards-grid {
        grid-template-columns: 1fr;
    }
}
.product-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2.5rem;
    transition: border-color 0.3s;
}
.product-card-link:hover {
    border-color: rgba(245, 158, 11, 0.4);
}
.product-card-link.hp:hover {
    border-color: rgba(34, 197, 94, 0.4);
}
.product-card-label {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.product-card-label.hp {
    color: #22c55e;
}
.product-card-h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.product-card-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.product-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.badge {
    font-size: 0.9rem;
    padding: 0.3rem 0.75rem;
}
.badge-amber {
    background: rgba(245, 158, 11, 0.08);
    color: var(--accent);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge-green {
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.product-card-cta {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.product-card-cta.amber { color: var(--accent); }
.product-card-cta.green { color: #22c55e; }

/* Highlighted stats row used on product pages — e.g. "200+ channels",
   "35+ source files". Amber-tinted background to draw attention. */
.platform-stats-section {
    padding: 2rem 2rem 3rem;
}
.platform-stats-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.platform-stats-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.platform-stats-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.platform-stats-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 1.5rem;
}
.stat-block-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
}
.stat-block-label {
    font-size: 0.9rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* Special CTA box for investor/partner outreach — visually distinct from
   the standard amber CTA section. Used on the About page. */
.investor-cta-section {
    padding: 2rem 2rem 4rem;
    text-align: center;
}
.investor-cta-box {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2.5rem;
}
.investor-cta-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.investor-cta-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.investor-cta-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}
.investor-cta-note a { color: var(--accent); }

/* === PRODUCT PAGE HERO (carpotato/homepotato) === */
.product-page-hero {
    padding: 5rem 2rem 3rem;
}
.product-page-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.product-hero-meta {
    font-size: 0.75rem;
    letter-spacing: 4px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.product-hero-meta.green { color: #22c55e; }
.product-hero-h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}
.product-hero-tagline {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin-bottom: 2rem;
}
.product-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}
.product-hero-badge {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--accent);
    background: rgba(245, 158, 11, 0.06);
}
.product-hero-badge.green {
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}

/* === CROSS-LINK CARD (bottom of product pages) ===
   Bottom-of-page cross-promotion — e.g. "Also check out HomePotato"
   shown at the end of each product page to encourage discovery of the other product. */
.crosslink-section {
    padding: 3rem 2rem;
    text-align: center;
}
.crosslink-card {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid var(--border);
    padding: 2rem;
    background: var(--bg-card);
}
.crosslink-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}
.crosslink-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.crosslink-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

/* === ABOUT PAGE === */
.about-hero {
    padding: 5rem 2rem 3rem;
    text-align: center;
}
.about-section {
    padding: 2rem 2rem 3rem;
}
.about-inner {
    max-width: 900px;
    margin: 0 auto;
}
.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
@media (max-width: 768px) {
    .team-grid { grid-template-columns: 1fr; }
    .platform-stats-row { flex-wrap: wrap; gap: 1.5rem; }
}
.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2rem;
}
.team-card-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.team-card-role {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 1rem;
}
.team-card-bio {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (max-width: 768px) {
    .contact-cards-grid { grid-template-columns: 1fr; }
}
.contact-card {
    border: 1px solid var(--border);
    padding: 1.5rem;
    background: var(--bg-card);
}
.contact-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.contact-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.contact-card-email {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
}
.contact-card-email.green { color: #22c55e; }

/* === FOOTER POLISH === */
.footer-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--text-dim);
}