:root { color-scheme: dark; --bg:#040913; --surface:#081326; --surface-2:#0c1d38; --blue:#1888ff; --cyan:#58c8ff; --text:#f4f8ff; --muted:#91a3bc; --line:rgba(125,183,255,.2); --max:1220px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.skip { position:fixed; z-index:100; top:-80px; left:15px; padding:12px 18px; background:var(--blue); }
.skip:focus { top:15px; }
.topbar { position:absolute; z-index:20; top:0; left:50%; width:min(100% - 48px,var(--max)); height:78px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:baseline; gap:7px; font-weight:950; letter-spacing:-.07em; }
.logo span { font-size:25px; }
.logo b { color:var(--cyan); font-size:16px; letter-spacing:-.04em; }
.topbar nav { display:flex; gap:35px; color:#b4c2d5; font-size:12px; font-weight:700; }
.topbar nav a:hover { color:var(--cyan); }
.live-link { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.live-link i { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(24,136,255,.15),0 0 22px var(--blue); }

.hero { position:relative; min-height:850px; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.hero-image { position:absolute; inset:0; z-index:-3; background:url("assets/ufc-329-arena-hero.png") center / cover no-repeat; filter:grayscale(.6) hue-rotate(160deg) saturate(1.3); }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(3,8,18,.98) 0%,rgba(3,11,27,.8) 48%,rgba(5,21,45,.45) 78%),linear-gradient(0deg,var(--bg),transparent 38%); }
.hero-grid { position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(rgba(64,157,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(64,157,255,.2) 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.hero-inner { width:min(100% - 48px,var(--max)); margin:110px auto 45px; }
.event-line { margin:0 0 28px; color:#a7b6cb; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.event-line span { display:inline-block; margin-right:15px; padding:9px 12px; background:var(--blue); color:white; }
h1 { max-width:1000px; margin:0; font-size:clamp(55px,8.7vw,124px); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; }
h1 small { display:block; margin:.32em 0 .26em .1em; color:var(--cyan); font-size:.14em; letter-spacing:.2em; }
h1 span { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(176,216,255,.78); }
.hero-copy { max-width:650px; margin:32px 0 0; color:#b6c4d7; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-actions a { min-height:50px; display:flex; align-items:center; padding:0 22px; border:1px solid var(--line); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.hero-actions a:first-child { background:var(--blue); border-color:var(--blue); }
.hero-actions a:hover { border-color:var(--cyan); }
.hero-data { display:flex; margin-top:48px; }
.hero-data div { min-width:190px; padding:17px 20px; border:1px solid var(--line); background:rgba(5,17,37,.7); backdrop-filter:blur(12px); }
.hero-data span,.hero-data strong { display:block; }
.hero-data span { color:#7186a3; font-size:8px; text-transform:uppercase; letter-spacing:.14em; }
.hero-data strong { margin-top:7px; font-size:13px; }

.section { width:min(100% - 48px,var(--max)); margin:0 auto; padding:115px 0; border-top:1px solid var(--line); }
.heading { max-width:810px; margin-bottom:45px; }
.heading > span { color:var(--cyan); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.2em; }
h2 { margin:17px 0 0; font-size:clamp(39px,5.7vw,73px); line-height:.97; letter-spacing:-.055em; text-transform:uppercase; }
.heading p { max-width:650px; margin:22px 0 0; color:var(--muted); line-height:1.7; }

.player-frame { position:relative; padding:10px; background:linear-gradient(135deg,rgba(24,136,255,.18),rgba(5,14,31,.8)); border:1px solid rgba(72,164,255,.55); box-shadow:0 0 70px rgba(24,136,255,.12); }
.frame-corners::before,.frame-corners::after { content:""; position:absolute; z-index:3; width:45px; height:45px; pointer-events:none; }
.frame-corners::before { top:-1px; left:-1px; border-top:3px solid var(--cyan); border-left:3px solid var(--cyan); }
.frame-corners::after { right:-1px; bottom:-1px; border-right:3px solid var(--cyan); border-bottom:3px solid var(--cyan); }
.video-wrapper { position:relative; min-height:430px; aspect-ratio:16 / 9; overflow:hidden; background:#030711; }
.dreams-player { --plyr-color-main:#1888ff; --plyr-video-control-background-hover:#1888ff; --plyr-range-fill-background:#1888ff; width:100%; height:100%; min-height:inherit; display:flex; align-items:center; justify-content:center; color:#7388a5; font-size:13px; }
.dreams-player .plyr { --plyr-color-main:#1888ff; }
.dreams-player .plyr__control--overlaid { background:#1888ff !important; }
.dreams-player iframe,.dreams-player video { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }
.player-paused { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; background:radial-gradient(circle,rgba(24,136,255,.18),transparent 42%),repeating-linear-gradient(135deg,transparent 0 42px,rgba(88,200,255,.025) 42px 43px),#030711; }
.player-paused::before { content:""; width:72px; height:72px; border:1px solid rgba(88,200,255,.55); border-radius:50%; box-shadow:0 0 45px rgba(24,136,255,.22); }
.player-paused span { margin-top:9px; font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.player-paused small { color:#6e87a8; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.payment-note { margin:15px 0 0; color:#637792; font-size:11px; line-height:1.6; }

.time-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.big-time strong { display:block; color:transparent; -webkit-text-stroke:2px var(--blue); font-size:clamp(80px,13vw,170px); line-height:.8; letter-spacing:-.09em; }
.big-time span { display:block; margin-top:27px; color:var(--cyan); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.15em; }
.time-copy p { color:#a7b6ca; line-height:1.8; }
.stages { display:grid; grid-template-columns:repeat(4,1fr); margin-top:65px; border:1px solid var(--line); }
.stages div { padding:24px; border-left:1px solid var(--line); }
.stages div:first-child { border-left:0; }
.stages .selected { background:var(--blue); }
.stages time,.stages span { display:block; }
.stages time { font-size:30px; font-weight:900; letter-spacing:-.04em; }
.stages span { margin-top:11px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.stages .selected span { color:rgba(255,255,255,.7); }

.article-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.article-grid article { min-height:330px; padding:34px; background:var(--surface); }
.article-grid .number { color:transparent; -webkit-text-stroke:1px var(--blue); font-size:63px; font-weight:950; letter-spacing:-.06em; }
.article-grid h3,.fight-analysis h3 { margin:35px 0 17px; font-size:23px; text-transform:uppercase; }
.article-grid p,.fight-analysis p { color:#94a7c0; line-height:1.8; }
.fight-analysis { max-width:850px; margin:70px 0 0 auto; padding:35px; border-left:3px solid var(--blue); background:linear-gradient(90deg,rgba(24,136,255,.12),transparent); }
.fight-analysis h3 { margin-top:0; }

.faq details { max-width:900px; margin-left:auto; border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { position:relative; padding:24px 50px 24px 0; cursor:pointer; list-style:none; font-size:18px; font-weight:750; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:8px; color:var(--cyan); font-size:24px; }
.faq details[open] summary::after { content:"−"; }
.faq details p { max-width:680px; margin:-3px 0 28px; color:var(--muted); line-height:1.7; }

footer { width:min(100% - 48px,var(--max)); min-height:140px; margin:0 auto; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:25px; border-top:1px solid var(--line); color:#71849d; font-size:10px; }
footer p { text-align:center; }
footer > a:last-child { justify-self:end; }

@media (max-width:800px) { .topbar nav{display:none}.time-layout{grid-template-columns:1fr;gap:50px}.article-grid{grid-template-columns:1fr} }
@media (max-width:600px) {
  .topbar,.hero-inner,.section,footer{width:min(100% - 32px,var(--max))}
  .hero{min-height:820px;align-items:flex-start}.hero-inner{margin-top:135px}.event-line{line-height:3}.hero-copy{font-size:15px}.hero-actions a{width:100%;justify-content:center}.hero-data{display:grid;grid-template-columns:1fr 1fr}.hero-data div{min-width:0;padding:14px}.hero-data div:last-child{grid-column:1 / -1}
  .section{padding:82px 0}.video-wrapper,.dreams-player{min-height:0}.player-frame{padding:5px}.stages{grid-template-columns:1fr 1fr}.stages div:nth-child(3){border-left:0}.stages div:nth-child(n+3){border-top:1px solid var(--line)}.article-grid article{min-height:280px;padding:25px}.fight-analysis{padding:25px}.faq summary{font-size:16px}footer{grid-template-columns:1fr;padding:35px 0;text-align:center}footer .logo,footer>a:last-child{justify-self:center}footer p{margin:0;grid-row:2}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}