:root { --dark: #10191d; --dark-2: #17262c; --lime: #c6e748; --white: #f7f8f2; --muted: #b5c0bd; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--white); font-family: "Montserrat", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.topbar { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 24px clamp(22px, 6vw, 96px); position: absolute; top: 0; width: 100%; z-index: 5; }
.logo { font-family: "Orbitron", sans-serif; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: 1px; }.logo span { color: var(--lime); }
nav { display: flex; gap: clamp(18px, 3vw, 44px); } nav a { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } nav a:hover { color: var(--lime); }
.header-cta, .primary-button, .whatsapp-button { align-items: center; background: var(--lime); border-radius: 999px; color: #172014; display: inline-flex; font-size: .8rem; font-weight: 800; gap: 10px; padding: 14px 21px; transition: transform .25s, box-shadow .25s; }.header-cta { padding: 11px 18px; }.header-cta:hover, .primary-button:hover, .whatsapp-button:hover { box-shadow: 0 12px 30px rgba(198,231,72,.22); transform: translateY(-3px); }
.hero { background: linear-gradient(120deg, #10191d 15%, #203238 100%); min-height: min(790px, 100vh); overflow: hidden; position: relative; }
.glow { border-radius: 50%; filter: blur(80px); opacity: .24; position: absolute; }.glow-one { background: #c6e748; height: 320px; right: 8%; top: 14%; width: 320px; }.glow-two { background: #258c93; bottom: -150px; height: 400px; left: -120px; width: 400px; }
.rotating-rings { height: 650px; position: absolute; right: -130px; top: 50%; transform: translateY(-50%); width: 650px; }.rotating-rings i { border: 1px solid rgba(198,231,72,.22); border-radius: 50%; display: block; inset: 0; position: absolute; animation: spin 24s linear infinite; }.rotating-rings i::after { background: var(--lime); border-radius: 50%; content: ""; height: 8px; left: 50%; position: absolute; top: -4px; width: 8px; box-shadow: 0 0 14px var(--lime); }.rotating-rings i:nth-child(2) { animation-direction: reverse; animation-duration: 17s; inset: 70px; }.rotating-rings i:nth-child(3) { animation-duration: 30s; inset: 145px; } @keyframes spin { to { transform: rotate(360deg); } }
.carousel { align-items: center; display: grid; gap: clamp(35px, 7vw, 105px); grid-template-columns: minmax(280px, .85fr) minmax(330px, 1fr); margin: 0 auto; max-width: 1320px; min-height: min(790px, 100vh); padding: 125px clamp(22px, 6vw, 96px) 70px; position: relative; z-index: 1; }
.eyebrow { color: var(--lime); font-size: .72rem; font-weight: 800; letter-spacing: .18em; margin-bottom: 18px; }.carousel-copy h1 { font-size: clamp(2.7rem, 5vw, 5.2rem); letter-spacing: -.07em; line-height: .98; max-width: 600px; }.carousel-copy h1 em { color: var(--lime); font-style: normal; }.intro { color: var(--muted); line-height: 1.7; margin: 27px 0 31px; max-width: 480px; }
.showcase { min-height: 500px; position: relative; }.slides, .slide { height: 100%; min-height: 500px; }.slide { background: #243338; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; inset: 0; opacity: 0; overflow: hidden; position: absolute; transform: rotateY(25deg) scale(.9); transition: opacity .55s ease, transform .75s cubic-bezier(.2,.8,.2,1); visibility: hidden; }.slide.active { opacity: 1; transform: rotateY(0) scale(1); visibility: visible; }.slide img { height: 100%; object-fit: cover; opacity: .8; transition: transform 6s ease; width: 100%; }.slide.active img { transform: scale(1.08); }.slide::after { background: linear-gradient(0deg, rgba(7,14,16,.92), rgba(7,14,16,0) 65%); content: ""; inset: 0; position: absolute; }.slide-caption { bottom: 40px; left: 40px; position: absolute; z-index: 1; }.slide-caption span { color: var(--lime); font-family: "Orbitron", sans-serif; font-size: .75rem; }.slide-caption h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.04em; margin: 10px 0; }.slide-caption p { color: #e0e7e2; font-size: .88rem; }.carousel-controls { align-items: center; bottom: -27px; display: flex; gap: 20px; left: 50%; position: absolute; transform: translateX(-50%); z-index: 2; }.control { background: #f7f8f2; border: 0; border-radius: 50%; color: #142024; cursor: pointer; font-size: 1.2rem; height: 48px; transition: background .2s, transform .2s; width: 48px; }.control:hover { background: var(--lime); transform: scale(1.08); }.dots { display: flex; gap: 8px; }.dot { background: rgba(255,255,255,.35); border: 0; border-radius: 8px; cursor: pointer; height: 7px; transition: width .3s, background .3s; width: 7px; }.dot.active { background: var(--lime); width: 28px; }
.contact-strip { align-items: center; background: var(--lime); color: #172014; display: flex; gap: 30px; justify-content: space-between; padding: 43px clamp(22px, 10vw, 150px); }.contact-strip .eyebrow { color: #43521c; margin-bottom: 8px; }.contact-strip h2 { font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: -.04em; }.whatsapp-button { background: #172014; color: var(--white); white-space: nowrap; }.whatsapp-button span { font-size: 1.25rem; } footer { color: #7e8f8d; font-size: .75rem; padding: 24px; text-align: center; }
@media (max-width: 760px) { .topbar { padding: 20px 22px; }.topbar nav, .header-cta { display: none; }.hero { min-height: auto; }.carousel { grid-template-columns: 1fr; min-height: auto; padding: 125px 22px 80px; }.showcase, .slides, .slide { min-height: 390px; }.rotating-rings { height: 440px; right: -200px; top: 48%; width: 440px; }.slide-caption { bottom: 35px; left: 26px; }.contact-strip { align-items: flex-start; flex-direction: column; padding: 35px 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }