/* WHY2MAKE · страницы «Родителям» и «О нас» · общий стиль (токены board BRAGIN WORLDS) */
:root{
  --deep:#0B0D14; --night:#1A2440; --cyan:#03D9FF; --violet:#8B5CF6; --amber:#FFB347; --light:#F5F7FF;
  --display:"Space Grotesk", -apple-system, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
  --text:Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mono:"SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --glass:rgba(26,36,64,.42); --glass-line:rgba(245,247,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:#0B0D14}
body{margin:0; min-height:100vh; color:var(--light); font-family:var(--text); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60vmax 40vmax at 82% 12%, rgba(255,179,71,.14) 0%, transparent 60%),
    radial-gradient(50vmax 40vmax at 78% 0%, rgba(139,92,246,.14) 0%, transparent 65%),
    radial-gradient(70vmax 60vmax at 15% 25%, #131b33 0%, transparent 70%),
    linear-gradient(180deg,#0d1120 0%, var(--deep) 60%, var(--deep) 100%)}
a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:underline}

.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem clamp(20px,6vw,110px);
  background:linear-gradient(180deg, rgba(11,13,20,.85), rgba(11,13,20,0)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.lockup{display:flex;align-items:center;gap:.7rem; font-family:var(--display); font-size:.72rem; letter-spacing:.3em; color:rgba(245,247,255,.72); white-space:nowrap}
.lockup svg{width:26px;height:20px;flex:none}
.nav{display:flex; gap:6px; padding:4px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:inset 0 1px 0 rgba(245,247,255,.16)}
.nav a{padding:.5rem .95rem; border-radius:999px; font-size:.86rem; color:rgba(245,247,255,.85)} .nav a:hover{background:rgba(245,247,255,.12); text-decoration:none} .nav a.on{background:rgba(245,247,255,.14); color:var(--light)}

main{max-width:760px; margin:0 auto; padding:clamp(24px,5vh,56px) clamp(20px,6vw,40px) 5rem}
h1{font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.12em; margin:0 0 .6rem; line-height:1.1}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.5; color:rgba(245,247,255,.9); margin:0 0 2.2rem; max-width:34rem}
h2{font-family:var(--display); font-weight:500; font-size:1.25rem; letter-spacing:.06em; margin:2.6rem 0 .8rem}
p{line-height:1.6; margin:0 0 1rem; color:rgba(245,247,255,.86)}
p.amber{color:var(--amber)}
.quiet{color:rgba(245,247,255,.55); font-size:.9rem}
code{font:.92em var(--mono); color:var(--cyan)}

.hero{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end}
.hero figure{margin:0; width:clamp(150px,22vw,220px); filter:drop-shadow(0 22px 26px rgba(0,0,0,.5))}
.hero figure img{width:100%; display:block}
.hero figure .heart{position:relative}
.hero figure .heart::after{content:""; position:absolute; left:36%; top:30%; width:26%; height:19%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,214,150,.9), rgba(255,179,71,.5) 50%, transparent 72%); mix-blend-mode:screen; filter:blur(4px); animation:heart 2.6s ease-in-out infinite}
@keyframes heart{0%,100%{transform:scale(.92); opacity:.8}50%{transform:scale(1.1); opacity:1}}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:1rem 0 1.6rem}
.card{padding:1rem 1.1rem 1.1rem; border-radius:16px; background:var(--glass); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 rgba(245,247,255,.14); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%)}
.card b{display:block; font-weight:500; margin-bottom:.35rem; color:var(--light)}
.card p{margin:0; font-size:.94rem; color:rgba(245,247,255,.8)}
.card .tag{display:inline-block; margin-bottom:.5rem; font:11px var(--mono); letter-spacing:.06em; color:var(--amber)}
.card.warm .tag{color:var(--amber)} .card.cool .tag{color:var(--cyan)}

.ages{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:1rem 0 1.4rem}
.age{padding:.9rem 1rem; border-radius:14px; border:1px solid var(--glass-line); background:rgba(26,36,64,.3)}
.age b{display:block; font:500 1.1rem var(--display); letter-spacing:.06em; color:var(--amber); margin-bottom:.3rem}
.age p{margin:0; font-size:.9rem}

ul.plain{list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.55rem}
ul.plain li{padding-left:1.1rem; position:relative; line-height:1.5; color:rgba(245,247,255,.86)}
ul.plain li::before{content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:rgba(245,247,255,.55)}

details{border-top:1px solid rgba(245,247,255,.12); padding:.9rem 0}
details:last-of-type{border-bottom:1px solid rgba(245,247,255,.12)}
summary{cursor:pointer; font-weight:500; color:var(--light); list-style:none; display:flex; justify-content:space-between; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--cyan); font-family:var(--mono)} details[open] summary::after{content:"–"}
details p{margin:.7rem 0 0}

.quote{margin:1.6rem 0; padding:1.2rem 1.4rem; border-left:2px solid var(--amber); background:rgba(255,179,71,.06); border-radius:0 14px 14px 0; font-size:1.05rem; line-height:1.55}
.quote p{margin:0}

.mark{width:120px; height:90px; margin:0 0 1rem}
.foot{margin-top:3.5rem; padding-top:1.4rem; border-top:1px solid rgba(245,247,255,.12); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.82rem; color:rgba(245,247,255,.5)}
.foot a{color:rgba(245,247,255,.7)}

@media (max-width:720px){
  .hero{grid-template-columns:1fr} .hero figure{width:150px; justify-self:end; margin-top:-1rem}
  .top{padding:.7rem 16px} .lockup{font-size:.62rem; letter-spacing:.22em} .nav a{padding:.45rem .7rem; font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){ .hero figure .heart::after{animation:none} }