:root { --navy:#1c244b; --navy-deep:#101737; --teal:#21b9c4; --teal-pale:#dff8f7; --yellow:#ffd200; --paper:#f9fafd; --ink:#172044; --muted:#59637d; --line:#d9deea; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Poppins,Arial,sans-serif; font-size:16px; }
button,a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.hero-shell { overflow:hidden; position:relative; color:white; min-height:690px; padding:25px max(5vw,34px) 58px; background:linear-gradient(122deg,var(--navy-deep) 0%,var(--navy) 63%,#263060 100%); }
.hero-shell::before { content:""; position:absolute; inset:0; opacity:.24; background:radial-gradient(ellipse 48% 55% at 93% 15%,#54d8db 0%,transparent 70%),radial-gradient(ellipse 50% 70% at 63% 115%,#36569a 0%,transparent 75%); }
.topbar,.hero-grid,.waterline { position:relative; z-index:1; max-width:1240px; margin:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; text-transform:uppercase; font:600 11px/1.16 Montserrat,sans-serif; letter-spacing:.1em; }
.brand b { color:var(--yellow); font-size:14px; }
.brand-mark { display:flex; align-items:end; gap:3px; height:33px; padding-bottom:1px; }
.brand-mark i { display:block; width:7px; background:var(--teal); border-radius:8px 8px 2px 2px; transform:skewY(-22deg); }.brand-mark i:nth-child(1){height:16px}.brand-mark i:nth-child(2){height:27px;background:#fff}.brand-mark i:nth-child(3){height:22px;background:var(--yellow)}
.nav-meta { color:#c9d4ef; font-size:13px; }.dot,.status span { display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--teal); border-radius:100%; box-shadow:0 0 0 5px rgba(33,185,196,.16); }.sep { color:#5c6b96; padding:0 8px; }.avatar { width:38px; height:38px; border:1px solid rgba(255,255,255,.4); color:white; background:rgba(255,255,255,.12); border-radius:50%; font-size:12px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 335px; align-items:center; gap:80px; padding:112px 0 82px; }.intro { max-width:700px; }.status { color:#b8eef0; font-size:13px; font-weight:600; letter-spacing:.06em; }.status span { width:7px; height:7px; }.intro h1,.section-heading h2,.program h2,.proof h2,.dialog-copy h2 { font-family:Montserrat,Arial,sans-serif; letter-spacing:-.043em; }.intro h1 { max-width:700px; margin:16px 0 22px; font-size:clamp(44px,5.2vw,76px); line-height:.98; }.lede { max-width:620px; color:#d4dcef; font-size:17px; line-height:1.75; }.actions { display:flex; gap:13px; margin-top:32px; flex-wrap:wrap; }.button { min-height:50px; display:inline-flex; align-items:center; gap:18px; border-radius:4px; padding:0 20px; font-size:14px; font-weight:600; }.primary { color:var(--navy); background:var(--yellow); }.primary:hover { background:#ffe166; }.button b,.room-foot b { font-size:20px; line-height:0; }.quiet { color:white; border:1px solid rgba(255,255,255,.35); background:transparent; }.quiet:hover { background:rgba(255,255,255,.1); }
.event-card { padding:28px 28px 23px; color:var(--navy); background:#fff; border-radius:3px; box-shadow:0 24px 50px rgba(0,0,0,.22); }.event-card>p,.section-label,.room-body>p,.slot span { margin:0 0 6px; color:#66708a; text-transform:uppercase; font:700 10px Montserrat,sans-serif; letter-spacing:.14em; }.event-card strong { font:700 18px Montserrat,sans-serif; letter-spacing:-.03em; }.card-rule { height:1px; margin:22px 0 7px; background:var(--line); }.event-card dl { margin:0; }.event-card dl div { display:grid; grid-template-columns:72px 1fr; padding:12px 0; }.event-card dt { color:#66708a; font:600 12px Montserrat,sans-serif; }.event-card dd { margin:0; font-size:13px; font-weight:600; }.calendar { width:100%; display:flex; justify-content:space-between; margin-top:17px; border:0; border-top:1px solid var(--line); padding:16px 0 0; color:var(--teal); background:transparent; text-align:left; font-size:12px; font-weight:700; }.calendar span { font-size:22px; font-weight:400; line-height:.6; }.waterline { height:32px; margin-bottom:-58px; opacity:.7; }.waterline span { position:absolute; height:2px; width:53%; border-radius:100%; border-top:2px solid #5bd7df; transform:rotate(-2deg); }.waterline span:nth-child(1){left:-15%;top:4px}.waterline span:nth-child(2){left:28%;top:15px;opacity:.56}.waterline span:nth-child(3){left:65%;top:27px;opacity:.33}
.live-section,.program,.proof { max-width:1240px; margin:auto; padding-left:max(5vw,34px); padding-right:max(5vw,34px); }.live-section { padding-top:87px; padding-bottom:96px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:31px; }.section-heading h2,.program h2 { margin:5px 0 0; font-size:clamp(31px,3.1vw,45px); line-height:1; }.time { margin:0; padding-bottom:3px; color:var(--muted); font-size:13px; }.time b { color:var(--teal); padding:0 6px; }.room-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:20px; }.room { overflow:hidden; background:white; border-radius:14px; box-shadow:0 11px 29px rgba(22,32,68,.07); }.room-art { position:relative; height:190px; overflow:hidden; background:#d6e9e9; }.feature .room-art { height:260px; }.keynote { background:linear-gradient(130deg,#154163,#0b1c4d); }.keynote::after { content:""; position:absolute; width:165%; height:95%; bottom:-68%; left:-34%; border-radius:50%; background:#68d3d2; transform:rotate(-8deg); opacity:.9; }.screen-copy { position:absolute; z-index:1; top:26px; left:28px; }.screen-copy span { display:block; color:var(--yellow); font:700 10px Montserrat,sans-serif; letter-spacing:.17em; }.screen-copy b { display:block; margin-top:13px; font:700 29px/1 Montserrat,sans-serif; letter-spacing:-.06em; }.live-badge { position:absolute; z-index:2; top:17px; right:17px; display:inline-flex; align-items:center; gap:6px; padding:6px 8px; color:white; background:#e95150; border-radius:3px; font:700 9px Montserrat,sans-serif; letter-spacing:.13em; }.live-badge::before { content:""; width:5px; height:5px; background:white; border-radius:50%; }.blue { background:#8ccbd3; }.abstract-river { position:absolute; inset:-12% -20%; background:repeating-radial-gradient(ellipse at 60% 70%,transparent 0 34px,#257b99 37px 43px,transparent 46px 75px); transform:rotate(-14deg); }.yellow { background:var(--yellow); }.rain-dots { width:120%; height:120%; background:radial-gradient(#1c244b 2px,transparent 3px); background-size:25px 25px; transform:rotate(-10deg); }.room-body { padding:21px 21px 17px; }.room-body h3 { min-height:56px; margin:8px 0 16px; font:700 18px/1.22 Montserrat,sans-serif; letter-spacing:-.035em; }.room-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:13px; border-top:1px solid var(--line); color:#68718a; font-size:11px; }.room-foot button { border:0; padding:0; color:var(--teal); background:transparent; font-size:11px; font-weight:700; }.room-foot button:hover { color:#0b8e99; }
.program { display:grid; grid-template-columns:.85fr 1.5fr; gap:12vw; padding-top:80px; padding-bottom:105px; border-top:1px solid var(--line); }.program-intro>p:last-child { max-width:315px; color:var(--muted); line-height:1.7; }.timeline { border-top:1px solid var(--line); }.slot { display:grid; grid-template-columns:72px 1fr auto; gap:17px; padding:24px 0; border-bottom:1px solid var(--line); }.slot time { color:var(--navy); font:700 18px Montserrat,sans-serif; letter-spacing:-.04em; }.slot h3 { margin:3px 0 6px; font:700 18px Montserrat,sans-serif; letter-spacing:-.035em; }.slot p { margin:0; color:var(--muted); font-size:13px; }.slot em { align-self:center; color:#778096; font:600 10px Poppins,sans-serif; font-style:normal; }.slot.current { position:relative; }.slot.current::before { content:""; position:absolute; left:-17px; top:0; bottom:0; width:3px; background:var(--teal); }.slot.current em { color:#0d9ca7; }.proof { display:flex; align-items:flex-start; gap:28px; padding-top:64px; padding-bottom:68px; color:white; background:var(--navy); max-width:none; padding-left:max(calc((100vw - 1240px)/2 + 5vw),max(5vw,34px)); padding-right:max(calc((100vw - 1240px)/2 + 5vw),max(5vw,34px)); }.proof-icon { flex:0 0 52px; display:grid; place-items:center; width:52px; height:52px; color:var(--navy); background:var(--yellow); border-radius:50%; font-size:26px; }.proof h2 { max-width:650px; margin:0; font-size:30px; letter-spacing:-.04em; }.proof p { max-width:780px; margin:12px 0 0; color:#d1daf1; font-size:14px; line-height:1.75; }
dialog { width:min(790px,calc(100vw - 32px)); overflow:hidden; padding:0; color:var(--ink); border:0; border-radius:14px; box-shadow:0 30px 100px rgba(0,0,0,.5); }dialog::backdrop { background:rgba(8,12,31,.72); backdrop-filter:blur(4px); }.close { position:absolute; z-index:3; top:13px; right:14px; width:35px; height:35px; color:white; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.2); font-size:25px; line-height:1; }.player-surface { position:relative; display:grid; min-height:360px; place-content:center; padding:45px; color:white; text-align:center; background:radial-gradient(circle at center,#284a83 0%,#121938 60%); }.player-surface .live-badge { top:20px; right:20px; }.play-orb { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 20px; padding-left:4px; color:var(--navy); border-radius:50%; background:var(--yellow); font-size:20px; }.player-surface p { margin:0; font:700 25px Montserrat,sans-serif; letter-spacing:-.04em; }.player-surface small { display:block; margin-top:11px; color:#bdc9e9; }.dialog-copy { padding:29px 34px 33px; }.dialog-copy h2 { margin:4px 0 8px; font-size:28px; }.dialog-copy>p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }.toast { position:fixed; z-index:9; right:22px; bottom:22px; max-width:330px; padding:14px 17px; color:white; border-radius:6px; background:var(--navy); box-shadow:0 12px 34px rgba(12,18,46,.28); font-size:13px; opacity:0; transform:translateY(13px); pointer-events:none; transition:opacity .22s ease,transform .22s ease; }.toast.visible { opacity:1; transform:none; }
::selection { color:var(--navy); background:var(--yellow); } :focus-visible { outline:3px solid var(--yellow); outline-offset:4px; } ::-webkit-scrollbar { width:11px; } ::-webkit-scrollbar-thumb { background:#9ba5bd; border:3px solid var(--paper); border-radius:10px; }
@media (max-width:820px) { .hero-shell{min-height:auto}.topbar{align-items:flex-start}.nav-meta{display:none}.hero-grid{grid-template-columns:1fr;gap:38px;padding:78px 0 58px}.event-card{max-width:440px}.room-grid{grid-template-columns:1fr 1fr}.feature{grid-column:span 2}.program{grid-template-columns:1fr;gap:35px}.program-intro>p:last-child{max-width:620px}.proof{padding-top:52px;padding-bottom:54px} }
@media (max-width:560px) { .hero-shell{padding-left:22px;padding-right:22px}.intro h1{font-size:45px}.lede{font-size:15px}.event-card{padding:23px}.room-grid{grid-template-columns:1fr}.feature{grid-column:auto}.feature .room-art{height:210px}.room-art{height:170px}.section-heading{display:block}.time{margin-top:13px}.live-section,.program{padding-left:22px;padding-right:22px}.live-section{padding-top:59px;padding-bottom:62px}.program{padding-top:59px;padding-bottom:68px}.slot{grid-template-columns:55px 1fr}.slot em{grid-column:2}.proof{gap:18px;padding-left:22px;padding-right:22px}.proof-icon{flex-basis:40px;width:40px;height:40px;font-size:20px}.proof h2{font-size:25px}.player-surface{min-height:280px;padding:35px 24px}.player-surface p{font-size:20px}.dialog-copy{padding:24px}.actions .button{width:100%;justify-content:space-between}.quiet{justify-content:center!important} }