:root {
    --gold: #C19E50; --gold-lt: #E0C278; --gold-dk: #8F7234;
    --teal: #3A8B55; --teal-dk: #255E38;
    --dark: #0F1216; --dark2: #161A1F; --dark3: #1F2329; --dark4: #252A32;
    --text: #E8EDF3; --muted: #9AA5B1;
    --border: rgba(193,158,80,.15); --border-h: rgba(193,158,80,.4);
    --r8: 8px; --r12: 12px; --r16: 16px;
    --gold-grad: linear-gradient(135deg, var(--gold-dk), var(--gold));
    --full-grad: linear-gradient(135deg, var(--gold-dk), var(--gold-lt), var(--teal));
}

/* ══════ BASE ══════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Cairo', sans-serif;
    background: var(--dark);
    color: var(--text);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}
[lang=en] body { font-family: 'Cormorant Garamond','Cairo',serif; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 3px; }

/* ══════ SCROLL PROGRESS ══════ */
#progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--full-grad); z-index: 10001; pointer-events: none;
    transition: width .1s linear;
}

/* ══════ LOADER ══════ */
#loader {
    position: fixed; inset: 0; background: rgba(15, 18, 22, 0.98);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100000; transition: opacity .7s ease, transform .7s ease, visibility .7s ease;
    gap: 24px;
}
#loader.out { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-20px); }
.ld-logo { width: 140px; height: 140px; object-fit: contain; border-radius: var(--r16); animation: ldPulse 1.4s ease-in-out infinite; border: 2px solid var(--border-h); box-shadow: 0 15px 40px rgba(0,0,0,0.7); }
.ld-bar { width: 240px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden; }
.ld-fill { height: 100%; width: 0%; background: var(--full-grad); animation: ldFill 2.2s linear forwards; }
.ld-txt { color: var(--gold); font-size: .85rem; letter-spacing: 4px; opacity: 0; animation: fadeUp .8s ease .5s forwards; font-weight: 700; }

/* ══════ KEYFRAMES ══════ */
@keyframes ldPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.75} }
@keyframes ldFill { 0%{width:0} 100%{width:100%} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes fadeRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes gridScroll { 0%{transform:translateY(0)} 100%{transform:translateY(55px)} }
@keyframes hotPulse { 0%{box-shadow:0 0 0 0 rgba(193,158,80,.7)} 70%{box-shadow:0 0 0 12px rgba(193,158,80,0)} 100%{box-shadow:0 0 0 0 rgba(193,158,80,0)} }

/* ══════ PARTICLES ══════ */
#cnv { position: fixed; top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3; }

/* ══════ LANG BTN ══════ */
.lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(193,158,80,.1); border: 1px solid var(--border-h);
    color: var(--gold); padding: 7px 16px; border-radius: 50px;
    font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .25s;
    font-family: 'Cairo', sans-serif;
}
.lang-btn:hover { background: rgba(193,158,80,.22); }

