/* ═══════════════════════════════════════════════════════════════
   GoDGuilD StudioS — Main Stylesheet v3.1
   Theme: Dark Crimson Space Opera
   Fonts: Bebas Neue · Rajdhani · Mulish · VT323
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Mulish:ital,wght@0,200;0,300;0,400;0,600;1,300&family=VT323&display=swap');

/* ── ROOT VARIABLES ─────────────────────────────────────────── */
:root {
  --bg:      #05020a;
  --bg2:     #080010;
  --mid:     #110008;
  --red1:    #cc1515;
  --red2:    #8b0000;
  --red3:    #ff2222;
  --red4:    #3a0000;
  --red5:    #1e0000;
  --gold1:   #ffb800;
  --gold2:   #ff8c00;
  --gold3:   #cc6600;
  --white:   #ede8f5;
  --dim:     #6e5a65;
  --dim2:    #9a8490;
  --glow-r:  rgba(204,21,21,0.55);
  --glow-g:  rgba(255,184,0,0.55);
  --border:  rgba(204,21,21,0.18);
  --border2: rgba(204,21,21,0.42);
  --glass:   rgba(20,0,5,0.72);
  --glass2:  rgba(12,0,3,0.88);
  --f-display: 'Bebas Neue', sans-serif;
  --f-ui:      'Rajdhani', sans-serif;
  --f-body:    'Mulish', sans-serif;
  --f-mono:    'VT323', monospace;
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html, body { width:100%; background:var(--bg); color:var(--white); overflow-x:hidden }
img, svg { display:block; max-width:100% }
button { cursor:pointer; border:none; background:transparent; font:inherit }
a { text-decoration:none; color:inherit }
ul { list-style:none; padding:0; margin:0 }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:rgba(204,21,21,0.03) }
::-webkit-scrollbar-thumb { background:var(--red2); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--red1) }

/* ── DESKTOP LAYOUT ─────────────────────────────────────────── */
@media (min-width: 769px) {
  html, body { height:100%; cursor:none; overflow:hidden }
  #cursor, #cursor-trail { display:block }
  #app { position:fixed; inset:0; overflow:hidden }
  #content { overflow:hidden; justify-content:center }
  .section.active { display:flex; flex-direction:column }
  footer { display:none } /* bottom-nav owns this space on desktop */
  #hamburger { display:none !important }
  #mob-drawer { display:none !important }
  #bottom-nav { display:flex }
  #noise-overlay, #vignette-overlay, #scanlines-overlay { display:block }
}

/* ── MOBILE LAYOUT ──────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body { height:auto; cursor:auto; overflow-y:auto; overflow-x:hidden }
  #cursor, #cursor-trail, #noise-overlay, #vignette-overlay, #scanlines-overlay { display:none !important }
  #space-canvas { position:fixed; width:100%; height:100%; z-index:0; pointer-events:none }
  #app { position:relative; min-height:100vh; overflow:visible }
  #content { overflow:visible; justify-content:flex-start; min-height:unset; padding:14px 14px 90px }
  #sw { position:static }
  .section { display:flex !important; flex-direction:column; animation:none !important; margin-bottom:32px; scroll-margin-top:72px }
  .section + .section { border-top:1px solid rgba(204,21,21,0.07); padding-top:24px }
  footer { position:relative; padding:12px 5px; margin-top:8px }
  #bottom-nav { display:none !important }
  #header { padding:10px 14px }
  #header-nav { display:none !important }
  #hlogo-sub { display:none }
  #hamburger { display:flex !important }
  #mob-drawer { display:flex !important }
  #progress-bar { display:none }
  .sec-num { display:none }
  .scroll-sec { max-height:none !important; overflow-y:visible !important; padding-right:0 !important }
  .services-grid, .connect-grid { grid-template-columns:1fr !important }
  .genres-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px }
  .vision-pillars { grid-template-columns:1fr !important }
  .difference-grid { grid-template-columns:1fr !important }
  .pipeline { gap:10px }
  .tools-row { gap:10px }
  .tool-badge { padding:12px 14px; min-width:70px }
  .rg-box { padding:24px 16px }
  .stats-bar { flex-direction:column; gap:8px; align-items:center }
  .stat-divider { display:none }
  .quality-grid { grid-template-columns:1fr 1fr }
  .platform-grid { grid-template-columns:1fr 1fr }
  .process-steps { gap:8px }
  .upcoming-grid { grid-template-columns:1fr }
  .faq-list { gap:8px }
  .scard-list { display:none }
}

/* ── TABLET BREAKPOINT ──────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr) }
  .genres-grid { grid-template-columns:repeat(2,1fr) }
  .vision-pillars { grid-template-columns:repeat(2,1fr) }
  .connect-grid { grid-template-columns:repeat(2,1fr) }
  .difference-grid { grid-template-columns:repeat(2,1fr) }
  .platform-grid { grid-template-columns:repeat(3,1fr) }
  #header { padding:12px 20px }
}

/* ── WIDE DESKTOP ───────────────────────────────────────────── */
@media (min-width: 1440px) {
  #sw { max-width:1300px }
  .genres-grid { grid-template-columns:repeat(4,1fr) }
}

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */
#cursor {
  position:fixed; width:22px; height:22px;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.08s var(--ease-expo);
  mix-blend-mode:screen;
}
#cursor svg { width:22px; height:22px; animation:cursorSpin 5s linear infinite }
@keyframes cursorSpin { to { transform:rotate(360deg) } }
#cursor.hover { transform:translate(-50%,-50%) scale(2) }

#cursor-trail {
  position:fixed; width:7px; height:7px;
  background:var(--gold1); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  opacity:0.45; box-shadow:0 0 10px var(--gold1);
}

