/* ================== THEME (MediaPixel) ================== */
:root{
  --brand:#2D46A1;    /* blu primare */
  --brand-2:#294A99;  /* blu sekondare */
  --accent:#7686C1;   /* blu e çelur për hover */
  --ink:#F2F3F5;      /* tekst i bardhë */
  --muted:#B2B2B2;
  --bg:#161732;
  --bg-2:#1C1D3F;
  --line:rgba(255,255,255,.10);

  --nav-surface: rgba(10, 11, 28, 0.82);
  --nav-solid:#0B0C22;
  --shadow-nav:0 8px 24px rgba(0,0,0,.28);
}

html,body{
  font-family:"Urbanist", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),var(--bg-2) 60%, #13143A);
  scroll-behavior:smooth;
}

a{ text-decoration:none; color:inherit }

/* ================== TYPOGRAFI – GLOBALE (vetëm madhësi teksti) ================== */
html { font-size: 16px; }
body { line-height: 1.6; }
@media (min-width: 768px){ html { font-size: 17px; } }
@media (min-width: 1200px){ html { font-size: 17.5px; } }

/* Hierarkia H1–H6 (defaults për faqe të ndryshme) */
h1,.h1{ font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); line-height:1.12; letter-spacing:-0.02em; }
h2,.h2{ font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem);  line-height:1.18; }
h3,.h3{ font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem); line-height:1.22; }
h4,.h4{ font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);  line-height:1.28; }
h5,.h5{ font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);  line-height:1.3; }
h6,.h6{ font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);   line-height:1.35; }

/* Tekst utilitar */
.lead{ font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem); line-height:1.55; }
.section-title{ font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem); line-height:1.18; }
.section-sub{ font-size: clamp(1rem, 0.95rem + 0.5vw, 1.15rem); line-height:1.55; color: var(--muted); }

/* Tekste të përgjithshme */
p, li, label, input, select, textarea { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); }
small, .small { font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem); }

/* ================== NAVBAR ================== */
#mainNav {
  background: linear-gradient(180deg, var(--nav-surface) 0%, rgba(11,12,34,0.18) 60%, transparent);
  backdrop-filter: blur(10px);
  transition: background .35s ease, padding .25s ease, border-color .35s ease, box-shadow .25s ease;
  padding:.75rem 0;
  border-bottom:1px solid transparent;
}
#mainNav.scrolled {
  background: var(--nav-solid);
  border-color: var(--line);
  padding:.55rem 0;
  box-shadow: var(--shadow-nav);
}

/* ===== Brand (logo + tekst) ===== */
.navbar-brand { font-weight:700; font-size:1.25rem; letter-spacing:-.5px; }
.brand-logo { width:32px; height:32px; object-fit:contain; display:block; }
.brand-text { display:inline-flex; align-items:baseline; line-height:1; font-size:1.1rem; letter-spacing:.02em; }
.brand-media { text-transform:uppercase; font-weight:550; letter-spacing:.28em; color:#9FA8D4; }
.brand-pixel { text-transform:uppercase; font-weight:900; letter-spacing:.08em; margin-left:.35ch; color:var(--brand); }
@media (min-width: 992px){ .brand-text{ font-size:1.2rem } }
@media (max-width: 360px){ .brand-media{ letter-spacing:.18em } .brand-text{ font-size:1rem } }

/* ===== Links ===== */
.navbar-nav .nav-link {
  font-weight:600; font-size:.98rem;
  color:var(--ink) !important;
  opacity:.92;
  padding:.5rem .35rem;
  transition:color .2s ease, opacity .2s ease;
}
.navbar-nav .nav-link:hover {
  color:var(--accent) !important;
  opacity:1;
}

/* ===== Dropdown me hover ===== */
.navbar .dropdown-menu {
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  background: color-mix(in oklab, var(--nav-solid), #000 10%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;
  min-width:260px;
}
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu {
    opacity:1; visibility:visible; transform:none; display:block;
  }
}
.navbar .dropdown-menu.show { opacity:1; visibility:visible; transform:none; }
.navbar .dropdown-item {
  color: rgba(255,255,255,.88);
  font-weight:600;
  border-radius:.6rem;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: linear-gradient(90deg, var(--brand), transparent);
  color:#fff;
  padding-left:1.6rem;
}
.animate-fade{ animation:fadeIn .22s ease }
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ===== CTA Butoni Kontakt ===== */
.navbar-nav .btn,
.btn.btn-cta {
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:1px solid transparent;
  color:#fff !important;
  border-radius:999px;
  font-weight:700;
  transition:transform .18s ease, filter .2s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px rgba(45,70,161,.22);
  padding:.5rem 1rem;
}
.navbar-nav .btn:hover,
.btn-cta:hover {
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:0 12px 26px rgba(45,70,161,.28);
}
.navbar-nav .btn:active,
.btn-cta:active {
  transform:translateY(0) scale(.98);
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  #mainNav{ padding:.5rem 0 }
  .navbar-nav{ text-align:center; padding:.8rem 0 }
  .navbar-nav .nav-link{ padding:.6rem .25rem }
  .navbar-nav .btn{ margin-top:.25rem }
}

/* ===== Fokus i dukshëm ===== */
:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
  border-radius:.25rem;
}

