:root{
  --bg: #0b0e17;
  --bg-alt: #10131f;
  --surface: #151a29;
  --surface-2: #1b2133;
  --border: rgba(255,255,255,.08);
  --text: #eef0f7;
  --text-dim: #a6adc4;
  --accent: #7c5cff;
  --accent-2: #22d3ee;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Tajawal", system-ui, sans-serif;
  overflow-x:hidden;
}

::selection{background:var(--accent);color:#fff}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:10px}

a{text-decoration:none;color:inherit}
.text-accent{color:var(--accent-2)}

/* ---------- Buttons ---------- */
.btn-grad{
  background:var(--grad);
  border:none;
  color:#fff;
  font-weight:700;
  padding:.65rem 1.6rem;
  border-radius:50px;
  box-shadow:0 8px 24px rgba(124,92,255,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-grad:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(124,92,255,.5);
  color:#fff;
}
.btn-outline-light{
  border-radius:50px;
  padding:.65rem 1.6rem;
  font-weight:700;
  border-width:2px;
  transition:all .25s ease;
}
.btn-outline-light:hover{transform:translateY(-3px)}

/* ---------- Welcome gate (blocking, full-screen) ---------- */
body.gate-locked{overflow:hidden}
body.gate-locked #mainNav,
body.gate-locked main,
body.gate-locked header,
body.gate-locked section,
body.gate-locked footer{
  filter:blur(10px);
  pointer-events:none;
  user-select:none;
}

.geo-gate{
  position:fixed;inset:0;
  z-index:3000;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:rgba(6,7,12,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  animation:gateFadeIn .4s ease forwards;
}
.geo-gate.hide{
  animation:gateFadeOut .35s ease forwards;
  pointer-events:none;
}
@keyframes gateFadeIn{to{opacity:1}}
@keyframes gateFadeOut{to{opacity:0}}

.geo-gate-card{
  max-width:420px;width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:2.5rem 2rem;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.97);
  opacity:0;
  animation:gateCardIn .5s .1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes gateCardIn{to{transform:translateY(0) scale(1);opacity:1}}
.geo-gate-icon{font-size:3rem;margin-bottom:.5rem;animation:bounceIcon 2.2s ease-in-out infinite}
@keyframes bounceIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.geo-gate-card h2{font-weight:900;font-size:1.4rem;margin-bottom:.75rem}
.geo-gate-card p{color:var(--text-dim);font-size:.92rem;line-height:1.8;margin-bottom:1.75rem}
.geo-gate-actions{display:flex;flex-direction:column;gap:.75rem}

/* ---------- Navbar ---------- */
.glass-nav{
  background:rgba(11,14,23,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s ease, padding .3s ease;
  padding-top:.9rem;
  padding-bottom:.9rem;
}
.glass-nav.scrolled{background:rgba(11,14,23,.9);padding-top:.5rem;padding-bottom:.5rem}
.navbar-brand{font-size:1.35rem}
.nav-link{
  color:var(--text-dim) !important;
  font-weight:500;
  position:relative;
  margin:0 .25rem;
}
.nav-link::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s ease;
}
.nav-link:hover{color:var(--text) !important}
.nav-link:hover::after{transform:scaleX(1)}


/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:6rem;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.45;
  animation:float 12s ease-in-out infinite;
}
.blob-1{width:420px;height:420px;background:var(--accent);top:-100px;right:-80px}
.blob-2{width:380px;height:380px;background:var(--accent-2);bottom:-120px;left:-100px;animation-delay:-6s}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-30px) scale(1.08)}
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
}

