/* Base styles */
:root{
  --primary:#9b5de5;
  --accent:#f15bb5;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#fbfbfd;
  --radius:12px;
  --container:1100px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#111827;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--container);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:1rem 0}
.logo{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.125rem}
.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--muted);text-decoration:none;padding:0.25rem 0}
.cta{background:var(--primary);color:white;padding:0.5rem 0.75rem;border-radius:8px;text-decoration:none}
.cta:hover{opacity:0.95}
.btn{display:inline-block;background:var(--accent);color:white;padding:0.6rem 0.9rem;border-radius:8px;text-decoration:none}
.section{padding:1rem 0}
.hero{padding:1rem 0}
.cta-section{padding:0;margin:0;}
.bg-light{background:#fbfbfe}
.section-title{font-size:1.5rem;margin:0 0 1rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,0.05)}
.card h3{margin:0 0 0.5rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:0.5rem}
.contact-form label{display:flex;flex-direction:column;font-size:0.9rem;color:var(--muted)}
.contact-form input,.contact-form textarea{padding:0.6rem;border-radius:8px;border:1px solid #e6e6ef;margin-top:0.5rem}
.site-footer{padding:1.5rem 0;text-align:center;color:var(--muted);font-size:0.95rem}

/* Hero */
.hero{padding:3rem 0}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-text{flex:1}
.hero-text h1{font-size:2rem;margin:0 0 0.5rem}
.hero-text p{color:var(--muted);margin:0 0 1rem}
.hero-art{flex:1;text-align:right}
.hero-art img{max-width:100%;height:auto;border-radius:12px}
.social-links{display:flex;gap:0.75rem;align-items:center;justify-content:flex-start;margin-top:0.75rem}
.social-links .social-icon img{filter:invert(0.2)}
.cta-wrap{text-align:center;margin-top:1rem}
.cta-section .container{max-width:100%;padding:0;margin:0;}
.cta-section .cta{display:inline-block;min-width:220px;padding:0.8rem 1.2rem; margin:0 auto; text-align:center;}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column;text-align:center}
  .hero-art{text-align:center}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .main-nav{display:none}
  .header-inner{gap:0.5rem}
  .logo{font-size:1rem}
  .hero-text h1{font-size:1.5rem}
}

/* Small utilities */
a{color:inherit}

/* About layout: text left, photo right (responsive) */
.about-grid { display: flex; gap: 2rem; align-items: flex-start; }
.about-text { flex: 1; }
.about-photo { flex: 0 0 260px; max-width: 260px; margin-left: auto; }
.about-photo img { width: 100%; height: auto; border-radius: 20px; object-fit: cover; box-shadow: 0 8px 30px rgba(16,24,40,0.08); }

#practice .about-grid { justify-content: center; text-align: center; }
#practice .about-text { max-width: 650px; margin: 0 auto; }
#practice .about-photo { margin: 0 auto; }

/* Stack on smaller screens */
@media (max-width: 900px) {
  .about-grid { flex-direction: column; gap: 1.25rem; }
  .about-photo { max-width: 360px; margin: 0 auto; }
}

/* About layout: text left, photo right (responsive) */
.about-grid { display: flex; gap: 2rem; align-items: flex-start; }
.about-text { flex: 1; }
.about-photo { flex: 0 0 260px; max-width: 260px; margin-left: auto; }
.about-photo img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 30px rgba(16,24,40,0.08); }

/* Stack on smaller screens */
@media (max-width: 900px) {
  .about-grid { flex-direction: column; gap: 1.25rem; }
  .about-photo { max-width: 360px; margin: 0 auto; }
}