/* DESKTOP-STRONA-GLOWNA.CSS v395 — strona główna desktop, przepisana i skonsolidowana od nowa. */

@media screen and (min-width:1200px) {
  :root {
    --d-home-container:var(--d-container,1200px);
    --d-home-panel-width:calc(var(--d-home-container) + 2px);
    --d-home-intro-height:218px;
    --d-home-intro-bottom-gap:19px;

    --d-home-dmx-height:191px;
    --d-home-areas-height:108px;
    --d-home-areas-overlap:60px;
    --d-home-merged-height:calc(var(--d-home-dmx-height) + var(--d-home-areas-height) - var(--d-home-areas-overlap));
    --d-home-merged-bottom-gap:15px;

    --d-home-card-width:390px;
    --d-home-card-gap:15px;
    --d-home-card-height:298px;
    --d-home-card-side-padding:24px;
    --d-home-card-content-width:calc(var(--d-home-card-width) - (var(--d-home-card-side-padding) * 2));
    --d-home-card-image-max-width:calc((var(--d-home-card-content-width) / 2) + 12px);

    --d-home-more-width:273px;
    --d-home-more-height:46px;

    --d-home-panel-bg:linear-gradient(145deg, rgba(13,28,45,.965), rgba(5,11,20,.985));
    --d-home-hero-bg:radial-gradient(circle at 50% 0%, rgba(47,140,255,.105), transparent 42%), linear-gradient(135deg, rgba(12,26,43,.97), rgba(4,10,18,.99));
    --d-home-border:rgba(105,162,220,.31);
    --d-home-text:#f4f8ff;
    --d-home-muted:#b5c6d8;
    --d-home-blue:#168bff;
    --d-home-radius:var(--d-page-radius,18px);
    --d-home-title-underline-gap:var(--d-page-radius-small,10px);
    --d-home-title-underline-height:2px;
    --d-home-font:var(--d-page-font, Tahoma, Geneva, sans-serif);
    --d-home-shadow:var(--d-page-shadow, none);
  }

  body.home-modern main {
    margin:0;
    padding:0;
    background:transparent;
    color:var(--d-home-text);
    font-family:var(--d-home-font);
  }

  body.home-modern main *,
  body.home-modern main *::before,
  body.home-modern main *::after {
    box-sizing:border-box;
  }

  body.home-modern .seo-visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  body.home-modern .hero-webwave {
    margin:0;
    padding-top:var(--d-header-to-content-gap,24px);
    padding-bottom:0;
    background:transparent;
  }

  body.home-modern .hero-webwave > .container,
  body.home-modern .home-cards-section > .container {
    width:var(--d-home-container);
    margin:0 auto;
    padding:0;
  }

  /* Górny kafel z opisem. */
  body.home-modern .home-intro-panel {
    position:relative;
    width:var(--d-home-container);
    height:var(--d-home-intro-height);
    min-height:var(--d-home-intro-height);
    max-height:var(--d-home-intro-height);
    margin:0 auto var(--d-home-intro-bottom-gap);
    padding:26px 56px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid var(--d-home-border);
    border-radius:var(--d-home-radius);
    background:var(--d-home-hero-bg);
    box-shadow:var(--d-home-shadow);
    text-align:center;
  }

  body.home-modern .home-intro-panel h2 {
    position:relative;
    width:max-content;
    max-width:100%;
    margin:0 0 18px;
    padding:0 0 var(--d-home-title-underline-gap);
    color:var(--d-home-text);
    font-family:Tahoma,Geneva,sans-serif;
    font-size:29px;
    line-height:37px;
    font-weight:800;
    letter-spacing:-.55px;
    text-align:center;
    text-shadow:0 10px 26px rgba(0,0,0,.34);
    transform:translateY(-7px);
  }

  body.home-modern .home-intro-panel h2::after,
  body.home-modern .hero-panel .areas-title::after,
  body.home-modern .home-card h2::after {
    content:"";
    display:block;
    width:100%;
    height:var(--d-home-title-underline-height);
    background:linear-gradient(90deg, rgba(22,139,255,.96) 0%, rgba(110,196,255,1) 55%, rgba(22,139,255,.72) 100%);
    border-radius:99px;
    box-shadow:0 0 12px rgba(22,139,255,.18);
  }

  body.home-modern .home-intro-panel h2::after {
    margin-top:var(--d-home-title-underline-gap);
  }

  body.home-modern .home-intro-panel p {
    width:100%;
    max-width:980px;
    margin:0 0 7px;
    color:var(--d-home-muted);
    font-family:"Funnel Display",var(--d-home-font);
    font-size:16px;
    line-height:1.38;
    font-weight:400;
    text-align:center;
    transform:translateY(4px);
  }

  body.home-modern .home-intro-panel p:last-child {
    margin-bottom:0;
  }

  /* Scalony blok z lampami i sekcją usług. */
  body.home-modern .dmx-panel,
  body.home-modern .hero-panel {
    width:var(--d-home-panel-width);
    max-width:var(--d-home-panel-width);
    margin-left:auto;
    margin-right:auto;
  }

  body.home-modern .dmx-panel {
    position:relative;
    height:var(--d-home-dmx-height);
    margin-top:0;
    margin-bottom:0;
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
    z-index:1;
  }

  body.home-modern .dmx-panel .dmx-image {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    display:block;
    width:100%;
    height:var(--d-home-merged-height);
    max-height:none;
    object-fit:cover;
    object-position:center top;
    filter:saturate(1.10) contrast(1.06) brightness(.92);
    border-radius:var(--d-home-radius);
  }

  body.home-modern .dmx-panel::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:var(--d-home-merged-height);
    border-radius:var(--d-home-radius);
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(2,8,15,.02) 0%, rgba(2,8,15,.12) 34%, rgba(2,8,15,.34) 70%, rgba(2,8,15,.52) 100%),
      radial-gradient(circle at 50% 60%, rgba(47,140,255,.06), transparent 54%);
    background-repeat:no-repeat;
    background-size:100% 100%, 100% 100%;
    background-position:center top, center top;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -28px 42px rgba(0,0,0,.34);
  }

  body.home-modern .dmx-panel::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    width:100%;
    height:var(--d-home-merged-height);
    box-sizing:border-box;
    border:1px solid var(--d-home-border);
    border-radius:var(--d-home-radius);
    pointer-events:none;
    box-shadow:var(--d-home-shadow);
  }

  body.home-modern .hero-panel {
    position:relative;
    z-index:2;
    height:var(--d-home-areas-height);
    min-height:var(--d-home-areas-height);
    margin-top:calc(-1 * var(--d-home-areas-overlap));
    margin-bottom:0;
    padding:4px 0 12px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:auto 1fr;
    column-gap:0;
    row-gap:2px;
    align-items:center;
    justify-content:center;
    justify-items:stretch;
    overflow:visible;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    text-align:center;
  }

  body.home-modern .hero-panel::before,
  body.home-modern .hero-panel::after {
    content:"";
    position:absolute;
    top:60px;
    width:1px;
    height:36px;
    background:rgba(205,215,228,.20);
    pointer-events:none;
    z-index:1;
  }

  body.home-modern .hero-panel::before { left:33.333333%; }
  body.home-modern .hero-panel::after { left:66.666667%; }

  body.home-modern .hero-panel .areas-title {
    grid-column:1 / -1;
    position:relative;
    z-index:2;
    width:max-content;
    max-width:100%;
    min-height:0;
    margin:0 auto;
    padding:0;
    display:block;
    color:var(--d-home-text);
    font-family:Tahoma,Geneva,sans-serif;
    font-size:29px;
    line-height:37px;
    font-weight:800;
    letter-spacing:-.55px;
    text-align:center;
    text-shadow:0 12px 30px rgba(0,0,0,.52), 0 0 14px rgba(0,0,0,.18);
    transform:translateY(-21px);
  }

  body.home-modern .hero-panel .areas-title::after {
    margin-top:8px;
    box-shadow:0 0 14px rgba(22,139,255,.22);
  }

  body.home-modern .hero-panel .service-item {
    position:relative;
    z-index:2;
    width:100%;
    min-height:40px;
    max-height:none;
    margin:0;
    padding:0 10px 0 43px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    color:#d6e2ee;
    text-align:left;
    transform:translateY(-4px);
  }

  /* Piktogramy odpowiadają kolorom trzech głównych wiązek światła: DMX, zabezpieczenia i instalacje. */
  body.home-modern .hero-panel .service-item.service-light {
    --service-accent:#ff9a4a;
    --service-accent-rgb:255,154,74;
  }

  body.home-modern .hero-panel .service-item.service-security {
    --service-accent:#b8ff58;
    --service-accent-rgb:184,255,88;
  }

  body.home-modern .hero-panel .service-item.service-power {
    --service-accent:#7fc4ff;
    --service-accent-rgb:127,196,255;
  }

  body.home-modern .hero-panel .service-icon {
    position:relative;
    width:34px;
    height:34px;
    min-width:34px;
    display:grid;
    place-items:center;
    isolation:isolate;
    background:rgba(4, 10, 18, .42);
    border:1px solid rgba(var(--service-accent-rgb), .45);
    border-radius:50%;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 2px 6px rgba(0,0,0,.24);
    overflow:hidden;
  }

  body.home-modern .hero-panel .service-icon svg {
    position:relative;
    z-index:1;
    width:23px;
    height:23px;
    fill:none;
    stroke:#ffffff;
    stroke-width:3.0;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:
      drop-shadow(.85px 0 0 rgba(0,0,0,.88))
      drop-shadow(-.85px 0 0 rgba(0,0,0,.88))
      drop-shadow(0 .85px 0 rgba(0,0,0,.88))
      drop-shadow(0 -.85px 0 rgba(0,0,0,.88))
      drop-shadow(0 2px 3px rgba(0,0,0,.50));
  }

  body.home-modern .hero-panel .service-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    color:#e2ebf5;
    font-size:15px;
    line-height:21px;
    font-weight:400;
    text-shadow:0 2px 10px rgba(0,0,0,.68);
  }

  body.home-modern .hero-panel .service-copy span {
    display:block;
    white-space:nowrap;
  }

  /* Trzy dolne kafle. */
  body.home-modern .home-cards-section {
    margin:0;
    padding-top:var(--d-home-merged-bottom-gap);
    padding-bottom:0;
    background:transparent;
  }

  body.home-modern .home-cards {
    width:var(--d-home-container);
    display:grid;
    grid-template-columns:repeat(3, var(--d-home-card-width));
    column-gap:var(--d-home-card-gap);
    row-gap:24px;
    align-items:start;
    justify-content:space-between;
  }

  body.home-modern .home-card {
    position:relative;
    width:var(--d-home-card-width);
    min-width:var(--d-home-card-width);
    max-width:var(--d-home-card-width);
    height:var(--d-home-card-height);
    min-height:var(--d-home-card-height);
    max-height:var(--d-home-card-height);
    padding:24px var(--d-home-card-side-padding) 12px;
    display:grid;
    grid-template-rows:auto 1fr var(--d-home-more-height);
    row-gap:0;
    overflow:hidden;
    border:1px solid var(--d-home-border);
    border-radius:var(--d-home-radius);
    background:var(--d-home-panel-bg);
    box-shadow:var(--d-home-shadow);
  }

  body.home-modern .home-card::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:74px;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(47,140,255,.07) 0%, rgba(47,140,255,0) 100%);
  }

  body.home-modern .home-card h2 {
    position:relative;
    width:max-content;
    max-width:100%;
    margin:0;
    padding:0 0 var(--d-home-title-underline-gap);
    color:var(--d-home-text);
    font-family:var(--d-home-font);
    font-size:24px;
    line-height:30px;
    font-weight:800;
    letter-spacing:-.2px;
    text-align:left;
  }

  body.home-modern .home-card h2::after {
    position:absolute;
    left:0;
    bottom:0;
  }

  body.home-modern .home-card-box {
    min-height:0;
    align-self:stretch;
    display:grid;
    grid-template-columns:minmax(0, var(--d-home-card-image-max-width)) 1fr;
    align-items:center;
    gap:22px;
  }

  body.home-modern .home-card-img {
    display:block;
    width:100%;
    max-width:var(--d-home-card-image-max-width);
    height:148px;
    object-fit:contain;
    background:transparent;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.44));
    transform:translateY(-2px);
  }

  body.home-modern .home-card p {
    width:100%;
    margin:0;
    padding:0;
    color:var(--d-home-muted);
    font-family:var(--d-home-font);
    font-size:16px;
    line-height:24px;
    font-weight:400;
    text-align:left;
    transform:translateY(-1px);
  }

  body.home-modern .home-card > .desktop-more-button {
    position:relative;
    justify-self:center;
    align-self:end;
    width:var(--d-home-more-width);
    min-width:var(--d-home-more-width);
    max-width:var(--d-home-more-width);
    height:var(--d-home-more-height);
    min-height:var(--d-home-more-height);
    max-height:var(--d-home-more-height);
    margin:0;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, rgba(5,18,31,.86) 0%, rgba(2,10,18,.96) 100%);
    border:1px solid rgba(70,150,230,.30);
    border-radius:12px;
    color:var(--d-home-text);
    font-family:var(--d-home-font);
    font-size:14px;
    line-height:18px;
    font-weight:900;
    letter-spacing:.55px;
    text-align:center;
    text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.20);
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
  }

  body.home-modern .home-card > .desktop-more-button::before,
  body.home-modern .home-card > .desktop-more-button::after {
    display:none !important;
    content:none !important;
  }

  body.home-modern .home-card > .desktop-more-button:is(:hover,:focus,:focus-visible) {
    border-color:rgba(229,92,1,.72);
    background:linear-gradient(180deg, rgba(10,31,53,.96) 0%, rgba(4,14,24,.98) 100%);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(229,92,1,.12), 0 0 18px rgba(229,92,1,.18);
    transform:translateY(-1px);
  }

  body.home-modern .home-card > .desktop-more-button:active {
    border-color:rgba(22,139,255,.88);
    background:linear-gradient(180deg, rgba(11,43,78,.96), rgba(5,16,29,.96));
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(47,140,255,.14), 0 0 20px rgba(22,139,255,.18);
  }
}

