/* Rodicuv kompas -- shared design tokens + components for the new
   teal/cream content brand (homepage, /temata, /clanky, /produkty index,
   /o-projektu, /navody-zdarma). The K.L.I.D. product page keeps its own
   existing gold/night stylesheet unchanged -- see produkty/klid-do-kapsy. */

@font-face{font-family:'RKPoppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1EFF;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1EFF;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1EFF;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1EFF;}
@font-face{font-family:'RKPoppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}

:root{
  --rk-navy:#12324A;
  --rk-deep-teal:#0E6973;
  --rk-teal:#168C91;
  --rk-teal-soft:#DDF1EF;
  --rk-cream:#FFF9EF;
  --rk-paper:#FFFCF7;
  --rk-sand:#F7E9D2;
  --rk-yellow:#F4C65B;
  --rk-orange:#FF8A2A;
  --rk-coral:#EF958C;
  --rk-sage:#DDEBDD;
  --rk-blue-soft:#DDEFF5;
  --rk-lavender:#E8DDF2;
  --rk-text:#15263A;
  --rk-muted:#647381;
  --rk-border:rgba(18,50,74,0.10);
  --rk-radius-lg:22px;
  --rk-radius-md:16px;
  --rk-radius-sm:10px;
  --rk-shadow:0 12px 28px -14px rgba(18,50,74,0.22);
  --rk-shadow-sm:0 4px 12px -6px rgba(18,50,74,0.18);
  --dur:1;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--rk-cream); color:var(--rk-text);
  font-family:'RKPoppins',-apple-system,'Segoe UI',sans-serif; font-weight:400;
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3{font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
p{margin:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2.5px solid var(--rk-orange); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1160px; margin:0 auto; padding:0 20px;}
section{position:relative;}
.section-pad{ padding:2.6rem 0; }
.section-head{ text-align:center; margin-bottom:1.4rem; }
.section-head h2{ font-size:clamp(1.35rem,3.4vw,1.8rem); color:var(--rk-navy); }
.section-head p{ color:var(--rk-muted); margin-top:.5rem; font-size:.95rem; }
.section-cta{ text-align:center; margin-top:1.3rem; }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border-radius:999px; padding:.9rem 1.5rem; font-weight:600; font-size:.9rem;
  border:1.5px solid transparent; cursor:pointer; min-height:44px;
  transition:transform calc(.15s*var(--dur)) ease, box-shadow calc(.15s*var(--dur)) ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--rk-deep-teal); color:#fff; box-shadow:var(--rk-shadow-sm); }
.btn-primary:hover{ background:var(--rk-teal); }
.btn-outline{ background:var(--rk-paper); color:var(--rk-navy); border-color:var(--rk-border); }
.btn-outline:hover{ border-color:var(--rk-deep-teal); }
.btn-cta{ background:var(--rk-orange); color:#fff; box-shadow:0 10px 22px -10px rgba(255,138,42,.55); }
.btn-cta:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:var(--rk-deep-teal); padding:.5rem .2rem; }
.btn-block{ width:100%; }
.btn .arrow{ transition:transform calc(.15s*var(--dur)) ease; }
.btn:hover .arrow{ transform:translateX(3px); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.82rem; min-height:38px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.4em; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rk-deep-teal);
}
.badge{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.3em .7em; border-radius:999px;
}
.badge-free{ background:var(--rk-sage); color:#1e5c3a; }
.badge-guide{ background:var(--rk-blue-soft); color:var(--rk-deep-teal); }
.badge-available{ background:var(--rk-orange); color:#fff; }
.badge-soon{ background:var(--rk-border); color:var(--rk-muted); }

/* ============ motion helpers ============ */
@keyframes rk-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes rk-wiggle{ 0%,100%{transform:rotate(-1.5deg);} 50%{transform:rotate(1.5deg);} }
@keyframes rk-breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.015);} }
.float{ animation:rk-float calc(5s*var(--dur)) ease-in-out infinite; }
.wiggle{ animation:rk-wiggle calc(4.5s*var(--dur)) ease-in-out infinite; }
.breathe{ animation:rk-breathe calc(6s*var(--dur)) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .float,.wiggle,.breathe{ animation:none; } }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity calc(.5s*var(--dur)) ease, transform calc(.5s*var(--dur)) ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ header ============ */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(255,249,239,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rk-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand svg{ width:34px; height:34px; flex:none; }
.brand .word{ line-height:1.05; }
.brand .top{ display:block; font-size:.56rem; letter-spacing:.18em; font-weight:700; color:var(--rk-deep-teal); }
.brand .bottom{ display:block; font-size:1rem; font-weight:700; color:var(--rk-navy); }
.desktop-nav{ display:none; align-items:center; gap:1.8rem; font-size:.9rem; font-weight:500; }
.desktop-nav a{ color:var(--rk-navy); opacity:.85; }
.desktop-nav a:hover{ opacity:1; color:var(--rk-deep-teal); }
.desktop-nav a.is-current{ opacity:1; color:var(--rk-deep-teal); }
.header-actions{ display:flex; align-items:center; gap:.6rem; }
.hamburger{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; border:1.5px solid var(--rk-border); background:var(--rk-paper); flex:none;
}
.hamburger svg{ width:20px; height:20px; }
.mobile-menu{
  display:none; flex-direction:column; gap:.2rem; padding:.6rem 20px 1rem; border-top:1px solid var(--rk-border);
  background:var(--rk-paper);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:.7rem .4rem; font-weight:500; color:var(--rk-navy); border-radius:8px; min-height:44px; display:flex; align-items:center; }
.mobile-menu a:hover{ background:var(--rk-teal-soft); }
@media (min-width:901px){
  .desktop-nav{ display:flex; }
  .hamburger{ display:none; }
  .mobile-menu{ display:none !important; }
}

/* ============ breadcrumb / page header (inner pages) ============ */
.page-hero{ padding:2rem 0 1rem; }
.breadcrumb{ font-size:.78rem; color:var(--rk-muted); margin-bottom:.8rem; display:flex; gap:.4em; flex-wrap:wrap; }
.breadcrumb a{ color:var(--rk-deep-teal); }
.page-hero h1{ font-size:clamp(1.7rem,4.4vw,2.4rem); color:var(--rk-navy); margin-bottom:.7rem; }
.page-hero .lead{ font-size:1rem; color:var(--rk-muted); max-width:60ch; }

/* ============ topic cards ============ */
.topic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.topic-card{
  border-radius:var(--rk-radius-md); padding:1.1rem 1.05rem 1.2rem; border:1px solid var(--rk-border);
  display:flex; flex-direction:column; gap:.55rem; min-height:168px;
  transition:transform calc(.18s*var(--dur)) ease, box-shadow calc(.18s*var(--dur)) ease;
}
.topic-card:hover{ transform:translateY(-3px); box-shadow:var(--rk-shadow); }
.topic-card:active{ transform:scale(0.98); }
.topic-card svg{ width:34px; height:34px; }
.topic-card h3{ font-size:1rem; color:var(--rk-navy); }
.topic-card p{ font-size:.82rem; color:var(--rk-muted); flex:1; }
.topic-card .go{ font-size:.8rem; font-weight:600; color:var(--rk-navy); display:inline-flex; align-items:center; gap:.3em; }
.topic-card--sand{ background:var(--rk-sand); }
.topic-card--blue{ background:var(--rk-blue-soft); }
.topic-card--sage{ background:var(--rk-sage); }
.topic-card--lavender{ background:var(--rk-lavender); }
@media (min-width:901px){ .topic-grid{ grid-template-columns:repeat(4,1fr); } }

/* ============ hero (homepage) ============ */
.hero{ padding:2.2rem 0 3rem; overflow:hidden; }
.hero-grid{ display:grid; gap:2rem; align-items:center; }
.hero-copy{ text-align:center; }
.hero-illustration{ display:flex; justify-content:center; }
h1.hero-title{ font-size:clamp(1.9rem,6vw,2.7rem); line-height:1.14; color:var(--rk-navy); margin:0 0 .9rem; }
h1.hero-title .accent{ color:var(--rk-deep-teal); }
.hero-sub{ font-size:1.02rem; color:var(--rk-muted); max-width:46ch; margin:0 auto 1.4rem; }
.hero-ctas{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.1rem; }
.trust-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.trust-chip{
  display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; font-weight:500; color:var(--rk-navy);
  background:var(--rk-paper); border:1px solid var(--rk-border); border-radius:999px; padding:.35rem .75rem;
}
.trust-chip svg{ width:14px; height:14px; flex:none; color:var(--rk-deep-teal); }
@media (min-width:641px){ .hero-ctas{ flex-direction:row; justify-content:center; } }
@media (min-width:901px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; text-align:left; }
  .hero-copy{ text-align:left; }
  .hero-sub{ margin:0 0 1.6rem; }
  .hero-ctas{ justify-content:flex-start; }
  .trust-chips{ justify-content:flex-start; }
  h1.hero-title{ font-size:clamp(2.4rem,3.6vw,3.1rem); }
}
.hero-scene{ position:relative; width:min(360px,88vw); aspect-ratio:1/1; }
.hero-scene .blob{ position:absolute; inset:6%; border-radius:44% 56% 58% 42%/48% 42% 58% 52%; background:var(--rk-teal-soft); }
.hero-scene .compass{ position:absolute; inset:16%; }
.hero-scene .doodle{ position:absolute; }
.hero-scene .d-star1{ top:2%; left:6%; width:26px; color:var(--rk-orange); }
.hero-scene .d-star2{ bottom:10%; right:2%; width:20px; color:var(--rk-teal); }
.hero-scene .d-leaf{ bottom:2%; left:0; width:34px; color:var(--rk-sage); }
.hero-scene .d-heart{ top:8%; right:6%; width:24px; color:var(--rk-coral); }
.hero-scene .d-dots{ position:absolute; inset:0; }

