/* Открытая школа Агафоновых — стили
   Палитра: вода Байкала, солнце, песок, кедровая зелень */

:root{
  --ink:#123430; --soft:#5C7B75; --bg:#F1F7F2; --card:#FFFFFF; --line:#DCE8E1;
  --water:#12797E; --water-dark:#0C5A5E; --shallow:#4FC4C0; --sun:#F0A03C; --sun-dark:#C97D22;
  --bagul:#C05A96; --sand:#F7EEDC;
  --disp:'Unbounded','Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --body:'Manrope','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; }
h1,h2,h3,p{ margin:0; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:200; background:var(--card); padding:12px 18px; border-radius:12px; }

.shell{ max-width:1160px; margin:0 auto; padding:0 24px; position:relative; }
@media (max-width:640px){ .shell{ padding:0 16px; } }

/* ── кнопки ─────────────────────────────────────────────── */
.btn{
  display:inline-block; background:var(--water); color:#fff; border:none; border-radius:14px;
  padding:14px 24px; font-weight:700; cursor:pointer; box-shadow:0 4px 0 var(--water-dark);
  transition:transform .08s ease, box-shadow .08s ease; text-align:center;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--water-dark); }
.btn.sun{ background:var(--sun); color:#3B2405; box-shadow:0 4px 0 var(--sun-dark); }
.btn.sun:active{ box-shadow:0 1px 0 var(--sun-dark); }
.btn.ghost{ background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line), 0 4px 0 var(--line); }
.btn.ghost:active{ box-shadow:inset 0 0 0 2px var(--line), 0 1px 0 var(--line); }
.btn.wide{ width:100%; }

/* ── навигация ──────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(241,247,242,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.navin{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brandname{ display:block; font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:-.01em; line-height:1.2; }
.brandsub{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.navlinks{ display:flex; gap:26px; }
.navlink{ font-weight:600; font-size:14.5px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.navlink:hover{ color:var(--water); border-bottom-color:var(--shallow); }
.navright{ display:flex; align-items:center; gap:10px; }
.pillstat{
  display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line);
  border-radius:99px; padding:7px 14px; font-weight:700; font-size:14px;
}
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:var(--card);
         border-radius:12px; cursor:pointer; padding:11px 10px; }
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; margin:0 0 4px; }
.burger span:last-child{ margin-bottom:0; }

@media (max-width:900px){
  .navlinks{
    position:absolute; top:70px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 24px 16px; display:none;
  }
  .navlinks.open{ display:flex; }
  .navlink{ padding:13px 0; border-bottom:1px solid var(--line); }
  .burger{ display:block; }
}
@media (max-width:520px){ .pillstat{ padding:7px 11px; } .brandsub{ display:none; } }

/* ── первый экран ───────────────────────────────────────── */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding:64px 0 44px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; background:var(--sand); color:#7A5418; border-radius:99px;
  padding:7px 15px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.h1{ font-family:var(--disp); font-weight:700; font-size:clamp(30px,4.9vw,58px); line-height:1.06;
     letter-spacing:-.03em; margin-top:22px; }
.h1 u{ text-decoration:none; color:var(--water); position:relative; white-space:nowrap; }
.h1 u::after{ content:''; position:absolute; left:0; right:0; bottom:.06em; height:.16em; background:var(--sun);
              opacity:.45; border-radius:99px; z-index:-1; }
.lede{ font-size:clamp(15px,1.5vw,18.5px); line-height:1.65; color:var(--soft); max-width:52ch; margin-top:20px; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.scene{ display:flex; align-items:center; justify-content:center; }
.scene svg{ width:min(100%,440px); height:auto; }
.wave1{ animation:drift 14s ease-in-out infinite; }
.wave2{ animation:drift 19s ease-in-out infinite reverse; }
.seal{ animation:bob 5s ease-in-out infinite; }
.blink{ animation:blink 6s infinite; transform-origin:center; transform-box:fill-box; }
@keyframes drift{ 0%,100%{ transform:translateX(-8px);} 50%{ transform:translateX(8px);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.1);} }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding:36px 0 26px; }
  .scene{ order:-1; } .scene svg{ width:min(76%,300px); }
}