/* v396 — przywrócony hover dla kafli Produkty / Realizacje / O mnie. */
@media screen and (min-width:1200px) {
  body.home-modern .home-card {
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }

  body.home-modern .home-card:hover,
  body.home-modern .home-card:focus-within {
    z-index:1;
    transform:translateY(-4px);
    border-color:rgba(47,140,255,.58);
    box-shadow:0 14px 28px rgba(0,0,0,.28), 0 0 18px rgba(22,139,255,.10);
  }
}

/* v397 — desktop: optyczne i geometryczne wyśrodkowanie napisów „WIĘCEJ”. */
@media screen and (min-width:1200px) {
  body.home-modern .home-card > a.desktop-more-button.button {
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    text-indent:0 !important;
    line-height:1 !important;
  }
}

/* v398 — przywrócenie hoveru kafli po konsolidacji reguł .reveal.
   Reguły są celowo powiązane z klasami reveal/visible, które ustawiają
   transform podczas wejścia kafelków i wcześniej nadpisywały hover. */
@media screen and (min-width:1200px) {
  body.home-modern main .home-card.reveal {
    transition-property:opacity, visibility, transform, border-color, box-shadow !important;
    transition-duration:2s, 0s, .22s, .22s, .22s !important;
    transition-timing-function:ease, linear, ease, ease, ease !important;
    transition-delay:0s, 2s, 0s, 0s, 0s !important;
  }

  body.home-modern main .home-card.reveal.visible {
    transform:none !important;
    transition-delay:0s, 0s, 0s, 0s, 0s !important;
  }

  body.home-modern main .home-card.reveal.visible:hover,
  body.home-modern main .home-card.reveal.visible:focus-within,
  body.home-modern main .home-card:hover,
  body.home-modern main .home-card:focus-within {
    z-index:1;
    transform:translateY(-4px) !important;
    border-color:rgba(47,140,255,.58) !important;
    box-shadow:0 14px 28px rgba(0,0,0,.28), 0 0 18px rgba(22,139,255,.10) !important;
    transition-property:transform, border-color, box-shadow !important;
    transition-duration:.22s, .22s, .22s !important;
    transition-timing-function:ease, ease, ease !important;
    transition-delay:0s, 0s, 0s !important;
  }
}

