/* «Поток» — an airy site over a living warm current (WebGL shader) that reacts to the pointer and the scroll.
   Light and soft: cream paper with peach, coral and apricot flowing through it; brand red only as the accent.
   Type: Unbounded 250 against 800, ink on light; frosted cards; JetBrains Mono labels.
   Naming note: --ink is the ground colour and --cream the text colour (kept from the first, dark version). */
:root{
  --ink:#fbf5ec; --cream:#1d1614; --red:#db0000; --coral:#ff6a4d; --f1:#ffd2b8; --f2:#ffb39c;
  --dim:color-mix(in srgb,var(--cream) 62%,transparent); --glass:rgba(255,255,255,.5); --line:color-mix(in srgb,var(--cream) 16%,transparent);
  --display:Unbounded,'Arial Black',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --g:max(16px,min(4vw,56px)); --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden;overflow-x:clip;background:var(--ink)}
html{scroll-behavior:smooth}
body{font-family:var(--display);color:var(--cream);-webkit-font-smoothing:antialiased;position:relative;
  background:radial-gradient(120% 90% at 75% 15%,var(--f1),transparent 60%),radial-gradient(90% 80% at 10% 90%,var(--f2),transparent 55%),var(--ink)}
p,h1{margin:0}a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
::selection{background:var(--cream);color:var(--ink)}
.mono{font:500 11px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 50%,transparent),transparent 65%)}
body.sky .shade{background:linear-gradient(90deg,rgba(245,248,251,.18),transparent 55%)}

/* a soft blob follows the pointer and inverts what is under it */
.blob{position:fixed;left:0;top:0;z-index:30;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:var(--coral);mix-blend-mode:multiply;pointer-events:none;opacity:0;
  transform:translate3d(var(--x,-200px),var(--y,-200px),0) scale(var(--s,.35));transition:opacity .4s,scale .3s}