/* ══════ NAVBAR ══════ */
.navbar {
    background: rgba(15,18,22,.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    transition: all .35s;
    z-index: 1000;
    position: sticky;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
}
.navbar.scrolled {
    background: rgba(15,18,22,.97);
    border-bottom-color: var(--border-h);
    box-shadow: 0 4px 40px rgba(0,0,0,.65);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-txt { font-weight: 900; color: var(--gold); font-size: 1.1rem; line-height: 1.2; }
.brand-sub { font-size: .68rem; color: var(--teal); display: block; font-weight: 600; letter-spacing: 1px; }

.nav-link {
    color: var(--text) !important; font-weight: 600;
    padding: 8px 11px !important; border-radius: var(--r8);
    transition: color .25s, background .25s; font-size: .88rem;
    position: relative; white-space: nowrap;
}
.nav-link::after { content:''; position:absolute; bottom:2px; right:50%; width:0; height:2px; background:var(--gold); transition:all .3s; border-radius:2px; }
.nav-link:hover::after, .nav-link.active::after { width:70%; right:15%; }
.nav-link:hover { color: var(--gold) !important; background: rgba(193,158,80,.08); }

.nav-cta {
    background: var(--gold-grad) !important; color: var(--dark) !important;
    font-weight: 800; padding: 9px 22px !important; border-radius: var(--r8);
    box-shadow: 0 4px 20px rgba(193,158,80,.3); white-space: nowrap;
}
.nav-cta:hover { box-shadow: 0 8px 28px rgba(193,158,80,.5); transform: translateY(-2px); }
.nav-cta::after { display: none !important; }

/* ══════ BUTTONS ══════ */
.btn-gd {
    background: var(--gold-grad); color: var(--dark); font-weight: 800;
    padding: 12px 30px; border-radius: var(--r8); border: none; font-size: .98rem;
    cursor: pointer; box-shadow: 0 6px 22px rgba(193,158,80,.32); transition: transform .25s, box-shadow .25s;
    text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Cairo', sans-serif;
}
.btn-gd:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(193,158,80,.52); color: var(--dark); }

.btn-ol {
    background: transparent; color: var(--gold); border: 2px solid rgba(193,158,80,.35);
    padding: 10px 30px; border-radius: var(--r8); font-weight: 700; font-size: .98rem;
    cursor: pointer; transition: all .25s; text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px; font-family: 'Cairo', sans-serif;
}
.btn-ol:hover { background: rgba(193,158,80,.1); border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

/* ══════ HERO ══════ */
#home {
    min-height: 100vh; padding-top: 80px;
    background: radial-gradient(ellipse 70% 60% at 15% 50%, rgba(193,158,80,.07) 0%, transparent 70%),
                radial-gradient(ellipse 50% 40% at 85% 20%, rgba(58,139,85,.06) 0%, transparent 60%),
                var(--dark);
    display: flex; align-items: center; position: relative; overflow: hidden;
}
.hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image: linear-gradient(rgba(193,158,80,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(193,158,80,.03) 1px, transparent 1px);
    background-size: 55px 55px; animation: gridScroll 25s linear infinite;
}
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(193,158,80,.1); border: 1px solid rgba(193,158,80,.3);
    color: var(--gold); padding: 6px 18px; border-radius: 50px;
    font-size: .78rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 24px;
    animation: fadeUp .7s ease both;
}
.hero-badge .dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; animation: blink 1.5s infinite; }
.hero-title { font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 900; line-height: 1.1; animation: fadeUp .8s ease .15s both; }
.hero-title .grad {
    background: var(--full-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block;
}
.hero-sub { color: var(--muted); font-size: 1.02rem; line-height: 1.9; animation: fadeUp .8s ease .3s both; margin: 20px 0 32px; }
.hero-btns { animation: fadeUp .8s ease .45s both; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { animation: fadeUp .8s ease .6s both; margin-top: 48px; width: 100%; }

.stat-row { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--r12); overflow: hidden; background: rgba(22,26,31,.6); backdrop-filter: blur(10px); }
.stat-item { flex: 1; min-width: 110px; padding: 20px 16px; text-align: center; border-left: 1px solid var(--border); }
.stat-item:last-child { border-left: none; }
.stat-n { font-size: 2rem; font-weight: 900; color: var(--gold); line-height: 1; display: block; }
.stat-l { font-size: .72rem; color: var(--muted); margin-top: 5px; letter-spacing: 1px; }

.hero-visual { position: relative; z-index: 2; animation: fadeRight 1s ease .2s both; width: 100%; }
.vis-card {
    background: linear-gradient(135deg, rgba(31,35,41,.95), rgba(22,26,31,.95));
    border: 1px solid var(--border); border-radius: var(--r16); padding: 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(193,158,80,.08);
    position: relative; overflow: hidden;
}
.vis-card::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--full-grad); }
.vis-tag { display:inline-flex;align-items:center;gap:6px;background:rgba(58,139,85,.1);border:1px solid rgba(58,139,85,.3);color:var(--teal);padding:5px 13px;border-radius:20px;font-size:.76rem;font-weight:700;margin-bottom:16px; }
.vis-live { width:7px;height:7px;background:var(--teal);border-radius:50%;animation:blink 1.2s infinite; }
.vis-title { font-size: 1.35rem; font-weight: 900; color: #fff; margin-bottom: 6px; }
.vis-sub { color: var(--muted); font-size: .88rem; margin-bottom: 20px; }
.vis-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vis-mini { background: rgba(15,18,22,.6); border: 1px solid var(--border); border-radius: var(--r8); padding: 12px; flex: 1; min-width: 80px; }
.vis-mini-n { font-size: 1.4rem; font-weight: 900; color: var(--gold); display: block; }
.vis-mini-l { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.vis-img { width: 100%; border-radius: var(--r8); margin-top: 16px; height: 170px; object-fit: cover; }

.float-chips { position: absolute; display: flex; flex-direction: column; gap: 10px; left: -18px; top: 28%; }
.chip { background: rgba(22,26,31,.92); border: 1px solid var(--border-h); border-radius: 50px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space: nowrap; animation: floatY 3s ease-in-out infinite; }
.chip:nth-child(2) { animation-delay: 1.5s; }
.chip i { color: var(--gold); font-size: 1rem; }
.chip-txt { font-size: .76rem; font-weight: 700; color: var(--text); }

/* ══════ SECTIONS ══════ */
.sec {
    position: relative; z-index: 1; padding: 90px 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}
.sec-alt { background: var(--dark2); overflow-x: hidden; width: 100%; max-width: 100vw; }
.sec-hd { text-align: center; margin-bottom: 55px; padding: 0 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--teal); font-weight: 700; font-size: .76rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; }
.eyebrow::before, .eyebrow::after { content:''; width: 32px; height: 1px; background: var(--teal); }
.sec-ttl { font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 900; color: #fff; padding: 0 16px; }
.sec-ttl .gd { color: var(--gold); }
.sec-dsc { color: var(--muted); font-size: .98rem; max-width: 560px; margin: 12px auto 0; line-height: 1.9; padding: 0 16px; }
.glow-div { width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--teal),transparent);opacity:.35; }

