.home-content { height: calc(100vh - 72px); display: flex; flex-direction: column; }
.home-ticker { flex-shrink: 0; }
.home-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 16px; position: relative; overflow: hidden; }
.home-stage-bg { position: absolute; inset: 0; background: url('../img/bg.jpg') center/cover no-repeat; filter: blur(12px) brightness(0.15) saturate(0.4); transform: scale(1.08); }

.cards-row { display: flex; gap: clamp(6px, 1vw, 14px); align-items: flex-end; position: relative; z-index: 2; perspective: 1200px; }
.role-card { position: relative; width: clamp(120px, 13vw, 196px); height: clamp(300px, 40vh, 480px); border-radius: 28px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); transform: translateY(60px); opacity: 0; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; flex-shrink: 0; }
.role-card.revealed { transform: translateY(0); opacity: 1; }
.role-card:hover { transform: translateY(-18px) scale(1.02); border-color: rgba(0,168,232,0.55); box-shadow: 0 0 30px rgba(0,168,232,0.25), 0 0 60px rgba(0,168,232,0.1), inset 0 0 40px rgba(0,52,89,0.25); }
.role-card.main-card { height: clamp(340px, 46vh, 540px); width: clamp(136px, 14.5vw, 218px); border-color: rgba(0,168,232,0.3); box-shadow: 0 0 30px rgba(0,168,232,0.15), inset 0 0 30px rgba(0,30,50,0.3); }
.role-card.main-card:hover { transform: translateY(-20px) scale(1.03); box-shadow: 0 0 50px rgba(0,168,232,0.4), inset 0 0 40px rgba(0,52,89,0.3); }

.card-glass { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(0,52,89,0.45) 0%, rgba(0,20,40,0.7) 50%, rgba(0,0,0,0.85) 100%); backdrop-filter: blur(8px); z-index: 1; }
.main-card .card-glass { background: linear-gradient(170deg, rgba(0,80,130,0.4) 0%, rgba(0,40,70,0.65) 50%, rgba(0,0,0,0.85) 100%); }
.card-scanlines { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,168,232,0.025) 0px, rgba(0,168,232,0.025) 1px, transparent 1px, transparent 5px); pointer-events: none; }
.card-char { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); height: 82%; z-index: 3; transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), filter 0.3s; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); }
.role-card:hover .card-char { transform: translateX(-50%) scale(1.08) translateY(-6px); filter: drop-shadow(0 0 20px rgba(0,168,232,0.3)) drop-shadow(0 10px 30px rgba(0,0,0,0.5)); }
.card-glow-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: 0; z-index: 5; transition: opacity 0.3s; }
.role-card:hover .card-glow-line, .main-card .card-glow-line { opacity: 1; }
.card-corner { position: absolute; z-index: 6; font-family: 'Orbitron', sans-serif; font-size: 0.45rem; color: rgba(0,168,232,0.3); font-weight: 700; letter-spacing: 1px; }
.card-corner.tl { top: 12px; left: 14px; }
.card-corner.tr { top: 12px; right: 14px; text-align: right; }
.card-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px 18px; z-index: 4; background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); text-align: center; }
.card-label-pre { font-size: 0.52rem; letter-spacing: 3px; color: rgba(255,255,255,0.35); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.card-label { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900; letter-spacing: 2px; color: var(--white); transition: color 0.3s, text-shadow 0.3s; }
.role-card:hover .card-label { color: var(--blue); text-shadow: var(--glow); }
.main-card .card-label { font-size: 1.15rem; color: var(--blue); text-shadow: var(--glow); }

.main-logo-zone { position: absolute; top: 42%; left: 0; right: 0; transform: translateY(-50%); z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; }
.main-logo-ring { position: relative; width: min(90px, 60%); aspect-ratio: 1; margin: 0 auto 10px; }
.main-logo-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ringRot 6s linear infinite; transform-origin: center; }
.main-logo-img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 0 12px var(--blue)); animation: logoPulse 3s ease-in-out infinite; }
.main-card-label { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; letter-spacing: 5px; color: rgba(0,168,232,0.5); font-weight: 700; white-space: nowrap; }

.role-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,107,0,0.06) 0%, transparent 50%); opacity: 0; z-index: 4; transition: opacity 0.3s; pointer-events: none; }
.role-card:not(.main-card):hover::after { opacity: 1; }

@keyframes ringRot { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .cards-row { gap: 8px; }
  .role-card { border-radius: 18px; }
  .card-label { font-size: 0.75rem; }
  .main-card .card-label { font-size: 0.85rem; }
  .main-logo-ring { width: min(70px, 55%); }
}

