/* ═══════════════════════════════════════
   Гармония — v1 Enhanced
   ═══════════════════════════════════════ */
@font-face { font-family:'Designosaur'; src:url('../fonts/Designosaur-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#30699C;--teal:#32A091;--pink:#F0788C;--yellow:#FFDD9E;--sky:#A3C4E9;--white:#FFF;--bg:#F8FBFF;--text:#20415F;--tbody:#4A6178;--fh:'Designosaur','Comfortaa',sans-serif;--f:'Istok Web',sans-serif;--pill:100px}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ══════ HEADER ══════ */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);transition:box-shadow .3s}
.header.scrolled{box-shadow:0 4px 30px rgba(32,65,95,.07)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:36px}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-title{font-family:var(--fh);font-size:19px;color:var(--teal);display:block}
.logo-sub{font-size:10px;color:var(--teal);margin-top:2px;display:block}
.nav{display:flex;gap:2px}
.nav-item{position:relative}
.nav-link{padding:7px 14px;font-size:15px;color:var(--text);text-decoration:none;border-radius:10px;transition:.2s;display:flex;align-items:center;gap:4px}
.nav-link:hover{background:rgba(50,160,145,.08);color:var(--teal)}
.nav-link .arr{font-size:7px;opacity:.5}
.nav-item:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd{position:absolute;top:calc(100% + 6px);left:-8px;min-width:230px;padding:8px 0;background:var(--white);border-radius:16px;box-shadow:0 16px 48px rgba(32,65,95,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:200}
.dd a{display:block;padding:9px 18px;font-size:13px;color:var(--text);text-decoration:none;transition:.15s}
.dd a:hover{color:var(--teal);background:rgba(50,160,145,.06)}
.h-right{display:flex;align-items:flex-end;gap:18px}
.h-phone{font-size:16px;font-weight:700;color:var(--text);text-decoration:none;line-height:1.2;display:flex;flex-direction:column;align-items:flex-end}
.h-phone small{display:block;font-size:10px;font-weight:400;color:var(--text)}
.h-btn{padding:10px 24px;border-radius:var(--pill);font-family:var(--f);font-size:13px;font-weight:700;color:var(--white);background:var(--teal);border:none;cursor:pointer;text-decoration:none;transition:.25s;box-shadow:none}
.h-btn:hover{background:#2b8a7d}

/* ══════ HERO ══════ */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;padding-top:72px}

/* Slides */
.sl{position:absolute;inset:0;top:72px;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s;overflow:hidden}
.sl.on{opacity:1;visibility:visible;z-index:2;transition:opacity .7s ease,visibility 0s 0s}

.sl-bg{position:absolute;inset:0;z-index:0}
.sl--1 .sl-bg{background:linear-gradient(155deg,#dceaf7 0%,#eef4fb 40%,var(--white) 100%)}
.sl--2 .sl-bg{background:linear-gradient(155deg,#fde8ea 0%,#fef2f3 40%,var(--white) 100%)}
.sl--3 .sl-bg{background:linear-gradient(155deg,#fef4dd 0%,#fef9ec 40%,var(--white) 100%)}

/* Two-column layout */
.sl-layout{display:grid;grid-template-columns:46% 54%;height:calc(100vh - 72px);min-height:560px;align-items:center;position:relative;z-index:1}

/* Text side */
.sl-text{padding:clamp(28px,4vw,56px);padding-right:16px}
.sl-eyebrow{display:inline-flex;padding:5px 14px;border-radius:var(--pill);font-size:12px;letter-spacing:.3px;margin-bottom:16px;opacity:0;transform:translateY(14px);transition:opacity .5s .1s,transform .5s .1s}
.sl.on .sl-eyebrow{opacity:1;transform:translateY(0)}
.sl--1 .sl-eyebrow{background:rgba(50,160,145,.1);color:var(--teal)}
.sl--2 .sl-eyebrow{background:rgba(240,120,140,.1);color:var(--pink)}
.sl--3 .sl-eyebrow{background:rgba(48,105,156,.08);color:var(--blue)}
.sl-h{font-family:var(--fh);font-size:clamp(34px,4.8vw,64px);font-weight:400;line-height:1.06;color:var(--text);margin-bottom:18px;opacity:0;transform:translateY(18px);transition:opacity .6s .2s,transform .6s .2s}
.sl.on .sl-h{opacity:1;transform:translateY(0)}
.sl-list{list-style:none;margin-bottom:26px;opacity:0;transform:translateY(12px);transition:opacity .6s .35s,transform .6s .35s}
.sl.on .sl-list{opacity:1;transform:translateY(0)}
.sl-list li{position:relative;padding-left:18px;font-size:clamp(14px,1.2vw,16px);line-height:1.4;color:var(--tbody);margin-bottom:5px}
.sl-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%}
.sl--1 .sl-list li::before{background:var(--teal)}
.sl--2 .sl-list li::before{background:var(--pink)}
.sl--3 .sl-list li::before{background:var(--blue)}
.sl-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:var(--pill);font-family:var(--f);font-size:14px;font-weight:700;color:var(--white);text-decoration:none;border:none;cursor:pointer;transition:.3s;width:fit-content;opacity:0;transform:translateY(10px);transition:opacity .6s .45s,transform .6s .45s,box-shadow .3s,filter .3s}
.sl.on .sl-cta{opacity:1;transform:translateY(0)}
.sl-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.sl-cta svg{width:15px;height:15px;flex-shrink:0;transition:transform .3s}
.sl-cta:hover svg{transform:translateX(3px)}
.sl--1 .sl-cta{background:var(--teal);box-shadow:none}
.sl--2 .sl-cta{background:var(--pink);box-shadow:none}
.sl--3 .sl-cta{background:var(--blue);box-shadow:none}

/* ── Visual cluster (right side) ── */
.sl-visual{position:relative;height:100%;overflow:hidden}

/* Main blob shape */
.v-blob{position:absolute;z-index:0}
.sl--1 .v-blob--main{width:80%;height:70%;top:12%;right:2%;border-radius:60% 40% 55% 45%/50% 60% 40% 50%;overflow:hidden}
.sl--1 .v-blob--sm{width:30%;height:25%;bottom:8%;left:8%;border-radius:50%;background:rgba(255,221,158,.22)}
.sl--2 .v-blob--main{width:75%;height:68%;top:14%;right:4%;border-radius:45% 55% 50% 50%/55% 45% 55% 45%;overflow:hidden}
.sl--2 .v-blob--sm{width:28%;height:22%;bottom:12%;left:6%;border-radius:50%;background:rgba(163,196,233,.18)}
.sl--3 .v-blob--main{width:78%;height:72%;top:10%;right:3%;border-radius:55% 45% 60% 40%/45% 55% 45% 55%;overflow:hidden}
.sl--3 .v-blob--sm{width:26%;height:24%;top:6%;left:10%;border-radius:50%;background:rgba(50,160,145,.1)}

.v-blob--main img{width:100%;height:100%;object-fit:cover;display:block}

/* Floating feature pills */
.v-pill{position:absolute;z-index:3;padding:10px 18px;border-radius:16px;font-size:12.5px;font-weight:700;color:var(--text);background:var(--white);box-shadow:0 6px 24px rgba(32,65,95,.08);line-height:1.3;max-width:200px;animation:pillFloat 6s ease-in-out infinite alternate}
@keyframes pillFloat{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(-8px) rotate(1.5deg)}}

.sl--1 .vp1{top:14%;right:18%;animation-delay:0s;border-left:3px solid var(--teal)}
.sl--1 .vp2{top:42%;right:6%;animation-delay:-2s;border-left:3px solid var(--yellow)}
.sl--1 .vp3{bottom:18%;right:22%;animation-delay:-4s;border-left:3px solid var(--pink)}
.sl--2 .vp1{top:16%;right:14%;animation-delay:-.5s;border-left:3px solid var(--pink)}
.sl--2 .vp2{top:44%;right:4%;animation-delay:-2.5s;border-left:3px solid var(--teal)}
.sl--2 .vp3{bottom:20%;right:18%;animation-delay:-4.5s;border-left:3px solid var(--sky)}
.sl--3 .vp1{top:12%;right:16%;animation-delay:-1s;border-left:3px solid var(--blue)}
.sl--3 .vp2{top:40%;right:8%;animation-delay:-3s;border-left:3px solid var(--pink)}
.sl--3 .vp3{bottom:16%;right:24%;animation-delay:-5s;border-left:3px solid var(--teal)}

/* Decorative mini elements */
.v-deco{position:absolute;pointer-events:none;z-index:2}
.v-star{animation:starSpin 8s ease-in-out infinite alternate}
@keyframes starSpin{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(15deg) scale(1.1)}}
.v-circle{border-radius:50%;animation:circFloat 6s ease-in-out infinite alternate}
@keyframes circFloat{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}
.v-leaf{animation:leafSway 7s ease-in-out infinite alternate}
@keyframes leafSway{0%{transform:rotate(-5deg)}100%{transform:rotate(10deg)}}
.v-ring{border-radius:50%;border:2.5px solid;animation:ringPulse 5s ease-in-out infinite alternate}
@keyframes ringPulse{0%{transform:scale(1);opacity:.2}100%{transform:scale(1.08);opacity:.35}}

/* Doodle bird */
.v-bird{position:absolute;z-index:2;opacity:.18;animation:birdBob 4s ease-in-out infinite alternate}
@keyframes birdBob{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(-6px) rotate(3deg)}}

/* Wave divider */
.wave-div{position:absolute;bottom:-1px;left:0;right:0;z-index:5;line-height:0}
.wave-div svg{width:100%;height:auto;display:block}

/* Controls */
/* Dots — bottom right */
.sl-dots{position:absolute;bottom:32px;right:clamp(28px,4vw,56px);z-index:10;display:flex;gap:8px}
.sl-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--text);background:transparent;cursor:pointer;padding:0;transition:.35s;opacity:.2}
.sl-dot.on{background:var(--teal);border-color:var(--teal);opacity:1;width:28px;border-radius:5px}
/* Arrows — bottom left */
.sl-arr{position:absolute;bottom:28px;z-index:10;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--teal);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--teal);box-shadow:none}
.sl-arr:hover{background:var(--teal);color:var(--white)}
.sl-arr svg{width:16px;height:16px}
.sl-arr--l{left:clamp(28px,4vw,56px)}
.sl-arr--r{left:calc(clamp(28px,4vw,56px) + 52px)}