/* ===== Offset për fixed nav ===== */
section[id]{ scroll-margin-top: 88px }
@media (min-width: 992px){ section[id]{ scroll-margin-top: 96px } }

/* ===== Skip link ===== */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:1080;
  background:var(--nav-solid); color:var(--ink);
  padding:.5rem .75rem; border-radius:.5rem; box-shadow:var(--shadow-nav);
}


.dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(90deg, var(--brand), transparent) !important;
  color: #fff !important;
}



/* ================== HERO (UPDATED) ================== */
.hero-cover{
  position:relative;
  min-height: min(100vh, 900px);
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  overflow:hidden;
  padding-top: clamp(72px, 9vh, 112px);
}
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: saturate(1.02) contrast(1.02) brightness(.96);
  transform: scale(1.02);
  z-index:0;
}
.hero-cover .overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(22,23,50,.55) 0%, rgba(22,23,50,.85) 60%, rgba(22,23,50,.95) 100%),
    linear-gradient(180deg, rgba(22,23,50,.70) 0%, rgba(28,29,63,.88) 100%);
  pointer-events:none;
}
.hero-cover .container{ position:relative; z-index:2 }

/* Headline */
.hero-cover .headline{ line-height:1.18; margin-bottom: clamp(.5rem, 1.2vh, 1rem) }
.hero-cover .headline .title-line{
  font-size: clamp(1.6rem, 2.8vw + 1rem, 3rem);
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* Brand në headline */
.headline .brand-inline{ display:inline-flex; align-items:center; gap:.6rem; line-height:1 }
.brand-logo-hero{
  width: clamp(42px, 5vw, 56px);
  height: clamp(42px, 5vw, 56px);
  object-fit:contain; flex:0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.headline .brand-text{ display:inline-flex; align-items:baseline }
.headline .word-media{
  text-transform:uppercase; font-weight:550; letter-spacing:.28em; color:#9FA8D4;
  font-size: clamp(1.05rem, 1.3vw + .65rem, 1.8rem);
}
.headline .word-pixel{
  text-transform:uppercase; font-weight:900; letter-spacing:.08em; margin-left:.35ch; color:var(--brand);
  font-size: clamp(1.05rem, 1.3vw + .65rem, 1.9rem);
}

/* Lead text */
.hero-lead{
  max-width: 720px;
  margin-left:auto; margin-right:auto;
  font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
  color: rgba(255,255,255,.92);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* (ruaj CTA te Hero; do uniformizohen më poshtë) */
.cta-wrap{ gap: clamp(.5rem, 1.2vw, 1rem) }

/* Scroll cue */
.scroll-cue{
  display:inline-flex; justify-content:center; align-items:center;
  width:48px; height:48px;
  margin-top: clamp(1rem, 2.5vh, 2rem);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  color:#fff; text-decoration:none;
  transition: border-color .3s, transform .3s;
  position:relative; overflow:hidden;
}
.scroll-cue:hover{ border-color: var(--brand); transform:translateY(2px) scale(1.05) }
.scroll-cue .chevron{
  width:12px; height:12px;
  border-bottom:2px solid currentColor; border-right:2px solid currentColor;
  transform: rotate(45deg); animation: cue-bounce 1.6s infinite;
}
@keyframes cue-bounce{
  0%,20%,50%,80%,100%{ transform: translateY(0) rotate(45deg) }
  40%{ transform: translateY(4px) rotate(45deg) }
  60%{ transform: translateY(2px) rotate(45deg) }
}
.scroll-cue::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.2) 0%, transparent 70%);
  opacity:0; transition:opacity .3s;
}
.scroll-cue:hover::before{ opacity:.8 }

