/* THEME */
:root{
  --bg:#0f0f0f;         /* mörk bakgrund för lyx-känsla */
  --ink:#f1eee8;        /* ljus text */
  --muted:#bfb8a9;      /* sekundär text */
  --gold:#b08a3c;       /* guldaccent */
  --silver:#cfd2d6;     /* silvertext */
  --beige:#cbb88c;      /* sand/beige */
  --card:#161616;       /* kortbakgrund */
  --line:rgba(255,255,255,.08);
  --radius:16px;
  --max:1180px;

  /* bilder – se till att dessa filer finns i roten */
  --hero:url('hero.jpg');
  --land:url('landscape.jpg');
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  scroll-behavior:smooth;
}

/* RTL hjälpare */
body.rtl{direction:rtl}
body.rtl .tb{flex-direction:row-reverse}
body.rtl .links a, body.rtl .brand span{text-align:right}

/* CONTAINERS & TITLES */
.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.section{padding:84px 0}
.section.alt{background:linear-gradient(180deg, #141414, #111)}
h1,h2,h3{font-family:"Playfair Display", Georgia, serif; margin:0 0 12px}
h2{font-size:34px; letter-spacing:.2px}
h3{font-size:22px}
.divider{width:84px; height:3px; background:var(--gold); border-radius:2px; margin:16px 0 30px}

/* TOPBAR */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar-line{
  height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.tb{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.2px}
.brand img{width:28px; height:28px}
.brand span{
  color:var(--silver);
  background:linear-gradient(180deg, #eef1f4, #bfc3c8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.1);
}
.links{margin-left:auto; display:flex; align-items:center; gap:20px}
.links a{
  color:var(--silver); text-decoration:none; font-weight:700; letter-spacing:.2px;
}
.links a:hover{color:#ffffff}
.lang{
  border:1px solid rgba(255,255,255,.2);
  background:transparent; color:var(--silver);
  padding:6px 10px; border-radius:999px; font-weight:800; cursor:pointer;
}

/* HERO – stor bild utan text, lätt toning */
.hero{
  min-height:85vh;
  background:var(--hero) center/cover no-repeat fixed;
  position:relative; isolation:isolate;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 60% at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.hero-badge{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:10px 14px; border-radius:999px; font-weight:700; letter-spacing:.3px;
  backdrop-filter:blur(6px);
}
.scroll-cue{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  text-decoration:none; color:#fff; font-size:22px; opacity:.75;
}

/* INTRO */
.intro{padding:40px 0}
.intro p{max-width:900px; margin:0 auto; text-align:center; color:var(--muted)}

/* CARDS */
.cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; padding:18px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.card .img-wrap{aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#0c0c0c}
.card img{width:100%; height:100%; object-fit:cover; display:block}
.price{margin-top:auto; font-weight:800; color:#fff}

/* ALTERNATING SECTION BG */
.section.alt .cards .card{background:#141414}

/* PARALLAX LANDSCAPE */
.parallax{
  height:44vh;
  background:var(--land) center/cover no-repeat fixed;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.parallax::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}

/* TWO-COLUMN STORY */
.twocol{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.story-img img{width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block}

/* TESTIMONIALS */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tcard{
  background:linear-gradient(180deg,#141414,#101010);
  border:1px solid var(--line); border-radius:14px; padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.tcard blockquote{margin:0 0 10px; color:#e9e6df; font-style:italic}
.tcard figcaption{color:var(--muted); font-weight:700}

/* VISIT */
.visit-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.vcard{
  background:#141414; border:1px solid var(--line); border-radius:14px; padding:18px;
}

/* FORM */
.form{display:flex; flex-direction:column; gap:14px; max-width:900px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
label{display:flex; flex-direction:column; gap:8px; font-weight:700; color:var(--silver)}
input, textarea, select{
  background:#111; color:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 12px; font:inherit; outline:none;
}
input:focus, textarea:focus, select:focus{border-color:rgba(255,255,255,.25)}
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:800; border:2px solid var(--gold);
}
.btn.primary{background:var(--gold); color:#fff}
.btn.outline{color:var(--gold); background:transparent}
.form-note{color:var(--muted); margin-top:6px}

/* GULD-SHINE på knappen */
.shine{position:relative; overflow:hidden}
.shine::after{
  content:""; position:absolute; inset:auto -40% auto auto; top:0; bottom:0; width:40%;
  transform:skewX(-25deg) translateX(120%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:shine 2.8s linear infinite;
}
@keyframes shine{to{transform:skewX(-25deg) translateX(-200%)}}

/* FOOTER */
.footer{border-top:1px solid var(--line); padding:46px 0; text-align:center; color:var(--muted)}
.footer-logo img{width:70px; height:auto; opacity:.9; filter:drop-shadow(0 1px 0 rgba(0,0,0,.04))}
.footer-nav{margin:6px 0 10px}
.footer-nav a{text-decoration:none; color:var(--silver); font-weight:700}
.footer-nav a:hover{color:#fff}

/* REVEAL ANIMATIONS */
.section h2, .divider, .card, .tcard, .vcard, .intro p{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.section h2.in, .divider.in, .card.in, .tcard.in, .vcard.in, .intro p.in{opacity:1; transform:none}

/* RESPONSIVE */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .twocol{grid-template-columns:1fr}
  .visit-cards{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .tb{height:68px}
  .links{gap:12px; overflow-x:auto; scrollbar-width:none}
  .links::-webkit-scrollbar{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .hero{min-height:78vh; background-attachment:scroll}
}