@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --dark:#0f3d31; --mid:#1a8f6d; --light:#7fd9ae; --bg:#faf9f5; --white:#fff;
  --ink:#12201c; --muted:#5b6b64; --line:#e4e2d9;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-0.01em; color:var(--dark);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
img{max-width:100%; display:block;}
::selection{background:var(--light); color:var(--dark);}

/* Header */
header{position:sticky; top:0; z-index:100; background:rgba(250,249,245,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1140px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:65px; width:auto;}
nav.links{display:flex; align-items:center; gap:30px; font-weight:500; font-size:0.96rem;}
nav.links > a{padding:8px 2px; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;}
nav.links > a:hover, nav.links > a.active{border-color:var(--mid); color:var(--mid);}
.dropdown{position:relative;}
.dropdown > span{cursor:pointer; display:flex; align-items:center; gap:5px; padding:8px 2px;}
.dropdown-menu{position:absolute; top:110%; left:50%; transform:translateX(-50%) translateY(6px); background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 30px rgba(15,61,49,0.12); min-width:260px; padding:8px; opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.dropdown-menu a{display:block; padding:10px 12px; border-radius:7px; font-size:0.92rem;}
.dropdown-menu a:hover{background:var(--bg); color:var(--mid);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{width:24px; height:2px; background:var(--dark);}
@media(max-width:880px){
  nav.links{position:fixed; inset:0 0 0 auto; top:63px; height:calc(100% - 63px); width:78%; max-width:320px; background:var(--white); flex-direction:column; align-items:flex-start; padding:24px; gap:6px; transform:translateX(100%); transition:transform .25s; box-shadow:-10px 0 30px rgba(0,0,0,0.08);}
  nav.links.open{transform:translateX(0);}
  nav.links > a{width:100%;}
  .dropdown-menu{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; display:none; width:100%; padding:0 0 0 10px;}
  .dropdown.open .dropdown-menu{display:block;}
  .burger{display:flex;}
}

/* Hero */
.hero{padding:90px 0 70px; position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
.eyebrow{color:var(--mid); font-weight:600; font-size:0.85rem; margin-bottom:14px;}
.hero h1{font-size:clamp(2.2rem,4.3vw,3.4rem); line-height:1.08; margin-bottom:20px;}
.hero p{color:var(--muted); font-size:1.08rem; max-width:46ch; margin-bottom:30px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-block; padding:14px 26px; border-radius:8px; font-weight:600; font-size:0.95rem; transition:transform .18s, box-shadow .18s; border:none; cursor:pointer; font-family:'Inter';}
.btn-primary{background:var(--dark); color:var(--white);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,61,49,0.25);}
.btn-ghost{border:1.5px solid var(--line); color:var(--dark); background:transparent;}
.btn-ghost:hover{border-color:var(--mid); color:var(--mid);}
.hero-mark{position:relative; width:100%; display:flex; align-items:center; justify-content:center;}
.hero-mark img{width:78%; animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;} .hero-mark{max-width:220px; margin:0 auto;}}

/* Sections */
section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head p{color:var(--muted); margin-top:12px;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.item-row{display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line);}
.item-row:last-child{border-bottom:1px solid var(--line);}
.item-num{font-family:'Outfit'; font-weight:600; color:var(--light); font-size:1.1rem; min-width:34px;}
.item-row h3{font-size:1.15rem; margin-bottom:6px;}
.item-row p{color:var(--muted); font-size:0.96rem; max-width:60ch;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:880px){.grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;}}

.panel{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px; transition:transform .2s, box-shadow .2s;}
.panel:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,61,49,0.08);}
.panel h3{font-size:1.05rem; margin-bottom:8px;}
.panel p{color:var(--muted); font-size:0.92rem;}
.tag{display:inline-block; font-size:0.75rem; font-weight:600; color:var(--mid); background:rgba(127,217,174,0.16); padding:4px 10px; border-radius:20px; margin-bottom:10px;}

.stat-row{display:flex; gap:50px; flex-wrap:wrap; padding-top:10px;}
.stat b{display:block; font-family:'Outfit'; font-size:2rem; color:var(--dark);}
.stat span{color:var(--muted); font-size:0.88rem;}
.stat-band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.quote{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;}
.quote p{font-size:1rem; color:var(--ink); margin-bottom:14px;}
.quote .who{font-size:0.86rem; color:var(--muted); font-weight:600;}

.cta-band{background:var(--dark); color:var(--white); border-radius:16px; padding:50px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:var(--white); font-size:1.7rem; max-width:420px;}
.cta-band .btn-primary{background:var(--light); color:var(--dark);}
.cta-band .btn-primary:hover{box-shadow:0 10px 22px rgba(0,0,0,0.25);}

.step{display:flex; gap:18px; align-items:flex-start;}
.step-dot{width:38px; height:38px; border-radius:50%; background:var(--dark); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Outfit'; font-weight:600; flex-shrink:0;}
.step-line{width:1px; background:var(--line); flex:1; margin:8px 0 8px 19px;}

/* Footer */
footer{background:var(--dark); color:#cfe6db; padding:50px 0 26px; margin-top:40px;}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px;}
footer h4{color:var(--white); font-size:0.95rem; margin-bottom:14px;}
footer a{color:#cfe6db; opacity:0.85; display:block; padding:5px 0; font-size:0.9rem;}
footer a:hover{opacity:1; color:var(--light);}
.foot-bottom{text-align:center; margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); font-size:0.82rem; opacity:0.7;}
@media(max-width:880px){footer .wrap{grid-template-columns:1fr; gap:26px;}}

/* Portfolio */
.port-item{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--white); transition:transform .2s;}
.port-item:hover{transform:translateY(-4px);}
.port-thumb{height:150px; background:linear-gradient(135deg,var(--dark),var(--mid)); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'Outfit'; font-weight:600;}
.port-item .pad{padding:18px;}
.port-item h3{font-size:1rem;}
.port-item p{color:var(--muted); font-size:0.88rem; margin-top:4px;}

/* Blog */
.blog-item{display:flex; gap:20px; padding:24px 0; border-top:1px solid var(--line);}
.blog-item:last-child{border-bottom:1px solid var(--line);}
.blog-date{min-width:90px; color:var(--mid); font-weight:600; font-size:0.85rem;}
.blog-item h3{font-size:1.1rem; margin-bottom:6px;}
.blog-item p{color:var(--muted); font-size:0.93rem;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color:var(--dark);}
.field input, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:'Inter'; font-size:0.95rem; background:var(--white);}
.field input:focus, .field textarea:focus{outline:2px solid var(--light); border-color:var(--mid);}
.info-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:24px; margin-bottom:16px;}
.info-card h4{font-size:0.95rem; margin-bottom:6px;}
.info-card p{color:var(--muted); font-size:0.92rem;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}

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