/* Oc2cO Public Landing V1 — Dark Premium Cosmic Theme (preserved)
   + V2A Ocean Night Base Scene overlay foundation.
   Organized chaos → signal. 
   Background: realistic calm night ocean only for this pass.
   No external resources. Responsive. */

:root {
  --bg: #05070f;
  --surface: #0a0e1f;
  --surface2: #121a33;
  --text: #e0f0ff;
  --text-dim: #8fb8e0;
  --text-faint: #5a7aa8;
  --cyan: #64d4ff;
  --blue: #1a8bcc;
  --accent: #a78bfa;
  --glass: rgba(10, 14, 31, 0.7);
  --border: rgba(100, 212, 255, 0.12);
  --border-strong: rgba(100, 212, 255, 0.25);
  --grad-cyan: linear-gradient(135deg, #64d4ff 0%, #1a8bcc 50%, #64d4ff 100%);
  --grad-chaos: linear-gradient(45deg, #111a33 0%, #05070f 50%, #111a33 100%);
  /* Checkout visual refs for consistent alive glass: bg layers, card, pill buttons, glass rect footers */
  --checkout-cyan: #64D4FF;
  --checkout-amber: #FBBF24;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: transparent; color: var(--text); line-height: 1.5; }
body { overflow-x: hidden; } /* ocean-night-scene provides the visible background */

a { color: var(--cyan); text-decoration: none; transition: color 0.2s; }
a:hover { color: #a5e0ff; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Checkout visual refs applied site-wide for consistent alive look (glass rect cards, bg layers, pill buttons, glass footer) - tied to VISUAL_SKILLS orbs/glass/neural/holo for alive effects */
.page-bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at top, rgba(100,212,255,.18), transparent 42%), radial-gradient(circle at 80% 20%, rgba(167,139,250,.12), transparent 38%), linear-gradient(135deg, #05080f, #0b1424); }
.glass-rect-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 35vh; z-index: 0; pointer-events: none; background: linear-gradient(transparent, rgba(100,212,255,.06)); }
.glass-card, .checkout-card-layer { background: rgba(17,29,53,.76); border: 1px solid var(--border); border-radius: 20px; padding: 34px; backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 24px 90px rgba(0,0,0,.42); transition: transform .25s cubic-bezier(0.23,1,0.32,1), box-shadow .25s ease, border-color .2s ease; }
.glass-card:hover, .checkout-card-layer:hover { transform: translateY(-3px) scale(1.01); border-color: rgba(100,212,255,0.3); box-shadow: 0 30px 100px rgba(0,0,0,0.55); }
/* Canva Layers Parallax (mini teaser in Skills & Tools) reuses site CSS vars, glass-card, cosmic/neural/checkout effects. See inline in index + preview test. Reduced-motion + responsive. */
.canva-parallax-teaser { font-family: 'Inter', system-ui, sans-serif; }
.pill-btn { display: inline-block; text-decoration: none; border-radius: 999px; padding: 11px 18px; font-size: .74em; font-weight: 700; border: 1px solid var(--border2); color: var(--text); background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.28); color: #FFE8A3; transition: all .2s; }
.pill-btn:hover { transform: translateY(-1px); background: rgba(251,191,36,.2); }
.pill-btn.primary { background: #64D4FF; color: #070D1A; border-color: transparent; }
.pill-btn.primary:hover { background: #a5e0ff; transform: translateY(-1px); }
/* pill-btn + glass-card from checkout refs + VISUAL_SKILLS (holo/neural/orbs/liquid/particles) applied site-wide; tied to agent skills (neural = in-site Grok agent flows) */

/* === HERO === */
.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 60px 20px 40px;
  background: transparent; /* ocean night base shows through */
}

/* Cosmic static / noise overlay resolving to color */
.hero::before,
.hero::after {
  display: none; /* replaced by ocean night base scene */
}

.hero-content { position: relative; z-index: 2; max-width: 720px; }

.logo {
  font-size: 1.1rem;
  letter-spacing: 0.4em;
  font-weight: 300;
  color: var(--text-dim);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 20px;
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  font-size: 1.05rem;
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 32px;
  font-weight: 400;
}

/* Chrome / paint-chip sparkle on logo/h1 */
.hero h1::after, .logo::after {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(255,255,255,0.35) 30%,
    transparent 40%
  );
  animation: chrome-sparkle 3.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes chrome-sparkle {
  0%, 100% { transform: translate(-10%, -10%) rotate(-12deg); opacity: 0; }
  35% { opacity: 0.9; }
  65% { opacity: 0.2; }
  85% { transform: translate(10%, 15%) rotate(18deg); }
}

/* === INTRO MEDIA === */
.intro-media {
  margin: 40px 0;
  position: relative;
  z-index: 2;
}

.intro-media video {
  width: 100%;
  max-width: 820px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.intro-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--cyan);
  border-bottom: 1px dotted var(--border-strong);
}

/* === FEATURE CARDS === */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 60px 0 40px;
}

.feature-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.feature-card p {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* === PARKED BUTTONS === */
.parked-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 50px 0 30px;
}

.parked-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: default;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.parked-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.parked-btn .tag {
  font-size: 0.65rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.15);
  color: #c3a5ff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* === FOOTER === */
.footer {
  text-align: center;
  padding: 40px 20px 60px;
  font-size: 0.7rem;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}

.footer .brand {
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-dim);
}

/* Responsive */
@media (max-width: 640px) {
  .hero h1 { font-size: 2.1rem; }
  .hero { padding: 40px 16px 20px; }
  .features { gap: 14px; }
  .parked-row { gap: 8px; }
  .parked-btn { padding: 9px 16px; font-size: 0.72rem; }
}

/* Light refraction / sparkle accents on cards */
.feature-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(100,212,255,0.12) 0%, transparent 70%);
  animation: refraction 8s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.6;
}

.feature-card { position: relative; overflow: hidden; }

/* SURGICAL RENDER FIX: force main content visible immediately */
/* Ensure decorative static/particles/grain sit behind; content on top */
.hero::before,
.hero::after,
.feature-card::before {
  z-index: 0;
}

.hero-content,
.intro-media,
.features,
.parked-row,
.footer {
  position: relative;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* =========================================
   GROK AGENT ON-SITE CHAT WIDGET (v1)
   Dark premium agent theme, integrated with Oc2cO cyan/navy glass.
   Floating + slide-in panel. Animations + both-ends (help + code requests).
   Added on feature/in-site-grok-agent-v1
   ========================================= */

/* Import dedicated agent visuals (modular, premium 2026 layer) */
@import url("tools/agent-visuals.css");

/* Base agent vars (enhanced for 2026 premium) */
:root {
  --grok-cyan: #00E5FF;
  --grok-surface: #0B1424;
  --grok-surface2: #111D35;
  --grok-amber: #FFB300;
  --grok-glass: rgba(11, 20, 36, 0.85);
  --grok-glow: 0 0 12px rgba(0, 229, 255, 0.4);
  --grok-spring: cubic-bezier(0.23, 1, 0.32, 1);
}

.grok-float-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00E5FF 0%, #1A8BCC 55%, #64D4FF 100%);
  color: #060A14;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 12px 40px rgba(0, 229, 255, 0.38), 0 0 0 1px rgba(0,229,255,0.1) inset, var(--grok-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 99998;
  transition: transform 160ms var(--grok-spring), box-shadow 180ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, box-shadow;
}
.grok-float-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 18px 52px rgba(0, 229, 255, 0.48), var(--grok-glow);
  filter: brightness(1.04);
}
.grok-float-btn:active {
  transform: scale(0.94);
}
.grok-float-btn .grok-icon {
  font-size: 1.35rem;
  margin-right: 1px;
}
.grok-float-btn .label {
  font-size: 0.58rem;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.95;
}

