:root {

  --bg: #070b12;

  --bg-soft: #0d1420;

  --card: rgba(255, 255, 255, 0.055);

  --card-strong: rgba(255, 255, 255, 0.09);

  --line: rgba(255, 255, 255, 0.12);

  --text: #f7f8fb;

  --muted: #aab3c2;

  --soft: #d8dde7;

  --accent: #8c7bff;

  --accent-2: #66d9e8;

  --accent-soft: rgba(140, 123, 255, 0.16);

  --radius: 28px;

  --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);

}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

  margin: 0;

  font-family: "Inter", sans-serif;

  color: var(--text);

  background:

    radial-gradient(circle at 15% 10%, rgba(140, 123, 255, 0.18), transparent 28%),

    radial-gradient(circle at 85% 25%, rgba(102, 217, 232, 0.10), transparent 30%),

    var(--bg);

  cursor: none;

}

body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:

    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);

  background-size: 64px 64px;

  animation: moveGrid 34s linear infinite;

  mask-image: radial-gradient(circle at center, black 0%, transparent 82%);

}

body::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background: radial-gradient(

    520px circle at var(--mouse-x, 50%) var(--mouse-y, 20%),

    rgba(140, 123, 255, 0.18),

    rgba(102, 217, 232, 0.07) 38%,

    transparent 72%

  );

}

@keyframes moveGrid {

  from { background-position: 0 0; }

  to { background-position: 0 64px; }

}

a {

  color: inherit;

  text-decoration: none;

}

img {

  max-width: 100%;

  display: block;

}

/* Header */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 22px;

  padding: 18px 6vw;

  background: rgba(7, 11, 18, 0.78);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--line);

}

.brand {

  display: flex;

  align-items: center;

  gap: 14px;

  font-weight: 400;

  letter-spacing: -0.03em;

  color: var(--text);

}

.brand-logo {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

  border: 1px solid rgba(140, 123, 255, 0.25);

  box-shadow:

    0 0 0 1px rgba(140, 123, 255, 0.12),

    0 10px 30px rgba(140, 123, 255, 0.15);

}

.brand-logo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* Premium Nav */

.nav-pill {

  display: flex;

  margin-inline-start: auto;

  gap: 12px;

  padding: 6px 24px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(18px);

}

.nav-pill a {

  display: flex;

  align-items: center;

  gap: 8px;

  position: relative;

  padding: 10px 14px;

  border-radius: 999px;

  color: var(--muted);

  font-size: 14px;

  font-weight: 600;

  transition: all 0.3s ease;

}

.nav-pill a i {

  font-size: 14px;

  color: var(--accent);

  transition: transform 0.3s ease;

}

.nav-pill a:hover,

.nav-pill a.active {

  color: var(--text);

  background: rgba(140, 123, 255, 0.14);

}

.nav-pill a:hover i,

.nav-pill a.active i {

  transform: translateY(-1px) scale(1.08);

}

.nav-pill a::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 5px;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--accent);

  opacity: 0;

  transform: translateX(-50%) scale(0);

  transition: 0.3s ease;

}

.nav-pill a:hover::after,

.nav-pill a.active::after {

  opacity: 1;

  transform: translateX(-50%) scale(1);

}

/* Sections */

.section { padding: 96px 6vw; }

.hero {

  min-height: 88vh;

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: 56px;

}

.eyebrow {

  margin: 0 0 18px;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.16em;

  font-size: 14px;

  font-weight: 600;

}

h1 {

  margin: 0;

  font-size: clamp(54px, 10vw, 96px);

  letter-spacing: -0.08em;

  line-height: 0.88;

}

.lead {

  max-width: 680px;

  margin: 32px 0 0;

  color: var(--soft);

  font-size: clamp(24px, 3vw, 42px);

  line-height: 1.12;

  letter-spacing: -0.045em;

}

.sublead {

  max-width: 540px;

  margin-top: 18px;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.7;

}

.actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;

}

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 0 22px;

  border: 1px solid var(--line);

  border-radius: 999px;

  font-weight: 800;

  font-size: 14px;

  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}

.btn:hover {

  transform: translateY(-3px) scale(1.02);

}

.primary {

  background: var(--text);

  color: var(--bg);

}

.primary:hover {

  box-shadow: 0 18px 38px rgba(255, 255, 255, 0.10);

}

.secondary {

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

}

.secondary:hover {

  border-color: rgba(140, 123, 255, 0.55);

  box-shadow: 0 16px 36px rgba(140, 123, 255, 0.10);

}

.btn-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  line-height: 1;

}

/* Hero Metrics */

.hero-panel {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}

.metric {

  min-height: 172px;

  padding: 28px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));

  box-shadow: var(--shadow);

}

.metric-icon,

.skill-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--accent);

  background: var(--accent-soft);

  border: 1px solid rgba(140, 123, 255, 0.25);

  box-shadow: 0 0 20px rgba(140, 123, 255, 0.18);

}

.metric-icon {

  width: 38px;

  height: 38px;

  margin-bottom: 22px;

  border-radius: 13px;

  font-size: 18px;

}

.metric-label {

  display: block;

  margin-bottom: 12px;

  color: var(--muted);

  font-size: 20px;

  font-weight: 700;

}

.metric strong {

  display: block;

  font-size: 26px;

  letter-spacing: -0.05em;

}

.section-heading {

  max-width: 800px;

  margin-bottom: 34px;

}

h2 {

  margin: 0;

  font-size: clamp(30px, 6vw, 60px);

  line-height: 0.98;

  letter-spacing: -0.07em;

}

/* Projects */

.project-card {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 34px;

  margin-bottom: 28px;

  padding: 22px;

  border: 1px solid var(--line);

  border-radius: calc(var(--radius) + 10px);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));

  box-shadow: var(--shadow);

  overflow: hidden;

  align-items: stretch;

}

.project-card.large {

  grid-template-columns: 1.25fr 0.75fr;

}

.project-media {

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: #101623;

}

.project-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.toura-grid {

  display: grid;

  grid-template-columns: 1.25fr 1fr;

  grid-template-rows: 1fr 1fr;

  gap: 12px;

  padding: 12px;

  height: 650px;

}

.toura-grid img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  border-radius: 24px;

  background: #101623;

}

.toura-grid img:first-child {

  grid-row: 1 / span 2;

}

/* GBY Slider */

.gby-slider {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  min-height: 520px;

}

.slider-track {

  display: flex;

  width: 100%;

  height: 100%;

  animation: gbySlider 20s infinite ease-in-out;

}

.slider-track img {

  width: 100%;

  height: 520px;

  object-fit: cover;

  object-position: top center;

  flex: 0 0 100%;

  transition: transform 0.8s ease;

}

@keyframes gbySlider {

  0%, 20% { transform: translateX(0); }

  25%, 45% { transform: translateX(-100%); }

  50%, 70% { transform: translateX(-200%); }

  75%, 95% { transform: translateX(-300%); }

  100% { transform: translateX(0); }

}

.gby-slider:hover .slider-track {

  animation-play-state: paused;

}

.gby-slider:hover img {

  transform: scale(1.02);

}

/* Project Info */

.project-info {

  align-self: stretch;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 48px 34px;

}

.project-info h3 {

  margin: 0 0 18px;

  font-size: clamp(30px, 5vw, 50px);

  letter-spacing: -0.07em;

}

.project-info p,

.project-info li {

  color: var(--muted);

  line-height: 1.75;

  font-size: 14px;

}

.project-actions { margin-top: 28px; }

.project-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--accent);

  font-weight: 700;

  font-size: 14px;

  transition: all 0.3s ease;

}

.project-link i { font-size: 15px; }

.project-link:hover {

  transform: translateX(4px);

  color: #a596ff;

}

.dark-card {

  display: block;

  background: linear-gradient(135deg, rgba(140, 123, 255, 0.12), rgba(102, 217, 232, 0.05));

}

