/* assets/style.css - Modern responsive styles for Tity Global Workshops */
:root{
  --bg:#0b1220; --card:#0f1724; --muted:#9aa4b2; --accent:#00b894; --accent2:#6c5ce7;
  --glass: rgba(255,255,255,0.03); --radius:12px; --maxw:1200px; --ff:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:var(--ff); background:linear-gradient(180deg,#07101a,#07131a) !important; color:#e9f2f8 !important;}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin: auto; padding:10px;}
.header{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.logo{width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 8px 30px rgba(92,75,160,0.08);}
.nav{display:flex; gap:14px; align-items:center;}
.nav a{padding:8px 10px; border-radius:8px; color:var(--muted); font-weight:600; font-size:14px}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent2)); padding:10px 14px; border-radius:10px; color:#012; font-weight:800; box-shadow:0 8px 20px rgba(0,184,148,0.08)}

.hero{display:grid; grid-template-columns:1fr 420px; gap:22px; align-items:center; margin-top:18px; padding:26px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow:0 8px 40px rgba(2,6,23,0.6);}
.hero h1{margin:0; font-size:30px; line-height:1.05}
.hero p{color:var(--muted); margin:12px 0 0 0}

/* signup card */
.card{background:var(--card); padding:16px; border-radius:12px; box-shadow:0 4px 20px rgba(2,6,23,0.6);}
.kpis{display:flex; gap:10px; margin-top:14px}
.kpi{background:var(--glass); padding:10px 12px; border-radius:10px; text-align:center; min-width:90px}
.kpi strong{display:block; font-size:18px; color:#fff}

/* grid for lists */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.card h3{margin:0 0 8px 0}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); background:rgba(255,255,255,0.02); margin-right:6px}

/* mentors */
.mentors{display:flex; gap:12px; flex-wrap:wrap}
.mentor{width:calc(33.333% - 8px); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:12px; border-radius:12px}

/* timeline */
.timeline{border-left:3px solid rgba(255,255,255,0.03); padding-left:16px}

/* faq */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}

/* forms */
.input,textarea,select{width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit;}
.btn{display:inline-block; padding:10px 12px; border-radius:10px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#001; font-weight:700; text-decoration:none; margin-top:8px}

/* footer */
.footer{margin-top:30px;/* display:flex;*/ justify-content:space-between; align-items:center; color:var(--muted); font-size:13px}

/* responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .mentor{width:calc(50% - 8px)}
}
@media (max-width:620px){
  .nav{display:none}
  .grid3{grid-template-columns:1fr}
  .mentor{width:100%}
  .hero{padding:18px}
  .container{padding:12px}
}

/* small utilities */
.muted{color:var(--muted)}
.small{font-size:13px}
.center{display:flex; align-items:center; justify-content:center}