@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../fonts/thmanyah/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../fonts/thmanyah/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../fonts/thmanyah/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../fonts/thmanyah/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../fonts/thmanyah/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== VARIABLES ===== */
:root {
  --bg:        #FFFFFF;
  --bg-2:      #F8F9FA;
  --bg-card:   #FFFFFF;
  --border:    rgba(0,0,0,0.08);
  --primary:   #EAB308; /* RunProf Yellow/Gold */
  --primary-dark:#CA8A04;
  --accent:    #111827;
  --text:      #111827;
  --text-2:    #4B5563;
  --text-3:    #6B7280;
  --footer-bg: #FFFFFF;
  --footer-text:#111827;
  --radius:    14px;
  --shadow:    0 24px 60px rgba(0,0,0,0.08);
  --transition:0.35s cubic-bezier(0.4,0,0.2,1);
  --font-ar:   'thmanyah Serif Display', serif;
  --font-en:   'thmanyah Serif Display', serif;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
[lang="en"] body,[lang="en"] *{font-family:var(--font-en)}
[lang="ar"] body,[lang="ar"] *{font-family:var(--font-ar); font-feature-settings: "salt" 1;}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ===== CONTAINER ===== */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,5vw,2.5rem)}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:.9rem 0;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.navbar.scrolled{background:rgba(255,255,255,0.98);box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
  color:var(--text);
}
.logo-dot{
  width:12px;height:12px;border-radius:2px;
  background:var(--primary);
  flex-shrink:0;
  transform:rotate(45deg);
}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  font-size:.9rem;font-weight:600;color:var(--text-2);
  transition:color var(--transition);
}
.nav-links a:hover{color:var(--primary)}
.lang-btn{
  padding:.4rem 1rem;border-radius:20px;
  border:1px solid var(--border);
  font-size:.8rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent) !important;
  transition:var(--transition);
}
.lang-btn:hover{background:var(--accent);color:#fff !important}
.burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.burger span{
  display:block;width:24px;height:2px;
  background:var(--text);border-radius:2px;transition:var(--transition);
}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
  display:none;flex-direction:column;gap:0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,0.98);
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  padding:1rem 1.5rem;font-size:1rem;font-weight:600;
  color:var(--text-2);border-bottom:1px solid var(--border);
  transition:color var(--transition);
}
.mobile-menu a:hover{color:var(--primary)}
.lang-btn-mobile{color:var(--accent) !important}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 4rem;
  background:var(--bg);
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-glow-1 {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(234,179,8,0.15) 0%, transparent 70%);
  filter: blur(60px);
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
}

.hero-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  transition: var(--transition);
}
.hero-badge:hover {
  border-color: var(--primary);
  color: var(--text);
}
.badge-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(234,179,8,0.7);
  animation: badgePulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes badgePulse {
  to { box-shadow: 0 0 0 10px rgba(234,179,8,0); }
}