/* Premium micro + orb accents on float button (2026 polish) */
.grok-float-btn {
  position: relative;
  overflow: hidden;
}
.grok-float-btn::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 200ms var(--grok-spring);
  pointer-events: none;
}
.grok-float-btn:hover::after { opacity: 0.4; }
.grok-float-btn.pulse { animation: grok-pulse 3.6s ease-in-out infinite; }

@keyframes grok-pulse {
  0%, 100% { box-shadow: 0 12px 40px rgba(0, 229, 255, 0.38), 0 0 0 1px rgba(0,229,255,0.1) inset, var(--grok-glow); }
  50% { box-shadow: 0 12px 40px rgba(0, 229, 255, 0.55), 0 0 0 8px rgba(0,229,255,0.08) inset, 0 0 20px rgba(0,229,255,0.35); }
}

.grok-chat {
  position: fixed;
  bottom: 92px;
  right: 22px;
  width: 372px;
  max-height: 520px;
  height: min(520px, 70vh);
  background: var(--grok-glass);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 16px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
  box-shadow: 0 32px 100px rgba(0,0,0,0.72), 0 0 0 1px rgba(100,212,255,0.1) inset, var(--grok-glow);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text);
  position: relative;
  transition: transform 220ms var(--grok-spring), opacity 160ms var(--grok-spring);
}
.grok-chat.open {
  display: flex;
  animation: grok-panel-enter 260ms var(--grok-spring) both;
}
@keyframes grok-panel-enter {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Agent chat interior orbs + scroll-reveal hooks for curated content */
.grok-chat .agent-orbs {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; border-radius: 16px;
}
.grok-chat .grok-messages .curated-visual-card,
.grok-chat .grok-messages .live-preview-frame {
  margin: 4px 0; max-width: 100%;
  font-size: 0.76rem;
}

.grok-chat-header {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0,229,255,0.1);
  background: rgba(6,10,20,0.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.grok-chat-header .title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.grok-chat-header .title .dot {
  width: 8px; height: 8px;
  background: #4ADE80;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
}
.grok-chat-header .title span { color: var(--grok-cyan); }
.grok-chat-header .status {
  font-size: 0.6rem;
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}
.grok-chat-header .close {
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.grok-chat-header .close:hover { color: var(--grok-cyan); background: rgba(255,255,255,0.03); }

.grok-messages {
  flex: 1;
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: linear-gradient(180deg, rgba(11,20,36,0.4), transparent 40%);
  scrollbar-width: thin;
}
.grok-messages::-webkit-scrollbar { width: 3px; }
.grok-messages::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 3px; }

.chat-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 0.79rem;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: grok-msg-enter 200ms var(--grok-spring) both;
  position: relative;
  transition: transform 140ms var(--grok-spring), box-shadow 160ms ease;
}
@keyframes grok-msg-enter {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.chat-msg.user {
  align-self: flex-end;
  background: rgba(0,229,255,0.14);
  border: 1px solid rgba(0,229,255,0.42);
  color: #E8F6FF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), var(--grok-glow);
}
.chat-msg.user:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 0 18px rgba(0,229,255,0.45);
}
.chat-msg.agent {
  align-self: flex-start;
  background: rgba(17, 29, 53, 0.72);
  border: 1px solid rgba(100,212,255,0.18);
  color: var(--text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
}
.grok-msg.agent:hover {
  border-color: rgba(0,229,255,0.28);
  transform: translateY(-1px);
}

/* Premium glass + reveal on agent messages for curation feel */
.grok-msg.agent.glass, .grok-msg.agent .curated {
  background: rgba(17,29,53,0.68);
  backdrop-filter: blur(16px);
  border-color: rgba(0,229,255,0.24);
}
.grok-msg .meta {
  display: block;
  font-size: 0.58rem;
  opacity: 0.5;
  margin-top: 4px;
  font-family: 'Inter',sans-serif;
}

/* Scroll animation support inside agent chat */
.grok-chat .reveal-scroll { transition: opacity 420ms ease, transform 520ms cubic-bezier(0.23,1,0.32,1); }

.grok-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 8px;
}
.grok-chip {
  font-size: 0.61rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17,29,53,0.75);
  border: 1px solid rgba(0,229,255,0.14);
  color: var(--text2);
  cursor: pointer;
  transition: all 130ms var(--grok-spring);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  backdrop-filter: blur(6px);
}
.grok-chip:hover {
  border-color: var(--grok-cyan);
  color: var(--grok-cyan);
  background: rgba(0,229,255,0.07);
  transform: translateY(-1.5px) scale(1.035);
  box-shadow: 0 3px 8px rgba(0,229,255,0.2), var(--grok-glow);
}
.grok-chip:active {
  transform: scale(0.965);
  transition-duration: 60ms;
}

.grok-input-area {
  padding: 10px 11px;
  border-top: 1px solid rgba(0,229,255,0.12);
  background: rgba(6,10,20,0.92);
  display: flex;
  gap: 8px;
  align-items: center;
}
.grok-input {
  flex: 1;
  background: #060B18;
  border: 1px solid rgba(100,212,255,0.22);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.79rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color 120ms var(--grok-spring), box-shadow 160ms ease, transform 120ms var(--grok-spring);
}
.grok-input:focus {
  border-color: var(--grok-cyan);
  box-shadow: 0 0 0 4px rgba(0,229,255,0.1), var(--grok-glow);
  transform: scale(1.005);
}
.grok-input::placeholder {
  color: rgba(143, 184, 224, 0.55);
}
.grok-send {
  background: linear-gradient(135deg, var(--grok-cyan) 0%, #64D4FF 100%);
  color: #060A14;
  border: none;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 120ms var(--grok-spring);
  height: 34px;
  box-shadow: 0 2px 8px rgba(0,229,255,0.35);
}
.grok-send:hover {
  background: linear-gradient(135deg, #64D4FF 0%, var(--grok-cyan) 100%);
  box-shadow: 0 4px 14px rgba(0,229,255,0.5), var(--grok-glow);
  transform: translateY(-1px) scale(1.02);
}
.grok-send:active { transform: scale(0.92); }

.grok-typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  font-size: 0.7rem;
  color: var(--grok-cyan);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.grok-typing span {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--grok-cyan);
  border-radius: 50%;
  animation: grok-dot-premium 1.35s infinite ease-in-out;
  box-shadow: 0 0 4px var(--grok-cyan), 0 0 8px rgba(0,229,255,0.4);
  margin: 0 1.5px;
  vertical-align: middle;
}
.grok-typing span:nth-child(2) { animation-delay: 220ms; }
.grok-typing span:nth-child(3) { animation-delay: 440ms; }
@keyframes grok-dot-premium {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.35; }
  40% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 640px) {
  .grok-chat {
    left: 8px; right: 8px; width: auto; bottom: max(68px, env(safe-area-inset-bottom, 68px));
    max-height: 66vh;
    border-radius: 13px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.72), var(--grok-glow);
  }
  .grok-float-btn {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: 16px;
    width: 50px;
    height: 50px;
    font-size: 0.95rem;
  }
  .chat-msg { max-width: 88%; font-size: 0.81rem; padding: 8px 12px; }
  .grok-chip { font-size: 0.64rem; padding: 5px 11px; }
  .grok-input { font-size: 0.86rem; padding: 10px 15px; }
  .grok-send { padding: 0 13px; font-size: 0.7rem; }
}

