/* Breathune — spoločný štýl pre index, privacy-policy a support. */
:root{
  --aqua:#33b8cc; --teal:#1a8599; --deep:#0d3a4a;
  --ink:#0f2028; --muted:#5b7480;
  --bg:#f2f8f9; --card:#ffffff; --line:#dbe8ec; --warn:#b7791f;
  --maxw:760px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e8f1f4; --muted:#9db3bc; --bg:#0b1a22; --card:#122730; --line:#1e3a46; --warn:#e0a83a; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Prepínač jazyka: skryjeme vždy tú druhú mutáciu. */
html[data-lang="sk"] .en{display:none !important}
html[data-lang="en"] .sk{display:none !important}

.wrap{max-width:var(--maxw); margin:0 auto}

header{
  background:linear-gradient(135deg,#32afc1 0%,#136375 55%,#102c44 100%);
  color:#fff; padding:34px 20px 28px;
}
header.tall{padding:56px 20px 48px}
.brand{display:flex; align-items:center; gap:14px}
.brand h1{margin:0; font-size:30px; letter-spacing:.3px}
header.tall .brand h1{font-size:42px}
header p{margin:10px 0 0; opacity:.92}
.back{
  display:inline-block; margin-bottom:16px; color:#fff; opacity:.85;
  text-decoration:none; font-size:15px; font-weight:600;
}
.back:hover{opacity:1; text-decoration:underline}

.langbar{display:flex; gap:8px; margin-top:20px}
.langbar button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:7px 15px; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
}
.langbar button[aria-pressed="true"]{background:#fff; color:var(--deep); border-color:#fff}

nav{position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
nav .wrap{display:flex; gap:22px; padding:12px 20px; overflow-x:auto}
nav a{color:var(--teal); text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap}
nav a:hover{text-decoration:underline}

main{padding:8px 20px 60px}
section{margin:36px 0 0}
h2{font-size:24px; margin:0 0 6px; letter-spacing:.2px}
h3{font-size:18px; margin:26px 0 6px}
h2+p,h3+p{margin-top:6px}
a{color:var(--teal)}
ul{padding-left:22px}
li{margin:5px 0}
.lede{font-size:18px; color:var(--muted)}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:16px 0}
.card h3{margin-top:0}
.key{
  background:linear-gradient(135deg, rgba(51,184,204,.13), rgba(26,133,153,.10));
  border:1px solid rgba(51,184,204,.4);
}

/* Rozcestník na úvodnej stránke */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0}
@media (max-width:620px){ .tiles{grid-template-columns:1fr} }
.tile{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
  transition:border-color .15s ease, transform .15s ease;
}
.tile:hover{border-color:var(--aqua); transform:translateY(-2px)}
.tile h3{margin:0 0 6px; font-size:20px; color:var(--teal)}
.tile p{margin:0; color:var(--muted); font-size:15px}
.tile .arrow{color:var(--teal); font-weight:700; display:inline-block; margin-top:12px}

.plat{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.4px;
  padding:3px 9px; border-radius:6px; margin-right:8px; vertical-align:2px;
  background:var(--teal); color:#fff;
}
.plat.ios{background:#3c5a75}
.plat.and{background:#2e7d63}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; display:block; overflow-x:auto}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(127,127,127,.14); padding:2px 6px; border-radius:5px}
.note{border-left:3px solid var(--warn); padding-left:14px; color:var(--muted)}

details{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:0 18px; margin:10px 0}
details[open]{padding-bottom:6px}
summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--teal); font-weight:700; margin-right:10px}
details[open] summary::before{content:"–"}

.mail{font-weight:600}
footer{border-top:1px solid var(--line); padding:26px 20px 50px; color:var(--muted); font-size:14px}
footer a{color:var(--muted)}

/* ===================== Úvodná stránka 2026 — hero, obchody, návod, programy, porovnanie =====================
   Pridané na koniec, aby privacy-policy/ a support/ ostali nedotknuté. */
:root{ --maxw-wide:980px }
.hero .wrap{max-width:var(--maxw-wide)}
body.home nav .wrap, body.home main .wrap, body.home footer .wrap{max-width:var(--maxw-wide)}
header.hero{padding:22px 20px 44px}
.hero .langbar{margin:0 0 30px; justify-content:flex-end}
.hero-grid{display:grid; grid-template-columns:132px 1fr; gap:26px; align-items:center}
@media (max-width:640px){ .hero-grid{grid-template-columns:1fr; text-align:center; justify-items:center} }
.appicon{border-radius:29px; box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.25)}
header.hero h1{margin:0; font-size:46px; letter-spacing:.2px; line-height:1.05}
.tagline{margin:8px 0 0 !important; font-size:19px; font-weight:600; opacity:.95}
.lede-hero{margin:12px 0 0 !important; font-size:16.5px; opacity:.88; max-width:620px}