/* ── BACKGROUND CANVAS ──────────────────────────────────────── */
#space-canvas {
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}

/* ── OVERLAYS ───────────────────────────────────────────────── */
#noise-overlay {
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
#vignette-overlay {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 18%, rgba(5,2,10,0.97) 100%);
}
#scanlines-overlay {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.028) 3px, rgba(0,0,0,0.028) 6px);
}

/* ── PROGRESS BAR ───────────────────────────────────────────── */
#progress-bar {
  position:fixed; top:0; left:0; width:0%; height:2px;
  background:linear-gradient(90deg, var(--red4), var(--red1), var(--gold1));
  z-index:500; pointer-events:none;
  transition:width 0.5s var(--ease-expo);
  box-shadow:0 0 10px var(--red1), 0 0 20px rgba(204,21,21,0.4);
}

/* ── WARP CANVAS ────────────────────────────────────────────── */
#warp-canvas {
  position:fixed; inset:0; width:100%; height:100%; z-index:300; opacity:0; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════
   INTRO SCREEN
══════════════════════════════════════════════════════════════ */
#intro {
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 55%, rgba(30,0,5,0.55) 0%, rgba(5,2,10,0.82) 60%, rgba(5,2,10,0.96) 100%);
  transition:opacity 2s ease; overflow:hidden;
}
.intro-content {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:40px 24px; position:relative; z-index:1;
}
.intro-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(204,21,21,0.012) 2px, rgba(204,21,21,0.012) 4px);
}

#intro-emblem {
  width:clamp(80px,12vw,120px); height:clamp(80px,12vw,120px);
  margin-bottom:28px; opacity:0;
  animation:emblemIn 1.5s var(--ease-expo) 0.3s forwards;
}
#intro-emblem svg { width:100%; height:100%; animation:emblemRotate 20s linear infinite }
@keyframes emblemIn { from{opacity:0;transform:scale(0.5) rotate(-30deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes emblemRotate { from{transform:rotate(0)} to{transform:rotate(360deg)} }

#intro-rune {
  font-family:var(--f-mono); font-size:clamp(10px,1.1vw,13px);
  color:var(--red1); letter-spacing:0.3em; line-height:2.2;
  opacity:0; text-align:center; margin-bottom:28px;
  animation:fadeUp 0.8s ease 1.2s forwards;
  text-shadow:0 0 20px rgba(204,21,21,0.6);
}
#intro-logo-wrap { margin-bottom:20px }
#intro-logo {
  font-family:var(--f-display); font-size:clamp(44px,10vw,120px);
  line-height:0.9; letter-spacing:0.08em; color:transparent;
  background:linear-gradient(145deg, var(--red4) 0%, var(--red2) 30%, var(--red1) 55%, var(--gold2) 75%, var(--gold1) 100%);
  -webkit-background-clip:text; background-clip:text;
  opacity:0; transform:scale(1.2); filter:blur(20px);
  transition:opacity 2s var(--ease-expo), transform 2s var(--ease-expo), filter 2s var(--ease-expo);
  text-align:center;
}
#intro-logo.on { opacity:1; transform:scale(1); filter:blur(0) }
#intro-sub {
  font-family:var(--f-ui); font-weight:300;
  font-size:clamp(9px,1.4vw,16px); letter-spacing:0.55em;
  color:var(--dim); text-transform:uppercase; margin-top:8px;
  opacity:0; animation:fadeUp 0.8s ease 3.2s forwards;
}
#intro-tagline {
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(13px,1.8vw,22px); color:var(--gold2);
  opacity:0; margin-top:24px; letter-spacing:0.05em;
  animation:fadeUp 0.8s ease 3.8s forwards; max-width:600px;
}
#enter-btn {
  font-family:var(--f-ui); font-weight:600;
  font-size:clamp(11px,1.2vw,14px); letter-spacing:0.48em;
  color:var(--white); text-transform:uppercase;
  padding:15px 52px; margin-top:44px;
  border:1px solid var(--red1);
  background:linear-gradient(135deg, rgba(139,0,0,0.25), rgba(204,21,21,0.15));
  position:relative; overflow:hidden;
  clip-path:polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  opacity:0; animation:fadeUp 0.8s ease 4.8s forwards;
  transition:box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
#enter-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(204,21,21,0.15), transparent);
  transform:translateX(-100%); transition:transform 0.7s ease;
}
#enter-btn:hover::after { transform:translateX(100%) }
#enter-btn:hover {
  background:rgba(204,21,21,0.2);
  box-shadow:0 0 40px var(--red1), 0 0 80px rgba(204,21,21,0.3), inset 0 0 20px rgba(204,21,21,0.1);
  border-color:var(--red3);
}
.btn-label { position:relative; z-index:1 }
.btn-sweep { position:absolute; inset:0; z-index:0 }

/* ══════════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════════ */
#app { z-index:10; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity 2s ease }
#app.on { opacity:1; pointer-events:all }

