/* assets/css/pages/commercial-uav.css
   Commercial UAV applications page — corporate, practical, brighter dark system.
*/

/* =========================
   BASE
========================= */

body.uav{
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(166,255,181,0.14),
      rgba(166,255,181,0.045) 52%,
      transparent 70%
    ),
    radial-gradient(
      circle at 78% 22%,
      rgba(142,153,251,0.16),
      rgba(142,153,251,0.05) 56%,
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      rgba(13,17,24,0.08),
      rgba(13,17,24,0.84)
    ),
    #0f141d;
}

.page-shell{
  padding:72px clamp(18px, 4vw, 48px);
}

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

.uav-hero{
  position:relative;
  min-height:clamp(440px, 68vh, 740px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  margin-top:100px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.14);
  background-image:var(--hero-bg);
  background-size:112%;
  background-position:50% var(--bgY, 50%);
  background-repeat:no-repeat;
  box-shadow:0 18px 46px rgba(0,0,0,0.34);
}

.uav-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(120,255,190,0.10),
      rgba(11,13,18,0) 34%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(140,170,255,0.08),
      rgba(11,13,18,0) 36%
    ),
    radial-gradient(
      circle at 36% 42%,
      rgba(11,13,18,0.06),
      rgba(11,13,18,0.46) 68%
    ),
    linear-gradient(
      to top,
      rgba(11,13,18,0.58),
      rgba(11,13,18,0.14)
    );
}

.uav-hero-inner{
  position:relative;
  z-index:2;
  max-width:min(860px, 92vw);
  padding:clamp(24px, 4vw, 48px);
}

.uav-eyebrow{
  margin:0 0 14px;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}

.uav-title{
  max-width:13ch;
  margin:0 0 18px;
  font-size:clamp(2.7rem, 5vw, 4.8rem);
  line-height:0.98;
  letter-spacing:-0.055em;
  font-weight:400;
  color:#fff;
}

.uav-lead{
  max-width:58ch;
  margin:0 0 26px;
  font-size:clamp(1rem, 1.25vw, 1.12rem);
  line-height:1.72;
  color:rgba(255,255,255,0.88);
}

.uav-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* =========================
   SECTIONS
========================= */

.uav-section{
  padding:88px 0 36px;
}

.uav-section + .uav-section{
  margin-top:34px;
}

.uav-section-header{
  max-width:58rem;
  margin:0 auto 60px;
  text-align:center;
}

.uav-h2{
  max-width:24ch;
  margin:0 auto 24px;
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  line-height:1.08;
  letter-spacing:-0.035em;
  font-weight:400;
  color:#fff;
}

.uav-body{
  max-width:54ch;
  margin:0 auto;
  font-size:1rem;
  line-height:1.85;
  color:rgba(255,255,255,0.74);
}

/* =========================
   GRIDS
========================= */

.uav-grid-2,
.uav-grid-3{
  display:grid;
  gap:24px;
}

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

.uav-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* =========================
   CARDS
========================= */

.uav-card{
  padding:40px 38px 34px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      rgba(166,255,181,0.05),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.026)
    ),
    rgba(28,36,50,0.60);
  box-shadow:0 16px 38px rgba(0,0,0,0.28);
}

.uav-card h3{
  margin:0 0 16px;
  font-size:1.22rem;
  line-height:1.18;
  font-weight:500;
  color:#fff;
}

.uav-card p{
  margin:0 0 16px;
  font-size:0.96rem;
  line-height:1.7;
  color:rgba(255,255,255,0.74);
}

.uav-card p:last-child{
  margin-bottom:0;
}

.uav-list{
  margin:22px 0 0;
  padding-left:1.15rem;
  color:rgba(255,255,255,0.72);
}

.uav-list li{
  margin:8px 0;
  line-height:1.62;
}

/* =========================
   IMAGE BAND
========================= */

.uav-image-band{
  margin:20px 0 84px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 16px 38px rgba(0,0,0,0.30);
}

.uav-image-band img{
  display:block;
  width:100%;
  min-height:300px;
  max-height:520px;
  object-fit:cover;
  filter:
    brightness(0.96)
    contrast(1.03)
    saturate(1.05);
}

/* =========================
   FINAL CTA
========================= */

.uav-final{
  padding:78px 0 0;
}

.uav-final-inner{
  padding:42px 40px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(
      120% 160% at 0% 0%,
      rgba(166,255,181,0.09),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.065),
      rgba(255,255,255,0.028)
    ),
    rgba(28,36,50,0.64);
  box-shadow:0 16px 40px rgba(0,0,0,0.28);
  text-align:center;
}

.uav-final-inner .uav-eyebrow,
.uav-final-inner .uav-h2{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.uav-final-inner .uav-actions{
  justify-content:center;
}

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

@media (max-width:1100px){
  .uav-grid-3{
    grid-template-columns:1fr;
  }
}

@media (max-width:980px){
  .uav-grid-2{
    grid-template-columns:1fr;
  }

  .page-shell{
    padding-top:54px;
    padding-bottom:72px;
  }
}

@media (max-width:640px){
  .uav-hero{
    min-height:520px;
    margin-top:84px;
  }

  .uav-title{
    max-width:11ch;
  }

  .uav-section{
    padding:56px 0 22px;
  }

  .uav-card{
    padding:30px 26px;
    border-radius:20px;
  }

  .uav-final-inner{
    padding:28px 24px;
    border-radius:22px;
  }

  .uav-image-band{
    margin:10px 0 56px;
    border-radius:22px;
  }

  .uav-image-band img{
    min-height:240px;
  }
}