:root {
  --bg: #07111f;
  --bg-2: #0b1728;
  --surface: rgba(14, 31, 52, .72);
  --surface-2: #0e1f34;
  --text: #f4f8ff;
  --muted: #9cb0c8;
  --line: rgba(255,255,255,.10);
  --cyan: #27d4ff;
  --blue: #4b7dff;
  --purple: #8b5cf6;
  --green: #56e6a5;
  --shadow: 0 30px 70px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 2; }

.bg-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .18;
  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: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.orb { position: fixed; border-radius: 50%; filter: blur(95px); pointer-events: none; opacity: .22; }
.orb-1 { width: 440px; height: 440px; background: var(--blue); top: -120px; right: -100px; }
.orb-2 { width: 360px; height: 360px; background: var(--purple); left: -180px; top: 52vh; }

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(7,17,31,.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent; transition: .25s ease;
}
.header.scrolled { border-color: var(--line); background: rgba(7,17,31,.92); }
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-family: "Space Grotesk"; font-weight: 800; letter-spacing: -2px; font-size: 20px;
  color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 10px 25px rgba(39,212,255,.22);
}
.brand-text { font-family: "Space Grotesk"; font-size: 20px; letter-spacing: -.5px; }
.brand-text strong { color: var(--cyan); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a { color: #bed0e6; font-size: 14px; font-weight: 600; transition: .2s; }
.nav > a:hover { color: white; }
.nav .nav-cta { padding: 11px 18px; border-radius: 12px; color: white; border: 1px solid rgba(39,212,255,.35); background: rgba(39,212,255,.08); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 7px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px; background: white; }

.hero { min-height: 790px; display: flex; align-items: center; padding: 150px 0 90px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #8db0d7; font-size: 12px; text-transform: uppercase; letter-spacing: 1.7px; font-weight: 800; }
.eyebrow i { width: 24px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue)); display: inline-block; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; }
h1 { max-width: 760px; font-size: clamp(48px, 5.7vw, 78px); line-height: .99; letter-spacing: -3.8px; margin: 20px 0 25px; }
h1 span { background: linear-gradient(110deg, var(--cyan), #7dd3fc 40%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 660px; color: var(--muted); font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; gap: 13px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 0 22px; border-radius: 14px; font-weight: 800; font-size: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #041019; background: linear-gradient(135deg, var(--cyan), #7ce6ff); box-shadow: 0 18px 35px rgba(39,212,255,.2); }
.btn-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #dbeafe; }
.btn-secondary:hover { border-color: rgba(255,255,255,.24); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 33px; }
.hero-badges span { font-size: 11px; color: #8299b3; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); padding: 8px 10px; border-radius: 9px; }
.hero-badges b { color: #dcecff; }

.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.hero-visual:before { content:""; position:absolute; width: 80%; height:80%; border-radius:50%; background: radial-gradient(circle, rgba(39,212,255,.13), transparent 65%); }
.terminal-card { position: relative; width: min(100%, 525px); background: rgba(8,19,33,.88); border: 1px solid rgba(91,194,255,.18); border-radius: 22px; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); overflow: hidden; transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
.terminal-top { height: 50px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); color:#617891; font: 11px monospace; }
.dots { display:flex; gap:7px; }.dots i{width:8px;height:8px;border-radius:50%;background:#3b526c}.dots i:nth-child(1){background:#ff6b6b}.dots i:nth-child(2){background:#ffd166}.dots i:nth-child(3){background:#56e39f}
.code { padding: 28px 24px 31px; font: 13px/2.05 "SFMono-Regular", Consolas, monospace; color: #c8d8ea; }
.code p { margin:0; white-space:nowrap; }.code em {display:inline-block;width:32px;color:#3d536a;font-style:normal}.purple{color:#c084fc}.cyan{color:#5ee4ff}.green{color:#79e5b1}.terminal-ok{margin-top:8px!important;color:#66e5a9!important}
.floating-card { position:absolute; display:flex; align-items:center; gap:11px; min-width:132px; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(13,29,48,.9); backdrop-filter:blur(10px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.floating-card > span { color: var(--cyan); font:700 20px "Space Grotesk"; }.floating-card small{display:block;color:#6f89a5;font-size:9px;text-transform:uppercase;letter-spacing:1px}.floating-card b{font-size:12px}.card-flutter{right:-15px;top:80px}.card-vr{left:-18px;bottom:72px}.card-api{right:15px;bottom:14px}

.section { padding: 110px 0; }
.section-head { max-width: 720px; margin-bottom: 50px; }
.section-head.center { text-align:center; margin-left:auto; margin-right:auto; }.section-head.center .eyebrow { justify-content:center; }
h2 { font-size: clamp(34px, 4vw, 54px); line-height:1.05; letter-spacing:-2.3px; margin:16px 0 18px; }
.section-head p { color:var(--muted); line-height:1.75; font-size:16px; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }
.service-card { position:relative; padding:28px 25px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(17,38,63,.78), rgba(10,23,40,.68)); overflow:hidden; transition:.3s ease; }
.service-card:after{content:"";position:absolute;inset:auto -60px -70px auto;width:160px;height:160px;background:var(--blue);filter:blur(70px);opacity:0;transition:.3s}.service-card:hover{transform:translateY(-7px);border-color:rgba(39,212,255,.26)}.service-card:hover:after{opacity:.17}
.icon { width:49px;height:49px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,rgba(39,212,255,.14),rgba(75,125,255,.13));border:1px solid rgba(39,212,255,.17);color:#78e7ff;font:700 17px monospace;margin-bottom:25px; }
.service-card h3{font-size:20px;margin:0 0 12px}.service-card p{color:#8ea5be;line-height:1.65;font-size:13px;min-height:88px}.service-card ul{list-style:none;padding:17px 0 0;margin:17px 0 0;border-top:1px solid var(--line)}.service-card li{color:#bed0e4;font-size:12px;padding:5px 0}.service-card li:before{content:"✓";color:var(--green);margin-right:8px;font-weight:800}

.tech-section { background: linear-gradient(180deg, transparent, rgba(19,41,69,.34), transparent); border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035); }
.tech-cloud { display:flex;flex-wrap:wrap;justify-content:center;gap:11px;max-width:950px;margin:0 auto; }
.tech { padding:11px 16px;border-radius:11px;color:#9eb2ca;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);font-size:12px;font-weight:700;transition:.2s}.tech:hover{color:white;border-color:rgba(39,212,255,.3);transform:translateY(-2px)}.tech.featured{color:#dff9ff;border-color:rgba(39,212,255,.18);background:rgba(39,212,255,.055)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}.split .section-head{position:sticky;top:130px}.text-link{display:inline-flex;gap:11px;margin-top:10px;color:#6fe4ff;font-weight:800;font-size:13px}.features{border-top:1px solid var(--line)}.feature{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:27px 0;border-bottom:1px solid var(--line)}.feature>b{font:700 12px "Space Grotesk";color:#4c6a87;padding-top:5px}.feature h3{margin:0 0 8px;font-size:20px}.feature p{margin:0;color:#8299b3;line-height:1.6;font-size:13px}

.cta-section { padding:35px 0 110px; }.cta-box{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:52px 58px;border-radius:28px;background:linear-gradient(120deg,#3277f7,#6557ee 58%,#7546dd);box-shadow:0 30px 75px rgba(39,79,210,.24);overflow:hidden;position:relative}.cta-box:after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;border:70px solid rgba(255,255,255,.05);right:-100px;top:-180px}.cta-box>div,.cta-box>a{position:relative;z-index:2}.eyebrow.light{color:rgba(255,255,255,.72)}.eyebrow.light i{background:white}.cta-box h2{font-size:clamp(30px,3vw,44px);margin:13px 0 11px;max-width:680px}.cta-box p{margin:0;color:rgba(255,255,255,.72);max-width:650px;line-height:1.65}.btn-light{flex:none;background:white;color:#24306b;box-shadow:0 15px 35px rgba(0,0,0,.15)}

.footer { border-top:1px solid var(--line); background:#050d17; }.footer-top{display:flex;justify-content:space-between;gap:60px;padding:55px 0 38px}.footer-top>div:first-child p{max-width:420px;color:#607992;font-size:12px;line-height:1.7;margin:18px 0 0}.footer-brand .brand-mark{width:38px;height:38px;border-radius:11px;font-size:17px}.footer-nav{display:flex;align-items:center;gap:24px}.footer-nav a{font-size:12px;color:#8198b2}.footer-nav a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0 25px;border-top:1px solid rgba(255,255,255,.07);color:#566f89;font-size:11px}.footer-bottom strong{color:#8fa5bc;font-weight:600}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:45px}.hero{padding-top:135px}.hero-copy{text-align:center}.hero-copy .eyebrow,.hero-actions,.hero-badges{justify-content:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-visual{min-height:440px}.services-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr;gap:30px}.split .section-head{position:static}.cta-box{align-items:flex-start;flex-direction:column}.footer-top{flex-direction:column}.footer-nav{flex-wrap:wrap}
}
@media (max-width: 720px){
  .container{width:min(100% - 28px,1180px)}.nav-wrap{height:70px}.menu-toggle{display:block}.nav{position:absolute;top:69px;left:14px;right:14px;padding:14px;display:none;flex-direction:column;align-items:stretch;gap:4px;border:1px solid var(--line);border-radius:15px;background:#091523;box-shadow:var(--shadow)}.nav.open{display:flex}.nav>a{padding:12px}.nav .nav-cta{text-align:center;margin-top:5px}.hero{min-height:auto;padding:120px 0 65px}h1{font-size:45px;letter-spacing:-2.6px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-visual{min-height:350px}.terminal-card{transform:none}.code{padding:21px 15px;font-size:10px}.floating-card{display:none}.section{padding:78px 0}.services-grid{grid-template-columns:1fr}.service-card p{min-height:0}.section-head{margin-bottom:34px}h2{font-size:37px;letter-spacing:-1.6px}.cta-section{padding:10px 0 75px}.cta-box{padding:35px 27px;border-radius:22px}.btn-light{width:100%}.footer-bottom{flex-direction:column;align-items:flex-start}.footer-top{padding-top:42px}.tech{font-size:11px;padding:9px 12px}
}