:root{
  --bg1:#0f172a;      /* slate-900 */
  --bg2:#020617;      /* slate-950 */
  --fg:#e5e7eb;       /* slate-200 */
  --muted:#94a3b8;    /* slate-400 */
  --accent:#7c3aed;   /* violet-600 */
  --accent-2:#06b6d4; /* cyan-500 */
  --glass: rgba(255,255,255,.08);
  --glass-brd: rgba(255,255,255,.16);
  --radius: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 10% 10%, #1e293b 0%, var(--bg2) 60%) fixed;
  overflow-x:hidden;
}

/* پس‌زمینه‌ی گرادیانی نرم */
.bg{
  position: fixed; inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,0.18), rgba(6,182,212,0.18), rgba(124,58,237,0.18));
  filter: blur(60px) saturate(120%);
  animation: swirl 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes swirl{
  0%{ transform: scale(1) rotate(0deg); opacity:.8 }
  100%{ transform: scale(1.2) rotate(12deg); opacity:1 }
}

/* چیدمان ریسپانسیو */
.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(24px, 6vw, 56px);
  position: relative;
  z-index: 2;
}

/* کارت شیشه‌ای (Liquid Glass) */
.glass{
  width:min(720px, 96vw);
  padding: clamp(24px, 5vw, 40px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) , var(--glass);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform: translateZ(0);
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

h1{
  margin: 0 0 8px;
  font-weight: 700; font-size: clamp(24px, 4vw, 34px);
}
.lead{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(14px, 2.6vw, 16px);
}

/* دکمه با حس مایع + شاین */
.btn{
  position: relative;
  appearance:none;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 180% at 50% -30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.35));
  color:#fff;
  cursor:pointer;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing:.3px;
  box-shadow: 0 10px 20px rgba(124,58,237,.25), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  overflow:hidden;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05) }
.btn:active{ transform: translateY(0); filter: brightness(.98) }
.btn:focus-visible{ outline: 2px solid rgba(124,58,237,.6); outline-offset: 3px }

/* افکت شاین روی دکمه */
.btn__shine{
  position:absolute; inset:-1px;
  background: radial-gradient(120% 180% at 50% -40%, rgba(255,255,255,.35), transparent 58%);
  mix-blend-mode: screen; pointer-events:none;
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine{
  0%{ transform: translateX(-15%) }
  50%{ transform: translateX(0) }
  100%{ transform: translateX(15%) }
}

.hint{
  margin-top: 14px; color: var(--muted); font-size: .92rem;
}

/* بلاب‌های دکوری با حس مایع */
.blob{
  position: fixed; border-radius: 999px; filter: blur(30px);
  opacity:.35; z-index:1; pointer-events:none; mix-blend-mode: screen;
}
.blob--1{
  width: 320px; height: 320px; right: -80px; top: -60px;
  background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 55%);
  animation: drift1 12s ease-in-out infinite alternate;
}
.blob--2{
  width: 420px; height: 420px; left: -120px; bottom: -80px;
  background: radial-gradient(circle at 70% 70%, #06b6d4, transparent 55%);
  animation: drift2 14s ease-in-out infinite alternate;
}
@keyframes drift1{ from{ transform: translateY(0)} to{ transform: translateY(10px)} }
@keyframes drift2{ from{ transform: translateY(0)} to{ transform: translateY(-14px)} }

/* ریسپانسیو: همه‌چیز با clamp تنظیم شده؛ نیاز به breakpoint خاص نیست */

/* کاهش حرکت برای کاربرانی که ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce){
  .bg,.glass,.blob,.btn__shine{ animation: none }
}