/* ===========================================================
   Przedszkole Bambi — Biały Dunajec
   Design: "Bosco dei Tatra" storybook · light/playful
   Fredoka (display) + Nunito (body) · self-hosted · offline-first
   =========================================================== */

/* ---------- Fonts ---------- */
/* Display font: Baloo 2 (tondo/giocoso, supporto POLACCO completo — Fredoka non aveva ąćęńśźż) */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/Baloo2-latin.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/Nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/Nunito-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+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:'Nunito';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/Nunito-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---------- Tokens ---------- */
:root{
  --cream:#FFFBF3; --cream2:#FFF3DF; --paper:#FFFFFF;
  --green:#3FAE6B; --green-d:#1C7A4C; --green-l:#DDF3E5;
  --sun:#FFC43D; --sun-d:#F4A412;
  --coral:#FF7C6B; --coral-d:#E85C4C;
  --sky:#54B6E8; --sky-l:#E2F4FC;
  --bark:#9A6633; --bark-d:#6E4621;
  --ink:#2A3A31; --muted:#5C6E64; --line:#ECE2CF;
  --shadow:0 18px 40px -22px rgba(40,60,45,.45);
  --shadow-sm:0 8px 22px -14px rgba(40,60,45,.4);
  --r-lg:30px; --r-md:20px; --r-sm:14px;
  --maxw:1180px; --head-h:84px;
  --ff-d:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --ff-b:'Nunito','Segoe UI',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 14px);
  overflow-x:clip;
}
body{
  margin:0; overflow-x:clip;
  font-family:var(--ff-b); color:var(--ink); background:var(--cream);
  font-size:clamp(16px,1.05vw,18px); line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--ff-d); font-weight:600; line-height:1.08; margin:0 0 .4em; color:var(--ink); letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,6vw,4.1rem); font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,3rem); font-weight:700}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
p{margin:0 0 1em}
a{color:var(--green-d); text-decoration:none}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4,p,span,a,li{overflow-wrap:break-word; word-break:normal}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px}
::selection{background:var(--sun); color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 40px,var(--maxw)); margin-inline:auto}
section{position:relative}
.sec{padding:clamp(60px,8vw,110px) 0}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-d); font-weight:600;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-d);
  background:var(--green-l); padding:.45em 1em; border-radius:999px; margin-bottom:1rem}
.eyebrow.sun{color:var(--sun-d); background:#FFF1CC}
.eyebrow.coral{color:var(--coral-d); background:#FFE6E1}
.eyebrow.sky{color:#1E84BC; background:var(--sky-l)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--muted); max-width:60ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-d); font-weight:600; font-size:1.02rem; line-height:1;
  padding:.92em 1.5em; border-radius:999px; border:0; cursor:pointer;
  background:var(--bg); color:var(--fg); box-shadow:0 8px 0 -2px rgba(0,0,0,.14), var(--shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease, background .2s; white-space:nowrap;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 12px 0 -2px rgba(0,0,0,.14), var(--shadow)}
.btn:active{transform:translateY(1px); box-shadow:0 4px 0 -2px rgba(0,0,0,.14)}
.btn.sun{--bg:var(--sun); --fg:var(--bark-d)}
.btn.coral{--bg:var(--coral); --fg:#fff}
.btn.ghost{--bg:#fff; --fg:var(--green-d); box-shadow:0 8px 0 -2px rgba(0,0,0,.06), var(--shadow-sm); border:2px solid var(--green-l)}
.btn svg{width:1.15em; height:1.15em}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- Header ---------- */
.head{position:fixed; inset:0 0 auto 0; height:var(--head-h); z-index:60;
  display:flex; align-items:center; transition:background .3s, box-shadow .3s, height .3s}
.head.scrolled{background:rgba(255,251,243,.92); backdrop-filter:blur(10px); box-shadow:0 4px 20px -12px rgba(40,60,45,.5); height:72px}
.head .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; width:min(100% - 32px,var(--maxw))}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--ff-d); font-weight:700;
  font-size:1.55rem; color:var(--green-d); letter-spacing:-.02em}
.brand svg{width:48px; height:48px; flex:none}
.brand b{color:var(--coral); font-weight:700}
.brand small{display:block; font-family:var(--ff-b); font-weight:700; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-top:1px}
.nav{display:flex; align-items:center; gap:4px}
.nav a{font-family:var(--ff-d); font-weight:500; font-size:1rem; color:var(--ink);
  padding:.5em .85em; border-radius:999px; transition:background .15s, color .15s}
.nav a:hover,.nav a.active{background:var(--green-l); color:var(--green-d)}
.head-cta{display:flex; align-items:center; gap:10px}
.lang-btn{display:inline-flex; align-items:center; gap:.4em; font-family:var(--ff-d); font-weight:600;
  font-size:.95rem; color:var(--ink); background:#fff; border:2px solid var(--line);
  padding:.45em .8em; border-radius:999px; cursor:pointer; transition:transform .14s, border-color .15s}
.lang-btn:hover{transform:translateY(-2px); border-color:var(--green)}
.lang-btn svg{width:1.1em; height:1.1em}
.burger{display:none; width:46px; height:46px; border:2px solid var(--line); background:#fff; border-radius:14px;
  cursor:pointer; padding:0; place-items:center}
.burger span,.burger span::before,.burger span::after{content:''; display:block; width:20px; height:2.6px;
  background:var(--ink); border-radius:3px; transition:transform .25s, opacity .2s}
.burger span{position:relative}
.burger span::before{position:absolute; top:-7px} .burger span::after{position:absolute; top:7px}
.burger.open span{background:transparent}
.burger.open span::before{transform:translateY(7px) rotate(45deg)}
.burger.open span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed; inset:0; z-index:70; display:grid; grid-template-rows:auto 1fr;
  background:var(--cream); transform:translateX(100%); transition:transform .4s cubic-bezier(.7,0,.2,1);
  visibility:hidden}
.drawer.open{transform:none; visibility:visible}
.drawer-top{height:var(--head-h); display:flex; align-items:center; justify-content:space-between;
  width:min(100% - 32px,var(--maxw)); margin-inline:auto}
.drawer nav{display:flex; flex-direction:column; gap:6px; padding:18px 0;
  width:min(100% - 32px,var(--maxw)); margin-inline:auto; overflow-y:auto}
.drawer nav a{font-family:var(--ff-d); font-weight:600; font-size:1.5rem; color:var(--ink);
  padding:.55em .2em; border-bottom:2px dashed var(--line); display:flex; align-items:center; gap:.6em}
.drawer nav a span{font-size:1.4rem}
.drawer .btn{margin-top:14px}
.x-btn{width:46px; height:46px; border:2px solid var(--line); background:#fff; border-radius:14px;
  font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink); display:grid; place-items:center}

