/* ═══════════════════════════════════════════════════════════════════
   MX2K — IMMERSIVE VISUAL LAYER  v3.1
   Full cross-device: Desktop · Large-touch · Tablet · Mobile
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   GLOBAL PERFORMANCE
───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

.reduced-motion * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ─────────────────────────────────────────────────────────────────
   KINETIC TYPOGRAPHY — CHARACTER REVEAL (all devices)
───────────────────────────────────────────────────────────────── */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotateX(40deg);
  animation: charReveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes charReveal {
  0%   { opacity: 0; transform: translateY(60px) rotateX(40deg); }
  60%  { opacity: 1; transform: translateY(-4px) rotateX(-5deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: wordReveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(0.8s + var(--wi, 0) * 0.1s);
}

@keyframes wordReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────
   TYPING CURSOR (all devices)
───────────────────────────────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  animation: blink 0.7s step-end infinite;
  color: var(--cyan);
  font-weight: 300;
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   GLITCH EFFECT (all devices — CSS only, no hover dependency)
───────────────────────────────────────────────────────────────── */
.hero-title { position: relative; }

.hero-title.glitch-active {
  animation: glitch-shake 0.4s linear;
}

.hero-title.glitch-active::before,
.hero-title.glitch-active::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: var(--cyan);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  width: 100%;
  pointer-events: none;
}

.hero-title.glitch-active::before {
  animation: glitch-1 0.4s steps(2) linear;
  clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%);
  color: rgba(0,212,255,0.8);
  left: -2px;
}

.hero-title.glitch-active::after {
  animation: glitch-2 0.4s steps(2) linear;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  color: rgba(0,119,255,0.8);
  left: 2px;
}

@keyframes glitch-shake {
  0%,100% { transform: translate(0); }
  20%     { transform: translate(-2px, 1px); }
  40%     { transform: translate(2px, -1px); }
  60%     { transform: translate(-1px, 2px); }
  80%     { transform: translate(1px, -2px); }
}
@keyframes glitch-1 {
  0%   { clip-path: polygon(0 15%,100% 15%,100% 40%,0 40%); transform: translate(-4px,0); }
  33%  { clip-path: polygon(0 30%,100% 30%,100% 55%,0 55%); transform: translate(4px,0); }
  66%  { clip-path: polygon(0 5%, 100% 5%, 100% 25%,0 25%); transform: translate(-2px,0); }
  100% { clip-path: polygon(0 15%,100% 15%,100% 40%,0 40%); transform: translate(0); }
}
@keyframes glitch-2 {
  0%   { clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); transform: translate(4px,0); }
  33%  { clip-path: polygon(0 70%,100% 70%,100% 90%,0 90%); transform: translate(-4px,0); }
  66%  { clip-path: polygon(0 55%,100% 55%,100% 75%,0 75%); transform: translate(2px,0); }
  100% { clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); transform: translate(0); }
}

/* ─────────────────────────────────────────────────────────────────
   HOLOGRAPHIC GLARE OVERLAY (shared between mouse + touch)
───────────────────────────────────────────────────────────────── */
.holo-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: screen;
}

/* ─────────────────────────────────────────────────────────────────
   3D CARD BASE — preserve-3d on desktop, flat on mobile
───────────────────────────────────────────────────────────────── */
.r-card, .venture-card, .pillar {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.6s cubic-bezier(0.23,1,0.32,1),
    box-shadow 0.4s,
    filter 0.4s;
}

/* ─────────────────────────────────────────────────────────────────
   TOUCH CARD INTERACTIONS (tablet / large-touch)
───────────────────────────────────────────────────────────────── */

/* Tap glow on mobile */
.r-card.touch-glow,
.venture-card.touch-glow,
.pillar.touch-glow {
  box-shadow:
    0 0 0 2px rgba(0,212,255,0.6),
    0 0 32px rgba(0,212,255,0.2);
  transform: scale(1.02);
  transition: transform 0.2s, box-shadow 0.3s;
}

/* Tap-focus state (tablet): reveals hover-equivalent border */
.r-card.touch-focus,
.venture-card.touch-focus {
  border-color: rgba(0,212,255,0.5) !important;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.3),
    0 20px 50px rgba(0,0,0,0.5),
    0 0 30px rgba(0,212,255,0.12);
}

.r-card.touch-focus .holo-glare,
.venture-card.touch-focus .holo-glare {
  opacity: 0.6;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,212,255,0.12) 0%, transparent 60%);
}

