:root{
  --cream:#faf7f2;
  --white:#ffffff;
  --coral:#ff6f61;
  --teal:#67b8b1;
  --mustard:#d6b73f;
  --dusty:#afc7d8;
  --olive:#9e9b43;
  --plum:#6a1848;
  --navy:#25324a;
  --blush:#e8b8be;
  --sage:#c5c8b1;
  --shadow:0 12px 30px rgba(37,50,74,.10);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins", Arial, sans-serif;
  color:var(--navy);
  background:linear-gradient(180deg,#fffdf9 0%, var(--cream) 100%);
  line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(calc(100% - 2rem), var(--max)); margin-inline:auto}
.serif{font-family:"DM Serif Display", Georgia, serif}
.eyebrow{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  background:rgba(103,184,177,.16); font-size:.9rem; font-weight:600;
}
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background:rgba(250,247,242,.88); border-bottom:1px solid rgba(37,50,74,.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:78px;
}
.brand{
  display:flex; align-items:center; gap:.8rem; font-weight:700; font-size:1.05rem;
}
.brand-mark{
  width:42px; height:42px; border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--coral),var(--teal),var(--mustard));
  box-shadow:var(--shadow);
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; border-radius:50%;
}
.brand-mark::before{width:26px; height:26px; background:rgba(255,255,255,.5); left:-4px; top:5px}
.brand-mark::after{width:18px; height:18px; background:rgba(255,255,255,.7); right:4px; bottom:5px}
nav ul{
  display:flex; align-items:center; gap:1.2rem; list-style:none; margin:0; padding:0;
}
nav a{font-weight:500}
nav a:hover{color:var(--plum)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.25rem; border-radius:999px; font-weight:700;
  border:1px solid transparent; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral); color:white; box-shadow:var(--shadow)}
