/* =========================
   CHANGFA - CLEAN STYLE.CSS
   (Copy/Paste Full File)
========================= */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#334155;
  --brand:#19a463;
  --brand-2:#0f6e43;
  --line:rgba(15,23,42,.12);
  --shadow: 0 14px 40px rgba(15,23,42,.10);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:var(--text);
  line-height:1.55;
  padding-top:80px; /* sticky header space */
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(1120px, 92vw);
  margin:0 auto;
}

.skip-link{
  position:absolute;
  left:-999px; top:10px;
  background:#fff; color:#000;
  padding:10px 12px; border-radius:10px;
}
.skip-link:focus{ left:12px; z-index:9999; }

/* =========================
   HEADER / NAV
========================= */
.site-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.15);
  z-index:1000;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

.brand-logo{ height:38px; width:auto; border-radius:12px; }

.nav{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav a{
  padding:10px 10px;
  border-radius:12px;
  color:#000000;
}
.nav a:hover{
  background: rgba(255,255,255,.10);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px; width:18px;
  background:#fff;
  margin:5px auto;
  opacity:.9;
}

/* Mobile nav menu */
@media (max-width: 760px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .nav{
    position:absolute;
    right:4vw;
    top:68px;
    width:min(320px, 92vw);
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(25,164,99,.96);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; }
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  color:#062015;
  font-weight:700;
  transition: transform .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-ghost{
  background: rgba(255,255,255,.85);
  color: var(--text);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:none;
}

.btn-small{ padding:10px 14px; border-radius:12px; }

/* =========================
   HERO SLIDER (DESKTOP)
   Uses your HTML structure
========================= */
.hero.hero--slider{
  position:relative;
  overflow:hidden;
  padding:110px 0 70px;
}

/* The banner is inside ".container hero-banner" in your HTML */
.hero-banner{
  position:absolute;
  left:0; right:0;
  top:90px;                 /* under header */
  height:640px;             /* desktop banner height */
  z-index:0;
  pointer-events:none;      /* allow clicks on content */
}
.hero-banner.container{
  width:min(1280px, 96vw);
}
@media (min-width: 1100px){
  .hero-banner.container{ width:min(1360px, 96vw); }
}

.hero-slider{
  position:relative;
  height:100%;
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
  border: 1px solid rgba(15,23,42,.08);
  pointer-events:auto;      /* arrows/dots clickable */
}

.hero-slides{ position:absolute; inset:0; }

.hero-slide{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:0;
  transition: opacity .7s ease;
}
.hero-slide.is-active{ opacity:1; }

/* Light readability overlay (desktop) */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.06) 55%,
    rgba(0,0,0,.18) 100%
  );
}

/* Content container on top */
.hero .hero-grid{
  position:relative;
  z-index:2;
  padding-top:70px; /* content sits over banner */
  display:flex;
  justify-content:center;
}

.hero-copy--center{
  width:min(860px, 92vw);
  margin:0 auto;
  padding:26px 28px;
  border-radius:22px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}

.kicker{
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(15,23,42,.85);
  font-size:.8rem;
  margin:0 0 10px;
}

h1{
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height:1.15;
  margin:.1rem 0 .8rem;
  color: var(--text);
}

.lead{
  color:#1e293b;
  font-size:1.1rem;
  max-width:56ch;
  margin:0 0 14px;
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 14px;
}

.hero-badges{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.badge{
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge strong{ display:block; margin-bottom:4px; color: var(--text); }
.badge span{ color:#334155; font-size:.95rem; }

/* HERO arrows */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  color:#19a463;
  font-size:44px;
  line-height:1;
  cursor:pointer;
  z-index:5;
  padding:0 10px;
  opacity:.9;
  transition: transform .15s ease, opacity .15s ease;
}
.hero-arrow:hover{ transform:translateY(-50%) scale(1.12); opacity:1; }
.hero-arrow--prev{ left:14px; }
.hero-arrow--next{ right:14px; }

/* HERO dots */
.hero-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:5;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.40);
  cursor:pointer;
}
.hero-dot.is-active{
  background: rgba(25,164,99,.95);
  border-color: rgba(25,164,99,.95);
}

/* =========================
   SECTIONS / CARDS / GRIDS
========================= */
.section{
  padding:100px 0;
  position:relative;
}
.section:nth-child(even){
  background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
}

.section-head{ margin-bottom:18px; }
.section-head h2{ margin:0 0 8px; font-size:1.6rem; }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.tile{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.60);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15,23,42,.10);
}
.tile h3{ margin:0 0 8px; }
.tile p{ color:#334155; margin:0 0 12px; }
.tile-link{ color: var(--brand); font-weight:800; }
.tile-link:hover{ text-decoration:underline; }

/* CTA block */
.cta{ padding:44px 0 56px; }
.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:20px;
  border-radius: var(--radius);
  border:1px solid rgba(25,164,99,.35);
  background: linear-gradient(135deg, rgba(25,164,99,.18), rgba(0,0,0,.06));
}

/* =========================
   FOOTER
========================= */
.site-footer{
  border-top:1px solid var(--line);
  padding:0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-logo{ height:28px; }
.footer-links{ display:flex; gap:14px; color:var(--muted); }

.small{ font-size:.92rem; color:#475569; }
.muted{ color:var(--muted); }

/* =========================
   PDF + FORM (for other pages)
========================= */
.page{ min-height: 70vh; }
.page-hero{ padding:44px 0 10px; }

.pdf-shell{
  border-radius: var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  background: rgba(0,0,0,.06);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.pdf-frame{
  width:100%;
  height: 78vh;
  border:0;
  display:block;
}

.form{ display:flex; flex-direction:column; gap:12px; }
label{ display:flex; flex-direction:column; gap:6px; color: var(--text); }
input, textarea{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(25,164,99,.65);
  box-shadow: 0 0 0 4px rgba(25,164,99,.12);
}

/* =========================
   REVEAL ANIMATION
========================= */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s cubic-bezier(.2,.6,.2,1);
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
}

/* =========================
   RESPONSIVE (GENERAL)
========================= */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .hero-badges{ grid-template-columns: 1fr; }
}

/* =========================
   MOBILE HERO (IMPORTANT)
   Uses banner1-m / banner2-m ONLY
========================= */
@media (max-width: 980px){

  /* kill desktop spacing */
  body{ padding-top:60px; } /* keep header gap */
  .hero.hero--slider{
    padding:0 !important;
    margin:0 !important;
  }

  /* Make banner FULL WIDTH & TALL (1080x1600 => 2/3) */
  .hero-banner{
    position:relative !important;
    top:0 !important;
    height:auto !important;
    width:100% !important;
  }
  .hero-banner.container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .hero-slider{
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    width:100% !important;
    aspect-ratio: 2 / 3 !important; /* ✅ makes hero tall */
    height:auto !important;
  }

  /* Override images on mobile (CSS paths from assets/css/) */
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slide:nth-child(1){ background-image:url("../img/banner1-m.png") !important; }
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slide:nth-child(2){ background-image:url("../img/banner2-m.png") !important; }
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slide:nth-child(3){ background-image:url("../img/banner3.png") !important; }

  .hero-slide{
    background-size: cover !important;   /* looks full & tall */
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Put content inside photo, bottom */
  .hero .hero-grid{
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:12px !important;
  }

  .hero-copy--center{
    width:min(92vw, 380px) !important;
    padding:14px !important;
    border-radius:16px !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.20) !important;
  }

  .kicker{ font-size:11px !important; margin-bottom:6px !important; }
  .hero h1{ font-size:22px !important; margin:0 0 8px !important; }
  .hero .lead{ font-size:13px !important; margin:0 0 12px !important; }

  /* cleaner mobile: hide badges */
  .hero-badges{ display:none !important; }

  /* hide arrows on mobile, keep dots */
  .hero-arrow{ display:none !important; }
  .hero-dots{
    display:flex !important;
    position:absolute !important;
    left:50% !important;
    bottom:10px !important;
    transform:translateX(-50%) !important;
    z-index:6 !important;
    gap:7px !important;
  }
  .hero-dot{
    width:8px !important;
    height:8px !important;
  }
}

/* ===== GLASS CARD UPGRADE (Desktop + Mobile) ===== */
.hero-copy--center{
  /* more transparent */
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow:
    0 22px 65px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* shiny reflection highlight */
.hero-copy--center::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 380px at 18% 6%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 30%,
      rgba(255,255,255,0) 65%);
  pointer-events:none;
  opacity:.85;
}

