/* ============================================================
   3F s. r. o. — společné styly (index, o-mne, kontakt)
   ============================================================ */
:root{
  --cream:      #FFF8F0;
  --cream-deep: #FCEEDC;
  --white:      #FFFFFF;
  --orange:     #F79A19;
  --orange-deep:#DE8508;
  --orange-soft:#FEF3E2;
  --brown:      #7B5C3C;
  --brown-deep: #3E2E1E;
  --ink:        #2A1F14;
  --ink-soft:   #6B5D4E;
  --line:       #F0E2D0;

  --ff-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --ff-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-card: 0 2px 6px rgba(62,46,30,.05), 0 12px 32px rgba(62,46,30,.07);
  --shadow-tile: 0 4px 10px rgba(62,46,30,.08), 0 16px 40px rgba(62,46,30,.10);
  --sp-section: clamp(72px, 10vw, 128px);
  --container: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; }

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 40px);
}

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--ff-display); line-height:1.12; color:var(--brown-deep); text-wrap:balance; }
h1{ font-size:clamp(2.5rem, 5.6vw, 4.15rem); font-weight:800; letter-spacing:-.01em; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:800; letter-spacing:-.008em; }
h3{ font-size:1.3rem; font-weight:700; }

.accent{ color:var(--orange); }
.lead{ font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:var(--ink-soft); }
.lead strong{ color:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:1rem; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--primary{
  background:var(--orange); color:#fff;
  box-shadow:0 8px 20px rgba(247,154,25,.32);
}
.btn--primary:hover{ background:var(--orange-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(247,154,25,.4); }
.btn--ghost{
  background:transparent; color:var(--orange-deep); border-color:var(--orange);
}
.btn--ghost:hover{ background:var(--orange-soft); transform:translateY(-2px); }
.btn--onbrown{
  background:var(--orange); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.btn--onbrown:hover{ background:var(--orange-deep); transform:translateY(-2px); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,248,240,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow .25s ease;
}
.header.scrolled{ box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(62,46,30,.06); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.logo img{ width:46px; height:auto; }
.logo__text{ display:flex; align-items:baseline; gap:5px; font-family:var(--ff-display); }
.logo__mark{ font-size:1.7rem; font-weight:800; color:var(--orange); line-height:1; }
.logo__suffix{ font-size:.85rem; font-weight:600; color:var(--orange); }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a:not(.btn){
  text-decoration:none; font-weight:600; font-size:.98rem; color:var(--ink);
  position:relative; padding-block:6px;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn).active::after{ transform:scaleX(1); }
.nav .btn{ padding:12px 24px; font-size:.95rem; }

.nav-toggle{
  display:none; background:none; border:0; width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:24px; height:2.5px; background:var(--brown-deep); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:12px 24px 24px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a:not(.btn){ padding:14px 4px; border-bottom:1px solid var(--line); }
  .nav .btn{ margin-top:16px; justify-content:center; }
}

/* ============================================================
   Hero — floating puzzle tiles (homepage)
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(90px, 12vw, 150px) clamp(100px, 13vw, 170px);
}
.hero__inner{ position:relative; z-index:2; max-width:820px; margin-inline:auto; text-align:center; }
.hero .lead{ margin:26px auto 0; max-width:640px; }
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:40px; }

.hero__inner > *{ opacity:0; transform:translateY(22px); animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__inner > *:nth-child(1){ animation-delay:.05s; }
.hero__inner > *:nth-child(2){ animation-delay:.18s; }
.hero__inner > *:nth-child(3){ animation-delay:.32s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.tile{
  position:absolute; z-index:1;
  width:76px; height:76px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-tile);
  transition:transform .25s ease;
  opacity:0;
  animation-name:tileIn, tileFloat;
  animation-duration:.9s, var(--dur,7s);
  animation-delay:var(--in,0s), calc(var(--in,0s) + .9s);
  animation-timing-function:cubic-bezier(.2,.7,.2,1), ease-in-out;
  animation-iteration-count:1, infinite;
  animation-direction:normal, alternate;
  animation-fill-mode:forwards, none;
}
.tile svg{ width:36px; height:36px; }
.tile:hover{ transform:scale(1.12) rotate(var(--rot,0deg)); }
.tile--sm{ width:60px; height:60px; }
.tile--sm svg{ width:28px; height:28px; }
.tile--white { background:var(--white); }
.tile--cream { background:var(--cream-deep); }
.tile--orange{ background:var(--orange); }
.tile--brown { background:var(--brown); }

@keyframes tileIn{
  from{ opacity:0; transform:translateY(30px) scale(.7) rotate(var(--rot,0deg)); }
  to  { opacity:1; transform:translateY(0) scale(1) rotate(var(--rot,0deg)); }
}
@keyframes tileFloat{
  from{ transform:translateY(-7px) rotate(var(--rot,0deg)); }
  to  { transform:translateY(9px)  rotate(calc(var(--rot,0deg) * -1)); }
}
@media (prefers-reduced-motion: reduce){
  .hero__inner > *, .tile{ animation:none; opacity:1; transform:none; }
}

.t1 { top:12%;  left:5%;   --dur:6.5s; --rot:-6deg; --in:.5s; }
.t2 { top:8%;   left:22%;  --dur:8s;   --rot:4deg;  --in:.62s; }
.t3 { top:38%;  left:3%;   --dur:7.2s; --rot:3deg;  --in:.74s; }
.t4 { top:68%;  left:9%;   --dur:6.8s; --rot:-4deg; --in:.6s; }
.t5 { bottom:6%;left:24%;  --dur:7.6s; --rot:6deg;  --in:.82s; }
.t6 { top:10%;  right:6%;  --dur:7s;   --rot:5deg;  --in:.55s; }
.t7 { top:6%;   right:24%; --dur:8.4s; --rot:-3deg; --in:.7s; }
.t8 { top:40%;  right:3%;  --dur:6.6s; --rot:-5deg; --in:.66s; }
.t9 { top:70%;  right:8%;  --dur:7.8s; --rot:4deg;  --in:.78s; }
.t10{ bottom:5%;right:26%; --dur:7.3s; --rot:-6deg; --in:.86s; }
.t11{ bottom:2%;left:44%;  --dur:8.2s; --rot:3deg;  --in:.9s; }
.t12{ top:2%;   left:47%;  --dur:6.9s; --rot:-4deg; --in:.68s; }

@media (max-width: 1080px){
  .t3,.t8,.t11,.t12{ display:none; }
  .tile{ width:62px; height:62px; }
  .tile svg{ width:29px; height:29px; }
}
@media (max-width: 640px){
  .t2,.t5,.t7,.t10{ display:none; }
  .tile{ width:52px; height:52px; border-radius:16px; }
  .tile svg{ width:25px; height:25px; }
  .t1{ top:5%; left:6%; } .t4{ top:auto; bottom:4%; left:10%; }
  .t6{ top:5%; right:6%; } .t9{ top:auto; bottom:4%; right:10%; }
}

/* ============================================================
   Sekce (obecné)
   ============================================================ */
.section{ padding-block:var(--sp-section); }
.section--white{ background:var(--white); }
.section--tint{ background:var(--cream-deep); }

/* ============================================================
   Poznáváte se?
   ============================================================ */
.pains{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.pains__intro{ position:sticky; top:120px; }
.pains__intro h2{ margin-bottom:22px; }
.pains__intro p{ color:var(--ink-soft); margin-bottom:16px; }
.pains__intro p strong{ color:var(--ink); }

.pains__list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.pain{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:20px 24px;
  font-weight:500;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pain:nth-child(even){ margin-left:clamp(0px, 3vw, 36px); }
.pain:hover{ transform:translateX(6px); box-shadow:var(--shadow-card); border-color:var(--cream-deep); }
.pain svg{ flex:0 0 22px; width:22px; height:22px; margin-top:3px; }

@media (max-width: 900px){
  .pains{ grid-template-columns:1fr; }
  .pains__intro{ position:static; }
  .pain:nth-child(even){ margin-left:0; }
}

/* ============================================================
   Bio — Dáša (homepage)
   ============================================================ */
.bio{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.bio__photo{ position:relative; }
.bio__photo img{
  border-radius:var(--radius-l); width:100%; aspect-ratio:4/5.2; object-fit:cover;
  box-shadow:var(--shadow-card);
}
.bio__photo::before{
  content:""; position:absolute; inset:-16px auto auto -16px; width:110px; height:110px;
  background:var(--orange-soft); border-radius:26px; z-index:-1; transform:rotate(-8deg);
}
.bio__text h2{ margin-bottom:24px; font-size:clamp(1.7rem, 3vw, 2.4rem); }
.bio__text p{ color:var(--ink-soft); margin-bottom:18px; max-width:56ch; }
.bio__text .btn{ margin-top:10px; }

@media (max-width: 900px){
  .bio{ grid-template-columns:1fr; }
  .bio__photo{ max-width:420px; }
}

/* ============================================================
   Čísla
   ============================================================ */
.numbers h2{ font-size:clamp(1.4rem, 2.2vw, 1.7rem); margin-bottom:8px; color:var(--brown); }
.numbers__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:2px solid var(--line); margin-top:34px;
}
.number{
  padding:38px clamp(16px, 3vw, 40px) 10px;
  border-left:2px solid var(--line);
}
.number:first-child{ border-left:0; padding-left:0; }
.number__value{
  font-family:var(--ff-display); font-weight:800; color:var(--brown-deep);
  font-size:clamp(3rem, 6.4vw, 5rem); line-height:1; letter-spacing:-.02em;
}
.number__value .plus{ color:var(--orange); }
.number p{ margin-top:14px; color:var(--ink-soft); font-size:.98rem; max-width:34ch; }

@media (max-width: 760px){
  .numbers__grid{ grid-template-columns:1fr; }
  .number{ border-left:0; border-top:2px solid var(--line); padding:26px 0 18px; }
  .number:first-child{ border-top:0; }
}

/* ============================================================
   Jak vnímáme IP / Hodnoty
   ============================================================ */
.beliefs__head{ text-align:center; max-width:640px; margin-inline:auto; }
.beliefs__head h2{ margin-bottom:18px; }
.beliefs__head p{ color:var(--ink-soft); }
.beliefs__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px; margin-top:52px;
}
.belief{
  background:var(--white); border-radius:var(--radius-m); padding:28px 22px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .22s ease;
}
.belief:hover{ transform:translateY(-6px); }
.belief:nth-child(even){ transform:translateY(14px); }
.belief:nth-child(even):hover{ transform:translateY(8px); }
.belief__icon{
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-soft);
}
.belief__icon svg{ width:26px; height:26px; }
.belief h3{ font-size:1.02rem; line-height:1.3; }
.belief p{ font-size:.9rem; color:var(--ink-soft); }

@media (max-width: 760px){
  .belief:nth-child(even){ transform:none; }
  .belief:nth-child(even):hover{ transform:translateY(-6px); }
}

/* varianta pro 3 širší karty (Hodnoty, mini-služby) */
.beliefs__grid--three{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.beliefs__grid--three .belief:nth-child(even){ transform:none; }
.beliefs__grid--three .belief:nth-child(even):hover{ transform:translateY(-6px); }

/* ============================================================
   Kurzy — animated tabs (homepage)
   ============================================================ */
.courses__head{ text-align:center; max-width:620px; margin-inline:auto; }

.tabs__nav{
  position:relative;
  display:flex; gap:4px; margin:44px auto 0; width:max-content; max-width:100%;
  background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:6px;
}
.tabs__pill{
  position:absolute; top:6px; left:0; height:calc(100% - 12px);
  background:var(--brown-deep); border-radius:999px; z-index:0;
  transition:transform .38s cubic-bezier(.35,1.2,.35,1), width .38s cubic-bezier(.35,1.2,.35,1);
}
.tabs__btn{
  position:relative; z-index:1;
  background:none; border:0; border-radius:999px;
  padding:12px 24px; font-weight:600; font-size:.98rem; color:var(--brown);
  transition:color .25s ease;
  white-space:nowrap;
}
.tabs__btn[aria-selected="true"]{ color:#fff; }
@media (max-width: 640px){
  .tabs__nav{ width:100%; }
  .tabs__btn{ flex:1; padding:12px 8px; font-size:.85rem; white-space:normal; line-height:1.2; }
}

.tabs__panels{ margin-top:36px; }
.tabpanel{ display:none; }
.tabpanel.active{ display:block; animation:panelIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .tabpanel.active{ animation:none; } }

.course{
  background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  padding:clamp(28px, 4vw, 48px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px);
}
.course__about h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); margin-bottom:14px; display:flex; align-items:center; gap:14px; }
.course__about h3 svg{ flex:0 0 40px; width:40px; height:40px; padding:8px; background:var(--brown-deep); border-radius:12px; }
.course__about p{ color:var(--ink-soft); }
.course__list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.course__list li{
  display:flex; gap:12px; align-items:flex-start; font-weight:500;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.course__list li:last-child{ border-bottom:0; padding-bottom:0; }
.course__list svg{ flex:0 0 22px; width:22px; height:22px; margin-top:3px; }
@media (max-width: 760px){ .course{ grid-template-columns:1fr; } }

.courses__note{
  text-align:center; max-width:560px; margin:36px auto 0;
  font-size:.92rem; color:var(--ink-soft);
}
.courses__cta{ text-align:center; margin-top:28px; }

/* ============================================================
   Principy — feature accordion (homepage)
   ============================================================ */
.principles{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(40px, 6vw, 80px); align-items:center; }
.principles__head h2{ margin-bottom:34px; }

.acc{ border-bottom:1px solid var(--line); }
.acc:first-of-type{ border-top:1px solid var(--line); }
.acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; text-align:left;
  padding:20px 4px;
  font-family:var(--ff-display); font-weight:700; font-size:1.12rem; color:var(--brown-deep);
  transition:color .2s ease;
}
.acc__head:hover{ color:var(--orange-deep); }
.acc__chevron{ flex:0 0 24px; width:24px; height:24px; transition:transform .3s ease; color:var(--orange); }
.acc.active .acc__chevron{ transform:rotate(180deg); }
.acc__body{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1);
}
.acc__body > div{ overflow:hidden; }
.acc__body p{ color:var(--ink-soft); padding:0 4px 20px; max-width:58ch; }
.acc.active .acc__body{ grid-template-rows:1fr; }
.acc__bar{ display:block; height:3px; background:var(--line); border-radius:3px; overflow:hidden; opacity:0; transition:opacity .3s ease; }
.acc.active .acc__bar{ opacity:1; }
.acc__bar i{ display:block; height:100%; width:0; background:var(--orange); border-radius:3px; }
.acc.active .acc__bar i{ animation:accFill 6s linear forwards; }
.principles:hover .acc__bar i{ animation-play-state:paused; }
@keyframes accFill{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .acc.active .acc__bar{ opacity:0; }
  .acc.active .acc__bar i{ animation:none; }
}

.principles__photo{ position:relative; }
.principles__photo img{
  border-radius:var(--radius-l); width:100%; aspect-ratio:4/4.6; object-fit:cover;
  box-shadow:var(--shadow-card);
  transition:transform .6s ease;
}
.principles__photo::after{
  content:""; position:absolute; right:-14px; bottom:-14px; width:120px; height:120px;
  background:var(--orange); border-radius:26px; z-index:-1; transform:rotate(6deg);
}
@media (max-width: 900px){
  .principles{ grid-template-columns:1fr; }
  .principles__photo{ order:-1; max-width:440px; }
  .principles__photo img{ aspect-ratio:16/10; }
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ background:var(--brown); padding-block:clamp(64px, 8vw, 110px); }
.cta-card{
  background:var(--white); border-radius:var(--radius-l);
  padding:clamp(32px, 5vw, 64px);
  max-width:760px; margin-inline:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.cta-card h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
.cta-card p{ color:var(--ink-soft); margin:20px 0 30px; max-width:52ch; }

/* ============================================================
   Kontakt
   ============================================================ */
.contact{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.contact__info h2, .contact__info h1{ margin-bottom:20px; }
.contact__info h1{ font-size:clamp(2.2rem, 4.4vw, 3.4rem); }
.contact__info > p{ color:var(--ink-soft); margin-bottom:30px; max-width:44ch; }
.contact__items{ list-style:none; display:flex; flex-direction:column; gap:18px; }
.contact__items li{ display:flex; align-items:center; gap:14px; font-weight:500; }
.contact__items a{ text-decoration:none; }
.contact__items a:hover{ color:var(--orange-deep); }
.contact__items svg{ flex:0 0 42px; width:42px; height:42px; padding:10px; background:var(--orange-soft); border-radius:12px; }
.contact__note{ font-weight:400; color:var(--ink-soft); font-size:.92rem; }

.form{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:clamp(24px, 3.5vw, 40px);
  box-shadow:var(--shadow-card);
}
.form--onwhite{ background:var(--white); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form__field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.form__field label{ font-weight:700; font-size:.92rem; color:var(--brown-deep); }
.form__field input, .form__field textarea{
  font:inherit; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:13px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form--onwhite input, .form--onwhite textarea{ background:var(--cream); }
.form__field input:focus, .form__field textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(247,154,25,.15);
}
.form__field textarea{ min-height:130px; resize:vertical; }
.form .btn{ width:100%; margin-top:6px; }
.form__hint{ font-size:.82rem; color:var(--ink-soft); text-align:center; margin-top:12px; }
@media (max-width: 900px){ .contact{ grid-template-columns:1fr; } }
@media (max-width: 520px){ .form__row{ grid-template-columns:1fr; } }

/* ============================================================
   Podstránky — hero s fotkou
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px, 6vw, 90px);
}
.page-hero__inner{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(36px, 5vw, 80px); align-items:center;
}
.page-hero__photo{ position:relative; }
.page-hero__photo img{
  border-radius:var(--radius-l); width:100%; aspect-ratio:4/5; object-fit:cover;
  box-shadow:var(--shadow-card);
}
.page-hero__photo::before{
  content:""; position:absolute; inset:-16px auto auto -16px; width:110px; height:110px;
  background:var(--orange-soft); border-radius:26px; z-index:-1; transform:rotate(-8deg);
}
.page-hero__text h1{ font-size:clamp(2.1rem, 4.4vw, 3.3rem); }
.page-hero__text .lead{ margin:20px 0 30px; max-width:54ch; }
@media (max-width: 900px){
  .page-hero__inner{ grid-template-columns:1fr; }
  .page-hero__photo{ max-width:400px; }
}

/* ============================================================
   O mně — příběh + život v bodech
   ============================================================ */
.about{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.about__story h2{ margin-bottom:24px; }
.about__quote{
  font-family:var(--ff-display); font-weight:700; font-size:1.15rem; line-height:1.45;
  color:var(--brown-deep);
  border-left:4px solid var(--orange); border-radius:2px;
  padding:6px 0 6px 20px; margin-bottom:26px;
}
.about__story p{ color:var(--ink-soft); margin-bottom:18px; max-width:62ch; }
.about__story p strong{ color:var(--ink); }

.life{
  background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  padding:clamp(26px, 3.5vw, 40px);
  position:sticky; top:120px;
}
.life h3{ font-size:1.35rem; margin-bottom:8px; }
.life__rule{ width:56px; height:3px; background:var(--orange); border-radius:3px; margin-bottom:22px; }
.life ul{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.life li{ display:flex; align-items:center; gap:14px; font-weight:500; }
.life li svg{
  flex:0 0 34px; width:34px; height:34px; padding:8px;
  background:var(--orange); border-radius:50%;
}
@media (max-width: 900px){
  .about{ grid-template-columns:1fr; }
  .life{ position:static; }
}

/* ============================================================
   O mně — galerie „Hodiny učení za mnou…"
   ============================================================ */
.gallery h2{ text-align:center; margin-bottom:44px; }
.gallery__grid{ columns:3; gap:18px; }
.gallery__item{
  break-inside:avoid; margin-bottom:18px;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; }
.gallery__item--ph svg{ width:44px; height:44px; opacity:.55; }
.g-h1{ height:300px; } .g-h2{ height:420px; } .g-h3{ height:220px; }
@media (max-width: 860px){ .gallery__grid{ columns:2; } }
@media (max-width: 540px){ .gallery__grid{ columns:1; } .g-h1,.g-h2,.g-h3{ height:240px; } }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--cream); border-top:1px solid var(--line); padding-top:clamp(48px, 6vw, 80px); }
.footer__main{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.footer__logo{ display:flex; align-items:center; gap:14px; }
.footer__logo img{ width:64px; }
.footer__logo .logo__mark{ font-size:2.2rem; }
.footer__logo .logo__suffix{ font-size:1rem; }
.footer__nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
.footer__nav a{ text-decoration:none; font-weight:600; padding:6px 10px; }
.footer__nav a:hover{ color:var(--orange-deep); }
.footer__nav .dot{ width:6px; height:6px; border-radius:50%; background:var(--brown); }
.footer__bar{
  margin-top:clamp(40px, 5vw, 64px);
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.88rem; color:var(--ink-soft);
}
.footer__bar a{ text-decoration:none; }
.footer__bar a:hover{ color:var(--orange-deep); }

/* ---------- contact form: honeypot + stavová hláška ---------- */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__status{
  margin-top:14px; padding:12px 16px; border-radius:var(--radius-s);
  font-size:.92rem; font-weight:500; line-height:1.5;
}
.form__status--ok{ background:#EAF6EC; color:#1E7A3A; border:1px solid #BEE3C6; }
.form__status--err{ background:#FDECEC; color:#B23A3A; border:1px solid #F3C7C7; }