/* =====================================================
   Valulens — Pan-Baltic Property Intelligence
   Shared stylesheet (v2 — modern redesign)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --navy-950:#050e1c;
  --navy-900:#0b1e3d;
  --navy-800:#0f2a52;
  --navy-700:#153a6b;
  --teal-600:#1f6f78;
  --teal-500:#2b8b93;
  --gold-500:#c9a24b;
  --gold-400:#d9bb73;
  --sand-50:#f8f6f1;
  --sand-100:#f1ede3;
  --ink-900:#101418;
  --ee-blue:#0072ce;
  --lv-red:#9e1b34;
  --lt-yellow:#fdb913;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--sand-50);
  color:var(--ink-900);
}

h1,h2,h3,h4,.font-display{
  font-family:'Fraunces',serif;
}

.text-balance{text-wrap:balance;}

/* ---------- Logo ---------- */
.logo-mark{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:.01em;
}
.logo-mark .logo-icon{
  width:34px;height:34px;
  flex-shrink:0;
}
.logo-mark .logo-text{
  font-size:1.35rem;
  line-height:1;
}
.logo-mark .logo-text .dot{
  color:var(--gold-500);
}

/* ---------- Nav (floating pill) ---------- */
.site-header{
  background:transparent;
  transition:padding .3s ease;
}
.nav-pill{
  border-radius:999px;
  background:rgba(8,18,34,0.55);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.55);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled .nav-pill{
  background:rgba(5,12,24,0.86);
  border-color:rgba(255,255,255,0.16);
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.65);
}
.site-header .mobile-nav{
  border-radius:1.5rem;
  background:rgba(8,18,34,0.9);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  margin-top:.6rem;
  padding-left:1.25rem;
  padding-right:1.25rem;
}
.mobile-nav.open{
  padding-top:.5rem;
}
.nav-link{
  position:relative;
  color:#dbe4f2;
  transition:color .2s ease;
}
.nav-link:hover, .nav-link.active{
  color:#fff;
}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background:var(--gold-500);
  border-radius:2px;
}

/* ---------- Photo hero ---------- */
.photo-hero{
  position:relative;
  overflow:hidden;
}
.photo-hero .hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}
.photo-hero .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,14,28,0.88) 0%, rgba(5,14,28,0.78) 35%, rgba(11,30,61,0.92) 100%),
    radial-gradient(1100px 600px at 88% -8%, rgba(43,139,147,0.30), transparent 60%);
}
.hero-gradient{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(43,139,147,0.35), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(201,162,75,0.18), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}

.map-lines{
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ---------- Baltic flag chip ---------- */
.flag-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .85rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,0.18);
  color:#eef2f9;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
}
.flag-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.flag-dot.ee{background:linear-gradient(180deg,#0072CE 34%, #000 34%, #000 66%, #fff 66%);}
.flag-dot.lv{background:linear-gradient(180deg,#9E1B34 40%, #fff 40%, #fff 60%, #9E1B34 60%);}
.flag-dot.lt{background:linear-gradient(180deg,#FDB913 34%, #006A44 34%, #006A44 66%, #C1272D 66%);}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid rgba(11,30,61,0.08);
  border-radius:1.25rem;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 56px -22px rgba(11,30,61,0.28);
  border-color:rgba(201,162,75,0.4);
}

.card-dark{
  background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:1.25rem;
}

/* ---------- Glow-highlighted card (featured item) ---------- */
.card-glow{
  position:relative;
  border-radius:1.25rem;
  border:1px solid rgba(201,162,75,0.55);
  box-shadow:0 0 0 1px rgba(201,162,75,0.12), 0 30px 60px -24px rgba(201,162,75,0.28);
}
.card-glow::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(201,162,75,0.5), transparent 40%, transparent 60%, rgba(43,139,147,0.4));
  z-index:-1;
  opacity:.6;
  filter:blur(6px);
}

/* ---------- Glass card (used over photos) ---------- */
.glass-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:1.25rem;
}

/* ---------- Photo cards / media ---------- */
.photo-card{
  position:relative;
  border-radius:1.25rem;
  overflow:hidden;
  isolation:isolate;
}
.photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.photo-card:hover img{
  transform:scale(1.07);
}
.photo-card .photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,14,28,0) 40%, rgba(5,14,28,0.85) 100%);
}
.photo-card .photo-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1.25rem;
  color:#fff;
  z-index:2;
}

