/* ═══════════════════════════════════════════════════════════════
   MIRAGE REALITY LABS — styles/index.css
   Page-specific styles for index.html
   Depends on: styles/components.css (shared navbar/footer/base)
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  --nc:     #00F0FF;                 /* neon cyan   — primary accent  */
  --mg:     #00FF85;                 /* matrix green — secondary      */
  --ep:     #7000FF;                 /* electric purple — tertiary    */
  --dv:     #050505;
  --bg:     #0a0a0a;
  --sur:    rgba(15,15,15,0.7);
  --stroke: rgba(255,255,255,0.10);
  --text:   #e5e2e1;
  --muted:  #8fa3a5;
  --font:   'Plus Jakarta Sans', sans-serif;
  --mono:   'JetBrains Mono', monospace;
  --r:      2px;
}

/* ─── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
::selection { background: var(--nc); color: var(--dv); }

/* ─── MATERIAL ICONS ──────────────────────────────────────────── */
.mi {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height: 1; display: inline-block; vertical-align: middle;
  user-select: none;
}

/* ─── FIXED OVERLAYS ──────────────────────────────────────────── */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;

  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.18) 50%),
    linear-gradient(
      90deg,
      rgba(255,0,0,0.04),
      rgba(0,255,0,0.015),
      rgba(0,0,255,0.04)
    );

  background-size: 100% 4px, 3px 100%;

  animation: scan-cycle 10s ease-in-out infinite;
}

@keyframes scan-cycle {

  0%,20% {
    opacity: 1;
  }

  30%,80% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
}

/* ─── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }
[data-reveal][data-delay="4"] { transition-delay: 0.4s; }
[data-reveal][data-delay="5"] { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 64px;
}

/* Background image + vignettes */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.45;
  transform: scale(1.05);
  animation: hero-zoom 5s ease-out forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__bg-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,0.2) 50%, transparent 100%);
}
.hero__bg-left {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.4) 50%, transparent 80%);
}
.hero__bg-right {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(0,240,255,0.06) 0%, transparent 70%);
}

/* Animated grain overlay */
.hero__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-drift 8s steps(10) infinite;
}
@keyframes grain-drift {
  0%,100% { background-position: 0 0; opacity: 0.7; }
  10%  { background-position: -5% -10%;  opacity: 0.5;}
  20%  { background-position: -15% 5%;  opacity: 0.3  ;}
  30%  { background-position: 7% -25%;  opacity: 0.2;}
  40%  { background-position: -5% 25%;  opacity: 0.075;}
  50%  { background-position: -15% 10%;  opacity: 0.05;}
  60%  { background-position: 15% 0%;  opacity: 0.075;}
  70%  { background-position: 0% 15%;  opacity: 0.1;}
  80%  { background-position: 3% 35%;  opacity: 0.4;}
  90%  { background-position: -10% 10%;  opacity: 0.7;}
}

/* Floating particles (JS-created) */
.hero__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-float linear infinite;
  opacity: 0.2;
}
@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(100vh) scale(0); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-10vh) scale(1.5); }
}

/* Corner brackets */
.hero__bracket {
  position: absolute; z-index: 3; pointer-events: none;
  width: 48px; height: 48px;
}
.hero__bracket--tl { top: 80px; left: 24px; border-top: 1px solid var(--nc); border-left: 1px solid var(--nc); opacity: 0; animation: fadeIn 1s 1.4s forwards; }
.hero__bracket--tr { top: 80px; right: 24px; border-top: 1px solid rgba(0,240,255,0.3); border-right: 1px solid rgba(0,240,255,0.3); opacity: 0; animation: fadeIn 1s 1.5s forwards; }
.hero__bracket--bl { bottom: 60px; left: 24px; border-bottom: 1px solid rgba(0,240,255,0.3); border-left: 1px solid rgba(0,240,255,0.3); opacity: 0; animation: fadeIn 1s 1.6s forwards; }
.hero__bracket--br { bottom: 60px; right: 24px; border-bottom: 1px solid rgba(0,240,255,0.3); border-right: 1px solid rgba(0,240,255,0.3); opacity: 0; animation: fadeIn 1s 1.7s forwards; }

/* Content layout — two-column on desktop */
.hero__content {
  position: relative; z-index: 10;
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px 100px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}
.hero__left { max-width: 660px; }

