/* =========================================================
   ConstructFlex — WOW Theme (clean, polished)
   Dark base + soft light alt, glass, depth, full-width pills
   ========================================================= */

/* ---------- Root tokens ---------- */
:root{
  /* Dark palette */
  --bg:#0F1011;
  --ink:#ECEFF4;
  --muted:#A9B2C2;
  --surface:#14161A;
  --surface-2:#1B1E23;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  /* Light (alt) */
  --alt:#ECEFF4;
  --alt-ink:#0E1116;
  --alt-muted:#697586;
  --alt-line:#D7DDE6;

  /* Brand */
  --brand:#FFC107;
  --brand-600:#E0A800;

  /* Depth/shadows */
  --r-lg:16px; --r-md:12px; --r-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 12px 28px rgba(0,0,0,.45);
  --depth: drop-shadow(0 22px 32px rgba(0,0,0,.45));

  /* Type scales */
  --h1: clamp(2.25rem, 1.2rem + 3vw, 3.25rem);
  --h2: clamp(1.5rem, 1rem + 1.6vw, 2.125rem);

  /* Link colors (defaults) */
  --bs-link-color: #cfd6e2;
  --bs-link-hover-color: #ffd35a;
}

html, body{ background:var(--bg); color:var(--ink); }

/* ---------- Text utilities ---------- */
.display-title{ font-size:var(--h1); font-weight:800; letter-spacing:.2px; }
.text-secondary{ color: var(--muted) !important; }
.text-secondary-strong{ color:#DDE4ED !important; }
.text-secondary-alt{ color: var(--alt-muted) !important; }
.accent{ color:var(--brand); }

/* ---------- Sections ---------- */
.section{ background:var(--surface); color:var(--ink); }
.section--alt{ background:var(--alt); color:var(--alt-ink); }
.pad-y{ padding:3.5rem 0; }
.border-bottom{ border-color:var(--line)!important; }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .66rem; border-radius:999px; font-weight:700;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
}
.chip--brand{ background:rgba(255,193,7,.10); border-color:rgba(255,193,7,.28); }
.chip--outline{ background:transparent; border-color:var(--line-strong); }
.chip--ghost{ background:rgba(255,255,255,.04); border-color:var(--line); }

/* ---------- Glass ---------- */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter: blur(8px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Cards ---------- */
.card{
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.section--alt .card{
  background:#F2F5F9;
  color:var(--alt-ink);
  border:1px solid var(--alt-line);
}
.card .card-body{ padding:16px 18px; }
.card.lift{ transition: transform .18s ease, box-shadow .18s ease; }
.card.lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---------- Icon box ---------- */
.icon-box{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;font-size:20px;
  background:rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.35); color:#111213;
}
.icon-box.sm{ width:36px;height:36px;border-radius:10px;font-size:16px; }

/* ---------- Buttons ---------- */
.btn{ font-weight:800; letter-spacing:.2px; }
.btn-primary{
  --bs-btn-color:#111213;
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#111213;
  --bs-btn-hover-bg:var(--brand-600);
  --bs-btn-hover-border-color:var(--brand-600);
  --bs-btn-active-color:#111213;
  --bs-btn-active-bg:var(--brand-600);
  --bs-btn-active-border-color:var(--brand-600);
  --bs-btn-disabled-color:#111213;
  --bs-btn-disabled-bg:var(--brand);
  --bs-btn-disabled-border-color:var(--brand);
  --bs-btn-focus-shadow-rgb:255,193,7;
}
.btn-outline-secondary{
  --bs-btn-color:#EDEFF2;
  --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#0E0F10;
  --bs-btn-hover-border-color:var(--line-strong);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#0E0F10;
  --bs-btn-active-border-color:var(--line-strong);
}
.section--alt .btn-outline-secondary{
  --bs-btn-color:var(--alt-ink);
  --bs-btn-border-color:var(--alt-ink);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--alt-ink);
  --bs-btn-hover-border-color:var(--alt-ink);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--alt-ink);
  --bs-btn-active-border-color:var(--alt-ink);
}
.btn-lg{ padding:.78rem 1.05rem; border-radius:14px; }

