@font-face{font-family:Unbounded;src:url('../fonts/unbounded-latin-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:GeistMono;src:url('../fonts/geist-mono-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url('../fonts/onest-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--bg:#080813;--bg2:#0c0d1c;--frozen:#a0bddb;--text:#d8e6f3;--muted:#8a96ad;--line:#1b2233;--price:#ff7a4d;--gutter:clamp(22px,4vw,64px);--mono:13px/1.6 Onest,sans-serif;--data:12px/1.6 GeistMono,monospace}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);scroll-behavior:smooth}
body{margin:0;font-family:Onest,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--frozen);outline-offset:6px}
p{text-wrap:pretty;margin:0}
h1,h2,h3{margin:0;font-family:Unbounded,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
::selection{background:var(--frozen);color:var(--bg)}
.mono{font:var(--mono);letter-spacing:.02em}
.muted{color:var(--muted)}

/* hero A (Astra) */
.hero{position:relative;isolation:isolate;min-height:700px;height:100svh;max-height:1200px;overflow:hidden;background:var(--bg)}
.masthead{position:fixed;top:0;left:0;right:0;padding:18px var(--gutter);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;font:14px/1.5 Onest,sans-serif;transition:transform .45s var(--ease-out),background-color .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.masthead.solid{background:rgba(8,8,19,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.masthead.away{transform:translateY(-110%)}
.wordmark{font-family:Unbounded,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.06em;min-height:44px;display:flex;align-items:center}
.wordmark span{color:var(--muted);font-size:12px;letter-spacing:0;margin-left:6px;font-family:Onest,sans-serif;font-weight:400}
.masthead nav{display:flex;gap:28px}
.masthead nav a{display:flex;align-items:center;min-height:44px;color:var(--frozen);transition:color .2s}
.masthead nav a:hover{color:#fff}
.availability{display:flex;align-items:center;gap:9px;color:var(--muted)}
.availability i{width:6px;height:6px;border-radius:50%;background:var(--frozen)}
.particle-space{position:absolute;inset:0;z-index:2;overflow:hidden;touch-action:pan-y}
#chameleon{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.type-back,.type-front{position:absolute;left:0;right:0;text-align:center;pointer-events:none;white-space:nowrap;margin:0;will-change:transform}
.type-back{top:21%;z-index:1;font:700 clamp(100px,14.6vw,218px)/1 Unbounded,sans-serif;letter-spacing:-.075em;color:var(--frozen)}
.type-front{bottom:19%;z-index:3;font:700 clamp(70px,9.35vw,142px)/1.1 Unbounded,sans-serif;letter-spacing:-.066em;color:var(--text)}
.hero-bottom{position:absolute;bottom:38px;left:var(--gutter);right:var(--gutter);z-index:6;display:flex;justify-content:space-between;align-items:center;gap:24px}
.tiny{font:13px/1.6 Onest,sans-serif;color:var(--muted);max-width:220px}
.tiny strong{font-weight:400;color:var(--frozen)}
.quiet-actions{display:flex;align-items:center;gap:30px;font:15px/1.5 Onest,sans-serif;margin-left:auto;margin-right:9vw}
.quiet-actions a{display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color .2s}
.quiet-actions a:first-child{border-bottom:1px solid #a0bddb66}
.quiet-actions .price{color:var(--price)}
.quiet-actions .hire{color:var(--muted)}
.quiet-actions a:hover{color:#fff}
.arrow{font-family:Onest,sans-serif;font-size:18px}
.scroll-cue{display:flex;align-items:center;gap:14px;font:12px Onest,sans-serif;color:var(--muted);min-height:44px}
.scroll-cue svg{width:14px;height:36px;stroke:var(--frozen);fill:none;stroke-width:1}

/* sections */
.sec{position:relative;padding:clamp(90px,12vw,170px) var(--gutter);border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{font-size:clamp(34px,6vw,92px)}
.sec-head .num{font:var(--mono);color:var(--muted);margin-right:18px;letter-spacing:.04em}
.sec-head .note{font:var(--mono);color:var(--muted);text-align:right;max-width:260px}
.reveal{overflow:hidden;display:block}
.reveal>span{display:inline-block}

/* try it */
.try{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.stage{width:min(100%,82svh);margin:0 auto}
.story{display:flex;flex-direction:column}

.stage{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,#10132400 0,#0a0b17 100%),#06060c}
.stage dust-orb{position:absolute;inset:0;width:100%;height:100%}
.stage-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage.fallback dust-orb{display:none}
.stage-ui{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:0 14px;z-index:2}
.chip{font:14px/1 Onest,sans-serif;padding:12px 18px;min-height:44px;border:1px solid #a0bddb40;border-radius:999px;background:#0b0c1a;color:var(--frozen);transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{border-color:#a0bddb88}
.chip:focus-visible{outline-offset:2px}
.chip:focus:not(:focus-visible){outline:none}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--frozen);color:var(--bg);border-color:var(--frozen)}
.stage-tag{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font:var(--data);color:var(--muted);z-index:2;font-variant-numeric:tabular-nums}
.product h3{font-size:clamp(30px,3.6vw,54px);margin:14px 0 18px}
.product .lede{font-size:17px;line-height:1.55;color:var(--frozen);max-width:440px}
.specs{list-style:none;margin:28px 0 34px;padding:0;border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font:var(--data)}
.specs li span:first-child{color:var(--muted)}
.buy{display:flex;flex-direction:column;gap:12px}
.tier{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--bg2)}
.tier .t{font:14px/1.5 Onest,sans-serif;color:var(--muted)}
.tier .t b{display:block;font:700 26px/1.1 Unbounded,sans-serif;letter-spacing:-.04em;color:var(--text);margin-bottom:4px;font-variant-numeric:tabular-nums}
.tier .t b em{font-style:normal;color:var(--price)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 Onest,sans-serif;white-space:nowrap;transition:background .2s,color .2s,transform .15s,border-color .2s}
.btn:active{transform:scale(.96)}
.btn-solid{background:var(--frozen);color:var(--bg)}
.btn-solid:hover{background:#fff}
.btn-line{border:1px solid #a0bddb55;color:var(--frozen)}
.btn-line:hover{border-color:var(--frozen);color:#fff}
.btn[disabled]{opacity:.55;pointer-events:none}
.buy-note{font:13px/1.6 Onest,sans-serif;color:var(--muted);margin-top:4px}
.buy-msg{font:14px/1.6 Onest,sans-serif;color:var(--price);min-height:1em}

/* shop */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg2);transition:border-color .3s ease,transform .45s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:#a0bddb44;transform:translateY(-4px)}}
.card.hide{display:none}
.card .media{position:relative;aspect-ratio:4/5;background:#06060c;overflow:hidden}
.card video,.card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .badge{position:absolute;bottom:12px;right:12px;font:12px/1 Onest,sans-serif;padding:8px 12px;border-radius:999px;background:#080813cc;color:var(--frozen);z-index:2}
.card .badge.paid{color:var(--price)}
.card .body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px}
.card h3{font-size:22px;letter-spacing:-.04em}
.card .what{font:14px/1.5 Onest,sans-serif;color:var(--muted)}
.card .links{display:flex;gap:18px;margin-top:10px;font:14px/1 Onest,sans-serif}
.card .links a{color:var(--frozen);min-height:32px;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.card .links a:hover{color:#fff;border-color:#a0bddb66}

/* spotlight под курсором (reactbits, Амбер 19.09: «дорого-богато») */
.spot{isolation:isolate}
@media(hover:hover) and (pointer:fine){
  .spot::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(160,189,219,.16),transparent 70%);opacity:0;transition:opacity .35s ease}
  .spot:hover::after{opacity:1}
}
.tier,.offer{position:relative}

/* лента от скролла (замер arcus: логотипы едут от скролла, не по таймеру) */
.marquee{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.marquee .row{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:mq 38s linear infinite;font:700 clamp(36px,6.4vw,104px)/1 Unbounded,sans-serif;letter-spacing:-.04em;color:#27314a;will-change:transform}
.marquee .row:nth-child(2){animation-direction:reverse;animation-duration:44s}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee .row b{color:var(--frozen);font-weight:700}
.marquee .row i{font-style:normal;color:var(--price)}

.offer-t{font:700 22px/1.2 Unbounded,sans-serif;letter-spacing:-.04em;color:var(--text)}
/* внешние ссылки: svg-стрелка вместо символа */
a[target="_blank"]::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.4em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* поверхности браузера под палитру */
html{caret-color:var(--frozen);scrollbar-color:#2a3349 var(--bg)}
/* custom */
.custom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.offer{padding:clamp(26px,3vw,40px);border:1px solid var(--line);border-radius:26px;background:var(--bg2);display:flex;flex-direction:column;gap:16px}
.offer .price-big{font:700 clamp(38px,4.6vw,66px)/1 Unbounded,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.offer .price-big small{font:14px Onest,sans-serif;color:var(--muted);letter-spacing:0;margin-right:10px;vertical-align:middle}
.offer p{color:var(--frozen);line-height:1.6;max-width:460px}
.offer ul{margin:4px 0 8px;padding:0;list-style:none;font:15px/1.9 Onest,sans-serif;color:var(--muted)}
.offer ul li::before{content:'+ ';color:var(--frozen)}
.offer .btn{align-self:flex-start;margin-top:auto}
.form{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:12px;align-items:end;margin-top:18px}
.form label{display:flex;flex-direction:column;gap:8px;font:13px Onest,sans-serif;color:var(--muted)}
.form input,.form textarea{font:16px/1.4 Onest,sans-serif;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:13px 14px;min-height:50px;resize:none;transition:border-color .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--frozen)}
.form .btn{min-height:50px}
.form-msg{grid-column:1/-1;font:14px Onest,sans-serif;color:var(--frozen);min-height:1em}

/* services */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.services li{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.services .n{font:var(--mono);color:var(--muted)}
.services h3{font-size:clamp(20px,2.4vw,32px);letter-spacing:-.04em;text-transform:lowercase;transition:color .3s}
.has-lit .services li:not(.lit) h3{color:#2b3448}
.services li.lit h3{color:var(--text)}
.services li p{transition:color .4s}.has-lit .services li.lit p{color:var(--frozen)}
.services p{color:var(--muted);line-height:1.6;font-size:15px}
.services li:hover h3{color:var(--frozen)}
.services .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.services .tags span{font:12px Onest,sans-serif;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--frozen)}

/* footer */
.foot{padding:clamp(90px,12vw,160px) var(--gutter) 40px;border-top:1px solid var(--line)}
.foot h2{font-size:clamp(40px,8vw,128px);max-width:1200px}
.foot h2 em{font-style:normal;color:var(--frozen)}
.foot .mail{display:inline-block;margin-top:34px;font:700 clamp(18px,2.4vw,32px)/1.2 Unbounded,sans-serif;letter-spacing:-.04em;border-bottom:1px solid #a0bddb55;padding-bottom:6px;transition:color .2s,border-color .2s}
.foot .mail:hover{color:var(--frozen);border-color:var(--frozen)}
.socials{display:flex;gap:28px;margin-top:40px;font:15px Onest,sans-serif}
.socials a{color:var(--frozen);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.socials a:hover{color:#fff}
.base{display:flex;justify-content:space-between;gap:20px;margin-top:90px;padding-top:24px;border-top:1px solid var(--line);font:13px Onest,sans-serif;color:var(--muted)}

@media(max-width:1100px){
  .try{grid-template-columns:1fr;gap:34px}
  .stage{width:min(100%,560px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-ui{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;bottom:10px;gap:6px}
  .stage-ui::-webkit-scrollbar{display:none}
  .stage-ui .chip{font-size:13px;padding:8px 13px;min-height:40px;flex:none}
}
@media(max-height:760px) and (min-width:701px){.hero{min-height:650px}.type-back{top:18%;font-size:13vw}.type-front{bottom:19%;font-size:8.6vw}}
@media(max-width:700px){
  .hero{height:100svh;min-height:660px;max-height:1000px}
  .masthead{padding:12px 22px;gap:10px}.wordmark{font-size:15px}.wordmark span{font-size:11px}
  .masthead nav{gap:17px}.masthead nav a{font-size:13px}.availability{display:none}
  .hero-bottom{left:22px;right:22px;bottom:25px;gap:18px;flex-wrap:wrap;align-items:end}
  .type-back{top:28%;font-size:16.4vw;letter-spacing:-.073em}
  .type-front{bottom:auto;top:57%;font-size:8.9vw;letter-spacing:-.07em}
  .hero-bottom .tiny{max-width:170px;flex:1;font-size:12px}
  .quiet-actions{order:-1;flex-basis:100%;margin:0 0 17px;justify-content:center;gap:34px;font-size:15px}
  .scroll-cue{margin-left:auto;font-size:12px;gap:9px}.scroll-cue svg{height:29px}
  .sec-head{flex-direction:column;gap:12px}.sec-head .note{text-align:left}
  .grid{gap:12px}
  .card .body{padding:14px 14px 16px}.card h3{font-size:18px}.card .what{font-size:13px}
  .card .links{flex-direction:column;gap:0}
  .custom{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .services li{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .tier{flex-direction:column;align-items:stretch}
  .tier .btn{width:100%}
  .base{flex-direction:column;margin-top:60px}
  .socials{flex-wrap:wrap;gap:6px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.masthead{transition:opacity .3s ease}}
.intro .type-back,.intro .type-front,.intro .hero-bottom>*,.intro .masthead,.intro .particle-space{opacity:0}
.rm-fade{opacity:0;transition:opacity .6s ease}.rm-fade.in{opacity:1}