/* SS Solução Piso Vinílico - layout premium (preto + dourado) */
:root{
  --bg:#161616;
  --text:#f6f6f8;
  --muted:#b8b8c4;

  --card:#111116;
  --soft:#0f0f13;

  --line:rgba(255,255,255,.12);
  --shadow: 0 20px 70px rgba(0,0,0,.55);

  --gold:#d4af37;
  --gold2:#b88a2b;

  --r:22px;
  --r2:16px;
  --max:1200px;
}

*{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;
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
  overflow-x:hidden;
}

/* Animated premium background image (subtle motion) */
body::before{
  content:"";
  position: fixed;
  inset: -22%;
  background-image: url("../img/bg-motion.png");
  background-size: 160% 160%;
  background-position: 50% 50%;
  opacity: .34;
  filter: blur(10px) contrast(1.12) saturate(1.06);
  transform: translate3d(0,0,0);
  z-index: -2;
  pointer-events: none;
  animation: bgdrift 10s ease-in-out infinite alternate;
}

/* Keep dots above the image */
.dots{ z-index: -1; }

@keyframes bgdrift{
  0%   { background-position: 35% 30%; transform: translate3d(-1.5%, -1.2%, 0) scale(1.03) rotate(-0.6deg); }
  50%  { background-position: 62% 48%; transform: translate3d(1.2%, 0.6%, 0) scale(1.06) rotate(0.4deg); }
  100% { background-position: 42% 68%; transform: translate3d(-0.6%, 1.4%, 0) scale(1.04) rotate(-0.2deg); }
}
  50%  { background-position: 55% 52%; }
  100% { background-position: 48% 60%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

/* gold dots */
.dots{
  --py: 0px;
  position:fixed; inset:0; pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 18% 16%, rgba(212,175,55,.35) 0 1.6px, transparent 1.6px 18px),
    radial-gradient(circle at 80% 26%, rgba(212,175,55,.24) 0 1.6px, transparent 1.6px 16px),
    radial-gradient(circle at 30% 82%, rgba(212,175,55,.24) 0 1.6px, transparent 1.6px 20px),
    radial-gradient(circle at 88% 86%, rgba(212,175,55,.22) 0 1.6px, transparent 1.6px 18px);
  background-size:260px 260px, 220px 220px, 280px 280px, 240px 240px;
  transform: translate3d(0,var(--py),0);
}

/* header */
.top{
  position:sticky; top:0; z-index:50;
  background: rgba(11,11,13,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.top-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:220px}
.brand img{
  width:44px; height:44px; border-radius:14px;
  object-fit:contain;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:6px;
}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt strong{font-size:14px; letter-spacing:.7px}
.brand-txt span{font-size:12px; color: var(--muted)}

.nav{display:flex; gap:10px; align-items:center}
.nav a{
  text-decoration:none;
  font-size:13px;
  color: var(--muted);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition:.2s ease;
}
.nav a:hover{
  color:var(--text);
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.22);
}

.top-cta{display:flex; gap:10px; align-items:center}
.menu{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.menu span{display:block; width:18px; height:2px; background: var(--text); margin:4px auto; border-radius:2px}

.mnav{
  display:none;
  border-top:1px solid var(--line);
  padding: 12px 18px 18px;
  background: rgba(11,11,13,.86);
  backdrop-filter: blur(10px);
  gap:10px;
}
.mnav a{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  transition:.2s ease;
  white-space: nowrap;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
.btn.full{width:100%}
.btn-dark{
  background: linear-gradient(180deg, rgba(11,11,13,.96), rgba(11,11,13,.90));
  color:#fff;
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}
.btn-dark:hover{border-color: rgba(212,175,55,.70)}
.btn-ghost{
  border-color: rgba(255,255,255,.18);
}
.btn-ghost:hover{
  border-color: rgba(212,175,55,.45);
}

/* hero */
.hero{padding: 36px 0 18px}
.hero-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 22px;
  align-items:center;
}
.hero-media{display:flex; justify-content:center}
.phone{
  --py: 0px;
  position:relative;
  width: min(430px, 92%);
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 14px;
  transform: translate3d(0,var(--py),0) rotate(-7deg);
}
.phone:before{
  content:"";
  position:absolute;
  inset:-110px auto auto -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(212,175,55,.28), transparent 62%);
  transform: rotate(18deg);
  pointer-events:none;
}
.phone-top{
  height: 12px;
  width: 110px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  margin: 6px auto 10px;
}
.phone img{
  width:100%;
  border-radius: 22px;
  display:block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}