/* subtle edge glow */
.hero-copy--center::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  box-shadow:
    inset 0 0 0 1px rgba(25,164,99,.20),
    inset 0 -40px 80px rgba(0,0,0,.10);
  pointer-events:none;
  opacity:.75;
}

/* Keep text readable */
.hero-copy--center .kicker,
.hero-copy--center h1,
.hero-copy--center .lead{
  color:#0f172a !important;
}

/* ===== DESKTOP HERO BANNER SIZE FIX ===== */
@media (min-width: 981px){

  /* Banner bigger like before */
  .hero-banner{
    top: 84px !important;       /* pak më afër header */
    height: 720px !important;   /* ✅ më i madh */
  }

  /* slider matches banner height */
  .hero-slider{
    height: 100% !important;
  }

  /* content sits correctly over banner */
  .hero.hero--slider{
    padding: 120px 0 80px !important;
  }

  .hero .hero-grid{
    padding-top: 90px !important; /* e ngrit pak content në desktop */
  }
}

@media (min-width: 981px){
  .hero-overlay{
    background: linear-gradient(180deg,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.04) 55%,
      rgba(0,0,0,.14) 100%
    ) !important;
  }
}

/* =========================================
   FIX GAP BETWEEN HEADER AND HERO (ALL)
   Paste at END of style.css
========================================= */

/* 1) Keep fixed header spacing but remove extra gaps */
body{
  padding-top: 76px !important; /* adjust if needed: 72–84 */
}

main#main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) HERO: remove big top padding that creates whitespace */
.hero.hero--slider{
  padding: 18px 0 70px !important;  /* was 110px -> too much gap */
  margin-top: 0 !important;
  position: relative !important;
}

/* 3) Banner should start at top of HERO section */
.hero-banner{
  top: 0 !important;               /* KEY FIX: no extra offset */
}

/* 4) Put content nicely over banner without pushing it down */
.hero .hero-grid{
  padding-top: 0 !important;       /* remove old padding push */
  margin-top: 0 !important;
}

/* If you want the card slightly lower on desktop */
@media (min-width: 981px){
  .hero .hero-grid{
    position: relative !important;
    min-height: 640px;             /* matches banner height */
    display: flex !important;
    align-items: center !important; /* center vertically */
    justify-content: center !important;
  }
}

/* MOBILE: hero should touch header (no gap) */
@media (max-width: 980px){
  .hero.hero--slider{
    padding: 0 !important;         /* no whitespace */
  }

  .hero-banner{
    margin: 0 !important;
  }

  .hero .hero-grid{
    padding: 12px !important;      /* only inner padding */
  }
}

/* =========================================
   CLEAN PREMIUM GLASS (transparent + shiny)
   Replace your whole glass block with this
========================================= */
.hero-copy--center{
  /* very transparent glass */
  background: rgba(255,255,255,.015) !important;

  /* subtle border + brand hint */
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(25,164,99,.22) !important;

  /* real glass (NOT foggy) */
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* TOP highlight (soft) */
.hero-copy--center::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 22% 8%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.12) 38%,
      rgba(255,255,255,0) 72%);
  opacity:.75;
  pointer-events:none;
}

/* SIDE sweep shine (very subtle) */
.hero-copy--center::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 45%);
  opacity:.45;
  pointer-events:none;
}

/* WHITE TEXT */
.hero-copy--center .kicker,
.hero-copy--center h1,
.hero-copy--center .lead{
  color:#ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
}

.hero-copy--center .badge strong,
.hero-copy--center .badge span{
  color:#ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}


/* =========================
   MOBILE: MOVE CARD UP
========================= */
@media (max-width: 980px){

  .hero .hero-grid{
    align-items: flex-end !important;
    padding-bottom: 48px !important;  /* ⬅️ kjo e ngrit card-in */
  }

}


/* Hide PDF fallback preview (the small second PDF) */
.pdf-fallback{
  display:none !important;
}


/* ===== Model chips (green) ===== */
.model-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.model-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.01em;

  color:#0b2a18;
  background: rgba(25,164,99,.14);
  border: 1px solid rgba(25,164,99,.45);
}

.model-chip:hover{
  background: rgba(25,164,99,.22);
  border-color: rgba(25,164,99,.75);
}

/* =========================
   ABOUT HERO (Wallpaper)
   ========================= */
.about-hero2{
  position: relative;
  overflow: hidden;
  padding: 56px 0 0;
  background: #f7faf9;
}

.about-hero2__bg{
  position:absolute;
  inset: 0;
  background-image: url("../img/changfa-wallpaper.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.about-hero2__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(255,255,255,.75), rgba(255,255,255,.15) 55%, rgba(255,255,255,.0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

.about-hero2__content{
  position: relative;
  z-index: 2;
  padding: 42px 0 56px;
  display: flex;
  justify-content: center;
}

.about-hero2__card{
  width: min(860px, 92vw);
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

.about-hero2__card h1{
  margin: 6px 0 6px;
}

.about-hero2__meta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 12px;
  font-weight: 600;
}

.about-chip--link{
  text-decoration: none;
  color: inherit;
  transition: background .2s ease, transform .2s ease;
}

.about-chip--link:hover{
  background: rgba(25,164,99,.18);
  transform: translateY(-1px);
}

.about-hero2__wave{
  position: relative;
  z-index: 3;
  margin-top: -24px;
}

/* =========================
   About split section
   ========================= */
.about-split{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  align-items: center;
}

.about-split__media{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 50px rgba(0,0,0,.12);
  background: #fff;
}

.about-split__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Mobile */
@media (max-width: 900px){
  .about-split{
    grid-template-columns: 1fr;
  }
  .about-hero2{
    padding-top: 18px;
  }
  .about-hero2__content{
    padding: 18px 0 46px;
  }
  .about-hero2__card{
    padding: 16px;
    border-radius: 18px;
  }
  .about-hero2__bg{
    background-size: cover;
    background-position: center top;
  }
}

/* =========================================
   Product Families: Image Tiles (Premium)
========================================= */
.tile--image{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 240px;
  padding: 0; /* content controls padding */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  background: #0b0f0e; /* fallback */
  transform: translateZ(0);
}

/* background image */
.tile--image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--tile-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.04);
}

