@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(f/InstrumentSerif-i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(f/InstrumentSerif-i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(f/InstrumentSerif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(f/InstrumentSerif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(f/Manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(f/Manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(f/Manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(f/Manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 600;font-display:swap;src:url(f/Unbounded-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 600;font-display:swap;src:url(f/Unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 600;font-display:swap;src:url(f/Unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 600;font-display:swap;src:url(f/Unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@property --acc{syntax:'<color>';inherits:true;initial-value:#ffd9a0}
:root{
  --acc:#ffb35c;
  --bg:#07070a; --ink:#f2efe9; --mute:rgba(242,239,233,.62); --line:rgba(242,239,233,.12);
  --glow:#ffd9a0; --glow2:#ffb35c;
  --h:'Unbounded',system-ui,sans-serif; --s:'Instrument Serif',Georgia,serif; --t:'Manrope',system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px);
}
html{transition:--acc 1.2s cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--t);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--glow);color:#111}
html{scrollbar-color:rgba(242,239,233,.25) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:rgba(242,239,233,.22);border-radius:8px}
input,textarea{caret-color:var(--glow)}
::placeholder{color:rgba(242,239,233,.5)}
:focus-visible{outline:1.5px solid var(--glow);outline-offset:4px;border-radius:6px}
button,.tg{-webkit-tap-highlight-color:transparent}
button:active,.tg:active{transform:scale(.97)}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.ld-dot{width:8px;height:8px;border-radius:50%;background:var(--glow)}
.ld-bar{position:absolute;top:calc(50% + 22px);left:50%;width:120px;margin-left:-60px;height:1px;background:var(--line)}
.ld-bar b{position:absolute;inset:0;background:var(--glow);transform-origin:left;transform:scaleX(0);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ld-num{position:absolute;top:calc(50% + 40px);font:600 11px/1 var(--h);letter-spacing:.3em;color:var(--mute)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.75}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);mix-blend-mode:normal}
nav::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,7,10,.75),rgba(7,7,10,0));pointer-events:none;z-index:-1}
.logo{font:800 15px/1 var(--h);letter-spacing:.08em;display:flex;align-items:baseline;gap:1px}
.logo i{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--glow);margin-left:2px}
.links{display:flex;gap:28px;font-size:13px;color:var(--mute)}
@media (hover:hover){.links a:hover{color:var(--ink)}}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:3px}
.lang button{background:none;border:0;cursor:pointer;font:600 11px/1 var(--h);letter-spacing:.06em;padding:8px 9px;border-radius:99px;color:var(--mute)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#111}
@media (max-width:760px){.links{display:none}}

/* ---------- menu: full-screen columns, each one opens its picture its own way ---------- */
nav{z-index:45}
.nav-r{display:flex;align-items:center;gap:clamp(16px,3vw,36px)}
.menu-btn{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;font:400 12px/1 var(--h);letter-spacing:.2em;text-transform:uppercase;padding:12px 0}
.menu-btn i{position:relative;width:26px;height:9px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.16,1,.3,1),left .5s cubic-bezier(.16,1,.3,1)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0;left:8px}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-3.75px) rotate(-45deg);left:0}
@media (max-width:560px){.menu-btn span{display:none}.lang button{padding:7px 6px}}
@media (max-width:360px){.lang{gap:0;padding:2px}.lang button{padding:7px 4px}.nav-r{gap:10px}.logo{font-size:14px}}
.menu{position:fixed;inset:0;z-index:40;visibility:hidden;pointer-events:none}
.menu.open{visibility:visible;pointer-events:auto}
.menu .wipe{position:absolute;inset:0;background:var(--acc);transform:scaleY(0);z-index:2;pointer-events:none}
.menu.open .wipe{animation:wipe 1s cubic-bezier(.77,0,.18,1) both}
@keyframes wipe{0%{transform:scaleY(0);transform-origin:top}46%{transform:scaleY(1);transform-origin:top}54%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cols{position:absolute;inset:0;display:flex;background:#08080b;opacity:0;transition:opacity .35s}
.menu.open .cols{opacity:1;transition:opacity 0s .45s}
.col{flex:1 1 0;min-width:0;position:relative;overflow:hidden;border-left:1px solid var(--line);padding:clamp(90px,14vh,140px) clamp(16px,2vw,32px) clamp(28px,5vh,48px);display:flex;flex-direction:column;transition:flex-grow .9s cubic-bezier(.16,1,.3,1)}
.col:first-child{border-left:0}
.col .ci{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.col .ci::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,11,.75),rgba(8,8,11,.1) 40%,rgba(8,8,11,.88))}
.col[data-fx="zoom"] .ci{transform:scale(1.35)}
.col[data-fx="slide"] .ci{transform:translateX(-18%)}
.col[data-fx="tilt"] .ci{transform:rotate(-6deg) scale(1.3)}
.col[data-fx="rise"] .ci{clip-path:inset(100% 0 0 0);opacity:1}
.col[data-fx="iris"] .ci{clip-path:circle(0% at 50% 55%);opacity:1}
.cn{position:relative;font:300 12px/1 var(--h);letter-spacing:.2em;color:var(--mute);transition:color .5s}
.col{container-type:inline-size}.ct{position:relative;margin-top:auto;font:200 clamp(22px,7.4cqi,54px)/1.02 var(--h);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:normal;hyphens:manual;animation:cth .7s cubic-bezier(.16,1,.3,1) both}
.col:not(.hot) .ct{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:min(2.3vw,4.6vh);animation:ctv .7s cubic-bezier(.16,1,.3,1) both}
@keyframes cth{from{opacity:0;translate:0 18px}}@keyframes ctv{from{opacity:0;translate:0 -18px}}
.cb{position:relative;display:block;max-height:0;overflow:hidden;transition:max-height .9s cubic-bezier(.16,1,.3,1)}
.cb p{margin-top:16px;max-width:34ch;color:var(--mute);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.cb em{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:italic 400 22px/1 var(--s);color:var(--acc);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.cb em::after{content:"";width:34px;height:1px;background:currentColor;transition:width .6s cubic-bezier(.16,1,.3,1)}
.col.hot{flex-grow:2.8}
.col.hot .ci{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.col.hot[data-fx="iris"] .ci{clip-path:circle(80% at 50% 55%)}
.col.hot .cb{max-height:240px}
.col.hot .cb p,.col.hot .cb em{opacity:1;transform:none;transition:opacity .8s .25s cubic-bezier(.16,1,.3,1),transform .8s .25s cubic-bezier(.16,1,.3,1)}
.col.hot .cb em{transition-delay:.35s}
.col.hot .cb em::after{width:60px}
.col.hot .cn{color:var(--acc)}
.menu.open .col{animation:colin 1s cubic-bezier(.16,1,.3,1) both}
@keyframes colin{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@media (max-width:760px){.cols{flex-direction:column;padding-top:68px}.col{border-left:0;border-top:1px solid var(--line);padding:12px var(--pad);justify-content:center}.ct,.col:not(.hot) .ct{margin-top:4px;font-size:clamp(22px,6.5vw,32px);writing-mode:horizontal-tb;transform:none}.col.hot{flex-grow:3.2}.col.hot .cb{max-height:150px}.cb p{margin-top:6px;font-size:14px}.cb em{margin-top:8px;font-size:18px}}

/* ---------- live demos ---------- */
.demos{display:grid;grid-template-columns:1.05fr 1.5fr .8fr;gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,7vh,80px);align-items:stretch}
.demo{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0c0c10;min-height:480px;display:flex;flex-direction:column}
.demo h3{font:300 clamp(18px,1.6vw,24px)/1.15 var(--h);letter-spacing:-.01em}
.demo{padding-bottom:8px}.dcap{padding:22px 22px 0}
.dcap p{color:var(--mute);font-size:14px;margin-top:6px}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.msg.in{opacity:1;transform:none}
.msg.u{align-self:flex-end;background:#26262d;border-bottom-right-radius:6px}
.msg.b{align-self:flex-start;background:color-mix(in srgb,var(--acc) 14%,#121216);border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);border-bottom-left-radius:6px}
.msg.typing{display:flex;gap:4px;padding:14px 16px}
.msg.typing i{width:5px;height:5px;border-radius:50%;background:var(--mute);animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.flow{flex:1;position:relative;min-height:320px}
.flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow path{fill:none;stroke:rgba(242,239,233,.16);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flow .pulse{fill:var(--acc)}
.node{position:absolute;transform:translate(-50%,-50%);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#111116;font-size:13px;white-space:nowrap;color:var(--mute);transition:border-color .4s,box-shadow .6s,color .4s}
.node b{display:block;font:400 11px/1 var(--h);letter-spacing:.16em;color:rgba(242,239,233,.4);margin-bottom:5px}
.node.lit{border-color:var(--acc);color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 12%,transparent)}
.tally{position:absolute;left:22px;bottom:18px;font:200 clamp(34px,3.6vw,56px)/1 var(--h);letter-spacing:-.04em}
.tally small{display:block;font:400 12px/1.3 var(--t);color:var(--mute);letter-spacing:0;margin-top:6px}
.short{flex:1;position:relative;margin:16px;border-radius:16px;overflow:hidden;background:#000;min-height:300px}
.short video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short span{position:absolute;left:14px;right:14px;bottom:16px;font:italic 400 24px/1.1 var(--s);text-shadow:0 2px 18px rgba(0,0,0,.7)}
@media (max-width:1000px){.demos{grid-template-columns:1fr 1fr}.demo.wide{grid-column:1/-1;order:-1}}
@media (max-width:640px){.demos{grid-template-columns:1fr}.demo{min-height:420px}.flow{min-height:430px}.node{font-size:12px;padding:8px 10px}.node:nth-of-type(1){left:30%!important;top:12%!important}.node:nth-of-type(2){left:50%!important;top:38%!important}.node:nth-of-type(3){left:72%!important;top:62%!important}.node:nth-of-type(4){left:28%!important;top:62%!important}}

/* ---------- cinema ---------- */
#cinema{position:relative;height:640vh}
/* a hard flick must not fly past a chapter: one stop per chapter, free scrolling everywhere else */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.reel{position:absolute;inset:0} /* the film stays put: moving the full-size video layer after the mouse dropped frames */
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.1s cubic-bezier(.45,0,.2,1),transform 2.4s cubic-bezier(.16,1,.3,1)}
.clip.on{transform:none}
.clip.on{opacity:1}
.cv{transition:none;transform:none}
.veil{position:absolute;inset:0;background:#05060a;opacity:0;pointer-events:none}
#dust{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(7,7,10,.75) 100%),linear-gradient(transparent 60%,rgba(7,7,10,.85))}
.scene{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(56px,11vh,120px);pointer-events:none}
.scene .big{clip-path:inset(0 0 100% 0);transform:translateY(.25em);transition:clip-path .7s cubic-bezier(.7,0,.84,0),transform .7s cubic-bezier(.7,0,.84,0)}
.scene.on .big{clip-path:inset(-10% -5% -15% -5%);transform:none;transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.scene .sn{position:fixed;right:var(--pad);top:clamp(92px,13vh,130px);font:200 clamp(64px,11vw,190px)/.8 var(--h);letter-spacing:-.05em;color:rgba(242,239,233,.16);opacity:0;transform:translateY(30px);transition:opacity .5s,transform .5s}
.scene.on .sn{opacity:1;transform:none;transition:opacity 1.4s .15s cubic-bezier(.16,1,.3,1),transform 1.4s .15s cubic-bezier(.16,1,.3,1)}
.scene .big::after{content:"";display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--acc);margin-left:.05em}
.scene p{opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.scene.on p{opacity:1;transform:none;transition:opacity 1s .35s cubic-bezier(.16,1,.3,1),transform 1s .35s cubic-bezier(.16,1,.3,1)}
.scene .num{font:600 11px/1 var(--h);letter-spacing:.32em;color:var(--glow);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.scene .num::after{content:"";height:1px;width:56px;background:currentColor;opacity:.5}
.big{font:200 9vw/0.92 var(--h);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
.scene p{max-width:520px;margin-top:18px;font-size:clamp(15px,1.35vw,19px);color:var(--mute)}
#hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(56px,11vh,120px);pointer-events:none}
#hero .big{font-size:13vw;overflow:hidden;padding-bottom:.04em}
#hero .big span{display:inline-block;transform:translateY(105%);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.ready #hero .big span{transform:none}
.meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(24px,4vh,44px);padding-top:16px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
.meta span{white-space:nowrap}
#hero h2{font:italic 400 clamp(24px,3vw,44px)/1.1 var(--s);letter-spacing:-.01em;margin-top:18px;max-width:900px}
#hero p{margin-top:12px;color:var(--mute);max-width:560px}
.scroll-hint{position:absolute;left:50%;bottom:clamp(14px,2.6vh,26px);transform:translateX(-50%);font:600 11px/1 var(--h);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;white-space:nowrap;transition:opacity .4s;pointer-events:none}
.scroll-hint::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{0%,100%{translate:0 -3px;opacity:.5}50%{translate:0 4px;opacity:1}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.progress{position:absolute;left:var(--pad);right:var(--pad);top:70px;display:flex;gap:6px;opacity:0;transition:opacity .4s}
.progress span{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.progress span b{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){.scene{bottom:76px}.scene .sn{top:96px}}

/* ---------- sections ---------- */
section.block{padding:clamp(80px,14vh,160px) var(--pad);position:relative}
.kicker{font:600 11px/1 var(--h);letter-spacing:.32em;color:var(--glow);text-transform:uppercase;margin-bottom:22px}
.title{font:200 clamp(38px,7vw,110px)/.98 var(--h);letter-spacing:-.02em;text-transform:uppercase;max-width:14ch}
@media (max-width:400px){.title{font-size:clamp(30px,10.4vw,38px)}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line)}
.step{padding:28px 24px 8px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step + .step{padding-left:24px}
.step .n{font:600 12px/1 var(--h);color:var(--mute);letter-spacing:.2em}
.step h3{font:300 clamp(18px,1.7vw,24px)/1.2 var(--h);margin:28px 0 10px}
.step p{color:var(--mute);font-size:15px}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--glow);opacity:0;transform:scale(.95);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.step + .step::before{left:24px}
.step.on::before{opacity:1;transform:none}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(3){padding-left:0}.step:nth-child(3)::before{left:0}.step:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step,.step + .step{border-right:0;padding-left:0;border-top:1px solid var(--line)}.step + .step::before{left:0}}

.ledger{margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 40px;gap:clamp(16px,4vw,64px);align-items:baseline;padding:clamp(26px,4vh,44px) 0;border-bottom:1px solid var(--line)}
.row:nth-child(even){padding-left:clamp(0px,14vw,240px)}
.row h3{font:300 clamp(24px,3.4vw,52px)/1.05 var(--h);letter-spacing:-.02em}
.row p{color:var(--mute);font-size:clamp(15px,1.2vw,18px);max-width:38ch}
.row svg{width:28px;height:28px;stroke:var(--glow);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;justify-self:end;align-self:center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.row:hover svg{transform:rotate(-12deg) scale(1.08)}}
@media (max-width:760px){.row,.row:nth-child(even){grid-template-columns:1fr 32px;padding-left:0;gap:10px 16px}.row p{grid-column:1;grid-row:2}.row svg{grid-row:1;grid-column:2}}

#contact{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;overflow:hidden}
#sphere{width:100%;aspect-ratio:1;max-width:620px;display:block;margin:auto}
#contact .big{font-size:clamp(40px,7vw,110px);white-space:normal}
#contact .lead{color:var(--mute);margin:20px 0 34px;max-width:440px;font-size:17px}
.tg{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#111;padding:16px 26px;border-radius:99px;font:600 14px/1 var(--h);transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .3s}
@media (hover:hover) and (pointer:fine){.tg:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}}
.tg svg{width:18px;height:18px;fill:currentColor}
form{margin-top:36px;display:grid;gap:12px;max-width:460px}
form input,form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 2px;outline:0;transition:border-color .3s;font-size:16px}
form input:focus,form textarea:focus{border-color:var(--glow)}
form textarea{resize:none;min-height:84px}
form button{justify-self:start;margin-top:10px;background:none;border:1px solid var(--line);border-radius:99px;padding:14px 26px;font:600 12px/1 var(--h);letter-spacing:.1em;cursor:pointer;transition:border-color .3s,background .3s,transform .16s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){form button:hover{border-color:var(--glow);background:rgba(255,217,160,.06)}}
.agree{display:flex;align-items:flex-start;gap:12px;margin-top:6px;font-size:13px;line-height:1.45;color:var(--mute);cursor:pointer}
.agree input{appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;cursor:pointer;transition:border-color .3s,background .3s}
.agree input::after{content:"";width:8px;height:4px;border:solid #111;border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.agree input:checked{background:var(--glow);border-color:var(--glow)}.agree input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.agree input:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.agree.bad input{border-color:#ff8a7a}
.agree a,footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:text-decoration-color .3s}
@media (hover:hover){.agree a:hover,footer a:hover{text-decoration-color:currentColor}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sent{margin-top:12px;color:var(--glow);font-size:14px;min-height:1.4em}
@media (max-width:900px){#contact{grid-template-columns:1fr}#sphere{max-width:420px;order:-1}}

footer{padding:28px var(--pad) 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}

/* reveal */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .rv.on{opacity:1;transform:none}
.js .title.rv{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.js .title.rv.on{clip-path:inset(-10% -5% -15% -5%)}


html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
.sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.sp .w>span{display:inline-block;transform:translateY(110%);transition:transform .35s cubic-bezier(.7,0,.84,0)}
.on .sp .w>span,.sp.on .w>span,.ready #hero .sp .w>span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + var(--i)*24ms)}
.scene.on p{--d:.3s}
#hero h2{--d:.55s}#hero p{--d:.85s}
.dcap p,.step p,.row p{--d:.15s}
@media (prefers-reduced-motion:reduce){
  .sp .w>span{transform:none!important;transition:none!important}
  .js .rv,.js .title.rv{opacity:1;transform:none;clip-path:none;transition:none}
  #hero .big span{transform:none!important;transition:none!important}
  .scroll-hint::after{animation:none}
  .scene .big,.scene p{transition:none!important}
}
/* finger-size hit areas on the small header controls, invisible: the look stays the same */.lang button,.menu-btn,.logo,.hdemo{position:relative}.lang button::after{content:'';position:absolute;inset:-10px 0}.menu-btn::after{content:'';position:absolute;inset:-4px -10px}.logo::after{content:'';position:absolute;inset:-15px -8px}.hdemo::after{content:'';position:absolute;inset:-15px -6px}
/* one chapter at a time: the outgoing one is gone before the next comes in, so titles never stack */.scene{opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}.scene.on{opacity:1;visibility:visible;transition:opacity .35s .22s,visibility 0s .22s}
/* filled scenes: concrete points under each service + hero actions */.pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;max-width:760px;font-size:clamp(14px,1.15vw,16px);color:var(--ink);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}.scene.on .pts{opacity:1;transform:none;transition:opacity 1s .5s cubic-bezier(.16,1,.3,1),transform 1s .5s cubic-bezier(.16,1,.3,1)}.pts li{display:flex;align-items:center;gap:10px}.pts li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}.hcta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px;pointer-events:auto}.hdemo{color:var(--ink);font:600 14px/1 var(--h);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}.hdemo:active{transform:scale(.97)}@media (prefers-reduced-motion:reduce){.pts{opacity:1;transform:none;transition:none}}@media (max-width:760px){.pts{flex-direction:column;gap:8px;margin-top:16px}}/* ===== live examples next to each chapter: the visitor sees the thing while reading about it ===== */
@media (min-width:761px){.scene{right:calc(var(--pad) + min(400px,32vw) + 3vw)}}
.ex{position:fixed;right:var(--pad);top:50%;width:min(400px,32vw);transform:translateY(-42%) translateX(24px);opacity:0;transition:opacity .3s,transform .3s;font:500 14px/1.45 var(--t);color:var(--ink);pointer-events:none;z-index:2}
.scene.on .ex{opacity:1;transform:translateY(-42%);transition:opacity .9s .45s cubic-bezier(.16,1,.3,1),transform .9s .45s cubic-bezier(.16,1,.3,1)}
.ex .cap{font:600 10px/1 var(--h);letter-spacing:.28em;text-transform:uppercase;color:var(--glow);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.ex .cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);animation:livep 1.6s infinite}
@keyframes livep{50%{opacity:.25}}
.ex .card{background:rgba(10,10,14,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
/* 01 site */
.br-bar{display:flex;align-items:center;gap:6px;margin:-4px 0 12px}
.br-bar i{width:8px;height:8px;border-radius:50%;background:rgba(242,239,233,.2)}
.br-bar span{flex:1;margin-left:8px;padding:5px 10px;border-radius:8px;background:rgba(242,239,233,.07);font-size:11px;color:var(--mute)}
.br-page{border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#1b1712,#0d0c10);padding:18px 16px;min-height:190px;position:relative}
.br-page .bl{height:8px;border-radius:4px;background:rgba(242,239,233,.12);margin-top:8px;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.br-page h4{margin:0;font:600 19px/1.15 var(--h);letter-spacing:-.01em;min-height:44px;opacity:0;transition:opacity .35s}
.br-page .btn{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:99px;background:var(--acc);color:#111;font-size:12px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.ex.go .br-page h4{opacity:1}.ex.go .br-page .bl{transform:none}.ex.go .br-page .btn{opacity:1;transform:none}
.br-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.langs{display:flex;gap:4px}.langs b{font-size:10px;padding:4px 6px;border-radius:6px;color:var(--mute);transition:background .3s,color .3s}.langs b.on{background:var(--ink);color:#111}
.speed{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mute)}
.speed svg{width:34px;height:34px;transform:rotate(-90deg)}.speed circle{fill:none;stroke-width:4}.speed .tr{stroke:rgba(242,239,233,.12)}.speed .vl{stroke:#5cd68a;stroke-dasharray:88;stroke-dashoffset:88}
.speed b{font-size:15px;color:#5cd68a;font-variant-numeric:tabular-nums}
.toast{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:12px;background:rgba(242,239,233,.95);color:#111;font-size:12px;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.toast.on{opacity:1;transform:none}.toast i{width:26px;height:26px;border-radius:8px;background:#2aa3e0;flex:none}.toast small{display:block;color:#555}
/* 02 chat */
.ch-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ch-head i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--glow),var(--acc))}
.ch-head small{display:block;color:#5cd68a;font-size:11px}
.msgs{display:flex;flex-direction:column;gap:8px;min-height:250px}
.msg{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.msg.on{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:var(--acc);color:#111;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:rgba(242,239,233,.09);border-bottom-left-radius:4px}
.msg time{display:block;font-size:10px;opacity:.55;margin-top:2px;text-align:right}
.typing{display:none;width:max-content;gap:4px;margin-top:8px;padding:11px 12px;border-radius:14px;background:rgba(242,239,233,.09)}
.typing.on{display:flex}.typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{transform:translateY(-4px);opacity:.4}}
/* 03 content */
.creel{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.ph{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111;border:1px solid var(--line)}
.ph video{width:100%;height:100%;object-fit:cover;display:block}
.ph .lk{position:absolute;right:8px;bottom:44px;text-align:center;font-size:11px;font-weight:700;text-shadow:0 1px 6px #000}
.ph .lk::before{content:"\2665";display:block;font-size:20px;color:#ff4d6d}
.ph .sub{position:absolute;left:8px;right:36px;bottom:10px;font-size:11px;font-weight:700;line-height:1.25;text-shadow:0 1px 6px #000}
.plan{display:flex;flex-direction:column;gap:7px;font-size:12px}
.plan h5{margin:0 0 4px;font:600 11px var(--h);letter-spacing:.06em;color:var(--mute)}
.plan div{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(242,239,233,.06);opacity:.35;transition:opacity .4s}
.plan div.on{opacity:1}.plan div b{color:#5cd68a;opacity:0;transition:opacity .3s}.plan div.on b{opacity:1}
/* 04 automation */
.nd{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);opacity:.35;transition:opacity .45s,border-color .45s,background .45s}
.nd.on{opacity:1;border-color:var(--acc);background:rgba(255,179,92,.07)}
.nd b{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(242,239,233,.08);font-size:11px;flex:none;transition:background .45s,color .45s}
.nd.on b{background:var(--acc);color:#111}
.nd small{display:block;color:var(--mute);font-size:11px}
.ln{height:14px;width:2px;margin-left:25px;background:var(--line);position:relative;overflow:hidden}
.ln::after{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(-100%);transition:transform .35s}
.ln.on::after{transform:none}
.tl{display:flex;align-items:baseline;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.tl b{font:600 26px/1 var(--h);color:#5cd68a;font-variant-numeric:tabular-nums}.tl small{color:var(--mute);font-size:12px}
/* 05: what else we can do, in plain words */
#more .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:clamp(28px,5vh,56px)}
#more .mi{background:var(--bg);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;min-height:190px}
#more .mi b{font:600 11px/1 var(--h);letter-spacing:.2em;color:var(--glow)}
#more .mi h3{margin:0;font:600 clamp(17px,1.5vw,22px)/1.2 var(--h);letter-spacing:-.01em}
#more .mi p{margin:0;color:var(--mute);font-size:15px;line-height:1.5}
#more .mi.yours{background:rgba(255,179,92,.08)}
#more .mi.yours a{margin-top:auto;align-self:flex-start;padding:12px 20px;border-radius:99px;background:var(--ink);color:#111;font-weight:700;text-decoration:none;font-size:14px}
#work .wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,5vh,56px)}
#work .wk{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:12px 12px 20px;background:var(--bg);transition:border-color .3s,transform .6s cubic-bezier(.16,1,.3,1)}
#work a.wk:hover,#work a.wk:focus-visible{border-color:rgba(255,179,92,.55);transform:translateY(-4px)}
#work .wimg{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#111}
#work .wimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
#work a.wk:hover .wimg img{transform:scale(1.04)}
#work .wt{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 8px 0}
#work .wt b{font:600 11px/1 var(--h);letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
#work .wt i{font-style:normal;font-size:13px;color:var(--mute);text-align:right}
#work .wk h3{margin:0 8px;font:600 clamp(17px,1.4vw,21px)/1.2 var(--h);letter-spacing:-.01em}
#work .wk p{margin:0 8px;color:var(--mute);font-size:15px;line-height:1.5}
#work .wk em{margin:auto 8px 0;padding-top:6px;font-style:normal;font-weight:700;font-size:14px}
#work .prem{background:rgba(255,179,92,.08)}
#work .prem em{color:var(--glow)}
#work .wsub.w1{margin-top:clamp(36px,6vh,64px)}
#work .wsub{scroll-margin-top:96px;margin:clamp(56px,9vh,110px) 0 0;font:600 clamp(26px,3vw,40px)/1.1 var(--h);letter-spacing:-.02em}
#work .wnote{margin:18px 0 0;color:var(--mute);font-size:13px}
@media (max-width:1100px){#work .wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){#work .wgrid{grid-template-columns:1fr}}
#more .lead5,#work .lead5{max-width:620px;color:var(--mute);font-size:clamp(15px,1.35vw,19px);margin:16px 0 0}
@media (max-width:1000px){#more .mgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .ex{left:var(--pad);right:var(--pad);width:auto;top:clamp(150px,21vh,180px);transform:translateY(16px);font-size:12px}
  .scene.on .ex{transform:none}
  .ex .card{padding:12px}.msgs{min-height:0}.msgs .msg:nth-last-child(n+4){display:none}
  .br-page{min-height:118px;padding:12px}.br-page h4{font-size:15px;min-height:34px}
  .creel{grid-template-columns:92px 1fr}.plan div:nth-child(n+5){display:none}
  .nd{padding:7px 10px}.ln{height:8px}.tl{margin-top:8px;padding-top:8px}.tl b{font-size:20px}
  #more .mgrid{grid-template-columns:1fr}#more .mi{min-height:0}
}
@media (prefers-reduced-motion:reduce){.ex,.scene.on .ex{transition:none}}
/* past the film: the fixed chapter number and example must not float over the next sections */
.xpast .scene .ex,.xpast .scene .sn{opacity:0!important;visibility:hidden!important;transition:opacity .2s!important}
@media (min-width:761px){.br-page{min-height:236px}}
@media (max-width:760px){
  .msgs .msg:nth-last-child(n+3){display:none}.msg{padding:7px 10px;font-size:12px}.msg time{display:none}
  .ch-head{padding-bottom:8px;margin-bottom:8px}.ch-head i{width:24px;height:24px}
  .typing{margin-top:6px;padding:8px 10px}
  .ex .cap{margin-bottom:8px}
  .ph{max-height:150px}.ph .sub{display:none}.ph .lk{bottom:8px}.creel{grid-template-columns:84px 1fr}
}
@media (max-width:760px){
  .ex{transform-origin:50% 0;transform:translateY(16px) scale(var(--xs,1))}.scene.on .ex{transform:scale(var(--xs,1))}.ex.xh{display:none}
  /* first screen: the thin white name sat on the white lamps; shade under the text, a bit more weight, drop the duplicate meta line */
  #hero{background:linear-gradient(to bottom,rgba(5,6,10,0) 12%,rgba(5,6,10,.62) 34%,rgba(5,6,10,.82) 70%,rgba(5,6,10,.55))}
  #hero .big{font-weight:400;text-shadow:0 2px 24px rgba(0,0,0,.85)}#hero h2,#hero p{text-shadow:0 1px 14px rgba(0,0,0,.9)}
  #hero .meta{display:none}
}
/* readability: chapter text sits on a moving film and stars; give it its own dark floor, more weight and a soft shadow */
:root{--mute:rgba(242,239,233,.76)}
.scene{isolation:isolate}
.scene::before{content:"";position:absolute;z-index:-1;left:calc(var(--pad)*-1);right:-40vw;top:-18vh;bottom:-140px;background:linear-gradient(to top,rgba(5,6,10,.9) 0,rgba(5,6,10,.72) 55%,rgba(5,6,10,0));pointer-events:none}
.scene .big{font-weight:300;text-shadow:0 2px 28px rgba(0,0,0,.8)}
.scene p,.pts{text-shadow:0 1px 12px rgba(0,0,0,.9)}
.scene p{color:rgba(242,239,233,.86)}
.scroll-hint{text-shadow:0 1px 10px rgba(0,0,0,.9);z-index:3}
@media (max-width:760px){.scene .big{font-weight:400}.scene::before{top:-12vh}}
nav:has(>.nav-r){background:linear-gradient(to bottom,rgba(5,6,10,.88) 0,rgba(5,6,10,.6) 60%,rgba(5,6,10,0))}
@media (min-width:761px){
  #hero{background:linear-gradient(to bottom,rgba(5,6,10,0) 30%,rgba(5,6,10,.45) 55%,rgba(5,6,10,.78) 85%,rgba(5,6,10,.6))}
  #hero .big{font-weight:300;text-shadow:0 2px 30px rgba(0,0,0,.8)}
  #hero h2,#hero p,#hero .meta{text-shadow:0 1px 14px rgba(0,0,0,.9)}
  #hero p{color:rgba(242,239,233,.86)}
}
.filmlock,.filmlock body{touch-action:pan-x pinch-zoom;overscroll-behavior-y:none}
#next .ngrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(28px,5vh,56px)}
#next .nt{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:clamp(220px,30vh,300px);padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .3s}
#next .nt.big2{min-height:clamp(340px,56vh,560px)}
#next .nt::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
#next .nt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,10,.1) 0%,rgba(7,7,10,.55) 45%,rgba(7,7,10,.92) 100%)}
#next .nt:hover,#next .nt:focus-visible{border-color:rgba(255,179,92,.55)}
#next .nt:hover::before,#next .nt:focus-visible::before{transform:scale(1.05)}
#next .nn{font:600 11px/1 var(--h);letter-spacing:.2em;color:var(--glow)}
#next .nt h3{margin:0;font:600 clamp(22px,2vw,30px)/1.15 var(--h);letter-spacing:-.01em}
#next .nt p{margin:0;color:rgba(242,239,233,.78);font-size:15px;line-height:1.5;max-width:38ch}
#next .nt em{font-style:normal;font-weight:700;font-size:14px;color:var(--glow)}
@media (max-width:900px){#next .ngrid{grid-template-columns:1fr}#next .nt,#next .nt.big2{min-height:240px}}
.sub main>section.block:first-child{padding-top:clamp(120px,18vh,180px)}
.pk-hero{max-width:1240px;margin:0 auto}
.pk-e{margin:0 0 18px;font:600 12px/1 var(--h);letter-spacing:.22em;text-transform:uppercase;color:var(--glow)}
.pk-h{margin:0;max-width:16ch;font:300 clamp(38px,6vw,84px)/1.02 var(--h);letter-spacing:-.03em}
.pk-p{margin:26px 0 0;max-width:58ch;color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.6}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,7vh,72px)}
.pain{padding:clamp(22px,2.2vw,30px);border:1px solid var(--line);border-radius:18px;background:rgba(242,239,233,.025)}
.pain h2{margin:10px 0 22px;font:500 clamp(18px,1.5vw,22px)/1.3 var(--h)}
.pain p{margin:10px 0 0;color:var(--mute);font-size:15px;line-height:1.6}
.pl{display:inline-block;font:600 10px/1 var(--h);letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,233,.45)}
.pl.s{color:var(--glow)}
.pkgs{max-width:1240px;margin:0 auto;padding-top:0}
.pk-t{margin:0;font:300 clamp(30px,4vw,56px)/1.05 var(--h);letter-spacing:-.02em}
.lead5{margin:14px 0 clamp(36px,6vh,60px);color:var(--mute);font-size:16px;line-height:1.6;max-width:56ch}
.pk{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(22px,3vw,40px);margin-bottom:20px;border:1px solid var(--line);border-radius:22px}
.pk:nth-of-type(even) .pk-img{order:2}
.pk.rec{border-color:rgba(255,179,92,.5);background:linear-gradient(160deg,rgba(255,179,92,.07),rgba(255,179,92,0) 55%)}
.pk-img{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#111}
.pk-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}

@media (min-width:901px){.pk-img{position:sticky;top:96px}}
.pk-open{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:99px;background:rgba(7,7,10,.78);font:600 12px/1 var(--h);color:var(--ink)}
.pk-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pk-top b{font:600 13px/1 var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.badge{padding:6px 10px;border-radius:99px;border:1px solid var(--line);font:600 11px/1 var(--h);color:var(--ink)}
.rec .badge{background:var(--acc);border-color:var(--acc);color:#111}
.pk-top i{font-style:normal;font-size:13px;color:var(--mute)}
.pk h3{margin:16px 0 8px;font:500 clamp(24px,2.2vw,32px)/1.15 var(--h);letter-spacing:-.01em}
.pk-o{margin:0;font:400 clamp(20px,1.7vw,24px)/1.35 var(--s);color:var(--glow)}
.pk-d{margin:12px 0 0;color:var(--mute);font-size:15px;line-height:1.6}
.pk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.pk-cols h4{margin:0 0 10px;font:600 11px/1 var(--h);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,233,.55)}
.pk-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pk-cols li{position:relative;padding-left:16px;font-size:14px;line-height:1.45}
.pk-cols li::before{content:"·";position:absolute;left:2px;color:var(--mute)}
.pk-cols .plus li::before{content:"+";color:var(--glow)}
.pk-cols .minus li{color:var(--mute)}.pk-cols .minus li::before{content:"–"}
.pk-who{margin:22px 0 0;font-size:15px;line-height:1.55}.pk-who b{color:var(--glow);font-weight:600}
.pk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:24px}
.pk-prem{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;margin-top:36px;padding:22px;border:1px dashed var(--line);border-radius:18px;color:inherit;text-decoration:none}
.pk-pi{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10}.pk-pi img{width:100%;height:100%;object-fit:cover;display:block}
.pk-prem b{display:block;margin-top:8px;font:600 13px/1 var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.pk-prem h3{margin:10px 0 6px;font:500 22px/1.2 var(--h)}.pk-prem p{margin:0;color:var(--mute);font-size:15px;line-height:1.55}
.pk-prem em{display:block;margin-top:10px;font-style:normal;font-weight:700;font-size:14px;color:var(--glow)}
.pk-up{margin:28px 0 0;font-size:16px;line-height:1.6;max-width:62ch}
.pk-pick{text-align:center}.pk-pick .big{margin:0 0 20px;font-size:clamp(34px,5.5vw,84px);white-space:normal;overflow-wrap:anywhere}
.pk-pick>p{margin:0 auto 32px;max-width:52ch;color:var(--mute);font-size:17px;line-height:1.6}
.pk-also{display:block;width:max-content;max-width:100%;margin:44px auto 0;color:var(--mute);text-decoration:none;font-size:15px}.pk-also b{color:var(--ink)}
@media (max-width:900px){.pains,.pk-cols{grid-template-columns:1fr}.pk{grid-template-columns:1fr}.pk:nth-of-type(even) .pk-img{order:0}.pk-prem{grid-template-columns:1fr}}
.pnext{text-align:center}
.pnext .big{font-size:clamp(36px,6vw,90px);white-space:normal;margin:0 0 30px}

/* very narrow phones: the Russian headline of the package pages was wider than the screen */
@media (max-width:400px){.pk-h{font-size:clamp(30px,9.2vw,38px);overflow-wrap:break-word}}