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

:root {
  --navy: #0b173d;
  --navy-2: #101f4f;
  --blue: #2775ff;
  --violet: #6546f5;
  --text: #101936;
  --muted: #69738c;
  --line: #e8ecf5;
  --light: #f6f8fc;
  --white: #fff;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.container { width: calc(100% - 96px); max-width: 1500px; margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232,236,245,.8);
}
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 180px; height: auto; display: block; }
nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; }
nav a { color: #4f5871; transition: .2s ease; }
nav a:hover { color: var(--navy); }
.nav-cta { padding: 11px 18px; border-radius: 999px; background: var(--navy); color: white !important; }

.hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 80% 25%, rgba(101,70,245,.13), transparent 30%),
    radial-gradient(circle at 62% 70%, rgba(39,117,255,.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8faff 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); align-items: center; gap: clamp(40px, 7vw, 120px); position: relative; z-index: 2; }
.eyebrow { color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .17em; margin-bottom: 18px; }
h1,h2,h3 { font-family: "Manrope", Arial, sans-serif; line-height: 1.08; margin: 0; color: var(--navy); }
h1 { font-size: clamp(48px, 6vw, 78px); letter-spacing: -.055em; max-width: 720px; }
h1 span { background: linear-gradient(90deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 620px; color: var(--muted); font-size: 18px; margin: 28px 0 34px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { padding: 14px 21px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.button.primary { background: var(--navy); color: #fff; }
.button.secondary { background: #fff; border: 1px solid var(--line); }

.hero-visual { min-height: 540px; position: relative; display: grid; place-items: center; }
.signal-card {
  width: min(350px, 80%);
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 80px rgba(19,32,75,.16);
  backdrop-filter: blur(20px);
  transform: rotate(-7deg);
}
.signal-top, .signal-footer { display: flex; justify-content: space-between; align-items: center; color: #69738c; font-size: 12px; font-weight: 700; }
.signal-top { padding-bottom: 34px; }
.dot { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; margin-right: 8px; display: inline-block; box-shadow: 0 0 0 6px rgba(39,117,255,.12); }
.signal-top span:last-child { margin-left: auto; }
.signal-bars { height: 170px; display: flex; gap: 10px; align-items: flex-end; padding: 10px 5px 22px; }
.signal-bars i { flex: 1; border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, var(--blue), var(--violet)); }
.signal-bars i:nth-child(1) { height: 38%; opacity: .45; }
.signal-bars i:nth-child(2) { height: 58%; opacity: .6; }
.signal-bars i:nth-child(3) { height: 82%; }
.signal-bars i:nth-child(4) { height: 64%; opacity: .75; }
.signal-bars i:nth-child(5) { height: 95%; }
.signal-footer { border-top: 1px solid var(--line); padding-top: 16px; }
.signal-footer strong { color: var(--navy); }
.orbit { position: absolute; border: 1px solid rgba(82,88,210,.14); border-radius: 50%; transform: rotate(-25deg); }
.orbit-a { width: 580px; height: 235px; }
.orbit-b { width: 470px; height: 620px; transform: rotate(55deg); border-color: rgba(39,117,255,.10); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .45; }
.glow-one { width: 220px; height: 220px; background: #6b5cff; right: 4%; top: 15%; }
.glow-two { width: 180px; height: 180px; background: #2f86ff; right: 35%; bottom: 5%; }

.section { padding: 120px 0; }
.two-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
h2 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.04em; }
.section-copy { color: var(--muted); font-size: 17px; max-width: 620px; }
.section-copy p { margin-top: 0; margin-bottom: 22px; }

.section-dark { background: var(--navy); color: #fff; }
.section-dark h2 { color: #fff; }
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 52px; }
.section-heading > p { color: #aeb8d1; max-width: 330px; margin: 0; }
.section-dark .eyebrow { color: #7da7ff; }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card { min-height: 300px; padding: 30px; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border-radius: var(--radius); }
.card-number { color: #789eff; font-size: 13px; font-weight: 800; letter-spacing: .1em; margin-bottom: 70px; }
.card h3 { color: #fff; font-size: 23px; margin-bottom: 14px; }
.card p { color: #aeb8d1; margin: 0; font-size: 15px; }

.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.tech-panel { min-height: 450px; border-radius: 30px; background: radial-gradient(circle at 55% 42%, rgba(83,67,245,.95), rgba(25,38,91,.98) 42%, #0b173d 75%); position: relative; overflow: hidden; box-shadow: 0 35px 80px rgba(19,32,75,.18); }
.tech-orb { position: absolute; width: 210px; height: 210px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 0 70px rgba(88,80,255,.7), inset 0 0 60px rgba(39,117,255,.4); }
.tech-orb:before, .tech-orb:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.tech-orb:before { inset: -55px; }
.tech-orb:after { inset: -105px; }
.tech-lines { position:absolute; inset:0; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.05) 35px 36px); transform: translateX(-30%); }
.tech-badge { position:absolute; right:26px; top:26px; color:#fff; font-size:11px; letter-spacing:.16em; font-weight:800; padding:10px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px; }
.lead { color: var(--muted); font-size: 17px; margin: 24px 0 28px; }
.feature-list { list-style:none; padding:0; margin:0; display:grid; gap:15px; font-weight:600; }
.feature-list li { display:flex; gap:12px; align-items:center; }
.feature-list span { width:24px; height:24px; display:grid; place-items:center; color:var(--blue); border-radius:50%; background:#eef4ff; font-size:12px; }

.trust { background: var(--light); }
.trust-inner { display:grid; grid-template-columns: 1fr 1fr; gap:100px; }
.trust-points { display:grid; gap:28px; }
.trust-points div { padding-bottom:22px; border-bottom:1px solid #e1e6f0; display:grid; gap:5px; }
.trust-points strong { font-family:"Manrope"; color:var(--navy); font-size:18px; }
.trust-points span { color:var(--muted); font-size:14px; }

.contact { padding-top: 100px; padding-bottom: 100px; }
.contact-box { background: linear-gradient(115deg, #0b173d, #162965 65%, #3b3bb4); color:#fff; border-radius:32px; padding:65px; display:flex; justify-content:space-between; align-items:end; gap:40px; overflow:hidden; position:relative; }
.contact-box:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; right:-80px; top:-100px; border:1px solid rgba(255,255,255,.14); box-shadow:0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.contact-box h2 { color:#fff; max-width:600px; }
.contact-box .eyebrow { color:#91b4ff; }
.contact-box p { color:#b7c1d9; max-width:600px; }
.email-link { position:relative; z-index:2; white-space:nowrap; color:#fff; font-weight:800; font-size:16px; padding:16px 20px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.08); }
.email-link span { margin-left:12px; color:#8caeff; }

footer { border-top:1px solid var(--line); padding:28px 0; color:#7a849b; font-size:12px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand img { width:140px; display:block; }
.footer-links { display:flex; gap:18px; }
.footer-links a:hover { color:var(--navy); }

@media (max-width: 850px) {
  .container { width:min(100% - 32px, 1160px); }
  nav a:not(.nav-cta) { display:none; }
  .hero { min-height: auto; padding:90px 0 80px; }
  .hero-grid, .two-col, .tech-grid, .trust-inner { grid-template-columns:1fr; gap:55px; }
  .hero-visual { min-height:380px; }
  .cards { grid-template-columns:1fr; }
  .section { padding:85px 0; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:20px; }
  .contact-box { padding:42px 30px; display:block; }
  .email-link { display:inline-block; margin-top:22px; }
  .footer-inner { flex-wrap:wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .signal-card { animation: float 6s ease-in-out infinite; }
  @keyframes float { 0%,100%{transform:rotate(-7deg) translateY(0)} 50%{transform:rotate(-5deg) translateY(-10px)} }
}