/* ===== 55five — lapisan tampilan gaming (dimuat setelah style.css) ===== */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-700.woff2) format("woff2")}

:root{
  --neon:#ff2d55; --neon-2:#ff6a3d; --cyan:#22d3ee; --gold:#ffc857;
  --ink:#07060a; --ink-2:#0f0c12; --ink-3:#17121a; --line:#2a2030;
  --display:"Chakra Petch",system-ui,sans-serif;
  --cut:14px;
}
body{background:var(--ink);background-image:radial-gradient(circle at 20% 0%,rgba(255,45,85,.08),transparent 40%),radial-gradient(circle at 90% 30%,rgba(34,211,238,.05),transparent 35%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

h1,h2,h3,.brand,.btn,.kicker,.eyebrow,.status,.faq summary,.ticker,.hud,.quest-label{font-family:var(--display)}
h1,h2{text-transform:uppercase;letter-spacing:-.01em}
h3{letter-spacing:.01em}

/* Header */
.site-header{background:rgba(7,6,10,.82);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--neon),transparent) 1}
.brand{text-transform:uppercase;letter-spacing:.02em}
.brand-mark{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);border-radius:0;background:linear-gradient(145deg,var(--neon),#a3001f);box-shadow:none}
.nav-links a{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.88rem;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--neon);transform:scaleX(0);transition:transform .2s;box-shadow:0 0 8px var(--neon)}
.nav-links a:hover::after{transform:scaleX(1)}

