:root {
  --navy: #061a3a;
  --navy-2: #0a2857;
  --blue: #1677ff;
  --cyan: #36b8ff;
  --text: #172033;
  --muted: #657086;
  --light: #f4f8ff;
  --line: #dfe8f5;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(6, 26, 58, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10,40,87,.08);
}
.nav-wrap { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { width: 150px; height: 56px; overflow: hidden; display: flex; align-items: center; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; }
.main-nav a:hover { color: var(--blue); }
.nav-cta { padding: 11px 18px; color: #fff !important; background: linear-gradient(135deg,var(--blue),var(--cyan)); border-radius: 9px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span { display:block; width:25px; height:2px; background:var(--navy); margin:5px; }

.hero {
  min-height: 760px;
  padding-top: 78px;
  position: relative;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(3,17,43,.97) 0%, rgba(4,25,62,.9) 45%, rgba(4,25,62,.25) 70%, rgba(4,25,62,.08) 100%),
    url("assets/mg-lcd-cover.jpg") center/cover no-repeat;
  color: #fff;
}
.hero-overlay { position:absolute; inset:0; background: radial-gradient(circle at 70% 40%, transparent 0, rgba(0,30,85,.12) 36%, rgba(0,14,35,.2) 100%); }
.hero-content { position:relative; z-index:1; }
.hero-copy { max-width: 680px; padding: 85px 0; }
.eyebrow, .section-label { display:inline-block; color:var(--blue); font-size:13px; letter-spacing:.14em; font-weight:800; }
.hero .eyebrow { color:#62c8ff; }
.hero h1 {
  font-family:"Montserrat",sans-serif;
  font-size:clamp(42px,6vw,72px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:18px 0 22px;
}
.hero p { color:#d7e6ff; max-width:620px; font-size:18px; }
.hero-actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn {
  display:inline-flex;
  min-height:50px;
  padding:0 24px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:.25s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 12px 28px rgba(22,119,255,.32); }
.btn-secondary { color:#fff; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.07); }
.btn-light { background:#fff; color:var(--navy); }
.hero-points { display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; color:#eef6ff; font-size:14px; }
.hero-points span::before { content:"✓"; color:#4bc6ff; font-weight:800; margin-right:8px; }

.trust-strip { background:#fff; box-shadow:var(--shadow); position:relative; z-index:2; }
.trust-grid { min-height:112px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
.trust-grid div { display:flex; gap:12px; align-items:center; justify-content:center; border-right:1px solid var(--line); }
.trust-grid div:last-child { border-right:0; }
.trust-grid strong { color:var(--blue); font-size:25px; font-family:"Montserrat"; }
.trust-grid span { font-size:13px; color:var(--muted); max-width:110px; line-height:1.35; }

.section { padding:105px 0; }
.split-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; }
.section h2, .contact-section h2 {
  font-family:"Montserrat",sans-serif;
  color:var(--navy);
  font-size:clamp(34px,4vw,50px);
  line-height:1.18;
  letter-spacing:-.03em;
  margin:14px 0 22px;
}
.section-copy p { color:var(--muted); }
.check-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-top:28px; }
.check-list span { font-weight:600; font-size:14px; }
.check-list span::before { content:"✓"; color:var(--blue); margin-right:9px; }
.about-card { border-radius:24px; background:linear-gradient(145deg,#f7faff,#e5f0ff); padding:32px; box-shadow:var(--shadow); }
.about-card img { width:100%; height:310px; object-fit:contain; border-radius:18px; background:#fff; }
.about-card-body { padding:20px 10px 0; }
.about-card h3 { color:var(--navy); font-family:"Montserrat"; font-size:28px; margin:0; }
.about-card p { color:var(--muted); margin:6px 0 0; }

.products { background:var(--light); }
.section-heading { max-width:760px; margin-bottom:52px; }
.centered { text-align:center; margin-left:auto; margin-right:auto; }
.section-heading p { color:var(--muted); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 24px; transition:.25s; }
.product-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); border-color:#b9d8ff; }
.product-icon {
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; font-weight:800; font-size:20px;
}
.product-card h3 { color:var(--navy); margin:20px 0 10px; font-size:19px; }
.product-card p { color:var(--muted); font-size:14px; margin:0; }
.quality-banner {
  margin-top:28px; padding:38px 42px; border-radius:20px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  background:linear-gradient(110deg,var(--navy),#0b4ca5);
}
.quality-banner h3 { font-family:"Montserrat"; font-size:30px; margin:8px 0; }
.quality-banner p { color:#d6e8ff; margin:0; max-width:720px; }
.section-label.light { color:#72d1ff; }

.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.advantage-grid article { border-top:3px solid var(--blue); background:#fff; padding:28px; box-shadow:0 12px 38px rgba(6,26,58,.08); }
.number { color:#b9d6fb; font-size:30px; font-weight:800; }
.advantage-grid h3 { color:var(--navy); font-size:21px; margin:18px 0 10px; }
.advantage-grid p { color:var(--muted); font-size:14px; margin:0; }

.process { background:var(--navy); color:#fff; }
.process .section-heading h2 { color:#fff; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.process-grid::before { content:""; position:absolute; top:30px; left:12%; right:12%; height:1px; background:#28558e; }
.process-item { padding:0 25px; text-align:center; position:relative; }
.process-item span {
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); font-weight:800; position:relative; z-index:1;
}
.process-item h3 { margin:0 0 9px; }
.process-item p { color:#aebfda; font-size:14px; }

.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; }
.faq-intro { color:var(--muted); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item button { width:100%; padding:22px 0; display:flex; justify-content:space-between; border:0; background:transparent; font-weight:700; text-align:left; color:var(--navy); cursor:pointer; }
.faq-item button span { font-size:22px; color:var(--blue); transition:.25s; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { color:var(--muted); margin:0; padding:0 35px 22px 0; }
.faq-item.active .faq-answer { max-height:160px; }
.faq-item.active button span { transform:rotate(45deg); }

.contact-section { padding:100px 0; color:#fff; background:linear-gradient(120deg,#04142f,#0b3978); }
.contact-grid { display:grid; grid-template-columns:1fr .85fr; gap:80px; align-items:center; }
.contact-section h2 { color:#fff; }
.contact-section p { color:#c9dcf7; }
.contact-meta { display:flex; gap:18px; flex-wrap:wrap; margin-top:28px; }
.contact-meta span { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:8px 12px; border-radius:8px; font-size:13px; }
.quote-form { background:#fff; border-radius:20px; padding:30px; color:var(--text); box-shadow:0 24px 60px rgba(0,0,0,.24); }
.quote-form label { display:block; font-size:13px; font-weight:700; margin-bottom:14px; }
.quote-form input, .quote-form textarea {
  width:100%; margin-top:6px; border:1px solid var(--line); border-radius:9px;
  padding:13px 14px; outline:none; resize:vertical; background:#fbfdff;
}
.quote-form input:focus, .quote-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,119,255,.1); }
.full { width:100%; }
.form-note { color:#788397 !important; font-size:11px; line-height:1.5; margin-bottom:0; }

.site-footer { background:#020b1c; color:#9fb0ca; padding:65px 0 20px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:70px; }
.footer-brand img { width:170px; height:85px; object-fit:contain; background:#fff; border-radius:10px; margin-bottom:18px; }
.footer-brand p { max-width:360px; }
.site-footer h4 { color:#fff; margin-top:0; }
.site-footer a, .site-footer span { display:block; margin:9px 0; font-size:14px; }
.site-footer a:hover { color:#fff; }
.copyright { margin-top:45px; padding-top:20px; border-top:1px solid #13223d; display:flex; justify-content:space-between; }

.floating-whatsapp {
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#1fc86a; color:#fff; font-weight:800; box-shadow:0 12px 30px rgba(17,150,79,.35);
}

@media (max-width: 980px) {
  .main-nav {
    position:absolute; top:78px; left:0; right:0; display:none; flex-direction:column;
    align-items:stretch; gap:0; background:#fff; padding:12px 20px 22px; border-bottom:1px solid var(--line);
  }
  .main-nav.open { display:flex; }
  .main-nav a { padding:13px 8px; }
  .menu-toggle { display:block; }
  .hero { min-height:700px; background-position:62% center; }
  .hero-copy { max-width:610px; }
  .trust-grid { grid-template-columns:1fr 1fr; padding:15px 0; }
  .trust-grid div { min-height:70px; }
  .trust-grid div:nth-child(2) { border-right:0; }
  .split-grid, .contact-grid, .faq-layout { grid-template-columns:1fr; gap:45px; }
  .product-grid, .advantage-grid { grid-template-columns:1fr 1fr; }
  .process-grid { grid-template-columns:1fr 1fr; gap:45px 10px; }
  .process-grid::before { display:none; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 28px,1180px); }
  .nav-wrap { height:68px; }
  .brand { width:125px; }
  .main-nav { top:68px; }
  .hero { min-height:690px; padding-top:68px; background-position:68% center; }
  .hero::after { content:""; position:absolute; inset:0; background:rgba(1,12,31,.34); }
  .hero-content { z-index:2; }
  .hero-copy { padding:70px 0; }
  .hero h1 { font-size:42px; }
  .hero p { font-size:16px; }
  .hero-actions .btn { width:100%; }
  .hero-points { gap:10px 18px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-grid div { flex-direction:column; gap:2px; text-align:center; padding:12px 4px; }
  .trust-grid span { max-width:130px; }
  .section { padding:76px 0; }
  .check-list { grid-template-columns:1fr; }
  .about-card img { height:240px; }
  .product-grid, .advantage-grid, .process-grid { grid-template-columns:1fr; }
  .quality-banner { align-items:flex-start; flex-direction:column; padding:28px 24px; }
  .quality-banner h3 { font-size:25px; }
  .contact-section { padding:76px 0; }
  .quote-form { padding:22px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .copyright { flex-direction:column; gap:10px; }
}