/* ══════ REVEAL ══════ */
.reveal { opacity:0; transform:translateY(35px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-l { opacity:0; transform:translateX(-35px); transition:opacity .65s ease,transform .65s ease; }
.reveal-l.visible { opacity:1; transform:none; }
.reveal-r { opacity:0; transform:translateX(35px); transition:opacity .65s ease,transform .65s ease; }
.reveal-r.visible { opacity:1; transform:none; }

/* ══════ ABOUT ══════ */
#about { overflow-x: hidden; width: 100%; max-width: 100vw; }
.about-img-wrap { position:relative; border-radius:var(--r16); overflow:visible; }
.about-img-wrap img { width:100%; border-radius:var(--r16); display:block; max-width: 100%; height: auto; }
.about-badge {
    position:absolute; bottom:-20px; left:-20px;
    background: var(--gold-grad); color:var(--dark);
    padding:16px 22px; border-radius:var(--r12); text-align:center;
    box-shadow:0 12px 32px rgba(193,158,80,.42); animation:floatY 4s ease-in-out infinite;
}
.about-badge .n { font-size:2.2rem; font-weight:900; line-height:1; display:block; }
.about-badge .t { font-size:.72rem; font-weight:700; }
.ab-card { background:rgba(31,35,41,.7); border:1px solid var(--border); border-radius:var(--r12); padding:18px; transition:all .3s; }
.ab-card:hover { border-color:var(--border-h); background:rgba(193,158,80,.05); transform:translateY(-4px); }
.ab-card i { font-size:1.4rem; color:var(--gold); margin-bottom:8px; display:block; }
.ab-card h6 { font-weight:800; margin-bottom:4px; font-size:.92rem; }
.ab-card p { font-size:.8rem; color:var(--muted); line-height:1.6; margin:0; }

blockquote.fancy { border-right:4px solid var(--gold); padding-right:18px; font-style:italic; color:var(--muted); margin:22px 0; font-size:.98rem; line-height:1.8; }
html[dir=ltr] blockquote.fancy { border-right:none; border-left:4px solid var(--gold); padding-right:0; padding-left:18px; }
.ceo { color:var(--gold); font-weight:700; font-size:.83rem; font-style:normal; }

/* ══════ SERVICES ══════ */
#services { overflow-x: hidden; width: 100%; max-width: 100vw; }
.svc-card {
    background:rgba(22,26,31,.85); border:1px solid rgba(255,255,255,.05);
    border-radius:var(--r16); padding:34px 26px; height:100%;
    position:relative; overflow:hidden; transition:all .35s;
}
.svc-card::after { content:''; position:absolute; bottom:0;left:0;right:0;height:3px; background:var(--gold-grad); transform:scaleX(0); transition:transform .35s; transform-origin:right; }
html[dir=ltr] .svc-card::after { transform-origin:left; }
.svc-card:hover::after { transform:scaleX(1); }
.svc-card:hover { border-color:var(--border-h); transform:translateY(-7px); box-shadow:0 20px 48px rgba(0,0,0,.42); }
.svc-ico { width:62px;height:62px;border-radius:var(--r12);background:linear-gradient(135deg,rgba(193,158,80,.18),rgba(193,158,80,.04));border:1px solid rgba(193,158,80,.25);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--gold);margin-bottom:22px;transition:all .3s; }
.svc-card:hover .svc-ico { background:var(--gold-grad); color:var(--dark); }
.svc-card h4 { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:12px; }
.svc-card p { color:var(--muted); font-size:.88rem; line-height:1.8; }
.svc-more { color:var(--gold); font-size:.8rem; font-weight:700; margin-top:16px; display:inline-flex; align-items:center; gap:5px; transition:gap .3s; }
.svc-card:hover .svc-more { gap:12px; }

/* ══════ PORTFOLIO ══════ */
#portfolio { overflow-x: hidden; width: 100%; max-width: 100vw; }
.filter-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; padding: 0 16px; }
.ftab {
    background:rgba(31,35,41,.8); border:1px solid rgba(255,255,255,.07);
    color:var(--muted); padding:9px 22px; border-radius:50px;
    cursor:pointer; font-weight:600; font-size:.86rem; transition:all .3s;
    font-family:'Cairo',sans-serif;
}
.ftab:hover, .ftab.active { background:var(--gold-grad); color:var(--dark); border-color:transparent; box-shadow:0 4px 16px rgba(193,158,80,.3); }

