/**
 * Fortress Solutions - Inner Pages Unified Dark Experience Stylesheet
 * FORTRESS COMPUTER SYSTEMS AND SOFTWARE DESIGNING L.L.C.
 * Abu Dhabi, UAE | venusfortress.com
 */

/* ==========================================================================
   1. Theme Override Tokens (Harmonized with Homepage Dark Navy Benchmark)
   ========================================================================== */
:root {
  --bg-main: #06080c;
  --bg-secondary: #090c12;
  --bg-surface: rgba(14, 19, 29, 0.85);
  --bg-surface-translucent: rgba(14, 19, 29, 0.92);

  --text-primary: #ffffff;
  --text-secondary: #9da7b5;
  --text-muted: #6b7788;
  --text-inverse: #06080c;

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(242, 255, 0, 0.4);
  --border-focus: var(--yellow);

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(242, 255, 0, 0.12);
}

body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   2. Shared Compact Hero System
   ========================================================================== */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 60px !important;
  background: radial-gradient(circle at 50% 20%, rgba(51, 94, 170, 0.22), transparent 55%),
              linear-gradient(180deg, #0b0f16 0%, #06080c 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 64px !important;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.2;
  pointer-events: none;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

.page-hero-content {
  text-align: left;
  max-width: 680px;
}

.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fx-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7b889b;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: #7b889b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--yellow);
}

.breadcrumbs i {
  font-size: 9px;
  color: var(--yellow);
}

.breadcrumbs span {
  color: #ffffff;
}

.page-title {
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #ffffff !important;
  margin: 0 0 16px;
}

.page-title .gradient-text {
  background: linear-gradient(135deg, #ffffff 40%, var(--yellow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--muted) !important;
  line-height: 1.65;
  margin: 0;
}

/* Compact Bespoke Hero Visual Box */
.hero-compact-visual {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1.2;
  justify-self: end;
  position: relative;
  display: grid;
  place-items: center;
}

.hero-compact-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   3. Shared Technical Card Styles
   ========================================================================== */
.service-pillar-card,
.solution-card,
.product-card,
.tech-card,
.project-card,
.contact-form-container,
.contact-info-container {
  background: rgba(14, 19, 29, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text) !important;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease !important;
}

.service-pillar-card:hover,
.solution-card:hover,
.product-card:hover,
.tech-card:hover,
.project-card:hover {
  border-color: rgba(242, 255, 0, 0.35) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(242, 255, 0, 0.08) !important;
}

.service-pillar-card h2,
.service-pillar-card h3,
.solution-card h3,
.product-card h3,
.tech-card h3,
.project-card h3 {
  color: #ffffff !important;
}

.service-pillar-card p,
.solution-card p,
.product-card p,
.tech-card p,
.project-card p {
  color: #9aa7b8 !important;
  line-height: 1.6;
}

/* Pillar Visual Box on Services Page */
.pillar-visual-col {
  background: rgba(10, 14, 22, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

.pillar-visual-col div[style*="background: #FFFFFF"] {
  background: rgba(17, 23, 34, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pillar-visual-col div[style*="color: var(--brand-teal-dark)"] {
  color: var(--yellow) !important;
  font-family: var(--fx-font-mono);
}

.pillar-visual-col span[data-i18n$="SideTitle"] {
  color: #ffffff !important;
  font-weight: 700;
}

/* Chips, Badges & Tags */
.tech-chip,
.tag-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #c0ccd9 !important;
  font-family: var(--fx-font-mono) !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.tech-chip:hover {
  border-color: var(--yellow) !important;
  color: var(--yellow) !important;
}

.section-badge {
  background: rgba(242, 255, 0, 0.08) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(242, 255, 0, 0.25) !important;
  font-family: var(--fx-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
}

/* Capability list icons */
.capability-list li i {
  color: var(--yellow) !important;
}

.capability-list li {
  color: #adbccc !important;
}

/* Filter Buttons (Products, Projects, Solutions) */
.filter-tabs,
.category-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.filter-btn,
.category-filter-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #9aa7b8 !important;
  font-family: var(--fx-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  transition: all 0.2s ease !important;
}

.filter-btn:hover,
.category-filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.filter-btn.active,
.category-filter-btn.active {
  background: var(--yellow) !important;
  color: #080a0d !important;
  border-color: var(--yellow) !important;
  box-shadow: 0 0 16px rgba(242, 255, 0, 0.25) !important;
}

/* ==========================================================================
   4. Contact Page Form & Details
   ========================================================================== */
.contact-form-container input,
.contact-form-container select,
.contact-form-container textarea,
.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea {
  background: rgba(8, 12, 18, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.contact-form-panel,
.contact-info-panel {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

@media (max-width: 480px) {
  .contact-form-panel,
  .contact-info-panel {
    padding: 24px 16px !important;
  }
}

.contact-form-container input:focus,
.contact-form-container select:focus,
.contact-form-container textarea:focus {
  border-color: var(--yellow) !important;
  box-shadow: 0 0 0 2px rgba(242, 255, 0, 0.2) !important;
  outline: none !important;
}

.contact-form-container label {
  color: #9aa7b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.contact-info-card {
  background: rgba(10, 14, 22, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}

.contact-info-card i {
  color: var(--yellow) !important;
}

/* ==========================================================================
   5. Reusable Inner CTA Block (Harmonized with Final Assembly)
   ========================================================================== */
.inner-cta-box {
  background: radial-gradient(circle at 50% 50%, rgba(51, 94, 170, 0.18), transparent 50%),
              linear-gradient(180deg, #0d121c 0%, #07090d 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 64px) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 80px 0 0 !important;
}

.inner-cta-box h2,
.inner-cta-box h3 {
  color: #ffffff !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  margin: 0 0 16px !important;
}

.inner-cta-box p {
  color: #9aa7b8 !important;
  max-width: 580px;
  margin: 0 auto 32px !important;
  font-size: 1.1rem;
}

/* Buttons */
.btn-primary {
  background: var(--yellow) !important;
  color: #080a0d !important;
  border: 1px solid var(--yellow) !important;
  font-weight: 750 !important;
  transition: all 0.22s ease !important;
}

.btn-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  transition: all 0.22s ease !important;
}

.btn-secondary:hover {
  border-color: var(--yellow) !important;
  color: var(--yellow) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   6. Full RTL Overrides for Inner Pages
   ========================================================================== */
html[dir="rtl"] .page-hero-content {
  text-align: right;
}

html[dir="rtl"] .service-pillar-card {
  text-align: right;
}

html[dir="rtl"] .solution-card,
html[dir="rtl"] .product-card,
html[dir="rtl"] .tech-card,
html[dir="rtl"] .project-card {
  text-align: right;
}

html[dir="rtl"] .breadcrumbs i {
  transform: scaleX(-1);
}

html[dir="rtl"] .capability-list {
  padding-right: 0;
}

html[dir="rtl"] .capability-list li i {
  margin-left: 8px;
  margin-right: 0;
}

html[dir="rtl"] .hero-compact-visual {
  justify-self: start;
}

/* ==========================================================================
   7. Responsive Adaptations
   ========================================================================== */
@media (max-width: 900px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-compact-visual {
    justify-self: center;
    max-width: 320px;
  }
  .service-pillar-card,
  .service-pillar-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service-pillar-card:nth-child(even) .pillar-visual-col {
    order: unset;
  }
}