.img-frame{
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(11,30,61,0.35);
}
.img-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.6rem;
  border-radius:.85rem;
  font-weight:600;
  font-size:.95rem;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:var(--navy-950);
  box-shadow:0 8px 20px -8px rgba(201,162,75,0.5);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -10px rgba(201,162,75,0.6);
}
.btn-outline{
  border:1.5px solid rgba(255,255,255,0.35);
  color:#fff;
  background:rgba(255,255,255,0.04);
}
.btn-outline:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.12);
  transform:translateY(-2px);
}
.btn-outline-dark{
  border:1.5px solid rgba(11,30,61,0.25);
  color:var(--navy-900);
  background:transparent;
}
.btn-outline-dark:hover{
  border-color:var(--navy-900);
  background:rgba(11,30,61,0.05);
  transform:translateY(-2px);
}

/* ---------- Split pill button (label + attached arrow) ---------- */
.btn-split{
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius:999px;
  padding:.28rem;
  box-shadow:0 10px 26px -10px rgba(201,162,75,0.55);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.btn-split:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(201,162,75,0.65);
}
.btn-split-label{
  padding:.55rem 1.4rem .55rem 1.15rem;
  color:var(--navy-950);
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
}
.btn-split-icon{
  width:2.5rem;height:2.5rem;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-950);
  color:var(--gold-400);
  border-radius:999px;
  font-size:.85rem;
  transition:transform .3s ease;
}
.btn-split:hover .btn-split-icon{
  transform:rotate(45deg);
}
.btn-split-light{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:none;
}
.btn-split-light .btn-split-label{color:#fff;}
.btn-split-light .btn-split-icon{background:#fff;color:var(--navy-950);}

/* ---------- Pill badges ---------- */
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.32rem .85rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1;
}
.badge-pill.gold{
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:var(--navy-950);
}
.badge-pill.outline{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(6px);
}
.badge-pill.outline-dark{
  background:rgba(11,30,61,0.06);
  color:var(--navy-900);
  border:1px solid rgba(11,30,61,0.16);
}

/* ---------- Section labels ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--gold-500);
  display:inline-block;
}

/* ---------- Country accent bars ---------- */
.accent-ee{border-top:4px solid var(--ee-blue);}
.accent-lv{border-top:4px solid var(--lv-red);}
.accent-lt{border-top:4px solid #006A44;}

/* ---------- Step numbers ---------- */
.step-num{
  width:2.75rem;height:2.75rem;
  border-radius:.85rem;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.15rem;
  background:var(--navy-900);
  color:var(--gold-400);
  flex-shrink:0;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-950);
  color:#c9d3e4;
}
.footer-link{
  color:#aebbd1;
  transition:color .2s ease;
}
.footer-link:hover{color:#fff;}

.trust-strip{
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* ---------- Cookie banner ---------- */
#cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:rgba(5,14,28,0.97);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,0.12);
  transform:translateY(120%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
#cookie-banner.show{
  transform:translateY(0);
}

/* ---------- Utility ---------- */
.badge-soft{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;
  border-radius:999px;
  background:rgba(31,111,120,0.08);
  color:var(--teal-600);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
}

.mobile-nav{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.mobile-nav.open{
  max-height:420px;
}

/* form focus */
.field-input:focus{
  outline:none;
  border-color:var(--teal-500);
  box-shadow:0 0 0 3px rgba(43,139,147,0.15);
}

/* ---------- Reveal-on-scroll animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Marquee-style photo strip ---------- */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
@media (max-width:768px){
  .photo-strip{grid-template-columns:1fr;}
}

/* ---------- Blob decorations ---------- */
.blob-gold{
  position:absolute;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(201,162,75,0.22), transparent 70%);
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}
.blob-teal{
  position:absolute;
  width:380px;height:380px;
  background:radial-gradient(circle, rgba(43,139,147,0.22), transparent 70%);
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}

/* ---------- Dot-mesh glow texture (used on dark CTA / feature sections) ---------- */
.mesh-glow{
  position:relative;
  overflow:hidden;
}
.mesh-glow::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(201,162,75,0.35) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(600px 400px at 50% 0%, rgba(0,0,0,0.9), transparent 75%);
  mask-image:radial-gradient(600px 400px at 50% 0%, rgba(0,0,0,0.9), transparent 75%);
  opacity:.5;
  pointer-events:none;
}
.mesh-glow .blob-gold,
.mesh-glow .blob-teal{
  pointer-events:none;
}

::selection{
  background:var(--gold-500);
  color:var(--navy-950);
}