/* NERRA — návrh webu. Layout: „pracovný denník" — zarovnané vľavo, veľké
   skutočné náhľady appky, postup práce ako reťaz bublín (podpis stránky). */
:root {
  --bg: #F5F5F7;          /* svetlé pozadie značky */
  --surface: #FFFFFF;
  --fg: #1D1D1F;          /* grafit z loga */
  --muted: #62626B;
  --line: #E2E2E8;
  --accent: #FF9500;      /* oranžová bodka z loga */
  --accent-ink: #1D1D1F;  /* text na akcente */
  --accent-soft: rgba(255,149,0,.12);
  --shadow: 0 18px 50px -24px rgba(29,29,31,.35);
  --display: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --max: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E10; --surface: #18181B; --fg: #F5F5F7; --muted: #A1A1AA; --line: #2A2A30;
    --accent: #0A84FF; --accent-ink: #FFFFFF; --accent-soft: rgba(10,132,255,.16);
    --shadow: 0 18px 50px -24px rgba(0,0,0,.8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E10; --surface: #18181B; --fg: #F5F5F7; --muted: #A1A1AA; --line: #2A2A30;
  --accent: #0A84FF; --accent-ink: #FFFFFF; --accent-soft: rgba(10,132,255,.16);
  --shadow: 0 18px 50px -24px rgba(0,0,0,.8); color-scheme: dark;
}

* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; margin: 0 }
a { color: inherit }
img { max-width: 100%; height: auto; display: block }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; margin: 0 }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 800 }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 750 }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em }
p { margin: 0 }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 20px }
.eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

/* Navigácia */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; gap: 22px; min-height: 62px }
.logo { display: inline-flex; color: var(--fg) }
.logo svg { height: 26px; width: auto }
.logo .bodka { fill: var(--accent) }
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: .93rem }
.nav-links a { text-decoration: none; color: var(--muted) }
.nav-links a:hover { color: var(--fg) }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg) }
.btn.hl { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.btn.hl .tecka { width: 7px; height: 7px; border-radius: 50%; background: var(--accent) }
@media (max-width: 760px) { .nav-links { display: none } .nav .btn { margin-left: auto } }

/* Sekcie */
section { padding-block: clamp(56px, 8vw, 96px) }
.sec-head { display: grid; gap: 12px; margin-bottom: 34px; max-width: 760px }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 72px) 30px }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px }
.hero-text { display: grid; gap: 18px; max-width: 760px }
.hero-text h1 .bodka { color: var(--accent) }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px }
.shot { position: relative; margin-top: 10px }
.okno { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow) }
.okno .lista { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.okno .lista i { width: 10px; height: 10px; border-radius: 50%; background: var(--line) }
.telefon { position: absolute; right: -6px; bottom: -40px; width: clamp(130px, 20%, 210px); aspect-ratio: 9/19; max-width: 100%;
  border-radius: 28px; overflow: hidden; border: 7px solid var(--fg); box-shadow: var(--shadow); background: var(--surface) }
.telefon img { width: 100%; height: 100%; object-fit: cover; object-position: top }
@media (max-width: 640px) { .telefon { position: relative; right: auto; bottom: auto; width: 60%; margin: -60px 0 0 auto } }

/* Video */
.video { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-top: 80px }
.video .plocha { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; max-width: 100%; background: var(--fg) }
.video .plocha img { width: 100%; height: 100%; object-fit: cover; opacity: .55 }
.video .play { position: absolute; inset: 0; display: grid; place-items: center }
.video .play span { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center }
.video .play svg { width: 22px; fill: var(--accent-ink); margin-left: 4px }
.video .dlzka { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: .75rem; color: #fff;
  background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 6px }
@media (max-width: 760px) { .video { grid-template-columns: minmax(0, 1fr) } }

/* Postup — reťaz bublín */
.retaz { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; counter-reset: krok; list-style: none; padding: 0; margin: 0 }
.retaz li { display: flex; align-items: center }
.bublina { position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 18px 10px 44px; font-weight: 600; font-size: .95rem; white-space: nowrap }
.bublina::before { counter-increment: krok; content: counter(krok); position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--fg);
  font-family: var(--mono); font-size: .8rem; display: grid; place-items: center }