/* ---------- Language modal (Uniswap-dialog style) ---------- */
.lang-modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px}
.lang-modal::before{content:''; position:absolute; inset:0; background:rgba(30,45,35,.4);
  backdrop-filter:blur(8px); opacity:0; transition:opacity .28s}
.lang-modal.show::before{opacity:1}
.lang-card{position:relative; width:min(440px,100%); background:var(--paper); border-radius:26px;
  box-shadow:var(--shadow); padding:22px; transform:scale(.9) translateY(12px); opacity:0;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), opacity .26s; max-height:86vh; display:flex; flex-direction:column}
.lang-modal.show .lang-card{transform:none; opacity:1}
.lang-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.lang-head h3{margin:0; font-size:1.3rem}
.lang-search{width:100%; font-family:var(--ff-b); font-size:1rem; padding:.7em 1em; border-radius:14px;
  border:2px solid var(--line); background:var(--cream); margin-bottom:12px}
.lang-search:focus{outline:none; border-color:var(--green)}
.lang-list{list-style:none; margin:0; padding:0; overflow-y:auto; display:grid; gap:4px}
.lang-list li button{width:100%; display:flex; align-items:center; gap:.7em; font-family:var(--ff-b);
  font-weight:700; font-size:1.02rem; color:var(--ink); background:none; border:0; cursor:pointer;
  padding:.65em .8em; border-radius:14px; text-align:left; transition:background .14s}
.lang-list li button:hover{background:var(--green-l)}
.lang-list li button .flag{font-size:1.4rem; line-height:1}
.lang-list li button .chk{margin-left:auto; color:var(--green); font-weight:800; opacity:0}
.lang-list li button.active{background:var(--green-l); color:var(--green-d)}
.lang-list li button.active .chk{opacity:1}

/* ---------- Preloader / Intro ---------- */
.intro{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 30%,#EAF7EE 0%,#FFF4DC 55%,#FFE9C7 100%)}
.intro.done{animation:introOut .8s cubic-bezier(.7,0,.2,1) forwards}
@keyframes introOut{to{clip-path:inset(0 0 100% 0); opacity:1}}
.intro-stage{display:grid; place-items:center; gap:18px; text-align:center}
.intro-fawn{width:min(180px,40vw); height:auto; filter:drop-shadow(0 14px 22px rgba(120,80,40,.25))}
.intro-word{font-family:var(--ff-d); font-weight:700; font-size:clamp(2.2rem,9vw,3.6rem); color:var(--green-d);
  opacity:0; transform:translateY(14px); animation:introWord .7s .35s ease forwards}
.intro-word b{color:var(--coral)}
.intro-sub{font-family:var(--ff-d); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  font-size:.78rem; color:var(--bark); opacity:0; animation:introWord .7s .6s ease forwards}
@keyframes introWord{to{opacity:1; transform:none}}
.intro-bar{width:160px; height:8px; border-radius:999px; background:#fff8; overflow:hidden; margin-top:4px}
.intro-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sun),var(--coral));
  border-radius:999px; animation:introFill 1.7s ease forwards}