body.has-pointer .blob{opacity:1}
@media(pointer:coarse){.blob{display:none}}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--g);transition:transform .45s var(--ease),background .4s,padding .4s,box-shadow .4s}
.hd.solid{padding-block:10px;background:color-mix(in srgb,var(--ink) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(40,70,120,.08)}
.hd.hide{transform:translateY(-110%)}
@media(prefers-reduced-motion:reduce){.hd{transition:none}}
.brand{display:block;width:clamp(128px,13vw,200px)}.brand img{display:block;width:100%;height:auto}

.hd-nav{display:flex;align-items:center;gap:10px;white-space:nowrap}
.lnk{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;color:var(--dim)}.lnk:hover{color:var(--cream)}
.call{font:600 12px var(--display);letter-spacing:-.01em;padding:11px 16px;border-radius:99px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .3s,color .3s}
.call:hover{background:var(--cream);color:var(--ink)}

/* section rail */
.rail{position:fixed;right:var(--g);top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:18px;padding-right:14px}
.rail:before{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line)}
.rail-fill{position:absolute;right:0;top:0;width:1px;height:calc(var(--p,0)*100%);background:var(--cream)}
.rail a{padding:3px 8px;border-radius:99px;background:var(--glass);display:flex;gap:10px;align-items:baseline;justify-content:flex-end;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.rail a span{max-width:0;overflow:hidden;opacity:0;transition:max-width .5s var(--ease),opacity .3s;white-space:nowrap}
.rail a b{font-weight:500}
.rail a.on,.rail a:hover{color:var(--cream)}.rail a.on span,.rail a:hover span{max-width:120px;opacity:1}

/* sections */
main{position:relative;z-index:5}
.sec{min-height:100svh;padding:clamp(92px,15svh,140px) var(--g) clamp(40px,8svh,80px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4svh,36px);position:relative}
.h{display:grid;text-transform:uppercase;line-height:.9;letter-spacing:-.045em;font-size:clamp(28px,min(7.5vw,14.5svh),150px);transform:skewY(calc(var(--vel,0)*1deg));transition:transform .2s linear}
.l{display:block;white-space:nowrap}
.thin{font-weight:250}.fat{font-weight:800}
.hero .fat{color:transparent;text-shadow:none;-webkit-text-stroke:0;background:linear-gradient(90deg,var(--red),var(--coral) 50%,var(--red));-webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
/* split letters */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;transition:transform .9s var(--ease),opacity .5s;transition-delay:calc(var(--n)*22ms)}
.l{overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.in .c{transform:none;opacity:1}
.in-up{opacity:0;transform:translateY(18px);transition:opacity .8s .2s,transform 1s .2s var(--ease)}
.in.in-up,.in .in-up{opacity:1;transform:none}
.scroll{display:flex;align-items:center;gap:12px}
.scroll i{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scroll i:after{content:'';position:absolute;inset:0 0 60%;background:var(--cream);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

/* approach: words clear up as you read */
.say{font-weight:250;font-size:clamp(28px,min(6vw,11svh),112px);line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.say .w{opacity:.16;filter:blur(6px);transition:opacity .5s,filter .6s;margin-right:.24em}
.say .w.on{opacity:1;filter:none}
.say .w.k{font-weight:800;color:var(--red)}

/* land: two belts of giant letters driven by the scroll */
.land{overflow:hidden;padding-inline:0}
.land .mono{padding-inline:var(--g)}
.belt{display:grid;gap:.14em;font-size:clamp(54px,13vw,230px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.belt-row{white-space:nowrap;will-change:transform}
.r1{font-weight:800;transform:translate3d(var(--x,0px),0,0)}
.r2{font-weight:250;color:transparent;-webkit-text-stroke:1.5px var(--cream);transform:translate3d(var(--x,0px),0,0)}
.coords{align-self:flex-end}

/* contact */
.tel{font-size:clamp(34px,min(10.6vw,17svh),200px);font-variant-numeric:tabular-nums}
.tel .fat{color:var(--red);transition:color .3s}.tel:hover .fat{color:var(--coral)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px}
.card{box-shadow:0 14px 40px rgba(180,80,50,.12);display:grid;gap:8px;align-content:start;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);min-width:0;transition:border-color .3s,transform .5s var(--ease)}
a.card:hover{border-color:var(--cream);transform:translateY(-3px)}
.big{font-weight:600;font-size:clamp(15px,1.7vw,24px);letter-spacing:-.03em;overflow-wrap:anywhere}
.org{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}.org img{height:1.05em;width:auto}

@media(max-width:760px){
  .lnk{display:none}.call{padding:9px 13px;font-size:11px}
  .rail{right:8px;gap:14px;padding-right:10px}.rail a span{display:none}
  .sec{padding-right:calc(var(--g) + 34px)}
  .land{padding-right:0}
  .h{font-size:clamp(20px,7.5vw,60px)}
  .tel{font-size:clamp(30px,11vw,72px)}
  .say{font-size:clamp(26px,8.6vw,48px)}
  .cards{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .c,.in-up,.say .w{transition:none;transform:none;opacity:1;filter:none}
  .hero .fat,.scroll i:after{animation:none}
  .h{transform:none}
}

/* ---------- sky: stars overlay, tooltip, time chip, today line ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star-tip{position:fixed;left:0;top:0;z-index:40;pointer-events:none;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#eef2ff;padding:5px 9px;border-radius:99px;background:rgba(12,20,48,.6);opacity:0;transition:opacity .25s;white-space:nowrap}
.star-tip.on{opacity:1}
.skytime{position:fixed;left:var(--g);bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:25;display:flex;gap:2px;padding:4px;border-radius:99px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.skytime button{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:none;border:0;padding:7px 10px;border-radius:99px;cursor:pointer;transition:color .3s,background .3s}
.skytime button:hover{color:var(--cream)}
.skytime button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.skytime button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.today{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;max-width:62ch;text-transform:none;letter-spacing:.04em;font-size:12px;color:var(--cream);padding:8px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:fit-content}
.today span{text-transform:uppercase;letter-spacing:.16em;color:var(--dim);font-size:10px}
.today b{font-weight:500}
body.night .call{color:var(--cream)}

/* ---------- krai: a riddle ---------- */
.krai{position:absolute;inset:8% 4% 8% 30%;pointer-events:none;z-index:-1}
.krai svg{width:100%;height:100%;overflow:visible}
.krai-line{fill:none;stroke:var(--cream);stroke-width:2;opacity:.09;vector-effect:non-scaling-stroke}
.krai-dot{animation:blip 2.6s ease-in-out forwards;opacity:0}
.krai-dot circle{fill:var(--red)}
.krai-dot .ring{fill:none;stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke;transform-origin:center;transform-box:fill-box;animation:ring 2.6s ease-out forwards}
@keyframes blip{0%{opacity:0}20%,55%{opacity:.75}100%{opacity:0}}
@keyframes ring{from{transform:scale(.3);opacity:.9}to{transform:scale(2.4);opacity:0}}
.riddle{align-self:flex-end;padding-inline:var(--g);text-transform:none;letter-spacing:.04em;font-size:13px;color:var(--cream)}
.riddle a{color:var(--red);border-bottom:1px solid currentColor}

/* ---------- rules ---------- */
.draft{color:var(--red)}
.rule-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,2svh,18px);max-width:980px}
.rule-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.rule-list b{font:500 12px var(--mono);letter-spacing:.14em;color:var(--red)}
.rule-list span{font-weight:300;font-size:clamp(18px,2.2vw,32px);line-height:1.15;letter-spacing:-.03em}
.rule-list i{font-style:normal;color:var(--dim);font-size:.72em;display:block;margin-top:6px}

/* ---------- first to know + partners ---------- */
.sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:720px;padding:10px;border-radius:22px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sub input[type=text]{font:500 16px var(--display);color:var(--cream);background:transparent;border:0;padding:12px 14px;min-width:0}
.sub input[type=text]::placeholder{color:var(--dim)}
.sub input[type=text]:focus{outline:none}
.sub:focus-within{border-color:color-mix(in srgb,var(--cream) 45%,transparent)}
.sub button{font:600 13px var(--display);border:0;border-radius:14px;padding:12px 18px;background:var(--red);color:#fff;cursor:pointer;transition:transform .3s var(--ease)}
.sub button:hover{transform:translateY(-2px)}
.sub button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:99px;border:1px solid var(--line);color:var(--dim);transition:all .25s}
.chips input:checked+span{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.chips input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.sub-msg{grid-column:1 / -1;text-transform:none;letter-spacing:.02em;font-size:12px;color:var(--cream);padding:0 6px;min-height:1em}
.sub.done input[type=text],.sub.done button,.sub.done .chips{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.partners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1100px}
.partners .card{box-shadow:none}
h2.h{margin:0;font-size:clamp(28px,min(6vw,11svh),110px)}

@media(max-width:760px){
  .skytime button{padding:6px 7px;font-size:9px;letter-spacing:.06em}
  .today{font-size:11px}
  .krai{inset:18% 0 22% 10%}
  .partners{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sub{grid-template-columns:minmax(0,1fr)}
  .rule-list span{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.krai-dot,.krai-dot .ring{animation-duration:4s}}

/* phone spacing */
@media(max-width:760px){
  .land{padding-right:0}
  .riddle{align-self:flex-start;max-width:30ch}
  .rail{display:none}
  .sec{padding-right:var(--g);padding-bottom:calc(clamp(40px,8svh,80px) + 64px)}
  .krai{inset:30% 4% 18% 4%}
}

/* ---------- lead forms: consent, honeypot, states ---------- */
.agree{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;font:400 12px/1.45 var(--display);color:var(--dim);padding:2px 6px;cursor:pointer;letter-spacing:0}
.agree input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid var(--dim);background:transparent;display:grid;place-content:center;cursor:pointer;transition:background .2s,border-color .2s}
.agree input:checked{background:var(--red);border-color:var(--red)}
.agree input:checked::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translate(0,-1px) rotate(-45deg)}
.agree input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.agree input[aria-invalid]{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}
.agree a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--cream) 35%,transparent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-msg[data-state="error"]{color:var(--red)}
.lead [aria-invalid]:not([type=checkbox]){outline:2px solid var(--red);outline-offset:2px;border-radius:12px}
.sub button:disabled{opacity:.6;cursor:progress}
.sub.done .agree{display:none}
.partners button.card{font:inherit;color:inherit;text-align:left;cursor:pointer}
.partners button.card:hover{border-color:var(--cream);transform:translateY(-3px)}
.partners button.card:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- partner dialog ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--cream);max-width:min(560px,calc(100vw - 24px));width:100%}
.modal::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.pform{position:relative;display:grid;gap:12px;padding:26px 24px 22px;border-radius:24px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 30px 80px rgba(20,30,60,.25)}
.pform h3{margin:0 0 4px;font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em}
.pform .x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--cream);font-size:22px;line-height:1;cursor:pointer}
.fld{display:grid;gap:6px}
.fld input,.fld select,.fld textarea{font:500 15px var(--display);color:var(--cream);background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%;resize:vertical}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cream);box-shadow:0 0 0 3px color-mix(in srgb,var(--cream) 12%,transparent)}
.pform button[type=submit]{font:600 14px var(--display);border:0;border-radius:14px;padding:13px 18px;background:var(--red);color:#fff;cursor:pointer}
.pform button[type=submit]:disabled{opacity:.6}
.pform .agree{padding:2px 0}
.pform.done .fld,.pform.done .agree,.pform.done button[type=submit]{display:none}
.pform .sub-msg{text-transform:none;letter-spacing:.02em;font-size:12px}

/* ---------- legal footer ---------- */
.legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(24px,6svh,60px);padding-top:16px;border-top:1px solid var(--line);font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--dim)}
.legal a,.legal button{color:var(--dim);background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.legal a:hover,.legal button:hover{color:var(--cream)}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;z-index:60;right:var(--g);bottom:max(14px,env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 2*var(--g)));display:grid;gap:12px;padding:16px 16px 14px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 96%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 20px 60px rgba(20,30,60,.18);color:var(--cream);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease)}
.cookie.on{opacity:1;transform:none}
.cookie p{margin:0;font:400 12.5px/1.5 var(--display);letter-spacing:0}
.cookie a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap}
.cookie-btns button{font:600 12px var(--display);border-radius:99px;padding:10px 16px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--cream)}
.cookie-btns .ok{background:var(--red);border-color:var(--red);color:#fff}
.cookie-btns button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:760px){.cookie{left:var(--g);right:var(--g);width:auto;bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 52px)}}
@media(prefers-reduced-motion:reduce){.cookie,.modal[open]{transition:none;animation:none}}

/* company requisites in the contact card */
.card .addr{font-size:15px;line-height:1.35;color:var(--cream)}
.card .addr .nw{white-space:nowrap}
.card .req{opacity:.7;letter-spacing:.02em}