/* =========================================================
   TRADEVEST EXAMS — COMPONENTS CSS
========================================================= */

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

.hero{
  position:relative;

  overflow:hidden;

  padding:100px 0 115px;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.08),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #f8fbff,
      #eef4ff
    );
}

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

.hero-inner{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:70px;

  z-index:2;
}

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

.hero-left{
  width:100%;
  max-width:560px;
}

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

.hero h1{
  margin-bottom:18px;

  color:var(--text);

  font-size:52px;
  font-weight:800;
  line-height:1.12;

  letter-spacing:-1.4px;
}

.hero h1 span{
  color:var(--primary);
}

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

.hero p{
  margin-bottom:28px;

  color:var(--muted);

  font-size:16px;
  line-height:1.8;
}

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

.hero-buttons{
  display:flex;
  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:22px;
}

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

.features{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:18px;
  margin-bottom:24px;
}

.features span{
  display:flex;
  align-items:center;

  gap:8px;

  padding:9px 14px;

  background:rgba(255,255,255,.82);

  border:1px solid rgba(37,99,235,.08);
  border-radius:999px;

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow-sm);

  color:#475569;

  font-size:12px;
  font-weight:600;

  white-space:nowrap;
}

.features span::before{
  content:"✓";

  width:18px;
  height:18px;

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

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:var(--white);

  font-size:10px;
  font-weight:700;
}

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

.dashboard{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-dashboard-img{
  width:100%;
  max-width:640px;

  border-radius:28px;

  box-shadow:
    0 24px 60px rgba(15,23,42,.12);

  transition:transform .35s ease;
}

.hero-dashboard-img:hover{
  transform:translateY(-4px);
}

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

.section-head{
  margin-bottom:42px;

  text-align:center;
}

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

.section-title{
  margin-bottom:12px;

  color:var(--text);

  font-size:36px;
  font-weight:800;
  line-height:1.2;

  letter-spacing:-.7px;
}

/* =========================================================
   SECTION DESCRIPTION
========================================================= */

.section-desc{
  max-width:640px;

  margin:0 auto;

  color:var(--muted);

  font-size:15px;
  line-height:1.8;
}

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

.grid{
  display:grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:24px;
}

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

.card{
  position:relative;

  min-width:0;

  display:flex;
  flex-direction:column;

  height:100%;

  padding:26px;

  background:var(--white);

  border:1px solid var(--border);
  border-radius:22px;

  box-shadow:var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

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

  border-color:#dbeafe;

  box-shadow:var(--shadow-md);
}

/* =========================================================
   CARD ICON
========================================================= */

.icon{
  width:52px;
  height:52px;

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

  margin-bottom:18px;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #dbeafe
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}

.icon img{
  width:24px;
  height:24px;

  opacity:.9;
}

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

.card h3{
  margin-bottom:14px;

  color:var(--text);

  font-size:19px;
  font-weight:700;
  line-height:1.45;

  word-break:break-word;
}

/* =========================================================
   CARD LIST
========================================================= */

.card-list{
  margin-bottom:22px;
  margin-left:18px;

  list-style:disc;

  color:var(--muted);

  font-size:14px;
  line-height:1.9;
}

/* =========================================================
   PRICE
========================================================= */

.price{
  margin-top:auto;
  margin-bottom:20px;

  padding-top:18px;

  border-top:1px solid var(--border);

  color:var(--text);

  font-size:26px;
  font-weight:800;

  letter-spacing:-.5px;
}

/* =========================================================
   CARD BUTTON WRAP
========================================================= */

.card-buttons{
  display:flex;
}

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

.buy{
  width:100%;
  height:48px;

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

  padding:0 18px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:var(--white);

  font-size:14px;
  font-weight:600;

  text-align:center;

  transition:all .25s ease;
}

.buy:hover{
  transform:translateY(-1px);

  box-shadow:
    0 10px 22px rgba(37,99,235,.18);
}

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

@media(max-width:992px){

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

  .hero-inner{
    gap:50px;
  }

}

@media(max-width:768px){

  .hero{
    padding:74px 0 86px;
  }

  .hero-inner{
    flex-direction:column;

    gap:42px;

    text-align:center;
  }

  .hero-left{
    max-width:100%;
  }

  .hero h1{
    font-size:40px;
  }

  .hero p{
    font-size:15px;
  }

  .hero-buttons,
  .features{
    justify-content:center;
  }

  .features span{
    width:100%;

    justify-content:center;
  }

  .section-head{
    margin-bottom:34px;
  }

  .section-title{
    font-size:30px;
  }

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

}

@media(max-width:480px){

  .hero{
    padding:66px 0 80px;
  }

  .hero h1{
    font-size:34px;
  }

  .section-title{
    font-size:28px;
  }

  .card{
    padding:22px;
  }

  .hero-dashboard-img{
    border-radius:22px;
  }

}

/* =========================================================
   404 PAGE
========================================================= */

.tv-404-page{
  min-height:80vh;

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

  padding:60px 20px;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.08),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #f8fbff,
      #eef4ff
    );
}

/* =========================================================
   404 CARD
========================================================= */

.tv-404-card{
  width:100%;
  max-width:560px;

  padding:52px 40px;

  text-align:center;

  background:var(--white);

  border:1px solid var(--border);
  border-radius:28px;

  box-shadow:
    0 20px 50px rgba(15,23,42,.08);
}

/* =========================================================
   ERROR CODE
========================================================= */

.tv-404-code{
  margin-bottom:18px;

  font-size:96px;
  font-weight:800;
  line-height:1;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

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

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

.tv-404-title{
  margin-bottom:14px;

  color:var(--text);

  font-size:34px;
  font-weight:700;

  line-height:1.2;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.tv-404-desc{
  max-width:420px;

  margin:0 auto;

  color:var(--muted);

  font-size:16px;
  line-height:1.8;
}

/* =========================================================
   ACTIONS
========================================================= */

.tv-404-actions{
  margin-top:32px;

  display:flex;
  justify-content:center;
}

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

.tv-404-btn{
  min-width:200px;
}

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

@media(max-width:768px){

  .tv-404-page{
    padding:40px 16px;
  }

  .tv-404-card{
    padding:40px 24px;

    border-radius:24px;
  }

  .tv-404-code{
    font-size:76px;
  }

  .tv-404-title{
    font-size:28px;
  }

  .tv-404-desc{
    font-size:15px;
  }

  .tv-404-btn{
    width:100%;
  }

}