/* ─────────────────────────────────────────────────────────────────
   BUTTON RIPPLE EFFECT (mouse + touch)
───────────────────────────────────────────────────────────────── */
.btn-ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 8px; height: 8px;
  background: rgba(0,212,255,0.5);
  transform: translate(-50%, -50%) scale(0);
  animation: btn-ripple 0.7s cubic-bezier(0, 0.5, 0.5, 1) forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes btn-ripple {
  0%   { transform: translate(-50%,-50%) scale(0);  opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(40); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION PROGRESS DOTS (desktop + large-touch landscape)
───────────────────────────────────────────────────────────────── */
#section-progress {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.sp-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,212,255,0.2);
  border: 1px solid rgba(0,212,255,0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
  display: flex; align-items: center; justify-content: center;
  /* Larger tap target for touch */
  -webkit-tap-highlight-color: transparent;
}

.sp-dot::before {
  content: '';
  position: absolute;
  inset: -8px;  /* larger invisible tap area */
}

.sp-dot:hover,
.sp-dot.active {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,212,255,0.7), 0 0 24px rgba(0,212,255,0.3);
  transform: scale(1.4);
}

.sp-tooltip {
  position: absolute;
  right: 20px;
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--cyan);
  text-transform: uppercase;
  background: rgba(5,13,26,0.9);
  border: 1px solid rgba(0,212,255,0.2);
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(6px);
  backdrop-filter: blur(10px);
}

.sp-dot:hover .sp-tooltip,
.sp-dot:focus .sp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────────────────────────────────────────────────────────────
   PAGE PROGRESS BAR
───────────────────────────────────────────────────────────────── */
#page-progress-bar {
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────────
   IN-VIEW REVEAL (GSAP handles when loaded; CSS fallback otherwise)
───────────────────────────────────────────────────────────────── */
body:not(.gsap-active) .r-card,
body:not(.gsap-active) .pillar,
body:not(.gsap-active) .venture-card,
body:not(.gsap-active) .vbadge {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.23,1,0.32,1),
    transform 0.7s cubic-bezier(0.23,1,0.32,1);
}

body:not(.gsap-active) .r-card.in-view,
body:not(.gsap-active) .pillar.in-view,
body:not(.gsap-active) .venture-card.in-view,
body:not(.gsap-active) .vbadge.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────
   LIGHT BEAM SWEEP (all devices)
───────────────────────────────────────────────────────────────── */
.light-beam-sweep {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(0,212,255,0.06) 50%, transparent 70%);
  animation: beam-sweep 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes beam-sweep {
  0%   { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   HOLOGRAPHIC BADGE SHIMMER (mouse + touchmove)
───────────────────────────────────────────────────────────────── */
.vbadge {
  position: relative;
  overflow: hidden;
}

.vbadge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--holo-x, 50%) var(--holo-y, 50%),
    rgba(0,212,255,0.12) 0%, transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: screen;
}

.vbadge:hover::after {
  opacity: 1;
}

/* On touch: show shimmer on touch-active state */
@media (hover: none) {
  .vbadge:active::after { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   ROADMAP SUPER PULSE (all devices)
───────────────────────────────────────────────────────────────── */
.rm-dot.rm-super-pulse {
  animation: rm-super-pulse 0.6s ease-out;
}

@keyframes rm-super-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,212,255,0.8), 0 0 16px rgba(0,212,255,0.4); transform: scale(1); }
  50%  { box-shadow: 0 0 0 18px rgba(0,212,255,0), 0 0 32px rgba(0,212,255,0.6); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(0,212,255,0),   0 0 8px  rgba(0,212,255,0.3); transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   HERO LOGO AURA (desktop + tablet, not mobile)
───────────────────────────────────────────────────────────────── */
.hero-logo-aura {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  z-index: 0;
}

.logo-orbit-point {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.3);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}

.logo-orbit-point:nth-child(1) { animation: logo-orbit-1 7s   linear infinite; }
.logo-orbit-point:nth-child(2) { animation: logo-orbit-2 9s   linear infinite; }
.logo-orbit-point:nth-child(3) { animation: logo-orbit-3 11s  linear infinite; }
.logo-orbit-point:nth-child(4) { animation: logo-orbit-4 8.5s linear infinite; }