@media (max-width: 420px){
  .headline .word-media{ letter-spacing:.18em }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ transform:none }
  *{ transition:none !important; animation:none !important }
}
 

/* ===== HERO (Sekondar) ===== */
.hero-about {
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  position: relative;
  z-index: 1;
}

/* Gradient text (highlight) */
.text-gradient {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shape dekorativ në sfond */
.hero-shape {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 140%;
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(
    60% 60% at 50% 20%,
    color-mix(in oklab, var(--brand), transparent 60%) 0%,
    transparent 70%
  );
  opacity: .15;
  z-index: 0;
  pointer-events: none;
}

/* Badge me gradient */
.bg-gradient {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-about {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
  .hero-about h1 {
    font-size: 1.9rem;
  }
}




/* ================== SERVICES ================== */
#services {
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
}

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.section-sub {
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,.85);
}

/* ====== Service Card ====== */
.service-card {
  background: color-mix(in oklab, var(--card), #000 10%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) inset;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 12px 32px rgba(0,0,0,.35) inset, 0 0 18px rgba(255,255,255,.08);
}

/* ====== Emoji (gradient + glow) ====== */
.svc-emoji {
  --size: 3.5rem;
  font-size: 2.8rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;

  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in oklab, var(--brand), white 20%) 0%,
    color-mix(in oklab, var(--accent), var(--brand) 40%) 100%
  );
  box-shadow:
    0 0 0 3px rgba(255,255,255,.07),
    0 0 16px color-mix(in oklab, var(--brand) 40%, transparent);
  transition: transform .35s ease, box-shadow .4s ease, filter .3s ease;
}

.service-card:hover .svc-emoji {
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.1),
    0 0 28px color-mix(in oklab, var(--accent) 50%, transparent),
    0 0 60px color-mix(in oklab, var(--brand) 35%, transparent);
  filter: brightness(1.15) saturate(1.15);
}

/* ====== Tekstet ====== */
.svc-title {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.svc-lead {
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .5rem;
}

.svc-list {
  font-size: .92rem;
  margin-bottom: 1rem;
  color: rgba(255,255,255,.9);
}

/* ====== Butonat ====== */
.service-card .btn {
  margin-top: auto;
  border-radius: 999px;
  font-weight: 600;
  padding: .45rem 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.service-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* ====== Responsive ====== */
@media (max-width: 991px) {
  .svc-emoji {
    --size: 3rem;
    font-size: 2.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .svc-emoji, .service-card .btn {
    transition: none !important;
  }
}



/* ================== PRICING ================== */
#pricing{
  position:relative;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  padding:6rem 0;
}
#pricing .section-title{ text-align:center; font-weight:800; margin-bottom:.5rem }
#pricing .section-sub{ text-align:center; max-width:720px; margin:0 auto 2.25rem; color:var(--muted) }
.pricing-controls{ margin-bottom:1rem }

/* Tabs (nav-pills) */
#pricing .nav-pills{ gap:.5rem }
#pricing .nav-pills .nav-link{
  color:#cbd5e1; border:1px solid var(--line); background:rgba(255,255,255,.03);
  border-radius:999px; font-weight:600; padding:.55rem 1rem; transition:all .25s ease;
}
#pricing .nav-pills .nav-link:hover{ color:#fff; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06) }
#pricing .nav-pills .nav-link.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px rgba(45,70,161,.35);
}