.hero-eyebrow{
  color:var(--accent-2);
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:.25rem;
}
.hero-title{
  font-size:clamp(2.6rem, 6vw, 4.5rem);
  font-weight:900;
  line-height:1.1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:.5rem;
}
.hero-subtitle{
  font-size:clamp(1.2rem,3vw,1.7rem);
  font-weight:700;
  color:var(--text);
  min-height:2.4rem;
}
.cursor{color:var(--accent-2);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-desc{
  color:var(--text-dim);
  font-size:1.05rem;
  max-width:560px;
  margin:1rem auto 1.75rem;
}
@media (min-width:992px){.hero-desc{margin:1rem 0 1.75rem}}

.hero-card{position:relative;width:100%;max-width:420px}
.hero-card-glow{
  position:absolute;inset:-20px;
  background:var(--grad);
  filter:blur(50px);
  opacity:.35;
  border-radius:24px;
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.55}}
.code-window{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  animation:floatCard 5s ease-in-out infinite;
  direction:ltr;
  text-align:left;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.code-dots{display:flex;gap:.4rem;margin-bottom:1rem}
.code-dots span{width:11px;height:11px;border-radius:50%;background:var(--surface-2)}
.code-dots span:nth-child(1){background:#ff5f56}
.code-dots span:nth-child(2){background:#ffbd2e}
.code-dots span:nth-child(3){background:#27c93f}
.code-window pre{margin:0;font-family:"SFMono-Regular",Consolas,monospace;font-size:.88rem;line-height:1.7}
.tok-key{color:#ff79c6}.tok-var{color:#8be9fd}.tok-prop{color:#66d9ef}.tok-str{color:#f1fa8c}.tok-bool{color:#bd93f9}

.scroll-down{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid var(--text-dim);border-radius:20px;
  display:flex;justify-content:center;padding-top:6px;
}
.scroll-down span{width:4px;height:8px;border-radius:2px;background:var(--accent-2);animation:scrollDot 1.6s ease infinite}
@keyframes scrollDot{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

/* ---------- Sections ---------- */
.section-py{padding:6rem 0}
.section-alt{background:var(--bg-alt)}
.section-eyebrow{
  color:var(--accent-2);font-weight:700;letter-spacing:.5px;
  display:flex;align-items:center;gap:.5rem;
}
.section-eyebrow::before{content:"";width:24px;height:2px;background:var(--accent-2)}
.section-title{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:1rem}
.section-text{color:var(--text-dim);line-height:1.9}

/* About */
.about-visual{position:relative;width:280px;height:280px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.about-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px dashed var(--accent);
  animation:spin 18s linear infinite;
}
.about-avatar{
  width:220px;height:220px;border-radius:50%;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  box-shadow:0 30px 60px rgba(124,92,255,.35);
}
@keyframes spin{to{transform:rotate(360deg)}}

.stat-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.25rem 1rem;
  text-align:center;
  transition:transform .3s ease;
}
.stat-box:hover{transform:translateY(-6px)}
.stat-num{font-size:2rem;font-weight:900;color:var(--accent-2)}
.stat-plus{font-size:1.3rem;font-weight:900;color:var(--accent-2)}
.stat-label{display:block;color:var(--text-dim);font-size:.85rem;margin-top:.25rem}

/* Skills */
.skill-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem;
  height:100%;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.skill-card:hover{
  transform:translateY(-10px);
  border-color:var(--accent);
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}
.skill-icon{font-size:2.4rem;margin-bottom:1rem}
.skill-card h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.skill-card p{color:var(--text-dim);font-size:.92rem;margin-bottom:1.25rem}
.skill-bar{height:6px;background:var(--surface-2);border-radius:10px;overflow:hidden}
.skill-bar span{
  display:block;height:100%;width:0;
  background:var(--grad);border-radius:10px;
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}
.skill-card.in-view .skill-bar span{width:var(--w)}

/* Services */
.service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.75rem;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease;
}
.service-card:hover{transform:translateY(-8px);border-color:var(--accent-2)}
.service-num{
  font-size:2.2rem;font-weight:900;
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  margin-bottom:.75rem;
}
.service-card h4{font-weight:700;font-size:1.05rem;margin-bottom:.5rem}
.service-card p{color:var(--text-dim);font-size:.88rem;margin:0}

/* Contact */
.contact-card{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem 1rem;
  transition:transform .3s ease, border-color .3s ease;
}
.contact-card:hover{transform:translateY(-8px);border-color:var(--accent)}
.contact-icon{font-size:2rem}
.contact-card span{font-weight:700}
.contact-card small{color:var(--text-dim)}

/* Footer */
.footer{
  padding:1.5rem 0;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-size:.9rem;
}
.footer-link{color:var(--accent-2);font-weight:600}
.footer-link:hover{text-decoration:underline}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.reveal-delay-1{transition-delay:.1s}
.reveal.reveal-delay-2{transition-delay:.2s}
.reveal.reveal-delay-3{transition-delay:.3s}
.reveal.in-view{opacity:1;transform:translateY(0)}

@media (max-width:991px){
  .section-eyebrow{justify-content:center}
  .hero{text-align:center}
}