/* ── HEADER ─────────────────────────────────────────────────── */
#header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px; border-bottom:1px solid rgba(204,21,21,0.12);
  background:rgba(5,2,10,0.94); backdrop-filter:blur(12px);
  gap:12px; flex-shrink:0;
}
#hlogo-wrap { display:flex; flex-direction:column; line-height:1.1; flex-shrink:0 }
#hlogo {
  font-family:var(--f-display); font-size:clamp(16px,2.2vw,26px);
  color:transparent;
  background:linear-gradient(90deg, var(--red2), var(--red1), var(--gold2));
  -webkit-background-clip:text; background-clip:text;
  letter-spacing:0.1em; white-space:nowrap;
  animation:logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  0%   { filter:drop-shadow(0 0 4px rgba(204,21,21,0.4)) }
  100% { filter:drop-shadow(0 0 16px var(--red1)) drop-shadow(0 0 30px rgba(204,21,21,0.3)) }
}
#hlogo-sub {
  font-family:var(--f-ui); font-weight:300;
  font-size:clamp(7px,0.9vw,10px); letter-spacing:0.45em;
  color:var(--dim); text-transform:uppercase; margin-top:2px;
}
#header-nav { display:flex; gap:20px; align-items:center; flex:1; justify-content:center; flex-wrap:nowrap }
.nav-item {
  font-family:var(--f-ui); font-weight:500;
  font-size:clamp(10px,1vw,13px); letter-spacing:0.3em;
  color:var(--dim); cursor:pointer; text-transform:uppercase;
  padding:4px 0; position:relative; white-space:nowrap; flex-shrink:0;
  transition:color 0.25s ease;
}
.nav-item::after {
  content:''; position:absolute; bottom:-1px; left:0; width:0; height:1.5px;
  background:var(--red1); transition:width 0.3s var(--ease-expo);
  box-shadow:0 0 6px var(--red1);
}
.nav-item:hover::after, .nav-item.active::after { width:100% }
.nav-item:hover, .nav-item.active { color:var(--red3) }

/* ── HAMBURGER ──────────────────────────────────────────────── */
#hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:38px; height:38px; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
#hamburger span { display:block; width:22px; height:1.5px; background:var(--red1); border-radius:1px; transition:all 0.3s ease; box-shadow:0 0 5px var(--red1) }
#hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
#hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
#hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ── MOBILE DRAWER ──────────────────────────────────────────── */
#mob-drawer {
  position:fixed; top:0; left:0; width:100%; z-index:999;
  background:rgba(5,2,10,0.98); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(204,21,21,0.15);
  padding:62px 24px 28px;
  transform:translateY(-110%); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform 0.42s var(--ease-expo), opacity 0.3s ease, visibility 0.3s;
  display:none; flex-direction:column; gap:0;
}
#mob-drawer.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto }
.m-nav {
  font-family:var(--f-ui); font-weight:400; font-size:14px; letter-spacing:0.28em;
  color:var(--dim); padding:15px 0; border-bottom:1px solid rgba(204,21,21,0.06);
  text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color 0.2s, padding-left 0.25s;
  display:flex; align-items:center; gap:14px;
}
.m-num { font-family:var(--f-mono); font-size:12px; color:var(--red2); opacity:0.7 }
.m-nav:active, .m-nav.active { color:var(--red3); padding-left:6px }
.m-nav.active .m-num { color:var(--red1); opacity:1 }

/* ── CONTENT ────────────────────────────────────────────────── */
#content { flex:1; display:flex; flex-direction:column; align-items:center; padding:16px 24px; position:relative; min-height:0; overflow:hidden }
#sw { width:100%; max-width:1180px }

/* ── SECTIONS ───────────────────────────────────────────────── */
.section { display:none; animation:secFadeIn 0.55s var(--ease-expo) forwards }
.section.active { display:flex; flex-direction:column }
@keyframes secFadeIn {
  from { opacity:0; transform:translateY(22px) }
  to   { opacity:1; transform:none }
}

.sec-head { position:relative; text-align:center; margin-bottom:22px }
.sec-num {
  position:absolute; font-family:var(--f-display);
  font-size:clamp(80px,14vw,160px); color:rgba(204,21,21,0.03);
  top:-30px; left:50%; transform:translateX(-50%);
  pointer-events:none; user-select:none; line-height:1; z-index:0;
  letter-spacing:0.05em; white-space:nowrap;
}
.stitle {
  font-family:var(--f-display); font-size:clamp(26px,3.5vw,48px);
  color:var(--red1); letter-spacing:0.2em; text-align:center;
  position:relative; z-index:1; text-shadow:0 0 30px rgba(204,21,21,0.4);
}
.stitle::after {
  content:''; display:block; width:120px; height:1px;
  background:linear-gradient(90deg, transparent, var(--red1), var(--gold1), var(--red1), transparent);
  margin:10px auto 0; box-shadow:0 0 8px rgba(204,21,21,0.4);
}

/* ── HERO TEXT ──────────────────────────────────────────────── */
.hero-text {
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(14px,1.7vw,20px); color:var(--white);
  line-height:1.9; opacity:0.88; text-align:center;
  max-width:860px; margin:0 auto 24px;
}
.hero-text.sub { font-size:clamp(12px,1.3vw,16px); opacity:0.65; font-style:normal; margin-bottom:16px }
.hero-text em { color:var(--gold1); font-style:italic }

/* ── SUBSECTION LABELS ──────────────────────────────────────── */
.subsection-title {
  font-family:var(--f-display); font-size:clamp(18px,2.2vw,28px);
  color:var(--gold1); letter-spacing:0.18em; text-align:center;
  margin-bottom:8px; margin-top:32px;
}
.subsection-desc {
  font-family:var(--f-body); font-weight:300; font-size:clamp(12px,1.2vw,14px);
  color:var(--dim2); text-align:center; max-width:700px; margin:0 auto 20px;
  line-height:1.8;
}