@keyframes logo-orbit-1 {
  0%   { transform: translate(-50%,-50%) rotate(0deg)   translateX(90px)  rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg) translateX(90px)  rotate(-360deg); }
}
@keyframes logo-orbit-2 {
  0%   { transform: translate(-50%,-50%) rotate(90deg)  translateX(110px) rotate(-90deg); }
  100% { transform: translate(-50%,-50%) rotate(450deg) translateX(110px) rotate(-450deg); }
}
@keyframes logo-orbit-3 {
  0%   { transform: translate(-50%,-50%) rotate(180deg) translateX(80px)  rotate(-180deg); }
  100% { transform: translate(-50%,-50%) rotate(540deg) translateX(80px)  rotate(-540deg); }
}
@keyframes logo-orbit-4 {
  0%   { transform: translate(-50%,-50%) rotate(270deg) translateX(100px) rotate(-270deg); }
  100% { transform: translate(-50%,-50%) rotate(630deg) translateX(100px) rotate(-630deg); }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION BG PARALLAX SMOOTHING
───────────────────────────────────────────────────────────────── */
.section-bg {
  will-change: transform;
  backface-visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   VENTURE CARD HOLOGRAPHIC BORDER
───────────────────────────────────────────────────────────────── */
.venture-card { position: relative; }

.venture-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, rgba(0,212,255,0.15) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: holo-border-shift 4s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show on hover (desktop) OR touch-focus (tablet) */
.venture-card:hover::before,
.venture-card.touch-focus::before { opacity: 1; }

@keyframes holo-border-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* ─────────────────────────────────────────────────────────────────
   RESEARCH CARD GLOW SCAN
───────────────────────────────────────────────────────────────── */
.r-card { position: relative; overflow: hidden; }

.r-card::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  animation: card-scan 2.5s ease-in-out infinite;
  animation-play-state: paused;
}

/* Hover (desktop) OR touch-focus (tablet) */
.r-card:hover::after,
.r-card.touch-focus::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes card-scan {
  0%   { top: -100%; }
  100% { top:  120%; }
}

/* ─────────────────────────────────────────────────────────────────
   PILLAR HOVER/TOUCH EFFECTS
───────────────────────────────────────────────────────────────── */
.pillar-num {
  transition: all 0.4s;
}

.pillar:hover .pillar-num,
.pillar.touch-glow .pillar-num {
  text-shadow: 0 0 8px var(--cyan), 0 0 20px var(--cyan), 0 0 40px rgba(0,212,255,0.5);
  transform: scale(1.1);
}

.pillar {
  transition:
    transform 0.5s cubic-bezier(0.23,1,0.32,1),
    box-shadow 0.4s,
    border-color 0.3s;
}

.pillar:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 30px rgba(0,212,255,0.12),
    inset 0 1px 0 rgba(0,212,255,0.2);
}

/* ─────────────────────────────────────────────────────────────────
   CONNECT FORM LASER UNDERLINE (focus fires on touch too)
───────────────────────────────────────────────────────────────── */
.input-line {
  transition:
    width 0.4s cubic-bezier(0.23,1,0.32,1),
    background 0.3s,
    box-shadow 0.3s;
}

/* ─────────────────────────────────────────────────────────────────
   FEATURE STRIP HOVER (desktop only, no hover on touch)
───────────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .strip-items span {
    transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
    cursor: default;
  }
  .strip-items span:hover {
    color: var(--cyan);
    text-shadow: 0 0 12px rgba(0,212,255,0.6);
    transform: translateY(-2px);
  }

  .feature-list li { transition: transform 0.3s; }
  .feature-list li:hover { transform: translateX(6px); }
  .feature-list li:hover .feat-icon i { animation: feat-spin 0.6s ease-out; }
}

@keyframes feat-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION TITLE HIGHLIGHT BREATHE
───────────────────────────────────────────────────────────────── */
.section-title .highlight {
  position: relative;
  display: inline-block;
}

.section-title .highlight::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.08) 0%, transparent 70%);
  border-radius: 8px;
  animation: highlight-breathe 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes highlight-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER TOP GLOW LINE
───────────────────────────────────────────────────────────────── */
.site-footer { position: relative; z-index: 2; }

.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,255,0.4) 25%,
    var(--cyan) 50%,
    rgba(0,212,255,0.4) 75%,
    transparent 100%);
  animation: footer-glow 4s ease-in-out infinite;
}

@keyframes footer-glow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   RESEARCH CARD FILL ANIMATION
───────────────────────────────────────────────────────────────── */
.r-card-fill {
  width: 0;
  transition: width 1.5s cubic-bezier(0.23,1,0.32,1) 0.3s;
}

/* ─────────────────────────────────────────────────────────────────
   ORBITAL CORE BREATHE
───────────────────────────────────────────────────────────────── */
.orbit-core { position: relative; }

.orbit-core::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, transparent 70%);
  animation: core-breathe 3s ease-in-out infinite;
}

