:root{
  --navy-deep:#0E2A47;
  --navy-panel:#123A5E;
  --navy-panel-2:#0F314F;
  --paper:#EDF0F2;
  --paper-alt:#E1E7EA;
  --ink:#0E2A47;
  --ink-soft:#3A5570;
  --line:#EAF2FA;
  --muted-on-navy:#8CADC9;
  --muted-on-paper:#56708A;
  --cyan:#4FD1E8;
  --brass:#E8A33D;
  --brass-dark:#C9832A;
  --radius:3px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button, input{font-family:inherit;}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

h1,h2,h3{font-family:var(--font-display); margin:0; line-height:1.05;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,42,71,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(234,242,250,0.12);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--line);
  letter-spacing:0.02em;
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.brand-mark{
  width:10px;height:10px;background:var(--brass);
  display:inline-block;
}
.site-nav{display:flex; align-items:center; gap:28px;}
.site-nav a{
  color:var(--muted-on-navy);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}
.site-nav a:hover{color:var(--line);}
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  border:none;
  border-radius:var(--radius);
  padding:11px 20px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-brass{background:var(--brass); color:var(--navy-deep);}
.btn-brass:hover{background:var(--brass-dark);}
.btn-outline{
  background:transparent; color:var(--line);
  border:1px solid rgba(234,242,250,0.35);
}
.btn-outline:hover{border-color:var(--cyan); color:var(--cyan);}
.btn-ink{background:var(--ink); color:var(--line);}
.btn-ink:hover{background:var(--ink-soft);}
@media (max-width:780px){
  .site-nav a{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--navy-deep);
  color:var(--line);
  overflow:hidden;
  padding:96px 0 80px;
  background-image:
    repeating-linear-gradient(0deg, rgba(234,242,250,0.05) 0, rgba(234,242,250,0.05) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(234,242,250,0.05) 0, rgba(234,242,250,0.05) 1px, transparent 1px, transparent 48px);
}
.hero .wrap{position:relative; z-index:2;}
.hero-corner{
  position:absolute; width:34px; height:34px;
  border:1px solid rgba(79,209,232,0.5);
}
.hero-corner.tl{top:28px; left:24px; border-right:none; border-bottom:none;}
.hero-corner.br{bottom:28px; right:24px; border-left:none; border-top:none;}
.hero-eyebrow{color:var(--cyan); margin-bottom:18px;}
.hero h1{
  font-size:clamp(34px, 5.4vw, 64px);
  font-weight:700;
  max-width:15ch;
  letter-spacing:-0.01em;
}
.hero p.lead{
  font-size:clamp(16px, 2vw, 19px);
  color:var(--muted-on-navy);
  max-width:46ch;
  margin:22px 0 34px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-specs{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgba(234,242,250,0.12);
  border:1px solid rgba(234,242,250,0.12);
  max-width:640px;
}
.hero-spec{background:var(--navy-deep); padding:16px 18px;}
.hero-spec .val{font-family:var(--font-mono); color:var(--cyan); font-size:15px;}
.hero-spec .lbl{font-size:12px; color:var(--muted-on-navy); margin-top:4px;}
@media (max-width:640px){
  .hero-specs{grid-template-columns:1fr; max-width:100%;}
}

/* ---------- HOW IT WORKS ---------- */
.how{background:var(--paper); padding:88px 0;}
.section-head{max-width:56ch; margin-bottom:48px;}
.section-head .eyebrow{color:var(--brass-dark); margin-bottom:10px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}
.steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:rgba(14,42,71,0.14);
  border:1px solid rgba(14,42,71,0.14);
}
.step{background:var(--paper); padding:28px 26px;}
.step .num{
  font-family:var(--font-mono); color:var(--brass-dark); font-size:13px; display:block; margin-bottom:14px;
}
.step h3{font-size:19px; margin-bottom:10px;}
.step p{font-size:14.5px; color:var(--muted-on-paper); line-height:1.55; margin:0;}
@media (max-width:780px){
  .steps{grid-template-columns:1fr;}
}

/* ---------- CONFIGURATOR ---------- */
.configurator{background:var(--navy-deep); color:var(--line); padding:88px 0 96px;}
.configurator .section-head .eyebrow{color:var(--cyan);}
.configurator .section-head p{color:var(--muted-on-navy); font-size:15px; margin-top:10px; max-width:60ch;}
.configurator-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:start;
}
@media (max-width:900px){
  .configurator-grid{grid-template-columns:1fr;}
}

