/* RESET & NORMALIZE (Mobile-first) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
  box-sizing: border-box;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  line-height: 1.6;
  font-family: 'Roboto', sans-serif;
  background: #F5F6FA;
  color: #242C6D;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color 0.18s; }

/* ----- BRAND COLORS & FONTS ----- */
:root {
  --color-primary: #242C6D;
  --color-secondary: #F5F6FA;
  --color-accent: #FFB300;
  --color-accent-bright: #FFD271;
  --color-cta: #FFB300;
  --color-error: #e84118;
  --color-success: #44bd32;
  --font-display: 'Montserrat', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;
}

/* ----- LAYOUT UTILS ----- */
.container {
  width: 100%;
  max-width: 1240px;
  padding: 0 16px;
  margin: 0 auto;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 20px 0 rgba(36,44,109,0.08);
}
.content-wrapper {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(36,44,109,0.07);
  padding: 24px 20px;
  margin-bottom: 20px;
  position: relative;
  min-width: 260px;
  flex: 1 1 260px;
  transition: transform 0.25s cubic-bezier(.35,1,.63,1), box-shadow 0.18s;
}
.card:hover {
  transform: translateY(-6px) scale(1.025) rotate(-1deg);
  box-shadow: 0 8px 32px 0 rgba(255,179,0,0.16);
}

.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #fffbe6; /* light yellow for playful look */
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgba(36,44,109,0.10);
  margin-bottom: 20px;
  min-width: 260px;
  max-width: 420px;
  color: #212453; /* darker text for contrast */
  transition: box-shadow 0.19s;
}
.testimonial-card:hover {
  box-shadow: 0 6px 24px 0 rgba(255,179,0,0.19);
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.12rem; }
.subtitle {
  font-size: 1.18rem;
  color: #4862A6;
  font-family: var(--font-body);
  margin-bottom: 12px;
}
p,li,td,th {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: #353773;
  letter-spacing: 0.001em;
}
.brand-tagline {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fffbe6;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  margin-top: 10px;
}
strong { font-weight: 700; color: var(--color-primary); }

/* ----- MAIN NAVIGATION (DESKTOP) ----- */
header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(36,44,109,0.09);
  position: sticky;
  top: 0;
  z-index: 30;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  max-width: 1240px;
  margin: 0 auto;
}
.main-nav img {
  height: 38px;
}
.main-nav ul {
  display: flex;
  gap: 16px;
  align-items: center;
}
.main-nav li {
  display: flex; align-items: center;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  transition: background 0.16s, color 0.15s;
  color: var(--color-primary);
}
.main-nav a:hover,
.main-nav li a:focus {
  background: var(--color-accent);
  color: #fff;
}
.cta-primary {
  background: var(--color-accent);
  color: #211900;
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  outline: none;
  border-radius: 18px;
  padding: 12px 28px;
  font-size: 1.11rem;
  box-shadow: 0 2px 10px rgba(255,179,0,0.12);
  cursor: pointer;
  transition: background 0.19s, box-shadow 0.18s, color 0.15s, transform 0.13s;
  text-align: center;
  margin-left: 18px;
}
.cta-primary:hover, .cta-primary:focus {
  background: #ffcb37;
  color: #292929;
  box-shadow: 0 8px 20px rgba(255,179,0,0.17);
  transform: translateY(-2px) scale(1.036) rotate(-2deg);
}


