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

:root {
  --bg: #050914;
  --bg-soft: #08101e;
  --panel: rgba(11, 20, 36, 0.72);
  --panel-solid: #0b1424;
  --line: rgba(130, 174, 255, 0.14);
  --line-strong: rgba(130, 174, 255, 0.28);
  --text: #f5f8ff;
  --muted: #8f9cb2;
  --blue: #2f7cff;
  --blue-light: #65b8ff;
  --cyan: #42e8ff;
  --green: #61f5b0;
  --max: 1200px;
  --radius: 22px;
  --shadow: 0 30px 100px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
.brand-logo {
  width: 150px;
  height: auto;
  display: block;
  object-fit: contain;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: rgba(47,124,255,.38); color: white; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 2; }
.section-pad { padding: 120px 0; position: relative; }
.noise { position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(35, 117, 255, .12), transparent 65%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: opacity .3s ease; }
#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .45; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 90; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(5, 9, 20, .76); backdrop-filter: blur(18px); border-color: var(--line); }
.nav-wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(101,184,255,.45); border-radius: 12px; background: linear-gradient(145deg, rgba(47,124,255,.23), rgba(66,232,255,.04)); box-shadow: inset 0 0 22px rgba(47,124,255,.16), 0 0 30px rgba(47,124,255,.12); position: relative; overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; inset: -40% 50% 40% -50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: rotate(35deg); }
.brand-mark span { font-family: "Space Grotesk", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -.06em; }
.brand-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.03em; font-size: 19px; }
.brand-name > span { color: var(--blue-light); font-size: .72em; }
.main-nav { display: flex; align-items: center; gap: 34px; color: #aab5c9; font-size: 14px; font-weight: 500; }
.main-nav a { transition: color .2s; }
.main-nav a:hover { color: white; }
.nav-cta { border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 17px; color: #eaf3ff !important; background: rgba(47,124,255,.08); }
.nav-cta:hover { background: rgba(47,124,255,.18); border-color: rgba(101,184,255,.6); }
.menu-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: white; margin: 4px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 150px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 850px; height: 850px; right: -230px; top: -180px; background: radial-gradient(circle, rgba(28,105,255,.2), rgba(7,16,36,.06) 48%, transparent 69%); border-radius: 50%; }
.hero::after { content: ""; position: absolute; width: 600px; height: 600px; left: -360px; bottom: -100px; background: radial-gradient(circle, rgba(66,232,255,.08), transparent 65%); border-radius: 50%; }
.hero-grid, .cta-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(98, 146, 220, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(98, 146, 220, .055) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a8b7cf; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(14,25,44,.5); margin-bottom: 26px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(97,245,176,.8); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.05; margin: 0; }
.hero h1 { font-size: clamp(48px, 5.6vw, 82px); letter-spacing: -.055em; max-width: 800px; }
.gradient-text { background: linear-gradient(105deg, #fff 0%, #7ec6ff 35%, #387cff 72%, #42e8ff 105%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: gradientShift 7s linear infinite; }
@keyframes gradientShift { to { background-position: 200% center; } }
.hero-lead { color: #a8b3c7; font-size: 18px; max-width: 650px; margin: 28px 0 0; }
.hero-lead strong { color: #edf5ff; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; padding: 0 23px; font-size: 14px; font-weight: 650; border: 1px solid transparent; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-primary { background: linear-gradient(135deg, #2f7cff, #155eea); box-shadow: 0 16px 45px rgba(47,124,255,.32), inset 0 1px rgba(255,255,255,.18); }
.btn-primary:hover { box-shadow: 0 20px 55px rgba(47,124,255,.45); }
.btn-ghost { border-color: var(--line-strong); color: #dce8fb; background: rgba(12,22,40,.4); }
.btn-ghost:hover { border-color: rgba(101,184,255,.55); background: rgba(27,51,89,.35); }
.btn-light { color: #061025; background: #f3f8ff; box-shadow: 0 16px 45px rgba(255,255,255,.16); }
.small-btn { min-height: 42px; padding: 0 17px; }
.play-icon { font-size: 16px; color: var(--blue-light); }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 38px; color: #8e9aaf; font-size: 13px; }
.hero-proof p { margin: 0; line-height: 1.5; }
.hero-proof strong { color: #dce8f8; font-weight: 600; }
.proof-stack { display: flex; }
.proof-stack span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; margin-left: -8px; border: 2px solid var(--bg); font-size: 9px; font-weight: 800; background: #12213a; color: #a7cbff; }
.proof-stack span:first-child { margin-left: 0; }
.hero-visual { min-height: 570px; position: relative; display: grid; place-items: center; }
.glass-card { background: linear-gradient(145deg, rgba(17,30,53,.84), rgba(7,14,27,.72)); border: 1px solid rgba(124,170,255,.22); backdrop-filter: blur(18px); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.04); }
.tech-console { width: min(100%, 540px); border-radius: 20px; overflow: hidden; position: relative; z-index: 3; transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); animation: consoleFloat 6s ease-in-out infinite; }
@keyframes consoleFloat { 0%,100%{transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(0)} 50%{transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-10px)} }
.console-bar { height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line); color: #75849c; font-size: 11px; }
.window-dots { display: flex; gap: 6px; }
.window-dots i, .terminal-head span { width: 8px; height: 8px; border-radius: 50%; background: #24324a; }
.window-dots i:first-child, .terminal-head span:first-child { background: #ff5c6c; }
.window-dots i:nth-child(2), .terminal-head span:nth-child(2) { background: #ffcb5c; }
.window-dots i:nth-child(3), .terminal-head span:nth-child(3) { background: #5ce0a2; }
.live-pill { margin-left: auto; border: 1px solid rgba(97,245,176,.25); color: #72e3ae; background: rgba(97,245,176,.06); border-radius: 999px; padding: 4px 8px; font-size: 9px; }
.console-body { padding: 24px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.code-line { display: grid; grid-template-columns: 26px 1fr; min-height: 27px; color: #9db1cf; }
.line-no { color: #33435d; user-select: none; }
.code-line em { color: #ad8dff; font-style: normal; }
.code-line b { color: #6dd8ff; font-weight: 500; }
.code-line i { color: #8bc1ff; font-style: normal; }
.console-result { margin-top: 18px; padding: 16px; border: 1px solid rgba(97,245,176,.14); background: rgba(97,245,176,.045); border-radius: 12px; display: flex; align-items: center; gap: 12px; }
.console-result .check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(97,245,176,.12); color: var(--green); }
.console-result small { display: block; font-size: 9px; color: #62d9a3; letter-spacing: .1em; }
.console-result strong { display: block; font-family: Inter, sans-serif; color: #d8f9e9; font-size: 12px; margin-top: 2px; }
.orbit { position: absolute; border: 1px solid rgba(72,141,255,.13); border-radius: 50%; }
.orbit-one { width: 530px; height: 530px; animation: spin 20s linear infinite; }
.orbit-two { width: 420px; height: 420px; border-style: dashed; animation: spinReverse 24s linear infinite; }
.orbit::after { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 20px var(--blue); position: absolute; top: 14%; left: 15%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
.floating-chip { position: absolute; z-index: 5; border: 1px solid var(--line-strong); background: rgba(9,18,33,.85); backdrop-filter: blur(12px); padding: 10px 14px; border-radius: 12px; color: #c6d2e6; font-size: 11px; box-shadow: 0 15px 45px rgba(0,0,0,.25); animation: chipFloat 5s ease-in-out infinite; }
.floating-chip span { color: var(--blue-light); margin-right: 8px; font-family: ui-monospace, monospace; }
.chip-a { top: 8%; right: 1%; }
.chip-b { bottom: 13%; left: -2%; animation-delay: -1.8s; }
.chip-c { bottom: 2%; right: 8%; animation-delay: -3s; }
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #617089; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint span { width: 1px; height: 30px; background: linear-gradient(var(--blue-light), transparent); animation: scrollLine 1.7s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0%{transform:scaleY(.1);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(8,15,29,.72); overflow: hidden; padding: 19px 0; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 32px; animation: marquee 35s linear infinite; font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: .16em; color: #738199; }
.marquee-track i { color: #244d94; font-size: 8px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-head { display: flex; justify-content: space-between; gap: 80px; align-items: flex-end; margin-bottom: 56px; }
.section-head > div { flex: 1; }
.section-head > p { max-width: 460px; color: var(--muted); margin: 0 0 3px; }
.section-kicker { color: var(--blue-light); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .13em; font-weight: 700; display: block; margin-bottom: 16px; }
.section-head h2, .engineering-copy h2, .process-head h2, .stack-copy h2 { font-size: clamp(38px, 4.5vw, 64px); letter-spacing: -.045em; }
.muted { color: #647187; }
.solutions { background: linear-gradient(180deg, rgba(8,16,30,.2), transparent); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { position: relative; min-height: 350px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15,26,45,.68), rgba(8,15,29,.62)); overflow: hidden; transition: transform .35s, border-color .35s, background .35s; }
.service-card:hover { transform: translateY(-8px); border-color: rgba(101,184,255,.38); background: linear-gradient(145deg, rgba(18,33,58,.78), rgba(8,15,29,.72)); }
.service-card.featured { grid-row: span 2; min-height: 720px; background: radial-gradient(circle at 70% 15%, rgba(47,124,255,.18), transparent 38%), linear-gradient(145deg, rgba(15,29,52,.9), rgba(7,14,27,.78)); }
.service-card.wide { grid-column: span 2; min-height: 350px; }
.card-index { position: absolute; top: 22px; right: 24px; color: #34435b; font-family: ui-monospace, monospace; font-size: 11px; }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(47,124,255,.09); border: 1px solid rgba(101,184,255,.18); margin-bottom: 72px; }
.service-icon svg { width: 24px; fill: none; stroke: #72b9ff; stroke-width: 1.4; }
.service-card.featured .service-icon { margin-top: 190px; }
.service-card h3 { font-size: 24px; letter-spacing: -.03em; max-width: 370px; }
.service-card p { color: var(--muted); font-size: 14px; margin: 16px 0 0; max-width: 470px; }
.service-card ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; color: #b9c6d9; font-size: 13px; }
.service-card li::before { content: "↳"; color: var(--blue-light); margin-right: 9px; }
.card-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(47,124,255,.16), transparent 68%); top: -40px; right: -50px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.tag-row span { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: #8090a8; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.wide-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; height: 100%; }
.wide-content .service-icon { margin-bottom: 32px; }
.automation-flow { display: grid; align-items: center; gap: 12px; }
.flow-node { min-height: 54px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; gap: 13px; padding: 0 16px; color: #8d9ab0; font-size: 11px; background: rgba(6,12,24,.45); }
.flow-node span { color: #4e6484; font-family: ui-monospace, monospace; }
.flow-node.active { border-color: rgba(66,232,255,.3); color: #d9efff; box-shadow: 0 0 40px rgba(47,124,255,.09); }
.flow-node.active span { color: var(--cyan); }
.flow-line { height: 24px; width: 1px; background: #1e2d44; margin-left: 26px; position: relative; }
.flow-line i { width: 4px; height: 7px; border-radius: 99px; background: var(--blue-light); position: absolute; left: -1.5px; animation: flow 1.5s linear infinite; }
@keyframes flow { from{top:0} to{top:100%} }

.engineering { overflow: hidden; background: radial-gradient(circle at 15% 45%, rgba(47,124,255,.08), transparent 35%); }
.engineering-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.system-map { aspect-ratio: 1; width: 100%; max-width: 540px; margin: auto; border-radius: 32px; position: relative; overflow: hidden; background-image: radial-gradient(rgba(101,184,255,.16) 1px, transparent 1px); background-size: 22px 22px; }
.system-map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(47,124,255,.15), transparent 45%); }
.map-label { position: absolute; top: 22px; left: 24px; color: #4c5f7c; font: 9px ui-monospace, monospace; letter-spacing: .1em; }
.map-core { width: 112px; height: 112px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; align-content: center; border: 1px solid rgba(101,184,255,.45); background: radial-gradient(circle, #173e78, #0b1c36 70%); box-shadow: 0 0 60px rgba(47,124,255,.35), inset 0 0 28px rgba(101,184,255,.16); z-index: 3; }
.map-core span { font: 800 27px "Space Grotesk"; }
.map-core small { font-size: 7px; color: #65b8ff; letter-spacing: .2em; }
.map-node { position: absolute; z-index: 3; min-width: 104px; padding: 10px 13px; border-radius: 10px; background: rgba(8,17,32,.85); border: 1px solid var(--line-strong); display: flex; align-items: center; gap: 8px; font-size: 9px; color: #95a8c6; }
.map-node i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 10px var(--blue-light); }
.node-1 { left: 8%; top: 20%; } .node-2 { right: 6%; top: 18%; } .node-3 { right: 2%; bottom: 34%; } .node-4 { left: 39%; bottom: 7%; } .node-5 { left: 3%; bottom: 23%; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.map-lines path { fill: none; stroke: rgba(81,137,228,.26); stroke-width: 1; stroke-dasharray: 5 6; animation: dash 15s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -120; } }
.engineering-copy > p { color: var(--muted); max-width: 600px; }
.engineering-copy .big-copy { font-size: 22px; color: #d8e3f3; line-height: 1.4; margin-top: 30px; }
.feature-list { display: grid; gap: 22px; margin-top: 42px; }
.feature-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.feature-list span { color: #42618c; font: 10px ui-monospace, monospace; }
.feature-list p { margin: 0; color: #79869b; font-size: 13px; }
.feature-list strong { display: block; color: #dbe5f5; font-size: 14px; margin-bottom: 4px; }

.stats-section { padding: 0 0 120px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(10,18,33,.55); }
.stat { min-height: 180px; padding: 34px; display: flex; flex-wrap: wrap; align-content: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { font: 700 48px/1 "Space Grotesk"; letter-spacing: -.05em; }
.stat > span { color: var(--blue-light); font: 600 22px "Space Grotesk"; margin: 2px 0 0 4px; }
.stat p { flex-basis: 100%; color: #718097; font-size: 11px; margin: 10px 0 0; text-transform: uppercase; letter-spacing: .08em; }

.projects { background: #070c16; border-top: 1px solid rgba(130,174,255,.07); border-bottom: 1px solid rgba(130,174,255,.07); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #b7c8df; border-bottom: 1px solid #3c4e69; padding-bottom: 6px; }
.text-link span { color: var(--blue-light); }
.projects-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.project-card { min-height: 520px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(155deg, #0c1728, #070e1b); padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s, border-color .35s; }
.project-card:hover { transform: translateY(-7px); border-color: rgba(101,184,255,.38); }
.project-main { grid-row: span 2; min-height: 1060px; }
.project-top { display: flex; justify-content: space-between; color: #596a84; font: 9px ui-monospace, monospace; letter-spacing: .1em; position: relative; z-index: 3; }
.project-mock { flex: 1; display: grid; place-items: center; min-height: 300px; position: relative; }
.dashboard-mock { perspective: 1000px; }
.dashboard-mock::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(47,124,255,.22),transparent 65%); }
.mock-sidebar, .mock-main { position: relative; z-index: 2; }
.dashboard-mock > .mock-sidebar { position: absolute; left: 8%; top: 24%; width: 65px; height: 52%; border: 1px solid var(--line); background: #091425; border-radius: 14px 0 0 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 18px; transform: rotateY(5deg) rotateX(3deg); }
.mock-sidebar b { font: 700 14px "Space Grotesk"; color: var(--blue-light); }
.mock-sidebar i { width: 20px; height: 3px; border-radius: 99px; background: #243753; }
.mock-main { width: 77%; height: 52%; border: 1px solid rgba(101,184,255,.28); border-radius: 0 14px 14px 0; background: linear-gradient(145deg,#0e1c31,#091321); padding: 18px; transform: translateX(30px) rotateY(-7deg) rotateX(3deg); box-shadow: 0 35px 70px rgba(0,0,0,.38); }
.mock-head { display:flex; justify-content:space-between; align-items:center; }
.mock-head span { width: 80px; height: 6px; border-radius: 9px; background: #354865; }
.mock-head div { width: 24px; height: 24px; border-radius: 50%; background: #1d65c6; }
.mock-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }
.mock-kpis i { height: 54px; border:1px solid #1d304d; border-radius:8px; background:linear-gradient(145deg,rgba(47,124,255,.12),transparent); }
.mock-chart { margin-top:12px; height:130px; border-radius:8px; background:rgba(5,10,20,.6); padding:12px; }
.mock-chart svg { width:100%; height:100%; }
.mock-chart path { fill:none; stroke:#4c9cff; stroke-width:3; filter:drop-shadow(0 0 6px #2f7cff); }
.project-info { display: flex; align-items: end; justify-content: space-between; gap: 20px; position: relative; z-index: 3; border-top: 1px solid var(--line); padding-top: 24px; }
.project-info h3 { font-size: 25px; }
.project-info p { color: #718097; font-size: 12px; margin: 8px 0 0; }
.round-arrow { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--blue-light); flex: 0 0 auto; transition: background .25s, transform .25s; }
.project-card:hover .round-arrow { background: var(--blue); color: white; transform: rotate(45deg); }
.phone-mock { background: radial-gradient(circle,rgba(97,76,255,.16),transparent 53%); }
.phone { height: 310px; width: 158px; border: 5px solid #1a2840; border-radius: 27px; padding: 8px; background: #050b15; box-shadow: 0 30px 60px rgba(0,0,0,.4); transform: rotate(6deg); }
.phone-speaker { width: 36px; height: 5px; border-radius:10px; background:#23334d; margin:0 auto 10px; }
.phone-ui { height:calc(100% - 16px); border-radius:17px; background:linear-gradient(160deg,#14396d,#091525 55%); padding:14px; }
.app-hello { width:70px;height:6px;background:#8bbdff;border-radius:5px; }
.app-balance { height:55px;border:1px solid rgba(255,255,255,.12);border-radius:10px;margin-top:18px;background:rgba(255,255,255,.04); }
.app-actions { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px; }
.app-actions i { aspect-ratio:1;border-radius:8px;background:rgba(47,124,255,.25); }
.app-list { display:grid;gap:7px;margin-top:14px; }
.app-list i { height:28px;border-radius:7px;background:rgba(255,255,255,.05); }
.nodes-mock { background:radial-gradient(circle,rgba(47,124,255,.14),transparent 55%); }
.nodes-mock svg { position:absolute;width:90%;height:90%; }
.nodes-mock path { fill:none;stroke:#31588f;stroke-width:2;stroke-dasharray:5 5; }
.mini-node { position:absolute;z-index:2;width:70px;height:48px;display:grid;place-items:center;border-radius:10px;background:#0f2039;border:1px solid rgba(101,184,255,.28);font:700 10px ui-monospace,monospace;color:#88c4ff;box-shadow:0 12px 25px rgba(0,0,0,.25); }
.n1{left:8%;top:24%}.n2{left:41%;top:43%;background:#174886;border-color:#4b9fff}.n3{right:5%;top:18%}.n4{right:5%;bottom:19%}

.process-head { max-width: 850px; text-align: center; margin: 0 auto 80px; }
.process-head p { color: var(--muted); max-width: 620px; margin: 24px auto 0; }
.timeline { max-width: 930px; margin: auto; }
.timeline-item { display: grid; grid-template-columns: 85px 34px 1fr; gap: 24px; min-height: 190px; }
.timeline-number { font: 600 14px ui-monospace, monospace; color: #50617d; padding-top: 9px; }
.timeline-line { position: relative; display: flex; justify-content: center; }
.timeline-line::before { content: ""; position: absolute; width: 1px; top: 14px; bottom: 0; background: linear-gradient(#2f7cff, rgba(47,124,255,.08)); }
.timeline-line i { width: 13px; height: 13px; border-radius: 50%; background: #0a1322; border: 2px solid #387cff; box-shadow: 0 0 18px rgba(47,124,255,.55); margin-top: 8px; z-index: 1; }
.timeline-item:last-child .timeline-line::before { display: none; }
.timeline-content { border-top: 1px solid var(--line); padding: 22px 0 50px; }
.timeline-content small { color: var(--blue-light); font: 9px ui-monospace, monospace; letter-spacing: .13em; }
.timeline-content h3 { font-size: 28px; margin-top: 7px; }
.timeline-content p { color: var(--muted); max-width: 650px; font-size: 14px; }

.stack-section { background: radial-gradient(circle at 70% 45%, rgba(47,124,255,.08), transparent 30%); }
.stack-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }
.stack-copy p { color: var(--muted); max-width: 520px; }
.stack-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; color: #9eabc0; font-size: 12px; }
.stack-status span { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 12px var(--green); border-radius:50%; }
.stack-cloud { height: 440px; border-radius: 50%; position: relative; border: 1px solid rgba(101,184,255,.08); background: radial-gradient(circle,rgba(47,124,255,.08),transparent 63%); }
.stack-cloud::before,.stack-cloud::after { content:"";position:absolute;border-radius:50%;border:1px dashed rgba(101,184,255,.1);inset:13%;animation:spin 30s linear infinite; }
.stack-cloud::after { inset:28%;animation:spinReverse 22s linear infinite; }
.stack-cloud span { position:absolute;left:var(--x);top:var(--y);transform:scale(var(--s));border:1px solid var(--line-strong);background:rgba(9,18,33,.8);backdrop-filter:blur(8px);padding:10px 14px;border-radius:10px;color:#b6c7df;font:600 11px "Space Grotesk";box-shadow:0 12px 25px rgba(0,0,0,.2);z-index:3;animation:chipFloat 6s ease-in-out infinite; }

.cta-section { padding-top: 70px; }
.cta-panel { min-height: 540px; border-radius: 32px; position: relative; overflow: hidden; padding: 70px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 70px; background: linear-gradient(135deg,#165bcb,#0b2d6b 65%,#081c43); border:1px solid rgba(127,186,255,.38); box-shadow:0 40px 110px rgba(0,37,104,.3); }
.cta-grid-bg { mask-image:linear-gradient(to right,black,transparent);opacity:.45; }
.cta-orb { position:absolute;border-radius:50%;filter:blur(2px); }
.orb-a { width:360px;height:360px;right:-90px;top:-130px;background:radial-gradient(circle,rgba(66,232,255,.35),transparent 66%); }
.orb-b { width:310px;height:310px;left:30%;bottom:-220px;background:radial-gradient(circle,rgba(120,98,255,.35),transparent 66%); }
.cta-content { position:relative;z-index:3; }
.cta-content h2 { font-size:clamp(38px,4.7vw,64px);letter-spacing:-.05em; }
.cta-content p { color:#b9d3f8;max-width:650px;font-size:16px;margin:22px 0 32px; }
.cta-content .section-kicker { color:#9ed5ff; }
.cta-content.full-width { max-width:900px; }
.cta-terminal { position:relative;z-index:3;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(4,13,32,.55);backdrop-filter:blur(16px);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);transform:rotate(2deg); }
.terminal-head { height:44px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:6px;padding:0 16px; }
.terminal-lines { padding:25px;font:11px ui-monospace,monospace;color:#9cb3d3;min-height:220px; }
.terminal-lines p { margin:0 0 14px; }
.terminal-lines i { color:#5fd2ff;font-style:normal;margin-right:8px; }
.terminal-lines em { color:#65f1af;font-style:normal;margin-right:8px; }
.terminal-lines b { color:#7de8ff; }
.terminal-lines .typing { margin-top:28px;color:#d9e9ff; }

.site-footer { padding: 40px 0 26px; border-top: 1px solid var(--line); }
.footer-top { display:grid;grid-template-columns:.7fr 1.2fr .5fr;gap:50px;align-items:center;padding-bottom:38px; }
.footer-top p { color:#738198;font-size:13px;max-width:520px;margin:0; }
.footer-whatsapp { justify-self:end;font-size:13px;color:#c8d8ed; }
.footer-whatsapp span { color:var(--blue-light);margin-left:6px; }
.footer-bottom { border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:#536077;font-size:10px;letter-spacing:.06em;text-transform:uppercase; }
.whatsapp-float { position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#26d366;box-shadow:0 14px 40px rgba(38,211,102,.28);z-index:80;transition:transform .25s; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.04); }
.whatsapp-float svg { width:27px;fill:white; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--delay,0ms); }
.reveal.visible { opacity:1;transform:none; }

/* Página interna */
.internal-page { padding-top:84px; }
.internal-hero { padding-top:130px;padding-bottom:70px; }
.internal-hero::before { content:"";position:absolute;width:700px;height:700px;right:-250px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,255,.18),transparent 68%); }
.internal-hero h1 { font-size:clamp(56px,8vw,110px);letter-spacing:-.06em; }
.internal-hero p { max-width:690px;color:var(--muted);font-size:17px;margin-top:28px; }
.portfolio-page { padding-top:30px; }
.portfolio-list { display:grid;gap:20px; }
.portfolio-item { min-height:430px;border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:grid;grid-template-columns:60px .85fr 1.15fr;gap:35px;align-items:center;background:linear-gradient(145deg,rgba(15,26,45,.72),rgba(7,14,27,.72)); }
.portfolio-number { color:#3d4e68;font:11px ui-monospace,monospace;align-self:start; }
.portfolio-copy > span { color:var(--blue-light);font:9px ui-monospace,monospace;letter-spacing:.12em; }
.portfolio-copy h2 { font-size:34px;margin-top:12px; }
.portfolio-copy p { color:var(--muted);font-size:13px; }
.portfolio-placeholder { height:100%;min-height:300px;border:1px dashed rgba(101,184,255,.23);border-radius:16px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(47,124,255,.025) 0,rgba(47,124,255,.025) 10px,transparent 10px,transparent 20px); }
.portfolio-placeholder span { color:#43536c;font:9px ui-monospace,monospace;letter-spacing:.14em; }

@media (max-width: 1040px) {
  .hero-layout,.engineering-grid,.stack-layout { grid-template-columns:1fr; }
  .hero-copy { max-width:800px; }
  .hero-visual { min-height:520px; }
  .engineering-grid { gap:60px; }
  .engineering-visual { order:2; }
  .system-map { max-width:620px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .service-card.featured { grid-row:auto;min-height:460px; }
  .service-card.featured .service-icon { margin-top:100px; }
  .service-card.wide { grid-column:span 2; }
  .projects-grid { grid-template-columns:1fr 1fr; }
  .project-main { grid-row:auto;grid-column:span 2;min-height:700px; }
  .cta-panel { grid-template-columns:1fr;padding:55px; }
  .cta-terminal { max-width:580px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-top p { grid-column:span 2;order:3; }
  .portfolio-item { grid-template-columns:45px 1fr; }
  .portfolio-placeholder { grid-column:2; }
}

@media (max-width: 780px) {
  .section-pad { padding:86px 0; }
  .container { width:min(100% - 28px,var(--max)); }
  .menu-toggle { display:block; }
  .main-nav { position:fixed;inset:84px 14px auto;background:rgba(8,15,29,.96);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;align-items:stretch;padding:20px;gap:3px;opacity:0;transform:translateY(-12px);pointer-events:none;transition:.25s;box-shadow:var(--shadow); }
  .main-nav.open { opacity:1;transform:none;pointer-events:auto; }
  .main-nav a { padding:13px 14px;border-radius:10px; }
  .nav-cta { margin-top:8px;text-align:center; }
  .hero { padding-top:130px;min-height:auto; }
  .hero-layout { gap:40px; }
  .hero h1 { font-size:clamp(43px,14vw,66px); }
  .hero-lead { font-size:16px; }
  .hero-actions { flex-direction:column;align-items:stretch; }
  .btn { width:100%; }
  .hero-visual { min-height:430px; }
  .tech-console { transform:none;animation:consoleFloatMobile 6s ease-in-out infinite; }
  @keyframes consoleFloatMobile { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
  .orbit-one{width:410px;height:410px}.orbit-two{width:330px;height:330px}
  .chip-a{right:0;top:0}.chip-b{left:0;bottom:5%}.chip-c{display:none}
  .scroll-hint{display:none}
  .section-head { align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:38px; }
  .section-head h2,.engineering-copy h2,.process-head h2,.stack-copy h2 { font-size:clamp(36px,11vw,50px); }
  .services-grid { grid-template-columns:1fr; }
  .service-card,.service-card.featured { min-height:auto;padding:25px; }
  .service-card.featured .service-icon,.service-icon { margin:70px 0 35px; }
  .service-card.wide { grid-column:auto; }
  .wide-content { grid-template-columns:1fr; }
  .engineering-grid { gap:55px; }
  .map-node { min-width:auto;padding:8px 10px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat { border-bottom:1px solid var(--line); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(3),.stat:nth-child(4) { border-bottom:0; }
  .projects-grid { grid-template-columns:1fr; }
  .project-card,.project-main { grid-column:auto;min-height:570px; }
  .project-main { min-height:650px; }
  .timeline-item { grid-template-columns:38px 24px 1fr;gap:12px; }
  .stack-layout { gap:50px; }
  .stack-cloud { height:390px;overflow:hidden; }
  .cta-panel { padding:38px 24px;border-radius:24px;gap:45px; }
  .cta-content h2 { font-size:clamp(36px,11vw,52px); }
  .footer-top { grid-template-columns:1fr; }
  .footer-top p { grid-column:auto;order:initial; }
  .footer-whatsapp { justify-self:start; }
  .footer-bottom { flex-direction:column; }
  .portfolio-item { grid-template-columns:1fr;padding:24px; }
  .portfolio-placeholder { grid-column:auto; }
  .portfolio-number { display:none; }
  .internal-hero h1 { font-size:clamp(48px,15vw,76px); }
  .cursor-glow { display:none; }
}

@media (max-width: 480px) {
  .console-body { padding:18px 14px;font-size:10px; }
  .hero-visual { min-height:390px; }
  .floating-chip { font-size:9px;padding:8px 10px; }
  .stats-grid { grid-template-columns:1fr; }
  .stat { border-right:0!important;border-bottom:1px solid var(--line)!important; }
  .stat:last-child { border-bottom:0!important; }
  .dashboard-mock > .mock-sidebar { left:0;width:50px; }
  .mock-main { width:83%;transform:translateX(20px); }
  .project-info { align-items:flex-start; }
  .project-info h3 { font-size:22px; }
  .round-arrow { width:40px;height:40px; }
  .stack-cloud { transform:scale(.92);margin-inline:-20px; }
  .whatsapp-float { right:16px;bottom:16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}