/* Safety: keep dark text on brand btn in all states */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus{ color:#111213 !important; }

/* ---------- KPI ---------- */
.kpi-card{ padding:14px 16px; border-radius:var(--r-lg); }
.kpi-label{ font-size:.9rem; color:var(--muted); }
.kpi-value{ font-size:2.2rem; font-weight:800; line-height:1.05; color:#fff; }
.kpi-desc{ font-size:.9rem; color:var(--muted); }

/* ---------- Stack head ---------- */
.stack-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }

/* ---------- HERO ---------- */
.hero--wow{ position:relative; overflow:hidden; min-height:620px; display:grid; align-items:center; }
.hero--wow .container{ position:relative; z-index:3; padding:2.75rem 0; }
.hero-bg{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1200px 600px at 78% 40%, rgba(255,193,7,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,255,255,.05), transparent 52%),
    linear-gradient(180deg, #0F1011 0%, #14161A 100%);
}
.orb{ position:absolute; z-index:2; filter: blur(16px) saturate(115%); opacity:.18; pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(255,193,7,.60), rgba(255,193,7,0) 60%);
}
.orb--1{ width:360px; height:360px; right:-120px; top:12%; }
.orb--2{ width:260px; height:260px; right:20%; bottom:-60px; }
.hero .hero-content{ position:relative; z-index:3; }
@media (min-width:992px){ .hero .hero-content{ padding-right: clamp(24px, 7vw, 200px); } }
.hero-figure{ position:absolute; right:-4vw; bottom:-1.2vh; z-index:2; will-change:transform; transform-origin:center; transition:transform .2s ease; pointer-events:none; }
.hero-ill{
  height:min(62vh, 620px); width:auto; object-fit:contain;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.55));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12%, #000 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12%, #000 100%);
  user-select:none; pointer-events:none;
}
@media (min-width:992px) and (max-width:1399.98px){
  .hero-ill{ height:min(56vh,660px); } .hero-figure{ right:-6vw; }
}
@media (max-width: 991.98px){
  .hero-figure, .hero-figure .hero-ill{ display:none!important; }
  .hero--wow{ min-height:420px; }
}

