:root{
  --bg0:#ffffff;
  --bg1:#fff6f0;
  --bg2:#fffde8;
  --ink:#12131a;
  --muted:#5a5d70;
  --line:rgba(18,19,26,.10);
  --glass:rgba(255,255,255,.62);
  --glass2:rgba(255,255,255,.42);
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --shadow2:0 16px 60px rgba(0,0,0,.10);
  --red:#e11d2f;
  --red2:#ff3246;
  --yellow:#f5c53a;
  --radius:18px;
  --radius2:26px;
  --max:1160px;
  --pad:18px;
  --pad2:26px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 900px at 15% 5%, var(--bg2), transparent 60%),
              radial-gradient(1200px 900px at 85% 25%, var(--bg1), transparent 55%),
              linear-gradient(180deg, #ffffff, #fff8f6 60%, #ffffff 120%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%; display:block}
button, input, textarea, select{font:inherit}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.page{padding-top:78px}
@media (min-width:900px){ .page{padding-top:86px} }

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
.bubble{
  position:absolute;
  border-radius:999px;
  filter: blur(24px);
  opacity:.48;
  transform: translateZ(0);
  animation: floaty 10s var(--ease) infinite;
}
.b1{width:280px; height:280px; left:-60px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(225,29,47,.28), transparent 60%), rgba(245,197,58,.15)}
.b2{width:360px; height:360px; right:-140px; top:40px; background: radial-gradient(circle at 30% 30%, rgba(245,197,58,.22), transparent 55%), rgba(225,29,47,.10); animation-duration:12s}
.b3{width:300px; height:300px; right:10%; bottom:-140px; background: radial-gradient(circle at 30% 30%, rgba(225,29,47,.18), transparent 55%), rgba(245,197,58,.14); animation-duration:13s}
.b4{width:220px; height:220px; left:12%; bottom:120px; background: radial-gradient(circle at 30% 30%, rgba(245,197,58,.18), transparent 60%), rgba(225,29,47,.12); animation-duration:11s}

@keyframes floaty{
  0%,100%{transform: translate3d(0,0,0) scale(1)}
  50%{transform: translate3d(0,-12px,0) scale(1.02)}
}

/* Glass utility */
[data-glass]{
  background: var(--glass);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  [data-glass]{ background: rgba(255,255,255,.90); }
}

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
}
.nav-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:12px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 170px;
}
.brand-logo{
  width:40px; height:40px;
  object-fit:contain;
}
.brand-name{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:16px;
}
@media (min-width:900px){
  .brand-logo{width:44px;height:44px}
  .brand-name{font-size:17px}
}

