/* Ozvebo – hlavné štýly (v2: plná šírka, zameranie na tvorbu webov) */

:root{
  --ink:#12102a;          /* tmavá značková */
  --ink-2:#1c1940;
  --text:#191731;
  --muted:#55536f;
  --bg:#ffffff;
  --soft:#f3f5f9;
  --line:#e3e6ef;
  --teal:#0f766e;         /* akcent na svetlom */
  --teal-hover:#0b5f58;
  --teal-bright:#2dd4bf;  /* akcent na tmavom */
  --teal-pale:#e2f4f1;
  --on-ink:#ffffff;
  --on-ink-muted:#c9c7e2;
  --radius:18px;
  --gutter:clamp(20px, 5vw, 96px);
  --maxw:1680px;
  --font-head:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
h1,h2,h3{font-family:var(--font-head);margin:0;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* Tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:12px;font-weight:700;font-size:16.5px;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);transition:background-color .15s ease, border-color .15s ease, transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-hover);}
.btn-bright{background:var(--teal-bright);color:var(--ink);}
.btn-bright:hover{background:#5eead4;}
.btn-outline{border-color:var(--line);color:var(--text);background:var(--bg);}
.btn-outline:hover{border-color:var(--teal);}
.btn-outline-dark{border-color:rgba(255,255,255,.28);color:#fff;}
.btn-outline-dark:hover{border-color:var(--teal-bright);}
a:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px;}

/* Hlavička */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.admin-bar header.nav{top:var(--wp-admin--admin-bar--height, 0px);}
@media (max-width:600px){.admin-bar header.nav{top:0;}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.brand-icon{flex:none;display:block;}
.brand-word{font-family:var(--font-head);font-size:25px;font-weight:700;letter-spacing:-.02em;}
nav.links{display:flex;gap:32px;font-weight:600;font-size:16px;}
nav.links a{text-decoration:none;color:var(--muted);}
nav.links a:hover{color:var(--text);}
.nav .btn{padding:12px 22px;font-size:15.5px;}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px);}
.hero::before{width:760px;height:760px;right:-220px;top:-260px;background:radial-gradient(circle, rgba(45,212,191,.28) 0%, rgba(45,212,191,0) 65%);}
.hero::after{width:620px;height:620px;left:-240px;bottom:-320px;background:radial-gradient(circle, rgba(99,102,241,.22) 0%, rgba(99,102,241,0) 65%);}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(56px,8vw,110px);}
.promo-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.4);color:#ccfbf1;padding:8px 16px;border-radius:999px;font-weight:600;font-size:15.5px;margin-bottom:26px;}
.promo-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--teal-bright);flex:none;}
.hero h1{font-size:clamp(40px,4.9vw,80px);font-weight:800;}
.hero h1 em{font-style:normal;color:var(--teal-bright);}
.hero .lead{margin-top:24px;font-size:clamp(18px,1.6vw,21px);color:var(--on-ink-muted);max-width:34em;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 28px;margin:34px 0 0;padding:0;list-style:none;font-weight:600;font-size:16px;color:#e7e6f5;}
.hero-points li{display:flex;align-items:center;gap:9px;}
.hero-points svg{flex:none;color:var(--teal-bright);}

/* Mockup webu v hero */
.mock{position:relative;}
.browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);color:#231c14;transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:center left;}
.browser-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#eceef3;}
.browser-bar .dots{display:flex;gap:6px;}
.browser-bar .dots i{width:11px;height:11px;border-radius:50%;background:#cfd3dd;display:block;}
.browser-bar .url{flex:1;background:#fff;border-radius:8px;padding:5px 12px;font-size:13px;color:#5c6070;}
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:13px;color:#6b5a48;}
.site-nav b{font-family:Georgia,serif;font-size:17px;color:#7c2d12;}
.site-hero{margin:0 22px;border-radius:12px;min-height:190px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;color:#fff;
  background:linear-gradient(0deg, rgba(40,20,8,.78), rgba(40,20,8,.08) 70%),
             radial-gradient(circle at 25% 30%, #f5b76b 0 16%, transparent 17%),
             radial-gradient(circle at 70% 55%, #c2410c 0 22%, transparent 23%),
             linear-gradient(135deg, #b45309, #7c2d12);}
.site-hero strong{font-family:Georgia,serif;font-size:24px;line-height:1.15;max-width:15em;}
.site-hero span{align-self:flex-start;background:#fff;color:#7c2d12;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:7px;}
.site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 22px 24px;}
.site-cards div{background:#faf5ef;border-radius:10px;padding:12px;font-size:12.5px;color:#6b5a48;}
.site-cards b{display:block;color:#231c14;font-size:13.5px;margin-bottom:2px;}
.mock-chat{position:absolute;right:-18px;bottom:-64px;width:min(290px,70%);background:#fff;color:var(--text);border-radius:16px;padding:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:8px;font-size:14px;}
.mock-chat .q{align-self:flex-end;background:var(--teal);color:#fff;padding:9px 12px;border-radius:14px 14px 4px 14px;max-width:90%;}
.mock-chat .a{background:var(--soft);padding:9px 12px;border-radius:14px 14px 14px 4px;max-width:92%;}
.mock-chat .who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;}
.mock-chat .who i{width:8px;height:8px;border-radius:50%;background:#22c55e;display:block;}

/* Sekcie */
.section{padding-block:clamp(72px,9vw,128px);}
.section.soft{background:var(--soft);}
.section.dark{background:var(--ink);color:var(--on-ink);}
.section-head{max-width:880px;margin-bottom:clamp(40px,5vw,64px);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(34px,4vw,54px);font-weight:800;}
.section-head p{margin-top:18px;font-size:clamp(18px,1.4vw,20px);color:var(--muted);}
.section.dark .section-head p{color:var(--on-ink-muted);}

/* Služby */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.service{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.service:hover{transform:translateY(-4px);border-color:#b7e4dd;box-shadow:0 24px 50px -30px rgba(18,16,42,.35);}
.service .ico{width:56px;height:56px;border-radius:14px;background:var(--teal-pale);color:var(--teal);display:flex;align-items:center;justify-content:center;}
.service h3{font-size:23px;font-weight:700;}
.service p{color:var(--muted);}
.service.highlight{background:var(--ink);border-color:var(--ink);color:#fff;}
.service.highlight p{color:var(--on-ink-muted);}
.service.highlight .ico{background:rgba(45,212,191,.15);color:var(--teal-bright);}

/* Prečo my */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start;}
.why .section-head{margin-bottom:0;position:sticky;top:120px;}
.why-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px;}
.why-item h3{font-size:22px;font-weight:700;display:flex;align-items:center;gap:12px;}
.why-item h3 svg{flex:none;color:var(--teal);}
.why-item p{margin-top:10px;color:var(--muted);}

/* Postup */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:krok;}
.step{position:relative;padding-top:26px;border-top:3px solid var(--line);}
.step::before{counter-increment:krok;content:counter(krok);position:absolute;top:-24px;left:0;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--font-head);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;}
.step h3{font-size:22px;font-weight:700;margin-top:20px;}
.step p{margin-top:10px;color:var(--muted);}

/* Cenník */
.promo-bar{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px 32px;margin-bottom:40px;}
.promo-bar h3{font-size:clamp(22px,2.2vw,28px);font-weight:800;}
.promo-bar h3 em{font-style:normal;color:var(--teal-bright);}
.promo-bar p{margin-top:6px;color:var(--on-ink-muted);}
.countdown{display:flex;gap:10px;}
.cd-unit{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;min-width:74px;padding:10px 8px;text-align:center;}
.cd-num{display:block;font-family:var(--font-head);font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;}
.cd-label{display:block;font-size:14px;color:var(--on-ink-muted);}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;}
.plan{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:38px 32px;display:flex;flex-direction:column;gap:20px;}
.plan.featured{border:2px solid var(--teal);box-shadow:0 30px 60px -35px rgba(15,118,110,.55);}
.plan .badge{position:absolute;top:-15px;left:32px;background:var(--teal);color:#fff;font-weight:700;font-size:14.5px;padding:6px 14px;border-radius:999px;}
.plan h3{font-size:28px;font-weight:800;}
.plan .for{color:var(--muted);margin-top:-12px;}
.price{font-family:var(--font-head);font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.price small{display:block;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:8px;}
.price-old{font-size:24px;font-weight:600;color:var(--muted);text-decoration:line-through;margin-right:10px;letter-spacing:0;}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;flex:1;}
.plan li{padding-left:30px;position:relative;}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--teal-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}
.plan .btn{width:100%;}
.price-note{margin-top:28px;color:var(--muted);text-align:center;}

/* AI asistent */
.ai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;}
.ai h2{font-size:clamp(34px,4vw,54px);font-weight:800;}
.ai h2 em{font-style:normal;color:var(--teal-bright);}
.ai .lead{margin-top:20px;font-size:clamp(18px,1.4vw,20px);color:var(--on-ink-muted);}
.ai ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:17.5px;}
.ai li{display:flex;gap:12px;align-items:flex-start;}
.ai li svg{flex:none;margin-top:3px;color:var(--teal-bright);}
.ai .btn{margin-top:34px;}
.chat-card{background:#fff;color:var(--text);border-radius:22px;padding:24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:12px;}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.chat-head .av{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.chat-head b{display:block;font-size:17px;}
.chat-head span{font-size:14.5px;color:var(--muted);}
.bubble{max-width:84%;padding:12px 16px;border-radius:18px;font-size:16px;line-height:1.5;}
.bubble.bot{background:var(--soft);border-bottom-left-radius:5px;}
.bubble.user{background:var(--teal);color:#fff;margin-left:auto;border-bottom-right-radius:5px;}

/* Pre koho */
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:14px 24px;font-size:17px;font-weight:600;}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start;}
.faq-wrap .section-head{margin-bottom:0;}
.faq{display:flex;flex-direction:column;gap:14px;}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px 26px;}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:18.5px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal-pale);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{margin-top:12px;color:var(--muted);}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start;}
.contact h2{font-size:clamp(34px,4vw,54px);font-weight:800;}
.contact .lead{margin-top:20px;font-size:clamp(18px,1.4vw,20px);color:var(--on-ink-muted);}
.contact-list{display:flex;flex-direction:column;gap:22px;margin-top:40px;}
.contact-item{display:flex;gap:16px;align-items:center;}
.contact-item .ico{width:52px;height:52px;border-radius:14px;background:rgba(45,212,191,.14);color:var(--teal-bright);display:flex;align-items:center;justify-content:center;flex:none;}
.contact-item span{display:block;color:var(--on-ink-muted);font-size:15px;}
.contact-item a{font-weight:700;font-size:20px;text-decoration:none;color:#fff;word-break:break-word;}
.contact-item a:hover{color:var(--teal-bright);}
.form-card{background:#fff;color:var(--text);border-radius:22px;padding:clamp(26px,3.5vw,44px);}
.form-card h3{font-size:26px;font-weight:800;}
.form-card form{display:flex;flex-direction:column;gap:18px;margin-top:24px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-weight:700;font-size:15.5px;}
.form-row input,.form-row textarea{font-family:var(--font-body);font-size:16.5px;color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;width:100%;resize:vertical;}
.form-row input:focus,.form-row textarea:focus{border-color:var(--teal);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(15,118,110,.14);}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--muted);}
.consent input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--teal);}
.consent a{color:var(--teal);}
.form-card .btn{align-self:flex-start;}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-msg{padding:14px 18px;border-radius:12px;margin-top:20px;font-weight:600;}
.form-msg.ok{background:var(--teal-pale);border:1px solid #9fdcd2;}
.form-msg.err{background:#fdecec;border:1px solid #f5b5b5;}

/* Päta */
.site-footer{background:var(--ink);color:var(--on-ink-muted);border-top:1px solid rgba(255,255,255,.08);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:30px;font-size:15.5px;}
.footer-inner .brand{color:#fff;}
.footer-inner .brand-word{font-size:21px;}
.footer-inner a{color:var(--on-ink-muted);}

/* Podstránky */
.page-main{padding-block:clamp(48px,6vw,88px);background:var(--soft);}
.entry{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,48px);max-width:860px;}
.entry h1{font-size:clamp(32px,3.6vw,46px);font-weight:800;margin-bottom:22px;}
.entry-content{font-size:17.5px;line-height:1.75;}
.entry-content > * + *{margin-top:1em;}
.entry-content h2{font-size:28px;margin-top:1.6em;}
.entry-content h3{font-size:22px;margin-top:1.4em;}
.entry-content a{color:var(--teal);}
.entry-content ul,.entry-content ol{padding-left:1.3em;}
.post-list{display:flex;flex-direction:column;gap:18px;max-width:860px;}
.post-list h2{font-size:26px;}
.post-list h2 a{text-decoration:none;}
.post-meta{color:var(--muted);margin-top:6px;}

/* Prístupnosť */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;z-index:100000;top:10px;left:10px;background:#fff;color:var(--text);padding:12px 16px;border-radius:10px;}

/* Animácie */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .rise-2{animation-delay:.12s;}
  .rise-3{animation-delay:.24s;}
  .promo-pill .dot{animation:pulse 1.8s ease-in-out infinite;}
  .mock-chat{animation:floaty 6s ease-in-out infinite;}
}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* Responzívnosť */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px;}
}
@media (max-width:960px){
  .hero-inner,.why,.ai,.faq-wrap,.contact{grid-template-columns:minmax(0,1fr);}
  .why .section-head{position:static;}
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;}
  .browser{transform:none;}
  .mock{margin-bottom:30px;}
  nav.links{display:none;}
}
@media (max-width:640px){
  body{font-size:16.5px;}
  .services,.why-list,.steps{grid-template-columns:minmax(0,1fr);}
  .site-cards{grid-template-columns:repeat(2,1fr);}
  .site-cards div:last-child{display:none;}
  .mock-chat{right:-4px;bottom:-56px;width:66%;font-size:13px;}
  .site-hero span{display:none;}
  .nav .btn{padding:10px 16px;font-size:14.5px;}
  .brand-word{font-size:22px;}
  .cd-unit{min-width:62px;}
  .cd-num{font-size:24px;}
  .hero-ctas .btn{width:100%;}
}