/* ── PILLS ──────────────────────────────────────────────────── */
.pill-row { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:18px 0 }
.pill {
  font-family:var(--f-ui); font-weight:600;
  font-size:clamp(9px,0.9vw,11px); letter-spacing:0.28em;
  padding:6px 16px; border:1px solid rgba(204,21,21,0.22);
  color:var(--white); background:rgba(60,0,0,0.18);
  text-transform:uppercase; cursor:default;
  clip-path:polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition:border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.pill:hover { border-color:var(--red1); color:var(--red3); box-shadow:0 0 16px rgba(204,21,21,0.25) }

/* ── SCROLL SECTION ─────────────────────────────────────────── */
.scroll-sec { max-height:calc(100vh - 245px); overflow-y:auto; padding-right:8px }
.scroll-sec::-webkit-scrollbar { width:3px }
.scroll-sec::-webkit-scrollbar-track { background:rgba(204,21,21,0.03) }
.scroll-sec::-webkit-scrollbar-thumb { background:var(--red2); border-radius:2px }

/* ══════════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════════ */
.stats-bar {
  display:flex; align-items:center; justify-content:center;
  gap:24px; margin:24px auto; padding:18px 32px;
  border:1px solid rgba(204,21,21,0.18);
  background:linear-gradient(135deg, rgba(30,0,5,0.6), rgba(20,0,3,0.4));
  max-width:700px; flex-wrap:wrap;
}
.stat-item { text-align:center }
.stat-value {
  font-family:var(--f-display); font-size:clamp(28px,4vw,44px);
  color:var(--red1); letter-spacing:0.1em;
  text-shadow:0 0 20px rgba(204,21,21,0.6);
  line-height:1;
}
.stat-label {
  font-family:var(--f-ui); font-weight:400; font-size:clamp(9px,0.9vw,11px);
  letter-spacing:0.35em; color:var(--dim); text-transform:uppercase; margin-top:4px;
}
.stat-divider {
  font-family:var(--f-mono); color:rgba(204,21,21,0.25); font-size:10px;
}

/* ══════════════════════════════════════════════════════════════
   SERVICE & PILLAR CARDS  —  3D TILT VERSION
   (clip-path on INNER, perspective on OUTER via JS)
══════════════════════════════════════════════════════════════ */
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:16px;
}
.connect-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px;
}
.vision-pillars {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin:20px 0;
}

/* ── THE CARD ITSELF (no transform here — JS sets it) ────────── */
.scard {
  background:var(--glass); border:1px solid var(--border);
  padding:24px; position:relative; overflow:hidden;
  cursor:default; will-change:transform;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  /* Only non-transform transitions here */
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
  --glow-x:50%; --glow-y:50%;
}
.scard::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(204,21,21,0.14), transparent 60%);
  opacity:0; transition:opacity 0.3s ease;
}
.scard::after {
  content:''; position:absolute; top:0; right:0;
  width:0; height:0; border-style:solid;
  border-width:0 14px 14px 0; border-color:transparent var(--red2) transparent transparent;
  opacity:0.45;
}
.scard:hover { border-color:var(--border2); box-shadow:0 14px 40px rgba(204,21,21,0.18), 0 0 1px var(--red1) }
.scard:hover::before { opacity:1 }

/* Pillar card reuses scard styles but is a div.pillar-card in older version
   Now all are .scard[data-tilt] */
.pillar-icon { font-size:30px; margin-bottom:12px; display:block; position:relative; z-index:1 }
.pillar-title {
  font-family:var(--f-display); font-size:clamp(16px,1.8vw,22px);
  color:var(--gold1); letter-spacing:0.12em; margin-bottom:10px; position:relative; z-index:1;
}
.pillar-body {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1.1vw,13px); color:var(--white); line-height:1.8;
  opacity:0.75; position:relative; z-index:1;
}

/* ── SCARD CONTENT ───────────────────────────────────────────── */
.scard-icon { font-size:28px; margin-bottom:12px; display:block; position:relative; z-index:1 }
.scard-title {
  font-family:var(--f-display); font-size:clamp(16px,1.7vw,20px);
  color:var(--gold1); letter-spacing:0.1em; margin-bottom:10px; position:relative; z-index:1;
}
.scard-body {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1.05vw,13px); color:var(--white); line-height:1.8;
  opacity:0.76; margin-bottom:12px; position:relative; z-index:1;
}
.scard-list {
  position:relative; z-index:1; margin:8px 0 12px 0; padding-left:0;
}
.scard-list li {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(10px,0.95vw,12px); color:var(--dim2); line-height:1.7;
  padding:2px 0 2px 14px; position:relative;
}
.scard-list li::before {
  content:'›'; position:absolute; left:0; color:var(--red1); font-size:14px; line-height:1.4;
}
.scard-tag {
  font-family:var(--f-mono); font-size:11px;
  color:var(--red1); letter-spacing:0.18em; display:block;
  opacity:0.65; position:relative; z-index:1; line-height:1.7; margin-top:10px;
}

/* ══════════════════════════════════════════════════════════════
   THE GODGUILD DIFFERENCE
══════════════════════════════════════════════════════════════ */
.difference-section { margin:28px 0 0 }
.difference-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px;
}
.diff-card {
  background:rgba(15,0,4,0.6); border:1px solid rgba(204,21,21,0.13);
  padding:20px; will-change:transform;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
  --glow-x:50%; --glow-y:50%;
}
.diff-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(204,21,21,0.1), transparent 65%);
  opacity:0; transition:opacity 0.3s ease;
}
.diff-card { position:relative; overflow:hidden }
.diff-card:hover { border-color:rgba(204,21,21,0.3); box-shadow:0 8px 24px rgba(204,21,21,0.1) }
.diff-card:hover::before { opacity:1 }
.diff-icon { font-size:24px; margin-bottom:10px; display:block; position:relative; z-index:1 }
.diff-title {
  font-family:var(--f-ui); font-weight:600; font-size:clamp(13px,1.3vw,15px);
  color:var(--gold1); letter-spacing:0.08em; margin-bottom:8px;
  position:relative; z-index:1;
}
.diff-body {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1vw,12.5px); color:var(--white); line-height:1.75;
  opacity:0.7; position:relative; z-index:1;
}