.phone-chip{
  position:absolute;
  left: 18px;
  top: 18px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(11,11,13,.72);
  color:#fff;
  border:1px solid rgba(212,175,55,.30);
  backdrop-filter: blur(10px);
}
.phone-chip.c2{left:auto; right:18px; top:64px}

.kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.22);
  font-size: 12px;
}
.hero-copy h1{
  margin: 12px 0 8px;
  font-size: 54px;
  line-height:1.03;
}
.gold{color: var(--gold)}
.sub{margin: 0 0 16px; color: rgba(255,255,255,.72); font-size: 16px}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px}

.rate{display:flex; gap: 12px; align-items:center; margin-bottom: 14px}
.stars{color: var(--gold); letter-spacing:2px}
.rate-txt strong{display:block; font-size: 13px}
.rate-txt span{display:block; font-size: 12px; color: var(--muted)}

.mini-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mcard{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.micon{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.28);
  color: var(--gold);
  flex: 0 0 34px;
}
.mcard strong{display:block; font-size: 13px}
.mcard span{display:block; font-size: 12px; color: rgba(255,255,255,.68); margin-top:2px}

/* common */
h2{font-size: 30px; margin: 0 0 8px}
.desc{margin: 0 0 16px; color: rgba(255,255,255,.70)}

/* about */
.about{padding: 24px 0 10px}
.abox{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 18px;
}
.alist{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.apoint{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 14px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.aico{
  width:40px;height:40px;border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.28);
  background: rgba(212,175,55,.10);
  color: var(--gold);
  flex: 0 0 40px;
}
.aico svg{width:20px;height:20px; fill: currentColor}
.apoint strong{display:block; font-size: 13px}
.apoint span{display:block; font-size: 12px; color: rgba(255,255,255,.68); margin-top:2px}

/* why */
.why{padding: 34px 0}
.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--r);
  padding: 20px 18px;
  text-align:center;
}
.c-ico{
  width:48px;height:48px;border-radius: 18px;
  display:grid; place-items:center;
  margin: 0 auto 10px;
  background: rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.30);
  color: var(--gold);
}
.c-ico svg{width:22px;height:22px; fill: currentColor}
.card h3{margin:0 0 6px; font-size: 18px}
.card p{margin:0; color: rgba(255,255,255,.70)}

/* how */
.how{padding: 34px 0}
.how-in{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:center;
}
.device{
  --py: 0px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding: 14px;
  transform: translate3d(0, calc(var(--py) + var(--pyo, 0px)), 0);
}
.device img{
  width:100%;
  border-radius: 22px;
  display:block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}
.timeline{position:relative; margin-top: 10px}
.t-line{
  position:absolute;
  left: 16px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(212,175,55,.28);
}
.t-item{display:flex; gap: 14px; padding: 12px 0; align-items:flex-start}
.t-dot{
  width:34px;height:34px;border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(11,11,13,.96);
  color:#fff;
  border:1px solid rgba(212,175,55,.45);
  flex: 0 0 34px;
  font-weight: 900;
  position:relative;
  z-index:2;
}
.t-txt strong{display:block; font-size: 14px}
.t-txt span{display:block; font-size: 12px; color: rgba(255,255,255,.68); margin-top:2px}
.how-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}

/* gallery */
.gallery{padding: 34px 0}
.gbox{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding: 18px;
}
.ghead{display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 8px}
.gbtns{display:flex; gap:8px}
.icon{
  width:42px;height:42px;border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-size: 18px;
  color: var(--text);
}
.icon:hover{border-color: rgba(212,175,55,.45); transform: translateY(-1px)}
.shots{
  display:flex;
  gap: 12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 10px 2px 8px;
  scrollbar-width: thin;
}
.shots::-webkit-scrollbar{height:10px}
.shots::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14); border-radius: 999px}

.shot{
  border:0; padding:0; background: transparent;
  cursor:pointer;
  scroll-snap-align: start;
  flex: 0 0 260px;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.shot img{width:100%; height:220px; object-fit:cover; display:block}
.shot:hover{border-color: rgba(212,175,55,.45)}

/* testimonials */
.testimonials{padding: 34px 0}
.tgrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tcard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--r);
  padding: 18px;
}
.tstars{color: var(--gold); letter-spacing:2px; margin-bottom: 8px}
.tcard p{margin:0 0 10px; color: rgba(255,255,255,.70)}
.tname{font-size: 12px; color: var(--muted)}

