/* ============================================================
   Premium Polish Layer — UI enhancement only.
   Applies a unified luxury SaaS design language across the site
   without altering structure, routes, or functionality.
   Accent: #F59E0B (amber-500). 8px grid. Soft glass + depth.
   ============================================================ */

:root{
  --pp-accent:#F59E0B;
  --pp-accent-2:#FBBF24;
  --pp-accent-soft:rgba(245,158,11,.12);
  --pp-ink:#0B1220;
  --pp-ink-2:#1F2937;
  --pp-muted:#6B7280;
  --pp-line:rgba(15,23,42,.08);
  --pp-surface:#ffffff;
  --pp-surface-tint:linear-gradient(180deg,#ffffff 0%,#FAF7F1 100%);
  --pp-radius-sm:14px;
  --pp-radius-md:20px;
  --pp-radius-lg:28px;
  --pp-radius-xl:32px;
  --pp-shadow-1:0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.06);
  --pp-shadow-2:0 4px 10px rgba(15,23,42,.05), 0 18px 40px rgba(15,23,42,.10);
  --pp-shadow-3:0 10px 24px rgba(245,158,11,.18), 0 24px 60px rgba(15,23,42,.14);
  --pp-ease:cubic-bezier(.22,.61,.36,1);
}

/* Subtle page tint behind everything */
body{ background:#FBFAF7; }

/* ---------- Buttons ---------- */
.header1-section-area .cmn--btn a,
.cmn--btn > a,
a.cmn--btn,
button.cmn--btn{
  border-radius:14px !important;
  transition:transform .25s var(--pp-ease), box-shadow .25s var(--pp-ease), background-color .25s var(--pp-ease) !important;
}
.cmn--btn > a:hover,
a.cmn--btn:hover,
button.cmn--btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--pp-shadow-3);
}

/* Primary CTA — recolor to amber accent (keeps existing markup) */
.hero1-section-area a[href="/certifications"],
a.btn-primary-orange,
.pp-cta-primary{
  background:linear-gradient(180deg,var(--pp-accent-2) 0%, var(--pp-accent) 100%) !important;
  box-shadow:0 8px 20px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Cards: bigger radii, softer depth ---------- */
.hero-cards-grid .hero-card,
.feature-card,
.category-card,
.trust-logos-wrap,
.ai-consultant-banner,
.hero1-section-area .elements2{
  border-radius:var(--pp-radius-lg) !important;
  box-shadow:var(--pp-shadow-2) !important;
  border:1px solid var(--pp-line) !important;
  transition:transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease) !important;
}
.hero-cards-grid .hero-card:hover,
.feature-card:hover,
.category-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--pp-shadow-3) !important;
}

/* Category / feature card icons — amber tinted round chips */
.hero-cards-grid .hero-card .icon,
.hero-cards-grid .hero-card .card-icon,
.feature-card .icon,
.category-card .icon{
  background:var(--pp-accent-soft) !important;
  color:var(--pp-accent) !important;
  border-radius:16px !important;
}

/* ---------- Navigation — pill glass ---------- */
.header1-section-area .main-header{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-radius:22px !important;
  box-shadow:var(--pp-shadow-1) !important;
  border:1px solid rgba(255,255,255,.6) !important;
}
.header1-section-area .main-header a{ transition:color .2s var(--pp-ease); }
.header1-section-area .main-header a:hover{ color:var(--pp-accent) !important; }

/* Active nav underline in amber */
.header1-section-area .main-header .active,
.header1-section-area .main-header .current{
  color:var(--pp-accent) !important;
}

/* ---------- Hero floating badges (elements2) ---------- */
.hero1-section-area .hero-images-area .elements2{
  border-radius:22px !important;
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.92) !important;
}

/* ---------- Trust logos section ---------- */
.trust-logos-wrap,
.partners-section,
.brand-section{
  background:var(--pp-surface-tint) !important;
  border-radius:var(--pp-radius-xl) !important;
  box-shadow:var(--pp-shadow-1) !important;
  border:1px solid var(--pp-line) !important;
}

/* ---------- AI recommendation banner ---------- */
.ai-consultant-banner{
  border-radius:var(--pp-radius-xl) !important;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(11,20,50,.35) !important;
}
.ai-consultant-banner a,
.ai-consultant-banner .cmn--btn a{
  background:linear-gradient(180deg,var(--pp-accent-2), var(--pp-accent)) !important;
  border-radius:14px !important;
}

/* ---------- Section titles ---------- */
.section-title, h2.title, .heading-area h2{
  letter-spacing:-.01em;
}

