/* Shared 01 People shell styles: texture, header, step nav, section pattern,
   buttons, bottleneck blocks, insert/scope boxes, footer. Used by index.html,
   riesenie.html, realizacia.html, ceny.html, kontakt.html. */

:root{
  --op-red:#F83A3B;
  --op-bg:#181818;
  --op-white:#FFFFFF;
  --op-ghost: rgba(255,255,255,0.14);
  --op-text-dim: rgba(255,255,255,0.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  font-family:'Roboto', sans-serif;
  background:var(--op-bg);
  color:var(--op-white);
}

.texture{
  position:fixed; inset:0; z-index:0; opacity:0.5;
  background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px);
  pointer-events:none;
}

header{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:32px 48px;
}
.logo{font-size:20px; font-weight:400;}
.logo b{font-weight:700;}
.tag{font-size:13px; color:var(--op-text-dim); letter-spacing:.04em;}

/* ---------- step navigation ---------- */
nav.steps{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:28px;
  padding:0 48px 40px;
}
nav.steps a{
  font-size:13px; letter-spacing:.04em; font-weight:500;
  color:var(--op-text-dim); text-decoration:none;
}
nav.steps a:hover{ color:var(--op-white); }
nav.steps a.active{ color:var(--op-red); font-weight:700; }

/* mobile-only prev/current/next bar, replaces nav.steps under 640px */
.steps-mobile{
  display:none;
  position:relative; z-index:2;
  justify-content:space-between; align-items:center;
  padding:0 24px 32px;
}
.steps-mobile .prev,
.steps-mobile .next{
  font-size:13px; font-weight:500; color:var(--op-text-dim); text-decoration:none;
}
.steps-mobile .prev:hover,
.steps-mobile .next:hover{ color:var(--op-white); }
.steps-mobile .current{
  font-size:13px; font-weight:700; color:var(--op-red);
}
.steps-mobile .prev.disabled,
.steps-mobile .next.disabled{
  opacity:0; pointer-events:none;
}

/* ---------- section pattern ---------- */
.section{
  position:relative; z-index:2;
  padding:0 48px 100px;
}
.section .ghost-heading{
  font-size:90px; font-weight:700; color:var(--op-ghost);
  line-height:1; margin:10px 0 30px;
}
.section .lede{
  font-size:22px; max-width:680px; line-height:1.5; color:var(--op-white);
  margin-bottom:60px;
}
.section .lede b{ color:var(--op-red); }
.placeholder-text{ opacity:.55; font-style:italic; }

.section .note{
  font-size:16px; line-height:1.7; color:var(--op-text-dim);
  max-width:640px; margin-bottom:40px;
}
.section .note a{ color:var(--op-red); text-decoration:underline; }
.section .note a:hover{ opacity:.85; }

.cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:40px;
}
.cols .col h4{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--op-red); margin-bottom:14px; font-weight:700;
}
.cols .col p{ color:var(--op-text-dim); font-size:15px; line-height:1.7; }

.btn{
  background:var(--op-red);
  color:#fff;
  border:none;
  border-radius:68px;
  padding:16px 34px;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.92; }

.next-link{
  margin-top:60px;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--op-red); font-size:15px; cursor:pointer; text-decoration:none;
  font-weight:700;
}
.next-link:hover{ opacity:.85; }

/* prominent centered CTA variant, used for the page's primary "continue" link */
.next-link.cta{
  display:flex;
  width:fit-content;
  margin:60px auto 0;
  justify-content:center;
  align-items:center;
  gap:10px;
  background:var(--op-red);
  color:#fff;
  border-radius:68px;
  padding:20px 48px;
  font-size:17px;
  box-shadow:0 0 0 0 rgba(248,58,59,0.45);
  animation:cta-pulse 2.6s ease-in-out infinite;
}
.next-link.cta:hover{ opacity:.92; }
@keyframes cta-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(248,58,59,0.45); transform:scale(1); }
  50% { box-shadow:0 0 0 14px rgba(248,58,59,0); transform:scale(1.015); }
}
@media (prefers-reduced-motion: reduce){
  .next-link.cta{ animation:none; }
}

/* secondary/outline variant, for actions that aren't page-to-page navigation (e.g. a download) */
.next-link.cta.secondary{
  background:transparent;
  color:var(--op-red);
  border:2px solid var(--op-red);
  box-shadow:none;
  animation:none;
}
.next-link.cta.secondary:hover{
  background:rgba(248,58,59,0.08);
  opacity:1;
}