/* overlay for readability (keeps photo visible) */
.tile--image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.05) 100%),
    radial-gradient(800px 300px at 20% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* content */
.tile--image .tile__content{
  position: relative;
  z-index: 2;
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

/* text */
.tile--image h3{
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}

.tile--image p{
  margin: 0;
  color: rgba(255,255,255,.88);
  max-width: 44ch;
}

/* link button-like */
.tile--image .tile-link{
  align-self: flex-start;
  margin-top: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.tile--image .tile-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

/* hover effect */
@media (hover:hover){
  .tile--image:hover::before{
    transform: scale(1.09);
    transition: transform .45s ease;
  }
  .tile--image{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .tile--image:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 55px rgba(0,0,0,.16);
  }
}

/* Mobile tuning */
@media (max-width: 820px){
  .tile--image{
    min-height: 210px;
    border-radius: 16px;
  }
  .tile--image .tile__content{
    padding: 16px;
  }
}

/* Image tiles (reusable) */
.tile--image{
  position:relative;
  overflow:hidden;
  border-radius: 22px;
  min-height: 240px;
  color:#fff;
}

/* background image from CSS variable */
.tile--image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--tile-img);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  transform: scale(1.02);
  transition: transform .45s ease;
}

/* readable overlay */
.tile--image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 240px at 20% 10%, rgba(0,0,0,.15), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%);
  transition: opacity .35s ease;
}

.tile--image .tile__content{
  position:relative;
  z-index:2;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* nicer CTA pill */
.tile-link--pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width: fit-content;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
  text-decoration:none;
}

/* hover */
.tile--image:hover::before{ transform: scale(1.06); }
.tile--image:hover::after{ opacity: .85; }

/* kicker inside card */
.kicker--oncard{
  color: rgba(255,255,255,.86);
  letter-spacing: .16em;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .tile--image{ min-height: 220px; }
}

/* BIG product image tiles */
.grid-3{ gap:24px; } /* nëse do më shumë hapësirë */

/* Desktop: shumë të mëdha */
.tile--image{
  min-height: 360px;
}

.tile--image .tile__content{
  padding: 28px;
}

/* bëji titujt më “hero” */
.tile--image h2,
.tile--image h3{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.1;
}

/* Mobile: mbush ekranin */
@media (max-width: 900px){
  .tile--image{
    min-height: 320px;
  }
}

/* edhe më e madhe në desktop të madh */
@media (min-width: 1200px){
  .tile--image{
    min-height: 420px;
  }
}
/* BIG product image tiles */
.grid-3{ gap:24px; } /* nëse do më shumë hapësirë */

/* Desktop: shumë të mëdha */
.tile--image{
  min-height: 360px;
}

.tile--image .tile__content{
  padding: 28px;
}

/* bëji titujt më “hero” */
.tile--image h2,
.tile--image h3{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.1;
}

/* Mobile: mbush ekranin */
@media (max-width: 900px){
  .tile--image{
    min-height: 320px;
  }
}

/* edhe më e madhe në desktop të madh */
@media (min-width: 1200px){
  .tile--image{
    min-height: 420px;
  }
}

/* ===== PRODUCTS: one huge card per row (full width, vertical) ===== */

/* 1) Grid -> 1 column */
.page .grid-3{
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

/* 2) Huge image card */
.page .grid-3 .tile--image{
  width: 100%;
  min-height: clamp(520px, 70vh, 820px); /* gati full screen */
  border-radius: 28px;
  overflow: hidden;
}

/* 3) Background image -> cover + center */
.page .grid-3 .tile--image{
  background-image: var(--tile-img);
  background-size: cover;
  background-position: center;
}

/* 4) Content overlay (lexueshmëri super) */
.page .grid-3 .tile--image .tile__content{
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 3vw, 44px);
  color: #fff;
}

/* gradient overlay mbi foto */
.page .grid-3 .tile--image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.40) 35%,
      rgba(0,0,0,.08) 75%,
      rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* sigurohu që content është mbi overlay */
.page .grid-3 .tile--image{
  position: relative;
}
.page .grid-3 .tile--image .tile__content{
  position: relative;
  z-index: 1;
}

/* 5) Typography bigger */
.page .grid-3 .tile--image h2,
.page .grid-3 .tile--image h3{
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 1.05;
  margin: 0 0 10px;
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.page .grid-3 .tile--image p{
  max-width: 70ch;
  font-size: clamp(14px, 1.35vw, 18px);
  opacity: .95;
  margin: 0 0 16px;
}

/* 6) Button style */
.page .grid-3 .tile--image .tile-link{
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
}

/* 7) Container më i gjerë (që të duket FULL) */
.page .container{
  max-width: 1180px; /* rrite nëse do edhe më wide, p.sh 1280 */
}

/* 8) Mobile: real full width + height ok */
@media (max-width: 900px){
  .page .container{
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
  }

  .page .grid-3 .tile--image{
    min-height: 72vh;
    border-radius: 22px;
  }
}

/* =========================================================
   MOBILE COMPATIBILITY PACK (paste at END of style.css)
   ========================================================= */

/* 0) Safer box sizing + prevent horizontal scroll */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }


/* 1) Long text / links never break layout */
p, li, a, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; word-break: break-word; }
.mono, code, pre { overflow-x: auto; max-width: 100%; }

