:root {
  --bg: #06080b;
  --bg-elev: #0b0f14;
  --text: #e9eef6;
  --muted: #9fb0c6;
  --card: #0b1016;
  --border: #16202b;

  --brand-1: #8a7bff;
  --brand-2: #00e0ff;
 

  --container: 1160px;
  --radius: 16px;
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
  --shadow: 0 20px 50px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfcff;
    --bg-elev: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --card: #ffffff;
    --border: #e7eaf1;

    --brand-1: #6f63ff;
    --brand-2: #06c3ff;
    --accent: #15c48c;
    --shadow-soft: 0 4px 12px rgba(0,0,0,.08);
    --shadow: 0 16px 40px rgba(16,24,40,.12);
  }
}

/* Base */
*,
*::before,
*::after { 
   box-sizing: border-box;
 }
html { 
   color-scheme: light dark; 
   scroll-behavior: smooth;
 }
body {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1000px 800px at 10% -10%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, color-mix(in oklab, var(--brand-1) 22%, transparent), transparent 60%),
    var(--bg);
  line-height: 1.65;
}

/* Utilities */
.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
    }

.section { 
   padding: clamp(3rem, 4vw + 1rem, 6rem) 0; 
}

.section--muted { 
   background: var(--bg-elev);
    border-block:
    1px solid var(--border); }

.section__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); 
   margin: 0 0 1.2rem; 
   font-weight: 800; 
}

h1,h2,h3 { 
    margin: 0 0 .6rem;
    line-height: 1.2;
    }

h1 { font-size: clamp(3rem, 1.2rem + 3vw, 3.2rem);
    font-weight: 800; 
    letter-spacing: -.01em; 
   }

h3 { font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem);
    font-weight: 700; 
   }

p { margin: 0 0 1rem;
    color: var(--muted);
    }

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  margin-bottom: .6rem;
}

.lede { 
   color: var(--text); 
   font-size: clamp(1rem, .6rem + 1vw, 1.15rem); 
}
.accent { 
   background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
  }

.grid { 
   display: grid; 
   gap: 1.2rem;
 }
.grid-2 { 
   display: grid;
    gap: 2rem; 
    grid-template-columns: 1fr; 
   }
@media (min-width: 920px)
 { .grid-2 { grid-template-columns: 1.1fr .9fr; } }

img {
    max-width: 100%;
     display: block; 
     border-radius: calc(var(--radius) - 6px);
    }

/* Buttons */
.btn{
  --bg-btn: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --fg-btn: #fff;
  display: inline-block;
  padding: .6rem 1.15rem;
  border-radius: .9rem;
  text-decoration: none;
  color: var(--fg-btn);
  background: var(--bg-btn);
  border: 1px solid color-mix(in oklab, var(--brand-1), #000 10%);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  justify-content: space-between;
}
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); filter: brightness(1.05); box-shadow: var(--shadow); }
.btn--ghost{
  --bg-btn: transparent; --fg-btn: var(--text);
  border: 1px solid var(--border); background: color-mix(in oklab, var(--bg-elev) 40%, transparent);
}
.btn--sm{ padding: .55rem .85rem; border-radius: .6rem; font-size: .95rem; }

/* Header / Nav */
.site-header{
  position: sticky; top: 0; z-index: 50;
  padding-left: 120px;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}