/* ---------- bottleneck blocks ---------- */
.bottleneck{
  position:relative;
  padding:48px 0;
  border-top:1px solid rgba(255,255,255,0.1);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:32px;
}
.bottleneck .b-num{
  font-size:72px; font-weight:700; color:var(--op-ghost); line-height:1;
}
.bottleneck h3{
  font-size:26px; font-weight:700; margin-bottom:14px;
}
.bottleneck p{
  font-size:16px; line-height:1.7; color:var(--op-text-dim); max-width:640px; margin-bottom:18px;
}
.bottleneck .solution{
  font-size:15px; line-height:1.6; color:var(--op-white); max-width:640px; margin-bottom:0;
}
.bottleneck .solution strong{ color:var(--op-red); font-weight:700; }
.showcase-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--op-red); font-size:15px; font-weight:700; text-decoration:none;
}
.showcase-link:hover{ opacity:.85; }
.showcase-link.muted{
  color:var(--op-text-dim); font-style:italic; font-weight:400;
}

/* ---------- insert / scope boxes ---------- */
.insert-box{
  margin:16px 0 48px;
  padding:32px 36px;
  border:1px solid rgba(248,58,59,0.35);
  background:rgba(248,58,59,0.08);
  border-radius:20px;
}
.insert-box .icon{
  font-size:22px;
  margin-right:8px;
  vertical-align:-3px;
}
.insert-box .flow{
  font-size:20px; font-weight:700; margin-bottom:12px;
}
.insert-box p{
  font-size:15px; line-height:1.7; color:var(--op-text-dim); max-width:680px;
}

.scope-box{
  margin:48px 0 20px;
  padding:32px 36px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);
  border-radius:20px;
}
.scope-box .icon{
  font-size:34px;
  margin-bottom:14px;
}
.scope-box h4{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--op-white); font-weight:700; margin-bottom:14px;
}
.scope-box p{
  font-size:15px; line-height:1.7; color:var(--op-text-dim); max-width:680px;
}
.scope-box .showcase-link{ margin-top:16px; }

/* prominent variant, used for the single key-takeaway box on a page (e.g. Release 1 scope) */
.scope-box.featured{
  max-width:760px;
  margin:64px auto 48px;
  padding:48px 56px;
  text-align:center;
  border-color:rgba(248,58,59,0.35);
  background:rgba(248,58,59,0.06);
}
.scope-box.featured h4{
  font-size:15px;
  color:var(--op-red);
}
.scope-box.featured p{
  max-width:100%;
  font-size:18px;
  color:var(--op-white);
}

/* ---------- generic subsection heading, reused within a page's outer section ---------- */
/* each subsection is a distinct panel, so consecutive blocks read as separate
   cards rather than one continuous flat scroll */
.subsection{
  margin-top:40px;
  padding:48px;
  background:rgba(255,255,255,0.03);
  border-radius:0;
}
.subsection h3{
  font-size:26px; font-weight:700; margin-bottom:16px;
  padding-left:18px;
  border-left:3px solid var(--op-red);
}

/* ---------- methodology + timeline flow chain (realizacia.html) ---------- */
.flow-chain{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:32px;
}
.flow-line{
  position:absolute; top:24px; left:12.5%; right:12.5%; height:2px;
  background:rgba(255,255,255,0.15);
  z-index:0;
}
.flow-step{ position:relative; z-index:1; text-align:center; }
.flow-node{
  width:48px; height:48px; margin:0 auto 18px;
  border-radius:50%;
  background:var(--op-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px;
}
.flow-step h4{ font-size:15px; font-weight:700; margin-bottom:6px; }
.flow-step .duration{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--op-text-dim); margin-bottom:10px;
}
.flow-step p{ font-size:14px; line-height:1.6; color:var(--op-text-dim); }
.flow-chain + .note{ margin-top:32px; margin-bottom:0; }

/* ---------- technical approach / stack chip grid (realizacia.html) ---------- */
.tech-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin-top:32px;
}
.tech-chip{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:0;
  padding:10px 16px;
  margin-bottom:14px;
}
.tech-chip .tech-icon{ font-size:18px; line-height:1; }
.tech-chip h4{ font-size:14px; font-weight:700; }
.tech-item p{ font-size:14px; line-height:1.6; color:var(--op-text-dim); }
.tech-grid-note{ margin-top:32px; margin-bottom:0; }

