/* SAKK V4 - النسخة المعتمدة النهائية - كل الألوان هنا تعدلها بحركة واحدة */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
:root {
  --burgundy: #5E1728;
  --burgundy-light: #8B1E3A;
  --burgundy-gradient-dark: #3D0F1B;
  --burgundy-soft: #FCE8EC;
  --bg-light: #F6F8FF;
  --text-dark: #111827;
  --muted: #6B7280;
  --pink-soft: #F4C2C2;
}
* { font-family: 'Cairo', system-ui, sans-serif; box-sizing: border-box; }
html { scroll-behavior: smooth; } body { margin: 0; background: #fff; color: var(--text-dark); overflow-x: hidden; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid #f3f4f6; }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--burgundy); display: grid; place-items: center; position: relative; }
.logo-icon::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); }
.logo-title { display: flex; gap: 6px; font-weight: 900; font-size: 18px; }
.logo-sub { font-size: 9px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.nav { display: none; gap: 32px; font-size: 14px; font-weight: 600; } .nav a { text-decoration: none; color: var(--muted); position: relative; padding-bottom: 4px; } .nav a.active { color: var(--burgundy); } .nav a.active::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 2.5px; background: var(--burgundy); border-radius: 99px; }
@media(min-width:1024px){ .nav{ display:flex; } }
.btn-primary { height: 36px; padding: 0 20px; border-radius: 999px; background: var(--burgundy); color: white; font-size: 13px; font-weight: 700; border: none; cursor: pointer; }
.hero { background: linear-gradient(105deg, #3A0D18 0%, var(--burgundy) 40%, #8B1E2E 100%); color: white; }
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 56px 20px; display: grid; gap: 40px; align-items: center; }
@media(min-width:1024px){ .hero-inner{ grid-template-columns: 1.05fr 0.95fr; padding: 84px 32px; } }
.badge { display: inline-flex; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.2); font-size: 12px; margin-bottom: 24px; }
.hero h1 { font-size: 42px; line-height: 1.05; font-weight: 900; margin: 0; } @media(min-width:1024px){ .hero h1{ font-size: 64px; } } .hero h1 span.light { color: var(--pink-soft); display: block; }
.hero p { margin-top: 20px; color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.8; max-width: 480px; }
.hero-btns { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-white { height: 46px; padding: 0 28px; border-radius: 999px; background: white; color: var(--burgundy); font-weight: 700; border: none; }
.btn-ghost { height: 46px; padding: 0 28px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: white; }
.hero-stats { margin-top: 36px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.logo-big-card { width: 260px; height: 260px; background: white; border-radius: 42px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); display: grid; place-items: center; transform: rotate(-3deg); margin: auto; }
.logo-big-inner { width: 82%; height: 82%; border-radius: 999px; border: 2px solid rgba(94,23,40,0.15); display: grid; place-items: center; position: relative; }
.logo-circle { width: 92px; height: 92px; border-radius: 999px; background: var(--burgundy); display: grid; place-items: center; color: white; font-size: 28px; }
.features { background: var(--bg-light); padding: 64px 0; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } @media(min-width:1024px){ .container{ padding: 0 32px; } }
.section-head { text-align: center; max-width: 640px; margin: 0 auto; } .section-head h2 { font-size: 28px; font-weight: 900; margin: 0; }
.cards { margin-top: 40px; display: grid; gap: 20px; } @media(min-width:768px){ .cards{ grid-template-columns: 1fr 1fr; } } @media(min-width:1024px){ .cards{ grid-template-columns: repeat(4,1fr); } }
.card { border-radius: 20px; padding: 22px; min-height: 268px; display: flex; flex-direction: column; }
.card-dark { background: linear-gradient(165deg, var(--burgundy-gradient-dark) 0%, var(--burgundy) 55%, var(--burgundy-light) 100%); color: white; }
.card-light { background: white; border: 1px solid #f3f4f6; box-shadow: 0 8px 24px rgba(17,24,39,0.06); }
.how { padding: 64px 0; background: white; } .how-grid { display: grid; gap: 48px; } @media(min-width:1024px){ .how-grid{ grid-template-columns: 1.05fr 0.9fr; gap: 80px; } }
.step { display: flex; gap: 16px; margin-bottom: 28px; } .step-num { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; flex-shrink: 0; border: 2px solid; } .step-num.active { background: var(--burgundy); color: white; border-color: var(--burgundy); } .step-num.idle { background: white; color: var(--muted); border-color: #e5e7eb; }
.form-card { border-radius: 22px; border: 1px solid #f3f4f6; box-shadow: 0 20px 60px rgba(17,24,39,0.10); padding: 24px; } .input { margin-top: 8px; width: 100%; height: 44px; border-radius: 12px; border: 1px solid #e5e7eb; background: #FBFCFF; padding: 0 16px; font-size: 13px; } .btn-full { width: 100%; height: 42px; border-radius: 12px; border: none; font-weight: 700; margin-top: 12px; cursor: pointer; } .btn-burgundy { background: var(--burgundy); color: white; } .btn-pink { background: #FFF0F3; border: 1px solid #FFE2E8; color: var(--burgundy); }
.about { background: linear-gradient(105deg, #3A0D18 0%, var(--burgundy) 45%, #7A1E31 100%); padding: 28px 0; color: white; }
.badges { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; } .badge-dark { padding: 0 14px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); font-size: 12px; display: inline-flex; align-items: center; }
footer { padding: 20px 0; border-top: 1px solid #f3f4f6; font-size: 12px; color: #6b7280; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; flex-direction: column; gap: 10px; align-items: center; } @media(min-width:768px){ .footer-inner{ flex-direction: row; } }
.lang-switch{display:flex; background:#F3F3F3; border-radius:20px; padding:3px; gap:2px;}
.lang-btn{border:none; background:transparent; padding:6px 12px; border-radius:16px; font-size:13px; font-weight:600; cursor:pointer;}
.lang-btn.active{background:white; color:#5E1728; box-shadow:0 1px 4px rgba(0,0,0,0.1);}


/* ===== إصلاح جوال احترافي - يحافظ على التصميم الأصلي ===== */
@media (max-width: 1023px) {
  /* الهيدر - إظهار القائمة بدل إخفائها */
  .header-inner{height:auto!important;min-height:64px;padding:10px 14px!important;gap:10px;flex-wrap:wrap}
  .nav{display:flex!important;gap:14px!important;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;order:3;padding-bottom:4px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:12.5px!important;flex-shrink:0}
  
  /* الهيرو */
  .hero-inner{grid-template-columns:1fr!important;padding:36px 18px 28px!important;gap:18px!important;text-align:center}
  .hero h1{font-size:28px!important;line-height:1.3!important}
  .hero h1 span.light{display:inline!important}
  .hero p{margin-left:auto!important;margin-right:auto!important;max-width:100%!important}
  .hero-btns{justify-content:center!important}
  .hero-stats{justify-content:center!important;gap:12px!important;font-size:11px!important}
  .hero-inner > div:last-child img{max-width:260px!important;width:85%!important;height:auto!important;margin:0 auto!important}
  
  /* ما هو صك - إصلاح التكدس والخروج من الإطار */
  .about{padding:0!important}
  .about > div[style]{flex-direction:column!important;gap:24px!important;padding:36px 18px!important;direction:rtl!important;align-items:center!important}
  .about > div[style] > div{flex:none!important;width:100%!important;max-width:100%!important}
  .about img{max-width:220px!important;width:70%!important;height:auto!important;margin:0 auto!important}
  .about h2{text-align:center!important;font-size:24px!important}
  .about p{max-width:100%!important;text-align:center!important;font-size:14px!important;line-height:1.9!important}
  .about p br{display:none}
  .badges{justify-content:center!important}
  
  /* باقي الأقسام */
  .cards{grid-template-columns:1fr!important}
  .how-grid{grid-template-columns:1fr!important;gap:32px!important}
  .form-card{padding:18px!important}
  
  /* الفوتر - منع خروج info@sakk.io */
  footer > div > div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:24px!important;text-align:right!important}
  footer a, footer span{word-break:break-all!important;overflow-wrap:anywhere!important;direction:ltr!important;display:block!important;text-align:right!important}
  .footer-inner{flex-direction:column!important;align-items:flex-start!important}
}

@media (max-width: 768px) {
  #verify div[style*="display:flex"], #verify div[style*="flex:1"]{flex-direction:column!important}
  #verify input{min-width:0!important;width:100%!important}
  #pricing div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #pricing div[style*="transform:scale"]{transform:none!important}
  #tawtheeq div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #features div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
}
footer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-top: 1px solid #D4A24A !important;
}
/* تكبير شعار الهيدر */
header img[src*="sakk_logo_red"] {
  height: 65px !important;
  width: auto !important;
}
/* تكبير شعار النص */
.hero img[src*="sakk_logo_cutout"] {
  max-width: 1000px !important;
}
.header{position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:9999 !important; background:#fff !important;}
body{padding-top:75px !important;}