/* ==========================================================================
   Auto Glass Albania — style.css
   CSS3 i shkruar me dorë. Mobile-first. Pa framework.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokenët */
:root{
  --ink-0:#050b13;   /* më i erresi  */
  --ink-1:#070f19;
  --ink-2:#0b1826;
  --ink-3:#132436;
  --steel:#657d95;
  --red:#c9152a;
  --red-2:#e01e35;
  --red-soft:#fdecee;
  --wa:#25d366;

  --txt:#101a26;
  --txt-2:#4b5b6d;
  --txt-3:#7c8b9c;
  --line:#e4e8ee;
  --line-2:#eef1f5;
  --bg:#ffffff;
  --bg-soft:#f4f6f9;

  --wrap:1240px;
  --gut:20px;
  --r:4px;            /* pa rrumbullakosje të tepruar */
  --r-2:8px;

  --sh-1:0 1px 2px rgba(5,11,19,.05), 0 4px 14px rgba(5,11,19,.05);
  --sh-2:0 18px 50px rgba(5,11,19,.14);
  --sh-3:0 36px 90px rgba(5,11,19,.28);

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --e: cubic-bezier(.16,1,.3,1);
  --e2: cubic-bezier(.34,1.32,.64,1);

  /* lartësia e logos dhe hapësira rreth saj në kokë */
  --logo-h:66px;
  --logo-pad:28px;
}