@media (max-width: 600px) {
  .home-stage { padding: 8px 4px; align-items: center; }
  .cards-row { gap: 4px; align-items: center; }
  .role-card { width: clamp(80px, 19vw, 120px); height: clamp(200px, 48vw, 300px); border-radius: 12px; }
  .role-card.main-card { width: clamp(95px, 22vw, 140px); height: clamp(230px, 54vw, 340px); }
  .card-corner { display: none; }
  .card-label { font-size: 0.65rem; letter-spacing: 1px; }
  .card-label-pre { font-size: 0.44rem; letter-spacing: 1px; }
  .main-card .card-label { font-size: 0.75rem; }
  .main-logo-ring { width: min(65px, 52%); margin-bottom: 6px; }
  .main-card-label { font-size: 0.36rem; letter-spacing: 2px; }
}

.card-glass { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(0,52,89,0.45) 0%, rgba(0,20,40,0.7) 50%, rgba(0,0,0,0.85) 100%); backdrop-filter: blur(8px); z-index: 1; }
.main-card .card-glass { background: linear-gradient(170deg, rgba(0,80,130,0.4) 0%, rgba(0,40,70,0.65) 50%, rgba(0,0,0,0.85) 100%); }
.card-scanlines { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,168,232,0.025) 0px, rgba(0,168,232,0.025) 1px, transparent 1px, transparent 5px); pointer-events: none; }
.card-char { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); height: 82%; z-index: 3; transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), filter 0.3s; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); }
.role-card:hover .card-char { transform: translateX(-50%) scale(1.08) translateY(-6px); filter: drop-shadow(0 0 20px rgba(0,168,232,0.3)) drop-shadow(0 10px 30px rgba(0,0,0,0.5)); }
.card-glow-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: 0; z-index: 5; transition: opacity 0.3s; }
.role-card:hover .card-glow-line, .main-card .card-glow-line { opacity: 1; }
.card-corner { position: absolute; z-index: 6; font-family: 'Orbitron', sans-serif; font-size: 0.45rem; color: rgba(0,168,232,0.3); font-weight: 700; letter-spacing: 1px; }
.card-corner.tl { top: 12px; left: 14px; }
.card-corner.tr { top: 12px; right: 14px; text-align: right; }
.card-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px 18px; z-index: 4; background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); text-align: center; }
.card-label-pre { font-size: 0.52rem; letter-spacing: 3px; color: rgba(255,255,255,0.35); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.card-label { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900; letter-spacing: 2px; color: var(--white); transition: color 0.3s, text-shadow 0.3s; }
.role-card:hover .card-label { color: var(--blue); text-shadow: var(--glow); }
.main-card .card-label { font-size: 1.15rem; color: var(--blue); text-shadow: var(--glow); }
.main-logo-zone { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; }
.main-logo-ring { position: relative; width: 110px; height: 110px; margin: 0 auto 14px; }
.main-logo-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ringRot 6s linear infinite; }
@keyframes ringRot { to { transform: rotate(360deg); } }
.main-logo-ring img { position: absolute; inset: 16px; object-fit: contain; filter: drop-shadow(0 0 12px var(--blue)); animation: logoPulse 3s ease-in-out infinite; }
.main-card-label { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; letter-spacing: 5px; color: rgba(0,168,232,0.5); font-weight: 700; }
.role-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,107,0,0.06) 0%, transparent 50%); opacity: 0; z-index: 4; transition: opacity 0.3s; pointer-events: none; }
.role-card:not(.main-card):hover::after { opacity: 1; }

@media (max-width: 900px) {
  .cards-row { gap: 8px; }
  .role-card { border-radius: 18px; }
  .card-label { font-size: 0.75rem; }
  .main-card .card-label { font-size: 0.85rem; }
  .main-logo-ring { width: 80px; height: 80px; }
}

@media (max-width: 600px) {
  .home-stage { padding: 12px 8px; align-items: center; }
  .cards-row { gap: 5px; align-items: center; }
  .role-card { width: clamp(54px, 16vw, 90px); height: clamp(140px, 38vw, 240px); border-radius: 10px; }
  .role-card.main-card { width: clamp(64px, 19vw, 108px); height: clamp(170px, 44vw, 280px); }
  .card-corner { display: none; }
  .card-label { font-size: 0.5rem; letter-spacing: 1px; }
  .card-label-pre { font-size: 0.38rem; letter-spacing: 1px; }
  .main-card .card-label { font-size: 0.6rem; }
  .main-logo-ring { width: 50px; height: 50px; margin-bottom: 6px; }
  .main-card-label { font-size: 0.35rem; letter-spacing: 2px; }
}