/* Billing toggle */
.billing-toggle{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  padding:.35rem .6rem; border-radius:999px;
}
.billing-toggle .label{ color:var(--muted); font-weight:600; font-size:.9rem }
.billing-toggle .save{
  margin-left:.25rem; font-size:.75rem; padding:.1rem .4rem; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff;
}

/* Switch */
.switch{
  width:48px; height:28px; border-radius:999px; background:#12143B;
  border:1px solid var(--line); position:relative; padding:0; cursor:pointer;
}
.switch .knob{
  position:absolute; width:22px; height:22px; border-radius:50%;
  left:3px; top:50%; transform:translateY(-50%);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 10px rgba(45,70,161,.35);
  transition:left .25s ease, background .25s ease;
}
.switch.active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)) }
.switch.active .knob{ left:23px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.35) }

/* Kartat e çmimeve */
.price-card{
  position:relative;
  background:linear-gradient(180deg,#181B44,var(--card));
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.25rem;
  padding:1.75rem;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;
}
.price-card h5{ font-weight:800; letter-spacing:.2px; margin-bottom:.25rem }
.price-card p{ color:var(--muted) }

/* Çmimi */
.price-card .price{
  font-size:2.15rem; font-weight:800; line-height:1; margin:.35rem 0 1rem;
  background:linear-gradient(90deg,var(--ink), #dbe0ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Lista */
.price-card ul{ margin:1rem 0 1.25rem; padding-left:1.1rem }
.price-card ul li{
  margin:.4rem 0; color:#c8ceda; position:relative; list-style:none; padding-left:1.2rem;
}
.price-card ul li::before{
  content:"✔"; position:absolute; left:0; top:0; transform:translateY(2px); font-size:.9rem;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Butonat brenda kartave (do uniformizohen me seksionin e unifikuar poshtë) */
.price-card .btn{ font-weight:700 }
.price-card .btn:hover{ transform:translateY(-2px) }

/* Hover i kartës */
.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.14);
}

/* Featured + Ribbon */
.price-card.featured{ border-color:transparent }
.price-card.featured::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; z-index:0;
}
.price-card.featured > *{ position:relative; z-index:1 }
.price-card .ribbon{
  position:absolute; top:12px; right:12px; z-index:2;
  padding:.25rem .6rem; font-size:.75rem; font-weight:700; color:#fff; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px rgba(45,70,161,.35);
}

/* Animim i çmimit */
.price.bump{ animation:pricePop .45s ease }
@keyframes pricePop{
  0%{ transform:scale(1) } 40%{ transform:scale(1.06) } 100%{ transform:scale(1) }
}

/* Responsivitet */
@media (max-width: 991px){
  #pricing{ padding:5rem 0 }
  .price-card{ padding:1.5rem }
  .price-card .price{ font-size:1.9rem }
}
#pricing .nav-link:focus-visible,
.price-card .btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 75%, white);
  outline-offset:2px;
}

/* Shënim faturimi */
.billing-note{ margin-top:.15rem; opacity:.9 }

/* CTA në fund të Pricing */
.btn-all-pricing{
  border-radius:50px; font-weight:700; box-shadow:0 10px 24px rgba(45,70,161,.28);
}
.btn-all-pricing:hover{
  transform: translateY(-2px); filter: saturate(1.06);
  box-shadow:0 14px 30px rgba(45,70,161,.36);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}


/* ================== CTA BUTTONS — UNIFIED (OVERRIDE GJITHÇKA) ================== */
/* Primar (gradient blu) — identik kudo */
.btn.btn-primary{
  --btn-radius: 50px;
  --btn-pad-y: .5rem;
  --btn-pad-x: 1.25rem;

  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-weight: 700 !important;
  color: #fff !important;

  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  box-shadow: 0 10px 24px rgba(45,70,161,.28) !important;

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn.btn-primary:hover{
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 14px 30px rgba(45,70,161,.36) !important;
}
.btn.btn-primary:active{
  transform: translateY(0) scale(.98);
  box-shadow: 0 8px 18px rgba(45,70,161,.28) !important;
}

/* Outline i hapur — identik kudo */
.btn.btn-outline-light{
  --btn-radius: 50px;
  --btn-pad-y: .5rem;
  --btn-pad-x: 1.25rem;

  border-radius: var(--btn-radius) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;

  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.btn.btn-outline-light:hover{
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.35) !important;
  transform: translateY(-2px);
}

/* Siguron që edhe brenda kartave / seksioneve të jenë identikë */
#pricing .price-card .btn,
#work .btn,
#services .btn,
header.hero .btn{
  border-radius: 50px !important;
  font-weight: 700 !important;
}

/* Opsionale: kur përdoret .w-100, ruaj padding-un */
.btn.w-100{ padding: .5rem 1.25rem !important }


/* ================== ABOUT / FAQ (UPDATED) ================== */
#about{
  position:relative;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  padding:6rem 0;
}

