/* ==========================================================================
   RS INDUSTRIES — LUXURY INDUSTRIAL THEME & UI OVERHAUL
   Inspired by world-class steel & engineering leaders (JSW Steel, ArcelorMittal)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT VARIABLES & THEME TOKENS
   -------------------------------------------------------------------------- */
:root {
  --background: #061325;
  --foreground: #F8FAFC;
  --surface: #0B203B;
  --surface-2: #102C52;
  --steel: #475569;
  --card: rgba(11, 32, 59, 0.75);
  --card-foreground: #F8FAFC;
  --border: rgba(255, 255, 255, 0.09);
  --border-focus: #38BDF8;
  --input: rgba(71, 85, 105, 0.5);
  --ring: #0284C7;
  --muted: #0D2748;
  --muted-foreground: #94A3B8;
  --primary: #0284C7;
  --primary-hover: #0369A1;
  --primary-foreground: #FFFFFF;
  --primary-glow: #38BDF8;
  --accent: #0F325E;
  --accent-foreground: #F8FAFC;
  --teal: #38BDF8;
  --teal-glow: #7DD3FC;
  --cyan-accent: #00E5FF;
  --gold-accent: #F59E0B;
}

/* Smooth scrolling for anchor jumps */
html {
  scroll-behavior: smooth !important;
  color-scheme: dark;
}

body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. GLOBAL WATERMARK REMOVAL
   -------------------------------------------------------------------------- */
.watermarked::after,
.watermarked:after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   3. SCROLL PROGRESS BAR (TOP OF PAGE)
   -------------------------------------------------------------------------- */
#rs-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #0284C7, #38BDF8, #00E5FF);
  z-index: 9999;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  transition: width 0.08s ease-out;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. NAVIGATION & HEADER ENHANCEMENT
   -------------------------------------------------------------------------- */
header,
nav.fixed {
  background: rgba(6, 19, 37, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   5. HERO SECTION — CINEMATIC DEPTH & REFINEMENT
   -------------------------------------------------------------------------- */
#top section:first-of-type {
  position: relative;
}

/* Hero Badge & Chip Polish */
.chip,
.chip-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38BDF8 !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.15) !important;
}

/* Orange gradient text override -> Luminous Sapphire-to-Cyan Gradient */
.orange-gradient-text {
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 50%, #60A5FA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.25) !important;
}

/* --------------------------------------------------------------------------
   6. ABOUT US SECTION — BACKGROUND VISIBLE THROUGH OPERATIONAL EXCELLENCE
   -------------------------------------------------------------------------- */
.rs-about-bg {
  position: relative !important;
  isolation: isolate !important;
  background-color: transparent !important;
}

/* Machining workshop background: full cover, crisp, visible through entire section */
.rs-about-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background-image: url("/media/about-machining.jpg") !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 0.85 !important;
  filter: contrast(1.08) brightness(0.92) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%) !important;
}

/* Refined Scrim: Clear readability while letting the lathe & machining photo shine */
.rs-about-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(2, 132, 199, 0.12) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(6, 19, 37, 0.72) 0%,
      rgba(6, 19, 37, 0.52) 20%,
      rgba(6, 19, 37, 0.65) 60%,
      rgba(6, 19, 37, 0.88) 85%,
      #061325 100%) !important;
}

@media (max-width: 1023px) {
  .rs-about-bg::before {
    opacity: 0.78 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%) !important;
  }
  .rs-about-bg::after {
    background: linear-gradient(180deg,
      rgba(6, 19, 37, 0.78) 0%,
      rgba(6, 19, 37, 0.68) 25%,
      rgba(6, 19, 37, 0.85) 75%,
      #061325 100%) !important;
  }
}

/* About Content Styling */
.rs-about-content {
  background: rgba(11, 32, 59, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1024px) {
  .rs-about-content {
    padding: 3.5rem 3.5rem;
  }
}

/* Operational Excellence Cards Polish */
.rs-about-content .group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.rs-about-content .group:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(56, 189, 248, 0.3) !important;
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. SECTION BACKGROUND IMAGES (FILLING EMPTY SPACES)
   -------------------------------------------------------------------------- */

/* Global Reach Section */
#global-reach {
  position: relative !important;
  isolation: isolate !important;
}
#global-reach::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/media/growth-bg.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.22;
  filter: contrast(1.1) brightness(0.85);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Capabilities Section (#capabilities) */
#capabilities {
  position: relative !important;
  isolation: isolate !important;
}
#capabilities::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/media/capabilities-bg.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.35;
  filter: contrast(1.15) brightness(0.8);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
