:root{
  --mint-50:#f3fff5;
  --mint-100:#e5fee9;
  --mint-200:#c9f3d4;
  --mint-300:#9ee6bb;
  --green-600:#2f9e72;
  --green-700:#1f7a57;
  --ink:#10372a;
  --ink-soft:#4a685c;
  --peach:#fbc4a4;
  --peach-soft:#ffe6d6;
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  font-family:var(--font-body);color:var(--ink);line-height:1.6;
  background:linear-gradient(160deg,var(--mint-100) 0%,var(--mint-50) 60%,#fff 100%);
  -webkit-font-smoothing:antialiased;overflow-x:clip;position:relative;
}
img{display:block;max-width:100%;height:auto}

/* soft background */
.bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.blob-1{width:560px;height:560px;background:var(--mint-300);top:-200px;right:-140px}
.blob-2{width:460px;height:460px;background:var(--peach-soft);bottom:-160px;left:-160px;opacity:.75}
.blob-3{width:360px;height:360px;background:var(--mint-200);top:40%;left:38%;opacity:.4}

/* hero */
.hero{
  flex:1;width:min(1080px,100% - 48px);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:72px;
  padding:64px 0 32px;
}
.hero-art{position:relative;display:grid;place-items:center}
.glow{position:absolute;width:115%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 36%,rgba(158,230,187,.32) 37% 56%,transparent 57%)}
.logo{position:relative;width:min(400px,100%);animation:float 8s ease-in-out infinite}
.logo img{width:100%;filter:drop-shadow(0 28px 40px rgba(31,122,87,.26))}

.brand{margin:0 0 12px;font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:var(--green-600)}
h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5.2vw,4.3rem);line-height:1.06;letter-spacing:-.02em}
h1 em{font-style:italic;color:var(--green-600);position:relative;white-space:nowrap;padding-right:.06em}
h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--peach);opacity:.55;border-radius:999px;z-index:-1}
.lead{margin:22px 0 0;font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--ink-soft);max-width:30em}

.contact{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--green-600),var(--green-700));
  box-shadow:0 10px 24px -8px rgba(31,122,87,.55);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(31,122,87,.6)}
.email{font-size:.95rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(16,55,42,.2)}
.email:hover{color:var(--green-700);border-color:var(--green-700)}
a:focus-visible{outline:3px solid var(--green-600);outline-offset:3px;border-radius:999px}

.footer{padding:20px 24px 28px;text-align:center;color:var(--ink-soft);font-size:.88rem}
.footer p{margin:0}

/* motion */
.reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .logo{animation:none}
  .btn{transition:none}
}

/* responsive */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;gap:28px;padding:48px 0 24px;align-content:center}
  .logo{width:min(260px,66vw)}
  .glow{width:min(360px,94vw)}
  .lead{margin-inline:auto}
  .contact{justify-content:center;flex-direction:column}
}
@media (max-width:480px){
  .hero{width:calc(100% - 40px);padding-top:40px}
  .btn{width:100%}
}