/* Titujt */
#about .section-title{
  font-weight:800; margin-bottom:.25rem;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.3rem);
  letter-spacing:-.02em;
}
#about .section-sub{ color:var(--muted); margin-bottom:1.25rem }

/* ------------------ Bullet points (arsyet) ------------------ */
#about .about-list{
  margin:0; padding:0;
  display:grid;
  grid-template-columns: 1fr;
  gap:.5rem;
}
#about .about-list li{
  display:grid;
  grid-template-columns: 14px 22px 1fr; /* aksenti majtas + ikonë + tekst */
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:#cfd5e6;
  padding:.65rem .8rem;
  border-radius:12px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
#about .about-list li .bullet{
  width:14px; height:100%;
  border-radius:6px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  opacity:.8;
}
#about .about-list li i{
  color:var(--accent);
  font-size:1.05rem;
}
#about .about-list li:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

/* ------------------ Accordion (FAQ) ------------------ */
#about .accordion{
  --acc-bg: rgba(255,255,255,.03);
  --acc-border: var(--line);
  --acc-hover: rgba(255,255,255,.06);
}
#about .accordion-item{
  background:var(--acc-bg);
  border:1px solid var(--acc-border);
  border-radius:1rem;
  overflow:hidden;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
#about .accordion-item + .accordion-item{ margin-top:1rem }

#about .accordion-item:hover{
  border-color:rgba(255,255,255,.14);
  background:var(--acc-hover);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
#about .accordion-button{
  background:transparent;
  color:var(--ink);
  padding:1rem 1.1rem;
  font-weight:700;
  letter-spacing:.1px;
  box-shadow:none!important;
}
#about .accordion-button:focus{
  outline:2px solid color-mix(in oklab, var(--brand) 70%, white);
  outline-offset:2px;
  box-shadow:none;
}
#about .accordion-button:not(.collapsed){
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#about .accordion-button::after{
  filter: invert(1) opacity(.85);
  transition: transform .25s ease, filter .25s ease;
}
#about .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg);
  filter: invert(1) opacity(1);
}
#about .accordion-body{
  color:#c9cfde;
  padding:1rem 1.1rem 1.1rem;
}
#about .accordion .accordion-collapse{ background:transparent; border-top:0 }

