/* ==========================================================================
   Expert IT Zone — Premium design system
   Palette: brand saffron (#FF9933 → #FF6B1A) + luxury gold + deep charcoal
   ========================================================================== */

:root {
  --kesari: #FF9933;
  --orange: #FF6B1A;
  --gold: #D9A441;
  --gold-soft: #F3D9A4;
  --ink: #0C0D10;
  --ink-2: #14161C;
  --ink-3: #1D2029;
  --line: rgba(255, 255, 255, 0.10);
  --muted: rgba(255, 255, 255, 0.62);
  --paper: #FBFAF8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--ink);
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: 'Sora', 'Poppins', sans-serif; letter-spacing: -0.02em; }

.font-display { font-family: 'Fraunces', Georgia, serif; }

/* ------------------------------ Scrollbar -------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0C0D10; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--kesari), var(--orange));
  border-radius: 8px;
}

::selection { background: rgba(255, 153, 51, .35); }

/* -------------------------------- Text ----------------------------------- */
.grad-text {
  background: linear-gradient(100deg, #FFD79A 0%, var(--kesari) 42%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-text {
  background: linear-gradient(100deg, #F7E7C1, var(--gold) 55%, #B07C25);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid rgba(217, 164, 65, .35);
  background: rgba(217, 164, 65, .08);
  padding: 8px 16px;
  border-radius: 999px;
}

/* ------------------------------- Surfaces -------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.card {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(255,153,51,.14), transparent 42%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 164, 65, .38);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.card:hover::before { opacity: 1; }

.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(217,164,65,.45), transparent); }

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-gold {
  background: linear-gradient(120deg, #FFC46B, var(--kesari) 45%, var(--orange));
  color: #17110A;
  box-shadow: 0 10px 30px rgba(255, 107, 26, .28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 107, 26, .42); }

.btn-ghost { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

.btn-dark { background: #0F1116; color: #fff; border-color: rgba(255,255,255,.14); }
.btn-dark:hover { background: #171A21; }

.btn:focus-visible { outline: 2px solid var(--kesari); outline-offset: 3px; }

/* --------------------------------- Nav ----------------------------------- */
.nav-link {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.76);
  padding: 8px 2px;
  text-decoration: none;
  transition: color .25s;
}
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--kesari), var(--orange));
  transition: width .3s;
}
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: #fff; }

/* ------------------------------- Sections -------------------------------- */
.section { padding: 96px 0; }
@media (max-width: 768px) { .section { padding: 64px 0; } }

.container-x { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container-x { padding: 0 18px; } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------ Decorations ------------------------------ */
.aurora {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* -------------------------------- Forms ---------------------------------- */
.field {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 15px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field::placeholder { color: rgba(255,255,255,.38); }
.field:focus {
  outline: none;
  border-color: rgba(255,153,51,.65);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(255,153,51,.14);
}
.field option { background: #14161C; color: #fff; }
.label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin-bottom: 8px; }

/* ------------------------------- Marquee --------------------------------- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* -------------------------------- Tables --------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: rgba(255,255,255,.035); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; text-transform: uppercase;
}
.badge-ok { background: rgba(70,161,113,.16); color: #7FD3A4; border: 1px solid rgba(70,161,113,.32); }
.badge-warn { background: rgba(213,128,59,.16); color: #F0B27E; border: 1px solid rgba(213,128,59,.32); }
.badge-bad { background: rgba(229,100,88,.16); color: #F0918A; border: 1px solid rgba(229,100,88,.32); }
.badge-info { background: rgba(39,131,222,.16); color: #8FC2F2; border: 1px solid rgba(39,131,222,.32); }

/* Table horizontal scroll on small screens */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }