:root{
  --brand:#7c3aed;          /* violet 600 */
  --brand-2:#a78bfa;        /* violet 300 */
  --bg:#ffffff;
  --surface:#faf5ff;        /* soft violet surface */
  --text:#0f172a;
  --muted:#5b6270;
  --radius:16px;
  --shadow:0 14px 28px rgba(36, 0, 70, .08);
  --ring: 0 0 0 3px rgba(124,58,237,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:clamp(16px, 1.1vw + 12px, 18px);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;z-index:1000;background:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:var(--shadow)}

.wrap{width:min(1200px, 100% - 2rem);margin-inline:auto}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex;gap:.75rem;align-items:center}
.brand img{width:40px;height:40px;border-radius:8px}
.brand-text{font-weight:800;letter-spacing:.02em;color:#111827}

.nav-toggle{border:1px solid #e5e7eb;background:#fff;border-radius:.6rem;padding:.6rem .7rem;cursor:pointer}
.nav-toggle .bars{display:inline-block;width:22px;height:2px;background:#111;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#111;transform-origin:left}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-list{list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:.5rem}
.nav-list a{display:block;padding:.5rem .75rem;border-radius:.5rem}
.nav-list a:hover{background:var(--surface);text-decoration:none}
.nav[aria-expanded="true"] .nav-list{display:flex}

@media (min-width:860px){
  .nav-toggle{display:none}
  .nav-list{display:flex;flex-direction:row;gap:.25rem}
}

.hero{padding:clamp(1.5rem,3vw,3rem) 0;background:linear-gradient(180deg,#fff, #f7fbff)}
.hero-grid{display:grid;gap:clamp(1rem,3vw,2rem);align-items:center}
.hero-text h1{font-size:clamp(1.6rem,2.4rem,3rem);line-height:1.2;margin:0 0 .5rem}
.hero-text p{color:var(--muted);margin:0 0 1rem}
.cta{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:.75rem;border:1px solid #e5e7eb;background:#fff;font-weight:600}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.outline{background:transparent}
.btn.small{padding:.45rem .75rem;font-size:.9em}

@media (min-width:860px){ .hero-grid{grid-template-columns: 1.15fr 1fr} }

.section{padding:clamp(1.75rem,3vw,3rem) 0}
.surface{background:var(--surface)}

.cards-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-body{padding:1rem}
.card h3{margin:.25rem 0 .5rem}

.features{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.feature{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.feature h3{margin:.25rem 0 .5rem}

.table-scroll{overflow-x:auto;border:1px solid #e5e7eb;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.pricing-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.pricing-table caption{caption-side:top;text-align:left;padding:.85rem 1rem;font-weight:700}
.pricing-table thead th{position:sticky;top:0;background:#f1f5f9;border-bottom:1px solid #e5e7eb;padding:.75rem .9rem;text-align:left}
.pricing-table tbody th[scope=row]{background:#fff;position:sticky;left:0;border-right:1px solid #f1f5f9}
.pricing-table th, .pricing-table td{padding:.75rem .9rem;vertical-align:top}
.pricing-table tbody tr:nth-child(even){background:#fafcff}
.pricing-table td{white-space:nowrap}
.note{margin:.75rem 0 0}
.small{font-size:.92em;color:var(--muted)}

.contact-grid{display:grid;gap:1rem}
@media (min-width:860px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-list{list-style:none;margin:0;padding:0}
.contact-form label{display:block;margin-bottom:.75rem}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:.65rem .75rem;border:1px solid #e5e7eb;border-radius:.6rem;background:#fff
}
.contact-form .check{display:flex;align-items:center;gap:.5rem}
.site-footer{padding:1.5rem 0;border-top:1px solid #eef2f7;background:#fff;margin-top:2rem}


/* === Purple design enhancements (modern, functionalist) === */

/* Header accent line */
.site-header::after{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* Better focus states */
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline:none; box-shadow:var(--ring); border-color:var(--brand); }

/* Navigation */
.nav-toggle{border-color:rgba(124,58,237,.25); background:#fff}
.nav-list a:hover{background:rgba(124,58,237,.08)}

/* Hero section: soft gradient + decorative blob */
.hero{background:radial-gradient(1200px 600px at 90% -10%, rgba(167,139,250,.25), transparent 60%),
       radial-gradient(1000px 500px at -10% 110%, rgba(124,58,237,.20), transparent 60%),
       linear-gradient(180deg, #fff 0%, #faf5ff 100%);}
.btn{border-color:rgba(124,58,237,.25)}
.btn.primary{background:var(--brand);border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.outline{border-color:var(--brand); color:var(--brand)}
.btn.outline:hover{background:rgba(124,58,237,.08)}

/* Cards with subtle top accent */
.card{border:1px solid #efe7ff; box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden}
.card::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}
.card img{aspect-ratio:16/9; object-fit:cover}

/* Features blocks */
.feature{background:#fff; border:1px solid #efe7ff}
.feature h3{position:relative; padding-top:.25rem}
.feature h3::after{
  content:""; position:absolute; left:0; bottom:-.4rem; width:56px; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:2px;
}

/* Pricing table styling */
.pricing-table{min-width:760px; border:1px solid #efe7ff}
.pricing-table thead th{
  background:linear-gradient(180deg, #f3efff, #ece4ff);
  color:#3b2d71;
  border-bottom:1px solid #e7defe;
}
.pricing-table tbody tr:nth-child(even){background:#fbf9ff}
.pricing-table tbody tr:hover{background:#f5f0ff}
.pricing-table tbody th[scope=row]{background:#fff}

/* Footer */
.site-footer{background:#fff; border-top:1px solid #efe7ff}

/* Utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hero paragraph first-line indentation */
.hero-text p { text-indent: 1.5rem; }
.hero-text p:first-of-type { text-indent: 0; }


/* === Služby: presne 3 karty v riadku na desktopoch === */
#sluzby .cards-grid { grid-template-columns: 1fr; }
@media (min-width: 640px){ #sluzby .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ #sluzby .cards-grid { grid-template-columns: repeat(3, 1fr); } }