/* LUNA x NEXUS — transfer LUNA into NEXUS design, blue default, 70% header, no neon */
:root{
  --accent:#1676ff;
  --rgb:22,118,255;
  --page-tint:#010409;
  --line:#ffffff16;
  --surface:#ffffff07;
  --muted:#848b9b;
}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{background:var(--page-tint) !important;color:#f3f5fc !important;transition:background .8s cubic-bezier(.16,1,.3,1);overflow-x:hidden !important}
html{overflow-x:hidden !important}

/* Remove old neon */
.bg-orbs,.bg-grid,.hero-glow,.cursor-glow,.scroll-progress{display:none !important}

/* Mesh — exactly like NEXUS */
.mesh{
  z-index:-2 !important;
  pointer-events:none !important;
  background: radial-gradient(circle at 50% -10%, rgba(var(--rgb),.16), transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(var(--rgb),.12), transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(var(--rgb),.12), transparent 50%) !important;
  filter: blur(80px) !important;
  will-change:transform !important;
  animation: 20s linear infinite alternate ambient-drift !important;
  inset:-10% !important;
  position:fixed !important;
}

/* Stars — like NEXUS */
.stars{
  z-index:-1 !important;
  opacity:.16 !important;
  pointer-events:none !important;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 77% 29%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 89% 47%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 30% 55%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 8% 71%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 65% 15%, #fff 70%, #0000),
                    radial-gradient(1px 1px at 56% 63%, #fff 70%, #0000) !important;
  height:900px !important;
  position:absolute !important;
  inset:0 0 auto !important;
}

/* Snow canvas — from NEXUS — made brighter */
.snow-canvas{
  pointer-events:none !important;
  z-index:15 !important;
  opacity:0.65 !important;
  width:100% !important;
  height:100% !important;
  position:fixed !important;
  inset:0 !important;
  filter: drop-shadow(0 0 2px rgba(var(--rgb),0.5)) !important;
}

/* Header — 70% transparent + blur, lift + glow on hover */
.header{
  padding:0 28px !important;
  top:22px !important;
  left:0 !important;right:0 !important;
  position:fixed !important;
  z-index:30 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  height:auto !important;
}
.nav-shell{
  background:#0a0e16b3 !important; /* 70% = b3 */
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border:1px solid #ffffff18 !important;
  border-radius:25px !important;
  height:76px !important;
  max-width:1320px !important;
  margin:auto !important;
  padding:0 23px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:24px !important;
  box-shadow:0 12px 50px #0004 !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s, box-shadow .5s !important;
}
.nav-shell:hover{
  border-color: var(--accent) !important;
  box-shadow:0 25px 50px -12px rgba(var(--rgb),.4) !important;
  background:#0c101ae6 !important;
  transform:translateY(-6px) !important;
}
.brand{font-family:Unbounded,Manrope,sans-serif !important;font-weight:800 !important;letter-spacing:-.055em !important;display:flex !important;align-items:center !important;gap:10px !important}
.brand-icon{
  background:var(--accent) !important;
  color:#041023 !important;
  width:33px !important;height:33px !important;
  border-radius:10px !important;
  box-shadow:0 0 22px rgba(var(--rgb),.28) !important;
  display:grid !important;place-items:center !important;
  font-weight:900 !important;
  font-family:Unbounded,Manrope,sans-serif !important;
  font-size:14px !important;
  line-height:1 !important;
}
.brand>span:not(.brand-icon), .brand>span{
  background-image: linear-gradient(90deg, #ffffff 0%, var(--accent) 25%, #ffffff 50%, var(--accent) 75%, #ffffff 100%) !important;
  background-size:300% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter: drop-shadow(0 0 12px rgba(var(--rgb),0.6)) !important;
  animation: luna-shimmer 6s linear infinite !important;
  display:inline-block !important;
}
@keyframes spectrum-pass{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.brand-period{color:var(--accent) !important;margin-left:-9px !important}
.nav-links{display:flex;gap:3px !important}
.nav-links>button{
  color:#939aa8 !important;white-space:nowrap !important;
  border-radius:10px !important;padding:12px 13px !important;
  font-size:11px !important;font-weight:600 !important;
  position:relative !important;font-family:Manrope,sans-serif !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s, color .3s !important;
}
.nav-links>button:hover{color:#fff !important;background:#ffffff08 !important;transform:translateY(-2px) !important}
.nav-links>button.selected{color:#fff !important;background:#ffffff08 !important}
.nav-links>button.selected:after{
  content:"" !important;background:var(--accent) !important;
  width:4px !important;height:4px !important;
  box-shadow:0 0 9px var(--accent) !important;border-radius:50% !important;
  position:absolute !important;bottom:3px !important;left:calc(50% - 2px) !important;
}
.nav-right{display:flex !important;align-items:center !important;gap:12px !important}

.lang-switch button{font-size:10px !important;padding:6px 8px !important;border-radius:8px !important}
.icon-button{color:#929bac !important;border-radius:10px !important;padding:8px !important;display:grid !important;place-items:center !important}
.icon-button:hover{color:#fff !important;background:#ffffff0a !important}
.nav-profile{
  border:1px solid var(--line) !important;background:#ffffff04 !important;
  border-radius:11px !important;align-items:center !important;gap:8px !important;
  padding:10px 13px !important;font-size:11px !important;font-weight:600 !important;
  display:flex !important;transition: all .4s cubic-bezier(.16,1,.3,1) !important;
}
.nav-profile:hover{border-color:#ffffff30 !important;background:#fff !important;color:#070a10 !important;transform:translateY(-3px) scale(1.035) !important;box-shadow:0 14px 40px -15px #ffffff50 !important}

/* Hero — NEXUS */
.hero{padding-top:187px !important;padding-bottom:45px !important;text-align:center !important;position:relative !important}
.hero .kicker{letter-spacing:.18em !important;color:#7e8799 !important;text-transform:uppercase !important;font-size:9px !important;font-weight:700 !important;justify-content:center !important;display:flex !important;gap:8px !important;align-items:center !important}
.hero h1{
  font-family:Unbounded,Manrope,sans-serif !important;
  font-weight:900 !important;
  letter-spacing:-.072em !important;
  margin:31px 0 26px !important;
  font-size:clamp(44px,6.3vw,84px) !important;
  line-height:1.11 !important;
}
.hero h1>span{
  background-image: linear-gradient(90deg, var(--accent) 0%, #ffffff 20%, var(--accent) 40%, #ffffff 60%, var(--accent) 80%, #ffffff 100%) !important;
  background-size:300% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter: drop-shadow(0 0 28px rgba(var(--rgb),0.5)) !important;
  animation: luna-shimmer 6.5s linear infinite !important;
  display:inline-block !important;
}
.hero>p,.hero-copy{letter-spacing:.015em !important;color:#868d9f !important;font-size:13px !important;line-height:1.8 !important}
.hero-actions{justify-content:center !important;gap:13px !important;margin-top:30px !important;display:flex !important}
.button{
  letter-spacing:.025em !important;border:1px solid #0000 !important;
  border-radius:15px !important;justify-content:center !important;align-items:center !important;
  gap:12px !important;min-height:50px !important;padding:16px 23px !important;
  font-size:10px !important;font-weight:800 !important;display:inline-flex !important;
  font-family:Manrope,sans-serif !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s, color .3s, border-color .4s, box-shadow .4s !important;
}
.button.primary{background:var(--accent) !important;color:#fff !important;box-shadow:0 12px 30px -12px rgba(var(--rgb),.6) !important}
.button.primary:hover:not(:disabled){box-shadow:0 18px 40px -10px rgba(var(--rgb),.6) !important;transform:translateY(-3px) scale(1.035) !important}
.button.secondary{border-color:var(--line) !important;color:#c2c8d5 !important;background:#ffffff04 !important}
.button.secondary:hover:not(:disabled){background:#fff !important;color:#070a10 !important;border-color:#fff !important;transform:translateY(-3px) scale(1.035) !important;box-shadow:0 14px 40px -15px #ffffff50 !important}
.hero-caption{color:#657187 !important;justify-content:center !important;align-items:center !important;gap:7px !important;margin-top:23px !important;font-size:9px !important;display:flex !important}
.separator{color:#3b4555 !important;margin:0 5px !important}
.scroll-hint{letter-spacing:.22em !important;color:#4a5365 !important;justify-content:center !important;align-items:center !important;gap:9px !important;margin-top:51px !important;font-size:7px !important;display:flex !important}
.scroll-hint>span{background:linear-gradient(transparent,var(--accent)) !important;width:1px !important;height:20px !important;display:block !important}

/* Sections */
.section{padding-top:57px !important;padding-bottom:37px !important}
.section-heading{justify-content:space-between !important;align-items:end !important;gap:25px !important;margin-bottom:26px !important;display:flex !important}
.section-heading h2{letter-spacing:-.055em !important;margin-top:12px !important;font-size:26px !important;font-family:Unbounded,Manrope,sans-serif !important}
.section-heading h2>span{color:var(--accent) !important}
.kicker{letter-spacing:.18em !important;color:#7e8799 !important;text-transform:uppercase !important;font-size:9px !important;font-weight:700 !important}

/* Cards — NEXUS event-card */
.cards{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:19px !important;display:grid !important}
.event-card{
  --card-rgb:22,118,255 !important;
  border:1px solid rgba(var(--rgb),0.16) !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),0.045), transparent 62%) !important;
  backdrop-filter: blur(3px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(115%) !important;
  border-radius:24px !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s, box-shadow .5s !important;
  overflow:hidden !important;
}
.event-card:hover{
  border-color: var(--accent) !important;
  box-shadow:0 25px 50px -12px rgba(var(--rgb),.3) !important;
  background-color:#ffffff05 !important;
  transform:translateY(-8px) !important;
}
.event-body{padding:20px !important}
.badge{color:#929bad !important;align-items:center !important;gap:6px !important;font-size:9px !important;font-weight:600 !important;display:inline-flex !important}
.badge>i{background:currentColor !important;border-radius:50% !important;width:5px !important;height:5px !important;display:block !important}
.event-title{letter-spacing:-.045em !important;text-align:left !important;justify-content:space-between !important;align-items:center !important;gap:10px !important;width:100% !important;margin-top:12px !important;padding:0 !important;font:600 16px Unbounded !important;display:flex !important}
.icon-box{transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s, color .4s !important}
.event-card:hover .icon-box{background:var(--accent) !important;color:#030712 !important;transform:rotate(8deg) scale(1.08) !important}

/* Pricing */
.event-card .button{width:100% !important}

/* Panel — telegram */
.panel{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:25px !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s, box-shadow .5s !important;
}
.panel:hover{
  border-color: var(--accent) !important;
  box-shadow:0 25px 50px -12px rgba(var(--rgb),.3) !important;
  background-color:#ffffff05 !important;
  transform:translateY(-8px) !important;
}

/* Rule list FAQ */
.rule-list details{
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  border-radius:17px !important;
  margin-bottom:13px !important;
  padding:0 23px !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s, box-shadow .5s !important;
}
.rule-list details:hover{
  border-color: var(--accent) !important;
  box-shadow:0 25px 50px -12px rgba(var(--rgb),.3) !important;
  background-color:#ffffff05 !important;
  transform:translateY(-4px) !important;
}
.rule-list summary{
  cursor:pointer !important;align-items:center !important;gap:17px !important;
  padding:22px 0 !important;font-size:13px !important;list-style:none !important;display:flex !important;
}
.rule-list summary::-webkit-details-marker{display:none !important}
.rule-list summary>svg{color:#6c819e !important;margin-left:auto !important;transition: transform .3s !important}
.rule-list details[open] summary>svg{transform:rotate(180deg) !important}
.rule-list details>p{white-space:pre-wrap !important;overflow-wrap:anywhere !important;padding:0 0 23px !important;font-size:12px !important;line-height:1.9 !important;color:var(--muted) !important}

/* Account modal — beautiful */
#account-dialog{
  background: radial-gradient(ellipse at 60% -20%, rgba(var(--rgb),.08), transparent 50%), #090e18 !important;
  border:1px solid #ffffff16 !important;
  border-radius:27px !important;
  box-shadow:0 35px 100px #0008 !important;
  padding:38px !important;
  max-width:630px !important;
  width:100% !important;
}
#account-dialog .kicker{color:#7e8799 !important;letter-spacing:.18em !important;font-size:9px !important}
#account-dialog h2{font-family:Unbounded,Manrope,sans-serif !important;font-size:26px !important;line-height:1.35 !important;margin:17px 0 13px !important}
.luna-email-card{
  border:1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius:20px !important;
  padding:24px !important;
  text-align:left !important;
}
.luna-email-card .card-label{font-size:9px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:#7e8799 !important;margin-bottom:12px !important}
.luna-input-group{display:flex !important;gap:10px !important;align-items:center !important}
.luna-input{
  flex:1 !important;
  background:#070c15 !important;
  border:1px solid #ffffff12 !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  color:#dce5f8 !important;
  font-size:13px !important;
  outline:none !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.luna-input:focus{border-color: var(--accent) !important;box-shadow:0 0 0 4px rgba(var(--rgb),.12) !important}
.luna-input::placeholder{color:#455876 !important}
.luna-code-input{letter-spacing:.25em !important;text-align:center !important;font-family:Unbounded,Manrope,sans-serif !important;font-size:18px !important;font-weight:600 !important}
.luna-btn{border-radius:12px !important;min-height:46px !important;padding:12px 20px !important;font-size:11px !important;font-weight:700 !important;white-space:nowrap !important}
.luna-btn.primary{background:var(--accent) !important;color:#fff !important;box-shadow:0 12px 30px -12px rgba(var(--rgb),.6) !important}
.luna-status{
  font-size:11px !important;color:#93a3bc !important;margin-top:12px !important;min-height:18px !important;line-height:1.6 !important;
  padding:10px 14px !important;border-radius:10px !important;background:#ffffff03 !important;border:1px solid transparent !important;
}
.luna-status.has-code{background:rgba(var(--rgb),.06) !important;border-color:rgba(var(--rgb),.15) !important;color:#a8c5ff !important}
.luna-divider{display:flex !important;align-items:center !important;gap:12px !important;color:#5a6a80 !important;font-size:9px !important;text-transform:uppercase !important;letter-spacing:.12em !important}
.luna-divider::before,.luna-divider::after{content:'' !important;flex:1 !important;height:1px !important;background:var(--line) !important}
.luna-hint{margin-top:14px !important;padding:14px 16px !important;border-radius:12px !important;background:#070c15 !important;border:1px solid #ffffff0a !important;font-size:10px !important;color:#6b7c95 !important;line-height:1.7 !important}

/* Trust badges */
.hero-trust{display:flex !important;gap:8px !important;flex-wrap:wrap !important;margin-top:18px !important;justify-content:center !important}
.trust-badge{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:7px 12px !important;border-radius:10px !important;
  background:#ffffff04 !important;border:1px solid var(--line) !important;
  font-size:9px !important;color:#a6afbf !important;
}

/* Final CTA */
.final-cta{text-align:center !important;border-top:1px solid var(--line) !important;background:radial-gradient(ellipse at 50% 130%, rgba(var(--rgb),.1), transparent 65%) !important;margin-top:60px !important;padding-top:80px !important;padding-bottom:85px !important;position:relative !important;overflow:hidden !important}
.final-cta h2{margin:20px 0 26px !important;font-size:32px !important;line-height:1.5 !important;font-family:Unbounded,Manrope,sans-serif !important}
.final-cta h2>span{color:var(--accent) !important}

/* Footer */
.footer{border-top:1px solid var(--line) !important;padding-top:28px !important;padding-bottom:27px !important}
.footer .brand{font-size:13px !important}

/* Toast */
.toast{display:none !important}
.toast.visible{display:flex !important;align-items:center !important;gap:12px !important;position:fixed !important;bottom:24px !important;right:24px !important;padding:15px 20px !important;font-size:12px !important;line-height:1.5 !important;max-width:calc(100% - 36px) !important;z-index:1000 !important;color:#e8f1ff !important;background:linear-gradient(150deg,#101d30,#0a1424) !important;border:1px solid rgba(var(--rgb),.45) !important;border-radius:15px !important;box-shadow:0 18px 50px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset !important;opacity:1 !important;transform:none !important;pointer-events:auto !important}
.toast:empty{display:none !important}
@media(max-width:700px){.toast.visible{bottom:14px !important;right:14px !important;left:14px !important;font-size:11px !important;padding:13px 16px !important}}

/* Mobile menu */
.hamburger{display:none}

/* Animations from NEXUS */
@keyframes ambient-drift{0%{transform:scale(1) rotate(0)}to{transform:scale(1.15) rotate(3deg)}}
@keyframes spectrum-pass{0%{background-position:0%}to{background-position:200%}}
@keyframes rippleEffect{0%{transform:translate(-50%,-50%) scale(0);opacity:0.5}100%{transform:translate(-50%,-50%) scale(20);opacity:0}}

/* Responsive — like NEXUS */
@media(max-width:820px){
  .header{padding:0 16px !important;top:14px !important}
  .nav-shell{border-radius:20px !important;height:68px !important}
  .nav-links{display:none !important;backdrop-filter:blur(24px);background:#090f1cf5;border:1px solid var(--line);border-radius:19px;padding:10px;position:absolute;top:80px;left:16px;right:16px;box-shadow:0 20px 50px #0008;flex-direction:column;z-index:40}
  .nav-links.expanded{display:flex !important}
  .nav-links>button{text-align:left;padding:15px 16px !important;font-size:13px !important}
  .hamburger{display:grid !important;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:11px;color:#c2ccdd;background:#ffffff04}
  .hamburger:hover{color:#fff;border-color:rgba(var(--rgb),.5)}
  .hamburger[aria-expanded="true"]{background:rgba(var(--rgb),.14);border-color:rgba(var(--rgb),.5);color:#fff}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .hero{padding-top:150px !important}
}
@media(max-width:540px){
  .header{padding:0 10px !important;top:10px !important}
  .nav-shell{border-radius:19px !important;gap:10px !important;height:62px !important;padding:0 14px !important}
  .hero h1{font-size:clamp(27px,7.6vw,41px) !important}
  .cards{grid-template-columns:1fr !important;gap:20px !important}
  .luna-input-group{flex-direction:column !important}
  .luna-input-group .luna-btn{width:100% !important}
  .section{padding-top:42px !important;padding-bottom:20px !important}
}
@media(prefers-reduced-motion:reduce){
  .mesh{animation:none !important}
  .snow-canvas{display:none !important}
  .nav-shell:hover,.panel:hover,.event-card:hover{transform:none !important}
}

/* Trust badges — fixed small pills, not huge cards */
.hero-trust{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:22px !important;
  justify-content:center !important;
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.trust-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background: #ffffff06 !important;
  border:1px solid #ffffff12 !important;
  font-size:10px !important;
  font-weight:500 !important;
  color:#a6b9d6 !important;
  letter-spacing:0.01em !important;
  white-space:nowrap !important;
  line-height:1 !important;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}
.trust-badge svg{
  width:14px !important;
  height:14px !important;
  flex-shrink:0 !important;
  opacity:0.8 !important;
}
.trust-badge:hover{
  background:#ffffff0a !important;
  border-color:#ffffff20 !important;
  color:#dce5f8 !important;
  transform:translateY(-1px) !important;
}

/* Telegram float — bigger, no black circle, fixed */
.telegram-float-cta{
  position:fixed !important;
  bottom:28px !important;
  right:28px !important;
  z-index:40 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 22px !important;
  background: var(--accent) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  border-radius:999px !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  box-shadow:0 12px 32px -8px rgba(var(--rgb),0.6), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  text-decoration:none !important;
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
  backdrop-filter: blur(12px) !important;
}
.telegram-float-cta:hover{
  transform:translateY(-3px) scale(1.03) !important;
  box-shadow:0 18px 40px -8px rgba(var(--rgb),0.7), 0 0 0 1px rgba(255,255,255,0.15) inset !important;
  background: #1a7dff !important;
}
.telegram-float-cta svg{flex-shrink:0 !important}
.telegram-float-cta svg:last-child{opacity:0.7 !important}
.telegram-float-cta span{white-space:nowrap !important}

/* Telegram panel bigger */
#telegram .panel{
  padding:64px 64px !important;
  gap:64px !important;
  border:1px solid rgba(var(--rgb),.18) !important;
  background: radial-gradient(ellipse at 85% 50%, rgba(var(--rgb),.12), transparent 55%), radial-gradient(ellipse at 15% 0%, rgba(var(--rgb),.06), transparent 50%), #ffffff06 !important;
  box-shadow: 0 20px 60px -20px rgba(var(--rgb),.25), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
#telegram .panel h2{font-size:clamp(28px,3.2vw,42px) !important}
@media(max-width:700px){
  .telegram-float-cta{
    bottom:18px !important;right:18px !important;left:18px !important;
    justify-content:center !important;
    padding:16px 20px !important;
    font-size:13px !important;
  }
  #telegram .panel{padding:32px 24px !important;grid-template-columns:1fr !important;gap:32px !important}
  .hero-trust{gap:8px !important}
  .trust-badge{font-size:9px !important;padding:7px 12px !important}
}

/* Fix account dialog - no huge icons, no scroll issues */
#account-dialog{
  max-height:90vh !important;
  overflow:auto !important;
}
#account-dialog .button svg{
  width:16px !important;
  height:16px !important;
  flex-shrink:0 !important;
}
#account-dialog .panel svg{
  width:16px !important;
  height:16px !important;
}
.luna-email-card{
  overflow:hidden !important;
}
.luna-hint{
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}
.luna-input-group{
  flex-wrap:nowrap !important;
}
.luna-input{
  min-width:0 !important;
}

/* Fix telegram float - remove any pseudo that could be black circle */
.telegram-float-cta::before,
.telegram-float-cta::after{
  display:none !important;
  content:none !important;
}
.telegram-float-cta{
  overflow:hidden !important;
  white-space:nowrap !important;
  max-width:calc(100vw - 32px) !important;
}
.telegram-float-cta span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:220px !important;
}
@media(max-width:700px){
  .telegram-float-cta span{max-width:160px !important}
}

/* Fix huge Discord icon in login */
#account-dialog #join-discord svg,
#account-dialog #oauth-button svg{
  width:18px !important;
  height:18px !important;
}
#account-dialog .button.secondary svg{
  width:16px !important;
  height:16px !important;
}

/* Moon logo — old LUNA logo, blue and theme-aware */
.moon-logo{
  width:28px !important;
  height:28px !important;
  display:inline-block !important;
  border-radius:50% !important;
  background: radial-gradient(circle at 30% 30%, var(--accent), #0a4ab3) !important;
  background: linear-gradient(130deg, var(--accent) 10%, #0a4ab3 90%) !important;
  position:relative !important;
  transform:rotate(-20deg) !important;
  box-shadow: 0 0 18px rgba(var(--rgb),0.4), 0 0 0 1px rgba(var(--rgb),0.15) inset !important;
  flex-shrink:0 !important;
  transition: background .5s, box-shadow .5s !important;
}
.moon-logo:after{
  content:'' !important;
  position:absolute !important;
  width:22px !important;
  height:22px !important;
  left:9px !important;
  top:-3px !important;
  border-radius:50% !important;
  background: #0a0e16 !important;
  background: var(--page-tint) !important;
  transition: background .5s !important;
}
.brand:hover .moon-logo{
  box-shadow: 0 0 28px rgba(var(--rgb),0.6), 0 0 0 1px rgba(var(--rgb),0.25) inset !important;
  transform:rotate(-15deg) scale(1.05) !important;
}

/* Telegram float — fixed, no black circle */
.telegram-float-cta{
  position:fixed !important;
  bottom:28px !important;
  right:28px !important;
  z-index:9999 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:14px 20px !important;
  background: var(--accent) !important;
  background: var(--accent) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.2) !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow: 0 10px 30px rgba(var(--rgb),0.45) !important;
  text-decoration:none !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  max-width:320px !important;
}
.telegram-float-cta::before,
.telegram-float-cta::after{
  content:none !important;
  display:none !important;
}
.telegram-float-cta svg{
  width:18px !important;
  height:18px !important;
  flex-shrink:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}
.telegram-float-cta span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Hero big buttons — 3x bigger as requested */
.button.hero-big{
  min-height:64px !important;
  padding:20px 36px !important;
  font-size:13px !important;
  font-weight:800 !important;
  border-radius:16px !important;
  gap:14px !important;
  letter-spacing:0.02em !important;
}
.button.hero-big svg{width:20px !important;height:20px !important}
@media(max-width:700px){
  .button.hero-big{
    min-height:58px !important;
    padding:18px 28px !important;
    font-size:12px !important;
    width:100% !important;
    max-width:340px !important;
  }
  .hero-actions{flex-direction:column !important;align-items:center !important}
}

/* Tilt — make app images rotatable like before */
.tilt-zone{
  perspective:1300px !important;
  position:relative !important;
  border-radius:24px !important;
  touch-action:pan-y !important;
}
.tilt-card{
  border:1px solid rgba(var(--rgb),0.12) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:0 20px 60px -20px rgba(var(--rgb),0.15), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  transform-style:preserve-3d !important;
  will-change:transform !important;
  position:relative !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),0.08), transparent 60%), #0a0e16 !important;
  background: linear-gradient(180deg, #0a0e16, #070a12) !important;
  transition: border-color .4s, box-shadow .4s, transform .4s !important;
  transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) !important;
}
.tilt-zone.is-tilting .tilt-card{
  border-color: rgba(var(--rgb),0.35) !important;
  box-shadow:0 30px 90px #000a, 0 0 50px rgba(var(--rgb),0.15) !important;
}
.card-glare{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transition:opacity .5s !important;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.12), transparent 55%) !important;
}
.tilt-zone.is-tilting .card-glare{opacity:1 !important}
.tilt-meter{
  position:absolute !important;
  right:12px !important;bottom:12px !important;
  padding:6px 9px !important;
  border:1px solid #ffffff18 !important;
  border-radius:8px !important;
  background:#111c !important;
  backdrop-filter:blur(12px) !important;
  font:9px/1.5 monospace !important;
  color:#ccc !important;
  opacity:0 !important;
  transition:opacity .3s !important;
}
.tilt-zone.is-tilting .tilt-meter{opacity:1 !important}

/* Comparison — restore */
.comparison-section{max-width:1216px !important;margin:0 auto !important;padding:0 32px !important;padding-top:48px !important;padding-bottom:64px !important}
.comparison-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:24px !important}
.comparison-card{border:1px solid rgba(var(--rgb),0.12) !important;background: radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),0.08), transparent 70%), linear-gradient(180deg, #0a0e16, #080a12) !important;border-radius:20px !important;padding:14px 14px 0 !important;transition:border-color .3s, box-shadow .3s, transform .4s !important}
.comparison-card:hover{border-color:var(--accent) !important;box-shadow:0 10px 40px #0006, 0 0 30px rgba(var(--rgb),0.1) !important;transform:translateY(-4px) !important}
.comparison-stage{position:relative !important;aspect-ratio:1120/628 !important;overflow:hidden !important;border-radius:12px !important;background: #070a12 !important;cursor:ew-resize !important;border:1px solid rgba(var(--rgb),0.08) !important}
.comparison-stage img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
.comparison-after{position:absolute !important;inset:0 !important;clip-path:inset(0 0 0 var(--split)) !important}
.comparison-before img{filter:none !important}
.comparison-after img{filter:saturate(1.85) brightness(1.10) contrast(1.04) !important}
[data-comparison="rust"] .comparison-after img{filter:saturate(2.6) brightness(1.06) contrast(1.06) !important}
.comparison-label{position:absolute !important;top:12px !important;padding:6px 9px !important;border-radius:6px !important;border:1px solid #ffffff30 !important;background:#111b !important;color:#fff !important;font-size:8px !important;font-weight:650 !important;letter-spacing:.12em !important;backdrop-filter:blur(6px) !important}
.comparison-label-before{left:12px !important}.comparison-label-after{right:12px !important}
.comparison-divider{position:absolute !important;top:0 !important;bottom:0 !important;left:var(--split) !important;width:2px !important;transform:translateX(-50%) !important;background:#fff !important;box-shadow:0 0 8px #0006 !important;z-index:3 !important}
.comparison-handle{position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:32px !important;height:32px !important;background:#fff !important;border-radius:50% !important;display:grid !important;place-items:center !important;box-shadow:0 2px 10px #0005 !important;color:#111 !important}
.comparison-range{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;opacity:0 !important;cursor:ew-resize !important;z-index:4 !important}
.comparison-reset{font-size:9px !important;color:#666 !important;padding:4px 8px !important;border:1px solid var(--line) !important;border-radius:8px !important;background:#ffffff04 !important}
.comparison-reset:hover{color:#fff !important;border-color:var(--accent) !important}

/* Logo img */
.moon-logo-img{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  object-fit:cover !important;
  box-shadow:0 0 20px rgba(var(--rgb),0.4) !important;
  transition: box-shadow .4s, transform .4s !important;
  background:var(--accent) !important;
}
.brand:hover .moon-logo-img{
  box-shadow:0 0 30px rgba(var(--rgb),0.6) !important;
  transform:scale(1.05) rotate(-3deg) !important;
}

/* Legal footer */
.legal-footer-links{display:flex !important;gap:16px !important;flex-wrap:wrap !important;font-size:9px !important;margin-top:16px !important}
.legal-footer-links a{color:#6b7c95 !important}
.legal-footer-links a:hover{color:#dce5f8 !important}

/* Remove float CTA completely */
.telegram-float-cta{display:none !important}

/* Big Telegram banner */
.telegram-big{
  padding:72px 72px !important;
  gap:72px !important;
  border:1px solid rgba(var(--rgb),0.28) !important;
  background: radial-gradient(ellipse at 85% 50%, rgba(var(--rgb),0.18), transparent 60%), radial-gradient(ellipse at 15% 0%, rgba(var(--rgb),0.10), transparent 50%), linear-gradient(135deg, #0e1525, #0a0e16) !important;
  box-shadow: 0 24px 80px -20px rgba(var(--rgb),0.5), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 120px rgba(var(--rgb),0.08) !important;
  border-radius:28px !important;
  position:relative !important;
  overflow:hidden !important;
}
.telegram-big::before{
  content:'' !important;
  position:absolute !important;
  inset:-1px !important;
  background: linear-gradient(45deg, var(--accent), #4a90ff, var(--accent)) !important;
  background-size:200% 200% !important;
  border-radius:28px !important;
  z-index:-1 !important;
  opacity:0.12 !important;
  animation: telegramGlow 4s ease infinite !important;
}
@keyframes telegramGlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.telegram-big h2{font-size:clamp(32px,3.5vw,48px) !important;line-height:1.1 !important}
.telegram-big .button.primary{
  min-height:56px !important;
  padding:18px 32px !important;
  font-size:13px !important;
  background: var(--accent) !important;
  box-shadow: 0 12px 32px -8px rgba(var(--rgb),0.6) !important;
}

/* Единый шиммер: яркий блик, который видно */
.brand>span:not(.brand-icon),
.brand>span,
.shimmer-text,
.shimmer-title .shimmer-text,
.hero h1>span{
  background-image:linear-gradient(100deg,var(--accent) 0%,var(--accent) 30%,#ffffff 46%,#a9ccff 54%,var(--accent) 70%,var(--accent) 100%) !important;
  background-size:250% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:luna-shimmer 6.5s linear infinite !important;
  filter:drop-shadow(0 0 20px rgba(var(--rgb),.45)) !important;
  will-change:background-position;
}
.brand>span:not(.brand-icon),
.brand>span{
  background-image:linear-gradient(100deg,#ffffff 0%,#ffffff 32%,var(--accent) 47%,#8fbcff 53%,#ffffff 68%,#ffffff 100%) !important;
  animation-duration:6s !important;
  filter:drop-shadow(0 0 10px rgba(var(--rgb),.55)) !important;
}
.shimmer-title{background:none !important;color:#f3f5fc !important}
@keyframes luna-shimmer{
  0%{background-position:140% 0}
  100%{background-position:-140% 0}
}

}



/* If user sees small blue outlined oval at bottom right, it's likely old float CTA cached - force hide any fixed small element at viewport corner */
body::after {
  content: '' !important;
  display: none !important;
}

/* Ensure showcase text is visible and not cut */
.showcase-grid .event-card .tilt-zone::after {
  content: none !important;
}

/* Hide any fixed element that is <100px and at bottom right with blue border - emergency */


/* Actually hide the blue oval specifically */


/* FINAL FIX: remove stray blue oval - was old float CTA */
.telegram-float-cta{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;width:0 !important;height:0 !important;overflow:hidden !important;position:absolute !important;left:-9999px !important}
.tilt-meter{display:none !important}
.card-glare{display:none !important}

/* Прозрачные карточки — как в референсе */
#features .event-card,
.cards .event-card{
  border:1px solid rgba(var(--rgb),.16) !important;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),.05), transparent 65%) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
  box-shadow:none !important;
}
#features .event-card:hover,
.cards .event-card:hover{
  border-color:rgba(var(--rgb),.5) !important;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),.10), transparent 68%) !important;
  box-shadow:0 24px 60px -30px rgba(var(--rgb),.5) !important;
}
/* Крупнее и воздушнее, как на референсе */
#features .event-card{padding:34px 34px 40px !important}
#features .event-card .event-body{padding:0 !important}
#features .event-card .icon-box{
  width:56px !important;height:56px !important;border-radius:16px !important;
  background:rgba(var(--rgb),.055) !important;border:1px solid rgba(var(--rgb),.2) !important;
}
#features .event-card .icon-box svg{width:24px !important;height:24px !important}
#features .event-card .event-title{margin-top:26px !important;font-size:22px !important;letter-spacing:-.03em !important}
#features .event-card p{font-size:13.5px !important;line-height:1.75 !important;color:#8b95a7 !important;margin-top:12px !important}
@media(max-width:700px){
  #features .event-card{padding:24px 22px 28px !important}
  #features .event-card .event-title{font-size:18px !important;margin-top:20px !important}
  #features .event-card p{font-size:12px !important}
  #features .event-card .icon-box{width:48px !important;height:48px !important;border-radius:14px !important}
}



/* === Карточки — геометрия 1:1 с фото (замерено: 3×395px, gap 24, p-10, r-36) === */
#features.container{
  max-width:1280px !important;
  width:calc(100% - 48px) !important;
  padding-left:24px !important;padding-right:24px !important;
  margin-left:auto !important;margin-right:auto !important;
}
#features .features-head{display:block !important;text-align:center !important;margin-bottom:0 !important}
#features .features-head-inner{max-width:900px;margin:0 auto}
#features .features-head .kicker{justify-content:center;display:flex !important}
#features .features-head h2{
  margin-top:16px !important;
  font-family:Unbounded,Manrope,sans-serif !important;
  font-size:clamp(26px,2.9vw,38px) !important;
  font-weight:900 !important;line-height:1.2 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;color:#fff !important;
}
#features .cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  margin-top:56px !important;
  align-items:stretch !important;
}
#features .event-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  padding:40px !important;
  border-radius:36px !important;
  border:1px solid rgba(255,255,255,.05) !important;
  background:rgba(255,255,255,.02) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:translateY(0) translateZ(0) !important;
  transition:all .5s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform,border-color !important;
}
#features .event-card::before,#features .event-card::after{display:none !important;content:none !important}
@media (hover:hover) and (pointer:fine){
  #features .event-card:hover{
    border-color:var(--accent) !important;
    transform:translateY(-8px) translateZ(0) !important;
    background:rgba(255,255,255,.04) !important;
    box-shadow:0 25px 50px -12px rgba(var(--rgb),.4) !important;
  }
}
#features .event-card .icon-box{
  width:50px !important;height:50px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  color:var(--accent) !important;
  margin:0 0 26px !important;
  box-shadow:none !important;
  transition:.4s cubic-bezier(.16,1,.3,1) !important;
}
#features .event-card .icon-box svg{width:24px !important;height:24px !important}
@media (hover:hover) and (pointer:fine){
  #features .event-card:hover .icon-box{
    background:var(--accent) !important;color:#000 !important;
    border-color:var(--accent) !important;
    transform:rotate(8deg) scale(1.1) !important;
  }
}
#features .event-card h3{
  margin:0 0 14px !important;
  font-family:Manrope,Unbounded,sans-serif !important;
  font-size:21px !important;font-weight:800 !important;
  letter-spacing:-.01em !important;line-height:1.28 !important;color:#fff !important;
}
#features .event-card p{
  margin:0 !important;
  font-size:14.5px !important;line-height:1.5 !important;
  color:#6b7280 !important;font-weight:400 !important;
}
#features .event-card .feature-link{
  margin-top:auto !important;padding-top:20px !important;
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  font-size:10px !important;font-weight:700 !important;letter-spacing:.1em !important;
  color:#5f6875 !important;text-transform:uppercase !important;
  transition:color .35s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1) !important;
}
#features .event-card .feature-link svg{width:13px !important;height:13px !important}
@media (hover:hover) and (pointer:fine){
  #features .event-card:hover .feature-link{color:var(--accent) !important;transform:translate(3px,-2px) !important}
}
@media(max-width:1024px){
  #features .cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:20px !important;margin-top:40px !important}
  #features .event-card{padding:32px !important;border-radius:28px !important}
  #features .features-head h2{font-size:24px !important}
}
@media(max-width:620px){
  #features .cards{grid-template-columns:1fr !important;gap:16px !important;margin-top:32px !important}
  #features .event-card{padding:26px !important;border-radius:24px !important}
  #features .features-head h2{font-size:20px !important;letter-spacing:.06em !important}
}

/* === Фон как на getsnapix.netlify.app: почти чёрный + мягкий синий mesh + шум === */
:root{--page-tint:#010204 !important}
body{background:#010204 !important}
.mesh{
  background:
    radial-gradient(circle at 50% -10%, rgba(var(--rgb),.12), transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(var(--rgb),.12), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(var(--rgb),.12), transparent 50%) !important;
  filter:blur(100px) !important;
  animation:meshMove 20s linear infinite alternate !important;
  inset:-10% !important;
  position:fixed !important;
  z-index:-2 !important;
  pointer-events:none !important;
  will-change:transform !important;
}
@keyframes meshMove{0%{transform:scale(1) rotate(0)}100%{transform:scale(1.15) rotate(3deg)}}
/* шум поверх — как у snapix, без внешних картинок */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:9998 !important;
  opacity:.015 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}
/* звёзды чуть тише, чтобы фон был глубже */
.stars{opacity:.12 !important}

/* === Плавающая плашка Telegram — заметная, голубая === */
.tg-pill{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  z-index:60 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:13px !important;
  padding:15px 22px 15px 16px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(56,189,248,.85) !important;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 60%,rgba(var(--rgb),.75) 100%) !important;
  box-shadow:0 18px 45px -12px rgba(14,165,233,.9), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 60px -8px rgba(56,189,248,.85) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  color:#04121f !important;
  font-family:Manrope,sans-serif !important;
  text-decoration:none !important;
  animation:tg-breathe 3.6s ease-in-out infinite !important;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,filter .45s ease !important;
}
@keyframes tg-breathe{
  0%,100%{box-shadow:0 18px 45px -12px rgba(14,165,233,.9), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 46px -6px rgba(56,189,248,.75)}
  50%{box-shadow:0 22px 55px -12px rgba(14,165,233,1), 0 0 0 1px rgba(255,255,255,.28) inset, 0 0 80px -4px rgba(56,189,248,1)}
}
.tg-pill:hover{transform:translateY(-6px) scale(1.045) !important;filter:brightness(1.12) !important}
.tg-pill:active{transform:translateY(-2px) scale(.99) !important}
.tg-pill .tg-ico{
  width:38px !important;height:38px !important;
  display:grid !important;place-items:center !important;
  border-radius:12px !important;
  background:rgba(4,18,31,.16) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  transition:transform .45s cubic-bezier(.16,1,.3,1) !important;
}
.tg-pill:hover .tg-ico{transform:rotate(-10deg) scale(1.08) !important}
.tg-pill .tg-ico svg{width:20px !important;height:20px !important}
.tg-pill .tg-txt{display:flex !important;flex-direction:column !important;line-height:1.2 !important;text-align:left !important}
.tg-pill .tg-txt b{font-size:14px !important;font-weight:900 !important;color:#03121e !important;letter-spacing:.01em !important}
.tg-pill .tg-txt small{font-size:10.5px !important;font-weight:700 !important;color:rgba(3,18,30,.72) !important;letter-spacing:.01em !important}
.tg-pill .tg-arrow{color:rgba(3,18,30,.7) !important;transition:transform .4s cubic-bezier(.16,1,.3,1),color .4s !important}
.tg-pill:hover .tg-arrow{color:#03121e !important;transform:translate(3px,-3px) !important}
.tg-pill .tg-arrow svg{width:16px !important;height:16px !important}
@media(max-width:620px){
  .tg-pill{right:12px !important;bottom:12px !important;padding:11px 16px 11px 12px !important;gap:10px !important}
  .tg-pill .tg-ico{width:32px !important;height:32px !important;border-radius:10px !important}
  .tg-pill .tg-txt b{font-size:12.5px !important}
  .tg-pill .tg-txt small{display:none !important}
  .tg-pill .tg-arrow{display:none !important}
}
@media(prefers-reduced-motion:reduce){.tg-pill{animation:none !important}}


/* Страховка: иконки внутри плашки никогда не растягиваются */
.tg-pill svg{width:20px !important;height:20px !important;max-width:20px !important;max-height:20px !important;display:block !important}
.tg-pill .tg-ico svg{width:20px !important;height:20px !important}
.tg-pill .tg-arrow svg{width:16px !important;height:16px !important}

/* === Точки тем в шапке (как NEXUS theme-dots) === */
.theme-dots{
  display:flex !important;align-items:center !important;gap:9px !important;
  padding-right:12px !important;margin-right:4px !important;
  border-right:1px solid var(--line) !important;
}
.theme-dot{
  width:13px !important;height:13px !important;padding:0 !important;
  border-radius:50% !important;border:0 !important;
  background:var(--accent) !important;
  opacity:.42 !important;
  transform:scale(1);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s !important;
  cursor:pointer !important;
}
.theme-dot.purple{background:#a55aff !important}
.theme-dot.amber{background:#ffb42c !important}
.theme-dot:hover{opacity:1 !important;transform:scale(1.25) !important}
.theme-dot.selected{
  opacity:1 !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.13), 0 0 14px rgba(var(--rgb),.65) !important;
}
@media(max-width:700px){
  .theme-dots{gap:7px !important;padding-right:8px !important}
  .theme-dot{width:11px !important;height:11px !important}
}
@media(max-width:520px){
  .theme-dots{display:none !important}
}

/* Акцент следует за темой */
.tg-pill{background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 60%,rgba(var(--rgb),.75) 100%) !important}
.brand>span:not(.brand-icon),.brand>span,.shimmer-text,.shimmer-title .shimmer-text,.hero h1>span{
  
}
.brand>span:not(.brand-icon),.brand>span{
  background-image:linear-gradient(100deg,#ffffff 0%,#ffffff 32%,var(--accent) 47%,#ffffff 53%,#ffffff 68%,#ffffff 100%) !important;
}

/* показываем точки тем (перебиваем старое скрытие) */
.nav-right .theme-dots{display:flex !important;visibility:visible !important;opacity:1 !important}

/* === Шиммер и плашка: строго два цвета — белый + текущий акцент (как в snapix) === */
.brand>span:not(.brand-icon),
.brand>span,
.shimmer-text,
.shimmer-title .shimmer-text,
.hero h1>span{
  background-image:linear-gradient(90deg,#ffffff 0%,#ffffff 18%,var(--accent) 50%,#ffffff 82%,#ffffff 100%) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:luna-shimmer 6s linear infinite !important;
  filter:drop-shadow(0 0 16px rgba(var(--rgb),.45)) !important;
  will-change:background-position !important;
}
.brand>span:not(.brand-icon),.brand>span{
  background-image:linear-gradient(90deg,#ffffff 0%,var(--accent) 25%,#ffffff 50%,var(--accent) 75%,#ffffff 100%) !important;
  background-size:200% auto !important;
  filter:drop-shadow(0 0 8px rgba(var(--rgb),.6)) !important;
}
/* .logo-text из snapix */
@keyframes luna-shimmer{to{background-position:200% center}}
.tg-pill{
  background:linear-gradient(135deg,rgba(var(--rgb),.95) 0%,var(--accent) 55%,rgba(var(--rgb),.72) 100%) !important;
  border:1.5px solid rgba(var(--rgb),.85) !important;
  box-shadow:0 18px 45px -12px rgba(var(--rgb),.9), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 46px -6px rgba(var(--rgb),.75) !important;
}
.tg-pill .tg-ico{background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.35) !important}


/* === Панель (v35): статично тёмная, ховер — анимация 1:1 из NEXUS.html === */
.nav-shell{
  background:linear-gradient(135deg,
    rgba(var(--rgb),.045) 0%,
    rgba(var(--rgb),.012) 42%,
    #090e17f2 100%) !important;
  border:1px solid rgba(var(--rgb),.10) !important;
  backdrop-filter:blur(26px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(120%) !important;
  box-shadow:0 14px 46px rgba(0,0,0,.42) !important;
  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    border-color .5s cubic-bezier(.16,1,.3,1),
    background .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform !important;
}
/* ровно как .nav-shell:hover в NEXUS.html */
@media (hover:hover) and (pointer:fine){
  .nav-shell:hover{
    border-color:var(--accent) !important;
    box-shadow:0 25px 50px -12px rgba(var(--rgb),.4) !important;
    background:#0c101ae6 !important;
    transform:translateY(-6px) !important;
  }
  /* остальные элементы шапки — по оригиналу */
  .nav-links>button:hover{
    background:#ffffff0b !important;
    transform:translateY(-2px) !important;
  }
  .nav-profile:hover{
    color:#070a10 !important;
    background:#fff !important;
    border-color:#fff !important;
    transform:translateY(-3px) scale(1.035) !important;
    box-shadow:0 14px 40px -15px #ffffff50 !important;
  }
  .nav-profile:hover svg{color:#070a10 !important}
  .nav-profile:hover .avatar{background:#0a101a !important;color:#fff !important;box-shadow:none !important}
}
.nav-shell:active{transform:translateY(-2px) scale(.995) !important}

/* активный пункт меню — тонкая полоска, без заливки */
.nav-links>button.selected{
  background:transparent !important;
  color:#fff !important;
}
.nav-links>button.selected:after{background:var(--accent) !important;box-shadow:0 0 9px var(--accent) !important}
/* кнопка «Войти» — нейтральная в покое */
.nav-profile{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.03) !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .4s, color .3s, border-color .4s, box-shadow .4s !important;
}
.nav-profile .avatar{
  background:rgba(var(--rgb),.85) !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:background .3s, color .3s !important;
}
/* логотип — в цвет темы, без свечения */
.moon-logo-img{
  background:var(--accent) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) !important;
  transition:box-shadow .4s,transform .4s,background .4s !important;
}
.brand:hover .moon-logo-img{
  background:var(--accent) !important;
  box-shadow:0 0 10px rgba(var(--rgb),.28) !important;
}
/* язык — нейтральный, активный лёгким оттенком темы */
.lang-switch{border-color:rgba(255,255,255,.09) !important;background:rgba(255,255,255,.02) !important}
.lang-switch button.active{
  background:rgba(var(--rgb),.30) !important;
  color:#fff !important;
  box-shadow:none !important;
}
@media(max-width:820px){
  .nav-links{
    background:linear-gradient(150deg,rgba(var(--rgb),.05),#070c14fa) !important;
    border-color:rgba(var(--rgb),.12) !important;
  }
  .hamburger{border-color:rgba(255,255,255,.10) !important;background:rgba(255,255,255,.03) !important}
}
@media(prefers-reduced-motion:reduce){
  .nav-shell{transition:none !important}
  .nav-shell:hover{transform:none !important}
}