/* ============================================================
   PERFOZI — HEADER & MEGA MENU (Ruul Style)
   header.css
   ============================================================ */

/* ── TOP BAR ── */
.pf-topbar { background:var(--black); border-bottom:1px solid rgba(255,255,255,.04); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:36px; overflow:hidden; transition:transform .3s ease; }
.pf-tb-left { display:flex; align-items:center; gap:24px; }
.pf-tb-item { display:flex; align-items:center; gap:6px; font-family:var(--fb); font-size:14px; color:var(--t3); }
.pf-tb-item a { color:var(--t3); transition:color .2s; }
.pf-tb-item a:hover { color:var(--cyan); }
.pf-tb-dot { width:4px; height:4px; border-radius:50%; background:var(--cyan); animation:blink 2s infinite; }
.pf-tb-right { display:flex; align-items:center; gap:12px; }
.pf-tb-soc { width:24px; height:24px; display:flex; align-items:center; justify-content:center; opacity:.5; transition:opacity .2s; text-decoration:none; }
.pf-tb-soc:hover { opacity:1; }

/* ── NAV BAR ── */
.pf-header { position:fixed; top:0; left:0; right:0; z-index:9000; transition:transform .3s cubic-bezier(.16,1,.3,1); will-change:transform; }
.pf-nav {
  background:rgba(12,12,12,.96);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--br);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:64px;
  position:relative;
}
.pf-nav.scrolled { box-shadow:0 2px 32px rgba(0,0,0,.5); }

/* ── LOGO ── */
.pf-logo {
  text-decoration:none; display:flex; align-items:center;
  flex-shrink:0; position:relative; z-index:2;
}
.pf-logo-img { height:38px; width:auto; display:block; }

/* ── CENTER NAV LINKS ── */
.pf-links {
  display:flex; align-items:center; gap:1px;
  list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:2;
}
.pf-item { position:relative; }
.pf-btn {
  display:flex; align-items:center; gap:4px;
  font-family:var(--fb); font-size:16px; font-weight:500;
  color:var(--t2); padding:8px 13px; border-radius:7px;
  cursor:pointer; border:none; background:none;
  transition:color .18s, background .18s;
  white-space:nowrap; text-decoration:none;
}
.pf-btn:hover, .pf-item.open .pf-btn { color:var(--white); background:rgba(255,255,255,.07); }
.pf-btn-active { color:var(--white); }
.pf-chevron {
  width:13px; height:13px; flex-shrink:0;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  opacity:.6;
}
.pf-item.open .pf-chevron { transform:rotate(180deg); opacity:1; }

/* ── RIGHT ACTIONS ── */
.pf-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; z-index:2; }
.btn-ghost {
  font-family:var(--fb); font-size:14px; color:var(--t1);
  background:none; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:8px 16px; cursor:pointer;
  transition:all .2s; text-decoration:none;
}
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.3); }
.btn-cta {
  font-family:var(--fh); font-size:12px; font-weight:400;
  letter-spacing:.7px;
  color:var(--black); background:var(--cyan);
  border:none; border-radius:8px; padding:9px 18px;
  cursor:pointer; transition:all .25s; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-cta:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,212,255,.35); }
.pf-ham {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:4px; background:none; border:none;
}
.pf-ham span { display:block; width:20px; height:1.5px; background:var(--t2); border-radius:2px; transition:all .3s; }
.pf-ham.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.pf-ham.open span:nth-child(2) { opacity:0; }
.pf-ham.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }

/* ── OVERLAY ── */
.pf-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  z-index:8999;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.pf-overlay.show { opacity:1; pointer-events:all; }

/* ─────────────────────────────────────────────
   PANEL BASE — shared by all dropdown panels
───────────────────────────────────────────── */
.pf-panel,
.pf-panel-wide,
.pf-panel-hire {
  position:absolute;
  top:100%;
  padding-top:8px;
  left:50%; transform:translateX(-50%) translateY(-6px);
  background:#181818;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,255,.04);
  opacity:0; pointer-events:none;
  transition:opacity .2s cubic-bezier(.16,1,.3,1),
             transform .2s cubic-bezier(.16,1,.3,1);
  z-index:9;
  overflow:hidden;
}
.pf-panel.show,
.pf-panel-wide.show,
.pf-panel-hire.show {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}

.pf-panel     { min-width:320px; }
.pf-panel-wide { width:780px; }
.pf-panel-hire { width:640px; }

/* ── SECTION LABEL ── */
.pd-section {
  font-family:var(--fb);
  font-size:14px; font-weight:700;
  color:var(--t2); letter-spacing:1.5px;
  text-transform:uppercase;
  padding:20px 20px 9px;
  display:block;
}
.pd-section:first-child { padding-top:22px; }

/* ── ITEM ROW ── */
.pd-item {
  display:flex; align-items:center; gap:13px;
  padding:11px 20px;
  text-decoration:none; color:var(--white);
  transition:background .15s;
}
.pd-item:hover { background:rgba(255,255,255,.05); }
.pd-item:hover .pd-name { color:var(--cyan); }

.pd-ico {
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s, border-color .15s;
}
.pd-item:hover .pd-ico { background:var(--ca); border-color:var(--cb); }
.pd-ico-num {
  font-family:var(--fh); font-size:14px; font-weight:800; color:var(--cyan);
}