/* ---------- pricing table (ceny.html) ---------- */
.price-table-wrap{ overflow-x:auto; margin-top:32px; }
.price-table{
  width:100%; border-collapse:collapse; font-size:14px; min-width:520px;
}
.price-table th{
  text-align:right; padding:12px 16px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--op-text-dim);
  border-bottom:2px solid var(--op-red);
}
.price-table th:first-child{ text-align:left; }
.price-table td{
  padding:12px 16px; text-align:right;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:var(--op-white);
}
.price-table td:first-child{ text-align:left; color:var(--op-text-dim); }
.price-table tbody tr:hover{ background:rgba(255,255,255,0.03); }
.price-table-total td{
  font-weight:700; color:var(--op-white);
  border-bottom:none; border-top:2px solid rgba(255,255,255,0.15);
  padding-top:16px;
}

/* ---------- prominent price figure (ceny.html) ---------- */
.price-display{
  margin-top:40px; padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center;
}
.price-amount{
  font-weight:700; font-size:44px; color:var(--op-red); line-height:1.1;
  margin-bottom:10px;
}
.price-amount span{
  font-size:16px; font-weight:400; color:var(--op-text-dim); margin-left:6px;
}
.price-note{
  font-size:14px; line-height:1.6; color:var(--op-text-dim);
  max-width:520px; margin:0 auto;
}

/* ---------- bordered caveat box (ceny.html) ---------- */
.callout-box{
  margin-top:28px;
  padding:24px 28px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);
}
.callout-box p{ font-size:14px; line-height:1.6; color:var(--op-text-dim); }
.callout-box p strong{ color:var(--op-white); }

/* ---------- numbered steps list (ceny.html, kontakt.html) ---------- */
.steps-list{
  margin-top:32px;
  display:flex; flex-direction:column; gap:18px;
}
.step{ display:flex; align-items:center; gap:16px; }
.step-num{
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  background:var(--op-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.step-label{ font-size:16px; color:var(--op-white); }

/* ---------- assumptions / exclusions list (ceny.html) ---------- */
.assumptions-list{ margin-top:24px; padding-left:20px; }
.assumptions-list li{
  font-size:15px; line-height:1.7; color:var(--op-text-dim); margin-bottom:14px;
}
.assumptions-list li:last-child{ margin-bottom:0; }
.assumptions-list li::marker{ color:var(--op-red); }
.assumptions-list li strong{ color:var(--op-white); }

/* ---------- contact card (kontakt.html) ---------- */
.contact-card{
  display:flex; align-items:center; gap:24px;
  margin-top:24px;
}
.contact-card img{
  width:96px; height:96px; flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
}
.contact-card .name{ font-size:19px; font-weight:700; margin-bottom:4px; }
.contact-card .role{ font-size:14px; color:var(--op-text-dim); margin-bottom:10px; }
.contact-card .detail{ font-size:14px; }
.contact-card .detail a{ color:var(--op-white); text-decoration:none; }
.contact-card .detail a:hover{ color:var(--op-red); }

.company-line{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:14px; color:var(--op-text-dim);
}
.company-line strong{ color:var(--op-white); }
.company-line a{ color:var(--op-red); text-decoration:none; }
.company-line a:hover{ text-decoration:underline; }

footer{
  position:relative; z-index:2;
  text-align:center; padding:24px; color:var(--op-text-dim); font-size:13px;
}

@media (max-width:640px){
  .section .ghost-heading{ font-size:48px; }
  .cols{ grid-template-columns:1fr; }
  .bottleneck{ grid-template-columns:1fr; gap:12px; }
  .bottleneck .b-num{ font-size:48px; }
  nav.steps{ display:none; }
  .steps-mobile{ display:flex; }
  .scope-box.featured{ padding:32px 28px; }
  .subsection{ padding:28px; }
  .flow-chain{ grid-template-columns:1fr; gap:32px; }
  .flow-line{ display:none; }
  .flow-step:not(:last-child)::after{
    content:"↓"; display:block; margin-top:16px; color:var(--op-red); font-size:20px;
  }
  .tech-grid{ grid-template-columns:1fr; }
  .price-amount{ font-size:32px; }
  .contact-card{ flex-direction:column; align-items:flex-start; text-align:left; }

  /* pricing table: horizontal table -> stacked cards */
  .price-table-wrap{ overflow-x:visible; }
  .price-table{ display:block; width:100%; min-width:0; }
  .price-table thead{ display:none; }
  .price-table tbody,
  .price-table tfoot,
  .price-table tr{ display:block; width:100%; }
  .price-table tr{
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:14px 0;
  }
  .price-table td{
    display:block; padding:4px 0; border:none; text-align:right;
  }
  .price-table td:first-child{
    font-weight:700; color:var(--op-white); text-align:left; padding-bottom:8px;
  }
  .price-table td:not(:first-child){
    display:flex; justify-content:space-between; align-items:center;
  }
  .price-table td:not(:first-child)::before{
    content:attr(data-label);
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--op-text-dim);
  }
}