/* ================================================================
   Singh Softech Header v2.0 — Classy · Minimal · Modern
   Brand: #8B00FF → #E8157A → #FF6020
   System font — no external load
   ================================================================ */

:root {
  --hfont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --hbg:   rgba(7, 5, 15, 0.82);
  --hbgs:  rgba(7, 5, 15, 0.98);
  --hbdr:  rgba(255,255,255,.07);
  --htxt:  rgba(255,255,255,.44);
  --htxt2: rgba(255,255,255,.88);
  --hgrad: linear-gradient(135deg, #8B00FF 0%, #E8157A 55%, #FF6020 100%);
  --hwa:   #22C55E;
  --hh:    68px;
}

.ssh-root { font-family: var(--hfont); }
.ssh-root *, .ssh-root *::before, .ssh-root *::after { box-sizing:border-box; margin:0; padding:0; }
.ssh-root a { text-decoration:none; color:inherit; }
.ssh-root button { font-family:var(--hfont); }

/* ================================================================
   ANNOUNCEMENT BAR — thin, gradient, dismissible
   ================================================================ */
.ssh-ann {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, #8B00FF 0%, #E8157A 55%, #FF6020 100%);
  height:36px; padding:0 16px; position:relative; overflow:hidden;
}
/* Shimmer pass */
.ssh-ann::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-20deg);
  animation:ssh-ann-shimmer 4s ease-in-out infinite 2s;
}
@keyframes ssh-ann-shimmer { 0%{left:-100%} 40%{left:120%} 100%{left:120%} }
.ssh-ann-dot {
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6);
  animation:ssh-ann-blink 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes ssh-ann-blink { 0%,100%{opacity:.4} 50%{opacity:1} }
.ssh-ann-text { font-size:.75rem; font-weight:600; color:rgba(255,255,255,.9); letter-spacing:.01em; }
.ssh-ann-link {
  font-size:.72rem; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:1px;
  transition:border-color .18s;
}
.ssh-ann-link:hover { border-color:#fff; }
.ssh-ann-x {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:none; border-radius:4px; cursor:pointer;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); transition:background .15s;
}
.ssh-ann-x:hover { background:rgba(255,255,255,.22); }

/* ================================================================
   HEADER SHELL
   ================================================================ */
.ssh-header {
  background:var(--hbg);
  border-bottom:1px solid var(--hbdr);
  backdrop-filter:blur(48px); -webkit-backdrop-filter:blur(48px);
  width:100%; position:relative;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
/* Brand gradient top rule — 1px, visible but subtle */
.ssh-header::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hgrad); opacity:.6;
}
.ssh-header.ssh-scrolled {
  background:var(--hbgs);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 8px 48px rgba(0,0,0,.6);
}
.ssh-inner {
  max-width:1200px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; height:var(--hh); gap:0;
}

/* ================================================================
   LOGO — Rotating gradient ring + wordmark
   ================================================================ */