.pd-name {
  font-family:var(--fh); font-size:15px; font-weight:700;
  color:var(--t1); margin-bottom:2px;
  transition:color .15s; letter-spacing:-.15px; line-height:1.2;
}
.pd-desc { font-family:var(--fb); font-size:14px; color:var(--t2); line-height:1.35; }

.pd-badge {
  margin-left:6px;
  font-family:var(--fb); font-size:14px; font-weight:700;
  color:var(--black); background:var(--cyan);
  border-radius:4px; padding:1px 6px;
  letter-spacing:.3px; text-transform:uppercase;
  vertical-align:middle;
}
.pd-badge-new { background:var(--green); color:var(--black); }

/* ── ITEMS GRID ── */
.pd-grid { display:grid; grid-template-columns:1fr 1fr; padding:0 8px; }
.pd-grid-1 { grid-template-columns:1fr; }

/* ── SEPARATOR ── */
.pd-sep { height:1px; background:rgba(255,255,255,.08); margin:8px 20px; }

/* ── BOTTOM CTA STRIP ── */
.pd-cta-strip {
  margin:10px 14px 14px;
  background:rgba(0,212,255,.07);
  border:1px solid rgba(0,212,255,.15);
  border-radius:12px; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.pd-cta-text {
  font-family:var(--fh); font-size:14px; font-weight:700;
  color:var(--white); letter-spacing:-.2px;
}
.pd-cta-text span {
  display:block; font-family:var(--fb); font-size:14px;
  font-weight:400; color:var(--t2); margin-top:2px; letter-spacing:0;
}
.pd-cta-btn {
  font-family:var(--fh); font-size:14px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--black); background:var(--cyan);
  border:none; border-radius:8px; padding:10px 18px;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:opacity .2s; flex-shrink:0;
}
.pd-cta-btn:hover { opacity:.85; }

/* ── SERVICES WIDE PANEL ── */
.pw-cols { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.pw-col  { padding:8px 0; }
.pw-col + .pw-col { border-left:1px solid rgba(255,255,255,.08); }

/* ── HIRE PANEL ── */
.ph-cols { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.ph-col  { padding:8px 0; }
.ph-col + .ph-col { border-left:1px solid rgba(255,255,255,.06); }

/* ── AVAILABILITY PILL ── */
.pd-avail {
  margin-left:auto; flex-shrink:0;
  display:flex; align-items:center; gap:5px;
  font-family:var(--fb); font-size:14px; color:var(--green);
  white-space:nowrap;
}
.pd-avail-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--green); animation:blink 2s infinite;
}

/* ── SEE ALL LINK ── */
.pd-see-all {
  display:flex; align-items:center; gap:5px;
  padding:10px 20px;
  font-family:var(--fh); font-size:14px; font-weight:800;
  color:var(--cyan); text-decoration:none;
  letter-spacing:.4px; text-transform:uppercase;
}

/* ─────────────────────────────────────────────
   MOBILE MENU
───────────────────────────────────────────── */
.pf-mobile {
  position:fixed; top:100px; left:0; right:0; bottom:0;
  background:rgba(10,10,10,.98);
  z-index:9000;
  overflow-y:auto;
  transform:translateY(-10px);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
  padding:16px 5% 48px;
}
.pf-mobile.show { opacity:1; pointer-events:all; transform:translateY(0); }

.mob-section {
  font-family:var(--fb); font-size:14px; font-weight:700;
  color:var(--white); letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:4px;
  padding:20px 0 8px; border-top:1px solid var(--br); margin-top:8px;
}
.mob-section:first-child { border-top:none; padding-top:8px; margin-top:0; }
.mob-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  text-decoration:none; color:var(--t1);
  font-family:var(--fb); font-size:16px;
  transition:color .15s;
}
.mob-link:hover { color:var(--white); }
.mob-arr { color:var(--t3); }
.mob-badge {
  font-family:var(--fb); font-size:14px; font-weight:700;
  color:var(--black); background:var(--cyan);
  border-radius:4px; padding:2px 7px;
  letter-spacing:.4px; text-transform:uppercase;
}
.mob-ctas {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--br);
}
.mob-cta {
  font-family:var(--fh); font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px;
  text-align:center; text-decoration:none;
  border-radius:9px; padding:14px; transition:all .2s;
}
.mob-cta-outline { color:var(--white); border:1px solid rgba(255,255,255,.15); }
.mob-cta-outline:hover { border-color:var(--cyan); }
.mob-cta-solid   { color:var(--black); background:var(--cyan); }
.mob-cta-solid:hover { opacity:.88; }

/* ── RESPONSIVE ── */
@media (max-width:1050px) {
  .pf-links { gap:0; }
  .pf-btn   { padding:8px 10px; font-size:14px; }
}
@media (max-width:900px) {
  .pf-topbar      { display:none; }
  .pf-mobile      { top:64px; }
  .pf-links       { display:none; }
  .pf-ham         { display:flex; }
  .btn-ghost      { display:none; }
  .pf-panel-wide,
  .pf-panel-hire,
  .pf-panel       { display:none !important; }
  .btn-cta        { padding:9px 9px; }
  .pf-logo-img    { height:32px; }
}