:root{
  --bg: #F6F1E7;            /* warm sand */
  --text: #1F2723;          /* deep charcoal */
  --muted: #5E6A62;
  --primary: #2E4A3A;       /* pine */
  --primary-600:#254634;
  --accent: #C87B3C;        /* copper */
  --surface: #FFFFFF;
  --surface-2:#F2EAE0;
  --ring: rgba(40, 78, 60, .35);
}
/* Dark theme */
.theme-dark{
  --bg: #121614;
  --text: #EDEBE7;
  --muted: #B8C0B8;
  --primary:#3A614A;
  --primary-600:#214233;
  --accent:#E09A59;
  --surface:#18211D;
  --surface-2:#101613;
  --ring: rgba(224,154,89,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(1100px, 92vw); margin-inline:auto}
.narrow{width:min(900px, 92vw)}
.section{padding: clamp(48px, 8vw, 96px) 0}

.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:1px}
.brand img{display:block; border-radius:14px; box-shadow:0 2px 10px color-mix(in srgb, var(--primary) 25%, transparent)}

.main-nav{position:relative}
.nav-toggle{display:none; font-size:24px; background:none; border:none; cursor:pointer; color:var(--text)}
.main-nav .nav-list{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.main-nav a{color:var(--text); text-decoration:none; font-weight:600}
.main-nav a:hover{color:var(--accent)}
.theme-toggle{border:1px solid color-mix(in srgb, var(--text) 20%, transparent); background:var(--surface); padding:6px 10px; border-radius:10px; cursor:pointer}
@media (max-width: 760px){
  .nav-toggle{display:inline-block}
  .main-nav .nav-list{position:absolute; right:0; top:120%; background:var(--surface); padding:14px; border-radius:14px; border:1px solid color-mix(in srgb, var(--primary) 12%, transparent); box-shadow:0 10px 30px color-mix(in srgb, var(--primary) 25%, transparent); display:none; flex-direction:column}
  .main-nav.open .nav-list{display:flex}
}

.hero{
  position:relative;
  background: radial-gradient(1200px 400px at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
              radial-gradient(900px 400px at 100% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent);
}
.grid-2{display:grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(22px, 6vw, 50px); align-items:center}
@media (max-width: 880px){ .grid-2{grid-template-columns: 1fr} .hero-visual{order:-1; text-align:center} }
.hero-text h1{font-size: clamp(32px, 5vw, 48px); line-height:1.1; margin:0 0 12px 0}
.lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin: 0 0 20px 0}
.accent{color:var(--accent)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700;
  border:1px solid transparent; transition: all .2s;
}
.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary-600); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color: color-mix(in srgb, var(--text) 18%, transparent); color:var(--text)}
.btn-ghost:hover{border-color: var(--accent); color:var(--accent)}

.badges{display:flex; gap:10px; list-style:none; padding:0; margin:16px 0 0 0; flex-wrap:wrap}
.badges li{padding:6px 10px; border-radius:999px; border:1px dashed color-mix(in srgb, var(--primary) 25%, transparent); color:var(--primary); background: color-mix(in srgb, var(--surface) 80%, transparent)}

.logo-hero{width:min(520px, 80vw); max-width:100%; border-radius:22px; box-shadow: 0 30px 80px color-mix(in srgb, var(--primary) 30%, transparent)}

.waves{
  height: 40px; margin-top: 24px;
  background: linear-gradient(to right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--accent) 10%, transparent));
  mask: radial-gradient(24px 12px at 12px 50%, #000 98%, transparent 102%) repeat-x left/48px 100%;
}

h2{font-size: clamp(26px, 3.6vw, 36px); margin:0 0 16px 0}
h3{margin:0 0 8px 0}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:16px}
.card{
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius:16px; padding:18px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 10%, transparent);
}
.card p{margin:0; color:var(--muted)}
@media (max-width: 900px){ .cards{grid-template-columns:1fr} }

.contact-grid{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:22px}
.contact-block{background:var(--surface); border:1px solid color-mix(in srgb, var(--primary) 12%, transparent); border-radius:16px; padding:18px}
.contact-form{
  background:var(--surface); border:1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius:16px; padding:18px; display:grid; gap:10px
}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
  background: var(--surface-2); color: var(--text); outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{box-shadow: 0 0 0 4px var(--ring); border-color: var(--primary)}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.site-footer{padding:24px 0; border-top:1px solid color-mix(in srgb, var(--primary) 12%, transparent)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between}
.back-to-top{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; text-decoration:none; color:var(--text); border:1px solid color-mix(in srgb, var(--text) 16%, transparent)}
.back-to-top:hover{color:var(--accent); border-color:var(--accent)}

.fade-in{opacity:0; transform: translateY(10px); transition: all .6s ease-out}
.fade-in.visible{opacity:1; transform:none}

a{outline-offset:3px}
.accent-underline{background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent) 35%, transparent) 0)}