/* =========================================================
   SECTION SYSTEM
   atmosphere / rhythm / editorial structure
========================================================= */

/* =========================================================
   GLOBAL SECTION RHYTHM
========================================================= */

.hero,
.intro-grid,
.visual-strip,
.estimate-section,
.basket-section,
.services-section,
.recovery-section,
.landlord-section,
.commercial-section,
.faq-section,
.contact-section {
  position: relative;
}

.hero::after,
.intro-grid::after,
.visual-strip::after,
.estimate-section::after,
.basket-section::after,
.services-section::after,
.recovery-section::after,
.landlord-section::after,
.commercial-section::after,
.faq-section::after,
.contact-section::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--line),
      transparent
    );
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255,255,255,0.14),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      rgba(0,0,0,0.06)
    );
}

.hero-content {
  position: relative;
}

.hero-content::after {
  content: "";

  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--line),
      transparent
    );
}

/* =========================================================
   INTRO GRID
========================================================= */

.intro-grid {
  backdrop-filter: blur(10px);
}

.intro-grid article {
  position: relative;

  transition:
    background var(--transition-medium),
    transform var(--transition-medium);
}

.intro-grid article:hover {
  background:
    rgba(255,255,255,0.12);
}

.intro-grid article::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      transparent
    );

  transition:
    opacity var(--transition-medium);
}

.intro-grid article:hover::before {
  opacity: 1;
}

/* =========================================================
   VISUAL STRIPS
========================================================= */

.visual-strip {
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.02)
    );
}

/* =========================================================
   SECTION HEAD
========================================================= */

.section-head {
  position: relative;
}

.section-head::after {
  content: "";

  display: block;

  width: 120px;
  height: 1px;

  margin-top: 28px;

  background:
    linear-gradient(
      90deg,
      var(--line-strong),
      transparent
    );
}

.section-head-dark::after {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.28),
      transparent
    );
}

/* =========================================================
   ESTIMATE
========================================================= */

.estimate-section {
  overflow: hidden;
}

.estimate-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(255,255,255,0.12),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 78%,
      rgba(0,0,0,0.04),
      transparent 34%
    );

  pointer-events: none;
}

.estimate-shell {
  position: relative;
  z-index: 2;
}

/* =========================================================
   BASKET
========================================================= */

.basket-card {
  padding-top: 18px;
}

.basket-lines {
  display: grid;
  gap: 14px;
}

.basket-line {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--line);
}

/* =========================================================
   SERVICES
========================================================= */

.services-section {
  overflow: hidden;
}

.services-windows {
  position: relative;
}

.services-windows::before {
  content: "";

  position: absolute;
  inset: -10%;

  background:
    radial-gradient(
      circle at 22% 30%,
      rgba(255,255,255,0.08),
      transparent 30%
    );

  pointer-events: none;
}

/* =========================================================
   RECOVERY
========================================================= */

.recovery-section {
  overflow: hidden;
}

.recovery-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255,255,255,0.04),
      transparent 24%
    ),

    radial-gradient(
      circle at 88% 82%,
      rgba(255,255,255,0.03),
      transparent 32%
    );

  pointer-events: none;
}

.recovery-windows {
  position: relative;
  z-index: 2;
}

/* =========================================================
   LANDLORDS
========================================================= */

.landlord-section {
  overflow: hidden;
}

.landlord-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      transparent 30%
    );

  pointer-events: none;
}

/* =========================================================
   COMMERCIAL
========================================================= */

.commercial-section {
  overflow: hidden;
}

.commercial-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(255,255,255,0.08),
      transparent 28%
    );

  pointer-events: none;
}

/* =========================================================
   FAQ
========================================================= */

.faq-grid article {
  position: relative;

  transition:
    background var(--transition-medium),
    transform var(--transition-medium);
}

.faq-grid article:hover {
  background:
    rgba(255,255,255,0.08);
}

.faq-grid article::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      transparent
    );

  transition:
    opacity var(--transition-medium);
}

.faq-grid article:hover::before {
  opacity: 1;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  overflow: hidden;
}

.contact-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(255,255,255,0.12),
      transparent 28%
    );

  pointer-events: none;
}

/* =========================================================
   UPLOAD BLOCK
========================================================= */

.upload-box {
  position: relative;

  padding: 26px;

  border:
    1px dashed var(--line-strong);

  border-radius: var(--radius-md);

  background:
    rgba(255,255,255,0.16);

  overflow: hidden;
}

.upload-box::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      transparent
    );

  pointer-events: none;
}

.upload-box input[type="file"] {
  margin-bottom: 18px;
}

/* =========================================================
   BUTTON ATMOSPHERE
========================================================= */

.button.primary {
  box-shadow:
    0 18px 40px rgba(10,12,11,0.18);
}

.button.primary:hover {
  box-shadow:
    0 24px 54px rgba(10,12,11,0.26);
}

.button.secondary:hover {
  background:
    rgba(255,255,255,0.12);
}

/* =========================================================
   QUIET MOTION
========================================================= */

@keyframes subtleGlow {

  0% {
    opacity: 0.42;
  }

  100% {
    opacity: 0.72;
  }
}

.section-head::after {
  animation:
    subtleGlow 4s ease-in-out infinite alternate;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .hero-content::after {
    display: none;
  }
}

@media (max-width: 760px) {

  .section-head::after {
    width: 90px;
    margin-top: 22px;
  }

  .upload-box {
    padding: 20px;
  }

  .basket-line {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {

  .hero::before,
  .estimate-section::before,
  .recovery-section::before,
  .commercial-section::before,
  .contact-section::before {
    opacity: 0.6;
  }

  .upload-box {
    padding: 18px;
  }
}