/* 2) Containers + sections (mobile spacing) */
@media (max-width: 980px){
  .container{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section{ padding: 32px 0 !important; }
  .section-head p{ max-width: 65ch; }
}

/* 3) Universal grid fixes (turn multi columns into 1) */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .grid-2{ grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* 4) Header/nav mobile stable */
@media (max-width: 980px){
  .site-header{ position: sticky; top: 0; z-index: 999; }
  .header-inner{ min-height: 64px; }
  .brand-logo{ height: 34px; width: auto; border-radius: 12px; } /* logo round */
  .nav{ right: 16px !important; top: 64px !important; width: min(340px, calc(100vw - 32px)) !important; }
}

/* 5) Hero slider: no huge gaps + proper height on mobile */
@media (max-width: 980px){
  .hero{ padding-top: 0 !important; }
  .hero-banner{ margin-top: 0 !important; }
  .hero-slider{
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  /* Make slider height follow screen (not too tall/not too short) */
  .hero-slider{ height: min(72vh, 560px) !important; }
  .hero-slide{ background-size: cover; background-position: center; }
  /* Mobile: hide arrows, keep dots */
  .hero-arrow{ display: none !important; }
  .hero-dots{ bottom: 12px !important; }
}

/* 6) Hero glass card (copy/cta) stays inside and readable */
@media (max-width: 980px){
  .hero-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-copy--center{
    width: 100% !important;
    max-width: 520px !important;
    margin: -18vh auto 0 !important;   /* pulls card into banner */
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .hero-copy--center h1{ font-size: 28px !important; line-height: 1.1 !important; }
  .hero-copy--center .lead{ font-size: 14px !important; }

  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .btn{ width: 100%; text-align: center; }
  .hero-badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .badge{ padding: 10px !important; border-radius: 14px !important; }
}

/* 7) Cards / tiles never overflow */
.tile, .card{
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 980px){
  .tile{ border-radius: 18px !important; }
}

/* 8) PDFs/iframes embed responsive */
.pdf-shell{ width: 100%; }
.pdf-frame, iframe, embed{
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 980px){
  .pdf-frame{ height: 72vh !important; }
}

/* 9) Touch improvements */
@media (max-width: 980px){
  a, button, .btn, .tile-link{ -webkit-tap-highlight-color: transparent; }
  .btn, .tile-link{ min-height: 44px; } /* thumb-friendly */
}

/* 10) Respect users that disable animations */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   HERO SLIDER (MOBILE FIX)
   (paste at END of style.css)
========================= */

@media (max-width: 980px){

  /* Remove huge top spacing on mobile */
  .hero.hero--slider{
    padding: 14px 0 20px !important;
  }

  /* Put banner in normal flow (no absolute), so no empty space */
  .hero-banner{
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 0 !important;
    pointer-events: auto !important;
    margin: 0 auto 12px !important;
  }

  /* Make banner full width on mobile */
  .hero-banner.container{
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-slider{
    height: clamp(320px, 62vh, 560px) !important;
    border-radius: 0 !important;  /* full-bleed on mobile */
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Hide arrows, keep dots */
  .hero-arrow{ display:none !important; }
  .hero-dots{ bottom: 12px !important; }

  /* ✅ Use MOBILE banners (override inline background-image) */
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slides .hero-slide:nth-child(1){
    background-image: url("../img/banner1-m.png") !important;
  }
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slides .hero-slide:nth-child(2){
    background-image: url("../img/banner2-m.png") !important;
  }
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slides .hero-slide:nth-child(3){
    background-image: url("../img/banner3.png") !important;
  }

  /* Banner visible (not washed) */
  .hero-overlay{
    background: linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.06) 55%,
      rgba(0,0,0,.12) 100%
    ) !important;
  }

  /* Put glass card INSIDE hero area (overlay nicely) */
  .hero .hero-grid{
    padding-top: 0 !important;
    display: block !important;
    margin-top: -110px !important; /* pulls card into banner */
    z-index: 2 !important;
  }

  .hero-copy--center{
    width: min(520px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;

    /* cleaner glass */
    background: rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.14) !important;
  }

  .hero-copy--center .kicker{ font-size: 12px !important; }
  .hero-copy--center h1{ font-size: 26px !important; line-height: 1.12 !important; }
  .hero-copy--center .lead{ font-size: 14px !important; }

  /* CTA + badges compact */
  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .hero-badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .hero .badge{
    padding: 10px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 980px){

  /* 1) Fix overlap: give hero space under sticky header */
  .site-header{
    position: sticky; /* nëse është fixed diku, kjo e stabilizon */
    top: 0;
    z-index: 999;
  }

  .hero.hero--slider{
    padding-top: 10px !important;
  }

  /* 2) Card placement: mos e ngjit aq lart */
  .hero .hero-grid{
    margin-top: -60px !important;   /* ishte -110 (shumë) */
    padding-bottom: 10px !important;
  }

  /* 3) Card readability: më e pastër + tekst i errët */
  .hero-copy--center{
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.40) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    color: #0b1220 !important;
  }

  .hero-copy--center h1,
  .hero-copy--center p,
  .hero-copy--center .kicker{
    color: #0b1220 !important;
  }

  /* Badge cards (Quality/Support) – më të lexueshme */
  .hero .badge{
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: #0b1220 !important;
  }
  .hero .badge strong,
  .hero .badge span{
    color: #0b1220 !important;
  }

  /* Bonus: mos lejo “prerje” të card-it */
  .hero-slider{ overflow: hidden !important; }
}
@media (max-width: 980px){
  body{ padding-top: 0 !important; }
  main{ padding-top: 0 !important; }
}
/* =========================
   HERO MOBILE – FIX FAST
========================= */
@media (max-width: 980px){

  /* Banner slider: bëje të jetë “container” me lartësi të mirë */
  .hero.hero--slider{
    padding: 16px 0 24px !important;
  }

  .hero-banner{
    position: relative !important;
    top: 0 !important;
    height: 420px !important;              /* rrit/ul sipas shijes: 380–520 */
    margin-top: 10px !important;
  }

  .hero-slider{
    height: 100% !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  /* Card-in futa brenda bannerit (mbi foto), jo poshtë */
  .hero .hero-grid{
    position: absolute !important;
    left: 0; right: 0;
    top: 0;
    height: 420px !important;              /* duhet të jetë same si hero-banner */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
    pointer-events: none;                  /* mos blloko slider/dots */
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-copy--center{
    pointer-events: auto;
    width: min(92vw, 560px) !important;
    margin: 0 0 14px 0 !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
    color: #0b1220 !important;
  }

  /* Mos e lër titullin gjigant në mobile */
  .hero-copy--center h1{
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }
  .hero-copy--center .lead{
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  /* Butonat në 2 kolona, jo super të mëdhenj */
  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .hero-cta .btn{
    padding: 12px 12px !important;
    font-size: 14px !important;
  }

  /* Badges poshtë, në 2 kolona */
  .hero-badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }
  .hero .badge{
    padding: 10px 10px !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: #0b1220 !important;
  }

  /* Dots brenda bannerit, poshtë */
  .hero-dots{
    bottom: 10px !important;
  }
}
@media (max-width: 980px){

  /* Card glass — smaller + centered + shiny, NOT too blurry */
  .hero .hero-grid{
    height: 420px !important;            /* mbaje si e ke */
    align-items: center !important;      /* CENTER vertically */
    justify-content: center !important;  /* CENTER horizontally */
    padding: 0 !important;
  }

  .hero-copy--center{
    width: min(86vw, 420px) !important;  /* ✅ më i vogël */
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;

    /* ✅ extra transparent glass */
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.38) !important;

    /* ✅ blur i lehtë (jo katastrofë) */
    backdrop-filter: blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(145%) !important;

    /* ✅ shiny highlight */
    position: relative !important;
    overflow: hidden !important;

    box-shadow:
      0 18px 45px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.45) !important;

    color: #0b1220 !important;
  }

  .hero-copy--center::before{
    content:"";
    position:absolute;
    inset: 0;
    background:
      radial-gradient(600px 220px at 18% 10%,
        rgba(255,255,255,.55),
        rgba(255,255,255,0) 60%);
    pointer-events:none;
  }

  /* Text sizing (mos e mbush hero-n) */
  .hero-copy--center h1{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 8px 0 8px !important;
  }
  .hero-copy--center .lead{
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    color: rgba(11,18,32,.78) !important;
  }

  /* Buttons smaller + 2 columns */
  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .hero-cta .btn{
    padding: 11px 12px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  /* Badges compact */
  .hero-badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }
  .hero .badge{
    padding: 10px 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.16) !important;  /* ✅ më transparent */
    border: 1px solid rgba(255,255,255,.28) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  }

}

/* =========================================================
   HERO FIX (DESKTOP): no gap + white text + premium glass
   Paste at END of style.css
========================================================= */

/* 1) Close the gap between header and hero */
body{ padding-top: 76px !important; } /* keep header space */
.hero.hero--slider{
  padding-top: 88px !important;  /* was 110px -> creates empty space */
  margin-top: 0 !important;
}
.hero-banner{
  top: 76px !important;          /* start exactly under header */
}

/* Optional: if still you see white strip, reduce a bit more */
@media (min-width: 981px){
  .hero.hero--slider{ padding-top: 78px !important; }
}

/* 2) Make HERO card text white */
.hero-copy--center .kicker,
.hero-copy--center h1,
.hero-copy--center .lead,
.hero-copy--center .badge strong,
.hero-copy--center .badge span{
  color:#fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}

/* 3) Extra premium shiny glass (very transparent) */
.hero-copy--center{
  background: rgba(255,255,255,.035) !important;  /* almost transparent */
  border: 1px solid rgba(255,255,255,.22) !important;

  backdrop-filter: blur(12px) saturate(155%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(155%) brightness(1.08) !important;

  box-shadow:
    0 26px 80px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -50px 120px rgba(0,0,0,.10) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* shiny top reflection */
.hero-copy--center::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 18% 6%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 32%,
      rgba(255,255,255,0) 70%);
  opacity:.85;
  pointer-events:none;
}

/* subtle edge glow + depth */
.hero-copy--center::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 48%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -60px 120px rgba(0,0,0,.12);
  opacity:.55;
  pointer-events:none;
}

/* badges in hero: also glass + readable */
.hero-copy--center .badge{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}

/* =========================================================
   FINAL MOBILE HERO OVERRIDE (NO GAP + CLEAN GLASS)
   PASTE THIS AT THE VERY END OF style.css
========================================================= */
@media (max-width: 980px){

  /* Header is fixed => reserve EXACT space for it */
  body{
    padding-top: 72px !important; /* nqs s'perputhet, provo 68 / 76 */
  }

  /* HERO must start immediately after header */
  .hero.hero--slider{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Banner must be in normal flow (NOT absolute) */
  .hero-banner{
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
  }
  .hero-banner.container{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Slider: full width, tall enough, no white strip */
  .hero-slider{
    width: 100% !important;
    height: clamp(420px, 72vh, 620px) !important;
    border-radius: 0 !important;     /* full-bleed (pa hapsira) */
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hero-slides{ position:absolute !important; inset:0 !important; }
  .hero-slide{
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Put the glass card ON TOP of the photo */
  .hero .hero-grid{
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;     /* centered */
    justify-content: center !important; /* centered */
    padding: 14px !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .hero-copy--center{
    pointer-events: auto !important;
    width: min(92vw, 420px) !important;  /* smaller */
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;

    /* premium glass: super transparent + shiny, blur i lehte */
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow:
      0 18px 55px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.28) !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* shiny highlight */
  .hero-copy--center::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: radial-gradient(700px 260px at 20% 10%,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,0) 70%);
    opacity:.85;
    pointer-events:none;
  }

  /* WHITE TEXT in hero card */
  .hero-copy--center .kicker,
  .hero-copy--center h1,
  .hero-copy--center .lead,
  .hero-copy--center .badge strong,
  .hero-copy--center .badge span{
    color:#fff !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
  }

  /* Make text sizes compact */
  .hero-copy--center .kicker{ font-size: 11px !important; margin: 0 0 6px !important; }
  .hero-copy--center h1{ font-size: 22px !important; line-height: 1.12 !important; margin: 0 0 8px !important; }
  .hero-copy--center .lead{ font-size: 13px !important; line-height: 1.45 !important; margin: 0 0 12px !important; }

  /* CTA in 2 columns */
  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }
  .hero-cta .btn{ width: 100% !important; padding: 11px 12px !important; font-size: 13px !important; }

  /* Badges (keep them but compact) */
  .hero-badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .hero .badge{
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  }

  /* Dots inside banner */
  .hero-dots{
    bottom: 12px !important;
    z-index: 7 !important;
  }

  /* Optional: hide arrows on mobile */
  .hero-arrow{ display:none !important; }
}


/* =========================================================
   FINAL OVERRIDES (DEPLOY-READY)
   Purpose:
   - Remove unnecessary gap between fixed header and hero (desktop + mobile)
   - Stabilize hero banner + glass card positioning
   - Keep hero text white ONLY inside hero glass
   - Improve header spacing (logo/menu not glued to edges)
   - Hide duplicate PDF fallback preview
   ========================================================= */

/* ---- 0) Header spacing: not glued to edges ---- */
.site-header .header-inner{
  padding-left: 10px !important;
  padding-right: 10px !important;
}
@media (min-width: 980px){
  .site-header .header-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---- 1) Remove extra hero top space (the real culprit is hero padding/top offsets) ---- */
.hero.hero--slider{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

/* Body keeps padding-top for fixed header; hero should not add extra top spacing */
.hero{ padding-top: 0 !important; }

/* ---- 2) Banner: make it start immediately (no top offset) and keep correct size ---- */
.hero-banner{
  top: 0 !important;
  margin-top: 0 !important;
}

/* Desktop banner size (keep your original "premium" look) */
@media (min-width: 981px){
  .hero:not(.hero--split) .hero-banner{
    position: relative !important;      /* was absolute in older drafts */
    height: 640px !important;
    max-width: 1360px !important;
    margin: 0 auto !important;          /* directly under header */
  }
  .hero:not(.hero--split) .hero-slider{
    position: relative !important;
    height: 100% !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
}

/* ---- 3) Glass card positioning: fixed/stable overlay inside hero ---- */
@media (min-width: 981px){
  .hero:not(.hero--split) .hero-grid{
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;

    display: flex !important;
    align-items: center !important;      /* ✅ center vertically */
    justify-content: center !important;  /* ✅ center horizontally */

    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .hero-copy--center{
    transform: none !important;          /* remove scaling hacks */
    max-width: 960px !important;
    width: min(960px, 92vw) !important;
  }
}

/* Mobile: card slightly higher and centered, no "gap" above hero */
@media (max-width: 980px){
  .hero-banner{
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    height: 520px !important;            /* tall mobile hero */
    max-width: 100% !important;
  }
  .hero-slider{
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hero .hero-grid{
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    padding: 14px !important;
    padding-bottom: 64px !important;     /* ✅ pushes card up */
    margin: 0 !important;
  }

  .hero-copy--center{
    width: min(92vw, 420px) !important;
    max-width: 420px !important;
    margin: 0 !important;
  }
}

/* ---- 4) Premium glass: MORE transparent + shiny, but NOT foggy ---- */
.hero-copy--center{
  background: rgba(255,255,255,.045) !important;      /* ✅ see-through */
  border: 1px solid rgba(255,255,255,.22) !important;

  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;

  box-shadow:
    0 26px 70px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(25,164,99,.16) !important;
}

/* Shiny highlight (subtle) */
.hero-copy--center::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  background:
    radial-gradient(900px 420px at 18% 8%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.14) 36%,
      rgba(255,255,255,0) 72%) !important;
  opacity:.55 !important;
  pointer-events:none !important;
}
.hero-copy--center::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 46%) !important;
  opacity:.28 !important;
  pointer-events:none !important;
  mix-blend-mode: overlay !important;
}

/* ---- 5) Text colors: white ONLY inside hero glass (avoid white-on-white elsewhere) ---- */
.hero .hero-copy--center .kicker,
.hero .hero-copy--center h1,
.hero .hero-copy--center .lead,
.hero .hero-copy--center .badge strong,
.hero .hero-copy--center .badge span{
  color:#fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.40) !important;
}

/* Safety: outside hero keep dark text */
.section, .page, .tile, .card, .prose, .note, .cta, .site-footer{
  color: var(--text) !important;
}
.section p, .page p, .tile p, .card p, .prose p, .note p, .cta p{
  color: #1e293b !important;
}

/* ---- 6) Hide duplicate PDF fallback preview (the small one under iframe) ---- */
.pdf-fallback{ display:none !important; }
.pdf-fallback embed,
.pdf-fallback object{ display:none !important; }

/* ---- 7) Mobile hero uses mobile banners (keeps your desktop images unchanged) ---- */
@media (max-width: 980px){
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slide:nth-child(1){ background-image:url('assets/img/banner1-m.png') !important; }
  .hero:not(.hero--split):not(.hero--mobile-hero) .hero-slide:nth-child(2){ background-image:url('assets/img/banner2-m.png') !important; }
}

/* ---- 8) Optional: green chips for model codes if you wrap them (no harm if unused) ---- */
.model-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.model-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  color:#0b2a18;
  background: rgba(25,164,99,.14);
  border: 1px solid rgba(25,164,99,.45);
}

/* =========================================
   FINAL MOBILE TOP-GAP FIX (PUT LAST)
========================================= */
@media (max-width: 980px){

  /* 1) kill any top spacing coming from browser/default or old rules */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  /* 2) FORCE header to be truly fixed at the very top */
  .site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
    height: 70px !important;   /* set this to your real header height */
    z-index: 9999 !important;
  }

  /* 3) body must start exactly under header (no extra gap) */
  body{
    padding-top: 70px !important; /* MUST match header height */
  }

  /* 4) hero must start immediately (no margin above) */
  #main, main, .page{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .hero.hero--slider,
  .hero-banner{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* If any rule added a pseudo spacer above header, kill it */
  .site-header::before,
  .site-header::after{
    content: none !important;
    display: none !important;
  }
}

 

  /* =========================================================
   HERO CARD OVERLAY FIX (requires hero-grid inside hero-slider)
   Paste at VERY END of style.css
========================================================= */
.hero:not(.hero--split) .hero-slider{ position:relative; }

.hero:not(.hero--split) .hero-slider .hero-grid{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  pointer-events:none;
}

.hero-slider .hero-copy--center{
  pointer-events:auto;
}

/* MOBILE center + room for dots */
@media (max-width: 980px){
  .hero:not(.hero--split) .hero-slider .hero-grid{
    padding: 16px 14px 80px !important;
  }

  .hero:not(.hero--split) .hero-slider .hero-copy--center{
    width: min(92vw, 420px) !important;
    margin: 0 !important;
    transform: translateY(130px) !important; /* ✅ slightly lower */
    background: rgba(255,255,255,.01) !important; /* ✅ very transparent */
    backdrop-filter: blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
  }

  /* white text inside glass */
  .hero-slider .hero-copy--center .kicker,
  .hero-slider .hero-copy--center h1,
  .hero-slider .hero-copy--center .lead,
  .hero-slider .hero-copy--center .badge strong,
  .hero-slider .hero-copy--center .badge span{
    color:#fff !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.45);
  }

  .hero-arrow{ display:none !important; }
}


 /*DERI KETU ESHTE PERFEKT GJITHCKA  */

 /* =========================================
   PRODUCTS HERO TEXT FIX (READABILITY)
========================================= */

.products-hero p,
.products-hero .lead,
.tile--image .tile__content p{
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.55) !important;
}

/* =========================================
   BIG PRODUCT CATEGORY TILES (DESKTOP)
   Paste at END of style.css
========================================= */

/* make the section container wider ONLY for tiles */
.section .container:has(.grid-3){
  width: min(1400px, 96vw);
}

/* fallback for browsers without :has() (Chrome ok, but keep safe) */
@supports not selector(:has(*)){
  .section .container{
    width: min(1400px, 96vw);
  }
}

/* BIG tiles on desktop */
@media (min-width: 1100px){

  .grid-3{
    gap: 22px !important;
  }

  /* each card becomes tall + premium */
  .tile.tile--image{
    min-height: 560px !important;   /* ✅ dominates */
    border-radius: 26px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.12) !important;
  }

  /* background image from --tile-img */
  .tile.tile--image{
    background-image:
      linear-gradient(180deg,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.35) 60%,
        rgba(0,0,0,.55) 100%),
      var(--tile-img);
    background-size: cover;
    background-position: center;
  }

  /* push content down, make it big */
  .tile.tile--image .tile__content{
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
  }

  .tile.tile--image h3{
    font-size: 44px !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
    color: #fff !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
  }

  .tile.tile--image p{
    font-size: 16.5px !important;
    line-height: 1.45 !important;
    max-width: 46ch;
    margin: 0 0 16px !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 8px 24px rgba(0,0,0,.55);
  }

  .tile.tile--image .tile-link{
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    font-weight: 800 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .tile.tile--image .tile-link:hover{
    background: rgba(25,164,99,.22) !important;
    border-color: rgba(25,164,99,.45) !important;
    transform: translateY(-1px);
  }
}

/* extra-large screens: even bigger */
@media (min-width: 1400px){
  .tile.tile--image{
    min-height: 640px !important;
  }
}

/* =========================
   PRODUCT GRID
========================= */
.products-section{
  padding:80px 0;
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:40px;
}

@media(max-width:1024px){
  .product-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:640px){
  .product-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   PRODUCT CARD
========================= */
.product-card{
  background:#ffffff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  transition:.35s;
  display:flex;
  flex-direction:column;
}

.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(0,0,0,.12);
}

/* IMAGE */
.product-img{
  height:240px;
  background:#f5f7fa;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.product-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* BODY */
.product-body{
  padding:26px;
}

.product-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;
}

.product-desc{
  font-size:14px;
  line-height:1.5;
  color:#64748b;
  margin-bottom:14px;
}

/* MAIN SPECS (product cards) */
.product-specs{
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--line);
}

