/* Layout: шапка (лапа + телефон) · слева заявление, справа живое банановое поле. Система Нейронного парка 2.0: ночь, кость, один источник света. */
:root{
  --bg:#0D0E19; --s1:#151725; --s2:#1C1F2E; --s3:#262938;
  --ink:#F4F4F7; --ink-2:#9B9DAD; --ink-3:#5F6273;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14);
  --inv:#F4F4F7; --on-inv:#0D0E19;
  --acc:#DCF26A; --on-acc:#0D0E19; --acc-glow:rgba(220,242,106,.38); --acc-text:#DCF26A;
  --glass:rgba(28,31,46,.55); --glass-b:rgba(255,255,255,.1); --glass-hl:rgba(255,255,255,.14);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-l:28px; --r-xl:40px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pt-acc:#DCF26A; --pt-stem:#8E8A5A; --pt-min:0;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#EDEDF0; --s1:#FFFFFF; --s2:#F6F6F8; --s3:#E3E3E8;
  --ink:#0D0E19; --ink-2:#6B6D7B; --ink-3:#A3A5B1;
  --line:rgba(13,14,25,.07); --line-2:rgba(13,14,25,.13);
  --inv:#0D0E19; --on-inv:#F4F4F7; --acc-text:#5E6B12;
  --pt-acc:#8C9E12; --pt-stem:#4A462C; --pt-min:.3;
  --glass:rgba(255,255,255,.62); --glass-b:rgba(255,255,255,.95); --glass-hl:#FFFFFF;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#EDEDF0; --s1:#FFFFFF; --s2:#F6F6F8; --s3:#E3E3E8;
  --ink:#0D0E19; --ink-2:#6B6D7B; --ink-3:#A3A5B1;
  --line:rgba(13,14,25,.07); --line-2:rgba(13,14,25,.13);
  --inv:#0D0E19; --on-inv:#F4F4F7; --acc-text:#5E6B12;
  --pt-acc:#8C9E12; --pt-stem:#4A462C; --pt-min:.3;
  --glass:rgba(255,255,255,.62); --glass-b:rgba(255,255,255,.95); --glass-hl:#FFFFFF;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,p{margin:0}
a{color:inherit}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:20px;padding-block:16px 20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1360px;margin:0 auto}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 8px 0 18px;border-radius:999px}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-b);box-shadow:inset 0 1px 0 var(--glass-hl)}
.brand{display:block;color:var(--ink);flex:none}
.brand svg{display:block;height:34px;width:auto;fill:currentColor}
.phone{display:flex;align-items:center;gap:12px;text-decoration:none;padding:6px 6px 6px 18px;border-radius:999px;background:var(--s1);border:1px solid var(--line);transition:border-color .28s}
.phone:hover{border-color:var(--line-2)}
.phone .lbl{font-size:12px;color:var(--ink-2);line-height:1.2;display:block}
.phone b{font-weight:500;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2;display:block}
.ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--acc);color:var(--on-acc)}
svg.i{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* main */
main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px;min-height:0}
.copy{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(24px,3.4vw,52px);border-radius:var(--r-xl);background:var(--s1);border:1px solid var(--line);min-width:0}
.head{container-type:inline-size;min-width:0}
.over{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:34px;padding:0 15px;border-radius:999px;background:var(--s2);font-size:13.5px;font-weight:500;color:var(--ink-2)}
.over i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px 2px var(--acc-glow);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(28px,13cqi,88px);font-weight:600;line-height:.95;letter-spacing:-.055em;text-wrap:balance;margin-top:22px}
h1 span{color:var(--ink-3)}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.msg{display:grid;gap:18px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{--h:56px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 24px 0 8px;border-radius:999px;border:1px solid transparent;font:500 16px/1 var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .16s var(--ease-out),box-shadow .28s,background-color .28s,border-color .28s;white-space:nowrap;color:var(--ink);background:transparent}
.btn:active{transform:scale(.96)}
.btn .bi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.btn-acc{background:var(--acc);color:var(--on-acc)}
.btn-acc .bi{background:rgba(13,14,25,.1)}
.btn-acc:hover{box-shadow:0 10px 40px -8px var(--acc-glow)}
.btn-line{border-color:var(--line-2)}
.btn-line .bi{background:var(--s2)}
.btn-line:hover{background:var(--s2)}
.btn:focus-visible,.phone:focus-visible,.brand:focus-visible,.mini:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* field */
.field{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--bg);border:1px solid var(--line);min-height:520px}
#sand{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.ctl{position:absolute;left:14px;bottom:14px;right:14px;display:flex;gap:8px;flex-wrap:wrap}
.mini{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;font:500 14px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .28s}
.mini:active{transform:scale(.95)}
.mini svg.i{width:17px;height:17px}
.mini.acc{background:var(--acc);color:var(--on-acc);border-color:transparent;box-shadow:none}

footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);padding:0 8px}

@media (max-width:900px){
  main{grid-template-columns:1fr}
  .field{min-height:0;aspect-ratio:1/1.05;max-height:620px;width:100%;max-width:100%}
  .copy{gap:32px}
}
@media (max-width:560px){
  .top{height:58px;padding:0 6px 0 14px}
  .brand svg{height:28px}
  .phone{padding:5px 5px 5px 12px;gap:8px}
  .phone .lbl{display:none}
  .phone b{font-size:15px}
  .ic{width:36px;height:36px}
  .btn{width:100%;--h:58px}
  .copy{border-radius:var(--r-l)}
  .field{border-radius:var(--r-l);aspect-ratio:1/1.15}
}
@media (max-width:380px){.mini{font-size:13px;padding:0 14px 0 10px}.phone b{font-size:13.5px}.brand svg{height:24px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}