/* contact */
.contact{padding: 34px 0 46px}
.cbox{
  border-radius: 28px;
  border:1px solid rgba(212,175,55,.30);
  background: linear-gradient(180deg, rgba(11,11,13,.96), rgba(11,11,13,.90));
  color:#fff;
  box-shadow: var(--shadow);
  padding: 22px;
}
.cbox .desc{color: rgba(255,255,255,.72)}
.cactions{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 0}

/* footer */
.foot{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 18px 0 26px;
  background: rgba(255,255,255,.02);
}
.foot-in{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.fbrand{display:flex; align-items:center; gap:10px}
.fbrand img{
  width: 38px; height: 38px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding: 6px;
}
.fbrand strong{display:block; font-size: 13px}
.fbrand span{display:block; font-size: 12px; color: var(--muted)}
.flinks{display:flex; gap:12px; flex-wrap:wrap}
.flinks a{
  text-decoration:none; font-size: 12px; color: var(--muted);
  padding: 6px 8px; border-radius: 12px;
}
.flinks a:hover{background: rgba(212,175,55,.10)}
.small{font-size: 12px; color: var(--muted)}

/* floating wa */
.floatwa{
  position:fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 999px;
  border:1px solid rgba(212,175,55,.45);
  background: rgba(11,11,13,.96);
  color:#fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
  font-size: 13px;
}
.floatwa:hover{border-color: rgba(212,175,55,.70); transform: translateY(-1px)}

/* lightbox + navigation */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.82);
  display:none; align-items:center; justify-content:center;
  z-index: 80;
  padding: 18px;
}
.lightbox.show{display:flex}
.lbimg{
  max-width: min(980px, 96vw);
  max-height: 86vh;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  background:#000;
}
.lbclose{
  position:fixed;
  top: 14px;
  right: 14px;
  width: 46px; height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 26px;
  cursor:pointer;
}
.lbnav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 22px;
  cursor:pointer;
}
.lbprev{left: 14px;}
.lbnext{right: 14px;}

/* responsive */
@media (max-width: 980px){
  .hero-media{display:none;}
  .hero-grid{grid-template-columns: 1fr}
  .how-in{grid-template-columns: 1fr}
  .mini-cards{grid-template-columns: 1fr}
  .alist{grid-template-columns: 1fr}
  .cards3{grid-template-columns: 1fr}
  .tgrid{grid-template-columns: 1fr}
  .hero-copy h1{font-size: 40px}
  .phone{transform: none}
}
@media (max-width: 860px){
  .nav{display:none}
  .menu{display:inline-block}
  .mnav.show{display:grid}
}


/* Parallax helpers */
[data-parallax]{will-change: transform;}


/* Subtle gold sheen on premium cards */
.card, .mcard, .tcard, .gbox, .abox{
  position: relative;
  overflow: hidden;
}
.card::after, .mcard::after, .tcard::after, .gbox::after, .abox::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.10), transparent 55%);
  opacity:.6;
  transform: translate3d(-12%, -10%, 0);
  pointer-events:none;
  animation: goldsheen 9s ease-in-out infinite alternate;
}
@keyframes goldsheen{
  0%{ transform: translate3d(-14%, -12%, 0); opacity:.35; }
  100%{ transform: translate3d(12%, 10%, 0); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  .card::after, .mcard::after, .tcard::after, .gbox::after, .abox::after{ animation:none; }
}


/* CTA pulse (pede orçamento) */
.pulse{
  position: relative;
  animation: pulse 1.6s ease-in-out infinite;
}
.pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 18px;
  border:1px solid rgba(212,175,55,.35);
  opacity:.0;
  transform: scale(.92);
  animation: pulseRing 1.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.03); }
}
@keyframes pulseRing{
  0%{ opacity:.0; transform: scale(.92); }
  40%{ opacity:.55; }
  100%{ opacity:0; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce){
  .pulse, .pulse::after{ animation:none; }
}


/* About + Gallery wrapper (reorder on mobile) */
.agwrap{display:block;}

@media (max-width: 980px){
  .agwrap{display:flex; flex-direction:column; gap:0;}
  .agwrap .gallery{order:0;}
  .agwrap .about{order:1;}
}

@media (max-width: 980px){
  .floatwa{padding: 14px 16px; font-size: 14px;}
}

/* Mobile tweak: how image up */
@media (max-width: 980px){
  .how .device{ --pyo: -50px; }
}

/* Header logo shift */
.top .brand{ margin-left: 30px; }