/* ══════════════════════════════════════════════════════════════
   TOOLS SECTION
══════════════════════════════════════════════════════════════ */
.tools-section { margin:28px 0 8px }
.tools-label {
  font-family:var(--f-mono); font-size:12px;
  letter-spacing:0.4em; color:var(--dim); text-align:center; margin-bottom:16px; text-transform:uppercase;
}
.tools-label::before, .tools-label::after { content:'── '; color:rgba(204,21,21,0.3) }
.tools-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.tool-badge {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 20px; border:1px solid rgba(255,184,0,0.15);
  background:rgba(20,10,0,0.7); cursor:default;
  will-change:transform; min-width:88px; position:relative; overflow:hidden;
  clip-path:polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
}
.tool-badge::before {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold1), transparent);
  transform:scaleX(0); transition:transform 0.4s ease;
}
.tool-badge:hover { border-color:rgba(255,184,0,0.45); box-shadow:0 0 22px rgba(255,184,0,0.2) }
.tool-badge:hover::before { transform:scaleX(1) }
.tool-icon { font-size:20px; filter:drop-shadow(0 0 6px var(--gold2)) }
.tool-name { font-family:var(--f-mono); font-size:13px; letter-spacing:0.2em; color:var(--gold2) }
.tool-desc { font-family:var(--f-ui); font-size:10px; letter-spacing:0.1em; color:var(--dim); text-transform:uppercase }

/* ══════════════════════════════════════════════════════════════
   PRODUCTION PIPELINE
══════════════════════════════════════════════════════════════ */
.pipeline-section { margin:32px 0 0 }
.pipeline { display:flex; flex-direction:column; gap:12px; margin-top:20px }
.pipeline-step {
  display:flex; gap:20px; align-items:flex-start;
  border-left:2px solid rgba(204,21,21,0.2); padding-left:20px; position:relative;
}
.pipeline-step::before {
  content:''; position:absolute; left:-5px; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red1); box-shadow:0 0 10px var(--red1);
}
.step-num {
  font-family:var(--f-mono); font-size:22px; color:rgba(204,21,21,0.4);
  letter-spacing:0.1em; flex-shrink:0; line-height:1.2;
}
.step-content { flex:1 }
.step-title {
  font-family:var(--f-ui); font-weight:600; font-size:clamp(13px,1.3vw,15px);
  color:var(--gold1); letter-spacing:0.1em; margin-bottom:5px; text-transform:uppercase;
}
.step-desc {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1vw,13px); color:var(--white); line-height:1.75; opacity:0.72;
}

/* ══════════════════════════════════════════════════════════════
   QUALITY SECTION
══════════════════════════════════════════════════════════════ */
.quality-section { margin:28px 0 0 }
.quality-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px;
}
@media (max-width:1024px) { .quality-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:500px)  { .quality-grid { grid-template-columns:1fr 1fr } }
.quality-item {
  border:1px solid rgba(204,21,21,0.15); background:rgba(15,0,4,0.6);
  padding:16px 14px; text-align:center;
}
.q-val {
  font-family:var(--f-display); font-size:clamp(24px,3vw,36px);
  color:var(--red1); letter-spacing:0.1em; line-height:1;
  text-shadow:0 0 20px rgba(204,21,21,0.5);
}
.q-label {
  font-family:var(--f-body); font-weight:300; font-size:clamp(9px,0.85vw,11px);
  color:var(--dim2); line-height:1.5; margin-top:6px;
}

