/* =========================
   THEME TOGGLE
========================= */
.mobile-only{display:none;}
@media(max-width:768px){
.mobile-only{display:inline-flex;}
}





body {
  background: var(--bg);
  color: var(--text);
}

.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

.service-item,
.settings-card,
.info-card {
  background: var(--panel);
  border: 1px solid var(--border);
}

.service-info span,
.settings-profile-info span {
  color: var(--muted);
}

.btn,
.hero-btn,
.buy-btn {
  background: var(--accent);
  color: #fff;
}




/* =========================
   RESET / BASE
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
}

a {
  color: var(--text);
  text-decoration: none;
}

/* =========================
   LAYOUT
========================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   HEADER
========================= */
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

.header-row {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: flex;
  gap: 10px;
  font-weight: 800;
}

.logo small {
  font-size: 11px;
  color: var(--accent);
}


/* =========================
   NAVIGATION
========================= */
.nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.nav-btn i {
  font-size: 12px;
  margin-left: 6px;
  opacity: .7;
}

.nav-link {
  color: var(--text);
  text-decoration: none;
}

/* DROPDOWN */
.dropdown {
  position: absolute;
  top: 130%;
  left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: none;
  min-width: 200px;
  overflow: hidden;
  z-index: 50;
}

.dropdown a {
  display: block;
  padding: 10px 14px;
}

.dropdown a:hover {
  background: rgba(37, 99, 235, .12);
}

.nav-item.open .dropdown {
  display: block;
}

/* =========================
   RIGHT ICONS
========================= */
.right{
display:flex;
align-items:center;
gap:8px; /* ← oraliq nazorati */
justify-content:flex-end; /* ← space-between bo‘lmasin */
}
.profile-wrapper,
.lang-wrapper,
#burgerBtn{
margin:0 !important;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

/* =========================
   MOBILE MENU
========================= */
.mobile-menu {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: none;
  z-index: 999;
}

.mobile-menu.open {
  display: block;
}

.mobile-menu a,
.mobile-btn,
.mobile-item,
.mobile-accordion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
}

.mobile-accordion {
  cursor: pointer;
}

.mobile-accordion i {
  font-size: 12px;
  opacity: .7;
}

.mobile-btn {
  cursor: pointer;
  gap: 8px;
}

.mobile-divider {
  height: 1px;
  background: var(--border);
}

/* =========================
   MAIN
========================= */
.main {
  padding: 60px 0;
}

.hero h1 {
  font-size: 34px;
  margin-bottom: 10px;
}

.hero p {
  color: var(--muted);
}



/* =========================
   RESPONSIVE
========================= */
.desktop-only {
  display: flex;
}

.mobile-only {
  display: none;
}

@media (max-width: 900px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
  }
}

/* REMOVE BOTTOM BORDER AND ADJUST PADDING */
.mobile-item,
.mobile-btn {
  border-bottom: none !important;
  padding: 10px 20px;
}
/* =========================
   LOGIN BUTTON
========================= */
.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.btn {
  padding: 12px 20px;
  background-color: var(--accent);
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--accent);
  opacity: 0.8;
}

/* =========================
   LOGIN FORM
========================= */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Formani vertikal markazga joylashtirish */
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: var(--panel);
  border-radius: 10px;
}

.login-form label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.login-form input {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  margin-bottom: 15px;
  background: var(--panel);
  color: var(--text);
}

.forgot-password {
  text-align: right;
  width: 100%;
  margin-bottom: 20px;
}

.forgot-password a {
  color: var(--accent);
}

.google-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  background-color: #4285F4; /* Google Blue */
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  width: 100%;
  max-width: 280px; /* Google tugmasining maksimal kengligini kichraytirdim */
  font-size: 16px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.google-btn:hover {
  opacity: 0.8;
}

.google-icon {
  width: 20px;
  margin-right: 10px;
}

.signup-link {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.signup-link a {
  color: var(--accent);
}

/* =========================
   Vhod BUTTON
========================= */
.btn {
  padding: 8px 16px; /* Kichik padding */
  background-color: var(--accent);
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  width: 100%;
  max-width: 250px; /* Vhod tugmasining maksimal kengligini kichraytirdim */
  font-size: 16px;
  margin-bottom: 20px;
  height: 40px; /* Balandlikni kichraytirdim */
  border: 2px solid var(--accent); /* Ramkani qo'shdim */
  transition: all 0.3s ease; /* O'zgarishlarni yumshoq qilish */
}

/* Hover state for the button */
.btn:hover {
  background-color: var(--accent);
  opacity: 0.8;
  border-color: #fff; /* Hover holatidagi ramka rangini o'zgartirish */
}

/* =========================
   FOOTER
========================= */
footer {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
}
.profile-wrapper {
  position: relative;
}

.profile-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  background: #0f172a;
  border-radius: 10px;
  width: 220px;
  display: none;
  border: 1px solid rgba(255,255,255,.1);
  z-index: 999;
}