/* ══════ ABOUT ══════ */
.about{position:relative;padding:100px 0;background:var(--bg);overflow:hidden}
.about-inner{padding:0 clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

/* Photo slider with blob mask */
.about-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.about-slider{width:92%;aspect-ratio:5/4;position:relative;z-index:2;overflow:hidden;border-radius:60% 40% 55% 45%/50% 55% 45% 50%;box-shadow:0 20px 50px rgba(32,65,95,.1)}
.about-sl{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.about-sl--on{opacity:1;position:relative}
.about-sl img{width:100%;height:100%;object-fit:cover;display:block}
/* Color underlay behind photo */
.about-underlay{position:absolute;width:96%;aspect-ratio:5/4;border-radius:60% 40% 55% 45%/50% 55% 45% 50%;z-index:1;top:-6%;left:6%;background:var(--yellow);opacity:.2;transform:rotate(4deg)}
/* Sticker badge on photo */
.about-sticker{position:absolute;z-index:3;bottom:12%;right:0;padding:10px 18px;border-radius:14px;background:var(--teal);color:var(--white);font-size:12px;font-weight:700;box-shadow:0 6px 20px rgba(50,160,145,.2);transform:rotate(-3deg);animation:stickerBob 5s ease-in-out infinite alternate}
@keyframes stickerBob{0%{transform:rotate(-3deg) translateY(0)}100%{transform:rotate(-1deg) translateY(-4px)}}
/* About slider arrows */
.about-arrows{position:absolute;bottom:16px;right:16px;z-index:4;display:flex;gap:6px}
.about-arr{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--teal);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--teal);box-shadow:none}
.about-arr:hover{background:var(--teal);color:var(--white)}
.about-arr svg{width:14px;height:14px}