.product-specs > div{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  line-height:1.45;
  padding:5px 0;
}

.product-specs > div + div{
  border-top:1px dashed rgba(15,23,42,.06);
}

.product-specs dt{
  margin:0;
  color:#64748b;
  font-weight:500;
  flex:0 0 42%;
}

.product-specs dd{
  margin:0;
  color:#0f172a;
  font-weight:600;
  text-align:right;
  flex:1;
}

@media (max-width: 480px){
  .product-specs dt{
    flex-basis:46%;
  }

  .product-specs dd{
    font-size:12px;
  }
}

/* BUTTON */
.product-btn{
  display:inline-block;
  background:#19a463;
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-size:14px;
  text-decoration:none;
  transition:.25s;
}

.product-btn:hover{
  background:#0f6e43;
}

/* =========================================
   MOBILE NAV MENU (GREEN PANEL)
========================================= */
@media (max-width: 900px){

  /* dropdown panel */
.nav{
  position: fixed !important;
  top: 72px;
  left: 16px;
  right: 16px;

  /* GLASS GREEN */
  background: rgba(25,164,99,.35) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 18px 16px;

  box-shadow:
    0 25px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);

  z-index: 9999;
  overflow:hidden;
}

.nav::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 220px at 20% 0%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 25%,
      rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity:.85;
}



  /* menu links */
  .nav a{
    display:block;
    color:#ffffff !important;
    font-weight:600;
    padding:12px 8px;
    text-decoration:none;
  }

  /* Contact button inside menu */
  .nav .btn{
    background:#0f7f4c !important;
    color:#ffffff !important;
    border:0;
    margin-top:10px;
  }

  /* burger icon (3 lines) -> GREEN */
  .nav-toggle span{
    background:#19a463 !important;
  }

  /* when menu open, burger turns WHITE */
  .nav-open .nav-toggle span{
    background:#ffffff !important;
  }
}

