*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
scroll-behavior:smooth;
}

body{
background:#050816;
color:white;
overflow-x:hidden;
}

header{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 7%;
background:rgba(5,8,22,.85);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
  text-decoration:none;
color:white;
font-size:26px;
font-weight:900;
}

nav{
display:flex;
gap:22px;
}

nav a{
color:white;
text-decoration:none;
font-weight:600;
font-size:15px;
opacity:.85;
}

nav a:hover{
color:#a78bfa;
}

.ticker{
overflow:hidden;
background:#111827;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}

.ticker-content{
white-space:nowrap;
display:inline-block;
animation:tickerMove 28s linear infinite;
font-weight:700;
color:#e0e7ff;
}

@keyframes tickerMove{
0%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}

.hero{
min-height:85vh;
padding:110px 7%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:
radial-gradient(circle at 20% 10%,rgba(124,58,237,.5),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(37,99,235,.4),transparent 35%),
radial-gradient(circle at 50% 90%,rgba(236,72,153,.25),transparent 35%);
}

.hero-badge,.section-label{
display:inline-block;
margin-bottom:18px;
padding:8px 14px;
border-radius:999px;
background:rgba(139,92,246,.15);
border:1px solid rgba(139,92,246,.35);
color:#c4b5fd;
font-weight:800;
font-size:13px;
text-transform:uppercase;
letter-spacing:.8px;
}

.hero h1{
max-width:950px;
font-size:76px;
line-height:1;
margin-bottom:24px;
}

.hero p{
max-width:760px;
font-size:21px;
color:#cbd5e1;
line-height:1.6;
margin-bottom:34px;
}

.hero-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:60px;
}

.main-btn,.second-btn{
padding:15px 26px;
border-radius:16px;
font-weight:900;
text-decoration:none;
}

.main-btn{
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:white;
}

.second-btn{
background:rgba(255,255,255,.08);
color:white;
border:1px solid rgba(255,255,255,.12);
}

.hero-stats{
display:flex;
gap:70px;
flex-wrap:wrap;
justify-content:center;
}

.hero-stats h2{
font-size:42px;
color:#a78bfa;
}

.hero-stats span{
color:#94a3b8;
}

.story,.events,.my-tickets,.how,.live,.fun,.faq{
padding:85px 7%;
}

.story{
display:grid;
grid-template-columns:1.4fr .8fr;
gap:35px;
align-items:center;
}

.story h2,.events h2,.my-tickets h2,.how h2,.live h2,.fun h2,.faq h2{
font-size:44px;
margin-bottom:20px;
}

.story p,.how p,.fun p,.faq p{
color:#cbd5e1;
line-height:1.7;
margin-bottom:16px;
}

.story-card{
padding:30px;
border-radius:26px;
background:linear-gradient(145deg,rgba(124,58,237,.25),rgba(37,99,235,.16));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.story-card h3{
font-size:28px;
margin-bottom:20px;
}

.section-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:28px;
}

#searchInput{
width:320px;
max-width:100%;
padding:15px 18px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
color:white;
outline:none;
font-size:15px;
}

#searchInput::placeholder{
color:#94a3b8;
}

.categories{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:30px;
}

.categories button{
border:none;
border-radius:999px;
padding:11px 18px;
cursor:pointer;
background:rgba(255,255,255,.08);
color:white;
font-weight:800;
border:1px solid rgba(255,255,255,.08);
}

.categories button:hover{
background:#7c3aed;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
}

.card{
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
border-radius:26px;
overflow:hidden;
transition:.35s;
backdrop-filter:blur(18px);
}

.card:hover{
transform:translateY(-10px);
border-color:#8b5cf6;
box-shadow:0 30px 70px rgba(124,58,237,.18);
}

.card img{
width:100%;
height:220px;
object-fit:cover;
}

.card-content{
padding:22px;
}

.card h3{
font-size:23px;
margin-bottom:10px;
}

.card-tag{
display:inline-block;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:rgba(96,165,250,.15);
color:#93c5fd;
font-size:12px;
font-weight:900;
}

.location,.date{
color:#cbd5e1;
margin-bottom:9px;
}

.stats{
display:flex;
justify-content:space-between;
gap:12px;
margin:16px 0;
font-size:14px;
}