/* Eyebrow */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero__eyebrow-line { width: 40px; height: 1px; background: var(--nc); }
.hero__eyebrow-text {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--nc);
}

/* Title */
.hero__title {
  font-size: clamp(50px, 7.5vw, 88px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.04em;
  color: #dbfcff; max-width: 680px; margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.9s 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero__title em { color: var(--nc); font-style: italic; }
/* Glitch flicker on first word */
.hero__title .glitch {
  display: inline-block;
  animation: glitch-flicker 8s 2s ease-in-out infinite;
}
@keyframes glitch-flicker {
  0%,94%,100% { text-shadow: none; transform: none; }
  95% { text-shadow: 2px 0 var(--ep), -2px 0 var(--mg); transform: skewX(-1deg); }
  96% { text-shadow: -2px 0 var(--nc); transform: none; }
  97% { text-shadow: 1px 0 var(--ep); transform: skewX(0.5deg); }
  98% { text-shadow: none; transform: none; }
}

/* Subtitle */
.hero__sub {
  font-size: 16px; color: var(--muted); max-width: 460px;
  line-height: 1.7; margin-bottom: 28px;
  opacity: 0; animation: fadeUp 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* Service tag pills */
.hero__tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
  opacity: 0; animation: fadeUp 0.9s 0.62s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--stroke);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  border-radius: 999px;
  transition: border-color 0.2s, color 0.2s;
}
.hero__tag:hover { border-color: var(--nc); color: var(--nc); }
.hero__tag-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.hero__tag-dot--nc { background: var(--nc); }
.hero__tag-dot--ep { background: var(--ep); }
.hero__tag-dot--mg { background: var(--mg); }

/* CTA buttons */
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  opacity: 0; animation: fadeUp 0.9s 0.75s cubic-bezier(0.16,1,0.3,1) forwards;
}
.btn-nc {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nc); color: var(--dv);
  padding: 13px 28px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--r);
  transition: box-shadow 0.25s, transform 0.1s;
}
.btn-nc:hover { box-shadow: 0 0 32px rgba(0,240,255,0.6); }
.btn-nc:active { transform: scale(0.97); }
.btn-outline-ep {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ep); color: #d1bcff;
  padding: 13px 28px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--r);
  transition: background 0.2s;
}
.btn-outline-ep:hover { background: rgba(112,0,255,0.12); }
.btn-outline-mg {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(0,255,133,0.4); color: var(--mg);
  padding: 13px 28px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--r);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-outline-mg:hover { background: rgba(0,255,133,0.08); box-shadow: 0 0 18px rgba(0,255,133,0.2); }

/* Stat pillar (right column) */
.hero__stat-pillar {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--stroke);
  background: rgba(5,5,5,0.75);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; animation: fadeUp 1s 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero__stat {
  padding: 24px 36px;
  border-bottom: 1px solid var(--stroke);
  text-align: center;
}
.hero__stat:last-child { border-bottom: none; }
.hero__stat-num {
  font-size: 40px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; margin-bottom: 4px;
}
.hero__stat-num--nc { color: var(--nc); text-shadow: 0 0 20px rgba(0,240,255,0.4); }
.hero__stat-num--ep { color: var(--ep); text-shadow: 0 0 20px rgba(112,0,255,0.4); }
.hero__stat-num--mg { color: var(--mg); text-shadow: 0 0 20px rgba(0,255,133,0.4); }
.hero__stat-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* Scroll cue */
.hero__scroll {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 10;
  opacity: 0; animation: fadeIn 1s 1.4s forwards;
}
.hero__scroll-text {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.45em; text-transform: uppercase; color: var(--muted);
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--nc), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Shared keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { to { opacity: 1; } }

