:root{
  --bg: #0b1f16;
  --card: #0f2a1d;
  --muted: #a7f3d0;
  --text: #ecfdf5;
  --accent: #22c55e;
  --accent-2: #34d399;
  --border: #134e4a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--text); background:
    radial-gradient(1200px 600px at 10% -20%, #064e3b22, transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, #10b98122, transparent 60%),
    var(--bg);
}
img{max-width:100%; display:block; border-radius:16px}
.container{width:min(1100px, 92%); margin-inline:auto}
.text-gradient{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Header */
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:#0b1f16d9; border-bottom:1px solid var(--border)}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700}
.brand__text{letter-spacing:.2px}
.brand--invert .brand__text{color:#d1fae5}

.nav{display:flex; gap:18px; align-items:center}
.nav__link{color:#a7f3d0; text-decoration:none; font-weight:500}
.nav__link:hover{color:#d1fae5}

/* Mobile menu */
.nav__toggle{display:none}
.nav__hamb{display:none; cursor:pointer; width:36px; height:28px}
.nav__hamb span{display:block; height:3px; background:#a7f3d0; margin:6px 0; border-radius:2px}

@media (max-width: 860px){
  .nav{position:fixed; inset:64px 0 auto 0; background:#0b1f16f2; border-bottom:1px solid var(--border); padding:16px; transform:translateY(-120%); transition:.35s; flex-direction:column}
  .nav__hamb{display:block}
  .nav__toggle:checked ~ .nav{transform:translateY(0)}
}

/* Buttons */
.button{--ring: #34d39966; appearance:none; border:none; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#052e2b; font-weight:800; padding:10px 16px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow); transform:translateZ(0)}
.button:hover{filter:brightness(1.05)}
.button--ghost{background:transparent; color:var(--muted); border:1px solid var(--border); box-shadow:none}
.button--lg{padding:14px 20px; font-size:1.05rem}
.button--sm{padding:8px 12px; font-size:.95rem}

/* Hero */
.hero{padding:80px 0 40px}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:28px}
.hero__title{font-size:clamp(28px, 4vw, 46px); line-height:1.1; margin:0 0 10px}
.hero__subtitle{color:#cffafe; font-size:1.05rem; opacity:.95}
.hero__cta{display:flex; gap:12px; margin-top:16px}
.hero__badges{display:flex; gap:16px; padding:0; margin:18px 0 0; list-style:none; color:#a7f3d0}

.hero__scene{perspective:1200px}
.tilt{position:relative; border-radius:20px; overflow:hidden; transform-style:preserve-3d; box-shadow:var(--shadow)}
.tilt img{display:block; aspect-ratio:4/3; object-fit:cover}
.tilt__float{position:absolute; filter:blur(1px); opacity:.9}
.leaf{width:70px; height:70px; background:radial-gradient(circle at 30% 30%, #10b981, #065f46); border-radius:0 100% 0 100%}
.leaf--1{top:12%; left:-18px; animation:float 6s ease-in-out infinite}
.leaf--2{bottom:10%; right:-22px; transform:rotate(80deg); animation:float 7s ease-in-out infinite}
.leaf--3{top:40%; right:10%; transform:rotate(25deg); animation:float 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;}
}

/* Sections */
.section{padding:64px 0}
.section--alt{background:linear-gradient(180deg, transparent, #06281e 30%, transparent)}
.section__header h2{margin:0 0 8px; font-size:clamp(22px, 3vw, 32px)}
.section__header p{margin:0; color:#a7f3d0}

/* Cards 3D */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:24px}
.card3d{perspective:1000px}
.card3d__inner{position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card3d:hover .card3d__inner{transform:rotateY(180deg)}
.card3d__face{border:1px solid var(--border); background:var(--card); padding:18px; min-height:170px; border-radius:16px; box-shadow:var(--shadow); backface-visibility:hidden}
.card3d__face--back{position:absolute; inset:0; transform:rotateY(180deg)}
.card3d h3{margin:0 0 8px}
.card3d p, .card3d li{color:#a7f3d0}
.card3d li{margin:.25rem 0}

@media (max-width: 920px){
  .cards{grid-template-columns:1fr}
}

/* Gramas grid */
.grid-grams{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.gram{border:1px solid var(--border); background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .3s}
.gram:hover{transform:translateY(-4px)}
.gram__body{padding:14px}
.gram__body h3{margin:0 0 6px}
.gram__body p{margin:0; color:#a7f3d0}

@media (max-width: 920px){
  .grid-grams{grid-template-columns:1fr}
}

/* Refs */
.refs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px}
.ref{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow)}
.ref h3{margin:0 0 6px}
.ref p{margin:0; color:#a7f3d0}
@media (max-width: 920px){.refs{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery img{aspect-ratio:1/1; object-fit:cover; transition:transform .3s}
.gallery img:hover{transform:scale(1.03)}
@media (max-width: 920px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Testimonials */
.testi{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px}
.testi__viewport{overflow:hidden; position:relative}
.testi__slide{min-height:140px; margin:0; padding:20px; border:1px solid var(--border); background:var(--card); border-radius:16px; box-shadow:var(--shadow); position:absolute; inset:0; opacity:0; transform:translateX(10%); transition:opacity .4s, transform .4s}
.testi__slide.is-active{opacity:1; transform:translateX(0); position:relative}
.testi__slide blockquote{margin:0 0 8px; font-size:1.05rem}
.testi__slide figcaption{color:#a7f3d0}
.testi__nav{background:transparent; border:1px solid var(--border); color:var(--muted); width:40px; height:40px; border-radius:50%; cursor:pointer}
.testi__nav:hover{background:#083227}

/* Form */
.form__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1/-1}
.field input, .field select, .field textarea{
  background:#06281e; border:1px solid var(--border); border-radius:12px; color:var(--text); padding:12px; outline:none
}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:0 0 0 3px #34d39944}
.form__actions{display:flex; gap:12px; margin-top:10px}
.form__legal{margin:8px 0 0; color:#a7f3d0; font-size:.9rem}
@media (max-width: 920px){.form__grid{grid-template-columns:1fr}}

/* Footer */
.footer{border-top:1px solid var(--border); padding:28px 0; margin-top:40px}
.footer__grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:18px}
.footer__nav a{color:#a7f3d0; text-decoration:none; display:block; margin:6px 0}
.footer__nav a:hover{color:#d1fae5}
@media (max-width: 980px){.footer__grid{grid-template-columns:1fr}}

/* Reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1; transform:none}

/* Utility */
[hidden]{display:none !important}