/* ==========================================================================
   PREMIUM PAGES — shared design layer for Careers, Contact Us, Fraud Alert
   and Affiliate Program. Look only: tokens, aurora hero, glass/spotlight
   cards, buttons, form fields, scroll-reveal. Page-specific layout lives in
   each page's own <style> block; behaviour lives in /js/premium-pages.js.
   ========================================================================== */

:root {
  --pgx-ink: #070D1F;
  --pgx-ink-2: #0E1A3D;
  --pgx-violet: #7C5CFF;
  --pgx-cyan: #22D3EE;
  --pgx-orange: #FF5722;
  --pgx-amber: #FFB020;
  --pgx-line: #E7EBF5;
  --pgx-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- scroll progress ---------- */
.pgx-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--pgx-orange), var(--pgx-violet), var(--pgx-cyan));
}

/* ---------- aurora hero ---------- */
.pgx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 50% -12%, #1a2f7a 0%, transparent 62%),
    var(--pgx-ink);
}

.pgx-hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(36% 40% at 16% 32%, rgba(255, 87, 34, .55), transparent 70%),
    radial-gradient(34% 40% at 84% 20%, rgba(124, 92, 255, .6), transparent 70%),
    radial-gradient(40% 44% at 62% 92%, rgba(34, 211, 238, .34), transparent 70%);
  filter: blur(46px);
  animation: pgxAurora 18s ease-in-out infinite alternate;
}

.pgx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(72% 82% at 50% 38%, #000 25%, transparent 80%);
  mask-image: radial-gradient(72% 82% at 50% 38%, #000 25%, transparent 80%);
}

@keyframes pgxAurora {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(4%, 4%, 0) scale(1.14) rotate(9deg); }
}

/* eyebrow pill */
.pgx-eyebrow,
.crr-hero-badge,
.aff-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  font: 800 12px/1 var(--font-main);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pgx-eyebrow::before,
.crr-hero-badge::before,
.aff-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pgx-orange);
  animation: pgxPulse 2.2s infinite;
}

@keyframes pgxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 87, 34, .75); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 87, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}

/* gradient headline */
.pgx-title,
.crr-hero h1,
.aff-title,
.contact-page-header h1,
.fr-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  background: linear-gradient(100deg, #fff 0%, #dfe8ff 45%, #ffc2a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* entrance for hero children (class added by JS) */
.pgx-js .pgx-rise {
  animation: pgxRise 1s var(--pgx-ease) both;
  animation-delay: calc(var(--i, 0) * 120ms + 80ms);
}

@keyframes pgxRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */
.pgx-btn,
.crr-btn-primary,
.crr-btn-dark,
.contact-submit-btn,
.fraud-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  font: 800 15px/1 var(--font-main);
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #FF5722 0%, #FF8A3D 100%);
  box-shadow: 0 14px 34px -10px rgba(255, 87, 34, .75), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .3s var(--pgx-ease), box-shadow .3s var(--pgx-ease), filter .3s;
}

.pgx-btn::after,
.crr-btn-primary::after,
.crr-btn-dark::after,
.contact-submit-btn::after,
.fraud-submit-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--pgx-ease);
  pointer-events: none;
}

.pgx-btn:hover,
.crr-btn-primary:hover,
.crr-btn-dark:hover,
.contact-submit-btn:hover:not(:disabled),
.fraud-submit-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -12px rgba(255, 87, 34, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.pgx-btn:hover::after,
.crr-btn-primary:hover::after,
.crr-btn-dark:hover::after,
.contact-submit-btn:hover::after,
.fraud-submit-btn:hover::after {
  transform: translateX(130%);
}

.pgx-btn:active,
.crr-btn-primary:active,
.crr-btn-dark:active,
.contact-submit-btn:active,
.fraud-submit-btn:active {
  transform: translateY(-1px) scale(.99);
}

.contact-submit-btn:disabled,
.fraud-submit-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.pgx-btn--ghost,
.crr-btn-outline,
.crr-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  cursor: pointer;
  font: 800 15px/1 var(--font-main);
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .3s var(--pgx-ease), background .3s, border-color .3s;
}

