/* ---------- Central das Tintas — Caruaru ---------- */

:root{
  --ink: #110d0a;
  --ink-2: #1b1510;
  --ink-3: #241c15;
  --line: rgba(255,255,255,.09);
  --orange: #ff7a1a;
  --orange-2: #ffa64d;
  --orange-deep: #d9540a;
  --cream: #fff8f0;
  --paper: #fbf3ea;
  --text: #f7efe4;
  --text-dim: #cabfaf;
  --ink-text: #221a12;
  --ink-text-dim: #6b5f50;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.55);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-weight:800; letter-spacing:-.02em; line-height:1.08; }
.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(217,84,10,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(217,84,10,.65); }
.btn-glow{ position:relative; }
.btn-lg{ padding: 18px 34px; font-size: 1.05rem; }
.btn-link{
  color: var(--ink-text);
  font-weight:700;
  padding: 15px 6px;
  opacity:.75;
}
.btn-link:hover{ opacity:1; }
.hero .btn-link{ color:#fff; opacity:.9; }
.hero .btn-link:hover{ opacity:1; }

/* realistic drips off the primary hero button */
.drip-btn-wrap{ position:relative; display:inline-block; }
.btn-drip{
  position:absolute; top: calc(100% - 10px); width:9px; height:11px;
  background: radial-gradient(circle at 32% 28%, var(--orange-2) 0%, var(--orange) 45%, var(--orange-deep) 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 45% 45%;
  box-shadow: inset -1px -2px 2px rgba(0,0,0,.25);
  opacity:0;
  z-index:1;
  animation: btn-drip-fall 4s cubic-bezier(.6,0,.85,.35) infinite;
}
.btn-drip::after{
  content:""; position:absolute; top:22%; left:24%; width:28%; height:28%;
  background: rgba(255,255,255,.75); border-radius:50%;
}
.btn-drip-1{ left: 20%; animation-delay: 0s; }
.btn-drip-2{ left: 52%; width:7px; height:9px; animation-delay: 1.3s; }
.btn-drip-3{ left: 76%; width:6px; height:8px; animation-delay: 2.5s; }
@keyframes btn-drip-fall{
  0%{ opacity:0; transform: translateY(-4px) scaleY(.5); }
  6%{ opacity:1; transform: translateY(0) scaleY(.8); }
  55%{ opacity:1; transform: translateY(22px) scaleY(1.3); }
  68%{ opacity:1; transform: translateY(27px) scaleY(.55); }
  82%{ opacity:0; transform: translateY(27px) scaleY(.35); }
  100%{ opacity:0; transform: translateY(27px) scaleY(.35); }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- floating whatsapp ---------- */
.whats-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
}
.whats-float svg{ width:30px; height:30px; }
.pulse-ring{
  position:absolute; inset:-6px; border-radius:50%;
  border: 2px solid #25D366; opacity:.6;
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(.9); opacity:.6; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(17,13,10,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 12px; padding-bottom: 12px;
}
.logo{ height: 42px; width:auto; }
.header-inner .btn{ padding: 11px 20px; font-size:.88rem; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  background: radial-gradient(ellipse at 30% 0%, #2a1c0f 0%, var(--ink) 55%);
  color: var(--text);
  padding: 88px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.hero-glow{
  position:absolute; border-radius:50%; filter: blur(80px); z-index:-1;
  animation: drift 12s ease-in-out infinite alternate;
}
.hero-glow-a{ width:420px; height:420px; background: radial-gradient(circle, rgba(255,122,26,.45), transparent 70%); top:-120px; left:-100px; }
.hero-glow-b{ width:360px; height:360px; background: radial-gradient(circle, rgba(255,166,77,.3), transparent 70%); bottom:-140px; right:-80px; animation-delay: -6s; }
@keyframes drift{ from{ transform: translate(0,0); } to{ transform: translate(30px,20px); } }

.hero-inner{ position:relative; z-index:2; max-width: 640px; }

.price-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--orange);
  color:#fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight:800; font-size:.85rem;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px -8px rgba(255,122,26,.6);
}
.price-badge svg{ width:17px; height:17px; flex-shrink:0; }

.badge-years{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,122,26,.14);
  border: 1px solid rgba(255,122,26,.4);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  margin-bottom: 22px;
}
.badge-num{
  font-size: 1.6rem; font-weight:900; color: var(--orange-2);
  background: rgba(255,122,26,.18);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.badge-txt{ font-size:.7rem; font-weight:700; line-height:1.15; text-transform:uppercase; letter-spacing:.03em; color: var(--text-dim); }

.eyebrow{
  text-transform: uppercase; letter-spacing: .14em; font-size:.76rem;
  font-weight:700; color: var(--orange-2); margin-bottom: 14px;
}
.hero h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); color:#fff; }
.hero h1 em{ font-style:normal; color: var(--orange-2); }
.hero-sub{ margin-top:18px; font-size:1.08rem; color: var(--text-dim); max-width: 480px; }
.hero-ctas{ margin-top: 32px; display:flex; flex-wrap:wrap; align-items:center; gap: 8px 20px; }

/* hero background video */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; z-index:-2;
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, rgba(17,13,10,.94) 0%, rgba(17,13,10,.82) 42%, rgba(17,13,10,.55) 100%);
}

/* ---------- suvinil strip ---------- */
.suvinil-strip{ background: var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.suvinil-strip-inner{
  display:flex; align-items:center; gap: 22px; flex-wrap:wrap;
  padding: 20px 24px;
}
.suvinil-logo-chip{
  background: #fff; border-radius: 10px; padding: 8px 16px;
  display:inline-flex; align-items:center;
}
.suvinil-logo{ height: 22px; width:auto; display:block; }
.suvinil-divider{ width:1px; height: 26px; background: var(--line); }
.suvinil-strip-inner p{ color: var(--text-dim); font-size:.92rem; font-weight:600; }

/* ---------- showcase (novidades) ---------- */
.showcase-grid{
  position:relative; z-index:1;
  margin: 44px 0 40px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.showcase-card{
  position:relative;
  text-align:center;
  padding-top: 34px;
  animation: float 4.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.showcase-card.reveal{ transition-delay: var(--delay, 0s); }
.showcase-tag{
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding: 5px 12px; border-radius: 999px;
  white-space:nowrap;
}
.showcase-card img{
  width: 100%; max-width: 160px; margin: 12px auto 0;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(255,122,26,.2));
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.showcase-note{ text-align:center; margin-top: 8px; }

/* ---------- generic section ---------- */
.section{ position:relative; padding: 84px 0; overflow:hidden; }
.section-alt{ background: var(--cream); }
.section .eyebrow{ color: var(--orange-deep); }
.section h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--ink-text); max-width: 620px; }
.section .lead{ margin-top:14px; font-size:1.05rem; color: var(--ink-text-dim); max-width: 560px; }

.section-dark{ background: var(--ink); color: var(--text); }
.section-dark .eyebrow{ color: var(--orange-2); }
.section-dark h2{ color:#fff; }
.section-dark .lead{ color: var(--text-dim); }

.orb{ position:absolute; border-radius:50%; filter: blur(90px); z-index:0; opacity:.35; }
.orb-a{ width:360px; height:360px; background: var(--orange); top:-140px; right:-100px; }
.orb-b{ width:300px; height:300px; background: var(--orange-2); bottom:-120px; left:-100px; }

/* ---------- quiz (stepped color guide) ---------- */
.quiz-card{
  position:relative; z-index:1;
  margin-top: 40px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 48px;
  overflow:hidden;
}
.quiz-progress{ display:flex; gap:10px; margin-bottom: 30px; max-width:360px; }
.quiz-dot{ height:7px; flex:1; border-radius:999px; background: rgba(0,0,0,.08); transition: background .3s; }
.quiz-dot.is-active, .quiz-dot.is-done{ background: var(--orange); }

.quiz-step{ display:none; }
.quiz-step.is-active{ display:block; animation: fadein .4s ease; }
@keyframes fadein{ from{ opacity:0; transform: translateX(12px); } to{ opacity:1; transform:none; } }

.quiz-question{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; margin-bottom: 22px; color: var(--ink-text); }

/* step 1a — color wheel */
.color-wheel{ display:block; width:100%; max-width: 480px; margin: 0 auto; }
.wheel-wedge{
  fill: var(--hc);
  stroke: #fff; stroke-width: 3;
  cursor:pointer;
  transition: opacity .15s ease;
}
.wheel-wedge:hover{ opacity:.82; }
.wheel-label{
  margin-top: -18px;
  text-align:center;
  font-weight:800; font-size:1.05rem; color: var(--ink-text);
  background:#fff; padding: 6px 18px; border-radius:999px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.25);
  width:fit-content; margin-inline:auto;
}

/* step 1b — full color grid */
.grid-header{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  margin-bottom: 16px;
}
.grid-back{
  background:none; border:none; cursor:pointer;
  color: var(--orange-deep); font-weight:800; font-size:.85rem;
}
.grid-header h3{ font-size:1.3rem; font-weight:800; margin-right:auto; }
.grid-count{ font-size:.82rem; color: var(--ink-text-dim); font-weight:600; }

.intensity-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 20px; }
.int-pill{
  background: var(--paper); border:1.5px solid rgba(0,0,0,.08); border-radius:999px;
  padding: 8px 16px; font-weight:700; font-size:.8rem; color: var(--ink-text-dim);
  cursor:pointer; transition: all .2s;
}
.int-pill:hover{ border-color: var(--orange); }
.int-pill.is-active{ background: var(--orange); border-color: var(--orange); color:#fff; }

.color-grid-full{
  display:grid; grid-template-columns: repeat(8, 1fr); gap:3px;
  max-height: 480px; overflow-y:auto;
  padding: 4px; margin: 0 -4px;
  border-radius: var(--radius-sm);
}
.color-grid-full::-webkit-scrollbar{ width:8px; }
.color-grid-full::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:8px; }
.grid-tile{
  position:relative; aspect-ratio:1/1;
  background: var(--tc); border:none; border-radius:6px; cursor:pointer;
  display:flex; align-items:flex-end; padding:6px;
  transition: transform .1s ease;
}
.grid-tile:hover{ transform: scale(1.08); z-index:1; box-shadow: 0 6px 14px -4px rgba(0,0,0,.35); }
.grid-tile span{
  font-size:.56rem; font-weight:700; line-height:1.1; text-align:left;
  color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  opacity:0; transition: opacity .1s ease;
}
.grid-tile:hover span{ opacity:1; }
.grid-tile span.is-dark{ color: var(--ink-text); text-shadow:none; }

/* color modal (wheel photo preview) */
.color-modal{
  position: fixed; inset:0; z-index: 85;
  background: rgba(10,8,6,.72);
  backdrop-filter: blur(3px);
  display:none; align-items:center; justify-content:center;
  padding: 24px;
}
.color-modal.is-open{ display:flex; }
.color-modal-box{
  position:relative; background:#fff; color: var(--ink-text);
  border-radius: var(--radius); padding: 32px;
  max-width: 460px; width:100%;
  box-shadow: var(--shadow-lg);
  animation: modal-in .25s ease;
  text-align:center;
}
.color-modal-box h3{ font-size:1.3rem; font-weight:800; margin-bottom:18px; padding-right:20px; }

.room-preview{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius: var(--radius-sm); overflow:hidden;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.35);
  background: var(--paper);
  margin-bottom: 22px;
}
.room-layer{ position:absolute; inset:0; background-size:cover; background-position:center; }
.room-layer-wall{
  background-image: url("assets/img/sala-parede-mask.webp");
  background-color: var(--room-color, #d8d0c4);
  background-blend-mode: multiply;
}
.room-layer-furniture{ background-image: url("assets/img/sala-moveis.webp"); }

/* step 2 — ambiente */
.quiz-options{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quiz-opt{
  display:flex; align-items:center; gap:14px;
  background: var(--paper);
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  min-height: 108px;
  font-weight:700; font-size: 1.08rem; color: var(--ink-text);
  text-align:left;
  transition: border-color .2s, background .2s, transform .15s;
}
.quiz-opt svg{ width:28px; height:28px; flex-shrink:0; color: var(--orange-deep); }
.quiz-opt:hover{ border-color: var(--orange); transform: translateY(-2px); }
.quiz-opt.is-selected{ background: rgba(255,122,26,.12); border-color: var(--orange); }

/* step 3 — acabamento */
.quiz-swatches{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quiz-swatch-opt{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height: 200px;
  padding: 20px;
  border-radius: var(--radius-sm);
  border:none;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.quiz-swatch-opt:hover{ transform: translateY(-4px); box-shadow: 0 20px 34px -16px rgba(0,0,0,.4); }
.quiz-swatch-opt.is-selected{ outline: 3px solid var(--orange); outline-offset: 3px; }
.quiz-swatch-opt::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
.swatch-fosco{ background: #4C6B4F; }
.swatch-acetinado{ background: linear-gradient(135deg, #1F5C6B 30%, #4FA3B8 55%, #1F5C6B 80%); }
.swatch-semibrilho{ background: linear-gradient(135deg, #D94F4F 26%, #FFC9B3 50%, #D94F4F 78%); }
.swatch-info{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; color:#fff; }
.swatch-info strong{ font-size:1.1rem; }
.swatch-info small{ opacity:.9; font-size:.8rem; }
.mini-dots{ position:relative; z-index:1; display:flex; gap:6px; margin-bottom:auto; }
.mini-dots i{ width:12px; height:12px; border-radius:50%; background: var(--c); display:block; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* step 4 — result */
.quiz-result{ text-align:center; }
.quiz-result-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin: 0 auto 14px;
  border-radius:50%; background: rgba(255,122,26,.12); color: var(--orange-deep);
}
.quiz-result-icon svg{ width:28px; height:28px; }
.quiz-result-text{ color: var(--ink-text-dim); margin: 8px 0 26px; font-size: 1rem; }
.quiz-restart{
  display:block; margin: 14px auto 0; background:none; border:none;
  color: var(--ink-text-dim); font-weight:700; font-size:.85rem;
  text-decoration: underline; cursor:pointer;
}

/* ---------- diferenciais ---------- */
.dif-grid{
  margin-top: 40px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.dif-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
}
.dif-icon{
  width:44px; height:44px; border-radius:12px;
  background: rgba(255,122,26,.12); color: var(--orange-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.dif-icon svg{ width:22px; height:22px; }
.dif-card h3{ font-size:1.02rem; margin-bottom:6px; }
.dif-card p{ font-size:.88rem; color: var(--ink-text-dim); line-height:1.45; }

/* ---------- categorias ---------- */
.cat-grid{
  margin-top: 40px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.cat-card{
  display:block; width:100%;
  background: var(--ink);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--line);
  text-align:left;
  font-family: inherit;
  cursor:pointer;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(0,0,0,.35); }
.cat-icon{
  width:44px; height:44px; border-radius: 12px;
  background: rgba(255,122,26,.15); color: var(--orange-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.cat-icon svg{ width:22px; height:22px; }
.cat-card h3{ font-size:1.02rem; margin-bottom:6px; color:#fff; }
.cat-card p{ font-size:.85rem; color: var(--text-dim); line-height:1.45; margin-bottom:14px; }
.cat-cta{ font-size:.82rem; font-weight:700; color: var(--orange-2); }

/* ---------- category modal ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index: 80;
  background: rgba(10,8,6,.72);
  backdrop-filter: blur(3px);
  display:none; align-items:center; justify-content:center;
  padding: 24px;
}
.modal-overlay.is-open{ display:flex; }
.modal-box{
  position:relative;
  background:#fff; color: var(--ink-text);
  border-radius: var(--radius);
  padding: 36px 32px;
  max-width: 620px; width:100%;
  max-height: 86vh; overflow-y:auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in .25s ease;
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background: var(--paper); border:none; font-size:1.3rem; line-height:1;
  color: var(--ink-text-dim); cursor:pointer;
}
.modal-title{ font-size:1.4rem; font-weight:800; padding-right:30px; }
.modal-sub{ color: var(--ink-text-dim); margin-top:6px; font-size:.92rem; }
.modal-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  margin: 26px 0 28px;
}
.modal-item{ text-align:center; }
.modal-item img{
  width:100%; max-width:110px; margin:0 auto 10px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.18));
}
.modal-item span{ display:block; font-size:.8rem; font-weight:700; color: var(--ink-text); line-height:1.3; }
.modal-cta{ display:flex; width:100%; }

/* ---------- cores / paredes ---------- */
.wall-grid{
  margin-top: 40px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.wall-card{
  position:relative; display:block;
  border-radius: var(--radius-sm); overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.35);
}
.wall-card img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.wall-card:hover img{ transform: scale(1.06); }
.wall-label{
  position:absolute; left:12px; bottom:12px; right:12px;
  background: rgba(17,13,10,.72); backdrop-filter: blur(2px);
  color:#fff; font-weight:700; font-size:.85rem;
  padding: 8px 12px; border-radius: 10px;
}

/* ---------- instagram band ---------- */
.insta-band{ background: var(--ink); padding: 56px 0; }
.insta-inner{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  justify-content:space-between;
}
.insta-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
  color:#fff;
}
.insta-icon svg{ width:26px; height:26px; }
.insta-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:220px; }
.insta-text strong{ color:#fff; font-size:1.15rem; }
.insta-text span{ color: var(--text-dim); font-size:.92rem; }

/* ---------- cta band ---------- */
.cta-band{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, #2a1c0f, var(--ink));
  padding: 90px 0;
  text-align:center;
  color:#fff;
}
.cta-band-inner{ max-width: 620px; margin:0 auto; position:relative; z-index:1; }
.cta-band .eyebrow{ color: var(--orange-2); }
.cta-band h2{ color:#fff; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.cta-band .lead{ color: var(--text-dim); margin: 16px 0 32px; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--text-dim); padding: 56px 0 34px; text-align:center; }
.footer-logo{ height: 96px; margin: 0 auto 20px; filter: drop-shadow(0 0 24px rgba(255,122,26,.35)); }
.footer-locations{
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  margin-bottom: 14px;
}
.footer-location{ display:flex; flex-direction:column; gap:3px; }
.footer-location strong{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.footer-location span{ font-size:.92rem; color: var(--text-dim); }
.footer-hours{ font-size:.92rem; margin-bottom:4px; }
.footer-whats, .footer-insta{ display:inline-block; margin-top: 14px; margin-right: 18px; font-weight:700; color: var(--orange-2); }
.copyright{ margin-top: 26px; font-size:.78rem; opacity:.6; }

/* ---------- responsive ---------- */
@media (max-width: 840px){
  .dif-grid, .cat-grid, .showcase-grid, .wall-grid{ grid-template-columns: repeat(2, 1fr); }
  .quiz-card{ padding: 36px 30px; }
  .color-grid-full{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px){
  .hero{ padding: 70px 0 60px; }
  .header-inner .btn{ padding: 9px 14px; font-size:.8rem; }
  .dif-grid, .cat-grid, .showcase-grid{ grid-template-columns: 1fr; }
  .wall-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .insta-inner{ text-align:center; justify-content:center; }
  .showcase-card{ animation: none; }
  .quiz-card{ padding: 26px 20px; }
  .color-grid-full{ grid-template-columns: repeat(5, 1fr); max-height: 380px; }
  .grid-header h3{ font-size:1.1rem; }
  .quiz-options{ grid-template-columns: 1fr; }
  .quiz-swatches{ grid-template-columns: 1fr; }
  .quiz-swatch-opt{ min-height: 130px; }
  .suvinil-strip-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-locations{ flex-direction:column; align-items:center; gap:16px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ white-space: normal; text-align:center; }
  .modal-grid{ grid-template-columns: repeat(2, 1fr); }
  .modal-box{ padding: 28px 22px; }
}