.profile-dropdown a {
  display: block;
  padding: 10px 14px;
  color: #e5e7eb;
}

.profile-dropdown a:hover {
  background: rgba(37,99,235,.15);
}

.profile-info {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.profile-info small {
  color: #9ca3af;
  font-size: 12px;
}

.profile-dropdown .logout {
  color: #f87171;
}




/* =========================
   SETTINGS PAGE
========================= */

.settings-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}

.settings-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

/* PROFILE BLOCK */
.settings-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.settings-profile img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.settings-profile-info {
  display: flex;
  flex-direction: column;
}

.settings-profile-info strong {
  font-size: 15px;
}

.settings-profile-info span {
  font-size: 13px;
  color: var(--muted);
}

/* DIVIDER */
.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
}

/* FORM */
.settings-form label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.settings-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline: none;
  margin-bottom: 18px;
}

/* SAVE BUTTON */
.settings-save {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}

.settings-save:hover {
  opacity: .85;
}

/* LOGOUT BUTTON */
.settings-logout {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.settings-logout:hover {
  background: rgba(255,255,255,.04);
}

/* MOBILE */
@media (max-width: 500px) {
  .settings-card {
    margin: 0 10px;
    padding: 18px;
  }
}


/* ===== SETTINGS LAYOUT ===== */
.settings-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* LEFT / RIGHT */
.settings-left {
}

.settings-right {
  max-width: 420px;
}

/* MOBILE */
@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== SETTINGS LAYOUT ===== */
.settings-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start; /* ENG MUHIM JOY */
}

/* CHAP BLOK */
.settings-left {
  flex: 0 0 360px; /* kengligi bir xil bo‘lib turadi */
}

/* O‘NG BLOK */
.settings-right {
  flex: 1;
}

/* MOBILDA OSTMA-OST */
@media (max-width: 900px) {
  .settings-layout {
    flex-direction: column;
  }

  .settings-left,
  .settings-right {
    width: 100%;
  }
}




































/* =========================
   FOOTER LINE GLOW
========================= */

footer{
border-top:1px solid rgba(255,255,255,.08);
box-shadow:0 -1px 20px rgba(168,85,247,.15);
}
/* ===== FOOTER FIX ===== */
.footer{
position:relative;
z-index:2;
}

.footer{
background:#070d1c;
color:#94a3b8;
padding-top:50px;
margin-top:70px;
}

/* GRID */
.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:60px;
padding:0 20px 40px;
border-bottom:1px solid rgba(255,255,255,.08);
}

/* COL */
.footer-col h4{
color:#fff;
margin-bottom:14px;
}

.footer-col a{
display:block;
margin:7px 0;
color:#94a3b8;
text-decoration:none;
}

.footer-col a:hover{
color:#c084fc;
}

/* LOGO */
.footer-logo{
color:#c084fc;
font-weight:700;
font-size:18px;
margin-bottom:15px;
}

/* INFO */
.footer-info{
text-align:center;
padding:30px 20px;
font-size:14px;
color:#64748b;
border-bottom:1px solid rgba(255,255,255,.05);
}

.footer-info strong{
color:#c084fc;
}

/* BOTTOM */
.footer-bottom{
text-align:center;
padding:18px;
font-size:13px;
color:#64748b;
}

/* MOBILE */
@media(max-width:900px){
.footer-container{
grid-template-columns:1fr;
text-align:center;
gap:30px;
}
}


body{
margin:0;
font-family:Inter,sans-serif;
color:white;
overflow-x:hidden;

/* animated gradient */
background:linear-gradient(
120deg,
#020617,
#031433,
#020617,
#0a1f44,
#020617
);
background-size:400% 400%;
animation:bgMove 18s ease infinite;
}


/* moving gradient */
@keyframes bgMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}