/* Hero responsive */
@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__stat-pillar { flex-direction: row; }
  .hero__stat {
    padding: 16px 20px; flex: 1;
    border-bottom: none; border-right: 1px solid var(--stroke);
  }
  .hero__stat:last-child { border-right: none; }
  .hero__stat-num { font-size: 28px; }
}
@media (max-width: 600px) {
  .hero__ctas { flex-direction: column; }
  .btn-nc, .btn-outline-ep, .btn-outline-mg { justify-content: center; }
  .hero__stat-pillar { display: none; }
  .hero__bracket { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BASE
   ═══════════════════════════════════════════════════════════════ */
.section { position: relative; z-index: 10; padding: 72px 0; }
.section--dark { background: rgba(5,5,5,0.6); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sec-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--nc); display: block; margin-bottom: 10px;
}
.sec-tag--green { color: var(--mg); }
.sec-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: #dbfcff; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   GLASS CARD
   ═══════════════════════════════════════════════════════════════ */
.gc {
  background: var(--sur);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  transition: border-color 0.35s, box-shadow 0.35s, background 0.2s;
}
.gc:hover {
  border-color: rgba(0,240,255,0.5);
  box-shadow: 0 0 24px rgba(0,240,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   CAPABILITIES BENTO GRID
   ═══════════════════════════════════════════════════════════════ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bento__hd { grid-column: 1/-1; margin-bottom: 8px; }
.bento__hd-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.bento__hd-title {
  font-size: clamp(26px, 3.5vw, 38px); font-weight: 700;
  letter-spacing: -0.02em; color: #dbfcff;
}
.bento__hd-title span { color: var(--nc); }

.b-game {
  grid-column: span 8; padding: 36px; min-height: 240px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.b-game::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.06), transparent);
  animation: sweep 5s linear infinite;
}
@keyframes sweep { to { left: 160%; } }
.b-game__scan {
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(to right, transparent, var(--nc), transparent);
  opacity: 0.4;
}
.b-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.b-icon--nc { color: var(--nc); }
.b-icon--ep { color: var(--ep); }
.b-icon--mg { color: var(--mg); }
.b-game__title { font-size: 28px; font-weight: 700; color: #dbfcff; margin-bottom: 10px; transition: color 0.2s; }
.b-game:hover .b-game__title { color: var(--nc); }
.b-game__desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 480px; }
.b-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.b-tag {
  padding: 3px 12px;
  background: rgba(0,240,255,0.07); border: 1px solid rgba(0,240,255,0.2);
  color: var(--nc); font-family: var(--mono); font-size: 10px;
  border-radius: 999px; transition: background 0.2s;
}
.b-tag:hover { background: rgba(0,240,255,0.15); }

.b-stats {
  grid-column: span 4;
  background: #111; border: 1px solid var(--stroke);
  padding: 36px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; gap: 40px;
}
.b-stat__n { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; }
.b-stat__n--nc { color: var(--nc); text-shadow: 0 0 20px rgba(0,240,255,0.4); }
.b-stat__n--ep { color: var(--ep); text-shadow: 0 0 20px rgba(112,0,255,0.4); }
.b-stat__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.b-ai { grid-column: span 4; padding: 36px; }
.b-ai__title { font-size: 24px; font-weight: 700; color: #dbfcff; margin-bottom: 10px; transition: color 0.2s; }
.b-ai:hover .b-ai__title { color: var(--ep); }
.b-ai__desc { font-size: 14px; color: var(--muted); line-height: 1.6; }

.b-vr { grid-column: span 8; padding: 36px; display: flex; gap: 32px; align-items: center; }
.b-vr__content { flex: 1; }
.b-vr__title { font-size: 24px; font-weight: 700; color: #dbfcff; margin-bottom: 10px; }
.b-vr__desc  { font-size: 14px; color: var(--muted); line-height: 1.6; }
.b-vr__img { width: 30%; flex-shrink: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--stroke); }
.b-vr__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity 0.4s, transform 0.6s; }
.b-vr:hover .b-vr__img img { opacity: 0.75; transform: scale(1.05); }

@media (max-width: 900px) {
  .bento { display: flex; flex-direction: column; }
  .b-vr  { flex-direction: column; }
  .b-vr__img { width: 100%; aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .b-game__title, .b-ai__title, .b-vr__title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PACKAGES SECTION
   ═══════════════════════════════════════════════════════════════ */
.packages-hd {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 20px; flex-wrap: wrap;
}
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.pkg-card {
  padding: 36px 32px;
  background: rgba(8,8,8,0.9);
  border: 1px solid var(--stroke);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
/* Featured card */
.pkg-card--featured {
  border-color: var(--nc);
  background: rgba(0,240,255,0.04);
}
.pkg-card--featured::before {
  content: 'MOST POPULAR';
  position: absolute; top: 0; left: 0; right: 0;
  text-align: center; padding: 6px;
  background: var(--nc); color: var(--dv);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em; font-weight: 700;
}
.pkg-card--featured .pkg-body { padding-top: 20px; }
.pkg-card:hover:not(.pkg-card--featured) {
  border-color: rgba(112,0,255,0.5);
  transform: translateY(-4px);
}
.pkg-card--featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(0,240,255,0.12);
}
.pkg-tier {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;
}
.pkg-tier--nc { color: var(--nc); }
.pkg-tier--ep { color: var(--ep); }
.pkg-tier--mg { color: var(--mg); }
.pkg-name    { font-size: 26px; font-weight: 700; color: #dbfcff; margin-bottom: 8px; }
.pkg-tagline { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 28px; }
.pkg-divider { height: 1px; background: var(--stroke); margin-bottom: 24px; }
.pkg-features {
  list-style: none; display: flex; flex-direction: column;
  gap: 10px; flex: 1; margin-bottom: 32px;
}
.pkg-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.pkg-features li .mi { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.mi--nc { color: var(--nc); }
.mi--ep { color: var(--ep); }
.mi--mg { color: var(--mg); }
.pkg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: var(--r);
  transition: all 0.2s;
}
.pkg-cta--nc { background: var(--nc); color: var(--dv); }
.pkg-cta--nc:hover { box-shadow: 0 0 24px rgba(0,240,255,0.5); }
.pkg-cta--ep { border: 1px solid var(--ep); color: #d1bcff; }
.pkg-cta--ep:hover { background: rgba(112,0,255,0.1); }
.pkg-cta--mg { border: 1px solid rgba(0,255,133,0.4); color: var(--mg); }
.pkg-cta--mg:hover { background: rgba(0,255,133,0.07); }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO
   ═══════════════════════════════════════════════════════════════ */
.section--portfolio { background: rgba(4,4,4,0.8); }
.port-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 40px; gap: 20px; flex-wrap: wrap;
}
.port-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.port-btns    { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-port-nc {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--nc); color: var(--dv);
  padding: 10px 20px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: var(--r);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn-port-nc:hover { box-shadow: 0 0 20px rgba(0,240,255,0.4); }
.btn-port-nc:active { transform: scale(0.97); }
.btn-port-ep {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ep); color: #d1bcff;
  padding: 10px 20px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: var(--r);
  backdrop-filter: blur(6px); transition: background 0.2s;
}
.btn-port-ep:hover { background: rgba(112,0,255,0.1); }
.btn-all {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); background: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color 0.2s; white-space: nowrap;
}
.btn-all:hover { color: var(--nc); }

.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.proj-card { display: flex; flex-direction: column; overflow: hidden; }
.proj-card__thumb { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.proj-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.proj-card:hover .proj-card__thumb img { transform: scale(1.08); }
.proj-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 3px 10px; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; border-radius: var(--r);
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
}
.proj-badge--nc { color: var(--nc); border: 1px solid rgba(0,240,255,0.3); }
.proj-badge--mg { color: var(--mg); border: 1px solid rgba(0,255,133,0.3); }
.proj-badge--ep { color: var(--ep); border: 1px solid rgba(112,0,255,0.3); }
.proj-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.proj-card__title { font-size: 20px; font-weight: 700; color: #dbfcff; margin-bottom: 7px; transition: color 0.2s; }
.proj-card--nc:hover .proj-card__title { color: var(--nc); }
.proj-card--mg:hover .proj-card__title { color: var(--mg); }
.proj-card--ep:hover .proj-card__title { color: var(--ep); }
.proj-card__desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.proj-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; transition: gap 0.2s;
}
.proj-link--nc { color: var(--nc); }
.proj-link--mg { color: var(--mg); }
.proj-link--ep { color: var(--ep); }
.proj-link:hover { gap: 10px; }
.proj-link .mi { font-size: 15px; }
@media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   FOUNDER
   ═══════════════════════════════════════════════════════════════ */
.founder-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.founder-portrait { position: relative; max-width: 380px; width: 100%; }
.founder-portrait__glow {
  position: absolute; top: -40px; left: -40px;
  width: 160px; height: 160px;
  background: rgba(0,240,255,0.08); filter: blur(80px);
  border-radius: 50%; pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100%{opacity:0.8} 50%{opacity:0.3} }
.founder-portrait__card { position: relative; aspect-ratio: 4/5; overflow: hidden; border-left: 3px solid var(--nc); }
.founder-portrait__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); transition: filter 0.5s; }
.founder-portrait:hover .founder-portrait__card img { filter: grayscale(0.3) contrast(1.1); }
.founder-portrait__caption {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px;
  background: linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.4) 60%, transparent 100%);
}
.founder-name { font-size: 26px; font-weight: 700; color: #dbfcff; margin-bottom: 3px; }
.founder-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nc); }
.founder-info__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.founder-info__title { font-size: clamp(28px,3.5vw,40px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #dbfcff; margin-bottom: 20px; }
.founder-info__title em { font-style: italic; font-weight: 400; }
.founder-info__bio { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.socials { display: flex; gap: 12px; }
.social-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--sur); border: 1px solid var(--stroke);
  color: var(--muted); border-radius: var(--r);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.social-btn:hover { color: var(--nc); border-color: var(--nc); box-shadow: 0 0 12px rgba(0,240,255,0.2); }
.social-btn svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 900px) { .founder-wrap { grid-template-columns: 1fr; gap: 36px; } }

/* ═══════════════════════════════════════════════════════════════
   VIDEO FEED
   ═══════════════════════════════════════════════════════════════ */
.video-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.video-hd__live { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mg); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.video-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.v-main  { grid-column: span 8; }
.v-short { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.v-sm    { grid-column: span 4; }
.v-card  { overflow: hidden; display: flex; flex-direction: column; }
.v-embed { position: relative; width: 100%; background: #000; }
.v-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.v-16-9  { aspect-ratio: 16/9; }
.v-9-16  { flex: 1; min-height: 360px; position: relative; }
.v-9-16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.v-foot  { padding: 12px 18px; border-top: 1px solid var(--stroke); display: flex; justify-content: space-between; align-items: center; }
.v-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.v-label--nc { color: var(--nc); }
.v-label--mu { color: var(--muted); }
@media (max-width: 900px) { .video-grid { display: flex; flex-direction: column; } }

/* ═══════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about-card { padding: 52px; border-top: 2px solid var(--nc); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.about-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nc); margin-bottom: 16px; }
.about-title { font-size: clamp(22px,3vw,34px); font-weight: 700; line-height: 1.25; color: #dbfcff; margin-bottom: 18px; }
.about-title em { font-style: italic; font-weight: 400; }
.about-bio { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.about-note { padding: 18px 20px; background: #111; border: 1px solid var(--stroke); border-left: 3px solid var(--mg); }
.about-note__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mg); margin-bottom: 6px; }
.about-note__t { font-size: 13px; color: var(--muted); font-style: italic; line-height: 1.6; }
.about-email {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px; font-family: var(--mono); font-size: 12px;
  color: var(--nc); border-bottom: 1px solid rgba(0,240,255,0.3);
  padding-bottom: 2px; transition: transform 0.2s, gap 0.2s;
}
.about-email:hover { transform: translateX(4px); gap: 14px; }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cap-card {
  padding: 18px 20px; border: 1px solid var(--stroke);
  background: rgba(5,5,5,0.5); border-radius: var(--r);
  transition: border-color 0.2s, transform 0.2s; cursor: default;
}
.cap-card:hover { border-color: var(--nc); transform: translateY(-2px); }
.cap-card .mi { font-size: 22px; color: var(--nc); margin-bottom: 10px; display: block; }
.cap-card__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #dbfcff; }
.cap-full { grid-column: span 2; }
.cap-full .cap-card__inner { display: flex; align-items: center; gap: 14px; }
.cap-full .mi { margin-bottom: 0; }
.about-rtag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-card { padding: 36px 20px; }
}
@media (max-width: 500px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-full  { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════════════════ */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--nc); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform 0.08s, opacity 0.3s;
  mix-blend-mode: screen;
  box-shadow: 0 0 10px var(--nc), 0 0 20px rgba(0,240,255,0.4);
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 28px; height: 28px;
  border: 1px solid rgba(0,240,255,0.4); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), width 0.2s, height 0.2s, opacity 0.3s;
}