/* Vegitecture — Vegetable-Inspired Architecture
   Responsive website. Pure CSS (no framework).  */
:root{
  --bg: #0c0f0d;
  --card: #111513;
  --elev: #121714;
  --text: #e8efe9;
  --muted: #b6c7bd;
  --primary: #46c07a;
  --primary-2: #99e1b4;
  --accent: #ffd166;
  --ring: #2a2f2c;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1a211c, transparent 60%),
              radial-gradient(1000px 500px at 110% 10%, #142019, transparent 60%),
              var(--bg);
  line-height:1.55;
}

img{max-width:100%;display:block}

.container{width:min(1120px, 92%); margin-inline:auto}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; position:sticky; top:0; z-index:9;
  backdrop-filter: saturate(140%) blur(10px);
}
.logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:800; letter-spacing:.3px; font-size:1.15rem;
}
.logo img{width:28px;height:28px; filter: drop-shadow(0 4px 10px rgba(70,192,122,.25));}

.nav-toggle{display:none; background:none; border:0; width:44px; height:44px; padding:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--text); margin:6px auto; transition:.2s}

.nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--text)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; 
  padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:800; border:1px solid transparent; transition:.2s}
.btn--primary{background:linear-gradient(135deg,var(--primary),#3aa368); color:#032414; box-shadow: var(--shadow)}
.btn--secondary{background:transparent; border-color:var(--ring); color:var(--text)}
.btn--ghost{background:transparent; border:1px solid var(--ring); padding:8px 14px; border-radius:12px}
.btn--inverse{background:#f5fff8; color:#04321b}

.display{
  font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(2.2rem, 4.2vw, 4.2rem); line-height:1.05; margin:0;
}
.display span{ color:var(--primary-2); text-shadow: 0 10px 40px rgba(70,192,122,.3) }

.lead{color:var(--muted); font-size:clamp(1rem, 1.2vw, 1.25rem)}

.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:40px; padding:50px 0 20px;
}
.hero__content .cta{display:flex; gap:14px; margin:18px 0 28px}
.stats{display:flex; gap:24px}
.stat{display:flex; flex-direction:column; align-items:flex-start}
.stat strong{font-size:1.6rem}
.stat span{color:var(--muted); font-size:.9rem}

.hero__art{ position:relative; min-height:420px; }
.blob{ position:absolute; width:200px; height:200px; background:linear-gradient(180deg,#203226,#121713); border-radius:34% 66% 47% 53% / 61% 33% 67% 39%; display:grid; place-items:center; box-shadow: var(--shadow); border:1px solid #1d2a22 }
.blob img{ width:68%; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.blob--1{ top:10%; left:8%; transform:rotate(-8deg) }
.blob--2{ top:40%; right:2%; transform:rotate(8deg) }
.blob--3{ bottom:3%; left:28%; transform:rotate(-3deg) }

.ring{ position:absolute; inset:auto; border:1px dashed var(--ring); border-radius:50% }
.ring--1{ width:360px; height:360px; top:8%; left:12%; opacity:.5; }
.ring--2{ width:260px; height:260px; bottom:10%; right:5%; opacity:.4; }
.ring--3{ width:160px; height:160px; top:45%; left:40%; opacity:.3; }

.section{ padding:60px 0 }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:24px }
.section__head h2{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); margin:0 }
.section__head p{ color:var(--muted); max-width:620px }

.grid{ display:grid; gap:22px }
.projects{ grid-template-columns: repeat(4, 1fr) }
.card{ background:linear-gradient(180deg, var(--elev), var(--card)); border:1px solid #1a211c; border-radius:18px; overflow:hidden; box-shadow: var(--shadow); transition:.25s transform, .25s box-shadow }
.card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.45) }
.card__media{ width:100%; aspect-ratio: 4 / 3; object-fit: contain; padding:18px }
.card__body{ padding:14px 16px 18px }
.card__body h3{ margin:0 0 6px }
.link{ color:var(--primary-2); text-decoration:none; font-weight:700 }

.about{ display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:36px }
.stack{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr) }
.stack__item{ background:linear-gradient(180deg, var(--elev), var(--card)); border:1px solid #1a211c; padding:14px; border-radius:16px }

.checks{ list-style:none; margin:12px 0 24px; padding:0 }
.checks li{ margin-bottom:10px; position:relative; padding-left:28px }
.checks li::before{ content:''; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary)); }

.services .service-grid{ grid-template-columns: repeat(3, 1fr) }
.service{ background:linear-gradient(180deg, var(--elev), var(--card)); border:1px solid #1a211c; border-radius:18px; padding:20px }
.service .icon img{ width:28px; height:28px }

.blog{ grid-template-columns: repeat(3, 1fr) }
.post{ background:transparent; border:1px dashed var(--ring); border-radius:16px; padding:18px }
.post h3{ margin-top:0 }

.cta-banner{ padding:40px 0 80px }
.cta-banner__inner{ border:1px solid #26302a; border-radius:22px; background: radial-gradient(800px 400px at 30% -10%, #1c2a21, transparent 60%), #0e1511; padding:34px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.cta-banner .btn{ flex:0 0 auto }

.site-footer{ padding:30px 0 60px; }
.foot-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:24px; align-items:flex-start }
.footer-logo{ margin-bottom:8px }
.site-footer h4{ margin:0 0 8px }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.small{ color:var(--muted); font-size:.92rem }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(20px); transition: .6s cubic-bezier(.2,.75,.2,1) }
.reveal.is-visible{ opacity:1; transform: translateY(0) }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__art{ order:-1; min-height:360px }
  .projects{ grid-template-columns: repeat(2, 1fr) }
  .about{ grid-template-columns: 1fr }
  .services .service-grid, .blog{ grid-template-columns: 1fr 1fr }
  .section__head{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 640px){
  .nav-toggle{ display:block }
  .nav{ position:fixed; inset:64px 16px auto; background: radial-gradient(900px 380px at 10% -10%, #1c2a21, transparent 60%), #0e1511; border:1px solid #202923; border-radius:16px; padding:12px; transform: scale(.98); opacity:0; visibility:hidden; transition:.2s; }
  .nav.open{ opacity:1; visibility:visible; transform: none }
  .nav ul{ flex-direction:column; align-items:stretch }
  .hero__art{ min-height:300px }
  .projects{ grid-template-columns: 1fr }
  .services .service-grid, .blog{ grid-template-columns: 1fr }
  .cta-banner__inner{ flex-direction:column; align-items:flex-start }
  .foot-grid{ grid-template-columns: 1fr }
}