.full { max-width: 920px; }

.tag-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;

}

.tag-row span {

  padding: 10px 14px;

  border: 1px solid var(--line);

  border-radius: 999px;

  color: var(--soft);

  background: rgba(255, 255, 255, 0.05);

  font-size: 13px;

  font-weight: 700;

}

/* Compact Row: Moodly + Enterprise */

.compact-projects-row {

  display: grid;

  grid-template-columns: 8fr 4fr;

  gap: 28px;

  margin-bottom: 28px;

  align-items: stretch;

}

.moodly-card {

  display: grid;

  grid-template-columns: 300px 1fr;

  gap: 32px;

  margin-bottom: 0;

  padding: 22px;

}

.moodly-card .project-info {

  padding: 28px 12px;

  justify-content: center;

}

.moodly-card .project-info h3 {

  font-size: clamp(32px, 4vw, 46px);

}

.moodly-card .project-info p,

.moodly-card .project-info li {

  font-size: 14px;

}

.moodly-card .eyebrow {

  font-size: 11px;

}

.moodly-slider {

  position: relative;

  overflow: hidden;

  width: 270px;

  height: 575px;

  margin: 0;

  align-self: center;

  justify-self: center;

  border: none;

  border-radius: 34px;

  background: transparent;

}

.moodly-track {

  display: flex;

  width: 100%;

  height: 100%;

  animation: moodlySlider 24s infinite ease-in-out;

}

.moodly-track img {

  flex: 0 0 100%;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top center;

  border-radius: 34px;

  padding: 0;

  background: transparent;

}

.moodly-slider:hover .moodly-track {

  animation-play-state: paused;

}

@keyframes moodlySlider {

  0%, 12% { transform: translateX(0); }

  16%, 28% { transform: translateX(-100%); }

  32%, 44% { transform: translateX(-200%); }

  48%, 60% { transform: translateX(-300%); }

  64%, 76% { transform: translateX(-400%); }

  80%, 92% { transform: translateX(-500%); }

  100% { transform: translateX(0); }

}

.enterprise-card {

  display: flex;

  min-height: 500px;

  margin-bottom: 0;

}

.enterprise-card .project-info {

  padding: 38px;

}

.enterprise-card h3 {

  font-size: clamp(30px, 4vw, 44px);

}

/* Why Work With Me */

.value-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.value-card {

  position: relative;

  min-height: 280px;

  padding: 32px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background:

    radial-gradient(circle at top right, rgba(140, 123, 255, 0.14), transparent 38%),

    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));

  box-shadow: var(--shadow);

  overflow: hidden;

  transition: 0.35s ease;

}

.value-card::before {

  content: "";

  position: absolute;

  inset: auto 28px 0 28px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(140, 123, 255, 0.55), transparent);

  opacity: 0.7;

}

.value-card:hover {

  transform: translateY(-8px) scale(1.01);

  border-color: rgba(140, 123, 255, 0.40);

  background:

    radial-gradient(circle at top right, rgba(140, 123, 255, 0.20), transparent 42%),

    rgba(255,255,255,0.08);

}

.value-card span {

  display: inline-flex;

  width: 46px;

  height: 46px;

  align-items: center;

  justify-content: center;

  margin-bottom: 24px;

  border-radius: 16px;

  color: var(--accent);

  background: var(--accent-soft);

  border: 1px solid rgba(140, 123, 255, 0.25);

  box-shadow: 0 0 22px rgba(140, 123, 255, 0.18);

  font-size: 21px;

}

.value-card h3 {

  margin: 0 0 14px;

  font-size: 28px;

  line-height: 1.05;

  letter-spacing: -0.05em;

}

.value-card p {

  margin: 0;

  color: var(--muted);

  line-height: 1.8;

  font-size: 15px;

}

/* About / Skills / Contact */

.about-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 56px;

  align-items: start;

}

.skills-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.skill-card {

  padding: 30px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--card);

}

