*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Arial;background:#0b0c10;color:#e6e6ee;overflow-x:hidden}

/* background dots */
#balls{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dot-grid{position:absolute;inset:0;background-image:radial-gradient(circle at 10px 10px, rgba(255,255,255,0.03) 1px, transparent 2px);background-size:40px 40px;opacity:0.6;filter:blur(0.4px);mix-blend-mode:overlay}
.ball{position:absolute;border-radius:50%;opacity:.12;filter:blur(2px);mix-blend-mode:screen}
.ball.b1{width:60px;height:60px;left:8%;top:6%;background:linear-gradient(180deg,#7b3bff,#3b82f6);animation:float1 8s infinite ease-in-out}
.ball.b2{width:40px;height:40px;left:28%;top:16%;background:linear-gradient(180deg,#ff7ab6,#ffb86b);animation:float2 7s infinite ease-in-out}
.ball.b3{width:30px;height:30px;left:60%;top:10%;background:linear-gradient(180deg,#55ffe6,#3b82f6);animation:float3 9s infinite ease-in-out}
.ball.b4{width:48px;height:48px;left:72%;top:20%;background:linear-gradient(180deg,#b993ff,#7b3bff);animation:float4 7.5s infinite ease-in-out}
.ball.b5{width:34px;height:34px;left:50%;top:30%;background:linear-gradient(180deg,#3b82f6,#55ffe6);animation:float5 10s infinite ease-in-out}

/* overlay (menu) */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg, rgba(2,6,23,0.6) 0%, rgba(0,18,43,0.6) 45%, rgba(11,8,51,0.6) 100%);z-index:20;transition:opacity .4s ease,visibility .4s}
.overlay.menu-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px)}

/* overlay inner */
.overlay-inner{background:linear-gradient(135deg, rgba(125, 60, 255,0.12), rgba(10,10,10,0.45));padding:30px;border-radius:18px;backdrop-filter: blur(6px);box-shadow:0 10px 40px rgba(10,10,20,.6);text-align:center;color:#fff;min-width:320px;max-width:720px;position:relative;z-index:22}
.logo{margin:0;font-weight:800;font-size:30px;letter-spacing:1px}
.logo span{color:#b993ff}
.subtitle{margin:6px 0 0 0;color:rgba(255,255,255,0.75);font-weight:500}
.menu-buttons{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.menu-btn{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:#fff;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-weight:700;transition:transform .22s ease, box-shadow .22s}
.menu-btn:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(11,10,30,0.6)}

/* dev banner center-top smaller and higher */
.dev-banner-wrap{position:fixed;left:50%;transform:translateX(-50%);top:2.5vh;z-index:23;pointer-events:none;transition:opacity .4s, transform .6s}
.banner-frame{padding:6px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));box-shadow:0 10px 40px rgba(0,0,0,0.65);border:2px solid rgba(255,255,255,0.04);backdrop-filter: blur(6px);position:relative}
#devbanner{width:360px;max-width:85vw;height:auto;border-radius:10px;display:block;box-shadow:0 6px 30px rgba(59,130,246,0.06);border:3px solid rgba(255,255,255,0.02);transition:transform .5s cubic-bezier(.2,.9,.3,1)}

/* banner hover */
.dev-banner-wrap .banner-frame:hover #devbanner{transform:translateY(-6px) scale(1.01)}

/* main - offers at the very top */
.main{padding:8px 20px 80px;max-width:1100px;margin:0 auto;z-index:10;position:relative}
.section{margin:12px 0;padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.35));border-radius:12px;border:1px solid rgba(255,255,255,0.03);opacity:0;transform:translateY(6px);transition:opacity .36s ease, transform .36s ease}

/* visible state, we add .visible */
.section.visible{opacity:1;transform:none}

/* enter animation */
.section.enter{animation:section-enter .55s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes section-enter{
  0%{opacity:0;transform:translateY(14px) scale(.995)}
  60%{opacity:1;transform:translateY(-6px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* about card and long text styling */
.about-card{display:block;gap:12px}
.desc{line-height:1.6;color:rgba(235,235,255,0.92)}

/* languages */
.langs{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:12px 0 0 0;list-style:none}
.langs li{padding:8px 12px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));transition:transform .3s ease}
.langs li:hover{transform:translateY(-6px) rotate(-2deg);text-shadow:0 4px 18px rgba(87,85,255,0.12)}

/* pricing and offers */
.pricing-row{display:flex;gap:18px;flex-wrap:wrap}
.price-card{flex:1 1 300px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(10,10,20,0.28));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.img-wrap{height:160px;background:#0b0c10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.price-meta{padding:12px;display:flex;flex-direction:column;gap:8px}
.title{font-weight:800;font-size:16px}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{background:#111;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}

/* buttons */
.order-btn{background:linear-gradient(90deg,#3b82f6,#7b3bff);color:#fff;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .18s}
.order-btn:active{transform:translateY(2px)}
.offer-card{display:block;padding:18px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(10,10,20,0.28));border:1px solid rgba(255,255,255,0.03);transition:transform .35s ease, box-shadow .35s;overflow:hidden;position:relative}
.offer-title{font-weight:800;font-size:18px;margin-bottom:8px}
.offer-desc{opacity:0.9}
.offer-actions{margin-top:12px}
.join-btn{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,#7b3bff,#3b82f6);color:#fff;text-decoration:none;font-weight:700;margin-top:12px}

/* back button */
.back-btn{position:fixed;left:16px;top:16px;z-index:30;background:transparent;border:0;color:#cfd6ff;font-size:20px;padding:8px;border-radius:8px;cursor:pointer;display:none}
.back-btn:hover{transform:translateX(-4px)}

/* footer bottom-left */
.site-footer{position:fixed;left:12px;bottom:8px;color:rgba(255,255,255,0.7);font-weight:700;z-index:40}

/* responsive */
@media (max-width:900px){
  #devbanner{width:220px}
  .pricing-row{flex-direction:column}
  .dev-banner-wrap{top:1.8vh}
  .dot-grid{background-size:28px 28px}
  .img-wrap{height:120px}
}


/* Anchor offset fix: ensure anchored sections reach the top under fixed header/overlay */
:root{ --header-offset: 70px; } /* adjust if your header/overlay is taller */
[id] { scroll-margin-top: var(--header-offset); }
/* Add an invisible block before each id-target so jumping to an anchor positions content correctly */
[id]::before {
  content: "";
  display: block;
  height: var(--header-offset);
  margin-top: calc(-1 * var(--header-offset));
  pointer-events: none;
  visibility: hidden;
}



/* Added limited-offer badge */
.price-card .img-wrap { position: relative; overflow: visible; }

.limited-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 26px;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg,#ff4757,#ff6b81);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  transform: translateY(0) rotate(-6deg);
  white-space: nowrap;
  z-index: 10;
  animation: limitedFloat 3s ease-in-out infinite;
}

/* Slightly elongated circular pill */
.limited-badge::before{
  content: "";
  display:block;
  position:absolute;
  inset:0;
  border-radius:26px;
  pointer-events:none;
  box-shadow: 0 2px 6px rgba(255,75,87,0.18) inset;
}

/* float animation: subtle up and down */
@keyframes limitedFloat {
  0% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

/* Popular badge base + variant */
.badge {
  position:absolute;
  top:8px;
  left:8px; /* left corner */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:20px;
  font-weight:800;
  font-size:0.85rem;
  line-height:1;
  white-space:nowrap;
  z-index:12; /* above limited-badge */
  pointer-events:none; /* so image/buttons stay clickable */
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}

.badge-popular{
  color:#fff;
  background:linear-gradient(135deg,#52c41a,#239a0b);
  transform: translateY(0) rotate(-12deg);
  animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty{
  0%{ transform: translateY(0) rotate(-12deg); }
  50%{ transform: translateY(-10px) rotate(-12deg); }
  100%{ transform: translateY(0) rotate(-12deg); }
}

/* Discord icon bottom-left (above footer) */
.disc-icon-wrap{ position:fixed; left:12px; bottom:56px; z-index:50; }
.disc-icon-wrap a img{ width:56px; height:56px; display:block; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.35); transition: transform .18s ease, box-shadow .18s ease; }
.disc-icon-wrap a:hover img{ transform: translateY(-6px) scale(1.06); box-shadow:0 16px 40px rgba(0,0,0,0.45); }

@media (max-width:480px){
  .disc-icon-wrap{ left:10px; bottom:72px; }
  .disc-icon-wrap a img{ width:44px; height:44px; }
}