/* ============================================================
   Sweet Paws — nabídka spolupráce
   Design tokens
   ============================================================ */
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

:root{
  --bg-cream:  #faf9f7;
  --bg-cream2: #f8f6f2;
  --bg-tan:    #e7e2da;
  --ink:       #2b2b2b;
  --ink-soft:  #6b665c;
  --ink-faint: #8a8578;
  --ink-faint2:#a39d8f;
  --line:      #444038;
  --accent:      #5465ff;
  --accent-soft: #e4e7ff;
  --accent-soft2:#c8d0ff;
  --white:    #ffffff;
  --cream:    #faf9f7;

  --font-body:    'Inter', sans-serif;
  --font-display: 'Satoshi', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--ink); }
body{ font-family: var(--font-body); }
a{ color: var(--accent); }
a:hover{ color:#3b4ce0; }

/* ============================================================
   Stage — scales the fixed 1920×1080 deck to fit the viewport
   ============================================================ */
#stage{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}
#deck{
  position:absolute;
  top:0; left:0;
  width:1920px;
  height:1080px;
  transform-origin: top left;
}
.slide{
  position:absolute;
  top:0; left:0;
  width:1920px;
  height:1080px;
  display:none;
  flex-direction:column;
  font-family: var(--font-body);
  color:var(--ink);
}
.slide.is-active{ display:flex; }

/* ============================================================
   Shared components
   ============================================================ */
.row-head{ display:flex; align-items:center; gap:18px; }
.badge-num{
  width:52px; height:52px; border-radius:8px;
  background:var(--accent); color:var(--white);
  font-family:var(--font-display); font-weight:700; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
h2.h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:58px; color:var(--ink); }

.card{ background:var(--white); border-radius:24px; padding:38px; box-shadow:0 16px 32px -20px rgba(43,43,43,0.15); }
.card--accent{ background:var(--accent); box-shadow:none; }
.card--tan{ background:var(--bg-tan); box-shadow:none; }

.pill{
  background:var(--white); border-radius:100px; padding:26px 40px; font-size:26px;
  box-shadow:0 12px 24px -16px rgba(43,43,43,0.15);
}
.pill--accent{ background:var(--accent); color:var(--white); box-shadow:none; }

.kicker{
  font-size:22px; font-weight:600; color:var(--white);
  background:rgba(255,255,255,0.16); padding:10px 22px; border-radius:100px; letter-spacing:0.04em;
}

.price-row{ display:flex; align-items:center; background:var(--white); border-radius:16px; padding:14px 24px; }
.price-row .price-name{ font-size:23px; flex:1; }
.price-row .price-old{ font-size:20px; color:var(--ink-faint2); text-decoration:line-through; width:140px; text-align:right; }
.price-row .price-new{ font-size:23px; font-weight:700; color:var(--accent); width:140px; text-align:right; }

/* ============================================================
   Slide 01 — Titul
   ============================================================ */
.slide-01{ background:var(--ink); justify-content:space-between; padding:100px 120px; }
.slide-01 .row-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.slide-01 .logo{ height:83px; width:209px; display:block; object-fit:cover; }
.slide-01 .title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:118px; line-height:1.02; color:var(--cream); max-width:1550px; }
.slide-01 .row-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.slide-01 .intro-card{ background:var(--cream); border-radius:28px; padding:36px 44px; box-shadow:0 30px 60px -30px rgba(0,0,0,0.35); max-width:900px; }
.slide-01 .intro-card .eyebrow{ font-size:20px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; }
.slide-01 .intro-card .name{ font-size:32px; font-family:var(--font-display); font-weight:700; color:var(--ink); }
.slide-01 .intro-card p{ margin:14px 0 0; font-size:22px; color:var(--ink-soft); line-height:1.5; }

/* ============================================================
   Slide 02 — O vás a podnikání
   ============================================================ */