/* ------------------ Responsivitet ------------------ */
@media (min-width: 992px){
  #about .about-list{ grid-template-columns: 1fr 1fr } /* 2 kolona në desktop */
}
@media (max-width: 991px){
  #about{ padding:5rem 0 }
  #about .section-sub{ margin-bottom:1rem }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  #about *{ transition:none!important; animation:none!important }
}

 /* Shtesa të lehta stilimi për këtë faqe */
    .hero-about{position:relative; padding-top:7rem; padding-bottom:4rem; background:
      radial-gradient(1200px 800px at 0% -10%, rgba(108,92,231,.18), transparent 60%),
      radial-gradient(900px 600px at 100% 0%, rgba(0,210,255,.14), transparent 55%);
      border-bottom:1px solid var(--border, rgba(255,255,255,.08));}
    .hero-about .badge{background: rgba(255,255,255,.06); border:1px solid var(--border, rgba(255,255,255,.12));}
    .val-card,.team-card,.step-card{background: var(--card, rgba(255,255,255,.03)); border:1px solid var(--border, rgba(255,255,255,.08)); border-radius:18px}
    .val-card{height:100%; padding:18px}
    .team-card{height:100%; overflow:hidden}
    .team-card .avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.06), transparent); display:flex; align-items:center; justify-content:center; font-weight:700}
    .team-card .role{color:var(--muted, rgba(255,255,255,.7))}
    .step-card{height:100%; padding:18px}
    .brandwall{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    @media (min-width:576px){ .brandwall{ grid-template-columns:repeat(3,1fr);} }
    @media (min-width:992px){ .brandwall{ grid-template-columns:repeat(6,1fr);} }
    .brandwall .cell{ background:var(--card, rgba(255,255,255,.03)); border:1px dashed var(--border, rgba(255,255,255,.08)); border-radius:14px; padding:18px; display:flex; align-items:center; justify-content:center; min-height:72px; opacity:.9 }
    .brandwall .cell img{ max-height:45px; filter: none; contrasts1.1) brightness(1.1); opacity:1 !important }
    .timeline{position:relative}
    .timeline::before{content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:var(--border, rgba(255,255,255,.12))}
    .t-item{position:relative; padding-left:40px; margin-bottom:18px}
    .t-item::before{content:""; position:absolute; left:6px; top:.4rem; width:14px; height:14px; border-radius:50%; background:linear-gradient(180deg, #6c5ce7, #00d2ff); box-shadow:0 0 0 3px rgba(108,92,231,.25)}
  
    /* Opsionale: uniformizim i fotove dhe polish i kartave */
.team-img{
  aspect-ratio: 1/1;       /* katrore, s’deformohet */
  object-fit: cover;        /* crop i bukur */
  border-radius: 1rem;      /* pak më “soft” brenda kartës */
}
#team .card{
  transition: transform .2s ease, border-color .2s ease;
  border-radius: 1rem;
}
#team .card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35);
}

    
    
/* ================== TESTIMONIALS — Marquee Dual ================== */
:root{
  --pm-bg: #0b0c16;
  --pm-card: #0f1022;
  --pm-ink: #eef0ff;
  --pm-muted: #b7bbd6;
  --pm-line: rgba(255,255,255,.10);
  --pm-ring1: #7c8aff;
  --pm-ring2: #34d2ff;
  --pm-accent1: #6ee7f3;
  --pm-accent2: #7c4dff;
  --pm-glow: rgba(124,138,255,.25);
  --pm-radius: 18px;
  --pm-gap: 22px;
}

#pm-testis{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,77,255,.18), transparent 55%),
    radial-gradient(900px 500px at 10% 110%, rgba(52,210,255,.16), transparent 60%),
    var(--pm-bg);
  padding: clamp(56px, 7vw, 96px) 0;
  color: var(--pm-ink);
}

#pm-testis::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}

#pm-testis .pm-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

#pm-testis .pm-head{
  text-align:center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

#pm-testis .pm-head h2{
  margin:0 0 10px 0;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  background: linear-gradient(90deg, #fff, #cfd5ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

#pm-testis .pm-head p{
  margin:0 auto;
  max-width: 680px;
  color: var(--pm-muted);
  font-size: clamp(.98rem, 1.4vw, 1.05rem);
}

#pm-testis .pm-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--pm-gap);
}

@media (max-width: 992px){
  #pm-testis .pm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pm-testis .pm-grid{ grid-template-columns: 1fr; }
}

#pm-testis .pm-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)) , var(--pm-card);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  overflow: hidden;
}

#pm-testis .pm-card::after{
  content:"”";
  position:absolute;
  right: -8px;
  top: -22px;
  font-size: 120px;
  line-height: .8;
  font-weight: 900;
  color: rgba(255,255,255,.05);
  pointer-events:none;
}

#pm-testis .pm-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  background:
    radial-gradient(600px 240px at 70% -10%, rgba(124,77,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
    var(--pm-card);
}

#pm-testis .pm-quote{
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.6;
  color: var(--pm-ink);
}

#pm-testis .pm-meta{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

#pm-testis .pm-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; color: #fff;
  background:
    conic-gradient(from 0deg, var(--pm-ring1), var(--pm-ring2), var(--pm-ring1));
  position: relative;
}

