/* ============================================
   SHILOHI SAFETY NETS — Home Page Sections
   ============================================ */

/* ═══════════════════════════════════════════
   SECTION 02 — Interactive Risk Explorer
   ═══════════════════════════════════════════ */

.risk-explorer {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--grad-dark-section);
}

.risk-explorer__scene {
  position: relative;
  max-width: 1000px;
  margin: var(--space-3xl) auto 0;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--midnight);
}

.risk-explorer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.risk-explorer__hotspot {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201, 163, 74, 0.2);
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.risk-explorer__hotspot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}

.risk-explorer__hotspot:hover,
.risk-explorer__hotspot--active {
  transform: scale(1.2);
  background: rgba(201, 163, 74, 0.4);
  box-shadow: var(--shadow-glow-gold);
}

.risk-explorer__tooltip {
  position: absolute;
  width: 320px;
  padding: var(--space-xl);
  background: var(--glass-dark);
  backdrop-filter: blur(20px);
  border: var(--border-gold);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-out);
  z-index: 10;
  pointer-events: none;
}

.risk-explorer__tooltip--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.risk-explorer__tooltip-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.risk-explorer__tooltip-desc {
  font-size: var(--text-sm);
  color: var(--gray-200);
  margin-bottom: var(--space-md);
  line-height: var(--line-relaxed);
}

.risk-explorer__tooltip-solution {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Risk category tabs ── */
.risk-explorer__tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

.risk-explorer__tab {
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-300);
  background: var(--glass-light);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-normal);
}

.risk-explorer__tab:hover,
.risk-explorer__tab--active {
  color: var(--navy);
  background: var(--gold);
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════
   SECTION 03 — Before/After Transformation
   ═══════════════════════════════════════════ */

.transformation {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--midnight);
}

.transformation__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.transformation__labels {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto var(--space-xl);
}

.transformation__label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.transformation__label-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.transformation__label-dot--red {
  background: var(--danger);
  box-shadow: 0 0 12px rgba(229, 68, 75, 0.5);
}

.transformation__label-dot--gold {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(201, 163, 74, 0.5);
}

/* ═══════════════════════════════════════════
   SECTION 04 — Service Wheel Explorer
   ═══════════════════════════════════════════ */

.service-explorer {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--grad-dark-section);
  overflow: hidden;
}

.service-explorer__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* ── Wheel Navigation ── */
.service-explorer__wheel {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.service-explorer__wheel-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 163, 74, 0.15);
  border-radius: 50%;
}

.service-explorer__wheel-ring:nth-child(2) {
  inset: 40px;
  border-color: rgba(22, 136, 255, 0.1);
}

.service-explorer__wheel-ring:nth-child(3) {
  inset: 80px;
  border-color: rgba(201, 163, 74, 0.08);
}

.service-explorer__wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-gold);
  z-index: 5;
}

.service-explorer__wheel-center svg {
  width: 48px;
  height: 48px;
  fill: var(--navy);
}

.service-explorer__wheel-item {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--glass-dark);
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  z-index: 3;
}

.service-explorer__wheel-item:hover,
.service-explorer__wheel-item--active {
  background: var(--glass-navy);
  border-color: var(--gold);
  transform: scale(1.15);
  box-shadow: var(--shadow-glow-gold);
}

.service-explorer__wheel-item-icon {
  font-size: 24px;
  line-height: 1;
}

.service-explorer__wheel-item-label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-300);
  white-space: nowrap;
  text-align: center;
  transition: color var(--duration-normal);
}

.service-explorer__wheel-item--active .service-explorer__wheel-item-label {
  color: var(--gold);
}

/* ── Service Detail Panel ── */
.service-explorer__detail {
  padding: var(--space-2xl);
}

.service-explorer__detail-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.service-explorer__detail-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-lg);
  line-height: var(--line-snug);
}

.service-explorer__detail-media {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  border: var(--border-gold);
  box-shadow: var(--shadow-glass);
}

.service-explorer__detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.service-explorer__detail-desc {
  font-size: var(--text-base);
  color: var(--gray-200);
  line-height: var(--line-relaxed);
  margin-bottom: var(--space-xl);
  max-width: 500px;
}

.service-explorer__detail-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.service-explorer__detail-feature {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--gray-200);
}

.service-explorer__detail-feature::before {
  content: '→';
  color: var(--gold);
  font-weight: bold;
}

/* ═══════════════════════════════════════════
   SECTION 05 — Horizontal Scroll Protection
   ═══════════════════════════════════════════ */

.protection-scroll {
  position: relative;
  padding: var(--space-5xl) 0 0;
  background: var(--midnight);
}

.protection-scroll__track {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.protection-scroll__track::-webkit-scrollbar {
  display: none;
}

.protection-scroll__track:active {
  cursor: grabbing;
}

.protection-scroll__card {
  flex: 0 0 380px;
  height: 500px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition: transform var(--duration-normal) var(--ease-out);
}

.protection-scroll__card:hover {
  transform: translateY(-8px);
}

.protection-scroll__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.protection-scroll__card:hover .protection-scroll__card-img {
  transform: scale(1.05);
}

.protection-scroll__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,19,38,0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-2xl);
}

.protection-scroll__card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
}

.protection-scroll__card-problem {
  font-size: var(--text-sm);
  color: var(--gray-200);
  margin-bottom: var(--space-md);
  line-height: var(--line-relaxed);
}

