/* ===== MASA ALJUD HR PORTAL - DARK FUTURISTIC / PREMIUM TECH UI ===== */
:root{
  --primary-color:#18bfff;
  --secondary-color:#0aa6df;
  --accent-color:#18bfff;
  --background-color:#020812;
  --surface-color:#071826;
  --text-color:#f4fbff;
  --muted-text-color:#8fa8b8;
  --card-radius:22px;
  --button-radius:999px;
  --hero-radius:28px;
  --navy:var(--background-color);
  --navy-2:#04111f;
  --navy-3:#071826;
  --panel:rgba(10,32,52,.42);
  --panel-strong:rgba(10,32,52,.62);
  --border:rgba(74,207,255,.16);
  --border-soft:rgba(74,207,255,.10);
  --cyan:var(--primary-color);
  --blue:var(--secondary-color);
  --cyan-soft:rgba(24,191,255,.14);
  --cyan-border:rgba(24,191,255,.28);
  --white:#ffffff;
  --text:var(--text-color);
  --muted:var(--muted-text-color);
  --muted-2:#77839a;
  --warning:#2dd4bf;
  --danger:#ff4466;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:var(--card-radius);
  --container:1220px;
  --shadow:0 20px 70px rgba(0,0,0,.42);
  --shadow-soft:0 12px 34px rgba(0,0,0,.26);
  --glow:0 0 35px rgba(24,191,255,.30);
  --transition:all .32s cubic-bezier(.4,0,.2,1);
  --font:'Cairo',sans-serif;
  /* أسماء إضافية مطابقة لمواصفات الهوية الجديدة (aliases) */
  --bg-main:#020812;
  --bg-section:#04111f;
  --card-bg:rgba(5,22,38,.72);
  --card-border:rgba(74,207,255,.18);
  --primary:#18bfff;
  --primary-soft:#0aa6df;
  --cyan-glow:rgba(24,191,255,.35);
  --text-main:#f4fbff;
  --text-muted:#8fa8b8;
}

*{box-sizing:border-box;margin:0;padding:0}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:
    radial-gradient(circle at 80% 8%, rgba(24,191,255,.14), transparent 28%),
    radial-gradient(circle at 12% 30%, rgba(45,212,191,.09), transparent 25%),
    linear-gradient(180deg,var(--navy),#03101c 48%,#02101a);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}
body.tax-page, body.admin-page{padding-top:88px}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:var(--font)}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(24,191,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(24,191,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 70%);pointer-events:none;z-index:0}
.bg-orb{position:fixed;border-radius:999px;filter:blur(78px);pointer-events:none;z-index:0;opacity:.82;animation:orbFloat 13s ease-in-out infinite alternate}
.orb-1{width:460px;height:460px;right:-120px;top:-120px;background:rgba(24,191,255,.16)}
.orb-2{width:360px;height:360px;left:-120px;bottom:-120px;background:rgba(45,212,191,.12);animation-delay:-6s}
@keyframes orbFloat{to{transform:translate(34px,42px) scale(1.08)}}

