:root{
  --ink:#0c0916; --ink2:#150f28; --panel:rgba(26,19,48,.55);
  --mint:#6bffc8; --mint2:#2ee6a8; --lilac:#b69cff; --violet:#7a4dff;
  --text:#ece8ff; --muted:#a8a2c8; --line:rgba(182,156,255,.18);
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  background:radial-gradient(1200px 700px at 80% -10%,#25154f 0%,transparent 60%),var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}

/* фон */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.aurora{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.38;will-change:transform}
.aurora i:nth-child(1){background:var(--violet);left:-15vmax;top:-10vmax;animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:var(--mint2);right:-20vmax;top:30vh;opacity:.22;animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:var(--lilac);left:20vw;bottom:-30vmax;opacity:.25;animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vw,-12vh) scale(.9)}}
@keyframes drift3{to{transform:translate(12vw,-16vh) scale(1.2)}}
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* навигация */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) clamp(18px,4vw,48px) 14px;
  background:linear-gradient(to bottom,rgba(12,9,22,.75),rgba(12,9,22,0));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.brand{font-family:var(--display);font-weight:800;letter-spacing:.02em;
  background:linear-gradient(100deg,var(--mint),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-weight:500;color:var(--muted)}
.nav nav a:not(.pill){transition:color .2s}
.nav nav a:not(.pill):hover{color:var(--text)}
.pill{padding:8px 18px;border-radius:999px;border:1px solid var(--line);color:var(--text);
  background:rgba(122,77,255,.15);transition:background .25s,border-color .25s,transform .25s}
.pill:hover{background:rgba(107,255,200,.16);border-color:var(--mint)}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:110px clamp(18px,5vw,60px) 90px;position:relative}
.logo{
  position:relative;margin:0;font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  font-size:clamp(2.5rem,11.2vw,9.5rem);isolation:isolate;
  background:linear-gradient(100deg,var(--mint) 0%,var(--lilac) 25%,var(--violet) 50%,var(--lilac) 75%,var(--mint) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite,rise 1.1s cubic-bezier(.2,.8,.2,1) both;
  cursor:default;
}
.logo::before{
  content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:inherit;background-size:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(26px);opacity:.6;animation:shimmer 7s linear infinite;
}
.logo:hover,.logo:hover::before{animation-duration:2.2s}
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
.tag{max-width:36rem;margin:26px 0 0;color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.3rem);animation:rise 1.1s .25s cubic-bezier(.2,.8,.2,1) both}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px;animation:rise 1.1s .45s cubic-bezier(.2,.8,.2,1) both}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:14px;font-weight:700;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-main{color:#0c0916;background:linear-gradient(120deg,var(--mint),#a6ffe0 50%,var(--lilac));box-shadow:0 10px 40px -10px rgba(107,255,200,.55)}
.btn-main:hover{transform:translateY(-3px);box-shadow:0 16px 50px -8px rgba(182,156,255,.7)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--lilac);background:rgba(182,156,255,.1);transform:translateY(-3px)}
.scroll{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;width:26px;height:42px;margin-left:-13px;
  border:1.5px solid var(--line);border-radius:14px}
.scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--mint);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* секции */
.section{max-width:1120px;margin:0 auto;padding:clamp(70px,11vw,130px) clamp(18px,4vw,40px) 0}
h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,4.2vw,2.6rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 40px;max-width:22ch}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tile{position:relative;padding:30px;border-radius:26px;border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:border-color .3s,transform .3s}
.tile.t-wide{grid-column:span 4}
.tile.t-small{grid-column:span 2;border-radius:22px}
.tile svg{width:34px;height:34px;fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.tile h3{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:1.15rem}
.tile p{margin:0;color:var(--muted)}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(182,156,255,.2),transparent 60%)}
.glow:hover{border-color:rgba(107,255,200,.4)}
.glow:hover::after{opacity:1}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-left:1px solid var(--line)}
.steps li{position:relative;padding:0 0 38px 34px;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-17px;top:-2px;width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:.8rem;color:#0c0916;
  background:linear-gradient(135deg,var(--mint),var(--lilac))}
.steps b{display:block;font-family:var(--display);font-weight:500;font-size:1.15rem;margin-bottom:6px}
.steps span{color:var(--muted);max-width:46ch;display:block}

.contact{text-align:center}
.contact h2{margin-left:auto;margin-right:auto;max-width:18ch}
.lead{color:var(--muted);margin:-16px 0 34px}
.mail{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,4.6vw,2.4rem);padding:.35em .7em;border-radius:18px;
  border:1px solid var(--line);background:rgba(122,77,255,.12);
  background-image:linear-gradient(100deg,var(--mint),var(--lilac),var(--mint));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;
  transition:transform .25s,border-color .25s;word-break:break-all}
.mail:hover{transform:scale(1.03);border-color:var(--mint)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1120px;margin:clamp(80px,12vw,140px) auto 0;
  padding:26px clamp(18px,4vw,40px) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:24px}
.nf .tag{margin:18px auto 30px}

@media (max-width:820px){
  .bento{grid-template-columns:1fr}
  .tile.t-wide,.tile.t-small{grid-column:auto}
  .nav nav a:not(.pill){display:none}
  .tile{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}