/* ── секции ─────────────────────────────────────────────── */
.sec{ padding:70px 0 0; }
.sechead{ max-width:640px; margin-bottom:30px; }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--water); }
.h2{ font-family:var(--disp); font-weight:600; font-size:clamp(23px,3.2vw,36px); line-height:1.12;
     letter-spacing:-.025em; margin-top:12px; }
.sub{ color:var(--soft); font-size:15.5px; line-height:1.65; margin-top:14px; }
.tiny{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); }
.bignum{ font-family:var(--disp); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.03em; margin-top:8px; }

/* ── вопрос дня ─────────────────────────────────────────── */
.daily{
  background:var(--card); border:1px solid var(--line); border-radius:26px; padding:32px;
  box-shadow:0 10px 30px rgba(18,52,48,.05); display:grid; grid-template-columns:1fr 270px; gap:32px;
}
.dailyside{ background:var(--sand); border-radius:20px; padding:24px; display:flex; flex-direction:column;
            gap:22px; justify-content:space-between; }
.sidenote{ font-size:13px; line-height:1.55; color:#7A5418; margin-top:12px; }
.qtext{ font-family:var(--disp); font-weight:500; font-size:clamp(17px,2.1vw,23px); line-height:1.34;
        letter-spacing:-.02em; margin:14px 0 22px; }
.opts{ display:grid; gap:10px; }
.opt{
  text-align:left; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:14px 18px;
  cursor:pointer; font-weight:600; font-size:15px; display:flex; gap:12px; align-items:center;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.opt:hover:not(:disabled){ border-color:var(--shallow); transform:translateX(3px); }
.opt:disabled{ cursor:default; }
.optkey{ font-family:var(--mono); font-size:12px; color:var(--soft); border:1px solid var(--line); border-radius:7px;
         width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex:none; }
.opt.right{ border-color:var(--water); background:rgba(79,196,192,.14); }
.opt.right .optkey{ border-color:var(--water); color:var(--water); }
.opt.wrong{ border-color:var(--bagul); background:rgba(192,90,150,.1); }
.why{ margin-top:20px; border-left:4px solid var(--sun); background:var(--sand); border-radius:0 14px 14px 0;
      padding:16px 18px; font-size:14.5px; line-height:1.6; }
.why b{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
        color:#8A6320; margin-bottom:7px; }
.streakrow{ display:flex; gap:5px; margin-top:14px; }
.sday{ flex:1; height:34px; border-radius:9px; background:rgba(18,121,126,.1); display:flex; align-items:center;
       justify-content:center; font-family:var(--mono); font-size:10px; color:var(--soft); }
.sday.on{ background:var(--sun); color:#40280A; font-weight:500; }
@media (max-width:860px){ .daily{ grid-template-columns:1fr; padding:24px; } }

/* ── тропа ──────────────────────────────────────────────── */
.trailwrap{ display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:start; }
.trail{ position:relative; width:100%; max-width:520px; margin:0 auto; list-style:none; padding:0; }
.trailline{ position:absolute; left:0; top:0; width:100%; pointer-events:none; }

.node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; border:none; cursor:pointer; background:var(--card);
  box-shadow:0 5px 0 var(--sh), inset 0 0 0 3px var(--acc);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition:transform .1s ease, box-shadow .1s ease; z-index:2;
}
.node:hover{ transform:translate(-50%,calc(-50% - 2px)); }
.node:active{ transform:translate(-50%,calc(-50% + 2px)); box-shadow:0 2px 0 var(--sh), inset 0 0 0 3px var(--acc); }
.node.done{ background:var(--acc); box-shadow:0 5px 0 var(--sh); }
.nodetop{ font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.nodenum{ font-family:var(--disp); font-weight:700; font-size:18px; color:var(--acc); line-height:1; }
.node.done .nodetop{ color:rgba(255,255,255,.85); }
.node.done .nodenum{ color:#fff; }

.stoplabel{
  position:absolute; top:var(--y); transform:translateY(-50%); z-index:1;
  width:clamp(108px,26vw,168px); font-size:13px; font-weight:600; line-height:1.32; color:var(--soft);
  background:var(--bg); border-radius:9px; padding:5px 7px;
}
.stoplabel.left{ right:calc(100% - var(--x) + 50px); text-align:right; }
.stoplabel.right{ left:calc(var(--x) + 50px); text-align:left; }
.stoplabel .st-topic{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
                      text-transform:uppercase; color:var(--acc); margin-bottom:3px; }
.stoplabel.is-done{ color:var(--ink); }

.side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; }
.panel.sand{ background:var(--sand); border-color:transparent; }
.paneltext{ font-size:13.5px; color:var(--soft); line-height:1.6; margin-top:12px; }
.panel.sand .paneltext{ color:#7A5418; }
.panelbig{ font-size:15px; line-height:1.6; font-weight:600; margin-top:10px; }
.bar{ height:12px; border-radius:99px; background:rgba(18,121,126,.12); overflow:hidden; margin:14px 0 4px; }
.barfill{ height:100%; width:0; background:linear-gradient(90deg,var(--shallow),var(--water)); border-radius:99px;
          transition:width .4s ease; }
.topics{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.chip{ font-size:12px; font-weight:600; border-radius:99px; padding:6px 12px; background:var(--bg); color:var(--soft); }
@media (max-width:980px){ .trailwrap{ grid-template-columns:1fr; } .side{ position:static; } }
@media (max-width:560px){
  .node{ width:64px; height:64px; }
  .nodenum{ font-size:16px; }
  .nodetop{ font-size:7.5px; }
  .stoplabel{ width:clamp(96px,24vw,130px); font-size:12px; padding:4px 6px; }
  .stoplabel.left{ right:calc(100% - var(--x) + 38px); }
  .stoplabel.right{ left:calc(var(--x) + 38px); }
}

/* ── урок в модальном окне ──────────────────────────────── */
.back{ position:fixed; inset:0; background:rgba(11,40,37,.55); backdrop-filter:blur(3px); z-index:100;
       display:flex; align-items:flex-start; justify-content:center; padding:28px 16px; overflow-y:auto; }
.back[hidden]{ display:none; }
.modal{ background:var(--card); border-radius:26px; width:100%; max-width:640px; padding:32px; position:relative;
        box-shadow:0 24px 60px rgba(11,40,37,.28); }
.modal h3{ font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.02em; margin-top:10px; }
.close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:none;
        background:var(--bg); cursor:pointer; font-size:16px; line-height:1; }
.close:hover{ background:var(--line); }
.steps{ display:flex; gap:6px; margin:18px 0 6px; }
.stepdot{ flex:1; height:6px; border-radius:99px; background:var(--line); }
.stepdot.on{ background:var(--water); }
.stepdot.miss{ background:var(--bagul); }
.result{ text-align:center; padding-top:8px; }
.result .mark{ font-size:42px; line-height:1; }
.result h3{ font-size:22px; margin:16px 0 8px; }
.result .sub{ max-width:400px; margin:0 auto; }
.resultbtns{ display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
@media (max-width:640px){ .modal{ padding:24px; } }

/* ── репетиторство ──────────────────────────────────────── */
.subjects{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.subj{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; position:relative;
       overflow:hidden; display:flex; flex-direction:column; }
.subj::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--acc); }
.subjtitle{ font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.02em; margin-top:6px; }
.subjlead{ font-size:13.5px; line-height:1.6; color:var(--soft); margin:10px 0 16px; }
.subjlist{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:9px; }
.subjlist li{ font-size:13.5px; line-height:1.5; padding-left:18px; position:relative; }
.subjlist li::before{ content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:2px;
                      background:var(--acc); opacity:.55; }
.subjwho{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
          margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.subjpick{ margin-top:14px; align-self:flex-start; background:none; border:none; padding:0; cursor:pointer;
           font-weight:700; font-size:13.5px; color:var(--acc); border-bottom:2px solid var(--acc); }

.booking{ margin-top:22px; background:var(--sand); border-radius:26px; padding:36px;
          display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.tsteps{ list-style:none; padding:0; margin:18px 0 0; counter-reset:t; display:grid; gap:18px; }
.tsteps li{ counter-increment:t; padding-left:46px; position:relative; }
.tsteps li::before{ content:counter(t); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:11px;
                    background:var(--sun); color:#3B2405; font-family:var(--disp); font-weight:700; font-size:13px;
                    display:flex; align-items:center; justify-content:center; }
.tstitle{ font-family:var(--disp); font-weight:600; font-size:15.5px; letter-spacing:-.02em; margin-bottom:5px; }
.tstext{ font-size:13.5px; line-height:1.6; color:#6B5735; }
.bookednote{ font-size:13px; line-height:1.6; color:#7A5418; margin-top:24px; border-top:1px solid rgba(122,84,24,.2);
             padding-top:16px; }
.form.dark{ background:var(--card); border-radius:20px; padding:26px; }
.form.dark .label{ color:var(--soft); }
.form.dark .input{ background:var(--bg); border:1.5px solid var(--line); color:var(--ink); }
.form.dark .input::placeholder{ color:#93A9A3; }
.form.dark .input:focus{ border-color:var(--water); }
.form.dark .input.err{ border-color:var(--bagul); }
.form.dark .formnote{ color:var(--soft); }
.formtitle{ font-family:var(--disp); font-weight:600; font-size:17px; letter-spacing:-.02em; margin-bottom:4px; }
.thanks.light{ background:var(--card); color:var(--ink); }
.thanks.light p{ color:var(--soft); }
@media (max-width:860px){ .booking{ grid-template-columns:1fr; padding:24px; } }

/* ── принципы ───────────────────────────────────────────── */
.grid4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.pr{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; }
.prmark{ width:38px; height:38px; border-radius:12px; background:var(--sand); display:flex; align-items:center;
         justify-content:center; font-family:var(--disp); font-weight:700; font-size:13px; color:var(--sun-dark);
         margin-bottom:16px; }
.prtitle{ font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-.02em; margin-bottom:9px; }
.prtext{ font-size:14px; line-height:1.6; color:var(--soft); }

/* ── приглашение ────────────────────────────────────────── */
.invite{ background:linear-gradient(150deg,#0F6B70,#12797E 45%,#1B8E84); color:#EAF7F4; border-radius:30px;
         padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.invite .h2,.invite .kicker{ color:#fff; }
.invite .sub{ color:rgba(234,247,244,.84); }
.form{ display:grid; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.label{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(234,247,244,.7); }
.input{ background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25); color:#fff; border-radius:12px;
        padding:12px 14px; width:100%; }
.input::placeholder{ color:rgba(234,247,244,.55); }
.input:focus{ border-color:var(--sun); outline:none; }
.input.err{ border-color:#FFC7DE; }
.input option{ color:#123430; }
.formnote{ font-size:12.5px; color:rgba(234,247,244,.7); line-height:1.6; }
.thanks{ background:rgba(255,255,255,.12); border-radius:18px; padding:24px; }
.thanks h3{ font-family:var(--disp); font-weight:600; font-size:19px; margin-bottom:10px; }
.thanks p{ font-size:14.5px; line-height:1.65; color:rgba(234,247,244,.85); }
@media (max-width:860px){ .invite{ grid-template-columns:1fr; padding:28px; border-radius:24px; } }

/* ── подвал ─────────────────────────────────────────────── */
.foot{ margin-top:84px; border-top:1px solid var(--line); padding:40px 0 24px; }
.footgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px; }
.foothead{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
           margin-bottom:12px; }
.footline{ font-size:14.5px; line-height:1.9; color:var(--soft); }
.footline b{ color:var(--ink); font-weight:600; }
.footline a:hover{ color:var(--water); }
.copy{ margin-top:30px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px;
       color:var(--soft); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
@media (max-width:860px){ .footgrid{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}