@font-face{font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2')}

:root{color-scheme:dark;
  --bg:#111315;
  --panel:#1b1d20;
  --panel-2:#232528;
  --ink:#f3f2ef;
  --muted:#919099;
  --faint:#77767f;
  --line:#35373b;
  --accent:#e7bf55;
  --radius:20px;
  font-family:Manrope,Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:110px;
  background:var(--bg)}
body{margin:0;
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;
  text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:5px}
::selection{background:#e7bf5555}
h1,h2,p{margin:0}
.icon{width:20px;
  height:20px;
  flex-shrink:0}
button{color:inherit}
em{font-style:normal;
  color:var(--accent)}
.skip-link{position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:12px 20px;
  background:var(--accent);
  color:#111315;
  border-radius:10px}
.skip-link:focus{top:12px}

.site-header{position:absolute;
  z-index:20;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(1240px,calc(100% - 48px));
  min-height:76px;
  padding:15px 24px;
  display:flex;
  align-items:center;
  gap:28px;
  background:linear-gradient(180deg,#ffffff05,transparent),#1b1d20e8;
  border:1px solid #ffffff08;
  border-radius:24px;
  backdrop-filter:blur(20px)}
.wordmark{font-size:20px;
  font-weight:800;
  letter-spacing:-1px;
  white-space:nowrap}
.brand-dot{color:var(--accent)}
.site-nav{display:flex;
  gap:30px;
  margin:auto;
  font-size:13px;
  font-weight:600;
  color:#c9c8cf}
.site-nav a:hover{color:white}
.header-actions{display:flex;
  gap:12px;
  align-items:center}
.button{display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  min-height:50px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  transition:background .2s,filter .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button.primary{background:linear-gradient(180deg,#f4d780,#d6ad44);
  color:#30250c;
  box-shadow:inset 0 1px #ffffff22}
.button.primary:hover{filter:brightness(1.1)}
.button.secondary{background:#232528d9;
  border-color:var(--line);
  color:#c9c8cf}
.button.secondary:hover{background:#303236;
  border-color:#8d783f}
.button.small{min-height:44px;
  padding:0 19px;
  gap:10px;
  font-size:13px}
.menu-toggle{border:0;
  background:transparent;
  display:none;
  padding:8px;
  align-items:center;
  justify-content:center}

.hero{position:relative;
  min-height:100svh;
  min-height:max(780px,100svh);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:155px 24px 130px;
  overflow:hidden;
  isolation:isolate}
.hero-grid{position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 50% 65% at 50% 43%,black,transparent);
  z-index:-2}
.hero-silk{position:absolute;
  top:34%;
  left:50%;
  width:120%;
  height:clamp(300px,42vw,580px);
  transform:translateX(-50%) scaleX(-1);
  z-index:-1;
  pointer-events:none;
  background:url('../images/hero-silk.webp') center top/100% auto no-repeat;
  filter:hue-rotate(155deg) brightness(.48) contrast(.92) saturate(.8);
  opacity:.7;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 65%,transparent 100%)}
.hero::after{content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#11131522 0%,#11131500 25%,#11131522 55%,#111315cc 86%,var(--bg) 100%)}
.hero-copy{width:min(780px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:23px;
  padding-top:16px}
.hero h1{font-size:clamp(44px,5.4vw,78px);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:800}
.hero-copy>p{max-width:580px;
  font-size:15px;
  line-height:1.8;
  color:#a2a0a8;
  text-wrap:pretty}
.hero-actions{display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center}
.hero-stats{display:flex;
  justify-content:center;
  margin-top:12px}
.hero-stats>div{display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 27px;
  border-left:1px solid #ffffff16;
  min-width:115px}
.hero-stats>div:first-child{border-left:0}
.hero-stats strong{font-size:17px;
  font-weight:800}
.hero-stats span{font-size:11px;
  color:#939099}

.section{position:relative;
  width:min(1120px,calc(100% - 80px));
  margin:0 auto;
  padding:88px 0}
.section-heading{display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
  margin-bottom:44px}
h2{font-size:clamp(30px,3.1vw,45px);
  line-height:1.15;
  letter-spacing:-.045em;
  font-weight:750}
.section-heading p{font-size:14px;
  color:var(--muted);
  line-height:1.8;
  max-width:400px}
.section-heading.flip{flex-direction:row-reverse;
  text-align:right}
.section-heading.flip p{text-align:left}
.modules{padding-top:50px;
  padding-bottom:78px}
.pixel-cluster{position:absolute;
  right:140px;
  top:0;
  width:8px;
  height:8px;
  background:#e7bf5526;
  box-shadow:14px 0 #e7bf5516,0 14px #e7bf5512,28px 14px #e7bf5524,14px 28px #e7bf5512;
  transform:rotate(-10deg)}
.module-marquee{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  display:grid;
  gap:14px;
  padding:8px 0}
.marquee-track{display:flex;
  gap:14px;
  width:max-content;
  animation:marquee 38s linear infinite}
.marquee-track.reverse{animation-direction:reverse;
  animation-duration:42s}
.marquee-track>div{display:flex;
  gap:14px}
.module-marquee:hover .marquee-track,.module-marquee:focus-within .marquee-track{animation-play-state:paused}
.module-chip{display:inline-flex;
  align-items:center;
  gap:11px;
  padding:12px 20px 12px 12px;
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(180deg,#ffffff04,transparent),var(--panel);
  font-weight:600;
  font-size:13px;
  color:#c9c8cf}
.module-chip i{display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:10px;
  color:#9bd4ff;
  background:#e7bf550e;
  font-style:normal}
.module-chip .icon{width:17px;
  height:17px}
.modules-note{display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:22px;
  font-size:12px;
  color:var(--faint)}
.modules-note .icon{width:15px;
  height:15px}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}
}

.numbers{width:min(1120px,calc(100% - 80px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:40px 0;
  border-block:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 100%,#e7bf5509,transparent 70%)}
.numbers>div{border-left:1px solid var(--line);
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:5px;
  text-align:center}
.numbers>div:first-child{border-left:0}
.numbers i{color:var(--accent);
  margin-bottom:8px}
.numbers strong{font-size:31px;
  line-height:1.3;
  letter-spacing:-1px}
.numbers span{font-size:11px;
  color:var(--muted)}
.plans::before{content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(#e7bf5508 1px,transparent 1px),linear-gradient(90deg,#e7bf5508 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse,black,transparent 75%);
  z-index:0}
.plans>*{position:relative}
.plan-list{display:grid;
  gap:12px}
.plan-row{display:grid;
  grid-template-columns:48px minmax(0,1fr) auto 20px;
  gap:22px;
  align-items:center;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff06,transparent),var(--panel);
  transition:border-color .2s,transform .2s}
.plan-row:hover{border-color:#507b99;
  transform:translateX(3px)}
.plan-row>i{display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid #ffffff09;
  border-radius:15px;
  background:#ffffff07;
  color:#c9c8cf}
.plan-info{display:flex;
  flex-direction:column;
  gap:5px}
.plan-info strong{font-size:16px;
  font-weight:650;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap}
.plan-info em{padding:3px 9px;
  border-radius:20px;
  background:#ffffff12;
  color:#c6e8ff;
  font-size:10px}
.plan-info>span{font-size:13px;
  color:var(--muted)}
.plan-price{text-align:right;
  display:flex;
  flex-direction:column;
  gap:3px}
.plan-price b{font-size:25px;
  line-height:1.2;
  letter-spacing:-1px}
.plan-price small{color:var(--muted);
  font-size:11px}
.plan-row>.icon{color:var(--faint)}
.plan-row.popular{border-color:#e7bf5555;
  background:radial-gradient(ellipse at 0% 0%,#e7bf5525,transparent 65%),#28261f}
.plan-row.popular>i{color:#f6dfa0;
  background:#e7bf5515}
.plan-note{margin-top:18px;
  font-size:11px;
  color:var(--faint);
  text-align:center}
.trust-strip{width:min(1120px,calc(100% - 80px));
  margin:0 auto;
  padding:28px 0 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  border-bottom:1px solid var(--line)}
.trust-strip article{display:flex;
  gap:14px;
  align-items:flex-start}
.trust-strip i{color:var(--accent);
  padding-top:3px}
.trust-strip article>div{display:flex;
  flex-direction:column;
  gap:5px}
.trust-strip strong{font-size:13px;
  font-weight:650}
.trust-strip span{font-size:12px;
  color:var(--muted);
  line-height:1.7}

.faq{display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:80px;
  padding-block:100px}
.faq-intro p{max-width:300px;
  color:var(--muted);
  margin:20px 0 24px;
  font-size:14px;
  line-height:1.8}
.faq-list{display:grid;
  gap:10px;
  align-content:start}
.faq details{background:linear-gradient(180deg,#ffffff04,transparent),var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden}
.faq details[open]{border-color:#354b5e;
  background:linear-gradient(180deg,#ffffff08,transparent),var(--panel)}
.faq summary{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  cursor:pointer;
  padding:20px 22px;
  font-size:15px;
  letter-spacing:-.025em;
  font-weight:650;
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#ffffff09;
  flex-shrink:0;
  transition:transform .2s}
.faq summary .icon{width:18px;
  height:18px}
.faq details[open] summary>span{transform:rotate(45deg);
  background:#ffffff15}
.faq details p{padding:0 54px 22px 22px;
  font-size:13px;
  line-height:1.8;
  color:var(--muted)}
.contact{display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:center;
  gap:70px;
  padding:58px 48px;
  background:radial-gradient(ellipse at 0% 100%,#e7bf5512,transparent 60%),var(--panel);
  border:1px solid var(--line);
  border-radius:26px;
  margin-bottom:80px;
  overflow:hidden}
.contact h2{margin-top:16px;
  font-size:38px}
.eyebrow{font-size:10px;
  letter-spacing:1.6px;
  color:var(--faint);
  font-weight:650}
.contact p{font-size:13px;
  color:var(--muted);
  margin:20px 0 25px;
  line-height:1.8}
.contact .button{font-size:12px;
  gap:10px;
  padding-inline:17px;
  min-height:46px}
.contact-links{display:grid;
  gap:10px}
.contact-links a{display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  background:#ffffff03;
  border:1px solid var(--line);
  border-radius:16px;
  transition:background .2s,border-color .2s}
.contact-links a:hover{background:#e7bf550c;
  border-color:#e7bf5555}
.contact-links i{display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:#f4d780;
  background:#e7bf550c;
  border-radius:12px}
.contact-links a>div{display:flex;
  flex-direction:column;
  gap:3px}
.contact-links strong{font-size:13px;
  font-weight:650}
.contact-links span{font-size:11px;
  color:var(--muted)}
.contact-links a>.icon{margin-left:auto;
  color:var(--faint);
  width:17px}

.site-footer{width:min(1120px,calc(100% - 80px));
  margin:0 auto;
  padding:44px 0 22px;
  border-top:1px solid var(--line)}
.footer-main{display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:35px;
  padding-bottom:42px}
.footer-main>div{display:flex;
  flex-direction:column;
  gap:9px}
.footer-main strong{font-size:12px;
  font-weight:650;
  margin-bottom:6px}
.footer-main a:not(.wordmark),.footer-brand p{font-size:12px;
  color:var(--muted)}
.footer-main a:hover{color:var(--ink)}
.footer-brand p{margin-top:8px;
  line-height:1.9}
.footer-bottom{border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  color:var(--faint);
  font-size:10px}

@media(min-width:1600px){
.hero{min-height:900px}
}

@media(max-width:900px){.site-header{min-height:65px;
  top:16px;
  padding:12px 20px;
  border-radius:22px}
.site-nav{gap:18px}
.wordmark{font-size:18px}
.hero{min-height:760px;
  padding-bottom:110px}
.hero h1{font-size:62px}
.hero-silk{top:38%;height:460px}
.section,.numbers,.trust-strip,.site-footer{width:calc(100% - 48px)}
.section{padding-block:65px}
.section-heading{gap:25px}
.faq{gap:35px;
  grid-template-columns:1fr 1.4fr}
.contact{gap:30px;
  padding:35px 28px}
.contact h2{font-size:32px}
.footer-main{gap:22px;
  grid-template-columns:1.5fr 1fr 1fr}
.footer-main>div:last-child{grid-column:2/4}
.trust-strip{gap:20px}
}

@media(max-width:680px){html{scroll-padding-top:100px}
.site-header{width:calc(100% - 32px);
  top:12px;
  padding:12px 18px;
  gap:12px}
.header-actions{margin-left:auto;
  gap:6px}
.menu-toggle{display:flex}
.site-nav{display:none}
.site-nav.open{position:absolute;
  display:flex;
  flex-direction:column;
  top:calc(100% + 9px);
  left:0;
  right:0;
  gap:0;
  padding:10px;
  background:#232528;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 20px 40px #0004}
.site-nav a{padding:12px 14px}
.button.small{padding-inline:14px}
.hero{min-height:700px;
  min-height:100svh;
  padding:140px 22px 90px}
.hero-copy{gap:22px;
  padding-top:0}
.hero h1{font-size:clamp(40px,8.8vw,58px)}
.hero-copy>p{font-size:13px;
  max-width:470px}
.hero-silk{top:43%;height:330px;opacity:.55}
.hero-actions{justify-content:center;
  gap:10px}
.hero .button{padding-inline:18px;
  font-size:12px;
  gap:10px;
  min-height:47px}
.hero-stats{margin-top:8px;
  width:100%}
.hero-stats>div{padding-inline:15px;
  min-width:0;
  flex:1}
.hero-stats strong{font-size:15px}
.hero-stats span{font-size:10px}
.section,.numbers,.trust-strip,.site-footer{width:calc(100% - 40px)}
.section{padding-block:54px}
.section-heading,.section-heading.flip{flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:18px;
  margin-bottom:28px}
.section-heading p{font-size:13px}
.section-heading br:not(h2 br){display:none}
h2{font-size:34px}
.modules-note{font-size:10px}
.module-chip{font-size:12px;
  padding-right:15px}
.numbers{grid-template-columns:1fr 1fr;
  gap:26px 0;
  padding-block:30px}
.numbers>div:nth-child(3){border-left:0}
.numbers strong{font-size:26px}
.numbers span{font-size:10px}
.plan-row{grid-template-columns:38px minmax(0,1fr) auto;
  gap:13px;
  padding:20px 16px;
  border-radius:17px}
.plan-row>i{width:38px;
  height:38px;
  border-radius:12px}
.plan-row>.icon{display:none}
.plan-info strong{font-size:14px;
  gap:5px}
.plan-info>span{font-size:11px;
  max-width:160px}
.plan-info em{font-size:9px;
  padding:2px 6px}
.plan-price b{font-size:22px}
.plan-price small{font-size:10px}
.trust-strip{grid-template-columns:1fr;
  padding:0 0 32px;
  gap:24px}
.trust-strip article{gap:16px}
.faq{grid-template-columns:1fr;
  gap:28px}
.faq-intro p{max-width:100%;
  margin-block:16px}
.faq summary{font-size:13px;
  padding:17px}
.faq details p{font-size:12px;
  padding:0 45px 18px 17px}
.contact{grid-template-columns:1fr;
  padding:30px 24px;
  margin-bottom:45px;
  gap:32px}
.contact .hero-actions{justify-content:flex-start}
.contact h2{font-size:32px}
.contact p br{display:none}
.contact .button{padding-inline:12px;
  font-size:11px}
.footer-main{grid-template-columns:1fr 1fr;
  gap:28px}
.footer-brand{grid-column:1/-1}
.footer-main>div:last-child{grid-column:auto}
.footer-bottom{flex-wrap:wrap;
  gap:10px;
  font-size:10px}
.footer-bottom span:nth-child(2){order:3;
  width:100%}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;
  transition:none!important}
}