/* ============================================================
   JVI Montador de Móveis — Stylesheet
============================================================ */

:root{
  --navy-950: #0d1a26;
  --navy-900: #12233355;
  --navy-dark: #14283a;
  --navy: #1a3550;
  --navy-light: #24486b;
  --amber: #d98b2b;
  --amber-light: #f0a94a;
  --amber-dark: #b06f1c;
  --cream: #faf6ef;
  --paper: #fffdf9;
  --ink: #1c2530;
  --ink-soft: #4d5a6a;
  --line: #e7e0d3;
  --green: #2f8a5f;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 4px 14px rgba(20, 30, 45, .07);
  --shadow: 0 14px 40px rgba(20, 30, 45, .12);
  --shadow-lg: 0 24px 60px rgba(20, 30, 45, .18);

  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.9,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--navy-dark); margin:0; line-height:1.2; }
p{ margin:0; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
::selection{ background: var(--amber); color:#fff; }

/* ---------- Utilities ---------- */
.text-accent{ color: var(--amber); }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--amber-dark);
  background: rgba(217,139,43,.1);
  padding:6px 14px; border-radius: 999px;
  margin-bottom:14px;
}
.tag--light{ color: var(--amber-light); background: rgba(255,255,255,.08); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius: 999px;
  font-weight:600; font-size:.98rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, color .3s ease;
  white-space: nowrap;
}
.btn--primary{
  background: linear-gradient(135deg, var(--amber-light), var(--amber-dark));
  color:#fff;
  box-shadow: 0 10px 26px rgba(217,139,43,.35);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(217,139,43,.45); }
.btn--ghost{
  background: rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ background: rgba(255,255,255,.18); transform: translateY(-3px); }
.btn--whatsapp{
  background: #1fae5c; color:#fff; padding:11px 20px; font-size:.9rem;
  box-shadow: 0 8px 20px rgba(31,174,92,.3);
}
.btn--whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,174,92,.4); background:#1c9b52; }
.btn--block{ width:100%; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--navy-dark);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__mark{
  font-family: var(--font-head); font-weight:800; font-size:2.4rem; color: var(--amber);
  letter-spacing:.1em;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.4; transform:scale(.94);} 50%{ opacity:1; transform:scale(1);} }

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 18px 0;
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.header.is-scrolled{ padding:10px 0; }
.header.is-scrolled::before{
  background: rgba(20,40,58,.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:10px; color:#fff; }
.brand__mark{ color: var(--amber); display:flex; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text strong{ font-family: var(--font-head); font-size:1.15rem; letter-spacing:.03em; }
.brand__text small{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }

.nav__list{ display:flex; gap:28px; }
.nav__link{
  position:relative; color:#fff; font-weight:500; font-size:.94rem; opacity:.88;
  padding:6px 0; transition: opacity .25s ease, color .25s ease;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--amber); transition: width .3s var(--ease);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ width:100%; }

.header__actions{ display:flex; align-items:center; gap:16px; }
.hamburger{ display:none; flex-direction:column; gap:5px; padding:6px; }
.hamburger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero / Slider ---------- */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; background: var(--navy-dark); }
.hero__slider{ position:relative; height:100%; }
.hero__slide{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease), visibility 1s;
}
.hero__slide.is-active{ opacity:1; visibility:visible; transform: scale(1); z-index:2; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1100px 700px at 15% 30%, rgba(0,0,0,0), rgba(10,20,30,.55) 85%);
}
.hero__bg--1{ background: linear-gradient(120deg,#12283f, #1c4064 55%, #2c5c86); }
.hero__bg--2{ background: linear-gradient(120deg,#152a1f, #1f4a34 55%, #2f7752); }
.hero__bg--3{ background: linear-gradient(120deg,#301c14, #5a3620 55%, #8a5426); }

.hero__content{ position:relative; z-index:1; max-width:680px; padding-top:60px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  color: var(--amber-light); font-weight:600; font-size:.85rem;
  letter-spacing:.04em; margin-bottom:18px;
}
.eyebrow__dot{ width:8px; height:8px; border-radius:50%; background: var(--amber); box-shadow:0 0 0 5px rgba(217,139,43,.25); }
.hero h1{
  color:#fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight:700; margin-bottom:20px;
}
.hero__desc{ color: rgba(255,255,255,.82); font-size:1.08rem; max-width:540px; margin-bottom:34px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero__art{
  position:absolute; right:6%; bottom:0; width:min(30vw, 380px); height:80%;
  color: rgba(255,255,255,.16); z-index:1; pointer-events:none;
  animation: float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-18px);} }

.hero__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:5;
  width:46px; height:46px; border-radius:50%;
  background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px);
  transition: background .3s ease, transform .3s ease;
}
.hero__arrow:hover{ background: var(--amber); border-color: var(--amber); transform: translateY(-50%) scale(1.08); }
.hero__arrow--prev{ left:24px; }
.hero__arrow--next{ right:24px; }

.hero__dots{ position:absolute; bottom:34px; left:50%; translate:-50% 0; z-index:5; display:flex; gap:10px; }
.hero__dot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.35); transition: all .3s var(--ease); }
.hero__dot.is-active{ width:28px; border-radius:6px; background: var(--amber); }
.hero__dot:hover{ background: rgba(255,255,255,.6); }

.hero__scroll{
  position:absolute; bottom:34px; right:34px; z-index:5; color:#fff; opacity:.7;
  animation: bounce 2s ease-in-out infinite; display:none;
}
@keyframes bounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* ---------- Trust bar ---------- */
.trustbar{ background: var(--cream); border-bottom:1px solid var(--line); padding:26px 0; }
.trustbar__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.trustbar__item{
  display:flex; align-items:center; gap:12px; justify-content:center;
  color: var(--navy-dark); font-weight:600; font-size:.92rem; text-align:center;
}
.trustbar__item svg{ color: var(--amber); flex-shrink:0; }

/* ---------- Sections ---------- */
.section{ padding: 110px 0; }
.section--alt{ background: var(--cream); }
.section__head{ max-width:640px; margin: 0 auto 56px; text-align:center; }
.section__head h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom:14px; }
.section__sub{ color: var(--ink-soft); font-size:1.05rem; }