.protection-scroll__card-service {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

/* ── Progress bar ── */
.protection-scroll__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) 0;
}

.protection-scroll__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all var(--duration-normal);
}

.protection-scroll__dot--active {
  width: 32px;
  border-radius: var(--radius-full);
  background: var(--gold);
}

/* ═══════════════════════════════════════════
   SECTION 06 — Material / Quality
   ═══════════════════════════════════════════ */

.materials {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--grad-dark-section);
}

.materials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}

.materials__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  group: true;
}

.materials__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.materials__item:hover .materials__item-img {
  transform: scale(1.1);
}

.materials__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,19,38,0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  transition: background var(--duration-normal);
}

.materials__item:hover .materials__item-overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(6,19,38,0.95) 100%);
}

.materials__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}

.materials__item-desc {
  font-size: var(--text-sm);
  color: var(--gray-200);
  line-height: var(--line-relaxed);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-out);
}

.materials__item:hover .materials__item-desc {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   SECTION 07 — Installation Timeline
   ═══════════════════════════════════════════ */

.timeline {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--midnight);
}

.timeline__track {
  position: relative;
  max-width: 900px;
  margin: var(--space-3xl) auto 0;
}

/* ── Vertical line ── */
.timeline__line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(201, 163, 74, 0.1);
}

.timeline__line-progress {
  width: 100%;
  height: 0;
  background: var(--grad-gold);
  transition: height 0.1s linear;
}

/* ── Step ── */
.timeline__step {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) 0;
  opacity: 0.3;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.timeline__step.is-visible {
  opacity: 1;
}

.timeline__step:nth-child(even) .timeline__step-content {
  grid-column: 3;
  text-align: left;
}

.timeline__step:nth-child(even) .timeline__step-image {
  grid-column: 1;
  grid-row: 1;
}

.timeline__step-content {
  grid-column: 1;
  text-align: right;
}

.timeline__step-number {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  color: rgba(201, 163, 74, 0.15);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.timeline__step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
}

.timeline__step-desc {
  font-size: var(--text-sm);
  color: var(--gray-200);
  line-height: var(--line-relaxed);
}

/* ── Center dot ── */
.timeline__step-dot {
  grid-column: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--gold);
  position: relative;
  z-index: 2;
  transition: all var(--duration-normal);
}

.timeline__step.is-visible .timeline__step-dot {
  background: var(--gold);
  box-shadow: var(--shadow-glow-gold);
}

.timeline__step-image {
  grid-column: 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.timeline__step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════
   SECTION 08 — Trust / Numbers
   ═══════════════════════════════════════════ */

.trust {
  position: relative;
  padding: var(--space-6xl) 0;
  background: var(--navy);
  text-align: center;
  overflow: hidden;
}

.trust__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(201, 163, 74, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.trust__headline {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
  margin-bottom: var(--space-3xl);
  position: relative;
  z-index: 1;
}

.trust__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.trust__point {
  padding: var(--space-xl);
}

.trust__point-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-gold);
  border: var(--border-gold);
}

.trust__point-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}

.trust__point-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
}

.trust__point-desc {
  font-size: var(--text-sm);
  color: var(--gray-300);
  line-height: var(--line-relaxed);
}

/* ═══════════════════════════════════════════
   SECTION 09 — Project Showcase
   ═══════════════════════════════════════════ */

.showcase {
  position: relative;
  padding: var(--space-5xl) 0;
  background: var(--grad-dark-section);
}

.showcase__slider {
  position: relative;
  margin-top: var(--space-3xl);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.showcase__track {
  display: flex;
  transition: transform var(--duration-slower) var(--ease-out);
}

.showcase__slide {
  flex: 0 0 100%;
  position: relative;
  aspect-ratio: 21/9;
  min-height: 500px;
}

.showcase__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,19,38,0.9) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3xl);
}

.showcase__slide-info {
  max-width: 450px;
}

.showcase__slide-location {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.showcase__slide-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
}

.showcase__slide-desc {
  font-size: var(--text-sm);
  color: var(--gray-200);
  line-height: var(--line-relaxed);
  margin-bottom: var(--space-lg);
}

.showcase__slide-tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Controls ── */
.showcase__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.showcase__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--glass-light);
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-normal);
  color: var(--white);
  font-size: 20px;
}

.showcase__arrow:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.showcase__counter {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-300);
  letter-spacing: var(--tracking-wide);
}

.showcase__counter-current {
  color: var(--gold);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Sections
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .service-explorer__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .service-explorer__wheel {
    max-width: 380px;
  }

  .service-explorer__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .service-explorer__detail-desc {
    text-align: center;
  }

  .timeline__step {
    grid-template-columns: auto 1fr;
    text-align: left !important;
  }

  .timeline__step-content {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .timeline__step-image {
    display: none;
  }

  .timeline__step-dot {
    grid-column: 1 !important;
  }

  .timeline__line {
    left: 10px;
  }

  .trust__points {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .risk-explorer__scene {
    aspect-ratio: 4/3;
  }

  .materials__grid {
    grid-template-columns: 1fr;
  }

  .protection-scroll__card {
    flex: 0 0 300px;
    height: 420px;
  }

  .trust__points {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .showcase__slide {
    aspect-ratio: 16/9;
    min-height: 350px;
  }
}