/* ============================================================
   SKICY GRAFIK + WRAPPERY v duchu ecomail.cz
   Vše je inline SVG / CSS — žádné obrázky. Slouží jako podklad
   pro Markovu vlastní grafiku, ne jako finální art.
   ============================================================ */

/* --- gradientové karty (ecomail „Výkonnější kampaně" trojice) --- */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gcard{border-radius:26px;padding:34px 30px 0;overflow:hidden;position:relative;min-height:440px;
  display:flex;flex-direction:column}
.gcard h3{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;line-height:1.12}
.gcard .stagewrap{position:relative;margin-top:26px;flex:0 0 auto}
.gcard-green{background:linear-gradient(160deg,#dcecc4 0%,#eef5e2 55%,#f7faf0 100%)}
.gcard-baby{background:linear-gradient(160deg,#c3e4f6 0%,#e6f7fc 55%,#f6fcfe 100%)}
.gcard-warm{background:linear-gradient(160deg,#fdfae4 0%,#f8f3e6 50%,#f4eeea 100%)}
.gcard h3{color:var(--green-deep)}

/* --- mini UI skici uvnitř karet --- */
.ui{background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(20,20,20,.10);padding:14px 16px;font-size:.83rem}
.ui + .ui{margin-top:10px}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.ui-row + .ui-row{border-top:1px solid #f0f2ea}
.ui-label{display:flex;align-items:center;gap:9px;color:#141414;font-weight:600}
.ui-dot{width:22px;height:22px;border-radius:7px;background:var(--green-soft);display:grid;place-items:center;font-size:.78rem}
.ui-val{font-weight:800;color:var(--green-hover);white-space:nowrap}
.ui-head{font-weight:800;color:var(--green-deep);margin-bottom:8px;font-size:.92rem}
.ui-bar{height:7px;border-radius:99px;background:#eef1e6;overflow:hidden;margin:5px 0 10px}
.ui-bar i{display:block;height:100%;background:var(--green);border-radius:99px}
.ui-tag{display:inline-block;background:var(--baby);color:var(--blue-ink);font-weight:700;font-size:.74rem;
  padding:4px 9px;border-radius:8px}
.ui-check{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.84rem}
.ui-check i{width:17px;height:17px;border-radius:5px;background:var(--green);color:#fff;display:grid;place-items:center;
  font-size:.62rem;font-style:normal;flex:0 0 auto}
.ui-check.off i{background:#dfe3d5}
.ui-check.off span{color:#9aa08c}

/* telefon */
.phone{width:200px;margin:0 auto;background:#141414;border-radius:26px 26px 0 0;padding:9px 9px 0;
  box-shadow:0 18px 40px rgba(20,20,20,.22)}
.phone-in{background:#fff;border-radius:19px 19px 0 0;overflow:hidden;padding-bottom:2px}
.phone-photo{height:96px;background:linear-gradient(135deg,#dbe8c2,#eef4e2);display:grid;place-items:center;
  font-size:1.7rem}
.phone-body{padding:12px 13px 16px}

/* plovoucí kartičky kolem skici */
.fl{position:absolute;background:#fff;border-radius:13px;box-shadow:0 8px 26px rgba(20,20,20,.14);
  padding:9px 12px;font-size:.78rem;font-weight:700;color:#141414;display:flex;align-items:center;gap:8px;line-height:1.3}
.fl small{display:block;font-weight:500;color:#6f7268;font-size:.72rem}
.fl .d{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:.8rem;flex:0 0 auto}
.fl .d.g{background:var(--green-soft)} .fl .d.b{background:var(--baby)}

/* --- organické tvary (blob) za fotkou --- */
.blobwrap{position:relative;display:grid;place-items:center}
.blobwrap svg.blobs{position:absolute;inset:-8% -6%;width:112%;height:116%;z-index:0}
.blobwrap .fg{position:relative;z-index:1;width:78%}
.sparkle{position:absolute;z-index:2;font-size:1.5rem;opacity:.9}

/* --- pattern na pozadí (ecomail „obláčky") --- */
.pattern{position:relative;overflow:hidden}
.pattern > svg.pat{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.pattern > .wrap{position:relative;z-index:1}

/* --- sticky stack scroll: slidy se překládají přes sebe --- */
.stack{position:relative}
.stack-item{position:sticky;top:88px;border-radius:32px;padding:56px;margin-bottom:26px;
  box-shadow:0 -6px 30px rgba(20,20,20,.07)}
.stack-item .inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1000px;margin:0 auto}
.stack-item:nth-child(1){background:linear-gradient(150deg,#e8f3d8,#f4f8ec)}
.stack-item:nth-child(2){background:linear-gradient(150deg,#c3e4f6,#e6f7fc)}
.stack-item:nth-child(3){background:linear-gradient(150deg,#e6f0d3,#f7faf0)}
.stack-item:nth-child(4){background:linear-gradient(150deg,#fdfae4,#f4eeea)}
.stack-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--green);
  color:#fff;font-weight:800;margin-bottom:14px}
.stack-item h3{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--green-deep);letter-spacing:-.02em;margin-bottom:.4em}

@media(max-width:980px){
  .gcards{grid-template-columns:1fr}
  .gcard{min-height:0;padding:28px 22px 0}
  .stack-item{position:static;padding:32px 22px;border-radius:26px;min-height:0}
  .stack-item .inner{grid-template-columns:1fr;gap:26px}
  .blobwrap .fg{width:92%}
}