/*
  Požární kompas dřevostaveb – landing v3.4
  Rychlé ruční ladění:
  - posun CTA / info boxu: .hero-side { padding-top: ... }
  - šířka celé karty: .landing-card { width: min(...); }
  - krokové karty / zaoblená políčka: viz sekce KROKOVÉ KARTY NA LANDING PAGE
  - velikost krokových obrázků: .step-item img { width: ... }
  - dřevěný akcent: --wood
*/
:root{
  --navy:#10245d;
  --blue:#1d57d6;
  --light-blue:#dbe6fb;
  --wood:#ef9b5a;
  --text:#304462;
  --line:#d8e1ee;
  --card:#ffffff;
  --bg1:#edf2f7;
  --bg2:#f5f7fb;
  --shadow:0 24px 60px rgba(16,36,93,.08), 0 8px 18px rgba(16,36,93,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top left,#f3f6fb 0,#ebf0f7 40%,#edf2f8 100%);min-height:100%}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.landing-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.landing-card{width:min(1500px,100%);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.95));border:1px solid #d9e2ef;border-radius:34px;box-shadow:var(--shadow);padding:36px 44px 30px;position:relative;overflow:hidden}
.landing-card::before{content:"";position:absolute;right:-110px;top:-90px;width:430px;height:300px;background:radial-gradient(circle at center,rgba(29,87,214,.04) 1px, transparent 1px);background-size:28px 28px;opacity:.55;transform:rotate(8deg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);gap:42px;align-items:start}
.brand-logo{width:min(600px,100%);margin:0 0 12px}
.eyebrow{margin:10px 0 8px;font-size:1.05rem;font-weight:800;letter-spacing:.14em;color:var(--blue)}
h1{margin:0 0 16px;font-size:4.45rem;line-height:1.02;letter-spacing:-.04em;color:var(--navy)}
.lead{margin:0;max-width:840px;font-size:1.18rem;line-height:1.72;color:#425776}
.hero-side{display:grid;gap:26px;padding-top:145px}
.cta-button{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#1558dd,#1450c9);color:#fff;border-radius:22px;padding:26px 28px;box-shadow:0 18px 30px rgba(20,80,201,.22);font-size:1.12rem;font-weight:800}
.cta-icon,.cta-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);font-size:1.2rem;flex:0 0 auto}
.cta-arrow{font-size:2rem;line-height:1}
.notice-box{display:flex;gap:18px;align-items:flex-start;border:1px solid #d6e0ef;border-radius:20px;background:rgba(255,255,255,.82);padding:20px 22px}
.notice-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #91b0eb;color:var(--blue);font-weight:900;font-size:1.6rem;flex:0 0 auto}
.notice-box p{margin:0;font-size:1.08rem;line-height:1.6;color:#495f7f}
.notice-box strong{color:var(--navy)}

/* =========================================================
   KROKOVÉ KARTY NA LANDING PAGE
   ---------------------------------------------------------
   Toto je část, která vytváří zaoblená „políčka“ kolem
   tří kroků: Základ projektu / Klíčové scénáře / Doporučení.

   Rychlé ladění:
   - velikost karet:        .step-item { min-height / padding }
   - zaoblení:              .step-item { border-radius }
   - síla obrysu:           .step-item { border }
   - velikost obrázků:      .step-item img { width }
   - zarovnání šipek:       .step-arrow { transform }
   ========================================================= */
.steps-row{
  margin-top:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);
  align-items:center;
  gap:18px;
}
.step-item{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:318px;
  padding:18px 22px 20px;
  border:1px solid #d8e2f0;
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 32px rgba(16,36,93,.035);
  overflow:hidden;
}
.step-item img{
  width:min(310px,100%);
  height:auto;
  object-fit:contain;
  filter:none;
}
.step-arrow{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  font-size:3.4rem;
  color:var(--blue);
  line-height:1;
  transform:translateY(-6px);
  font-weight:300;
}

.footer-strip{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.feedback-box,.contact-box{display:flex;align-items:center;gap:18px}
.footer-icon{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:1px solid #d8e2f0;background:#fbfdff;color:var(--blue);font-size:1.9rem;flex:0 0 auto}
.feedback-box h3,.contact-box h3{margin:0 0 6px;font-size:1.02rem;color:var(--navy)}
.feedback-box p,.contact-box p{margin:0;font-size:1rem;line-height:1.55;color:#4b5f7d}
.contact-box{padding-left:22px;border-left:1px solid var(--line)}

@media (max-width: 1280px){
  h1{font-size:3.6rem}
  .hero-side{padding-top:120px}
  .step-item{min-height:290px;padding:16px 18px}
  .step-item img{width:min(285px,100%)}
  .step-arrow{font-size:3.0rem;width:46px;height:46px}
}
@media (max-width: 1100px){
  .landing-card{padding:28px 26px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-side{padding-top:0;max-width:560px}
  .steps-row{grid-template-columns:1fr;gap:14px}
  .step-item{min-height:auto;padding:16px}
  .step-item img{width:min(320px,100%)}
  .step-arrow{display:none}
  .footer-strip{grid-template-columns:1fr}
  .contact-box{padding-left:0;border-left:none}
}
@media (max-width: 720px){
  .landing-wrap{padding:12px}
  .landing-card{border-radius:22px;padding:20px 16px}
  .brand-logo{width:100%}
  h1{font-size:2.45rem}
  .eyebrow{font-size:.9rem}
  .lead{font-size:1rem}
  .cta-button{padding:18px 18px;font-size:1rem}
  .notice-box p{font-size:.98rem}
  .footer-icon{width:54px;height:54px}
}

/* v1.0 brand landing */
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(240,138,63,.09), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(13,27,61,.06), transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%)!important;
}
.logo img{width:360px;max-width:100%}
.hero::after{
  content:"";
  position:absolute;
  right:4%;
  bottom:0;
  width:42%;
  height:72%;
  opacity:.09;
  background:
    linear-gradient(90deg, transparent 0 18%, #0D1B3D 18% 19%, transparent 19% 38%, #0D1B3D 38% 39%, transparent 39%),
    repeating-linear-gradient(0deg, transparent 0 34px, #0D1B3D 35px 36px);
  pointer-events:none;
}

/* v1.0.8 – úvodní obrazovka s výrazným logem */
.logo img,
.logo-link img,
.hero-logo img{
  width:420px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.hero{
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 54%, rgba(255,255,255,.55) 100%),
    radial-gradient(circle at 74% 50%, rgba(240,138,63,.12), transparent 28%),
    linear-gradient(180deg,#ffffff,#f4f8fc);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background:
    linear-gradient(90deg, transparent 0 18%, #0D1B3D 18% 19%, transparent 19% 38%, #0D1B3D 38% 39%, transparent 39%),
    repeating-linear-gradient(0deg, transparent 0 34px, #0D1B3D 35px 36px);
  pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
}

/* v1.0.8 – úvodní strana respektuje nové SVG logo */
.brand-logo{
  width:min(620px,100%);
  height:auto;
  margin:0 0 56px;
  object-fit:contain;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.landing-card{
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 58%, rgba(255,255,255,.86) 100%);
}

/* Jemná technická kresba jen jako pozadí, aby šla snadno vypnout/upravit. */
.landing-card::after{
  content:"";
  position:absolute;
  right:40px;
  bottom:36px;
  width:360px;
  height:470px;
  pointer-events:none;
  opacity:.055;
  background:
    linear-gradient(90deg, transparent 0 18%, #0D1B3D 18% 19%, transparent 19% 38%, #0D1B3D 38% 39%, transparent 39%),
    repeating-linear-gradient(0deg, transparent 0 34px, #0D1B3D 35px 36px);
  border-radius:18px;
}

@media(max-width:900px){
  .brand-logo{width:min(460px,100%);margin-bottom:32px}
}

/* v1.0.8 – odstranění rušivých dekorativních pseudo-elementů na úvodní stránce */
.landing-card::before,
.landing-card::after,
.hero::before,
.hero::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

.landing-card{
  overflow:visible;
  background:#fff!important;
}

.brand-logo{
  width:min(620px,100%);
  margin:0 0 48px;
}

/* v1.0.8 – finální dotažení identity a ikon v patičce landing page */
.footer-icon--image{
  padding:0!important;
  background:#fff!important;
  border:1px solid #D9E2F0!important;
  box-shadow:0 10px 24px rgba(13,27,61,.06);
  overflow:hidden;
}

.footer-icon--image img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain;
  padding:7px;
}

.feedback-box,
.contact-box{
  min-width:0;
}

.footer-strip{
  position:relative;
  z-index:2;
}

/* Čistý podklad pro ruční doladění – žádné skryté pseudo dekorace */
.landing-card::before,
.landing-card::after,
.hero::before,
.hero::after{
  content:none!important;
  display:none!important;
}

/* v1.0.8 – finální ikony identity */
.footer-icon--image{
  padding:0!important;
  background:#fff!important;
  border:1px solid #D9E2F0!important;
  box-shadow:0 10px 24px rgba(13,27,61,.06);
  overflow:hidden;
}
.footer-icon--image img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain;
  padding:7px;
}