@import url('https://cdn.jsdelivr.net/npm/vazirmatn@33.003/Vazirmatn-font-face.css');

:root{
  --bg:#f7fbfd;
  --bg-soft:#eef7fa;
  --panel:rgba(255,255,255,.84);
  --panel-solid:#ffffff;
  --line:rgba(40,142,163,.14);
  --line-strong:rgba(40,142,163,.24);
  --text:#12313b;
  --muted:#5b7b84;
  --cyan:#2bb8c8;
  --cyan2:#1f97a8;
  --teal:#34c8a2;
  --success:#159c7b;
  --warning:#9b6a07;
  --danger:#c83b5b;
  --shadow:0 28px 80px rgba(17,56,67,.10);
  --shadow-hover:0 34px 90px rgba(17,56,67,.14);
  --radius:28px;
  --radius-lg:24px;
  --radius-md:18px;
  --shell:min(1180px,calc(100% - 40px));
  --copy-size:clamp(16px,1.65vw,20px);
  --primary:var(--cyan2);
  --primary-2:var(--cyan);
  --navy:var(--text);
  --surface:var(--panel-solid);
  --surface-2:var(--bg-soft);
  --r-xl:var(--radius);
  --r-lg:var(--radius-lg);
  --r-md:var(--radius-md);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Vazirmatn","Vazir",Tahoma,sans-serif;
  font-size:16px;
  line-height:1.9;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 18%,rgba(43,184,200,.10),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(52,200,162,.08),transparent 22%),
    linear-gradient(180deg,#fbfeff 0%,#f5fbfd 55%,#eef7fa 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,select{outline-color:rgba(43,184,200,.38)}
.shell{width:var(--shell);margin-inline:auto}

.ui-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}

.ui-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,var(--cyan),#4fd7bf);
  color:#fff;
  font-weight:800;
  box-shadow:0 14px 36px rgba(70,207,209,.16);
  transition:.25s ease;
  cursor:pointer;
}
.ui-primary:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(70,207,209,.22)}

.ui-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(18,49,59,.10);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  color:#1d4b57;
  font-weight:800;
  transition:.22s ease;
}
.ui-secondary:hover{border-color:var(--line-strong);background:#fff;transform:translateY(-1px)}

@media(max-width:760px){
  :root{--shell:min(100% - 28px,1180px)}
  body{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}