/* abudarova.ru — коррекция почерка у детей (25.09.2026).
   Стиль «школьная тетрадь»: бумага, синие чернила, красная линия полей, разлиновка. */
@font-face{font-family:Nunito;src:url(../fonts/nunito-cyr.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;src:url(../fonts/nunito-lat.woff2) format("woff2");font-weight:200 1000;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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Caveat;src:url(../fonts/caveat-cyr.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Caveat;src:url(../fonts/caveat-lat.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

:root{--paper:#fbf7ee;--paper2:#f3eddf;--card:#fffdf8;--ink:#1d3a8f;--ink2:#2f56c8;--text:#23262f;--muted:#646a78;
--line:#e3dccb;--rule:#c9d5ea;--red:#e0565b;--sun:#f2b33d;--r:14px;--tap:46px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:18px/1.6 Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink2)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;color:#15213f;letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,60px);font-weight:800;max-width:14ch}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:800}
h3{font-size:21px;font-weight:800}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}.narrow{max-width:780px}.center{text-align:center}

/* шапка */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;
background:rgba(251,247,238,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#15213f;font-weight:800;line-height:1.1}
.logo small{display:block;font-weight:600;color:var(--muted);font-size:13px}
.mono{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font:700 28px/1 Caveat,cursive}
/* логотип-«драгоценность»: 24 кадра поворота из Blender (build/gem.py), полоса webp */
.mono.gem{flex:0 0 46px;width:46px;height:46px;border-radius:0;background:url(../img/gem.webp?v=2) 0 0/1472px 46px no-repeat;animation:gem 6.4s steps(32) infinite}
/* искра на гранях: вспыхивает раз в 4,2 с в разных точках знака */
.mono.gem::after{content:"";position:absolute;width:14px;height:14px;left:26px;top:8px;pointer-events:none;opacity:0;
background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)) 50% 50%/14px 2px no-repeat,radial-gradient(closest-side,#fff,rgba(255,255,255,0)) 50% 50%/2px 14px no-repeat,radial-gradient(circle,#fff 0 1.5px,rgba(170,200,255,.6) 2.5px,transparent 5px);
animation:spark 4.2s ease-in-out infinite}
.mono.gem{position:relative}
@keyframes spark{0%,70%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(45deg)}86%{opacity:0;transform:translate(0,0) scale(.3) rotate(90deg)}
87%,100%{opacity:0;transform:translate(-14px,18px)}}
@keyframes gem{to{background-position:-1472px 0}}   /* 32 кадра × 46 px */
.top nav{display:flex;align-items:center;gap:22px}.top nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:600}
.top nav a:hover{color:var(--ink)}

p.muted{color:var(--muted);font-size:15px}

.cta-sec{background:linear-gradient(180deg,var(--paper),#eef2fb)}
.contacts{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;width:min(900px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%);}
/* ВСЕ кнопки сайта — «камни» изумрудной огранки (.btn и .jewel — одна система, 25.09.2026).
   Тонкий камень: срез углов 6 px, две узкие ступени граней, гладкая площадка, острый блик и искра-звёздочка.
   Грани — псевдоэлементы ПОД текстом без отрицательного z-index (на Android такой слой прятал текст).
   Текст и иконка обязаны лежать в <span>/<svg> — иначе псевдоэлементы перекроют голый текст. */
.btn,.jewel{--k:6px;--c1:#c9d6ff;--c2:#3158cc;--c3:#13266b;--ink-on:#fff;
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;
color:var(--ink-on)!important;-webkit-text-fill-color:var(--ink-on);font:700 16px/1 Nunito,sans-serif;letter-spacing:.015em;text-decoration:none;cursor:pointer;
clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)),0 var(--k));
background:linear-gradient(112deg,var(--c3) 0,var(--c1) 14%,var(--c3) 27%,var(--c1) 44%,var(--c2) 58%,var(--c1) 74%,var(--c3) 88%,var(--c1) 100%);
transition:transform .2s,filter .2s}
.btn::before,.btn::after,.jewel::before,.jewel::after{content:"";position:absolute;pointer-events:none;
clip-path:polygon(var(--kk) 0,calc(100% - var(--kk)) 0,100% var(--kk),100% calc(100% - var(--kk)),calc(100% - var(--kk)) 100%,var(--kk) 100%,0 calc(100% - var(--kk)),0 var(--kk))}
/* вторая ступень — узкая кромка с обратным переливом */
.btn::before,.jewel::before{--kk:5px;inset:1.5px;background:linear-gradient(68deg,var(--c1) 0,var(--c3) 20%,var(--c2) 38%,var(--c1) 52%,var(--c3) 70%,var(--c2) 86%,var(--c1) 100%)}
/* площадка: глубина цвета + острый блик + искра в правом верхнем углу */
.btn::after,.jewel::after{--kk:4px;inset:3.5px;
background:
radial-gradient(closest-side,#fff,rgba(255,255,255,0)) right 5px top 6px/0 0 no-repeat,
radial-gradient(closest-side,#fff,rgba(255,255,255,0)) right 11px top 0px/0 0 no-repeat,
linear-gradient(106deg,transparent 44%,rgba(255,255,255,.18) 47%,rgba(255,255,255,.9) 49.5%,rgba(255,255,255,.18) 52%,transparent 55%) -160% 0/260% 100% no-repeat,
linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 46%,rgba(0,0,0,.1) 54%,rgba(0,0,0,.02)),
radial-gradient(120% 140% at 30% 0,var(--c2),var(--c3));
animation:glint 6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes glint{
0%,58%{background-position:right 5px top 6px,right 11px top 0px,-160% 0,0 0,0 0;background-size:0 0,0 0,260% 100%,auto,auto}
80%{background-position:right 5px top 6px,right 11px top 0px,260% 0,0 0,0 0;background-size:0 0,0 0,260% 100%,auto,auto}
86%{background-size:14px 2px,2px 14px,260% 100%,auto,auto}
94%,100%{background-position:right 5px top 6px,right 11px top 0px,260% 0,0 0,0 0;background-size:0 0,0 0,260% 100%,auto,auto}}
.btn>span,.btn>svg,.jewel>span,.jewel>svg{position:relative;z-index:1}
.btn>span,.jewel>span{text-shadow:0 1px 1px rgba(0,0,0,.3)}
.jewel svg{width:20px;height:20px;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.btn:hover,.jewel:hover{transform:translateY(-1px);filter:brightness(1.07) saturate(1.1)}
.btn.sm{--k:5px;min-height:38px;padding:0 15px;font-size:14px;white-space:nowrap}
/* цвета камней */
.btn.ghost{--c1:#ffffff;--c2:#eef2fb;--c3:#b9c4dc;--ink-on:var(--ink)}
.btn.ghost>span{text-shadow:0 1px 0 rgba(255,255,255,.8)}
.jewel.tg{--c1:#c6f0ff;--c2:#27a7e7;--c3:#0a5a93}
.jewel.wa{--c1:#baf8d6;--c2:#18b45c;--c3:#075c33}
.jewel.ph{--c1:#c9d6ff;--c2:#3158cc;--c3:#13266b}
/* блики не вспыхивают одновременно */
.jewel.wa::after,.cta .btn.ghost::after{animation-delay:1.3s}.jewel.ph::after{animation-delay:2.6s}.top .btn::after{animation-delay:3.4s}
.cta,.contacts{filter:drop-shadow(0 10px 14px rgba(20,30,80,.2))}
.soon{font:700 26px/1.3 Caveat,cursive;color:var(--ink);margin:0;padding:14px 22px;border:2px dashed var(--rule);border-radius:14px;background:#fff}

.foot{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.foot .dev a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* появление */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}

@media (max-width:980px){.pains,.cards,.prices{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.top nav a:not(.btn){display:none}.hero-grid,.method,.two{grid-template-columns:1fr}.hero{padding:44px 0 60px}
.notebook{max-width:460px;margin:8px auto 0}.about{grid-template-columns:1fr}.photo{width:160px;height:190px}.photo span{font-size:100px}
.gallery{gap:10px}}
@media (max-width:560px){.pains,.cards,.prices,.steps{grid-template-columns:1fr}.ticks.cols{grid-template-columns:1fr}.sec{padding:60px 0}
.logo small{display:none}.gallery{flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.jewel::after,.btn::after,.mono.gem::after{animation:none}.mono.gem{animation:none}.hand path{animation:none;fill:var(--ink);stroke-width:2;stroke-dashoffset:0}.nl{animation:none;opacity:1}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}