@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap');
:root{--bg:#04130c;--bg2:#071f14;--green:#19e879;--green2:#74ffb0;--gold:#f7d77a;--muted:#a9c8b7;--line:rgba(115,255,174,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 50% 10%,#103c25 0%,var(--bg) 48%,#020906 100%);color:#f6fff9;font-family:'Noto Sans Myanmar',sans-serif;overflow-x:hidden}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.48}
.ambient{position:absolute;width:430px;height:430px;border-radius:50%;filter:blur(100px);opacity:.13;pointer-events:none}
.ambient-one{background:#00ff7b;top:90px;left:-180px}.ambient-two{background:#d2a93b;top:500px;right:-220px}
main,footer{position:relative;z-index:1}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px 20px 38px;position:relative;isolation:isolate}
.hero:before{content:"";position:absolute;inset:7% 4% 9%;border:1px solid rgba(100,255,163,.1);border-radius:44% 44% 28px 28px;box-shadow:inset 0 0 90px rgba(0,255,111,.045),0 0 70px rgba(0,255,111,.035);z-index:-1}
.eyebrow,.section-tag{font-family:'Barlow Condensed',sans-serif;letter-spacing:.24em;font-weight:700;font-size:13px;color:var(--green2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(3,22,13,.65);padding:10px 18px;border-radius:30px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.logo-frame{width:min(440px,82vw);aspect-ratio:1;position:relative;display:grid;place-items:center;margin:4px auto -16px}
.logo{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));mix-blend-mode:screen}
.ring{position:absolute;border:1px solid rgba(80,255,156,.25);border-radius:50%;inset:7%;animation:spin 28s linear infinite}
.ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green2);box-shadow:0 0 15px var(--green);top:12%;left:18%}
.ring-two{inset:1%;border-style:dashed;border-color:rgba(246,215,122,.22);animation-direction:reverse;animation-duration:44s}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-copy{max-width:760px;margin-top:0}
.kicker{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.4em;color:var(--muted);margin:0 0 2px}
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(58px,10vw,104px);line-height:.95;letter-spacing:.04em;margin:0;font-weight:900;text-shadow:0 5px 0 #064021,0 0 35px rgba(25,232,121,.22)}
h1 span,.footer-brand span{color:var(--gold)}
.lead{font-size:clamp(14px,2vw,18px);font-weight:600;color:#d6f4e2;margin:18px 0 0}
.accent-line{height:2px;width:90px;background:linear-gradient(90deg,transparent,var(--green),var(--gold),transparent);margin:22px auto}
.description{color:var(--muted);font-size:14px;line-height:2;max-width:610px;margin:0 auto}
.scroll-cue{display:flex;align-items:center;gap:10px;margin-top:34px;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.23em;color:#8ebba0}
.scroll-cue span{height:1px;width:32px;background:var(--green)}
.highlights{padding:90px 22px 100px;max-width:1120px;margin:auto}
.section-heading{text-align:center;margin-bottom:38px}
.section-heading h2,
.section-heading h2 em{font-style:normal;color:var(--green2)}
.section-heading p{color:var(--muted);font-size:14px;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature-card{position:relative;overflow:hidden;padding:30px 25px 32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(18,64,39,.62),rgba(3,17,10,.84));min-height:205px;transition:transform .25s,border-color .25s}
.feature-card:before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.7}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(116,255,176,.48)}
.feature-icon{font-size:28px;color:var(--gold);margin-bottom:15px;text-shadow:0 0 20px rgba(247,215,122,.25)}
.feature-card h3{font-size:17px;margin:0 0 10px;color:#f1fff6}
.feature-card p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}








