/* Gradient Summit 2027 — V3 "Glass Tide"
   Real surf and water photography, frosted-glass UI, oversized type that sits behind a real wave.
   Same brand colors, logo and fonts (Titan One + Poppins). Content is unchanged from V1. */
:root {
  --sky: #8ecae5; --teal: #219ebc; --deep: #126782; --navy: #033a66; --ink: #021f3d;
  --sun: #ffb703; --orange: #fb8400; --pink: #ff007c; --blush: #ff92cd;
  --peach: linear-gradient(120deg, #ffc24d 0%, #ffa24f 62%, #ff95ad 100%);   /* the softer orange-to-pink used on buttons and type */
  --peach-text: linear-gradient(95deg, #ffd07a 0%, #ffb067 55%, #ff9fb8 100%);
  --display: "Titan One", system-ui, sans-serif;
  --glass-border: rgba(255, 255, 255, .3);
  --blur: blur(18px) saturate(1.6);
  --logo-color: #033a66;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: Poppins, system-ui, sans-serif; color: #fff; background: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: 1; }
h2 { font-size: clamp(2.5rem, 6.4vw, 5.4rem); margin-bottom: 16px; text-shadow: 0 6px 40px rgba(2, 20, 50, .35); }
h3 { font-size: 1.35rem; margin-bottom: 6px; }

/* ---------- frosted glass ---------- */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .13));
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 50px rgba(2, 20, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; }
.narrow { max-width: 900px; }
.center { text-align: center; }
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; isolation: isolate; overflow: hidden; }
.section-sub { color: rgba(255, 255, 255, .85); font-size: 1.1rem; margin-bottom: 44px; max-width: 640px; }
.center .section-sub { margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; color: #ffd07a; margin-bottom: 14px; }
.script { background: var(--peach-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* photographic sections: real image, deep-ocean wash that fades into its neighbours */
.photo-sec::before { content: ""; position: absolute; inset: -6% 0; z-index: -2; background: var(--bg) center calc(50% + var(--py, 0px)) / cover no-repeat; }
.photo-sec::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(2, 31, 61, .74) 16%, rgba(2, 31, 61, .6) 50%, rgba(2, 31, 61, .8) 86%, var(--ink) 100%); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; color: #3a1e00;
  background: var(--peach); box-shadow: 0 8px 22px rgba(255, 162, 79, .3), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .15s, box-shadow .15s, filter .15s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-130%); transition: transform .7s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 28px rgba(255, 162, 79, .4), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:hover::after { transform: translateX(130%); }
.btn-sm { padding: 9px 20px; font-size: .9rem; }
.btn-lg { padding: 20px 46px; font-size: 1.2rem; }
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.btn-ghost.dark { color: var(--navy); border-color: rgba(3, 58, 102, .4); background: rgba(3, 58, 102, .05); box-shadow: none; }
.btn-ghost.dark:hover { background: rgba(3, 58, 102, .1); }
.btn:focus-visible, .slat:focus-visible, .tab:focus-visible, a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* ---------- floating glass nav ---------- */
.nav { position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%); width: min(1160px, calc(100% - 28px)); display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 8px 10px 8px 20px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); transition: background .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(2, 31, 61, .55); box-shadow: 0 14px 40px rgba(2, 20, 50, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; width: auto; }
.nav nav { display: flex; gap: 26px; }
.nav nav a { text-decoration: none; font-size: .88rem; font-weight: 500; opacity: .88; }
.nav nav a:hover { opacity: 1; }

