@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#030304;
  --panel:#08080b;
  --panel2:#0d0d12;
  --line:rgba(255,255,255,.115);
  --text:#fff;
  --muted:#b7b4c3;
  --dim:#777383;
  --purple:#7A2FFF;
  --pink:#FF317D;
  --orange:#FF7A00;
  --grad:linear-gradient(110deg,var(--purple),var(--pink),var(--orange));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:
radial-gradient(circle at 72% 8%,rgba(255,122,0,.13),transparent 26%),
radial-gradient(circle at 44% 12%,rgba(122,47,255,.16),transparent 28%),
linear-gradient(#030304,#030304)}
body:after{content:"";position:fixed;inset:0;z-index:-2;opacity:.07;pointer-events:none;background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px}
a{text-decoration:none;color:inherit}
.topbar{height:84px;position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 56px;background:rgba(3,3,4,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo img{width:150px;display:block}
.menu{display:flex;align-items:center;gap:35px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.06em;color:#d4d1dc}
.menu a{position:relative;padding:33px 0}
.menu a:after{content:"";position:absolute;left:0;bottom:19px;width:0;height:2px;background:var(--grad);transition:.25s}
.menu a.active:after,.menu a:hover:after{width:100%}
.outline-btn,.primary-btn,.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.04em;border-radius:5px;min-height:48px;padding:0 24px}
.outline-btn{border:1px solid var(--purple);box-shadow:inset 0 0 0 1px rgba(255,122,0,.45);background:rgba(0,0,0,.25)}
.primary-btn{background:var(--grad);box-shadow:0 0 28px rgba(255,49,125,.28)}
.text-btn{color:#f0edf8}.text-btn i{width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:9px}
.small{min-height:42px;padding:0 22px}
.hamb{display:none;border:0;background:none;color:#fff;font-size:29px}

.hero{min-height:720px;padding:150px 64px 62px;display:grid;grid-template-columns:39% 61%;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.kicker{display:block;color:#b23cff;font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.08em;margin-bottom:18px}
.hero h1{font-size:55px;line-height:1.02;letter-spacing:-.05em;text-transform:uppercase;margin:0 0 28px;max-width:590px}
.hero h1 em,.bottom-cta h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#c9c6d0;font-size:16px;line-height:1.75;max-width:455px;margin:0 0 34px}
.hero-buttons{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.trusted{margin-top:38px}
.trusted small{display:block;color:#8a8794;text-transform:uppercase;font-size:11px;font-weight:800;margin-bottom:17px}
.trusted div{display:flex;gap:24px;flex-wrap:wrap;color:#908d99;font-size:13px;font-weight:800}
.hero-right{position:relative;min-height:520px}
.bolt{position:absolute;right:108px;top:75px;width:410px;height:410px;background:url("../img/favicon.svg") center/contain no-repeat;filter:drop-shadow(0 0 32px rgba(255,49,125,.75)) drop-shadow(0 0 64px rgba(255,122,0,.35));z-index:4}
.grid-floor{position:absolute;inset:250px -64px -64px 30px;background:
linear-gradient(rgba(122,47,255,.35) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,47,255,.3) 1px,transparent 1px);
background-size:45px 45px;transform:perspective(650px) rotateX(64deg);transform-origin:top;opacity:.36;filter:blur(.2px)}
.grid-floor:after{content:"";position:absolute;inset:-160px 0;background:radial-gradient(circle at 62% 12%,rgba(255,122,0,.45),transparent 32%),radial-gradient(circle at 36% 20%,rgba(122,47,255,.65),transparent 35%)}
.code-card,.folder-card,.compile-card{position:absolute;background:rgba(9,9,13,.74);border:1px solid rgba(255,255,255,.13);box-shadow:0 0 45px rgba(122,47,255,.16);backdrop-filter:blur(12px);border-radius:8px;z-index:5}
.code-card{left:20px;top:0;width:470px;padding:14px 20px}
.dots{display:flex;gap:9px;margin-bottom:12px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
pre{margin:0;color:#e9e6ef;font-size:13px;line-height:1.72;white-space:pre-wrap}
.folder-card{left:165px;top:255px;width:160px;padding:16px;color:#a9a5b4;display:grid;gap:8px;font-size:12px}
.folder-card span:first-child{color:#d5d1df}
.compile-card{right:0;bottom:34px;width:230px;padding:22px}
.compile-card strong{text-transform:uppercase;font-size:12px}
.compile-card ul{margin:18px 0 15px;padding-left:18px;color:#bdb8c7;font-size:12px;line-height:1.75}
.progress{height:7px;background:#18151d;border-radius:99px;overflow:hidden}.progress span{display:block;width:100%;height:100%;background:var(--grad)}
.compile-card small{float:right;color:#a167ff;font-size:11px;margin-top:7px}

.section{padding:58px 64px;border-bottom:1px solid var(--line)}
.section-title{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:34px}
.section-title h2,.process h2{font-size:34px;line-height:1.08;letter-spacing:-.035em;text-transform:uppercase;margin:0;max-width:620px}
.section-title p{color:#c6c2cf;line-height:1.65;max-width:470px;margin:0}
.cards.six{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card,.project,.why-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:8px;transition:.25s}
.service-card:hover,.project:hover,.why-card:hover{transform:translateY(-5px);border-color:rgba(255,49,125,.45);box-shadow:0 0 30px rgba(122,47,255,.12)}
.service-card{min-height:170px;padding:29px 32px 26px 102px}
.icon{position:absolute;left:28px;top:34px;width:58px;height:58px;border-radius:12px;border:1px solid rgba(122,47,255,.55);display:grid;place-items:center;color:#b537ff;font-size:27px;background:rgba(122,47,255,.07);box-shadow:0 0 22px rgba(122,47,255,.12)}
.phone,.brain,.game{color:#ff317d;border-color:rgba(255,49,125,.45)}.cloud{color:#ff7a00;border-color:rgba(255,122,0,.5)}
.service-card h3{font-size:16px;text-transform:uppercase;margin:0 0 10px}.service-card p{color:#bdb8c7;line-height:1.58;font-size:13px;margin:0}.service-card a{position:absolute;right:25px;bottom:24px;color:#e837ff}

.tech-row{display:grid;grid-template-columns:repeat(11,1fr);gap:14px}
.tech-row div{height:88px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.045);display:grid;place-items:center;color:#ddd}
.tech-row b{font-size:26px;color:#58e6ff}.tech-row span{font-size:12px;margin-top:-12px;color:#eee}

.project-wrap{position:relative}.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.project{min-height:345px}.project-img{height:165px;background:#111;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.project-img:before{content:"";position:absolute;inset:18px;border-radius:8px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,rgba(122,47,255,.22),rgba(255,49,125,.06))}
.project-img:after{content:"";position:absolute;left:26px;right:26px;bottom:34px;height:56px;background:linear-gradient(180deg,transparent 65%,rgba(122,47,255,.8));clip-path:polygon(0 70%,12% 58%,25% 65%,38% 35%,55% 55%,70% 20%,83% 42%,100% 10%,100% 100%,0 100%)}
.app:after{left:70px;right:70px;top:22px;height:auto;border-radius:18px;background:linear-gradient(135deg,#1e1f29,#050505);border:1px solid rgba(255,255,255,.15);clip-path:none}.erp:after{clip-path:none;background:linear-gradient(90deg,rgba(122,47,255,.7),rgba(255,49,125,.65));height:68px;border-radius:8px}.gamebg{background:radial-gradient(circle at 70% 30%,rgba(255,122,0,.34),transparent 28%),linear-gradient(135deg,#122033,#050505)}
.project span{display:block;color:#b83cff;text-transform:uppercase;font-size:11px;font-weight:900;margin:18px 20px 8px}
.project h3{font-size:20px;margin:0 20px 9px}.project p{font-size:13px;line-height:1.55;color:#bcb7c6;margin:0 20px 14px}.project a{margin:0 20px;color:#c743ff;font-size:12px;font-weight:900;text-transform:uppercase}
.circle-arrow{position:absolute;left:-35px;top:50%;width:45px;height:45px;border-radius:50%;border:1px solid var(--line);background:#0a0a0e;color:#fff;font-size:30px}.circle-arrow.right{left:auto;right:-35px}

.process{text-align:left}.process h2{margin-bottom:44px}.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}.steps:before{content:"";position:absolute;left:8%;right:8%;top:45px;height:2px;background:var(--grad);opacity:.65}.steps div{position:relative;padding-top:95px}.steps i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:78px;height:78px;border:1px solid rgba(122,47,255,.8);border-radius:50%;display:grid;place-items:center;background:#09090c;box-shadow:0 0 32px rgba(122,47,255,.35);font-style:normal;font-size:28px;color:#d25fff}.steps b{color:#b246ff}.steps h3{font-size:15px;text-transform:uppercase;margin:6px 0}.steps p{color:#aaa4b3;font-size:12px;line-height:1.55;margin:0}

.why{padding-top:42px}.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.why-card{padding:24px 24px 22px;min-height:112px}.why-card b{font-size:25px;color:#b339ff}.why-card h3{text-transform:uppercase;font-size:13px;margin:9px 0}.why-card p{font-size:12px;color:#b8b2c0;line-height:1.5;margin:0}

.bottom-cta{min-height:210px;border-bottom:1px solid var(--line);position:relative;padding:46px 64px 46px 380px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;background:radial-gradient(circle at 20% 50%,rgba(122,47,255,.3),transparent 25%),radial-gradient(circle at 78% 40%,rgba(255,122,0,.16),transparent 25%)}
.mini-bolt{position:absolute;left:78px;top:27px;width:190px;height:160px;background:url("../img/favicon.svg") center/contain no-repeat;filter:drop-shadow(0 0 26px rgba(255,49,125,.6))}
.bottom-cta h2{font-size:34px;line-height:1.1;text-transform:uppercase;margin:0 0 15px}.bottom-cta p{color:#c4bfcd;margin:0;line-height:1.6;max-width:540px}

.footer{padding:44px 64px 28px;display:grid;grid-template-columns:1.35fr .7fr .85fr .95fr 1fr;gap:45px;position:relative}.footer img{width:150px}.footer p{color:#aaa5b3;font-size:13px;line-height:1.65}.footer h4{text-transform:uppercase;font-size:12px;margin:0 0 18px}.footer a{display:block;color:#bcb7c6;font-size:13px;margin:0 0 10px}.social{display:flex;gap:12px}.social span{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#ddd;font-size:12px}.footer-box{border:1px solid rgba(122,47,255,.55);box-shadow:inset 0 0 0 1px rgba(255,122,0,.25);border-radius:8px;padding:22px}.copy{grid-column:1/-1;text-align:center;color:#777}

.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.show{opacity:1;transform:none}

@media(max-width:1100px){
  .topbar{padding:0 24px}.menu{gap:18px}.hero{grid-template-columns:1fr;padding-left:28px;padding-right:28px}.hero-right{min-height:560px}.section{padding-left:28px;padding-right:28px}.cards.six,.projects{grid-template-columns:repeat(2,1fr)}.tech-row{grid-template-columns:repeat(4,1fr)}.steps,.why-grid{grid-template-columns:repeat(2,1fr)}.steps:before{display:none}.bottom-cta{padding-left:28px;grid-template-columns:1fr}.mini-bolt{position:relative;left:auto;top:auto}.footer{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .topbar{height:74px}.logo img{width:135px}.hamb{display:block}.menu{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;background:#050506;padding:24px;border-bottom:1px solid var(--line)}.menu.open{display:flex}.menu a{padding:5px 0}.topbar>.outline-btn{display:none}
  .hero{padding:115px 22px 50px;min-height:auto}.hero h1{font-size:39px}.hero p{font-size:15px}.trusted div{gap:13px}.code-card{position:relative;left:auto;top:auto;width:100%;margin-top:40px}.folder-card,.compile-card{display:none}.hero-right{min-height:330px}.bolt{width:250px;height:250px;right:20px;top:145px}.grid-floor{inset:220px -20px -50px -20px}
  .section,.bottom-cta,.footer{padding-left:22px;padding-right:22px}.section-title{grid-template-columns:1fr;gap:20px}.section-title h2,.process h2,.bottom-cta h2{font-size:28px}.cards.six,.projects,.tech-row,.steps,.why-grid,.footer{grid-template-columns:1fr}.service-card{padding-left:95px}.circle-arrow{display:none}.bottom-cta{padding-top:34px}
}