/* ---------- Feature Pills ---------- */
.feature-pills{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:.66rem; width:100%; padding:0; margin:1rem 0 0 0; list-style:none; z-index:3;
}
.feature-pill{
  display:flex; align-items:center; gap:.6rem; padding:.56rem .72rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  color:var(--ink); box-shadow:var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.feature-pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pill-icon{
  width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:999px;
  background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.28); color:#ffcc33; font-size:15px;
  filter:var(--depth);
}
.pill-text{ color:#E9EDF5; line-height:1.2; letter-spacing:.1px; }

/* ---------- Forms ---------- */
.form-control, .form-select{ background:#191B1F; color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.form-control::placeholder{ color:#B9C1CD; }
.form-control:focus, .form-select:focus{ border-color:#ffffff22; box-shadow:0 0 0 .2rem rgba(255,255,255,.08); }
.section--alt .form-control, .section--alt .form-select{ background:#FFFFFF; color:var(--alt-ink); border:1px solid var(--alt-line); }
.section--alt .form-control::placeholder{ color:#8E98A7; }
.section--alt .form-control:focus, .section--alt .form-select:focus{ border-color:#CBD1DA; box-shadow:0 0 0 .2rem rgba(13,14,16,.06); }

/* ---------- Section headings ---------- */
#modules h2, #why h2, #how h2, #security h2, #pricing h2, #faq h2, #contact h2{ font-size:var(--h2); }

/* ---------- Module hover ---------- */
#moduleGrid .card{ height:100%; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; }
#moduleGrid .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(255,255,255,.18); }
.section--alt #moduleGrid .card:hover{ border-color:#C9D2DF; background:#EDEFF4; }

/* ---------- Badges ---------- */
.badge.text-bg-success{ background:rgba(34,197,94,.15)!important; color:#34D399!important; border:1px solid rgba(52,211,153,.35); }
.badge.text-bg-warning{ background:rgba(255,193,7,.15)!important; color:#FFCA2C!important; border:1px solid rgba(255,193,7,.35); }
.badge.text-bg-info{ background:rgba(59,130,246,.15)!important; color:#93C5FD!important; border:1px solid rgba(147,197,253,.35); }

/* ---------- Links ---------- */
a{ color:var(--bs-link-color); text-decoration:underline; text-decoration-color:transparent; transition:color .15s ease, text-decoration-color .15s ease, opacity .15s ease; }
a:hover{ color:var(--bs-link-hover-color); text-decoration-color:currentColor; }
.section--alt{ --bs-link-color:#2e3440; --bs-link-hover-color:#111215; }
.card a{ color:var(--bs-link-color); }
.card a:hover{ color:var(--bs-link-hover-color); }
.text-primary{ color:var(--brand) !important; }
.link-primary{ color:var(--bs-link-color) !important; }
.link-primary:hover{ color:var(--bs-link-hover-color) !important; }
.btn-link{ color:var(--bs-link-color); font-weight:600; text-underline-offset:2px; }
.btn-link:hover{ color:var(--bs-link-hover-color); text-decoration-color:currentColor; }

/* ---------- Accordion (dark) ---------- */
.accordion-dark{
  --bs-accordion-color: var(--ink);
  --bs-accordion-bg: var(--surface-2);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: var(--r-lg);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--surface-2);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: .9rem;
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: #191C21;
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(255,255,255,.08);
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: .9rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23EDEFF2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5.5 8 11.5 14 5.5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23EDEFF2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 10.5 8 4.5 14 10.5'/%3e%3c/svg%3e");
}
.accordion-dark .accordion-item{ background:var(--surface-2); border-color:var(--line); border-radius:var(--r-lg); overflow:hidden; }
.accordion-dark .accordion-button{ color:var(--ink); background:var(--surface-2); border-bottom:1px solid var(--line); }
.accordion-dark .accordion-button:not(.collapsed){ background:#191C21; box-shadow: inset 0 -1px 0 var(--line); }
.accordion-dark .accordion-body{ color:var(--muted); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line); }
.site-footer hr{ border-color:var(--line); }
.site-footer a{ color:var(--bs-link-color); text-decoration:none; }
.site-footer a:hover{ color:var(--bs-link-hover-color); text-decoration:underline; }

/* ---------- Motion reduction ---------- */
@media (prefers-reduced-motion: reduce){
  .lift, .fx-float, [data-aos]{ transition:none!important; transform:none!important; }
}

/* ===== WHY Slider (polished) ===== */
.why-slider{ position: relative; }

.why-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(92%, 360px); /* mobil: skoro celá karta */
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 10px 2px;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.why-track::-webkit-scrollbar{ display:none; }

@media (min-width: 576px){
  .why-track{ grid-auto-columns: calc(50% - 12px); }   /* ~2 karty */
}
@media (min-width: 992px){
  .why-track{ grid-auto-columns: calc(33.333% - 12px); } /* ~3 karty */
}

.why-card{
  position: relative;
  scroll-snap-align: start;
  min-height: 210px;
  overflow: hidden;
}
.why-card .card-body{ position: relative; z-index: 2; }

/* rezervace místa pro PNG jen pokud existuje */
.why-card.has-fig .card-body{
  padding-right: clamp(72px, 36%, 160px);
}

/* ikonky sjednoceně */
#why .icon-box{
  background: rgba(255,193,7,.10);
  border: 1px solid rgba(255,193,7,.35);
  color: #ffcc33;
}
#why .card.lift:hover .icon-box{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.45);
  color: #ffd96b;
}

/* PNG uvnitř karty (pevný limit) */
.why-fig{
  position: absolute;
  right: -6px;
  bottom: -8px;
  max-width: 38%;
  max-height: 110px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
  transition: transform .25s ease, opacity .25s ease;
}
.why-card:hover .why-fig{ transform: translateY(-2px) scale(1.02); }

/* menší breakpoints */
@media (max-width: 767.98px){
  .why-card.has-fig .card-body{ padding-right: clamp(64px, 32%, 140px); }
  .why-fig{ max-width: 36%; max-height: 100px; }
}
@media (max-width: 575.98px){
  .why-card.has-fig .card-body{ padding-right: clamp(56px, 30%, 120px); }
  .why-fig{ max-width: 34%; max-height: 96px; }
}
@media (max-width: 420px){
  .why-card.has-fig .card-body{ padding-right: 0; }
  .why-fig{ display: none; }
}

/* Šipky */
.why-nav .btn{ border-radius: 999px; padding: .42rem .58rem; }

/* ===== Modules: figure look ===== */
#modules .icon-box{
  background: rgba(255,193,7,.10);
  border: 1px solid rgba(255,193,7,.35);
  color: #ffcc33;
}
.module-figure{
  position:absolute; right:-8px; bottom:-10px;
  max-width: clamp(160px, 38%, 240px);
  height:auto; opacity:.95;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.5));
  pointer-events:none; user-select:none; transform: translateZ(0);
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}
.card.lift:hover .module-figure{
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}
@media (max-width:1199.98px){ .module-figure{ max-width: clamp(150px, 34%, 220px); } }
@media (max-width: 991.98px){ .module-figure{ display:none; } }

/* ===== WHY: dvousloupcová karta + media 2:1 vpravo ===== */

/* zneškodnit staré chování, pokud zůstalo v CSS */
.why-card.has-fig .card-body{ padding-right: 0 !important; }
.why-fig{ display: none !important; }

/* vnitřek karty = grid: text | media-bay */
.why-inner{
  display:grid;
  grid-template-columns: 1fr minmax(180px, 42%);
  gap: 14px;
  align-items: center;
  min-height: 190px;
  padding: 16px 18px;            /* původní padding card-body */
}

/* text vlevo */
.why-content{ min-width: 0; }     /* správné zalamování dlouhého textu */

/* media bay vpravo – udržuje 2:1 a centrování */
.why-media{
  aspect-ratio: 2 / 1;            /* ⟵ požadovaný poměr */
  display: grid;
  place-items: center;            /* centrování obrázku uprostřed */
  padding: 6px 0;                 /* drobný vnitřní “air” */
  /* volitelné: oddělovací linka:
  border-left: 1px solid var(--line);
  */
}
.why-media img{
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;            /* nikdy nepřeteče */
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.45));
  opacity: .95;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.card.lift:hover .why-media img{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}

/* responzivně: na mobilu obrazek pod text, stále 2:1 a centrovaný */
@media (max-width: 575.98px){
  .why-inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .why-media{
    width: 80%;
    margin: 8px auto 2px;         /* zarovnat doprostřed karty */
  }
}

/* FAQ grid: 1 sloupec na mobilu, 2 sloupce od md */
.faq-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .faq-grid{ grid-template-columns: 1fr 1fr; }
}
/* karty kategorií */
.faq-grid > .card .card-body{ padding-bottom: 8px; }
.faq-grid .accordion .accordion-item + .accordion-item{ border-top: 1px solid var(--line); }