.slide-02{ background:var(--bg-cream2); padding:100px 120px; color:var(--ink); }
.slide-02 .grid-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:56px 0 30px; }
.slide-02 .grid-info .card{ padding:30px; }
.slide-02 .card-label{ font-size:19px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.slide-02 .card-value{ font-size:24px; font-weight:600; line-height:1.3; }
.slide-02 .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; flex:1; }
.slide-02 .grid-3 .card{ border-radius:22px; padding:36px; display:flex; flex-direction:column; gap:12px; box-shadow:none; }
.slide-02 .grid-3 .card-title{ font-size:22px; font-family:var(--font-display); font-weight:700; }
.slide-02 .grid-3 .card p{ margin:0; font-size:24px; line-height:1.5; }
.slide-02 .grid-3 .card--tan .card-title,
.slide-02 .grid-3 .card--tan p{ color:var(--ink); }
.slide-02 .grid-3 .card--tan p{ color:#4a463d; }
.slide-02 .grid-3 .card--accent .card-title{ color:var(--white); }
.slide-02 .grid-3 .card--accent p{ color:var(--accent-soft); }

/* ============================================================
   Slide 03 — Jak pracuji
   ============================================================ */
.slide-03{ background:var(--bg-cream); padding:100px 120px; color:var(--ink); }
.slide-03 .grid-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; flex:1; }
.slide-03 .step-card{ display:flex; flex-direction:column; gap:14px; padding:38px; }
.slide-03 .step-num{
  width:44px; height:44px; border-radius:50%; background:var(--bg-tan); color:var(--accent);
  font-family:var(--font-display); font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.slide-03 .step-card--accent .step-num{ background:rgba(255,255,255,0.2); color:var(--white); }
.slide-03 .step-title{ font-size:27px; font-weight:600; }
.slide-03 .step-card--accent .step-title{ color:var(--white); }
.slide-03 .step-card p{ margin:0; font-size:21px; color:var(--ink-soft); line-height:1.5; }
.slide-03 .step-card--accent p{ color:var(--accent-soft); }

/* ============================================================
   Slide 04 — Cíl webu a komunikace
   ============================================================ */
.slide-04{ background:var(--bg-cream2); padding:100px 120px; color:var(--ink); }
.slide-04 .row-head h2{ font-size:44px; line-height:1.25; max-width:1500px; }
.slide-04 .pills-row{ display:flex; gap:20px; margin:50px 0 44px; }
.slide-04 .pills-row .pill{ flex:1; border-radius:100px; padding:24px 32px; box-shadow:0 12px 24px -16px rgba(43,43,43,0.15); }
.slide-04 .pills-row .pill--accent{ box-shadow:none; }
.slide-04 .pill .pill-title{ font-size:20px; color:var(--accent); font-weight:700; }
.slide-04 .pill--accent .pill-title{ color:var(--white); }
.slide-04 .pill .pill-sub{ font-size:20px; color:var(--ink-soft); margin-top:4px; }
.slide-04 .pill--accent .pill-sub{ color:var(--accent-soft); }
.slide-04 .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; flex:1; }
.slide-04 .grid-2 .card{ padding:40px; }
.slide-04 .grid-2 .card--accent{ box-shadow:none; }
.slide-04 .grid-2 .eyebrow{ font-size:22px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:16px; }
.slide-04 .grid-2 .card:first-child .eyebrow{ color:var(--ink-faint); }
.slide-04 .grid-2 .card--accent .eyebrow{ color:var(--accent-soft2); }
.slide-04 .grid-2 p{ margin:0; font-size:26px; line-height:1.6; }
.slide-04 .grid-2 .card:first-child p{ color:var(--ink-faint2); }
.slide-04 .grid-2 .card--accent p{ color:var(--white); font-weight:600; }

/* ============================================================
   Slide 05 — Rozsah projektu
   ============================================================ */
.slide-05{ background:var(--bg-cream); padding:100px 120px; color:var(--ink); }
.slide-05 .grid-scope{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin-top:50px; flex:1; }
.slide-05 .scope-hero{ grid-row:span 2; background:var(--accent); border-radius:24px; padding:40px; display:flex; flex-direction:column; gap:16px; }
.slide-05 .scope-hero .num{ font-size:20px; color:var(--accent-soft2); }
.slide-05 .scope-hero .name{ font-size:32px; font-weight:700; color:var(--white); font-family:var(--font-display); }
.slide-05 .scope-hero p{ margin:0; font-size:22px; color:var(--accent-soft); line-height:1.6; }
.slide-05 .scope-card{ background:var(--white); border-radius:24px; padding:32px; box-shadow:0 16px 32px -20px rgba(43,43,43,0.15); }
.slide-05 .scope-card.is-tan{ background:var(--bg-tan); box-shadow:none; }
.slide-05 .scope-card .num{ font-size:18px; color:var(--ink-faint2); }
.slide-05 .scope-card.is-tan .num{ color:var(--ink-faint); }
.slide-05 .scope-card .name{ font-size:26px; font-weight:600; margin-top:8px; }
.slide-05 .scope-card p{ margin:8px 0 0; font-size:18px; color:var(--ink-soft); }

/* ============================================================
   Slide 06 — Cenová nabídka
   ============================================================ */
