/* Ermed — pamja moderne e faqeve të brendshme.
   Vlen vetëm kur <html> ka klasën .modern: te ver2.ermed.al vendoset në ndërtim,
   te konceptet/artifact-i nga koka e faqes kur vizitori vjen nga moderne.html. */

/* ---------- header i bardhë mbi hero-n e errët ---------- */
html.modern header.site:not(.sc) nav.main a,
html.modern header.site:not(.sc) .htel { color: #fff; }
html.modern header.site:not(.sc) .lg-dark { display: none; }
html.modern header.site:not(.sc) .lg-light { display: block; }
html.modern header.site:not(.sc) .burger { background: transparent; border-color: rgba(255,255,255,.35); }
html.modern header.site:not(.sc) .burger span { background: #fff; }
html.modern header.site:not(.sc) .btn { background: var(--lime); border-color: var(--lime); color: var(--ink); }
html.modern body.nav-open header.site .lg-dark { display: block; }
html.modern body.nav-open header.site .lg-light { display: none; }
html.modern body.nav-open header.site { background: #fff; }
html.modern body.nav-open header.site .burger { background: #fff; border-color: var(--line); }
html.modern body.nav-open header.site .burger span { background: var(--ink); }
html.modern body.nav-open header.site nav.main a, html.modern body.nav-open header.site .htel { color: var(--ink); }

/* ---------- hero i faqes: grafit + foto + titull gjigant ---------- */
html.modern .phero {
  position: relative; overflow: hidden;
  background: #111613; color: #fff; border: 0;
  min-height: min(78svh, 780px);
  display: flex; align-items: flex-end;
  padding: 160px 0 clamp(56px, 7vw, 100px);
}
html.modern .phbg { display: block; position: absolute; inset: 0; }
html.modern .phbg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.08); will-change: transform; }
html.modern .phbg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(14,19,16,.95) 0%, rgba(14,19,16,.5) 38%, rgba(14,19,16,.12) 70%),
    linear-gradient(90deg, rgba(14,19,16,.84) 0%, rgba(14,19,16,.6) 52%, rgba(14,19,16,.3) 100%);
}
html.modern .phero .wrap { position: relative; z-index: 2; width: 100%; }
html.modern .phero .label { color: var(--lime); }
html.modern .phero .label::before { background: var(--lime); }
html.modern .phero .d2 {
  font-size: clamp(48px, 8.2vw, 124px); font-stretch: 72%; font-weight: 760;
  line-height: .92; color: #fff; max-width: 15ch;
}
html.modern .phero .d2 em { color: var(--lime); }
html.modern .phero .d2 .hw { display: inline-block; overflow: hidden; vertical-align: top; }
html.modern .phero .d2 .hw > span { display: inline-block; }
html.modern .phero .lead { color: rgba(255,255,255,.8); max-width: 52ch; margin-top: 28px; }

/* ---------- tipografia e seksioneve: më e madhe dhe më e ngushtë ---------- */
html.modern .h2 { font-size: clamp(38px, 5.2vw, 80px); font-stretch: 72%; font-weight: 740; line-height: .96; }
html.modern .big { font-size: clamp(24px, 2.4vw, 36px); font-stretch: 78%; line-height: 1.22; max-width: 26ch; }
html.modern .bhead .h2s, html.modern .ctain .h2s { font-stretch: 72%; font-weight: 740; }
html.modern .bhead .h2s { font-size: clamp(30px, 3.6vw, 54px); }
html.modern section.pad-s { padding-block: clamp(90px, 10vw, 150px); }

/* ---------- fotot ---------- */
html.modern .ph { border-radius: 22px; }
html.modern .ph img { transition: transform .9s cubic-bezier(.2,.6,.2,1); }
html.modern .ph:hover img { transform: scale(1.04); }

/* ---------- brezi i statistikave: grafit, numra të mëdhenj ---------- */
html.modern .band { background: #111613; }
html.modern .band::before { background: radial-gradient(closest-side, rgba(118,184,16,.12), transparent 70%); }
html.modern .band .stats .st b { font-size: clamp(44px, 5.4vw, 84px); font-stretch: 72%; }

/* ---------- kartat e vlerave / portofolit: numra gjigantë me kontur ---------- */
html.modern .val { padding: 40px 34px 42px; transition: transform .35s, box-shadow .35s; }
html.modern .val:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -32px rgba(12,61,32,.4); }
html.modern .val .n { font-size: clamp(56px, 6vw, 92px); font-stretch: 72%; -webkit-text-stroke: 1.5px var(--green-deep); margin-bottom: 26px; }

/* ---------- produktet ---------- */
html.modern .pcard { border-radius: 18px; }
html.modern .pcard img { transition: transform .7s cubic-bezier(.2,.6,.2,1); }
html.modern .pcard:hover img { transform: scale(1.06); }
html.modern .lgrid .li { border-radius: 14px; transition: border-color .25s, transform .25s; }
html.modern .lgrid .li:hover { border-color: var(--green); transform: translateY(-2px); }

/* ---------- partnerët ---------- */
html.modern .plogos { border-radius: 22px; overflow: hidden; }

/* ---------- CTA në fund të faqes: deklaratë e madhe ---------- */
html.modern .ctain { background: #fff; border-top: 1px solid var(--line); border-bottom: 0; padding-block: clamp(90px, 10vw, 150px); }
html.modern .ctain .h2s { font-size: clamp(34px, 4.6vw, 72px); line-height: 1; max-width: 18ch; }

/* ---------- kontakti ---------- */
html.modern .kinfo a, html.modern .kinfo div { font-size: clamp(22px, 2.6vw, 40px); font-stretch: 74%; }
html.modern .form.boxed { border-radius: 22px; }

/* ---------- celular ---------- */
@media (max-width: 980px) {
  html.modern .phero { min-height: 64svh; }
}
@media (max-width: 620px) {
  html.modern .phero { min-height: 70svh; padding-top: 120px; }
  html.modern .phero .d2 { font-size: clamp(40px, 12.4vw, 64px); }
  html.modern .h2 { font-size: clamp(34px, 10.4vw, 48px); }
  html.modern .kinfo a, html.modern .kinfo div { font-size: clamp(20px, 6.2vw, 26px); }
}