@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
  --ink:#102a22; --ink2:#173a30; --river:#164d51; --soft:#f6f0e7; --paper:#fffaf1; --line:rgba(16,42,34,.16);
  --gold:#cdb77d; --mandarin:#c8752d; --reed:#7d9b69; --white:#fffaf3;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--soft); overflow-x:hidden}
body{margin:0; color:var(--ink); font-family:var(--sans); background:radial-gradient(circle at 20% -10%, rgba(205,183,125,.20), transparent 34rem), linear-gradient(180deg,#fbf6ec 0%,#f4eddf 100%); overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:rgba(200,117,45,.25)}
.site-header{position:fixed; top:0; left:0; right:0; z-index:50; padding:18px clamp(18px,3vw,46px); display:flex; justify-content:space-between; align-items:center; gap:20px; transition:.35s ease; color:var(--white)}
.site-header.scrolled{background:rgba(16,42,34,.83); backdrop-filter:blur(18px); padding-block:10px; box-shadow:0 14px 40px rgba(0,0,0,.12)}
.brand{display:flex; align-items:center; gap:12px; letter-spacing:.18em; font-size:13px; text-transform:uppercase; font-weight:600; white-space:nowrap}
.brand img{width:36px; height:36px; border-radius:10px}
.navwrap{display:flex; align-items:center; gap:22px}
.nav{display:flex; gap:18px; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.13em; opacity:.92}
.nav a{position:relative; padding:10px 0}
.nav a:after{content:''; position:absolute; left:0; right:100%; bottom:5px; height:1px; background:var(--gold); transition:.25s}
.nav a:hover:after{right:0}
.langs{display:flex; gap:5px; align-items:center; padding:5px; border:1px solid rgba(255,250,243,.24); border-radius:999px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px)}
.langs a{font-size:10px; letter-spacing:.08em; padding:7px 8px; border-radius:999px; opacity:.8}
.langs a.active{background:rgba(205,183,125,.95); color:#102a22; opacity:1}
.menu-toggle{display:none; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:var(--white); border-radius:999px; padding:9px 12px; letter-spacing:.12em; text-transform:uppercase}
.hero{min-height:100vh; color:var(--white); position:relative; isolation:isolate; display:grid; align-items:end; padding:140px clamp(20px,5vw,70px) 54px; background-image:linear-gradient(90deg,rgba(5,18,15,.86) 0%,rgba(5,18,15,.54) 41%,rgba(5,18,15,.18) 100%), linear-gradient(180deg,rgba(5,18,15,.18),rgba(5,18,15,.80)), url('https://commons.wikimedia.org/wiki/Special:FilePath/Dalmatia_Neretva_delta_IMG_9872.JPG?width=2400'); background-size:cover; background-position:center;}
.hero:before{content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 72% 24%, rgba(205,183,125,.18), transparent 24rem), linear-gradient(135deg, transparent 0 60%, rgba(16,42,34,.42) 60% 100%);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,430px); gap:clamp(28px,6vw,80px); align-items:end; width:min(1440px,100%); margin:auto}
.eyebrow,.section-kicker{font-size:12px; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-weight:700}
h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:.92; margin:0}
h1{font-size:clamp(64px,11vw,156px); letter-spacing:-.055em; max-width:980px; text-wrap:balance}
h2{font-size:clamp(46px,7.2vw,104px); letter-spacing:-.045em; text-wrap:balance}
h3{font-size:clamp(28px,3.2vw,48px); letter-spacing:-.025em}
.hero p.lead{font-size:clamp(18px,2vw,26px); line-height:1.48; max-width:760px; color:rgba(255,250,243,.88); margin:28px 0 0; font-weight:300}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}
.btn{display:inline-flex; align-items:center; gap:12px; border-radius:999px; padding:14px 20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; transition:.25s ease; border:1px solid rgba(255,255,255,.24)}
.btn.primary{background:var(--gold); color:var(--ink); border-color:transparent}
.btn:hover{transform:translateY(-2px)}
.hero-panel{background:rgba(246,240,231,.11); border:1px solid rgba(255,250,243,.22); backdrop-filter:blur(22px); border-radius:30px; padding:26px; box-shadow:0 30px 70px rgba(0,0,0,.22)}
.hero-panel .official{font-family:var(--serif); font-size:28px; line-height:1.05; color:#fff6de}
.stat-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px}
.stat{padding:15px 0; border-top:1px solid rgba(255,255,255,.18)}
.stat b{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.stat span{font-family:var(--serif); font-size:26px; font-weight:300}
.scroll-note{position:absolute; left:clamp(20px,5vw,70px); bottom:24px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.66}
section{padding:clamp(70px,10vw,140px) clamp(20px,5vw,70px)}
.container{width:min(1240px,100%); margin:auto}
.split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr); gap:clamp(28px,6vw,80px); align-items:center}
.intro-copy p{font-size:clamp(17px,1.4vw,20px); line-height:1.8; color:rgba(16,42,34,.78); margin:22px 0 0}
.rounded-photo{border-radius:38px; min-height:560px; overflow:hidden; position:relative; box-shadow:0 35px 90px rgba(16,42,34,.18); background-size:cover; background-position:center}
.rounded-photo:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(16,42,34,.30))}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
.fact{border:1px solid var(--line); background:rgba(255,250,241,.58); padding:24px; border-radius:24px}
.fact b{font-family:var(--serif); font-size:27px; font-weight:400; display:block; line-height:1.05}
.fact p{font-size:14px; line-height:1.6; color:rgba(16,42,34,.72)}
.dark{background:linear-gradient(135deg,#0e2119 0%,#173a30 48%,#0f2929 100%); color:var(--white); position:relative; overflow:hidden}
.dark:before{content:''; position:absolute; inset:-20%; background:radial-gradient(circle at 14% 12%, rgba(205,183,125,.16), transparent 24rem), radial-gradient(circle at 90% 20%, rgba(200,117,45,.11), transparent 24rem); pointer-events:none}
.dark .container{position:relative}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px}
.section-head p{max-width:520px; color:rgba(255,250,243,.72); line-height:1.7; margin:0}
.place-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.place{min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); border-radius:28px; padding:24px; position:relative; overflow:hidden}
.place:before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.26)); opacity:.9}
.place > *{position:relative}
.place small{color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:11px}
.place h3{font-size:42px; margin:10px 0 12px}
.place p{color:rgba(255,250,243,.74); line-height:1.65; margin:0; font-size:14px}
.experience-grid{display:grid; grid-template-columns:repeat(6, minmax(260px,1fr)); gap:16px; overflow-x:auto; padding-bottom:12px; scrollbar-color:var(--gold) transparent}
.exp-card{min-height:470px; width:100%; border-radius:34px; overflow:hidden; position:relative; background-size:cover; background-position:center; display:flex; align-items:flex-end; box-shadow:0 30px 80px rgba(16,42,34,.16)}
.exp-card:before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,20,18,.10) 0%,rgba(4,20,18,.12) 34%,rgba(4,20,18,.86) 100%)}
.exp-content{position:relative; padding:26px; color:var(--white)}
.exp-content small{color:var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:10px}
.exp-content h3{font-size:34px; margin:8px 0 12px}
.exp-content p{line-height:1.6; color:rgba(255,250,243,.78); margin:0; font-size:14px}
.taste{background:var(--paper); position:relative}
.taste-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,480px); gap:clamp(30px,6vw,80px); align-items:center}
.taste p.big{font-size:clamp(20px,2vw,30px); line-height:1.55; color:rgba(16,42,34,.82); margin:26px 0}
.taste ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.taste li{padding:16px 18px; border-radius:999px; border:1px solid var(--line); background:#fffdf8; display:flex; gap:12px; align-items:center}
.taste li:before{content:'✦'; color:var(--mandarin)}
.taste-card{min-height:610px; border-radius:42px; background-image:linear-gradient(180deg,rgba(16,42,34,.02),rgba(16,42,34,.35)), url('https://commons.wikimedia.org/wiki/Special:FilePath/Delta_Neretvy_zblizka_-_v_sadech_rostou_citrusy%2C_kiwi%2C_fiky%2C.jpg?width=1400'); background-size:cover; background-position:center; box-shadow:0 40px 100px rgba(16,42,34,.18); display:flex; align-items:flex-end; padding:28px; color:#fff}
.taste-card div{background:rgba(16,42,34,.54); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:22px}
.seasons{background:linear-gradient(180deg,#f6f0e7 0%,#ede1cf 100%)}
.season-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.season{border:1px solid var(--line); border-radius:28px; padding:28px; background:rgba(255,250,241,.62); min-height:260px; display:flex; flex-direction:column; justify-content:space-between}
.season small{letter-spacing:.2em; text-transform:uppercase; color:var(--mandarin); font-size:10px}
.season h3{font-size:43px}
.season p{line-height:1.66; color:rgba(16,42,34,.72)}
.journey-wrap{display:grid; grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr); gap:clamp(30px,6vw,80px); align-items:start}
.journey-photo{min-height:690px; border-radius:42px; background-image:linear-gradient(180deg,rgba(16,42,34,.08),rgba(16,42,34,.46)), url('https://commons.wikimedia.org/wiki/Special:FilePath/Dalmatia_Neretva_river_delta_and_Pelje%C5%A1ac_peninsula_IMG_9865.JPG?width=1800'); background-size:cover; background-position:center; position:sticky; top:100px}
.journey-list{display:grid; gap:18px}
.journey{border:1px solid var(--line); border-radius:28px; padding:28px; background:rgba(255,250,241,.72)}
.journey small{color:var(--mandarin); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:11px}
.journey h3{font-size:48px; margin:8px 0}
.journey p{font-size:18px; line-height:1.6; color:rgba(16,42,34,.74)}
.tips-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.tip{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); border-radius:24px; padding:22px; color:rgba(255,250,243,.76); line-height:1.62; font-size:14px}
.tip b{display:block; color:var(--gold); font-family:var(--serif); font-size:34px; font-weight:300; margin-bottom:14px}
.ai-box{background:var(--ink); color:var(--white); border-radius:38px; padding:clamp(28px,5vw,58px); display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:center; box-shadow:0 40px 110px rgba(16,42,34,.24)}
.ai-box p{line-height:1.72; color:rgba(255,250,243,.74); margin:0}
.code-facts{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:#e7d7a1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:22px; line-height:1.7}
.footer{background:#091612; color:rgba(255,250,243,.72); padding:54px clamp(20px,5vw,70px)}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; width:min(1240px,100%); margin:auto}
.footer .word{font-family:var(--serif); font-size:clamp(42px,7vw,90px); font-weight:300; color:#fff6de; letter-spacing:-.04em; display:block; line-height:.9}
.footer a{color:#fff6de; border-bottom:1px solid rgba(205,183,125,.42)}
.footer-links{display:flex; flex-direction:column; gap:8px; text-align:right; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.mobile-install{position:fixed; right:18px; bottom:18px; z-index:60; background:rgba(16,42,34,.92); color:#fff6de; border:1px solid rgba(205,183,125,.5); border-radius:999px; padding:12px 16px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:none; box-shadow:0 14px 40px rgba(0,0,0,.22)}
.mobile-install.show{display:inline-flex}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}
@media (max-width: 1080px){
  .nav{display:none} .menu-toggle{display:inline-flex} .site-header.menu-open .nav{display:flex; position:absolute; left:18px; right:18px; top:72px; flex-direction:column; align-items:flex-start; background:rgba(16,42,34,.95); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:18px}
  .hero-grid,.split,.taste-layout,.journey-wrap,.ai-box{grid-template-columns:1fr}
  .hero{align-items:end; padding-top:120px}
  .hero-panel{max-width:520px}
  .facts,.place-grid{grid-template-columns:1fr 1fr}
  .season-grid{grid-template-columns:1fr 1fr}
  .tips-grid{grid-template-columns:1fr 1fr}
  .journey-photo{position:relative; top:auto; min-height:420px}
}
@media (max-width: 720px){
  .site-header{padding:12px 14px} .brand span{display:none} .langs{max-width:calc(100vw - 110px); overflow:auto; scrollbar-width:none} .langs a{padding:7px 7px}
  h1{font-size:clamp(56px,18vw,82px)} h2{font-size:clamp(42px,13vw,62px)}
  .hero{min-height:92vh; padding:110px 18px 42px; background-position:center}
  .hero-grid{gap:24px} .hero p.lead{font-size:17px}
  .hero-panel{padding:20px; border-radius:24px} .hero-panel .official{font-size:24px}
  section{padding:70px 18px}
  .rounded-photo,.taste-card{min-height:390px; border-radius:28px}
  .facts,.place-grid,.season-grid,.tips-grid{grid-template-columns:1fr}
  .section-head{display:block} .section-head p{margin-top:16px}
  .experience-grid{grid-template-columns:repeat(6, 82vw)}
  .exp-card{min-height:440px}
  .footer-grid{grid-template-columns:1fr} .footer-links{text-align:left}
}