@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --color-bg: #0b1a17;
  --color-bg-2: #132a25;
  --color-surface: #1a3631;
  --color-gold: #c9a66b;
  --color-gold-light: #e2c68b;
  --color-champagne: #f3e5ab;
  --color-white: #f9f7f2;
  --color-text: #d3ddd8;
  --color-muted: #8fa8a0;
  --color-dark: #050f0d;
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: all .35s ease;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 6px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); line-height:1.65; overflow-x:hidden; }

a { color:var(--color-gold); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--color-gold-light); }

img { max-width:100%; height:auto; display:block; }

h1, h2, h3, h4 { font-family:var(--font-heading); color:var(--color-white); font-weight:600; letter-spacing:.01em; line-height:1.15; }
h1 { font-size: clamp(2.4rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); }
p { margin-bottom:1rem; }

.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
section { padding:5rem 0; }
.section-header { text-align:center; max-width:720px; margin:0 auto 3.5rem; }
.section-header h2 { margin-bottom:1rem; }
.section-header p { color:var(--color-muted); }

/* Header */
.site-header { position:fixed; top:0; left:0; width:100%; z-index:100; background:rgba(11,26,23,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(201,166,107,.1); transition:var(--transition); }
.header-inner { max-width:1280px; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:.75rem; color:var(--color-white); font-family:var(--font-heading); font-size:1.45rem; font-weight:700; }
.logo img { width:48px; height:48px; object-fit:contain; }
.nav-list { list-style:none; display:flex; gap:2rem; }
.nav-list a { color:var(--color-text); font-size:.95rem; font-weight:500; }
.nav-list a:hover { color:var(--color-gold); }
.header-cta { display:flex; align-items:center; gap:1rem; }
.header-cta .btn { padding:.55rem 1.25rem; }
.header-contacts { display:flex; align-items:center; gap:1.5rem; font-size:.85rem; color:var(--color-muted); margin-right:1.5rem; }
.header-contacts span { white-space:nowrap; }
.burger { display:none; background:none; border:none; color:var(--color-white); cursor:pointer; padding:.25rem; }
.burger svg { width:28px; height:28px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.85rem; border:1px solid var(--color-gold); background:transparent; color:var(--color-gold); border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.btn:hover { background:var(--color-gold); color:var(--color-dark); }
.btn-primary { background:linear-gradient(135deg, var(--color-gold), var(--color-gold-light)); color:var(--color-dark); border:none; }
.btn-primary:hover { filter:brightness(1.15); }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; z-index:0; }
img.hero-bg { width:100%; height:100%; object-fit:cover; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(5,15,13,.7), rgba(11,26,23,.92)); z-index:1; }
.hero-content { position:relative; z-index:2; max-width:920px; padding:8rem 1.5rem 4rem; text-align:center; }
.hero .subtitle { color:var(--color-gold); letter-spacing:.2em; text-transform:uppercase; font-size:.82rem; font-weight:600; margin-bottom:1.25rem; }
.hero h1 { margin-bottom:1.5rem; }
.hero-lead { font-size:clamp(1.1rem, 2.5vw, 1.5rem); color:var(--color-text); margin-bottom:2.5rem; }
.hero-note { display:inline-block; margin-top:1.5rem; padding:.8rem 1.3rem; border:1px solid rgba(201,166,107,.4); color:var(--color-gold-light); font-size:.9rem; border-radius:var(--radius); backdrop-filter:blur(5px); line-height:1.4; }

/* Booking bar */
.booking-bar { position:relative; z-index:3; max-width:1100px; margin:-3.5rem auto 0; padding:0 1.5rem; }
.booking-form { background:var(--color-surface); border:1px solid rgba(201,166,107,.2); border-radius:8px; padding:2rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:1rem; box-shadow:var(--shadow); }
.booking-form .form-group { margin:0; }