.ssh-logo {
  display:flex; align-items:center; gap:12px;
  margin-right:44px; flex-shrink:0; text-decoration:none !important;
}
.ssh-logo-mark { position:relative; width:38px; height:38px; flex-shrink:0; }
/* The spinning ring */
.ssh-logo-ring {
  position:absolute; inset:0; border-radius:10px;
  background:conic-gradient(
    from 0deg,
    #8B00FF 0deg, #E8157A 120deg, #FF6020 200deg, #8B00FF 360deg
  );
  animation:ssh-spin 7s linear infinite;
  border-radius:10px;
}
@keyframes ssh-spin { to { transform:rotate(360deg); } }
/* Inner face */
.ssh-logo-face {
  position:absolute; inset:2px; border-radius:8px;
  background:#07050f;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ssh-logo:hover .ssh-logo-face { transform:scale(1.05); }
.ssh-logo-img {
  width:100%; height:100%; object-fit:contain; padding:3px;
  display:block !important;
}
.ssh-logo-init {
  font-size:.88rem; font-weight:900; color:#fff; letter-spacing:-.03em;
  background:var(--hgrad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* Wordmark */
.ssh-wordmark { display:flex; flex-direction:column; gap:2px; }
.ssh-brand {
  font-size:1.05rem; font-weight:800; letter-spacing:-.03em; line-height:1;
  color:#fff;
}
.ssh-tagline {
  font-size:.58rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.28); line-height:1;
}

/* ================================================================
   DESKTOP NAV LINKS
   ================================================================ */
.ssh-nav { display:flex; align-items:center; gap:2px; flex:1; }
.ssh-nav-link {
  position:relative; padding:6px 11px; border-radius:7px;
  font-size:.83rem; font-weight:500; color:var(--htxt);
  background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; text-decoration:none !important;
  transition:color .15s, background .15s;
  letter-spacing:-.01em;
}
.ssh-nav-link:hover { color:var(--htxt2); background:rgba(255,255,255,.05); }
.ssh-nav-link.ssh-active { color:#fff; }
/* Active indicator — thin gradient underline */
.ssh-nav-link.ssh-active::after {
  content:''; position:absolute; bottom:-1px; left:11px; right:11px;
  height:1.5px; background:var(--hgrad); border-radius:2px;
}
.ssh-chevron { opacity:.35; transition:transform .2s; flex-shrink:0; }
.ssh-has-dd { position:relative; }
.ssh-has-dd:hover > .ssh-nav-link .ssh-chevron,
.ssh-has-dd.open > .ssh-nav-link .ssh-chevron { transform:rotate(180deg); opacity:.7; }

/* ── Regular small dropdown ──────────────────────────────────── */
.ssh-dropdown {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  min-width:200px; background:rgba(8,5,18,.98);
  border:1px solid var(--hbdr); border-radius:12px; padding:6px;
  backdrop-filter:blur(40px);
  opacity:0; pointer-events:none;
  transition:opacity .16s, transform .18s cubic-bezier(.4,0,.2,1); z-index:800;
}
.ssh-has-dd:hover .ssh-dropdown,
.ssh-has-dd.open .ssh-dropdown { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
.ssh-dd-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:7px;
  font-size:.81rem; font-weight:500; color:rgba(255,255,255,.6);
  transition:background .14s, color .14s;
}
.ssh-dd-row:hover { background:rgba(255,255,255,.06); color:#fff; }
.ssh-dd-ico { font-size:.95rem; flex-shrink:0; }

/* ================================================================
   SERVICES MEGA DROPDOWN — the centrepiece
   ================================================================ */
.ssh-mega {
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:720px;
  background:rgba(8,5,18,.99);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden;
  backdrop-filter:blur(60px); -webkit-backdrop-filter:blur(60px);
  box-shadow:0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(139,0,255,.1);
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .22s cubic-bezier(.4,0,.2,1); z-index:800;
}
.ssh-has-dd:hover .ssh-mega,
.ssh-has-dd.open .ssh-mega { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }

.ssh-mega-inner { padding:24px; }

/* Mega top row */
.ssh-mega-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:20px; gap:20px;
}
.ssh-mega-title {
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--hgrad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:4px;
}
.ssh-mega-sub { font-size:.76rem; color:rgba(255,255,255,.32); line-height:1.5; max-width:340px; }
.ssh-mega-all {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.1); border-radius:6px;
  padding:7px 12px; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.ssh-mega-all:hover { border-color:rgba(255,255,255,.25); color:#fff; }

/* Service cards grid — 4 columns × 2 rows = 8 services */
.ssh-mega-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin-bottom:18px;
}
.ssh-svc-card {
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:10px;
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
  text-decoration:none !important;
}
.ssh-svc-card:hover {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}
.ssh-svc-ico {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
  transition:background .15s;
}
.ssh-svc-ico svg { width:17px; height:17px; color:rgba(255,255,255,.55); }
.ssh-svc-card:hover .ssh-svc-ico svg { color:#fff; }
.ssh-svc-text strong {
  display:block; font-size:.76rem; font-weight:700;
  color:rgba(255,255,255,.78); line-height:1.2; margin-bottom:2px;
  transition:color .15s;
}
.ssh-svc-card:hover .ssh-svc-text strong { color:#fff; }
.ssh-svc-text span { font-size:.67rem; color:rgba(255,255,255,.3); line-height:1.3; display:block; }

/* Mega footer bar */
.ssh-mega-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.06);
}
.ssh-mega-foot-left {
  display:flex; align-items:center; gap:7px;
  font-size:.73rem; color:rgba(255,255,255,.3);
}
.ssh-mega-foot-left svg { opacity:.5; flex-shrink:0; }
.ssh-mega-cta {
  font-size:.76rem; font-weight:700; color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:7px 14px;
  transition:background .15s, color .15s, border-color .15s;
}
.ssh-mega-cta:hover { background:rgba(139,0,255,.15); border-color:rgba(139,0,255,.3); color:#fff; }

/* ================================================================
   RIGHT PANEL
   ================================================================ */
.ssh-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }

/* Rating chip */
.ssh-rating-chip {
  display:flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:600; color:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.07); border-radius:100px;
  padding:5px 10px; white-space:nowrap;
}
.ssh-star { color:#f59e0b; font-size:.8rem; }
.ssh-rating-dot { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.2); }

/* WhatsApp button */
.ssh-wa-btn {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.18);
  color:var(--hwa); display:flex; align-items:center; justify-content:center;
  text-decoration:none !important;
  transition:all .18s;
}
.ssh-wa-btn:hover { background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.4); transform:translateY(-1px); }