/* neon glow overlay */
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 20% 30%, #1e90ff66, transparent 60%),
radial-gradient(circle at 80% 70%, #3b82f666, transparent 60%),
radial-gradient(circle at 50% 50%, #60a5fa33, transparent 70%);
animation:glowMove 20s linear infinite;
z-index:-1;
}


/* slow floating glow */
@keyframes glowMove{
0%{transform:translateY(0)}
50%{transform:translateY(-40px)}
100%{transform:translateY(0)}
}
.particle{
position:fixed;
width:4px;
height:4px;
border-radius:50%;
background:#60a5fa;
box-shadow:0 0 10px #60a5fa,0 0 20px #60a5fa;
opacity:.6;
pointer-events:none;
animation:floatParticle linear infinite;
z-index:-1;
}

@keyframes floatParticle{
from{transform:translateY(100vh)}
to{transform:translateY(-100vh)}
}





/* HERO */
.hero{
position:relative;
padding:160px 20px 340px;
text-align:center;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}


/* CONTENT */
.hero-static{
position:relative;
z-index:3;
max-width:900px;
}


.hero-badge{
display:inline-block;
padding:10px 22px;
border-radius:999px;
background:linear-gradient(90deg,#6366f1,#8b5cf6);
color:#fff;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 0 18px rgba(139,92,246,.45);
font-weight:600;
letter-spacing:.3px;
}



/* TITLE */
.hero-title{
font-size:64px;
font-weight:800;
margin:20px 0;
background:linear-gradient(90deg,#FFFFFF,#FFFFFF);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 35px #55ACEE;
}


/* TEXT */
.hero-sub{
color:#94a3b8;
font-size:20px;
margin-bottom:50px;
}


/* BUTTON */
.hero-btn-main{
display:inline-block;
padding:16px 46px;
border-radius:999px;
background:linear-gradient(#55ACEE,#55ACEE,#55ACEE);
font-weight:700;
text-decoration:none;
color:white;
box-shadow:0 0 35px #55ACEE;
transition:.35s;
}

.hero-btn-main:hover{
transform:scale(1.1);
box-shadow:0 0 70px #55ACEE;
}


.vip-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 36px;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:#fff;
font-weight:700;
text-decoration:none;
border:none;
cursor:pointer;
animation:vipGlow 3s ease-in-out infinite;
transition:.3s;
}

@keyframes vipGlow{
0%,100%{box-shadow:0 0 18px #38bdf8}
50%{box-shadow:0 0 45px #38bdf8}
}

.vip-btn:hover{
transform:scale(1.07);
animation:none;
box-shadow:0 0 60px #38bdf8;
}
.vip-btn svg{
width:22px;
height:22px;
fill:#ffd700;
filter:drop-shadow(0 0 6px #ffd700);
}

/* MAIN DIAMOND */
.hero-main-diamond{
position:absolute;
left:50%;
top:60%;              /* pastga tushirmay markazdan pastga */
transform:translate(-50%,-50%);
width:260px;
z-index:2;
pointer-events:none;

animation:
spinY 10s linear infinite,
float 5s ease-in-out infinite;

filter:drop-shadow(0 0 60px #55ACEE);
}



/* ROTATE */
@keyframes spinY{
from{transform:translateX(-50%) rotateY(0deg)}
to{transform:translateX(-50%) rotateY(360deg)}
}


/* FLOAT */
@keyframes float{
0%,100%{bottom:-140px}
50%{bottom:-170px}
}


/* SMALL DIAMONDS */
.floating-diamond{
position:absolute;
width:26px;
opacity:.85;
pointer-events:none;
animation:fly linear infinite alternate;
}

@keyframes fly{
0%{transform:translateX(0) rotate(0)}
100%{transform:translateX(calc(200px * var(--dir))) rotate(360deg)}
}












/* =========================
   STATS SECTION
========================= */
.stats-blue{
padding:90px 20px;
}

/* GRID */
.stats-blue-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
}

/* =========================
   CARD
========================= */
.stat-blue{
position:relative;
padding:38px 18px;
text-align:center;
border-radius:22px;
background:rgba(5,15,40,.55);
backdrop-filter:blur(18px);
border:1px solid rgba(56,189,248,.25);
overflow:hidden;
transition:.3s;
}

/* =========================
   ANIMATED BORDER ONLY
========================= */
.stat-blue::before{
content:"";
position:absolute;
inset:0;
border-radius:22px;
padding:1.6px;

background:linear-gradient(120deg,#38bdf8,#2563eb,#38bdf8);
background-size:200% 200%;
animation:borderRun 5s linear infinite;

mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);

-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);

mask-composite:exclude;
-webkit-mask-composite:xor;
}

/* border animation */
@keyframes borderRun{
0%{background-position:0% 50%}
100%{background-position:200% 50%}
}

/* =========================
   HOVER EFFECT
========================= */
.stat-blue:hover{
transform:translateY(-8px);
}

.stat-blue:hover::before{
animation-duration:1.4s;
filter:brightness(1.3);
}

/* =========================
   ICON BOX
========================= */
.icon-blue{
width:70px;
height:70px;
margin:auto;
margin-bottom:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
background:rgba(56,189,248,.08);
border:1px solid rgba(56,189,248,.35);
}

.icon-blue svg{
width:34px;
fill:#38bdf8;
}

/* =========================
   NUMBER
========================= */
.num-blue{
font-size:44px;
font-weight:800;
margin-bottom:6px;
color:#38bdf8;
}

/* =========================
   TEXT
========================= */
.stat-blue span{
color:#93c5fd;
font-size:15px;
}

/* =========================
   TABLET
========================= */
@media(max-width:900px){
.stats-blue-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* =========================
   MOBILE
========================= */
@media(max-width:500px){
.stats-blue-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.stat-blue{
padding:26px 14px;
border-radius:18px;
}

.num-blue{
font-size:34px;
}

.icon-blue{
width:60px;
height:60px;
}

.icon-blue svg{
width:28px;
}
}
.hero{ padding:190px 60px 240px; }
.stats-blue{ padding:40px 20px; }
.stats-blue-grid{ gap:14px; }















/* ======================
   ACCOUNT INPUT
====================== */
#accInput{
width:100%;
padding:14px 16px;
margin-top:12px;
border-radius:14px;
border:1px solid rgba(56,189,248,.35);
background:rgba(2,6,23,.8);
color:#fff;
font-size:15px;
outline:none;
transition:.25s;
}

#accInput:focus{
border-color:#38bdf8;
box-shadow:0 0 15px rgba(56,189,248,.35);
}

/* status */
.account-status{
margin-top:10px;
font-size:14px;
color:#7dd3fc;
}

/* ======================
   PAYMENT
====================== */
.payments{
display:flex;
gap:12px;
margin:16px 0 30px;
flex-wrap:wrap;
}

.payment{
flex:1;
padding:14px;
text-align:center;
border-radius:16px;
cursor:pointer;
background:rgba(2,6,23,.7);
border:1px solid rgba(56,189,248,.25);
transition:.3s;
font-weight:600;
color:#93c5fd;
}

.payment:hover{
transform:translateY(-3px);
border-color:#38bdf8;
}

.payment.active{
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:white;
box-shadow:0 0 25px #38bdf8;
border-color:#38bdf8;
}

/* ======================
   INSTRUCTION BLOCK
====================== */
.checkout-instructions{
margin-top:40px;
padding:28px;
border-radius:22px;
background:rgba(5,15,40,.55);
backdrop-filter:blur(18px);
border:1px solid rgba(56,189,248,.25);
}

.checkout-instructions h3{
margin-bottom:22px;
color:#38bdf8;
}

/* list */
.instruction-list{
display:flex;
flex-direction:column;
gap:18px;
}

/* item */
.instruction-item{
display:flex;
gap:14px;
align-items:flex-start;
}

/* step circle */
.step{
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
background:linear-gradient(90deg,#2563eb,#38bdf8);
box-shadow:0 0 18px #38bdf8;
flex-shrink:0;
}

/* text */
.instruction-item p{
margin:0;
color:#cbd5f5;
font-size:14px;
line-height:1.5;
}

.instruction-item a{
color:#38bdf8;
text-decoration:none;
}

.muted{
color:#64748b;
}

/* image */
.instruction-image{
margin-top:30px;
text-align:center;
}

.instruction-image img{
width:90px;
filter:drop-shadow(0 0 30px #38bdf8);
}

/* ======================
   RIGHT ORDER BOX
====================== */
.checkout-right{
max-width:360px;
width:100%;
}

.order-box{
position:sticky;
top:100px;
padding:28px;
border-radius:24px;
background:rgba(5,15,40,.6);
backdrop-filter:blur(20px);
border:1px solid rgba(56,189,248,.25);
box-shadow:0 0 40px rgba(56,189,248,.15);
text-align:center;
}

/* icon */
.order-icon{
width:70px;
margin-bottom:10px;
filter:drop-shadow(0 0 25px #38bdf8);
}

.order-box h4{
margin-bottom:20px;
font-size:18px;
color:#e0f2fe;
}

/* rows */
.order-line{
display:flex;
justify-content:space-between;
margin:10px 0;
font-size:14px;
color:#93c5fd;
}

.order-line b{
color:#fff;
}

/* total */
.order-line.total{
margin-top:18px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
font-size:16px;
}

.order-line.total b{
color:#38bdf8;
font-size:18px;
}

/* buy button */
.buy-btn{
margin-top:22px;
width:100%;
padding:16px;
border:none;
border-radius:16px;
font-size:16px;
font-weight:700;
cursor:pointer;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:white;
box-shadow:0 0 25px #38bdf8;
transition:.3s;
}

.buy-btn:hover{
transform:scale(1.05);
box-shadow:0 0 50px #38bdf8;
}

.buy-btn:disabled{
opacity:.4;
cursor:not-allowed;
box-shadow:none;
}

/* info */
.order-info{
margin-top:18px;
font-size:13px;
color:#7dd3fc;
display:flex;
flex-direction:column;
gap:6px;
}

/* ======================
   RESPONSIVE
====================== */
@media(max-width:900px){

.checkout-right{
max-width:100%;
margin-top:40px;
}

.order-box{
position:static;
}

}






/* ================= BUY PAGE ================= */

.buy-page{
margin-top:70px;
display:flex;
flex-direction:column;
align-items:center;
gap:35px;
}

/* currency */

.buy-currency{
display:flex;
gap:12px;
}

.buy-currency button{
padding:8px 22px;
border-radius:999px;
border:none;
background:#021a38;
color:#7dd3fc;
cursor:pointer;
font-weight:600;
}

.buy-currency button.active{
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:#fff;
box-shadow:0 0 18px #38bdf8;
}

/* grid */

.buy-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
max-width:1100px;
width:100%;
}

@media(max-width:900px){
.buy-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* card */

.buy-card{
position:relative;
height:180px;
border-radius:24px;
background:rgba(5,15,40,.65);
border:1px solid rgba(56,189,248,.25);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:.3s;
}

.buy-card:hover{
transform:translateY(-7px);
box-shadow:0 0 25px rgba(56,189,248,.6);
}

/* badge */

.buy-badge{
position:absolute;
top:10px;
right:10px;
font-size:10px;
padding:4px 12px;
border-radius:999px;
font-weight:700;
}

.sale{background:#ef4444;}
.top{background:#f59e0b;}
.best{background:#10b981;}
.hot{background:#ec4899;}

/* icon */

.buy-icon{
width:40px;
margin-bottom:6px;
animation:buyFloat 3s ease-in-out infinite;
}

@keyframes buyFloat{
50%{transform:translateY(-6px)}
}

/* text */

.buy-count{
font-size:24px;
font-weight:700;
}

.buy-price{
color:#7dd3fc;
margin-top:3px;
}

/* button */

.buy-btn-card{
margin-top:10px;
padding:7px 20px;
border:none;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:#fff;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.buy-btn-card:hover{
transform:scale(1.1);
box-shadow:0 0 20px #38bdf8;
}

/* calculator */

.buy-calc{
width:420px;
max-width:95%;
padding:26px;
border-radius:22px;
background:rgba(5,15,40,.6);
border:1px solid rgba(56,189,248,.25);
text-align:center;
}

.buy-calc input{
width:100%;
padding:14px;
border-radius:14px;
border:1px solid rgba(56,189,248,.35);
background:#020617;
color:#fff;
font-size:18px;
margin-top:12px;
}

.buy-total{
margin-top:18px;
display:flex;
justify-content:space-between;
font-size:20px;
}

.buy-main-btn{
margin-top:20px;
width:100%;
padding:16px;
border:none;
border-radius:16px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:#fff;
font-weight:700;
cursor:pointer;
}



/* layout */

.co-wrap{
display:grid;
grid-template-columns:1fr 380px;
gap:40px;
max-width:1100px;
margin:auto;
padding:40px 20px;
}

@media(max-width:900px){
.co-wrap{
grid-template-columns:1fr;
}
}


/* title */

.co-title{
font-size:38px;
font-weight:800;
margin-bottom:30px;
background:linear-gradient(90deg,#7dd3fc,#38bdf8,#60a5fa);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 25px rgba(56,189,248,.35);
}


/* pack card */

.co-pack{
display:flex;
align-items:center;
justify-content:space-between;
background:linear-gradient(145deg,#0b1a33,#071428);
padding:22px;
border-radius:20px;
border:1px solid rgba(56,189,248,.2);
backdrop-filter:blur(12px);
box-shadow:
0 0 40px rgba(56,189,248,.15),
inset 0 0 20px rgba(56,189,248,.08);
margin-bottom:35px;
transition:.25s;
}

.co-pack:hover{
transform:translateY(-3px);
box-shadow:
0 0 60px rgba(56,189,248,.25),
inset 0 0 25px rgba(56,189,248,.12);
}

.co-pack-icon img{
width:60px;
filter:drop-shadow(0 0 10px rgba(255,210,0,.7));
}

.co-pack-label{
font-size:13px;
opacity:.65;
letter-spacing:.5px;
}

.co-pack-amount{
font-size:22px;
font-weight:700;
margin-top:2px;
}

.co-pack-price{
font-size:26px;
font-weight:800;
color:#38bdf8;
text-shadow:0 0 15px rgba(56,189,248,.5);
}


/* labels */

.co-label{
display:block;
margin:24px 0 10px;
font-size:14px;
opacity:.85;
}


/* inputs */

.co-input input{
width:100%;
padding:16px;
border-radius:14px;
border:1px solid rgba(56,189,248,.25);
background:rgba(15,23,42,.7);
color:#fff;
outline:none;
transition:.25s;
backdrop-filter:blur(10px);
}

.co-input input:focus{
border-color:#38bdf8;
box-shadow:0 0 0 3px rgba(56,189,248,.2);
}

.co-status{
font-size:13px;
margin-top:6px;
opacity:.85;
}


/* payment */

.co-payments{
display:flex;
flex-direction:column;
gap:16px;
margin-top:12px;
}

.co-pay{
display:flex;
align-items:center;
gap:14px;
padding:18px;
border-radius:16px;
border:1px solid rgba(56,189,248,.2);
background:rgba(15,23,42,.6);
cursor:pointer;
transition:.25s;
backdrop-filter:blur(12px);
}

.co-pay:hover{
border-color:#38bdf8;
box-shadow:0 0 20px rgba(56,189,248,.2);
}

.co-pay.active{
border-color:#38bdf8;
box-shadow:
0 0 25px rgba(56,189,248,.35),
inset 0 0 15px rgba(56,189,248,.15);
}

.co-radio{
width:18px;
height:18px;
border-radius:50%;
border:2px solid #7dd3fc;
}

.co-pay.active .co-radio{
background:#38bdf8;
box-shadow:0 0 10px #38bdf8;
}

.co-comm{
margin-left:auto;
font-size:13px;
opacity:.8;
}

.co-comm.green{
color:#22c55e;
text-shadow:0 0 10px rgba(34,197,94,.5);
}


/* right block */

.co-summary{
background:linear-gradient(145deg,#0b1a33,#071428);
padding:28px;
border-radius:22px;
border:1px solid rgba(56,189,248,.2);
box-shadow:
0 0 40px rgba(56,189,248,.15),
inset 0 0 20px rgba(56,189,248,.08);
}

.co-row{
display:flex;
justify-content:space-between;
margin-bottom:16px;
opacity:.9;
}

.co-total{
display:flex;
justify-content:space-between;
margin:28px 0;
font-size:24px;
font-weight:800;
color:#7dd3fc;
}


/* button */

.co-buy{
width:100%;
padding:17px;
border-radius:16px;
border:none;
background:linear-gradient(90deg,#38bdf8,#3b82f6);
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
transition:.25s;
box-shadow:0 0 25px rgba(56,189,248,.35);
}

.co-buy:hover:not(:disabled){
transform:scale(1.03);
box-shadow:0 0 40px rgba(56,189,248,.6);
}

.co-buy:disabled{
opacity:.45;
cursor:not-allowed;
box-shadow:none;
}
.co-avatar{
width:42px;
height:42px;
border-radius:50%;
margin-top:10px;
box-shadow:0 0 15px #38bdf8;
}
.co-title2{
font-size:20px;
font-weight:700;
margin-bottom:15px;
color:#60a5fa;
}

.co-user-title{
margin-top:20px;
margin-bottom:10px;
font-size:14px;
opacity:.7;
}

.co-secure{
margin-top:18px;
font-size:13px;
opacity:.8;
display:flex;
flex-direction:column;
gap:6px;
}
/* head */

.co-head{
margin-bottom:18px;
}

.co-title2{
font-size:22px;
font-weight:700;
background:linear-gradient(90deg,#60a5fa,#a78bfa);
-webkit-background-clip:text;
color:transparent;
}

.co-sub{
font-size:13px;
opacity:.6;
margin-top:4px;
}


/* box */

.co-box{
background:#0b1730;
border-radius:16px;
padding:18px;
box-shadow:
0 0 0 1px #1e2a4d,
0 0 25px #2563eb22 inset;
}


/* row */

.co-row.big{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
font-size:16px;
}

.co-row.big span{
opacity:.7;
}


/* glow number */

.glow{
font-size:22px;
font-weight:700;
color:#60a5fa;
text-shadow:0 0 12px #3b82f6aa;
}


/* total */

.co-total{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
padding-top:15px;
border-top:1px solid #1e2a4d;
font-size:18px;
font-weight:700;
}

.co-total span{
opacity:.7;
}

.price{
color:#7dd3fc;
text-shadow:0 0 14px #38bdf8aa;
font-size:24px;
}
.co-pay{
display:flex;
align-items:center;
gap:10px;
}

.pay-icon{
width:22px;
height:22px;
object-fit:contain;
}
#orderContact{
color:#7c9cff;
font-weight:600;
}
.lang-wrapper{
position:relative;
}

.lang-dropdown{
position:absolute;
top:110%;
right:0;
background:#0c1327;
border:1px solid #222b45;
border-radius:12px;
padding:6px;
display:none;
flex-direction:column;
min-width:150px;
box-shadow:0 0 20px #00000060;
z-index:999;
}

.lang-dropdown button{
background:none;
border:none;
color:#fff;
text-align:left;
padding:10px 12px;
border-radius:8px;
cursor:pointer;
font-size:14px;
}

.lang-dropdown button:hover{
background:#141d36;
}

.lang-dropdown.show{
display:flex;
}
/* ===== MOBILE BLUR BACKGROUND ===== */
.mobile-blur-bg{
position:fixed;
inset:0;
background:rgba(2,6,23,.55);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:998;
}

.mobile-blur-bg.show{
opacity:1;
pointer-events:auto;
}





.header-row{
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
display:flex;
align-items:center;
gap:8px;
font-weight:700;
color:#fff;
}

.nav-link{
color:#cfe3ff;
margin:0 12px;
font-weight:500;
}

.nav-link:hover{
color:#fff;
}

.icon-btn{
background:none;
border:none;
color:#fff;
font-size:18px;
cursor:pointer;
}

.lang-dropdown,
.profile-dropdown,
.mobile-menu{
display:none;
position:absolute;
background:#0b1f42;
border-radius:10px;
padding:10px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.lang-dropdown.show,
.profile-dropdown.show,
.mobile-menu.show{
display:block;
}
.hero-mini{
padding:70px 0 40px;
text-align:center;
background:linear-gradient(90deg,#020617,#020617 60%,#031c3a);
}

.hero-mini h1{
font-size:42px;
margin-bottom:10px;
}

.hero-mini p{
color:#94a3b8;
}

.faq-blue{
padding:90px 0;
}

.faq-title{
text-align:center;
font-size:36px;
font-weight:700;
margin-bottom:40px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
-webkit-background-clip:text;
color:transparent;
}


.faq-grid{
display:flex;
flex-direction:column;
gap:18px;
max-width:900px;
margin:auto;
}

.faq-item{
background:#0b1220;
border:1px solid #1e293b;
border-radius:16px;
overflow:hidden;
}

.faq-q{
width:100%;
background:none;
border:none;
color:#fff;
padding:22px;
font-size:16px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.faq-q i{
transition:.3s;
}

.faq-item.active .faq-q i{
transform:rotate(180deg);
}

.faq-a{
max-height:0;
overflow:hidden;
transition:.35s;
padding:0 22px;
color:#94a3b8;
}

.faq-item.active .faq-a{
max-height:200px;
padding:0 22px 22px;
}
.terms-page{
padding:60px 0;
}

.terms-box{
max-width:900px;
margin:auto;
background:#0f172a;
padding:40px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,.4);
line-height:1.7;
}

.terms-title{
text-align:center;
font-size:38px;
margin-bottom:30px;
background:linear-gradient(90deg,#60a5fa,#22d3ee);
-webkit-background-clip:text;
color:transparent;
}

.terms-box h2{
margin-top:30px;
font-size:22px;
color:#60a5fa;
}

.terms-box p{
margin-top:10px;
opacity:.9;
}

.terms-box ul{
margin-top:10px;
padding-left:20px;
}

.terms-box li{
margin:6px 0;
}

.terms-note{
margin-top:40px;
padding:15px;
border-radius:12px;
background:#020617;
text-align:center;
font-weight:600;
color:#38bdf8;
}
.offer-page{
padding:80px 0;
color:#cbd5e1;
}


/* TITLE BLOCK */
.offer-top{
text-align:center;
margin-bottom:40px;
}

.offer-icon{
width:70px;
height:70px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
background:#2563eb22;
color:#3b82f6;
margin-bottom:15px;
}

.offer-title{
font-size:40px;
font-weight:700;
color:#3b82f6;
margin-bottom:10px;
}

.offer-date{
color:#94a3b8;
}


/* CARDS */
.offer-card{
background:#0b1220;
border:1px solid #1e293b;
padding:25px;
border-radius:16px;
margin-bottom:25px;
}

.offer-card h3{
color:#3b82f6;
margin-bottom:15px;
}


/* TEXT */
.offer-list{
padding-left:20px;
line-height:1.9;
}

.offer-desc{
margin-bottom:15px;
color:#94a3b8;
}

.offer-check{
padding-left:20px;
line-height:1.8;
}


/* CONTACT BLOCK */
.offer-contact{
text-align:center;
margin-top:40px;
background:#0b1220;
padding:30px;
border-radius:18px;
border:1px solid #1e293b;
}

.offer-contact h3{
color:#3b82f6;
}
.support-page{
padding:60px 15px;
background:#020617;
color:#cbd5e1;
}

.support-title{
text-align:center;
font-size:32px;
font-weight:700;
margin-bottom:8px;
background:linear-gradient(90deg,#3b82f6,#60a5fa);
-webkit-background-clip:text;
color:transparent;
}

.support-sub{
text-align:center;
color:#94a3b8;
margin-bottom:30px;
font-size:15px;
}


/* TELEGRAM BOX */
.tg-box{
display:flex;
gap:12px;
align-items:center;
background:#0b1220;
border:1px solid #1e293b;
padding:16px;
border-radius:14px;
text-decoration:none;
color:#fff;
transition:.25s;
margin-bottom:30px;
max-width:720px;
margin-left:auto;
margin-right:auto;
}

.tg-box:hover{
border-color:#3b82f6;
transform:translateY(-2px);
}

.tg-icon{
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#3b82f6,#0ea5e9);
}

.tg-icon svg{
width:24px;
}

.tg-title{
font-weight:600;
font-size:16px;
}

.tg-sub{
color:#94a3b8;
font-size:13px;
}


/* DIVIDER */
.support-divider{
text-align:center;
margin:30px 0;
position:relative;
color:#64748b;
font-size:13px;
}

.support-divider::before,
.support-divider::after{
content:"";
position:absolute;
top:50%;
width:38%;
height:1px;
background:#1e293b;
}

.support-divider::before{ left:0; }
.support-divider::after{ right:0; }


/* FORM */
.support-form{
max-width:600px;
margin:auto;
}

.form-row{
display:flex;
gap:15px;
margin-bottom:15px;
}

.input-group{
flex:1;
display:flex;
flex-direction:column;
gap:5px;
font-size:14px;
}

.input-group input,
.input-group textarea{
background:#0b1220;
border:1px solid #1e293b;
padding:12px;
border-radius:10px;
color:#fff;
outline:none;
font-size:14px;
transition:.2s;
}

.input-group input:focus,
.input-group textarea:focus{
border-color:#3b82f6;
box-shadow:0 0 0 1px #3b82f640;
}

.input-group textarea{
min-height:120px;
resize:none;
}


/* BUTTON */
.send-btn{
margin-top:15px;
width:100%;
padding:13px;
border:none;
border-radius:12px;
font-weight:600;
font-size:15px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
background:linear-gradient(90deg,#3b82f6,#2563eb);
transition:.25s;
}

.send-btn:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px #3b82f640;
}

.send-btn svg{
width:16px;
}


/* MOBILE */
@media(max-width:650px){
.form-row{
flex-direction:column;
}
.support-title{
font-size:26px;
}
}
.secure-note{
margin-top:14px;
background:#0b1220;
border:1px solid #1e293b;
color:#94a3b8;
padding:12px 18px;
border-radius:12px;
text-align:center;
font-size:14px;
max-width:420px;
margin-left:auto;
margin-right:auto;
transition:.25s;
}

.secure-note:hover{
border-color:#3b82f6;
color:#cbd5e1;
}