/* ============ resource/free-content cards ============ */
.resource-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.resource-card{
  background:var(--rk-paper); border:1px solid var(--rk-border); border-radius:var(--rk-radius-md);
  padding:1rem .9rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.resource-card svg{ width:38px; height:38px; }
.resource-card h3{ font-size:.86rem; color:var(--rk-navy); line-height:1.3; }
.resource-card p{ font-size:.74rem; color:var(--rk-muted); }
@media (min-width:901px){ .resource-grid{ grid-template-columns:repeat(4,1fr); } }

/* ============ author ============ */
.author-card{
  background:var(--rk-paper); border:1px solid var(--rk-border); border-radius:var(--rk-radius-lg);
  padding:1.4rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
}
.author-photo{ width:84px; height:84px; border-radius:26px; overflow:hidden; flex:none; box-shadow:var(--rk-shadow-sm); }
.author-photo img{ width:100%; height:100%; object-fit:cover; }
.author-card h2{ font-size:1.3rem; color:var(--rk-navy); margin-bottom:.6rem; }
.author-card p{ font-size:.9rem; color:var(--rk-muted); margin-bottom:.7rem; }
@media (min-width:641px){ .author-card{ flex-direction:row; align-items:center; } }
.author-photo-lg{ width:132px; height:132px; border-radius:34px; overflow:hidden; box-shadow:var(--rk-shadow-sm); flex:none; }
.author-photo-lg img{ width:100%; height:100%; object-fit:cover; }

/* ============ tech philosophy block ============ */
.tech-block{ background:var(--rk-sage); border-radius:var(--rk-radius-lg); padding:1.6rem 1.3rem; }
.tech-block h2{ font-size:1.3rem; color:var(--rk-navy); margin-bottom:.7rem; }
.tech-block p{ font-size:.92rem; color:var(--rk-text); opacity:.85; margin-bottom:.9rem; }
.tech-quote{
  background:var(--rk-paper); border-left:3px solid var(--rk-orange); border-radius:8px;
  padding:.9rem 1rem; font-style:italic; font-size:.88rem; color:var(--rk-navy); margin-bottom:1rem;
}
.tech-visual{ display:flex; justify-content:center; margin-bottom:1rem; }
.tech-visual svg{ width:96px; height:96px; }
@media (min-width:901px){
  .tech-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
  .tech-visual{ margin-bottom:0; }
}

/* ============ products ============ */
.product-grid{ display:flex; flex-direction:column; gap:.9rem; }
.product-card{
  background:var(--rk-paper); border:1px solid var(--rk-border); border-radius:var(--rk-radius-md);
  padding:1.1rem; display:flex; gap:1rem; align-items:center;
}
.product-cover{
  width:64px; height:84px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--rk-navy); color:var(--rk-yellow); font-size:.6rem; font-weight:700; text-align:center; line-height:1.3;
  box-shadow:var(--rk-shadow-sm);
}
.product-cover.soon{ background:var(--rk-border); color:var(--rk-muted); }
.product-body{ flex:1; min-width:0; }
.product-body h3{ font-size:.98rem; color:var(--rk-navy); margin:.25rem 0 .3rem; }
.product-body p{ font-size:.8rem; color:var(--rk-muted); margin-bottom:.5rem; }
.product-price{ font-weight:700; color:var(--rk-navy); font-size:1rem; margin-right:.6rem; }
.product-actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.3rem; }
@media (min-width:901px){ .product-grid{ flex-direction:row; align-items:stretch; } .product-card{ flex:1; flex-direction:column; align-items:flex-start; text-align:left; } .product-cover{ width:100%; height:120px; } }

