/* ============================= */
/* HEADER */
/* ============================= */

header {
  
  text-align: center;
  
  padding: 20px 10px;
  
  background: rgba(255, 255, 255, .75);
  
  backdrop-filter: blur(14px);
  
  box-shadow: 0 8px 25px rgba(37, 99, 235, .08);
  
  position: sticky;
  
  top: 0;
  
  z-index: 100;
  
  position: relative;
  
}


/* TITLE */

.site-title {
  
  font-family: "Outfit", sans-serif;
  
  font-size: 2rem;
  
  font-weight: 700;
  
  letter-spacing: .5px;
  
  background: linear-gradient(45deg, #1d4ed8, #3b82f6);
  
  -webkit-background-clip: text;
  
  -webkit-text-fill-color: transparent;
  
}


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

.profile-btn {
  
  position: absolute;
  
  right: 20px;
  
  top: 50%;
  
  transform: translateY(-50%);
  
  width: 42px;
  
  height: 42px;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  border-radius: 50%;
  
  background: rgba(59, 130, 246, .08);
  
  border: 1px solid rgba(59, 130, 246, .25);
  
  cursor: pointer;
  
  transition: .35s;
  
  color: #1d4ed8;
  
}


/* HOVER */

.profile-btn:hover {
  
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  
  color: white;
  
  transform: translateY(-50%) scale(1.08);
  
  box-shadow: 0 10px 25px rgba(59, 130, 246, .35);
  
}


/* SVG */

.profile-btn svg {
  
  width: 22px;
  
  height: 22px;
  
}


/* MOBILE */

@media (max-width:600px) {
  
  .site-title {
    font-size: 1.6rem;
  }
  
  .profile-btn {
    width: 38px;
    height: 38px;
    right: 15px;
  }
  
}
/* ============================= */
/* FEATURES SECTION */
/* ============================= */

.tracker-section{
padding:100px 20px;
background:linear-gradient(180deg,#f8fafc,#eef2ff);
}

.tracker-container{
max-width:1200px;
margin:auto;
}


/* ============================= */
/* SECTION HEADER */
/* ============================= */

.tracker-header{
  font-family:"Outfit", sans-serif;
text-align:center;
margin-bottom:60px;
}

.tracker-header h2{
  font-family:"Outfit", sans-serif;
font-size:40px;
font-weight:700;
color:#0f172a;
margin-bottom:15px;
}

.tracker-header p{
  font-family:"Outfit", sans-serif;
font-size:18px;
color:#64748b;
max-width:700px;
margin:auto;
line-height:1.7;
}


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

.tracker-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}


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

.card{

position:relative;

padding:40px;

border-radius:26px;

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

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.4);

box-shadow:0 15px 40px rgba(0,0,0,.12);

transition:all .45s cubic-bezier(.2,.8,.2,1);

overflow:hidden;

display:flex;

flex-direction:column;

}


/* ============================= */
/* GRADIENT LIGHT EFFECT */
/* ============================= */

.card::before{

content:"";

position:absolute;

width:200%;
height:200%;

top:-150%;
left:-150%;

background:linear-gradient(
135deg,
#3b82f6,
#ec4899,
#8b5cf6
);

opacity:.15;

filter:blur(90px);

transition:.7s;

}

.card:hover::before{
top:-40%;
left:-40%;
}


/* ============================= */
/* HOVER EFFECT */
/* ============================= */

.card:hover{

transform:translateY(-12px) scale(1.03);

background:linear-gradient(
135deg,
rgba(59,130,246,.15),
rgba(236,72,153,.15),
rgba(139,92,246,.15)
);

border:1px solid rgba(139,92,246,.35);

box-shadow:0 30px 80px rgba(139,92,246,.25);

}


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

.card span{
font-family:"Outfit", sans-serif;

font-size:38px;

margin-bottom:18px;

display:inline-block;

transition:.4s;

}

.card:hover span{
transform:scale(1.2) rotate(8deg);
}


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

.card h3{
font-family:"Outfit", sans-serif;
font-size:22px;

font-weight:600;

margin-bottom:12px;

color:#0f172a;

}


/* ============================= */
/* TEXT */
/* ============================= */

.card p{
font-family:"Outfit", sans-serif;

font-size:16px;

line-height:1.7;

color:#475569;

max-width:320px;

}


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

.hidden-card{
display:none;
}


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

.tracker-btn{
text-align:center;
margin-top:70px;
}

.tracker-explore{
font-family:"Outfit", sans-serif;

background:linear-gradient(135deg,#3b82f6,#8b5cf6);

color:white;

border:none;

padding:15px 36px;

font-size:16px;

border-radius:12px;

cursor:pointer;

transition:.4s;

box-shadow:0 10px 30px rgba(59,130,246,.3);

}

.tracker-explore:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(139,92,246,.35);

}


/* ============================= */
/* FADE UP ANIMATION */
/* ============================= */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}


/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width:1000px){

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

}


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

@media (max-width:600px){

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

.tracker-header h2{
font-size:28px;
}

.tracker-header p{
font-size:16px;
}

.card{
padding:28px;
}

.card h3{
font-size:18px;
}

.card p{
font-size:14px;
}

}