:root{
  --bg: #FFF0EB;
  --text: #F1937E;
  --muted: #6B6B6B;
  --light: #F6F6F6;
  --maxw: 1600px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:16px;}
body{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  padding-left: 32px;
  padding-right: 32px;
}

.container{max-width:var(--maxw); margin:auto; padding:32px 24px;}

/* --- INTRO --- */
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
}

.eyebrow{color:var(--muted); font-size:1.1rem;}

.name{font-size:3rem; font-weight:700;}

.subtitle{color:var(--muted); font-size:1.3rem;}

.links{margin-top:10px; font-size:1rem;}
.links a{
  text-decoration:none; 
  color:var(--text); 
  font-weight:600; 
  margin-right:12px;
  background:transparent;
  transition:background 0.3s ease, color 0.3s ease;
}
.links a:hover{
  background:#F1937E;
  color:#ffffff;
}

.hero img{
  width:200px;
  height:200px;
  border-radius:12px;
  object-fit:cover;
}

/* --- GRID --- */
.section-title{margin-top:64px; color:var(--muted); font-size:1.15rem;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:32px;
  margin-top:24px;
  justify-content:center;
  justify-items:center;
}

.grid-item{
  width:100%;
  max-width:360px;
  min-width:0;
}

.grid-item img{
  width:100%;
  aspect-ratio:360/220;
  object-fit:contain;
  object-position:center;
  background:#ffffff;
  border-radius:10px;
  display:block;
}

/* Alternate grid-item style: image fills container, no background */
.grid-item.fill img{
  object-fit:cover;
  background:transparent;
}

.grid-item h3{margin:12px 0 6px; font-size:1.75rem;}

.grid-desc {
list-style: disc;
padding-left: 20px;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.5;
}

.grid-desc li{
  padding-bottom:6px;
  color:var(--muted);
  font-size:0.9rem;
}

/* --- NUMBERS --- */
.numbers{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  margin:64px 0;
}

.numbers .section-title{
  text-align:center;
  margin-top:0;
  margin-bottom:0;
}

.numbers-container{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}
.num{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.big{font-size:2.2rem; font-weight:600;}
.label{font-size:0.9rem; color:var(--muted); text-align:center;} 

/* ==========================
   BREAKPOINT — 1200px
   ========================== */
/* @media (max-width:1200px){
  .grid{grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));}
  .grid-item{
    max-width:500px;
  }
} */

/* ==========================
   BREAKPOINT — 768px
   ========================== */
@media (max-width:768px){
  .intro{flex-direction:column; text-align:center;}
  .hero img{width:180px; height:180px;}
  .name{font-size:2.6rem;}
  .subtitle{font-size:1.1rem;}
  .grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
  .grid-item{
    max-width:100%;
  }
}

/* ==========================
   BREAKPOINT — 390px
   Matches iPhone Mini / Framer mobile
   ========================== */
@media (max-width:390px){
  html{font-size:14px;} /* global scale-down */
  .container{padding:20px;}  
  .hero img{width:150px; height:150px;}
  .grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
  .grid-item{
    max-width:100%;
  }
  .name{font-size:2.2rem;}
  .section-title{font-size:1.1rem;}
  .big{font-size:1.6rem;}
}