:root{
  --bg:#B4C6DC; /* updated background color */
  --accent:#0b5677;
  --muted:#666;
  --container:1000px;
}


/* ===============================
   BASE RESET & TYPOGRAPHY
   =============================== */
*{box-sizing:border-box}

html{font-size:17px}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.7;
  color:#1f2937;
  background:var(--bg);
}

.bg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(180,198,220,0.5); /* #B4C6DC with 50% opacity */
  pointer-events: none;
}

/* ===============================
   CONTAINERS
   =============================== */
.container{
  max-width:900px;
  width:calc(100% - 10px);
  margin:28px auto;
  padding:28px;
  background:rgba(255,255,255,0.96);
  border-radius:14px;
  box-shadow:0 10px 34px rgba(8,20,28,0.08);
}

/* ===============================
   BACKGROUND MEDIA
   =============================== */
.bg-media{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.bg-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===============================
   HEADER (FIXED STACKING)
   =============================== */
.site-header{
  position:sticky;
  top:0;
  z-index:10000;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ===============================
   BRAND
   =============================== */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:"Source Serif 4", serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--accent);
}

.brand-icon{
  height:90px;
  width:auto;
}

/* ===============================
   NAV (MENU FIX)
   =============================== */
.nav{
  position:relative;
  z-index:10001;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang-btn{
  font-size:0.8rem;
  font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  color:var(--accent);
  border:1px solid rgba(11,86,119,0.25);
  transition:background 0.2s ease, color 0.2s ease;
}

.lang-btn:hover{
  background:var(--accent);
  color:#fff;
}

.menu-btn{
  background:transparent;
  border:1px solid transparent;
  padding:9px 13px;
  border-radius:8px;
  cursor:pointer;
  font-size:0.9rem;
  position:relative;
  z-index:10002;
}

/* Dropdown hidden by default */
.dropdown{
  list-style:none;
  margin:12px 0 0;
  padding:10px;
  background:#fff;
  border-radius:8px;
  position:absolute;
  right:0;
  min-width:165px;
  box-shadow:0 8px 22px rgba(0,0,0,0.12);
  display:none;
}

/* Visible state (JS toggles this) */
.dropdown.show{
  display:block;
}

.dropdown li{
  margin:6px 0;
}

.dropdown a{
  text-decoration:none;
  color:var(--accent);
  font-weight:500;
}

/* ===============================
   HERO
   =============================== */
.hero{
  padding:72px 0 36px;
}

.hero h1{
  font-family:"Source Serif 4", serif;
  font-size:2.5rem;
  line-height:1.15;
  margin-bottom:1.1rem;
  color:#072b3a;
}

.hero p{
  font-size:1.15rem;
  max-width:780px;
  color:#16323a;
}

/* ===============================
   SECTIONS
   =============================== */
section h2{
  font-family:"Source Serif 4", serif;
  font-size:1.75rem;
  margin-bottom:1rem;
  color:#0b5677;
}

.about, .services, .contact{
  font-size:1.02rem;
  color:#102127;
}

p{max-width:70ch}

ul{padding-left:1.2rem}

li{margin-bottom:0.55rem}

/* ===============================
   CONTACT FORM
   =============================== */
.contact-form{max-width:640px}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:13px;
  margin:16px 0;
  font-size:0.95rem;
  border-radius:10px;
  border:1px solid #d6dfe3;
}

.contact-form button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:13px 20px;
  font-size:0.95rem;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}

/* ===============================
   FOOTER
   =============================== */
.site-footer{
  margin-top:36px;
  padding:26px 0;
  font-size:0.85rem;
  color:var(--muted);
  text-align:center;
}

/* ===============================
   SOCIAL ICONS
   =============================== */
.social-icons{
  display:flex;
  justify-content:center;
  gap:16px;
}

.social-icon{
  width:28px;
  height:28px;
}

/* ===============================
   COOKIE BANNER (COMPACT + SAFE)
   =============================== */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  max-width:480px; /* reduced max-width for smaller devices */
  width:90%; /* responsive width */
  padding:12px 14px;
  background:rgba(20,24,32,0.96);
  color:#fff;
  font-weight:600;
  border-radius:12px;
  z-index:9999;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}

.cookie-banner p{
  font-size:13px;
  line-height:1.4;
  margin-bottom:8px;
}

.cookie-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.cookie-buttons button{
  padding:7px 12px;
  font-size:12px;
  border-radius:999px;
  font-weight:700;
  border:none;
  cursor:pointer;
}

.cookie-buttons button.secondary{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.6);
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width:600px){
  .brand-icon{height:64px;}

  /* Cookie banner mobile adjustments */
  .cookie-banner{
    max-width:95%;
    padding:10px 12px;
    font-size:0.9rem;
  }

  .cookie-banner p{
    font-size:12px;
    line-height:1.35;
  }

  .cookie-buttons button{
    padding:6px 10px;
    font-size:11px;
  }
}

/* ===============================
   CV PROFILE – COMPACT + VISIBLE EFFECT
   =============================== */

.cv-profile{
  display:flex;
  justify-content:center;
  margin:18px 0 26px;
}

.profile-frame{
  position:relative;
  width:110px;   /* smaller size */
  height:110px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 12px 26px rgba(8,20,28,0.28),
    inset 0 0 0 2px rgba(11,86,119,0.35);
}

/* image */
.profile-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* animated glow ring */
.profile-frame::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0%,
      rgba(180,198,220,0.9) 30%,
      transparent 60%
    );
  animation:sweep 3.8s linear infinite;
  opacity:0.9;
}

/* subtle pulse */
.profile-frame::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:rgba(180,198,220,0.35);
  animation:pulse 2.6s ease-in-out infinite;
  z-index:-1;
}

@keyframes sweep{
  to{transform:rotate(360deg)}
}

@keyframes pulse{
  0%,100%{transform:scale(1); opacity:0.4}
  50%{transform:scale(1.08); opacity:0.8}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .profile-frame::before,
  .profile-frame::after{
    animation:none;
  }
}
/* ===============================
   CV PROFILE – MINI HOVER EFFECT
   =============================== */

.cv-profile{
  display:flex;
  justify-content:center;
  margin:14px 0 22px;
}

.profile-mini{
  width:120px;      /* slightly bigger */
  height:120px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 3px 8px rgba(8,20,28,0.18),
    inset 0 0 0 1px rgba(11,86,119,0.3);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}


.profile-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  transition:filter 0.35s ease;
}

/* subtle hover interaction */
.profile-mini:hover{
  box-shadow:
    0 8px 18px rgba(8,20,28,0.28),
    inset 0 0 0 2px rgba(11,86,119,0.65);
  transform:translateY(-1px);
}

.profile-mini:hover img{
  filter:brightness(1.05) contrast(1.03);
}

/* ===============================
   MOBILE NAV FIX
   =============================== */
@media (max-width: 768px) {

  .nav {
    position: relative;
  }

  .nav-actions {
    display: flex;
    flex-direction: column !important;
    align-items: flex-end;
    gap: 6px;
  }

  .menu-btn,
  .lang-btn {
    width: auto;
  }

  /* Make sure dropdown stays under buttons */
  .dropdown {
    right: 0;
    left: auto;
    top: calc(100% + 6px);
  }
}
#snow {
  position: fixed;
  inset: 0;
  pointer-events: none; /* clicks pass through */
  z-index: 9999;
}