/* =========================================
   FOOTER + MAP
========================================= */
.footer-main {
  padding: 40px 0 24px;
}

.footer-grid--home {
  display: grid;
  grid-template-columns: 1.05fr 0.75fr 1fr 1.15fr;
  gap: 28px 32px;
  align-items: start;
}

.footer-col-title {
  margin: 0 0  12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.footer-tagline {
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #475569;
  max-width: 30ch;
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

.footer-address strong {
  margin-bottom: 2px;
  font-weight: 700;
  color: #0f172a;
}

.footer-map-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.footer-map-link:hover {
  text-decoration: underline;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--brand);
}

.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}

.footer-copy {
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
}

.footer-inner--location{
  display:grid;
  grid-template-columns: 1.2fr .6fr 1.1fr;
  gap: 22px;
  align-items:start;
}

.footer-brand .footer-location{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.10);
}

.footer-map .map-embed,
.footer-col--map .map-embed{
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 32px rgba(15,23,42,.10);
  background: #fff;
}

.footer-map .map-embed iframe,
.footer-col--map .map-embed iframe{
  width:100%;
  height: 190px;
  border:0;
  display:block;
}

@media (max-width: 980px){
  .footer-main {
    padding: 32px 0 20px;
  }

  .footer-grid--home,
  .footer-inner--location{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-map .map-embed iframe,
  .footer-col--map .map-embed iframe{
    height: 220px;
  }
}

/* ABOUT: list + map spacing */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}
.about-list{
  margin: 10px 0 0;
  padding-left: 18px;
}
.about-list li{ margin: 8px 0; }

