:root {
  --black: #050608; --panel: #101419; --panel-soft: #161c22; --line: #28313a; --text: #f6f8fb; --muted: #a7b0b9; --green: #93ff33; --blue: #31b7ff; --white: #ffffff; --shadow: 0 24px 70px rgba(0,0,0,.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--text); margin: 0; } a { color: inherit; text-decoration: none; }
.site-header { align-items: center; background: rgba(5,6,8,.86); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); display: flex; gap: 22px; height: 76px; justify-content: space-between; left: 0; padding: 0 clamp(18px,4vw,62px); position: fixed; right: 0; top: 0; z-index: 30; }
.brand,.nav,.hero-actions,.trust-row,.contact-facts,.site-footer { align-items: center; display: flex; } .brand { font-weight: 900; gap: 11px; min-width: max-content; } .brand-mark { background: linear-gradient(135deg,var(--green),var(--blue)); border-radius: 8px; color: #020303; display: grid; height: 38px; place-items: center; width: 38px; }
.nav { color: var(--muted); gap: 26px; font-size: .94rem; font-weight: 750; } .nav a:hover,.site-footer a:hover { color: var(--green); } .header-call { border: 1px solid rgba(147,255,51,.55); border-radius: 8px; color: var(--green); font-weight: 850; padding: 11px 15px; }
.menu-button { background: transparent; border: 0; cursor: pointer; display: none; height: 42px; width: 42px; } .menu-button span { background: var(--white); display: block; height: 2px; margin: 6px auto; width: 23px; }
.hero { isolation: isolate; min-height: 96vh; overflow: hidden; padding: 160px clamp(20px,5vw,76px) 82px; position: relative; } .hero::after { background: linear-gradient(180deg,transparent,var(--black)); bottom: -1px; content: ""; height: 34%; left: 0; position: absolute; right: 0; z-index: -1; }
.hero-image { background: linear-gradient(90deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.72) 43%,rgba(5,6,8,.3)), url("https://images.unsplash.com/photo-1607860108855-64acf2078ed9?auto=format&fit=crop&w=1800&q=85") center / cover; inset: 0; position: absolute; z-index: -2; } .hero-content { max-width: 830px; }
.eyebrow { color: var(--green); font-size: .78rem; font-weight: 950; letter-spacing: 0; margin: 0 0 16px; text-transform: uppercase; } h1,h2,h3,p { margin-top: 0; } h1 { font-size: clamp(3.4rem,8vw,7.8rem); line-height: .92; margin-bottom: 24px; max-width: 950px; } h2 { font-size: clamp(2rem,5vw,4.8rem); line-height: 1; margin-bottom: 18px; } h3 { font-size: 1.35rem; margin-bottom: 12px; } p { color: var(--muted); line-height: 1.68; } .hero-text { color: #dce2e7; font-size: clamp(1.05rem,2vw,1.26rem); max-width: 720px; }
.hero-actions { flex-wrap: wrap; gap: 14px; margin: 34px 0 24px; } .button { border-radius: 8px; display: inline-flex; font-weight: 950; justify-content: center; min-height: 50px; padding: 15px 20px; transition: transform .18s ease,border-color .18s ease,background .18s ease; } .button:hover { transform: translateY(-2px); } .primary { background: var(--green); box-shadow: 0 20px 38px rgba(147,255,51,.18); color: #071004; } .secondary,.card-button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--white); }
.trust-row { color: #dbe3ea; flex-wrap: wrap; gap: 10px; } .trust-row span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 8px; font-weight: 850; padding: 10px 12px; }
.service-area,.section,.reviews,.contact-section { padding: 88px clamp(20px,5vw,76px); } .service-area { align-items: end; display: grid; gap: 34px; grid-template-columns: 1fr .8fr; } .service-area p { font-size: 1.08rem; } .section-heading { max-width: 860px; margin-bottom: 34px; }
.package-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); } .package-card,.review-card,.booking-form { background: linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: var(--shadow); } .package-card { display: flex; flex-direction: column; min-height: 490px; padding: 28px; } .package-card.featured { border-color: rgba(147,255,51,.48); box-shadow: 0 26px 80px rgba(147,255,51,.12); } .package-top { min-height: 178px; } .package-label { color: var(--blue); display: block; font-size: .78rem; font-weight: 950; margin-bottom: 16px; text-transform: uppercase; } .package-price { color: var(--green); font-size: 3rem; font-weight: 950; line-height: 1; margin-bottom: 16px; } ul { color: #d4dbe1; line-height: 1.9; margin: 0 0 28px; padding-left: 20px; } li::marker { color: var(--green); } .card-button { margin-top: auto; width: 100%; }
.addons { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-top: 18px; padding: 24px; } .addon-list { display: flex; flex-wrap: wrap; gap: 10px; } .addon-list span { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; color: #dce3e9; font-weight: 800; padding: 10px 12px; }
.reviews { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); } .review-card { padding: 30px; } .review-card p { color: var(--text); font-size: 1.22rem; } .review-card strong { color: var(--muted); }
.contact-section { background: linear-gradient(135deg,rgba(147,255,51,.13),transparent 36%), var(--panel); display: grid; gap: 50px; grid-template-columns: .9fr 1.1fr; } .contact-copy { max-width: 620px; } .contact-facts { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 28px; } .contact-facts a { color: var(--green); font-size: 2rem; font-weight: 950; } .contact-facts span { color: #d5dde4; font-weight: 800; }
.booking-form { display: grid; gap: 16px; padding: clamp(22px,4vw,34px); } label { color: var(--text); display: grid; font-weight: 850; gap: 8px; } input,select,textarea { background: #080b0f; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; min-height: 50px; padding: 13px 14px; width: 100%; } textarea { resize: vertical; } .form-status { color: var(--green); font-weight: 850; margin: 0; min-height: 24px; } .site-footer { color: var(--muted); font-weight: 800; gap: 18px; justify-content: space-between; padding: 28px clamp(20px,5vw,76px); }
@media (max-width: 980px) { .nav { background: rgba(5,6,8,.98); border-bottom: 1px solid rgba(255,255,255,.12); display: none; flex-direction: column; left: 0; padding: 24px; position: absolute; right: 0; top: 76px; } .nav.open { display: flex; } .menu-button { display: block; } .header-call { margin-left: auto; } .service-area,.package-grid,.reviews,.contact-section { grid-template-columns: 1fr; } .package-card { min-height: auto; } .package-top { min-height: 0; } }
@media (max-width: 560px) { .site-header { gap: 10px; } .brand span:last-child { font-size: .9rem; max-width: 116px; } .header-call { font-size: .86rem; padding: 10px 11px; } .hero { min-height: 92vh; padding-top: 126px; } h1 { font-size: 3.25rem; } .hero-actions .button { width: 100%; } .service-area,.section,.reviews,.contact-section { padding-bottom: 62px; padding-top: 62px; } .contact-facts a { font-size: 1.55rem; } .site-footer { align-items: flex-start; flex-direction: column; } }