@keyframes introFill{to{width:100%}}
/* fawn draw */
.intro-fawn .draw{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.intro-fawn .fill{opacity:0; animation:fadeFill .7s 1s ease forwards}
@keyframes fadeFill{to{opacity:1}}

/* ---------- Hero ---------- */
.hero{position:relative; padding-top:calc(var(--head-h) + 30px); overflow:hidden;
  background:linear-gradient(180deg,#EAF7F0 0%,#FBF6E6 70%,var(--cream) 100%)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px;
  min-height:min(82vh,720px); padding-bottom:40px}
.hero-copy{position:relative; z-index:3}
.hero h1 .hl{color:var(--green); position:relative; white-space:nowrap}
.hero h1 .hl::after{content:''; position:absolute; left:0; right:0; bottom:.04em; height:.26em;
  background:var(--sun); border-radius:999px; z-index:-1; transform:scaleX(0); transform-origin:left;
  animation:underline .8s 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes underline{to{transform:scaleX(1)}}
.hero .lead{margin:1.1rem 0 1.7rem}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem}
.chip{display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-d); font-weight:500;
  font-size:.92rem; background:#fff; border:2px solid var(--line); padding:.45em .85em; border-radius:999px;
  box-shadow:var(--shadow-sm)}
.chip svg{width:1.1em; height:1.1em}
.hero-art{position:relative; z-index:2; min-height:380px}
.hero-scene{width:100%; height:auto}
svg.fawn{width:100%; height:auto}
/* floating bits */
.floaty{position:absolute; pointer-events:none}
.cloud-a{top:8%; left:-4%; width:120px; animation:drift 26s linear infinite}
.cloud-b{top:22%; right:2%; width:90px; animation:drift 34s linear infinite reverse}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}
.leaf-f{width:34px; opacity:.9}
.lf1{top:18%; left:20%; animation:floatY 6s ease-in-out infinite}
.lf2{top:62%; right:14%; animation:floatY 7.5s ease-in-out infinite .8s}
.lf3{bottom:14%; left:8%; animation:floatY 8s ease-in-out infinite .4s}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(12deg)}}
.sun-spin{position:absolute; top:6%; right:8%; width:78px; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hill divider */
.hill{display:block; width:100%; height:auto; margin-bottom:-6px}
.hill.flip{transform:rotate(180deg)}

/* ---------- Bands ---------- */
.band-green{background:var(--green-d); color:#fff}
.band-green h2,.band-green h3{color:#fff}
.band-cream{background:var(--cream2)}
.band-mint{background:var(--green-l)}
.band-sky{background:var(--sky-l)}

/* ---------- Stat counters ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:24px 18px; text-align:center;
  box-shadow:var(--shadow-sm)}
.band-green .stat{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff}
.stat .n{font-family:var(--ff-d); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); color:var(--green-d); line-height:1}
.band-green .stat .n{color:var(--sun)}
.stat .l{font-family:var(--ff-d); font-weight:500; font-size:.95rem; color:var(--muted); margin-top:.3em}
.band-green .stat .l{color:rgba(255,255,255,.85)}

/* ---------- Cards ---------- */
.grid{display:grid; gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:2px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; position:relative}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card .ico{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px}
.card .ico svg{width:30px; height:30px}
.ico.g{background:var(--green-l)} .ico.s{background:#FFF1CC} .ico.c{background:#FFE6E1} .ico.b{background:var(--sky-l)}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted); margin:0}
.card .tag{position:absolute; top:18px; right:18px; font-family:var(--ff-d); font-weight:600; font-size:.78rem;
  background:var(--sun); color:var(--bark-d); padding:.25em .7em; border-radius:999px}

/* feature split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center}
.split .art{background:var(--green-l); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-sm)}
.checklist{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:12px}
.checklist li{display:flex; gap:.7em; align-items:flex-start; font-weight:600}
.checklist li svg{width:24px; height:24px; flex:none; margin-top:2px}

/* ---------- Daily rhythm timeline ---------- */
.rhythm{display:grid; gap:14px; max-width:760px; margin-inline:auto}
.rhythm .row{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:center;
  background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:14px 20px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease}
.rhythm .row:hover{transform:translateX(6px); box-shadow:var(--shadow)}
.rhythm .ri{width:42px; height:42px; border-radius:13px; display:grid; place-items:center}
.rhythm .ri svg{width:23px; height:23px}
.ri.g{background:var(--green-l)} .ri.s{background:#FFF1CC} .ri.c{background:#FFE6E1} .ri.b{background:var(--sky-l)}
.rhythm .rtext{display:grid; grid-template-columns:108px 1fr; gap:14px; align-items:center}
.rhythm .row .t{font-family:var(--ff-d); font-weight:700; color:var(--green-d); font-size:1.05rem}
.rhythm .row .d{color:var(--muted); margin:0}

/* ---------- Marquee ribbon ---------- */
.ribbon{background:var(--sun); color:var(--bark-d); padding:16px 0; overflow:hidden; white-space:nowrap}
.ribbon.green{background:var(--green-d); color:#fff}
.ribbon-track{display:inline-flex; gap:0; will-change:transform; animation:marq 26s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-track span{font-family:var(--ff-d); font-weight:600; font-size:1.2rem; padding:0 1.2rem;
  display:inline-flex; align-items:center; gap:1.2rem}
.ribbon-track span::after{content:'✶'; opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Opinie ---------- */
.opinie .note{background:#fff; border:2px solid var(--line); border-left:8px solid var(--green);
  border-radius:var(--r-md); padding:26px 28px; box-shadow:var(--shadow-sm); max-width:760px; margin-inline:auto}
.opinie .note .stars{color:var(--sun-d); font-size:1.2rem; letter-spacing:2px}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:12px}
.faq details{background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:6px 22px; box-shadow:var(--shadow-sm)}
.faq details[open]{border-color:var(--green)}
.faq summary{cursor:pointer; list-style:none; font-family:var(--ff-d); font-weight:600; font-size:1.1rem;
  padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:1em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:30px; height:30px; border-radius:50%; background:var(--green-l); color:var(--green-d);
  display:grid; place-items:center; font-size:1.3rem; transition:transform .25s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--green); color:#fff}
.faq details p{color:var(--muted); margin:0 0 16px; padding-top:2px}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.info-list{display:grid; gap:14px; margin:0; padding:0; list-style:none}
.info-list li{display:flex; gap:14px; align-items:flex-start; background:#fff; border:2px solid var(--line);
  border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--shadow-sm)}
.info-list .ico{width:46px; height:46px; border-radius:14px; background:var(--green-l); display:grid; place-items:center; flex:none}
.info-list .ico svg{width:22px; height:22px}
.info-list b{display:block; font-family:var(--ff-d); font-size:1.05rem}
.info-list a,.info-list span{color:var(--muted); font-weight:600}
.map-frame{border:3px solid #fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:#cfe3d6}
.map-frame iframe{display:block; width:100%; height:340px; border:0}
form.bform{background:#fff; border:2px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm)}
.bform label{font-family:var(--ff-d); font-weight:600; font-size:.95rem; display:block; margin:0 0 .35em}
.bform .field{margin-bottom:16px}
.bform input,.bform textarea{width:100%; font-family:var(--ff-b); font-size:1rem; padding:.75em .9em;
  border:2px solid var(--line); border-radius:14px; background:var(--cream)}
.bform input:focus,.bform textarea:focus{outline:none; border-color:var(--green)}
.bform textarea{min-height:120px; resize:vertical}
.form-note{font-size:.85rem; color:var(--muted); margin-top:8px}
.hp{position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(140deg,var(--green) 0%,var(--green-d) 100%); color:#fff; text-align:center}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.9)}
.cta-band .floaty{opacity:.5}

/* ---------- Footer ---------- */
.foot{background:var(--bark-d); color:#F4E8D6; padding:64px 0 28px}
.foot a{color:#F4E8D6}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px}
.foot .brand{color:#fff} .foot .brand small{color:#D6C3A8}
.foot h4{font-family:var(--ff-d); color:#fff; font-size:1.05rem; margin-bottom:.8em}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot ul a{opacity:.85; font-weight:600} .foot ul a:hover{opacity:1; color:var(--sun)}
.foot .small{opacity:.7; font-size:.9rem; line-height:1.6}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  font-size:.85rem; opacity:.8}

/* ---------- WhatsApp FAB ---------- */
.fab{position:fixed; right:18px; bottom:18px; z-index:55; width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:var(--shadow);
  transition:transform .2s, opacity .3s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:32px; height:32px}
.fab.hide{opacity:0; transform:translateY(20px) scale(.8); pointer-events:none}

/* ---------- Page hero (inner) ---------- */
.phero{position:relative; padding:calc(var(--head-h) + 40px) 0 60px; overflow:hidden;
  background:linear-gradient(180deg,#EAF7F0,var(--cream))}
.phero .crumb{font-family:var(--ff-d); font-weight:500; font-size:.9rem; color:var(--muted); margin-bottom:.8rem}
.phero .crumb a{color:var(--green-d)}
.phero h1{max-width:18ch}
.phero .lead{margin-top:.6rem}

/* ---------- Reveal (fail-safe: hidden only when JS confirms via .janim) ---------- */
.janim .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.janim .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Decorative dots ---------- */
.dots{position:absolute; width:120px; height:120px; opacity:.5; pointer-events:none;
  background-image:radial-gradient(var(--green) 2.4px,transparent 2.4px); background-size:18px 18px}

/* ---------- Skip link (a11y) ---------- */
.skip{position:fixed; top:-70px; left:12px; z-index:200; background:var(--green-d); color:#fff;
  font-family:var(--ff-d); font-weight:600; padding:.65em 1.1em; border-radius:12px; box-shadow:var(--shadow);
  transition:top .2s}
.skip:focus{top:12px}

/* ---------- Hero enrollment badge ---------- */
.hero-badge{display:inline-flex; align-items:center; gap:.55em; margin:0 0 1.4rem;
  font-family:var(--ff-d); font-weight:600; font-size:.92rem; color:var(--green-d);
  background:#fff; border:2px solid var(--green-l); padding:.45em .95em; border-radius:999px;
  box-shadow:var(--shadow-sm); transition:transform .14s}
.hero-badge:hover{transform:translateY(-2px)}
.hero-badge .dot{width:9px; height:9px; border-radius:50%; background:var(--coral); flex:none;
  animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,124,107,.55)}70%{box-shadow:0 0 0 11px rgba(255,124,107,0)}100%{box-shadow:0 0 0 0 rgba(255,124,107,0)}}

/* ---------- Fawn idle (breathe + blink) ---------- */
.fawn-wrap{animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
.fawn .eye{transform-box:fill-box; transform-origin:center; animation:blink 5s infinite}
@keyframes blink{0%{transform:scaleY(1)}92%{transform:scaleY(1)}96%{transform:scaleY(.12)}100%{transform:scaleY(1)}}

/* ---------- Butterfly ---------- */
.bfly{top:36%; left:6%; width:36px; z-index:3; animation:fly 17s ease-in-out infinite}
.bfly .wing{transform-box:fill-box; transform-origin:88% 50%; animation:flap .26s ease-in-out infinite alternate}
.bfly .wing:nth-of-type(2){transform-origin:12% 50%}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.5)}}
@keyframes fly{
  0%{transform:translate(0,0) rotate(-6deg)}
  25%{transform:translate(130px,-46px) rotate(8deg)}
  50%{transform:translate(232px,18px) rotate(-4deg)}
  75%{transform:translate(96px,64px) rotate(10deg)}
  100%{transform:translate(0,0) rotate(-6deg)}}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1080px){
  :root{--head-h:74px}
  .nav{display:none}
  .burger{display:grid}
  .head-cta .lang-btn span.lng{display:none}
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; text-align:center; min-height:0; padding-top:10px}
  .hero-copy{order:2} .hero-art{order:1; min-height:0; width:100%; max-width:420px; margin-inline:auto}
  .hero-art > div{max-width:300px}
  .hero-art .mts{margin-top:6px}
  .hero .lead{margin-inline:auto}
  .hero-chips{justify-content:center}
  .split{grid-template-columns:1fr; gap:26px}
  .split .art{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .head .head-cta .btn{display:none}
}
@media (max-width:560px){
  .wrap{width:min(100% - 30px,var(--maxw))}
  .g-2,.g-3{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 auto; justify-content:center}
  .rhythm .rtext{grid-template-columns:1fr; gap:0}
  .foot-grid{grid-template-columns:1fr}
  .brand small{display:none}
}
@media (max-width:380px){
  .g-4{grid-template-columns:1fr} .stats{grid-template-columns:1fr}
  .brand{font-size:1.3rem} .brand svg{width:40px;height:40px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1!important; transform:none!important}
  .intro{display:none!important}
  /* marquee stays moving — Michele's rule */
  .ribbon-track{animation:marq 30s linear infinite!important}
  .cloud-a,.cloud-b{animation:drift 30s linear infinite!important}
}