:root{
  --bg: #eaf3fb;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: #ffffff;
  --text: #12223a;
  --muted: #556883;
  --line: rgba(73, 118, 166, 0.16);
  --accent: #f5a623;
  --accent-strong: #f08b00;
  --shadow: 0 18px 50px rgba(17, 37, 70, 0.10);
  --radius: 24px;
  --container: 1180px;
  --transition: 240ms ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.8), transparent 30%),
    linear-gradient(180deg, #edf6fd 0%, #e6f2fb 48%, #edf6fd 100%);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}

.site-bg{
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(105,148,196,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,148,196,0.08) 1px, transparent 1px);
  background-size:56px 56px;
}
.container{width:min(calc(100% - 32px), var(--container)); margin:0 auto}

.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(18px);
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand img{width:210px; max-width:42vw}
.nav{display:flex; align-items:center; gap:26px}
.nav a{font-size:.98rem; font-weight:600; transition:color var(--transition)}
.nav a:hover,.nav a:focus-visible{color:var(--accent-strong)}

.menu-toggle{
  display:none; width:48px; height:48px; border:none; border-radius:14px;
  background:rgba(255,255,255,0.6); box-shadow:var(--shadow);
  align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer;
}
.menu-toggle span{width:20px; height:2px; background:var(--text); border-radius:999px}

.hero{
  position:relative; min-height:calc(100vh - 82px);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 0 34px;
}
#hero-stars{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.78), transparent 42%),
    radial-gradient(circle at 50% 70%, rgba(183,212,246,0.18), transparent 48%);
  z-index:1;
}
.hero-content{position:relative; z-index:2; text-align:center; max-width:940px}
.hero h1{
  margin:2px auto 0; max-width:900px;
  font-size:clamp(2rem, 4vw, 4rem); line-height:1.08; letter-spacing:-0.03em;
}
.hero-subtitle{
  margin:30px auto 0; max-width:760px;
  font-size:clamp(1.05rem, 1.8vw, 1.28rem); color:var(--muted);
}
.hero-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px;
  border-radius:999px; font-weight:700; transition:transform var(--transition), box-shadow var(--transition);
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(180deg, #ffb234 0%, #f19714 100%); color:#fff;
  box-shadow:0 18px 34px rgba(241, 151, 20, 0.28);
}
.btn-secondary{
  background:rgba(255,255,255,0.72); color:var(--text);
  border:1px solid rgba(255,255,255,0.78); box-shadow:var(--shadow);
}
.btn-small{
  min-height:42px; padding:0 18px;
  background:linear-gradient(180deg, #12345a 0%, #214b79 100%); color:#fff; font-size:.95rem;
}
.hero-mini-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:42px;
}
.mini-card{
  padding:20px; border-radius:22px; background:rgba(255,255,255,0.54);
  border:1px solid rgba(255,255,255,0.7); box-shadow:var(--shadow); backdrop-filter: blur(12px);
}
.mini-card strong{display:block; margin-bottom:6px}
.mini-card span{display:block; color:var(--muted); font-size:.95rem}

.section{padding:92px 0}
.section-soft{
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border-top:1px solid rgba(255,255,255,0.35);
  border-bottom:1px solid rgba(255,255,255,0.35);
}
.section-heading{max-width:840px; margin:0 auto 38px; text-align:center}
.eyebrow{
  display:inline-block; margin-bottom:12px; font-size:.92rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong);
}
.section-heading h2{
  margin:0; font-size:clamp(1.7rem,2.6vw,2.8rem); line-height:1.15; letter-spacing:-0.03em;
}
.section-heading p{margin:16px auto 0; color:var(--muted); font-size:1.05rem}

.values-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px}
.value-card{
  padding:30px; border-radius:var(--radius); background:var(--surface);
  border:1px solid rgba(255,255,255,0.78); box-shadow:var(--shadow); text-align:left;
}
.value-card h3{margin:0 0 12px; font-size:clamp(1.45rem,2vw,2rem); line-height:1.1}
.value-card p{margin:0; color:var(--muted)}