/* ── Port Groups ── */
.port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; padding: 0 16px; }

.port-group { grid-column:1/-1; transition:opacity .35s ease, transform .35s ease; }
.port-group.hidden { display:none !important; }

.port-group-header {
    margin-bottom:16px; padding:20px 26px;
    background:rgba(31,35,41,.75); border:1px solid var(--border); border-radius:var(--r16);
    position:relative; overflow:hidden;
}
.port-group-header::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--full-grad); }
.port-group-label-tag { display:inline-flex;align-items:center;gap:6px;background:rgba(193,158,80,.12);border:1px solid rgba(193,158,80,.3);color:var(--gold);padding:4px 13px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:1px;margin-bottom:8px; }
.port-group-label-tag.commercial { background:rgba(58,139,85,.12);border-color:rgba(58,139,85,.3);color:var(--teal); }
.port-group-title { font-size:1.2rem; font-weight:900; color:#fff; margin:0 0 4px; }
.port-group-sub { color:var(--muted); font-size:.86rem; margin:0; }

.port-group-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }

/* pgcard */
.pgcard { border-radius:var(--r12); overflow:hidden; position:relative; background:var(--dark3); cursor:pointer; transition:transform .35s, box-shadow .35s; box-shadow:0 5px 18px rgba(0,0,0,.3); will-change:transform; }
.pgcard:hover { transform:translateY(-5px); box-shadow:0 16px 38px rgba(0,0,0,.5); }
.pgcard img, .pgcard video { width:100%; height:190px; object-fit:cover; display:block; transition:transform .45s ease; }
.pgcard:hover img, .pgcard:hover video { transform:scale(1.06); }
.pgcard-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,22,.95) 0%,rgba(15,18,22,.2) 55%,transparent 100%);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .3s; }
.pgcard:hover .pgcard-ov { opacity:1; }
.pgcard-ov .port-cat { font-size:.67rem; color:var(--gold); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:2px; }
.pgcard-ov h5 { font-size:.92rem; color:#fff; font-weight:800; margin-bottom:2px; }
.pgcard-ov span { font-size:.76rem; color:var(--muted); }
.pgcard-num { position:absolute;top:9px;right:9px;background:rgba(193,158,80,.9);color:var(--dark);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:900; }
html[dir=ltr] .pgcard-num { right:auto; left:9px; }

/* standalone port-card */
.port-card { border-radius:var(--r12); overflow:hidden; position:relative; background:var(--dark3); cursor:pointer; transition:transform .35s, box-shadow .35s, opacity .3s; box-shadow:0 5px 18px rgba(0,0,0,.3); will-change:transform; }
.port-card.hidden { display:none !important; }
.port-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,.5); }
.port-thumb { width:100%; height:220px; object-fit:cover; display:block; transition:transform .45s; }
.port-card:hover .port-thumb { transform:scale(1.06); }
.port-vbadge { position:absolute;top:12px;right:12px;background:rgba(214,107,90,.88);color:#fff;padding:4px 11px;border-radius:20px;font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:5px;backdrop-filter:blur(4px); }
html[dir=ltr] .port-vbadge { right:auto; left:12px; }
.port-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,22,.97) 0%,rgba(15,18,22,.3) 60%,transparent 100%);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .3s; }
.port-card:hover .port-ov { opacity:1; }
.port-cat { color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.port-ov h5 { color:#fff; font-weight:800; font-size:1rem; margin-bottom:3px; }
.port-ov span { color:var(--muted); font-size:.8rem; }

/* ══════ ACHIEVEMENTS ══════ */
#achievements {
    background:linear-gradient(135deg,var(--dark2),var(--dark));
    position:relative; overflow:hidden;
    width: 100%; max-width: 100vw;
}
#achievements::before { content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(193,158,80,.06) 0%,transparent 65%); pointer-events:none; }
.ach-card { text-align:center; padding:38px 18px; border:1px solid var(--border); border-radius:var(--r16); background:rgba(31,35,41,.55); backdrop-filter:blur(10px); transition:all .3s; }
.ach-card:hover { border-color:var(--border-h); transform:translateY(-6px); box-shadow:0 15px 38px rgba(0,0,0,.38); }
.ach-ico { font-size:2.2rem; color:var(--gold); margin-bottom:12px; }
.ach-n { font-size:3rem; font-weight:900; color:var(--gold); line-height:1; display:block; }
.ach-l { color:var(--muted); margin-top:8px; font-size:.9rem; }

/* ══════ TECHNICAL SPECS ══════ */
#specs { overflow-x: hidden; width: 100%; max-width: 100vw; }
.spec-wrap { background:rgba(22,26,31,.8); border:1px solid var(--border); border-radius:var(--r16); padding:26px; position:relative; overflow:hidden; }
.spec-wrap::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--full-grad); }
.spec-img { width:100%; border-radius:var(--r8); filter:brightness(.9) contrast(1.1); max-width: 100%; height: auto; }