/* ══════════════════════════════════════════════════════════════
   GENRES GRID
══════════════════════════════════════════════════════════════ */
.genres-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px;
}
.genre-card {
  border:1px solid var(--border); background:var(--glass);
  padding:20px 16px; text-align:center; cursor:default;
  will-change:transform; position:relative; overflow:hidden;
  /* Only non-transform transitions */
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
  --glow-x:50%; --glow-y:50%;
}
.genre-card::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(204,21,21,0.1), transparent 65%);
  opacity:0; transition:opacity 0.3s ease;
}
.genre-card::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--red1), var(--gold1), transparent);
  transform:scaleX(0); transform-origin:center; transition:transform 0.4s ease;
}
.genre-card:hover { border-color:var(--border2); box-shadow:0 0 30px rgba(204,21,21,0.15) }
.genre-card:hover::before { opacity:1 }
.genre-card:hover::after { transform:scaleX(1) }
.genre-icon {
  font-size:clamp(28px,4vw,42px); display:block; margin-bottom:10px;
  filter:drop-shadow(0 0 10px rgba(204,21,21,0.5));
  position:relative; z-index:1;
  transition:transform 0.3s var(--ease-spring);
}
.genre-card:hover .genre-icon { transform:scale(1.15) translateY(-3px) }
.genre-name {
  font-family:var(--f-display); font-size:clamp(14px,1.5vw,18px);
  color:var(--gold1); letter-spacing:0.12em; margin-bottom:8px; position:relative; z-index:1;
}
.genre-desc {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(10px,0.9vw,12px); color:var(--dim2); line-height:1.65;
  position:relative; z-index:1; text-align:left;
}
.genre-tags {
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em;
  color:var(--red1); opacity:0.6; margin-top:10px;
  position:relative; z-index:1; line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════
   PLATFORM GRID
══════════════════════════════════════════════════════════════ */
.platform-section { margin:28px 0 0 }
.platform-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:18px;
}
.platform-badge {
  border:1px solid rgba(204,21,21,0.15); background:rgba(15,0,4,0.55);
  padding:16px 14px; text-align:center;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.platform-badge:hover { border-color:var(--border2); box-shadow:0 0 18px rgba(204,21,21,0.12) }
.plat-icon { font-size:24px; display:block; margin-bottom:8px }
.plat-name {
  font-family:var(--f-ui); font-weight:600; font-size:clamp(12px,1.2vw,14px);
  color:var(--white); letter-spacing:0.08em; margin-bottom:6px; display:block;
}
.plat-desc {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(9px,0.85vw,11px); color:var(--dim2); line-height:1.5; display:block;
}

/* ══════════════════════════════════════════════════════════════
   CTA BUTTONS
══════════════════════════════════════════════════════════════ */
.cta-wrap { text-align:center; margin-top:28px }
.cta-btn {
  display:inline-block; font-family:var(--f-ui); font-weight:700;
  font-size:clamp(11px,1.1vw,13px); letter-spacing:0.4em;
  color:var(--white); padding:14px 44px;
  border:1px solid var(--red1);
  background:linear-gradient(135deg, rgba(139,0,0,0.3), rgba(204,21,21,0.2));
  position:relative; overflow:hidden; cursor:pointer; text-transform:uppercase;
  clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:box-shadow 0.35s ease, transform 0.35s ease;
  animation:ctaPulse 3s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.cta-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform:translateX(-100%); transition:transform 0.55s ease;
}
.cta-btn:hover { box-shadow:0 0 40px var(--red1), 0 0 80px rgba(204,21,21,0.25); transform:translateY(-3px) }
.cta-btn:hover::before { transform:translateX(100%) }
@keyframes ctaPulse {
  0%,100% { box-shadow:0 0 10px rgba(204,21,21,0.25) }
  50%      { box-shadow:0 0 24px var(--red1), 0 0 48px rgba(204,21,21,0.25) }
}
.cta-steam {
  border-color:var(--gold1);
  background:linear-gradient(135deg, rgba(60,40,0,0.4), rgba(204,136,0,0.2));
  animation:ctaSteamPulse 3s ease-in-out infinite;
}
.cta-steam:hover { box-shadow:0 0 40px var(--gold1), 0 0 80px rgba(255,184,0,0.25) }
@keyframes ctaSteamPulse {
  0%,100% { box-shadow:0 0 10px rgba(255,184,0,0.25) }
  50%      { box-shadow:0 0 24px var(--gold1), 0 0 48px rgba(255,184,0,0.25) }
}

/* ══════════════════════════════════════════════════════════════
   PLAY PORTAL
══════════════════════════════════════════════════════════════ */
.rg-box {
  max-width:600px; margin:0 auto;
  border:1px solid var(--border); background:var(--glass);
  padding:36px; backdrop-filter:blur(10px); position:relative;
}
.rg-box-label {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.4em;
  color:var(--red1); background:var(--bg); padding:0 14px; white-space:nowrap;
}
.rg-display {
  font-family:var(--f-mono); font-size:clamp(18px,3vw,32px);
  color:var(--gold1); letter-spacing:0.2em; min-height:52px;
  margin:18px 0 8px; text-shadow:0 0 20px var(--gold1);
  animation:rgFlicker 5s ease-in-out infinite;
}
@keyframes rgFlicker {
  0%,100%{opacity:1} 91%{opacity:1} 92%{opacity:0.25} 93%{opacity:1} 96%{opacity:0.7} 97%{opacity:1}
}
.rg-desc {
  font-family:var(--f-body); font-weight:300; font-size:clamp(11px,1vw,13px);
  color:var(--dim2); line-height:1.65; min-height:40px; margin-bottom:14px;
  transition:opacity 0.3s ease;
}
#rg-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:18px }
.rg-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.rg-btn {
  font-family:var(--f-ui); font-weight:700; font-size:clamp(10px,1vw,13px);
  letter-spacing:0.35em; color:var(--white); border:1px solid var(--red1);
  padding:11px 32px; background:rgba(139,0,0,0.2);
  transition:box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
  text-transform:uppercase; margin:4px; -webkit-tap-highlight-color:transparent;
}
.rg-btn:hover { box-shadow:0 0 28px var(--red1); background:rgba(204,21,21,0.22); transform:translateY(-2px) }
.rg-btn.launch { border-color:var(--gold1); background:rgba(100,60,0,0.2) }
.rg-btn.launch:hover { box-shadow:0 0 28px var(--gold1); background:rgba(255,160,0,0.18) }
.rg-btn.selected { border-color:var(--red3); background:rgba(204,21,21,0.3); color:var(--red3) }

/* ── UPCOMING ────────────────────────────────────────────────── */
.upcoming-section { margin:32px 0 24px }
.upcoming-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:18px;
}
.upcoming-card {
  border:1px solid rgba(204,21,21,0.15); background:rgba(15,0,4,0.55);
  padding:20px; position:relative; overflow:hidden;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.upcoming-card::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--red1), transparent);
  transition:left 0.7s ease;
}
.upcoming-card:hover::before { left:100% }
.upcoming-card:hover { border-color:rgba(204,21,21,0.3); box-shadow:0 0 20px rgba(204,21,21,0.1) }
.up-label {
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.38em;
  color:rgba(204,21,21,0.5); margin-bottom:6px; text-transform:uppercase;
}
.up-title {
  font-family:var(--f-display); font-size:clamp(16px,1.8vw,20px);
  color:var(--gold1); letter-spacing:0.1em; margin-bottom:10px;
}
.up-desc {
  font-family:var(--f-body); font-weight:300; font-size:clamp(11px,1vw,12px);
  color:var(--dim2); line-height:1.65; margin-bottom:12px;
}
.up-platform {
  font-family:var(--f-mono); font-size:11px; color:var(--dim); letter-spacing:0.2em; margin-bottom:8px;
}
.up-status {
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em;
  color:var(--red1); opacity:0.7;
}
.play-footer { margin-top:24px; text-align:center }