.ebooks-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px;
  max-width:980px; margin:0 auto;
}
.ebook-card{
  overflow:hidden; border-radius:28px; background:var(--surface-strong);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.8);
}
.ebook-cover{
  position:relative; min-height:360px; display:flex; align-items:flex-end; padding:28px; overflow:hidden;
}
.cover-one{
  background:
    radial-gradient(circle at 50% 100%, rgba(255,214,153,0.9), transparent 25%),
    linear-gradient(180deg, #102450 0%, #19356e 52%, #5b217e 100%);
}
.cover-two{
  background:
    radial-gradient(circle at 50% 55%, rgba(255,94,143,0.28), transparent 22%),
    linear-gradient(180deg, #071d52 0%, #143777 48%, #8a1659 100%);
}
.cover-glow{
  position:absolute; inset:auto 8% 14% 8%; height:18px; border-radius:999px;
  filter:blur(24px); background:rgba(255,211,130,0.7);
}
.cover-text{position:relative; z-index:2; color:#fff}
.cover-text span{
  display:inline-block; margin-bottom:12px; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,0.14); font-size:.85rem; font-weight:700; text-transform:uppercase;
}
.cover-text strong{
  display:block; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.03; letter-spacing:-0.03em;
}
.ebook-body{padding:24px 24px 26px}
.ebook-body h3{margin:0 0 10px; font-size:1.35rem; line-height:1.15}
.ebook-body p{margin:0; color:var(--muted)}
.ebook-footer{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px}
.price{font-weight:800; font-size:1.06rem}

.carousel{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
}
.carousel-btn{
  width:48px; height:48px; border:none; border-radius:999px; background:rgba(255,255,255,0.82);
  box-shadow:var(--shadow); color:var(--accent-strong); font-size:2rem; line-height:1; cursor:pointer;
}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex; transition:transform 360ms ease; will-change:transform}
.testimonial-card{
  flex:0 0 calc((100% - 32px) / 3); margin-right:16px; padding:26px; border-radius:24px;
  background:rgba(255,255,255,0.82); border:1px solid rgba(255,255,255,0.8); 
  box-shadow:none;
  min-height:238px; display:flex; flex-direction:column; justify-content:space-between;
}
.stars{color:var(--accent-strong); font-size:.95rem; letter-spacing:.1em}
.testimonial-card p{margin:14px 0 18px; color:var(--muted)}
.testimonial-author strong{display:block}
.testimonial-author span{color:var(--muted); font-size:.92rem}
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:20px}
.carousel-dots button{
  width:10px; height:10px; border:none; border-radius:999px; background:rgba(18,34,58,0.16); padding:0; cursor:pointer;
}
.carousel-dots button.active{background:var(--accent-strong)}

.faq-wrap{max-width:980px}
.faq-list{display:grid; gap:14px}
.faq-item{
  border-radius:20px; background:rgba(255,255,255,0.82);
  border:1px solid rgba(255,255,255,0.86); box-shadow:var(--shadow); overflow:hidden;
}
.faq-question{
  width:100%; border:none; background:transparent; padding:22px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:20px; text-align:left; cursor:pointer;
  color:var(--text); font-weight:700;
}
.faq-icon{font-size:1.5rem; color:var(--accent-strong); transition:transform var(--transition)}
.faq-answer{display:grid; grid-template-rows:0fr; transition:grid-template-rows 260ms ease}
.faq-answer p{overflow:hidden; margin:0; padding:0 24px 0; color:var(--muted)}
.faq-item.active .faq-answer{grid-template-rows:1fr}
.faq-item.active .faq-answer p{padding-bottom:22px}
.faq-item.active .faq-icon{transform:rotate(45deg)}

.contact-card{
  max-width:780px; margin:0 auto; text-align:center; padding:38px 28px; border-radius:28px;
  background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.86); box-shadow:var(--shadow);
}
.contact-label{
  margin:0; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700;
}
.contact-email{
  display:inline-block; margin-top:14px; font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800; letter-spacing:-0.03em;
}
.contact-note{margin:12px 0 0; color:var(--muted)}