#capabilities::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 70% 30%, rgba(2, 132, 199, 0.15), transparent 70%),
              linear-gradient(180deg, var(--background) 0%, rgba(6, 19, 37, 0.7) 40%, var(--background) 100%);
}

/* Industries Section (#industries) */
#industries {
  position: relative !important;
  isolation: isolate !important;
}
#industries::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/media/industries-bg.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.32;
  filter: contrast(1.15) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
#industries::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--background) 0%, rgba(6, 19, 37, 0.72) 50%, var(--background) 100%);
}

/* Process Section (#process) */
#process {
  position: relative !important;
  isolation: isolate !important;
}
#process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/media/process-bg.jpg");
  background-position: right center;
  background-size: cover;
  opacity: 0.28;
  filter: contrast(1.2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%);
}
#process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--background) 0%, rgba(6, 19, 37, 0.75) 50%, var(--background) 100%);
}

/* Contact Section (#contact) */
#contact {
  position: relative !important;
  isolation: isolate !important;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/media/growth-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  opacity: 0.20;
  filter: contrast(1.1);
}

/* --------------------------------------------------------------------------
   8. CARD & COMPONENT STYLING (GLASSMORPHISM & HOVER STATES)
   -------------------------------------------------------------------------- */
.glass {
  background: rgba(11, 32, 59, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass:hover {
  background: rgba(16, 44, 82, 0.75) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 20px 40px -15px rgba(2, 132, 199, 0.25) !important;
  transform: translateY(-3px) !important;
}

/* Product Cards & Capability Cards */
#products button.group,
#capabilities article,
#industries .group {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(11, 32, 59, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#products button.group:hover,
#capabilities article:hover,
#industries .group:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.3) !important;
  transform: translateY(-5px) !important;
}

/* Country Tags */
.rs-country {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45em !important;
  padding: 0.1em 0.65em 0.15em !important;
  margin: 0 0.08em !important;
  border-radius: 999px !important;
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #F8FAFC !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s ease !important;
}

.rs-country:hover {
  background: rgba(2, 132, 199, 0.3) !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

/* --------------------------------------------------------------------------
   9. MINIMAL & LUXURY LIGHT LOADING ANIMATION
   -------------------------------------------------------------------------- */
.rs-load {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  background: #EEF2F5 !important;
  overflow: hidden !important;
}

.rs-load::before,
.rs-load::after {
  display: none !important;
  content: none !important;
}

.rs-load-inner {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 2rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.rs-load-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.5rem !important;
}

.rs-load-logo {
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
  display: block !important;
  user-select: none !important;
}

.rs-load-word {
  font-family: var(--font-display, "Space Grotesk", sans-serif) !important;
  font-size: clamp(1.2rem, 3.5vw, 1.55rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: #071A33 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  margin: 0 !important;
}

.rs-load-status {
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: clamp(0.68rem, 2vw, 0.78rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  color: #3E5268 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 0.1rem !important;
  margin-bottom: 0.85rem !important;
  text-shadow: none !important;
}

.rs-load-bar {
  width: min(160px, 45vw) !important;
  height: 2px !important;
  background: rgba(62, 82, 104, 0.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.rs-load-bar > i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: #1E88E5 !important;
  transform-origin: left center !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   10. FLOATING ACTION BUTTONS
   -------------------------------------------------------------------------- */
#rs-scroll-top-btn {
  position: fixed !important;
  left: 1rem !important;
  bottom: 1rem !important;
  z-index: 80 !important;
}

@media (min-width: 768px) {
  #rs-scroll-top-btn {
    left: 1.75rem !important;
    bottom: 1.75rem !important;
  }
}

.rs-fab-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11, 32, 59, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38BDF8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.rs-fab-btn:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #38BDF8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  transform: translateY(-3px) scale(1.05);
}

/* --------------------------------------------------------------------------
   11. FAQ ACCORDION STYLING
   -------------------------------------------------------------------------- */
#faq {
  position: relative !important;
  isolation: isolate !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rs-faq-item {
  background: rgba(11, 32, 59, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.rs-faq-item:hover {
  border-color: rgba(56, 189, 248, 0.25) !important;
  background: rgba(16, 44, 82, 0.65) !important;
  transform: translateY(-1px);
}

.rs-faq-item.rs-faq-open {
  border-color: rgba(56, 189, 248, 0.45) !important;
  background: rgba(16, 44, 82, 0.75) !important;
  box-shadow: 0 10px 30px -10px rgba(2, 132, 199, 0.25) !important;
}

.rs-faq-trigger {
  outline: none !important;
}

.rs-faq-trigger:focus-visible {
  ring: 2px solid #38BDF8;
}

.rs-faq-content {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}