/* =========================
   Necha?! Base Styles
   ========================= */
:root{
  --bg: #070A10;
  --bg2: #0B1020;
  --text: #EAF0FF;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.55);
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --accent: #7C5CFF;
  --accent2: #20E3B2;
  --warn: #FFCF5C;
  --danger: #FF4D6D;
  --radius: 22px;
  --radius2: 28px;
  --container: 1180px;
}

:root[data-theme="light"]{
  --bg: #F7F8FF;
  --bg2: #EEF2FF;
  --text: #0B1020;
  --muted: rgba(11,16,32,.72);
  --muted2: rgba(11,16,32,.55);
  --card: rgba(255,255,255,.72);
  --card2: rgba(255,255,255,.92);
  --border: rgba(11,16,32,.10);
  --shadow: 0 18px 60px rgba(10,20,60,.10);
  --accent: #5B46FF;
  --accent2: #13C8A2;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1100px 520px at 12% 10%, rgba(124,92,255,.35), transparent 55%),
              radial-gradient(900px 520px at 88% 25%, rgba(32,227,178,.24), transparent 52%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

/* Smooth scroll */
html{ scroll-behavior:smooth; }

/* Loader */
#loader{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 50% 0%, rgba(124,92,255,.40), transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  z-index: 9999;
}
.loader-card{
  width:min(440px, calc(100% - 48px));
  padding: 26px 22px;
  border-radius: var(--radius2);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  text-align:center;
  backdrop-filter: blur(14px);
}
.loading-spinner{
  margin: 4px auto 12px;
}
.loading-spinner .track{
  stroke: rgba(255,255,255,.18);
}
:root[data-theme="light"] .loading-spinner .track{
  stroke: rgba(11,16,32,.14);
}
.loading-spinner .car{
  stroke: var(--accent2);
  stroke-dasharray: 110;
  stroke-dashoffset: 80;
  animation: spinStroke 1.1s linear infinite;
}
@keyframes spinStroke{
  0%{ stroke-dashoffset: 180; transform: rotate(0deg); transform-origin: 50% 50%; }
  100%{ stroke-dashoffset: 0; transform: rotate(360deg); transform-origin: 50% 50%; }
}
.loader-text{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .3px;
}
.loader-sub{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 13px;
}

/* Utilities */
.hidden{ display:none !important; }
.rtl{ direction:rtl; }
.ltr{ direction:ltr; }
.btn-pill{
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

/* Footer */
.footer{
  padding: 44px 0 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.footer-content{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer-logo h2{
  margin:0;
  font-size: 20px;
  font-weight: 800;
}
.footer-logo p{
  margin: 6px 0 0;
  color: var(--muted2);
  font-size: 13px;
}
.footer-links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.footer-links a{
  color: var(--muted);
  transition: color .16s ease;
}
.footer-links a:hover{
  color: var(--text);
}
.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--muted2);
  font-size: 13px;
  text-align:center;
}

/* Section headings */
.section-head{
  text-align:center;
  margin-bottom: 18px;
}
.section-title{
  margin:0;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 850;
}
.section-desc{
  margin: 10px auto 0;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.9;
  font-size: 14px;
}

/* Scroll indicator */
.scroll-indicator{
  margin-top: 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  opacity: .9;
}
.scroll-arrow{
  width: 22px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  position: relative;
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.scroll-arrow::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent2);
  position:absolute;
  left:50%;
  top: 8px;
  transform: translateX(-50%);
  animation: scrollDot 1.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform: translate(-50%, 0); opacity:.4; }
  50%{ transform: translate(-50%, 16px); opacity:1; }
  100%{ transform: translate(-50%, 0); opacity:.4; }
}
.scroll-text{
  margin:0;
  font-size: 13px;
  color: var(--muted2);
}

/* Responsive */
@media (max-width: 720px){
  .container{ width: calc(100% - 28px); }
}