
:root {
  --bg:#0b0b0b; --panel:#141414; --text:#eaeaea; --muted:#bdbdbd; --accent:#9ef;
  --chrome1:#aaa; --chrome2:#fff; --chrome3:#aaa;
}
*{box-sizing:border-box}
body {background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;margin:0}
.topbar {position:sticky;top:0;z-index:1000;background:#111;padding:10px 20px;box-shadow:0 2px 10px #000}
.nav {display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto}
.brand-logo {height:54px}
.nav-links a {margin-left:18px;color:#ccc;text-decoration:none;font-weight:bold;transition:color .3s}
.nav-links a:hover{color:var(--accent)}
.hero {text-align:center;padding:100px 20px;background:radial-gradient(circle at center,#121212,#000)}
.logo-hero {max-width:320px;margin-bottom:16px;filter:drop-shadow(0 0 10px #444)}
.tagline {font-size:1.9rem;color:#cfcfcf;margin:0 0 16px}
.cta-row {display:flex;gap:12px;justify-content:center}
.btn {display:inline-block;padding:12px 18px;border-radius:6px;text-decoration:none;font-weight:bold}
.btn-chrome {background:linear-gradient(90deg,var(--chrome1),var(--chrome2),var(--chrome3));color:#000;box-shadow:0 0 10px #888}
.btn-outline {border:2px solid var(--accent);color:var(--accent)}
.section-title {font-size:2rem;margin:40px 0 10px;text-align:center}
.chrome-text {color:#dfe6e9;text-shadow:0 0 5px #aaa,0 0 10px #666}
.cards {display:flex;flex-wrap:wrap;gap:22px;justify-content:center;max-width:1100px;margin:0 auto}
.card {background:var(--panel);padding:22px;border-radius:10px;width:320px;border:1px solid #666;box-shadow:0 0 12px #333;transition:transform .25s,box-shadow .25s}
.card:hover {transform:translateY(-4px);box-shadow:0 10px 24px #000}
.card-title {margin:0 0 6px}
.price {color:var(--accent);font-size:1.1rem;margin:6px 0 10px}
.divider {border:none;height:2px;background:linear-gradient(90deg,#888,#fff,#888);margin:10px 0}
.card ul {padding-left:18px;margin:0}
.gallery {padding:10px 20px 40px}
.sliders {display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1100px;margin:0 auto}
.slider-container {display:flex;justify-content:center}
.slider {position:relative;width:100%;max-width:600px;overflow:hidden;border:2px solid #999;border-radius:10px;box-shadow:0 0 15px #666}
.slider img {width:100%;display:block}
.resize {position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
.handle {position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;cursor:ew-resize;box-shadow:0 0 10px var(--accent)}
.booking,.contact {padding:10px 20px 40px}
.booking-form,.contact-form {display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}
.booking-form .row {display:flex;gap:12px}
.booking-form .row > * {flex:1}
input,select,textarea {padding:12px;border-radius:6px;border:1px solid #444;background:#1b1b1b;color:#fff;outline:none}
input:focus,textarea:focus,select:focus {box-shadow:0 0 8px var(--accent);border-color:#777}
.form-note {color:#9aa; font-size:.9rem; text-align:center}
.alt-booking {text-align:center;margin-top:8px}
.footer {text-align:center;padding:20px;background:linear-gradient(90deg,#111,#333,#111);color:#9a9a9a;box-shadow:0 -3px 8px #000}
.contact-info {text-align:center;margin-top:10px}
.contact-info a {color:var(--accent);text-decoration:none}
/* Thank you page */
.thankyou .center {max-width:620px;margin:10vh auto;text-align:center}
/* Animations */
.animate-fade {animation:fadeIn 1.2s ease}
.animate-slide {animation:slideUp 1.2s ease}
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideUp {from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:600px){ .cta-row{flex-direction:column} .brand-logo{height:46px} }

.about {padding:40px 20px;background:#0f0f0f;color:#ddd}
.about-content {max-width:800px;margin:0 auto;font-size:1.1rem;line-height:1.6}
.about-content strong {color:var(--accent)}
