/* home.css */
/* #pragma region Home Page Typography */
.title{
  font-size:2.5rem;
  margin:0 0 12px;
  font-weight:700;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.subtitle{
  font-size:1.25rem;
  color:var(--muted);
  margin:0 0 12px;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.lead{
  color:var(--muted);
  margin-bottom:20px; 
  font-size: 1rem;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}
/* #pragma endregion */

/* #pragma region Home Page Actions */
.actions{display:flex;gap:14px; margin-bottom: 20px;}
.btn{
  background:var(--panel);
  padding:12px 18px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  display:inline-block;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn:hover{box-shadow:0 10px 26px rgba(77,163,255,0.06);transform:translateY(-2px)}
.btn.ghost{background:#191f24;color:var(--muted)}
/* #pragma endregion */

/* #pragma region Home Page Layout */
.about-skills{display:grid;grid-template-columns:1fr 360px;gap:var(--gap);align-items:start; margin-bottom: 30px;}
.about-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  padding:22px;
  border-radius:var(--card-radius);
  border:1px solid var(--card-border);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 0;
}
.preview-card{
  background:var(--panel);
  padding:18px;
  border-radius:12px;
  border:1px solid var(--card-border);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 0;
}
.skills-cards{padding:8px 0; margin-bottom: 30px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  background:var(--panel);
  padding:18px;
  border-radius:12px;
  border:1px solid var(--card-border);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 0;
}
/* #pragma endregion */

/* #pragma region Home Page Mobile Styles */
@media (max-width: 768px) {
  .about-card, .preview-card, .grid-3 .card {
    padding: 18px;
    margin-bottom: 16px;
  }
  
  .hero {
    padding: 20px 0;
  }
  
  .title {
    margin-bottom: 12px;
  }
  
  .subtitle {
    margin-bottom: 12px;
  }
  
  .lead {
    margin-bottom: 20px;
  }
}

@media (max-width:1000px){
  .about-skills{grid-template-columns:1fr; gap: 20px;}
  .grid-3{grid-template-columns:repeat(1,1fr); gap: 16px;}
  .title{font-size:2.2rem}
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
    gap: 24px;
    margin: 20px auto;
  }

  .footer {
    flex-direction: column;
    gap: 6px;
  }
  
  .hero {
    text-align: center;
    padding: 20px 0;
  }
  
  .title {
    font-size: 2rem;
    text-align: center;
    line-height: 1.2;
  }
  
  .subtitle {
    font-size: 1.1rem;
    text-align: center;
  }
  
  .lead {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .btn {
    padding: 14px 20px;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .about-card, .preview-card {
    padding: 20px;
  }
  
  .grid-3 .card {
    padding: 16px;
  }
  
  .about-skills {
    gap: 20px;
  }
  
  .skills-cards {
    padding: 0;
  }
  
  .grid-3 {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 16px 0;
  }
  
  .title {
    font-size: 1.8rem;
  }
  
  .actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
    padding: 16px 20px;
  }
  
  .about-card, .preview-card {
    padding: 16px;
  }
  
  .grid-3 .card {
    padding: 16px;
  }
}

@media (max-width: 360px) {
  .title {
    font-size: 1.7rem;
  }
  
  .btn {
    padding: 14px 16px;
    font-size: 15px;
  }
  
  .about-card, .preview-card {
    padding: 14px;
  }
}
/* #pragma endregion */