/* ---------- Micro-interactions ---------- */
a, button{ transition:color .2s var(--pp-ease), background-color .2s var(--pp-ease), transform .2s var(--pp-ease); }
.pp-fade-in{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--pp-ease), transform .7s var(--pp-ease); }
.pp-fade-in.in{ opacity:1; transform:none; }

/* ---------- Spacing: 8px rhythm helpers ---------- */
.section-padding, section.py-120{ padding-top:clamp(64px,8vw,120px); padding-bottom:clamp(64px,8vw,120px); }

/* ---------- Focus rings (accessibility) ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--pp-accent);
  outline-offset:3px;
  border-radius:10px;
}

/* ---------- Selection ---------- */
::selection{ background:var(--pp-accent); color:#fff; }

/* Mobile refinement: keep the same premium feel */
@media (max-width:767px){
  .hero-cards-grid .hero-card,
  .feature-card,
  .category-card{ border-radius:22px !important; }
  .header1-section-area .main-header{ border-radius:18px !important; }
}

/* ============================================================
   Hero — premium floating credential cards (reference match)
   Positioned around the person on the LEFT side of the layout.
   ============================================================ */
.hero1-section-area .hero-images-area{ position:relative; }
.hero1-section-area .hero-images-area .elements3{ display:none !important; }

.hero-float-card{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 12px 28px rgba(15,23,42,.10),
    0 30px 60px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.05);
  direction:rtl;
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  transform:translateY(0);
  transition:transform .5s var(--pp-ease), box-shadow .5s var(--pp-ease);
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-float-card:hover{ transform:translateY(-4px); box-shadow:0 20px 60px rgba(15,23,42,.18); }

.hero-float-card--top{
  top:14%;
  right:auto;
  left:2%;
  animation-delay:0s;
}
.hero-float-card--bottom{
  top:auto;
  bottom:12%;
  left:6%;
  animation-delay:1.2s;
}

.hero-float-card__check{
  width:24px; height:24px; flex-shrink:0;
  border-radius:50%;
  background:#16A34A;
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(22,163,74,.35);
  margin-top:2px;
}

.hero-float-card__body{ display:flex; flex-direction:column; gap:2px; text-align:right; }
.hero-float-card__eyebrow{
  font-size:11px; font-weight:600; color:#6B7280; letter-spacing:.02em;
}
.hero-float-card__logo{
  width:78px; height:auto; object-fit:contain; margin:2px 0 0;
}
.hero-float-card__caption{
  font-size:12px; font-weight:600; color:#F59E0B;
}

.hero-float-card__icon{
  width:44px; height:44px; flex-shrink:0;
  border-radius:12px;
  background:linear-gradient(180deg,#EEF2FF,#E0E7FF);
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;
}
.hero-float-card__icon img{ max-width:100%; max-height:100%; object-fit:contain; }
.hero-float-card__title{
  font-family:'Mazaj','IBM Plex Sans Arabic',sans-serif;
  font-size:15px; font-weight:800; color:#0B1220; line-height:1.2;
}
.hero-float-card__sub{
  font-size:11.5px; font-weight:500; color:#6B7280; line-height:1.5;
}

@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(-8px); }
}

/* Larger screens — push cards further out for the reference composition */
@media (min-width:1200px){
  .hero-float-card--top{ left:-4%; top:16%; }
  .hero-float-card--bottom{ left:0%; bottom:14%; }
}

/* Mobile — hide floating cards (mobile hero already has its own composition) */
@media (max-width:991px){
  .hero-float-card{ display:none !important; }
}

/* Hide the legacy inline chip (elements2) on desktop — replaced by premium cards */
@media (min-width:992px){
  .hero1-section-area > .container .hero-images-area .elements2{ display:none !important; }
}

/* ---------- Hero primary CTA — richer amber gradient with glow ---------- */
.hero1-section-area .btn-primary-orange,
.hero1-section-area a[href="/certifications"]{
  background:linear-gradient(180deg,#FBBF24 0%, #F59E0B 55%, #EA8A06 100%) !important;
  box-shadow:
    0 10px 24px rgba(245,158,11,.35),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
  border:1px solid rgba(234,138,6,.6) !important;
}

/* ---------- Category cards — tighter reference match ---------- */
#choose .choose-box{
  border-radius:24px !important;
  box-shadow:0 2px 4px rgba(15,23,42,.03), 0 18px 40px rgba(15,23,42,.06) !important;
}
#choose .choose-box:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 8px rgba(15,23,42,.04), 0 24px 60px rgba(15,23,42,.10) !important;
}

