/* Шпаргалка «Как ухаживать за ногами». Отдельная лёгкая страница: её
   открывают из личных сообщений Instagram на телефоне, поэтому своя
   вёрстка без общего styles.css главной. Цвета из палитры сайта.
   Это подарок, а не продажа: цветная шапка с плавающими значками,
   карточки проявляются при прокрутке, про Елену коротко внизу и одна
   мягкая кнопка в самом конце (Артем, 2026-09-30). */

:root{
  --brand:#00BFD3;
  --brand-deep:#00707E;
  --brand-strong:#00808F;
  --ink:#0E1A1C;
  --text:#2B3F42;
  --muted:#5A7176;
  --line:#D3E7EA;
  --whatsapp:#1FA855;
  --bg:#EEF9FA;
  /* свой цвет у каждой карточки; --t это тот же цвет, но темнее, для надписей */
  --day:#FFB547;   --day-bg:#FFF4E0;   --day-t:#A86200;
  --week:#00BFD3;  --week-bg:#E0F7FA;  --week-t:#00707E;
  --look:#7C8CF8;  --look-bg:#ECEEFF;  --look-t:#4453C4;
  --nails:#F08A9B; --nails-bg:#FDECEF; --nails-t:#B83B52;
  --shoe:#2FB67C;  --shoe-bg:#E3F6EC;  --shoe-t:#17784F;
  --never:#E0533B; --never-bg:#FDECE8; --never-t:#B3361F;
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Manrope,system-ui,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(0,128,143,.10) 1.2px,transparent 1.2px);
  background-size:22px 22px}
a{color:inherit}
h1,h2,p{margin-top:0}

/* ---------- шапка ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:120px 20px 84px;
  background:linear-gradient(150deg,#00C9DC 0%,#00A6BA 45%,#00707E 100%)}
.hero-inner{position:relative;z-index:2;max-width:560px;margin:0 auto}
.badge{display:inline-block;background:#fff;color:var(--brand-deep);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:18px;box-shadow:0 8px 24px rgba(0,60,70,.25);animation:pulse 2.8s var(--ease) infinite}
h1{font-size:clamp(38px,11vw,60px);line-height:1.02;letter-spacing:-.045em;margin-bottom:16px;text-shadow:0 4px 24px rgba(0,60,70,.25)}
.lead{font-size:17px;max-width:420px;color:#E6FBFD;margin-bottom:26px}
.down{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.5);animation:bob 2.2s ease-in-out infinite}
.down svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;z-index:0}
.b1{width:280px;height:280px;background:#7FF0FF;top:-80px;right:-60px;animation:drift 12s ease-in-out infinite}
.b2{width:240px;height:240px;background:#00566A;bottom:-90px;left:-70px;animation:drift 14s ease-in-out infinite reverse}

.floaters{position:absolute;inset:0;z-index:1;max-width:600px;margin:0 auto}
.fl{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(0,60,70,.28);animation:float 6s ease-in-out infinite}
.fl svg{width:30px;height:30px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f1{top:34px;left:20px}                                   .f1 svg{stroke:var(--week)}
.f2{top:22px;left:44%;width:50px;height:50px;animation-delay:-1.5s}  .f2 svg{stroke:var(--nails)}
.f3{top:48px;right:22px;animation-delay:-3s}             .f3 svg{stroke:var(--shoe)}
.f4{bottom:96px;right:26px;width:50px;height:50px;animation-delay:-2s;opacity:.9} .f4 svg{stroke:var(--day)}
.f5{bottom:60px;right:98px;width:40px;height:40px;border-radius:14px;animation-delay:-4s;opacity:.85} .f5 svg{stroke:var(--look);width:22px;height:22px}

.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:40px;z-index:2}
.wave path{fill:var(--bg)}

/* ---------- карточки ---------- */
main{max-width:560px;margin:0 auto;padding:6px 16px 0;display:grid;gap:16px}
.card{--c:var(--week);--cb:var(--week-bg);--ct:var(--week-t);position:relative;background:#fff;border-radius:26px;padding:22px 20px 20px;box-shadow:0 14px 40px rgba(6,35,41,.08);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c)}
.c-day{--c:var(--day);--cb:var(--day-bg);--ct:var(--day-t)}
.c-week{--c:var(--week);--cb:var(--week-bg);--ct:var(--week-t)}
.c-look{--c:var(--look);--cb:var(--look-bg);--ct:var(--look-t)}
.c-nails{--c:var(--nails);--cb:var(--nails-bg);--ct:var(--nails-t)}
.c-shoe{--c:var(--shoe);--cb:var(--shoe-bg);--ct:var(--shoe-t)}
.c-never{--c:var(--never);--cb:var(--never-bg);--ct:var(--never-t);background:linear-gradient(180deg,#fff 0%,var(--never-bg) 100%)}

.head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--cb)}
.ico svg{width:28px;height:28px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ct);margin:0 0 2px}
.card h2{font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:0}