/* Additional micro polish layered; primary premium rules now in tools/agent-visuals.css (non-overlap) */
.grok-chat .grok-suggestions .grok-chip {
  /* enhanced in visuals layer */
}

/* Per-user UI elements + companion spawn visuals (helper 4 + agent-6 cosmic glass refs) */
.grok-chat-header .grok-user {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.12);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  margin: 0 8px;
}
.grok-chat-header .grok-user .avatar {
  font-size: 0.72rem;
  line-height: 1;
}
.grok-chat-header .grok-user .user-label {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--grok-cyan);
}
.grok-chat-header .grok-user .spawn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grok-amber);
  box-shadow: 0 0 0 2px rgba(255,179,0,0.25);
  animation: grok-companion-pulse 2.2s ease-in-out infinite;
}
@keyframes grok-companion-pulse {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* Companion spawn visual for "spawn" effect on agent reply (glass + orb cosmic) */
.grok-companion-spawn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  padding: 1px 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,229,255,0.08), rgba(255,179,0,0.08));
  border: 1px solid rgba(0,229,255,0.25);
  color: #A5D8FF;
  animation: grok-spawn-pop 420ms cubic-bezier(0.23,1,0.32,1) both;
  white-space: nowrap;
}
.grok-companion-spawn .spawn-label {
  font-size: 0.55rem;
  opacity: 0.9;
  letter-spacing: 0.5px;
}
@keyframes grok-spawn-pop {
  from { opacity: 0; transform: translateY(3px) scale(0.6); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .grok-chat-header .grok-user { display: none; } /* keep clean on mobile */
}

/* Live curated project/visual cards inside agent (dynamic, glass, orbs ready) */
.grok-curated-project {
  background: var(--grok-surface2);
  border: 1px solid rgba(100,212,255,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 3px 0;
  font-size: 0.71rem;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: transform 0.16s ease, border-color 0.16s;
}
.grok-curated-project:hover { transform: translateX(1px); border-color: var(--grok-cyan); }
.grok-curated-project .status-orb {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink:0;
  box-shadow: 0 0 0 2px rgba(0,229,255,0.2);
}
.grok-curated-project .status-orb.cyan { background: var(--grok-cyan); }
.grok-curated-project .status-orb.amber { background: var(--grok-amber); }

/* Fallback for body content flow */
html, body {
  min-height: 100vh;
  height: auto;
}

/* Protect: cinematic static subtle grain allowed at low opacity from inline + tools (z controlled to not fight glass). */
body::after {
  z-index: 9997 !important;
  opacity: 0.35;
  pointer-events: none;
}

/* (hero particles removed for V2A ocean foundation - stars handled in ocean-scene) */

/* ========================================
   V2B ALIVE ATMOSPHERE / CELESTIAL WORLD PASS
   Layers built incrementally. Preserves V2A exactly.
   ======================================== */

/* V2B CSS Vars */
:root {
  --quasar-blue: #2a9cff;
  --bio-cyan: #4de8e0;
  --bio-green: #3ac9a8;
  --moon-glow: #a5d8ff;
}

/* ========================================
   OC2CO WEBSITE V2A — OCEAN NIGHT BASE SCENE
   Realistic calm night ocean background foundation.
   Decorative only, z-index low, behind all content.
   ======================================== */

.ocean-night-scene {
  position: fixed;
  inset: 0;
  z-index: 1;  /* above body, below content */
  pointer-events: none;
  overflow: hidden;
  background: transparent;  /* layers define the scene */
  /* debug: make sure visible */
}

/* Sky layer: clear night, cinematic dark blue to quasar blue horizon */
.ocean-night-scene .sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    #0a1429 0%,
    #0f1f3a 25%,
    #162d4a 65%,
    #1a3a5a 100%
  );
}

/* Stars - clean visible points in sky only */
.ocean-night-scene .stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48%;
  z-index: 1;
  /* box-shadow populated by JS for many static stars */
}

/* Elegant clouds - soft, premium, low opacity, no heavy motion */
.ocean-night-scene .cloud {
  position: absolute;
  background: rgba(195, 215, 235, 0.35);
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}

.ocean-night-scene .cloud1 {
  top: 12%;
  left: 8%;
  width: 220px;
  height: 55px;
}

.ocean-night-scene .cloud2 {
  top: 22%;
  left: 38%;
  width: 310px;
  height: 68px;
  transform: scale(1.15);
}

.ocean-night-scene .cloud3 {
  top: 8%;
  left: 68%;
  width: 170px;
  height: 48px;
  transform: scale(0.85);
}

/* Clean horizon line */
.ocean-night-scene .horizon {
  position: absolute;
  top: 39%;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 5%,
    rgba(120, 170, 210, 0.6) 30%,
    rgba(140, 190, 230, 0.8) 50%,
    rgba(120, 170, 210, 0.6) 70%,
    transparent 95%
  );
  z-index: 3;
  box-shadow: 0 0 15px rgba(80, 140, 190, 0.4);
}

/* Water base */
.ocean-night-scene .water {
  position: absolute;
  top: 39%;
  left: 0;
  width: 100%;
  height: 61%;
  background: linear-gradient(
    to bottom,
    #112b4a 0%,
    #0d2340 35%,
    #0a1c35 70%,
    #061629 100%
  );
  z-index: 4;
  opacity: 0.95;
}

/* Gentle wave layers - realistic but calm, no heavy */
.ocean-night-scene .wave {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 90px;
  background: rgba(25, 65, 105, 0.75);
  border-radius: 100% 100% 0 0 / 60% 60% 0 0;
  z-index: 5;
  pointer-events: none;
  animation: ocean-wave 7s linear infinite;
}

.ocean-night-scene .wave1 {
  top: 8%;
  height: 75px;
  background: rgba(35, 80, 120, 0.65);
  animation-duration: 6.5s;
}

.ocean-night-scene .wave2 {
  top: 22%;
  height: 95px;
  background: rgba(20, 55, 95, 0.8);
  animation-duration: 9s;
  animation-delay: -2.5s;
}

.ocean-night-scene .wave3 {
  top: 38%;
  height: 70px;
  background: rgba(40, 90, 130, 0.6);
  animation-duration: 5.8s;
  animation-delay: -4s;
}

@keyframes ocean-wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(25%); }
}

/* Shoreline base */
.ocean-night-scene .shore {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18%;
  background: linear-gradient(
    to bottom,
    transparent 10%,
    #13283f 40%,
    #0f2235 100%
  );
  z-index: 6;
}

/* Gentle washing waves on shore - subtle foam effect */
.ocean-night-scene .shore-wave {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 100%;
  height: 22px;
  background: linear-gradient(
    to bottom,
    rgba(170, 210, 235, 0.25) 0%,
    rgba(140, 190, 220, 0.15) 50%,
    transparent 100%
  );
  border-radius: 50% 50% 0 0;
  z-index: 7;
  animation: shore-wash 4.2s ease-in-out infinite;
}

@keyframes shore-wash {
  0%, 100% {
    transform: translateY(0) scaleY(1);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-6px) scaleY(1.15);
    opacity: 0.55;
  }
}

/* Ensure content stays readable and on top */
.hero,
.intro-media,
.features,
.parked-row,
.footer,
.hero-content,
.container {
  position: relative;
  z-index: 10;
}