.hero-title {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.8;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.btn-primary {
  background: var(--primary);
  color: #000;
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(234,179,8,0.2);
}
.btn-glass {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-glass:hover {
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.avatars {
  display: flex;
}
.avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -12px;
}
.avatars img:first-child { margin-left: 0; }
.proof-text {
  font-size: 0.85rem;
  color: var(--text-3);
}
.proof-text strong {
  color: var(--text);
  font-weight: 700;
}

/* Glass UI Elements - Light Theme */
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}
.glass-card {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.06);
}
.main-glass {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}
.glass-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.dots {
  display: flex;
  gap: 6px;
}
.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dots .r { background: #EF4444; }
.dots .y { background: #F59E0B; }
.dots .g { background: #10B981; }
.glass-title {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--text-3);
  font-family: monospace;
}
.glass-body {
  padding: 1.5rem;
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
  background: #fff;
}
.glass-body pre { margin: 0; }
.keyword { color: #D32F2F; }
.variable { color: #1976D2; }
.string { color: #388E3C; }
.property { color: #00796B; }
.method { color: #1976D2; }
.comment { color: #9E9E9E; font-style: italic; }

.sub-glass {
  bottom: 10%;
  right: -5%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  animation: float 6s ease-in-out infinite;
}
.stat-circle {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: baseline;
}
.stat-circle span {
  font-size: 1rem;
  color: var(--primary);
}
.stat-text {
  font-size: 0.8rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.hero-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

/* ===== SECTIONS ===== */
.section-label{
  color:var(--primary-dark);font-size:.85rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem,4vw,3rem);font-weight:800;
  letter-spacing:-.02em;margin-bottom:1rem;color:var(--text);
}
.section-desc{color:var(--text-2);font-size:1.05rem;max-width:600px;margin-bottom:3rem}

/* ===== SERVICES ===== */
.services-section{
  padding:6rem 0;
  background:var(--bg-2);
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.service-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;gap:1rem;
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--primary);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition);
}
[dir="rtl"] .service-card::before{transform-origin:right;}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
  font-size:2.2rem;
  width:64px;height:64px;
  background:rgba(234,179,8,0.1);
  color:var(--primary-dark);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.service-card h3{font-size:1.25rem;font-weight:800;color:var(--text)}
.service-card p{color:var(--text-2);font-size:.95rem;line-height:1.7;flex:1}
.service-cta{margin-top:1rem}
.service-link{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--accent);font-size:.9rem;font-weight:700;
  transition:gap var(--transition), color var(--transition);
}
.service-link:hover{gap:.8rem;color:var(--primary-dark)}

/* ===== PROCESS ===== */
.process-section{padding:8rem 0; background:var(--bg);}
.process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;margin-top:3rem;position:relative;
}
@media(min-width: 900px) {
  .process-grid::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 10px, transparent 10px, transparent 20px);
    z-index: 0;
  }
}
.process-step{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;gap:1rem;
  position:relative;transition:var(--transition);
  z-index: 1;
  overflow: hidden;
}
.process-step:hover{
  border-color:var(--primary);
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}
.step-num{
  position: absolute;
  top: -15px;
  right: -15px;
  font-size:7rem;font-weight:900;
  color:var(--bg-2);
  -webkit-text-stroke: 1px rgba(0,0,0,0.03);
  line-height:1;
  transition:var(--transition);
  z-index: 0;
  pointer-events: none;
}
[dir="rtl"] .step-num{
  right: auto;
  left: -15px;
}
.process-step:hover .step-num{
  color:var(--bg-2);
  -webkit-text-stroke: 1px var(--primary);
  opacity: 0.3;
}
.step-icon{
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.02);
  transition: var(--transition);
}
.process-step:hover .step-icon {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  transform: scale(1.1);
}
.process-step h3{
  position: relative; z-index: 1;
  font-size:1.25rem;font-weight:800;color:var(--text);
}
.process-step p{
  position: relative; z-index: 1;
  color:var(--text-2);font-size:.95rem;line-height:1.7;
}
.step-arrow{
  display:none;
}

/* ===== FORM SECTION ===== */
.form-section{
  padding:6rem 0;
  background:var(--bg-2);
}
.form-wrapper{
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:4rem;align-items:start;
}
.form-info{display:flex;flex-direction:column;gap:1.5rem}
.form-info h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;line-height:1.2;color:var(--text)}
.form-info p{color:var(--text-2);line-height:1.8}
.contact-chips{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
.chip{
  display:flex;align-items:center;gap:.5rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;padding:.4rem .9rem;
  font-size:.85rem;font-weight:700;color:var(--accent);
  box-shadow:0 2px 10px rgba(0,0,0,0.02);
}

.form-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 4px);
  padding:3rem;
  box-shadow:var(--shadow);
}
.alert-success{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  border-radius:10px;padding:1rem 1.25rem;
  color:#059669;font-weight:600;margin-bottom:1.5rem;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.field-group{display:flex;flex-direction:column;gap:.5rem}
.field-group.full{grid-column:1/-1}
.field-group label{
  font-size:.9rem;font-weight:700;color:var(--text);
}
.req{color:var(--primary)}
.field-group input,
.field-group select,
.field-group textarea{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;padding:.9rem 1rem;
  color:var(--text);font-family:inherit;font-size:1rem;
  transition:var(--transition);
  width:100%;resize:vertical;
}
.field-group input::placeholder,
.field-group textarea::placeholder{color:var(--text-3)}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(234,179,8,.1);
}
.field-group select option{background:#fff;color:var(--text)}
.field-group.has-error input,
.field-group.has-error select,
.field-group.has-error textarea{border-color:rgba(239,68,68,.5)}
.field-error{color:#DC2626;font-size:.85rem;font-weight:600}

/* ===== FOOTER ===== */
.footer{
  padding:4rem 0 2rem;
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top: 1px solid var(--border);
}
.footer-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;text-align:center;
}
.footer-brand{
  display:flex;align-items:center;gap:.5rem;
  font-size:1.5rem;font-weight:800;
  color:var(--text);
}
.footer-brand .logo-dot{
  background:var(--primary);
  box-shadow:none;
}
.footer-tagline{color:var(--text-2);font-size:1rem}
.footer-copy{color:var(--text-3);font-size:.85rem;margin-top:2rem;border-top:1px solid var(--border);padding-top:2rem;width:100%;}

/* ===== REVEAL ANIMATIONS ===== */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
  transition-delay:var(--delay,0s);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{--delay:.1s}
.reveal-delay-2{--delay:.2s}
.reveal-delay-3{--delay:.3s}
.reveal-delay-4{--delay:.4s}

/* ===== RTL ADJUSTMENTS ===== */
[dir="rtl"] .hero-title{letter-spacing:0}
[dir="rtl"] .btn svg,[dir="rtl"] .service-link svg{transform:rotate(180deg)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hero-container { grid-template-columns: 1fr; text-align: center; }
  .hero-badge { margin: 0 auto; }
  .hero-desc { margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-social-proof { justify-content: center; }
  .hero-visual { min-height: 300px; margin-top: 2rem; }
  .main-glass { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; }
  .sub-glass { bottom: -20px; right: 10%; }
  
  .form-wrapper{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(max-width:640px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-title { font-size: 2.5rem; }
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:1.5rem}
  .process-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .sub-glass { display: none; }
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}