:root{
  --navy:#061725;
  --blue:#0b74ff;
  --cyan:#2fd4ff;
  --text:#0f2437;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px 7%;background:rgba(4,18,31,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)
}
.brand{display:flex;align-items:center;gap:12px}
.bird{font-size:42px;filter:drop-shadow(0 0 10px #1fb9ff)}
.brand strong{display:block;font-size:34px;letter-spacing:1px}
.brand span{display:block;letter-spacing:7px;font-size:13px}
nav{display:flex;gap:28px;font-weight:700;font-size:14px}
nav a{padding:8px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--cyan)}
.quick{display:flex;gap:18px;font-size:14px}
.hero{
  min-height:560px;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:40px;padding:70px 7%;
  color:#fff;background:
  radial-gradient(circle at 80% 20%,rgba(20,140,255,.42),transparent 35%),
  linear-gradient(130deg,#061725 0%,#071c31 50%,#042d4f 100%);
  overflow:hidden;position:relative
}
.hero:after{
  content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(47,212,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(47,212,255,.07) 1px,transparent 1px);
  background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,black 40%,black)
}
.heroText,.heroArt{position:relative;z-index:1}
.eyebrow{color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
h1{font-size:56px;line-height:1.05;margin:14px 0 22px;max-width:650px}
.lead{font-size:19px;line-height:1.7;max-width:620px;color:#d7e7f5}
.buttons{display:flex;gap:16px;margin-top:30px}
.btn{padding:15px 24px;border-radius:6px;font-weight:800}
.primary{background:linear-gradient(135deg,#0077ff,#00c2ff);color:#fff}
.ghost{border:1px solid rgba(255,255,255,.7);color:#fff}
.heroArt{height:390px}
.screen,.tablet,.robot,.chip,.cable{position:absolute}
.screen{
  width:470px;height:280px;right:0;top:25px;border-radius:16px;background:linear-gradient(135deg,#07111f,#0a3b69);
  border:8px solid #1a2f45;box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.screen:after{content:"";position:absolute;inset:40px 20px;background:linear-gradient(135deg,transparent,#2fd4ff,transparent);opacity:.85;border-radius:50%}
.tablet{
  width:170px;height:240px;left:60px;top:95px;border-radius:18px;background:linear-gradient(135deg,#121c30,#7f3cff,#25d8ff);
  border:7px solid #24364b;transform:rotate(-7deg);box-shadow:0 25px 50px rgba(0,0,0,.35)
}
.robot{font-size:92px;left:250px;top:160px;filter:drop-shadow(0 0 20px #21bfff)}
.chip{font-size:58px;right:80px;bottom:38px}
.cable{width:120px;height:120px;right:210px;bottom:10px;border:12px solid #0b8fff;border-radius:50%;opacity:.65}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:22px 7%;background:#fff;box-shadow:0 8px 35px rgba(0,0,0,.08)}
.features div{padding:20px;border-right:1px solid #e7edf4}
.features b{display:block;font-size:16px;margin-bottom:7px}
.features span{color:#5d6c7a;font-size:14px}
.section{padding:60px 7% 35px;text-align:center}
.section h2{font-size:30px;margin:0}
.sectionSub{color:#66798b}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px;text-align:left}
.card{padding:28px;border:1px solid #e6edf5;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(15,36,55,.06);transition:.2s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,36,55,.12)}
.icon{font-size:45px;margin-bottom:12px}
.card h3{margin:0 0 10px;font-size:19px}
.card p{color:#5e7183;line-height:1.6}
.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:36px 7%;background:linear-gradient(135deg,#061725,#06345a);color:#fff;text-align:center}
.stats strong{display:block;font-size:34px;color:#fff}
.stats span{color:#cce2f4}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:55px 7%;background:#f5f9fd}
.contact h2{font-size:30px;margin:0 0 10px}
.contactBox{display:grid;gap:12px}
.contactBox a{background:#fff;padding:16px 18px;border-radius:10px;border:1px solid #e1e9f2;color:#0b5fb8;font-weight:700}
.whatsapp{
  position:fixed;right:25px;bottom:25px;z-index:30;background:#24d366;color:#fff;padding:14px 22px;border-radius:999px;
  box-shadow:0 12px 35px rgba(0,0,0,.2);text-align:center;font-size:13px
}
footer{padding:22px 7%;background:#04121f;color:#b6c8d8;text-align:center}
@media(max-width:960px){
  .topbar{flex-wrap:wrap}.quick{display:none}nav{width:100%;justify-content:center;gap:18px}
  .hero{grid-template-columns:1fr;min-height:auto}.heroArt{height:300px}.screen{width:330px;height:210px}.tablet{left:0}.robot{left:150px}
  h1{font-size:40px}.features,.cards,.stats,.contact{grid-template-columns:1fr}.features div{border-right:0;border-bottom:1px solid #e7edf4}
}
.about-section{
    padding:80px 20px;
    background:#f8fafc;
}

.about-box{
    max-width:900px;
    margin:auto;
    background:#ffffff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.about-box p{
    font-size:18px;
    line-height:1.9;
    color:#334155;
    margin-bottom:20px;
}
.about-section{
  padding:80px 7%;
  background:#f8fafc;
  text-align:center;
}

.about-section .container{
  max-width:1000px;
  margin:0 auto;
}

.about-section h2{
  font-size:32px;
  margin-bottom:10px;
  color:#061725;
}

.about-section .section-title p{
  color:#5e7183;
  font-size:18px;
  margin-bottom:35px;
}

.about-box{
  max-width:900px;
  margin:0 auto;
  background:#ffffff;
  padding:40px;
  border-radius:18px;
  box-shadow:0 14px 40px rgba(15,36,55,.08);
  text-align:left;
}
.service-card{
    transition:all .35s ease;
}

.service-card:hover{
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 20px 40px rgba(15,111,255,.18);
}