header,.app-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,rgba(4,16,28,.82),rgba(3,12,22,.68));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(24,191,255,.20);
  box-shadow:0 8px 32px rgba(0,0,0,.14),inset 0 -1px 0 rgba(255,255,255,.025);
  transition:var(--transition);
}
header.scrolled,.app-header.scrolled{background:rgba(3,13,23,.90);border-bottom-color:rgba(24,191,255,.27);box-shadow:0 12px 34px rgba(0,0,0,.30)}
.navbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:var(--transition)}
header.scrolled .navbar{min-height:62px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--white);white-space:nowrap}
.logo-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(24,191,255,.22),rgba(6,28,44,.58));border:1px solid rgba(24,191,255,.40);color:var(--cyan);box-shadow:0 0 24px rgba(24,191,255,.22),inset 0 1px 0 rgba(255,255,255,.13);transition:var(--transition)}
.logo:hover .logo-icon{border-color:rgba(24,191,255,.68);box-shadow:0 0 30px rgba(24,191,255,.34),inset 0 1px 0 rgba(255,255,255,.16)}
.logo-mark-icon{display:block;object-fit:contain}
.logo-text{font-size:1.08rem;letter-spacing:-.15px}
.logo-text strong{color:var(--cyan)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{color:var(--muted);font-weight:800;font-size:.9rem;padding:8px 13px;border:1px solid transparent;border-radius:999px;transition:var(--transition);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--white);background:rgba(24,191,255,.085);border-color:rgba(24,191,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.nav-actions .btn-dark{background:linear-gradient(145deg,rgba(9,29,45,.92),rgba(3,14,25,.92));border-color:rgba(24,191,255,.48);color:#eafbff;box-shadow:0 0 18px rgba(24,191,255,.12),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-actions .btn-dark:hover{background:rgba(24,191,255,.12);border-color:rgba(24,191,255,.78);box-shadow:0 0 25px rgba(24,191,255,.23)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--button-radius);padding:13px 24px;font-size:.95rem;font-weight:900;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:var(--transition)}
.btn:hover::after{background:rgba(255,255,255,.07)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#111;background:linear-gradient(135deg,#0aa6df,#18bfff);box-shadow:0 10px 26px rgba(24,191,255,.24)}
.btn-primary:hover{box-shadow:0 14px 34px rgba(24,191,255,.35)}
.btn-outline{background:rgba(24,191,255,.05);border:1px solid rgba(24,191,255,.40);color:var(--cyan)}
.btn-outline:hover{background:rgba(24,191,255,.12);border-color:var(--cyan)}
.btn-dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--white)}
.btn-dark:hover{background:rgba(255,255,255,.12)}
.btn-outline-dark{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.btn-outline-dark:hover{color:var(--white);border-color:rgba(255,255,255,.34)}
.btn-sm{padding:9px 16px;font-size:.86rem;border-radius:999px}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 64px}
.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);background:rgba(24,191,255,.09);border:1px solid rgba(24,191,255,.23);border-radius:999px;padding:7px 14px;font-weight:900;font-size:.82rem;margin-bottom:16px}
.eyebrow-dot{width:7px;height:7px;border-radius:999px;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(.82)}}
.hero h1{font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.16;font-weight:900;letter-spacing:-.5px;margin-bottom:18px;max-width:720px}
.hero p{color:var(--muted);font-weight:700;font-size:1.05rem;line-height:2;max-width:660px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-metrics{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px}
.hero-metrics div{min-width:118px;padding:14px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--border-soft);backdrop-filter:blur(14px)}
.hero-metrics strong{display:block;color:var(--cyan);font-size:1.55rem;font-weight:900;line-height:1}
.hero-metrics span{color:var(--muted);font-size:.82rem;font-weight:800}
.hero-visual{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center}

/* ---- Hero Isometric HR Interface — منصة زجاجية + كروت أيقونات عائمة متصلة بخطوط نيون، بلا أي نص ---- */
.iso-scene{position:relative;width:100%;max-width:440px;min-height:400px;margin:0 auto}
.iso-glow{
  position:absolute;inset:-10% -10% 4% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 68%,rgba(24,191,255,.22),rgba(45,212,191,.09) 45%,transparent 74%);
  filter:blur(46px);
  animation:isoGlowPulse 7s ease-in-out infinite alternate;
}
@keyframes isoGlowPulse{to{opacity:.85;transform:scale(1.05)}}

.iso-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.iso-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);opacity:.55;animation:isoParticleDrift 9s ease-in-out infinite alternate}
.iso-particle.p1{top:20%;left:10%}
.iso-particle.p2{top:58%;left:6%;animation-delay:-2s}
.iso-particle.p3{top:14%;left:82%;animation-delay:-4s}
.iso-particle.p4{top:66%;left:88%;animation-delay:-1s}
.iso-particle.p5{top:38%;left:50%;animation-delay:-3s}
.iso-particle.p6{top:78%;left:44%;animation-delay:-5s}
@keyframes isoParticleDrift{to{transform:translateY(-16px);opacity:.12}}

.iso-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

.iso-platform{
  position:absolute;left:50%;bottom:8%;width:60%;height:13%;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,rgba(24,191,255,.16),rgba(10,34,54,.6));
  border:1px solid var(--card-border);
  box-shadow:0 0 40px var(--cyan-glow),inset 0 8px 20px rgba(24,191,255,.14);
  z-index:1;
}
.iso-platform::after{
  content:"";position:absolute;inset:16% 22%;border-radius:50%;
  border:1px solid rgba(24,191,255,.35);
}

.iso-card-pos{position:absolute;transform:translate(-50%,-50%);z-index:2}
.iso-card{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(24,191,255,.14),var(--card-bg));
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-soft),0 0 22px rgba(24,191,255,.18);
  backdrop-filter:blur(10px);
  color:var(--cyan);
  animation:isoCardFloat 6s ease-in-out infinite alternate;
}
.iso-card svg{width:24px;height:24px}
.iso-card.card-1{animation-delay:-.5s}
.iso-card.card-2{animation-delay:-2s}
.iso-card.card-3{animation-delay:-3.5s}
.iso-card.card-4{animation-delay:-1.2s}
.iso-card.card-5{animation-delay:-4.2s}
@keyframes isoCardFloat{to{transform:translateY(-10px)}}

.card-size-wide{grid-column:span 2}
.card-size-large{grid-column:span 2}
.card-size-small{grid-column:span 1}