.map-embed--about iframe{
  height: 320px;
}
@media (max-width: 900px){
  .map-embed--about iframe{ height: 260px; }
}

/* =========================
   LANGUAGE SWITCH (header)
========================= */
.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.lang-link{
  font-weight:700;
  font-size:13px;
  letter-spacing:.3px;
  text-decoration:none;
  color: rgba(15,23,42,.85);
  padding:6px 10px;
  border-radius:999px;
  transition: .2s ease;
}

.lang-link:hover{
  background: rgba(25,164,99,.10);
}

.lang-link.is-active{
  background: rgba(25,164,99,.18);
  color: #0f6e43;
}

.lang-sep{
  color: rgba(15,23,42,.35);
  font-weight:700;
}

/* MOBILE MENU: make it look clean on dark/green menu */
.nav.is-open .lang-switch{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
}

.nav.is-open .lang-link{
  color: rgba(255,255,255,.92);
}

.nav.is-open .lang-link.is-active{
  background: rgba(255,255,255,.18);
  color: #ffffff;
}

.nav.is-open .lang-sep{
  color: rgba(255,255,255,.45);
}

/* Small screens spacing */
@media (max-width: 860px){
  .lang-switch{
    margin-top: 10px;
    width: fit-content;
  }
}

/* =========================
   LANGUAGE SWITCH — MOBILE FIX
   (strong background + horizontal)
========================= */
@media (max-width: 860px){

  /* keep it inside menu and not squeezed */
  .nav.is-open .lang-switch{
    width: 100%;
    max-width: 320px;          /* nice size */
    margin: 12px auto 0;       /* centered */
    padding: 10px 12px;

    display: flex;
    flex-direction: row;       /* FORCE HORIZONTAL */
    align-items: center;
    justify-content: center;
    gap: 12px;

    /* stronger background */
    background: rgba(15, 110, 67, .95);  /* dark green */
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav.is-open .lang-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;           /* prevents "MK" dropping */
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #ffffff;
    border-radius: 999px;
    white-space: nowrap;       /* NEVER wrap */
    line-height: 1;
  }

  .nav.is-open .lang-link.is-active{
    background: rgba(255,255,255,.18);
    color: #ffffff;
  }

  .nav.is-open .lang-sep{
    color: rgba(255,255,255,.55);
    font-weight: 800;
    line-height: 1;
  }
}

@media (min-width: 992px){
  .highlights-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    max-width: 1100px;
    margin: 0 auto;
  }
  .highlights-grid .tile{ min-height: 240px; }
  .highlights-grid .tile__content{ max-width: 720px; }
}

/* TRANSPARENT HEADER */
.site-header{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* =========================================================
   MOBILE UX FIX — solid nav menu + stacked hero layout
   (append last so it wins the cascade)
========================================================= */

/* Dim page when mobile menu is open */
@media (max-width: 900px){
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.52);
    z-index:9998;
    pointer-events:none;
  }

  body.nav-open .site-header{
    background:#ffffff !important;
    box-shadow:0 8px 28px rgba(15,23,42,.10) !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
  }

  body.nav-open .nav-toggle span{
    background:#19a463 !important;
  }

  /* Solid, readable dropdown — no see-through */
  .nav{
    position:fixed !important;
    top:76px !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;

    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;

    background-color:#0f6e43 !important;
    opacity:1 !important;
    isolation:isolate;

    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:18px !important;
    padding:10px !important;

    box-shadow:
      0 28px 70px rgba(0,0,0,.35),
      0 0 0 1px rgba(0,0,0,.06) !important;

    z-index:9999 !important;
    overflow:visible !important;
  }

  .nav::before{
    display:none !important;
  }

  .nav.is-open{
    display:flex !important;
  }

  .nav a{
    display:block !important;
    width:100% !important;
    color:#ffffff !important;
    font-weight:600 !important;
    font-size:15px !important;
    padding:13px 14px !important;
    border-radius:12px !important;
    text-decoration:none !important;
  }

  .nav a:hover,
  .nav a:focus-visible{
    background:rgba(255,255,255,.12) !important;
  }

  .nav .btn{
    background:#ffffff !important;
    color:#0f6e43 !important;
    border:0 !important;
    margin-top:6px !important;
    font-weight:700 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
  }

  .nav .btn:hover{
    background:#f0fdf4 !important;
  }

  .nav.is-open .lang-switch{
    width:100% !important;
    max-width:none !important;
    margin:8px 0 0 !important;
    padding:8px !important;
    background:rgba(0,0,0,.18) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
  }

  .nav.is-open .lang-link{
    color:#ffffff !important;
    min-width:0 !important;
    flex:1;
  }

  .nav.is-open .lang-link.is-active{
    background:rgba(255,255,255,.22) !important;
    color:#ffffff !important;
  }

  .nav.is-open .lang-sep{
    color:rgba(255,255,255,.45) !important;
  }
}