.preview-panel{
  background:var(--navy-panel);
  border:1px solid rgba(234,242,250,0.14);
  padding:20px;
  position:relative;
}
.preview-stage{
  position:relative;
  aspect-ratio:1/1;
  background:var(--navy-panel-2);
  border:1px dashed rgba(79,209,232,0.35);
  overflow:hidden;
}
.preview-stage canvas{width:100%; height:100%; display:block; touch-action:none;}
.preview-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; color:var(--muted-on-navy);
  background:var(--navy-panel-2);
}
.preview-fallback{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center;
  padding:24px; font-size:13.5px; color:var(--muted-on-navy);
  background:var(--navy-panel-2);
}
.dim-tag{
  position:absolute; font-family:var(--font-mono); font-size:11px; color:var(--cyan);
  background:rgba(15,49,79,0.85); padding:3px 7px; border:1px solid rgba(79,209,232,0.4);
  pointer-events:none; white-space:nowrap;
}
.dim-tag.size{bottom:10px; left:10px;}
.dim-tag.color{top:10px; right:10px;}
.preview-hint{
  margin-top:12px; font-size:12px; color:var(--muted-on-navy); text-align:center;
  font-family:var(--font-mono);
}

.controls-panel{
  background:var(--navy-panel);
  border:1px solid rgba(234,242,250,0.14);
  padding:28px;
}
.field{margin-bottom:26px;}
.field:last-child{margin-bottom:0;}
.field-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted-on-navy); margin-bottom:12px; font-family:var(--font-mono);
}
.field-label .count{color:var(--cyan);}

.type-group{display:flex; gap:8px; flex-wrap:wrap;}
.type-btn{
  flex:1; min-width:110px;
  background:transparent; color:var(--line);
  border:1px solid rgba(234,242,250,0.25);
  border-radius:var(--radius);
  padding:11px 10px; font-size:13.5px; font-weight:500; cursor:pointer;
}
.type-btn[aria-pressed="true"]{
  border-color:var(--cyan); background:rgba(79,209,232,0.1); color:var(--cyan);
}

.swatch-grid{display:flex; flex-wrap:wrap; gap:10px;}
.swatch{
  width:32px; height:32px; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
  padding:0;
}
.swatch[aria-pressed="true"]{border-color:var(--cyan);}

.text-input, .num-input{
  width:100%; background:var(--navy-panel-2); color:var(--line);
  border:1px solid rgba(234,242,250,0.25); border-radius:var(--radius);
  padding:11px 12px; font-size:14.5px;
}
.text-input::placeholder{color:var(--muted-on-navy);}

.range-row{display:flex; align-items:center; gap:14px;}
input[type="range"]{flex:1; accent-color:var(--cyan);}
.range-val{font-family:var(--font-mono); color:var(--cyan); font-size:14px; min-width:48px; text-align:right;}

.qty-row{display:flex; align-items:center; gap:10px;}
.num-input{width:90px;}

.summary-box{
  background:var(--navy-panel-2);
  border:1px solid rgba(234,242,250,0.16);
  padding:16px 16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted-on-navy);
  line-height:1.8;
  white-space:pre-wrap;
}
.summary-box strong{color:var(--line); font-weight:500;}

.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.cta-row .btn{flex:1; justify-content:center;}
.copy-feedback{
  font-size:12px; color:var(--cyan); font-family:var(--font-mono);
  margin-top:8px; height:14px;
}

/* ---------- DIFERENCIAIS ---------- */
.diferenciais{background:var(--paper); padding:88px 0;}
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(14,42,71,0.14); border:1px solid rgba(14,42,71,0.14);}
.card{background:var(--paper-alt); padding:26px 22px;}
.card h3{font-size:16.5px; margin-bottom:8px;}
.card p{font-size:13.5px; color:var(--muted-on-paper); line-height:1.55; margin:0;}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.cards{grid-template-columns:1fr;}}

/* ---------- CONTATO ---------- */
.contato{background:var(--navy-deep); color:var(--line); padding:96px 0; text-align:center;}
.contato h2{font-size:clamp(26px,4vw,42px); max-width:20ch; margin:0 auto;}
.contato p.lead{color:var(--muted-on-navy); max-width:50ch; margin:18px auto 34px; font-size:15.5px;}
.contato-ctas{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.contato-meta{
  display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:13px; color:var(--muted-on-navy);
}
.contato-meta a{text-decoration:none; color:var(--muted-on-navy);}
.contato-meta a:hover{color:var(--cyan);}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy-deep); border-top:1px solid rgba(234,242,250,0.1); padding:22px 0 34px;}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.site-footer p{margin:0; font-size:12.5px; color:var(--muted-on-navy); font-family:var(--font-mono);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}