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

:root{
  --bg:#050615;
  --bg2:#07091d;
  --panel:#0a0d22;
  --panel2:#111535;
  --text:#f7f8ff;
  --muted:#a4aac8;
  --line:rgba(124,95,255,.20);
  --blue:#00b7ff;
  --purple:#7d3cff;
  --pink:#c83cff;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:#050615;
  color:var(--text);
  overflow-x:hidden;
  letter-spacing:-.02em;
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

.site-bg{
  position:fixed;inset:0;z-index:-5;
  background:
    radial-gradient(circle at 76% 13%,rgba(105,64,255,.38),transparent 27%),
    radial-gradient(circle at 0% 47%,rgba(0,152,255,.30),transparent 17%),
    radial-gradient(circle at 48% 0%,rgba(77,49,214,.22),transparent 35%),
    linear-gradient(180deg,#08081b 0%,#070920 42%,#040511 100%);
}
.site-bg:after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:74px 74px;
  opacity:.42;
}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.orb-a{width:520px;height:520px;right:9%;top:7%;background:#6336ff}
.orb-b{width:420px;height:420px;left:-10%;top:42%;background:#008fff}
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(122,78,255,.10),transparent 65%);
  transform:translate(-50%,-50%);
}

.header{
  width:min(1220px,calc(100% - 48px));
  margin:22px auto 0;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 0 18px;
  border:1px solid rgba(126,98,255,.18);
  background:rgba(5,6,21,.84);
  backdrop-filter:blur(18px);
  border-radius:17px;
  position:sticky;
  top:14px;
  z-index:50;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.logo{display:flex;align-items:center;font-size:27px;font-weight:900;letter-spacing:-2px}
.logo-mark{
  width:27px;height:31px;margin-right:1px;display:inline-grid;place-items:center;
  background:linear-gradient(145deg,#0db7ff 0%,#8646ff 55%,#ff4cff 100%);
  color:#fff;border-radius:8px 3px 9px 3px;
  box-shadow:0 0 24px rgba(128,74,255,.55);
}
.nav{display:flex;gap:36px;margin-left:auto;margin-right:34px;text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.18em;color:#d8dcff}
.nav a{opacity:.82;position:relative}
.nav a:hover{opacity:1;color:#fff}
.nav a:after{content:"";position:absolute;left:50%;bottom:-23px;width:28px;height:2px;background:linear-gradient(90deg,var(--blue),var(--pink));border-radius:8px;transform:translateX(-50%) scaleX(0);transition:.25s}
.nav a:hover:after{transform:translateX(-50%) scaleX(1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:15px;
  padding:13px 19px;font-weight:900;border:0;cursor:pointer;transition:.25s ease;
  font-size:14px;letter-spacing:-.01em;
}
.btn-primary{background:linear-gradient(90deg,#08bdff 0%,#8249ff 55%,#d344ff 100%);box-shadow:0 12px 36px rgba(112,67,255,.36);color:#fff}
.btn-ghost{border:1px solid rgba(160,133,255,.48);background:rgba(255,255,255,.025);font-size:12px;padding:11px 18px}
.btn-soft{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);font-size:13px}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.nav-toggle{display:none;background:none;border:0;width:42px;height:42px}
.nav-toggle span{display:block;height:2px;background:#fff;margin:8px;border-radius:2px}

.section{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:82px 0}
.hero{
  width:min(1120px,calc(100% - 48px));
  min-height:660px;
  padding-top:52px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:38px;
  align-items:center;
}
.eyebrow{
  margin:0 0 20px;
  text-transform:uppercase;
  letter-spacing:.44em;
  color:#8d70ff;
  font-size:10px;
  font-weight:900;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(52px,6.7vw,82px);
  line-height:.88;
  letter-spacing:-.075em;
  margin-bottom:25px;
  text-transform:uppercase;
  max-width:580px;
}
h1 span{
  display:block;
  background:linear-gradient(90deg,#08bdff 0%,#6a54ff 45%,#d23fff 100%);
  -webkit-background-clip:text;
  color:transparent;
}
h2{font-size:clamp(35px,4vw,52px);line-height:.98;letter-spacing:-.062em;margin-bottom:18px}
h3{letter-spacing:-.04em}
.lead{font-size:17px;line-height:1.6;color:#bec4de;max-width:540px}
.actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}

.hero-visual{position:relative;min-height:520px}
.number-stage{
  position:absolute;inset:20px 0 0 10px;display:grid;place-items:center;perspective:850px;
}
.big-one{
  font-size:440px;font-weight:900;line-height:.75;letter-spacing:-.18em;
  color:transparent;
  background:linear-gradient(145deg,#39d9ff 0%,#294dff 28%,#7b3eff 52%,#331172 82%);
  -webkit-background-clip:text;
  filter:drop-shadow(0 0 34px rgba(102,72,255,.88));
  transform:rotateY(-22deg) rotateX(6deg);
  animation:float 5.5s ease-in-out infinite;
}
.number-stage:before{
  content:"";position:absolute;width:540px;height:210px;border:1px solid rgba(105,93,255,.28);
  border-radius:50%;transform:rotateX(68deg);box-shadow:0 0 90px rgba(71,55,255,.24);
}
.number-stage:after{
  content:"";position:absolute;width:420px;height:120px;bottom:80px;
  background:radial-gradient(ellipse,rgba(96,70,255,.72),transparent 72%);
  filter:blur(18px);
}
.ring{position:absolute;border:1px solid rgba(76,101,255,.22);border-radius:50%;transform:rotateX(70deg)}
.ring-1{width:520px;height:520px;animation:spin 24s linear infinite}
.ring-2{width:690px;height:690px;opacity:.5;animation:spin 35s linear reverse infinite}
.holo-card{
  position:absolute;z-index:5;width:190px;padding:20px 18px;
  border:1px solid rgba(136,105,255,.25);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(15,17,45,.95),rgba(7,8,25,.82));
  box-shadow:0 22px 70px rgba(15,12,60,.42), inset 0 1px 0 rgba(255,255,255,.055);
}
.holo-card b{display:block;font-size:13px;text-transform:uppercase;margin:8px 0 7px}
.holo-card small{display:block;color:#b5bad3;font-size:11px;line-height:1.55}
.icon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:rgba(120,68,255,.17);border:1px solid rgba(146,100,255,.34);color:#a36cff;font-size:13px}
.card-left{left:0;top:208px}
.card-right{right:42px;top:88px}
.card-bottom{right:18px;bottom:115px}

.trust{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:22px 25px;
  display:grid;
  grid-template-columns:1.35fr repeat(5,1fr);
  align-items:center;
  gap:24px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.trust span{font-size:10px;text-transform:uppercase;letter-spacing:.42em;color:#8671ff;font-weight:900}
.trust b{font-size:18px;text-align:center;color:#c9cce0;opacity:.72}

.split{display:grid;grid-template-columns:.78fr 1.55fr;gap:76px;align-items:start}
.section-intro p:not(.eyebrow){color:#aeb4cf;line-height:1.7;font-size:14px;max-width:370px}
.link{display:inline-block;margin-top:26px;color:#9a74ff;font-weight:900;font-size:13px;border-bottom:1px solid rgba(154,116,255,.55);padding-bottom:8px}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{
  min-height:286px;
  padding:28px 25px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(16,18,45,.82),rgba(7,8,25,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 60px rgba(0,0,0,.18);
}
.service-card h3{font-size:21px;margin:25px 0 12px}
.service-card p{font-size:13px;color:#aeb4cc;line-height:1.65}
.service-icon{
  display:block;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff 0%,#8f5aff 18%,#271b6b 49%,#07091d 72%);
  box-shadow:0 0 38px rgba(130,83,255,.6);
}
.cubes{border-radius:18px;background:radial-gradient(circle,#fff 0,#8c52ff 16%,#2c1e68 48%,#07091d 72%)}
.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.radar{background:repeating-radial-gradient(circle,#8956ff 0 3px,transparent 4px 16px),radial-gradient(circle,#101431,#07091d)}

.portfolio{display:grid;grid-template-columns:.75fr 1.35fr;gap:75px;align-items:start;padding-top:75px}
.portfolio-grid{display:grid;grid-template-columns:1.2fr .95fr;gap:20px}
.project{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(16,18,45,.78),rgba(6,7,22,.72));
  padding:24px;
  min-height:210px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.project-large{grid-row:span 2;min-height:460px}
.project h3{font-size:20px;margin:22px 0 7px}
.project p{font-size:10px;letter-spacing:.20em;color:#9ba0bd;text-transform:uppercase;font-weight:900}
.dashboard-mock{
  height:260px;border-radius:18px;padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  background:linear-gradient(145deg,#111638,#060817);
  border:1px solid rgba(103,110,255,.22);
}
.dashboard-mock span{border-radius:10px;background:#1a2148;border:1px solid rgba(255,255,255,.04)}
.phone-mock{
  height:125px;border-radius:18px;
  background:radial-gradient(circle at 68% 28%,rgba(160,70,255,.95),transparent 30%),linear-gradient(135deg,#12183c,#070817);
  border:1px solid rgba(137,108,255,.30);
  transform:skew(-8deg);
}
.double:after{content:"";display:block;width:58%;height:100%;margin-left:auto;border-radius:16px;background:#151b3f;border:1px solid rgba(255,255,255,.06)}

.process{padding-top:70px}
.process .section-intro{max-width:790px}
.process .section-intro p:not(.eyebrow){max-width:none}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;margin-top:45px;position:relative}
.process-line:before{content:"";position:absolute;left:4%;right:4%;top:43px;border-top:1px dashed rgba(151,111,255,.35)}
.step{position:relative;padding-top:88px}
.step:before{
  content:"";position:absolute;top:0;left:0;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#08091c 47%,#15193e 51%,#814cff 59%,transparent 66%);
  box-shadow:0 0 28px rgba(137,73,255,.70);
}
.step span{color:#9659ff;font-size:22px;font-weight:900}
.step h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin:6px 0 12px}
.step p{font-size:13px;line-height:1.65;color:#aab0c8}

.seo-panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-top:75px}
.stats,.testimonial{
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(14,17,42,.82),rgba(7,8,23,.75));
  padding:34px;
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats .eyebrow{grid-column:1/-1}
.stats strong{display:block;font-size:30px;letter-spacing:-.06em}
.stats span{font-size:12px;line-height:1.35;color:#aeb4ce}
blockquote{font-size:19px;line-height:1.55;margin:0 0 28px}
.person{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center}
.person span{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#fff,#777991)}
.person b{font-size:13px}.person small{font-size:12px;color:#aeb4ce}

.cta{
  margin-top:0;
  padding:38px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:38px;
  align-items:center;
  border:1px solid rgba(0,182,255,.35);
  border-radius:21px;
  background:
    radial-gradient(circle at 100% 20%,rgba(104,65,255,.22),transparent 38%),
    linear-gradient(145deg,rgba(15,19,46,.85),rgba(7,9,24,.74));
  box-shadow:0 0 48px rgba(0,137,255,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.cta h2{font-size:42px;max-width:450px}
.cta p:not(.eyebrow){color:#c1c6dc;font-size:14px}
.contact-form{
  display:flex;align-items:center;
  padding:8px;border-radius:22px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.contact-form input{flex:1;min-width:0;border:0;outline:0;color:#fff;background:transparent;padding:0 20px}
.contact-form input::placeholder{color:#79809d}

.footer{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 44px;
  display:grid;
  grid-template-columns:1.45fr repeat(3,1fr);
  gap:72px;
}
.footer-brand p{max-width:290px}
.footer p,.footer a,.footer span{color:#aab0c9;font-size:13px;line-height:1.9}
.footer h4{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#fff;margin:0 0 15px}
.footer a{display:block}
.socials{display:flex;gap:17px;margin-top:18px}
.copyright{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.07);padding-top:28px;margin-top:18px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.show{opacity:1;transform:none}

@keyframes float{50%{transform:rotateY(-13deg) rotateX(9deg) translateY(-16px)}}
@keyframes spin{to{transform:rotateX(70deg) rotateZ(360deg)}}

@media(max-width:1050px){
  .nav,.header-cta{display:none}.nav-toggle{display:block}
  .nav.open{display:flex;position:absolute;left:12px;right:12px;top:70px;flex-direction:column;gap:18px;background:#090b1d;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px}
  .hero,.split,.portfolio,.seo-panel,.cta{grid-template-columns:1fr}
  .hero-visual{min-height:520px}.services{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr 1fr}.trust span{grid-column:1/-1}
  .portfolio-grid{grid-template-columns:1fr}.process-line{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .header,.hero,.section,.trust,.footer{width:calc(100% - 28px)}
  .section{padding:64px 0}.hero{padding-top:48px;min-height:auto}
  h1{font-size:46px}.lead{font-size:16px}.actions,.contact-form{flex-direction:column}
  .hero-visual{min-height:390px}.big-one{font-size:300px}
  .holo-card{width:165px;padding:14px}.card-left{left:0;top:160px}.card-right{right:0;top:30px}.card-bottom{display:none}
  .services,.process-line,.stats,.footer{grid-template-columns:1fr}.process-line:before{display:none}
  .portfolio-grid{display:block}.project{margin-bottom:18px}.project-large{min-height:390px}
  .cta h2{font-size:34px}
}