:root{
  --cream:#f7efe4;
  --paper:#fffaf2;
  --ink:#2f2c27;
  --muted:#756d62;
  --green:#3f553b;
  --green-soft:#dfe8d7;
  --azaria:#af5b67;
  --azaria-dark:#843f4c;
  --gold:#c49a45;
  --line:rgba(47,44,39,.12);
  --shadow:0 24px 70px rgba(42,35,28,.14);
  --radius:28px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(175,91,103,.13), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(63,85,59,.12), transparent 26%),
    var(--cream);
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.site-header{
  position:fixed; z-index:50; top:16px; left:50%; transform:translateX(-50%);
  width:min(var(--max), calc(100% - 32px));
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px 12px 18px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,250,242,.78);
  backdrop-filter:blur(16px);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(32,28,23,.1);
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:-.04em}
.logo-mark{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--azaria),var(--green)); position:relative; flex:0 0 auto}
.logo-mark:after{content:""; position:absolute; width:12px; height:20px; border-radius:60% 60% 40% 40%; background:var(--paper); left:10px; top:6px; transform:rotate(20deg); opacity:.95}
.nav{display:flex; gap:18px; align-items:center; font-size:.92rem; color:rgba(47,44,39,.78)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--azaria-dark)}
.nav .book{background:var(--green); color:white; padding:10px 16px; border-radius:999px; font-weight:800}

.hero{
  min-height:94vh; display:grid; align-items:end; position:relative; overflow:hidden; background:#1b1a16;
}
.hero-slider{position:absolute; inset:0}
.hero-slide{
  position:absolute; inset:0; opacity:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  animation:heroFade 24s infinite;
  transform:scale(1.05);
}
.hero-slide:nth-child(1){background-image:url("assets/images/hero-house-pool.jpg"); animation-delay:0s}
.hero-slide:nth-child(2){background-image:url("assets/images/hero-house-rainbow.jpg"); animation-delay:6s}
.hero-slide:nth-child(3){background-image:url("assets/images/house-sun.jpg"); animation-delay:12s}
.hero-slide:nth-child(4){background-image:url("assets/images/hero-house-night.jpg"); animation-delay:18s}
@keyframes heroFade{
  0%{opacity:0; transform:scale(1.05)}
  7%{opacity:1}
  26%{opacity:1}
  33%{opacity:0; transform:scale(1.01)}
  100%{opacity:0}
}
.hero:after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(24,20,16,.72) 0%, rgba(24,20,16,.42) 48%, rgba(24,20,16,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.48) 100%);
}
.hero-inner{position:relative; z-index:2; padding:150px 0 76px; color:white}
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:.78rem; color:rgba(255,255,255,.84); margin-bottom:18px;
}
.kicker:before{content:""; width:34px; height:1px; background:var(--gold)}
.hero h1{margin:0; max-width:860px; font-size:clamp(3rem, 8vw, 7.2rem); line-height:.88; letter-spacing:-.07em}
.hero p{max-width:630px; margin:22px 0 0; font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.55; color:rgba(255,255,255,.88)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:999px; text-decoration:none; border:1px solid transparent;
  font-weight:900; transition:.18s ease; cursor:pointer; font:inherit;
}
.btn-primary{background:var(--azaria); color:white}
.btn-primary:hover{background:var(--azaria-dark); transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12); color:white; border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:54px; max-width:920px}
.quick div{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border-radius:22px; padding:18px}
.quick strong{display:block; font-size:1.05rem}
.quick span{display:block; margin-top:5px; color:rgba(255,255,255,.76); line-height:1.4}

.section{padding:84px 0}
.section-title{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:end; margin-bottom:32px}
.section-title h2{margin:0; font-size:clamp(2rem,4vw,4rem); line-height:.95; letter-spacing:-.055em}
.section-title p{margin:0; color:var(--muted); font-size:1.06rem; line-height:1.7}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:rgba(255,250,242,.76); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 12px 42px rgba(42,35,28,.07)}
.card .num{color:var(--azaria); font-weight:900; letter-spacing:-.04em; font-size:2.2rem}
.card h3{margin:18px 0 10px; font-size:1.35rem; letter-spacing:-.03em}
.card p{margin:0; color:var(--muted); line-height:1.65}

