/* ============================================================ EDA — Vzdelávacia agentúra | Velocis preview Warm, playful "family school" identity (brand palette from logo) ============================================================ */ :root{ --cream:#FFFCEE; --cream-2:#FBF4DD; --paper:#ffffff; --ink:#2c2a24; --ink-soft:#5d574c; --muted:#8a8275; --orange:#F2742E; --orange-d:#dd5f18; --red:#D62B31; --red-d:#bb2127; --teal:#5FC4B3; --teal-d:#3aa996; --teal-ink:#1f6e60; --yellow:#F3DF2E; --green:#46A65A; /* fresh green for the hero "guličky" (dots) */ --blue:#4C6CA6; /* original eda-eda.sk brand blue (footer + accents) */ --blue-2:#3C5687; /* darker shade of the same blue */ --espresso:#4C6CA6; /* proof strip + footer — recoloured to the original brand blue */ --espresso-2:#3C5687; --line:#ece3c8; --hl:rgba(243,223,46,.55); /* headline highlighter underline */ --accent-ink:#0c3f37; /* readable text ON the teal/accent colour */ --num2:var(--orange); /* 2nd stop of the proof-strip number gradient */ --shadow-sm:0 2px 10px rgba(72,58,20,.06); --shadow:0 14px 40px -18px rgba(72,58,20,.28); --shadow-lg:0 30px 70px -28px rgba(72,58,20,.34); --r-sm:12px; --r:18px; --r-lg:28px; --r-xl:36px; --container:1180px; --font-head:"Plus Jakarta Sans",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --theme-fade:background .4s ease,color .4s ease,border-color .4s ease; } /* ============================================================ COLOUR SCHEMES — switched live via the demo picker (sets data-theme on ). The default :root palette above is the "warm" EDA scheme. Each block below only overrides the palette tokens, so the whole site recolours from these. ============================================================ */ /* ----- Ocean · petrol & coral ----- */ [data-theme="ocean"]{ --cream:#F2FAFB; --cream-2:#E6F4F5; --paper:#fff; --ink:#143030; --ink-soft:#46625f; --muted:#7c938f; --orange:#0B7C8C; --orange-d:#096572; --red:#E8623E; --red-d:#cf4f2d; --teal:#66C2C9; --teal-d:#39a7af; --teal-ink:#0c6b73; --yellow:#F4C95D; --num2:#27b0c2; --espresso:#08323A; --espresso-2:#06262c; --line:#d3e7e8; --hl:rgba(244,201,93,.55); --accent-ink:#073a40; } /* ----- Berry · raspberry & plum ----- */ [data-theme="berry"]{ --cream:#FFF6FB; --cream-2:#FBEAF3; --paper:#fff; --ink:#2E2230; --ink-soft:#5e4d60; --muted:#927e93; --orange:#C9457E; --orange-d:#ad3567; --red:#E0556E; --red-d:#c8455c; --teal:#9C7BD0; --teal-d:#7e59ba; --teal-ink:#6b4aa0; --yellow:#F2C14E; --num2:#e07caa; --espresso:#3A1E3E; --espresso-2:#2c1730; --line:#f0dce9; --hl:rgba(242,193,78,.5); --accent-ink:#2a1b46; } /* ----- Sunset · coral, amber & teal ----- */ [data-theme="sunset"]{ --cream:#FFF7F1; --cream-2:#FCEBE0; --paper:#fff; --ink:#33231D; --ink-soft:#6a5247; --muted:#9c8579; --orange:#F1643F; --orange-d:#db4f2d; --red:#E03E3E; --red-d:#c52f2f; --teal:#41B3A8; --teal-d:#2e9a90; --teal-ink:#0e6b62; --yellow:#FBD15B; --num2:#f39b2e; --espresso:#402420; --espresso-2:#311b18; --line:#f3e0d4; --hl:rgba(251,209,91,.55); --accent-ink:#053c37; } /* ----- Forest · sage, green & terracotta ----- */ [data-theme="forest"]{ --cream:#F6FAF4; --cream-2:#E9F3E6; --paper:#fff; --ink:#213024; --ink-soft:#4d5f50; --muted:#82907f; --orange:#3E9D6B; --orange-d:#2f8459; --red:#D2683F; --red-d:#ba5733; --teal:#5FB99A; --teal-d:#41a07f; --teal-ink:#1c6b54; --yellow:#EBC55A; --num2:#56c79a; --espresso:#1F3A2C; --espresso-2:#16291f; --line:#d8e7d4; --hl:rgba(235,197,90,.5); --accent-ink:#06372c; } /* ----- Royal · indigo & pink ----- */ [data-theme="royal"]{ --cream:#F6F6FF; --cream-2:#EBEBFB; --paper:#fff; --ink:#232544; --ink-soft:#4f5170; --muted:#8688a3; --orange:#4E54C8; --orange-d:#3f44a8; --red:#E84393; --red-d:#d12f7e; --teal:#58C8C0; --teal-d:#37aaa2; --teal-ink:#0e6b65; --yellow:#F6C945; --num2:#8a8ff0; --espresso:#21243D; --espresso-2:#181a2e; --line:#e0e0f4; --hl:rgba(246,201,69,.5); --accent-ink:#073f3b; } /* smooth recolour when switching schemes (skipped for reduced-motion) */ @media (prefers-reduced-motion:no-preference){ body, .site-header, .proof, .site-footer, .btn, .lang-card, .aud-card, .price-card, .tst, .member, .cta-band, .page-hero, .course, .form-card, .eyebrow, h1, h2, h3{transition:var(--theme-fade)} } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} .skip-link{position:absolute;left:14px;top:-60px;z-index:200;background:var(--orange);color:#fff; font-family:var(--font-head);font-weight:700;padding:11px 18px;border-radius:10px;transition:top .2s} .skip-link:focus{top:14px;outline:none} :focus-visible{outline:3px solid var(--teal-d);outline-offset:2px;border-radius:4px} body{ margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream); line-height:1.65;font-size:17px;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.12;color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em} h1{font-size:clamp(2.1rem,5.2vw,3.6rem)} h2{font-size:clamp(1.7rem,3.8vw,2.6rem)} h3{font-size:clamp(1.15rem,2vw,1.4rem)} p{margin:0 0 1rem} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px} section{position:relative} .sec{padding:clamp(56px,8vw,108px) 0} .sec-tight{padding:clamp(40px,6vw,72px) 0} /* ---------- helpers ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-head); font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)} .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--orange)} .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:60ch} .center{text-align:center} .center .lead{margin-inline:auto} .text-orange{color:var(--orange-d)} .text-teal{color:var(--teal-ink)} .mt-0{margin-top:0}.mb-0{margin-bottom:0} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1; padding:15px 26px;border-radius:999px;cursor:pointer;border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s;white-space:nowrap} .btn svg{width:1.1em;height:1.1em} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(242,116,46,.7)} .btn-primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(242,116,46,.75)} .btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px -10px rgba(214,43,49,.6)} .btn-red:hover{background:var(--red-d);transform:translateY(-2px)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)} .btn-teal{background:var(--teal);color:var(--accent-ink)} .btn-teal:hover{background:var(--teal-d);transform:translateY(-2px)} .btn-lg{padding:18px 32px;font-size:1.08rem} .btn-block{width:100%} /* ---------- header / nav ---------- */ .site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--cream) 88%, transparent); border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(10px)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;font-size:1.18rem} .brand img{height:44px;width:auto} .brand small{display:block;font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);margin-top:2px} .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav-links a{font-family:var(--font-head);font-weight:600;font-size:.96rem;color:var(--ink-soft); padding:9px 14px;border-radius:999px;transition:color .15s,background .15s} .nav-links a:hover,.nav-links a.active{color:var(--ink);background:color-mix(in srgb, var(--teal) 18%, transparent)} .nav-cta{display:flex;align-items:center;gap:18px} .nav-phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-head);font-weight:700;color:var(--ink); padding-right:18px;border-right:1px solid var(--line)} .nav-phone:hover{color:var(--orange-d)} .hamburger{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:12px; cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px} .hamburger span{width:21px;height:2.4px;background:var(--ink);border-radius:2px;transition:.25s} body.menu-open .hamburger span:nth-child(1){transform:translateY(7.4px) rotate(45deg)} body.menu-open .hamburger span:nth-child(2){opacity:0} body.menu-open .hamburger span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)} /* mobile off-canvas */ .mobile-menu{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--cream); z-index:70;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 60px -20px rgba(0,0,0,.3);padding:84px 26px 32px;display:flex;flex-direction:column;gap:6px;overflow-y:auto} .mobile-menu.open{transform:translateX(0)} .mobile-menu a{font-family:var(--font-head);font-weight:700;font-size:1.18rem;color:var(--ink); padding:13px 8px;border-bottom:1px solid var(--line)} .mobile-menu a:hover{color:var(--orange-d)} .mobile-menu .btn{margin-top:18px} .mobile-menu .mm-contact{margin-top:auto;font-size:.95rem;color:var(--ink-soft)} .mobile-menu .mm-contact a{font-size:1rem;font-weight:700;border:0;padding:4px 0;display:block} .scrim{position:fixed;inset:0;background:rgba(36,30,12,.42);z-index:65;opacity:0;visibility:hidden;transition:.3s} .scrim.open{opacity:1;visibility:visible} .mm-close{position:absolute;top:20px;right:22px;width:42px;height:42px;border:1px solid var(--line); background:#fff;border-radius:12px;font-size:1.4rem;cursor:pointer;line-height:1;color:var(--ink)} /* ---------- hero ---------- */ .hero{position:relative;padding:clamp(34px,5vw,68px) 0 clamp(48px,7vw,96px);overflow:hidden} .hero-bubbles{position:absolute;inset:0;pointer-events:none;z-index:0} .bubble{position:absolute;font-family:var(--font-head);font-weight:700;color:#fff; padding:6px 14px;border-radius:999px 999px 999px 4px;font-size:.8rem;box-shadow:var(--shadow-sm);opacity:.7; animation:float 8s ease-in-out infinite} .bubble.b1{background:var(--teal);top:5%;left:1%} .bubble.b2{background:var(--orange);top:14%;right:4%;animation-delay:.8s} .bubble.b3{background:var(--red);top:74%;left:2%;animation-delay:1.6s} .bubble.b4{background:#c9893f;bottom:8%;right:5%;animation-delay:.4s} .bubble.b5{background:#7b61a8;top:44%;right:1%;animation-delay:2.1s} .bubble.b6{display:none} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center} .hero-copy h1{margin-bottom:.35em} .hero-copy h1 .hl{color:var(--orange-d);position:relative;white-space:nowrap} .hero-copy h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.34em;background:var(--hl);z-index:-1;border-radius:4px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} .hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:.92rem;color:var(--ink-soft)} .hero-trust span{display:inline-flex;align-items:center;gap:.5em;font-weight:600} .hero-trust span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 1px 4px rgba(70,166,90,.45)} .hero-media{position:relative} .hero-media .frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg); border:6px solid #fff;rotate:1.4deg;background:#fff} .hero-media .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2} .hero-media .badge{position:absolute;left:-14px;bottom:24px;background:#fff;border-radius:18px; box-shadow:var(--shadow);padding:13px 18px;display:flex;align-items:center;gap:12px;rotate:-2deg} .hero-media .badge b{font-family:var(--font-head);font-size:1.5rem;color:var(--red);line-height:1;display:block} .hero-media .badge span{font-size:.78rem;color:var(--ink-soft);font-weight:600} .hero-media .pill{position:absolute;top:-16px;right:14px;background:var(--teal);color:var(--accent-ink); font-family:var(--font-head);font-weight:800;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);rotate:4deg;font-size:.95rem} /* ---------- proof strip ---------- */ .proof{background:var(--espresso);color:#fff} .proof .container{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:clamp(28px,4vw,42px)} .proof .stat{text-align:center} .proof .stat b{font-family:var(--font-head);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);display:block; background:linear-gradient(120deg,var(--yellow),var(--num2));-webkit-background-clip:text;background-clip:text;color:transparent} .proof .stat span{font-size:.86rem;color:#dde3f1;letter-spacing:.02em} /* ---------- section heads ---------- */ .sec-head{max-width:720px} .sec-head.center{margin-inline:auto} /* ---------- language grid ---------- */ .lang-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px} .lang-card{background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--orange);border-radius:var(--r);padding:22px 12px;text-align:center; transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;align-items:center;gap:10px} .lang-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--teal);border-bottom-color:var(--orange)} .lang-card img{width:60px;height:60px;border-radius:50%;box-shadow:var(--shadow-sm)} .lang-card b{font-family:var(--font-head);font-size:1rem} .lang-card small{color:var(--muted);font-size:.78rem} /* ---------- audience cards ---------- */ .aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px} .aud-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden; display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s} .aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .aud-card .tag{position:absolute;top:12px;right:12px;z-index:2;background:#fff;color:var(--teal-ink); font-family:var(--font-head);font-weight:700;font-size:.72rem;padding:6px 14px;border-radius:999px;letter-spacing:.04em;box-shadow:var(--shadow-sm)} .aud-ph{width:100%;aspect-ratio:3/2;background:var(--cream);overflow:hidden;border-bottom:4px solid var(--orange)} .aud-ph img{width:100%;height:100%;object-fit:cover;display:block} /* colourful divider line between photo and text — one colour per card for a livelier look */ .aud-grid .aud-card:nth-child(1) .aud-ph{border-bottom-color:var(--orange)} .aud-grid .aud-card:nth-child(2) .aud-ph{border-bottom-color:var(--teal-d)} .aud-grid .aud-card:nth-child(3) .aud-ph{border-bottom-color:var(--red)} .aud-grid .aud-card:nth-child(4) .aud-ph{border-bottom-color:var(--green)} .aud-body{padding:22px 24px} .aud-card h3{margin-bottom:.3em} .aud-card p{font-size:.95rem;color:var(--ink-soft);margin-bottom:0} /* ---------- pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px;align-items:stretch} .price-grid.four{grid-template-columns:repeat(4,1fr)} .price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column; position:relative;transition:transform .18s,box-shadow .18s} .price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .price-card.feat{border:2px solid var(--orange);box-shadow:var(--shadow)} .price-card .ribbon{position:absolute;top:-13px;left:26px;background:var(--orange);color:#fff; font-family:var(--font-head);font-weight:700;font-size:.74rem;padding:6px 14px;border-radius:999px;letter-spacing:.04em} .price-card h3{margin-bottom:.15em} .price-card .who{color:var(--muted);font-size:.9rem;margin-bottom:16px} .price-card .amount{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:var(--ink);line-height:1} .price-card .amount small{font-size:.9rem;font-weight:600;color:var(--muted)} .price-card .sub{font-size:.9rem;color:var(--teal-ink);font-weight:600;margin-top:4px} .price-feats{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px} .price-feats li{position:relative;padding-left:28px;font-size:.95rem;color:var(--ink-soft)} .price-feats li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%; background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} .price-card .btn{margin-top:auto} .price-note{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:.95rem} .price-note b{color:var(--ink)} /* ---------- method ---------- */ .method{background:linear-gradient(180deg,var(--cream),var(--cream-2))} .method-quote{font-family:var(--font-head);font-weight:800;font-size:clamp(1.4rem,3vw,2.05rem);line-height:1.25; color:var(--ink);max-width:20ch;letter-spacing:-.02em} .method-quote .q{color:var(--teal-d)} .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center} .method-grid>*{min-width:0} .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px} .feat-list.cols3{grid-template-columns:repeat(3,1fr);max-width:none} .feat{display:flex;gap:14px;align-items:flex-start} .feat img{width:50px;height:50px;flex:0 0 auto} .feat b{font-family:var(--font-head);font-size:1.02rem;display:block;margin-bottom:2px} .feat span{font-size:.9rem;color:var(--ink-soft)} /* ---------- testimonials ---------- */ .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px} .tst{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;position:relative} .tst .qicon{width:40px;height:40px;margin-bottom:12px;opacity:.9} .tst p{font-size:1rem;color:var(--ink-soft);flex:1} .tst .who{display:flex;align-items:center;gap:12px;margin-top:14px} .tst .av{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--accent-ink);display:grid;place-items:center; font-family:var(--font-head);font-weight:800;font-size:1.1rem} .tst .who b{font-family:var(--font-head);font-size:.98rem;display:block;line-height:1.2} .tst .who small{color:var(--muted);font-size:.82rem} .tst.span2{grid-column:span 2} /* ---------- real school (team + interiors) ---------- */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} .member{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:transform .18s,box-shadow .18s} .member:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .member .ph{aspect-ratio:1/1.1;overflow:hidden;background:var(--cream-2)} .member .ph img{width:100%;height:100%;object-fit:cover;object-position:center top} .member .body{padding:18px 18px 22px} .member h3{font-size:1.12rem;margin-bottom:2px} .member .role{color:var(--orange-d);font-family:var(--font-head);font-weight:700;font-size:.85rem;margin-bottom:8px} .member p{font-size:.9rem;color:var(--ink-soft);margin-bottom:0} .member .langs{display:flex;gap:6px;margin-top:12px} .member .langs img{width:24px;height:24px;border-radius:50%} .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:14px;margin-top:40px} .gallery a,.gallery figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);position:relative;margin:0} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .gallery a:hover img,.gallery figure:hover img{transform:scale(1.06)} .gallery .big{grid-column:span 2;grid-row:span 2} /* ---------- split / location ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,56px);align-items:center} .split>*{min-width:0} .media-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff} .media-frame img{width:100%;height:100%;object-fit:cover} .info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px} .info-list li{display:flex;gap:14px;align-items:flex-start} .info-list .ic{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:rgba(95,196,179,.16); display:grid;place-items:center;color:var(--teal-ink)} .info-list .ic svg{width:20px;height:20px} .info-list b{font-family:var(--font-head);display:block;font-size:.96rem} .info-list span,.info-list a{color:var(--ink-soft);font-size:.96rem} .info-list a:hover{color:var(--orange-d)} .map-embed{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--r-lg);box-shadow:var(--shadow)} /* ---------- CTA band ---------- */ /* flyer-style CTA band: warm cream card + colourful bubble-cloud (leták look) */ .cta-band{background:var(--cream-2);border:2px solid var(--teal);border-radius:var(--r-xl); padding:clamp(28px,4vw,52px);position:relative;overflow:hidden; display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,52px);align-items:center} .cta-band .cta-cloud{width:clamp(168px,22vw,262px);height:auto} .cta-band .cta-body{min-width:0} .cta-band h2{color:var(--teal-ink);margin-bottom:.35em} .cta-band p{color:var(--ink-soft);max-width:56ch;margin-bottom:0} .cta-band .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px} @media (max-width:760px){ .cta-band{grid-template-columns:1fr;text-align:center;justify-items:center} .cta-band p{margin-inline:auto} .cta-band .btn-row{justify-content:center} } /* ---------- forms ---------- */ .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)} .field{margin-bottom:16px} .field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.9rem;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;max-width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px; font-family:var(--font-body);font-size:1rem;background:var(--cream);color:var(--ink);transition:border-color .15s,box-shadow .15s} .field select{text-overflow:ellipsis} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,196,179,.2)} .field textarea{min-height:120px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-note{font-size:.86rem;color:var(--muted);margin-top:4px} .form-success{display:none;background:rgba(95,196,179,.16);border:1px solid var(--teal);border-radius:14px; padding:16px 18px;color:var(--teal-ink);font-weight:600;margin-bottom:18px} .form-error{display:none;background:rgba(214,43,49,.10);border:1px solid var(--red);border-radius:14px; padding:16px 18px;color:var(--red-d);font-weight:600;margin-bottom:18px;line-height:1.5} .next-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px} .next-steps li{display:flex;gap:14px;align-items:flex-start} .next-steps .n{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--orange);color:#fff; font-family:var(--font-head);font-weight:800;display:grid;place-items:center;font-size:.95rem} /* ---------- footer ---------- */ .site-footer{background:var(--espresso);color:#e7ecf6;padding:clamp(48px,6vw,72px) 0 28px;margin-top:0} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px} .site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px;font-family:var(--font-head)} .site-footer a{color:#e7ecf6} .site-footer a:hover{color:var(--yellow)} .foot-brand img{height:54px;margin-bottom:14px} .foot-brand p{font-size:.92rem;color:#cdd8ef;max-width:34ch} .foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.94rem} .foot-social{display:flex;gap:12px;margin-top:14px} .foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.18s} .foot-social a:hover{background:var(--orange);transform:translateY(-3px)} .foot-social svg{width:18px;height:18px} .foot-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding-top:22px; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:#c4d1ec} .foot-bottom a{color:#dde6f8} /* ---------- breadcrumb / page hero ---------- */ .page-hero{background:linear-gradient(180deg,var(--cream-2),var(--cream));padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,48px); border-bottom:1px solid var(--line)} .crumb{font-size:.86rem;color:var(--muted);margin-bottom:14px;font-family:var(--font-head);font-weight:600} .crumb a:hover{color:var(--orange-d)} .page-hero h1{margin-bottom:.3em} /* ---------- catalog (kurzy) ---------- */ .cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 36px} .cat-nav a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px; font-family:var(--font-head);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:8px;transition:.15s} .cat-nav a:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)} .cat-nav a img{width:22px;height:22px;border-radius:50%} .lang-block{margin-bottom:clamp(40px,6vw,72px);scroll-margin-top:90px} .lang-block .lb-head{display:flex;align-items:center;gap:16px;margin-bottom:20px} .lang-block .lb-head img{width:54px;height:54px;border-radius:50%;box-shadow:var(--shadow-sm)} .lang-block .lb-head h2{margin:0} .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .course{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--r);padding:22px;transition:transform .18s,box-shadow .18s} /* colourful top accent — cycles through brand colours instead of generic icons */ .course-grid .course:nth-child(3n+1){border-top-color:var(--orange)} .course-grid .course:nth-child(3n+2){border-top-color:var(--teal-d)} .course-grid .course:nth-child(3n+3){border-top-color:var(--red)} .course[id]{scroll-margin-top:90px} .course:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .course .ct{display:flex;align-items:center;gap:10px;margin-bottom:8px} .course .ct .em{font-size:1.3rem} .course h3{font-size:1.08rem;margin:0} .course p{font-size:.92rem;color:var(--ink-soft);margin-bottom:0} .course .niche{display:inline-block;background:var(--yellow);color:#6b5b00;font-family:var(--font-head);font-weight:700; font-size:.72rem;padding:3px 10px;border-radius:999px;margin-top:10px} .ptable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:8px} .ptable th,.ptable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem} .ptable th{background:var(--cream-2);font-family:var(--font-head);font-weight:700;color:var(--ink)} .ptable td:last-child,.ptable th:last-child{text-align:right;font-family:var(--font-head);font-weight:700;white-space:nowrap} .ptable tr:last-child td{border-bottom:0} .ptable .price{color:var(--orange-d)} /* ---------- vstupný test ---------- */ .test-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .test-info .ti{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:flex-start} .test-info .ti .em{font-size:1.5rem;line-height:1} .test-info .ti b{font-family:var(--font-head);display:block;margin-bottom:2px} .test-info .ti span{font-size:.9rem;color:var(--ink-soft)} .lang-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px} .lang-tab{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--line);border-radius:999px; padding:10px 20px;font-family:var(--font-head);font-weight:700;cursor:pointer;transition:.15s;color:var(--ink)} .lang-tab img{width:26px;height:26px;border-radius:50%} .lang-tab:hover{border-color:var(--teal)} .lang-tab.active{border-color:var(--orange);background:#fff;box-shadow:0 8px 20px -12px rgba(242,116,46,.6)} .test-bar{position:sticky;top:74px;z-index:30;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin:18px 0 24px} .test-bar .meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-family:var(--font-head);font-weight:600;font-size:.95rem} .timer{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--line); border-radius:999px;padding:7px 14px;font-family:var(--font-head);font-weight:800} .timer.warn{color:var(--red);border-color:var(--red)} .test-progress{color:var(--ink-soft)} .q-group{margin-bottom:10px} .q-group-head{font-family:var(--font-head);font-weight:700;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase; color:var(--teal-ink);background:rgba(95,196,179,.12);border-radius:10px;padding:9px 14px;margin:22px 0 12px} .q-item{padding:16px 4px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start} .q-item:last-child{border-bottom:0} .q-item.answered .q-num{background:var(--teal);color:var(--accent-ink)} .q-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--cream-2);color:var(--ink-soft); display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:.85rem} .q-body{flex:1;min-width:0} .q-text{font-family:var(--font-head);font-weight:600;margin-bottom:10px} .q-opts{display:flex;gap:10px;flex-wrap:wrap} .q-opt{position:relative} .q-opt input{position:absolute;opacity:0;width:0;height:0} .q-opt span{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:8px 18px; cursor:pointer;font-size:.95rem;transition:.12s;background:#fff;user-select:none} .q-opt input:focus-visible+span{outline:3px solid var(--teal-d);outline-offset:2px} .q-opt span:hover{border-color:var(--teal)} .q-opt input:checked+span{background:var(--teal);border-color:var(--teal-d);color:var(--accent-ink);font-weight:600} .test-disabled{opacity:.55;pointer-events:none} .test-expired{display:none;background:rgba(214,43,49,.08);border:1px solid var(--red);color:var(--red-d); border-radius:12px;padding:14px 18px;font-weight:600;margin-bottom:16px} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.bubble{animation:none}} /* ---------- responsive ---------- */ @media (max-width:1024px){ .lang-grid{grid-template-columns:repeat(3,1fr)} .proof .container{grid-template-columns:repeat(2,1fr);gap:26px} .aud-grid{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .course-grid{grid-template-columns:repeat(2,1fr)} .price-grid.four{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .nav-links,.nav-cta .btn,.nav-phone{display:none} .hamburger{display:flex} .hero-grid{grid-template-columns:1fr;gap:30px} .hero-media .frame{rotate:0deg} .method-grid,.split{grid-template-columns:1fr} .tst-grid,.price-grid,.price-grid.four{grid-template-columns:1fr} .aud-grid{grid-template-columns:repeat(2,1fr)} .team-grid{grid-template-columns:1fr} .tst.span2{grid-column:span 1} .feat-list{grid-template-columns:1fr 1fr} .feat-list.cols3{grid-template-columns:repeat(2,1fr)} .test-info{grid-template-columns:1fr} .test-bar{position:static} } @media (max-width:560px){ body{font-size:16px} .lang-grid{grid-template-columns:repeat(2,1fr)} .aud-grid{grid-template-columns:1fr} .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:130px} .gallery .big{grid-column:span 2;grid-row:span 1} .course-grid{grid-template-columns:1fr} .feat-list,.feat-list.cols3{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .field-row{grid-template-columns:1fr} .proof .container{grid-template-columns:repeat(2,1fr)} .hero-actions .btn{width:100%} } @media (max-width:380px){ .team-grid,.foot-grid{grid-template-columns:1fr} } /* ============================================================ HERO HEADER VARIANTS — switched live via the demo picker (sets data-hero on #heroHost). Only one .hv is shown at a time. ============================================================ */ .hv{display:none} .hero[data-hero="a"] .hv-a, .hero[data-hero="b"] .hv-b, .hero[data-hero="c"] .hv-c, .hero[data-hero="d"] .hv-d{display:block} /* ----- B · cloud logo instead of the photo ----- */ .hero-cloud{display:flex;align-items:center;justify-content:center} .hero-cloud img{width:min(100%,470px);height:auto; filter:drop-shadow(0 26px 42px rgba(72,58,20,.18));animation:cloudFloat 7s ease-in-out infinite} @keyframes cloudFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}} /* ----- C · full-bleed background photo ----- */ .hero[data-hero="c"]{padding:0;background:var(--espresso-2)} .hv-c{position:relative} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover} .hero-bg::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(6,22,25,.92),rgba(6,22,25,.72) 44%,rgba(6,22,25,.42) 72%,rgba(6,22,25,.30)), linear-gradient(0deg,rgba(6,22,25,.52),transparent 42%)} .hero-c-inner{position:relative;z-index:1;display:flex;align-items:center; min-height:min(76vh,600px);padding-block:clamp(52px,9vw,104px)} .hero-c-inner .hero-copy{max-width:660px} .hero-c-inner .eyebrow{color:#ffe1c2} .hero-c-inner h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.28)} .hero-c-inner .hero-copy h1 .hl::after{opacity:.85} .hero-c-inner .lead{color:rgba(255,255,255,.94)} .hero-c-inner .hero-trust{color:rgba(255,255,255,.9)} .hero-c-inner .hero-trust span::before{background:var(--green)} .btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)} .btn-glass:hover{background:rgba(255,255,255,.24);border-color:#fff;transform:translateY(-2px)} /* ----- D · playful language bubbles, centred ----- */ .hero[data-hero="d"]{overflow:hidden} .hero-d-inner{position:relative;z-index:1;max-width:780px;margin-inline:auto;text-align:center; padding-block:clamp(16px,3vw,36px)} .hero-d-inner h1{margin-bottom:.45em} .hero-d-inner .lead{margin-inline:auto} .hero-d-inner .hero-actions{justify-content:center} .hero-flags{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px;margin-top:36px} .hero-flags span{display:inline-flex;flex-direction:column;align-items:center;gap:8px; font-family:var(--font-head);font-weight:700;font-size:.84rem;color:var(--ink-soft)} .hero-flags img{width:50px;height:50px;border-radius:50%;box-shadow:var(--shadow-sm);margin:0} /* pull bubbles in from the viewport edges so they frame the centred text (instead of hugging the margins and leaving a hole in the middle) */ .hero[data-hero="d"] .bubble{opacity:.62} /* left column (top / middle / bottom) */ .hero[data-hero="d"] .bubble.b1{top:10%;left:7%} .hero[data-hero="d"] .bubble.b3{top:47%;left:5%} .hero[data-hero="d"] .bubble.b6{display:block;background:var(--teal-d);bottom:15%;left:8%;animation-delay:1.1s} /* right column (top / middle / bottom) */ .hero[data-hero="d"] .bubble.b2{top:13%;right:9%} .hero[data-hero="d"] .bubble.b5{top:47%;right:5%} .hero[data-hero="d"] .bubble.b4{bottom:15%;right:9%} @media (max-width:1100px){ .hero[data-hero="d"] .bubble.b1,.hero[data-hero="d"] .bubble.b3,.hero[data-hero="d"] .bubble.b6{left:3%} .hero[data-hero="d"] .bubble.b2,.hero[data-hero="d"] .bubble.b4,.hero[data-hero="d"] .bubble.b5{right:3%} } @media (max-width:760px){ .hero-bubbles{display:none} .hero-flags{gap:14px 22px} } /* ============================================================ DEMO STYLE PICKER — preview-only control, not part of the delivered site. Lets the client try colour schemes + headers. ============================================================ */ .demo-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:9px; font-family:var(--font-head);font-weight:800;font-size:.95rem;color:#fff;cursor:pointer; background:var(--orange);border:none;border-radius:999px;padding:13px 20px; box-shadow:0 16px 34px -12px rgba(0,0,0,.4);transition:transform .18s,box-shadow .18s,background .3s} .demo-fab:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(0,0,0,.46)} .demo-fab svg{width:20px;height:20px} .demo-fab.is-open{transform:scale(.9);opacity:0} .demo-panel{position:fixed;right:20px;bottom:20px;z-index:91;width:min(360px,calc(100vw - 32px)); max-height:min(86vh,720px);overflow:auto;background:#fff;color:var(--ink); border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.45); padding:20px 20px 22px;font-family:var(--font-body); transform:translateY(14px) scale(.98);opacity:0;visibility:hidden; transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .22s,visibility .22s} .demo-panel.is-open{transform:none;opacity:1;visibility:visible} .demo-panel .dp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px} .demo-panel .dp-title{font-family:var(--font-head);font-weight:800;font-size:1.08rem;color:var(--ink);line-height:1.2} .demo-panel .dp-sub{font-size:.82rem;color:var(--muted);margin:2px 0 0} .demo-panel .dp-close{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line); background:var(--cream);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer} .demo-panel .dp-close:hover{border-color:var(--orange);color:var(--orange-d)} .demo-panel h4{font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--teal-ink);margin:20px 0 11px} .dp-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .dp-swatch{cursor:pointer;border:1.5px solid var(--line);border-radius:12px;background:#fff; padding:9px 9px 8px;display:flex;flex-direction:column;align-items:stretch;gap:8px;transition:.15s} .dp-swatch:hover{border-color:var(--teal);transform:translateY(-2px)} .dp-swatch.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,116,46,.16)} .dp-dots{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .dp-dots i{flex:1;height:100%} .dp-swatch span{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--ink);text-align:center} .dp-heroes{display:grid;grid-template-columns:1fr 1fr;gap:9px} .dp-hero{cursor:pointer;border:1.5px solid var(--line);border-radius:13px;background:var(--cream); padding:11px 12px;text-align:left;transition:.15s;display:flex;gap:10px;align-items:center} .dp-hero:hover{border-color:var(--teal);transform:translateY(-2px)} .dp-hero.active{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(242,116,46,.16)} .dp-hero .ic{flex:0 0 auto;width:30px;height:24px;border-radius:5px;border:1.5px solid var(--ink-soft); position:relative;overflow:hidden;background:#fff} .dp-hero b{font-family:var(--font-head);font-weight:700;font-size:.8rem;color:var(--ink);display:block;line-height:1.15} .dp-hero small{font-size:.68rem;color:var(--muted)} /* tiny wireframe glyphs for each header style */ .ic-a::before{content:"";position:absolute;inset:4px;border-left:9px solid var(--teal);border-radius:2px} .ic-a::after{content:"";position:absolute;right:4px;top:4px;bottom:4px;width:11px;background:var(--orange);border-radius:2px} .ic-b::before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:9px;background:var(--teal);border-radius:2px} .ic-b::after{content:"";position:absolute;right:5px;top:50%;width:11px;height:11px;border-radius:50%; transform:translateY(-50%);background:radial-gradient(circle at 50% 50%,var(--orange),var(--red))} .ic-c{background:linear-gradient(120deg,var(--espresso),var(--teal-d))} .ic-c::before{content:"";position:absolute;left:4px;top:8px;width:14px;height:3px;background:#fff;border-radius:2px;box-shadow:0 5px 0 rgba(255,255,255,.7)} .ic-d::before{content:"";position:absolute;left:50%;top:6px;width:16px;height:4px;background:var(--ink-soft);border-radius:2px;transform:translateX(-50%)} .ic-d::after{content:"";position:absolute;left:4px;right:4px;bottom:5px;height:6px; background:radial-gradient(circle at 3px 3px,var(--teal) 2.5px,transparent 3px) 0 0/8px 8px} .dp-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line); font-size:.76rem;color:var(--muted);line-height:1.5} .dp-reset{margin-top:10px;width:100%;border:1px solid var(--line);background:var(--cream);color:var(--ink-soft); font-family:var(--font-head);font-weight:700;font-size:.82rem;border-radius:10px;padding:9px;cursor:pointer} .dp-reset:hover{border-color:var(--orange);color:var(--orange-d)} @media (prefers-reduced-motion:reduce){ .cloudFloat,.hero-cloud img{animation:none} .demo-panel,.demo-fab{transition:none} } /* ============================================================ KURZY.HTML — page-scoped breathing room (client: "velmi nahusto"). All rules are scoped under body.kurzy-page so the shared selectors (.course, .lang-block, .sec-tight, .price-card …) keep their original spacing on index / o-nas / kontakt / test. ============================================================ */ /* 1 · looser vertical rhythm between the page's sections */ .kurzy-page .sec-tight{padding:clamp(54px,7vw,92px) 0} /* 2 · price cards: a touch more internal air */ .kurzy-page .price-card{padding:34px 30px} .kurzy-page .price-feats{gap:11px;margin:20px 0 26px} /* 3 · category pill nav: more room before the first language block */ .kurzy-page .cat-nav{gap:12px 14px;margin:8px 0 clamp(48px,6vw,72px)} /* 4 · tighten head→intro, then give the intro real space before the grid (replaces the inline margin-bottom:6px that glued text to the cards) */ .kurzy-page .lang-block .lb-head{margin-bottom:14px} .kurzy-page .lang-block > .lead{max-width:68ch;margin-bottom:clamp(24px,3vw,34px)} /* 5 · separate each language block with generous space + a hairline divider instead of letting them run together as one wall of cards */ .kurzy-page .lang-block{margin-bottom:0} .kurzy-page .lang-block + .lang-block{ margin-top:clamp(52px,7vw,84px); padding-top:clamp(30px,4vw,46px); border-top:1px solid color-mix(in srgb, var(--teal) 26%, transparent); } /* 6 · open up the course grid + cards so the copy can breathe */ .kurzy-page .course-grid{gap:clamp(20px,2.2vw,28px)} .kurzy-page .course{padding:clamp(24px,2.2vw,30px)} .kurzy-page .course .ct{margin-bottom:10px} .kurzy-page .course p{font-size:.96rem;line-height:1.6} /* 7 · Firmy / Online split sections: wider column gutter */ .kurzy-page .lang-block .split{gap:clamp(36px,6vw,72px)} @media (max-width:560px){ .kurzy-page .cat-nav{margin-bottom:40px} .kurzy-page .lang-block + .lang-block{margin-top:46px;padding-top:30px} .kurzy-page .course{padding:24px 22px} }