footer{text-align:center;padding:0 20px 32px;color:#759b85}
.footer-brand{font:900 23px 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#effff5;margin-bottom:8px}
footer small{font-size:11px;letter-spacing:.04em}
@media(max-width:700px){.hero{min-height:auto;padding:30px 16px 54px}.hero:before{inset:5% 0 8%;border-radius:34% 34% 20px 20px}.logo-frame{width:min(360px,88vw);margin:8px auto -6px}.hero-copy{margin-top:0}.feature-grid{grid-template-columns:1fr;gap:13px}.feature-card{min-height:auto;padding:24px 22px}.highlights{padding:65px 18px 70px}.scroll-cue{margin-top:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}


.login-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:3;margin:24px auto 0;padding:14px 28px;min-height:52px;border:1px solid rgba(255,226,140,.9);border-radius:999px;background:linear-gradient(135deg,#ffe9a0 0%,#e9b83e 40%,#a96a0b 100%);color:#102114;text-decoration:none;font-family:'Noto Sans Myanmar',sans-serif;font-weight:700;font-size:15px;box-shadow:0 0 0 4px rgba(247,215,122,.08),0 8px 26px rgba(0,0,0,.32),0 0 24px rgba(247,215,122,.22);transition:transform .2s ease,box-shadow .2s ease}
.login-button:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(247,215,122,.1),0 12px 30px rgba(0,0,0,.35),0 0 32px rgba(247,215,122,.32)}
.login-button:focus-visible{outline:2px solid #74ffb0;outline-offset:4px}
.login-button-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(10,42,23,.12);font:700 17px 'Barlow Condensed',sans-serif}
@media(max-width:700px){.login-button{margin-top:20px;padding:13px 22px;font-size:14px;min-height:48px}}


/* Feature cards with supplied artwork */
.feature-image-grid{display:flex;flex-direction:column;gap:16px}
.feature-image-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,34%);align-items:center;padding:0;min-height:0;overflow:hidden;border-color:rgba(25,232,121,.38);background:linear-gradient(110deg,rgba(5,35,20,.98),rgba(2,18,10,.96))}
.feature-image-card:before{left:28%;right:28%;z-index:2}
.feature-image-card .feature-copy{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.feature-image-card .feature-icon{margin-bottom:12px}
.feature-image-card h3{font-size:19px}
.feature-image-card p{font-size:13px}
.feature-image-card img{width:100%;height:auto;aspect-ratio:1/1;min-height:0;object-fit:contain;display:block;clip-path:none;filter:saturate(1.08);transition:transform .35s ease}
.feature-image-card:hover img{transform:scale(1.035)}
@media(max-width:700px){
  .feature-image-grid{gap:14px}
  .feature-image-card{grid-template-columns:minmax(0,1fr) minmax(0,42%);min-height:0}
  .feature-image-card .feature-copy{padding:20px 15px}
  .feature-image-card .feature-icon{font-size:23px;margin-bottom:9px}
  .feature-image-card h3{font-size:15px;line-height:1.65}
  .feature-image-card p{font-size:11px;line-height:1.8}
  .feature-image-card img{min-height:0;aspect-ratio:1/1;clip-path:none;object-fit:contain}
}
@media(max-width:390px){
  .feature-image-card .feature-copy{padding:16px 11px}
  .feature-image-card h3{font-size:13px}
  .feature-image-card p{font-size:10px}
}


.social-links{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;position:relative;z-index:4}
.social-link{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(116,255,176,.35);background:linear-gradient(145deg,rgba(10,53,31,.95),rgba(2,18,10,.95));box-shadow:0 0 20px rgba(25,232,121,.08);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.social-link:hover{transform:translateY(-3px);box-shadow:0 0 24px rgba(25,232,121,.2);border-color:rgba(247,215,122,.7)}
.social-link svg{width:23px;height:23px;fill:#f4fff8}
.facebook-link svg{fill:#74ffb0}
.line-link svg{fill:#74ffb0}
.social-link:focus-visible{outline:2px solid #f7d77a;outline-offset:3px}
@media(max-width:700px){.social-links{margin-top:18px;gap:14px}.social-link{width:43px;height:43px}}

.social-link{overflow:hidden;padding:0;background:transparent}
.social-link img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.facebook-link,.line-link{border-color:rgba(116,255,176,.35)}

/* Larger transparent social icons */
.social-links{gap:22px;margin-top:26px}
.social-link{width:60px;height:60px;border:0!important;border-radius:50%;background:transparent!important;box-shadow:0 0 18px rgba(0,0,0,.14);overflow:visible}
.social-link img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:drop-shadow(0 4px 7px rgba(0,0,0,.25));transition:transform .22s ease,filter .22s ease}
.social-link:hover img{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 5px 10px rgba(25,232,121,.25))}
@media(max-width:700px){.social-links{gap:20px;margin-top:23px}.social-link{width:62px;height:62px}}

/* Living artwork: gentle breathing zoom, soft glow and moving light sweep */
.feature-image-card{
  animation: jackpotCardGlow 5.8s ease-in-out infinite;
  will-change: box-shadow, border-color;
}
.feature-image-card:nth-child(2){animation-delay:1.1s}
.feature-image-card:nth-child(3){animation-delay:2.2s}
.feature-image-card img{
  transform-origin:center center;
  animation: jackpotImageBreathe 6s ease-in-out infinite;
  will-change:transform,filter;
}
.feature-image-card:nth-child(2) img{animation-delay:1s}
.feature-image-card:nth-child(3) img{animation-delay:2s}
.feature-image-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,0) 42%,rgba(247,215,122,.14) 49%,rgba(255,255,255,.09) 51%,transparent 59%);
  background-size:230% 100%;
  background-position:130% 0;
  animation:jackpotLightSweep 7.5s ease-in-out infinite;
}
.feature-image-card:nth-child(2):after{animation-delay:1.5s}
.feature-image-card:nth-child(3):after{animation-delay:3s}
@keyframes jackpotImageBreathe{
  0%,100%{transform:scale(1);filter:saturate(1.08) brightness(1)}
  50%{transform:scale(1.035);filter:saturate(1.18) brightness(1.06)}
}
@keyframes jackpotCardGlow{
  0%,100%{border-color:rgba(25,232,121,.34);box-shadow:0 0 0 rgba(25,232,121,0)}
  50%{border-color:rgba(116,255,176,.78);box-shadow:0 0 22px rgba(25,232,121,.13),inset 0 0 18px rgba(25,232,121,.035)}
}
@keyframes jackpotLightSweep{
  0%,18%{background-position:130% 0;opacity:0}
  30%{opacity:1}
  68%{background-position:-130% 0;opacity:.85}
  78%,100%{background-position:-130% 0;opacity:0}
}
.feature-image-card:hover img{animation-play-state:paused;transform:scale(1.055);filter:saturate(1.22) brightness(1.08)}
@media(prefers-reduced-motion:reduce){
  .feature-image-card,.feature-image-card img,.feature-image-card:after{animation:none!important;will-change:auto}
}