/* Subtle overall readability boost for night scene without clutter */
.hero-content,
.features,
.parked-row {
  text-shadow: 0 1px 3px rgba(0, 10, 30, 0.35);
}

/* === V2B LAYER 1: Living ocean feel + Bioluminescence (enhance existing without new HTML) === */
/* Add living shimmer to water surface */
.ocean-night-scene .water {
  background: 
    linear-gradient(to bottom, #112b4a 0%, #0d2340 35%, #0a1c35 70%, #061629 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 2px, transparent 6px);
  position: relative;
}

.ocean-night-scene .water::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 20%,
    rgba(74, 232, 224, 0.15) 45%,
    transparent 70%
  );
  animation: water-shimmer 7s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}

@keyframes water-shimmer {
  0%, 100% { opacity: 0.25; transform: translateX(-5%); }
  50% { opacity: 0.55; transform: translateX(8%); }
}

/* Bioluminescence - soft glows near wave edges and shore, quasar/cyan life tones */
.ocean-night-scene .water::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 35%;
  background: 
    radial-gradient(ellipse 60% 40% at 25% 80%, rgba(74,232,224,0.25) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 65% 90%, rgba(58,201,168,0.2) 0%, transparent 55%);
  z-index: 5;
  animation: bio-pulse 11s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bio-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

/* Make waves feel more alive with bio edge glow and slight color shift */
.ocean-night-scene .wave {
  box-shadow: 0 0 18px rgba(74, 232, 224, 0.08);
}

.ocean-night-scene .wave1 {
  background: rgba(35, 80, 120, 0.22);
  box-shadow: 0 0 22px rgba(74, 232, 224, 0.18);
}

.ocean-night-scene .wave2 {
  background: rgba(20, 55, 95, 0.32);
  box-shadow: 0 0 28px rgba(58, 201, 168, 0.15);
}

.ocean-night-scene .shore-wave {
  box-shadow: 0 0 12px rgba(74, 232, 224, 0.22);
  animation: shore-wash 4.2s ease-in-out infinite, bio-shore-glow 8s ease-in-out infinite;
}

@keyframes bio-shore-glow {
  0%, 100% { opacity: 0.35; filter: brightness(1); }
  50% { opacity: 0.6; filter: brightness(1.3); }
}

/* === V2B LAYER 2: Premium sky life (drift, twinkle, depth) === */
/* Slow elegant cloud drift */
.ocean-night-scene .cloud {
  animation: cloud-drift 180s linear infinite;
}

.ocean-night-scene .cloud1 { animation-duration: 220s; }
.ocean-night-scene .cloud2 { animation-duration: 160s; animation-delay: -40s; }
.ocean-night-scene .cloud3 { animation-duration: 260s; animation-delay: -80s; }

@keyframes cloud-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(15%); }
}

/* Star twinkle - subtle premium life */
.ocean-night-scene .stars {
  animation: star-twinkle 4s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Add atmospheric depth to sky */
.ocean-night-scene .sky {
  box-shadow: inset 0 80px 120px rgba(0,0,20,0.4);
  position: relative;
  opacity: 1;
}

.ocean-night-scene .sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 30%, rgba(42, 156, 255, 0.08) 0%, transparent 60%);
  z-index: 1;
}

/* === V2B LAYER 3: The Oc2cO world in the sky === */
/* A distinct, beautiful, symbolic planet: quasar blue with life glow and chrome atmosphere */
.ocean-night-scene .celestial-world {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #e0f4ff 0%, #4a9bc4 18%, #1e5a8f 38%, #0f2a4f 60%, #0a1f3a 85%);
  box-shadow: 
    0 0 80px rgba(42, 156, 255, 0.9),
    inset 25px 18px 20px rgba(255,255,255,0.25),
    inset -20px -15px 25px rgba(0,0,0,0.6);
  z-index: 3;
  overflow: hidden;
}

/* Life glow / biolum spots on the world */
.ocean-night-scene .celestial-world::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 18%;
  width: 55%;
  height: 50%;
  background: radial-gradient(
    ellipse at 40% 60%,
    rgba(74, 232, 224, 0.45) 0%,
    rgba(58, 201, 168, 0.25) 30%,
    transparent 70%
  );
  border-radius: 40%;
  animation: world-life-glow 14s ease-in-out infinite;
}

/* Chrome/reflective atmosphere edge + emblem */
.ocean-night-scene .celestial-world::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,230,255,0.15) 0%, transparent 40%, rgba(42,156,255,0.1) 70%, transparent 100%);
  box-shadow: 0 0 12px rgba(74,232,224,0.3);
  z-index: 1;
}

/* Yin-Yang gear emblem on the world (from character refs) */
.ocean-night-scene .celestial-world .emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: 
    radial-gradient(circle at 30% 30%, #fff 10%, transparent 30%),
    conic-gradient(#0a1f3a 0deg 180deg, #4de8e0 180deg 360deg);
  border-radius: 50%;
  border: 2px solid #64d4ff;
  z-index: 2;
  box-shadow: 0 0 8px #64d4ff;
}

.ocean-night-scene .celestial-world .emblem::before {
  content: '⚙';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  color: #fff;
  font-size: 10px;
}

@keyframes world-life-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

/* char-orb / oc2co-orb / memora-orb / sagous-orb parked - not part of V2B ocean atmosphere.
   These were added later and are not to be in this pass.
   Kept for reference only.
*/

/* === V2B LAYER 4: Two moons === */
.ocean-night-scene .moon {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 25px var(--moon-glow);
}

/* Dominant moon */
.ocean-night-scene .moon1 {
  top: 5%;
  left: 5%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 30% 25%, #f0f8ff 10%, #c8e0ff 30%, #7fa8d8 55%, #3a5a8f 80%);
  box-shadow: 
    0 0 70px rgba(165, 216, 255, 0.9),
    inset 8px 6px 6px rgba(255,255,255,0.4),
    inset -5px -4px 8px rgba(0,0,0,0.4);
}

/* Supporting smaller moon - more mysterious */
.ocean-night-scene .moon2 {
  top: 3%;
  left: 25%;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle at 35% 30%, #d8e8ff 15%, #a8c8f0 40%, #5a7ab0 70%);
  box-shadow: 
    0 0 50px rgba(165, 216, 255, 0.8),
    inset 5px 4px 4px rgba(255,255,255,0.35);
  animation: moon-glow 20s ease-in-out infinite;
}

@keyframes moon-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(165, 216, 255, 0.45); }
  50% { box-shadow: 0 0 26px rgba(74, 232, 224, 0.35); }
}

/* === V2B LAYER 6: Atmospheric glow / living scene energy === */
.ocean-night-scene .sky-glow {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(42,156,255,0.035) 0%, transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(74,232,224,0.025) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
  animation: atm-bloom 25s ease-in-out infinite;
}

@keyframes atm-bloom {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

/* Subtle water-sky reflection interplay for alive energy */
.ocean-night-scene .water {
  box-shadow: inset 0 60px 80px rgba(42,156,255,0.06);
}

/* === V2B LAYER 5: Subtle constellations (elegant, meaningful, hint order from chaos) === */
.ocean-night-scene .constellations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48%;
  z-index: 2;
  pointer-events: none;
}

