*/
width: auto;
}
.pricing .btn.btn-full{
width: 100%;
color: #fff; /* vynucení barvy */
}
/* Hero */
.hero { padding: 0rem 0 1rem; text-align: center; }
.hero__wrap { display: grid; align-items: center; }
.hero__title { font-family: 'Gagalin', sans-serif; font-size: 5rem; margin: 0 0 .5rem; color: #ff762f; font-weight: normal;text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
.hero__bullets { margin: 1rem 0; }
.hero__bullets li { color: #fff; text-shadow: 1px 1px 2px rgba(0,30,60,.5); }
.hero__value { color: #eaf1fb; font-size: 1.2rem;text-shadow: 1px 1px 2px rgba(0,30,60,.5); }
.hero_dotaznik { width: 50%; text-align: center; }
/* === Úprava hero sekce === */
.hero__copy {
text-align: center; /* zarovnání na střed */
max-width: 800px;
margin: 0 auto;
}
/* Zajistí zarovnání i prvního nadpisu a textu */
.hero__copy h1,
.hero__copy p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Raketky místo puntíků + vycentrování seznamu */
.hero__bullets {
list-style: none; /* žádné defaultní odrážky */
padding: 0;
margin: 1rem auto;
display: inline-block; /* vycentruje celý seznam */
text-align: left; /* ale samotné položky zůstanou vlevo */
}
.hero__bullets li {
position: relative;
padding-left: 1.8em; /* místo pro raketku */
margin-bottom: .5rem;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,30,60,.5);
}
/* raketka místo puntíku */
.hero__bullets li::before {
content: "🚀";
position: absolute;
left: 0;
top: 0;
color: #ff762f;
font-size: 1.2em;
line-height: 1;
}
/* místo: ul li::before { ... } */
ul:not(.hero__bullets):not(.list-rocket) li::before {
content: "🚀";
position: absolute;
left: 0;
color: #ff5a00;
}
.mini-benefits { text-align: left !important; list-style: none; padding: 0; margin: .25rem 0 0; opacity: .95; text-shadow: 1px 1px 2px rgba(0,30,60,.5); }
.mini-benefits li { position: relative; padding-left: 1.6em; margin: .15rem 0; }
.mini-benefits li::before {
content: "🚀";
position: absolute;
left: 0;
top: 0;
font-size: 1.05em;
color: #ff762f;
}
a.mail {
text-decoration: none !important; /* vypni cokoliv předtím */
background-image: linear-gradient(#ff762f, #ff762f);
background-size: 0% 2px; /* výška podtržení */
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .2s ease;
}
a.mail:hover {
background-size: 100% 2px; /* animované podtržení */
}
/* odtlačit tlačítko dolů v kartě */
.pricing .plan .btn{ margin-top: auto; }
/* Kompaktní ceník v levém sloupci (2×2), bez "container" šířky */
.content .pricing--compact { width: 100%; margin: 5vh 0; }
.content .pricing--compact .pricing-title { text-align: center; margin-bottom: 10px; }
/* Přepiš default ceníkový grid jen v rámci kompaktní sekce */
.content .pricing--compact .plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 sloupce v rámci .content */
gap: 14px;
align-items: stretch;
justify-items: stretch;
}
/* Na úzkých šířkách složit na 1 sloupec */
@media (max-width: 920px) {
.content .pricing--compact .plans { grid-template-columns: 1fr; }
}
/* Jemně menší typografie a padding pro kompaktní variantu */
.content .pricing--compact .plan { padding: 12px; }
.content .pricing--compact .plan h4 { font-size: 1.1rem; min-height: auto; }
.content .pricing--compact .price .amount { font-size: 1.6rem; padding: 6px 12px; }
.content .pricing--compact .plan-features li { margin: 4px 0; line-height: 1.45; }
.content .pricing--compact .btn { padding: 8px 14px; }
/* --- Raketkové odrážky (stejný styl napříč webem) --- */
.list-rocket{ list-style: none; padding: 0; margin: 8px 0 12px 0; }
.list-rocket li{
list-style: none;
position: relative;
padding-left: 28px;
margin: 6px 0;
line-height: 2;
}
.list-rocket li::before{
content: "🚀";
position: absolute;
left: 0; top: .1rem;
font-size: 1.1rem;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* ============================
Tlačítka – optimalizace pro telefony a tablety
============================ */
/* Telefony do 599px */
@media (max-width: 768px){
.btn,
.btn-full,
.btn-outline,
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100% !important;
margin: 0.5rem auto; /* mezera nad/pod + zarovnání na střed */
padding: 10px 14px; /* menší výška */
font-size: 0.9rem; /* cca 16px – dobré proti iOS zoomu */
line-height: 1.2;
border-radius: 28px;
}
.site-header {text-align: center;}
/* pokud máš tlačítka ve wrapu */
.btn-wrap, .done-wrap { text-align: center; }
}
/* Tablety 600–899px */
@media (min-width: 600px) and (max-width: 899px){
.btn,
.btn-full,
.btn-outline,
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto; /* na tabletu už nemusí být full-width */
max-width: 420px; /* aby nebyly přerostlé */
margin: 0.5rem auto;
padding: 12px 18px;
font-size: 1.05rem;
line-height: 1.25;
border-radius: 30px;
}
}
/* Vypnutí “nafukovacích” hover efektů na dotykových zařízeních */
@media (hover: none) and (pointer: coarse){
.btn,
.btn-full,
.btn-outline,
.btn-ghost {
transform: none !important;
transition: background-color .25s ease, box-shadow .25s ease;
}
}
b {
color: #ff5a00;
}
@media (max-width: 600px) {
body {
text-align: center;
background-image: url('images/phone_bg.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
/* === HAMBURGER / OFF-CANVAS MENU (mobile) === */
.hamburger{
display:none; align-items:center; justify-content:center;
width:42px; height:42px; border:1px solid rgba(255,255,255,.25);
border-radius:10px; background:transparent; cursor:pointer;
}
.hamburger:focus{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }
.hamburger .bar{ width:22px; height:2px; background:#fff; border-radius:2px; position:relative; transition:transform .2s ease, opacity .2s ease; }
.hamburger .bar::before,.hamburger .bar::after{
content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.hamburger .bar::before{ top:-7px; }
.hamburger .bar::after{ top:7px; }
/* otevřený stav (křížek) */
.nav-open .hamburger .bar{ transform:rotate(45deg); }
.nav-open .hamburger .bar::before{ top:0; transform:rotate(-90deg); }
.nav-open .hamburger .bar::after{ opacity:0; }
/* Panel + backdrop */
.nav-panel{
position:fixed; top:56px; right:0; height:calc(100vh - 56px);
width:min(320px, 86vw);
background:#004a99; border-left:1px solid rgba(255,255,255,.12);
transform:translateX(100%); transition:transform .25s ease;
z-index:60; display:flex; flex-direction:column; gap:12px; padding:14px;
}
.nav-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.35);
z-index:55; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.nav-open .nav-panel{ transform:translateX(0); }
.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
.nav-open{ overflow:hidden; } /* lock scroll při otevřeném menu */
/* Recyklace tvých stylů v panelu */
.nav-panel a{ color:#fff; text-decoration:none; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); }
.nav-panel a:hover{ color:#ff762f; border-color:#ff762f; background:rgba(255,118,47,.12); }
.nav-panel .panel-cta{ display:grid; gap:10px; }
.nav-panel .btn-primary{
background:#ff762f !important;
color:#000 !important;
border:2px solid #ff5a00;
box-shadow:0 0 16px rgba(255,118,47,.6);
}
/* Viditelnosti */
.only-desktop{ display:flex; gap:.75rem; flex-wrap:wrap; }
.only-mobile{ display:none; }
/* Breakpoint – na mobilech schovat vodorovné odkazy a CTA, ukázat hamburger */
@media (max-width: 900px){
.sticky-nav .nav-links.only-desktop,
.sticky-nav .nav-cta.only-desktop{ display:none; }
.hamburger{ display:flex; }
/* posun horní lišty: výška 56px */
.sticky-nav .container{ padding:.6rem 0; }
}
/* Desktop odkazy a CTA jsou defaultně viditelné */
.only-desktop{display:flex; gap:.75rem; flex-wrap:wrap;}
.hamburger{display:none;}
/* Na mobilech (<=900px) schovat odkazy i tlačítka, ukázat hamburger */
@media (max-width: 900px){
.only-desktop{display:none !important;}
.hamburger{display:flex;}
}
/* Zvýrazněné CTA – pulzující, blikající */
.btn-pulse {
font-size: 1.2rem; /* větší text */
padding: 14px 28px; /* větší plocha */
border-radius: 40px;
font-weight: 800;
background: linear-gradient(180deg, #ff762f, #ff5a00);
color: #fff !important;
border: 2px solid #ff5a00;
box-shadow: 0 0 16px rgba(255,118,47,0.7);
animation: pulseAnim 1.5s infinite, glowAnim 2.5s infinite alternate;
}
/* Pulzace – zvětšení a zmenšení */
@keyframes pulseAnim {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* Blikání – glow efekt */
@keyframes glowAnim {
0% { box-shadow: 0 0 12px rgba(255,118,47,0.5), 0 0 24px rgba(255,118,47,0.3); }
100% { box-shadow: 0 0 24px rgba(255,118,47,0.9), 0 0 48px rgba(255,90,0,0.6); }
}
/* Obrázky v kartách "Pro koho" */
#for-whom .card .persona {
display: flex;
justify-content: center;
margin: 1rem 0;
}
#for-whom .card .persona img {
width: auto;
width: 65%;
height: auto; /* větší než původně */
object-fit: contain;
border-radius: 12px;
}
/* === Split hero na 2 poloviny (desktop), 1 sloupec (mobil) === */
.hero-split {
/* výška tak, aby se to na desktopu vešlo na jednu obrazovku */
min-height: 92vh;
display: flex;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
/* mřížka pro 2 sloupce na desktopu */
.hero__wrap {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: start;
gap: 2rem;
}
/* headline + copy zarovnat na střed (nadpis + první odst.) */
.hero__copy {
text-align: center;
max-width: 840px;
margin: 0 auto;
}
.hero__copy h1,
.hero__copy p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* raketky + vycentrovaný seznam */
.hero__bullets {
list-style: none;
padding: 0;
margin: 1rem auto 1rem;
display: inline-block; /* vycentruje blok */
text-align: left; /* položky zůstávají vlevo pro čitelnost */
}
.hero__bullets li {
position: relative;
padding-left: 1.8em;
margin: .45rem 0;
}
.hero__bullets li::before {
content: "🚀";
position: absolute;
left: 0;
top: 0;
font-size: 1.15em;
line-height: 1;
color: #ff762f;
}
/* pravá strana – AIDA karta */
.hero__aside {
display: grid;
gap: 1rem;
align-content: start;
}
.aida-card {
background: rgba(0,50,100,0.5);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 1.1rem;
}
.aida-head {
display: flex;
gap: .8rem;
align-items: center;
margin-bottom: .25rem;
}
.aida-avatar {
width: 100px;
height: 130px;
object-fit: cover;
}
.aida-kicker {
margin: 0;
color: #ff5a00;
font-size: 1.6rem;
font-weight: normal;
opacity: .9;
}
.aida-title {
margin: .1rem 0 0;
font-family: 'Gagalin', sans-serif;
font-weight: normal;
font-size: 2rem;
color: #ff762f;
text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}
/* AIDA CTA + přátelský ceník */
.aida-text { margin: .6rem 0 0; }
.aida-btn { margin-top: .5rem; display: inline-block; }
.aida-subtle { margin: .8rem 0 0; opacity: .95; }
.link-friendly {
color: #ff762f;
text-underline-offset: 3px;
}
.link-friendly:hover {
color: #ff5a00;
text-decoration: underline;
}
/* mini-bulletky pod kartou, aby to bylo stále kompaktní */
.mini-benefits {
list-style: none;
padding: 0;
margin: .25rem 0 0;
opacity: .95;
}
.mini-benefits li { margin: .15rem 0; }
/* malý „kompresní“ režim na menších displejích */
@media (max-width: 1200px) {
.hero-split { min-height: 86vh; }
}
/* mobil: 1 sloupec, vše nad sebou a vycentrované */
@media (max-width: 900px) {
.hero__wrap {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.hero__aside { order: 2; }
.hero__copy { order: 1; }
.aida-card, .mini-benefits { text-align: left; }
.aida-head { justify-content: center; }
.hero__bullets { display: block; } /* vezme celou šířku, lepší čitelnost */
}
/* extra malé mobily: trochu zmenšíme nadpis, aby se vše vešlo */
@media (max-width: 420px) {
.hero__title { font-size: clamp(2rem, 7vw, 3rem); }
}
/* ===== Vyzkoušet AIDU – responsivita ===== */
/* Výchozí šířka kontejneru (desktop) */
#jak-vam-pomuze-aida .container {
max-width: 1100px;
margin: 0 auto;
}
/* --- TABLETY --- */
@media (max-width: 1024px) {
/* Stránka/kontejner cca 95 % šířky */
html, body, #jak-vam-pomuze-aida .container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Lehčí kompaktnost boxu s AIDOU */
#jak-vam-pomuze-aida .emergency-box > div {
gap: 1.5rem;
}
/* Jemné zmenšení nadpisu v boxu */
#jak-vam-pomuze-aida .emergency-box h2 {
font-size: clamp(1.8rem, 3.5vw, 2.2rem);
text-align: center;
}
/* Plynulejší šířka obrázku */
#jak-vam-pomuze-aida .emergency-box img {
max-width: 35vw;
height: auto;
display: block;
}
/* Text v odstavci necháme pružný */
#jak-vam-pomuze-aida .emergency-box p {
flex: 1 1 320px;
}
}
/* --- MOBILY --- */
@media (max-width: 720px) {
/* Stránka/kontejner cca 95 % šířky */
html, body, #jak-vam-pomuze-aida .container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Uvnitř emergency boxu stohovat pod sebe a centrovat */
#jak-vam-pomuze-aida .emergency-box > div {
flex-wrap: wrap;
justify-content: center;
text-align: left; /* text zůstane vlevo i na mobilu */
gap: 1rem;
}
/* Odstavec přes celou šířku */
#jak-vam-pomuze-aida .emergency-box p {
flex: 1 1 100%;
margin: 0;
font-size: 1.05rem;
}
/* Obrázek menší a fluidní */
#jak-vam-pomuze-aida .emergency-box img {
width: min(55vw, 220px);
max-width: 100%;
height: auto;
}
/* Nadpis zmenšit a zarovnat na střed */
#jak-vam-pomuze-aida .emergency-box h2 {
font-size: clamp(1.6rem, 5.5vw, 2rem);
text-align: center;
}
}
/* Volitelné – jemné vylepšení vzhledu obrázku AIDY */
#jak-vam-pomuze-aida .emergency-box img {
border-radius: 12px; /* nebo 50% pro kruh */
display: block;
}
.profile {
display: flex;
align-items: flex-start;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
text-align: justify;
}
.profile-img {
max-width: 300px;
margin: 0;
width: 100%;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.profile-img2 {
display: block; /* zruší inline chování */
margin: 20px auto; /* automaticky zarovná doprostřed */
max-width: 500px;
width: 100%;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: transform .35s ease, box-shadow .35s ease;
}
.profile-img2:hover {
transform: scale(1.03);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.profile-img-no-shadow {
max-width: 300px;
margin: 0;
width: 100%;
border-radius: 12px;
flex-shrink: 0;
}
.profile-text {
flex: 1;
min-width: 250px;
}
.proc_vznika_phone {
display: none;
}
@media (max-width: 768px) {
.profile {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-text {
text-align: left;
}
}
/* =======================================================
PROGRESSIVE PRICING (dle obrázku) - Libový Ceník
======================================================= */
/* Vynucení bílého pozadí a tmavého textu pro karty v ceníku */
.pricing .plan {
background: #e3f0ff !important;
color: #333 !important; /* Tmavý text na bílém podkladu */
border: 1px solid #eee;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 0; /* padding se bude řešit uvnitř */
height: 100%;
}
/* ZÁHLAVÍ KARTY: Barevný horní pruh/sekce (jako na obrázku) */
.plan-header {
background-color: var(--blue); /* Standardně tmavě modrá */
color: white;
padding: 20px 15px 15px;
border-radius: var(--radius) var(--radius) 0 0;
position: relative;
text-align: center;
}
/* Název balíčku (h4) v záhlaví */
.plan-header h4 {
color: white !important; /* Bílý nadpis na modrém/oranžovém pozadí */
font-size: 1.3rem;
font-weight: 800;
margin-top: 0;
min-height: auto;
display: block;
}
/* Akcent pro NEJLEPŠÍ balíček (Kompletní program s AIDOU) */
.plan--ai .plan-header {
background-color: var(--primary-strong); /* Oranžové záhlaví */
}
/* Akcent pro TRIAL balíček (světlejší modrá) */
.plan--trial .plan-header {
background-color: var(--blue-light);
}
/* CENA v novém formátu - oddělená sekce, menší písmo */
.pricing .price {
flex-direction: column;
gap: 0;
padding: 0 15px 15px; /* Přidán spodní padding 15px */
margin: 0;
text-align: center;
border-bottom: 1px solid #eee; /* Optické oddělení od obsahu */
}
.pricing .plan h4 {
color: black;
}
.pricing .price .amount {
background: none;
color: var(--blue);
font-size: 2.5rem;
font-weight: 800;
display: block;
margin: 0 auto;
text-align: center;
padding: 0;
box-shadow: none;
border: none;
transition: none;
width: fit-content;
}
/* Oranžová cena pro nejlepší balíček */
.plan--ai .price .amount {
color: var(--primary-strong);
}
/* Přeškrtnutá stará cena (jako na obrázku) */
.old-price {
color: black;
font-size: 1.45rem;
font-weight: 400;
text-decoration: line-through;
display: block;
margin-bottom: 5px;
}
/* Popisek pod cenou (volitelné, např. "Měsíčně") */
.price .per {
font-weight: 600;
color: #555;
background: none;
border: none;
opacity: 1;
font-size: 0.95rem;
margin-top: 5px;
}
/* Tlačítko na spodku karty (modré pro kontrast) */
.pricing .plan .btn {
margin: 0;
padding: 15px 10px;
border-radius: 0 0 var(--radius) var(--radius);
border: none;
font-size: 1.1rem;
background: var(--blue-light);
color: white !important;
transition: background-color 0.2s;
/* --- KLÍČOVÝ FIX FLEXBOX: Zarovnání textu a obrázku --- */
display: flex; /* Povolit flexbox */
justify-content: center; /* Vycentrovat obsah (text a obrázek) */
align-items: center; /* Vycentrovat vertikálně */
gap: 8px; /* Mezera mezi textem a obrázkem */
}
/* --- HOVER EFEKT: Změna barvy na primární oranžovou --- */
.pricing .plan .btn:hover {
background: var(--primary);
filter: brightness(1.1);
}
/* === VIP / BEST tlačítko === */
.pricing .plan .btn_best {
margin: 0;
padding: 16px 18px;
border-radius: calc(var(--radius) + 6px);
border: none;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: 0.03em;
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
color: #fff !important;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
box-shadow:
0 4px 12px rgba(255, 118, 47, 0.45),
0 2px 4px rgba(0, 0, 0, 0.25);
transform: translateY(0);
transition:
background 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.pricing .plan .btn_best:hover {
background: linear-gradient(135deg, var(--primary-strong), var(--primary));
transform: translateY(-3px);
box-shadow:
0 6px 18px rgba(255, 118, 47, 0.55),
0 4px 8px rgba(0, 0, 0, 0.35);
}
.pricing .plan .btn_best:active {
transform: translateY(0);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.3);
}
.plan-content {
flex-grow: 1; /* Roztáhne tento blok na maximum */
display: flex; /* Uspořádá obsah v tomto bloku vertikálně */
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
/* --- Styl pro obrázek v tlačítku (pro správnou velikost) --- */
.btn-img {
height: 36px; /* Nastavíme pevnou, malou výšku, aby obrázek nebyl moc velký */
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Volitelný fix pro odstranění mezer u textu, který je vedle obrázku */
.pricing .plan .btn span {
line-height: 1.1;
}
/* Akce badge (červená nálepka) */
.plan__badge {
position: absolute;
top: 10px; right: -30px;
transform: rotate(45deg);
background: #cc0000; /* Červená barva pro AKCI */
color: white;
padding: 4px 30px;
font-weight: 700;
font-size: 0.85rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 10;
}
/* Skrýt původní badge, pokud je přítomna */
.plan .badge { display: none !important; }
.pricing .plan p {
margin: 3px 0;
padding: 8px 20px;
text-align: left;
}
/* Odstranění oddělovače pod posledním prvkem (přeškrtnutým) */
/* V tomto balíčku je to předposlední v seznamu */
.pricing .plan p.excluded {
border-bottom: 1px var(--blue);
}
/* Zcela odstranit linku pod POSLEDNÍ PŘEŠKRTNUTOU položkou */
.pricing .plan p.excluded:last-of-type {
border-bottom: none !important;
}
/* Původní
pod seznamem (CTA hláška) nesmí mít linku! */
.pricing .plan p:not(.excluded):last-of-type {
border-bottom: none !important;
padding-top: 15px; /* Optické oddělení od seznamu */
}
.pricing .plan--ai {
box-shadow:
inset 0 0 0 1000px rgba(255, 118, 47, 0.20), /* Velký vnitřní stín (překryje kartu) */
0 8px 20px rgba(0, 0, 0, 0.1);
border-color: rgba(255, 118, 47, 0.5); /* Mírný oranžový rámeček */
}
/* --- ÚPRAVA: Výčet vlastností (UL/LI) pro tabulkový vzhled --- */
.plan-features {
list-style: none;
padding: 0 15px; /* Vnitřní odsazení seznamu od okrajů karty */
text-align: left;
flex: 1 1 auto;
margin-bottom: 20px;
margin-top: 0; /* Zaručí, že sedí hned pod h4 */
}
.plan-features li {
/* --- KLÍČOVÉ FIXY PRO TABULKOVÝ VZHLED --- */
display: block; /* Zaručí, že položka obsadí celou šířku */
width: 100%;
margin: 0; /* Zruší vertikální margin, který by narušoval bordery */
padding: 10px 0; /* Vertikální odsazení textu od oddělovačů */
position: relative;
box-sizing: border-box;
/* Vytvoření oddělovačů */
border-top: 2px solid #777; /* Horní oddělovač */
/* Styly pro zarovnání textu a ikony */
padding-left: 2.2em;
line-height: 1.5;
color: #333;
}
/* 1. Odstranění horního ohraničení z první položky (pod nadpisem) */
.plan-features li:first-child {
border-top: none;
}
/* 2. Spodní ohraničení jen na poslední položce seznamu */
.plan-features li:last-of-type {
border-bottom: 2px solid #777;
}
/* 3. Stylování ikon (Fajfky/Křížky) */
.plan-features li::before {
content: "✅"; /* Zelená fajfka */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* Vycentrování ikony */
font-size: 1em;
filter: none;
}
.plan-features li.excluded::before {
content: "❌"; /* Červený křížek pro něco, co chybí */
color: #cc0000;
}
/* CSS převzaté z Balíčku KLASIK */
.benefit-card p strong, .benefit-card p b, p strong, p b {
color: var(--primary-strong);
font-weight: 800;
}
.card .price {
background-color: var(--primary); /* Modré pozadí */
color: white;
padding: 20px 30px;
border-radius: var(--radius);
margin: 30px auto 20px auto;
width: fit-content;
box-shadow: 0 8px 20px rgba(0, 74, 153, 0.4);
transition: transform 0.2s;
}
.card .price:hover {
transform: scale(1.02);
box-shadow: 0 10px 25px rgba(0, 74, 153, 0.5);
}
.card .amount {
font-size: 3rem;
font-weight: 800;
letter-spacing: -1px;
}
.fapi-btn {
font-size: 1.6rem !important;
padding: 18px 40px !important;
font-weight: 800 !important;
text-transform: uppercase;
background-color: var(--primary-strong) !important; /* ORANŽOVÉ CTA pro maximální kontrast! */
color: white !important;
border: none !important;
border-radius: var(--radius) !important;
box-shadow: 0 4px 15px rgba(255, 90, 0, 0.4);
transition: background-color 0.2s, transform 0.2s;
margin: 20px auto;
}
.fapi-btn:hover {
background-color: #ff4800 !important;
transform: translateY(-2px);
}
.card h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem !important;
color: var(--primary); /* Zpět na modrou pro profesionální vzhled */
}
.card h2 {
font-size: 1.5rem;
color: var(--primary);
}
.card h3 {
color: var(--primary-strong); /* Sekundární nadpis v oranžové barvě */
}
/* Benefit grid a karty nejsou potřeba, ale necháváme je pro konzistenci, kdyby se přidaly */
.benefit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
text-align: left;
}
.benefit-card {
background: var(--blue);
padding: 25px;
border-radius: var(--radius);
box-shadow: 0 0 0 1px #eee, 0 8px 20px rgba(0, 0, 0, 0.05);
border-top: 5px solid var(--primary);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 0 1px #ddd, 0 15px 30px rgba(0, 0, 0, 0.1);
}
.benefit-card h4 {
color: var(--primary-strong);
font-size: 1.2rem;
margin-top: 0;
margin-bottom: 10px;
font-weight: 800;
}
.benefit-card p {
color: white;
font-size: 1rem;
}
/* Nové CSS pro seznam klíčových bodů (key-features-box/list) */
.key-features-box {
margin: 30px auto;
padding: 25px 20px;
background-color: #fff;
border: 3px solid var(--blue);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1000px rgba(255, 118, 47, 0.15), 0 4px 15px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}
.key-features-list {
list-style: none; /* Odstraní výchozí tečky */
padding: 0;
margin: 0;
text-align: center;
}
@media (max-width: 560px){
.key-features-list li {
font-size: 0.8rem !important;
}
}
.key-features-list li {
position: relative;
padding: 1px 0 1px 25px; /* Zvýšený padding-left pro text */
font-size: 1.2rem;
font-weight: 600;
color: #333;
text-transform: uppercase; /* Zůstane velkým písmem */
text-align: center; /* Zarovnání textu doleva */
}
/* Ikona/Fajfka vedle textu pro čistý vzhled */
.key-features-list li::before {
content: "✅" !important;
display: inline-block;
position: absolute; /* Absolutní pozice pro přesné umístění */
left: 0; /* Posunout zcela doleva */
margin-right: 5px; /* Mezera mezi fajfkou a textem */
font-size: 1em;
line-height: 1.2; /* Aby se fajfka zarovnala s textem */
}
/* Oddělovací čára mezi položkami */
.key-features-list li:not(:last-child) {
border-bottom: 1px dashed #ddd; /* Jemná přerušovaná čára */
margin-bottom: 2px;
}
.key-features-list li:not(:first-child) {
padding-top: 3px; /* Větší mezera po čáře */
}
.card .features.list-rocket:first-of-type,
.card .features.list-rocket:nth-of-type(2) {
display: none !important; /* Skryje list-rocket, protože se nahradí key-features-list */
}
@media (max-width: 768px) {
.info-bubbles {
flex-direction: column;
gap: 10px;
}
.bubble {
max-width: 100%;
}
}