:root{
 --green:#1E6B3A;
 --green2:#2E8B57;
 --green-light:#81C784;
 --dark:#0D2917;
 --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;color:#444;overflow-x:hidden;background:#fff}

/* ============ HERO + FAIXA (ocupam juntos a primeira tela) ============ */
.hero-wrap{
 min-height:100vh;
 display:flex;
 flex-direction:column;
}

.hero{
 flex:1;
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 color:#fff;
 background:linear-gradient(-45deg,
 var(--dark),
 var(--green),
 #1a5c40,
 var(--green2));
 background-size:300% 300%;
 animation:gradientMove 70s linear infinite;
 overflow:hidden;
 padding:40px 20px;
}

/* opção C (futura): trocar o background acima por uma foto real + overlay, ex:
   background:
     linear-gradient(rgba(10,40,20,.65),rgba(10,40,20,.65)),
     url('hero.jpg') center/cover no-repeat;
   e aplicar um Ken Burns (scale leve animado) na própria imagem dentro de um wrapper. */

.pixel{
 position:absolute;
 border-radius:6px;
 background:rgba(255,255,255,.45);
 box-shadow:0 0 18px rgba(255,255,255,.15);
 animation:floatPixel 7s ease-in-out infinite;
}
.p1{width:20px;height:20px;top:18%;left:10%;animation-delay:0s}
.p2{width:28px;height:28px;top:65%;left:14%;animation-delay:-2s}
.p3{width:16px;height:16px;top:30%;left:88%;animation-delay:-4s}
.p4{width:24px;height:24px;top:75%;left:85%;animation-delay:-1.5s}
.p5{width:18px;height:18px;top:50%;left:5%;animation-delay:-5s}
.p6{width:22px;height:22px;top:15%;left:75%;animation-delay:-3s}

.content{position:relative;z-index:2;padding:20px;max-width:920px;animation:fadeUp 1s ease}

.brand{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:22px;
 margin-bottom:36px;
 flex-wrap:wrap;
}
.brand-symbol{height:78px;width:auto}
.brand-text{text-align:left}
.brand-name{
 font-family:'Playfair Display',serif;
 font-size:clamp(1.8rem,4vw,2.6rem);
 letter-spacing:1px;
 line-height:1.1;
}
.brand-sub{
 font-size:.85rem;
 letter-spacing:1.5px;
 text-transform:uppercase;
 color:rgba(255,255,255,.78);
 margin-top:6px;
}

h1{
 font-family:'Playfair Display',serif;
 font-size:clamp(2.1rem,5vw,3.6rem);
 margin-bottom:20px;
}
.subtitle{
 font-size:1.1rem;
 line-height:1.7;
 max-width:720px;
 margin:0 auto 32px;
}
.btn{
 display:inline-block;
 padding:16px 40px;
 background:rgba(255,255,255,.12);
 border:1px solid rgba(255,255,255,.3);
 backdrop-filter:blur(15px);
 color:#fff;
 text-decoration:none;
 border-radius:50px;
 transition:.3s;
}
.btn:hover{
 transform:translateY(-4px);
 background:var(--green);
}

/* ============ FAIXA DE DESTAQUE ============ */
.highlight{
 background:linear-gradient(135deg,var(--green),var(--dark));
 color:#fff;
 padding:30px 20px;
 text-align:center;
 font-weight:500;
 letter-spacing:1.5px;
 font-size:clamp(.85rem,1.6vw,1rem);
}

/* ============ FEATURES ============ */
.features{
 padding:40px 8%;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:30px;
 background:#fff;
}

.card{
 padding:40px 30px;
 border-radius:25px;
 background:rgba(255,255,255,.85);
 backdrop-filter:blur(15px);
 box-shadow:0 12px 24px rgba(0,0,0,.06);
 transition:transform .4s ease, box-shadow .4s ease;
}

.card:hover{
 transform:translateY(-12px);
 box-shadow:0 28px 50px rgba(13,41,23,.18);
}

.card h3{
 color:var(--green);
 margin-bottom:15px;
}

/* ============ INFO ============ */
.info{
 padding:40px 20px;
 text-align:center;
 background:#F7FBF8;
}

.info h2{
 font-family:'Playfair Display',serif;
 color:var(--green);
 margin-bottom:20px;
 font-size:2.5rem;
}

/* ============ FOOTER ============ */
footer{
 background:linear-gradient(135deg,var(--dark),var(--green));
 color:#fff;
 padding:30px 8% 35px;
}

.footer-brand{
 text-align:center;
 font-size:1.3rem;
 letter-spacing:1px;
 font-family:'Playfair Display',serif;
 margin-bottom:35px;
 padding-bottom:20px;
 border-bottom:1px solid rgba(255,255,255,.15);
}

.footer-grid{
 display:grid;
 grid-template-columns:1fr 1.3fr 1.1fr;
 gap:0;
 max-width:1200px;
 margin:0 auto;
}

.footer-block{
 padding:0 30px;
 position:relative;
 text-align:left;
}

.footer-block:not(:first-child)::before{
 content:'';
 position:absolute;
 left:0;
 top:8px;
 bottom:8px;
 width:1px;
 background:rgba(255,255,255,.18);
}

.footer-block:first-child{
 padding-left:0;
}

.footer-block h4{
 font-size:.78rem;
 letter-spacing:1.5px;
 text-transform:uppercase;
 color:rgba(255,255,255,.6);
 margin-bottom:14px;
 font-weight:600;
}

.footer-block p,
.footer-block a{
 color:#fff;
 text-decoration:none;
 line-height:1.8;
 font-size:.95rem;
 display:block;
 text-align:left;
}

.footer-block a:hover{
 color:var(--green-light);
}

@media (max-width:700px){
 .footer-grid{grid-template-columns:1fr;gap:30px}
 .footer-block{padding-left:0;text-align:left}
 .footer-block:not(:first-child)::before{display:none}
 .footer-block:not(:first-child){
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.18);
 }
 .brand{flex-direction:column;text-align:center}
 .brand-text{text-align:center}
}

/* ============ ANIMAÇÕES ============ */
@keyframes float{
 0%,100%{transform:translateY(0) translateX(0)}
 50%{transform:translateY(-30px) translateX(20px)}
}

@keyframes floatPixel{
 0%,100%{transform:translateY(0) rotate(0deg);opacity:.35}
 50%{transform:translateY(-28px) rotate(10deg);opacity:.7}
}

@keyframes gradientMove{
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}

@keyframes fadeUp{
 from{opacity:0;transform:translateY(40px)}
 to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
 *{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
 }
}