:root{
  --ink:#0E1B2C;
  --ink-soft:#44526A;
  --line:#E6EAF0;
  --bg:#FFFFFF;
  --bg-tint:#F6F8FA;
  --accent:#0E7C7B;
  --accent-dark:#0A5F5E;
  --accent-soft:#E4F2F1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Arabic',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ===== شبكة v1 ===== */
.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  position:relative;
}
.grid-bg::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 20%, transparent 30%, var(--bg) 85%);
  pointer-events:none;
}

/* ===== أزرار pill من Square بألوان v1 ===== */
.btn{
  display:inline-block;
  background:var(--ink);color:#fff;
  padding:14px 32px;border-radius:99px;
  text-decoration:none;font-size:1rem;font-weight:600;
  transition:background .2s, transform .15s;
}
.btn:hover{background:var(--accent)}
.btn:active{transform:scale(.98)}
.btn-outline{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-outline:hover{background:var(--bg-tint)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--accent);color:#fff}

/* ===== الهيدر ===== */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;letter-spacing:.02em;text-decoration:none}
.logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500;
}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
  color:var(--ink-soft);text-decoration:none;
  font-size:.97rem;font-weight:500;transition:color .2s;
}
.nav-links a:hover{color:var(--accent)}
.nav-cta{padding:10px 24px;font-size:.95rem}

/* ===== الهيرو — تخطيط v1 + كتابة Square ===== */
.hero{padding:110px 0 95px;position:relative;overflow:hidden}
.hero-inner{position:relative;z-index:1;max-width:640px}
.hero h1{
  font-size:clamp(2.4rem,5vw,3.9rem);
  font-weight:700;line-height:1.3;
  margin-bottom:22px;letter-spacing:-.01em;
}
.hero .sub{
  color:var(--ink-soft);font-size:clamp(1.05rem,1.7vw,1.25rem);
  max-width:540px;margin-bottom:42px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* حروف KGMG — عنصر v1 المميز */
.hero-letters{
  position:absolute;inset-inline-end:-10px;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;line-height:.92;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(5rem,12vw,9.5rem);
  color:transparent;
  -webkit-text-stroke:1.5px var(--line);
  user-select:none;pointer-events:none;
}
.hero-letters span:nth-child(2){-webkit-text-stroke-color:var(--accent-soft)}

/* ===== شريط المجالات ===== */
.strip{border-block:1px solid var(--line);padding:22px 0}
.strip-track{
  display:flex;gap:56px;justify-content:center;flex-wrap:wrap;
  color:var(--ink-soft);font-size:.95rem;font-weight:500;
}
.strip-track span{white-space:nowrap}

/* ===== الأقسام ===== */
section{padding:100px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);background:var(--accent-soft);
  padding:6px 16px;border-radius:99px;
  font-size:.85rem;font-weight:600;margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
h2{
  font-size:clamp(1.8rem,3.5vw,2.7rem);
  font-weight:700;line-height:1.35;letter-spacing:-.01em;
}

/* ===== ماذا نبني — قائمة Square ===== */
.build{background:var(--bg-tint);border-block:1px solid var(--line)}
.build-head{max-width:640px;margin-bottom:64px}
.build-head p{color:var(--ink-soft);font-size:1.1rem;margin-top:14px}
.build-list{display:flex;flex-direction:column}
.build-item{
  display:grid;grid-template-columns:1fr 1.4fr auto;
  gap:32px;align-items:center;
  padding:34px 0;border-top:1px solid var(--line);
  text-decoration:none;
}
.build-item:last-child{border-bottom:1px solid var(--line)}
.build-item h3{font-size:1.35rem;font-weight:700;transition:color .2s}
.build-item:hover h3{color:var(--accent)}
.build-item p{color:var(--ink-soft);font-size:1rem}
.build-item .arrow{
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .2s, color .2s, border-color .2s;
}
.build-item:hover .arrow{background:var(--accent);color:#fff;border-color:var(--accent)}
.build-item .arrow svg{transform:scaleX(-1)}

/* ===== لماذا KGMG ===== */
.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:56px;
}
.why-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:40px 32px;transition:border-color .2s, transform .2s;
}
.why-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.why-card .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:2.2rem;font-weight:500;line-height:1;
  margin-bottom:18px;display:block;color:var(--accent);
}
.why-card h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.why-card p{color:var(--ink-soft);font-size:.98rem}

/* ===== كيف نعمل ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.step{padding-top:24px;border-top:2px solid var(--accent)}
.step .s-label{
  font-family:'IBM Plex Mono',monospace;
  color:var(--accent);font-size:.82rem;font-weight:500;
  display:block;margin-bottom:10px;
}
.step h3{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.step p{color:var(--ink-soft);font-size:.95rem}

/* ===== CTA الغامق من v1 ===== */
.final{padding:0 0 110px}
.final-box{
  background:var(--ink);color:#fff;border-radius:24px;
  padding:72px 48px;text-align:center;
  position:relative;overflow:hidden;
}
.final-box::before{
  content:"KGMG";
  position:absolute;inset-inline-start:24px;bottom:-30px;
  font-family:'IBM Plex Mono',monospace;font-size:8rem;font-weight:500;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
}
.final-box h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px}
.final-box p{color:#B9C2D0;max-width:480px;margin:0 auto 40px;font-size:1.1rem}

/* ===== الفوتر ===== */
footer{border-top:1px solid var(--line);padding:44px 0}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
}
.footer-links{display:flex;gap:28px;list-style:none}
.footer-links a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
.footer-links a:hover{color:var(--accent)}
footer .copy{color:var(--ink-soft);font-size:.9rem}

/* ===== حركة ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== موبايل ===== */
@media (max-width:880px){
  .nav-links{display:none}
  .hero{padding:75px 0 65px}
  .hero-letters{display:none}
  section{padding:70px 0}
  .build-item{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .build-item .arrow{display:none}
  .why-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:32px 20px}
  .final-box{padding:52px 26px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
}