.nav-links{
  display:none;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
}
.nav-links a{
  padding:10px 14px;
  border-radius:999px;
  color:rgba(18,19,26,.82);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-links a:hover{
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.nav-links a.active{
  background: linear-gradient(135deg, rgba(225,29,47,.12), rgba(245,197,58,.14));
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  border: 1px solid rgba(225,29,47,.14);
}

.nav-burger{
  display:inline-flex;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.50);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  cursor:pointer;
  transition: transform .25s var(--ease);
}
/* Language switcher */
.lang-switch{
  display:flex;
  gap:6px;
  align-items:center;
}

.lang-btn{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(18,19,26,.12);
  background: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor:pointer;
  transition: background .25s var(--ease),
              box-shadow .25s var(--ease),
              transform .25s var(--ease);
}

.lang-btn:hover{
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.lang-btn.is-active{
  background: linear-gradient(135deg, var(--red), var(--red2));
  color:#fff;
  border-color: rgba(225,29,47,.3);
  box-shadow: 0 12px 28px rgba(225,29,47,.25);
}

/* Desktop / mobile visibility for language switcher */
.lang-switch--mobile{
  display:none;
}

@media (max-width: 899px){
  .lang-switch--desktop{
    display:none;
  }

  .lang-switch--mobile{
    display:flex;
    margin-top: 16px;
    margin-bottom: 24px;  
    justify-content:flex-start;
  }

  .mobile-links{
    margin-bottom: 12px;
  }
}

/* Small tweak so it doesn’t break mobile layout */


.nav-burger:active{transform: scale(.98)}
.nav-burger span{
  width:18px; height:2px;
  background: rgba(18,19,26,.78);
  border-radius:99px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-burger.is-open span:nth-child(1){transform: translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}

.mobile-panel{
  max-width:var(--max);
  margin: 10px auto 0;
  padding: 0 var(--pad);
  display:none;
}
.mobile-panel .mobile-links{
  border-radius: var(--radius2);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mobile-panel a{
  padding:12px 12px;
  border-radius: 14px;
  color: rgba(18,19,26,.86);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.mobile-panel a:hover{background: rgba(255,255,255,.55); transform: translateY(-1px)}
.mobile-panel a.active{
  background: linear-gradient(135deg, rgba(225,29,47,.12), rgba(245,197,58,.14));
  border:1px solid rgba(225,29,47,.14);
}
@media (min-width:900px){
  .nav-burger, .mobile-panel{display:none !important}
  .nav-links{display:flex}
}

.hero{
  max-width:var(--max);
  margin:0 auto;
  padding: 18px var(--pad) 10px;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:center;
}
@media (min-width:980px){
  .hero-inner{grid-template-columns: 1.05fr .95fr; gap:26px; padding-top: 18px}
}

.cred-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cred-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.7);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .01em;
}

.hero-title{
  margin:12px 0 0;
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.hero-lead{
  margin:12px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(18,19,26,.78);
  max-width: 54ch;
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.hero-media{position:relative}
.hero-glass{
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;

  border-radius: 50px !important;
  overflow: hidden !important;      /* THIS makes the corners visible */
}


.hero-img{
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;

  border-radius: 50px !important;
  overflow: hidden;                 /* helps in some browsers */
  display: block;
}



@media (min-width:980px){
  .hero-img{height:520px}
}
.hero-sheen{
  position:absolute;
  inset:-2px;
  border-radius: var(--radius2);
  background: radial-gradient(800px 320px at 20% 10%, rgba(255,255,255,.65), transparent 55%);
  pointer-events:none;
  mix-blend-mode: soft-light;
}

.stats{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.stats.compact{grid-template-columns: repeat(3, 1fr)}
@media (min-width:720px){
  .stats{grid-template-columns: repeat(3, 1fr)}
  .stats.compact{grid-template-columns: repeat(3, 1fr)}
}
.stat-card{
  border-radius: var(--radius2);
  padding: 14px 14px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  position:relative;
  overflow:hidden;
}
.stat-card::after{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(320px 220px at 20% 20%, rgba(225,29,47,.16), transparent 60%);
  opacity:.0;
  transition: opacity .25s var(--ease);
  pointer-events:none;
}
.stat-card:hover{transform: translateY(-2px); box-shadow: var(--shadow2)}
.stat-card:hover::after{opacity:1}
.stat-big{font-size: 22px; font-weight: 800; letter-spacing:-.02em}
.stat-sub{font-size: 13px; color: rgba(18,19,26,.7); margin-top:2px}

.section{
  max-width:var(--max);
  margin: 0 auto;
  padding: 22px var(--pad);
}
.section-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 14px;
}
.section-head h2{margin:0; font-size:22px; letter-spacing:-.02em}
.muted{color: rgba(18,19,26,.68)}
.tiny{font-size: 12.5px}
.section-foot{margin-top: 14px}

.grid{
  display:grid;
  gap:12px;
}
.cards-3{grid-template-columns: 1fr}
.cards-4{grid-template-columns: 1fr}
@media (min-width:640px){
  .cards-3{grid-template-columns: repeat(2, 1fr)}
  .cards-4{grid-template-columns: repeat(2, 1fr)}
}
@media (min-width:980px){
  .cards-3{grid-template-columns: repeat(3, 1fr)}
  .cards-4{grid-template-columns: repeat(4, 1fr)}
}

.card{
  border-radius: var(--radius2);
  padding: 14px;
  position:relative;
  overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(420px 260px at 20% 20%, rgba(245,197,58,.18), transparent 60%),
              radial-gradient(420px 260px at 80% 40%, rgba(225,29,47,.16), transparent 60%);
  opacity:0;
  transition: opacity .25s var(--ease);
  pointer-events:none;
}
.card:hover{transform: translateY(-4px); box-shadow: var(--shadow2); border-color: rgba(225,29,47,.16)}
.card:hover::before{opacity:1}

.card-img{
  width:100%;
  height:190px;
  object-fit:contain;
  border-radius: 16px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(18,19,26,.06);
}
.card-body{padding-top:12px}
.card-title{margin:0; font-size:15px; font-weight:800; letter-spacing:-.02em}
.card-meta{margin-top:6px; font-size:13px; color: rgba(18,19,26,.62)}
.card-actions{margin-top:12px; display:flex; gap:10px; align-items:center; justify-content:space-between}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18,19,26,.10);
  cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn.primary{
  background: linear-gradient(135deg, var(--red), var(--red2));
  color:white;
  border-color: rgba(225,29,47,.25);
  box-shadow: 0 14px 32px rgba(225,29,47,.20);
}
.btn.primary:hover{transform: translateY(-1px); box-shadow: 0 18px 46px rgba(225,29,47,.24)}
.btn.glass{
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.btn.glass:hover{transform: translateY(-1px); box-shadow: 0 16px 42px rgba(0,0,0,.08)}

.split{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width:980px){
  .split{grid-template-columns: 1.1fr .9fr; gap:18px}
}

.glass-panel{
  border-radius: var(--radius2);
  padding: 18px;
}
.panel-kicker{
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(18,19,26,.62);
}
.panel-title{
  margin-top: 8px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.02em;
}
.mini-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:14px}
.mini{
  border-radius: 18px;
  padding: 12px;
  text-align:left;
}
.mini-big{font-weight: 900; letter-spacing:-.02em}
.mini-sub{font-size:12px; color: rgba(18,19,26,.65); margin-top:2px}

.cta-band{padding-top: 8px}
.cta-inner{
  border-radius: var(--radius2);
  padding: 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap}
.cta-inner h2{margin:0; font-size:20px; letter-spacing:-.02em}
.cta-inner p{margin:6px 0 0}

.page-hero{
  max-width:var(--max);
  margin:0 auto;
  padding: 18px var(--pad) 6px;
}
.page-hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:center;
}
@media (min-width:980px){
  .page-hero-inner{grid-template-columns: 1.05fr .95fr; gap:22px}
}
.page-hero h1{
  margin:12px 0 0;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: -.03em;
}
.toolbar{
  border-radius: var(--radius2);
  padding: 12px;
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.field{display:flex; flex-direction:column; gap:6px; min-width: 240px}
.field span{font-size: 12.5px; color: rgba(18,19,26,.66)}
select, input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(18,19,26,.10);
  background: rgba(255,255,255,.72);
  outline:none;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
select:focus, input:focus, textarea:focus{
  border-color: rgba(225,29,47,.26);
  box-shadow: 0 0 0 6px rgba(225,29,47,.10);
}
textarea{resize: vertical}

.product-detail .detail-card{
  border-radius: var(--radius2);
  padding: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.detail-blurb{
  display: none;
}

@media (min-width:980px){
  .product-detail .detail-card{grid-template-columns: 1fr 1.1fr; padding: 18px}
}
.detail-img-wrap{
  border-radius: 22px;
  padding: 12px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(18,19,26,.06);
}
.detail-img{
  width:100%;
  height: 320px;
  object-fit: contain;
  border-radius: 16px;
}
@media (min-width:980px){ .detail-img{height: 420px} }
.detail-copy h1{margin:10px 0 0; font-size: 30px; letter-spacing:-.03em}
.chips-row{display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 12px}
.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245,197,58,.18);
  border:1px solid rgba(245,197,58,.24);
  font-weight:800;
  font-size: 12.5px;
}
.pill.soft{
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.70);
  font-weight:700;
  color: rgba(18,19,26,.70);
}
.detail-blurb{margin: 0; color: rgba(18,19,26,.72); line-height:1.6}
.detail-actions{margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap}
.hint{margin-top: 14px; font-size: 12.5px; color: rgba(18,19,26,.62)}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(18,19,26,.70);
  font-size: 13px;
  margin-bottom: 10px;
}
.breadcrumb a{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.70);
}
.breadcrumb .sep{opacity:.5}