.card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card li{position:relative;padding-left:30px;font-size:16px;color:var(--text)}
.card li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;background:var(--cb)}
.card li::after{content:"";position:absolute;left:7px;top:calc(.18em + 4px);width:5px;height:9px;border:solid var(--ct);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.c-never li::after{left:5px;top:calc(.18em + 9px);width:10px;height:0;border-width:2.4px 0 0;transform:none}

/* выделение маркером: докрашивается, когда карточка появилась */
mark{color:var(--ink);font-weight:650;background:linear-gradient(transparent 55%,var(--cb) 55%) no-repeat 0 0/100% 100%;border-radius:2px;padding:0 1px}
.card mark{background-image:linear-gradient(transparent 55%,color-mix(in srgb,var(--c) 38%,transparent) 55%)}

/* рисунок ногтя */
.nails{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;padding:14px 10px 12px;background:var(--cb);border-radius:20px}
.nails > div{text-align:center}
.nails svg{width:100%;max-width:110px;height:auto;display:block;margin:0 auto}
.nails figcaption{font-size:13.5px;font-weight:800;margin-top:6px}
.nails .no{color:var(--never-t)}
.nails .yes{color:var(--brand-strong)}
.cut{fill:none;stroke-width:4;stroke-linecap:round}
.cut.bad{stroke:var(--never);stroke-dasharray:6 6}
.cut.good{stroke:var(--brand-strong);stroke-dasharray:120;stroke-dashoffset:0}

/* ---------- кто составил ---------- */
.author{background:linear-gradient(150deg,#0F2A2F 0%,#101C1F 100%);color:#fff;border-radius:26px;padding:26px 22px;margin-top:10px;box-shadow:0 18px 44px rgba(6,35,41,.22)}
.author .tag{color:#7FE7F3}
.author h2{font-size:24px;letter-spacing:-.03em;margin-bottom:10px}
.author p{color:#CFE4E7;font-size:15.5px}
.author .soft{color:#fff;font-weight:650;margin:18px 0 16px}
.cta{display:flex;justify-content:center;align-items:center;background:var(--whatsapp);color:#fff;text-decoration:none;font-weight:800;font-size:16px;border-radius:999px;padding:16px 24px;box-shadow:0 10px 26px rgba(31,168,85,.35);transition:transform .2s var(--ease)}
.cta:active{transform:scale(.98)}

.foot{text-align:center;padding:14px 8px 40px;font-size:12.5px;color:var(--muted)}
.foot p{margin:0 0 4px}
.foot a{color:var(--brand-deep)}

:focus-visible{outline:3px solid var(--brand-strong);outline-offset:3px;border-radius:6px}

/* ---------- движение ---------- */
@keyframes float{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -12px;rotate:5deg}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,24px) scale(1.12)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

/* прячем до прокрутки только когда скрипт жив, иначе всё видно сразу */
.js .reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal mark{background-size:0% 100%;transition:background-size .9s var(--ease) .35s}
.js .reveal.in mark{background-size:100% 100%}
.js .reveal .ico{transform:scale(.6) rotate(-12deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1) .15s}
.js .reveal.in .ico{transform:none}
.js .reveal li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in li{opacity:1;transform:none}
.js .reveal.in li:nth-child(1){transition-delay:.2s}
.js .reveal.in li:nth-child(2){transition-delay:.3s}
.js .reveal.in li:nth-child(3){transition-delay:.4s}
.js .reveal.in li:nth-child(4){transition-delay:.5s}
.js .reveal.in .cut.good{animation:draw 1s var(--ease) .4s both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .reveal li,.js .reveal .ico{opacity:1;transform:none}
  .js .reveal mark{background-size:100% 100%}
}

@media (min-width:700px){
  .hero{padding:140px 20px 100px}
  .f1{left:8%}.f3{right:8%}
}

/* ---------- 2026-10-12: язык страницы и ссылки под палец ---------- */
.foot a{display:inline-block;padding:13px 4px}
.language-switcher{display:inline-flex;align-items:center;gap:1px;padding:3px;margin-top:6px;border:1px solid var(--line,#D3E7EA);border-radius:999px;background:#fff}
.language-switcher a{position:relative;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:800;line-height:1;color:var(--muted);text-decoration:none}
.language-switcher a::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.language-switcher a.active{background:#0E1A1C;color:#fff}