html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

.scene{background:#071A3A}
.scene-bg,
.scene-wash,
.scene-pattern{
  position:fixed;
  inset:0;
  pointer-events:none;
}
.scene-bg{
  z-index:0;
  background-image:url("../images/bg-atmosphere.jpg");
  background-position:center 32%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
.scene-wash{
  z-index:1;
  background:
    linear-gradient(180deg, rgba(7,26,58,.38) 0%, rgba(7,26,58,.12) 26%, rgba(7,26,58,.08) 46%, rgba(7,26,58,.28) 74%, rgba(7,26,58,.58) 100%),
    radial-gradient(circle at 18% 12%, rgba(11,164,74,.12), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(215,154,19,.10), transparent 28%);
}
.scene-pattern{
  z-index:2;
  opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000 55%,transparent 92%);
}

.hero-title span:first-child{
  color:#fff;
  text-shadow:0 10px 40px rgba(7,26,58,.45);
}

.count-card{
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:1.2rem;
  padding:1rem .35rem;
  text-align:center;
  box-shadow:0 16px 45px rgba(7,26,58,.18);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.count-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.22);
  border-color:rgba(215,154,19,.45);
}
.count-card #days,
.count-card #hours,
.count-card #minutes,
.count-card #seconds,
.count-card [id]{
  color:#fff !important;
}
.count-card .text-slate-500{color:rgba(255,255,255,.72) !important}

.photo-card{
  position:relative;
  border-radius:1.6rem;
  overflow:hidden;
  background:#0B3B82;
  box-shadow:0 24px 70px rgba(7,26,58,.28);
  border:1px solid rgba(255,255,255,.28);
}
.tall-card{height:420px}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.photo-card:hover img{transform:scale(1.04)}
.photo-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,18,48,.86) 0%,rgba(3,18,48,.18) 38%,transparent 66%)}
.photo-card figcaption{position:absolute;z-index:2;left:1.25rem;right:1.25rem;bottom:1.2rem;color:white;font-weight:900;font-size:.72rem;letter-spacing:.14em;text-shadow:0 2px 10px rgba(0,0,0,.25)}

.brand-slogan{
  border-radius:1.7rem;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.22);
  padding:1.7rem 1rem;
  box-shadow:0 18px 55px rgba(7,26,58,.16);
}
.brand-slogan .text-brandBlue{color:#fff !important}

@media(max-width:767px){
  .tall-card{height:330px}
  .photo-card:nth-child(2){transform:none!important}
  .scene-bg{background-position:center 20%}
}
@media(max-width:480px){
  .count-card{padding:.85rem .18rem;border-radius:.95rem}
  .tall-card{height:285px}
  .photo-card{border-radius:1.25rem}
}