.contact-grid{grid-template-columns: 1fr; gap:12px}
@media (min-width:980px){ .contact-grid{grid-template-columns: 1.1fr .9fr} }
.form .row{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:720px){ .form .row{grid-template-columns: 1fr 1fr} }
.info-list{display:flex; flex-direction:column; gap:10px; margin-top: 8px}
.info-item{padding: 12px; border-radius: 18px; background: rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.70)}
.info-k{font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(18,19,26,.60)}
.info-v{margin-top:6px; font-weight:700}
.divider{height:1px; background: rgba(18,19,26,.10); margin:16px 0}

.site-footer{
  margin-top: 18px;
  padding: 22px var(--pad) 18px;
  border-top: 1px solid rgba(18,19,26,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.88));
}
.footer-inner{
  max-width: var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width:900px){
  .footer-inner{grid-template-columns: 1.2fr .7fr .9fr; align-items:start}
}
.foot-brand{margin-bottom: 8px}
.foot-tag{margin: 8px 0 0; color: rgba(18,19,26,.70); max-width: 46ch}
.site-footer h3{margin: 0 0 10px; font-size: 14px; letter-spacing:-.01em}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.site-footer li a{color: rgba(18,19,26,.72)}
.site-footer li a:hover{color: rgba(18,19,26,.92)}
.foot-contact .muted{display:inline-block; width:60px}
.footer-bottom{
  max-width: var(--max);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(18,19,26,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(18,19,26,.62);
  font-size: 13px;
}
.to-top{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.70);
  transition: transform .25s var(--ease);
}
.to-top:hover{transform: translateY(-1px)}