.retaz li:last-child .bublina { border-color: var(--accent) }
.sipka { width: 34px; height: 2px; background: var(--accent); position: relative; margin-inline: 4px }
.sipka::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--accent) }
.retaz li { margin-block: 7px }
.retaz-velka .bublina { padding: 14px 22px 14px 50px; font-size: 1rem }
.pod { font-size: .78rem; color: var(--muted); font-weight: 400; display: block; margin-top: 2px; font-family: var(--mono) }
@media (max-width: 640px) {
  .retaz { flex-direction: column; align-items: flex-start }
  .retaz li { flex-direction: column; align-items: flex-start }
  .sipka { width: 2px; height: 18px; margin: 2px 0 2px 21px }
  .sipka::after { right: -4px; top: auto; bottom: -6px; border: 5px solid transparent; border-top-color: var(--accent); border-left-color: transparent }
  .bublina { white-space: normal }
}

/* Moduly */
.skupina { border-top: 1px solid var(--line); padding-block: 30px; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px }
.skupina h3 { font-size: 1.35rem }
.skupina .veta { color: var(--muted); margin-top: 8px; font-size: .95rem }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px }
.karta { display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease }
.karta:hover { transform: translateY(-2px); box-shadow: var(--shadow) }
.karta .nahlad { aspect-ratio: 16/10; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg) }
.karta .nahlad img { width: 100%; height: 100%; object-fit: cover; object-position: top left }
.karta .nahlad.mob img { object-fit: contain; object-position: top center }
.karta .txt { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start }
.karta p { color: var(--muted); font-size: .9rem; line-height: 1.5 }
.karta .viac { font-size: .85rem; font-weight: 600; margin-top: 4px }
.karta .viac::after { content: " →"; color: var(--accent) }
@media (max-width: 760px) { .skupina { grid-template-columns: minmax(0, 1fr); gap: 16px } }

/* Mobil */
.telefony { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 22px }
.telefony figure { margin: 0 }
.telefony .ram { aspect-ratio: 9/19; max-width: 100%; border-radius: 26px; overflow: hidden; border: 6px solid var(--fg); background: var(--surface); box-shadow: var(--shadow) }
.telefony .ram img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.telefony figcaption { font-size: .85rem; color: var(--muted); padding: 8px 4px 0; text-align: center }
@media (max-width: 560px) { .telefony { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Prečo, pre koho */
.dovody { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface) }
.dovod { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start }
.dovod p { color: var(--muted); font-size: .93rem }
.dovod .znak { font-family: var(--mono); font-size: .75rem; color: var(--muted) }
.chipy { display: flex; flex-wrap: wrap; gap: 8px }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: .92rem }

/* CTA a pätička */
.cta { background: var(--fg); color: var(--bg); border-radius: 18px; padding: clamp(28px, 5vw, 52px); display: grid; gap: 16px }
.cta .lead { color: color-mix(in srgb, var(--bg) 72%, transparent) }
.cta .btn.hl { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
footer { border-top: 1px solid var(--line); padding-block: 30px; color: var(--muted); font-size: .88rem }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center }

