/* ============================================================
   Houby z Vršovic — marketing homepage styles
   (loaded after app.css — reuses its tokens)
   ============================================================ */
.container{width:min(1240px,100% - 48px); margin-inline:auto}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); margin-bottom:14px}
.section{padding:84px 0}
.section-head{max-width:62ch; margin:0 auto 46px; text-align:center}
.section-head h2{font-size:clamp(30px,4.4vw,46px)}
.section-head p{color:var(--ink-2); font-size:17px; margin:14px auto 0}
.linkmore{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; color:var(--forest); font-size:15px}
.linkmore:hover{gap:11px}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; color:#F6F2E6; overflow:hidden}
.hero-bg{position:absolute; inset:0}
.hero-bg .photo{width:100%; height:100%; border-radius:0}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,28,20,.46) 0%,rgba(22,28,20,.30) 38%,rgba(22,28,20,.66) 100%)}
.hero-in{position:relative; text-align:center; width:min(880px,100% - 48px); margin:0 auto; padding:60px 0 200px}
.hero-eyebrow{color:#F3E4AE; text-shadow:0 1px 1px rgba(10,14,8,.6), 0 2px 18px rgba(10,14,8,.55)}
.hero h1{font-size:clamp(44px,8vw,92px); color:#fff; letter-spacing:-.02em; text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-sub{font-size:clamp(17px,2.2vw,21px); color:#EDE8DA; max-width:46ch; margin:22px auto 0}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.btn-onlight{background:#F6F2E6; color:var(--forest)}
.btn-onlight:hover{background:#fff; transform:translateY(-1px)}
.btn-glass{background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); backdrop-filter:blur(4px)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.hero-cards{position:absolute; left:0; right:0; bottom:-1px; z-index:3}
.hero-cards .container{display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:rgba(20,26,18,.34); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.16); border-radius:18px 18px 0 0; overflow:hidden}
.hcard{padding:26px 30px; border-left:1px solid rgba(255,255,255,.14); color:#F4EFE2}
.hcard:first-child{border-left:none}
.hcard h3{color:#fff; font-size:19px; display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--amber); padding-bottom:4px}
.hcard p{font-size:14px; color:#E2DDCD; margin:12px 0 0}

/* ---------- product preview ---------- */
.mkt-products .phead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap}
.mkt-products .phead h2{font-size:clamp(28px,4vw,40px)}
.mkt-products .phead p{color:var(--ink-2); max-width:48ch; margin:10px 0 0}
.mkt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}

/* ---------- why us ---------- */
.why{background:#fff}
.why-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.why-tx h2{font-size:clamp(30px,4.4vw,46px)}
.why-tx p{color:var(--ink-2); font-size:17px; margin:18px 0 0; max-width:46ch}
.why-stats{display:flex; gap:42px; margin-top:34px; flex-wrap:wrap}
.stat .big{font-family:var(--font-head); font-weight:800; font-size:46px; line-height:1; color:var(--ink)}
.stat p{font-size:13.5px; color:var(--muted); margin:8px 0 0; max-width:18ch}
.why-media{display:grid; place-items:center}
.brand-card{width:100%; max-width:440px; aspect-ratio:1/1; background:var(--yellow); border-radius:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; box-shadow:0 30px 70px -34px rgba(140,110,20,.6); position:relative; overflow:hidden}
.brand-card::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(31,61,43,.05) 0 2px,transparent 2px 14px)}
.brand-card .crest-lg{width:120px; height:120px; border-radius:30px; background:rgba(31,61,43,.08); display:grid; place-items:center; color:var(--forest)}
.brand-card .bc-name{font-family:var(--font-head); font-weight:800; font-size:34px; color:var(--forest); letter-spacing:.02em; text-align:center; line-height:1.05}
.brand-card .bc-name em{font-style:normal; font-weight:600; font-size:24px; display:block}
.brand-card .bc-sub{font-size:11px; font-weight:800; letter-spacing:.18em; color:#fff; background:var(--brown); padding:5px 14px; border-radius:7px; white-space:nowrap}

/* ---------- diff (dark sensor) ---------- */
.diff{background:var(--cream-2)}
.diff-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:54px; align-items:center}
.diff-panel{background:var(--slate); border-radius:var(--radius-lg); padding:24px}
.diff-panel .sensors{grid-template-columns:1fr 1fr; gap:16px}
.diff-tx .block{padding:18px 0; border-bottom:1px solid var(--line-2)}
.diff-tx .block:last-child{border-bottom:none}
.diff-tx h3{font-size:18px; display:flex; align-items:center; gap:10px}
.diff-tx h3 .dot{width:9px; height:9px; border-radius:2px; background:var(--moss); transform:rotate(45deg); flex:none}
.diff-tx p{color:var(--ink-2); font-size:14.5px; margin:8px 0 0; padding-left:19px}

/* ---------- farm 4.0 ---------- */
.farm40{background:var(--slate); color:#E8EBE3; position:relative; overflow:hidden}
.farm40::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(214,168,79,.12) 1px,transparent 0); background-size:26px 26px; opacity:.5}
.farm40 .container{position:relative}
.farm40 .eyebrow{color:var(--amber)}
.farm40 h2{color:#F4F6EE; font-size:clamp(30px,4.4vw,46px); max-width:20ch}
.farm40 .f-lead{color:#aeb6ac; font-size:17px; max-width:54ch; margin:16px 0 0}
.farm-chips{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:44px 0 38px}
.fchip{background:var(--slate-2); border-radius:18px; padding:22px 18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.fchip .fic{width:42px; height:42px; border-radius:12px; background:rgba(214,168,79,.14); color:var(--amber); display:grid; place-items:center; margin-bottom:14px}
.fchip h4{color:#F2F4EC; font-size:16px}
.fchip p{color:#9aa49a; font-size:12.5px; margin:6px 0 0}

/* ---------- czech story ---------- */
.story{background:#fff}
.story-grid{display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:1fr 1fr; gap:18px; margin-top:42px; height:560px}
.story-grid .photo{height:100%; border-radius:20px}
.s1{grid-row:span 2}
.s4{grid-column:2; grid-row:2}

/* ---------- partners ---------- */
.partners{background:var(--cream-2); text-align:center}
.partners .myc{font-size:19px; font-style:italic; color:var(--forest); max-width:52ch; margin:0 auto 38px; font-family:var(--font-head); font-weight:500}
.partner-logos{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.plogo{height:84px; background:#fff; border:1px solid var(--line); border-radius:16px; display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.05em}

/* ---------- cta band ---------- */
.cta-band{background:var(--brown); color:#F6EFE4}
.cta-band .container{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.cta-band h2{color:#fff; font-size:clamp(28px,4vw,42px); max-width:16ch}
.cta-band p{color:#F0E6D8; font-size:16px; margin:14px 0 0; max-width:42ch}
.cta-form{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:22px; padding:30px}
.cta-form label{font-size:13px; font-weight:700; color:#F6EFE4}
.cta-input{display:flex; gap:10px; margin:10px 0 16px; flex-wrap:wrap}
.cta-input input{flex:1; min-width:180px; font-family:var(--font-body); font-size:15px; padding:14px 16px; border:none; border-radius:999px; background:#FBF9F2; color:var(--ink)}
.cta-input input:focus{outline:2px solid var(--amber)}
.cta-aud{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.cta-aud span{font-size:12.5px; font-weight:600; background:rgba(255,255,255,.14); padding:6px 12px; border-radius:999px}

@media(max-width:960px){
  .hero-cards{position:static; margin-top:-1px}
  .hero-cards .container{width:100%; border-radius:0}
  .hero-in{padding-bottom:70px}
  .why-grid,.diff-grid,.cta-band .container{grid-template-columns:1fr; gap:34px}
  .mkt-grid,.farm-chips,.partner-logos{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr 1fr; height:auto; grid-template-rows:none}
  .s1{grid-row:span 1}
  .s4{grid-column:auto; grid-row:auto}
  .section{padding:60px 0}
}
@media(max-width:620px){
  .hero-cards .container{grid-template-columns:1fr}
  .hcard{border-left:none; border-top:1px solid rgba(255,255,255,.14)}
  .hcard:first-child{border-top:none}
  .mkt-grid,.farm-chips,.partner-logos,.story-grid{grid-template-columns:1fr}
}