/* bystrio.cz – společný vzhled. Vzhled BY-1 „karty“ (Norka 10. 11.: „dlaždice B. je to daleko výraznější…“).
   Barvy loga: fialová #481F7E, limetka #8CC63F, písmo loga Montserrat. Text Nunito jako Domácí učitel. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Nunito:wght@400;700;800;900&display=swap');
:root { --fialova:#481F7E; --limetka:#8CC63F; --inkoust:#1C1C24; --seda:#4A4A58; --linka:#E4E1EA; --pozadi:#FAFAF7;
        --du:#00A9AE; --du-tmava:#007F83; --du-svetla:#E0F7F7; --ct:#8B5CC9; --ct-tmava:#6a3fb5; --ct-svetla:#f1e8fd; --zluta:#FFC83A; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:'Nunito', system-ui, sans-serif; color:var(--inkoust); background:var(--pozadi); font-size:19px; line-height:1.55; }
img { max-width:100%; display:block; }
a { color:var(--fialova); }
h1, h2, h3 { font-family:'Montserrat', 'Nunito', sans-serif; font-weight:800; letter-spacing:-.01em; }
.obal { max-width:1120px; margin:0 auto; padding:0 16px; }

/* Hlavička */
.hlava { display:flex; align-items:center; gap:12px; padding:14px 0; }
.hlava .logo img { height:40px; width:auto; }
.hlava nav { margin-left:auto; display:flex; gap:22px; font-weight:800; font-size:17px; }
.hlava nav a { text-decoration:none; color:var(--seda); }
.hlava nav a:hover { color:var(--fialova); }
@media (max-width:600px) { .hlava nav { gap:14px; font-size:16px; } .hlava .logo img { height:32px; } .hlava nav .navic { display:none; } }

/* Tlačítka */
.tl { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:14px 26px; font-weight:900;
      font-size:19px; text-decoration:none; border:0; box-shadow:0 5px 0 rgba(0,0,0,.18); cursor:pointer; }
.tl.zluta { background:var(--zluta); color:var(--inkoust); }
.tl.obrys { background:transparent; color:inherit; box-shadow:none; border:2px solid currentColor; }
.play { display:inline-flex; align-items:center; gap:10px; background:#111; color:#fff; border-radius:10px; padding:8px 16px;
        font-size:14px; line-height:1.15; text-decoration:none; }
.play svg { width:24px; height:24px; }
.play b { display:block; font-size:18px; }
/* Tlačítka Google Play zatím nejsou: obě aplikace dávají na Google Play 404. Až vyjdou, vrátit <a class="play" href="https://play.google.com/store/apps/details?id=…"> se „Stáhnout na Google Play“. */

/* Úvod */
.uvod { padding:36px 0 6px; max-width:780px; }
.uvod h1 { margin:0; font-size:36px; line-height:1.12; text-wrap:balance; }
.uvod h1 .jiskra { color:var(--limetka); }
.uvod p { margin:12px 0 0; font-size:20px; color:var(--seda); }