.gallery{display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:14px}
.gallery a{min-height:230px; border-radius:24px; overflow:hidden; position:relative; background:#ddd; box-shadow:0 12px 38px rgba(42,35,28,.08)}
.gallery a:nth-child(1){grid-row:span 2; min-height:474px}
.gallery a:nth-child(6){grid-column:span 2}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.gallery a:hover img{transform:scale(1.04)}

.experience{background:linear-gradient(180deg, rgba(63,85,59,.10), rgba(175,91,103,.08)); border-block:1px solid rgba(47,44,39,.08)}
.trips{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.trip{min-height:220px; background:var(--paper); border-radius:26px; padding:22px; border:1px solid var(--line)}
.trip small{color:var(--azaria-dark); font-weight:900; text-transform:uppercase; letter-spacing:.07em}
.trip h3{margin:12px 0 10px; font-size:1.22rem}
.trip p{margin:0; color:var(--muted); line-height:1.55}
.note{margin-top:18px; color:var(--muted); line-height:1.7; font-size:.98rem}

.booking-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start}
.contact-panel{background:var(--green); color:white; border-radius:var(--radius); padding:30px; position:sticky; top:100px; box-shadow:var(--shadow)}
.contact-panel h2{font-size:clamp(1.8rem,3vw,3rem); line-height:1; margin:0 0 14px; letter-spacing:-.05em}
.contact-panel p{color:rgba(255,255,255,.78); line-height:1.65}
.contact-list{display:grid; gap:12px; margin-top:22px}
.contact-list a,.contact-list span{display:flex; gap:10px; align-items:center; color:white; text-decoration:none; font-weight:800}
.qrbox{margin-top:24px; padding:16px; border-radius:22px; background:rgba(255,255,255,.1); display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center}
.qrbox img{border-radius:14px}
.qrbox small{color:rgba(255,255,255,.72); line-height:1.45}

.form-card{background:rgba(255,250,242,.88); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:7px}
.field-full{grid-column:1/-1}
label{font-size:.88rem; font-weight:900; color:rgba(47,44,39,.78)}
input, textarea, select{width:100%; border:1px solid rgba(47,44,39,.16); background:white; border-radius:16px; padding:13px 14px; font:inherit; color:var(--ink); outline:none}
textarea{min-height:118px; resize:vertical}
input:focus, textarea:focus, select:focus{border-color:var(--azaria); box-shadow:0 0 0 4px rgba(175,91,103,.12)}
.hidden-field{position:absolute; left:-9999px}
.form-note{font-size:.9rem; color:var(--muted); line-height:1.55}
.alert{padding:14px 16px; border-radius:16px; margin-bottom:16px; font-weight:800}
.alert-ok{background:#e7f1df; color:#2f5530}
.alert-bad{background:#fae1df; color:#883b34}

.footer{padding:34px 0; border-top:1px solid var(--line); color:var(--muted)}
.footer .container{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer a{color:var(--ink); text-decoration:none; font-weight:800}

@media(max-width:920px){
  .nav a:not(.book){display:none}
  .quick,.cards,.trips,.booking-wrap{grid-template-columns:1fr}
  .section-title{grid-template-columns:1fr; gap:14px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery a:nth-child(1){grid-column:1/-1; min-height:330px}
  .gallery a:nth-child(6){grid-column:auto}
  .contact-panel{position:relative; top:auto}
}
@media(max-width:640px){
  .container{width:min(100% - 28px, var(--max))}
  .hero-inner{padding:130px 0 54px}
  .site-header{top:10px; width:calc(100% - 20px)}
  .logo span{font-size:.95rem}
  .nav .book{padding:9px 12px; font-size:.88rem}
  .quick{gap:10px}
  .gallery{grid-template-columns:1fr}
  .gallery a,.gallery a:nth-child(1){min-height:260px}
  .form-grid{grid-template-columns:1fr}
  .qrbox{grid-template-columns:90px 1fr}
}