:root{
  --green: #0b6b3f;
  --gold: #caa43b;
  --muted: #556;
  --maxw: 1100px;
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#0e1720; background: #fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:28px;}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.site-header{padding:20px 0; position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75)); backdrop-filter: blur(6px); z-index:40;}
.navcontainer{display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.brand .logo{height:46px;}
.nav a{margin-left:18px; font-weight:600; color:var(--muted);}
.nav a.cta{padding:8px 12px; border-radius:10px; background:linear-gradient(90deg,var(--gold), #d4a93e); color:white; box-shadow: 0 6px 18px rgba(202,164,59,0.16)}

.hero{padding:80px 18px; background:linear-gradient(180deg, #fff 0%, #fbfbfb 100%); border-bottom:1px solid rgba(10,10,10,0.03)}
.hero-inner{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center; max-width:var(--maxw); margin:0 auto; padding:0 18px;}
.hero-left h1{font-size:48px; margin:0 0 12px; line-height:1.02; font-weight:800; color:#071018;}
.sub{margin:0 0 18px; color:var(--muted); font-weight:400;}
.hero-cta .btn{margin-right:10px}
.card-visual{background:linear-gradient(180deg, rgba(11,107,63,0.05), rgba(202,164,59,0.02)); border-radius:18px; padding:34px; display:flex; align-items:center; justify-content:center; box-shadow: 0 20px 50px rgba(11,107,63,0.06);}
.visual-logo{width:220px; height:auto; display:block;}

.section{padding:36px 18px;}
.section-title{font-size:28px; margin:0 0 6px; color:#071018; font-weight:700;}
.section-intro{color:var(--muted); margin:0 0 20px;}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.service-card{background:linear-gradient(180deg,#fff,#fff); border-radius:12px; padding:20px; box-shadow: 0 8px 28px rgba(12,18,20,0.04); transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .3s; border:1px solid rgba(10,10,10,0.03)}
.service-card:hover{transform:translateY(-8px); box-shadow: 0 30px 60px rgba(10,20,30,0.06)}

.split{display:flex; gap:36px; align-items:flex-start;}
.split > div{flex:1}
.bullets{margin-top:12px; padding-left:18px; color:var(--muted)}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:linear-gradient(180deg,#fff,#fff); border-radius:12px; padding:20px; text-align:center; box-shadow: 0 8px 30px rgba(11,107,63,0.04);}
.stat .num{font-weight:800; color:var(--green); font-size:20px}

.card{background:white; border-radius:12px; padding:22px; box-shadow: 0 10px 40px rgba(12,18,20,0.04)}
.contact-form .row{display:flex; gap:12px}
.contact-form input, .contact-form textarea{width:100%; padding:12px; border-radius:10px; border:1px solid #e7e7e7; font-size:15px; outline:none}
.btn{background:var(--green); color:white; padding:12px 18px; border-radius:10px; font-weight:700; border:none; cursor:pointer; box-shadow: 0 10px 30px rgba(11,107,63,0.12)}
.ghost, .btn.ghost{background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:10px 14px; border:1px solid rgba(0,0,0,0.06)}

.site-footer{padding:28px 0; border-top:1px solid rgba(10,10,10,0.03); color:var(--muted)}

/* responsive */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-right{order:2}
  .navcontainer{padding:0 18px}
  .services-grid{grid-template-columns:1fr; margin-top:12px}
  .split{flex-direction:column}
}
/* reveal animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.9,.2,1)}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none; transform:none; opacity:1}
}


/* Apple-style subtle parallax */
.parallax {
  will-change: transform;
  transition: transform 0.3s ease-out;
}

html {
  scroll-behavior: smooth;
}


/* Apple-style floating subtitle */
.sub {
  position: relative;
  transition: transform .6s ease-out, opacity .6s ease-out;
}

.sub.floating {
  transform: translateY(-8px);
  opacity: 1;
}