/* ══════════════════════════════════════════════════════════════
   PROCESS STEPS (Connect)
══════════════════════════════════════════════════════════════ */
.process-section { margin:32px 0 0 }
.process-steps { display:flex; flex-direction:column; gap:12px; margin-top:20px }
.process-step {
  display:flex; gap:18px; align-items:flex-start;
  border-left:2px solid rgba(204,21,21,0.18); padding-left:20px; position:relative;
}
.process-step::before {
  content:''; position:absolute; left:-5px; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold1); box-shadow:0 0 10px var(--gold1);
}
.ps-num {
  font-family:var(--f-mono); font-size:22px; color:rgba(255,184,0,0.35);
  letter-spacing:0.1em; flex-shrink:0; line-height:1.2;
}
.ps-content { flex:1 }
.ps-title {
  font-family:var(--f-ui); font-weight:600; font-size:clamp(13px,1.3vw,15px);
  color:var(--gold1); letter-spacing:0.1em; margin-bottom:5px; text-transform:uppercase;
}
.ps-desc {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1vw,13px); color:var(--white); line-height:1.75; opacity:0.72;
}

/* ══════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════ */
.faq-section { margin:32px 0 0 }
.faq-list { display:flex; flex-direction:column; gap:10px; margin-top:18px }
.faq-item {
  border:1px solid rgba(204,21,21,0.13); background:rgba(15,0,4,0.5);
  padding:18px 20px; position:relative;
  transition:border-color 0.3s ease;
}
.faq-item:hover { border-color:rgba(204,21,21,0.28) }
.faq-q {
  font-family:var(--f-ui); font-weight:600; font-size:clamp(12px,1.2vw,14px);
  color:var(--white); letter-spacing:0.06em; margin-bottom:8px;
  padding-left:16px; position:relative;
}
.faq-q::before { content:'Q'; position:absolute; left:0; color:var(--red1); font-family:var(--f-mono); font-size:13px }
.faq-a {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(11px,1vw,13px); color:var(--dim2); line-height:1.8;
  padding-left:16px; position:relative;
}
.faq-a::before { content:'A'; position:absolute; left:0; color:var(--gold1); font-family:var(--f-mono); font-size:13px; opacity:0.7 }

/* ── CONTACT FOOTER ─────────────────────────────────────────── */
.contact-footer {
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.35em;
  color:var(--dim); text-align:center; margin-top:22px; opacity:0.55; line-height:2;
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════════════════════════ */
#bottom-nav {
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 34px; border-top:1px solid rgba(204,21,21,0.1);
  background:rgba(5,2,10,0.94); backdrop-filter:blur(10px);
  flex-shrink:0; gap:8px;
}
.bnav-btn {
  font-family:var(--f-ui); font-weight:500;
  font-size:clamp(10px,1vw,12px); letter-spacing:0.3em;
  color:var(--dim); padding:8px 20px; border:1px solid transparent;
  text-transform:uppercase; transition:color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.bnav-btn:hover { color:var(--red3); border-color:rgba(204,21,21,0.28); box-shadow:0 0 12px rgba(204,21,21,0.14) }
.bnav-btn:disabled { opacity:0.2; cursor:default }
#nav-mid { display:flex; align-items:center; gap:10px }
#sec-dots { display:flex; gap:8px; align-items:center }
.sdot {
  width:5px; height:5px; border-radius:50%;
  border:1px solid var(--dim); transition:all 0.4s ease; cursor:pointer;
}
.sdot:hover { border-color:var(--red1) }
.sdot.active { background:var(--red1); border-color:var(--red1); box-shadow:0 0 8px var(--red1); width:14px; border-radius:3px }
#sec-counter {
  font-family:var(--f-mono); font-size:clamp(10px,0.9vw,12px);
  color:var(--dim); letter-spacing:0.25em; min-width:46px; text-align:center;
}
#parlee-link {
  font-family:var(--f-mono); font-size:clamp(9px,0.9vw,11px);
  letter-spacing:0.3em; color:rgba(255,184,0,0.35);
  border:1px solid rgba(255,184,0,0.12); padding:5px 14px;
  white-space:nowrap; transition:color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink:0;
}
#parlee-link:hover { color:var(--gold1); border-color:rgba(255,184,0,0.4); box-shadow:0 0 14px rgba(255,184,0,0.2) }

/* ── FOOTER ─────────────────────────────────────────────────── */
#site-footer {
  bottom:0; left:0; width:100%; text-align:center;
  font-family:var(--f-mono); font-size:clamp(8px,0.9vw,11px);
  color:rgba(204,21,21,0.16); letter-spacing:0.28em;
  z-index:400; padding:6px; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════
   CARD STAGGER ENTRY ANIMATION
══════════════════════════════════════════════════════════════ */
/* IMPORTANT: cardIn intentionally omits transform — CSS animations override
   inline styles in the cascade, which would lock transform and break 3D tilt. */
@keyframes cardIn {
  from { opacity:0 }
  to   { opacity:1 }
}
.card-stagger { animation:cardIn 0.45s var(--ease-expo) both }

/* ── UTILITY ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:0.95; transform:none }
}

/* ══════════════════════════════════════════════════════════════
   CARD MODAL
══════════════════════════════════════════════════════════════ */

/* Cards are clickable — show pointer */
[data-tilt] { cursor:pointer }

/* ── Overlay backdrop ───────────────────────────────────────── */
#modal-overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(5,2,10,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
#modal-overlay.active { opacity:1; pointer-events:all }