.slide-06{ background:var(--bg-cream2); padding:90px 120px 70px; color:var(--ink); }
.slide-06 .h2{ font-size:50px; }
.slide-06 .price-caption{ text-align:right; font-size:19px; color:var(--ink-faint2); margin:36px 0 6px; }
.slide-06 .price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; flex:1; }
.slide-06 .price-col{ display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   Slide 07 — Co není v ceně
   ============================================================ */
.slide-07{ background:var(--bg-cream); padding:100px 120px; color:var(--ink); }
.slide-07 .grid-2x3{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; flex:1; }
.slide-07 .grid-2x3 .card{ padding:36px; font-size:26px; line-height:1.5; }

/* ============================================================
   Slide 08 — Cena realizace
   ============================================================ */
.slide-08{ background:var(--accent); align-items:center; justify-content:center; padding:100px 120px; }
.slide-08 .kicker{ margin-bottom:60px; }
.slide-08 .price-card{
  background:var(--cream); border-radius:40px; padding:70px 100px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.4);
}
.slide-08 .price-old{ font-size:32px; color:var(--ink-faint2); text-decoration:line-through; }
.slide-08 .price-new{ font-family:var(--font-display); font-weight:900; font-size:150px; line-height:1; color:var(--ink); }
.slide-08 .price-sub{ font-size:26px; color:var(--ink-soft); }
.slide-08 .note{ margin:50px 0 0; font-size:24px; color:var(--accent-soft); text-align:center; max-width:1100px; }

/* ============================================================
   Slide 09 — Platební podmínky
   ============================================================ */
.slide-09{ background:var(--bg-cream2); padding:100px 120px; color:var(--ink); }
.slide-09 .grid-2x2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:56px; flex:1; }
.slide-09 .grid-2x2 .card-title{ font-size:30px; font-weight:700; font-family:var(--font-display); margin-bottom:12px; }
.slide-09 .grid-2x2 .card--accent .card-title{ color:var(--white); }
.slide-09 .grid-2x2 .card-desc{ font-size:25px; color:var(--ink-soft); }
.slide-09 .grid-2x2 .card--accent .card-desc{ color:var(--accent-soft); }

/* ============================================================
   Slide 10 — Co od vás budu potřebovat
   ============================================================ */
.slide-10{ background:var(--bg-cream); padding:100px 120px; color:var(--ink); }
.slide-10 .pills-wrap{ display:flex; flex-wrap:wrap; gap:20px; margin-top:60px; }

/* ============================================================
   Slide 11 — Doplňkové služby
   ============================================================ */
.slide-11{ background:var(--bg-cream2); padding:100px 120px; color:var(--ink); }
.slide-11 .service-list{ display:flex; flex-direction:column; gap:18px; margin-top:56px; flex:1; }
.slide-11 .service-row{
  display:flex; align-items:center; background:var(--white); border-radius:20px; padding:28px 40px;
  box-shadow:0 16px 32px -20px rgba(43,43,43,0.15);
}
.slide-11 .service-row .name{ font-size:30px; font-weight:500; flex:1; }
.slide-11 .service-row .price{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--accent); }

/* ============================================================
   Slide 12 — Kontakt
   ============================================================ */
.slide-12{ background:var(--bg-tan); align-items:center; justify-content:center; padding:100px 120px; position:relative; }
.slide-12 .logo{ position:absolute; top:100px; left:120px; height:105px; width:243px; display:block; object-fit:contain; }
.slide-12 .contact-card{
  border-radius:40px; padding:80px 100px; display:flex; flex-direction:column; gap:40px; max-width:1400px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.25); background:var(--ink);
}
.slide-12 .contact-card h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:72px; line-height:1.15; color:var(--cream); }
.slide-12 .contact-footer{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); padding-top:36px; }
.slide-12 .contact-footer .name-block{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.slide-12 .contact-footer .name-block div{ font-size:22px; color:var(--cream); }
.slide-12 .contact-footer .info-block{ display:flex; flex-direction:column; gap:8px; text-align:right; }
.slide-12 .contact-footer .info-block div{ font-size:26px; color:var(--cream); }

/* ============================================================
   Navigation chrome
   ============================================================ */
#nav{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  background:rgba(43,43,43,0.85); color:var(--cream);
  padding:10px 16px; border-radius:100px;
  font-family:var(--font-body); font-size:15px;
  z-index:10;
  backdrop-filter: blur(6px);
}
#nav button{
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.12); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
#nav button:hover{ background:rgba(255,255,255,0.22); }
#nav .count{ min-width:56px; text-align:center; letter-spacing:0.02em; }

@media (max-width: 640px){
  #nav{ font-size:13px; }
}