:root {
  --bg: #080a12;
  --card: #10131e;
  --text: #f5f7ff;
  --muted: #9ba3b8;
  --line: rgba(255,255,255,.09);
  --a: #7c5cff;
  --b: #00d4ff;
  --r: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: Vazirmatn, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.9;
  overflow-x: hidden;
}
body:before {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:
    radial-gradient(circle at 15% 15%, rgba(124,92,255,.14), transparent 30%),
    radial-gradient(circle at 85% 35%, rgba(0,212,255,.09), transparent 28%);
}
body:after {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.025;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 28px 28px;
}
a { text-decoration:none; color:inherit; }
button { font:inherit; }
.container { width:min(1120px,92%); margin:auto; }

.nav {
  height:82px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.logo { font-weight:900; font-size:23px; letter-spacing:-.5px; }
.logo span { color:var(--a); }
.links { display:flex; gap:26px; color:var(--muted); font-size:14px; }
.links a { transition:.2s; }
.links a:hover { color:#fff; transform:translateY(-1px); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:14px;
  background:linear-gradient(135deg,var(--a),#5e3cff);
  font-weight:700; box-shadow:0 12px 35px rgba(124,92,255,.25);
  transition:.25s; border:1px solid transparent;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(124,92,255,.32); }
.ghost { background:transparent; border-color:var(--line); box-shadow:none; }

.hero {
  min-height:calc(100vh - 82px); display:grid; grid-template-columns:1.15fr .85fr;
  gap:60px; align-items:center; padding:80px 0 95px;
}
.hero-copy { position:relative; z-index:2; }
.badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border:1px solid rgba(124,92,255,.3); background:rgba(124,92,255,.08);
  border-radius:999px; color:#c8bcff; font-size:13px; margin-bottom:15px;
}
.badge i { width:7px; height:7px; border-radius:50%; background:#65e6a4; box-shadow:0 0 12px #65e6a4; }
.mini-kicker { color:#7e89a5; font-size:11px; font-weight:700; letter-spacing:2px; margin-bottom:8px; }
.hero h1 { font-size:clamp(42px,6vw,76px); line-height:1.2; letter-spacing:-2px; margin-bottom:20px; }
.gradient {
  background:linear-gradient(90deg,#fff,#a99aff,#5ce8ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-text { color:var(--muted); max-width:650px; font-size:17px; margin-bottom:30px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.stats { display:flex; gap:30px; margin-top:42px; flex-wrap:wrap; }
.stat { min-width:105px; }
.stat strong { font-size:22px; display:block; }
.stat span { font-size:11px; color:var(--muted); }

.visual { height:470px; position:relative; display:grid; place-items:center; }
.orb {
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#b8aaff,transparent 20%),linear-gradient(135deg,#6f51ff,#00d4ff);
  box-shadow:0 0 100px rgba(124,92,255,.35);
  animation:float 5s ease-in-out infinite;
}
.code-window {
  position:absolute; width:350px; background:rgba(10,12,20,.82);
  border:1px solid var(--line); backdrop-filter:blur(18px);
  border-radius:20px; box-shadow:0 30px 70px #0008; overflow:hidden;
}
.window-bar {
  height:38px; display:flex; align-items:center; gap:6px; padding:0 13px;
  border-bottom:1px solid var(--line); background:#ffffff04;
}
.window-bar span { width:7px; height:7px; border-radius:50%; background:#ffffff26; }
.window-bar b { margin-right:auto; color:#78829b; font:500 10px monospace; direction:ltr; }
.code { padding:20px; direction:ltr; text-align:left; font:13px/1.9 monospace; color:#dce3ff; }
.code .p { color:#8b78ff; }
.code .b { color:#5ce8ff; }
.code .g { color:#8fe388; }
@keyframes float { 50% { transform:translateY(-14px) scale(1.02); } }

section { padding:100px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:38px; }
.eyebrow { color:#8e7dff; font-size:13px; font-weight:700; letter-spacing:.5px; }
.section-head h2 { font-size:36px; margin-top:5px; line-height:1.4; }
.section-head p { color:var(--muted); max-width:480px; font-size:14px; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card, .step {
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:.25s;
}
.card:hover, .step:hover { transform:translateY(-5px); border-color:rgba(124,92,255,.35); }
.icon {
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:rgba(124,92,255,.12); font-size:21px; margin-bottom:20px;
}
.card h3, .step h3 { margin-bottom:9px; }
.card p, .step p { color:var(--muted); font-size:14px; }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.step { position:relative; min-height:190px; }
.step > span { color:#8171ff; font:800 13px monospace; display:block; margin-bottom:28px; }
.step:after {
  content:""; position:absolute; top:35px; left:20px; width:35px; height:1px;
  background:linear-gradient(90deg,var(--a),transparent); opacity:.45;
}
.portfolio-note {
  margin-top:18px; padding:22px 25px; border:1px dashed rgba(124,92,255,.3);
  border-radius:20px; display:flex; align-items:center; gap:15px; background:rgba(124,92,255,.04);
}
.portfolio-icon {
  width:45px; height:45px; flex:0 0 45px; display:grid; place-items:center;
  border-radius:14px; background:rgba(0,212,255,.08); color:#5ce8ff; font-size:24px;
}
.portfolio-note strong { display:block; margin-bottom:3px; }
.portfolio-note p { color:var(--muted); font-size:13px; }

.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:55px; align-items:center; }
.about-box {
  width:min(360px,100%); aspect-ratio:1; border:1px solid var(--line);
  border-radius:28px; background:linear-gradient(135deg,#131728,#0d1019);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 auto; position:relative;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
}
.about-box img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-badge {
  position:absolute; bottom:15px; right:15px; padding:6px 11px; border-radius:999px;
  background:rgba(8,10,18,.72); border:1px solid var(--line); backdrop-filter:blur(10px);
  font-size:11px; font-weight:700;
}
.about h2 { font-size:34px; line-height:1.45; }
.about p { color:var(--muted); margin:18px 0; }
.skills { display:flex; flex-wrap:wrap; gap:9px; }
.skill { padding:9px 14px; border-radius:12px; border:1px solid var(--line); font-size:13px; background:#fff5; }

.contact {
  border:1px solid var(--line); border-radius:30px; padding:50px;
  background:radial-gradient(circle at 10% 20%,rgba(124,92,255,.16),transparent 35%),#0d1019;
  display:flex; justify-content:space-between; align-items:center; gap:30px;
}
.contact h2 { font-size:32px; line-height:1.45; }
.contact p { color:var(--muted); max-width:580px; margin-top:10px; }
.contact-actions { display:flex; gap:10px; flex-wrap:wrap; }

footer {
  padding:30px 0; border-top:1px solid var(--line); color:var(--muted);
  font-size:12px; display:flex; justify-content:space-between; gap:15px;
}

.reveal { opacity:0; transform:translateY(18px); transition:.7s; }
.reveal.show { opacity:1; transform:none; }

.menu-toggle {
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:13px; background:#ffffff08; cursor:pointer; align-items:center;
  justify-content:center; flex-direction:column; gap:5px;
}
.menu-toggle span { display:block; width:20px; height:2px; background:var(--text); border-radius:4px; transition:.25s; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:20px; }
  .visual { height:390px; }
  .grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:800px) {
  .nav { height:72px; }
  .links {
    position:absolute; top:72px; right:0; left:0; width:100%; padding:12px;
    display:flex; flex-direction:column; gap:4px; background:rgba(10,12,20,.96);
    border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px;
    backdrop-filter:blur(18px); box-shadow:0 20px 45px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:.25s ease;
  }
  .links.open { opacity:1; visibility:visible; transform:translateY(0); }
  .links a { display:block; width:100%; padding:10px 14px; border-radius:10px; color:var(--text); }
  .links a:hover { background:#ffffff08; }
  .menu-toggle { display:flex; }
  .nav-cta { display:none; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .hero { min-height:auto; padding:55px 0 70px; }
  .hero h1 { letter-spacing:-1px; }
  .visual { height:330px; }
  .orb { width:245px; height:245px; }
  .code-window { width:min(330px,92%); }
  section { padding:75px 0; }
  .grid, .steps, .about { grid-template-columns:1fr; }
  .section-head { display:block; }
  .section-head p { margin-top:10px; }
  .about-box { width:min(320px,100%); }
  .contact { display:block; padding:34px 25px; }
  .contact h2 { font-size:27px; }
  .contact-actions { margin-top:25px; }
  .stats { gap:18px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}