/* v401 — rozdzielenie hoveru kafla od hoveru przycisku „WIĘCEJ”.
   Przyczyna braku pomarańczowej poświaty: reguła dla :hover całego kafla
   obejmowała także przycisk (bo przycisk jest jego dzieckiem) i neutralizowała
   jego styl przez !important. Teraz neutralizacja działa wyłącznie wtedy,
   gdy wskaźnik nie znajduje się bezpośrednio nad przyciskiem. */
@media screen and (min-width:1200px) {
  body.home-modern main .home-card:hover:not(:has(> .desktop-more-button:hover)) > .desktop-more-button,
  body.home-modern main .home-card:focus-within:not(:has(> .desktop-more-button:focus-visible)) > .desktop-more-button {
    border-color:rgba(70,150,230,.30) !important;
    background:linear-gradient(180deg, rgba(5,18,31,.86) 0%, rgba(2,10,18,.96) 100%) !important;
    color:var(--d-home-text) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.20) !important;
    transform:none !important;
  }

  body.home-modern main .home-card > .desktop-more-button:hover,
  body.home-modern main .home-card > .desktop-more-button:focus-visible {
    position:relative;
    z-index:4;
    border-color:rgba(229,92,1,.88) !important;
    background:linear-gradient(180deg, rgba(16,35,55,.98) 0%, rgba(5,15,25,.99) 100%) !important;
    color:#fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 0 1px rgba(229,92,1,.16),
      0 0 22px rgba(229,92,1,.42) !important;
    transform:none !important;
  }
}