.hotspot { position:absolute; width:24px; height:24px; background:var(--gold); border:3px solid rgba(15,18,22,.8); border-radius:50%; cursor:pointer; transition:transform .3s; box-shadow:0 0 0 0 rgba(193,158,80,.6); animation:hotPulse 2s infinite; }
.hotspot:hover { transform:scale(1.3); }
.hs-tip { position:absolute; background:rgba(15,18,22,.95); border:1px solid var(--border-h); color:#fff; padding:8px 14px; border-radius:var(--r8); font-size:.8rem; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .22s; box-shadow:0 8px 22px rgba(0,0,0,.5); z-index:10; }
.hotspot:hover+.hs-tip, .hotspot:focus+.hs-tip { opacity:1; }

.spec-list { list-style:none; }
.spec-list li { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.spec-list li:last-child { border-bottom:none; }
.spec-ico { width:38px;height:38px;min-width:38px;background:rgba(193,158,80,.1);border:1px solid rgba(193,158,80,.2);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.95rem; }
.spec-list h6 { font-weight:800; font-size:.9rem; margin-bottom:2px; color:#fff; }
.spec-list p { color:var(--muted); font-size:.8rem; margin:0; }

/* ══════ CERTIFICATIONS ══════ */
#certifications { background:var(--dark2); overflow-x: hidden; width: 100%; max-width: 100vw; }
.cert-card { background:rgba(22,26,31,.8); border:1px solid var(--border); border-radius:var(--r12); padding:28px 22px; text-align:center; transition:all .3s; height:100%; }
.cert-card:hover { border-color:var(--border-h); transform:translateY(-6px); box-shadow:0 15px 38px rgba(0,0,0,.38); }
.cert-ico { width:66px;height:66px;margin:0 auto 16px;background:linear-gradient(135deg,rgba(58,139,85,.2),rgba(58,139,85,.05));border:2px solid rgba(58,139,85,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.65rem;color:var(--teal); }
.cert-card h5 { font-weight:800; color:#fff; margin-bottom:7px; font-size:.98rem; }
.cert-card p { color:var(--muted); font-size:.83rem; line-height:1.7; margin:0; }
.cert-badge { display:inline-block;background:rgba(58,139,85,.12);border:1px solid rgba(58,139,85,.3);color:var(--teal);padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;margin-top:10px; }

/* ══════ WHY US ══════ */
#why { background:var(--dark); overflow-x: hidden; width: 100%; max-width: 100vw; }
.why-card { background:rgba(31,35,41,.7); border:1px solid var(--border); border-radius:var(--r12); padding:24px; display:flex; gap:18px; align-items:flex-start; transition:all .3s; margin-bottom:16px; }
.why-card:hover { border-color:var(--border-h); transform:translateX(-5px); background:rgba(193,158,80,.04); }
html[dir=ltr] .why-card:hover { transform:translateX(5px); }
.why-ico { width:50px;height:50px;min-width:50px;background:linear-gradient(135deg,rgba(193,158,80,.2),rgba(193,158,80,.05));border:1px solid rgba(193,158,80,.3);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--gold); }
.why-card h5 { font-weight:800; color:#fff; margin-bottom:6px; font-size:.98rem; }
.why-card p { color:var(--muted); font-size:.86rem; line-height:1.7; margin:0; }

/* Timeline */
.timeline { position:relative; padding-right:28px; }
html[dir=ltr] .timeline { padding-right:0; padding-left:28px; }
.timeline::before { content:''; position:absolute; right:0; top:10px; bottom:10px; width:2px; background:linear-gradient(to bottom,var(--gold),var(--teal)); }
html[dir=ltr] .timeline::before { right:auto; left:0; }
.tl-item { position:relative; margin-bottom:32px; }
.tl-dot { position:absolute; right:-37px; top:4px; width:16px; height:16px; background:var(--gold); border:3px solid var(--dark); border-radius:50%; }
html[dir=ltr] .tl-dot { right:auto; left:-37px; }
.tl-year { font-size:.73rem; color:var(--teal); font-weight:700; letter-spacing:2px; margin-bottom:3px; }
.tl-item h6 { font-weight:800; color:#fff; margin-bottom:4px; }
.tl-item p { color:var(--muted); font-size:.83rem; line-height:1.7; margin:0; }

/* ══════ CONTACT ══════ */
#contact { background:var(--dark2); overflow-x: hidden; width: 100%; max-width: 100vw; }
.contact-card { background:rgba(22,26,31,.8); border:1px solid var(--border); border-radius:var(--r16); padding:34px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.contact-info-item:last-child { border-bottom:none; }
.cinfo-ico { width:44px;height:44px;min-width:44px;background:rgba(193,158,80,.1);border:1px solid rgba(193,158,80,.2);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--gold); }
.cinfo-lbl { font-size:.73rem; color:var(--teal); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; }
.cinfo-val { color:var(--text); font-size:.92rem; font-weight:600; word-break: break-word; }

.form-ctrl { background:rgba(31,35,41,.8); border:1px solid var(--border); border-radius:var(--r8); color:var(--text); padding:12px 16px; font-size:.92rem; width:100%; transition:border .25s; font-family:'Cairo',sans-serif; }
.form-ctrl:focus { outline:none; border-color:var(--gold); background:rgba(31,35,41,1); }
.form-ctrl::placeholder { color:var(--muted); }
textarea.form-ctrl { resize:vertical; min-height:125px; }

/* ══════ FOOTER ══════ */
footer {
    background:#080A0D; border-top:1px solid var(--border); padding:55px 0 0;
    overflow-x: hidden; width: 100%; max-width: 100vw;
}
footer h5 { color:var(--gold); font-weight:800; margin-bottom:16px; font-size:.98rem; }
footer p, footer li { color:var(--muted); font-size:.86rem; line-height:1.8; }
footer a { color:var(--muted); text-decoration:none; transition:color .25s; display:inline-block; }
footer a:hover { color:var(--gold); }
html[dir=rtl] footer a:hover { padding-right:3px; }
html[dir=ltr] footer a:hover { padding-left:3px; }

.social-links a { display:inline-flex;width:36px;height:36px;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:50%;align-items:center;justify-content:center;color:var(--gold);margin:0 3px;transition:all .25s;font-size:.9rem; }
.social-links a:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); transform:translateY(-3px); padding:0; }

.footer-copy { background:rgba(0,0,0,.5); text-align:center; padding:18px 0; margin-top:44px; border-top:1px solid rgba(255,255,255,.04); }
.footer-copy p { color:var(--muted); font-size:.8rem; margin:0; }

/* ══════ BACK TO TOP ══════ */
#btt { position:fixed;bottom:26px;left:26px;width:42px;height:42px;background:var(--gold-grad);color:var(--dark);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 6px 18px rgba(193,158,80,.38);transition:all .3s;opacity:0;transform:translateY(20px);z-index:500; }
#btt.show { opacity:1; transform:none; }
#btt:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(193,158,80,.55); }

/* ══════ VIDEO MODAL ══════ */
.vmodal { display:none;position:fixed;z-index:10000;inset:0;background:rgba(15,18,22,.95);backdrop-filter:blur(14px);align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .35s; }
.vmodal.show { display:flex;opacity:1; }
.vmodal-content { width:95%;max-width:980px;position:relative;transform:scale(.92);transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.vmodal.show .vmodal-content { transform:scale(1); }
.vmodal-content video { width:auto;max-width:100%;max-height:85vh;display:block;margin:0 auto;border-radius:var(--r16);box-shadow:0 25px 70px rgba(0,0,0,.8),0 0 36px rgba(193,158,80,.1);border:1px solid rgba(255,255,255,.1); }
.vmodal-close { position:absolute;top:38px;right:38px;width:48px;height:48px;background:rgba(193,158,80,.1);border:1px solid rgba(193,158,80,.3);color:var(--gold);font-size:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;z-index:10001; }
.vmodal-close:hover { background:var(--gold); color:var(--dark); transform:rotate(90deg); }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — FULL FIX
   ══════════════════════════════════════════════════════════════ */

/* ── 1200px ── */
@media (max-width: 1200px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ── 991px (tablets) ── */
@media (max-width: 991px) {
    .float-chips { display: none; }

    .about-badge {
        position: relative;
        bottom: auto; left: auto; right: auto;
        margin-top: 16px;
        display: inline-block;
        animation: none;
    }

    .hero-content,
    .hero-visual {
        width: 100%;
        max-width: 100%;
    }

    .container,
    .container-fluid,
    .container-md,
    .container-sm {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden;
    }

    /* Navbar collapse behavior */
    .navbar-collapse {
        background: rgba(15, 18, 22, 0.98);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border);
        border-radius: var(--r12);
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    }

    .navbar-nav {
        text-align: center;
        width: 100%;
    }

    .navbar-nav .nav-link {
        display: block;
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-cta {
        margin-top: 12px;
        display: inline-block;
        text-align: center;
        width: 100%;
    }
}

/* ── 767px (phones) ── */
@media (max-width: 767px) {
    .sec { padding: 65px 0; }

    .container,
    .container-fluid,
    .container-md,
    .container-sm,
    .container-xs {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden;
    }

    .stat-item { min-width: 50%; }
    .stat-item:nth-child(2) { border-left: none; }

    .hero-title { font-size: 2rem; }
    .hero-sub { font-size: .92rem; }

    .port-grid { grid-template-columns: 1fr; padding: 0 12px; }

    .port-group-cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        padding: 0 4px;
    }

    .vmodal-close { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 1.4rem; }

    .contact-card { padding: 22px; }

    .pgcard img, .pgcard video { height: 165px; }

    .vis-card { padding: 18px; }
    .vis-row { gap: 8px; }
    .vis-mini { min-width: 70px; padding: 10px; }

    .ach-n { font-size: 2.2rem; }
    .ach-card { padding: 24px 14px; }

    .svc-card { padding: 24px 18px; }

    .cert-card { padding: 20px 16px; }

    .why-card { padding: 18px; gap: 14px; }

    .spec-wrap { padding: 18px; }

    .sec-hd { margin-bottom: 36px; }

    .filter-tabs { gap: 8px; margin-bottom: 28px; }
    .ftab { padding: 7px 16px; font-size: .8rem; }

    .btn-gd, .btn-ol { padding: 10px 22px; font-size: .9rem; }
}

/* ── 576px (small phones) ── */
@media (max-width: 576px) {
    html { font-size: 15px; }

    .container,
    .container-fluid,
    .container-sm {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-title { font-size: 1.75rem; }

    .stat-n { font-size: 1.6rem; }

    .port-group-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pgcard img, .pgcard video { height: 140px; }
    .port-thumb { height: 180px; }

    .ach-n { font-size: 2rem; }
}

/* ── 400px (very small screens) ── */
@media (max-width: 400px) {
    .container,
    .container-fluid,
    .container-sm {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hero-title { font-size: 1.5rem; }
    .hero-badge { font-size: .7rem; padding: 5px 14px; }

    .stat-n { font-size: 1.4rem; }
    .stat-l { font-size: .65rem; }

    .port-group-cards { grid-template-columns: 1fr; }
}


/* ══════ LOADING STATE ══════ */
body.loading {
    overflow: hidden;
}