.pgx-btn--ghost:hover,
.crr-btn-outline:hover,
.crr-btn-light:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .55);
}

/* ---------- spotlight cards (pointer-follow glow + gradient edge) ---------- */
.pgx-spot {
  position: relative;
  isolation: isolate;
}

.pgx-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 87, 34, .11), transparent 62%);
  pointer-events: none;
}

.pgx-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 87, 34, .9), rgba(124, 92, 255, .55) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.pgx-spot:hover::before,
.pgx-spot:hover::after {
  opacity: 1;
}

/* ---------- scroll reveal (class added by JS, removed once finished) ---------- */
.pgx-js .pgx-reveal {
  opacity: 0;
  transform: translateY(32px) scale(.98);
  transition: opacity .85s var(--pgx-ease), transform .85s var(--pgx-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.pgx-js .pgx-reveal.pgx-in {
  opacity: 1;
  transform: none;
}

/* ---------- form fields (contact + fraud report) ---------- */
.contact-form-group label,
.fraud-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5B6785;
}

.contact-form-group input,
.contact-form-group textarea,
.fraud-form-group input,
.fraud-form-group textarea {
  width: 100%;
  padding: 15px 17px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: #F3F6FD;
  font: 500 14.5px var(--font-main);
  color: var(--text-dark);
  outline: none;
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder,
.fraud-form-group input::placeholder,
.fraud-form-group textarea::placeholder {
  color: #9AA5BF;
}

.contact-form-group input:hover,
.contact-form-group textarea:hover,
.fraud-form-group input:hover,
.fraud-form-group textarea:hover {
  background: #EDF1FB;
}

.contact-form-group input:focus,
.contact-form-group textarea:focus,
.fraud-form-group input:focus,
.fraud-form-group textarea:focus {
  background: #fff;
  border-color: var(--pgx-orange);
  box-shadow: 0 0 0 5px rgba(255, 87, 34, .13);
}

.contact-form-status,
.fraud-form-status {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
}

.contact-form-status.success,
.fraud-form-status.success {
  background: #ECFDF3;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

.contact-form-status.error,
.fraud-form-status.error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pgx-hero::before,
  .pgx-eyebrow::before,
  .crr-hero-badge::before,
  .aff-eyebrow::before {
    animation: none;
  }
  .pgx-btn::after,
  .crr-btn-primary::after,
  .crr-btn-dark::after,
  .contact-submit-btn::after,
  .fraud-submit-btn::after {
    display: none;
  }
}

/* ==========================================================================
   HOME-PAGE HEADLINE TYPE — the four pages use the same type as the home
   page's "Find Your Job Now": Inter, weight 500, tight tracking. Only the
   page content is switched (the variable is set on the content containers, so
   the shared header/footer keep their own fonts).
   ========================================================================== */
.crr-hero, .crr-section, .contact-page, .policy-page,
.aff-hero, .aff-categories-section, .aff-notice-section {
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* big hero headlines */
body .crr-hero h1,
body .aff-title,
body .contact-page-header h1,
body .fr-hero h1 {
  font-weight: 500;
  letter-spacing: -0.048em;
  line-height: 1.04;
}

/* hero lead paragraphs — like the home page's "Explore Job Opportunities Across India" */
body .crr-hero p,
body .aff-subtitle,
body .contact-page-header p,
body .fr-hero .policy-intro {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* section headings */
body .crr-section-title,
body .crr-cta h2,
body .contact-form-card h2,
body .fr-body h2,
body .fraud-report-card h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* card / item titles */
body .crr-benefit-title,
body .crr-dept-title,
body .crr-position-title,
body .crr-culture-title,
body .crr-step-title,
body .crr-faq-q,
body .aff-cat-title,
body .aff-notice-title,
body .aff-commission-text {
  font-weight: 500;
  letter-spacing: -0.02em;
}

body .crr-band h3 {
  font-weight: 500 !important;
  letter-spacing: -0.035em;
}

/* ==========================================================================
   HEADER THEME — blends with the dark hero, turns light for the light sections.
   js/premium-pages.js tags the header while the hero is behind it:
     .pgx-hdr-dark           hero under the header  -> dark frosted glass
     .pgx-hdr-dark.pgx-hdr-top  scrolled to the very top -> fully transparent,
                                so the header and hero read as one dark surface
   Past the hero the tags come off and the normal light header returns.
   The hero is pulled up under the header (.pgx-under) so there is no seam.
   ========================================================================== */
.header { transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }

body .crr-hero.pgx-under { margin-top: calc(var(--pgx-hdr, 72px) * -1); padding-top: calc(96px + var(--pgx-hdr, 72px)); }
body .aff-hero.pgx-under { margin-top: calc(var(--pgx-hdr, 72px) * -1); padding-top: calc(100px + var(--pgx-hdr, 72px)); }
body .contact-page-header.pgx-under { margin-top: calc(var(--pgx-hdr, 72px) * -1); padding-top: calc(110px + var(--pgx-hdr, 72px)); }
body .fr-hero.pgx-under { margin-top: calc(var(--pgx-hdr, 72px) * -1); padding-top: calc(110px + var(--pgx-hdr, 72px)); }

@media (max-width: 700px) {
  body .crr-hero.pgx-under { padding-top: calc(84px + var(--pgx-hdr, 72px)); }
  body .fr-hero.pgx-under { padding-top: calc(84px + var(--pgx-hdr, 72px)); }
}
@media (max-width: 620px) {
  body .aff-hero.pgx-under { padding-top: calc(84px + var(--pgx-hdr, 72px)); }
}
@media (max-width: 600px) {
  body .contact-page-header.pgx-under { padding-top: calc(80px + var(--pgx-hdr, 72px)); }
}

.header.pgx-hdr-dark {
  background: rgba(7, 13, 31, .58);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.header.pgx-hdr-dark.pgx-hdr-top {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* dark-state colours — not while the mobile menu panel (white) is open */
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-item { color: rgba(255, 255, 255, .88); }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-item svg { fill: rgba(255, 255, 255, .7); }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-item:hover,
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dropdown-wrapper:hover .nav-item,
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dropdown-wrapper.active .nav-item { color: #FF9A6B; }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-item:hover svg,
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dropdown-wrapper:hover .nav-item svg,
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dropdown-wrapper.active .nav-item svg { fill: #FF9A6B; stroke: #FF9A6B; }

/* dark-header logo: white lettering with the brand-orange accent (separate image,
   swapped in only in the dark state; the original logo shows everywhere else) */
.logo-img-dark { display: none; }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .logo-img { display: none; }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .logo-img.logo-img-dark { display: block; }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .mobile-menu-toggle svg { stroke: #fff; }

/* the navy "Post a Job" pill would vanish on dark — keep the header's white + orange
   palette: frosted white with an orange edge, filling orange on hover */
body:not(.mobile-nav-open) .header.pgx-hdr-dark .btn-recruiter-shine {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1.5px solid rgba(255, 112, 60, .9);
  padding: 7.5px 18.5px;
  box-shadow: 0 0 18px rgba(255, 87, 34, .35);
}
body:not(.mobile-nav-open) .header.pgx-hdr-dark .btn-recruiter-shine:hover {
  background: linear-gradient(135deg, #FF5722, #FF8A3D);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255, 87, 34, .55);
}

/* logged-in header on the dark state: the "My Job Postings" / "Dashboard" pill is a light
   pill by default, so give it a matching dark-glass look instead of white-on-white text */
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dashboard-link {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dashboard-link svg { fill: none; stroke: currentColor; }
body:not(.mobile-nav-open) .header.pgx-hdr-dark .nav-dashboard-link:hover {
  background: rgba(255, 87, 34, .24);
  border-color: rgba(255, 138, 80, .75);
  color: #FFD2BC;
}