.available{color:#22c55e}
.sold{color:#fb923c}

.progress{
height:8px;
background:rgba(255,255,255,.08);
border-radius:999px;
overflow:hidden;
margin-bottom:18px;
}

.progress span{
display:block;
height:100%;
background:linear-gradient(90deg,#7c3aed,#22c55e);
border-radius:999px;
}

.price{
font-size:24px;
font-weight:900;
margin-bottom:17px;
}

.buy-btn,.pay-btn,.delete-btn,.demo-btn,.random-box button{
width:100%;
border:none;
border-radius:15px;
padding:14px;
font-weight:900;
cursor:pointer;
color:white;
}

.buy-btn,.pay-btn,.random-box button{
background:linear-gradient(135deg,#7c3aed,#2563eb);
}

.delete-btn{
background:rgba(239,68,68,.16);
border:1px solid rgba(239,68,68,.35);
color:#fecaca;
margin-top:10px;
}

.demo-btn{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
margin-top:10px;
}

.ticket-card{
display:grid;
grid-template-columns:1fr 220px;
gap:20px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:24px;
margin-bottom:18px;
}

.ticket-card h3{
font-size:24px;
margin-bottom:10px;
}

.ticket-card p{
color:#cbd5e1;
margin-bottom:8px;
}

.ticket-status{
display:inline-block;
padding:7px 12px;
border-radius:999px;
font-weight:900;
margin-top:6px;
}

.status-waiting{
background:rgba(251,146,60,.15);
color:#fed7aa;
}

.status-paid{
background:rgba(34,197,94,.15);
color:#bbf7d0;
}

.ticket-actions{
display:flex;
flex-direction:column;
justify-content:center;
}

.empty{
color:#94a3b8;
}

.steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.steps div,.live-feed div,.random-box{
padding:24px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.steps h3{
margin-bottom:10px;
font-size:22px;
}

.live-feed{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:16px;
margin-top:28px;
}

.fun-grid{
display:grid;
grid-template-columns:260px 1fr;
gap:24px;
align-items:stretch;
margin-top:26px;
}

.orb{
height:260px;
width:260px;
border-radius:50%;
border:none;
font-size:66px;
cursor:pointer;
background:
radial-gradient(circle at 35% 30%,#fff,transparent 12%),
linear-gradient(135deg,#7c3aed,#2563eb,#ec4899);
box-shadow:0 0 60px rgba(124,58,237,.6);
transition:.25s;
}

.orb:active{
transform:scale(.9) rotate(18deg);
filter:hue-rotate(70deg);
}

.random-box h3{
font-size:26px;
margin-bottom:14px;
}

.random-box button{
margin-top:16px;
}

.faq details{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:20px;
margin-bottom:14px;
}

.faq summary{
cursor:pointer;
font-weight:900;
font-size:18px;
}

.faq p{
margin-top:12px;
}

footer{
text-align:center;
padding:60px 7%;
color:#64748b;
border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:820px){
header{
flex-direction:column;
gap:14px;
}

nav{
gap:13px;
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:46px;
}

.hero p{
font-size:17px;
}

.story{
grid-template-columns:1fr;
}

.section-head{
flex-direction:column;
align-items:flex-start;
}

.ticket-card{
grid-template-columns:1fr;
}

.fun-grid{
grid-template-columns:1fr;
}

.orb{
width:220px;
height:220px;
margin:auto;
}

.story h2,.events h2,.my-tickets h2,.how h2,.live h2,.fun h2,.faq h2{
font-size:34px;
}
}
.payment-page{
min-height:calc(100vh - 80px);
padding:80px 7%;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at 20% 10%,rgba(124,58,237,.45),transparent 35%),
radial-gradient(circle at 80% 70%,rgba(37,99,235,.35),transparent 35%);
}

.payment-card{
width:100%;
max-width:1100px;
padding:38px;
border-radius:30px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(20px);
box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.payment-card h1{
font-size:48px;
margin-bottom:16px;
}

.payment-subtitle{
color:#cbd5e1;
font-size:18px;
margin-bottom:28px;
}

.payment-info{
padding:22px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
margin-bottom:28px;
}

.payment-info h3{
font-size:26px;
margin-bottom:10px;
}

.payment-info p{
color:#cbd5e1;
margin-bottom:8px;
}

.payment-price{
font-size:30px;
font-weight:900;
color:white !important;
}

.payment-methods{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}

.payment-option{
padding:26px;
border-radius:24px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}

.payment-option h2{
font-size:28px;
margin-bottom:12px;
}

.payment-option p{
color:#cbd5e1;
line-height:1.6;
margin-bottom:20px;
}

.paypal-btn{
width:100%;
border:none;
border-radius:15px;
padding:15px;
font-weight:900;
cursor:pointer;
background:#ffc439;
color:#111827;
font-size:16px;
}

.qr-box{
display:flex;
justify-content:center;
margin:22px 0;
}

.fake-qr{
width:180px;
height:180px;
padding:14px;
border-radius:18px;
background:white;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}

.fake-qr span{
background:#111827;
border-radius:6px;
}

.fake-qr span:nth-child(2),
.fake-qr span:nth-child(4),
.fake-qr span:nth-child(8){
background:#7c3aed;
}

.wallet-box{
padding:14px;
border-radius:14px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
margin-bottom:12px;
word-break:break-all;
}

.wallet-box small{
color:#94a3b8;
}

.wallet-box p{
margin-top:6px;
font-weight:800;
color:white;
}

.copy-btn{
width:100%;
border:none;
border-radius:15px;
padding:14px;
font-weight:900;
cursor:pointer;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:white;
margin-bottom:10px;
}

.back-link{
display:inline-block;
margin-top:24px;
color:#c4b5fd;
text-decoration:none;
font-weight:800;
}

@media(max-width:820px){
.payment-card{
padding:24px;
}

.payment-card h1{
font-size:36px;
}

.payment-methods{
grid-template-columns:1fr;
}

.fake-qr{
width:160px;
height:160px;
}
}
.ticket-page{
min-height:calc(100vh - 80px);
padding:80px 7%;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at 20% 10%,rgba(124,58,237,.45),transparent 35%),
radial-gradient(circle at 80% 70%,rgba(37,99,235,.35),transparent 35%);
}

.digital-ticket{
width:100%;
max-width:760px;
padding:38px;
border-radius:32px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(20px);
box-shadow:0 30px 90px rgba(0,0,0,.35);
text-align:center;
}

.digital-ticket h1{
font-size:46px;
margin-bottom:18px;
}

.digital-status{
display:inline-block;
padding:10px 16px;
border-radius:999px;
font-weight:900;
margin-bottom:24px;
}

.digital-paid{
background:rgba(34,197,94,.16);
color:#bbf7d0;
}

.digital-waiting{
background:rgba(251,146,60,.16);
color:#fed7aa;
}

.ticket-details{
text-align:left;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:22px;
margin:22px 0;
}

.ticket-details p{
color:#cbd5e1;
margin-bottom:10px;
}

.big-qr{
display:flex;
justify-content:center;
margin:26px 0;
}

.ticket-note{
color:#94a3b8;
line-height:1.6;
margin-bottom:24px;
}

.ticket-page-actions{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}

.ticket-page-actions .demo-btn{
width:auto;
padding:15px 24px;
}

@media(max-width:820px){
.digital-ticket{
padding:24px;
}

.digital-ticket h1{
font-size:34px;
}
}
.media-showcase,
.video-section,
.deals,
.account-section{
padding:85px 7%;
}

.media-showcase h2,
.video-section h2,
.deals h2,
.account-section h2{
font-size:44px;
margin-bottom:18px;
}

.media-showcase p,
.video-section p,
.deals p{
color:#cbd5e1;
line-height:1.7;
margin-bottom:28px;
max-width:760px;
}

.media-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}

.media-grid img{
width:100%;
height:260px;
object-fit:cover;
border-radius:24px;
border:1px solid rgba(255,255,255,.1);
transition:.35s;
}

.media-grid img:hover{
transform:scale(1.04);
box-shadow:0 25px 70px rgba(124,58,237,.25);
}

.video-section{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:30px;
align-items:center;
background:
radial-gradient(circle at 80% 50%,rgba(124,58,237,.25),transparent 35%);
}

.video-section video{
width:100%;
max-height:460px;
object-fit:cover;
border-radius:30px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.discount-badge{
display:inline-block;
margin-bottom:12px;
padding:7px 12px;
border-radius:999px;
background:rgba(34,197,94,.16);
color:#bbf7d0;
font-size:12px;
font-weight:900;
}

.old-price{
color:#94a3b8;
text-decoration:line-through;
font-size:16px;
margin-right:8px;
}

.account-box{
margin-top:28px;
max-width:720px;
padding:28px;
border-radius:26px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.09);
}

.account-box input{
width:100%;
padding:15px 18px;
border-radius:15px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
color:white;
outline:none;
margin-bottom:12px;
font-size:15px;
}

.account-box input::placeholder{
color:#94a3b8;
}

.account-box button{
width:100%;
border:none;
border-radius:15px;
padding:15px;
font-weight:900;
cursor:pointer;
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:white;
margin-top:8px;
}

.account-profile{
display:grid;
gap:10px;
}

.account-profile p{
color:#cbd5e1;
}

.first-discount{
margin-top:16px;
padding:18px;
border-radius:18px;
background:rgba(34,197,94,.13);
border:1px solid rgba(34,197,94,.28);
color:#bbf7d0;
font-weight:800;
}

.logout-btn{
background:rgba(239,68,68,.16) !important;
border:1px solid rgba(239,68,68,.35) !important;
color:#fecaca !important;
}

@media(max-width:820px){
.media-grid{
grid-template-columns:1fr 1fr;
}

.media-grid img{
height:190px;
}

.video-section{
grid-template-columns:1fr;
}

.media-showcase h2,
.video-section h2,
.deals h2,
.account-section h2{
font-size:34px;
}
}
.vibe-video{
width:100%;
height:460px;
object-fit:cover;
border-radius:30px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.35);
background:#111827;
}
.toast{
position:fixed;
top:95px;
right:30px;
z-index:9999;
display:flex;
align-items:flex-start;
gap:14px;
min-width:300px;
max-width:420px;
padding:18px 20px;
border-radius:20px;
background:rgba(15,23,42,.94);
border:1px solid rgba(139,92,246,.45);
box-shadow:0 25px 70px rgba(0,0,0,.38);
backdrop-filter:blur(20px);
color:white;
transform:translateX(140%);
transition:.35s ease;
}

.toast.show{
transform:translateX(0);
}

.toast-icon{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:linear-gradient(135deg,#7c3aed,#2563eb);
font-size:18px;
flex-shrink:0;
}

.toast strong{
display:block;
font-size:16px;
margin-bottom:4px;
}

.toast small{
display:block;
color:#94a3b8;
font-weight:600;
line-height:1.4;
}

.toast-error{
border-color:rgba(239,68,68,.45);
}

.toast-error .toast-icon{
background:linear-gradient(135deg,#ef4444,#f97316);
}

.toast-payment .toast-icon{
background:linear-gradient(135deg,#22c55e,#2563eb);
}

@media(max-width:820px){
.toast{
left:18px;
right:18px;
top:90px;
min-width:auto;
max-width:none;
}
}

.toast.show{
transform:translateX(0);
}

.toast small{
display:block;
color:#94a3b8;
font-weight:600;
margin-top:5px;
}

.account-page{
min-height:100vh;
padding:85px 7%;
background:
radial-gradient(circle at 20% 10%,rgba(124,58,237,.45),transparent 35%),
radial-gradient(circle at 80% 70%,rgba(37,99,235,.35),transparent 35%);
}

.full-account{
max-width:1100px;
margin:auto;
padding:36px;
border-radius:32px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(20px);
box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.full-account h1{
font-size:52px;
margin-bottom:8px;
}

.account-email{
color:#cbd5e1;
margin-bottom:24px;
}

.level-card{
padding:24px;
border-radius:24px;
background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(37,99,235,.18));
border:1px solid rgba(255,255,255,.1);
margin-bottom:26px;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:16px;
margin-bottom:34px;
}

.dashboard-grid div{
padding:22px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

.dashboard-grid h3{
font-size:34px;
color:#a78bfa;
}

.dashboard-grid p,
.level-card p{
color:#cbd5e1;
}

.account-subtitle{
font-size:34px;
margin-bottom:18px;
}

.account-ticket-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:16px;
}

.account-ticket{
padding:22px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
}

.account-ticket h3{
margin-bottom:10px;
}

.account-ticket p{
color:#cbd5e1;
margin-bottom:8px;
}

.account-logout{
margin-top:28px;
padding:15px 22px;
border-radius:15px;
width:auto;
}

@media(max-width:820px){
.toast{
left:18px;
right:18px;
top:90px;
}

.full-account{
padding:24px;
}

.full-account h1{
font-size:36px;
}
}
.level-progress-info{
margin-top:16px;
margin-bottom:10px;
font-weight:900;
color:#c4b5fd;
}

.level-progress{
height:12px;
width:100%;
background:rgba(255,255,255,.1);
border-radius:999px;
overflow:hidden;
margin-bottom:14px;
}

.level-progress span{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#7c3aed,#22c55e);
}

.account-ticket-actions{
margin-top:16px;
}

.account-ticket-actions button{
width:100%;
border:none;
border-radius:14px;
padding:13px;
font-weight:900;
cursor:pointer;
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:white;
}
.details-btn{
width:100%;
border:none;
border-radius:15px;
padding:14px;
font-weight:900;
cursor:pointer;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:white;
margin-top:10px;
}

.event-page{
padding:85px 7%;
min-height:100vh;
background:
radial-gradient(circle at 20% 10%,rgba(124,58,237,.4),transparent 35%),
radial-gradient(circle at 80% 60%,rgba(37,99,235,.3),transparent 35%);
}

.event-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:start;
}

.event-hero-img{
width:100%;
height:420px;
object-fit:cover;
border-radius:30px;
border:1px solid rgba(255,255,255,.12);
}

.event-info-box,
.seat-map-box{
padding:28px;
border-radius:28px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
}

.venue-map{
margin-top:24px;
padding:22px;
border-radius:24px;
background:#0f172a;
}

.stage{
text-align:center;
padding:14px;
border-radius:16px;
background:linear-gradient(135deg,#7c3aed,#2563eb);
font-weight:900;
margin-bottom:18px;
}

.seat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

.seat-zone{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
cursor:pointer;
transition:.25s;
}

.seat-zone:hover,
.seat-zone.active{
background:rgba(124,58,237,.35);
border-color:#a78bfa;
transform:translateY(-4px);
}

.seat-zone h4{
margin-bottom:8px;
}

.seat-zone p{
color:#cbd5e1;
font-size:14px;
}

.selected-zone{
margin-top:20px;
padding:18px;
border-radius:18px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.3);
color:#bbf7d0;
font-weight:800;
}

@media(max-width:820px){
.event-layout{
grid-template-columns:1fr;
}

.event-hero-img{
height:280px;
}

.seat-grid{
grid-template-columns:1fr;
}
}
.video-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.video-gallery video{
width:100%;
height:460px;
object-fit:cover;
border-radius:26px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.35);
background:#111827;
transition:.35s;
}

.video-gallery video:hover{
transform:scale(1.03);
}

@media(max-width:820px){
.video-gallery{
grid-template-columns:1fr;
}

.video-gallery video{
height:320px;
}
}
.seat-legend{
display:flex;
gap:12px;
flex-wrap:wrap;
margin:18px 0;
}

.seat-legend span{
display:flex;
align-items:center;
gap:7px;
color:#cbd5e1;
font-weight:800;
font-size:14px;
}

.seat-legend b{
width:16px;
height:16px;
border-radius:5px;
display:inline-block;
}

.legend-vip{background:#ec4899}
.legend-gold{background:#f59e0b}
.legend-standard{background:#2563eb}
.legend-sold{background:#475569}

.real-map{
padding:24px;
border-radius:26px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
margin-bottom:20px;
}

.map-stage{
text-align:center;
padding:16px;
border-radius:18px;
background:linear-gradient(135deg,#7c3aed,#2563eb);
font-weight:900;
margin-bottom:24px;
}

.seat-visual-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:10px;
}

.seat{
height:42px;
border:none;
border-radius:10px;
font-weight:900;
cursor:pointer;
color:white;
transition:.25s;
}

.seat.vip{
background:#ec4899;
}

.seat.gold{
background:#f59e0b;
color:#111827;
}

.seat.standard{
background:#2563eb;
}

.seat.sold{
background:#475569;
color:#94a3b8;
cursor:not-allowed;
opacity:.55;
}

.seat.active{
outline:3px solid white;
transform:scale(1.12);
box-shadow:0 0 25px rgba(255,255,255,.35);
}

.seat:not(.sold):hover{
transform:translateY(-3px);
}

@media(max-width:820px){
.seat-visual-grid{
grid-template-columns:repeat(4,1fr);
}

.seat{
height:44px;
}
}
.wide-event-layout{
grid-template-columns:.8fr 1.4fr;
}

.advanced-map-box{
overflow:hidden;
}

.seat-summary-box{
margin:24px 0;
padding:20px;
border-radius:20px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
}

.seat-summary-box h3{
margin-bottom:12px;
}

.seat-summary-box p{
margin-bottom:6px;
}

.advanced-venue{
position:relative;
padding:28px;
border-radius:30px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
}

.venue-center{
height:170px;
border-radius:28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin-bottom:28px;
border:2px solid rgba(255,255,255,.12);
color:white;
}

.concert-center{
background:linear-gradient(135deg,#7c3aed,#2563eb);
clip-path:ellipse(70% 55% at 50% 50%);
}

.stadium-center{
background:linear-gradient(135deg,#16a34a,#15803d);
}

.race-center{
background:#111827;
border-radius:50%;
}

.tennis-center{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.arena-center{
background:linear-gradient(135deg,#7c3aed,#ec4899);
}

.field-lines,
.track-line,
.court-net{
width:70%;
height:60%;
border:2px solid rgba(255,255,255,.6);
border-radius:18px;
position:absolute;
}

.track-line{
border-radius:50%;
}

.court-net{
height:2px;
background:white;
border:none;
}

.advanced-seat-grid{
display:grid;
grid-template-columns:repeat(14,1fr);
gap:8px;
}

.advanced-seat{
height:34px;
font-size:11px;
border-radius:9px;
}

.advanced-seat.vip{
background:#ec4899;
}

.advanced-seat.gold{
background:#f59e0b;
color:#111827;
}

.advanced-seat.standard{
background:#2563eb;
}

.advanced-seat.sold{
background:#475569;
color:#94a3b8;
cursor:not-allowed;
opacity:.5;
}

.advanced-seat.active{
outline:3px solid white;
transform:scale(1.15);
box-shadow:0 0 25px rgba(255,255,255,.35);
}

.legend-selected{
background:white;
}

.football-map .advanced-seat-grid{
grid-template-columns:repeat(16,1fr);
}

.race-map .advanced-seat-grid{
grid-template-columns:repeat(16,1fr);
}

.concert-map .advanced-seat-grid{
grid-template-columns:repeat(14,1fr);
}

.tennis-map .advanced-seat-grid{
grid-template-columns:repeat(12,1fr);
}

@media(max-width:1000px){
.wide-event-layout{
grid-template-columns:1fr;
}

.advanced-seat-grid,
.football-map .advanced-seat-grid,
.race-map .advanced-seat-grid,
.concert-map .advanced-seat-grid,
.tennis-map .advanced-seat-grid{
grid-template-columns:repeat(6,1fr);
}

.advanced-seat{
height:38px;
font-size:12px;
}
}
.pro-event-layout{
grid-template-columns:.72fr 1.45fr;
gap:34px;
}

.pro-map-box{
overflow:hidden;
}

.pro-map{
padding:26px;
border-radius:30px;
background:
radial-gradient(circle at 50% 20%,rgba(124,58,237,.18),transparent 35%),
#0f172a;
border:1px solid rgba(255,255,255,.09);
}

.pro-center{
min-height:145px;
border-radius:28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
margin:18px 0;
border:2px solid rgba(255,255,255,.12);
color:white;
font-weight:900;
}

.pro-center span{
margin-top:8px;
font-size:13px;
color:#cbd5e1;
}

.pro-stage{
background:linear-gradient(135deg,#7c3aed,#2563eb);
clip-path:ellipse(72% 58% at 50% 50%);
}

.pro-football-field{
background:linear-gradient(135deg,#16a34a,#15803d);
}

.football-line{
position:absolute;
width:78%;
height:62%;
border:2px solid rgba(255,255,255,.65);
border-radius:16px;
}

.pro-race-track{
background:#020617;
border-radius:50%;
min-height:210px;
}

.track-inner{
position:absolute;
width:78%;
height:58%;
border:18px solid rgba(255,255,255,.16);
border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}

.pro-tennis-court{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.tennis-net{
position:absolute;
width:76%;
height:2px;
background:white;
opacity:.85;
}

.pro-esports-screen{
background:linear-gradient(135deg,#111827,#7c3aed);
}

.pro-arena{
background:linear-gradient(135deg,#ec4899,#7c3aed);
}

.pro-section{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
margin-bottom:16px;
}

.pro-section-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
margin-bottom:14px;
}

.pro-section-head h4{
margin:0;
font-size:16px;
}

.pro-section-head span{
font-size:12px;
font-weight:900;
color:#cbd5e1;
}

.pro-seats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(38px,1fr));
gap:7px;
}

.pro-seat{
height:34px;
border:none;
border-radius:9px;
font-size:11px;
font-weight:900;
cursor:pointer;
color:white;
transition:.22s;
}

.pro-seat.vip{
background:#ec4899;
}

.pro-seat.gold{
background:#f59e0b;
color:#111827;
}

.pro-seat.standard{
background:#2563eb;
}

.pro-seat.sold{
background:#475569;
color:#94a3b8;
opacity:.52;
cursor:not-allowed;
}

.pro-seat:not(.sold):hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 12px 30px rgba(124,58,237,.28);
}

.pro-seat.active{
outline:3px solid white;
transform:scale(1.16);
box-shadow:0 0 28px rgba(255,255,255,.45);
}

.stadium-middle{
display:grid;
grid-template-columns:.62fr 1.25fr .62fr;
gap:16px;
align-items:center;
}

.stadium-middle .pro-section{
margin-bottom:0;
}

.race-side-stands,
.concert-floor{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.seat-summary-box{
margin:24px 0;
padding:20px;
border-radius:20px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
}

.seat-summary-box h3{
margin-bottom:12px;
}

.legend-selected{
background:white;
}

@media(max-width:1000px){
.pro-event-layout{
grid-template-columns:1fr;
}

.stadium-middle,
.race-side-stands,
.concert-floor{
grid-template-columns:1fr;
}

.pro-seat{
height:38px;
font-size:12px;
}
}
/* =========================
   TicketHub SeatMap V2
========================= */

.seatmap-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:24px 0;
}

.seatmap-stats div{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.seatmap-stats h3{
font-size:28px;
color:#a78bfa;
}

.seatmap-stats p{
color:#94a3b8;
font-size:13px;
margin:0;
}

.seatmap-map{
padding:26px;
border-radius:30px;
background:
radial-gradient(circle at 50% 15%,rgba(124,58,237,.18),transparent 35%),
#0f172a;
border:1px solid rgba(255,255,255,.09);
}

.seatmap-center{
min-height:150px;
border-radius:28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
margin:18px 0;
border:2px solid rgba(255,255,255,.12);
font-weight:900;
}

.seatmap-center span{
margin-top:8px;
font-size:13px;
color:#cbd5e1;
max-width:420px;
}

.seatmap-center-concert{
background:linear-gradient(135deg,#7c3aed,#2563eb);
clip-path:ellipse(72% 58% at 50% 50%);
}

.seatmap-center-football{
background:linear-gradient(135deg,#16a34a,#15803d);
}

.seatmap-center-race{
background:#020617;
border-radius:50%;
min-height:230px;
}

.seatmap-center-race::before{
content:"";
position:absolute;
width:75%;
height:55%;
border:20px solid rgba(255,255,255,.16);
border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}

.seatmap-center-tennis{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.seatmap-center-basketball,
.seatmap-center-arena{
background:linear-gradient(135deg,#ec4899,#7c3aed);
}

.seatmap-center-esports{
background:linear-gradient(135deg,#111827,#7c3aed);
}

.seatmap-center-festival{
background:linear-gradient(135deg,#f97316,#7c3aed);
}

.seatmap-section{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
margin-bottom:16px;
}

.seatmap-section-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:14px;
}

.seatmap-section-header h4{
margin:0;
font-size:16px;
}

.seatmap-section-header span{
font-size:12px;
font-weight:900;
color:#cbd5e1;
}

.seatmap-seats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(36px,1fr));
gap:7px;
}

.seatmap-seat{
height:34px;
border:none;
border-radius:9px;
font-size:11px;
font-weight:900;
cursor:pointer;
color:white;
transition:.22s;
}

.seatmap-seat.vip{
background:#ec4899;
}

.seatmap-seat.gold{
background:#f59e0b;
color:#111827;
}

.seatmap-seat.standard{
background:#2563eb;
}

.seatmap-seat.sold{
background:#475569;
color:#94a3b8;
opacity:.52;
cursor:not-allowed;
}

.seatmap-seat:not(.sold):hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 12px 30px rgba(124,58,237,.28);
}

.seatmap-seat.active{
outline:3px solid white;
transform:scale(1.16);
box-shadow:0 0 28px rgba(255,255,255,.45);
}

.seatmap-stadium-row{
display:grid;
grid-template-columns:.7fr 1.25fr .7fr;
gap:16px;
align-items:center;
}

.seatmap-stadium-row .seatmap-section{
margin-bottom:0;
}

.seatmap-two-cols{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.shape-arc{
border-color:rgba(236,72,153,.35);
}

.shape-left,
.shape-right{
border-color:rgba(245,158,11,.28);
}

.shape-wide{
border-color:rgba(37,99,235,.28);
}

.seat-summary-box{
margin:24px 0;
padding:20px;
border-radius:20px;
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
}

.seat-summary-box h3{
margin-bottom:12px;
}

.seat-summary-box p{
margin-bottom:6px;
}

.legend-selected{
background:white;
}

@media(max-width:1000px){
.pro-event-layout{
grid-template-columns:1fr;
}

.seatmap-stadium-row,
.seatmap-two-cols{
grid-template-columns:1fr;
}

.seatmap-seat{
height:38px;
font-size:12px;
}

.seatmap-stats{
grid-template-columns:1fr;
}
}
.selected-seat-list{
display:grid;
gap:10px;
margin-top:10px;
}

.selected-seat-item{
display:grid;
grid-template-columns:1fr;
gap:4px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.selected-seat-item span{
font-weight:900;
color:white;
}

.selected-seat-item small{
color:#94a3b8;
}

.selected-seat-item strong{
color:#bbf7d0;
}

.selected-total{
margin-top:14px;
padding:14px;
border-radius:16px;
background:rgba(34,197,94,.13);
border:1px solid rgba(34,197,94,.28);
display:flex;
justify-content:space-between;
gap:12px;
font-weight:900;
}

.selected-total span{
color:#bbf7d0;
}

.selected-total strong{
color:white;
}
/* =========================
   Mobile UX upgrade
========================= */

@media(max-width:820px){

  body{
    overflow-x:hidden;
  }

  header{
    padding:14px 18px;
  }

  .logo{
    font-size:22px;
  }

  nav{
    gap:12px;
    overflow-x:auto;
    white-space:nowrap;
  }

  nav a{
    font-size:13px;
  }

  .hero{
    padding:90px 18px 40px;
    min-height:auto;
  }

  .hero h1{
    font-size:38px;
    line-height:1.05;
  }

  .hero p{
    font-size:15px;
  }

  section{
    padding:45px 18px;
  }

  .cards,
  .events-grid,
  .deals-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .card,
  .event-card,
  .deal-card{
    border-radius:18px;
    padding:12px;
  }

  .card img,
  .event-card img,
  .deal-card img{
    height:115px;
    border-radius:14px;
  }

  .card h3,
  .event-card h3,
  .deal-card h3{
    font-size:15px;
    line-height:1.15;
    margin-top:8px;
  }

  .card p,
  .event-card p,
  .deal-card p{
    font-size:12px;
    line-height:1.35;
  }

  .buy-btn,
  .details-btn{
    padding:10px;
    font-size:12px;
    border-radius:12px;
  }

  .section-label{
    font-size:11px;
  }

  h2{
    font-size:30px;
  }

  .video-gallery{
    grid-template-columns:1fr;
  }

  .video-gallery video{
    height:220px;
  }

  .faq details{
    padding:14px;
  }

  .faq summary{
    font-size:14px;
  }

  .faq p{
    font-size:13px;
  }
}
/* =========================
   FORCE MOBILE COMPACT MODE
========================= */

@media screen and (max-width: 820px){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  header{
    padding:12px 14px !important;
  }

  .logo{
    font-size:20px !important;
  }

  nav{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }

  nav a{
    font-size:12px !important;
  }

  section{
    padding:34px 14px !important;
  }

  .hero{
    min-height:auto !important;
    padding:85px 14px 34px !important;
  }

  .hero h1{
    font-size:34px !important;
    line-height:1.05 !important;
  }

  .hero p{
    font-size:14px !important;
  }

  .cards,
  .events-grid,
  .deals-grid,
  .ticket-grid,
  .hot-grid,
  #eventsContainer,
  #dealsContainer{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  .card,
  .event-card,
  .deal-card,
  .ticket-card{
    padding:10px !important;
    border-radius:16px !important;
  }

  .card img,
  .event-card img,
  .deal-card img,
  .ticket-card img{
    height:95px !important;
    border-radius:12px !important;
    object-fit:cover !important;
  }

  .card h3,
  .event-card h3,
  .deal-card h3,
  .ticket-card h3{
    font-size:14px !important;
    line-height:1.15 !important;
    margin:7px 0 !important;
  }

  .card p,
  .event-card p,
  .deal-card p,
  .ticket-card p{
    font-size:11px !important;
    line-height:1.25 !important;
    margin:4px 0 !important;
  }

  .buy-btn,
  .details-btn,
  button{
    padding:9px 8px !important;
    font-size:11px !important;
    border-radius:11px !important;
  }

  h2{
    font-size:28px !important;
  }

  .section-label{
    font-size:10px !important;
  }

  .video-gallery{
    grid-template-columns:1fr !important;
  }

  .video-gallery video{
    height:190px !important;
  }

  .faq details{
    padding:12px !important;
  }
}