/* =======================
   EPIC TECH — Tech × Tatreez
   Palette: #070d24 (navy), #0575f9 (electric blue), #ffffff
   Font: ITCHandelGothicArabic-Bold (provide file), with clean fallbacks
==========================*/

@font-face{
  font-family: 'ITCHandelGothicArabic';
  src: url('assets/fonts/ITCHandelGothicArabic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#070d24;
  --card:#0b1232;
  --ink:#e8eeff;
  --muted:#a7b6e6;
  --primary:#0575f9;
  --primary-2:#0a58d1;
  --ring: rgba(5,117,249,.35);
  --radius: 16px;
  --max: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'ITCHandelGothicArabic', 'Tajawal', 'Cairo', 'Rubik', 'Orbitron', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

[dir="ltr"] body{
  font-family: 'ITCHandelGothicArabic', 'Orbitron', 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 24px}
.section{padding:84px 0;position:relative}
.section-head{margin-bottom:28px}
.section-head h2{font-size: clamp(24px, 4vw, 40px); margin:0 0 8px}
.section-head .muted{color:var(--muted);margin:0}

.skip{position:absolute;left:-9999px;top:-9999px}
.skip:focus{left:16px;top:16px;background:#000;padding:8px 12px;border-radius:8px}

/* ===== HEADER & NAVIGATION ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, rgba(7,13,36,.95), rgba(7,13,36,.70));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #0f1a45;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.5px}
.logo{width: 100%;height: 50px;object-fit:contain;filter: drop-shadow(0 0 20px rgba(5,117,249,.35));}
.main-nav{display:flex;gap:24px}
.main-nav a{opacity:.9}
.main-nav a:hover{opacity:1}
.actions{display:flex;align-items:center;gap:12px}
.chip{
  background:#0e173e;border:1px solid #1a2a68;color:#cfe1ff;
  height:36px;padding:0 12px;border-radius:999px;cursor:pointer
}
.btn{
  height:40px;padding:0 16px;border-radius:12px;border:1px solid #20408b;background:#0d153a;color:#cfe1ff;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;font-weight:700
}
.btn:hover{border-color:#315cd1}
.btn-outline{background:transparent}
.btn-glow{background: linear-gradient(90deg, var(--primary), var(--primary-2)); color:white; border-color:transparent; box-shadow:0 0 0 0 rgba(5,117,249,.6); animation: pulse 3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,117,249,.5)}70%{box-shadow:0 0 0 16px rgba(5,117,249,0)}100%{box-shadow:0 0 0 0 rgba(5,117,249,0)}}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
}

.mobile-menu-btn span {
  width: 24px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover span {
  background: var(--primary);
}

/* Hide desktop CTA on mobile */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-menu-btn { display: flex; }
  .main-nav { display: none; }
}

/* Mobile Glass Sidebar */
.mobile-sidebar {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-sidebar.active {
  display: block;
  opacity: 1;
}

.mobile-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 18, 0.6);
  backdrop-filter: blur(8px);
}

.mobile-sidebar__panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: min(320px, 85vw);
  height: 100vh;
  background: rgba(10, 19, 53, 0.95);
  border-inline-start: 1px solid #18306d;
  backdrop-filter: blur(12px);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

[dir="rtl"] .mobile-sidebar__panel {
  transform: translateX(-100%);
}

.mobile-sidebar.active .mobile-sidebar__panel {
  transform: translateX(0);
}

.mobile-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #18306d;
}