/* Tlačidlá obchodov */
.stores{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; margin:34px 0 0}
.store{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff;
  background:rgba(8,26,36,.55); border:1px solid rgba(255,255,255,.22); border-radius:14px;
  padding:11px 16px; min-height:62px; backdrop-filter:blur(6px);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
a.store:hover{transform:translateY(-2px); background:rgba(8,26,36,.75); border-color:rgba(255,255,255,.5)}
.store-glyph{width:26px; height:26px; flex:none; opacity:.95}
.store small{display:block; font-size:12px; opacity:.8; letter-spacing:.2px}
.store strong{display:block; font-size:17px; line-height:1.2}
.store.soon{opacity:.55; cursor:default; border-style:dashed}
.store-note{margin:14px 0 0 !important; font-size:14px; opacity:.8}

/* Sekcie */
body.home section{margin:48px 0 0}
body.home h2{font-size:28px}
.center{text-align:center; margin-top:22px}
.btn{
  display:inline-block; text-decoration:none; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--aqua),var(--teal)); padding:11px 22px; border-radius:999px;
}
.muted{color:var(--muted); font-size:14px}

/* Ako dýchať */
.wave{margin:18px 0 6px; padding:6px 0}
.wave-lbl{font:600 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; fill:var(--muted)}
.wave-in{fill:var(--aqua)} .wave-out{fill:var(--teal)}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px}
.step{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 18px 14px; position:relative}
.step .num{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--aqua),var(--teal)); color:#fff; font-weight:800; font-size:14px;
}
.step h3{margin:12px 0 6px; font-size:17px}
.step p{margin:0; color:var(--muted); font-size:15px}
.howapp{margin:22px 0 0; padding-left:20px; color:var(--muted); font-size:15px}
body.home .note{margin-top:22px; padding:12px 16px; background:var(--card); border-radius:12px; border-left:3px solid var(--aqua); color:var(--ink); font-size:15px}
body.home .note p{margin:0}

/* Programy */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:18px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card.prog{margin:0; padding:18px 18px 16px; position:relative}
.card.prog h3{margin:6px 0 6px; font-size:18px}
.card.prog p{margin:0 0 30px; color:var(--muted); font-size:15px}
.pat{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.6px; color:var(--teal); background:rgba(51,184,204,.14); padding:3px 9px; border-radius:6px}
.tier{position:absolute; left:18px; bottom:14px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--teal); color:#fff}
.tier.both{background:#2e7d63}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px 26px; margin-top:26px}
.features strong{display:block; font-size:16px; margin-bottom:4px}
.features p{margin:0; color:var(--muted); font-size:14.5px}

/* Snore No More */
.snore-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:28px; align-items:start; margin-top:18px}
@media (max-width:760px){ .snore-grid{grid-template-columns:1fr} }
.feat{margin:0 0 16px}
.feat h3{margin:0 0 4px; font-size:17px; color:var(--teal)}
.feat p{margin:0; color:var(--muted); font-size:15px}
.shots{display:grid; grid-template-columns:1fr 1fr; gap:12px; position:sticky; top:64px}
.shots img{width:100%; height:auto; border-radius:22px; border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.disclaimer{margin-top:20px; font-size:14px; color:var(--muted); border-left:3px solid var(--warn); padding-left:12px}

/* Porovnanie */
.tablewrap{overflow-x:auto; margin-top:16px; border:1px solid var(--line); border-radius:14px; background:var(--card)}
table.cmp{display:table; margin:0; font-size:15px; width:100%}
table.cmp th,table.cmp td{padding:11px 14px; border-bottom:1px solid var(--line)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp th:not(:first-child), table.cmp td:not(:first-child){text-align:center; width:130px}
table.cmp th:nth-child(3){color:var(--teal)}
table.cmp td:nth-child(3){font-weight:600}

/* Karty s odkazom, kontakt, pätka */
.card.link{display:block; text-decoration:none; color:inherit; margin:0; transition:border-color .15s ease, transform .15s ease}
.card.link:hover{border-color:var(--aqua); transform:translateY(-2px)}
.card.link h3{color:var(--teal); font-size:19px}
.card.link p{color:var(--muted); font-size:15px; margin:0 0 10px}
.card.link .more{color:var(--teal); font-weight:700}
.quote{margin:26px 0 0; padding:16px 18px; background:var(--card); border-radius:14px; border:1px solid var(--line); font-style:italic; color:var(--ink)}
.quote cite{display:block; margin-top:6px; font-style:normal; color:var(--muted); font-size:14px}
footer .fine{font-size:12.5px; margin-top:14px}