
:root{
  --primary:#0b5bd3; --primary-700:#0a49a8; --accent:#e53935; --surface:#ffffff;
  --text:#0f172a; --muted:#64748b; --radius:16px; --shadow:0 10px 24px rgba(0,0,0,.08); --container:1200px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:#fff; line-height:1.6}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.navbar{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e5e7eb}
.navbar .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; color:var(--primary)}
.brand img{height:36px; width:auto; border-radius:8px}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{color:#0f172a; text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:700}
.nav-links a:hover{background:#f1f5f9}
.hamburger{display:none; background:none; border:none; padding:10px; border-radius:10px}
.hamburger span{display:block; width:24px; height:3px; background:#0f172a; margin:5px 0; border-radius:3px}
@media (max-width: 920px){
  .hamburger{display:block}
  .nav-links{display:none; position:absolute; top:58px; right:20px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); padding:10px; flex-direction:column; min-width:220px}
  .nav-links.show{display:flex}
}
#hero{color:#fff; background:linear-gradient(180deg, rgba(11,91,211,.92), rgba(11,91,211,.7)), url('../images/hero-fallback.jpg') center/cover no-repeat}
#hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; padding:80px 0}
#hero .title{font-size:clamp(28px,4vw,48px); font-weight:900; margin:0 0 10px}
#hero .subtitle{color:#e2e8f0; margin:0 0 20px}
.cta{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--primary); padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none; box-shadow:var(--shadow)}
.cta:hover{transform:translateY(-1px); transition:.2s}
.section{padding:70px 0}
.section h2{font-size:clamp(22px,3vw,32px); margin:0 0 8px}
.section p.lead{color:var(--muted); margin-top:0}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width: 960px){.grid-2{grid-template-columns:1fr} #hero .wrap{grid-template-columns:1fr; padding:60px 0}}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0}
.badge{background:#eef2ff; color:#0a49a8; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:#ffffff22; border:1px solid #ffffff44; border-radius:14px; padding:16px; text-align:center}
.kpi .num{font-weight:900; font-size:26px}
.kpi .label{opacity:.9}
.brand-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width: 720px){.brand-cards{grid-template-columns:1fr}}
.brand-card{display:flex; flex-direction:column; justify-content:space-between; border:1px solid #e5e7eb; border-radius:20px; padding:20px; background:#ffffff; box-shadow:var(--shadow); min-height:160px}
.brand-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:800; border-radius:12px; padding:12px 16px; border:1px solid transparent}
.btn.primary{background:var(--primary); color:#fff}
.btn.primary:hover{opacity:.95}
.btn.outline{border-color:#cbd5e1; color:#0f172a; background:#fff}
.btn.outline:hover{background:#f8fafc}
.gallery.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width: 1024px){.gallery.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 720px){.gallery.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 480px){.gallery.cards{grid-template-columns:1fr}}
.card-img{display:block; width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid #e5e7eb; transition:transform .2s, box-shadow .2s}
.figure{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:10px; box-shadow:var(--shadow)}
.figure:hover .card-img{transform:scale(1.02)}
.figcap{margin:8px 6px 2px; font-weight:700; font-size:14px; color:#0f172a}
.brand-vipa{--brand:#e53935; --brand-2:#fb923c}
.brand-kralin{--brand:#0f172a; --brand-2:#64748b}
.brand-hero{border-radius:18px; padding:26px; margin-bottom:16px; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)}
.breadcrumbs{font-size:13px; color:#475569; margin-bottom:10px}
.breadcrumbs a{color:var(--primary); text-decoration:none}
.input, textarea{width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:15px; font-family:inherit}
textarea{min-height:120px; resize:vertical}
.button{background:var(--primary); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer}
.button:hover{background:var(--primary-700)}
.footer{border-top:1px solid #e5e7eb; padding:22px 0; color:#64748b; font-size:14px; background:#fbfdff}
/* Përmirësime për ekranet e vogla */
@media (max-width: 768px) {
  /* Slider – më i ulët dhe me tekst më të madh */
  #hero-slider .slide { height: 50vh; }
  #hero-slider .slide-content { margin-left: 20px; max-width: 90%; }
  #hero-slider .slide-content h1 { font-size: 1.8rem; line-height: 1.3; }

  /* Butona më të mëdhenj për prekje */
  .cta-btn {
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* Menu – hapësirë më e bollshme */
  .nav-links a {
    font-size: 1rem;
    padding: 12px 16px;
  }

  /* Kutitë e kartave – të shfaqen një kolonë */
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Gallery cards – rreshtim i vetëm */
  .gallery.cards { grid-template-columns: 1fr 1fr; }
  @media (max-width: 480px) {
    .gallery.cards { grid-template-columns: 1fr; }
  }

  /* Footer – tekst më i vogël e qendruar */
  .footer { text-align: center; font-size: 0.85rem; }
}

/* Për të shmangur klikime të vështira */
button, .btn, .cta-btn {
  min-height: 44px;
  min-width: 44px;
}