*{box-sizing:border-box;scroll-behavior:smooth}
:root{--bg:#020617;--panel:rgba(15,23,42,.72);--line:rgba(255,255,255,.11);--blue:#38bdf8;--blue2:#2563eb;--green:#22c55e;--text:#f8fafc;--muted:#cbd5e1}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:white;overflow-x:hidden}
.aurora{position:fixed;inset:-20%;z-index:-4;background:radial-gradient(circle at 20% 20%,rgba(56,189,248,.28),transparent 28%),radial-gradient(circle at 80% 20%,rgba(37,99,235,.27),transparent 30%),radial-gradient(circle at 50% 90%,rgba(34,197,94,.14),transparent 35%);filter:blur(8px);animation:aurora 10s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.05)}}
.grid-bg{position:fixed;inset:0;z-index:-3;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.particles{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(56,189,248,.8);box-shadow:0 0 18px rgba(56,189,248,.9);animation:floatParticle linear infinite}
@keyframes floatParticle{from{transform:translateY(105vh);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateY(-10vh);opacity:0}}
.header{position:sticky;top:0;z-index:50;padding:16px 7%;display:flex;align-items:center;justify-content:space-between;background:rgba(2,6,23,.72);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}
.brand img{height:58px;display:block}
nav a{color:white;text-decoration:none;margin:0 14px;font-weight:900;opacity:.9}
nav a:hover{color:var(--blue)}
.top-btn,.btn{display:inline-block;padding:15px 24px;border-radius:16px;background:linear-gradient(135deg,var(--blue2),var(--blue));color:white;text-decoration:none;font-weight:900;box-shadow:0 14px 35px rgba(14,165,233,.32)}
.dark{background:#0f172a;border:1px solid #334155;box-shadow:none}
.hero{min-height:90vh;padding:80px 7%;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.badge{display:inline-block;padding:10px 16px;border:1px solid var(--blue);border-radius:999px;color:var(--blue);background:rgba(15,23,42,.82);font-weight:900;margin-bottom:20px}
h1{font-size:64px;line-height:1.02;margin:0 0 22px;letter-spacing:-2.5px}
.hero p,.section-head p,.cta p{color:var(--muted);font-size:21px;line-height:1.55}
.hero-actions{margin-top:22px}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;max-width:560px}
.trust-row div{padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(15,23,42,.55)}
.trust-row b{display:block;font-size:28px;color:var(--blue)}
.trust-row span{color:var(--muted);font-size:14px}
.showcase{position:relative;min-height:560px}
.orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.65}
.orb-blue{width:180px;height:180px;background:#38bdf8;right:8%;top:4%;animation:pulse 4s infinite}
.orb-green{width:120px;height:120px;background:#22c55e;left:5%;bottom:15%;animation:pulse 5s infinite}
@keyframes pulse{50%{transform:scale(1.18);opacity:.35}}
.laptop{width:100%;min-height:370px;background:#020617;border:1px solid rgba(56,189,248,.38);border-radius:30px;box-shadow:0 40px 110px rgba(0,0,0,.58),0 0 80px rgba(56,189,248,.2);overflow:hidden;transform:perspective(900px) rotateY(-8deg) rotateX(4deg)}
.laptop-top{height:46px;background:#0f172a;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.laptop-top span{width:12px;height:12px;border-radius:50%;background:#ef4444}.laptop-top span:nth-child(2){background:#f59e0b}.laptop-top span:nth-child(3){background:#22c55e}
#codeBox{margin:0;padding:28px;min-height:320px;color:#7dd3fc;font-size:17px;line-height:1.65;white-space:pre-wrap}
.phone{position:absolute;right:4%;bottom:-5px;width:218px;height:400px;border-radius:38px;background:#020617;border:7px solid #111827;box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 55px rgba(34,197,94,.24);padding:14px;animation:phoneFloat 4s ease-in-out infinite}
@keyframes phoneFloat{50%{transform:translateY(-12px)}}
.phone-speaker{width:62px;height:6px;border-radius:999px;background:#334155;margin:0 auto 18px}
.phone-screen{background:linear-gradient(180deg,#0f172a,#020617);border-radius:24px;height:326px;padding:18px;border:1px solid rgba(255,255,255,.08)}
.phone-screen h4{color:var(--blue);margin:0 0 16px;font-size:24px}.app-card{background:rgba(255,255,255,.07);border-radius:13px;padding:11px;margin:10px 0;color:white;font-size:14px}
section{padding:84px 7%}
.section-head{max-width:800px;margin-bottom:34px}.section-head span{color:var(--blue);font-weight:900;letter-spacing:3px}.section-head h2,h2{font-size:46px;line-height:1.08;margin:10px 0 16px;letter-spacing:-1px}
.service-grid,.portfolio-grid,.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:22px}
.service-card,.portfolio-card,.why-grid div{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:28px;text-decoration:none;color:white;transition:.25s;position:relative;overflow:hidden}
.service-card:before,.portfolio-card:before,.why-grid div:before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(56,189,248,.35),transparent,rgba(34,197,94,.2));opacity:0;transition:.25s;z-index:-1}
.service-card:hover,.portfolio-card:hover,.why-grid div:hover{transform:translateY(-9px);border-color:var(--blue);box-shadow:0 24px 75px rgba(56,189,248,.15)}.service-card:hover:before,.portfolio-card:hover:before,.why-grid div:hover:before{opacity:1}
.service-card div{font-size:42px}.service-card h3,.why-grid h3{font-size:25px;color:var(--blue)}.service-card p,.portfolio-card p,.why-grid p{color:var(--muted);line-height:1.55}.service-card b{color:var(--green);font-size:22px}
.portfolio-card.big{grid-column:span 2}.portfolio-card b{display:block;font-size:23px;margin-top:18px}
.mock{height:190px;border-radius:25px;background:linear-gradient(135deg,#0f172a,#1d4ed8);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:44px;font-weight:900;box-shadow:inset 0 0 45px rgba(255,255,255,.04)}.mock span{display:block;font-size:16px;margin-top:12px;color:#e0f2fe}
.ai{background:linear-gradient(135deg,#312e81,#0ea5e9)}.vpn{background:linear-gradient(135deg,#064e3b,#2563eb)}.web{background:linear-gradient(135deg,#1e293b,#0284c7)}.max{background:linear-gradient(135deg,#1d4ed8,#111827)}.tg{background:linear-gradient(135deg,#0284c7,#0f172a)}
.why-grid b{display:inline-flex;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--blue2),var(--blue));align-items:center;justify-content:center;margin-bottom:14px}
.cta{text-align:center;background:linear-gradient(135deg,rgba(37,99,235,.78),rgba(15,23,42,.96))}
.float{position:fixed;right:22px;bottom:22px;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green);color:white;text-decoration:none;font-size:27px;box-shadow:0 12px 35px rgba(34,197,94,.45);z-index:80}
footer{padding:35px 7%;text-align:center;color:#94a3b8;background:#020617}
.reveal{opacity:0;transform:translateY(28px);transition:.75s}.reveal.active{opacity:1;transform:translateY(0)}
@media(max-width:980px){nav,.top-btn{display:none}.hero{grid-template-columns:1fr}h1{font-size:40px}.hero p{font-size:18px}.showcase{min-height:620px}.brand img{height:48px}.portfolio-card.big{grid-column:auto}}
@media(max-width:560px){.hero,section{padding-left:5%;padding-right:5%}.laptop{transform:none}.phone{position:relative;right:auto;bottom:auto;margin:24px auto 0}.showcase{min-height:auto}.trust-row{grid-template-columns:1fr}h2,.section-head h2{font-size:34px}}

.lead-form{
  max-width:760px;
  display:grid;
  gap:14px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  padding:28px;
}

.lead-form input,
.lead-form textarea,
.lead-form select{
  width:100%;
  padding:16px;
  border-radius:15px;
  border:1px solid #334155;
  background:#020617;
  color:white;
  font-size:16px;
}

.lead-form button{
  padding:17px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:white;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}

.lead-form button:hover{
  filter:brightness(1.08);
}

.crm-list{
  display:grid;
  gap:18px;
}

.crm-card{
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  padding:24px;
}

.crm-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}

.crm-top b{
  color:#38bdf8;
  font-size:22px;
}

.crm-top span{
  background:#22c55e;
  color:#02130a;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
}

.crm-date{
  color:#94a3b8;
  font-size:14px;
}

.crm-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}

.crm-filters button{
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.78);
  color:white;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}

.crm-filters button:hover{
  border-color:#38bdf8;
  color:#38bdf8;
}

.crm-actions{
  display:grid;
  grid-template-columns:1fr 1fr 2fr auto;
  gap:10px;
  margin-top:18px;
}

.crm-actions select,
.crm-actions input{
  padding:13px;
  border-radius:13px;
  border:1px solid #334155;
  background:#020617;
  color:white;
}

.crm-actions button{
  padding:13px 18px;
  border:0;
  border-radius:13px;
  background:#22c55e;
  color:white;
  font-weight:900;
  cursor:pointer;
}

.crm-top span.new{background:#38bdf8;color:#02111a}
.crm-top span.work{background:#f59e0b;color:#1a1000}
.crm-top span.wait{background:#a855f7;color:white}
.crm-top span.done{background:#22c55e;color:#02130a}
.crm-top span.cancel{background:#ef4444;color:white}

@media(max-width:850px){
  .crm-actions{
    grid-template-columns:1fr;
  }
}