/* Tombol bersudut + kilau */
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));position:relative;overflow:hidden}
.btn-sm{--cut:9px}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover::before{left:120%}
.btn-primary{background:linear-gradient(135deg,var(--neon),var(--neon-2));box-shadow:none;filter:drop-shadow(0 0 12px rgba(255,45,85,.45))}
.btn-primary:hover{background:linear-gradient(135deg,#ff4d6d,#ff8a5c)}
.btn-ghost{background:rgba(255,255,255,.04);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}
.btn-tg{box-shadow:none;filter:drop-shadow(0 0 10px rgba(34,158,217,.45))}
.btn .play{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* Hero */
.hero{background:linear-gradient(180deg,#0b0710 0%,#1a0614 55%,#07060a 100%);min-height:min(92vh,820px);display:flex;align-items:center}
.hero::before{background-image:none}
.hero-floor{position:absolute;left:-50%;right:-50%;bottom:-2px;height:46%;background-image:linear-gradient(rgba(255,45,85,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,45,85,.55) 1px,transparent 1px);background-size:60px 60px;transform:perspective(420px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(0deg,#000 10%,transparent 90%);-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 90%);animation:floor 2.4s linear infinite;pointer-events:none}
@keyframes floor{to{background-position:0 60px}}
.hero-sun{position:absolute;right:6%;top:14%;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,45,85,.35),rgba(255,106,61,.12) 45%,transparent 70%);filter:blur(6px);pointer-events:none}
.spark{position:absolute;width:3px;height:3px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold);opacity:.0;animation:spark 7s linear infinite;pointer-events:none}
.spark:nth-child(1){left:12%;animation-delay:0s}.spark:nth-child(2){left:28%;animation-delay:1.4s}.spark:nth-child(3){left:47%;animation-delay:2.8s}.spark:nth-child(4){left:66%;animation-delay:.7s}.spark:nth-child(5){left:82%;animation-delay:3.6s}.spark:nth-child(6){left:93%;animation-delay:5s}
@keyframes spark{0%{bottom:5%;opacity:0}10%{opacity:1}100%{bottom:95%;opacity:0}}
.hero-grid{z-index:1;width:min(var(--wrap),100% - 32px)}
.eyebrow{border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:rgba(255,45,85,.14);border:0;color:#ffd1da;padding:7px 18px}
.eyebrow::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1;text-shadow:0 0 30px rgba(255,45,85,.25)}
h1 .glitch{position:relative;display:inline-block;color:var(--gold);text-shadow:0 0 18px rgba(255,200,87,.6)}
h1 .glitch::before,h1 .glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
h1 .glitch::before{color:var(--cyan);transform:translate(-2px,0);clip-path:inset(0 0 60% 0);animation:gl1 3.2s infinite steps(1);opacity:.8}
h1 .glitch::after{color:var(--neon);transform:translate(2px,0);clip-path:inset(55% 0 0 0);animation:gl2 2.7s infinite steps(1);opacity:.8}
@keyframes gl1{0%,88%,100%{transform:none;opacity:0}90%{transform:translate(-3px,-1px);opacity:.9}94%{transform:translate(2px,1px);opacity:.9}}
@keyframes gl2{0%,85%,100%{transform:none;opacity:0}87%{transform:translate(3px,1px);opacity:.9}92%{transform:translate(-2px,0);opacity:.9}}
.lead{color:#e6d6dc}
.pills li{border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:rgba(255,255,255,.06);border:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;padding:7px 16px}
.pills li::before{content:"▸ ";color:var(--neon)}

/* Panel HUD di sekitar maskot */
.hero-art{width:min(460px,100%);padding:26px}
.hero-art::before{inset:18% 10% 4%;background:radial-gradient(circle,rgba(255,45,85,.45),transparent 65%)}
.hud-frame{position:absolute;inset:0;pointer-events:none}
.hud-frame i{position:absolute;width:34px;height:34px;border-color:var(--cyan);border-style:solid;filter:drop-shadow(0 0 6px var(--cyan))}
.hud-frame i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}
.hud-frame i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.hud-frame i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}
.hud-frame i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}
.hud{position:absolute;z-index:2;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(7,6,10,.78);border:1px solid rgba(34,211,238,.45);padding:6px 10px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hud-top{top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--cyan)}
.hud-top::before{content:"● ";color:#22c55e;animation:blink 1.4s steps(2) infinite}
.hud-lvl{top:28%;left:-6px;color:var(--gold);font-size:.95rem;border-color:rgba(255,200,87,.5)}
.hud-xp{bottom:10px;left:18px;right:18px;display:grid;gap:5px}
.hud-xp b{display:flex;justify-content:space-between;font-weight:600}
.xp{height:6px;background:rgba(255,255,255,.1);overflow:hidden}
.xp span{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--neon),var(--gold));box-shadow:0 0 10px var(--neon);animation:xp 3s ease-in-out infinite alternate}
@keyframes xp{from{width:38%}to{width:86%}}

/* Teks berjalan */
.ticker{position:relative;z-index:2;overflow:hidden;background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#120308;transform:skewY(-1.2deg);margin-top:-14px;border-block:2px solid #ffffff55}
.ticker-track{display:flex;width:max-content;animation:ticker 26s linear infinite}
.ticker span{padding:12px 22px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;white-space:nowrap}
.ticker span::after{content:"✦";margin-left:44px}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Section */
.kicker{color:var(--cyan);letter-spacing:.2em}
.kicker::before{content:"// ";color:var(--neon)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.card,.step,.stat-list li,.faq details,.muted-note,.cta,.fairplay{border-radius:0;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.card,.step{background:linear-gradient(160deg,#16101a,#0d0a10);border:1px solid var(--line);position:relative}
.card::after,.step::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,45,85,.6),transparent 30%,transparent 70%,rgba(34,211,238,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:0;transition:opacity .25s}
.card:hover::after,.step:hover::after{opacity:1}
.card:hover{transform:translateY(-4px);border-color:transparent}
.icon{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:linear-gradient(145deg,var(--neon),#6d0018);box-shadow:none}
.stat-list li{background:#120e15}

/* Quest log */
.step::before{content:"QUEST 0" counter(step);font-family:var(--display);color:var(--cyan);letter-spacing:.16em}
.steps-coop .step::before{content:"LANGKAH 0" counter(step)}
.status{border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);padding:4px 14px}
.status.now{background:rgba(34,211,238,.15);color:var(--cyan)}
.quest-bar{height:6px;margin-top:16px;background:rgba(255,255,255,.08);overflow:hidden}
.quest-bar span{display:block;height:100%;width:0}
.quest-bar.now span{width:100%;background:repeating-linear-gradient(45deg,var(--cyan) 0 10px,#0e7490 10px 20px);background-size:28px 28px;animation:stripes 1s linear infinite}
@keyframes stripes{to{background-position:28px 0}}
.reward{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.reward::before{content:"";width:14px;height:14px;background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 8px var(--gold)}

/* Fair play, FAQ, CTA */
.fairplay{background:linear-gradient(140deg,#200712,#0b0910 60%);border:1px solid #4a1426}
.rules li{border-radius:0;background:rgba(0,0,0,.35)}
.rules li::before{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.faq details{background:#0f0c12}
.faq details[open]{box-shadow:inset 3px 0 0 var(--neon)}
.faq summary{text-transform:none;letter-spacing:.01em;font-size:1.02rem}
.faq summary::after{color:var(--cyan)}
.muted-note{border-left-color:var(--cyan)}
.cta{background:radial-gradient(ellipse at 50% 0%,rgba(255,45,85,.4),transparent 70%),linear-gradient(180deg,#160a14,#0b0910);border:1px solid var(--line);position:relative;overflow:hidden}
.cta::before{content:"PRESS START";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:700;font-size:clamp(3rem,12vw,9rem);color:rgba(255,255,255,.03);white-space:nowrap;pointer-events:none}
.cta>*{position:relative}
.site-footer{background:#050407;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--neon),transparent) 1}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero-art{width:min(330px,88%)}
  .hud-lvl{left:-2px}
}
@media (max-width:760px){
  .nav-links{background:#07060af5}
}
@media (prefers-reduced-motion:reduce){
  .hero-floor,.spark,.ticker-track,.xp span,.quest-bar.now span,h1 .glitch::before,h1 .glitch::after,.eyebrow::before,.hud-top::before{animation:none}
  .spark{display:none}
}

/* ---- Perbaikan tata letak ---- */
h1{font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.04}
.ticker span::after{content:"";display:inline-block;width:9px;height:9px;margin-left:44px;background:#120308;transform:rotate(45deg) translateY(-2px)}
.rules li{display:block;position:relative;padding-left:52px}
.rules li::before{position:absolute;left:14px;top:13px;display:grid}
.menu-toggle{font-size:1.15rem;line-height:1;padding:9px 12px}
@media (max-width:760px){
  .nav{gap:10px}
  .nav-actions{order:2;margin-left:auto}
  .menu-toggle{order:3}
  .nav-actions .btn-ghost{display:none}
  .hero-art{width:min(290px,80%);padding:22px}
  .hero-grid{gap:20px;padding:36px 0 48px}
}
.burger{display:grid;gap:4px;width:20px}
.burger i{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.rules li::before{width:24px;height:24px;font-size:.7rem;place-items:center}
.form-card{border-radius:0;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));background:linear-gradient(160deg,#16101a,#0d0a10)}

/* =========================================================
   Header & footer — proporsional di semua lebar layar
   ========================================================= */
.site-header .nav{min-height:72px;gap:24px}
.brand{font-size:1.25rem;gap:10px;flex-shrink:0}
.brand>span:last-child{display:inline!important}
.brand-mark{width:42px;height:42px}
.nav-links{gap:clamp(14px,1.8vw,28px)}
.nav-links a{font-size:.84rem;white-space:nowrap}
.nav-actions{gap:8px;flex-shrink:0}
.nav-actions .btn{min-height:40px;padding:0 18px;font-size:.82rem}
.menu-only{display:none}
.menu-toggle{display:none;width:42px;height:40px;padding:0;place-items:center;border-radius:0;border:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);color:#fff;cursor:pointer}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}

@media (max-width:1080px){
  .menu-toggle{display:grid;order:3}
  .nav-actions{order:2;margin-left:auto}
  .menu-only{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;background:rgba(7,6,10,.97);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.5)}
  .nav-links.open{display:flex}
  .nav-links li+li{border-top:1px solid rgba(255,255,255,.06)}
  .nav-links a{display:block;padding:14px 2px;font-size:.95rem}
  .nav-links a::after{display:none}
  .nav-actions .btn-ghost{display:none}
}
@media (max-width:760px){
  .site-header .nav{min-height:62px;gap:10px}
  .brand{font-size:1.1rem;gap:8px}
  .brand-mark{width:38px;height:38px}
  .brand-mark img{width:28px}
  .nav-actions .btn{min-height:38px;padding:0 14px}
  .menu-toggle{width:40px;height:38px}
  .nav-links{padding:4px 16px 14px}
}
@media (max-width:360px){
  .brand{font-size:1rem}
  .brand-mark{width:34px;height:34px}
  .nav-actions .btn{padding:0 11px;font-size:.76rem}
}

/* Footer */
.site-footer{margin-top:96px;padding:56px 0 0;font-size:.92rem}
.footer-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.footer-grid .brand{font-size:1.2rem}
.footer-grid p{max-width:340px;margin-top:14px;line-height:1.6}
.footer-grid h2{font-family:var(--display);font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);margin:6px 0 16px}
.footer-grid ul{gap:10px}
.footer-grid a{color:var(--muted);transition:color .15s}
.footer-grid a:hover{color:#fff}
.copyright{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;margin-top:48px;padding:20px 0 24px;border-top:1px solid var(--line);font-size:.82rem;color:#8d7f84}
.copyright>:first-child{justify-self:start}
.copy-mid{justify-self:center;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:.76rem}
.copy-mid strong{color:var(--text)}
.to-top{justify-self:end;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;text-decoration:none;color:var(--muted);padding:7px 14px;box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.to-top:hover{color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.site-footer--slim{margin-top:72px;padding-top:0}
.site-footer--slim .copyright{margin-top:0;border-top:0}

@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-grid p{max-width:520px}
}
@media (max-width:600px){
  .site-footer{margin-top:72px;padding-top:44px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer-grid>div:last-child ul{display:flex;flex-wrap:wrap;gap:10px 22px}
  .copyright{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;margin-top:36px}
  .copyright>*{justify-self:center!important}
  .copy-mid{order:-1}
}
.footer-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)}
.footer-grid>div:nth-child(2) ul{grid-template-columns:repeat(2,max-content);column-gap:32px}
@media (max-width:900px){ .footer-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)} }
@media (max-width:600px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:nth-child(2) ul{grid-template-columns:1fr}
}

/* ---- Langit hero: bintang pixel + simbol game samar (mengisi area atas yang kosong) ---- */
.hero-sky{position:absolute;inset:0 0 40% 0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-sky::before,.hero-sky::after{content:"";position:absolute;left:0;top:0;width:1px;height:1px;background:transparent}
.hero-sky::before{box-shadow:222px 200px rgba(255,255,255,.55),1816px 309px rgba(255,255,255,.55),1836px 188px rgba(255,255,255,.35),217px 360px rgba(34,211,238,.6),1628px 483px rgba(34,211,238,.6),946px 397px rgba(34,211,238,.6),996px 325px rgba(34,211,238,.6),1053px 41px rgba(34,211,238,.6),631px 42px rgba(255,255,255,.55),1260px 14px rgba(34,211,238,.6),1141px 229px rgba(255,255,255,.55),930px 237px rgba(255,255,255,.55),1233px 438px rgba(255,255,255,.55),556px 210px rgba(255,255,255,.35),417px 312px rgba(255,255,255,.35),20px 109px rgba(255,255,255,.35),762px 332px rgba(255,255,255,.35),1520px 207px rgba(255,255,255,.55),1149px 179px rgba(255,255,255,.55),542px 316px rgba(34,211,238,.6),397px 450px rgba(255,255,255,.55),740px 133px rgba(34,211,238,.6),1765px 425px rgba(255,255,255,.35),1438px 109px rgba(255,255,255,.35),1615px 80px rgba(255,255,255,.35),136px 266px rgba(255,255,255,.35),771px 276px rgba(255,255,255,.55),205px 424px rgba(255,255,255,.35),1220px 498px rgba(255,255,255,.55),1183px 268px rgba(34,211,238,.6),872px 127px rgba(255,255,255,.35),550px 401px rgba(34,211,238,.6),1039px 483px rgba(34,211,238,.6),428px 283px rgba(255,255,255,.55),584px 363px rgba(255,255,255,.35),793px 361px rgba(34,211,238,.6),1573px 3px rgba(255,255,255,.55),872px 204px rgba(255,255,255,.35),804px 480px rgba(34,211,238,.6),715px 415px rgba(255,255,255,.35),1587px 501px rgba(255,255,255,.55),1618px 253px rgba(255,255,255,.55),1328px 213px rgba(34,211,238,.6),1717px 354px rgba(255,255,255,.35),1426px 500px rgba(255,255,255,.55),1726px 49px rgba(34,211,238,.6),241px 516px rgba(255,255,255,.35),446px 491px rgba(255,255,255,.55),1578px 422px rgba(255,255,255,.55),1038px 201px rgba(255,255,255,.35),505px 28px rgba(34,211,238,.6),1536px 226px rgba(255,255,255,.35),1390px 487px rgba(34,211,238,.6),1891px 209px rgba(255,255,255,.35),63px 371px rgba(255,255,255,.35),670px 95px rgba(255,255,255,.35),871px 437px rgba(34,211,238,.6),968px 333px rgba(255,255,255,.55),138px 139px rgba(255,255,255,.35),361px 25px rgba(255,255,255,.55),1854px 56px rgba(34,211,238,.6),1753px 276px rgba(34,211,238,.6),1725px 372px rgba(255,255,255,.55),1585px 71px rgba(255,255,255,.35),1327px 247px rgba(34,211,238,.6),52px 517px rgba(255,255,255,.35),199px 38px rgba(255,255,255,.35),1052px 14px rgba(255,255,255,.35),1234px 229px rgba(255,255,255,.35),367px 139px rgba(34,211,238,.6)}
.hero-sky::after{width:2px;height:2px;box-shadow:1538px 293px rgba(255,255,255,.7),1056px 512px rgba(255,255,255,.7),547px 64px rgba(255,45,85,.7),971px 23px rgba(255,45,85,.7),248px 108px rgba(255,255,255,.7),1221px 41px rgba(255,255,255,.7),1431px 309px rgba(255,200,87,.7),479px 176px rgba(255,255,255,.7),189px 492px rgba(255,255,255,.7),1596px 457px rgba(255,45,85,.7),56px 81px rgba(255,255,255,.7),781px 64px rgba(255,255,255,.7),292px 499px rgba(255,45,85,.7),69px 340px rgba(255,45,85,.7),1522px 116px rgba(255,200,87,.7),127px 67px rgba(255,255,255,.7),1242px 106px rgba(255,45,85,.7),620px 298px rgba(255,200,87,.7),1573px 404px rgba(255,255,255,.7),56px 191px rgba(255,200,87,.7),689px 494px rgba(255,255,255,.7),712px 489px rgba(255,200,87,.7),1575px 135px rgba(255,45,85,.7),1483px 483px rgba(255,255,255,.7),1084px 341px rgba(255,255,255,.7),201px 48px rgba(255,255,255,.7),1255px 332px rgba(255,255,255,.7),934px 307px rgba(255,45,85,.7);animation:twinkle 3.6s steps(2) infinite}
@keyframes twinkle{50%{opacity:.35}}
.hero-sky svg{position:absolute;width:var(--s,24px);height:auto;fill:none;stroke:currentColor;stroke-width:2.2;opacity:var(--o,.28);filter:drop-shadow(0 0 6px currentColor);animation:drift var(--d,10s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.hero-sky .px{fill:currentColor;stroke:none}
.hero-sky .c{color:var(--cyan)} .hero-sky .n{color:var(--neon)} .hero-sky .g{color:var(--gold)}
@keyframes drift{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(8deg)}}
@media (max-width:760px){.hero-sky .hide-sm{display:none}}
@media (prefers-reduced-motion:reduce){.hero-sky svg,.hero-sky::after{animation:none}}