/* Miss Cosmo 2026 · Vietnam Festination — Challenge 02 · The Cosmo CEO Challenge */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#040735}
[hidden]{display:none !important}
a{color:#ffc547}a:hover{color:#ffe3a1}
.mc-root{position:relative;overflow:hidden;color:#fff;font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:
radial-gradient(1100px 720px at 88% -4%,rgba(88,47,220,.85),transparent 62%),
radial-gradient(900px 640px at -6% 28%,rgba(38,70,239,.55),transparent 62%),
radial-gradient(760px 560px at 104% 50%,rgba(255,46,154,.22),transparent 62%),
radial-gradient(1000px 560px at 18% 74%,rgba(38,70,239,.5),transparent 65%),
linear-gradient(180deg,#040735 0%,#0a0f66 20%,#14188c 42%,#2a1a9e 60%,#1d2bb8 74%,#121f95 84%,#0a1470 100%)}
.mc-root *{box-sizing:border-box}
.mc-root a:focus-visible,.mc-root button:focus-visible{outline:3px solid #ffc547;outline-offset:3px}
.wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}

/* ---------- sky decor ---------- */
.sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars,.stars2{position:absolute;inset:0}
.stars{background-image:radial-gradient(1.2px 1.2px at 24px 36px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.85) 50%,transparent 51%),radial-gradient(1.6px 1.6px at 210px 180px,#d9e4ff 50%,transparent 51%),radial-gradient(1px 1px at 80px 236px,rgba(255,255,255,.7) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 262px 40px,#ffd6f0 50%,transparent 51%);background-size:300px 300px;opacity:.75;animation:mcTwinkle 5s ease-in-out infinite alternate}
.stars2{background-image:radial-gradient(2px 2px at 60px 120px,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 330px 260px,#cfe0ff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 470px 60px,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 190px 420px,#ffe1f4 50%,transparent 51%);background-size:540px 540px;opacity:.6;animation:mcTwinkle 7s ease-in-out infinite alternate-reverse}
.spark{position:absolute;color:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(160,190,255,.85));animation:mcSpark 3.6s ease-in-out infinite}
.spark svg{display:block;width:100%;height:100%}
.streak{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));transform:rotate(-16deg);transform-origin:right center;filter:drop-shadow(0 0 6px #bcd4ff)}
.shoot{position:absolute;width:240px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);filter:drop-shadow(0 0 6px #bcd4ff);opacity:0;animation:mcShoot 9s linear infinite}
.fw{position:absolute;width:240px;height:240px;margin:-120px 0 0 -120px;opacity:0;animation:mcBurst 3.6s cubic-bezier(.15,.7,.3,1) infinite}
.fw i{position:absolute;left:50%;top:50%;width:50%;height:2px;margin-top:-1px;transform-origin:0 50%;border-radius:2px;background:linear-gradient(90deg,transparent 15%,var(--c,#ff8fd4))}
.fw i::after{content:'';position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--c,#ff8fd4)}
.fw i.s{width:34%;opacity:.8}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:3;overflow:hidden;background:linear-gradient(90deg,#e3117f,#a72fe0 50%,#3f5bf0);box-shadow:0 1px 0 rgba(255,255,255,.25),0 8px 30px rgba(227,17,127,.35)}
.ticker-track{display:flex;width:max-content;animation:mcTicker 42s linear infinite}
.ticker-track span{white-space:nowrap;padding:12px 0;font-family:'Michroma',sans-serif;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.ticker-track b{color:#ffe08a;font-weight:400}

/* ---------- type ---------- */
.label{font-family:'Michroma',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#cadaff}
.chrome,.chrome-pink,.chrome-gold{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:mcSheen 7s ease-in-out infinite}
.chrome{background-image:linear-gradient(100deg,#ffffff 0%,#dfe8ff 16%,#9fc2ff 32%,#ffffff 45%,#e7dcff 57%,#a9b8ff 73%,#ffffff 100%);filter:drop-shadow(0 2px 0 rgba(40,30,140,.6)) drop-shadow(0 0 22px rgba(127,170,255,.45))}
.chrome-pink{background-image:linear-gradient(100deg,#ffe0f3 0%,#ff8fd4 20%,#ff2e9a 40%,#fff0fa 52%,#ff5cb8 66%,#ff9fdc 82%,#fff0fa 100%);filter:drop-shadow(0 2px 0 rgba(120,10,80,.55)) drop-shadow(0 0 26px rgba(255,46,154,.6))}
.chrome-gold{background-image:linear-gradient(100deg,#fff6d6 0%,#ffd76a 22%,#ffae1a 40%,#fffbe8 52%,#ffc547 66%,#ffe08a 82%,#fff6d6 100%);filter:drop-shadow(0 2px 0 rgba(120,60,0,.45)) drop-shadow(0 0 26px rgba(255,197,71,.55))}
.script{font-family:'Yellowtail',cursive;font-weight:400;color:#ff7ac8;text-shadow:0 0 18px rgba(255,46,154,.8),0 0 2px #fff}
.hl-gold{color:#ffc547;font-weight:800;text-shadow:0 0 14px rgba(255,197,71,.5)}
.hl-pink{color:#ff9fdc;font-weight:800;text-shadow:0 0 14px rgba(255,46,154,.45)}
.hl-white{color:#fff;font-weight:800}
.marker{padding:0 .12em;background-image:linear-gradient(transparent 58%,rgba(255,46,154,.6) 58%,rgba(255,46,154,.6) 94%,transparent 94%);background-repeat:no-repeat;background-size:0% 100%;animation:mcMark 1.1s .8s ease-out forwards}
.glow-pulse{animation:mcGlow 2.4s ease-in-out infinite}
.pop{display:inline-block;animation:mcPop 3s ease-in-out infinite}

/* ---------- blocks ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 22px 10px 12px;border-radius:999px;background:linear-gradient(90deg,#e3117f,#d41f9a 55%,#9b2fe0);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 10px 30px rgba(227,17,127,.45);font-weight:800;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.pill-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18)}
.glass{position:relative;border-radius:24px;background:linear-gradient(160deg,rgba(98,84,235,.44),rgba(52,40,170,.38));border:1px solid rgba(200,210,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 50px rgba(8,6,60,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.quote{margin:0;padding:14px 22px;border-left:4px solid #ffc547;background:linear-gradient(90deg,rgba(255,197,71,.16),transparent 85%);font-style:italic;font-weight:700;color:#ffd77a}
.ico{display:block;flex:none}

.mc-hero{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.notice-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.steps-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.step3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-width:0}
.facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.facts li{position:relative;padding-left:22px;font-size:17px;line-height:1.55;color:#e4e9ff}
.facts li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:#ff5cb8;box-shadow:0 0 10px #ff5cb8}

.vid-stage{position:relative;width:min(100%,420px);margin:0 auto}
.vid-back{position:absolute;inset:22px -20px -16px 22px;border-radius:36px;background:linear-gradient(160deg,rgba(160,180,255,.32),rgba(120,90,255,.16));border:1px solid rgba(255,255,255,.26);transform:rotate(5deg)}
.vid-frame{position:relative;padding:10px;border-radius:36px;background:linear-gradient(155deg,#ffffff 0%,#f4e6ff 36%,#ffb3e1 66%,#b8b0ff 100%);transform:rotate(-2.5deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 80px rgba(10,6,70,.65),0 0 70px rgba(255,79,179,.38)}
.vid-stage:hover .vid-frame{transform:rotate(0deg)}
.vid-frame video{display:block;width:100%;aspect-ratio:720/1274;object-fit:cover;border-radius:27px;background:#0a0f66}
.vid-tag{position:absolute;z-index:2;top:-16px;left:26px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#040735;border:1px solid rgba(255,143,212,.7);box-shadow:0 0 20px rgba(255,46,154,.45);font-family:'Michroma',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.rec{width:8px;height:8px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 10px #ff2e9a;animation:mcBlink 1.4s steps(2) infinite}
.seal{position:absolute;z-index:3;right:-62px;bottom:150px;width:128px;height:128px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
.seal-ring{transform-box:view-box;transform-origin:100px 100px;animation:mcSpin 16s linear infinite}
.drive-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-weight:700;font-size:15px;color:#ffc547;text-decoration:none;border-bottom:1px solid rgba(255,197,71,.45)}
.drive-link:hover{color:#ffe3a1;border-color:#ffe3a1}

.notice{position:relative;border-radius:30px;padding:3px;background:linear-gradient(115deg,#ffc547,#ff2e9a 25%,#8f7bff 50%,#5fd3ff 75%,#ffc547);background-size:300% 100%;animation:mcBorder 6s linear infinite;box-shadow:0 0 50px rgba(255,46,154,.38),0 0 100px rgba(95,211,255,.18)}
.notice-in{border-radius:27px;background:linear-gradient(160deg,#21169a 0%,#1c1390 45%,#0f0b62 100%);padding:clamp(22px,3vw,38px)}
.prep-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,197,71,.14);border:1px solid rgba(255,197,71,.6);font-family:'Michroma',sans-serif;font-size:11px;letter-spacing:.16em;color:#ffd77a;text-transform:uppercase}
.date-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 28px}
.date16{font-weight:900;line-height:.8;letter-spacing:-.05em}
.cd{display:flex;gap:10px;flex-wrap:wrap}
.cd-cell{min-width:78px;padding:12px 10px 10px;border-radius:16px;background:rgba(4,7,53,.6);border:1px solid rgba(255,197,71,.38);text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cd-num{display:block;font-size:36px;line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums;color:#fff}
.cd-unit{display:block;margin-top:4px;font-family:'Michroma',sans-serif;font-size:9.5px;letter-spacing:.16em;color:#ffd77a;text-transform:uppercase}
.warn{position:relative;overflow:hidden;display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:24px 26px;border-radius:22px;background:linear-gradient(100deg,#ffc547 0%,#ffa6d4 50%,#ff6cc0 100%);color:#22073f;box-shadow:0 14px 40px rgba(255,92,184,.4)}
.warn::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:mcSweep 4.8s ease-in-out infinite;pointer-events:none}
.warn-ico{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:16px;background:#22073f;color:#ffc547}

.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,24px);padding:clamp(20px,2.4vw,30px)}
.step-num{font-weight:900;font-style:italic;font-size:clamp(44px,4.4vw,60px);line-height:.9;letter-spacing:-.03em}
.step-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#ffc547;flex:none}
.acct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.acct{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px;border-radius:18px;background:rgba(4,7,53,.55);border:1px solid rgba(200,210,255,.24);text-decoration:none;color:#fff;transition:transform .25s,border-color .25s,box-shadow .25s}
.acct:hover{transform:translateY(-3px);border-color:#ff8fd4;box-shadow:0 0 28px rgba(255,46,154,.4);color:#fff}
.acct-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ff2e9a,#6a4bff);color:#fff}
.acct-ico.gold{background:linear-gradient(135deg,#ffc547,#ff7ac8);color:#22073f}
.tag{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;font-weight:800;font-size:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,143,212,.6);color:#ffe0f3;box-shadow:0 0 16px rgba(255,46,154,.18)}
.copy-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:#ffc547;color:#22073f;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.copy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,197,71,.45)}
.subcard{border-radius:18px;background:rgba(4,7,53,.42);border:1px solid rgba(200,210,255,.18);padding:18px 20px}

/* ---------- finale + sea ---------- */
.finale{position:relative;z-index:2;margin-top:clamp(80px,10vw,150px)}
.finale-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1080px;margin:0 auto clamp(48px,6vw,80px)}
.mm{margin:0;text-align:center;text-transform:uppercase;line-height:.95}
.mm-1{display:block;font-weight:900;font-style:italic;font-size:clamp(44px,9.4vw,140px);letter-spacing:-.015em;white-space:nowrap}
.mm-2{display:block;margin:.3em auto 0;max-width:15em;font-weight:900;font-size:clamp(26px,5vw,76px);letter-spacing:.005em;text-wrap:balance}
.mm-crown{display:inline-block;vertical-align:.55em;width:.42em;height:.42em;margin-right:.08em;color:#ffc547;filter:drop-shadow(0 0 14px rgba(255,197,71,.7))}
.mm-fire{display:inline-block;vertical-align:-.05em;width:.9em;height:.9em;margin-left:.15em;color:#ff7a3c;filter:drop-shadow(0 0 14px rgba(255,122,60,.8))}
.isles{display:block;width:100%;height:clamp(28px,4vw,56px);margin-top:clamp(18px,2.5vw,34px)}
.horizon{position:relative;z-index:2;height:2px;background:linear-gradient(90deg,transparent,#9fd8ff 18%,#ffffff 50%,#ffb3e1 82%,transparent);box-shadow:0 0 18px 4px rgba(150,210,255,.55),0 0 70px 14px rgba(255,143,212,.22)}
.water{position:relative;overflow:hidden;background:linear-gradient(180deg,#2550f0 0%,#1838c9 12%,#0f2394 34%,#0a1872 58%,#061050 80%,#040a3c 100%)}
.water::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(180deg,transparent 0 9px,rgba(190,220,255,.15) 9px 10px,transparent 10px 18px);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%);animation:mcTide 3.6s linear infinite}
.water::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(2.5px 1px at 30px 14px,#fff 50%,transparent 51%),radial-gradient(3px 1px at 120px 40px,#ffd3ee 50%,transparent 51%),radial-gradient(2px 1px at 80px 70px,#cfe6ff 50%,transparent 51%),radial-gradient(3px 1px at 160px 96px,#fff 50%,transparent 51%);background-size:190px 110px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 60%);mask-image:linear-gradient(180deg,#000 0%,transparent 60%);animation:mcGlitter 2.4s steps(4) infinite}
.reflect-wrap{position:relative;height:clamp(130px,15vw,250px);overflow:hidden}
.reflect{transform:scaleY(-1);transform-origin:center center;opacity:.42;filter:blur(1.4px);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 62%);mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 62%);animation:mcWave 4.5s ease-in-out infinite}
.glint{position:absolute;top:0;z-index:1;width:90px;height:100%;background:linear-gradient(180deg,rgba(255,143,212,.6),transparent 85%);filter:blur(10px);animation:mcFlicker 2.6s ease-in-out infinite}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.foot-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(200,210,255,.25);color:#fff;text-decoration:none;font-weight:700;font-size:15px;transition:border-color .2s,background .2s}
.foot-link:hover{color:#fff;border-color:#ff8fd4;background:rgba(255,46,154,.14)}

/* ---------- motion ---------- */
@keyframes mcTwinkle{from{opacity:.35}to{opacity:.9}}
@keyframes mcSpark{0%,100%{transform:scale(.5) rotate(0deg);opacity:.4}50%{transform:scale(1) rotate(22deg);opacity:1}}
@keyframes mcShoot{0%{transform:translate(0,0) rotate(-16deg);opacity:0}3%{opacity:1}20%{transform:translate(780px,-224px) rotate(-16deg);opacity:0}100%{transform:translate(780px,-224px) rotate(-16deg);opacity:0}}
@keyframes mcBurst{0%{transform:scale(.06);opacity:0}8%{opacity:1}55%{opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes mcTicker{to{transform:translateX(-50%)}}
@keyframes mcSheen{0%{background-position:100% 0}50%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes mcMark{to{background-size:100% 100%}}
@keyframes mcGlow{0%,100%{text-shadow:0 0 10px rgba(255,197,71,.35)}50%{text-shadow:0 0 22px rgba(255,197,71,.95),0 0 40px rgba(255,46,154,.5)}}
@keyframes mcPop{0%,68%,100%{transform:scale(1) rotate(-4deg)}76%{transform:scale(1.16) rotate(3deg)}84%{transform:scale(.95) rotate(-6deg)}92%{transform:scale(1.04) rotate(-3deg)}}
@keyframes mcBlink{to{opacity:.2}}
@keyframes mcSpin{to{transform:rotate(360deg)}}
@keyframes mcBorder{to{background-position:300% 0}}
@keyframes mcSweep{0%,58%{left:-40%}100%{left:135%}}
@keyframes mcTide{to{background-position:0 18px}}
@keyframes mcGlitter{0%{background-position:0 0}25%{background-position:-47px 3px}50%{background-position:-95px -2px}75%{background-position:-142px 2px}100%{background-position:-190px 0}}
@keyframes mcWave{0%,100%{transform:scaleY(-1) skewX(0deg) translateX(0)}50%{transform:scaleY(-1.04) skewX(-1.2deg) translateX(4px)}}
@keyframes mcFlicker{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.mc-root *,.mc-root *::before,.mc-root *::after{animation:none !important}.mc-root .marker{background-size:100% 100%}.mc-root .fw,.mc-root .shoot{display:none}}

/* ---------- responsive ---------- */
@media (max-width:1040px){.mc-hero{grid-template-columns:minmax(0,1fr)}.notice-grid{grid-template-columns:minmax(0,1fr)}.step3-grid{grid-template-columns:minmax(0,1fr)}.vid-stage{width:min(100%,380px)}.seal{right:-40px}}
@media (max-width:1040px){.hero-text{order:-1}}
@media (max-width:720px){.step{grid-template-columns:minmax(0,1fr)}.step-head{flex-direction:row !important;justify-content:flex-start}.warn{flex-direction:column;padding:20px}.vid-tag{font-size:9px;letter-spacing:.12em;left:16px}.subcard{padding:14px}.acct{gap:10px;padding:12px}.acct > svg:last-child{display:none}.pill{font-size:16px}.steps-2{grid-template-columns:minmax(0,1fr)}.finale-lead{grid-template-columns:minmax(0,1fr)}.seal{width:104px;height:104px;right:-6px;bottom:70px}.mm-1{white-space:normal}.hdr-right{text-align:left !important}}