/* ============================================================
   Hero — reference blueprint rebuild
   Subtitle lead, decorative orbs, dotted grid, ring, gradient wash
   ============================================================ */
.hero1-section-area{ position:relative; overflow:hidden; }
.hero1-section-area::after{
  content:"";
  position:absolute; inset:auto -10% -30% -10%;
  height:70%;
  background:
    radial-gradient(60% 60% at 20% 40%, rgba(245,158,11,.10), transparent 60%),
    radial-gradient(50% 50% at 85% 30%, rgba(59,130,246,.08), transparent 60%);
  pointer-events:none; z-index:1;
}

.hero-subtitle-lead{
  font-family:'Mazaj','IBM Plex Sans Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.15;
  color:#0B1220;
  margin:6px 0 4px;
  letter-spacing:-.01em;
}
.hero-subtitle-lead span{
  display:inline-block;
  background:linear-gradient(135deg,#F59E0B 0%,#EA8A06 60%,#c96f04 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (max-width:991px){ .hero-subtitle-lead{ display:none; } }

/* Decorative orbs & shapes behind the person image */
.hero1-section-area .hero-images-area{ isolation:isolate; }
.hero-orb{
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
}
.hero-orb--amber{
  width:420px; height:420px;
  background:radial-gradient(circle at 50% 50%, #F59E0B 0%, #F59E0B 55%, rgba(245,158,11,.55) 68%, rgba(245,158,11,0) 78%);
  top:8%; right:14%;
  filter:none;
  opacity:.95;
}
.hero-orb--blue{
  width:220px; height:220px;
  background:radial-gradient(circle,rgba(59,130,246,.28),rgba(59,130,246,0) 65%);
  bottom:-20px; left:-20px;
  filter:blur(40px);
}
.hero-orb-ring{
  position:absolute; z-index:0; pointer-events:none;
  width:78%; aspect-ratio:1; top:8%; right:6%;
  border-radius:50%;
  background:
    radial-gradient(circle at center, transparent 62%, rgba(15,30,60,.06) 62.4%, transparent 63.2%),
    radial-gradient(circle at center, transparent 74%, rgba(245,158,11,.18) 74.4%, transparent 75.2%);
}
.hero-dots{
  position:absolute; z-index:0; pointer-events:none;
  width:120px; height:120px; bottom:6%; right:2%;
  background-image:radial-gradient(rgba(15,30,60,.18) 1.4px, transparent 1.6px);
  background-size:14px 14px;
  opacity:.55;
  mask-image:radial-gradient(circle,#000 40%,transparent 75%);
  -webkit-mask-image:radial-gradient(circle,#000 40%,transparent 75%);
}
@keyframes heroOrb{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-10px,-14px) scale(1.06); }
}
.hero1-section-area .hero-images-area .img1{ position:relative; z-index:2; }

@media (max-width:991px){
  .hero-orb, .hero-orb-ring, .hero-dots{ display:none !important; }
  .hero1-section-area::after{ display:none; }
}

/* ---------- Footer logo: large + transparent + subtle glow ---------- */
.em-footer-logo-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
  border-radius:18px;
  padding:10px;
  background:transparent;
  overflow:visible;
}
.vl-footer1-section-area .footer-logo1 .em-footer-logo{
  position:relative;
  z-index:2;
  display:block;
  height:auto !important;
  width:auto !important;
  max-height:155px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(245,158,11,.35));
  transition:transform .4s var(--pp-ease), filter .4s var(--pp-ease);
}
.vl-footer1-section-area .footer-logo1 .em-footer-logo-wrap:hover .em-footer-logo,
.vl-footer1-section-area .footer-logo1 .em-footer-logo-wrap:focus-within .em-footer-logo{
  transform:scale(1.04);
  filter:drop-shadow(0 6px 22px rgba(245,158,11,.55)) drop-shadow(0 0 20px rgba(251,191,36,.35));
}
/* Soft pulsing glow behind the logo (transparent bg) */
.em-footer-logo-wrap::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-8px;
  border-radius:24px;
  background:radial-gradient(circle at 50% 50%, rgba(251,191,36,.28), transparent 65%);
  filter:blur(14px);
  opacity:.75;
  animation:footerLogoGlow 3.2s ease-in-out infinite;
}
@keyframes footerLogoGlow{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%    { opacity:.9; transform:scale(1.06); }
}
@media (max-width:767px){
  .vl-footer1-section-area .footer-logo1 .em-footer-logo{ max-height:120px; }
  .em-footer-logo-wrap{ padding:8px; border-radius:14px; }
}
@media (max-width:575px){
  .vl-footer1-section-area .footer-logo1 .em-footer-logo{ max-height:105px; }
}