:root{
  --bg:#06111f;
  --bg-2:#0b1a2f;
  --card:#0f213a;
  --line:rgba(255,255,255,.1);
  --text:#f4f7fb;
  --muted:#b8c1cf;
  --orange:#f28c18;
  --orange-2:#ffae42;
  --navy:#08244a;
  --green:#25D366;
  --shadow: 0 18px 40px rgba(0,0,0,.28);
  --radius:26px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(242,140,24,.12), transparent 22rem),
    radial-gradient(circle at 20% 10%, rgba(31,84,156,.18), transparent 24rem),
    linear-gradient(180deg, var(--bg), #081628 46%, #08111b);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.container{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(6,17,31,.82);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:52px; width:auto}
.brand-copy{display:flex; flex-direction:column; gap:4px}
.brand-copy strong{font-size:1.12rem; letter-spacing:.05em}
.brand-copy span{font-size:.72rem; text-transform:uppercase; letter-spacing:.26em; color:var(--muted)}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav-links a{color:#dde4ef; font-weight:700; font-size:.96rem}
.nav-links a:hover, .nav-links a.active{color:var(--orange-2)}
.btn, button.btn{
  border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:18px; font-weight:800; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--orange), var(--orange-2)); color:#09101d}
.btn-secondary{border:1px solid var(--line); background:rgba(255,255,255,.04); color:#fff}
.btn-wa{background:var(--green); color:#07170c}
.btn-outline-orange{border:1px solid rgba(242,140,24,.34); color:#ffbf72; background:rgba(242,140,24,.08)}
.mobile-toggle{display:none; background:transparent; border:none; color:#fff; font-size:1.6rem}
.mobile-menu{display:none; padding:0 0 16px}
.mobile-menu a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:16px; margin-top:10px; background:rgba(255,255,255,.03); font-weight:700}

.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,17,31,.25), rgba(6,17,31,.75)),
    url('assets/images/splatter.png') top right / min(62vw, 760px) auto no-repeat;
  opacity:.9; pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center;
  padding:68px 0 42px;
}
.kicker{
  color:var(--orange-2); font-weight:800; text-transform:uppercase; letter-spacing:.26em; font-size:.78rem
}
h1{
  font-size:clamp(2.5rem, 5vw, 4.9rem); line-height:1.02; margin:.55rem 0 1rem; font-weight:900
}
h2{
  font-size:clamp(2rem, 3vw, 3.2rem); line-height:1.06; margin:.45rem 0 .9rem; font-weight:900
}
h3{font-size:1.45rem; margin:.25rem 0 .6rem}
.lead{font-size:1.08rem; line-height:1.8; color:var(--muted); max-width:58ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.hero-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:32px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-card .inner{padding:26px}
.hero-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:170px;
  background:url('assets/images/parts-row.png') bottom center / cover no-repeat;
  opacity:.68;
}
.hero-badge{
  display:inline-flex; padding:9px 14px; border-radius:999px; background:rgba(242,140,24,.12); border:1px solid rgba(242,140,24,.28);
  color:#ffc57d; font-weight:800; font-size:.84rem;
}
.contact-list{display:grid; gap:12px; margin-top:20px; color:#e1e7f0}
.contact-item{display:flex; gap:12px; align-items:flex-start}
.icon-dot{
  width:11px; height:11px; border-radius:99px; margin-top:9px;
  background:linear-gradient(135deg, var(--orange), #ffd37a); flex:0 0 auto;
}
.section{padding:74px 0}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-block:1px solid var(--line)}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px}
.card{
  background:linear-gradient(180deg, rgba(15,33,58,.96), rgba(10,24,42,.96));
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow)
}
.card .topline{height:6px; width:66px; border-radius:999px; background:linear-gradient(90deg, var(--orange), #ffd37a); margin-bottom:18px}
.card p, .text-muted{color:var(--muted); line-height:1.75}
.tag{display:inline-block; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.24em; color:#ffbf72}
.feature-media{
  border-radius:22px; border:1px dashed rgba(255,255,255,.17); overflow:hidden; background:#09111c;
  height:220px;
}
.feature-media img{width:100%; height:100%; object-fit:cover}
.list-check{display:grid; gap:14px}
.list-check .item{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line)}
.list-check .check{color:#ffd37a; font-weight:900}
.step{display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:22px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line)}
.step-num{width:42px; height:42px; border-radius:999px; background:linear-gradient(135deg, var(--orange), var(--orange-2)); color:#09101d; display:grid; place-items:center; font-weight:900; flex:0 0 auto}
.cta-banner{
  padding:32px; border-radius:30px; background:linear-gradient(135deg, var(--orange), var(--orange-2)); color:#0b1220; box-shadow:var(--shadow)
}
.trailer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.trailer-card .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.small{font-size:.92rem}
.page-hero{padding:60px 0 28px; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; right:-2rem; top:-2rem; width:min(48vw, 680px); height:100%;
  background:url('assets/images/splatter.png') top right / contain no-repeat; opacity:.32;
}
.page-hero .container{position:relative; z-index:1}
.footer{
  margin-top:34px;
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(6,17,31,.9), rgba(6,17,31,.98)),
    url('assets/images/footer-strip.png') bottom center / cover no-repeat;
}
.footer-grid{display:grid; grid-template-columns:1.1fr .7fr .8fr; gap:24px; padding:34px 0 26px}
.footer p, .footer li{color:var(--muted); line-height:1.8}
.footer .nav-col a{display:block; margin:.55rem 0}
.subfooter{border-top:1px solid var(--line); padding:16px 0 28px; color:#9cabbd; font-size:.9rem}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
input, textarea, select{
  width:100%; padding:15px 16px; border-radius:16px; border:1px solid var(--line); background:#08111c; color:#fff;
  font:inherit; outline:none
}
input:focus, textarea:focus, select:focus{border-color:rgba(242,140,24,.65)}
textarea{min-height:180px; resize:vertical}
.quote-note{padding:14px 16px; border-radius:16px; background:rgba(242,140,24,.08); border:1px solid rgba(242,140,24,.22); color:#ffcf95}
.whatsapp-float{
  position:fixed; right:16px; bottom:16px; z-index:30; box-shadow:var(--shadow)
}
.image-band{
  margin-top:18px; border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)
}
.image-band img{width:100%; height:300px; object-fit:cover}
.notice{
  border-left:4px solid var(--orange); padding:14px 16px; background:rgba(242,140,24,.06); border-radius:10px; color:#ffd2a0
}
@media (max-width: 980px){
  .hero-grid, .grid-3, .grid-2, .footer-grid, .trailer-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .mobile-menu.show{display:block}
  .hero-card::after{opacity:.45}
  .feature-media, .image-band img{height:240px}
}
@media (max-width: 680px){
  .container{width:min(var(--max), calc(100% - 22px))}
  .brand img{height:44px}
  .brand-copy{display:none}
  .hero-actions .btn{width:100%}
  .section{padding:58px 0}
  .form-grid{grid-template-columns:1fr}
  .hero-grid{padding-top:44px}
}