/* Detail modulu */
.drobky { font-size: .88rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap }
.drobky a { color: var(--muted) }
.modul-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 34px; align-items: start }
.funkcie { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.funkcie li { padding-left: 22px; position: relative }
.funkcie li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 12px }
.kroky { margin: 0; padding-left: 22px; display: grid; gap: 10px }
.kroky li { padding-left: 4px }
.videa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px }
.vid { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.vid .plocha { position: relative; aspect-ratio: 16/9; max-width: 100%; background: var(--fg) }
.vid .plocha img { width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: .5 }
.vid .play { position: absolute; inset: 0; display: grid; place-items: center }
.vid .play span { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); display: grid; place-items: center }
.vid .play svg { width: 16px; fill: var(--accent-ink); margin-left: 3px }
.vid .txt { padding: 10px 14px 12px; display: grid; gap: 2px }
.vid .stav { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.susedia { display: flex; flex-wrap: wrap; gap: 8px }
@media (max-width: 860px) { .modul-grid { grid-template-columns: minmax(0, 1fr) } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }
.video .plocha video, .vid .plocha video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000 }
/* lišta o cookies (rovnaká ako na SecurityStore) */
#nsCookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: #0f172a; color: #e6ecf5; box-shadow: 0 -6px 24px rgba(0,0,0,.18) }
#nsCookies .ck-in { max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
#nsCookies .ck-txt { flex: 1; min-width: 240px; font-size: 13px; line-height: 1.55 }
#nsCookies .ck-txt b { display: block; color: #fff; margin-bottom: 2px }
#nsCookies .ck-btn { display: flex; align-items: center; gap: 14px }
#nsCookies .ck-viac { color: #f5c518; font-size: 12.5px; text-decoration: underline }
#nsCookies .ck-ok { height: 40px; padding: 0 22px; border: 0; border-radius: 8px; background: #f5c518; color: #0f172a; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer }
/* úvod: oblasti modulov ako ikony */
.ikony { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px }
.ikona { display: grid; gap: 6px; align-content: start; padding: 18px; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, transform .15s }
.ikona:hover { border-color: var(--fg); transform: translateY(-2px) }
.ikona .znak { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); margin-bottom: 4px }
.ikona .znak svg { width: 24px; height: 24px }
.ikona strong { font-size: 1.02rem }
.ikona span:last-child { color: var(--muted); font-size: .88rem; line-height: 1.45 }
/* ── Úvod podľa vzoru ABRA Flexi (stavba), farby NerraSoft ── */
.ab-info { background: var(--fg); color: var(--bg); font-size: .9rem; text-align: center; padding-block: 9px }
.ab-info a { color: var(--accent) }
.ab-hero { padding-block: 70px 40px }
.ab-hero h1 { font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.08 }
.ab-produkt { color: var(--accent); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.02em }
.ab-oranz { color: var(--accent) }
.ab-zaber { position: relative; width: 100%; max-width: 1080px; margin-top: 26px }
.ab-zaber .okno { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow) }
.ab-zaber .okno img { display: block; width: 100% }
.ab-zaber .telefon { position: absolute; right: 0; bottom: -24px; width: 19%; min-width: 110px; border-radius: 20px; overflow: hidden; border: 6px solid #111; box-shadow: var(--shadow); background: #111 }
.ab-zaber .telefon img { display: block; width: 100% }
.ab-zaber.mensi { margin-top: 0 }
.ab-sivy { background: color-mix(in srgb, var(--fg) 4%, var(--bg)) }
.ab-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }
.ab-tab { border: 1.5px solid var(--fg); background: transparent; color: var(--fg); border-radius: 999px; padding: 11px 22px; font: 700 .9rem var(--body); cursor: pointer }
.ab-tab.on { background: var(--fg); color: var(--bg) }
.ab-segbox { width: 100%; max-width: 820px }
.ab-seg { display: none; list-style: none; margin: 0; padding: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }
.ab-seg.on { display: grid }
.ab-seg li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; text-align: left; font-weight: 500 }
.ab-seg li::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-bottom: 10px }
.ab-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px }
.ab-karta { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border: 1px solid var(--fg); border-radius: 16px; text-decoration: none; color: var(--fg); background: var(--surface); transition: transform .15s }
.ab-karta:hover { transform: translateY(-3px) }
.ab-karta .ab-ik { position: absolute; top: 20px; right: 22px; color: var(--accent) }
.ab-karta .ab-ik svg { width: 26px; height: 26px }
.ab-karta h3 { font-size: 1.45rem; padding-right: 36px }
.ab-karta p { color: var(--muted); line-height: 1.55 }
.ab-viac { color: var(--accent); justify-self: end; font-weight: 500 }
.ab-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px }
.ab-3 h3 { font-size: 1.3rem; margin-bottom: 8px }
.ab-3 p { color: var(--muted) }
.ab-tmavy { background: var(--fg); color: var(--bg); border-radius: 20px; padding: clamp(24px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 36px; align-items: center }
.ab-tmavy p { opacity: .85; margin: 14px 0 22px }
.ab-tmavy video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16/9 }
.ab-obrys { border: 2px solid var(--accent) !important; color: var(--bg) !important; background: transparent !important }
.ab-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 46px; align-items: center }
.ab-split h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.08 }
.ab-split .lead { margin: 18px 0 24px }
.ab-ceny { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; align-items: stretch }
.ab-cena { position: relative; display: grid; gap: 14px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px }
.ab-cena.hlavna { border: 2px solid var(--accent); box-shadow: var(--shadow) }
.ab-cena h3 { font-size: 1.35rem }
.ab-suma { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em }
.ab-suma small { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: 6px }
.ab-plus { color: var(--muted); margin-top: -8px }
.ab-cena ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted) }
.ab-cena .btn { justify-self: start; margin-top: auto }
.ab-stitok { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .78rem; padding: 4px 12px; border-radius: 999px }
@media (max-width: 760px) { .ab-zaber .telefon { right: 6px; width: 26% } .ab-hero { padding-block: 40px 30px } }
section{overflow-x:clip}
@media (max-width: 560px) { .ab-prihlas { display: none } }