/* Premium Gateway: Metallic & Matte Finish */
.premium-gateway-section {
    padding: 120px 0;
    background: #050a14;
    text-align: center;
}

.gateway-label { color: #c5a059; letter-spacing: 0.4em; font-size: 0.75rem; margin-bottom: 20px; font-weight: bold; }
.gateway-title { font-size: 1.8rem; margin-bottom: 60px; color: #fff; letter-spacing: 0.1em; }

.cards-flex {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.premium-card {
    flex: 1;
    max-width: 460px;
    height: 280px;
    text-decoration: none !important;
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    text-align: left;
}

.premium-card:hover .card-inner {
    transform: translateY(-15px) rotateX(10deg) rotateY(5deg);
}

/* ロゴのサイズを20pxに固定 */
.card-logo-mini {
    height: 20px !important;
    width: auto !important;
    display: block;
}

/* プラチナ：ヘアライン仕上げ */
.platinum .card-inner {
    background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #bebebe 100%);
    border: 1px solid rgba(255,255,255,0.8);
    color: #1a2639;
}
.platinum .card-inner::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    pointer-events: none;
}

/* ブラック：高級マット仕上げ */
.black .card-inner {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: #fff;
}
.black .card-logo-mini { filter: brightness(0) invert(1); }

/* 光沢エフェクト */
.card-glare {
    position: absolute;
    top: -100%; left: -100%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: 0.6s;
}
.premium-card:hover .card-glare { top: 100%; left: 100%; }

.card-header { display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.card-rank { font-weight: 900; letter-spacing: 0.2em; font-size: 0.9rem; }

.card-body { z-index: 2; }
.course-name { font-size: 1.25rem; font-weight: bold; margin-bottom: 12px; display: inline-block; border-bottom: 1px solid rgba(0,0,0,0.1); }
.black .course-name { color: #c5a059; border-bottom-color: #c5a059; }
.course-desc { font-size: 0.85rem; line-height: 1.8; opacity: 0.9; }

.card-footer { z-index: 2; }
.status-btn { font-size: 0.75rem; font-weight: bold; letter-spacing: 0.1em; opacity: 0.5; }

.gateway-note { margin-top: 50px; font-size: 0.75rem; opacity: 0.4; color: #fff; }

@media (max-width: 900px) {
    .cards-flex { flex-direction: column; align-items: center; }
    .premium-card { width: 100%; height: 260px; }
}