:root {
  --navy: #0E2940;
  --red: #D22630;
  --gold: #E3A534;
  --off: #F7F7F7;
  --ink: #0B1623;
  --radius: 18px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}
:root[data-theme='dark']{
  --off:#0f1720;
  --ink:#e5e7eb;
  background:#0b1118;
  color:var(--ink);
}
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .contact__form,
:root[data-theme='dark'] .contact__card,
:root[data-theme='dark'] .gallery figure{background:#121926;border-color:#1f2937}
:root[data-theme='dark'] .site-header,
:root[data-theme='dark'] .site-footer{background:#0b1118;border-color:#1f2937}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; color: var(--ink); background:#fff; }
img { max-width: 100%; display:block; }
a { color: inherit; text-decoration: none; }
.container { width:min(1100px, 92%); margin-inline:auto; }
.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius: var(--radius); padding:.8rem 1.1rem; font-weight:600; border:2px solid transparent; transition: .2s transform, .2s opacity; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color:#fff; }
.btn-primary:hover { opacity:.95; }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: rgba(14,41,64,.06); }

.site-header { position: sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid #eef0f3; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; }
.nav-right { display:flex; align-items:center; gap:.4rem; }
.menu { display:flex; align-items:center; gap:.6rem; }
.menu a { padding:.5rem .7rem; border-radius:10px; }
.menu a:hover { background: rgba(14,41,64,.06); }
.nav-toggle { display:none; background:none; border:0; width:44px; height:36px; position:relative; }
.nav-toggle span { position:absolute; left:10px; right:10px; height:2px; background:var(--navy); transform-origin:left center; }
.nav-toggle span:nth-child(1) { top:10px; }
.nav-toggle span:nth-child(2) { top:17px; }
.nav-toggle span:nth-child(3) { top:24px; }

.hero { background: linear-gradient(180deg,#fff, var(--off)); position:relative; }
.hero__grid { display:grid; grid-template-columns: 1.2fr .9fr; gap: 2rem; padding: clamp(2rem, 4vw, 4rem) 0; align-items:center; }
.hero__content h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height:1.1; margin:0 0 .8rem; }
.accent { color: var(--gold); }
.hero__content p { font-size:1.05rem; max-width: 62ch; }
.hero__cta { display:flex; gap:.8rem; margin-top:1rem; flex-wrap:wrap; }
.badges { display:flex; gap:.6rem; list-style:none; padding:0; margin: 1rem 0 0; flex-wrap:wrap; }
.badges li { background:#fff; border:1px solid #e9edf0; padding:.5rem .7rem; border-radius:999px; box-shadow: var(--shadow); }

.hero__brandcard { background:#fff; border-radius: 24px; padding:1.6rem; box-shadow: var(--shadow); border:1px solid #eef0f3; text-align:center; }
.brandcard__logo { width: 88px; margin-inline:auto; }
.brandcard__name { font-weight:900; font-size:1.5rem; letter-spacing:.5px; color: var(--navy); margin:.6rem 0; }
.brandcard__slogan { color:#5b6673; }

.hero__wave { height: 8px; background: linear-gradient(90deg, var(--navy), var(--gold), var(--red)); }

.section { padding: clamp(2rem, 4vw, 3.6rem) 0; }
.section.alt { background: var(--off); }
.section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin:0 0 1rem; color: var(--navy); }

.cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:.8rem; }
.card { background:#fff; border:1px solid #eef0f3; border-radius: 18px; padding:1rem; box-shadow: var(--shadow); transition:.2s transform; }
.card:hover { transform: translateY(-3px); }
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.gallery figure { margin:0; background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f3; box-shadow: var(--shadow); }
.gallery figcaption { padding:.5rem .7rem; font-weight:600; color:var(--navy); }
.ph { aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(14,41,64,.1), rgba(227,165,52,.2)); }

.testimonials { display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; }
blockquote { background:#fff; border-left:6px solid #E3A534; margin:0; padding:1rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow); }
blockquote p { margin:.2rem 0 .6rem; font-style: italic; }

.contact { background: linear-gradient(180deg, var(--off), #fff); }
.contact__grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:.8rem; }
.contact__form label { display:block; font-weight:600; margin:.6rem 0 .2rem; }
.contact__form input, .contact__form textarea { width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid #dfe4ea; font: inherit; }
.contact__form .row { display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.contact__form { background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:1rem; box-shadow: var(--shadow); }
.contact__info { display:flex; flex-direction:column; gap:.8rem; }
.contact__card { display:flex; gap:.8rem; align-items:center; background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:1rem; box-shadow: var(--shadow); }
.contact__card img { width:52px; height:52px; }
.contact__badges { list-style:none; padding:0; margin:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.contact__badges li { background: var(--navy); color:#fff; padding:.45rem .65rem; border-radius:999px; }

.site-footer { border-top:1px solid #eef0f3; background:#fff; }
.footer__grid { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:.8rem; padding:1rem 0; }
.footer__nav { display:flex; gap:.8rem; justify-content:center; }
.footer__nav a { color:#5b6673; }
.footer__nav a:hover { color: var(--navy); }
.copyright { color:#66707d; }

.backtotop { position: fixed; right: 1rem; bottom: 1rem; width:44px; height:44px; border-radius:999px; border:0; background: var(--navy); color:#fff; font-size:1.3rem; display:none; place-items:center; box-shadow: var(--shadow); }
.backtotop.show { display:grid; }

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(12px); transition: .5s ease; }
.reveal.visible { opacity:1; transform: none; }

/* Responsive */
@media (max-width: 980px) {
  .hero__grid, .contact__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2,1fr); }
  .testimonials { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .menu { display:none; position:absolute; right:4%; top:64px; background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:.6rem; flex-direction:column; gap:.2rem; box-shadow: var(--shadow); }
  .menu.open { display:flex; }
  .nav-toggle { display:block; }
  .cards { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .contact__form .row { grid-template-columns: 1fr; }
}

/* DARK IMPROVED */

:root[data-theme='dark']{
  --off:#0d1117;
  --ink:#e6edf3;
  --navy:#0E2940;
  background:#0b0f14;
  color:var(--ink);
}
:root[data-theme='dark'] a{ color:#9ecbff; }
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .contact__form,
:root[data-theme='dark'] .contact__card,
:root[data-theme='dark'] .gallery figure{background:#111827;border-color:#293241;box-shadow:none}
:root[data-theme='dark'] .site-header,
:root[data-theme='dark'] .site-footer{background:#0b0f14;border-color:#293241}
:root[data-theme='dark'] .btn-primary{background:#1f3a5f;color:#fff}
:root[data-theme='dark'] .btn-ghost{border-color:#3b4b5f;color:#cfe1ff}
:root[data-theme='dark'] .menu a:hover{background:#142032}
:root[data-theme='dark'] .hero__wave{background: linear-gradient(90deg, #1f3a5f, #b8891d, #a61b22);}