.accent{
  font-size: 1.2em;
  position: relative;
  right: 4px;
}
.header__row{
  display: flex; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .9rem 0;
  justify-content: space-between;
}
.logo{
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); font-weight: 800;
}
.logo__gem{
  width: 16px; height: 16px; border-radius: 999px;
  background: radial-gradient(60% 60% at 30% 30%, #fff8, transparent), linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand-2), transparent 80%), 0 8px 25px color-mix(in oklab, var(--brand-1), #000 60%);
}
.logo__text{ letter-spacing: .2px; }

.nav{ 
  display: flex; 
  gap: .9rem; align-items: center; 
  margin-left: auto; margin-right: 20px ;
}
.nav a{
  color: var(--muted); 
  text-decoration: none; 
  font-weight: 700;
  padding: .55rem .75rem;
   border-radius: 1.6rem;
}
.nav a:hover,
.nav a:focus-visible { color: var(--text); background: color-mix(in oklab, var(--border), transparent 70%); }

/* Mobile nav */
.nav-toggle{ 
  display:none; 
}
.hamburger{ 
display: none;
width: 46px;
height: 46px;
border-radius: .8rem; 
border: 1px solid var(--border); 
align-items: center; 
justify-content: center;
cursor: pointer;
 }
.hamburger span{ 
  width: 20px; height: 2px;
   background: var(--text);
    position: relative; display: block;
   }
.hamburger span::before, .hamburger span::after{
  content:""; position: absolute; left:0; width:20px; height:2px; background: var(--text);
}
.hamburger span::before{ top: -6px; }
.hamburger span::after{ top: 6px; }

@media (max-width: 860px){
  .hamburger{ display: inline-flex; grid-column: 3; }
  .nav{
    position: fixed;
     inset: 64px 0 auto 0;
      background: var(--bg-elev);
    border-bottom: 1px solid var(--border); 
    padding: .8rem; gap: .4rem; 
    flex-direction: column;
    transform: translateY(-120%);
     transition: transform .25s ease;
  }
  .nav .btn{ width: 100%; text-align: center; }
  .nav-toggle:checked ~ .nav{ transform: translateY(0); }
}

.contact-link {
  color: white;
  
}

/* Hero */
.hero{
   padding-top: 10.5rem; 
   margin-bottom: 10.2em;
}
.hero__grid{
   display: flex; gap: clamp(1rem, 4vw, 3rem);
   grid-template-columns: 1.15fr .85fr;
    align-items: center; 
  }
.hero__cta{
   display: center;
   gap: .8rem;
   flex-wrap: wrap; 
   margin-top: 1rem;
   }
.social{ 
  display: space-between; 
  gap: .6rem; margin-top: 1rem;
 }
.social a{
  display: inline-grid;
  place-items: center; 
  width: 42px; height: 42px; 
  border-radius: .8rem;
  color: var(--text); border: 1px solid var(--border); background: color-mix(in oklab, var(--bg-elev) 60%, transparent);
  transition: transform .12s ease, background .2s ease;
}
.hero h2{
   flex: 1;
   white-space: normal;
}
.social a:hover,
.social a:focus-visible { 
  transform: translateY(-2px); 
  background: color-mix(in oklab, var(--brand-1) 16%, transparent);
 }

.hero__art{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius); 
  overflow: hidden; 
  box-shadow: var(--shadow);
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
}
#services{
  margin-top: 5em;
  background-color: #fbfcff;
}
/* Cards */
.section__title{
  margin-bottom: 2.3rem;
  text-align: center;
  color: var(--bg-elev);
}
.grid.cards{
  margin-top: 50px;
}

.cards{ 
  grid-template-columns: repeat(3, 1fr); 
}

@media (max-width: 1000px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background: #000; /* أسود */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;

}
.card:hover,
.card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); }
.card::after{
  content:"";
  position:absolute;
  inset: -30% -30% auto auto;
  width: 90%;
  height: 60%;
  background: radial-gradient(closest-side, color-mix(in oklab, #fff 20%, transparent), transparent 70%);
  transform: rotate(18deg); opacity: .06; pointer-events: none;
}
.card__icon{
   width: 60px;
   height: 48px;
   border-radius: .9rem;
   display: grid; 
   place-items: center;
   background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff;
   margin-bottom: .9rem;
}

/* Footer */
.site-footer{ 
  border-top: 1px solid var(--border);
  background: var(--bg-elev); }
.footer__row{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:1rem; 
  padding: 1.2rem 0;
  flex-wrap: wrap; }

/* A11y */
#contact h2{
  color: #fff;
  position: relative;
  left: 7.6em;
}

.contact-quick{
  position: relative;
  left: 22.4em;
  font-size: 1.1em;
}

#daddy{
  position: relative;
  top: 15px;
}

.skip-link{
  position: absolute; 
  inset-inline-start: .5rem; 
  inset-block-start: -40px;
  background: var(--bg-elev); 
  color: var(--text); padding: .6rem .9rem;
  border-radius: .6rem; box-shadow: var(--shadow-soft);
}
.skip-link:focus{ inset-block-start: .5rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* Tablets (portrait and landscape) */
@media (max-width: 1024px) {
  .site-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero__grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-quick {
    left: 0;
    text-align: center;
  }

  #contact h2 {
    left: 0;
    text-align: center;
  }

  .footer__row {
    justify-content: center;
    text-align: center;
  }
}

/* Phones */
@media (max-width: 600px) {
  .section {
    padding: 2rem 1rem;
  }

  .hero {
    padding-top: 6rem;
    margin-bottom: 4rem;
  }

  .hero h1,
  .hero h2 {
    text-align: center;
  }

  .hero__cta,
  .social {
    justify-content: center;
  }

  .footer__row {
    flex-direction: column;
    align-items: center;
  }

  .card {
    padding: 1rem;
  }

  .section__title {
    font-size: 1.5rem;
    text-align: center;
  }

  .nav a {
    font-size: 1rem;
    padding: .6rem .9rem;
  }

  .contact-quick {
    font-size: 1rem;
  }
}