/* Karty aplikací */
.dvojice { display:grid; grid-template-columns:1fr; gap:22px; margin-top:28px; }
.app { border-radius:26px; overflow:hidden; display:flex; flex-direction:column; color:#fff; }
.app .obr { height:250px; display:flex; align-items:flex-end; justify-content:center; gap:4px; padding-top:20px; }
.app .obr { position:relative; }
.app .obr img { height:230px; width:auto; }
.ct .obr img.ikona { height:150px; border-radius:30px; box-shadow:0 10px 30px rgba(60,20,120,.25); }
.ct .obr img.snimek { height:230px; border-radius:16px; box-shadow:0 10px 30px rgba(60,20,120,.25); transform:rotate(4deg); }
/* Logo aplikace NA obrázku (Norka 10. 11.: „to logo se přidá na obrázek, ne vymění za obrázek“) */
.obr img.znak { position:absolute; top:14px; left:14px; height:64px !important; width:64px; border-radius:15px; box-shadow:0 4px 14px rgba(0,0,0,.25); transform:none; margin:0; }
.app .txt { padding:22px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.app h2 { margin:0; font-size:30px; line-height:1.15; }
.app p { margin:0; font-size:19px; opacity:.95; }
.app .akce { margin-top:auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:10px; }
.app .tl.obrys { color:#fff; }
.komu { font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.du { background:linear-gradient(160deg,var(--du) 0%,var(--du-tmava) 100%); }
.du .obr { background:radial-gradient(circle at 30% 100%, #8fd18f 0 32%, transparent 33%), radial-gradient(circle at 75% 100%, #7fd8da 0 32%, transparent 33%), var(--du-svetla); }
.ct { background:linear-gradient(160deg,var(--ct) 0%,var(--ct-tmava) 100%); }
.ct .obr { background:var(--ct-svetla); align-items:center; }
@media (min-width:860px) { .dvojice { grid-template-columns:1fr 1fr; } .uvod h1 { font-size:48px; } }
@media (max-width:420px) { .app .obr { height:210px; } .app .obr img { height:190px; } .ct .obr img.ikona { height:120px; } .ct .obr img.snimek { height:190px; } .obr img.znak { height:52px !important; width:52px; border-radius:12px; } }

/* Stránka aplikace a textové stránky */
.pruh { background:linear-gradient(160deg,var(--ct) 0%,var(--ct-tmava) 100%); color:#fff; border-radius:26px; padding:28px 26px;
        display:grid; grid-template-columns:1fr; gap:22px; align-items:center; margin-top:12px; }
.pruh h1 { margin:6px 0 10px; font-size:36px; line-height:1.12; }
.pruh p { margin:0 0 8px; font-size:20px; }
.pruh .akce { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; }
.pruh .obr { display:flex; justify-content:center; align-items:center; background:var(--ct-svetla); border-radius:20px; padding:22px 10px; }
.pruh .obr { position:relative; }
.pruh .obr img.ikona { height:130px; border-radius:28px; box-shadow:0 10px 30px rgba(60,20,120,.25); }
.pruh .obr img.snimek { height:300px; border-radius:16px; box-shadow:0 10px 30px rgba(60,20,120,.25); transform:rotate(4deg); }
@media (min-width:860px) { .pruh { grid-template-columns:1.1fr 1fr; padding:40px; } .pruh h1 { font-size:46px; } }
.vlastnosti { display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; }
.vlastnosti div { background:#fff; border:1px solid var(--linka); border-radius:20px; padding:20px 22px; }
.vlastnosti h3 { margin:0 0 6px; font-size:20px; color:var(--fialova); }
.vlastnosti p { margin:0; color:var(--seda); }
@media (min-width:760px) { .vlastnosti { grid-template-columns:1fr 1fr; } }
.poznamka { margin-top:22px; color:var(--seda); font-size:17px; }

.text { max-width:720px; padding:20px 0 0; }
.text h1 { font-size:32px; line-height:1.15; margin:10px 0 4px; }
.text h2 { font-size:21px; margin:1.8em 0 .4em; color:var(--fialova); }
.text .sub { color:var(--seda); margin:0 0 20px; font-size:17px; }
.text ul { padding-left:22px; }
.text li { margin-bottom:6px; }
.udaje { background:#fff; border:1px solid var(--linka); border-radius:20px; padding:22px 24px; margin-top:16px; }
.udaje dl { display:grid; grid-template-columns:1fr; gap:2px 18px; margin:0; }
.udaje dt { font-weight:800; color:var(--seda); font-size:16px; margin-top:10px; }
.udaje dd { margin:0; font-size:19px; }
@media (min-width:600px) { .udaje dl { grid-template-columns:auto 1fr; } .udaje dt { margin-top:0; } }

/* Patička */
.pata { margin-top:56px; padding:28px 0 44px; border-top:1px solid var(--linka); font-size:16px; color:var(--seda); }
.pata .sloupce { display:grid; grid-template-columns:1fr; gap:22px; }
.pata h4 { margin:0 0 6px; font-size:16px; color:var(--inkoust); }
.pata p { margin:0 0 4px; }
.pata a { color:var(--seda); }
.pata img { height:26px; width:auto; margin-bottom:8px; }
@media (min-width:860px) { .pata .sloupce { grid-template-columns:1.3fr 1fr; } }