:root {
  --bg: #080b16;
  --bg-soft: #0d1222;
  --card: rgba(17, 23, 40, 0.76);
  --line: rgba(255,255,255,0.09);
  --text: #f5f7ff;
  --muted: #aab3c7;
  --accent: #8b7cff;
  --accent-2: #32d6ff;
  --green: #63e6be;
  --pink: #ff79c6;
  --shadow: 0 28px 70px rgba(0,0,0,.34);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 75% 8%, rgba(104,85,255,.16), transparent 28%),
    radial-gradient(circle at 10% 38%, rgba(50,214,255,.08), transparent 25%),
    linear-gradient(180deg, #080b16 0%, #090d19 50%, #070a13 100%);
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(8,11,22,.72);
  backdrop-filter: blur(16px);
}
.site-header.scrolled { border-color: var(--line); }

.nav-wrap { min-height: 78px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width: 36px; height: 36px; display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(139,124,255,.95), rgba(50,214,255,.9));
  color: white; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  box-shadow: 0 10px 30px rgba(72, 66, 180, .28);
}
.brand strong { display:block; letter-spacing:.14em; font-size:.84rem; font-family:"Space Grotesk",sans-serif; }
.brand small { display:block; color:#7f8aa4; font-size:.66rem; margin-top:-2px; }
.nav { display:flex; align-items:center; gap:28px; font-size:.92rem; color:#b8c0d2; }
.nav a { transition: color .2s ease; }
.nav a:hover { color:white; }
.nav-cta { padding:10px 15px; border:1px solid var(--line); border-radius:999px; color:white !important; }
.nav-cta span { color:var(--accent-2); margin-left:4px; }
.menu-toggle { display:none; background:none; border:0; padding:6px; }
.menu-toggle span { display:block; width:25px; height:2px; background:white; margin:5px 0; border-radius:2px; }

.hero { padding-top: 86px; padding-bottom: 88px; }
.hero-grid { display:grid; grid-template-columns: 1.04fr .96fr; gap:70px; align-items:center; min-height:680px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#c6cce0; font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 14px rgba(50,214,255,.7); }
h1,h2,h3 { font-family:"Space Grotesk",sans-serif; margin:0; line-height:1.08; letter-spacing:-.03em; }
h1 { font-size:clamp(3.35rem, 7vw, 6.3rem); margin-top:22px; max-width:760px; }
h1 span, h2 span { color:transparent; background:linear-gradient(105deg, #fff 2%, #9c90ff 52%, #32d6ff 105%); background-clip:text; -webkit-background-clip:text; }
.hero-text { max-width:640px; color:var(--muted); font-size:1.08rem; margin:28px 0 0; }
.hero-actions { display:flex; align-items:center; gap:12px; margin-top:34px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-weight:700; font-size:.92rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#08101a; background:linear-gradient(135deg,#b0a6ff,#6cf0ff); box-shadow: 0 14px 40px rgba(86,174,255,.2); }
.btn-secondary { border:1px solid var(--line); color:#dce2f2; background:rgba(255,255,255,.025); }
.hero-proof { display:flex; gap:28px; margin-top:50px; }
.hero-proof div { display:flex; flex-direction:column; }
.hero-proof strong { font-family:"Space Grotesk",sans-serif; }
.hero-proof span { color:#778198; font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; }

.hero-visual { position:relative; min-height:520px; display:grid; place-items:center; }
.code-card {
  width:min(500px, 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:0 0 18px;
  background:rgba(12,17,31,.82);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotate(2.5deg);
  position:relative;
  z-index:2;
}
.window-bar { height:54px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid var(--line); }
.window-bar > span { width:8px; height:8px; border-radius:50%; background:#5c6274; }
.window-bar small { margin-left:auto; color:#707b94; font-size:.68rem; letter-spacing:.06em; }
pre { margin:0; padding:29px 28px; overflow:auto; font: 500 .88rem/1.85 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color:#e8ebf5; }
pre .pink { color:var(--pink); } pre .blue { color:#7dd9ff; } pre .green { color:var(--green); } pre .purple { color:#b59cff; }
.metric-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 18px; }
.metric-row > div { display:flex; gap:10px; padding:13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.metric-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:rgba(139,124,255,.12); color:#bdb4ff; }
.metric-row strong,.metric-row small { display:block; }
.metric-row small { color:#707a90; font-size:.68rem; margin-top:2px; }
.orb { position:absolute; border-radius:50%; filter:blur(3px); }
.orb-a { width:350px; height:350px; top:7%; right:7%; background:radial-gradient(circle, rgba(139,124,255,.30) 0%, rgba(139,124,255,.05) 40%, transparent 70%); }
.orb-b { width:250px; height:250px; bottom:6%; left:10%; background:radial-gradient(circle, rgba(50,214,255,.18) 0%, transparent 68%); }

.stats-strip { border-block:1px solid var(--line); background:rgba(255,255,255,.018); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); }
.stats > div { padding:24px 16px; display:flex; align-items:center; gap:13px; border-right:1px solid var(--line); }
.stats > div:first-child { border-left:1px solid var(--line); }
.stats strong { color:#a197ff; font-family:"Space Grotesk",sans-serif; }
.stats span { color:#8791a8; font-size:.82rem; }

.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:46px; }
.section-heading h2, .solution-copy h2, .about-card h2 { font-size:clamp(2.3rem, 4.4vw, 4rem); margin-top:17px; max-width:700px; }
.section-heading > p { color:var(--muted); max-width:420px; margin:0; }

.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.service-card { min-height:340px; padding:25px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(19,25,43,.78), rgba(11,16,29,.63)); position:relative; overflow:hidden; transition:transform .25s ease,border-color .25s ease; }
.service-card::after { content:""; position:absolute; inset:auto -20% -70% -20%; height:180px; background:radial-gradient(circle, rgba(123,110,255,.14), transparent 68%); pointer-events:none; }
.service-card:hover { transform:translateY(-6px); border-color:rgba(150,140,255,.32); }
.service-number { color:#667088; font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.service-icon { margin:30px 0 26px; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; font-size:1.15rem; color:#beb7ff; border:1px solid rgba(139,124,255,.18); background:rgba(139,124,255,.07); }
.service-card h3 { font-size:1.35rem; }
.service-card p { color:#8f99ad; font-size:.86rem; margin:13px 0 18px; }
.tags { display:flex; flex-wrap:wrap; gap:7px; }
.tags span { color:#788399; border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:.65rem; }

.alt-section { background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)); border-block:1px solid rgba(255,255,255,.035); }
.solution-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.solution-copy > p { color:var(--muted); max-width:610px; margin-top:24px; }
.check-list { margin-top:30px; display:grid; gap:17px; }
.check-list > div { display:flex; gap:15px; align-items:flex-start; }
.check-list > div > span { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(99,230,190,.09); color:var(--green); border:1px solid rgba(99,230,190,.12); font-size:.8rem; flex:none; }
.check-list strong,.check-list small { display:block; }
.check-list strong { font-size:.93rem; }
.check-list small { color:#778299; font-size:.78rem; margin-top:3px; }

.architecture-card { border:1px solid var(--line); padding:21px; border-radius:26px; background:rgba(12,17,31,.72); box-shadow:var(--shadow); }
.arch-header { display:flex; justify-content:space-between; gap:15px; color:#8c96ab; font-size:.74rem; padding-bottom:20px; border-bottom:1px solid var(--line); }
.live { color:#63e6be; }
.live i { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; box-shadow:0 0 10px rgba(99,230,190,.7); }
.arch-stack { padding:24px 10px 6px; }
.layer { border:1px solid var(--line); border-radius:17px; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.layer span { color:#707b91; font-size:.72rem; }
.layer b { font-size:.82rem; }
.l1 { background:linear-gradient(90deg, rgba(139,124,255,.13), rgba(139,124,255,.03)); }
.l2 { background:linear-gradient(90deg, rgba(50,214,255,.11), rgba(50,214,255,.02)); }
.l3 { background:linear-gradient(90deg, rgba(99,230,190,.09), rgba(99,230,190,.02)); }
.l4 { background:linear-gradient(90deg, rgba(255,121,198,.08), rgba(255,121,198,.02)); }
.connector { text-align:center; height:28px; display:grid; place-items:center; color:#626c81; }

.about-grid { display:grid; grid-template-columns:1.03fr .97fr; gap:35px; }
.about-card { padding:38px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(139,124,255,.10),rgba(15,21,37,.72)); }
.about-card p { color:var(--muted); max-width:720px; }
.about-badge { margin-top:34px; width:max-content; padding:10px 13px; border:1px solid var(--line); border-radius:12px; }
.about-badge span { display:block; font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.1em; font-size:.74rem; }
.about-badge small { color:#6f7a91; font-size:.64rem; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.value { padding:25px; border:1px solid var(--line); border-radius:20px; background:rgba(17,23,40,.55); }
.value-icon { color:#aaa0ff; font-size:1.15rem; }
.value h3 { margin-top:20px; font-size:1.08rem; }
.value p { color:#7e889f; font-size:.78rem; margin:9px 0 0; }

.process-section { padding-top:65px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.process-step { border-top:1px solid var(--line); padding-top:21px; }
.process-step > span { color:#7771ba; font-family:"Space Grotesk",sans-serif; font-size:.8rem; }
.process-step h3 { margin-top:20px; font-size:1.18rem; }
.process-step p { color:#7f8aa1; font-size:.8rem; margin-top:10px; max-width:230px; }

.cta-section { padding:90px 0 28px; }
.cta-box { display:flex; justify-content:space-between; align-items:end; gap:40px; padding:44px; border:1px solid rgba(139,124,255,.22); border-radius:28px; background:radial-gradient(circle at 80% 0%, rgba(82,70,200,.23), transparent 38%), linear-gradient(135deg,rgba(139,124,255,.08),rgba(16,22,38,.8)); }
.cta-box h2 { font-size:clamp(2.2rem,4vw,3.7rem); max-width:720px; margin-top:17px; }
.cta-box p { color:var(--muted); max-width:660px; margin-bottom:0; }
.cta-actions { display:flex; flex-direction:column; gap:15px; align-items:flex-start; min-width:180px; }
.contact-link { color:#8c95aa; font-size:.82rem; }
.contact-details { display:grid; grid-template-columns:.8fr 1fr 1.7fr; gap:25px; padding:25px 6px 0; }
.contact-details > div { display:flex; flex-direction:column; gap:5px; }
.contact-details span { color:#6d768a; font-size:.67rem; text-transform:uppercase; letter-spacing:.13em; }
.contact-details a,.contact-details strong { font-size:.78rem; font-weight:600; color:#b9c2d4; }

.footer { padding:45px 0 35px; margin-top:55px; border-top:1px solid var(--line); }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-copy { color:#666f84; font-size:.72rem; text-align:center; }
.back-top { color:#8992a6; font-size:.72rem; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }


.contact-grid {
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap:32px;
  align-items:stretch;
}
.contact-intro {
  padding:36px 8px 25px 0;
}
.contact-intro h2 {
  font-size:clamp(2.3rem, 4.2vw, 4rem);
  max-width:720px;
  margin-top:17px;
}
.contact-intro > p {
  color:var(--muted);
  max-width:620px;
  margin-top:22px;
}
.contact-details {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:30px 0 0;
}
.contact-details > div {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-details span {
  color:#6d768a;
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.contact-details a,.contact-details strong {
  font-size:.8rem;
  font-weight:600;
  color:#b9c2d4;
}
.cta-actions.compact {
  margin-top:30px;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}

.contact-form-card {
  border:1px solid var(--line);
  border-radius:28px;
  padding:25px;
  background:linear-gradient(145deg,rgba(19,25,43,.82),rgba(10,15,28,.84));
  box-shadow:var(--shadow);
}
.form-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:baseline;
  padding-bottom:19px;
  margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.form-heading span { font-family:"Space Grotesk",sans-serif; font-size:1.1rem; font-weight:700; }
.form-heading small { color:#6f7a91; font-size:.68rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { position:relative; margin-top:16px; }
.field label { display:block; color:#aeb7ca; font-size:.76rem; font-weight:600; margin-bottom:7px; }
.field label > span, .consent b { color:#8b7cff; }
.field input, .field select, .field textarea {
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  outline:none;
  border-radius:13px;
  padding:12px 13px;
  color:#eef1fa;
  background:rgba(255,255,255,.035);
  font:inherit;
  font-size:.82rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { resize:vertical; min-height:145px; }
.field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#777f93 50%),linear-gradient(135deg,#777f93 50%,transparent 50%); background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; }
.field input::placeholder, .field textarea::placeholder { color:#5d667b; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(139,124,255,.72);
  box-shadow:0 0 0 3px rgba(139,124,255,.10);
  background:rgba(139,124,255,.025);
}
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color:rgba(255,121,198,.72);
}
.field-error {
  min-height:17px;
  display:block;
  color:#ff96cc;
  font-size:.68rem;
  margin-top:4px;
}
.char-count { color:#687287; font-size:.63rem; text-align:right; margin-top:5px; }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:7px; color:#818ba0; font-size:.69rem; line-height:1.5; cursor:pointer; }
.consent input { margin-top:2px; accent-color:#8b7cff; }
.consent + .field-error { margin-left:28px; }
.form-submit { border:0; cursor:pointer; margin-top:17px; width:100%; justify-content:center; }
.form-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.form-note { color:#626d82; font-size:.63rem; line-height:1.5; margin:13px 0 0; }
.form-status { display:none; margin-top:12px; padding:11px 12px; border-radius:11px; font-size:.72rem; }
.form-status.show { display:block; }
.form-status.error { color:#ffc0df; border:1px solid rgba(255,121,198,.18); background:rgba(255,121,198,.06); }
.form-status.success { color:#aaf4db; border:1px solid rgba(99,230,190,.18); background:rgba(99,230,190,.05); }
.form-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

@media (max-width: 1020px) {
  .hero-grid, .solution-grid, .about-grid { grid-template-columns:1fr; }
  .hero-grid { gap:20px; min-height:auto; }
  .hero { padding-top:70px; }
  .hero-visual { min-height:440px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .process-grid { grid-template-columns:1fr 1fr; row-gap:35px; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-intro { padding-right:0; }
  .contact-details { grid-template-columns:1fr; padding-top:24px; }
  .contact-form-card { padding:21px; }
}

@media (max-width: 760px) {
  .container { width:min(100% - 28px, 1160px); }
  .nav { display:none; position:absolute; top:78px; left:14px; right:14px; padding:15px; flex-direction:column; align-items:stretch; gap:2px; border:1px solid var(--line); border-radius:18px; background:rgba(10,14,26,.97); }
  .nav.open { display:flex; }
  .nav a { padding:12px; }
  .menu-toggle { display:block; }
  .hero { padding-top:55px; }
  .hero-grid { gap:35px; }
  h1 { font-size:clamp(2.8rem, 15vw, 4.3rem); }
  .hero-text { font-size:.98rem; }
  .hero-proof { gap:18px; flex-wrap:wrap; margin-top:38px; }
  .hero-visual { min-height:380px; }
  .code-card { transform:rotate(1deg); }
  pre { padding:22px 18px; font-size:.75rem; }
  .metric-row { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .stats > div { border-bottom:1px solid var(--line); }
  .stats > div:nth-child(odd) { border-left:1px solid var(--line); }
  .section { padding:78px 0; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:22px; }
  .section-heading h2, .solution-copy h2, .about-card h2 { font-size:clamp(2.2rem, 11vw, 3.2rem); }
  .service-grid, .values-grid, .process-grid { grid-template-columns:1fr; }
  .service-card { min-height:0; }
  .cta-box { flex-direction:column; align-items:flex-start; padding:30px 24px; }
  .cta-actions { width:100%; }
  .cta-actions .btn { width:100%; justify-content:center; }
  .contact-grid { gap:25px; }
  .contact-form-card { border-radius:22px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .form-heading { flex-direction:column; gap:4px; }
  .cta-actions.compact { width:auto; }
  .footer-wrap { flex-direction:column; }
  .footer-copy { order:3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .btn, .service-card { transition:none; }
}