/* --------------------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f);font-size:17px;line-height:1.62;
  color:var(--txt-2);background:var(--bg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,iframe,figure{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;color:var(--txt);font-weight:800;line-height:1.08;letter-spacing:-.028em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--red);color:#fff;padding:12px 20px;z-index:999;font-weight:700}
.skip:focus{left:0;top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* -------------------------------------------------------------- 3. Rrjeta */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:64px 0;position:relative}
.sec.pad-0{padding:0 0 64px}
.soft{background:var(--bg-soft)}
.dark{background:var(--ink-1);color:#a9bdd2}
.dark h1,.dark h2,.dark h3{color:#fff}
.center{text-align:center}
@media (min-width:760px){ .sec{padding:96px 0} .sec.pad-0{padding:0 0 96px} }
@media (min-width:1100px){ .sec{padding:128px 0} .sec.pad-0{padding:0 0 120px} }

/* ------------------------------------------------------------ 4. Tipografia */
.h1{font-size:clamp(34px,7vw,74px);line-height:1.02;letter-spacing:-.04em}
.h1-alt{font-size:clamp(29px,5vw,54px);line-height:1.08;letter-spacing:-.035em}
.h2{font-size:clamp(26px,3.6vw,44px);letter-spacing:-.034em}
.h3{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.026em}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--txt-2)}
.dark .lead,.dark p{color:#a9bdd2}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red)}
.dark .eyebrow{color:#ff8a97}
.dark .eyebrow::before{background:#ff8a97}
em{font-style:normal;color:var(--red)}
.dark em{color:#ff8a97}

.sec-head{display:grid;gap:18px;margin-bottom:44px}
.sec-head-x{font-size:16px;color:var(--txt-3);max-width:46ch}
.dark .sec-head-x{color:#8298b0}
@media (min-width:900px){
  .sec-head{grid-template-columns:1.15fr .85fr;align-items:end;gap:48px;margin-bottom:60px}
  .sec-head-x{padding-bottom:6px}
}

/* -------------------------------------------------------------- 5. Butona */
.btn{
  --bh:#fff;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 24px;border-radius:var(--r);border:1.5px solid transparent;
  font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e),
             transform .2s var(--e),box-shadow .2s var(--e);
}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor;transition:transform .25s var(--e2)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:scale(1.1)}
.btn:active{transform:translateY(0) scale(.985)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,
  transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s var(--e)}
.btn:hover::after{transform:translateX(100%)}
.btn-lg{min-height:56px;padding:16px 30px;font-size:17px}
.btn-sm{min-height:42px;padding:9px 16px;font-size:14.5px;gap:8px}
.btn-sm svg{width:16px;height:16px}

.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(201,21,42,.26)}
.btn-red:hover{background:var(--red-2)}
.btn-wa{background:var(--wa);color:#04331b;box-shadow:0 8px 22px rgba(37,211,102,.24)}
.btn-wa:hover{background:#31e874}
.btn-line{border-color:var(--line);color:var(--txt);background:#fff}
.btn-line:hover{border-color:var(--txt);background:var(--txt);color:#fff}
.btn-glass{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-glass:hover{background:#fff;color:var(--ink-1);border-color:#fff}
.btn-glass::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}
@media (max-width:519px){ .btn{width:100%} .btn-row{flex-direction:column} .btn-sm{width:auto} }

.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  color:var(--red);text-decoration:none}
.lnk i{width:22px;height:1.5px;background:currentColor;position:relative;transition:width .26s var(--e)}
.lnk i::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.lnk:hover i{width:34px}
.lnk-light{color:#fff}

/* --------------------------------------------------------- 6. Shirit + head */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--red),#ff6b7d);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}

.hdr{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e);
  border-bottom:1px solid transparent}
.hdr-in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:20px;min-height:calc(var(--logo-h) + var(--logo-pad));
  transition:min-height .32s var(--e)}
.hdr.solid{background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom-color:var(--line-2)}

body.dark-top .hdr:not(.solid) .nav a{color:#fff}
body.dark-top .hdr:not(.solid) .burger span{background:#fff}

.brand{flex:none;display:flex;align-items:center;position:relative}
.brand .lg{height:var(--logo-h);width:auto;object-fit:contain;display:block;
  transition:height .32s var(--e),opacity .28s var(--e)}
.lg-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
.hdr.solid .lg-light{opacity:0}
.hdr.solid .lg-dark{opacity:1}
body.menu-open .lg-light{opacity:1}
body.menu-open .lg-dark{opacity:0}
.hdr:not(.solid) .brand .lg{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
@media (max-width:359px){ :root{--logo-h:54px} }
@media (min-width:600px){ :root{--logo-h:76px} }
@media (min-width:900px){ :root{--logo-h:88px} }
@media (min-width:1300px){ :root{--logo-h:94px} }
.hdr.solid{--logo-h:56px}
@media (min-width:900px){ .hdr.solid{--logo-h:68px} }

.nav{display:none;margin-left:auto}
.nav > ul{display:flex;gap:2px}
.nav > ul > li > a{position:relative;display:block;padding:10px 15px;text-decoration:none;
  color:var(--txt);font-weight:600;font-size:15.5px;transition:color .2s}
.nav > ul > li > a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--e)}
.nav > ul > li > a:hover{color:var(--red)}
.nav > ul > li > a:hover::after,.nav > ul > li > a[aria-current="page"]::after{transform:scaleX(1)}
.nav > ul > li > a[aria-current="page"]{color:var(--red)}

.hdr-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr-wa,.hdr-tel{display:none}
@media (min-width:1000px){ .nav{display:block} .hdr-act{margin-left:0} .hdr-tel{display:inline-flex} }
@media (min-width:1180px){ .hdr-wa{display:inline-flex} }

.burger{width:48px;height:48px;display:grid;place-content:center;gap:6px;flex:none}
.burger span{display:block;width:24px;height:2px;background:var(--txt);border-radius:2px;
  transition:transform .32s var(--e),opacity .2s}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1000px){ .burger{display:none} }

/* --------------------------------------------------- 7. Menu në ekran plotë */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink-0);color:#fff;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .32s var(--e),visibility .32s}
.menu[hidden]{display:block}          /* animohet, jo display:none */
.menu.open{opacity:1;visibility:visible}
.menu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 500px at 90% -5%, rgba(29,68,120,.5), transparent 60%),
             radial-gradient(600px 460px at 0% 105%, rgba(201,21,42,.28), transparent 62%)}
.menu-in{position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--logo-h) + 52px) var(--gut) 40px;display:grid;gap:30px}
.menu-lbl{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#6a819c;margin-bottom:14px}
.menu-pages a{display:block;padding:9px 0;font-size:clamp(30px,8vw,50px);font-weight:800;
  letter-spacing:-.035em;color:#fff;text-decoration:none;
  transform:translateY(16px);opacity:0;transition:color .2s,transform .5s var(--e),opacity .4s}
.menu.open .menu-pages a{transform:none;opacity:1}
.menu-pages li:nth-child(1) a{transition-delay:.06s}
.menu-pages li:nth-child(2) a{transition-delay:.11s}
.menu-pages li:nth-child(3) a{transition-delay:.16s}
.menu-pages li:nth-child(4) a{transition-delay:.21s}
.menu-pages a:hover{color:#ff8a97}
.menu-pages a[aria-current="page"]{color:#ff8a97}
.menu-svc{display:grid;gap:1px;border-top:1px solid rgba(255,255,255,.1)}
.menu-svc a{display:block;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.1);
  color:#b9cbdf;text-decoration:none;font-weight:600;font-size:16px;
  transition:color .2s,padding-left .25s var(--e)}
.menu-svc a:hover{color:#fff;padding-left:10px}
.menu-foot{display:grid;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:26px}
.menu-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#8298b0;font-size:14.5px}
.menu-meta svg{width:15px;height:15px;fill:#ff8a97;vertical-align:-2px}
@media (min-width:820px){
  .menu-in{grid-template-columns:1.1fr .9fr;gap:56px 64px}
  .menu-foot{grid-column:1/-1;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}
}

/* ---------------------------------------------------------------- 8. Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--ink-0);color:#c3d4e6;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:78% 46%;
  transform:scale(1.08);will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,11,19,.86) 0%,rgba(5,11,19,.42) 26%,rgba(5,11,19,.55) 62%,rgba(5,11,19,.96) 100%),
    linear-gradient(92deg,rgba(5,11,19,.9) 0%,rgba(5,11,19,.5) 46%,rgba(5,11,19,.12) 100%)}
.hero-in{position:relative;z-index:2;padding-block:calc(var(--logo-h) + 78px) 40px;flex:1;display:flex;
  flex-direction:column;justify-content:flex-end}
.hero-kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#d8e4f1;margin-bottom:22px}
.hero-kick .dot{width:7px;height:7px;border-radius:50%;background:var(--red-2);
  box-shadow:0 0 0 0 rgba(224,30,53,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(224,30,53,0)}100%{box-shadow:0 0 0 0 rgba(224,30,53,0)}}
.hero .h1{color:#fff;text-wrap:balance}
.hero .h1 span{display:block;overflow:hidden}
.hero .h1 span > *{display:block}
.hero .h1 .l2{color:#c9d9ea;font-weight:700}
.hero .h1 .l3{color:#fff}
.hero .h1 .l3::after{content:"";display:inline-block;width:.42em;height:.09em;
  background:var(--red);margin-left:.16em;vertical-align:.16em}
.hero-lead{margin-top:24px;max-width:52ch;font-size:clamp(16.5px,1.55vw,19.5px);color:#b6c9dd}
.hero-btns{margin-top:34px}

.hero-rail{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.13);
  background:rgba(5,11,19,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-rail-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.hr-i{display:flex;align-items:center;gap:12px;padding:18px 4px}
.hr-i:nth-child(odd){border-right:1px solid rgba(255,255,255,.11)}
.hr-i:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.11)}
.hr-n{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;flex:none;min-width:1.6em}
.hr-n svg{width:26px;height:26px;fill:var(--red-2)}
.hr-l{font-size:12.5px;line-height:1.35;color:#93aac2}
@media (min-width:900px){
  .hero-in{padding-block:calc(var(--logo-h) + 96px) 56px}
  .hero-rail-in{grid-template-columns:repeat(4,1fr)}
  .hr-i{padding:26px 26px 26px 0;border-bottom:0!important}
  .hr-i:not(:last-child){border-right:1px solid rgba(255,255,255,.11)}
  .hr-i+.hr-i{padding-left:26px}
  .hr-n{font-size:34px}
}

/* Animim hyrjeje i hero-t */
.hero-kick,.hero .h1 span > *,.hero-lead,.hero-btns,.hero-rail{
  opacity:0;transform:translateY(26px);animation:up .9s var(--e) forwards}
.hero-kick{animation-delay:.1s}
.hero .h1 .l1 > *{animation-delay:.18s}
.hero .h1 .l2 > *{animation-delay:.26s}
.hero .h1 .l3 > *{animation-delay:.34s}
.hero-lead{animation-delay:.44s}
.hero-btns{animation-delay:.52s}
.hero-rail{animation-delay:.6s;transform:translateY(0);animation-name:fade}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero-kick,.hero .h1 span > *,.hero-lead,.hero-btns,.hero-rail{opacity:1;transform:none;animation:none}
  .hero-bg img{transform:none}
}

/* -------------------------------------------------- 9. Hero i faqeve tjera */
.phero{position:relative;background:var(--ink-1);color:#b6c9dd;padding:calc(var(--logo-h) + 64px) 0 56px;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 520px at 88% -20%, rgba(29,68,120,.55), transparent 62%),
             radial-gradient(520px 420px at -5% 120%, rgba(201,21,42,.2), transparent 60%)}
.phero > .wrap{position:relative}
.phero .h1{color:#fff;margin-top:6px;max-width:22ch}
.phero .hero-lead{color:#b6c9dd}
@media (min-width:900px){ .phero{padding:calc(var(--logo-h) + 96px) 0 88px} }

.crumbs{font-size:13.5px;margin-bottom:26px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:#8298b0;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:#4a6280}
.crumbs [aria-current="page"]{color:#dbe7f3}

/* ------------------------------------------------------------ 10. Imazhet */
.fig{margin:0;position:relative}
.fig-box{display:block;position:relative;overflow:hidden;background:var(--ink-2);border-radius:var(--r-2)}
.fig-box img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e)}
.fig-box[data-missing]{aspect-ratio:var(--ar,3/2)}
.fig-box[data-missing]::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 24px),
             linear-gradient(160deg,var(--ink-3),var(--ink-1))}
.fig-box[data-missing]::after{content:"pritet fotografia";position:absolute;inset:auto 0 0 0;
  padding:12px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#7d97b4;background:linear-gradient(to top,rgba(5,11,19,.9),transparent)}
.fig-box[data-missing] img{opacity:0;position:absolute}
.fig-cover .fig-box{aspect-ratio:3/2}
.dev-image-caption{display:block;margin-top:10px;padding:9px 13px;font-size:12.5px;line-height:1.45;
  font-weight:700;color:#8a5a00;background:#fff8e6;border:1px dashed #e8c15c;border-radius:var(--r)}

/* -------------------------------------------- 11. Panelet e shërbimeve (1) */
.svc-main{padding-bottom:0}
.panels{display:block;width:100%}

.panel{position:relative;display:grid;overflow:hidden;isolation:isolate}
.p-light{background:var(--bg)}
.p-dark{background:var(--ink-1);color:#a9bdd2}
.p-dark .h3{color:#fff}
.p-dark .panel-n{color:#ff6b7d}
.p-dark .panel-n i{background:#ff6b7d}
.p-dark .lnk{color:#ff8a97}

/* numri fantazmë në sfond */
.panel-ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-size:clamp(150px,22vw,300px);font-weight:800;letter-spacing:-.07em;line-height:.76;
  color:rgba(16,26,38,.045);bottom:-.1em;right:.02em}
.p-dark .panel-ghost{color:rgba(255,255,255,.05)}

.panel-media{position:relative;z-index:1;overflow:hidden}
.panel-media .fig,.panel-media .fig-box{height:100%}
.panel-media .fig-box{border-radius:0;aspect-ratio:16/11}
.panel-media .fig-box img{transform:scale(1.02);transition:transform 1.2s var(--e)}
.panel:hover .panel-media .fig-box img{transform:scale(1.075)}
.panel-media .dev-image-caption{position:absolute;left:14px;right:14px;bottom:14px;margin:0;z-index:3}

.panel-body{position:relative;z-index:1;display:flex;align-items:center;
  padding:38px var(--gut) 46px}
.panel-inner{max-width:52ch}
.panel-n{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.panel-n i{display:block;width:0;height:2px;background:var(--red);
  transition:width .8s var(--e) .15s}
.panel.in .panel-n i{width:34px}
.panel-body p{margin-top:16px}
.panel-body .lnk{margin-top:26px}

@media (min-width:860px){
  .panel{grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(78vh,620px)}
  .panel-media{grid-column:1;grid-row:1}
  .panel-body{grid-column:2;grid-row:1;
    padding:64px clamp(28px,5vw,88px) 64px clamp(34px,4.6vw,76px)}
  .panel:nth-child(even) .panel-media{grid-column:2}
  .panel:nth-child(even) .panel-body{grid-column:1;grid-row:1;
    padding:64px clamp(34px,4.6vw,76px) 64px clamp(28px,5vw,88px)}
  .panel:nth-child(even) .panel-inner{margin-left:auto}
  .panel-media .fig-box{aspect-ratio:auto;height:100%}
  .panel-ghost{bottom:-.16em}
  .panel:nth-child(even) .panel-ghost{right:auto;left:.02em}
}
@media (min-width:1500px){
  .panel-body{padding-inline:clamp(48px,7vw,150px)}
  .panel:nth-child(even) .panel-body{padding-inline:clamp(48px,7vw,150px)}
}

/* zbulim i butë i tekstit brenda panelit */
.panel-inner > *{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--e),transform .6s var(--e)}
.panel.in .panel-inner > *{opacity:1;transform:none}
.panel.in .panel-inner > *:nth-child(1){transition-delay:.05s}
.panel.in .panel-inner > *:nth-child(2){transition-delay:.12s}
.panel.in .panel-inner > *:nth-child(3){transition-delay:.19s}
.panel.in .panel-inner > *:nth-child(4){transition-delay:.26s}
.panel.in .panel-inner > *:nth-child(5){transition-delay:.33s}
@media (prefers-reduced-motion:reduce){
  .panel-inner > *{opacity:1;transform:none}
  .panel-n i{width:34px}
}

/* ------------------------------------------- 12. Lista e shërbimeve (2) */
.srows{border-top:1px solid var(--line)}
.srow{border-bottom:1px solid var(--line)}
.srow a{display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:baseline;
  padding:22px 4px;text-decoration:none;color:var(--txt);
  transition:padding-left .3s var(--e),color .2s}
.srow-n{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--txt-3);
  grid-row:1;transition:color .2s}
.srow-t{font-size:clamp(19px,2vw,25px);font-weight:800;letter-spacing:-.026em;grid-row:1}
.srow-d{grid-column:2;grid-row:2;font-size:15.5px;color:var(--txt-3);max-width:62ch}
.srow-a{grid-column:3;grid-row:1;width:26px;height:26px;position:relative;align-self:center}
.srow-a::before,.srow-a::after{content:"";position:absolute;background:var(--txt-3);
  transition:background .2s,transform .3s var(--e)}
.srow-a::before{left:0;right:6px;top:50%;height:1.5px}
.srow-a::after{right:6px;top:50%;width:8px;height:8px;border-top:1.5px solid var(--txt-3);
  border-right:1.5px solid var(--txt-3);background:none;transform:translateY(-50%) rotate(45deg)}
.srow a:hover{padding-left:16px;color:var(--red)}
.srow a:hover .srow-n{color:var(--red)}
.srow a:hover .srow-a::before{background:var(--red);right:0}
.srow a:hover .srow-a::after{border-color:var(--red);right:0}

/* --------------------------------------------------- 13. Seksioni "1994" */
.since{position:relative;overflow:hidden}
.since-year{position:absolute;top:-.14em;right:-.06em;font-size:clamp(180px,30vw,460px);
  font-weight:800;letter-spacing:-.06em;line-height:.8;color:rgba(255,255,255,.035);
  pointer-events:none;user-select:none}
.since:not(.dark) .since-year{color:rgba(16,26,38,.04)}
.since-in{position:relative;display:grid;gap:38px}
.since-media .fig-box{aspect-ratio:4/3}
.since-sig{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-weight:800;color:#fff;font-size:17px;line-height:1.5}
.since-sig em{font-weight:600;font-size:15.5px;color:#93aac2}
@media (min-width:900px){
  .since-in{grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
}

/* ------------------------------------------------------------- 14. Split */
.split{display:grid;gap:34px}
.split-m .fig-box{aspect-ratio:4/3}
.split-t p{margin-top:16px;max-width:52ch}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr;gap:64px;align-items:center} }

/* ----------------------------------------------------------- 15. Procesi */
.proc-in{display:grid;gap:40px}
.proc-head .lead{margin-top:16px;max-width:44ch}
.proc-head .btn{margin-top:26px}
.psteps{position:relative;display:grid;gap:0}
.pline{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.pline i{display:block;width:100%;height:0;background:var(--red);transition:height .25s linear}
.pstep{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:18px 0 26px;padding-left:0}
.pstep-n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-content:center;font-size:12px;font-weight:800;
  background:#fff;border:2px solid var(--line);color:var(--txt-3);
  transition:background .34s var(--e),border-color .34s var(--e),color .34s var(--e),transform .34s var(--e2)}
.soft .pstep-n{background:var(--bg-soft)}
.pstep.on .pstep-n{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.1)}
.pstep-b h3{font-size:19.5px;letter-spacing:-.022em}
.pstep-b p{margin-top:7px;font-size:16px;max-width:46ch}
.pstep{opacity:.45;transition:opacity .4s var(--e)}
.pstep.on{opacity:1}
@media (min-width:900px){
  .proc-in{grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
  .proc-head{position:sticky;top:110px}
  .pstep{padding:26px 0 34px}
  .pstep-b h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ .pstep{opacity:1} }

/* ---------------------------------------------------------- 16. Garancia */
.gar{padding:0;display:grid;background:var(--ink-1)}
.gar-media{position:relative;min-height:280px}
.gar-media .fig{height:100%}
.gar-media .fig-box{height:100%;border-radius:0;aspect-ratio:16/10}
.gar-media .fig-box::after{background:linear-gradient(to top,rgba(5,11,19,.9),transparent)}
.gar-media .dev-image-caption{position:absolute;left:14px;right:14px;bottom:14px;margin:0}
.gar-body{display:flex;align-items:center;padding:56px var(--gut)}
.gar-inner{max-width:52ch}
.gar-body h2{color:#fff}
.gar-body p{margin-top:16px;color:#a9bdd2}
.gar-list{margin-top:28px;display:grid;gap:13px}
.gar-list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;color:#dbe7f3;font-size:16px}
.gar-list svg{width:19px;height:19px;fill:var(--red-2);margin-top:3px}
@media (min-width:900px){
  .gar{grid-template-columns:1fr 1fr}
  .gar-media .fig-box{aspect-ratio:auto;min-height:520px}
  .gar-body{padding:80px 6vw}
}

/* ------------------------------------------------------------ 17. Markat */
.brands{overflow:hidden}
.brands-txt{max-width:760px;margin-inline:auto;text-align:center}
.brands-txt .eyebrow::before{display:none}
.brands-txt .eyebrow{padding-left:0}
.brands-txt .lead{margin-top:20px}
.marq{position:relative;overflow:hidden;margin-top:44px;padding-block:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-t{display:flex;width:max-content;gap:14px;animation:slide 34s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  padding:16px 34px;font-weight:800;font-size:clamp(17px,1.7vw,21px);color:#fff;white-space:nowrap;
  border-radius:var(--r);letter-spacing:-.01em;
  transition:transform .3s var(--e2),background .3s,border-color .3s}
.chip:hover{transform:translateY(-3px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
@media (prefers-reduced-motion:reduce){
  .marq-t{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marq{-webkit-mask-image:none;mask-image:none}
}
@media (min-width:900px){ .marq{margin-top:56px} }

/* ----------------------------------------------------------- 18. Galeria */
.ggrid{display:grid;gap:14px;grid-template-columns:1fr}
.gi{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  border-radius:var(--r-2)}
.gi .fig{height:100%}
.gi .fig-box{height:100%;border-radius:var(--r-2);aspect-ratio:3/2}
.gi .fig-box img{transition:transform 1s var(--e)}
.gi:hover .fig-box img{transform:scale(1.07)}
.gi-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;color:#fff;font-weight:800;font-size:16.5px;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(5,11,19,.88),rgba(5,11,19,.1) 70%,transparent);
  transform:translateY(0);transition:padding-bottom .3s var(--e)}
.gi-cap i{width:24px;height:1.5px;background:#fff;position:relative;flex:none;transition:width .28s var(--e)}
.gi-cap i::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:translateY(-50%) rotate(45deg)}
.gi:hover .gi-cap i{width:36px}
.gi:hover .gi-cap{padding-bottom:22px}
.gi .dev-image-caption{position:absolute;left:12px;right:12px;top:12px;margin:0;z-index:3}
@media (min-width:700px){
  .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
}
@media (min-width:1000px){
  .ggrid{grid-template-columns:repeat(4,1fr);grid-template-rows:230px 230px}
  .g-a{grid-column:1/3;grid-row:1/3}
  .g-b{grid-column:3/4;grid-row:1/2}
  .g-c{grid-column:4/5;grid-row:1/2}
  .g-d{grid-column:3/5;grid-row:2/3}
  .gi .fig-box{aspect-ratio:auto}
}

/* --------------------------------------------------------------- 19. FAQ */
.faq-in{display:grid;gap:34px}
.faq-head .lead{margin-top:16px;max-width:38ch}
.faq-list{border-top:1px solid var(--line)}
.soft .faq-list,.soft .fq{border-color:#dde3ea}
.fq{border-bottom:1px solid var(--line)}
.fq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;font-weight:700;font-size:17.5px;color:var(--txt);line-height:1.4;
  transition:color .2s}
.fq-q:hover{color:var(--red)}
.fq-i{flex:none;width:20px;height:20px;position:relative;margin-top:3px}
.fq-i::before,.fq-i::after{content:"";position:absolute;left:50%;top:50%;background:var(--red);
  transform:translate(-50%,-50%);transition:transform .32s var(--e2)}
.fq-i::before{width:14px;height:2px}
.fq-i::after{width:2px;height:14px}
.fq-q[aria-expanded="true"] .fq-i::after{transform:translate(-50%,-50%) scaleY(0)}
.fq-q[aria-expanded="true"] .fq-i::before{transform:translate(-50%,-50%) rotate(180deg)}
.fq-a{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .34s var(--e),visibility 0s linear .34s}
.fq-a > div{overflow:hidden;min-height:0}
.fq-a.open{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .34s var(--e),visibility 0s}
.fq-a p{padding:0 0 24px;max-width:68ch;font-size:16px}
@media (min-width:900px){ .faq-in{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
  .faq-head{position:sticky;top:110px} }

/* ---------------------------------------------------------- 20. CTA fund */
.cta{background:var(--ink-0);color:#b6c9dd;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(820px 520px at 50% -10%, rgba(201,21,42,.28), transparent 64%),
             radial-gradient(700px 480px at 100% 110%, rgba(29,68,120,.4), transparent 62%)}
.cta-in{position:relative;text-align:center;display:grid;justify-items:center;gap:0}
.cta .h1-alt{color:#fff;max-width:24ch}
.cta .lead{margin-top:20px;max-width:52ch}
.cta .btn-row{margin-top:34px;justify-content:center}
.cta-meta{margin-top:26px;font-size:14.5px;color:#8298b0;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;justify-content:center}
.cta-meta svg{width:15px;height:15px;fill:#ff8a97;vertical-align:-2px}

/* -------------------------------------------------------- 21. Kontakti */
.kont-in{display:grid;gap:34px}
.kont-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);
  padding:30px 24px;box-shadow:var(--sh-1)}
.kont-name{font-size:clamp(23px,2.4vw,30px);font-weight:800;color:var(--txt);letter-spacing:-.03em}
.kont-sub{color:var(--txt-3);margin-top:4px}
.kont-list{margin:26px 0 28px;border-top:1px solid var(--line-2)}
.kont-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--line-2);align-items:start}
.kont-list svg{width:19px;height:19px;fill:var(--red);margin-top:4px}
.kont-list strong{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:3px;font-weight:800}
.kont-list a,.kont-list span{color:var(--txt);font-weight:700;font-size:18px;text-decoration:none}
.kont-list a:hover{color:var(--red)}
.kont-hint{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line)}
.kont-hint-t{font-weight:700;color:var(--txt);font-size:15.5px;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:14px;color:var(--txt-2);background:var(--bg-soft)}
.mapbox{position:relative;overflow:hidden;border-radius:var(--r-2);border:1px solid var(--line);
  background:var(--ink-2);aspect-ratio:4/3}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kont-map .btn-row{margin-top:14px}
@media (min-width:900px){
  .kont-in{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .kont-card{padding:44px 40px}
  .mapbox{aspect-ratio:1/1}
}

/* ------------------------------------------------- 22. Të lidhura / 404 */
.rels{display:grid;gap:12px}
.rels a{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2);
  text-decoration:none;transition:border-color .22s,transform .22s var(--e),box-shadow .22s}
.rel-t{display:block;font-weight:800;color:var(--txt);font-size:18px;letter-spacing:-.02em}
.rel-d{display:block;grid-column:1;font-size:14.5px;color:var(--txt-3);margin-top:5px}
.rels a i{width:24px;height:1.5px;background:var(--txt-3);position:relative;transition:width .26s var(--e),background .2s}
.rels a i::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  color:var(--txt-3);transform:translateY(-50%) rotate(45deg);transition:border-color .2s}
.rels a:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--sh-1)}
.rels a:hover i{width:34px;background:var(--red)}
.rels a:hover i::after{border-color:var(--red)}
@media (min-width:820px){ .rels{grid-template-columns:repeat(3,1fr)} }

.err{padding-top:calc(var(--logo-h) + 110px)}
.err-code{font-size:clamp(78px,17vw,168px);font-weight:800;line-height:1;letter-spacing:-.06em;
  color:var(--line);margin-bottom:6px}

/* ------------------------------------------------------------ 23. Footer */
.ftr{background:var(--ink-0);color:#8298b0;padding:64px 0 0;font-size:15px}
.ftr-in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);display:grid;gap:38px}
.ftr-brand img{height:78px;width:auto;object-fit:contain;object-position:left center}
.ftr-brand p{margin-top:16px;line-height:1.8}
.ftr-brand strong{color:#fff}
.ftr-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ftr-h{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;font-weight:800}
.ftr ul{display:grid;gap:10px}
.ftr a{color:#a9c1e0;text-decoration:none;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr-bot{max-width:var(--wrap);margin:48px auto 0;padding:22px var(--gut) 100px;
  border-top:1px solid rgba(255,255,255,.09);font-size:13.5px;color:#5f7691;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (min-width:760px){ .ftr-in{grid-template-columns:1.5fr 1fr 1fr;gap:48px} }
@media (min-width:1000px){ .ftr-bot{padding-bottom:22px} }

/* ------------------------------------------------- 24. Shiriti në celular */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:rgba(255,255,255,.16);box-shadow:0 -8px 30px rgba(5,11,19,.26);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(100%);transition:transform .4s var(--e)}
.bar.show{transform:none}
.bar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  padding:14px 10px;font-weight:800;font-size:16px;text-decoration:none;transition:filter .18s}
.bar a:active{filter:brightness(.86)}
.bar svg{width:19px;height:19px;fill:currentColor}
.bar-tel{background:var(--red);color:#fff}
.bar-wa{background:var(--wa);color:#04331b}
@media (min-width:1000px){ .bar{display:none} }

/* --------------------------------------------------------- 25. Lightbox */
.lb{position:fixed;inset:0;z-index:130;background:rgba(5,11,19,.94);
  display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .28s var(--e),visibility .28s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(1200px,94vw);max-height:86vh;width:auto;height:auto;border-radius:var(--r-2);
  transform:scale(.96);transition:transform .34s var(--e);box-shadow:var(--sh-3)}
.lb.open img{transform:none}
.lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#c3d4e6;font-size:15px}
.lb-x{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;
  display:grid;place-content:center;transition:background .2s}
.lb-x:hover{background:rgba(255,255,255,.22)}

/* ---------------------------------------------------- 26. Zbulimi në scroll */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--e),transform .7s var(--e)}
.rv.in{opacity:1;transform:none}
.rv-s > *{opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--e),transform .55s var(--e);
  transition-delay:calc(var(--i,0) * 70ms)}
.rv-s.in > *{opacity:1;transform:none}
.rv-m .fig-box{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--e)}
.rv-m.in .fig-box{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-s > *{opacity:1!important;transform:none!important}
  .rv-m .fig-box{clip-path:none!important}
}

/* ------------------------------------------------- 27. Rregullime finale */
.sec p + p{margin-top:16px}
.since-txt .h2 + p,.split-t .h2 + p,.brands-txt .h2 + p,.gar-inner .h2 + p,
.panel-body .h3 + p,.phero .h1 + .hero-lead{margin-top:18px}
.since-txt .lnk{margin-top:26px}
.hero .h1 .l3::after{display:none}          /* pa vijë të varur pas titullit */
.eyebrow{margin-top:0}
.pad-0 .fig-box{aspect-ratio:16/7}
.svc-shot{margin-top:-46px;position:relative;z-index:3}
.svc-shot .fig-box{aspect-ratio:16/8;box-shadow:var(--sh-2)}
@media (max-width:759px){ .svc-shot{margin-top:-28px} .svc-shot .fig-box{aspect-ratio:3/2} }
.gar-media .fig-box[data-missing]{min-height:320px}
.kont-map .btn-row{flex-direction:row;flex-wrap:wrap}
@media (max-width:519px){ .kont-map .btn-row .btn{width:auto;flex:1 1 auto} }

/* ------------------------------ 28. Header mbi menunë kur menuja është hapur */
.hdr{z-index:115}
.menu{z-index:110}
body.menu-open{overflow:hidden}
body.menu-open .hdr{background:transparent!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}


body.menu-open .hdr-wa,body.menu-open .hdr-tel{display:none}
body.menu-open .nav a{color:#fff}

/* -------------------------------- 29. Mbrojtje kundër tejkalimit horizontal */
.gar{grid-template-columns:1fr;overflow:hidden}
.gar > *{min-width:0}
.gar-inner{max-width:min(52ch,100%)}
@media (min-width:900px){ .gar{grid-template-columns:1fr 1fr} }
.sec,.phero,.hero,.ftr,.cta{max-width:100vw}
.since-year{max-width:100vw;overflow:hidden}
.lb{z-index:200}
body.lb-open .hdr,body.lb-open .bar,body.lb-open .progress{opacity:0;pointer-events:none;transition:opacity .2s}

/* =========================================================================
   30. KOKA MBI SFOND TË ERRËT — uniforme në të gjitha faqet
   ========================================================================= */
body.dark-top .hdr:not(.solid) .nav > ul > li > a{color:#e7eef6}
body.dark-top .hdr:not(.solid) .nav > ul > li > a:hover{color:#fff}
body.dark-top .hdr:not(.solid) .nav > ul > li > a[aria-current="page"]{color:#ff6b7d}
body.dark-top .hdr:not(.solid) .burger span{background:#fff}

/* =========================================================================
   31. FOOTER — butonat dhe ikonat lexohen
   ========================================================================= */
.ftr-in{grid-template-columns:1fr;gap:40px}

.ftr-brand p{margin-top:14px;line-height:1.75;font-size:15px}
.ftr-cta{margin-top:22px;gap:10px}
.ftr .btn{color:inherit}
.ftr .btn-wa{background:var(--wa);color:#04331b!important;box-shadow:none}
.ftr .btn-wa svg{fill:#04331b}
.ftr .btn-wa:hover{background:#31e874;color:#04331b!important}
.ftr .btn-line{background:transparent;border-color:rgba(255,255,255,.26);color:#fff!important}
.ftr .btn-line svg{fill:#fff}
.ftr .btn-line:hover{background:#fff;border-color:#fff;color:var(--ink-0)!important}
.ftr .btn-line:hover svg{fill:var(--ink-0)}
.ftr-h{margin-bottom:14px}
.ftr ul{gap:9px}
.ftr li{font-size:14.8px;line-height:1.5}
@media (min-width:700px){ .ftr-in{grid-template-columns:1fr 1fr;gap:44px} }
@media (min-width:1000px){
  .ftr-in{grid-template-columns:1.35fr .9fr .75fr;gap:56px}
  .ftr{padding-top:76px}
}

/* =========================================================================
   32. Shirit i hollë garancie (në vend të bllokut të përsëritur)
   ========================================================================= */
.gstrip{background:var(--ink-1);color:#c3d4e6;padding:0}
.gstrip-in{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:center;
  padding:28px 0}
.gstrip-i{width:44px;height:44px;border-radius:50%;display:grid;place-content:center;
  background:rgba(201,21,42,.16);border:1px solid rgba(201,21,42,.38);flex:none}
.gstrip-i svg{width:21px;height:21px;fill:#ff6b7d}
.gstrip p{font-size:16px;line-height:1.55;max-width:74ch}
.gstrip strong{color:#fff;font-weight:800}
.gstrip .lnk{grid-column:2;color:#ff8a97}
@media (min-width:900px){
  .gstrip-in{grid-template-columns:auto 1fr auto;padding:32px 0}
  .gstrip .lnk{grid-column:3}
}

/* =========================================================================
   33. Faqet e shërbimeve — përmbajtja informuese
   ========================================================================= */
.svc-txt-in{display:grid;gap:36px}
.svc-body p{font-size:17.5px;line-height:1.72;max-width:64ch}
.svc-body p + p{margin-top:18px}
.svc-body .h2 + p{margin-top:20px}

.svc-side{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-2);
  padding:26px 24px;align-self:start}
.svc-side-t{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:14px}
.svc-side .tags{margin-bottom:18px}
.svc-side .tags li{background:#fff}
.svc-side-n{font-size:14.8px;line-height:1.6;color:var(--txt-2);
  padding-top:16px;border-top:1px dashed var(--line);margin-bottom:20px}
.svc-side .btn{width:100%}
@media (min-width:960px){
  .svc-txt-in{grid-template-columns:1.5fr .85fr;gap:64px;align-items:start}
  .svc-side{position:sticky;top:110px;padding:30px 28px}
}

.svc-two-in{display:grid;gap:40px}
.svc-two-in .h3{margin-bottom:20px}
.ticks{display:grid;gap:13px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  font-size:16.5px;line-height:1.6;color:var(--txt-2)}
.ticks svg{width:19px;height:19px;fill:var(--red);margin-top:4px}
@media (min-width:860px){ .svc-two-in{grid-template-columns:1fr 1fr;gap:64px} }

/* =========================================================================
   34. NDARJA E SEKSIONEVE TË ERRËTA
   Shkallë tonesh + vijë ndarëse aty ku dy sfonde të errëta takohen.
   ========================================================================= */
:root{
  --d-deep:#04090f;   /* më i thelli — footer */
  --d-1:#070f19;      /* baza */
  --d-2:#0b1826;      /* një hap më i çelët, me nuancë blu */
  --d-3:#050b13;      /* mes bazës dhe të thellit */
}

/* shkalla e toneve: asnjë dy seksione ngjitur me të njëjtën ngjyrë */
.hero{background:var(--d-3)}
.p-dark{background:var(--d-1)}
.since.dark{background:var(--d-2)}
.brands{background:var(--d-3)}
.gar{background:var(--d-2)}
.gstrip{background:var(--d-1)}
.cta{background:var(--d-3)}
.ftr{background:var(--d-deep)}
.phero{background:var(--d-1)}

/* vijë ndarëse: vetëm kur pas një blloku të errët vjen një tjetër i errët */
:is(.dark,.gar,.gstrip,.cta,.svc-main,.phero) + :is(.dark,.gar,.gstrip,.cta,.ftr){
  position:relative;
}
:is(.dark,.gar,.gstrip,.cta,.svc-main,.phero) + :is(.dark,.gar,.gstrip,.cta,.ftr)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.2) 20%,
    rgba(255,255,255,.2) 80%,
    rgba(255,255,255,0) 100%);
}
/* .cta e ka ::before të zënë nga shkëlqimi — ndarësen ia japim me border */
:is(.dark,.gar,.gstrip,.svc-main) + .cta{border-top:1px solid rgba(255,255,255,.12)}
:is(.dark,.gar,.gstrip,.svc-main) + .cta::before{background:radial-gradient(820px 520px at 50% -10%,
  rgba(201,21,42,.28), transparent 64%),radial-gradient(700px 480px at 100% 110%,
  rgba(29,68,120,.4), transparent 62%);top:auto;left:0;right:0;height:100%}
.cta + .ftr{border-top:1px solid rgba(255,255,255,.1)}
.cta + .ftr::before{display:none}

/* frymëmarrje shtesë aty ku dy blloqe të errëta janë njëri pas tjetrit */
:is(.dark,.gar,.gstrip,.svc-main,.phero) + :is(.dark,.brands){padding-top:clamp(72px,9vw,140px)}

/* numri fantazmë të mos përplaset me atë të bllokut fqinj */
.since-year{opacity:.9}
.since.dark .since-year{color:rgba(255,255,255,.028)}
.panel-ghost{opacity:.9}

/* dy seksione të çelëta njëri pas tjetrit: hije e hollë ndarëse */
.sec:not(.soft):not(.dark):not(.gar):not(.gstrip):not(.cta) + .sec:not(.soft):not(.dark):not(.gar):not(.gstrip):not(.cta){
  border-top:1px solid var(--line-2);
}

/* =========================================================================
   35. NËNMENU — desktop (dropdown) dhe celular (akordeon)
   ========================================================================= */

/* ---------- desktop ---------- */
.nav .has-dd{position:relative}
.nav .has-dd > a{display:inline-flex;align-items:center;gap:6px}
.nav .chev{display:inline-flex;transition:transform .28s var(--e)}
.nav .chev svg{width:15px;height:15px;fill:currentColor;display:block}
.nav .has-dd:hover .chev,.nav .has-dd:focus-within .chev{transform:rotate(180deg)}

.dd{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(520px,86vw);padding:14px 12px 10px;border-radius:var(--r-2);
  background:rgba(7,15,25,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--e),transform .28s var(--e),visibility .22s;
}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .has-dd:hover .dd,.nav .has-dd:focus-within .dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:2px}
.dd-grid a{display:block;padding:11px 14px;border-radius:var(--r);text-decoration:none;
  transition:background .18s,transform .18s var(--e)}
.dd-grid a:hover{background:rgba(255,255,255,.07);transform:translateX(3px)}
.dd-t{display:block;color:#e7eef6;font-weight:600;font-size:15px;line-height:1.35}
.dd-d{display:none}
.dd-grid a:hover .dd-t{color:#fff}
.dd-grid a{position:relative;padding-left:20px}
.dd-grid a::before{content:"";position:absolute;left:8px;top:50%;width:0;height:1.5px;
  background:var(--red);transform:translateY(-50%);transition:width .24s var(--e)}
.dd-grid a:hover::before{width:8px}
.dd-all{display:inline-flex;align-items:center;gap:10px;margin:12px 4px 2px;
  color:#ff8a97;font-weight:700;font-size:14.5px;text-decoration:none}
.dd-all i{width:20px;height:1.5px;background:currentColor;position:relative;transition:width .24s var(--e)}
.dd-all i::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.dd-all:hover i{width:30px}
@media (prefers-reduced-motion:reduce){ .dd{transition:none} }

/* ---------- celular ---------- */
.menu-nav > ul{display:grid;gap:2px}
.menu-nav > ul > li{border-bottom:1px solid rgba(255,255,255,.09)}
.menu-nav > ul > li > a,
.m-row > a{
  display:block;padding:16px 2px;font-size:clamp(26px,7vw,38px);font-weight:800;
  letter-spacing:-.035em;color:#fff;text-decoration:none;transition:color .2s;
}
.menu-nav a[aria-current="page"]{color:#ff8a97}
.menu-nav > ul > li > a:hover,.m-row > a:hover{color:#ff8a97}

.m-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.m-tog{flex:none;width:52px;height:52px;display:grid;place-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  transition:background .2s,border-color .2s,transform .3s var(--e)}
.m-tog svg{width:20px;height:20px;fill:#fff;transition:transform .32s var(--e)}
.m-tog[aria-expanded="true"]{background:var(--red);border-color:var(--red)}
.m-tog[aria-expanded="true"] svg{transform:rotate(180deg)}

.m-sub{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .36s var(--e),visibility 0s linear .36s}
.m-sub > ul{overflow:hidden;min-height:0}
.m-sub.open{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .36s var(--e),visibility 0s}
.m-sub li{border-top:1px solid rgba(255,255,255,.07)}
.m-sub li:first-child{border-top:0}
.m-sub a{display:block;padding:13px 2px 13px 18px;color:#b9cbdf;text-decoration:none;
  font-weight:600;font-size:16.5px;position:relative;transition:color .2s,padding-left .24s var(--e)}
.m-sub a::before{content:"";position:absolute;left:2px;top:50%;width:9px;height:2px;
  background:var(--red);transform:translateY(-50%);transition:width .24s var(--e)}
.m-sub a:hover{color:#fff;padding-left:26px}
.m-sub a:hover::before{width:16px}
.m-sub > ul{padding:4px 0 16px}

/* animimi i hyrjes së zërave */
.menu-nav > ul > li{opacity:0;transform:translateY(16px);
  transition:opacity .4s var(--e),transform .5s var(--e)}
.menu.open .menu-nav > ul > li{opacity:1;transform:none}
.menu.open .menu-nav > ul > li:nth-child(1){transition-delay:.06s}
.menu.open .menu-nav > ul > li:nth-child(2){transition-delay:.11s}
.menu.open .menu-nav > ul > li:nth-child(3){transition-delay:.16s}
.menu.open .menu-nav > ul > li:nth-child(4){transition-delay:.21s}
@media (prefers-reduced-motion:reduce){ .menu-nav > ul > li{opacity:1;transform:none} }

@media (min-width:820px){
  .menu-in{grid-template-columns:1fr;gap:44px;max-width:720px;padding-top:calc(var(--logo-h) + 62px)}
}