/* Refined constellation points and faint elegant lines */
.ocean-night-scene .constellations::before,
.ocean-night-scene .constellations::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  box-shadow: 
    18vw 12vh 0 3.5px #fff,
    22vw 15vh 0 2.5px #fff,
    26vw 11vh 0 3px #fff,
    31vw 18vh 0 2.5px #fff,
    35vw 14vh 0 3px #fff;
}

/* Faint connection lines for one elegant grouping (order emerging) */
.ocean-night-scene .constellations::after {
  background: transparent;
  box-shadow: none;
  border-top: 1px solid rgba(180,220,255,0.12);
  border-left: 1px solid rgba(180,220,255,0.12);
  width: 18vw;
  height: 7vh;
  top: 11vh;
  left: 17vw;
  transform: rotate(-12deg);
  border-radius: 0;
}

.ocean-night-scene .constellations .constel2 {
  position: absolute;
  top: 28%;
  left: 62%;
  width: 1.5px;
  height: 1.5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    4vw 3vh 0 0.9px #fff,
    8vw 1.5vh 0 0.6px #fff,
    5vw 5vh 0 1px #fff,
    10vw 4vh 0 0.8px #fff;
}

/* Oc2cO REUSE: Responsive polish for #projects + advanced brain visual (mature neural glass link)
   Ensures phones + web: scale, padding, hit areas. Reuses glass/orb/celestial cinematic patterns from V2B + agent cards.
   No new event handlers. */
@media (max-width: 640px) {
  .project { padding: 18px; margin-bottom: 12px; border-radius: 10px; }
  .advanced-brain-link { max-width: 100%; height: 108px; }
}
@media (max-width: 380px) {
  .advanced-brain-link { height: 98px; }
  .brain-label { font-size: 0.42em !important; }
}

/* Oc2cO-aligned premium brain visual fallbacks (glass depth, low-spec friendly) */
.advanced-brain-link .brain-glass-core { transition: opacity 240ms; }
.advanced-brain-link:hover .brain-glass-core { opacity: 0.9; }

/* ========================================
   NEW ENHANCEMENTS: LIQUID GLASS, NEURAL GLOW, BETA TOOLS, APP MAPPING
   From VISUAL_SKILLS research (LIQUID_GLASS_REFRACTION_ASIAN_PREMIUM, NEURAL_GLOW_CONNECTION_EFFECTS, GLASSMORPHISM, NEURAL_PARTICLE_DATA_FLOW)
   Oc2cO reuse: mature, no heavy assets, responsive fast loads (contain, passive, reduced motion)
   Phone/web optimized: clamp, grid auto-fit, min touch 44px
   ======================================== */

/* Liquid Glass Refraction (Asian premium mature) - SVG filter ready, use with <svg id="liquid-refract"> inline or external */
.liquid-glass {
  position: relative;
  background: rgba(17, 29, 53, 0.65);
  border: 1px solid rgba(100, 212, 255, 0.18);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 15px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.2s;
  contain: layout style paint;
  overflow: hidden;
}
.liquid-glass:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
.liquid-glass::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 40%, rgba(100,212,255,0.04) 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* Neural Glow + Connection Effects (luminous mature orbs, halos, links) */
.neural-glow {
  position: relative;
  background: radial-gradient(circle at 42% 28%, rgba(100,212,255,0.18), transparent 62%);
  border: 1px solid rgba(100,212,255,0.38);
  box-shadow: 0 0 9px rgba(100,212,255,0.55), 0 0 26px rgba(0,229,255,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
}
.neural-glow::before {
  content: '';
  position: absolute; inset: -2px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 72%);
  border-radius: inherit; z-index: -1;
  animation: neural-pulse 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes neural-pulse {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.03); }
}
.neural-link {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.42;
  height: 1px;
  animation: neural-flow 2.6s linear infinite;
  pointer-events: none;
}
@keyframes neural-flow { 0% { background-position: 0 0; } 100% { background-position: 140px 0; } }

/* Beta Apps / Tools Grid - clear functions, AI voice music etc sections */
.beta-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.beta-tool-card {
  background: rgba(17,29,53,0.72);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 12px;
  padding: 16px 14px;
  transition: transform .25s cubic-bezier(0.23,1,.32,1), border-color .18s;
  contain: layout;
}
.beta-tool-card:hover { transform: translateY(-2px); border-color: rgba(0,229,255,0.32); }
.beta-tool-card h4 { font-size: 0.82em; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; color: #A5D8FF; }
.beta-tool-card p { font-size: 0.72em; color: var(--text2); line-height: 1.5; }
.beta-tool-card .fn-label { font-size: 0.62em; color: var(--cyan); display: inline-block; padding: 1px 6px; border: 1px solid rgba(0,229,255,0.2); border-radius: 3px; margin-top: 8px; }

/* App Mapping Visual - clear mapping of apps/tools to functions */
.app-map {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}
.app-map h3 { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3); margin-bottom: 12px; }
.app-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}
.app-map-item {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(11,20,36,0.6);
  border: 1px solid rgba(0,229,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.68em;
  line-height: 1.4;
}
.app-map-item .map-app { font-weight: 600; color: var(--cyan); min-width: 64px; }
.app-map-item .map-fns { color: var(--text2); flex: 1; }

/* Skills Review Links Section (integrated premium effects) */
.skills-review {
  font-size: 0.68em;
  color: var(--text3);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}
.skills-review a { color: var(--cyan); text-decoration: underline; }
.skills-review a:hover { color: var(--amber); }

/* Enhanced responsive fixes for phone/web across site (fast load: no new JS, pure CSS). Better stacking, smaller touch targets, consistent with checkout glass/pill on mobile. */
@media (max-width: 720px) {
  .beta-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .app-map-grid { grid-template-columns: 1fr; }
  .liquid-glass, .neural-glow, .beta-tool-card, .glass-card { border-radius: 11px; padding: 14px; }
  .section { padding: 20px 14px; }
  .hero { padding: 48px 14px 30px; }
  .site-nav { font-size:0.8rem; padding:8px 10px; }
  .pill-btn { padding:9px 14px; font-size:.66em; }
}
@media (max-width: 480px) {
  .beta-tools-grid { grid-template-columns: 1fr; gap:8px; }
  .app-map-item { font-size: 0.64em; }
  .hero h1 { font-size:2.3rem; }
  .glass-card { padding:16px; }
  .game-grid, .products-grid { grid-template-columns:1fr; }
}
@media (max-width: 380px) {
  .beta-tools-grid { grid-template-columns: 1fr; }
  .app-map-item { font-size: 0.6em; }
}

/* Prefers reduced motion safe */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass, .neural-glow, .beta-tool-card, .app-map-item { transition: none; animation: none; }
  .neural-glow::before, .neural-link { animation: none; }
}

/* ===== MATURE ADVANCED VISUALS (Oc2cO reuse from VISUAL_SKILLS + TOOLS_SKILLS research: neural particle, liquid glass, glassmorphism, glow connections, 2.5D, scroll etc. No emoji. Mature brain/neural/glass for MemTool/Arcade/index. Fast load: lightweight CSS, contain, will-change limited. Responsive phone+web. ) ===== */

/* Liquid Glass Refraction (Asian premium + glass base enhanced) */
.liquid-glass {
  position: relative;
  background: rgba(17, 29, 53, 0.65);
  border: 1px solid rgba(100, 212, 255, 0.18);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 15px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.2s;
  contain: strict;
  overflow: hidden;
}
.liquid-glass:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
.liquid-glass::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 40%, rgba(100,212,255,0.06) 70%);
  pointer-events: none; mix-blend-mode: screen; border-radius: inherit;
}

