/* styles.css */
:root{
  --bg:#f8f7ff;
  --ink:#2e2c3a;
  --primary:#7c79ff;
  --accent:#ff8a80;
  --mint:#87e6c7;
  --sun:#ffe082;
  --text:#2e2c3a;
  --muted:#6b6980;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,"Segoe UI",Inter,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.section{padding:clamp(2rem,4vw,4rem) 1.2rem; max-width:1200px; margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem 1rem; background:rgba(248,247,255,.9); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:4px solid var(--ink);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.logo{display:block}
.brand-name{font-weight:800; letter-spacing:.4px}
.site-nav{display:flex; gap:1rem; margin-left:auto}
.nav-link{
  padding:.4rem .8rem; border:3px solid var(--ink); border-radius:999px; text-decoration:none; color:var(--text);
  background:linear-gradient(0deg,rgba(124,121,255,.14),rgba(124,121,255,0));
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-link:hover{transform:translateY(-2px); box-shadow:0 6px var(--ink)}
.nav-link.active{background:var(--mint); box-shadow:0 6px var(--ink)}
.nav-toggle{display:none; margin-left:auto; font-size:1.4rem; border:3px solid var(--ink); background:var(--sun); border-radius:10px; padding:.3rem .6rem}

.hero{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:1rem}
.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1}
.hero p{color:var(--muted)}
.hero-ctas{display:flex; gap:.8rem; margin-top:1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1rem; border:3px solid var(--ink); border-radius:16px; text-decoration:none; font-weight:700; transition:transform .2s ease, box-shadow .2s ease}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 6px var(--ink)}
.btn-outline{background:#fff}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px var(--ink)}
.hero-art{position:relative}
.character{width:100%; max-width:360px; animation:float 4s ease-in-out infinite}
.decor{position:absolute; right:-4%; bottom:0; width:55%; opacity:.7; animation:wiggle 6s ease-in-out infinite}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{
  background:#fff; border:4px solid var(--ink); border-radius:18px; padding:1rem;
  box-shadow:0 8px var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 12px var(--ink)}
.card-icon{height:80px; display:grid; place-items:center; margin-bottom:.6rem}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.about-text p{margin:.4rem 0; color:var(--muted)}
.about-art svg{width:100%}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.portfolio-item{
  background:#fff; border:4px solid var(--ink); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:.6rem;
  box-shadow:0 8px var(--ink); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.portfolio-item:hover{transform:translateY(-4px); box-shadow:0 12px var(--ink); filter:saturate(1.1)}

.contact-form{display:grid; gap:.8rem; max-width:640px}
.field{display:grid; gap:.3rem}
input,textarea{
  border:3px solid var(--ink); border-radius:12px; padding:.7rem .8rem; font:inherit; background:#fff
}
.form-status{min-height:1.4rem}

.social{display:flex; gap:.8rem; margin-top:1rem}

.site-footer{padding:2rem 1rem; text-align:center; color:var(--muted)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-1.8deg)}75%{transform:rotate(1.8deg)}}

@media (max-width:960px){
  .hero{grid-template-columns:1fr; text-align:center}
  .decor{display:none}
}
@media (max-width:780px){
  .cards{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .site-nav.open{display:flex; flex-direction:column; position:absolute; top:64px; right:8px; background:#fff; border:4px solid var(--ink); border-radius:12px; padding:.6rem; box-shadow:0 8px var(--ink)}
  .cards{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
}