.about-deco{position:absolute;border-radius:50%;z-index:1;pointer-events:none}
.about-deco--1{width:100px;height:100px;background:var(--pink);opacity:.12;top:-16px;left:-8px}
.about-deco--2{width:50px;height:50px;background:var(--sky);opacity:.15;bottom:40px;right:-10px}
.about-deco--3{width:36px;height:36px;border:2.5px solid var(--teal);opacity:.2;bottom:100px;left:12px}
/* Mini sparkles in about */
.about-spk{position:absolute;pointer-events:none;z-index:0;opacity:.1}

/* Text column */
.about-text-col{max-width:560px}
.about-label{display:inline-flex;padding:5px 14px;border-radius:var(--pill);font-size:12px;font-weight:400;letter-spacing:.3px;margin-bottom:16px;background:rgba(50,160,145,.1);color:var(--teal)}
.about-title{font-family:var(--fh);font-size:clamp(30px,3.5vw,46px);font-weight:400;color:var(--text);line-height:1.12;margin-bottom:22px;text-align:left}
.about-text{font-size:15px;line-height:1.4;color:var(--tbody);text-align:left}

/* Pillars — organic, not boxy */
.pillars-wrap{margin:64px auto 0;padding:0 clamp(20px,4vw,48px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{padding:30px 24px;border-radius:28px;position:relative;overflow:hidden}
.pillar::before{content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;border-radius:50%;opacity:.08;pointer-events:none}
.pillar--teal{background:rgba(50,160,145,.12)}
.pillar--teal::before{background:var(--teal)}

.pillar--pink{background:rgba(240,120,140,.1)}
.pillar--pink::before{background:var(--pink)}

.pillar--blue{background:rgba(48,105,156,.08)}
.pillar--blue::before{background:var(--blue)}
.pillar-ico{margin-bottom:18px}
.pillar-ico svg{width:56px;height:56px;transition:transform .4s}

/* Icon hover animations */
/* Среда: один квадрат отходит */
.pillar--teal .pillar-ico svg rect{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.pillar--teal:hover .pillar-ico svg rect:nth-child(4){transform:translate(5px,5px)}

/* Педагоги: звезда мягко вращается */
.pillar--pink:hover .pillar-ico svg{transform:rotate(20deg)}

/* ФГОС: половинки книги сближаются */
.pillar--blue .pillar-ico svg rect{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.pillar--blue:hover .pillar-ico svg rect:nth-child(1){transform:translateX(3px)}
.pillar--blue:hover .pillar-ico svg rect:nth-child(2){transform:translateX(-3px)}
.pillar-h{font-family:var(--f);font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.3;position:relative}
.pillar-p{font-size:13.5px;line-height:1.4;color:var(--tbody);position:relative}
/* Pillar accent line */
.pillar-accent{display:none}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.rev-d1{transition-delay:.15s}
.rev-d2{transition-delay:.3s}

/* ══════ RESPONSIVE ══════ */
@media(max-width:1024px){
  .nav{display:none}
  .sl-layout{grid-template-columns:1fr}
  .sl-text{padding:28px 24px 16px;text-align:center}
  .sl-visual{height:340px}
  .sl-cta{margin:0 auto}
  .v-pill{font-size:11px;padding:8px 14px;max-width:160px}
  .about-inner{grid-template-columns:1fr;gap:40px}
  .about-visual{min-height:320px}
  .about-text-col{max-width:100%}
  .pillars{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}
@media(max-width:768px){
  .header{height:64px;padding:0 16px}
  .h-phone{display:none}
  .hero{padding-top:64px}
  .sl{top:64px}
  .sl-layout{min-height:auto;height:auto}
  .sl-text{padding:24px 20px 12px}
  .sl-visual{height:260px}
  .v-pill:nth-child(n+3){display:none}
  .sl-arr{display:none}
  .sl-dots{bottom:20px;right:16px;left:auto}
  .about{padding:60px 16px}
  .about-slider{border-radius:32px}
  .about-underlay{border-radius:32px}
}