/* =========================
   ROOT COLOR
========================= */

:root {
  --color-smk-purple: #2E3192;
  --color-smk-blue: #29ABE2;
  --color-smk-yellow: #8c9dbb;
  --color-smk-red: #E94E77;
  --color-smk-gray: #B3B3B3;
  --color-smk-dark: #1E1E50;
}

/* =========================
   BANNER
========================= */

.banner {
  position: relative;
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: white;

  overflow: hidden;
}

/* BG IMAGE */
.banner-layer {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: opacity 1s ease;

  z-index: 0;
}

.layer1 { opacity: 1; }
.layer2 { opacity: 0; }

/* OVERLAY */
.banner::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,0.35),
      rgba(30,41,59,0.28),
      rgba(51,65,85,0.35)
    );

  z-index: 1;
}

/* CONTENT */
.banner-content {
  position: relative;
  z-index: 2;

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.banner-content.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   TITLE
========================= */

.banner h1 {
  font-size: clamp(1.6rem,3.5vw,2.6rem);

  font-weight: 800;

  line-height: 1.2;

  background:
    linear-gradient(
      90deg,
      #f5f6f7,
       #d0d483,
      #d7ca1a,
     
      #d8cd57
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  margin-bottom: 16px;

  text-shadow:
    0 4px 14px rgba(255,210,0,0.18);
}

/* =========================
   SUBTITLE
========================= */

.banner p {
  font-size: 1.15rem;

  color: #ffffff;

  line-height: 1.8;

  margin-top: 10px;
}

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

.banner button {
  margin-top: 24px;

  padding: 13px 28px;

  border: none;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #29ABE2,
      #60c7f0
    );

  color: white;

  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;

  transition: 0.3s ease;

  box-shadow:
    0 10px 25px rgba(41,171,226,0.25);
}

.banner button:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 30px rgba(41,171,226,0.35);
}

/* =========================
   ABOUT
========================= */

.about {
  padding: 90px 20px;

  background: #f8fafc;

  text-align: center;
}

.about h2 {
  font-size: 2.3rem;
  font-weight: 800;

  color: #1e293b;
}

.about p {
  max-width: 800px;

  margin: 20px auto;

  color: #475569;

  line-height: 1.9;
}

/* =========================
   FEATURES
========================= */

.features {
  margin-top: 70px;

  display: grid;

  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

  gap: 30px;
}

/* =========================
   FLIP CARD
========================= */

.card{
  perspective:1000px;

  background:transparent;
  border:none;
  box-shadow:none;

  padding:0;

  height:320px;
}

.card-inner{
  position:relative;

  width:100%;
  height:100%;

  transition:transform 0.8s;

  transform-style:preserve-3d;
}

/* FLIP */
.card:hover .card-inner{
  transform:rotateY(180deg);
}

/* =========================
   FRONT & BACK
========================= */

.card-front,
.card-back{
  position:absolute;

  width:100%;
  height:100%;

  border-radius:24px;

  backface-visibility:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:35px;

  text-align:center;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

/* =========================
   FRONT CARD
========================= */

.card-front{
  background:#ffffff;

  border:
    1px solid rgba(226,232,240,0.9);

  color:#1e293b;
}

/* ICON */
.card-front .card-icon{
  font-size:4rem;

  color:#29ABE2;

  margin-bottom:20px;
}

/* TITLE */
.card-front h3{
  font-size:1.5rem;
  font-weight:800;

  background:
    linear-gradient(
      90deg,
      #97b6ea,
      #254a7d,
      #062c60
    );

  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* =========================
   BACK CARD
========================= */

.card-back{
  transform:rotateY(180deg);

  background:
    linear-gradient(
      180deg,
      #2D3394,
      #1a1c5c
    );

  color:#ffffff;
}

/* BACK TEXT */
.card-back p{
  line-height:1.8;

  font-size:1rem;

  color:#f1f5f9;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .banner h1{
    font-size:2.2rem;
  }

  .banner p{
    font-size:1rem;
  }

  .card{
    height:280px;
  }

  .card-front .card-icon{
    font-size:3rem;
  }

  .card-front h3{
    font-size:1.25rem;
  }

  .card-back p{
    font-size:.92rem;
  }

}