*{margin:0;padding:0;box-sizing:border-box;font-family:tahoma}

body{
background:#000;
color:#fff;
overflow-x:hidden;
scroll-behavior:smooth;
}

/* ===== HEADER ===== */
header{
padding:70px 20px;
text-align:center;
background:linear-gradient(90deg,#0a0a0a,#1a001a,#000);
}

/* ===== NAV ===== */
nav{
display:flex;
justify-content:center;
gap:20px;
padding:20px;
background:#111;
position:sticky;
top:0;
z-index:10;
}

nav a{
color:#aaa;
text-decoration:none;
transition:.3s;
}
nav a:hover{color:#fff}

/* ===== SECTIONS ===== */
section{
padding:70px 20px;
max-width:1100px;
margin:auto;
}

/* ===== PRODUCT BOX ===== */
.product-box{
background:linear-gradient(145deg,#111,#050505);
border:1px solid #222;
padding:30px;
margin-bottom:30px;
border-radius:15px;
box-shadow:0 0 40px rgba(255,0,255,.15);
transition:.3s;
}
.product-box:hover{
transform:translateY(-5px);
box-shadow:0 0 60px rgba(255,0,255,.25);
}

.product-box h2{margin-bottom:15px}

.product-box p{
color:#ccc;
line-height:1.9;
}

/* ===== BUTTONS GROUP ===== */
.btn-group{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

/* دکمه‌ها (هم action-btn هم لینک‌های داخل product-box) */
.action-btn,
.product-box a{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:0;
padding:12px 22px;
border-radius:30px;
text-decoration:none;
color:#fff;
font-size:14px;
background:linear-gradient(45deg,#6a00ff,#ff0077,#ff9900);
background-size:300%;
animation:rainbow 6s linear infinite;
}

/* ===== RAINBOW ANIMATION ===== */
@keyframes rainbow{
0%{background-position:0%}
100%{background-position:300%}
}

/* ===== FAQ ===== */
#faq h2{
text-align:center;
margin-bottom:30px;
}

.faq-item{
background:#111;
margin-bottom:15px;
padding:20px;
border-radius:10px;
cursor:pointer;
border:1px solid #1b1b1b;
}

.faq-item p{
display:none;
color:#bbb;
margin-top:10px;
line-height:1.9;
}

/* ===== CANVAS BACKGROUND ===== */
#sandCanvas{
position:fixed;
top:0;
left:0;
z-index:-1;
pointer-events:none;
}

/* ===== FLOATING SOCIAL BUTTONS (FINAL CLEAN) ===== */
.floating-buttons{
position:fixed;
right:25px;
bottom:80px;
display:flex;
flex-direction:column;
gap:18px;
z-index:9999;
}

.floating-buttons a{
width:64px;
height:64px;
border-radius:50%;
background:#0f0f0f;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 25px rgba(255,0,200,.35);
transition:transform .25s ease, box-shadow .25s ease;
animation:floatShake 3s ease-in-out infinite;
}

.floating-buttons a:hover{
transform:scale(1.15);
box-shadow:0 0 40px rgba(255,0,200,.8);
}

.floating-buttons img{
width:34px;
height:34px;
display:block;
object-fit:contain;
}

/* لرزش نرم */
@keyframes floatShake{
0%{transform:translateX(0)}
8%{transform:translateX(-5px)}
16%{transform:translateX(5px)}
24%{transform:translateX(-4px)}
32%{transform:translateX(4px)}
40%{transform:translateX(0)}
100%{transform:translateX(0)}
}








/* =========================
   MOBILE FIX (RESPONSIVE)
   Paste at END of style.css
========================= */

/* تراز بهتر برای nav در دسکتاپ هم */
nav{
flex-wrap:wrap;
row-gap:10px;
}

/* موبایل و تبلت */
@media (max-width: 768px){

  header{
    padding:45px 15px;
  }

  header h1{
    font-size:28px;
    line-height:1.4;
  }

  header p{
    font-size:14px;
    opacity:.9;
  }

  /* منو: شبکه‌ای، مرتب، وسط‌چین */
  nav{
    justify-content:center;
    gap:10px;
    padding:14px 12px;
  }

  nav a{
    background:#0f0f0f;
    border:1px solid #1f1f1f;
    border-radius:12px;
    padding:10px 12px;
    font-size:13px;
    color:#ddd;
  }

  /* کارت‌ها کمتر کشیده و با فاصله کمتر */
  section{
    padding:45px 14px;
  }

  .product-box{
    padding:22px 18px;
  }

  .product-box h2{
    font-size:22px;
  }

  .product-box p{
    font-size:14px;
    line-height:1.9;
  }

  /* دکمه‌ها: زیر هم + وسط چین */
  .btn-group{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  .action-btn,
  .product-box a{
    width:min(320px, 100%);
    justify-content:center;
    text-align:center;
    padding:13px 16px;
    font-size:14px;
  }

  /* دکمه‌های شناور کوچک‌تر که رو محتوا نیفتن */
  .floating-buttons{
    right:14px;
    bottom:110px;
    gap:14px;
  }

  .floating-buttons a{
    width:56px;
    height:56px;
  }

  .floating-buttons img{
    width:30px;
    height:30px;
  }
}

/* موبایل خیلی کوچک */
@media (max-width: 420px){

  nav{
    gap:8px;
  }

  nav a{
    padding:9px 10px;
    font-size:12px;
  }

  .product-box h2{
    font-size:20px;
  }

  .floating-buttons{
    bottom:95px;
  }
}