:root {
  --a:#12A594; --a2:#0B8577; --mint:#9BEADB; --sun:#FFC24B; --ink:#0B1F24; --ink2:#14343b; --gray:#5b6b6e; --line:#e1e8e7;
  --bg:#F3F7F6; --card:#fff; --ease:cubic-bezier(.22,1,.36,1); --r:22px;
}
[hidden] { display:none !important }
* { box-sizing:border-box; margin:0 }
html { scroll-behavior:smooth }
body { font-family:Montserrat,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased }
a { color:inherit }
img { max-width:100% }

/* живой фон: два мягких пятна дрейфуют */
body::before, body::after { content:''; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(60px) }
body::before { width:60vmax; height:60vmax; left:-20vmax; top:-25vmax; background:radial-gradient(circle, rgba(18,165,148,.22), transparent 65%); animation:drift 18s ease-in-out infinite alternate }
body::after { width:50vmax; height:50vmax; right:-18vmax; top:30vh; background:radial-gradient(circle, rgba(255,194,75,.16), transparent 65%); animation:drift 22s ease-in-out infinite alternate-reverse }
@keyframes drift { to { transform:translate(8vmax, 6vmax) scale(1.1) } }

.wrap { max-width:1160px; margin:0 auto; padding:0 16px }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; position:relative; z-index:5 }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; text-decoration:none; letter-spacing:-.01em }
.brand img { width:36px; height:36px; transition:transform .6s var(--ease) }
.brand:hover img { transform:rotate(-10deg) scale(1.08) }
nav.links { display:flex; gap:8px; align-items:center }
.author { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:13px; font-weight:700; color:var(--ink2); text-decoration:none;
  background:rgba(255,255,255,.75); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:99px; padding:4px 12px 4px 4px;
  transition:transform .4s var(--ease), box-shadow .4s }
.author:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,31,36,.1) }
.author img { width:30px; height:30px; border-radius:50%; object-fit:cover }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 24px; border:0; border-radius:16px;
  background:linear-gradient(135deg, var(--a), var(--a2)); color:#fff; font:800 16px Montserrat,sans-serif; text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate; box-shadow:0 8px 22px rgba(18,165,148,.28);
  transition:transform .4s var(--ease), box-shadow .4s, opacity .3s }
.btn:hover { box-shadow:0 14px 32px rgba(18,165,148,.42); transform:translateY(-2px) }
.btn:active { transform:scale(.97) }
.btn:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none }
.btn:not(:disabled)::after { content:''; position:absolute; inset:0 auto 0 -60%; width:40%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); animation:shine 4.2s ease-in-out infinite }
@keyframes shine { 60%, 100% { left:120% } }
.btn.ghost { background:rgba(255,255,255,.8); backdrop-filter:blur(10px); color:var(--ink); border:1px solid var(--line); box-shadow:none }
.btn.ghost::after { display:none }
.btn.ghost:hover { border-color:var(--a); box-shadow:0 10px 24px rgba(11,31,36,.08) }
.btn.dark { background:var(--ink); box-shadow:0 10px 26px rgba(11,31,36,.25) }
.btn.sm { padding:9px 14px; font-size:14px; border-radius:12px }

.card { background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--r); padding:20px; position:relative }
/* подсветка карточки за курсором */
.glow { overflow:hidden }
.glow::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(18,165,148,.14), transparent 70%) }
.glow:hover::before { opacity:1 }

h1 { font-size:clamp(34px, 5.4vw, 66px); line-height:1.04; font-weight:800; letter-spacing:-.035em }
h2 { font-size:clamp(26px, 3.6vw, 42px); line-height:1.1; font-weight:800; letter-spacing:-.025em }
h3 { font-size:18px; font-weight:800; letter-spacing:-.01em }
.muted { color:var(--gray) }
.grad { background:linear-gradient(100deg, var(--a) 0%, #2bc4a8 40%, var(--sun) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:gradmove 6s ease-in-out infinite alternate }
@keyframes gradmove { to { background-position:100% 0 } }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--a2); background:rgba(18,165,148,.1);
  padding:6px 12px; border-radius:99px }
.eyebrow::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--a); animation:ping 1.8s ease-out infinite }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(18,165,148,.6) } 100% { box-shadow:0 0 0 10px rgba(18,165,148,0) } }

/* появление */
.rise { animation:rise 1s var(--ease) both }
@keyframes rise { from { opacity:0; transform:translateY(22px) } }
.reveal { opacity:0; transform:translateY(34px) scale(.98); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.reveal.in { opacity:1; transform:none }
.words span { display:inline-block; opacity:0; transform:translateY(.5em) rotate(3deg); animation:word .9s var(--ease) forwards }
@keyframes word { to { opacity:1; transform:none } }

.credit { color:var(--gray); font-size:12px; opacity:.7; text-align:center; padding:30px 0 }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:#fff3d6; color:#7a5300; font-size:13px; font-weight:800 }
.chip.ok { background:#dcf5f0; color:#0b6b5f }
.toast { position:fixed; left:50%; bottom:20px; transform:translate(-50%, 40px); opacity:0; background:var(--ink); color:#fff; padding:13px 18px;
  border-radius:14px; font-weight:700; font-size:14px; z-index:40; transition:all .5s var(--ease); max-width:calc(100% - 32px); box-shadow:0 14px 34px rgba(0,0,0,.25) }
.toast.show { transform:translate(-50%, 0); opacity:1 }

.modal { position:fixed; inset:0; background:rgba(11,31,36,.55); backdrop-filter:blur(6px); display:grid; place-items:center; padding:16px; z-index:30;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease) }
.modal.open { opacity:1; pointer-events:auto }
.modal > .card { max-width:460px; width:100%; max-height:calc(100dvh - 32px); overflow:auto; background:#fff; transform:translateY(24px) scale(.96); transition:transform .6s var(--ease) }
.modal.open > .card { transform:none }

.steps { display:grid; gap:10px; padding:0; list-style:none; counter-reset:s }
.steps li { counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start }
.steps li::before { content:counter(s); width:30px; height:30px; border-radius:50%; background:var(--a); color:#fff; font-weight:800; display:grid; place-items:center }

.plans { display:grid; gap:8px }
.plan { display:grid; grid-template-columns:1fr auto; column-gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s }
.plan:hover { transform:translateY(-2px); border-color:var(--a); box-shadow:0 8px 20px rgba(18,165,148,.12) }
.plan b { font-size:16px } .plan span { color:var(--gray); font-size:13px; font-weight:600 }
.plan strong { grid-row:1 / 3; grid-column:2; align-self:center; font-size:22px; font-weight:800 }

.field { display:grid; gap:6px; font-size:13px; font-weight:700; color:var(--gray) }
.field input { padding:13px 14px; border:1.5px solid var(--line); border-radius:13px; font:600 15px Montserrat,sans-serif; color:var(--ink); width:100%; background:#fff;
  transition:border-color .3s, box-shadow .3s }
.field input:focus { outline:none; border-color:var(--a); box-shadow:0 0 0 4px rgba(18,165,148,.15) }
.field input[type=color] { height:48px; padding:4px; cursor:pointer }

@media (max-width:480px) { nav.links .author { font-size:0; gap:0; padding:3px } .brand { font-size:18px } .brand img { width:30px; height:30px } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important }
  .reveal, .words span { opacity:1; transform:none }
}
@media (max-width:640px) { .hide-sm { display:none !important } }