:root{
  --bg: #0f2d2a;        /* verde escuro inspirado na logo */
  --card: #143733;
  --text: #e9f1ef;
  --muted: #b9cbc6;
  --accent: #ffd94d;    /* amarelo logo */
  --accent-2: #ffba08;  /* amarelo mais quente p/ gradiente */
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, rgba(255,217,77,.08), transparent 60%) , var(--bg);
  overflow-x:hidden;
}

.container{ width:min(1100px, 92%); margin-inline:auto; }

.header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(0deg, rgba(15,45,42,.6), rgba(15,45,42,.9));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .7rem 0; }

.brand{ text-decoration:none; color:var(--text); display:flex; flex-direction:column; line-height:1; }
.brand-big{ font-weight:800; font-size: clamp(1.2rem, 2.3vw + .6rem, 2rem); letter-spacing: 3px; color: var(--accent); text-shadow: 0 0 10px rgba(255,186,8,.45); }
.brand-sub{ font-size:.8rem; color: var(--muted); }

.menu{ display:flex; gap:1rem; }
.menu a{
  color:var(--text); text-decoration:none; padding:.55rem .9rem; border-radius: 999px;
  transition: .2s transform, .2s background;
}
.menu a:hover{ background:rgba(255,255,255,.08); transform: translateY(-2px); }

.menu-btn{ display:none; background:none; border:0; cursor:pointer; }
.menu-btn span{ display:block; width:26px; height:2px; background:var(--text); margin:6px 0; transition:.2s; }

.hero{
  position:relative; padding: clamp(2rem, 8vw, 5rem) 0 2rem;
}
.hero-grid{ display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap:2rem; }
.hero-copy p{ color: var(--muted); max-width: 55ch; }
.hero-cta{ display:flex; gap:1rem; margin: 1.2rem 0; }
.badges{ display:flex; gap:.6rem; padding:0; margin:0; list-style:none; color:var(--muted); }
.badges li{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:.35rem .6rem; border-radius:999px; }

.hero-art{ position:relative; display:grid; place-items:center; min-height: 360px; }
.lamp-svg{ width:min(100%, 360px); filter: drop-shadow(0 10px 35px rgba(255,186,8,.2)); animation: float 6s ease-in-out infinite; }
.house{ animation: housePulse 3s ease-in-out infinite; }
.base{ opacity:.9; }
@keyframes float{ 50%{ transform: translateY(-12px);} }
@keyframes housePulse{ 50%{ filter: drop-shadow(0 0 14px rgba(255,217,77,.6)); }}

/* feixe de luz passando */
.sweep{
  position:absolute; inset:auto 0 8%; height:60%; pointer-events:none;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255, 217, 77, .0), rgba(255,217,77,.18), rgba(255,217,77,.0) 40%);
  mix-blend-mode: screen; filter: blur(20px); animation: sweep 5s linear infinite;
}
@keyframes sweep{ 0%{ transform: translateX(-60%) rotate(-8deg);} 50%{ transform: translateX(60%) rotate(8deg);} 100%{ transform: translateX(-60%) rotate(-8deg);} }

.neon{
  font-size: clamp(2.2rem, 7vw, 5rem);
  margin:0 0 .5rem;
  color: var(--accent);
  text-shadow:
    0 0 8px rgba(255,186,8,.8),
    0 0 24px rgba(255,186,8,.6),
    0 0 60px rgba(255,186,8,.35);
  letter-spacing: 2px;
}

.btn{
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:.8rem 1.1rem; border-radius: 14px;
  text-decoration:none; display:inline-block; transition:.2s transform, .25s box-shadow, .25s filter;
}
.btn:hover{ transform: translateY(-2px); }
.btn-outline{ background: transparent; }
.btn-primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#2b2b2b; border-color: transparent; font-weight:600;
}
.glow{ box-shadow: 0 0 18px rgba(255,186,8,.35); }
.btn-card{ width:100%; margin-top:.5rem; background: rgba(255,217,77,.12); color:var(--text); border-color: rgba(255,217,77,.35); }

.section{ padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.section.alt{ background: linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
.section-title{
  margin:0 0 1.2rem; font-size: clamp(1.4rem, 4.4vw, 2rem);
  text-shadow: 0 6px 22px rgba(0,0,0,.3);
}

/* Cards de produtos */
.grid.cards{ display:grid; gap:1.2rem; grid-template-columns: repeat(4, 1fr); }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 1.1rem; box-shadow: var(--shadow);
  min-height: 220px; position:relative; overflow:hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,.35); border-color: rgba(255,217,77,.35); }
.card h3{ margin:.2rem 0; }
.card p{ color: var(--muted); }
.card .mini{ display:flex; gap:.5rem; padding:0; margin:.6rem 0 0; list-style:none; color:var(--muted); flex-wrap:wrap; }
.tag, .tag-new{
  position:absolute; top:.9rem; right:.9rem; padding:.25rem .5rem; border-radius:999px;
  font-size:.75rem; font-weight:600; letter-spacing:.3px; background: rgba(255,217,77,.2); border:1px solid rgba(255,217,77,.4); color: var(--accent);
}
.tag-new{ left:.9rem; right:auto; }

/* Formulário */
.form{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:1.2rem; border-radius: 18px; box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
label{ display:block; font-weight:600; font-size:.95rem; margin:.6rem 0; }
input, select, textarea{
  width:100%; padding:.8rem; margin-top:.35rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus{ border-color: rgba(255,217,77,.55); box-shadow: 0 0 0 3px rgba(255,217,77,.18); }
.form-actions{ display:flex; align-items:center; gap:1rem; }
.form-msg{ color: var(--accent); font-weight:600; }

/* Portfólio */
.masonry{
  columns: 3 260px; column-gap: 1rem;
}
.tile{ break-inside: avoid; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; margin:0 0 1rem; box-shadow: var(--shadow); }
.tile img{ width:100%; display:block; }
.tile figcaption{ padding:.7rem; color: var(--muted); font-size:.9rem; }

/* Contato */
.contato{ display:grid; grid-template-columns: 1fr 1.3fr; align-items:start; gap:1.2rem; }
.cta-inline{ display:flex; gap:.6rem; margin-top:.8rem; }
.map iframe{ width:100%; height:320px; border:0; border-radius:16px; box-shadow: var(--shadow); }

/* Rodapé */
.footer{ border-top:1px solid rgba(255,255,255,.08); padding:1.2rem 0; background: rgba(0,0,0,.1); }
.foot{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.line{ color: var(--muted); }

/* Revelação ao rolar */
.reveal{ opacity:0; transform: translateY(18px); transition: .6s ease; }
.reveal.visible{ opacity:1; transform: none; }

/* Canvas de estrelas atrás de tudo */
#stars{ position:fixed; inset:0; z-index:-1; }

/* Responsivo */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid.cards{ grid-template-columns: repeat(2, 1fr); }
  .contato{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .grid.cards{ grid-template-columns: 1fr; }
  .menu{ position: fixed; inset: 60px 0 auto 0; transform: translateY(-120%); transition:.25s; background: rgba(20,55,51,.96); padding: .7rem 4%; border-bottom:1px solid rgba(255,255,255,.1); }
  .menu a{ display:block; padding:.9rem 0; }
  .menu.open{ transform: translateY(0%); }
  .menu-btn{ display:block; }
}