@keyframes core-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%       { transform: scale(1.2); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   VENTURE SECTION GRID ANIMATION
───────────────────────────────────────────────────────────────── */
.startup-bg-grid {
  animation: grid-shift 20s linear infinite;
}

@keyframes grid-shift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}

/* ─────────────────────────────────────────────────────────────────
   VC PILL STATUS PULSE
───────────────────────────────────────────────────────────────── */
.vc-pill-active {
  animation: pill-active-pulse 2s ease-in-out infinite;
}

@keyframes pill-active-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,212,255,0.3); }
  50%       { box-shadow: 0 0 14px rgba(0,212,255,0.7); }
}

/* ─────────────────────────────────────────────────────────────────
   HERO DEPTH GRADIENTS
───────────────────────────────────────────────────────────────── */
#hero { position: relative; overflow: hidden; }

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,119,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0,212,255,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-deep) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────────────
   CURSOR TRAIL (desktop only — injected by JS)
───────────────────────────────────────────────────────────────── */
#cursor-trail-canvas {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   ENHANCED SCROLLBAR (desktop)
───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cyan), var(--blue)); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ─────────────────────────────────────────────────────────────────
   SECTION LABEL LINES
───────────────────────────────────────────────────────────────── */
.section-label { position: relative; overflow: visible; }
.label-line { transform-origin: left center; }
.orbital-system { transform-style: preserve-3d; will-change: transform; }

/* ─────────────────────────────────────────────────────────────────
   Z-INDEX LAYERS
───────────────────────────────────────────────────────────────── */
#cursor-trail-canvas { z-index: 5; }
#ambient-orbs        { z-index: 1; }
#vignette-overlay    { z-index: 3; }
#scanline-canvas     { z-index: 3; }
#grain-canvas        { z-index: 3; }
#section-progress    { z-index: 500; }
#page-progress-bar   { z-index: 10000; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   LARGE-FORMAT TOUCH (≥ 1200px, touch = Surface Hub, large iPad Pro)
───────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) and (pointer: coarse) {
  /* Section progress dots visible */
  #section-progress { display: flex; }

  /* Slightly larger tap targets */
  .sp-dot { width: 12px; height: 12px; }

  /* Cards: same 3D tilt as desktop but driven by touch (JS handles) */
  .r-card, .venture-card, .pillar { transform-style: preserve-3d; }

  /* Logo orbit points: slightly larger for big screens */
  .logo-orbit-point { font-size: 0.7rem; padding: 4px 9px; }

  /* Pillar hover-equivalent via touch-focus */
  .pillar.touch-glow {
    transform: translateY(-6px) scale(1.02);
  }
}

