:root { --ink: #061526; --deep: #020d1b; --paper: #f7f1e5; --gold: #d5a84f; --line: rgba(6,21,38,.17); }
.brand-logo { display: flex; align-items: center; gap: 9px; font-size: 20px; letter-spacing: 1px; }
.brand-logo img { width: 42px; height: 42px; object-fit: cover; object-position: center; border-radius: 50%; border: 1px solid var(--gold); }
.hero { background: #020d1b; }
.hero:before { background: linear-gradient(90deg, rgba(2,13,27,.28), rgba(2,13,27,.04)); }
.hero-mark { right: 10%; top: 15%; width: 420px; height: 520px; opacity: .88; }
.hero-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 25px 35px rgba(0,0,0,.45)); }
.hero-mark p { bottom: 18px; right: -22px; }
.about { background: #eee5d5; }
footer { background: #020d1b; }
@media (max-width: 760px) { .hero-mark { transform: scale(.65); transform-origin: top right; right: -80px; top: 240px; opacity: .32; } }