/* Neural Glow + Connection Effects (mature for status, orbs, companion, brain cards) */
.neural-glow {
  position: relative;
  background: radial-gradient(circle at 40% 30%, #64d4ff44, transparent 60%);
  border: 1px solid rgba(100,212,255,0.4);
  box-shadow: 0 0 8px rgba(100,212,255,0.6), 0 0 24px rgba(100,212,255,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
}
.neural-glow::before {
  content: '';
  position: absolute; inset: -2px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: inherit; z-index: -1;
  animation: neural-pulse 4s ease-in-out infinite;
}
@keyframes neural-pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.glow-cyan { box-shadow: 0 0 12px #64d4ff, 0 0 32px #00e5ff44; }

/* Neural Particle / Data Flow container for canvas (MemTool brain, Arcade, index) */
.neural-canvas-container { position: relative; overflow: hidden; border-radius: 12px; background: rgba(6,10,20,0.6); border:1px solid rgba(0,229,255,0.1); }
.neural-canvas { display:block; width:100%; height:100%; mix-blend-mode: screen; opacity:0.75; }

/* Mature Brain Atrium / Card visual upgrades (pure CSS + canvas, no emoji) */
.mature-brain-visual {
  position: relative; width: 100%; max-width: 280px; height: 152px; margin: 0 auto;
  border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(6,10,20,0.95) 0%, rgba(11,20,36,0.9) 45%, rgba(17,29,53,0.85) 100%);
  border: 1px solid rgba(0,229,255,0.22); box-shadow: 0 12px 42px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(22px) saturate(210%); -webkit-backdrop-filter: blur(22px) saturate(210%);
}
.mature-brain-visual .neural-mesh { position:absolute; inset:0; pointer-events:none; z-index:2; }
.mature-brain-visual .node { position:absolute; width:5px; height:5px; background:#64d4ff; border-radius:50%; box-shadow:0 0 6px #00e5ff; animation: neural-node-pulse 2.8s ease-in-out infinite; }
.mature-brain-visual .node:nth-child(1){top:28%;left:22%;} .mature-brain-visual .node:nth-child(2){top:35%;left:72%; animation-delay:620ms;} 
.mature-brain-visual .node:nth-child(3){top:62%;left:38%; animation-delay:1.1s;} .mature-brain-visual .node:nth-child(4){top:68%;left:68%; animation-delay:480ms;}
@keyframes neural-node-pulse { 0%,100%{opacity:0.7;transform:scale(1);} 50%{opacity:1;transform:scale(1.6);} }

/* App mapping enhanced + beta tools */
.beta-tools-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; }
.beta-tool-card { background:rgba(17,29,53,0.6); border:1px solid rgba(0,229,255,0.1); border-radius:10px; padding:14px; font-size:0.78em; transition:transform .2s ease, border .2s; }
.beta-tool-card:hover { transform:translateY(-1px); border-color:rgba(0,229,255,0.28); }
.beta-tool-card h4 { font-family:'Orbitron',sans-serif; font-size:0.82em; margin-bottom:4px; color:#A5D8FF; }
.beta-tool-card .fn-label { display:block; margin-top:6px; font-size:0.62em; color:var(--text3); letter-spacing:0.5px; }

/* App map grid improved */
.app-map { padding:18px; }
.app-map-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:12px; }
.app-map-item { padding:10px 12px; background:rgba(11,20,36,0.6); border:1px solid rgba(100,212,255,0.1); border-radius:8px; font-size:0.72em; }
.map-app { display:block; font-weight:600; color:#00E5FF; font-family:'Orbitron',sans-serif; letter-spacing:0.5px; margin-bottom:3px; }
.map-fns { color:var(--text2); }

/* Skills review section polish (premium glass/neural effects integrated; Oc2cO reuse) */
.skills-review { font-size:0.68em; color:var(--text3); padding:14px 16px; background:rgba(6,10,20,0.5); border:1px solid var(--border); border-radius:8px; line-height:1.6; }
.skills-review a { color:var(--cyan); text-decoration:underline; padding:1px 3px; }
.skills-review a:hover { color:var(--amber); background:rgba(0,229,255,0.06); border-radius:3px; }

/* Pure CSS mature non-emoji game icons (glass/neural themed for Arcade; replaces unicode emoji chars for mature visuals) */
.game-icon-mature {
  width: 64px; height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(17,29,53,0.9), rgba(6,10,20,0.95)); border: 1px solid rgba(0,229,255,0.25);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); position: relative; overflow: hidden;
  font-size: 0; /* no text */
}
.game-icon-mature::before {
  content: ''; position: absolute; inset: 8px; border-radius: 8px;
  background: radial-gradient(circle at 35% 30%, rgba(100,212,255,0.35), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,0.2);
}
.game-icon-mature .neural-dot { position:absolute; width:4px; height:4px; background:#00e5ff; border-radius:50%; box-shadow:0 0 5px #00e5ff; animation: neural-dot 1.8s infinite alternate; }
.game-icon-mature .neural-dot:nth-child(1){ top:22%; left:26%; } .game-icon-mature .neural-dot:nth-child(2){ top:55%; right:28%; animation-delay:420ms; }
.game-icon-mature .neural-dot:nth-child(3){ bottom:24%; left:42%; animation-delay:820ms; }

/* Enhanced responsive phone/web fast-load polish + better mapping grids */
@media (max-width: 640px) {
  .beta-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .app-map-grid { grid-template-columns: 1fr; }
  .liquid-glass, .neural-glow, .beta-tool-card { border-radius: 11px; padding: 12px; }
  .section { padding: 18px 14px; }
  .hero { padding: 52px 16px 36px; }
  .game-icon-mature { width:52px; height:52px; }
  .skills-review { font-size:0.62em; padding:10px 12px; }
}
@media (max-width: 380px) {
  .beta-tools-grid { grid-template-columns: 1fr; }
  .app-map-item { font-size: 0.64em; }
  .games-grid { gap: 12px; }
}

/* Reduced motion safe */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass, .neural-glow, .beta-tool-card, .app-map-item, .game-icon-mature, .neural-glow::before { transition: none !important; animation: none !important; }
}
.skills-review a:hover { color:var(--amber); }

/* Arcade game card upgrades + better anims */
.game-card { transition: transform .28s cubic-bezier(0.23,1,0.32,1), box-shadow .22s, border-color .18s; will-change: transform; }
.game-card:hover { transform: translateY(-5px) scale(1.01); box-shadow:0 18px 48px rgba(0,0,0,0.45); border-color:var(--cyan); }
.game-card .game-visual { height:92px; background:linear-gradient(145deg, rgba(17,29,53,0.8), rgba(6,10,20,0.9)); border-radius:8px; margin-bottom:12px; position:relative; overflow:hidden; border:1px solid rgba(0,229,255,0.1); }
.game-card .game-visual .neural-dot { position:absolute; background:#64d4ff; width:4px;height:4px; border-radius:50%; box-shadow:0 0 8px #00e5ff; animation: game-dot 1.8s infinite alternate; }
.game-card .game-visual .neural-dot:nth-child(2){ animation-delay:0.4s; left:35%; top:30%; } .game-card .game-visual .neural-dot:nth-child(3){ animation-delay:0.9s; left:72%; top:60%; }

/* Phone + web responsive polish + fast perf */
@media (max-width: 640px) {
  .mature-brain-visual, .advanced-brain-link { height:118px; max-width:96%; }
  .beta-tools-grid, .feature-grid { gap:10px; }
  .app-map-grid { grid-template-columns:1fr; }
  .liquid-glass { border-radius:12px; }
  .neural-canvas-container { height:110px; }
}
@media (max-width:380px){ .beta-tools-grid { grid-template-columns:1fr; } }

/* ===== Oc2cO REUSE + ENHANCED MATURE VISUALS FROM VISUAL_SKILLS (2026-06-30) =====
   Holographic neural orb, liquid glass refraction, neural particle flow, glassmorphism, glow connections.
   No emoji. Mature brain/neural/glass for MemTool + index + arcade. Fast loads: contain, will-change limited, passive.
   Responsive phone/web: scaled transforms, compact paddings, touch friendly.
*/
.holo-neural-orb {
  position: relative; width: 100%; max-width: 280px; height: 160px; margin: 0 auto;
  border-radius: 18px; overflow: hidden; background: #05070f; border: 1px solid rgba(100,212,255,0.2);
  contain: strict;
}
.holo-neural-orb canvas { position:absolute; inset:0; z-index:2; mix-blend-mode:screen; cursor:grab; }
.holo-glass-layer {
  position:absolute; inset: 28px; border-radius:50%; background:rgba(17,29,53,0.42); border:1px solid rgba(100,212,255,0.28);
  backdrop-filter: blur(18px) saturate(170%) url(#liquid-refract); -webkit-backdrop-filter: blur(18px) saturate(170%) url(#liquid-refract);
  box-shadow: 0 0 60px rgba(0,229,255,0.18), inset 0 18px 26px rgba(255,255,255,0.08); z-index:3; pointer-events:none;
}
.neural-svg-overlay { position:absolute; inset:0; z-index:4; pointer-events:none; }
.liquid-refract-glass {
  background: rgba(17,29,53,0.68); border:1px solid rgba(100,212,255,0.18);
  backdrop-filter: blur(16px) saturate(160%) url(#liquid-refract);
  -webkit-backdrop-filter: blur(16px) saturate(160%) url(#liquid-refract);
  transition: transform .32s cubic-bezier(0.23,1,0.32,1), box-shadow .26s, border-color .2s;
}
.liquid-refract-glass:hover { transform: translateY(-3px) scale(1.01); border-color:rgba(0,229,255,0.38); }
.neural-glow-connection { box-shadow: 0 0 14px rgba(0,229,255,0.7), 0 0 32px rgba(100,212,255,0.3); animation: neural-glow-pulse 3.2s ease-in-out infinite; }
@keyframes neural-glow-pulse { 0%,100%{opacity:.85} 50%{opacity:1} }

/* Arcade improvements: better game anims, neural particle hints on cards, micro functions */
.arcade-enhanced .game-card { will-change: transform; contain: layout style; }
.arcade-enhanced .game-card:hover .game-visual { animation: game-glow 1.6s ease-in-out infinite alternate; }
@keyframes game-glow { from { box-shadow: 0 0 8px rgba(0,229,255,0.15); } to { box-shadow: 0 0 22px rgba(0,229,255,0.35); } }
.game-particle-canvas { position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0.75; }

/* Improved app mapping + beta tools for phone/web clarity + touch */
.app-map-grid, .beta-tools-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.app-map-item, .beta-tool-card { padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(17,29,53,0.65); backdrop-filter:blur(14px); contain: content; }
.app-map-item .map-app { display:block; font-family:'Orbitron',sans-serif; font-size:0.78em; letter-spacing:0.06em; color:#00E5FF; margin-bottom:3px; }
.app-map-item .map-fns { font-size:0.68em; color:var(--text2); line-height:1.35; }
.beta-tool-card h4 { font-size:0.82em; margin:0 0 3px; color:var(--text); font-family:'Orbitron',sans-serif; letter-spacing:0.04em; }
.beta-tool-card p { font-size:0.68em; color:var(--text2); margin:0 0 4px; line-height:1.35; }
.fn-label { display:inline-block; font-size:0.58em; padding:1px 7px; border-radius:4px; background:rgba(0,229,255,0.08); color:#64D4FF; border:1px solid rgba(0,229,255,0.2); letter-spacing:0.5px; }

@media (max-width:640px) {
  .app-map-grid, .beta-tools-grid { grid-template-columns: repeat(2,1fr); gap:10px; }
  .holo-neural-orb { max-width:92%; height:128px; }
  .liquid-refract-glass, .glass-card { padding:14px; border-radius:12px; }
  .app-map-item, .beta-tool-card { padding:10px; font-size:0.95em; }
  .beta-tool-card h4 { font-size:0.76em; }
}
@media (max-width:380px) { .app-map-grid, .beta-tools-grid { grid-template-columns:1fr; } }

/* Fast load + responsive phone/web: optimized glass, neural, holo (VISUAL_SKILLS reuse: glassmorphism, neural flow, liquid glass, orb morph) */
.liquid-refract-glass, .holo-neural-orb, .mature-brain-visual, .neural-glass-core {
  background: rgba(11,20,36,0.72);
  border:1px solid rgba(0,229,255,0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 12px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative; overflow:hidden; border-radius:14px; transition: transform .28s cubic-bezier(0.23,1,0.32,1), box-shadow .2s;
  will-change: transform;
}
.liquid-refract-glass:hover, .holo-neural-orb:hover { transform: translateY(-2px); border-color: rgba(0,229,255,0.32); box-shadow:0 18px 60px rgba(0,0,0,0.55); }

.neural-glow-connection { box-shadow: 0 0 12px #64d4ff, 0 0 32px rgba(0,229,255,0.22); position:relative; }
.neural-glow-connection::before { content:''; position:absolute; inset:-1px; background:radial-gradient(circle at 40%30%, rgba(100,212,255,0.25), transparent 60%); border-radius:inherit; pointer-events:none; animation: neural-pulse 4.2s ease-in-out infinite; }

.holo-sweep, .orbit-ring { pointer-events:none; }

.neural-canvas { display:block; width:100%; height:100%; border-radius:10px; }

/* Premium mature holographic neural orb (from VISUAL_SKILL_ADVANCED_HOLOGRAPHIC_NEURAL_ORB_MORPH + NEURAL_PARTICLE_DATA_FLOW) */
.holo-orb-container { position:relative; width:100%; max-width:480px; height:300px; margin:12px auto; border-radius:18px; overflow:hidden; background:#05070f; contain: layout; }
.holo-orb-container canvas { mix-blend-mode: screen; }
.holo-glass { position:absolute; inset:48px; border-radius:50%; background:rgba(17,29,53,0.42); border:1px solid rgba(100,212,255,0.22); backdrop-filter:blur(16px) saturate(170%); box-shadow:0 0 70px rgba(0,229,255,0.18), inset 0 20px 30px rgba(255,255,255,0.1); pointer-events:none; z-index:3; }

/* Clear function visuals + mapping polish for phone */
.map-fns { word-break:break-word; }

/* Fast load: reduced motion + perf + touch friendly */
@media (prefers-reduced-motion: reduce) {
  .holo-neural-orb, .liquid-refract-glass, .neural-glow-connection, .arcade-enhanced .game-card, .neural-mesh .node, .holo-sweep { transition:none !important; animation:none !important; }
}
@media (max-width:640px) {
  .glass, .glass-card, .project, .beta-tool-card, .app-map-item { backdrop-filter: blur(10px); }
  .hero, .section { padding-left:16px; padding-right:16px; }
  .site-nav { padding:10px 12px; font-size:0.82rem; }
  .site-nav a { margin:0 8px; }
  .btn { padding:10px 18px; font-size:0.72em; }
}

/* === ENHANCED MATURE VISUALS FROM RESEARCH (Oc2cO reuse + VISUAL_SKILLS_REUSABLE_SYNTHESIS) ===
   Advanced Asian Dense Glass Neural UI, Liquid Morph, Kinetic, Gamified, Holo for index/memtool/arcade.
   No emoji. Fast canvas, responsive phone+web. Mature neural/glass/brain. */
.dense-glass-panel, .asian-dense-ui .dense-glass-panel {
  background: rgba(10,14,31,0.82); border: 1px solid rgba(100,212,255,0.16); border-radius: 14px;
  padding: 14px 16px; position: relative; overflow: hidden;
  backdrop-filter: blur(19px) saturate(175%); -webkit-backdrop-filter: blur(19px) saturate(175%);
  box-shadow: 0 12px 48px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform .28s cubic-bezier(0.23,1,0.32,1), border-color .2s, box-shadow .2s;
  font-size: 0.82em; color: #c8e6ff; contain: layout style paint;
}
.dense-glass-panel:hover { transform: translateY(-2px); border-color: rgba(0,229,255,0.42); box-shadow: 0 22px 70px rgba(0,0,0,0.6), 0 0 28px rgba(0,229,255,0.12); }
.dense-glass-panel::before { content:''; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,0.05)0%,transparent 35%,rgba(100,212,255,0.04)80%); pointer-events:none; mix-blend-mode:screen; }
.dense-glass-panel .panel-header { font-family:'Orbitron',sans-serif; font-size:0.68em; letter-spacing:0.1em; color:#64d4ff; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.dense-glass-panel .status { font-size:0.7em; padding:1px 7px; border:1px solid rgba(74,222,128,0.4); color:#4ade80; border-radius:3px; }
.dense-glass-panel .neural-canvas-wrap { position:relative; height:128px; margin:8px -4px; border-radius:8px; overflow:hidden; background:rgba(5,7,15,0.6); }
.dense-glass-panel .panel-metrics { display:flex; gap:12px; font-size:0.68em; color:#a5d8ff; margin:6px 0; }
.dense-glass-panel .panel-metrics .val { color:#00E5FF; font-weight:600; }
.dense-glass-panel .micro-btn { font-size:0.6em; padding:3px 9px; border:1px solid rgba(0,229,255,0.3); background:transparent; color:#64d4ff; border-radius:4px; cursor:pointer; transition:all .15s; font-family:'Orbitron',sans-serif; }
.dense-glass-panel .micro-btn:hover { background:rgba(0,229,255,0.1); border-color:#00E5FF; }

/* Liquid Morph Scroll / Cinematic Refraction Panels (VISUAL_SKILL_ADVANCED_CINEMATIC_SCROLL_LIQUID_MORPH + LIQUID_GLASS) */
.liquid-morph-panel { position:relative; overflow:hidden; border-radius:14px; background:rgba(11,20,36,0.78); border:1px solid rgba(0,229,255,0.15); backdrop-filter:blur(18px) saturate(165%); }
.liquid-morph-panel::after { content:''; position:absolute; inset:-50%; background:linear-gradient(125deg,transparent 25%,rgba(100,212,255,0.08)42%,rgba(255,255,255,0.06)55%,transparent 72%); transform:skewX(-22deg); animation:liquid-morph 5.8s ease-in-out infinite; pointer-events:none; z-index:1; }
@keyframes liquid-morph { 0%{transform:translateX(-120%) skewX(-22deg);} 50%{transform:translateX(110%) skewX(-22deg);} 100%{transform:translateX(-120%) skewX(-22deg);} }

/* Kinetic Morphing Typography (VISUAL_SKILL_KINETIC_MORPHING_TYPOGRAPHY) */
.kinetic-typo { font-family:'Orbitron',sans-serif; display:inline-block; transition:transform .2s, filter .2s; cursor:default; }
.kinetic-typo .char { display:inline-block; transition:transform .18s cubic-bezier(0.23,1,0.32,1), color .12s; }
.kinetic-typo:hover .char { color:#64d4ff; }
.kinetic-typo .char:nth-child(odd):hover { transform:translateY(-1px) scale(1.08) rotate(-1deg); }
.kinetic-typo .char:nth-child(even):hover { transform:translateY(1px) scale(1.06) rotate(1deg); }

/* Gamified Micro Interaction Grid (VISUAL_SKILL_GAMIFIED_MICRO_INTERACTION_GRID) */
.gamified-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
.gamified-card { background:rgba(17,29,53,0.6); border:1px solid rgba(0,229,255,0.12); border-radius:8px; padding:9px 10px; transition:transform .2s,border-color .15s,box-shadow .2s; position:relative; overflow:hidden; }
.gamified-card:hover { transform:translateY(-1px) scale(1.015); border-color:#00E5FF; box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.gamified-card .progress { height:3px; background:rgba(0,229,255,0.2); border-radius:3px; margin-top:6px; overflow:hidden; }
.gamified-card .progress-bar { height:100%; background:#00E5FF; width:0; transition:width .4s ease; }
.gamified-card .streak { font-size:0.6em; color:#FFB300; position:absolute; top:6px; right:8px; }

/* Enhanced App Mapping + Beta tools responsive polish + clear functions */
.app-map-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.app-map-item { background:rgba(17,29,53,0.55); border:1px solid rgba(0,229,255,0.1); border-radius:10px; padding:10px 12px; font-size:0.72em; }
.app-map-item .map-app { font-family:'Orbitron',sans-serif; color:#00E5FF; display:block; margin-bottom:2px; font-size:0.9em; }
.map-fns { color:var(--text2); line-height:1.4; }
.beta-tools-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.beta-tool-card { background:rgba(17,29,53,0.65); border:1px solid rgba(0,229,255,0.12); border-radius:10px; padding:12px; position:relative; }
.beta-tool-card.neural-glow { border-color:rgba(0,229,255,0.22); box-shadow:0 0 12px rgba(0,229,255,0.08); }
.beta-tool-card h4 { font-size:0.85em; margin-bottom:4px; color:#c8e6ff; }
.beta-tool-card p { font-size:0.68em; color:var(--text2); line-height:1.4; margin-bottom:4px; }
.beta-tool-card .fn-label { font-size:0.55em; letter-spacing:0.5px; color:#64d4ff; background:rgba(0,229,255,0.08); padding:1px 6px; border-radius:3px; }

/* Holo Orb + Dense Neural + Liquid for MemTool/Arcade/Index hero sections (mature, no emoji) */
.advanced-neural-atrium { position:relative; background:linear-gradient(145deg,rgba(6,10,20,0.95),rgba(11,20,36,0.88)); border:1px solid rgba(0,229,255,0.2); border-radius:16px; padding:14px; overflow:hidden; }
.advanced-neural-atrium canvas { mix-blend-mode:screen; position:absolute; inset:0; pointer-events:auto; z-index:2; }

/* Phone + Web fast layout fixes: tighter spacing, touch targets */
@media (max-width:640px) {
  .dense-glass-panel, .beta-tool-card, .app-map-item { padding:10px; font-size:0.78em; }
  .beta-tools-grid, .app-map-grid { gap:8px; }
  .kinetic-typo { font-size:0.92em; }
  .gamified-grid { grid-template-columns:repeat(2,1fr); }
}