/* ============================================================
   IFCORE - Premium glass layer (يتحمّل بعد style.css ويعدّل الشكل فقط)
   ============================================================ */
:root {
    --font-main: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif;
    --font-head: 'Readex Pro', 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    --ink: #050a1c;
    --glass-hi: rgba(255, 255, 255, .075);
    --glass-lo: rgba(255, 255, 255, .022);
    --glass-line: rgba(255, 255, 255, .10);
    --glass-edge: rgba(255, 255, 255, .16);
    --cyan: #00d4ff;
    --radius-md: 18px;
    --radius-lg: 24px;
    --shadow-deep: 0 28px 60px -28px rgba(0, 4, 24, .9);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; scrollbar-color: rgba(0, 212, 255, .35) transparent; scrollbar-width: thin; }
body { font-family: var(--font-main); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(0, 212, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4, .hero-title, .stat-number, .site-logo { font-family: var(--font-head); }

/* ---------- زجاج: سطح مشترك + إضاءة تتبع المؤشر ---------- */
.service-card, .portfolio-card, .ds-card, .stats-bar, .contact-card, .section-modal {
    --mx: 50%; --my: 0%; --spot: 0;
    background:
        radial-gradient(460px circle at var(--mx) var(--my), rgba(0, 212, 255, calc(var(--spot) * .16)), transparent 62%),
        linear-gradient(180deg, var(--glass-hi), var(--glass-lo));
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-deep);
}
.service-card:hover, .portfolio-card:hover, .ds-card:hover { --spot: 1; border-color: rgba(0, 212, 255, .38); }

/* ---------- الهيدر ---------- */
.site-header {
    background: rgba(5, 10, 28, .62);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid var(--glass-line);
    padding: 14px 0;
}
.main-nav { gap: 6px; }
.main-nav a { padding: 8px 16px; border-radius: 999px; font-weight: 500; color: rgba(255, 255, 255, .78); }
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.main-nav a.active { color: #fff; background: rgba(0, 212, 255, .12); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .3); }
.main-nav a.active::after { display: none; }
.header-phone { background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge); }
.header-phone:hover { border-color: rgba(0, 212, 255, .5); }

/* ---------- الأزرار ---------- */
.btn { border-radius: 14px; padding: 14px 26px; font-family: var(--font-main); font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn-primary {
    color: #021226; background: linear-gradient(180deg, #38e4ff, #00bfe8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 34px -12px rgba(0, 212, 255, .75);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 40px -12px rgba(0, 212, 255, .9); }
.btn-outline { color: #fff; background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-outline:hover { border-color: rgba(0, 212, 255, .5); background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.btn i { transition: transform .25s var(--ease); }
.btn:hover i.fa-arrow-left { transform: translateX(-4px); }
.services-intro .btn { background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)) !important; border: 1px solid var(--glass-line); }

/* ---------- الهيرو ---------- */
.hero-section { padding-top: 56px; }
.hero-title { font-size: clamp(34px, 5.2vw, 66px); font-weight: 700; line-height: 1.22; margin-bottom: 22px; }
.hero-title .highlight { color: var(--cyan); text-shadow: 0 0 40px rgba(0, 212, 255, .35); }
.hero-description { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.95; max-width: 640px; color: rgba(255, 255, 255, .72); margin-inline: auto; }
.hero-badge { padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border: 1px solid rgba(0, 212, 255, .28); box-shadow: inset 0 1px 0 var(--glass-edge); }
.hero-trust-badges span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); color: rgba(255, 255, 255, .8); }
.hero-trust-badges span i { color: var(--cyan); }

/* لحظة الدخول الوحيدة: ظهور الهيرو بالتتابع */
@media (prefers-reduced-motion: no-preference) {
    .hero-content > * { opacity: 0; transform: translateY(14px); animation: ifRise .7s var(--ease) forwards; }
    .hero-content > :nth-child(1) { animation-delay: .05s; }
    .hero-content > :nth-child(2) { animation-delay: .15s; }
    .hero-content > :nth-child(3) { animation-delay: .27s; }
    .hero-content > :nth-child(4) { animation-delay: .38s; }
    .hero-content > :nth-child(5) { animation-delay: .48s; }
    @keyframes ifRise { to { opacity: 1; transform: none; } }
}

/* ---------- الإحصائيات ---------- */
.stats-bar { border-radius: var(--radius-lg); padding: 28px 18px; }
.stat-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--cyan); background: rgba(0, 212, 255, .09); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .22); }
.stat-number { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: rgba(255, 255, 255, .62); font-size: 14px; }

/* ---------- عناوين الأقسام ---------- */
.portfolio-section, .services-section { padding-block: 84px 40px; }
.portfolio-header h2, .services-intro h2 { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.35; }
.portfolio-header .highlight { color: var(--cyan); }
.services-intro p, .portfolio-card-body .pc-text, .service-card p { line-height: 1.9; }
.eyebrow { letter-spacing: 0; }

/* ---------- كروت الأعمال ---------- */
.portfolio-card { border-radius: var(--radius-md); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease); }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--glass-edge), 0 34px 70px -30px rgba(0, 150, 255, .45); }
.portfolio-card img { background: rgba(0, 0, 0, .25); transition: transform .8s var(--ease); }
.portfolio-card:hover img { transform: scale(1.04); }
.portfolio-card { overflow: hidden; }
.portfolio-card-body { background: transparent; border-top: 1px solid var(--glass-line); padding: 20px 22px 22px; }
.portfolio-card-body h4 { font-family: var(--font-head); font-size: 17px; font-weight: 600; }

/* ---------- كروت الخدمات ---------- */
.service-card { border-radius: var(--radius-md); padding: 30px 24px; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease); overflow: hidden; }
.service-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--glass-edge), 0 34px 70px -30px rgba(0, 150, 255, .45); }
.service-card h3 { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 18px; color: var(--cyan); background: rgba(0, 212, 255, .09); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .25), 0 0 30px -6px rgba(0, 212, 255, .35); }

/* ---------- المواقع الجاهزة ---------- */
.ds-card { padding: 0; border-radius: 22px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.ds-card > * { background: transparent; }
.ds-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--glass-edge), 0 34px 70px -30px rgba(0, 150, 255, .5); }
.ds-browser { border-radius: 0; border-bottom: 1px solid var(--glass-line); }
.ds-body { border-radius: 0; }
.ds-body h3 { font-family: var(--font-head); font-weight: 600; }
.ds-head h2 { font-family: var(--font-head); font-weight: 700; }
.ds-search { background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border-color: var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ds-eyebrow { background: rgba(0, 212, 255, .07); }
.ds-btn { border-radius: 14px; }
.ds-modal-box { border-radius: 22px; background: rgba(8, 14, 40, .9); border-color: var(--glass-line); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* ---------- الفوتر وصفحات الأعمال ---------- */
.site-footer { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)); border-top: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.footer-social a { border-radius: 14px; background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border: 1px solid var(--glass-line); transition: transform .25s var(--ease), border-color .25s, color .25s; }
.footer-social a:hover { transform: translateY(-3px); border-color: rgba(0, 212, 255, .5); color: var(--cyan); }
.footer-bottom { border-top: 1px solid var(--glass-line); }
.page-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 4.2vw, 52px); line-height: 1.3; }
.page-cover { border-color: var(--glass-line); box-shadow: var(--shadow-deep); }

@media (max-width: 768px) {
    .site-header { padding: 10px 0; }
    .portfolio-section, .services-section { padding-block: 56px 24px; }
    .stats-bar { padding: 20px 12px; }
    .stat-number { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.hero-trust-badges { margin-bottom: 64px; }