/* Forms */
.form-group { margin-bottom:1.25rem; position:relative; }
.form-group label { display:block; margin-bottom:.4rem; color:var(--color-text); font-size:.88rem; }
.form-group .error { color:#e07a7a; font-size:.85rem; display:none; margin-top:.3rem; }
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea { border-color:#e07a7a; }
.form-group.invalid .error { display:block; }
input, select, textarea { background:rgba(5,15,13,.55); border:1px solid rgba(201,166,107,.25); color:var(--color-white); padding:.9rem 1rem; border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem; width:100%; transition:var(--transition); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--color-gold); }
::placeholder { color:var(--color-muted); }

/* Layout grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:3.5rem; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.75rem; }

/* Cards */
.card { background:var(--color-surface); border:1px solid rgba(201,166,107,.12); border-radius:10px; overflow:hidden; transition:var(--transition); }
.card:hover { transform:translateY(-6px); border-color:rgba(201,166,107,.35); }
.card img { width:100%; height:240px; object-fit:cover; }
.card-body { padding:1.75rem; }
.card h3 { color:var(--color-gold); margin-bottom:.65rem; }
.card p { color:var(--color-text); font-size:.95rem; margin-bottom:.75rem; }
.price { color:var(--color-gold-light); font-weight:700; font-size:1.2rem; }

.amenity { text-align:center; padding:2rem 1.25rem; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid rgba(201,166,107,.1); transition:var(--transition); }
.amenity:hover { border-color:rgba(201,166,107,.3); background:rgba(255,255,255,.04); }
.amenity svg { width:42px; height:42px; stroke:var(--color-gold); margin:0 auto 1rem; }
.amenity h3 { margin-bottom:.35rem; }

/* Testimonials */
.testi { background:rgba(0,0,0,.2); border-radius:10px; padding:2rem; border:1px solid rgba(201,166,107,.1); }
.testi p { font-style:italic; font-size:1.05rem; }
.testi .author { color:var(--color-gold); margin-top:1.25rem; font-weight:600; }

/* CTA */
.cta-section { text-align:center; background:linear-gradient(rgba(11,26,23,.9), rgba(19,42,37,.9)); border-top:1px solid rgba(201,166,107,.15); border-bottom:1px solid rgba(201,166,107,.15); }

/* Footer */
.footer { background:var(--color-dark); padding:4rem 0 2rem; border-top:1px solid rgba(201,166,107,.15); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.25fr 1.5fr; gap:2.5rem; }
.footer h4 { color:var(--color-gold); margin-bottom:1rem; font-size:1.1rem; }
.footer ul { list-style:none; }
.footer li { margin-bottom:.6rem; color:var(--color-muted); }
.footer a:hover { text-decoration:underline; }
.footer .legal small { display:block; color:var(--color-muted); line-height:1.7; margin-top:1rem; }
.social { display:flex; gap:1rem; margin-top:1rem; }
.social a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(201,166,107,.3); border-radius:50%; transition:var(--transition); }
.social a:hover { background:var(--color-gold); border-color:var(--color-gold); }
.social a:hover svg { stroke:var(--color-dark); }
.social svg { width:22px; height:22px; stroke:var(--color-gold); fill:none; }

/* Cookie banner */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--color-surface); border-top:1px solid rgba(201,166,107,.25); padding:1.25rem 1.5rem; transform:translateY(100%); transition:transform .4s ease; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.cookie-banner.visible { transform:translateY(0); }
.toast { position:fixed; bottom:95px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--color-gold); color:var(--color-dark); padding:.85rem 1.75rem; border-radius:var(--radius); opacity:0; pointer-events:none; transition:opacity .4s, transform .4s; z-index:201; font-weight:600; }
.toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* Popup */
.popup-overlay { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; padding:1rem; }
.popup-overlay.active { display:flex; }
.popup { background:var(--color-surface); border:1px solid rgba(201,166,107,.3); padding:2.5rem; border-radius:10px; max-width:440px; width:100%; text-align:center; box-shadow:var(--shadow); position:relative; }
.popup h3 { color:var(--color-gold); margin-bottom:1rem; }
.popup-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--color-white); font-size:1.6rem; cursor:pointer; }

/* Mobile menu */
.mobile-nav { position:fixed; inset:0; background:var(--color-bg); z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; transform:translateX(100%); transition:transform .45s ease; }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav .close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:var(--color-white); font-size:2rem; cursor:pointer; }
.mobile-nav a { color:var(--color-white); font-size:1.5rem; font-family:var(--font-heading); }
.no-scroll { overflow:hidden; }

/* Scroll reveal */
.scroll-reveal { opacity:0; transform:translateY(30px); transition:opacity .85s ease, transform .85s ease; }
.scroll-reveal.revealed { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }

/* Contact & legal */
.contact-hero { min-height:55vh; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; }
.contact-details p, .contact-details a { margin-bottom:.5rem; }
.opening-hours { background:var(--color-surface); border-radius:10px; padding:1.75rem; border:1px solid rgba(201,166,107,.1); }
.opening-hours li { display:flex; justify-content:space-between; margin-bottom:.5rem; border-bottom:1px dashed rgba(201,166,107,.15); padding-bottom:.5rem; }
.legal-content { max-width:860px; margin:0 auto; }
.legal-content h2 { margin-top:2.5rem; margin-bottom:1rem; color:var(--color-gold); }
.legal-content h3 { margin-top:1.5rem; margin-bottom:.5rem; }
.legal-content p { margin-bottom:1rem; color:var(--color-text); }
.legal-content ul { margin-left:1.5rem; margin-bottom:1.5rem; }
.legal-content li { margin-bottom:.4rem; }

/* Responsive */
@media (max-width: 1024px) {
  .nav-list, .header-cta .btn, .header-contacts { display:none; }
  .burger { display:block; }
  .grid-2, .grid-3, .footer-grid, .contact-grid { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  section { padding:3.5rem 0; }
  .hero-content { padding:7rem 1.25rem 3rem; }
  .booking-form { grid-template-columns:1fr; }
  .footer-grid { gap:2rem; }
  .social { justify-content:center; }
  .hero h1 { font-size:2.4rem; }
}