/* ── Modal box ──────────────────────────────────────────────── */
#modal-box {
  position:relative;
  width:100%; max-width:700px;
  max-height:88vh; overflow-y:auto;
  background:linear-gradient(145deg, rgba(18,0,6,0.97), rgba(10,0,3,0.99));
  border:1px solid var(--border2);
  box-shadow:0 0 60px rgba(204,21,21,0.22), 0 0 120px rgba(204,21,21,0.08), inset 0 1px 0 rgba(255,184,0,0.06);
  padding:48px 48px 40px;

  /* Entry animation */
  opacity:0;
  transform:translateY(24px) scale(0.88);
  transition:transform 0.48s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
#modal-box::-webkit-scrollbar { width:4px }
#modal-box::-webkit-scrollbar-track { background:rgba(204,21,21,0.03) }
#modal-box::-webkit-scrollbar-thumb { background:var(--red2); border-radius:2px }

#modal-overlay.active #modal-box { opacity:1; transform:translateY(0) scale(1) }
#modal-overlay.closing #modal-box {
  opacity:0; transform:translateY(10px) scale(0.95);
  transition:transform 0.22s ease, opacity 0.22s ease;
}

/* Top-left corner accent line */
#modal-box::before {
  content:''; position:absolute; top:0; left:0;
  width:80px; height:2px;
  background:linear-gradient(90deg, var(--red1), transparent);
  box-shadow:0 0 12px var(--red1);
}
/* Bottom-right corner accent */
#modal-box::after {
  content:''; position:absolute; bottom:0; right:0;
  width:80px; height:2px;
  background:linear-gradient(270deg, var(--gold1), transparent);
  box-shadow:0 0 12px var(--gold1);
}

/* Scanline texture inside box */
#modal-box .modal-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 6px);
}

/* ── Close button ───────────────────────────────────────────── */
#modal-close {
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  color:var(--dim); border:1px solid rgba(204,21,21,0.18);
  background:rgba(204,21,21,0.05);
  transition:color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#modal-close svg { width:16px; height:16px; flex-shrink:0 }
#modal-close:hover {
  color:var(--red3); border-color:var(--red1);
  background:rgba(204,21,21,0.12);
  box-shadow:0 0 14px rgba(204,21,21,0.35);
}

/* ── Modal content — all classes larger than in-card ─────────── */
#modal-content {
  position:relative; z-index:1;
}

/* Icon */
#modal-content .scard-icon,
#modal-content .pillar-icon,
#modal-content .genre-icon,
#modal-content .diff-icon {
  font-size:56px; margin-bottom:18px; display:block;
  filter:drop-shadow(0 0 20px rgba(204,21,21,0.5));
  animation:iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse {
  0%,100%{ filter:drop-shadow(0 0 16px rgba(204,21,21,0.4)) }
  50%    { filter:drop-shadow(0 0 30px rgba(204,21,21,0.7)) }
}

/* Titles */
#modal-content .scard-title,
#modal-content .pillar-title {
  font-family:var(--f-display);
  font-size:clamp(26px,3.5vw,40px);
  color:var(--gold1); letter-spacing:0.14em; margin-bottom:14px;
  text-shadow:0 0 30px rgba(255,184,0,0.3);
  line-height:1.05;
}
#modal-content .genre-name {
  font-family:var(--f-display);
  font-size:clamp(26px,3.5vw,40px);
  color:var(--gold1); letter-spacing:0.14em; margin-bottom:14px;
  text-shadow:0 0 30px rgba(255,184,0,0.3);
  line-height:1.05;
}
#modal-content .diff-title {
  font-family:var(--f-ui); font-weight:700;
  font-size:clamp(18px,2.2vw,26px);
  color:var(--gold1); letter-spacing:0.1em; margin-bottom:14px;
}

/* Separator after title */
#modal-content .scard-title::after,
#modal-content .pillar-title::after,
#modal-content .genre-name::after,
#modal-content .diff-title::after {
  content:''; display:block; width:100px; height:1px; margin-top:12px;
  background:linear-gradient(90deg, var(--red1), var(--gold1), transparent);
  box-shadow:0 0 8px rgba(204,21,21,0.4);
}

/* Body text */
#modal-content .scard-body,
#modal-content .pillar-body,
#modal-content .diff-body {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(14px,1.5vw,16px); color:var(--white);
  line-height:1.95; opacity:0.88; margin-bottom:20px;
}
#modal-content .genre-desc {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(14px,1.5vw,16px); color:var(--white);
  line-height:1.95; opacity:0.88; text-align:left; margin-bottom:16px;
}

/* Bullet lists — always visible in modal */
#modal-content .scard-list {
  display:block !important;
  margin:0 0 20px; padding:0;
  border-left:2px solid rgba(204,21,21,0.25);
  padding-left:16px;
}
#modal-content .scard-list li {
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(13px,1.3vw,15px);
  color:var(--dim2); line-height:1.8;
  padding:4px 0 4px 12px; position:relative;
}
#modal-content .scard-list li::before {
  content:'›'; position:absolute; left:0;
  color:var(--red1); font-size:16px; line-height:1.5;
}

/* Tags */
#modal-content .scard-tag,
#modal-content .genre-tags {
  font-family:var(--f-mono); font-size:13px;
  color:var(--red1); letter-spacing:0.2em;
  opacity:0.7; line-height:1.8; display:block;
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(204,21,21,0.12);
}

/* ── Mobile modal ───────────────────────────────────────────── */
@media (max-width:768px) {
  #modal-box { padding:36px 22px 30px; max-height:92vh }
  #modal-content .scard-icon,
  #modal-content .pillar-icon,
  #modal-content .genre-icon,
  #modal-content .diff-icon { font-size:42px; margin-bottom:14px }
}