/* ============ empty states + component preview swatch ============ */
.empty-state{
  border:1.5px dashed var(--rk-border); border-radius:var(--rk-radius-md); padding:2rem 1.3rem;
  text-align:center; color:var(--rk-muted); background:var(--rk-paper);
}
.empty-state svg{ width:44px; height:44px; margin:0 auto .8rem; color:var(--rk-teal); }
.empty-state h3{ color:var(--rk-navy); font-size:1.02rem; margin-bottom:.4rem; }
.empty-state p{ font-size:.86rem; margin-bottom:1rem; }

/* ============ newsletter ============ */
.newsletter-card{
  background:var(--rk-navy); border-radius:var(--rk-radius-lg); padding:1.5rem 1.3rem; color:var(--rk-teal-soft);
  text-align:center;
}
.newsletter-card h2{ color:#fff; font-size:1.15rem; margin-bottom:.5rem; }
.newsletter-card p{ font-size:.86rem; opacity:.85; margin-bottom:1rem; }
.newsletter-soon{
  display:inline-flex; align-items:center; gap:.5em; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:.6rem 1.2rem; font-size:.82rem; font-weight:600;
}

/* ============ footer ============ */
.site-footer{ background:var(--rk-navy); color:var(--rk-teal-soft); padding:2.4rem 0 6rem; margin-top:1rem; }
.footer-grid{ display:grid; gap:1.6rem; margin-bottom:1.8rem; }
.footer-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:.7rem; opacity:.8; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-col a{ font-size:.84rem; opacity:.85; }
.footer-col a:hover{ opacity:1; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.footer-brand svg{ width:26px; height:26px; }
.footer-tagline{ font-size:.82rem; font-weight:600; color:#fff; margin-bottom:1.2rem; }
.footer-legal{ font-size:.72rem; opacity:.55; line-height:1.6; border-top:1px solid rgba(255,255,255,.12); padding-top:1.2rem; }
@media (min-width:901px){ .footer-grid{ grid-template-columns:1.3fr repeat(3,1fr); } .site-footer{ padding-bottom:2.4rem; } }

/* ============ mobile sticky bottom nav ============ */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:var(--rk-paper); border-top:1px solid var(--rk-border);
  padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px -12px rgba(18,50,74,.25);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.35rem 0;
  font-size:.64rem; font-weight:600; color:var(--rk-muted); border-radius:10px; min-height:44px; justify-content:center;
}
.bottom-nav a svg{ width:21px; height:21px; }
.bottom-nav a.active{ color:var(--rk-deep-teal); }
@media (min-width:901px){ .bottom-nav{ display:none; } }
body.has-bottom-nav{ padding-bottom:66px; }
@media (min-width:901px){ body.has-bottom-nav{ padding-bottom:0; } }

/* ============ cookie bar (shared with the existing K.L.I.D. page pattern) ============ */
.cookie-bar{
  display:none; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;
  background:var(--rk-navy); color:var(--rk-teal-soft);
  padding:.8rem 1.5rem; text-align:center;
}
.cookie-bar.show{ display:flex; }
.cookie-bar p{ margin:0; font-size:.78rem; opacity:.9; max-width:60ch; }
.cookie-bar a{ color:#fff; text-decoration:underline; }
.cookie-bar button{
  flex:none; background:var(--rk-orange); color:#fff; border:none; border-radius:999px;
  padding:.5rem 1.3rem; font-weight:700; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
}

/* ============ simple content list (o-projektu / temata / navody stub pages) ============ */
.prose{ max-width:68ch; font-size:.98rem; color:var(--rk-text); }
.prose p{ margin-bottom:1rem; }
.prose p:last-child{ margin-bottom:0; }