.skill-icon {

  width: 46px;

  height: 46px;

  margin-bottom: 22px;

  border-radius: 16px;

  font-size: 22px;

}

.skill-card h3 {

  margin: 0 0 18px;

  font-size: 28px;

  letter-spacing: -0.04em;

}

.skill-card p {

  margin: 0;

  color: var(--muted);

  line-height: 1.8;

}

.contact-card {

  padding: clamp(36px, 7vw, 80px);

  border: 1px solid var(--line);

  border-radius: calc(var(--radius) + 14px);

  background: linear-gradient(135deg, rgba(140, 123, 255, 0.2), rgba(255, 255, 255, 0.06));

  box-shadow: var(--shadow);

}

/* Footer */

footer {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 28px 6vw;

  color: var(--muted);

  border-top: 1px solid var(--line);

}

.footer-signature {

  display: inline-flex;

  gap: 6px;

  font-weight: 600;

  letter-spacing: -0.03em;

  color: #8c7bff;

}

.footer-signature span {

  display: inline-block;

  animation: signatureFloat 2.8s ease-in-out infinite;

  text-shadow: 0 0 18px rgba(140, 123, 255, 0.45);

}

.footer-signature span:nth-child(2) { animation-delay: 0.15s; }

.footer-signature span:nth-child(3) { animation-delay: 0.3s; }

.footer-signature i {

  color: #8c7bff;

  margin-right: 8px;

  font-size: 16px;

}

@keyframes signatureFloat {

  0%, 100% {

    transform: translateY(0);

    opacity: 0.75;

  }

  50% {

    transform: translateY(-4px);

    opacity: 1;

  }

}

/* Reveal */

.reveal {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}

.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}

.delay-1 { transition-delay: 0.12s; }

.delay-2 { transition-delay: 0.22s; }

/* Cursor */

.cursor-dot,

.cursor-outline {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9999;

  pointer-events: none;

  border-radius: 50%;

  transform: translate(-50%, -50%);

}

.cursor-dot {

  width: 8px;

  height: 8px;

  background: var(--accent);

}

.cursor-outline {

  width: 42px;

  height: 42px;

  border: 1px solid rgba(140, 123, 255, 0.65);

  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;

}

.cursor-outline.active {

  width: 66px;

  height: 66px;

  border-color: rgba(140, 123, 255, 0.9);

}

/* Hover */

.project-card,

.skill-card,

.metric,

.insight-mini-card {

  transition:

    transform 0.35s ease,

    border-color 0.35s ease,

    background 0.35s ease,

    box-shadow 0.35s ease;

}

.project-card:hover,

.skill-card:hover,

.metric:hover {

  transform: translateY(-8px) scale(1.01);

  border-color: rgba(140, 123, 255, 0.35);

  background: rgba(255, 255, 255, 0.075);

  box-shadow:

    0 20px 50px rgba(140, 123, 255, 0.10),

    0 0 40px rgba(140, 123, 255, 0.08);

}

.project-card:hover .project-media:not(.toura-grid):not(.moodly-slider) img {

  transform: scale(1.035);

  filter: brightness(1.08);

}

.project-card:hover .toura-grid img,

.project-card:hover .moodly-slider img {

  transform: none;

  filter: none;

}

.hero-copy,

.hero-panel {

  will-change: transform;

}

/* Status Tag */

.status-tag {

  background: rgba(140, 123, 255, 0.18) !important;

  border: 1px solid rgba(140, 123, 255, 0.35) !important;

  color: #b7abff !important;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow:

    0 0 20px rgba(140, 123, 255, 0.15),

    inset 0 0 12px rgba(140, 123, 255, 0.08);

}

.status-tag i {

  color: #8c7bff;

  font-size: 12px;

}

/* Insights Preview */

.insights-preview-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.insight-mini-card {

  min-height: 280px;

  padding: 30px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background:

    radial-gradient(circle at top right, rgba(140,123,255,0.12), transparent 38%),

    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));

  box-shadow: var(--shadow);

}