.btn-secondary{background:white; border-color:rgba(37,50,74,.12)}
.btn-accent{background:var(--teal); color:var(--navy)}
.hero{
  padding:4.5rem 0 2rem;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.hero h1{
  margin:.75rem 0 1rem; font-size:clamp(3rem,6vw,5.4rem); line-height:.95;
  letter-spacing:.2px;
}
.hero p{
  max-width:620px; font-size:1.08rem; margin-bottom:1.5rem;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap}
.visual-card{
  background:white; border-radius:32px; box-shadow:var(--shadow);
  padding:1.2rem; position:relative; overflow:hidden;
}
.artboard{
  min-height:520px; border-radius:24px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,111,97,.95) 0 12%, transparent 13%),
    radial-gradient(circle at 75% 20%, rgba(103,184,177,.9) 0 11%, transparent 12%),
    radial-gradient(circle at 82% 80%, rgba(214,183,63,.9) 0 13%, transparent 14%),
    radial-gradient(circle at 16% 72%, rgba(232,184,190,.95) 0 13%, transparent 14%),
    linear-gradient(145deg, #fff 0%, #f6f3ed 100%);
  position:relative;
  overflow:hidden;
}
.window{
  position:absolute; inset:10% 9% auto 9%; background:#fff; border-radius:24px; box-shadow:var(--shadow);
  padding:1rem; border:1px solid rgba(37,50,74,.08);
}
.window-bar{
  display:flex; gap:.45rem; margin-bottom:1rem
}
.window-bar span{
  width:11px; height:11px; border-radius:50%;
}
.window-bar span:nth-child(1){background:var(--coral)}
.window-bar span:nth-child(2){background:var(--mustard)}
.window-bar span:nth-child(3){background:var(--teal)}
.mock-hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:center;
}
.mock-box{
  border-radius:20px; background:var(--cream);
  padding:1rem;
}
.mock-title{height:22px; width:72%; background:var(--navy); border-radius:999px; opacity:.9; margin-bottom:.8rem}
.mock-line{height:12px; background:rgba(37,50,74,.15); border-radius:999px; margin:.55rem 0}
.mock-line.small{width:68%}
.mock-line.tiny{width:48%}
.mock-image{
  height:230px; border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.2)),
    linear-gradient(135deg,var(--dusty),var(--teal),var(--mustard));
  position:relative; overflow:hidden;
}
.mock-image::before{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.2); top:-40px; right:-20px;
}
.mock-image::after{
  content:""; position:absolute; left:24px; bottom:24px; width:90px; height:90px;
  border-radius:28px; background:rgba(255,255,255,.35);
}
.shape-sparkle{
  position:absolute; right:10%; top:8%; font-size:2rem; color:var(--plum); opacity:.85;
}
.section{padding:5rem 0}
.split{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.section h2{
  font-size:clamp(2rem, 4vw, 3.3rem); line-height:1.02; margin:.5rem 0 1rem
}
.section-intro{max-width:700px; margin-bottom:2rem}
.band{
  background:linear-gradient(90deg, rgba(255,111,97,.18), rgba(103,184,177,.18), rgba(214,183,63,.18));
  border-block:1px solid rgba(37,50,74,.08);
}
.band-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.15rem 0;
  text-align:center; font-weight:700;
}
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.card{
  background:white; border-radius:24px; padding:1rem; box-shadow:var(--shadow);
  border:1px solid rgba(37,50,74,.08);
}
.card-thumb{
  height:220px; border-radius:18px; margin-bottom:1rem; overflow:hidden; position:relative;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.55) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--sage), var(--dusty), var(--blush));
}
.card-thumb.alt1{background:linear-gradient(135deg,var(--coral),#ffb27c,var(--mustard))}
.card-thumb.alt2{background:linear-gradient(135deg,var(--plum),#9f2a8f,var(--blush))}
.card-thumb.alt3{background:linear-gradient(135deg,var(--teal),#7cc9cd,var(--dusty))}
.card-thumb::after{
  content:""; position:absolute; inset:auto 14px 14px 14px; height:48px; border-radius:16px;
  background:rgba(255,255,255,.62);
}
.tag{
  display:inline-block; padding:.35rem .7rem; border-radius:999px; font-size:.82rem; font-weight:700;
  background:rgba(37,50,74,.08);
}
.meta{display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0}
.card h3{margin:.5rem 0 .35rem; font-size:1.4rem}
.soft-panel{
  background:white; border-radius:28px; box-shadow:var(--shadow); padding:1.5rem;
  border:1px solid rgba(37,50,74,.08);
}
.checklist{padding:0; margin:1rem 0 0; list-style:none}
.checklist li{padding:.45rem 0 0 .2rem}
.checklist li::before{content:"✦ "; color:var(--coral); font-weight:700}
.about-art{
  min-height:420px; border-radius:28px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 20% 80%, rgba(106,24,72,.16) 0 18%, transparent 19%),
    radial-gradient(circle at 80% 20%, rgba(255,111,97,.18) 0 16%, transparent 17%),
    linear-gradient(145deg, var(--dusty), #edf2f7, var(--cream));
}
.about-art .portrait{
  position:absolute; inset:auto 10% 8% 10%; height:72%; border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:2px solid rgba(255,255,255,.7);
}
.about-art .portrait::before{
  content:""; position:absolute; width:120px; height:120px; border-radius:50%;
  background:rgba(103,184,177,.32); left:calc(50% - 60px); top:14%;
}
.about-art .portrait::after{
  content:""; position:absolute; width:170px; height:170px; border-radius:44% 56% 48% 52% / 40% 40% 60% 60%;
  background:rgba(255,111,97,.25); left:calc(50% - 85px); top:36%;
}
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem;
}
.stat{
  background:rgba(250,247,242,.92); border-radius:20px; padding:1rem;
}
.cta{
  background:linear-gradient(135deg, rgba(103,184,177,.95), rgba(175,199,216,.9));
  color:var(--navy);
}
.cta .soft-panel{
  background:rgba(255,255,255,.7)
}
.contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem;
}
.form{
  display:grid; gap:1rem;
}
.form input, .form textarea{
  width:100%; padding:1rem 1.1rem; border-radius:18px; border:1px solid rgba(37,50,74,.14);
  font:inherit; background:white;
}
.form textarea{min-height:160px; resize:vertical}
.callout{
  background:rgba(255,255,255,.72); padding:1rem 1.15rem; border-radius:20px; margin:.8rem 0;
}
.footer{
  padding:2rem 0 3rem; border-top:1px solid rgba(37,50,74,.08);
}
.footer-grid{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap}
.page-hero{
  padding:3rem 0 1rem;
}
.page-hero .soft-panel{
  position:relative; overflow:hidden;
}
.page-hero .soft-panel::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:rgba(255,111,97,.12); right:-40px; top:-70px;
}
.project-layout{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem;
}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.placeholder{
  min-height:220px; border-radius:20px; background:
  linear-gradient(135deg, rgba(175,199,216,.85), rgba(232,184,190,.88), rgba(250,247,242,.95));
  position:relative; overflow:hidden;
}
.placeholder::before{
  content:"Project Mockup"; position:absolute; left:1rem; top:1rem;
  font-weight:700; color:rgba(37,50,74,.75)
}
.placeholder.tall{min-height:320px}
.placeholder.short{min-height:160px}
.note{
  border-left:4px solid var(--coral); padding-left:1rem; color:rgba(37,50,74,.85)
}
@media (max-width: 980px){
  .hero-grid, .split, .contact-grid, .project-layout, .mock-hero {grid-template-columns:1fr}
  .cards, .grid-3{grid-template-columns:repeat(2,1fr)}
  .band-grid, .stats{grid-template-columns:repeat(2,1fr)}
  nav ul{gap:.8rem; font-size:.95rem}
}
@media (max-width: 720px){
  .cards, .grid-2, .grid-3, .band-grid, .stats{grid-template-columns:1fr}
  .nav-wrap{flex-direction:column; align-items:flex-start; padding:1rem 0}
  nav ul{flex-wrap:wrap}
  .hero{padding-top:2rem}
}