/* ---------- hero: giant type tucked behind a real wave ---------- */
.hero { position: relative; min-height: max(100svh, 760px); overflow: hidden; isolation: isolate; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; z-index: -6; background: url("assets/photo/horizon.jpg") 62% 66% / cover no-repeat; }
.hero-video { position: absolute; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s; }
.hero-video.playing { opacity: 1; }
.hero-video iframe { position: absolute; top: 50%; left: 50%; border: 0; width: max(100vw, 177.78vh); height: max(56.25vw, 100vh); transform: translate(-50%, -50%); }
.hero-sky { position: absolute; inset: 0; z-index: -4; mix-blend-mode: multiply;
  background: linear-gradient(180deg, #3fb2e8 0%, #8ecae5 26%, #ffd7a3 46%, #ff9fc4 60%, #f2f8fb 78%, #fff 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 31, 61, 0) 0%, rgba(2, 31, 61, .7) 55%, var(--ink) 100%); }
.hero-text { position: absolute; z-index: 3; left: clamp(16px, 4vw, 60px); right: 0; top: clamp(92px, 15vh, 150px); }
.hero-title { text-shadow: none; }
.hero-title .ht-a { display: block; font-size: clamp(1.5rem, 4.6vw, 4rem); color: #fff; text-shadow: 0 6px 40px rgba(3, 58, 102, .45); }
.hero-title .ht-b { display: block; margin: .06em 0 0 -.03em; font-size: clamp(6.5rem, 26vw, 25rem); line-height: .78; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 8%, #ffeccc 55%, #ffc8d9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 18px 50px rgba(255, 120, 70, .3)); }
.hero-wave { max-width: none; position: absolute; z-index: 4; right: -3%; bottom: -4%; width: min(74vw, 1180px); height: auto; pointer-events: none; filter: drop-shadow(0 40px 60px rgba(2, 20, 50, .5));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); will-change: transform; }
.hero-ui { position: absolute; z-index: 6; left: clamp(14px, 4vw, 60px); bottom: clamp(26px, 7vh, 70px); width: min(470px, calc(100% - 28px)); padding: 22px; border-radius: 30px; display: grid; gap: 16px; }
.hero-logo { width: min(210px, 56%); filter: drop-shadow(0 4px 18px rgba(2, 20, 50, .4)); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.countdown div { text-align: center; padding: 10px 4px; border-radius: 16px; background: rgba(2, 31, 61, .35); border: 1px solid rgba(255, 255, 255, .22); }
.countdown b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.1; }
.countdown span { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ---------- marquee strip ---------- */
.marquee { position: relative; z-index: 7; margin-top: -30px; overflow: hidden; background: rgba(255, 255, 255, .12); border-block: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 10px 40px rgba(2, 20, 50, .35); }
.marquee-track { display: flex; width: max-content; padding: 15px 0; animation: scroll 32s linear infinite; }
.marquee span { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 1.3rem; white-space: nowrap; background: var(--peach-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee i { flex: none; width: 10px; height: 10px; margin: 0 30px; align-self: center; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 14px rgba(255, 255, 255, .7); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- why attend: glass stats + tall photo slats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 38px; }
.stats div { text-align: center; padding: 26px 12px 20px; border-radius: 26px; }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; background: var(--peach-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; opacity: .85; }
.cards.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border-radius: 30px; padding: 12px 12px 28px; transition: transform .35s; }
.card:hover { transform: translateY(-8px); }
.slat-img { aspect-ratio: 3 / 4; margin-bottom: 20px; border-radius: 22px; background: var(--img) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

.card h3 { padding: 0 14px; font-size: 1.9rem; background: var(--peach-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card p { padding: 0 14px; color: rgba(255, 255, 255, .86); }

/* ---------- gallery: expanding photo slats ---------- */
.slats { display: flex; gap: 10px; max-width: 1560px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 40px); height: clamp(400px, 66vh, 620px); }
.slat { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 28px; border: 1px solid var(--glass-border); cursor: pointer;
  box-shadow: 0 20px 50px rgba(2, 20, 50, .45); transition: flex .75s cubic-bezier(.2, .7, .2, 1); }
.slat img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.slat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(2, 31, 61, .55)); pointer-events: none; }
.slat figcaption { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: .85rem; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.slat:hover, .slat:focus-visible, .slat:focus-within { flex: 5; }
.slats:not(:hover):not(:focus-within) .slat:nth-child(3) { flex: 5; }
.slat:hover img, .slat:focus-visible img { transform: scale(1); }
.slats:not(:hover):not(:focus-within) .slat:nth-child(3) img { transform: scale(1); }
.slat:hover figcaption, .slat:focus-visible figcaption, .slats:not(:hover):not(:focus-within) .slat:nth-child(3) figcaption { opacity: 1; transform: none; }

/* ---------- speakers ---------- */
.speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.speaker { padding: 12px; border-radius: 30px; transition: transform .35s;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .12)); border: 1px solid var(--glass-border);
  box-shadow: 0 18px 50px rgba(2, 20, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .45); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.speaker:hover { transform: translateY(-8px); }
.speaker .photo { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; display: grid; place-items: center; font-family: var(--display); font-size: 3.6rem; color: rgba(255, 255, 255, .92);
  background: linear-gradient(145deg, var(--sky), var(--teal) 55%, var(--navy)); }
.speaker:nth-child(3n+2) .photo { background: linear-gradient(145deg, #ffd07a, var(--orange)); }
.speaker:nth-child(3n) .photo { background: linear-gradient(145deg, var(--blush), #ff5fa8); }
.speaker .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.speaker .info { padding: 16px 8px 8px; }
.speaker h3 { font-size: 1.3rem; }
.speaker p { color: rgba(255, 255, 255, .82); font-size: .92rem; line-height: 1.4; }
.speaker .tag { display: inline-block; margin-top: 12px; padding: 5px 13px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3a1e00; background: var(--peach); }

/* ---------- agenda ---------- */
.agenda-panel { padding: clamp(18px, 3.5vw, 40px); border-radius: 34px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { font: inherit; font-weight: 600; color: #fff; padding: 10px 22px; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); transition: background .2s; }
.tab:hover { background: rgba(255, 255, 255, .2); }
.tab[aria-selected="true"] { color: #3a1e00; background: var(--peach); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.day-title { margin: 0 0 24px; font-size: 1.5rem; background: var(--peach-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timeline { list-style: none; padding: 0; border-left: 2px dashed rgba(255, 255, 255, .35); margin-left: 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; padding: 0 0 22px 28px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 4px rgba(255, 183, 3, .22), 0 0 16px rgba(255, 183, 3, .6); }
.timeline time { justify-self: start; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #ffd07a; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.timeline h3 { margin: 2px 0 0; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1.08rem; }
.timeline p { color: rgba(255, 255, 255, .8); font-size: .92rem; }

/* ---------- venue ---------- */
.venue-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.venue-copy { padding: clamp(24px, 4vw, 44px); border-radius: 34px; }
.venue-copy h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.venue-copy p { color: rgba(255, 255, 255, .88); margin: 14px 0 18px; }
.checks { list-style: none; padding: 0; margin-bottom: 26px; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 9px; color: rgba(255, 255, 255, .92); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #3a1e00; background: var(--peach); }
.collage { position: relative; height: clamp(380px, 46vw, 520px); }
.collage img { position: absolute; object-fit: cover; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 26px 60px rgba(2, 20, 50, .5), 0 0 0 8px rgba(255, 255, 255, .12); }
.collage .c1 { width: 80%; height: 66%; right: 0; top: 0; }
.collage .c2 { width: 52%; height: 44%; left: 0; bottom: 0; z-index: 2; }
.collage .c3 { width: 40%; height: 32%; right: 3%; bottom: 3%; z-index: 3; }

/* ---------- sponsors: bright air, waves breaking into white ---------- */
.sponsors-sec { background: #fff; color: var(--navy); }
.sponsors-sea { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 440px; background: url("assets/photo/horizon.jpg") 40% 74% / cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%); opacity: .5; }
.sponsors-sec::before, .sponsors-sec::after { content: ""; position: absolute; left: 0; right: 0; height: 90px; z-index: 1; pointer-events: none; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V40C1050 85 950 85 800 40S550 -5 400 40 150 85 0 40Z'/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V40C1050 85 950 85 800 40S550 -5 400 40 150 85 0 40Z'/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
  animation: swell 18s linear infinite; }
.sponsors-sec::before { top: -1px; }
.sponsors-sec::after { bottom: -1px; transform: scaleY(-1); animation-direction: reverse; }
@keyframes swell { to { -webkit-mask-position: 1200px 0; mask-position: 1200px 0; } }
.sponsors-sec h2 { color: var(--navy); text-shadow: none; }
.sponsors-sec .section-sub { color: rgba(3, 58, 102, .75); }
.sponsors-sec .wrap { padding-top: 30px; padding-bottom: 30px; }
.tier { margin-bottom: 52px; }
.tier h3 { display: table; margin: 0 auto 22px; padding: 7px 24px; border-radius: 999px; font-family: Poppins, sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--deep);
  background: rgba(33, 158, 188, .1); border: 1px solid rgba(33, 158, 188, .35); }
.logos { display: flex; flex-wrap: wrap; gap: 28px 46px; justify-content: center; align-items: center; }
.logo-tile { display: grid; place-items: center; }
.logo-tile .sp-logo { display: block; width: 100%; height: 100%; background-color: var(--logo-color); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: transform .25s; }
.logo-tile:hover .sp-logo { transform: scale(1.06); }
.tier.xl .logo-tile { width: 230px; height: 96px; }
.tier.lg .logo-tile { width: 260px; height: 104px; }
.tier.md .logo-tile { width: 190px; height: 76px; }
.tier.sm .logo-tile { width: 150px; height: 58px; }
.tier.xs .logo-tile { width: 130px; height: 50px; }
.center .btn-ghost.dark { margin-top: 10px; }

/* ---------- game section ---------- */
.game-sec .section-sub { margin-bottom: 36px; }

/* ---------- register ---------- */
.cta { padding: clamp(110px, 16vw, 220px) 0; }
.cta::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(2, 31, 61, .35) 28%, rgba(2, 31, 61, .25) 60%, var(--ink) 100%); }
.cta h2 { font-size: clamp(2.8rem, 9vw, 8rem); line-height: .92; max-width: 1000px; margin-inline: auto; }
.cta .section-sub { margin-bottom: 34px; font-size: 1.25rem; }

/* ---------- footer ---------- */
.footer { padding: 0 0 36px; background: var(--ink); }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: 32px; }
.footer p { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.footer .logo img { height: 52px; margin-bottom: 8px; }
.small { font-size: .85rem; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav nav { display: none; }
  .nav { padding-left: 16px; }
  .venue-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cards.three { grid-template-columns: 1fr; }
  .slat-img { aspect-ratio: 16 / 11; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .hero-wave { width: 118vw; right: -26vw; bottom: 8%; opacity: .96; }
  .hero-text { top: clamp(84px, 12vh, 120px); }
}
@media (max-width: 760px) {
  .slats { overflow-x: auto; scroll-snap-type: x mandatory; height: 420px; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .slat, .slat:hover, .slats:not(:hover):not(:focus-within) .slat:nth-child(3) { flex: 0 0 76%; scroll-snap-align: center; }
  .slat img { transform: none; }
  .slat figcaption { opacity: 1; transform: none; }
  .hero-ui { padding: 16px; gap: 12px; border-radius: 26px; }
  .hero-logo { width: 130px; }
  .countdown div { padding: 8px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .slat, .slat img, .btn, .card, .speaker { transition: none; }
}

/* let the real photography breathe behind the glass panels */
.venue::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(2, 31, 61, .45) 16%, rgba(2, 31, 61, .28) 50%, rgba(2, 31, 61, .55) 88%, var(--ink) 100%); }
.agenda-sec::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(2, 31, 61, .5) 16%, rgba(2, 31, 61, .36) 50%, rgba(2, 31, 61, .62) 88%, var(--ink) 100%); }
@media (max-width: 960px) { .hero-wave { width: 150vw; right: -40vw; bottom: 38%; } }
@media (max-width: 960px) and (min-height: 1000px) { .hero-wave { bottom: 30%; } }

/* =====================================================================
   V4: the glass look from V3 with V1's bright gradient personality brought back:
   glowing gradient orbs, the tilted sun-to-pink banner, animated wave dividers,
   a sunset gallery and light sky-blue sections between the dark photo sections.
   ===================================================================== */
.wrap { z-index: 2; }

/* V1 gradient orbs (they refract through the glass cards) */
.orb { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255, 255, 255, .28); }
.orb.o1 { width: 520px; height: 520px; left: -170px; top: -140px; background: linear-gradient(150deg, var(--orange), var(--sun) 35%, rgba(3, 58, 102, 0) 72%); animation: orbfloat 12s ease-in-out infinite alternate; }
.orb.o2 { width: 620px; height: 620px; right: -220px; bottom: -200px; background: linear-gradient(210deg, var(--pink), var(--blush) 30%, rgba(3, 58, 102, 0) 70%); animation: orbdrift 15s ease-in-out infinite alternate; }
.venue .orb.o1 { background: linear-gradient(150deg, var(--teal), var(--sky) 35%, rgba(3, 58, 102, 0) 72%); }
.hero .orb.o1 { z-index: -3; width: min(46vw, 640px); height: min(46vw, 640px); left: auto; right: 9%; top: 7%; opacity: .95;
  background: linear-gradient(150deg, rgba(255, 194, 77, .95), rgba(251, 132, 0, .8) 45%, rgba(255, 0, 124, .25) 85%); }
.hero .orb.o2 { display: none; }
@keyframes orbfloat { from { transform: translate(0, 0) rotate(0); } to { transform: translate(40px, -30px) rotate(12deg); } }
@keyframes orbdrift { from { transform: translate(0, 0); } to { transform: translate(-50px, 40px); } }

/* V1 banner: tilted sun / orange / pink strip, now with a glass sheen */
.marquee { margin: -22px 0; padding: 0; transform: rotate(-1.2deg) scale(1.03); border: 0; color: #3a1e00;
  background: linear-gradient(90deg, var(--sun), var(--orange), var(--pink), var(--orange), var(--sun)); background-size: 200% 100%; animation: bannershift 8s linear infinite alternate;
  box-shadow: 0 10px 34px rgba(2, 20, 50, .4), inset 0 1px 0 rgba(255, 255, 255, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.marquee::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.marquee span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #3a1e00; }
.marquee i { background: #fff; box-shadow: none; }
@keyframes bannershift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.hero::after { height: 28%; }

/* V1 animated wave dividers (inserted by script.js) */
.has-wave { position: relative; }
.wave-divider { position: absolute; left: 0; right: 0; top: -1px; height: 90px; pointer-events: none; z-index: 3; overflow: hidden; }
.wave-divider i { position: absolute; inset: 0; background: var(--wave, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V40C1050 85 950 85 800 40S550 -5 400 40 150 85 0 40Z'/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V40C1050 85 950 85 800 40S550 -5 400 40 150 85 0 40Z'/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
  animation: wavemove 14s linear infinite; }
.wave-divider i:nth-child(1) { opacity: .35; animation-duration: 22s; animation-direction: reverse; transform: translateY(-6px); }
.wave-divider i:nth-child(2) { opacity: .6; animation-duration: 17s; transform: translateY(-2px); }
@keyframes wavemove { to { -webkit-mask-position: 1200px 0; mask-position: 1200px 0; } }

/* V1 sunset gallery: the real aerial water, washed in sun / orange / pink */
.gallery::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(251, 132, 0, .62) 13%, rgba(255, 160, 60, .5) 45%, rgba(255, 60, 140, .72) 100%); }
.gallery h2 .script { background: linear-gradient(95deg, #fff, #ffe8bd); -webkit-background-clip: text; background-clip: text; }
.gallery .section-sub { color: rgba(255, 255, 255, .95); }

/* V1 light sky-blue sections (speakers, agenda) with real water fading in at the top */
.light-sec { color: var(--navy); background: linear-gradient(180deg, #eaf6fb, #d4ecf7); }
.light-sec::before { inset: 0 0 auto 0; height: 560px; opacity: .55; background-position: center 40%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.light-sec::after { background: none; }
.light-sec h2 { color: var(--navy); text-shadow: none; }
.light-sec .section-sub { color: rgba(3, 58, 102, .78); }
.agenda-sec { background: #fff; }
.light-sec .speaker, .light-sec .agenda-panel { background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 50px rgba(3, 58, 102, .16), inset 0 1px 0 #fff; color: var(--navy); }
.light-sec .speaker p { color: rgba(3, 58, 102, .78); }
.light-sec .speaker h3 { color: var(--navy); }
.light-sec .tab { color: var(--navy); background: rgba(255, 255, 255, .6); border-color: rgba(3, 58, 102, .25); }
.light-sec .tab:hover { background: #fff; }
.light-sec .tab[aria-selected="true"] { color: #3a1e00; background: var(--peach); border-color: transparent; }
.light-sec .day-title { background: linear-gradient(95deg, #f59a1e, #f06a8c); -webkit-background-clip: text; background-clip: text; }
.light-sec .timeline { border-left-color: rgba(3, 58, 102, .3); }
.light-sec .timeline time { color: #b86a00; background: rgba(255, 183, 3, .18); border-color: rgba(255, 183, 3, .5); }
.light-sec .timeline h3 { color: var(--navy); }
.light-sec .timeline p { color: rgba(3, 58, 102, .75); }
.light-sec .orb { opacity: .35; }
.speakers-sec .orb.o1 { background: linear-gradient(150deg, var(--blush), var(--sun) 40%, rgba(255, 255, 255, 0) 72%); }
@media (prefers-reduced-motion: reduce) { .orb, .marquee, .wave-divider i { animation: none !important; } }
.gallery::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(251, 132, 0, .62) 13%, rgba(255, 160, 60, .5) 45%, rgba(255, 79, 158, .88) 86%, #ff4f9e 100%); }
@media (max-width: 960px) { .hero-wave { bottom: clamp(4%, calc(100svh - 138vw), 38%); } }

/* =====================================================================
   Edits: gallery photo viewer, three speakers, Gradient Reserve, Celebrations
   ===================================================================== */
.nav nav { gap: 20px; } .nav nav a { font-size: .82rem; }
@media (max-width: 1180px) { .nav nav { display: none; } }

/* gallery: featured photo viewer (replaces the tall expanding slats) */
.viewer { max-width: 1060px; margin: 0 auto; padding: 14px; border-radius: 36px; }
.viewer-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 60px rgba(2, 20, 50, .45); }
.vslide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.vslide.is-active { opacity: 1; z-index: 1; }
.vslide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s ease-out; }
.vslide.is-active img { transform: scale(1); }
.vslide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(2, 31, 61, .5)); pointer-events: none; }
.vslide figcaption { position: absolute; z-index: 2; left: 20px; bottom: 20px; padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.vcount { position: absolute; z-index: 3; right: 20px; bottom: 20px; padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.vcount b { font-family: var(--display); font-weight: 400; color: #ffd07a; }
.vbtn { position: absolute; z-index: 3; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s, transform .15s; }
.vbtn:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
.vbtn svg { width: 24px; height: 24px; }
.vprev { left: 16px; } .vnext { right: 16px; }
.vbtn:focus-visible, .vthumb:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.vthumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.vthumb { flex: 0 0 auto; width: 108px; aspect-ratio: 3 / 2; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: none; border: 2px solid rgba(255, 255, 255, .3); opacity: .72; transition: opacity .2s, border-color .2s, transform .2s; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb:hover { opacity: 1; }
.vthumb.is-active { opacity: 1; border-color: #ffc24d; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 194, 77, .35); }
@media (max-width: 760px) { .viewer { padding: 10px; border-radius: 28px; } .viewer-stage { aspect-ratio: 4 / 3; border-radius: 20px; } .vbtn { width: 44px; height: 44px; margin-top: -22px; } .vthumb { width: 84px; } }
@media (prefers-reduced-motion: reduce) { .vslide, .vslide img { transition: none; } }

/* three featured speakers */
.speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin: 0 auto; }
@media (max-width: 900px) { .speakers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 520px; } }

/* Gradient Reserve (VIP day before) */
.reserve .section-sub { max-width: 720px; }
.activities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.activity { display: flex; flex-direction: column; padding: 12px; border-radius: 32px; transition: transform .35s; }
.activity:hover { transform: translateY(-8px); }
.activity-img { aspect-ratio: 4 / 3; border-radius: 22px; background: var(--img) center / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.activity-body { padding: 20px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.activity-date { align-self: flex-start; padding: 5px 14px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3a1e00; background: var(--peach); }
.activity h3 { font-size: 1.6rem; line-height: 1.05; }
.activity-body p:last-child { color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.6; }
@media (max-width: 1000px) { .activities { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Celebrations: awards dinner, "Beneath the Waves" */
.celebrations::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(2, 31, 61, .42) 16%, rgba(2, 31, 61, .3) 55%, rgba(2, 31, 61, .62) 90%, var(--ink) 100%); }
.celebrations::before { background-position: center calc(40% + var(--py, 0px)); }
.cel-theme { font-family: var(--display); font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1; text-transform: uppercase; margin: -4px 0 16px;
  background: linear-gradient(95deg, #bff3ff, #8ecae5 45%, #ffd9ec); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 28px rgba(2, 20, 50, .55)); }
.cel-times { list-style: none; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 54px; border-radius: 30px; }
.cel-times li { display: grid; gap: 4px; padding: 18px 22px; border-radius: 22px; background: rgba(2, 31, 61, .28); border: 1px solid rgba(255, 255, 255, .18); }
.cel-times time { color: #ffd07a; font-weight: 600; font-size: .9rem; letter-spacing: .04em; }
.cel-times span { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.attire-title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 18px; }
.attire-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.attire-spot { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; display: grid; place-items: center; text-align: center; border-style: dashed; border-width: 2px; border-color: rgba(255, 255, 255, .55); }
.attire-spot figcaption { padding: 0 16px; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.attire-spot figcaption::before { content: "+"; display: block; margin-bottom: 8px; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #ffd07a; letter-spacing: 0; }
.attire-spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.attire-spot:has(img) { border-style: solid; border-width: 1px; }
.attire-spot:has(img) figcaption { display: none; }
@media (max-width: 900px) { .cel-times { grid-template-columns: 1fr; } .attire-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- content update: four pillars, reserve dates, dress code ---- */
.cards.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards.four .slat-img { aspect-ratio: 4 / 5; }
.cards.four .card h3 { font-size: 1.6rem; }
.card .card-tag { padding: 0 14px; margin: 2px 0 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.02rem; line-height: 1.15; color: #fff; }
.cards.four .card p:last-child { font-size: .93rem; }
@media (max-width: 1100px) { .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards.four { grid-template-columns: 1fr; } }
.reserve-dates { display: flex; flex-wrap: wrap; gap: 10px; margin: -18px 0 40px; }
.reserve-dates span { padding: 8px 20px; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.dress-code { max-width: 760px; margin: -6px 0 22px; color: rgba(255, 255, 255, .92); }
.dress-code strong { color: #ffd07a; }

/* nav: the horizontal wordmark, bigger than the full badge logo */
.nav .logo img { height: 50px; width: auto; filter: drop-shadow(0 2px 8px rgba(2, 20, 50, .35)); }
.nav { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 760px) { .nav .logo img { height: 42px; } }

[hidden] { display: none !important; }
.sponsors-sec .logo-tile .sp-logo { scale: var(--s, 1); }