/* Mobile hero: banner-mobile-hero + bottom glass card (final override) */
@media (max-width: 980px){
  .hero.hero--slider.hero--mobile-hero{
    padding:0 !important;
    margin:0 !important;
  }

  .hero--mobile-hero .hero-banner{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    height:auto !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
  }

  .hero--mobile-hero .hero-banner.container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .hero--mobile-hero .hero-slider{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:682 / 1024;
    max-height:min(94vh, 820px);
    min-height:420px;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:#050807;
  }

  .hero--mobile-hero .hero-slider.is-mobile-static .hero-dots,
  .hero--mobile-hero .hero-slider.is-mobile-static .hero-arrow{
    display:none !important;
  }

  .hero--mobile-hero .hero-slides{
    position:absolute !important;
    inset:0 !important;
    z-index:1;
  }

  .hero--mobile-hero .hero-slides .hero-slide,
  .hero--mobile-hero .hero-slide{
    background-image:url("../img/banner-mobile-hero.png") !important;
    background-size:cover !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }

  /* Light vignette — banner already has dark field at bottom */
  .hero--mobile-hero .hero-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:2;
    pointer-events:none;
    margin:0 !important;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,0) 38%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.12) 82%,
      rgba(0,0,0,.28) 100%
    ) !important;
  }

  .hero--mobile-hero .hero-arrow{
    display:none !important;
  }

  /* Glass card anchored over the dark lower field */
  .hero--mobile-hero .hero-slider .hero-grid,
  .hero--mobile-hero .hero .hero-grid{
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:auto !important;
    margin:0 !important;
    z-index:5 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 14px max(14px, env(safe-area-inset-bottom)) !important;
    pointer-events:none !important;
  }

  .hero--mobile-hero .hero-slider .hero-copy--center,
  .hero--mobile-hero .hero-copy--center{
    position:relative !important;
    pointer-events:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:18px 18px 16px !important;
    transform:none !important;
    border-radius:22px 22px 18px 18px !important;

    background:rgba(8,14,11,.52) !important;
    border:1px solid rgba(255,255,255,.2) !important;
    backdrop-filter:blur(22px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(155%) !important;
    box-shadow:
      0 24px 56px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
    overflow:hidden !important;
    color:#ffffff !important;
  }

  .hero--mobile-hero .hero-copy--center::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
      radial-gradient(480px 160px at 12% -8%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 68%) !important;
    opacity:1 !important;
    pointer-events:none !important;
    border-radius:inherit !important;
  }

  .hero--mobile-hero .hero-copy--center::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:18px !important;
    right:18px !important;
    height:2px !important;
    inset:auto !important;
    border-radius:999px !important;
    background:linear-gradient(90deg, rgba(25,164,99,0), rgba(25,164,99,.85) 35%, rgba(120,220,160,.9) 50%, rgba(25,164,99,.85) 65%, rgba(25,164,99,0)) !important;
    box-shadow:0 0 18px rgba(25,164,99,.35) !important;
    pointer-events:none !important;
    opacity:1 !important;
  }

  .hero--mobile-hero .hero-copy--center .kicker,
  .hero--mobile-hero .hero-copy--center h1,
  .hero--mobile-hero .hero-copy--center .lead{
    position:relative !important;
    z-index:1 !important;
    color:#ffffff !important;
    text-shadow:0 2px 18px rgba(0,0,0,.45) !important;
  }

  .hero--mobile-hero .hero-copy--center .kicker{
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    margin:0 0 8px !important;
    color:rgba(170,235,200,.95) !important;
  }

  .hero--mobile-hero .hero-copy--center h1{
    font-size:clamp(21px, 5.4vw, 26px) !important;
    font-weight:700 !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;
    margin:0 0 10px !important;
  }

  .hero--mobile-hero .hero-copy--center .lead{
    font-size:clamp(12.5px, 3.4vw, 14px) !important;
    line-height:1.5 !important;
    margin:0 0 14px !important;
    color:rgba(255,255,255,.9) !important;
  }

  .hero--mobile-hero .hero-cta{
    position:relative !important;
    z-index:1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .hero--mobile-hero .hero-cta .btn{
    width:100% !important;
    min-width:0 !important;
    padding:12px 10px !important;
    font-size:12.5px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    border-radius:12px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  }

  .hero--mobile-hero .hero-cta .btn:not(.btn-ghost){
    background:linear-gradient(180deg, #1a9f61 0%, #0f6e43 100%) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }

  .hero--mobile-hero .hero-cta .btn-ghost{
    background:rgba(255,255,255,.1) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  .hero--split .hero-badges{
    display:none !important;
  }
}

/* Hero split styles → see assets/css/hero-split.css */

/* =========================
   DEVELOPER CREDIT
========================= */
.dev-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}

.dev-credit__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dev-credit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #6b8aff 0%, #a56bff 52%, #ef76b5 100%);
  box-shadow:
    0 4px 18px rgba(107, 138, 255, 0.35),
    0 8px 28px rgba(165, 107, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dev-credit__btn:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow:
    0 6px 22px rgba(107, 138, 255, 0.45),
    0 12px 36px rgba(239, 118, 181, 0.3);
}

.dev-credit__btn:focus-visible {
  outline: 2px solid #a56bff;
  outline-offset: 3px;
}

/* =========================
   PRODUCT DETAIL / SPECS
========================= */
.product-detail{
  padding: 0 0 60px;
}

.product-detail__hero-img{
  max-width: 520px;
  margin: 0 auto 28px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 20px;
}

.product-detail__hero-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.product-detail__variants{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 28px;
}

.product-detail__variant{
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-detail__hero-img--variant{
  max-width: none;
  width: 100%;
  height: 220px;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__hero-img--variant img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.product-detail__variant figcaption{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #475569;
}

.product-detail__variant figcaption strong{
  color: #0f172a;
  font-size: 15px;
}

.product-detail__variant figcaption span{
  font-weight: 700;
  color: #0f6e43;
}

/* Dual-image product card (B-Series variants) */
.product-img.product-img--variants{
  height: auto;
  min-height: 280px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.product-img__viewer{
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 12px;
}

.product-img__photo{
  display: none;
  max-width: 100%;
  max-height: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-img__photo.is-active{
  display: block;
}

.product-img__tabs{
  display: flex;
  gap: 8px;
  padding: 0 14px 16px;
}

.product-img__tab{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.product-img__tab:hover{
  border-color: rgba(15, 110, 67, 0.35);
  color: #0f6e43;
}

.product-img__tab.is-active{
  background: #0f6e43;
  border-color: #0f6e43;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 110, 67, 0.22);
}

.product-img__tab:focus-visible{
  outline: 2px solid #0f6e43;
  outline-offset: 2px;
}

@media (max-width: 720px){
  .product-img.product-img--variants{
    min-height: 250px;
  }

  .product-img__viewer{
    min-height: 190px;
    padding: 16px 12px 10px;
  }

  .product-img__photo{
    max-height: 175px;
  }

  .product-img__tabs{
    gap: 6px;
    padding: 0 10px 14px;
  }

  .product-img__tab{
    font-size: 10px;
    padding: 8px 6px;
  }
}

@media (min-width: 721px){
  .product-img__viewer{
    min-height: 240px;
  }

  .product-img__photo{
    max-height: 230px;
  }
}

@media (max-width: 900px){
  .product-detail__hero-img--variant{
    height: 190px;
    padding: 12px;
  }
}

@media (max-width: 720px){
  .product-detail__variants{
    gap: 12px;
    max-width: 100%;
  }

  .product-detail__hero-img--variant{
    height: 160px;
    border-radius: 16px;
  }

  .product-detail__variant figcaption{
    font-size: 13px;
  }

  .product-detail__variant figcaption strong{
    font-size: 14px;
  }
}

@media (max-width: 380px){
  .product-detail__hero-img--variant{
    height: 140px;
  }
}

.spec-table-wrap{
  overflow-x: auto;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(15,23,42,.06);
}

.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.spec-table th,
.spec-table td{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  text-align: left;
  vertical-align: top;
}

.spec-table thead th{
  background: #f8fafc;
  font-weight: 700;
  color: #0f172a;
}

.spec-table tbody tr:last-child td{
  border-bottom: 0;
}

.spec-table .spec-section td{
  background: rgba(25,164,99,.08);
  color: #0f6e43;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}

.spec-table td:not(:first-child){
  font-weight: 600;
  color: #0f172a;
}

.spec-table td:first-child{
  color: #64748b;
  font-weight: 500;
  width: 38%;
}

.spec-table--single td:first-child{
  width: 42%;
}

.spec-table--single thead th:last-child,
.spec-table--single td:last-child{
  width: 58%;
}

.product-detail-link{
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

.product-detail-link:hover{
  text-decoration: underline;
}