/* v402 — desktop: mocniejszy cień nagłówka w kaflu z lampami dla lepszej czytelności. */
@media screen and (min-width:1200px) {
  body.home-modern .hero-panel .areas-title {
    text-shadow:
      0 3px 10px rgba(0,0,0,.82),
      0 10px 24px rgba(0,0,0,.58),
      0 0 18px rgba(0,0,0,.28);
  }
}


/* v403 — desktop: przywrócony układ kafla „Produkty” sprzed konsolidacji.
   Dotyczy wyłącznie pierwszego kafla: pierwotna skala zdjęcia oraz pozycja opisu obok. */
@media screen and (min-width:1200px) {
  body.home-modern .home-card:nth-child(1) .home-card-box {
    grid-template-columns:minmax(0, 150px) 1fr;
    gap:18px;
  }

  body.home-modern .home-card:nth-child(1) .home-card-img {
    width:100%;
    max-width:150px;
    height:132px;
  }
}

/* v413 — dodatkowe powiększenie ikon o kolejne 20% oraz zachowanie separatorów względem przerw. */
@media screen and (min-width:1200px) {
  :root {
    --d-home-panel-side-bleed:.5px;
    --d-home-card-gap-half:7.5px;
  }

  /* Separatory są ustawione dokładnie w środku faktycznych 15 px przerw pomiędzy trzema kaflami. */
  body.home-modern .hero-panel::before {
    left:calc(
      var(--d-home-panel-side-bleed) +
      var(--d-home-card-width) +
      var(--d-home-card-gap-half)
    );
  }

  body.home-modern .hero-panel::after {
    left:calc(
      var(--d-home-panel-side-bleed) +
      var(--d-home-card-width) +
      var(--d-home-card-gap) +
      var(--d-home-card-width) +
      var(--d-home-card-gap-half)
    );
  }

  /* Dodatkowe +20% względem v412: 40,8 px × 1,2 = 48,96 px; 27,6 px × 1,2 = 33,12 px. */
  body.home-modern .hero-panel .service-icon {
    width:48.96px;
    height:48.96px;
    min-width:48.96px;
  }

  body.home-modern .hero-panel .service-icon svg {
    width:33.12px;
    height:33.12px;
  }
}