/* =========================
   TRAJECTA GLOBAL STYLE
========================= */

:root{
  --bg:#ffffff;
  --panel:#f7f8fb;
  --line:#e6e8ee;
  --text:#0b0f1a;
  --muted:#6b7280;
  --brand:#2563eb;
  --radius:16px;
  --shadow:0 15px 40px rgba(0,0,0,.08);
}

/* Clean page look */
body{
  background:var(--bg);
}

/* =========================
   HEADER LOGO REPLACE
========================= */

/* Hide default logo image */
.site-branding img{
  display:none!important;
}

/* Custom text logo */
.site-branding::before{
  content:"TRAJECTA";
  font-size:20px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--text);
}

/* Make header clickable */
.site-branding{
  cursor:pointer;
}

/* =========================
   SNAPSHOT LAYOUT
========================= */

.trajecta-wrap{
  max-width:1100px;
  margin:auto;
  padding:60px 20px;
}

.trajecta-title{
  font-size:42px;
  font-weight:700;
  text-align:center;
}

.trajecta-sub{
  text-align:center;
  color:var(--muted);
  margin-top:10px;
}

/* Cards */
.tr-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}

.tr-card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.tr-card h4{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.tr-score{
  font-size:28px;
  font-weight:700;
  margin-top:6px;
}

/* Timeline */

.tr-timeline{
  margin:60px 0;
  position:relative;
  height:70px;
}

.tr-line{
  height:6px;
  background:linear-gradient(to right,#ddd,#ddd);
  border-radius:10px;
}

.tr-you{
  position:absolute;
  top:-12px;
  width:24px;
  height:24px;
  background:var(--brand);
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(37,99,235,.15);
  transition:all .6s ease;
}

/* Prediction box */

.tr-prediction{
  background:var(--panel);
  border-radius:var(--radius);
  padding:25px;
  text-align:center;
  box-shadow:var(--shadow);
}

.tr-big{
  font-size:34px;
  font-weight:800;
  margin:10px 0;
}

/* Buttons */

.tr-btn{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:16px 26px;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  margin-top:20px;
}

.tr-btn:hover{
  opacity:.9;
}

/* Responsive */

@media(max-width:900px){
  .tr-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .tr-grid{
    grid-template-columns:1fr;
  }
}