.mobile-sidebar__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.mobile-sidebar__close {
  width: 36px;
  height: 36px;
  border: 1px solid #25418c;
  background: #0b1230;
  color: var(--ink);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-link {
  padding: 12px 16px;
  background: rgba(14, 23, 65, 0.6);
  border: 1px solid #17316e;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.mobile-nav-link:hover {
  background: rgba(47, 89, 199, 0.2);
  border-color: #2f59c7;
}

.mobile-cta {
  margin-top: 16px !important;
  justify-self: center;
}

/* ===== HERO SECTION ===== */
.hero{
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background: radial-gradient(1200px 480px at 15% 15%, rgb(0 0 0), #00000000 60%), radial-gradient(900px 400px at 85% 20%, rgba(5, 117, 249, .10), #00000036 60%), url(assets/img/bg-hero.png);
  background-size:cover;
  background-position:center;
  filter: saturate(1.05);
  opacity:.9;
}

.hero-copy h1{font-size: clamp(28px, 6vw, 56px);line-height:1.15;margin:0 0 12px}
.hero-copy .lead{color:var(--muted);margin:0 0 20px;max-width:62ch}
.hero-ctas{display:flex;gap:12px}
.accent{color: #ffd700; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));}

.hero-art{
  min-height:360px; position:relative;
}
.tatreez-cluster, .tech-lines{
  position:absolute;inset:0;border-radius:24px;
}
.tatreez-cluster{
  background:
    url('assets/img/tatreez-2.png') center/cover no-repeat,
    url('assets/img/tatreez-1.png') center/cover no-repeat;
  opacity:.25;
  mix-blend-mode:screen;
  border:1px solid #1b2c6b;
  box-shadow: inset 0 0 60px rgba(5,117,249,.08);
}
.tech-lines{
  background: url('assets/img/tech-lines.png') center/cover no-repeat;
  opacity:.35;
  filter: saturate(1.2);
}

/* ===== ABOUT SECTION ===== */
.about-wrap{
  position:relative;border-radius:var(--radius);
  background:linear-gradient(180deg,#0b1232,#0a1335);
  border:1px solid #172864;
  padding:28px;
}
.about-wrap::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background: radial-gradient(600px 260px at 10% 10%, rgba(5,117,249,.12), transparent 60%),
              radial-gradient(600px 260px at 90% 90%, rgba(5,117,249,.10), transparent 60%),
              url('assets/img/tatreez-3.png');
  background-size: auto, auto, 520px;
  background-repeat: no-repeat;
  background-position: center;
  opacity:.18;pointer-events:none
}
.about-text{margin:0}

/* ===== SERVICES SECTION ===== */
.card{
  background:linear-gradient(180deg,#0e1741,#0a1335);
  border:1px solid #18306d;border-radius:16px;padding:18px;
  transition: transform .2s ease, border-color .2s ease;
  position:relative;overflow:hidden
}
.card:hover{transform: translateY(-4px);border-color:#2a54c6}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted)}
/* Service card icons styling */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5, 117, 249, 0.1), rgba(5, 117, 249, 0.05));
  border: 1px solid rgba(5, 117, 249, 0.2);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.card-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
  transition: all 0.3s ease;
}

/* Card hover effects for icons */
.card:hover .card-icon {
  background: linear-gradient(135deg, rgba(5, 117, 249, 0.2), rgba(5, 117, 249, 0.1));
  border-color: rgba(5, 117, 249, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 117, 249, 0.15);
}

.card:hover .card-icon svg {
  color: #ffffff;
  transform: scale(1.1);
}

/* Animation for icon reveal */
.card.reveal .card-icon {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.1s;
}

.card.reveal.visible .card-icon {
  opacity: 1;
  transform: translateY(0);
}

/* Special styling for the AI card (span2) */
.card--span2 .card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.card--span2 .card-icon svg {
  width: 28px;
  height: 28px;
}

/* RTL support for icons */
[dir="rtl"] .card-icon {
  transform: scaleX(-1);
}

[dir="rtl"] .card-icon svg {
  transform: scaleX(-1);
}

[dir="rtl"] .card:hover .card-icon svg {
  transform: scaleX(-1) scale(1.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }
  
  .card-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .card--span2 .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }
  
  .card--span2 .card-icon svg {
    width: 24px;
    height: 24px;
  }
}
/* ===== FORMS & INPUTS ===== */
.contact .form{
  backdrop-filter: blur(4px);
}
.form{background:#0e1741;border:1px solid #193272;border-radius:18px;padding:18px}

/* Custom Select (Glass) */
.cs-wrap{ position:relative; }

.cs-native{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
}

.cs-display{
  width:100%; height:44px;
  border-radius:12px;
  background: rgba(15, 23, 65, .55);
  border:1px solid #17316e;
  backdrop-filter: blur(10px);
  color:#e7eeff; text-align:start;
  padding:0 42px 0 12px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
[dir="ltr"] .cs-display{ padding:0 12px 0 42px; }

.cs-display:focus{ border-color:#2f59c7; box-shadow:0 0 0 3px var(--ring, rgba(5,117,249,.35)); }
.cs-display::after{
  content:""; width:16px; height:16px; flex:0 0 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cfe1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center/16px;
  opacity:.9;
}
.cs-menu{
  position:absolute; z-index:60;
  inset-inline:0; top: calc(100% + 8px);          
  max-height:260px; overflow:auto;
  border-radius:12px;
  background: rgba(10,19,53,.75);
  border:1px solid #18306d;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding:6px; display:none;
  animation: csPop .12s ease-out both;
}
@keyframes csPop{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

.cs-wrap.open .cs-menu{ display:block; }

.cs-option{
  list-style:none; border-radius:8px;
  padding:10px 12px; color:#e7eeff; cursor:pointer; white-space:nowrap;
}
.cs-option[aria-selected="true"]{ background:rgba(47,89,199,.25); }
.cs-option:hover, .cs-option:focus{ background:#123263; outline:none; }

.form, .section{ overflow:visible; }
label{display:flex;flex-direction:column;gap:6px}
input, select, textarea{
  background:#0a1335;color:#e7eeff;border:1px solid #1a2f6f;border-radius:12px;
  height:44px;padding:0 12px;outline:none;transition:border-color .2s, box-shadow .2s
}
textarea{height:auto;padding:12px}
input:focus, select:focus, textarea:focus{border-color:#2f59c7;box-shadow:0 0 0 3px var(--ring)}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.form-state{color:var(--muted);margin:0}
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;margin-top: 15px;}
.social{background:#0b1230;border:1px solid #17316e;border-radius:999px;padding:8px 12px;color:#cfe1ff;margin-top: 15px;}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid #0f1a45;padding:20px 0;margin-top:40px;
  background-position: center;
  background: radial-gradient(600px 260px at 10% 10%, rgb(0 0 0 / 68%), transparent 60%), radial-gradient(600px 260px at 90% 90%, rgb(0 0 0 / 39%), #0000001a 60%), url(assets/img/tatreez-3.png);
  position: relative;
  overflow: hidden;
}
.foot{display:flex;align-items:center;justify-content:space-between;color:#9cb1ec}
.foot a{opacity:.85}
.foot a:hover{opacity:1}

.reveal{opacity:0; transform: translateY(16px); transition: all .6s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

/* ===== WORK SECTION — Categories, Grid, Modal (Glass) ===== */
.work-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.work-cats .chip{
  height:36px; padding:0 14px; border-radius:999px;
  background:#0e173e; border:1px solid #1a2a68; color:#cfe1ff; cursor:pointer
}
.work-cats .chip.active{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-color:transparent; color:#fff }

.work-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}

.wcard{
  display:flex; flex-direction:column; gap:10px;
  background:#0c1437; border:1px solid #1b2f73; border-radius:14px; padding:12px; min-height:300px;
}
.wcard .thumb{
  height:160px; border-radius:10px; border:1px solid #1b2f73;
  background-size:cover; background-position:center;
}
.wcard .meta{ 
  display:flex; flex-direction:column; gap:6px; min-height: 64px;
}
.wcard .title{ 
  font-weight:700; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wcard .tag{ font-size:12px; color:#9cb1ec; opacity:.9 }
.wcard .actions{ display:flex; gap:8px; margin-top:auto; }
.btn-sm{ height:34px; padding:0 12px; border-radius:10px; font-weight:700; }
.work-more{ display:flex; justify-content:center; margin-top:14px }

.work-modal{
  position:fixed; inset:0; display:none; z-index:80;
}
.work-modal.open{ display:block }
.work-modal__backdrop{
  position:absolute; inset:0;
  backdrop-filter: blur(10px);
  background: radial-gradient(800px 400px at 20% 10%, rgba(5,117,249,.10), transparent 60%),
              rgba(3,6,18,.65);
}
.work-modal__card{
  position:relative;
  width:min(980px, calc(100% - 24px));
  margin:40px auto;
  background: rgba(10,19,53,.7);
  border:1px solid #18306d; border-radius:18px; backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding:18px;
}
.work-modal__close{
  position:absolute; inset-inline-end:10px; top:8px;
  width:36px; height:36px; border-radius:999px; border:1px solid #25418c;
  background:#0b1230; color:#cfe1ff; cursor:pointer; font-size:20px;
}
.work-modal__header{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.work-modal__title{ margin:0; font-size: clamp(18px, 2.5vw, 22px) }
.work-modal__tag{ color:#9cb1ec; font-size:12px }
.work-modal__desc{ color:var(--muted); margin:8px 0 12px }

.work-modal__viewer{ position:relative; border-radius:12px; overflow:hidden; border:1px solid #1b2f73 }
.work-modal__image{ display:block; width:100%; max-height:60vh; object-fit:cover; }
.work-modal__viewer .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid #25418c;
  background:#0b1230; color:#cfe1ff; cursor:pointer; font-size:24px;
}
.work-modal__viewer .prev{ inset-inline-start:8px }
.work-modal__viewer .next{ inset-inline-end:8px }

.work-modal__thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.work-modal__thumbs img{
  width:72px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:1px solid #1b2f73; opacity:.85
}
.work-modal__thumbs img.active{ outline:2px solid var(--primary); opacity:1 }

/* صور افتراضية باستخدام أصولك */
.thumb.t1{ background:
  radial-gradient(220px 120px at 25% 20%, rgba(5,117,249,.25), transparent 55%),
  url('assets/img/tatreez-1.png') center/cover no-repeat; }
.thumb.t2{ background:
  radial-gradient(220px 120px at 25% 20%, rgba(5,117,249,.25), transparent 55%),
  url('assets/img/tech-lines.png') center/cover no-repeat; }
.thumb.t3{ background:
  radial-gradient(220px 120px at 25% 20%, rgba(5,117,249,.25), transparent 55%),
  url('assets/img/tatreez-2.png') center/cover no-repeat; }
.thumb.t4{ background:
  radial-gradient(220px 120px at 25% 20%, rgba(5,117,249,.25), transparent 55%),
  url('assets/img/bg-hero.png') center/cover no-repeat; }

/* ===== SOCIAL MEDIA PACKAGES ===== */
.plans-toggle{
  display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:16px;
}
.plans-toggle .label{ color:#cfe1ff; opacity:.9 }
.plans-toggle .save{ margin-inline-start:8px; background:#113072; border:1px solid #234fb8; color:#cfe1ff }

.switch{ position:relative; width:54px; height:28px; display:inline-block }
.switch input{ display:none }
.switch .slider{
  position:absolute; inset:0; background:#0e173e; border:1px solid #1a2a68; border-radius:999px;
}
.switch .slider::before{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(90deg,var(--primary),var(--primary-2)); top:2px; inset-inline-start:2px; transition:transform .2s ease;
  box-shadow:0 4px 16px rgba(5,117,249,.35);
}
.switch input:checked + .slider::before{ transform: translateX(26px) }
[dir="rtl"] .switch input:checked + .slider::before{ transform: translateX(-26px) }

.plans-grid{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
}

.plan-card{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  background: linear-gradient(180deg,#0e1741,#0a1335);
  border:1px solid #193272; border-radius:18px; padding:18px;
  min-height: 440px;
}
.plan-card .badge{
  position:absolute; inset-inline:0; top:-12px; width:max-content; margin-inline:auto;
  background:#123263; color:#d9e6ff; border:1px solid #224ea8; padding:4px 10px; border-radius:999px; font-size:12px;
}
.plan-card.highlight{ outline:1.5px solid #2a54c6; box-shadow:0 10px 40px rgba(5,117,249,.12) }

.plan-card .plan-name{ margin:16px 0 0; font-size: clamp(18px,2.2vw,22px); min-height: 28px }

.price{ display:flex; align-items:baseline; gap:6px }
.price .currency{ font-weight:700; opacity:.95 }
.price .amount{ font-size: clamp(28px, 4vw, 40px); font-weight:800 }
.price .period{ font-size:14px }

.features{
  margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
}
.features li{
  position:relative; padding-inline-start:22px; color:#d2defc;
}
[dir="ltr"] .features li{ padding-inline-start:0; padding-inline-end:22px; }
.features li::before{
  content:""; position:absolute; inset-inline-start:0; top:6px; width:14px; height:14px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 32%, transparent 33% 100%),
    linear-gradient(90deg,var(--primary),var(--primary-2));
  border:1px solid #234fb8;
}
[dir="ltr"] .features li::before{ inset-inline-end:0; inset-inline-start:auto; }

.plan-card .actions{ margin-top:auto; display:flex; justify-content:flex-start }
.plan-card .actions .btn{ min-width:140px }

.plan__ribbon {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 24px;
    opacity: .7;
    display:grid;
    place-items:center;
    border-radius:8px;
}

/* ===== CHECKOUT MODAL (Glass) ===== */
.checkout-modal{position:fixed;inset:0;z-index:90;display:none}
.checkout-modal.open{display:block}
.checkout__backdrop{position:absolute;inset:0;background:rgba(3,6,18,.62);backdrop-filter:blur(10px)}
.checkout__card{
  position:relative;width:min(980px,calc(100% - 24px));margin:40px auto;padding:18px;
  background:rgba(10,19,53,.75);border:1px solid #18306d;border-radius:18px;backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.checkout__close{
  position:absolute;inset-inline-end:10px;width:36px;height:36px;border-radius:999px;
  border:1px solid #25418c;background:#0b1230;color:#cfe1ff;cursor:pointer;font-size:20px
}

.checkout__header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px
}
.checkout__title{margin:0;font-size:clamp(18px,2.5vw,24px)}
.checkout__sub{color:#9cb1ec;font-size:14px}

.checkout__steps{display:flex;gap:8px;align-items:center;margin: auto;}
.checkout__steps .dot{
  padding:6px 12px;border-radius:999px;background:#0e173e;border:1px solid #1a2a68;
  color:#cfe1ff;font-size:12px;opacity:.85
}
.checkout__steps .dot.active{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;opacity:1
}

.checkout__body{margin-top:6px}
.co-step{display:none}
.co-step.active{display:block}

.co-grid{display:grid;grid-template-columns:1fr;gap:12px}
.co-grid .full{grid-column:1/-1}

.co-fieldset{
  background:#0e1741;border:1px solid #193272;border-radius:12px;padding:12px
}
.co-fieldset legend{padding:0 8px;color:#cfe1ff}

.co-chips{display:grid;flex-wrap:repeat(2, 1fr);gap:10px}
.co-chips label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0b1230;
  border: 1px solid #17316e;
  border-radius: 999px;
  padding: 8px 12px;
  color: #e7eeff;
  cursor: pointer;
  user-select: none;
  justify-content: flex-start;
  text-align: center;
}
.co-chips input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  border-radius: 4px;
  flex-shrink: 0;
}


.pay-group{display:grid;gap:10px;margin-top:6px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pay-legend{grid-column:1/-1;margin-bottom:2px;color:#cfe1ff}
.pay-opt{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
  background:#0e1741;border:1px solid #193272;cursor:pointer
}
.pay-opt input[type="radio"]{accent-color:var(--primary);width:16px;height:16px}
.pay-icon{font-size:18px}
.pay-text{color:#e7eeff}

.checkout__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
#coState{color:#9cb1ec;margin-top:6px}

.checkout__card input,
.checkout__card textarea{
  background:#0a1335;color:#e7eeff;border:1px solid #1a2f6f;border-radius:12px;
  height:44px;padding:0 12px;outline:none;transition:border-color .2s,box-shadow .2s
}
.checkout__card textarea{height:auto;padding:12px}
.checkout__card input:focus,
.checkout__card textarea:focus{border-color:#2f59c7;box-shadow:0 0 0 3px var(--ring,rgba(5,117,249,.35))}

/* ===== CHECKOUT MODAL MOBILE FIXES ===== */

.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.checkout-modal.open {
  display: block;
}

.checkout__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 18, 0.62);
  backdrop-filter: blur(10px);
}

.checkout__card {
  position: relative;
  width: min(980px, calc(100% - 24px));
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  padding: 18px;
  background: rgba(10, 19, 53, 0.75);
  border: 1px solid #18306d;
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  .checkout__card {
    width: calc(100% - 16px);
    max-height: calc(100vh - 20px);
    margin: 10px auto;
    padding: 16px;
    border-radius: 12px;
  }
  
  .checkout__header {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }
  
  .checkout__steps {
    justify-content: center;
    width: 100%;
  }
  
  .checkout__steps .dot {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .checkout__title {
    font-size: 18px;
    text-align: center;
  }
  
  .checkout__sub {
    text-align: center;
    font-size: 14px;
  }
}

/* Grid adjustments for mobile */
@media (max-width: 768px) {
  .co-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .co-chips {
    grid-template-columns: repeat(3, 1fr);
  }

  
  .co-chips label {
    width: auto;
    min-width: 120px;
    flex: 1;
    justify-content: center;
  }
}

/* Payment options mobile layout */
@media (max-width: 768px) {
  .pay-group {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .pay-opt {
    padding: 12px;
    text-align: center;
  }
  
  .pay-text {
    font-size: 14px;
  }
}

/* Actions buttons mobile */
@media (max-width: 768px) {
  .checkout__actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .checkout__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Close button mobile positioning */
@media (max-width: 768px) {
  .checkout__close {
    top: 12px;
    inset-inline-end: 12px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* Scrollbar styling */
.checkout__card::-webkit-scrollbar {
  width: 6px;
}

.checkout__card::-webkit-scrollbar-track {
  background: rgba(14, 23, 65, 0.3);
  border-radius: 3px;
}

.checkout__card::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.checkout__card::-webkit-scrollbar-thumb:hover {
  background: var(--primary-2);
}

/* Ensure content doesn't overflow */
.checkout__body {
  overflow-x: hidden;
}

/* Form inputs mobile adjustments */
@media (max-width: 768px) {
  .checkout__card input,
  .checkout__card textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    height: 48px;
  }
  
  .checkout__card textarea {
    height: auto;
    min-height: 80px;
  }
}

/* Platform chips responsive */
@media (max-width: 480px) {
  .co-chips {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .co-chips label {
    padding: 10px 8px;
    font-size: 14px;
  }

}

/* Fieldset mobile styling */
@media (max-width: 768px) {
  .co-fieldset {
    padding: 16px;
  }
  
  .co-fieldset legend {
    font-size: 14px;
    padding: 0 12px;
  }
}

/* Additional mobile viewport fixes */
@media (max-width: 480px) {
  .checkout__card {
    width: calc(100% - 8px);
    margin: 5px auto;
    padding: 12px;
    max-height: calc(100vh - 10px);
  }
  
  .checkout__header {
    margin-bottom: 16px;
  }
  
  .checkout__title {
    font-size: 16px;
  }
  
  .checkout__sub {
    font-size: 13px;
  }
}
/* ===== TECHNOLOGICAL ANIMATIONS ===== */

/* Floating particles animation */
@keyframes float-particles {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 0.7; }
}

/* Circuit line animation */
@keyframes circuit-flow {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}

/* Glitch effect for tech elements */
@keyframes glitch {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-2px); }
}

/* Data stream animation */
@keyframes data-stream {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-20px) scale(0); opacity: 0; }
}

/* Hologram effect */
@keyframes hologram {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(5, 117, 249, 0.3),
      inset 0 0 20px rgba(5, 117, 249, 0.1);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(5, 117, 249, 0.6),
      inset 0 0 30px rgba(5, 117, 249, 0.2);
  }
}

/* Matrix rain effect */
@keyframes matrix-rain {
  0% { transform: translateY(-100px); opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Apply animations */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: var(--primary);
  border-radius: 50%;
  animation: circuit-flow 8s linear infinite;
  z-index: 1;
}

body::after {
  content: "";
  position: fixed;
  top: 50%;
  right: 0;
  width: 1px;
  height: 1px;
  background: rgba(5, 117, 249, 0.6);
  border-radius: 50%;
  animation: circuit-flow 12s linear infinite reverse;
  animation-delay: -4s;
  z-index: 1;
}

/* Tech particles floating */
.hero::before {
  content: "⬢ ◆ ✦";
  position: absolute;
  top: 20%;
  left: 10%;
  color: rgba(5, 117, 249, 0.4);
  font-size: 24px;
  letter-spacing: 40px;
  animation: float-particles 6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.hero::after {
  content: "◇ ⬟ ✧";
  position: absolute;
  bottom: 20%;
  right: 15%;
  color: rgba(5, 117, 249, 0.3);
  font-size: 18px;
  letter-spacing: 30px;
  animation: float-particles 8s ease-in-out infinite;
  animation-delay: -2s;
  z-index: 2;
  pointer-events: none;
}

/* Card hover tech effect */
.card:hover {
  animation: hologram 2s ease-in-out infinite;
}

/* Service cards with data stream effect */
.service-grid .card:nth-child(odd)::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 2px;
  height: 2px;
  background: var(--primary);
  border-radius: 50%;
  animation: data-stream 4s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.5s);
}

/* Glitch effect on accent text */
.accent {
  position: relative;
  animation: glitch 3s ease-in-out infinite;
  animation-delay: 3s;
}

/* Matrix rain on footer */
.site-footer::before {
  content: "01 10 11 00 01 11 10 00 01 10";
  position: absolute;
  top: 0;
  left: 20%;
  color: rgba(5, 117, 249, 0.2);
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 8px;
  animation: matrix-rain 10s linear infinite;
  pointer-events: none;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */

/* Hero responsive fixes */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
  }
}

/* Navigation responsive */
@media (max-width: 768px) {
  .nav-row {
    padding: 0 16px;
  }
  
  .container {
    padding: 0 16px;
  }
  
  .section {
    padding: 48px 0;
  }
}

/* Service grid responsive improvements */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* عمودين على الموبايل */
  gap: 14px;
}

@media (min-width: 480px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card span adjustments */
.card--span2 {
  grid-column: span 2;
}


@media (min-width: 480px) {
  .card--span2 {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .card--span2 {
    grid-column: span 2;
  }
}

/* Work grid responsive */
/* Work grid - slider on mobile */
@media (max-width: 767px) {
  .work-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 16px 16px 16px;
    margin: 0 -16px;
    -webkit-overflow-scrolling: touch;
  }
  
  .work-grid::-webkit-scrollbar {
    height: 4px;
  }
  
  .work-grid::-webkit-scrollbar-track {
    background: rgba(14, 23, 65, 0.3);
    border-radius: 2px;
  }
  
  .work-grid::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
  }
  
  .wcard {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  
  /* إخفاء زر عرض المزيد في الموبايل */
  .work-more {
    display: none;
  }
}


/* Desktop and tablet - keep grid layout */
@media (min-width: 768px) {
  .work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .work-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .work-section {
    position: relative;
  }
  
  .work-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }
  
  .work-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #25418c;
    background: #0b1230;
    color: var(--ink);
    cursor: pointer;
  }
}

/* Plans grid responsive */
@media (min-width: 900px) { 
  .plans-grid { 
    grid-template-columns: repeat(3, 1fr); 
  } 
}

@media (max-width: 767px) {
  .plans-grid {
    gap: 24px;
  }
  
  .plan-card {
    margin: 0 auto;
    max-width: 400px;
    width: 85%;
  }
}

/* Work categories responsive */
.work-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  justify-content: center;
}

@media (min-width: 768px) {
  .work-cats {
    justify-content: flex-start;
  }
}

/* Form responsive improvements */
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
.grid-2 .full{grid-column:1/-1}
@media (min-width: 720px){.grid-2{grid-template-columns:1fr 1fr}}

@media (min-width: 760px){.co-grid{grid-template-columns:1fr 1fr}}

@media (max-width: 767px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .hero-ctas .btn {
    text-align: center;
  }
}

/* Footer responsive */
@media (max-width: 767px) {
  .foot {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
}

/* Social row responsive */
@media (max-width: 767px) {
  .social-row {
    justify-content: center;
  }
}

/* Modal responsive */
@media (max-width: 767px) {
  .work-modal__card,
  .checkout__card {
    margin: 16px auto;
    width: calc(100% - 32px);
  }
  
  .work-modal__viewer .nav {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  
  .work-modal__thumbs img {
    width: 60px;
    height: 48px;
  }
}

/* Responsive adjustments for animations */
@media (max-width: 768px) {
  .hero::before,
  .hero::after {
    font-size: 16px;
    letter-spacing: 20px;
  }
  
  body::before,
  body::after {
    display: none;
  }
  
  .site-footer::before {
    font-size: 10px;
    letter-spacing: 4px;
  }
}
    /* ===== Enhanced Footer Styles ===== */
    .site-footer {
      border-top: 1px solid #0f1a45;
      padding: 48px 0 24px;
      margin-top: 40px;
      background: 
        radial-gradient(600px 260px at 90% 90%, rgb(0 0 0 / 68%), transparent 60%), 
        radial-gradient(600px 260px at 90% 90%, rgb(0 0 0 / 39%), #000000dd 60%), 
        url(assets/img/tatreez-3.png);
      position: relative;
      overflow: hidden;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      margin-bottom: 32px;
    }

    @media (min-width: 768px) {
      .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 40px;
      }
    }

    .footer-section h3 {
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      margin: 0 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--primary, #0575f9);
      display: inline-block;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .footer-brand .brand-info {
      color: #9cb1ec;
      line-height: 1.6;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-links a {
      color: #9cb1ec;
      text-decoration: none;
      padding: 4px 0;
      transition: color 0.3s ease, padding-inline-start 0.3s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
      padding-inline-start: 8px;
    }

    /* Contact Info Styles */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #9cb1ec;
    }

    .contact-item .icon {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary, #0575f9);
      flex-shrink: 0;
    }

    .contact-item a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .contact-item a:hover {
      color: #ffffff;
    }

    /* Social Media Styles */
    .social-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    @media (min-width: 480px) {
      .social-links {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 768px) {
      .social-links {
        grid-template-columns: 1fr;
      }
    }

    .social-link {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(14, 23, 65, 0.6);
      border: 1px solid #17316e;
      border-radius: 8px;
      color: #e7eeff;
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s ease;
      backdrop-filter: blur(4px);
    }

    .social-link:hover {
      background: rgba(47, 89, 199, 0.2);
      border-color: #2f59c7;
      transform: translateY(-2px);
    }

    .social-link .icon {
      width: 16px;
      height: 16px;
      color: var(--primary, #0575f9);
    }

    /* Footer Bottom */
    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid #0f1a45;
      color: #9cb1ec;
      text-align: center;
    }

    @media (min-width: 768px) {
      .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }
    }

    .footer-bottom .legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }

    @media (min-width: 768px) {
      .footer-bottom .legal-links {
        justify-content: flex-end;
      }
    }

    .footer-bottom .legal-links a {
      color: #9cb1ec;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;
    }

    .footer-bottom .legal-links a:hover {
      color: #ffffff;
    }

    /* RTL Support */
    [dir="rtl"] .footer-links a:hover {
      padding-inline-end: 8px;
      padding-inline-start: 0;
    }

    /* Mobile Optimizations */
    @media (max-width: 767px) {
      .site-footer {
        padding: 32px 0 16px;
      }

      .footer-grid {
        gap: 24px;
      }

      .footer-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
      }

      .social-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .social-link {
        padding: 6px 8px;
        font-size: 13px;
      }

      .contact-item {
        font-size: 14px;
      }
    }

    /* Animation Effects */
    .footer-section {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;
    }

    .footer-section:nth-child(1) { animation-delay: 0.1s; }
    .footer-section:nth-child(2) { animation-delay: 0.2s; }
    .footer-section:nth-child(3) { animation-delay: 0.3s; }
    .footer-section:nth-child(4) { animation-delay: 0.4s; }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Hover Effects */
    .social-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent, rgba(5, 117, 249, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: inherit;
      pointer-events: none;
    }

    .social-link:hover::before {
      opacity: 1;
    }