:root { --primary:#0B3C6B; --primary-dark:#08283F; --accent:#1E88C7; --charcoal:#1A1A1A; --steel:#5B6770; --offwhite:#F4F6F8; --white:#FFFFFF; --radius:8px; --edge:clamp(20px,5vw,64px); --container:1200px; }
* { box-sizing:border-box; } body { margin:0; font-family:"Inter",sans-serif; color:var(--charcoal); line-height:1.6; }
img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; }
h1,h2,h3 { color:var(--primary-dark); margin:0 0 0.4em; } .eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); }
.wrap,.wrap-inner { max-width:var(--container); margin:0 auto; padding:0 var(--edge); }
#site-header { display:flex; justify-content:space-between; align-items:center; padding:18px var(--edge); border-bottom:1px solid #E7EBEF; position:sticky; top:0; background:var(--white); z-index:60; transition:box-shadow 0.25s ease, padding 0.25s ease; }
#site-header.scrolled { padding-top:12px; padding-bottom:12px; box-shadow:0 4px 16px rgba(11,60,107,0.08); }
.brand-mark { font-weight:800; font-size:20px; color:var(--primary-dark); }
#menu-toggle { background:none; border:none; font-weight:600; }
#menu-overlay { position:fixed; inset:0; background:var(--primary-dark); display:none; padding:80px var(--edge); z-index:100; }
#menu-overlay.open { display:block; } .menu-col ul { list-style:none; padding:0; } .menu-col a { color:var(--white); }
.hero { position:relative; min-height:60vh; display:flex; align-items:center; color:var(--white); }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; background:rgba(8,40,63,0.82); }
.hero-inner { position:relative; z-index:1; padding:0 var(--edge); max-width:640px; }
.hero-inner h1, .hero-inner .lead { color:var(--white); }
.hero-inner .eyebrow { color:#B7C2CA; }
.btn { display:inline-block; background:var(--primary); color:var(--white); padding:12px 24px; border-radius:var(--radius); font-weight:600; margin-right:10px; }
.btn-outline { background:transparent; border:2px solid var(--white); }
.btn-wa { background:#1EAA4C; }
.section { padding:56px var(--edge); max-width:var(--container); margin:0 auto; }
.section-head { margin-bottom:28px; }
.grid { display:grid; gap:20px; } .grid-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { border:1px solid #E7EBEF; border-radius:var(--radius); overflow:hidden; transition:box-shadow 0.2s ease, transform 0.2s ease; }
.card:hover { box-shadow:0 12px 28px rgba(11,60,107,0.12); transform:translateY(-2px); }
.card-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-body { padding:16px; } .c-price { font-weight:700; color:var(--primary); }
.page-hero { background:var(--offwhite); padding:48px var(--edge); }
.item-page { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:var(--container); margin:0 auto; padding:48px var(--edge); }
footer { background:var(--primary-dark); color:#B7C2CA; padding:40px 0 0; margin-top:40px; }
.footer-grid { display:flex; gap:40px; flex-wrap:wrap; padding-bottom:30px; }
footer h4 { color:var(--white); } footer ul { list-style:none; padding:0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:16px var(--edge); font-size:13px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
.hero-inner .eyebrow, .hero-inner h1, .hero-inner .lead, .hero-inner .hero-actions {
  opacity:0; transform:translateY(18px); animation: hero-rise 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-inner .eyebrow { animation-delay:0.05s; }
.hero-inner h1 { animation-delay:0.15s; }
.hero-inner .lead { animation-delay:0.28s; }
.hero-inner .hero-actions { animation-delay:0.4s; }
@keyframes hero-rise { to { opacity:1; transform:none; } }

[data-reveal] { transform:translateY(14px); transition:transform 0.6s cubic-bezier(0.22,1,0.36,1); transition-delay:var(--reveal-delay,0s); }
[data-reveal].in-view { transform:none; }

.stats-strip { background:var(--offwhite); border-radius:var(--radius); padding:44px var(--edge); margin: 0 var(--edge) 40px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px; text-align:center; }
.stat-number { font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--primary); line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.stat-label { font-size:13px; color:var(--steel); font-weight:600; }