/* Animations */
[data-animate]{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-animate="fade"]{transform: translate3d(0, 0, 0); opacity: 0}
[data-animate].in{
  opacity: 1;
  transform: translate3d(0,0,0);
}
.page-ready .hero [data-animate].in{transition-delay: .06s}

@media (prefers-reduced-motion: reduce){
  *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important}
  [data-animate]{opacity:1 !important; transform:none !important}
}

.trust-slider {
  padding: 36px 16px 28px;
  text-align: center;
}

.slider-title {
  margin-bottom: 14px;
  font-size: 16px;
  opacity: .9;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.slider {
  display: flex;
  transition: transform .6s ease;
}

.slide {
  min-width: 100%;
}

.slide {
  min-width: 100%;
  display: flex;
  justify-content: center;   /* qendërzo foton */
}

.slide img {
  width: auto;               /* mos e shtrij në 100% nëse s'do */
  max-width: 100%;           /* mos dalë jashtë ekranit horizontalisht */
  height: auto;              /* ruaj proporcione origjinale */
  max-height: 420px;         /* kufi që të mos jetë shumë e madhe në desktop */
  border-radius: 18px;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 22px;
}

.nav.prev { left: 10px; }
.nav.next { right: 10px; }

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 4px;
}

.dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

.dots span.active {
  background: #e63b3b;
}

@media (max-width: 750px) {
  .slide img {
    max-height: 260px;
  }
}