/* ---------- Cards (Diferenciais) ---------- */
.cards--3{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:34px 28px; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(160deg, rgba(217,139,43,.08), transparent 55%);
  opacity:0; transition: opacity .4s ease;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(217,139,43,.35); }
.card:hover::before{ opacity:1; }
.card__icon{
  width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(217,139,43,.16), rgba(217,139,43,.06));
  color: var(--amber-dark); margin-bottom:20px; position:relative; z-index:1;
  transition: transform .4s var(--ease), background .4s ease;
}
.card:hover .card__icon{ transform: rotate(-8deg) scale(1.08); background: var(--amber); color:#fff; }
.card h3{ font-size:1.15rem; margin-bottom:10px; position:relative; z-index:1; }
.card p{ color: var(--ink-soft); font-size:.96rem; position:relative; z-index:1; }

/* ---------- Services ---------- */
.services{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.service{
  background: var(--paper); border-radius: var(--radius); padding:32px 26px;
  border:1px solid var(--line); text-align:center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service:hover{ transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow); }
.service__media{
  width:96px; height:96px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cream));
  color: var(--navy); border:1px solid var(--line);
  transition: transform .5s var(--ease), color .4s ease, background .4s ease;
}
.service:hover .service__media{ transform: rotate(6deg) scale(1.06); color: var(--amber-dark); background: linear-gradient(135deg, #fff3e2, #fde7c9); }
.service h3{ font-size:1.08rem; margin-bottom:10px; }
.service p{ color: var(--ink-soft); font-size:.93rem; }
.services__note{ text-align:center; margin-top:44px; color: var(--ink-soft); }
.services__note a{ color: var(--amber-dark); font-weight:600; border-bottom:1.5px solid rgba(217,139,43,.4); transition:opacity .2s; }
.services__note a:hover{ opacity:.7; }

/* ---------- Móveis Modulados ---------- */
.modular{ display:grid; grid-template-columns: 1.15fr .85fr; gap:60px; align-items:start; }
.modular__text .tag{ margin-bottom:16px; }
.modular__text h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:18px; }
.modular__lead{ color: var(--ink-soft); font-size:1.04rem; margin-bottom:28px; }
.modular__benefits{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px 20px; }
.modular__benefits li{
  display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; color: var(--navy-dark);
}
.modular__benefits svg{
  flex-shrink:0; color:#fff; background: var(--green); border-radius:50%; padding:3px;
  width:22px; height:22px;
}

.modular__cta{
  background: linear-gradient(165deg, var(--navy-dark), #0f1e2c);
  border-radius: var(--radius-lg); padding:38px 34px;
  box-shadow: var(--shadow-lg); color:#fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.modular__cta:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(20,30,45,.28); }
.modular__blocks{ color: rgba(255,255,255,.5); margin-bottom:18px; transition: transform .5s var(--ease); }
.modular__cta:hover .modular__blocks{ transform: rotate(-4deg) scale(1.04); }
.modular__cta h3{ color:#fff; font-size:1.3rem; margin-bottom:12px; }
.modular__cta p{ color: rgba(255,255,255,.75); font-size:.95rem; margin-bottom:24px; }

/* ---------- Como Funciona ---------- */
.steps{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:30px; }
.steps__line{ position:absolute; top:26px; left:12%; right:12%; height:2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.step__num{
  width:54px; height:54px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--amber-light), var(--amber-dark)); color:#fff;
  font-family: var(--font-head); font-weight:700; font-size:1.2rem;
  box-shadow: 0 10px 24px rgba(217,139,43,.35);
  transition: transform .4s var(--ease);
}
.step:hover .step__num{ transform: scale(1.12) rotate(-6deg); }
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ color: var(--ink-soft); font-size:.92rem; }

/* ---------- About / Sobre ---------- */
.section--dark{ background: linear-gradient(160deg, var(--navy-dark), #0f1e2c); position:relative; overflow:hidden; }
.section--dark::before{
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(217,139,43,.15), transparent 70%);
  top:-200px; right:-150px;
}
.about{ display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; position:relative; }
.about__text h2{ color:#fff; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:20px; }
.about__text p{ color: rgba(255,255,255,.78); margin-bottom:18px; font-size:1.02rem; }
.about__text .btn{ margin-top:12px; }

.about__stats{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.stat{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding:26px 22px;
  transition: transform .4s var(--ease), background .4s ease;
}
.stat:hover{ transform: translateY(-6px); background: rgba(255,255,255,.1); }
.stat__num{ display:block; font-family: var(--font-head); font-size:2.4rem; font-weight:800; color: var(--amber); }
.stat__icon{ color: var(--amber); margin-bottom:10px; }
.stat__label{ color: rgba(255,255,255,.75); font-size:.9rem; display:block; margin-top:6px; }

/* ---------- Segurança / Safety ---------- */
.safety{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.safety__item{
  display:flex; gap:16px; padding:26px; border-radius: var(--radius);
  border:1px solid var(--line); background: var(--paper);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.safety__item:hover{ transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(47,138,95,.35); }
.safety__icon{
  flex-shrink:0; width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(47,138,95,.12); color: var(--green);
  transition: background .3s ease, color .3s ease, transform .4s var(--ease);
}
.safety__item:hover .safety__icon{ background: var(--green); color:#fff; transform: scale(1.08); }
.safety__item h3{ font-size:1.02rem; margin-bottom:6px; }
.safety__item p{ color: var(--ink-soft); font-size:.9rem; }

/* ---------- Contato ---------- */
.section--cta{ background: linear-gradient(160deg, var(--navy-dark), #0f1e2c); position:relative; overflow:hidden; }
.section--cta::after{
  content:""; position:absolute; width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,138,95,.18), transparent 70%);
  bottom:-220px; left:-150px;
}
.contact{ display:grid; grid-template-columns: .95fr 1.05fr; gap:60px; align-items:start; position:relative; }
.contact__info h2{ color:#fff; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:16px; }
.contact__info p{ color: rgba(255,255,255,.78); margin-bottom:28px; font-size:1.02rem; }
.contact__list{ display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.contact__list li{ display:flex; align-items:center; gap:12px; color: rgba(255,255,255,.88); }
.contact__list svg{ color: var(--amber); flex-shrink:0; }
.contact__list a{ transition: color .25s ease; }
.contact__list a:hover{ color: var(--amber-light); }

.contact__social{ display:flex; gap:12px; }
.social{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition: transform .35s var(--ease), background .3s ease;
}
.social:hover{ transform: translateY(-4px); background: var(--amber); }

.contact__form{
  background: var(--paper); border-radius: var(--radius-lg); padding:36px;
  box-shadow: var(--shadow-lg); display:grid; gap:18px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.85rem; font-weight:600; color: var(--navy-dark); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:12px; padding:13px 15px;
  font-family: inherit; font-size:.96rem; color: var(--ink);
  background: var(--cream); transition: border-color .25s ease, box-shadow .25s ease;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(217,139,43,.15); background:#fff;
}

/* ---------- Footer ---------- */
.footer{ background: var(--navy-950); color: rgba(255,255,255,.7); padding-top:70px; }
.footer__inner{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer__brand p{ margin-top:16px; font-size:.92rem; max-width:280px; color: rgba(255,255,255,.55); }
.footer .brand{ color:#fff; }
.footer__col h4{ color:#fff; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col a{ font-size:.92rem; color: rgba(255,255,255,.62); transition: color .25s ease, padding-left .25s ease; }
.footer__col a:hover{ color: var(--amber-light); padding-left:4px; }
.footer__link--icon{ display:inline-flex; align-items:center; gap:8px; }
.footer__link--icon svg{ flex-shrink:0; opacity:.85; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.08); padding:22px 0; }
.footer__bottom p{ font-size:.85rem; text-align:center; color: rgba(255,255,255,.45); }
.footer-credit{ margin-top:.3rem; opacity:.7; }
.footer-credit a{ color: rgba(255,255,255,.7); font-weight:600; text-decoration:underline; }
.footer-credit a:hover{ color:#fff; }

/* ---------- Floating buttons ---------- */
.float-whats{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 28px rgba(37,211,102,.45);
  transition: transform .35s var(--ease);
}
.float-whats:hover{ transform: scale(1.1) rotate(6deg); }
.float-whats__pulse{
  position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation: ripple 2.2s ease-out infinite; z-index:-1;
}
@keyframes ripple{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }

.back-top{
  position:fixed; right:24px; bottom:96px; z-index:900;
  width:46px; height:46px; border-radius:50%; background: var(--navy-dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .3s ease;
}
.back-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-top:hover{ background: var(--amber); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.cards--3 .card:nth-child(1), .services .service:nth-child(1){ transition-delay:.02s; }
.cards--3 .card:nth-child(2), .services .service:nth-child(2){ transition-delay:.08s; }
.cards--3 .card:nth-child(3), .services .service:nth-child(3){ transition-delay:.14s; }
.cards--3 .card:nth-child(4), .services .service:nth-child(4){ transition-delay:.2s; }
.cards--3 .card:nth-child(5), .services .service:nth-child(5){ transition-delay:.26s; }
.cards--3 .card:nth-child(6), .services .service:nth-child(6){ transition-delay:.32s; }
.step:nth-child(2){ transition-delay:.06s; }
.step:nth-child(3){ transition-delay:.12s; }
.step:nth-child(4){ transition-delay:.18s; }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1024px){
  .cards--3, .services{ grid-template-columns: repeat(2,1fr); }
  .safety{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); row-gap:50px; }
  .steps__line{ display:none; }
  .about, .contact, .modular{ grid-template-columns: 1fr; }
  .about__stats{ order:-1; }
  .hero__art{ opacity:.7; width:36vw; }
}

.nav-overlay{
  position:fixed; inset:0; z-index:998; background: rgba(10,18,26,.55);
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }

@media (max-width: 860px){
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background: var(--navy-dark); padding:100px 32px 40px;
    transform: translateX(100%); transition: transform .45s var(--ease);
    z-index:999; box-shadow: -10px 0 40px rgba(0,0,0,.3);
  }
  .nav.is-open{ transform: translateX(0); }
  .nav__list{ flex-direction:column; gap:22px; }
  .nav__link{ font-size:1.05rem; }
  .hamburger{ display:flex; }
  .header__cta{ display:none; }
  .trustbar__grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px){
  .section{ padding:76px 0; }
  .hero{ min-height:600px; }
  .hero__art{ display:none; }
  .hero__scroll{ display:none; }
  .cards--3, .services, .safety, .steps{ grid-template-columns: 1fr; }
  .modular__benefits{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr 1fr; gap:32px; }
  .footer__brand{ grid-column: span 2; }
  .hero__arrow{ display:none; }
  .hero__actions .btn{ width:100%; }
  .hero__actions{ flex-direction:column; }
}

@media (max-width: 480px){
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__brand{ grid-column: span 1; }
  .trustbar__grid{ grid-template-columns: 1fr 1fr; }
  .contact__form{ padding:26px 20px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}