.footer{
  background:linear-gradient(180deg, #08101f 0%, #060b15 100%); color:#d3dbee; padding-top:54px;
}
.footer-top{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-col h3{margin:0 0 12px; color:#fff; font-size:1.05rem}
.footer-col p{margin:0; color:#aab7d2}
.footer-link{display:inline-block; margin-top:14px; color:#fff; font-weight:700}
.footer-list{margin:14px 0 0; padding-left:18px; color:#aab7d2}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:56px; min-height:34px; padding:0 12px;
  border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
  color:#fff; font-weight:700; font-size:.85rem;
}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0 30px; font-size:.94rem;
}
.footer-bottom p{margin:0; color:#93a3c5}
.footer-bottom-links{display:flex; flex-wrap:wrap; gap:18px}
.footer-bottom-links a{color:#dce6ff}

@media (max-width:1024px){
  .hero-mini-grid,.values-grid,.ebooks-grid,.footer-top{grid-template-columns:1fr}
  .ebook-cover{min-height:320px}
  .testimonial-card{flex-basis:calc((100% - 16px) / 2)}
}
@media (max-width:820px){
  .menu-toggle{display:flex}
  .nav{
    position:absolute; left:16px; right:16px; top:calc(100% + 10px); display:grid; gap:6px; padding:12px;
    border-radius:22px; background:rgba(255,255,255,0.92); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.9);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition);
  }
  .nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  .nav a{padding:12px 14px; border-radius:14px}
  .hero{padding-top:0}
  .carousel{grid-template-columns:1fr}
  .carousel-btn{display:none}
  .testimonial-card{flex-basis:100%; margin-right:0}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}
@media (max-width:640px){
  .container{width:min(calc(100% - 22px), var(--container))}
  .nav-wrap{min-height:76px}
  .brand img{width:170px; max-width:58vw}
  .hero{min-height:calc(100vh - 76px); padding:0 0 18px}
  .hero-mini-grid{margin-top:28px}
  .mini-card,.value-card,.contact-card{padding:22px 18px}
  .section{padding:72px 0}
  .ebook-cover{min-height:260px; padding:20px}
  .ebook-body{padding:20px}
  .ebook-footer{flex-direction:column; align-items:flex-start}
  .faq-question{padding:18px}
  .faq-answer p{padding-left:18px; padding-right:18px}
  .faq-item.active .faq-answer p{padding-bottom:18px}
  .contact-email{word-break:break-word}
}


.email-obfuscated{
  cursor:pointer;
}

.footer-top-single{
  grid-template-columns:1fr;
  max-width:720px;
  text-align:center;
}

.footer-col-main{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.social-block{
  margin-top:28px;
}

.social-block h4{
  margin:0 0 12px;
  color:#fff;
  font-size:1rem;
}

.social-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color:#dce6ff;
}

.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  line-height:1;
}

.footer-legal{
  max-width:920px;
  text-align:center;
  padding:30px 0 8px;
}

.footer-legal p{
  margin:0 0 14px;
  color:#aab7d2;
}

.footer-bottom-centered{
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:10px;
}

.footer-bottom-centered .footer-bottom-links{
  justify-content:center;
}

@media (max-width:640px){
  .social-links{
    flex-direction:column;
    align-items:center;
  }
}


.social-icon svg{
  display:block;
  width:14px;
  height:14px;
}

.hero-content{
  padding-top: 0;
}

.header + main .hero{
  margin-top: 0;
}



@media (prefers-reduced-motion: reduce){
  .star-fall{
    animation:none;
    opacity:.18;
  }
}








.stars-twinkle .star-dot{
    opacity:.36;
  }
}








/* Hero stars v8c - double stars, vivid yellow, half falling */
.stars-fall{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* Twinkling pointed stars */
.star-dot{
  position:absolute;
  opacity:.26;
  animation:starTwinkle 3.5s ease-in-out infinite;
}

.star-dot::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 43%, #1E90FF 48%, #F6FBFF 50%, #56C7FF 52%, transparent 57%),
    linear-gradient(0deg, transparent 43%, #1E90FF 48%, #FFFFFF 50%, #56C7FF 52%, transparent 57%),
    linear-gradient(45deg, transparent 44%, #6ED8FF 48%, #FFFFFF 50%, #8DE3FF 52%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #6ED8FF 48%, #FFFFFF 50%, #8DE3FF 52%, transparent 56%);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.9))
          drop-shadow(0 0 14px rgba(30, 144, 255, 0.95))
          drop-shadow(0 0 22px rgba(79, 195, 255, 0.65));
}

.star-dot::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:4px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background: radial-gradient(circle, #FFFFFF 0%, #F6FBFF 45%, #DDF3FF 100%);
  box-shadow:0 0 10px rgba(255,255,255,.95), 0 0 18px rgba(30,144,255,.95);
}

.star-xs{ width:8px; height:8px; }
.star-sm{ width:12px; height:12px; }
.star-md{ width:16px; height:16px; }

.star-xs::after{ width:2px; height:2px; }
.star-sm::after{ width:3px; height:3px; }
.star-md::after{ width:4px; height:4px; }

@keyframes starTwinkle{
  0%,100%{opacity:.18; transform:scale(.88);}
  40%{opacity:.58; transform:scale(1);}
  60%{opacity:1; transform:scale(1.22);}
}

/* Layer 1 */
.stars-layer-1 .star-dot:nth-child(1){left:4%; top:12%; animation-delay:.2s;}
.stars-layer-1 .star-dot:nth-child(2){left:9%; top:22%; animation-delay:1s;}
.stars-layer-1 .star-dot:nth-child(3){left:14%; top:8%; animation-delay:2s;}
.stars-layer-1 .star-dot:nth-child(4){left:20%; top:28%; animation-delay:1.5s;}
.stars-layer-1 .star-dot:nth-child(5){left:26%; top:14%; animation-delay:2.5s;}
.stars-layer-1 .star-dot:nth-child(6){left:32%; top:24%; animation-delay:.8s;}
.stars-layer-1 .star-dot:nth-child(7){left:38%; top:10%; animation-delay:2.2s;}
.stars-layer-1 .star-dot:nth-child(8){left:44%; top:30%; animation-delay:1.8s;}
.stars-layer-1 .star-dot:nth-child(9){left:50%; top:16%; animation-delay:3.2s;}
.stars-layer-1 .star-dot:nth-child(10){left:56%; top:26%; animation-delay:1.2s;}
.stars-layer-1 .star-dot:nth-child(11){left:62%; top:12%; animation-delay:2.8s;}
.stars-layer-1 .star-dot:nth-child(12){left:68%; top:28%; animation-delay:.5s;}
.stars-layer-1 .star-dot:nth-child(13){left:74%; top:15%; animation-delay:3.4s;}
.stars-layer-1 .star-dot:nth-child(14){left:80%; top:24%; animation-delay:1.6s;}
.stars-layer-1 .star-dot:nth-child(15){left:86%; top:38%; animation-delay:2.9s;}
.stars-layer-1 .star-dot:nth-child(16){left:90%; top:18%; animation-delay:.9s;}
.stars-layer-1 .star-dot:nth-child(17){left:94%; top:30%; animation-delay:2.1s;}
.stars-layer-1 .star-dot:nth-child(18){left:41%; top:40%; animation-delay:1.7s;}
.stars-layer-1 .star-dot:nth-child(19){left:58%; top:39%; animation-delay:3.1s;}
.stars-layer-1 .star-dot:nth-child(20){left:72%; top:40%; animation-delay:.7s;}

/* Layer 2 */
.stars-layer-2 .star-dot{ opacity:.22; animation-duration:4.6s; }
.stars-layer-2 .star-dot:nth-child(1){left:6%; top:34%; animation-delay:1.2s;}
.stars-layer-2 .star-dot:nth-child(2){left:12%; top:18%; animation-delay:2.4s;}
.stars-layer-2 .star-dot:nth-child(3){left:18%; top:5%; animation-delay:.6s;}
.stars-layer-2 .star-dot:nth-child(4){left:24%; top:38%; animation-delay:3s;}
.stars-layer-2 .star-dot:nth-child(5){left:31%; top:20%; animation-delay:1.5s;}
.stars-layer-2 .star-dot:nth-child(6){left:38%; top:6%; animation-delay:3.4s;}
.stars-layer-2 .star-dot:nth-child(7){left:45%; top:32%; animation-delay:2.1s;}
.stars-layer-2 .star-dot:nth-child(8){left:52%; top:9%; animation-delay:4.2s;}
.stars-layer-2 .star-dot:nth-child(9){left:59%; top:30%; animation-delay:1.9s;}
.stars-layer-2 .star-dot:nth-child(10){left:66%; top:12%; animation-delay:3.1s;}
.stars-layer-2 .star-dot:nth-child(11){left:73%; top:34%; animation-delay:2.7s;}
.stars-layer-2 .star-dot:nth-child(12){left:80%; top:18%; animation-delay:.9s;}
.stars-layer-2 .star-dot:nth-child(13){left:87%; top:42%; animation-delay:4s;}
.stars-layer-2 .star-dot:nth-child(14){left:92%; top:10%; animation-delay:1.1s;}
.stars-layer-2 .star-dot:nth-child(15){left:48%; top:43%; animation-delay:2.8s;}
.stars-layer-2 .star-dot:nth-child(16){left:27%; top:43%; animation-delay:1.4s;}

/* Layer 3 */
.stars-layer-3 .star-dot{ opacity:.15; animation-duration:5.6s; }
.stars-layer-3 .star-dot:nth-child(1){left:10%; top:9%; animation-delay:2.4s;}
.stars-layer-3 .star-dot:nth-child(2){left:18%; top:30%; animation-delay:1.6s;}
.stars-layer-3 .star-dot:nth-child(3){left:28%; top:15%; animation-delay:4.4s;}
.stars-layer-3 .star-dot:nth-child(4){left:40%; top:36%; animation-delay:.8s;}
.stars-layer-3 .star-dot:nth-child(5){left:52%; top:18%; animation-delay:3.3s;}
.stars-layer-3 .star-dot:nth-child(6){left:60%; top:35%; animation-delay:2.2s;}
.stars-layer-3 .star-dot:nth-child(7){left:70%; top:14%; animation-delay:5.1s;}
.stars-layer-3 .star-dot:nth-child(8){left:82%; top:28%; animation-delay:1.2s;}
.stars-layer-3 .star-dot:nth-child(9){left:24%; top:41%; animation-delay:2.8s;}
.stars-layer-3 .star-dot:nth-child(10){left:46%; top:44%; animation-delay:.7s;}
.stars-layer-3 .star-dot:nth-child(11){left:68%; top:42%; animation-delay:4.6s;}
.stars-layer-3 .star-dot:nth-child(12){left:90%; top:40%; animation-delay:1.8s;}
.stars-layer-3 .star-dot:nth-child(13){left:36%; top:6%; animation-delay:3.9s;}
.stars-layer-3 .star-dot:nth-child(14){left:76%; top:6%; animation-delay:2.6s;}

/* Falling stars - around half of the overall stars */
.stars-falling .star-fall{
  position:absolute;
  top:-16%;
  opacity:0;
  animation:fallingStar 7.4s linear infinite, fallTwinkle 2.6s ease-in-out infinite;
}

.stars-falling .star-fall::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 43%, #1E90FF 48%, #F6FBFF 50%, #56C7FF 52%, transparent 57%),
    linear-gradient(0deg, transparent 43%, #1E90FF 48%, #FFFFFF 50%, #56C7FF 52%, transparent 57%),
    linear-gradient(45deg, transparent 44%, #6ED8FF 48%, #FFFFFF 50%, #8DE3FF 52%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #6ED8FF 48%, #FFFFFF 50%, #8DE3FF 52%, transparent 56%);
  filter: drop-shadow(0 0 9px rgba(30, 144, 255, 0.98))
          drop-shadow(0 0 16px rgba(79, 195, 255, 0.75));
}

.stars-falling .star-fall::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, #FFFFFF 0%, #F6FBFF 45%, #DDF3FF 100%);
  box-shadow:0 0 10px rgba(255,255,255,.95), 0 0 18px rgba(30,144,255,.95);
}

.star-fall-sm{ width:10px; height:10px; }
.star-fall-md{ width:14px; height:14px; }
.star-fall-lg{ width:18px; height:18px; }
.star-fall-sm::after{ width:2px; height:2px; }
.star-fall-md::after{ width:3px; height:3px; }
.star-fall-lg::after{ width:4px; height:4px; }

@keyframes fallingStar{
  0%{ transform:translate3d(0,-10vh,0) scale(.9); opacity:0; }
  10%{ opacity:.95; }
  100%{ transform:translate3d(26px,120vh,0) scale(1.08); opacity:0; }
}

@keyframes fallTwinkle{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.28); }
}

.stars-layer-fall .star-fall:nth-child(1){ left:4%; animation-delay:0s, .2s; animation-duration:6.8s, 2.4s; }
.stars-layer-fall .star-fall:nth-child(2){ left:9%; animation-delay:1.2s, 1.1s; animation-duration:7.4s, 3s; }
.stars-layer-fall .star-fall:nth-child(3){ left:14%; animation-delay:2.7s, .5s; animation-duration:7.0s, 2.6s; }
.stars-layer-fall .star-fall:nth-child(4){ left:20%; animation-delay:.9s, 1.6s; animation-duration:8.0s, 3.2s; }
.stars-layer-fall .star-fall:nth-child(5){ left:26%; animation-delay:3.4s, .8s; animation-duration:6.6s, 2.8s; }
.stars-layer-fall .star-fall:nth-child(6){ left:32%; animation-delay:1.8s, 1.9s; animation-duration:7.6s, 2.9s; }
.stars-layer-fall .star-fall:nth-child(7){ left:38%; animation-delay:4.1s, .3s; animation-duration:6.9s, 2.5s; }
.stars-layer-fall .star-fall:nth-child(8){ left:44%; animation-delay:2.2s, 1.3s; animation-duration:7.3s, 3.1s; }
.stars-layer-fall .star-fall:nth-child(9){ left:50%; animation-delay:3.6s, .7s; animation-duration:8.1s, 2.7s; }
.stars-layer-fall .star-fall:nth-child(10){ left:56%; animation-delay:1.4s, 1.5s; animation-duration:7.2s, 2.9s; }
.stars-layer-fall .star-fall:nth-child(11){ left:62%; animation-delay:4.4s, .4s; animation-duration:7.8s, 3.2s; }
.stars-layer-fall .star-fall:nth-child(12){ left:68%; animation-delay:2.5s, 1.2s; animation-duration:6.7s, 2.6s; }
.stars-layer-fall .star-fall:nth-child(13){ left:74%; animation-delay:.8s, 1.8s; animation-duration:8.2s, 3s; }
.stars-layer-fall .star-fall:nth-child(14){ left:80%; animation-delay:3.1s, .9s; animation-duration:7.1s, 2.4s; }
.stars-layer-fall .star-fall:nth-child(15){ left:86%; animation-delay:1.9s, 1.4s; animation-duration:7.5s, 3.1s; }
.stars-layer-fall .star-fall:nth-child(16){ left:90%; animation-delay:4.8s, .6s; animation-duration:6.8s, 2.7s; }
.stars-layer-fall .star-fall:nth-child(17){ left:94%; animation-delay:2.9s, 1.7s; animation-duration:7.9s, 2.8s; }
.stars-layer-fall .star-fall:nth-child(18){ left:12%; animation-delay:5.1s, .5s; animation-duration:7.0s, 2.5s; }
.stars-layer-fall .star-fall:nth-child(19){ left:36%; animation-delay:5.6s, 1.0s; animation-duration:7.7s, 2.9s; }
.stars-layer-fall .star-fall:nth-child(20){ left:72%; animation-delay:5.9s, 1.3s; animation-duration:7.3s, 2.6s; }

@media (max-width:820px){
  .stars-layer-1 .star-dot:nth-child(17),
  .stars-layer-1 .star-dot:nth-child(18),
  .stars-layer-1 .star-dot:nth-child(19),
  .stars-layer-1 .star-dot:nth-child(20),
  .stars-layer-2 .star-dot:nth-child(13),
  .stars-layer-2 .star-dot:nth-child(14),
  .stars-layer-2 .star-dot:nth-child(15),
  .stars-layer-2 .star-dot:nth-child(16),
  .stars-layer-3 .star-dot:nth-child(11),
  .stars-layer-3 .star-dot:nth-child(12),
  .stars-layer-3 .star-dot:nth-child(13),
  .stars-layer-3 .star-dot:nth-child(14),
  .stars-layer-fall .star-fall:nth-child(n+15){
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .star-dot,
  .stars-falling .star-fall{
    animation:none;
    opacity:.35;
  }
}