/* =========================
       Base / Reset
    ========================== */
    :root{
      --bg: #0b1f2b;
      --bg-2: #0f2a3a;
      --bg-3: #123248;
      --text: #0f1720;
      --muted: #5b6b76;
      --card: #ffffff;
      --brand: #1e88e5;
      --brand-2:#1976d2;
      --accent:#00bfa6;
      --ring: #88c0ff;
      --shadow: 0 4px 18px rgba(0,0,0,.12);
      --radius: 14px;
      --container: clamp(16rem, 92vw, 1140px);
    }
    *{ box-sizing: border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      line-height: 1.6;
      color: var(--text);
      background: #f7fbff;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img{ max-width:100%; height:auto; display:block; }
    a{ color: var(--brand); text-decoration: none; }
    a:hover{ text-decoration: underline; }
    :focus-visible{
      outline: 3px solid var(--ring);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* =========================
       Layout
    ========================== */
    .container{ width: min(100% - 2rem, var(--container)); margin-inline:auto; }
    header{
      background: linear-gradient(180deg, var(--bg), var(--bg-2));
      color:#eaf4ff;
      position: relative;
      z-index: 1;
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding: .75rem 0;
    }
    .brand{
      display:flex; gap:.6rem; align-items:center; font-weight: 700;
      letter-spacing:.3px;
    }
    .brand .logo{
      inline-size: 36px; aspect-ratio:1; border-radius:10px;
      background: linear-gradient(135deg, var(--accent), var(--brand));
      display:grid; place-items:center; color:#00212a; font-weight:800;
      box-shadow: 0 4px 16px rgba(0,0,0,.2) inset;
    }
    nav ul{
      list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap;
    }
    nav a{
      color:#eaf4ff; padding:.5rem .6rem; border-radius:8px; text-decoration:none;
    }
    nav a:hover{ background: rgba(255,255,255,.08); }

    .menu-toggle{ display:none; }

    /* Hero */
    .hero{
      position: relative;
      isolation:isolate;
      color:#fff;
      min-block-size: clamp(56svh, 62svh, 72svh);
      display:grid; place-items:center;
      text-align:center;
      overflow:clip;
      /* Fallback + modern formats */
      background-image: url("../images/hero-large.jpg");
      background-image: image-set(
        url("../images/hero-large.webp") type("image/webp"),
        url("../images/hero-large.jpg") type("image/jpeg")
      );
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
    }
    .hero::after{
      /* Overlay gradient for readable text */
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.6));
      z-index:0;
    }
    .hero .inner{
      position:relative; z-index:1; padding: 3.5rem 0 2.25rem;
      width: min(100% - 2rem, 850px);
    }
    .eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; opacity:.85; margin-bottom:.5rem;}
    h1{
      margin:0 0 .6rem; line-height: 1.15;
      font-size: clamp(1.8rem, 4.2vw + 1rem, 3rem);
      font-weight: 800; letter-spacing:.2px;
      text-wrap: balance;
    }
    .lead{
      font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
      color:#eaf4ff; opacity:.95; margin-inline:auto; max-width: 65ch;
    }
    .cta-row{ display:flex; gap:.8rem; align-items:center; justify-content:center; margin-top:1.4rem; flex-wrap:wrap; }
    .btn{
      appearance:none; border:none; cursor:pointer; text-decoration:none;
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      padding: .7rem 1.05rem; border-radius: 12px; font-weight:700;
      box-shadow: var(--shadow);
    }
    .btn-primary{ background: var(--accent); color:#00212a; }
    .btn-primary:hover{ filter:brightness(1.03); text-decoration:none; }
    .btn-ghost{ background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); }
    .btn-ghost:hover{ background: rgba(255,255,255,.18); text-decoration:none; }
    .btn-ghost-light {background: transparent;color: var(--brand);border: 1px solid color-mix(in oklch, var(--brand), white 20%);}
    .btn-ghost-light:hover {  background: color-mix(in oklch, var(--brand), white 90%);  text-decoration: none;}

    /* Sections */
    section{ padding: clamp(2rem, 4vw + 1rem, 4rem) 0; }
    .section-title{
      font-size: clamp(1.35rem, 1.6vw + 1rem, 2rem);
      margin: 0 0 .6rem; text-wrap: balance;
    }
    .section-sub{ color: var(--muted); margin: 0 0 1.25rem; }

    /* Cards / Grids */
    .grid{ display:grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .card{
      background: var(--card); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
      display:flex; flex-direction:column; min-height:100%;
    }
    .card-media img{ inline-size:100%; block-size: 170px; object-fit: cover; }
    .card-body{ padding: 1rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.45rem; }
    .card h3{ margin:0; font-size:1.05rem; }
    .meta{ color: var(--muted); font-size:.92rem; }

    /* Feature list */
    .features{
      display:grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .feature{
      background: var(--card); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
    }
    .feature h3{ margin:.2rem 0 .4rem; font-size: 1.05rem; }

    /* Ad slots (placeholder) */
    .ad-slot{
      background: #eef6ff; border: 1px dashed #a8c7ff; color:#345; font-size:.95rem;
      padding: .9rem; border-radius: 12px; text-align:center;
    }

    /* CTA block */
    .cta-block{
      background: linear-gradient(180deg, #e6f5ff, #f2fbff);
      border: 1px solid #d9ecff; border-radius: 16px; padding: 1.5rem;
      display:grid; gap:.6rem; justify-items:center; text-align:center;
    }

    /* Footer */
    footer{
      background: #071720; color:#bcd5e7;
      padding: 2rem 0; margin-top: 1rem;
    }
    .footer-grid{
      display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .footer-grid a{ color:#cfe6f5; }
    .copyright{ margin-top:1rem; font-size:.9rem; color:#90aec6; }

    /* Mobile nav (simple) */
    @media (max-width: 860px){
      .menu-toggle{ display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:#eaf4ff; border:1px solid rgba(255,255,255,.25); padding:.45rem .7rem; border-radius:10px; }
      nav ul{ display:none; position:absolute; right:1rem; top:3.2rem; background: rgba(5,16,23,.98); padding: .6rem; border-radius: 12px; box-shadow: var(--shadow); z-index: 5; min-width: 60vw; }
      nav ul.show{ display:flex; flex-direction:column; }
      nav a{ display:block; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    }

    #sarajevo-map {
        width: 100%;
        height: 500px;
        border-radius: 10px;
        margin: 0px 0;
    }