.content-section{padding:78px 0}
.section-panel{background:linear-gradient(180deg,rgba(5,19,30,.72),rgba(4,14,24,.35));border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.section-title{text-align:center;margin-bottom:38px}
.section-title h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:900;margin-bottom:10px}
.section-title p{max-width:720px;margin:0 auto;color:var(--muted);font-weight:700;line-height:1.9}
.card{background:linear-gradient(180deg,rgba(10,34,54,.78),var(--card-bg));border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);backdrop-filter:blur(16px);position:relative;overflow:hidden;transition:var(--transition)}
.card::before{content:"";position:absolute;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(24,191,255,.45),transparent);opacity:.65}
.card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-1.5deg);border-color:var(--cyan-border);box-shadow:var(--shadow),0 0 42px var(--cyan-glow)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.075)}
.card-head h3{font-weight:900;font-size:1.22rem;margin-bottom:4px}
.card-head p{color:var(--muted);font-weight:700;font-size:.88rem;line-height:1.75}
.card-body{padding:22px 24px}
.badge{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(24,191,255,.24);background:rgba(24,191,255,.10);color:var(--cyan);border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:900;white-space:nowrap}

.ann-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ann-title{font-size:1.18rem;font-weight:900;margin-bottom:8px;color:var(--white)}
.ann-text{color:var(--muted);font-weight:700;line-height:1.85}
.ann-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:900;color:var(--cyan);background:rgba(24,191,255,.09);border:1px solid rgba(24,191,255,.18)}
.pill.gray{color:var(--muted);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
.ann-actions{margin-top:16px}

.icon-box{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;background:rgba(24,191,255,.10);border:1px solid rgba(24,191,255,.22);box-shadow:var(--glow);font-size:1.35rem}
.apply-text{color:var(--muted);font-size:.94rem;font-weight:700;line-height:1.85;margin-bottom:15px}

.info-section{padding-top:30px}
.contact-panel{display:flex;justify-content:space-between;gap:28px;align-items:center;background:linear-gradient(135deg,rgba(24,191,255,.10),rgba(255,255,255,.04));border:1px solid rgba(24,191,255,.18);border-radius:30px;padding:30px;box-shadow:var(--shadow-soft);backdrop-filter:blur(14px)}
.contact-panel h2{font-size:1.75rem;font-weight:900;margin-bottom:6px}
.contact-panel p{color:var(--muted);font-weight:700}
.contact-items{display:grid;gap:10px;min-width:310px}
.contact-item{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:var(--muted);font-weight:800}
.contact-line{display:flex;align-items:center;justify-content:flex-start;gap:9px;text-align:right;direction:rtl}
.contact-line-icon{flex:0 0 auto;font-size:1rem;line-height:1}
.contact-phone-line a{direction:ltr;unicode-bidi:embed;text-align:left;color:inherit}
.contact-social-links{display:flex;flex-wrap:wrap;gap:8px}.contact-social-links .contact-item{font-size:.85rem}.link-unavailable{cursor:not-allowed;opacity:.7;pointer-events:none}
.announcement-info{border-color:rgba(24,191,255,.4)}.announcement-warning{border-color:rgba(255,184,77,.45)}.announcement-important,.announcement-urgent{border-color:rgba(255,68,102,.55)}.announcement-success{border-color:rgba(45,212,191,.5)}

footer{margin-top:40px;padding:20px 0;border-top:1px solid rgba(24,191,255,.14);background:rgba(4,14,24,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.footer-mini{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-weight:700}
.footer-mini p{font-size:.88rem;line-height:1.8}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;z-index:2000;padding:18px}
.modal.show{display:flex}
.modal-dialog{width:min(900px,96vw);background:rgba(4,17,28,.96);border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(18px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-head h3{font-weight:900;font-size:1.2rem}
.xbtn{width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--white);cursor:pointer;font-weight:900;transition:var(--transition)}
.xbtn:hover{background:rgba(255,68,102,.16);color:var(--danger)}
.admin-dialog{width:min(470px,95vw)}
.admin-login-body{padding:22px}
.admin-login-text{color:var(--muted);font-weight:700;margin-bottom:14px}
.admin-password-input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:var(--white);outline:0;font-size:1rem;margin-bottom:12px}
.admin-password-input:focus{border-color:rgba(24,191,255,.55);box-shadow:0 0 0 4px rgba(24,191,255,.10)}
.admin-login-error{color:var(--danger);font-weight:800;min-height:24px;margin-bottom:10px}
.admin-login-actions{display:flex;gap:10px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1060px){
  .hero-layout{grid-template-columns:1fr}
  .hero{padding-top:112px}
  .hero-visual{min-height:auto}
  .ann-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.tax-page,body.admin-page{padding-top:118px}
  .navbar{min-height:auto;padding:10px 0 11px;flex-direction:column;align-items:center;gap:8px}
  header.scrolled .navbar{min-height:auto}
  .logo{justify-content:center}.logo-icon{width:39px;height:39px;border-radius:12px}.logo-icon svg,.logo-icon img{width:24px;height:24px}.logo-text{font-size:.96rem}
  .nav-actions{justify-content:center;gap:5px;width:100%}.nav-link{font-size:.81rem;padding:6px 9px}.nav-actions .btn-sm{padding:7px 12px;font-size:.8rem}
  .hero{min-height:auto;padding:150px 0 48px}
  .hero-copy{text-align:center}.hero p{margin:0 auto}.hero-buttons,.hero-metrics{justify-content:center}
  .iso-scene{max-width:300px;min-height:300px}
  .iso-card{width:44px;height:44px;border-radius:12px}
  .iso-card svg{width:18px;height:18px}
  .content-section{padding:56px 0}
  .contact-panel{flex-direction:column;align-items:stretch;text-align:center}.contact-items{min-width:0}
  .card-head{flex-direction:column}
  .card,.contact-panel{min-width:0}
  .card h2,.card h3,.card h4,.contact-panel h2{overflow-wrap:anywhere}
  .modal{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .admin-dialog{width:100%;max-height:calc(100dvh - 24px);overflow-y:auto;border-radius:20px}
  .admin-login-actions .btn{min-height:48px;flex:1 1 130px}
}
@media(max-width:520px){
  .container{padding:0 16px}
  .logo{gap:8px}.logo-text{font-size:.84rem}.nav-actions{flex-wrap:nowrap}.nav-link{font-size:.73rem;padding:5px 7px}.nav-actions .btn-sm{padding:6px 9px;font-size:.73rem}
  .hero-metrics div{flex:1 1 120px}
  .btn{width:100%}
  .nav-actions .btn,.nav-actions .nav-link{width:auto}
  .iso-scene{max-width:230px;min-height:230px}
  .iso-card{width:38px;height:38px}
  .iso-card svg{width:16px;height:16px}
  .hero-buttons .btn,.form-card .btn{min-height:48px}
  .admin-login-body{padding:18px}.modal-head{padding:15px 16px}.modal-head h3{font-size:1.05rem}
}

/* ===== Three-dimensional HR service hub ===== */
.hr-hub-scene{position:relative;width:100%;max-width:450px;min-height:400px;margin:0 auto;perspective:900px;transform-style:preserve-3d;--tilt-x:0deg;--tilt-y:0deg;--core-offset:28px;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .22s ease-out}
.hub-aura{position:absolute;inset:3% -8% 0;background:radial-gradient(ellipse at 50% 67%,rgba(24,191,255,.28),rgba(45,212,191,.10) 35%,transparent 68%);filter:blur(26px);animation:hubPulse 6s ease-in-out infinite alternate}
.hub-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.hub-links path{fill:none;stroke:rgba(24,191,255,.31);stroke-width:.55;stroke-linecap:round;stroke-dasharray:2 2;animation:linkFlow 6s linear infinite}
.hub-platform{position:absolute;z-index:2;left:50%;bottom:8%;width:66%;height:15%;transform:translateX(-50%) rotateX(59deg);border-radius:50%;background:linear-gradient(180deg,rgba(88,219,255,.28),rgba(6,24,43,.88));border:1px solid rgba(126,231,255,.42);box-shadow:0 22px 32px rgba(0,0,0,.36),0 0 42px rgba(24,191,255,.3),inset 0 8px 18px rgba(255,255,255,.13)}.hub-platform::before{content:"";position:absolute;inset:20% 17%;border:1px solid rgba(176,247,255,.38);border-radius:50%}.hub-platform span{position:absolute;inset:33% 31%;border-radius:50%;background:rgba(24,191,255,.5);filter:blur(11px)}
.hub-core{position:absolute;z-index:4;left:50%;top:50%;display:grid;place-items:center;width:104px;height:104px;transform:translate(-50%,-50%) translateY(var(--core-offset)) translateZ(38px) rotateX(-8deg);border-radius:30px;background:linear-gradient(145deg,rgba(125,232,255,.24),rgba(6,20,38,.9) 58%);border:1px solid rgba(153,239,255,.48);box-shadow:0 19px 28px rgba(0,0,0,.32),0 0 35px rgba(24,191,255,.27),inset 0 1px 0 rgba(255,255,255,.22);color:#dcfaff;font-size:1.42rem;font-weight:900;letter-spacing:1px;animation:coreFloat 5.5s ease-in-out infinite alternate}.hub-core i{position:absolute;inset:9px;border:1px solid rgba(45,212,191,.28);border-radius:23px}
.hub-tile{position:absolute;z-index:3;display:grid;place-items:center;width:62px;height:62px;border-radius:19px;background:linear-gradient(145deg,rgba(135,236,255,.18),rgba(7,25,45,.84));border:1px solid rgba(139,234,255,.38);box-shadow:0 15px 25px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2);color:#c7f7ff;font:700 1.72rem/1 Arial,sans-serif;backdrop-filter:blur(10px);transform:translateZ(calc(var(--depth, 20) * 1px));transition:filter .2s ease,box-shadow .2s ease}.hub-tile:hover{filter:brightness(1.18);box-shadow:0 17px 30px rgba(0,0,0,.32),0 0 25px rgba(24,191,255,.38)}.tile-forms{left:13%;top:38%;--depth:25;animation:tileFloat 6s ease-in-out infinite alternate}.tile-alerts{right:12%;top:32%;--depth:20;animation:tileFloat 5.5s ease-in-out -1.5s infinite alternate}.tile-policies{left:27%;top:12%;--depth:18;animation:tileFloat 6.6s ease-in-out -3s infinite alternate}.tile-time{right:25%;top:13%;--depth:30;animation:tileFloat 5.8s ease-in-out -.7s infinite alternate}.tile-profile{left:calc(50% - 31px);top:2%;--depth:16;animation:tileFloat 7s ease-in-out -2s infinite alternate}
@keyframes hubPulse{to{opacity:.72;transform:scale(1.06)}}@keyframes coreFloat{to{transform:translate(-50%,-50%) translateY(calc(var(--core-offset) - 9px)) translateZ(46px) rotateX(-8deg)}}@keyframes tileFloat{to{transform:translateZ(calc(var(--depth, 20) * 1px)) translateY(-9px)}}@keyframes linkFlow{to{stroke-dashoffset:-12}}
@media(max-width:760px){.hr-hub-scene{max-width:310px;min-height:300px;--core-offset:14px}.hub-core{width:82px;height:82px;border-radius:24px;font-size:1.15rem}.hub-tile{width:48px;height:48px;border-radius:15px;font-size:1.32rem}}
@media(max-width:520px){.hr-hub-scene{max-width:245px;min-height:235px}.hub-tile{width:40px;height:40px;border-radius:13px;font-size:1.1rem}.hub-core{width:68px;height:68px;border-radius:21px}.hub-core i{inset:7px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.hr-hub-scene{transition:none!important}.hub-aura,.hub-links path,.hub-core,.hub-tile{animation:none!important}}

/* ===== Portal interaction layer ===== */
:root{--primary:#c9a227;--secondary:#18bfff;--accent:#e3c55f;--background:#020812;--surface:#0a1527;--text:#f5f8ff;--muted:#aebcd0;--border:rgba(255,255,255,.13);--success:#45c28a;--warning:#e6b85c;--danger:#ff6b7d;--radius:18px;--transition:180ms ease}
html{scroll-behavior:smooth}
.skip-link{position:fixed;z-index:9999;top:12px;right:12px;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#fff;color:#071322;font-weight:900;transition:transform var(--transition)}
.skip-link:focus{transform:translateY(0)}
#header{transition:background var(--transition),box-shadow var(--transition),padding var(--transition);position:sticky;top:0;z-index:50}
#header.is-scrolled{background:rgba(2,8,18,.86);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.22)}
#header.is-scrolled .navbar{min-height:58px}
.nav-link.is-active{color:var(--accent)}
.btn{transition:transform var(--transition),box-shadow var(--transition),background var(--transition),opacity var(--transition)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled,.btn.is-loading{cursor:wait;opacity:.68;pointer-events:none}
.btn.is-loading::after{content:"";display:inline-block;width:.78em;height:.78em;margin-inline-start:8px;border:2px solid currentColor;border-left-color:transparent;border-radius:50%;vertical-align:-.08em;animation:buttonSpin .65s linear infinite}
.form-card,.policy-card,.ann-item,.guide-card{height:100%;border-radius:var(--radius)}
.form-card:hover,.policy-card:hover,.ann-item:hover,.guide-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.24)}
.skeleton-card{min-height:132px;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(100deg,rgba(255,255,255,.045) 25%,rgba(255,255,255,.12) 43%,rgba(255,255,255,.045) 61%);background-size:220% 100%;animation:skeletonShimmer 1.25s linear infinite}
.ann-list .skeleton-card{min-height:100px}
.empty-state{display:flex;align-items:center;justify-content:center;min-height:120px;padding:24px;border:1px dashed rgba(212,175,55,.38);border-radius:var(--radius);color:var(--muted);text-align:center;background:rgba(255,255,255,.025);font-weight:700}
.toast-region{position:fixed;z-index:1000;left:18px;bottom:18px;display:grid;gap:9px;width:min(360px,calc(100vw - 36px));pointer-events:none}
.toast{padding:13px 15px;border:1px solid var(--border);border-right:4px solid var(--secondary);border-radius:14px;background:rgba(8,20,38,.94);box-shadow:0 14px 30px rgba(0,0,0,.28);color:var(--text);font-weight:700;animation:toastIn .22s ease-out}
.toast.success{border-right-color:var(--success)}.toast.warning{border-right-color:var(--warning)}.toast.error{border-right-color:var(--danger)}
.back-to-top{position:fixed;z-index:40;left:18px;bottom:18px;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:rgba(8,20,38,.86);color:var(--text);font:900 1.25rem/1 var(--font);opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);box-shadow:0 8px 22px rgba(0,0,0,.24)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
:focus-visible{outline:3px solid rgba(227,197,95,.92);outline-offset:3px}
@keyframes skeletonShimmer{to{background-position:-220% 0}}@keyframes buttonSpin{to{transform:rotate(360deg)}}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.back-to-top{left:12px;bottom:12px}.toast-region{left:12px;bottom:66px}.form-card:hover,.policy-card:hover,.ann-item:hover,.guide-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion: reduce){
  .iso-card,.iso-glow,.iso-particle{animation:none!important}
}
@media print{
  header,.app-header,.nav-actions,.actions,.hero-buttons,footer,.modal{display:none!important}
  body{background:#fff!important;color:#111!important;padding-top:0!important}
  .bg-grid,.bg-orb{display:none!important}
  .card,.visual-card,.contact-panel{box-shadow:none!important;background:#fff!important;border:1px solid #ddd!important}
}
.ann-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.ann-item {
  min-height: 230px;
}

.announcement-card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.announcement-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.announcement-tag,
.announcement-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.announcement-tag {
  color: var(--cyan);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.announcement-date {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.ann-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.45;
  margin: 0;
}

.ann-text {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.9;
  margin: 0;
  flex: 1;
}

.ann-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

html[dir="rtl"] .ann-actions {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .ann-list {
    grid-template-columns: 1fr;
  }

  .ann-item {
    min-height: auto;
  }

  /* ===== FIX: Prevent page sections from disappearing if JS/reveal fails ===== */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.reveal.visible,
.reveal.revealed {
  opacity: 1 !important;
  transform: none !important;
}
}

/* =========================================================
   MASA ALJUD — Forms Cards Layer
   قسم "النماذج" + تمييز نوع البطاقة (خدمة/فورم) بلون ثانوي هادئ
   Additive only — بدون أي عنصر بصري ثقيل أو حركة جديدة
========================================================= */
:root{
  --blue-electric:#1e90ff;
  --blue-electric-soft:rgba(30,144,255,.12);
  --blue-electric-border:rgba(30,144,255,.30);
}
.section-kicker.blue,.badge.blue{
  color:var(--blue-electric);
  background:var(--blue-electric-soft);
  border-color:var(--blue-electric-border);
}

.forms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1200px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;perspective:1200px}
.form-card{display:flex;flex-direction:column}
.forms-grid .form-card{min-height:0}
.forms-grid .form-card .card-head{padding-bottom:10px}
.forms-grid .form-card .card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding-top:10px}
.forms-grid .form-card .card-body p{flex:0;margin:0}
.forms-grid .form-card .card-body .btn{margin-top:auto;align-self:flex-start}

.employee-guide-section{border-top:1px solid var(--border-soft)}
.employee-guide-inline{margin-top:44px;padding-top:40px;border-top:1px solid var(--border-soft)}
.guide-section-title{margin-bottom:24px}
.employee-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.guide-card{height:100%;display:flex;align-items:flex-start;gap:15px;padding:22px 20px}
.guide-card .icon-box{width:50px;height:50px;border-radius:16px;font-size:1.2rem}
.guide-content{min-width:0}
.guide-content h3{font-size:1rem;font-weight:900;line-height:1.6;margin-bottom:8px;color:var(--white)}
.guide-content p{color:var(--muted);font-size:.85rem;font-weight:700;line-height:1.85}

.policies-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.policy-card{height:100%;display:flex;flex-direction:column;border-inline-start:3px solid rgba(218,165,32,.68)}
.policy-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.policy-icon{width:50px;height:50px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;font-size:1.25rem;background:rgba(218,165,32,.10);border:1px solid rgba(218,165,32,.28)}
.policy-type{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px;font-size:.72rem;font-weight:900;color:#f3ca56;background:rgba(218,165,32,.10);border:1px solid rgba(218,165,32,.26)}
.policy-card-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:18px 22px 22px}
.policy-card-content h3{font-size:1.08rem;font-weight:900;line-height:1.65;margin-bottom:8px}
.policy-card-content p{flex:1;color:var(--muted);font-size:.88rem;font-weight:700;line-height:1.85}
.policy-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;color:var(--muted);font-size:.76rem;font-weight:800}
.policy-meta span{padding:5px 9px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.policy-btn{margin-top:18px;color:#f3ca56;border-color:rgba(218,165,32,.36);background:rgba(218,165,32,.08)}
.policy-btn:hover{border-color:rgba(218,165,32,.62);background:rgba(218,165,32,.14)}
.policies-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);font-weight:800}

@media(max-width:1060px){
  .forms-grid,.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .policies-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .employee-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .forms-grid,.services-grid{grid-template-columns:1fr}
  .policies-grid{grid-template-columns:1fr;gap:12px}
  .employee-guide-grid{grid-template-columns:1fr;gap:12px}
  .employee-guide-inline{margin-top:32px;padding-top:30px}
  .guide-card{height:auto;padding:16px;gap:10px}
  .guide-card .icon-box{width:42px;height:42px;border-radius:13px;font-size:1.05rem}
  .guide-content h3{font-size:.98rem;line-height:1.75;margin-bottom:5px}
  .guide-content p{font-size:.83rem;line-height:1.85}
}

/* ===== Mobile compact layout — desktop styles remain unchanged ===== */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{width:100%}
  .orb-1{width:280px;height:280px;right:0;top:0}
  .orb-2{width:240px;height:240px;left:0;bottom:0}
  header{max-width:100vw}
  section,.hero,.container,.hero-layout,.forms-grid,.policies-grid,.employee-guide-grid,.ann-list,.card{width:100%;max-width:100%;min-width:0}
  .container{padding-right:16px;padding-left:16px}

  .navbar{padding:7px 0 8px;gap:5px}
  .logo{gap:7px;min-width:0;max-width:100%;min-height:44px}
  .logo-icon{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
  .logo-icon svg,.logo-icon img{width:20px;height:20px}
  .logo-text{min-width:0;font-size:.84rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
  .nav-actions{width:100%;max-width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:1px 0}
  .nav-actions::-webkit-scrollbar{display:none}
  .nav-link{flex:0 0 auto;min-height:44px;padding:10px 9px;font-size:.74rem;line-height:1.35}
  .nav-actions .btn-sm{flex:0 0 auto;width:auto;min-height:44px;padding:10px 10px;font-size:.73rem;line-height:1.35}

  .hero{padding:124px 0 30px}
  .hero-layout{gap:20px}
  .hero h1{font-size:clamp(1.7rem,8vw,2.2rem);margin-bottom:12px}
  .hero p{font-size:.92rem;line-height:1.8}
  .eyebrow,.section-kicker{margin-bottom:11px;padding:5px 10px;font-size:.74rem}
  .hero-buttons{margin-top:18px;gap:8px}
  .hero-buttons .btn{width:auto;min-height:42px;padding:9px 17px;font-size:.84rem}
  .hero-metrics{margin-top:18px;gap:8px}
  .hero-metrics div{min-width:0;padding:10px 12px;border-radius:14px}
  .hero-metrics strong{font-size:1.25rem}
  .iso-scene{max-width:220px;min-height:210px}

  .content-section{padding:38px 0}
  .section-title{margin-bottom:24px}
  .section-title h2{font-size:1.5rem;margin-bottom:6px;line-height:1.45}
  .section-title p{font-size:.88rem;line-height:1.75}
  .ann-list,.forms-grid{gap:12px}
  .policy-card-top{padding:16px 16px 0}
  .policy-card-content{padding:14px 16px 18px}
  .policy-btn{min-height:42px}
  .card{border-radius:20px}
  .card:hover{transform:none}
  .card-head{flex-direction:row;align-items:flex-start;padding:15px 16px;gap:10px}
  .card-head h3{font-size:1.02rem;line-height:1.5}
  .card-head p{font-size:.8rem;line-height:1.6}
  .badge{padding:4px 9px;font-size:.7rem}
  .card-body{padding:15px 16px}
  .form-card .card-body{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;gap:9px 12px}
  .form-card .icon-box{grid-column:1;grid-row:1 / span 2;margin:0}
  .form-card .apply-text{grid-column:2;grid-row:1;margin:0;align-self:center}
  .form-card .btn{grid-column:2;grid-row:2;justify-self:start;width:auto;min-height:40px;padding:8px 15px;font-size:.8rem}
  .icon-box{width:44px;height:44px;border-radius:14px;font-size:1.05rem}
  .apply-text{font-size:.84rem;line-height:1.7}
  .announcement-card-body{gap:9px}
  .ann-title{font-size:1.1rem}
  .ann-text{font-size:.86rem;line-height:1.75}
  .announcement-tag,.announcement-date{padding:5px 9px;font-size:.7rem}
  .contact-panel{padding:18px;border-radius:20px;gap:16px}
  .contact-panel h2{font-size:1.35rem}
  .contact-item{padding:9px 10px;font-size:.82rem;overflow-wrap:anywhere}
  .contact-line{justify-content:flex-start;text-align:right}
  #hrEmail{display:inline-flex;align-items:center;min-height:44px}
  .xbtn{width:44px;height:44px;min-width:44px;min-height:44px}
  footer{margin-top:24px;padding:16px 0}
}

@media(max-width:520px){
  .container{padding-right:max(14px,env(safe-area-inset-right));padding-left:max(14px,env(safe-area-inset-left))}
  .hero{padding-top:118px;padding-bottom:24px}
  .logo-text{font-size:.8rem}
  .content-section{padding:30px 0}
  .section-title{margin-bottom:18px}
  .section-title h2{font-size:1.32rem}
  .section-title p{font-size:.82rem}
  .card-head{padding:13px 14px}
  .card-body{padding:13px 14px}
  .forms-grid,.ann-list{gap:10px}
  .form-card .card-body{grid-template-columns:40px minmax(0,1fr);gap:8px 10px}
  .icon-box{width:40px;height:40px;border-radius:12px}
  .form-card .btn{min-height:38px;padding:7px 13px}
  .admin-login-actions .btn{width:auto;min-height:42px;padding:9px 16px}
}

/* ===== Mobile natural-flow fix: never clip card content or actions ===== */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  main,section,.container,.hero,.hero-layout,.forms-grid,.policies-grid,.employee-guide-grid,.ann-list{width:100%;max-width:100%;min-width:0}

  .card,.form-card,.guide-card,.policy-card,.ann-item{
    width:100%;
    max-width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex;
    flex-direction:column;
    position:relative;
    transform:none!important;
  }
  .card-head,.card-body,.announcement-card-body{
    width:100%;
    max-width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .card-body{flex:0 0 auto}
  .announcement-card-body{display:flex;flex-direction:column;gap:9px}
  .ann-text{flex:0 0 auto}
  .ann-actions{margin-top:10px}

  .form-card .card-body{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .form-card .icon-box,.form-card .apply-text,.form-card .btn{
    position:static;
    grid-column:auto;
    grid-row:auto;
    flex:none;
  }
  .form-card .icon-box{margin:0 0 2px}
  .form-card .apply-text{width:100%;margin:0}
  .form-card .btn,.ann-item .btn{
    width:auto;
    max-width:100%;
    height:auto;
    min-height:40px;
    margin-top:2px;
    padding:8px 15px;
    position:static;
    transform:none!important;
    align-self:flex-start;
  }
  .card-head h3{line-height:1.75}
  .card-head p,.apply-text{line-height:1.85}
  .ann-title{line-height:1.75}
  .ann-text{line-height:1.85}
  .card:hover,.btn:hover{transform:none!important}
  .content-section{padding-top:32px;padding-bottom:32px}
  .ann-list,.forms-grid{row-gap:12px;column-gap:12px}
  .employee-guide-grid{row-gap:12px;column-gap:12px}
}

@media(max-width:520px){
  .hero{padding-top:118px}
  .content-section{padding-top:26px;padding-bottom:26px}
  .section-title{margin-bottom:16px}
  .ann-list,.forms-grid{row-gap:12px}
  .card-head{padding:13px 14px}
  .card-body{padding:14px}
  .form-card .card-body{gap:9px}
  .form-card .btn,.ann-item .btn{min-height:38px;margin-top:3px;padding:7px 13px}
  .guide-card{padding:14px}
}

/* ===== Public card hover interaction ===== */
.card,.form-card,.policy-card,.ann-item,.guide-card{
  transition:transform 280ms cubic-bezier(.22,.8,.28,1),border-color 280ms cubic-bezier(.22,.8,.28,1),box-shadow 280ms cubic-bezier(.22,.8,.28,1),background 280ms cubic-bezier(.22,.8,.28,1);
}

@media (min-width:761px) and (hover:hover) and (pointer:fine){
  .card:hover,.form-card:hover,.policy-card:hover,.ann-item:hover,.guide-card:hover,
  .card:focus-visible,.form-card:focus-visible,.policy-card:focus-visible,.ann-item:focus-visible,.guide-card:focus-visible,
  .card:focus-within,.form-card:focus-within,.policy-card:focus-within,.ann-item:focus-within,.guide-card:focus-within{
    transform:translateY(-8px);
    border-color:rgba(42,205,220,.68);
    background:linear-gradient(180deg,rgba(17,57,79,.9),var(--card-bg));
    box-shadow:0 22px 42px rgba(0,0,0,.3),0 0 0 1px rgba(42,205,220,.16),0 0 24px rgba(43,205,220,.24),0 0 46px rgba(34,183,222,.12);
  }

  .card:hover .btn,.form-card:hover .btn,.policy-card:hover .btn,.ann-item:hover .btn,.guide-card:hover .btn,
  .card:focus-within .btn,.form-card:focus-within .btn,.policy-card:focus-within .btn,.ann-item:focus-within .btn,.guide-card:focus-within .btn{
    transform:translateY(-2px);
  }
}

@media(prefers-reduced-motion:reduce){
  .card:hover,.form-card:hover,.policy-card:hover,.ann-item:hover,.guide-card:hover,
  .card:focus-visible,.form-card:focus-visible,.policy-card:focus-visible,.ann-item:focus-visible,.guide-card:focus-visible,
  .card:focus-within,.form-card:focus-within,.policy-card:focus-within,.ann-item:focus-within,.guide-card:focus-within{
    transform:none;
  }
}