#pm-testis .pm-avatar::before{
  content:"";
  position:absolute; inset:3px;
  background: #0e1024;
  border-radius: 50%;
}

#pm-testis .pm-avatar span{
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
}

#pm-testis .pm-who{
  display: flex; flex-direction: column; line-height: 1.2;
}

#pm-testis .pm-who strong{
  font-size: .98rem; font-weight: 800;
}

#pm-testis .pm-who span{
  font-size: .88rem; color: var(--pm-muted);
}

#pm-testis .pm-stars{
  font-size: .95rem;
  letter-spacing: 2px;
  color: #ffd76a;
  text-shadow: 0 0 18px var(--pm-glow);
}

#pm-testis .pm-card:focus-within{
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pm-ring2) 70%, white);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  #pm-testis .pm-card{ transition: none; }
  #pm-testis .pm-card:hover{ transform: none; }
}

/* ================== CONTACT (UPDATED) ================== */
#contact{
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  padding:6rem 0;
  position:relative;
}
#contact .section-title{ font-weight:800; margin-bottom:.25rem }
#contact .section-sub{ color:var(--muted); margin-bottom:1.25rem }

#contact::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(50% 50% at 20% 30%, color-mix(in oklab,var(--brand) 28%, transparent), transparent 60%),
    radial-gradient(45% 45% at 85% 10%, color-mix(in oklab,var(--accent) 22%, transparent), transparent 60%);
  filter: blur(70px); z-index:0; opacity:.6;
}
#contact .container{ position:relative; z-index:1 }

#contact form.needs-validation{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
#contact .form-label{ font-weight:700; color:var(--ink) }

#contact .form-control,
#contact .form-select{
  background:#12143B;
  border:1px solid rgba(255,255,255,.10);
  color:var(--ink);
  border-radius:.8rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
}
#contact .form-control::placeholder{ color:#98a0ba }
#contact .form-control:hover, #contact .form-select:hover{ border-color:rgba(255,255,255,.18) }
#contact .form-control:focus, #contact .form-select:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 .25rem color-mix(in oklab, var(--brand) 22%, transparent);
  background:#141748;
}

#contact .form-control.is-valid,
#contact .form-select.is-valid,
#contact .was-validated .form-control:valid,
#contact .was-validated .form-select:valid{
  border-color:#22c55e; box-shadow:0 0 0 .2rem rgba(34,197,94,.18);
}
#contact .form-control.is-invalid,
#contact .form-select.is-invalid,
#contact .was-validated .form-control:invalid,
#contact .was-validated .form-select:invalid{
  border-color:#ef4444; box-shadow:0 0 0 .2rem rgba(239,68,68,.18);
}
#contact .invalid-feedback, #contact .valid-feedback{ margin-top:.35rem }

/* Butoni (përdor CTA-un tënd të unifikuar) */
#contact .btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:0; color:#fff; border-radius:12px;
  font-weight:800;
  box-shadow:0 10px 22px rgba(45,70,161,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#contact .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(45,70,161,.45);
  filter:saturate(1.05);
}
#contact .btn-primary:active{ transform:translateY(0) scale(.99) }

/* Spinner state në buton */
#contact .btn-primary .btn-spinner{ display:inline-flex; align-items:center }
#contact .btn-primary.sending .btn-label{ display:none }
#contact .btn-primary.sending .btn-spinner{ display:inline-flex }

#contact .col-lg-6 > .h-100{
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  border-radius:1rem;
}
#contact .col-lg-6 > .h-100 h5,
#contact .col-lg-6 > .h-100 h6{ font-weight:800 }
#contact .col-lg-6 > .h-100 ul li{
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .4rem; border-radius:.6rem;
  transition:background .2s ease, transform .12s ease;
}
#contact .col-lg-6 > .h-100 ul li:hover{
  background:rgba(255,255,255,.05); transform:translateY(-2px);
}
#contact .col-lg-6 > .h-100 ul li .bi{ color:var(--accent) }
#contact hr{ border-color:rgba(255,255,255,.12) }

