:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { font-family: "Manrope", sans-serif; background: #020617; }
::selection { background: #18b9d2; color: #02152f; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #155e75; border: 2px solid #020617; border-radius: 999px; }
.header-glass { width: calc(100% - 1.5rem); border: 1px solid rgba(255,255,255,.13); background: rgba(2,15,35,.66); box-shadow: 0 18px 60px rgba(0,0,0,.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.header-hidden { transform: translateY(-130%); }
.logo-mark { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; transform: skew(-9deg); border-radius: .72rem; background: linear-gradient(135deg,#18b9d2,#0968c1 58%,#062f6d); box-shadow: 0 0 30px rgba(24,185,210,.3); }
.logo-mark span { transform: skew(9deg); font-size: 1.4rem; font-weight: 800; }
.nav-link { position: relative; font-size: .83rem; font-weight: 700; color: #cbd5e1; transition: color .25s; }
.nav-link::after { position: absolute; right: 0; bottom: -.6rem; left: 0; height: 2px; content: ""; transform: scaleX(0); background: #22d3ee; transition: transform .25s; }
.nav-link:hover,.nav-link.active { color: white; }
.nav-link:hover::after,.nav-link.active::after { transform: scaleX(1); }
.button-primary,.button-ghost,.button-dark { display: inline-flex; align-items: center; gap: .65rem; border-radius: 999px; padding: .78rem 1.25rem; font-size: .84rem; font-weight: 800; transition: transform .25s,box-shadow .25s,background .25s; }
.button-primary { color: #03142d; background: linear-gradient(110deg,#67e8f9,#22d3ee 50%,#38bdf8); box-shadow: 0 12px 32px rgba(6,182,212,.2); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(6,182,212,.34); }
.button-ghost { border: 1px solid rgba(255,255,255,.18); color: white; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.button-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.button-dark { color: white; background: #062f6d; box-shadow: 0 14px 30px rgba(6,47,109,.25); }
.button-dark:hover { transform: translateY(-2px); background: #041f49; }
.button-large { min-height: 3.4rem; justify-content: center; padding-inline: 1.6rem; font-size: .95rem; }
.mobile-button { width: 2.75rem; height: 2.75rem; padding: .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: .8rem; }
.mobile-button span { display: block; height: 2px; margin: 4px 0; border-radius: 1rem; background: white; transition: transform .25s,opacity .25s; }
.mobile-button.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-button.open span:nth-child(2) { opacity: 0; }
.mobile-button.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-link { border-radius: .75rem; padding: .75rem 1rem; font-weight: 700; color: #cbd5e1; }
.mobile-link:hover { color: white; background: rgba(255,255,255,.07); }
.hero { background: #031632; }
.hero-overlay { background: linear-gradient(90deg,rgba(2,6,23,.96) 0%,rgba(2,12,34,.83) 43%,rgba(2,6,23,.28) 77%),linear-gradient(0deg,#020617 0%,transparent 28%,rgba(2,6,23,.15) 100%); }
.orb { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .4; animation: float 7s ease-in-out infinite; }
.orb-one { right: 10%; bottom: 16%; width: 8rem; height: 8rem; border: 1px solid rgba(34,211,238,.3); background: rgba(34,211,238,.08); }
.orb-two { right: 34%; top: 20%; width: 2rem; height: 2rem; background: #f4d124; animation-delay: -2s; }
@keyframes float { 50% { transform: translateY(-18px) rotate(8deg); } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(103,232,249,.25); border-radius: 999px; padding: .45rem .75rem; color: #a5f3fc; background: rgba(8,145,178,.12); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-dark { color: #67e8f9; background: rgba(8,145,178,.1); }
.gradient-text { color: transparent; background: linear-gradient(100deg,#67e8f9 5%,#38bdf8 55%,#f4d124 120%); background-clip: text; -webkit-background-clip: text; }
.mini-card { min-width: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; padding: .85rem .9rem; background: rgba(255,255,255,.065); backdrop-filter: blur(16px); }
.mini-card strong,.mini-card span { display: block; overflow: hidden; text-overflow: ellipsis; }
.mini-card strong { font-size: .75rem; color: white; }
.mini-card span { margin-top: .2rem; font-size: .62rem; white-space: nowrap; color: #94a3b8; }
.section-wrap { padding: 7rem 0; }
.section-glow { position: absolute; width: 30rem; height: 30rem; border-radius: 999px; background: rgba(14,116,144,.12); filter: blur(90px); }
.section-title { margin-top: 1.1rem; font-size: clamp(2.35rem,5vw,4.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.05em; }
.section-copy { margin: 1.25rem auto 0; max-width: 40rem; line-height: 1.8; color: #94a3b8; }
.photo-stack { position: relative; min-height: 38rem; }
.main-photo { width: 88%; height: 38rem; object-fit: cover; border: 1px solid rgba(255,255,255,.12); border-radius: 2rem; box-shadow: 0 28px 80px rgba(0,0,0,.35); }
.photo-stack::after { position: absolute; right: 0; bottom: 2.2rem; z-index: -1; width: 70%; height: 78%; border: 1px solid rgba(34,211,238,.18); border-radius: 2rem; content: ""; background: linear-gradient(145deg,rgba(8,145,178,.15),rgba(6,47,109,.08)); }
.floating-note { position: absolute; right: 2%; bottom: 5rem; display: flex; align-items: center; gap: .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; padding: 1rem 1.2rem; background: rgba(2,15,35,.82); box-shadow: 0 20px 45px rgba(0,0,0,.3); backdrop-filter: blur(15px); }
.tag { border: 1px solid rgba(34,211,238,.18); border-radius: 999px; padding: .55rem .85rem; color: #a5f3fc; background: rgba(8,145,178,.08); font-size: .72rem; font-weight: 700; }
.service-card { position: relative; overflow: hidden; min-height: 23rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.6rem; padding: 2.25rem; background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); transition: transform .35s,border-color .35s,box-shadow .35s; }
.service-card::before { position: absolute; inset: 0; content: ""; opacity: 0; background: radial-gradient(circle at top left,rgba(34,211,238,.15),transparent 50%); transition: opacity .35s; }
.service-card:hover { transform: translateY(-8px); border-color: rgba(34,211,238,.38); box-shadow: 0 25px 60px rgba(0,0,0,.25); }
.service-card:hover::before { opacity: 1; }
.icon-box { position: relative; z-index: 1; display: grid; width: 5rem; height: 5rem; place-items: center; border: 1px solid rgba(34,211,238,.2); border-radius: 1.4rem; color: #22d3ee; background: rgba(8,145,178,.1); }
.icon-box svg { width: 2.7rem; height: 2.7rem; margin: 0; }
.service-card h3 { position: relative; margin-top: 3.7rem; font-size: 1.45rem; font-weight: 800; }
.service-card p { position: relative; margin-top: .75rem; font-size: .9rem; line-height: 1.8; color: #94a3b8; }
.card-number { position: absolute; top: 2.2rem; right: 2rem; font-size: .7rem; font-weight: 800; letter-spacing: .15em; color: #475569; }
.cta-band { background: linear-gradient(105deg,#67e8f9 0%,#22d3ee 48%,#f4d124 130%); }
.gallery-grid { display: grid; grid-auto-rows: 19rem; gap: .85rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: 1.4rem; background: #0f172a; }
.gallery-item::after { position: absolute; inset: 0; content: "↗"; display: grid; place-items: center; color: white; background: rgba(2,15,35,.55); font-size: 2rem; opacity: 0; transition: opacity .35s; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 1; }
.contact-grid { display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 2rem; background: rgba(255,255,255,.035); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.contact-info { display: grid; gap: 1.5rem; padding: 2rem; }
.info-split { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
.label { margin-bottom: .4rem; color: #64748b; font-size: .63rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.value { color: #e2e8f0; font-size: .9rem; font-weight: 700; line-height: 1.65; }
.link-value { transition: color .2s; }
.link-value:hover { color: #67e8f9; }
.map-wrap { min-height: 500px; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 500px; border: 0; filter: grayscale(.2) saturate(.8) contrast(1.05); }
.whatsapp-float { position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 40; display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: white; background: #16a34a; box-shadow: 0 15px 35px rgba(22,163,74,.38); transition: transform .25s; }
.whatsapp-float:hover { transform: translateY(-4px) scale(1.04); }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.86); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 1; width: min(100%,42rem); border: 1px solid rgba(255,255,255,.14); border-radius: 1.6rem; padding: 2rem; background: linear-gradient(145deg,#0f203b,#071426); box-shadow: 0 35px 100px rgba(0,0,0,.5); }
.modal-close,.lightbox-close { position: absolute; z-index: 3; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: white; background: rgba(255,255,255,.08); font-size: 1.6rem; }
.modal-close { top: 1.25rem; right: 1.25rem; }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
#lightbox-image { position: relative; z-index: 1; max-width: min(92vw,75rem); max-height: 88vh; border-radius: 1rem; box-shadow: 0 30px 100px black; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
body.modal-open { overflow: hidden; }
@media (min-width: 768px) { .header-glass { width: calc(100% - 2rem); } .gallery-grid { grid-template-columns: repeat(3,1fr); grid-auto-rows: 18rem; } .gallery-wide { grid-column: span 2; } .gallery-tall { grid-row: span 2; } .contact-info { padding: 3rem; } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: .82fr 1.18fr; align-items: stretch; } .map-wrap,.map-wrap iframe { min-height: 100%; } }
@media (max-width: 767px) { .hero-overlay { background: linear-gradient(0deg,rgba(2,6,23,.98),rgba(2,6,23,.57) 62%,rgba(2,6,23,.4)); } .hero img { object-position: 58% center; } .section-wrap { padding: 5.5rem 0; } .photo-stack { min-height: 30rem; } .main-photo { width: 92%; height: 30rem; } .floating-note { right: 0; bottom: 2rem; } .service-card { min-height: auto; } .gallery-grid { grid-auto-rows: 22rem; } }
@media (max-width: 430px) { .mini-card { padding: .7rem .55rem; } .mini-card strong { font-size: .65rem; } .mini-card span { font-size: .52rem; } .info-split { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }