/* ------------------------------------------------------------------
   Kozmetika Timi — Modra
   Farby a typografia destilované z konceptu loga „Modranský kvet“.
   Písma sú self-hostované (GDPR: nič sa neťahá z Google CDN).
------------------------------------------------------------------- */

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* indigo — „modranská“ modrá z loga */
  --i-900:#14243D; --i-800:#1A2F4F; --i-700:#23406B; --i-600:#2E5286;
  --i-500:#3C5C8C; --i-300:#8FA5C4; --i-200:#C3CFE1; --i-100:#E1E8F2; --i-050:#EFF3F8;
  /* hlina — teplý akcent zo stredu kvetu */
  --c-800:#7E3B2A; --c-700:#9E4E3A; --c-600:#B35C46; --c-500:#C4705A;
  --c-300:#E3A896; --c-200:#EFCDC1; --c-100:#F8E7E0;
  /* neutrály — teplý papier */
  --paper:#FFFDFA; --cream:#FAF5EE; --cream-2:#F3EBE0; --line:#E5DACB;
  --ink:#241F1B; --ink-2:#4A423A; --ink-3:#6B6158;

  --sans:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;

  --wrap:74rem;
  --gutter:clamp(1.15rem,4.2vw,3.5rem);
  --nav-h:4.5rem;

  font-size:clamp(15.5px,0.42vw + 14.2px,19px);
}

*,*::before,*::after{box-sizing:border-box}

/* `display:flex` na komponente prebije vlastnosť `hidden`. Bez tohto riadku
   je mobilné menu otvorené hneď po načítaní stránky. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-0.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:inherit}
:focus-visible{outline:3px solid var(--c-500);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* --- eyebrow / small label ------------------------------------- */
.eyebrow{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--c-700);margin:0 0 1.1rem;
}
.eyebrow--light{color:var(--c-300)}

/* --- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.1rem;padding:.7rem 1.6rem;
  border:2px solid transparent;border-radius:999px;
  background-origin:border-box;
  font:inherit;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--i-700);color:#fff}
.btn--primary:hover{background:var(--i-800);transform:translateY(-2px)}
.btn--ghost{border-color:var(--i-200);color:var(--i-700);background:transparent}
.btn--ghost:hover{border-color:var(--i-700);background:var(--i-050);transform:translateY(-2px)}
.btn--onDark{background:var(--paper);color:var(--i-800)}
.btn--onDark:hover{background:var(--c-100);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* --- nav -------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,245,238,.92);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:1rem;min-height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;text-decoration:none;padding:.5rem 0;margin-right:auto}
.nav__logo img{width:auto;height:1.95rem}
.nav__links{display:none;gap:.3rem;align-items:center}
.nav__links a{
  display:inline-flex;align-items:center;min-height:2.9rem;padding:.35rem .85rem;
  text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-2);border-radius:999px;
  transition:color .16s ease,background-color .16s ease;
}
.nav__links a:hover{color:var(--i-700);background:var(--i-050)}
.nav__cta{display:none}
.burger{
  margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:3rem;height:3rem;padding:0 .6rem;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--i-700);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:55;
  background:var(--cream);color:var(--ink);   /* plná farba, nie 97 % */
  border-bottom:1px solid var(--line);
  padding:1.2rem var(--gutter) 2rem;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  box-shadow:0 18px 40px -18px rgba(20,36,61,.35);
}
.drawer a{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:3.3rem;text-decoration:none;
  font-family:var(--serif);font-size:1.3rem;color:var(--i-800);
  border-bottom:1px solid var(--line);
}
.drawer a:last-of-type{border-bottom:0}
/* .drawer a je (0,1,1) a prebilo by .btn--primary (0,1,0) — tlačidlo by malo
   tmavý text na tmavom podklade. Preto sa farba pýta o stupeň nahlas. */
.drawer a.btn{border-bottom:0;font-family:var(--sans);font-size:.95rem}
.drawer a.btn--primary{color:#fff}
.drawer .btn{margin-top:1rem;width:100%}
@media (min-width:62rem){
  .burger{display:none}
  .nav__links{display:flex}
  .nav__cta{display:inline-flex;margin-left:.9rem}
  .drawer{display:none !important}
}

/* --- hero ------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;
  padding-block:clamp(1.9rem,4.2vw,3.8rem);
  background:
    radial-gradient(120% 90% at 88% 8%,var(--i-050) 0%,rgba(239,243,248,0) 62%),
    linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);
}
.hero__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero__title{
  font-size:clamp(2.35rem,min(7vw,8.4vh),4.9rem);
  max-width:14ch;margin:0 0 1.1rem;color:var(--i-900);
}
.hero__lead{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:40ch;margin:0 0 1.7rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__art{order:-1;justify-self:center;width:min(11rem,46%)}
.hero__art svg{width:100%;height:auto}
@media (min-width:62rem){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero__art{order:0;justify-self:end;width:min(24rem,100%,46vh)}
}

/* fakty — vlastný tenký pás POD hero, aby nikdy netlačili obsah pod ohyb.
   Každá hodnota je jeden celok: zlomiť sa smie len medzi položkami. */
.strip{background:var(--paper);color:var(--ink);border-block:1px solid var(--line)}
.facts{display:flex;flex-wrap:wrap;gap:.9rem 2.6rem;padding-block:1.15rem}
.fact{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.fact > span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:700;flex:none}
.fact > b{font-weight:600;font-size:.98rem;color:var(--i-800)}

/* kvet, ktorý sa najprv nakreslí a potom vyfarbí — jediný „moment“ na stránke.
   Bez JS aj pri prefers-reduced-motion je rovno hotový. */
.js .bloom .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .bloom.is-drawn .draw{animation:draw 1.4s cubic-bezier(.62,.05,.3,1) forwards}
.js .bloom .petals-fill{opacity:0}
.js .bloom.is-drawn .petals-fill{animation:fadein .8s ease-out 1.15s forwards}
.js .bloom .pop{opacity:0;transform:scale(.4);transform-origin:50% 50%}
.js .bloom.is-drawn .pop{animation:pop .5s ease-out 1.35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .js .bloom .draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .js .bloom .petals-fill,.js .bloom .pop{opacity:1;transform:none;animation:none}
}

/* --- citát: tmavý pás s najväčším písmom na stránke ------------- */
.band{
  background:var(--i-800);color:var(--i-100);
  padding-block:clamp(3.6rem,9vw,7rem);
  position:relative;overflow:hidden;
}
.band__mark{
  position:absolute;top:50%;left:-6%;width:34rem;max-width:62%;
  transform:translateY(-50%);opacity:.075;pointer-events:none;
}
.band blockquote{margin:0;position:relative}
.band__q{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.55rem,3.5vw,2.75rem);line-height:1.24;
  color:var(--paper);margin:0 0 1.4rem;max-width:26ch;
}
.band__src{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--i-300)}

/* --- sekcie ----------------------------------------------------- */
.sec{padding-block:clamp(3.4rem,8vw,6rem)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec__head h2{font-size:clamp(1.9rem,4.2vw,3rem);color:var(--i-900);margin-bottom:.7rem}
.sec__head p{color:var(--ink-2);max-width:42ch}

/* služby — editoriálny zoznam, nie mriežka kariet */
.srv{border-top:1px solid var(--line)}
.srv__row{
  display:grid;gap:.5rem 2.5rem;align-items:start;
  padding-block:clamp(1.4rem,3vw,2.1rem);
  border-bottom:1px solid var(--line);
  position:relative;
}
.srv__row::before{
  content:"";position:absolute;inset:0 calc(var(--gutter) * -0.5);
  background:var(--i-050);opacity:0;border-radius:.6rem;
  transition:opacity .22s ease;pointer-events:none;z-index:0;
}
.srv__row:hover::before{opacity:1}
.srv__row > *{position:relative;z-index:1}
.srv__name{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.95rem);color:var(--i-800);margin:0}
.srv__n{font-size:.74rem;letter-spacing:.2em;color:var(--c-700);font-weight:700;display:block;margin-bottom:.4rem}
.srv__list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.45rem .55rem}
.srv__list li{
  font-size:.94rem;color:var(--ink-2);
  background:var(--cream-2);border:1px solid var(--line);color:var(--ink-2);
  padding:.32rem .8rem;border-radius:999px;
}
.srv__note{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-3);max-width:46ch}
@media (min-width:52rem){.srv__row{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}

/* --- placeholder („doplniť“) ------------------------------------ */
.todo{
  border:2px dashed var(--c-300);border-radius:1rem;
  background:var(--c-100);color:var(--c-800);
  padding:clamp(1.1rem,3vw,1.8rem);
}
.todo__tag{
  display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--paper);background:var(--c-700);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:.8rem;
}
.todo h3{font-family:var(--serif);font-size:1.3rem;color:var(--c-800);margin:0 0 .5rem}
.todo p{color:var(--c-800);font-size:.95rem}
.todo p:last-child{margin-bottom:0}

/* --- o salóne --------------------------------------------------- */
.about{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (min-width:56rem){.about{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.about__body p{font-size:1.05rem;color:var(--ink-2)}
.about__body strong{color:var(--ink);font-weight:600}
.dl{margin:0;border-top:1px solid var(--line)}
.dl__row{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--line)}
.dl__row dt{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0}
.dl__row dd{margin:0;font-weight:600;color:var(--i-800);text-align:right}
/* Odkazy v tabuľke musia byť naozaj trafiteľné palcom (min. 44 px). */
.dl__row dd a,.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid currentColor}
.dl__row dd a:hover,.foot a:hover{color:var(--c-700)}

/* --- značky ----------------------------------------------------- */
.brands{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:1rem;overflow:hidden}
@media (min-width:46rem){.brands{grid-template-columns:repeat(3,1fr)}}
.brand{background:var(--paper);color:var(--ink);padding:clamp(1.3rem,3vw,2rem)}
.brand h3{font-family:var(--serif);font-size:1.3rem;color:var(--i-800);margin:0 0 .35rem}
.brand p{font-size:.9rem;color:var(--ink-3);margin:0}

/* --- kontakt ---------------------------------------------------- */
.kontakt{background:var(--i-900);color:var(--i-100)}
.kontakt .sec__head h2{color:var(--paper)}
.kontakt .sec__head p{color:var(--i-200)}
.kgrid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media (min-width:56rem){.kgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kphone{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,7.5vw,3.4rem);color:var(--paper);
  text-decoration:none;line-height:1.05;
  min-height:48px;padding-block:.15rem;
}
.kphone:hover{color:var(--c-300)}
.kmeta{margin:1.6rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.kmeta .dl__row{border-bottom:1px solid rgba(255,255,255,.16)}
.kmeta dt{color:var(--i-300)}
.kmeta dd{color:var(--paper)}
.kmeta a{color:var(--paper)}
.kmeta a:hover{color:var(--c-300)}
.kcard{background:rgba(255,255,255,.07);color:var(--i-100);border:1px solid rgba(255,255,255,.16);border-radius:1rem;padding:clamp(1.3rem,3.2vw,2rem)}
.kcard h3{font-family:var(--serif);font-size:1.4rem;color:var(--paper);margin:0 0 .6rem}
.kcard p{color:var(--i-200);font-size:.97rem}
.kcard .btn{margin-top:1rem}

/* --- pätička ---------------------------------------------------- */
.foot{background:var(--i-900);color:var(--i-300);padding-block:2.5rem;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem}
.foot__in{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:flex-start;justify-content:space-between}
.foot img{height:2.1rem;width:auto}
.foot p{margin:0 0 .35rem;max-width:44ch}
.foot a{color:var(--i-200)}
.foot a:hover{color:var(--paper)}

/* --- reveal (funguje aj bez JS) --------------------------------- */
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
}