/* ----- HERO SECTION ----- */
.hero {
  background: linear-gradient(90deg, #ffeea0 0%, #FFB300 100%);
  border-radius: 0 0 40px 40px;
  padding: 50px 0 36px 0;
  margin-bottom: 44px;
  animation: bgwave 7s infinite linear alternate;
}
@keyframes bgwave {
  0% { box-shadow: 0 8px 56px 0 #ffb30010; }
  100% { box-shadow: 0 12px 80px 0 #ffb30033; }
}
.hero .content-wrapper {
  align-items: flex-start;
  gap: 22px;
}
.hero h1 {
  color: #23244b;
  font-size: 2.5rem;
  line-height: 1.13;
  text-shadow: 0 2px 0 #fff8dc44;
  margin-bottom: 10px;
}
.hero .cta-primary { margin-top: 17px; }

/* ----- FEATURE LISTS & ICONS ----- */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 10px;
}
.feature-list li {
  flex: 1 1 200px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 14px 0 rgba(255,179,0,0.08);
  padding: 24px 16px 16px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  min-width: 160px;
  transition: box-shadow 0.18s, transform 0.18s;
}
.feature-list li:hover {
  box-shadow: 0 8px 24px 0 rgba(255,179,0,0.17);
  transform: scale(1.03) rotate(-2deg);
}
.feature-list img {
  height: 38px; width: 38px; margin-bottom: 8px;
  background: #ffeea090;
  border-radius: 50%;
  padding: 3px;
  transition: background 0.14s;
}
.feature-list li:hover img { background: #ffecb080; }

/* ----- SERVICE LISTS ----- */
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-top: 12px;
}
.service-list > div {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px 0 #242c6d13;
  padding: 22px 18px 28px 18px;
  min-width: 210px;
  max-width: 260px;
  flex: 1 1 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transition: box-shadow 0.16s, transform 0.14s;
  gap: 10px;
}
.service-list > div:hover {
  box-shadow: 0 7px 20px #ffb3002a;
  transform: scale(1.04) rotate(1deg);
}
.service-price, .service-list span {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.025em;
  font-size: 1.08em;
  background: #FFF8E1;
  padding: 5px 14px;
  border-radius: 11px;
}

/* ----- TESTIMONIALS ----- */
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
  justify-content: flex-start;
}
.testimonial-card span {
  font-size: 1.1rem;
  color: #FFB300;
  font-family: var(--font-display);
  margin-top: 5px;
}

/* ----- BUTTONS & INTERACTIVE ELEMENTS ----- */
button, .btn {
  font-family: var(--font-display);
  border: none;
  border-radius: 20px;
  padding: 12px 22px;
  background: var(--color-accent);
  color: #23244B;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.15s, box-shadow 0.16s, color 0.14s, transform 0.11s;
  box-shadow: 0 2px 8px #ffb3001a;
}
button:hover,.btn:hover,button:focus{background:#ffd271;color:#23244B;box-shadow:0 5px 18px #ffb30036;transform:translateY(-2px) rotate(-1deg);}
.mobile-menu-toggle {
  display: none;
  background: var(--color-accent);
  color: #23244B;
  font-size: 2.1rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  position: absolute;
  right: 14px; top: 10px;
  z-index: 60;
  border: none;
  box-shadow: 0 1px 10px 0 #ffb30021;
  align-items: center; justify-content: center; display: flex;
  transition: background 0.18s, color 0.15s, transform 0.12s;
}
.mobile-menu-toggle:active { transform: scale(0.92) rotate(4deg); }

/* ----- MOBILE NAVIGATION ----- */
.mobile-menu {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(127deg, #fffbe6 70%, #f5f6fa 100%);
  box-shadow: 0 10px 40px 0 #242c6d22;
  z-index: 1000;
  transform: translateX(-100vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform 0.38s cubic-bezier(.43,1.13,.55,1.05), box-shadow 0.22s;
  pointer-events: none;
  opacity: 0;
}
.mobile-menu.open {
  transform: translateX(0);
  pointer-events: all;
  box-shadow: 0 0 0 9999px #242c6d44;
  opacity: 1;
}
.mobile-menu-close {
  text-align: right;
  background: transparent;
  color: #242C6D;
  font-size: 2rem;
  border-radius: 50%;
  border: none;
  padding: 12px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 20px; right: 18px;
  z-index: 1010;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.mobile-menu-close:focus,
.mobile-menu-close:hover {
  background: #ffd271;
  color: #23244B;
}
.mobile-nav {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  padding: 36px 36px 0 32px;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.37rem;
  font-weight: 600;
  background: #fff;
  color: var(--color-primary);
  padding: 12px 22px;
  border-radius: 15px;
  transition: background 0.18s, color 0.14s;
  min-width: 220px;
}
.mobile-nav a:focus, .mobile-nav a:hover {
  background: #ffd271;
  color: #23244B;
}

/* ----- CTA SECTION ----- */
.cta-section {
  background: linear-gradient(89deg, #fff1c191 60%, #ffb300 120%);
  border-radius: 38px;
  margin-top: 48px;
  margin-bottom: 36px;
  padding: 44px 0 44px 0;
  box-shadow: 0 7px 36px #ffd27123;
  text-align: center;
  animation: bgwave 7.5s infinite linear alternate;
}
.cta-section h2 {
  color: #23244b;
  font-size: 2.1rem;
  margin-bottom: 18px;
}
.cta-section .cta-primary {
  font-size: 1.12rem;
  padding: 16px 44px;
  box-shadow: 0 3px 20px #ffb3003a;
}

/* ----- TABLES ----- */
table { width: 100%; border-collapse: collapse; margin-top: 20px; border-radius: 16px; overflow: hidden; }
th,td{padding:14px 12px;}
th {background: #ffb30011;font-weight:700;font-family:var(--font-display);color:var(--color-primary);}
td {background:#fff;}
tbody tr:nth-child(even) td {background:#f5f6fa;}
.pricing-table th, .pricing-table td { font-size: 1.08em; border-bottom: 1px solid #FFECB3; }

/* ----- PARTNER LOGOS ----- */
.partner-logos { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
.partner-logos img { height: 50px; border-radius: 8px; background: #fff3c5; padding: 7px; }

/* ----- FOOTER ----- */
footer { background: #242C6D; color: #fff; padding-top: 15px; margin-top: 56px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin-bottom: 12px; justify-content: space-between; }
.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.footer-nav a { color: #FFB300; font-family: var(--font-display); font-size: 1rem; transition: color 0.12s; }
.footer-nav a:hover, .footer-nav a:focus { color: #fffacd; text-decoration: underline dotted; }
.footer-contact {
  font-size: 0.97rem;
  line-height: 1.6;
  color: #ffeaa7;
  background: #353879;
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 2px;
  min-width: 240px;
}
.footer-bottom { display: flex; align-items: center; justify-content: center; padding: 11px 0 6px 0; }
.footer-bottom span { font-size: 0.97rem; color: #FFB300; letter-spacing: 0.01em; }

/* ----- MISC & PAGE-SPECIFIC STYLES ----- */
.benefit-icons, .workflow-diagram, .notification-examples {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 19px 0 12px 0;
}
.workflow-diagram {
  background: #fffbe6;
  border-radius: 16px;
  padding: 18px 26px;
}
.workflow-diagram p { font-size: 1.14rem; font-family: var(--font-display); color: #242C6D; }
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.contact-description {
  margin-top: 12px;
  color: #353773;
  font-size: 1rem;
}
.cta-action { margin: 20px 0 8px 0; }

/* ----- MODALS, BANNERS ----- */
/* COOKIE CONSENT BANNER */
.cookie-banner {
  position: fixed;
  z-index: 2000;
  left: 0; bottom: 0; width: 100vw;
  background: linear-gradient(91deg,#fffbe7 75%,#ffb300 100%);
  color: #23244B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 18px 0 #ffd27130;
  padding: 18px 22px 18px 18px;
  font-size: 1rem;
  font-family: var(--font-display);
  border-radius: 18px 18px 0 0;
  animation: slideInBanner 0.5s cubic-bezier(.36,1.27,.52,.96);
}
@keyframes slideInBanner {
  0% { transform: translateY(100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0%); }
}
.cookie-banner .cookie-btn {
  background: #ffb300;
  color: #23244b;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  padding: 9px 20px;
  margin-left: 10px;
  transition: background 0.16s, color 0.13s, transform 0.09s;
  cursor: pointer;
  box-shadow: 0 2px 10px #ffb30022;
}
.cookie-banner .cookie-btn:hover, .cookie-banner .cookie-btn:focus {
  background: #ffd271;
  color: #23244B;
  transform: translateY(-1px) scale(1.04);
}
/* Cookie Settings Modal */
.cookie-modal-backdrop {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(36,44,109,0.12);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cookie-modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}
.cookie-modal {
  background: #fffbe7;
  color: #23244B;
  border-radius: 24px;
  box-shadow: 0 12px 48px 0 #ffb30036;
  padding: 34px 32px 26px 32px;
  min-width: 320px;
  max-width: 97vw;
  font-size: 1.08rem;
  display: flex; flex-direction: column; gap: 25px;
  position: relative;
  animation: fadeInModal 0.23s cubic-bezier(.36,1.26,.67,1.07);
}
@keyframes fadeInModal {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.cookie-modal h3 {
  font-size: 1.28rem;
  color: var(--color-primary);
  font-family: var(--font-display);
}
.cookie-category {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 8px;
  background: #fff;
  padding: 10px 10px 8px 15px;
  font-family: var(--font-body);
  font-size: 1.02rem;
}
.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 7px;
}
.switch input {
  display: none;
}
.switch-slider {
  display: inline-block;
  width: 36px;
  height: 18px;
  border-radius: 20px;
  background: #ffd271;
  position: relative;
  transition: background 0.15s;
}
.switch-slider:before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.19s;
}
.switch input:checked + .switch-slider {
  background: #49e053;
}
.switch input:checked + .switch-slider:before {
  transform: translateX(18px);
}
.cookie-modal .btn-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}
.cookie-modal .btn-row button {
  padding: 9px 22px;
  border-radius: 14px;
  font-size: 1.02rem;
}
.cookie-modal-close {
  position: absolute;
  right: 18px; top: 12px;
  background: transparent;
  border: none;
  color: #6d4f11;
  font-size: 1.8rem;
  cursor: pointer;
  border-radius: 50%;
  padding: 8px;
  transition: background 0.13s, color 0.13s;
}
.cookie-modal-close:focus,.cookie-modal-close:hover { background: #ffd271; color: #23244b; }

/* ----- MISC MICRO-INTERACTIONS ----- */
a,button,.cta-primary,.feature-list li,.service-list>div,.card,.testimonial-card,.cookie-btn,th,td {
  /* Smooth hover/active transitions */
  transition: background 0.14s, color 0.14s, box-shadow 0.13s, border 0.13s, transform 0.13s;
}

/* ----- ANIMATION EFFECTS (PLAYFUL) ----- */
.feature-list li, .service-list > div, .card, .testimonial-card {
  animation: itemPop 0.66s cubic-bezier(.63,1.73,.69,1.13) both;
}
@keyframes itemPop {
  0% { transform: scale(0.92) translateY(38px); opacity: 0; }
  60% { opacity: 1; transform: scale(1.03) translateY(-9px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ----- RESPONSIVE DESIGN (Mobile-first) ----- */
@media (max-width: 1200px) {
  .container { max-width: 98vw; }
}
@media (max-width: 991px) {
  .container { max-width: 100vw; padding: 0 6px; }
  .feature-list, .service-list, .testimonial-list, .content-grid, .card-container { gap: 16px; }
}
@media (max-width: 900px) {
  .main-nav { padding: 8px 12px; }
}
@media (max-width: 768px) {
  /* NAV */
  .main-nav ul, .main-nav .cta-primary { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .main-nav { justify-content: flex-start; }
  .main-nav { padding: 8px 8px; }
  /* HERO */
  .hero { padding: 38px 0 22px 0; margin-bottom: 32px; }
  .hero h1 { font-size: 1.5rem; }
  .cta-section h2 { font-size: 1.3rem; }
  /* LAYOUT STACKS */
  .feature-list, .service-list, .testimonial-list, .footer-nav, .card-container { flex-direction: column; gap: 15px; }
  .footer-contact { min-width: 0; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .container { padding: 0 4px; }
  .section {
    margin-bottom: 30px;
    padding: 25px 9px;
    border-radius: 12px;
  }
  .content-wrapper { max-width: 97vw; gap: 15px; }
  .text-image-section { flex-direction: column; gap: 13px; }
}
@media (max-width: 570px) {
  h1 { font-size: 1.15rem; }
  h2 { font-size: 1rem; }
  .brand-tagline { font-size: 0.97rem; padding: 8px 7px; }
  .footer-contact { font-size: 0.89rem; padding: 6px 6px; }
  .testimonial-card, .card, .service-list > div, .feature-list li { min-width: 0; max-width: 95vw; }
  .hero { border-radius: 0 0 20px 20px; }
  .cta-section { border-radius: 18px; padding: 25px 0; }
  .cookie-modal { padding: 19px 7px 17px 11px; min-width: 0; }
}
@media (max-width:390px) {
  .footer-contact, .footer-nav ul { padding: 3px 2px; font-size: 0.84rem;}
}

/* Accessibility: focus rings & states */
a:focus, .cta-primary:focus, button:focus, .cookie-btn:focus {
  outline: 2px solid #FFB300; outline-offset: 2px;
}

/* --------- DEMO COOKIE BANNER & MODAL CSS CLASS NAMES --------- */
/*
HTML Example:
<div class="cookie-banner">
  <span>Stellar Sleva používá cookies: pro funkčnost, analýzu i marketing.</span>
  <div>
    <button class="cookie-btn accept" type="button">Přijmout vše</button>
    <button class="cookie-btn reject" type="button">Odmítnout vše</button>
    <button class="cookie-btn settings" type="button">Nastavení</button>
  </div>
</div>
<div class="cookie-modal-backdrop"><div class="cookie-modal">
  <button class="cookie-modal-close">✕</button>
  <h3>Nastavení cookies</h3>
  <div class="cookie-category">
    Nezbytné cookies <span style="color:var(--color-success); font-weight:700;">vždy povoleno</span>
  </div>
  <div class="cookie-category">
    Analytické cookies
    <label class="switch"><input type="checkbox" checked><span class="switch-slider"></span></label>
  </div>
  <div class="cookie-category">
    Marketingové cookies
    <label class="switch"><input type="checkbox"><span class="switch-slider"></span></label>
  </div>
  <div class="btn-row">
    <button class="cookie-btn accept">Uložit</button>
    <button class="cookie-btn reject">Zrušit</button>
  </div>
</div></div>
*/