/* Phone button */
.ssh-phone-btn {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.04);
  font-size:.78rem; font-weight:600; color:var(--htxt);
  text-decoration:none !important; white-space:nowrap;
  transition:all .18s;
}
.ssh-phone-btn svg { opacity:.6; flex-shrink:0; }
.ssh-phone-btn:hover { border-color:rgba(255,255,255,.16); color:var(--htxt2); background:rgba(255,255,255,.07); }

/* Primary CTA button */
.ssh-cta-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:100px;
  font-size:.82rem; font-weight:700; color:#fff;
  text-decoration:none !important; white-space:nowrap;
  background:var(--hgrad);
  box-shadow:0 2px 20px rgba(232,21,122,.25);
  transition:transform .18s, box-shadow .18s;
  position:relative; overflow:hidden;
}
.ssh-cta-btn::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent);
  border-radius:100px 100px 0 0;
}
.ssh-cta-btn svg { position:relative; z-index:1; transition:transform .18s; }
.ssh-cta-btn span { position:relative; z-index:1; }
.ssh-cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(232,21,122,.45); color:#fff; }
.ssh-cta-btn:hover svg { transform:translateX(3px); }

/* Hamburger */
.ssh-ham {
  display:none; width:34px; height:34px; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; cursor:pointer; flex-shrink:0;
  transition:background .18s, border-color .18s;
}
.ssh-ham:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); }
.ssh-bar {
  display:block; width:16px; height:1.5px;
  background:rgba(255,255,255,.65); border-radius:2px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.ssh-bar-short { width:11px; }
.ssh-ham.open .ssh-bar:nth-child(1) { transform:rotate(45deg) translate(2px, 4.5px); width:16px; }
.ssh-ham.open .ssh-bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.ssh-ham.open .ssh-bar:nth-child(3) { transform:rotate(-45deg) translate(2px, -4.5px); width:16px; }

/* ================================================================
   MOBILE DRAWER
   ================================================================ */
.ssh-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(100vw, 340px);
  background:rgba(7,5,15,.99); border-left:1px solid var(--hbdr);
  backdrop-filter:blur(48px);
  z-index:9998; overflow-y:auto;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.ssh-drawer[aria-hidden="false"] { transform:translateX(0); }
.ssh-drawer-wrap { display:flex; flex-direction:column; min-height:100%; }

/* Drawer top bar */
.ssh-drawer-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--hbdr); flex-shrink:0;
}
.ssh-drawer-logo {
  display:flex; align-items:center; gap:10px; text-decoration:none !important;
  font-size:.95rem; font-weight:800; color:#fff;
}
.ssh-drawer-mark { position:relative; width:32px; height:32px; flex-shrink:0; }
.ssh-drawer-ring { position:absolute; inset:0; border-radius:8px; background:conic-gradient(from 0deg,#8B00FF,#E8157A 120deg,#FF6020 200deg,#8B00FF); animation:ssh-spin 7s linear infinite; }
.ssh-drawer-face { position:absolute; inset:2px; border-radius:6px; background:#07050f; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ssh-drawer-face img { width:100%; height:100%; object-fit:contain; padding:2px; }
.ssh-drawer-face span { font-size:.78rem; font-weight:900; background:var(--hgrad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ssh-drawer-close {
  width:32px; height:32px; border-radius:7px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.5);
  transition:background .15s; flex-shrink:0;
}
.ssh-drawer-close:hover { background:rgba(255,255,255,.1); color:#fff; }

/* Drawer nav */
.ssh-mob-nav { flex:1; padding:8px 0; }
.ssh-mob-link {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:12px 20px;
  font-size:.86rem; font-weight:500; color:rgba(255,255,255,.55);
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer; text-decoration:none !important;
  transition:color .15s, background .15s;
}
.ssh-mob-link:hover { color:var(--htxt2); background:rgba(255,255,255,.025); }
.ssh-mob-chev { opacity:.3; transition:transform .22s; flex-shrink:0; }
.ssh-mob-grp.open .ssh-mob-chev { transform:rotate(180deg); }
.ssh-mob-sub { overflow:hidden; max-height:0; transition:max-height .28s cubic-bezier(.4,0,.2,1); background:rgba(0,0,0,.2); }
.ssh-mob-grp.open .ssh-mob-sub { max-height:520px; }

/* Service rows in mobile sub-menu */
.ssh-mob-svc {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px 10px 26px;
  font-size:.8rem; color:rgba(255,255,255,.4);
  border-bottom:1px solid rgba(255,255,255,.03); text-decoration:none !important;
  transition:color .15s;
}
.ssh-mob-svc:hover { color:rgba(255,255,255,.75); }
.ssh-mob-svc-ico { width:20px; height:20px; flex-shrink:0; }
.ssh-mob-svc-ico svg { width:100%; height:100%; }
.ssh-mob-child {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px 10px 26px;
  font-size:.8rem; color:rgba(255,255,255,.4);
  border-bottom:1px solid rgba(255,255,255,.03); text-decoration:none !important;
  transition:color .15s;
}
.ssh-mob-child:hover { color:rgba(255,255,255,.75); }

/* Drawer CTA buttons */
.ssh-mob-ctas { padding:16px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--hbdr); }
.ssh-mob-cta-grad {
  display:flex; align-items:center; justify-content:center;
  padding:13px; border-radius:10px; background:var(--hgrad);
  font-size:.88rem; font-weight:700; color:#fff; text-decoration:none !important;
  transition:opacity .2s;
}
.ssh-mob-cta-grad:hover { opacity:.9; color:#fff; }
.ssh-mob-cta-wa {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px; border-radius:10px;
  background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.18);
  font-size:.86rem; font-weight:700; color:var(--hwa); text-decoration:none !important;
  transition:background .18s;
}
.ssh-mob-cta-wa:hover { background:rgba(34,197,94,.12); color:var(--hwa); }

/* Contact info line */
.ssh-mob-contact {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px; padding:12px 16px 20px;
  font-size:.72rem; color:rgba(255,255,255,.22);
}
.ssh-mob-contact a { color:rgba(255,255,255,.22); text-decoration:none; transition:color .15s; }
.ssh-mob-contact a:hover { color:rgba(255,255,255,.6); }

/* Overlay */
.ssh-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:9997; opacity:0; pointer-events:none;
  transition:opacity .28s; backdrop-filter:blur(4px);
}
.ssh-overlay.open { opacity:1; pointer-events:all; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px) {
  .ssh-inner { padding:0 24px; }
  .ssh-logo { margin-right:28px; }
  .ssh-rating-chip { display:none; }
}
@media (max-width:960px) {
  .ssh-nav, .ssh-phone-btn { display:none; }
  .ssh-ham { display:flex; }
}
@media (max-width:600px) {
  :root { --hh:62px; }
  .ssh-inner { padding:0 16px; }
  .ssh-logo { margin-right:0; }
  .ssh-brand { font-size:.95rem; }
  .ssh-cta-btn { font-size:.76rem; padding:8px 14px; }
  .ssh-cta-btn span { display:none; }
  .ssh-cta-btn::after { content:"Quote"; }
  .ssh-ann { height:32px; }
  .ssh-ann-text { font-size:.7rem; }
}