.insight-mini-card:hover {

  transform: translateY(-8px) scale(1.01);

  border-color: rgba(140, 123, 255, 0.4);

  background:

    radial-gradient(circle at top right, rgba(140,123,255,0.18), transparent 42%),

    rgba(255,255,255,0.08);

}

.insight-mini-card span {

  display: inline-flex;

  padding: 9px 13px;

  border-radius: 999px;

  color: #b7abff;

  background: rgba(140, 123, 255, 0.16);

  border: 1px solid rgba(140, 123, 255, 0.3);

  font-size: 12px;

  font-weight: 800;

}

.insight-mini-card h3 {

  margin: 26px 0 14px;

  font-size: 28px;

  line-height: 1.05;

  letter-spacing: -0.05em;

}

.insight-mini-card p {

  color: var(--muted);

  line-height: 1.8;

  font-size: 15px;

}

/* Language Switch */

.header-lang-switch {

  position: relative;

  display: inline-grid;

  place-items: center;

  flex: 0 0 auto;

  width: 48px;

  height: 48px;

  border: 1px solid rgba(140, 123, 255, 0.36);

  border-radius: 50%;

  color: #ffffff;

  background:

    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.16), transparent 34%),

    linear-gradient(145deg, rgba(140, 123, 255, 0.34), rgba(140, 123, 255, 0.12));

  box-shadow:

    0 0 0 1px rgba(255,255,255,0.04) inset,

    0 0 26px rgba(140,123,255,0.22),

    0 14px 34px rgba(140,123,255,0.18);

  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;

  font-size: 19px;

  font-weight: 900;

  line-height: 1;

  text-align: center;

  text-decoration: none;

  transform: translateZ(0);

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;

}

.header-lang-switch:hover {

  transform: translateY(-2px);

  border-color: rgba(140, 123, 255, 0.68);

  background:

    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.20), transparent 34%),

    linear-gradient(145deg, rgba(140, 123, 255, 0.46), rgba(140, 123, 255, 0.16));

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.05) inset,

    0 18px 42px rgba(140, 123, 255, 0.26);

}

/* Creative lists */

.project-info ul {

  list-style: none;

  padding: 0;

  margin: 22px 0 0;

  display: grid;

  gap: 14px;

}

.project-info li {

  position: relative;

  padding: 16px 18px 16px 52px;

  border: 1px solid var(--line);

  border-radius: 18px;

  color: var(--soft);

  background: rgba(255, 255, 255, 0.045);

  font-size: 15px;

  line-height: 1.65;

}

.project-info li::before {

  content: "✦";

  position: absolute;

  left: 18px;

  top: 15px;

  color: #b7abff;

  font-size: 16px;

}

/* Responsive */

@media (max-width: 1100px) {

  .compact-projects-row,

  .value-grid {

    grid-template-columns: 1fr;

  }

  .moodly-card {

    grid-template-columns: 300px 1fr;

  }

}

@media (max-width: 900px) {

  body { cursor: auto; }

  .nav-pill { display: none; }

  .hero,

  .project-card,

  .project-card.large,

  .about-grid,

  .moodly-card {

    grid-template-columns: 1fr;

  }

  .hero {

    min-height: auto;

    padding-top: 70px;

  }

  .hero-panel,

  .skills-grid,

  .insights-preview-grid {

    grid-template-columns: 1fr;

  }

  .project-info,

  .moodly-card .project-info {

    padding: 34px 22px;

  }

  .toura-grid {

    grid-template-columns: 1fr;

    grid-template-rows: auto;

    height: auto;

  }

  .toura-grid img:first-child {

    grid-row: auto;

  }

  .toura-grid img {

    height: auto;

    object-fit: contain;

  }

  .moodly-slider {

    width: min(300px, 100%);

    height: 530px;

    margin: 0 auto;

  }

  .gby-slider {

    min-height: 320px;

  }

  .slider-track img {

    height: 320px;

  }

  .cursor-dot,

  .cursor-outline {

    display: none;

  }

  footer {

    flex-direction: column;

  }

}