@media (max-width: 991px){
  #contact{ padding:5rem 0 }
  #contact form.needs-validation{ padding:1rem }
}
@media (prefers-reduced-motion: reduce){
  #contact *{ transition:none!important; animation:none!important }
}

/* ================== FOOTER (NO-SUBSCRIBE) ================== */
.footer{
  position:relative;
  background:linear-gradient(180deg, var(--bg-2), #0d1028 80%);
  border-top:1px solid var(--line);
}
.footer .ft-title{
  font-weight:800; margin-bottom:.6rem; letter-spacing:.2px;
}
.footer .ft-links li + li{ margin-top:.35rem }
.footer .ft-links a{
  color:#cbd5e1; text-decoration:none; transition:color .2s ease, transform .2s ease;
}
.footer .ft-links a:hover{
  color:#fff; transform:translateX(2px);
}

/* Socials */
.footer .social{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:#fff;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.footer .social:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Link i zbehtë */
.footer .link-muted{ color:#cbd5e1; text-decoration:none }
.footer .link-muted:hover{ color:#fff }

/* Gradient text për ikonat e kontaktit */
.text-gradient{
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Divider */
.footer hr{ border-color:rgba(255,255,255,.12) }

/* Focus visible */
.footer a:focus-visible,
.footer button:focus-visible,
.footer input:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 75%, white);
  outline-offset:2px;
  border-radius:.35rem;
}

/* Responsive (nuk na duhet më input-group override) */
@media (max-width: 991px){
  .footer .btn{ width:auto } /* lër butonat normalë në rresht */
}

/* Parandalim overflow dekorativ (po e lenë siç e kishe) */
html, body{ overflow-x:hidden; }

/* ================== TIPOGRAFI – NAVBAR & FOOTER OVERRIDES (fluid) ================== */
/* Navbar brand + links (fluid, override .98rem kur ka vend) */
.navbar .navbar-brand .brand-text{
  font-size: clamp(1rem, 0.95rem + 0.6vw, 1.25rem);
  line-height:1.1;
}
.navbar .nav-link,
.navbar .btn-cta{
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.05rem);
  line-height:1.2;
}

/* Footer titles/links fluid për koherencë */
.footer .ft-title{
  font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1.1rem);
  line-height:1.25;
}
.footer .ft-links li,
.footer .ft-links a{
  font-size: clamp(0.9rem, 0.86rem + 0.35vw, 1rem);
  line-height:1.6;
}
.footer .brand-text{
  font-size: clamp(1rem, 0.95rem + 0.6vw, 1.2rem);
  line-height:1.1;
  letter-spacing: .02em;
  font-weight: 800;
}
.footer .small{ font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem); }
.footer .social{ font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.25rem); }

/* ================== TIPOGRAFI – FAQ/STEP/TEAM (fluid) ================== */
.step-card .fw-bold{ font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem); }
.step-card .text-secondary{ font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem); }
.team-card .role,.team-card .badge{ font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.85rem); }

/* ================== TIPOGRAFI – HERO SEKONDAR (shërbimet) ================== */
.hero-about .badge{ font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.9rem); }
.hero-about h1{ font-size: clamp(2rem, 1.5rem + 3vw, 3rem); line-height:1.12; letter-spacing:-.02em; }
.hero-about .lead{ font-size: clamp(1rem, 0.95rem + 0.5vw, 1.2rem); line-height:1.55; }

/* ================== TIPOGRAFI – ACCORDION/FAQ ================== */
.accordion-button{ font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem); }
.accordion-body{ font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); }

/* ================== TIPOGRAFI – BUTTONS (lexueshmëri) ================== */
.btn{ font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); }
.btn-sm{ font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem); }

/* ================== MICRO-TWEAK ================== */
@media (max-width: 360px){
  h1, .hero-cover .headline { letter-spacing: -0.015em; }
  .navbar .navbar-brand .brand-text,
  .footer .brand-text { letter-spacing: 0.015em; }
}


/* === Back to Top (modern style) === */
.btn-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2000;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-top .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Kur është e dukshme */
.btn-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Efekte gjatë hover-it */
.btn-top:hover {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
}

.btn-top:hover .icon {
  transform: translateY(-2px);
}