/* ─────────────────────────────────────────────────────────────────
   TABLET (768px – 1199px, primarily touch)
───────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {

  /* 3D tilt preserved but flatter on tablet */
  .r-card, .venture-card, .pillar {
    transform-style: preserve-3d;
  }

  /* No cursor-related elements */
  #cursor-trail-canvas { display: none; }

  /* Section progress only on landscape tablets (≥ 1024px wide) */
  #section-progress {
    display: none; /* shown conditionally via JS for ≥1024 */
  }

  /* Logo orbit reduced radius on smaller tablets */
  @keyframes logo-orbit-1 {
    0%   { transform: translate(-50%,-50%) rotate(0deg)   translateX(70px) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg) translateX(70px) rotate(-360deg); }
  }
  @keyframes logo-orbit-2 {
    0%   { transform: translate(-50%,-50%) rotate(90deg)  translateX(85px) rotate(-90deg); }
    100% { transform: translate(-50%,-50%) rotate(450deg) translateX(85px) rotate(-450deg); }
  }
  @keyframes logo-orbit-3 {
    0%   { transform: translate(-50%,-50%) rotate(180deg) translateX(65px) rotate(-180deg); }
    100% { transform: translate(-50%,-50%) rotate(540deg) translateX(65px) rotate(-540deg); }
  }
  @keyframes logo-orbit-4 {
    0%   { transform: translate(-50%,-50%) rotate(270deg) translateX(80px) rotate(-270deg); }
    100% { transform: translate(-50%,-50%) rotate(630deg) translateX(80px) rotate(-630deg); }
  }

  /* Touch-focus acts as hover on tablet */
  .r-card.touch-focus    { border-color: rgba(0,212,255,0.5) !important; }
  .venture-card.touch-focus { border-color: rgba(0,212,255,0.4) !important; }

  /* Buttons: no magnetic pull (no hover) but full ripple */
  .btn-primary, .btn-ghost, .btn-submit, .btn-pitch, .nav-cta {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* Form inputs: larger touch targets */
  .form-group input,
  .form-group textarea,
  .form-group select {
    min-height: 48px;
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE (< 768px)
───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Kill heavy visual layers */
  #section-progress    { display: none; }
  #cursor-trail-canvas { display: none; }
  #grain-canvas        { display: none; }
  #scanline-canvas     { opacity: 0.01 !important; }
  #ambient-orbs        { display: none; }
  .hero-logo-aura      { display: none; }

  /* Flat cards (no 3D on mobile — performance + motion sickness) */
  .r-card, .venture-card, .pillar {
    transform-style: flat;
    will-change: auto;
  }

  /* No parallax shifts on mobile — let normal scroll apply */
  .section-bg {
    will-change: auto;
    transform: none !important;
    scale: 1.08;
  }

  /* Ensure kinetic text still works */
  .char { animation-duration: 0.5s; }

  /* Touch tap targets */
  .btn-primary, .btn-ghost, .btn-submit, .nav-cta, .btn-pitch {
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* Form: prevent iOS auto-zoom */
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px !important;
    min-height: 48px;
  }

  /* Simplified highlight breathe (cheaper) */
  .section-title .highlight::before {
    animation: none;
    opacity: 0.4;
  }

  /* Footer glow line kept (cheap CSS) */
  /* Roadmap pulse kept */
  /* Typing effect kept */
  /* GSAP scrollytelling kept (GSAP is touch-safe) */
  /* Button ripple kept (touch event added in JS) */
  /* Scan line reduced */
  /* Vignette kept */
  /* Holographic grid kept but dimmer */
}

/* ─────────────────────────────────────────────────────────────────
   HOVER: NONE (any pointer:coarse device — all touch devices)
   These replace hover-only interactions with always-on alternatives
───────────────────────────────────────────────────────────────── */
@media (hover: none) {

  /* Remove hover states that would "stick" on touch */
  .r-card:hover,
  .venture-card:hover,
  .pillar:hover {
    transform: none;
    filter: none;
    box-shadow: inherit;
  }

  /* Replace with active (finger-down) feedback */
  .r-card:active,
  .venture-card:active {
    transform: scale(0.98);
    box-shadow: 0 0 0 2px rgba(0,212,255,0.4);
    transition: transform 0.1s, box-shadow 0.1s;
  }

  .btn-primary:active,
  .btn-ghost:active,
  .btn-submit:active,
  .btn-pitch:active,
  .nav-cta:active {
    transform: scale(0.97);
    filter: brightness(1.1);
    transition: transform 0.1s, filter 0.1s;
  }

  /* Venture card border never stuck "hovered" */
  .venture-card::before { opacity: 0; }
  .venture-card.touch-focus::before { opacity: 1; }

  /* Card scan line: show on touch-focus instead of hover */
  .r-card::after { animation-play-state: paused; opacity: 0; }
  .r-card.touch-focus::after { opacity: 1; animation-play-state: running; }

  /* Vbadge shimmer on active tap */
  .vbadge:active::after { opacity: 1; }

  /* Pillar: no hover lift (handled by touch-glow in JS) */
  .pillar:hover { transform: none; box-shadow: inherit; }

  /* Nav link active feedback on touch */
  .nav-link:active { color: var(--cyan); }
}

/* ─────────────────────────────────────────────────────────────────
   LANDSCAPE PHONE (height < 500px, width > height)
───────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Already handled by style.css existing rules */
  #section-progress { display: none; }
  .hero-logo-aura   { display: none; }

  .char { animation-duration: 0.3s; }
}

/* ─────────────────────────────────────────────────────────────────
   PREFERS REDUCED MOTION (accessibility — all devices)
───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .char, .word-reveal        { animation: none !important; opacity: 1; transform: none; }
  .glitch-active             { animation: none !important; }
  .light-beam-sweep          { animation: none !important; }
  .logo-orbit-point          { animation: none !important; }
  .btn-ripple-effect         { animation: none !important; }
  .r-card::after             { animation: none !important; }
  .vc-pill-active            { animation: none !important; }
  .rm-step.active .rm-dot    { animation: none !important; }
  .orbit-core::before        { animation: none !important; }
  .startup-bg-grid           { animation: none !important; }
  .section-title .highlight::before { animation: none !important; }
  .site-footer::before       { animation: none !important; }
  .typing-cursor::after      { animation: none !important; opacity: 1; }
  #grain-canvas, #scanline-canvas { display: none !important; }
}