:root {
  --bg: #050806;
  --bg-2: #08100b;
  --surface: rgba(16, 25, 19, .78);
  --surface-solid: #0f1812;
  --surface-2: #131f17;
  --text: #f5f9f6;
  --muted: rgba(235, 245, 238, .62);
  --muted-2: rgba(235, 245, 238, .36);
  --line: rgba(255, 255, 255, .085);
  --line-hot: rgba(212, 255, 67, .28);
  --lime: #d4ff43;
  --lime-soft: #e7ff91;
  --cyan: #6ee7f7;
  --violet: #9b8cff;
  --orange: #ff7757;
  --radius-sm: 16px;
  --radius: 26px;
  --radius-lg: 38px;
  --shadow: 0 34px 100px rgba(0, 0, 0, .42);
  --max: 1440px;
  --pointer-x: 72vw;
  --pointer-y: 18vh;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); scrollbar-color: rgba(212,255,67,.42) var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body::selection { background: var(--lime); color: #071008; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 12px 16px; border-radius: 12px; background: var(--lime); color: #071008; font-weight: 850; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.page-ambient { position: fixed; z-index: -2; inset: 0; pointer-events: none; background: radial-gradient(650px circle at var(--pointer-x) var(--pointer-y), rgba(212,255,67,.09), transparent 56%), radial-gradient(540px circle at 10% 75%, rgba(110,231,247,.055), transparent 62%), linear-gradient(180deg, #060a07 0%, #050806 100%); }
.page-ambient::after { position: absolute; inset: 0; 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: 72px 72px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 86%); }

.section-pad { width: min(var(--max), 100%); margin-inline: auto; padding: 128px 48px; }
.work-section, .process-section, .about-section, .faq-section, .contact-section, .capability-section, .legal-content, .site-footer { content-visibility: auto; contain-intrinsic-size: 800px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow > span { width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.muted { color: var(--muted); line-height: 1.75; }
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0) scale(.99); transition: opacity .72s cubic-bezier(.2,.75,.25,1), transform .72s cubic-bezier(.2,.75,.25,1); transition-delay: var(--reveal-delay, 0ms); }
html.js .reveal.visible { opacity: 1; transform: none; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 1px solid rgba(212,255,67,.38); border-radius: 14px; background: linear-gradient(145deg, rgba(212,255,67,.19), rgba(212,255,67,.025)); color: var(--lime); font-weight: 950; box-shadow: inset 0 0 26px rgba(212,255,67,.08), 0 0 34px rgba(212,255,67,.06); }
.brand-mark::before { position: absolute; inset: 5px; border: 1px solid rgba(212,255,67,.09); border-radius: 10px; content: ""; }
.brand-mark::after { position: absolute; right: -6px; bottom: -7px; width: 25px; height: 25px; border-radius: 50%; background: var(--lime); content: ""; filter: blur(11px); opacity: .48; }
.brand > span:last-child { line-height: 1; }
.brand b { display: block; color: #fff; font-size: 15px; letter-spacing: .19em; }
.brand small { display: block; margin-top: 6px; color: rgba(255,255,255,.39); font-size: 7px; font-weight: 850; letter-spacing: .3em; }

.site-header { position: fixed; z-index: 90; top: 14px; left: 0; width: 100%; pointer-events: none; }
.header-inner { display: flex; width: min(calc(var(--max) - 32px), calc(100% - 32px)); height: 70px; margin-inline: auto; padding: 0 16px 0 20px; align-items: center; justify-content: space-between; border: 1px solid transparent; border-radius: 22px; pointer-events: auto; transition: background .28s, border-color .28s, box-shadow .28s, backdrop-filter .28s; }
.site-header.solid .header-inner { border-color: rgba(255,255,255,.1); background: rgba(7, 12, 8, .78); box-shadow: 0 18px 55px rgba(0,0,0,.24); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.desktop-nav { display: flex; align-items: center; gap: 8px; }
.desktop-nav a { position: relative; padding: 11px 13px; border-radius: 999px; color: rgba(255,255,255,.59); font-size: 12px; font-weight: 700; transition: color .2s, background .2s; }
.desktop-nav a:hover { background: rgba(255,255,255,.055); color: #fff; }
.desktop-nav a::after { position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); content: ""; opacity: 0; transform: translateX(-50%) scale(0); transition: opacity .2s, transform .2s; }
.desktop-nav a:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.language { position: relative; }
.language summary { min-width: 75px; min-height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: #fff; cursor: pointer; list-style: none; font-size: 10px; font-weight: 850; }
.language summary::-webkit-details-marker { display: none; }
.language > div { position: absolute; top: 52px; right: 0; width: 194px; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(13,21,15,.97); box-shadow: var(--shadow); transform-origin: top right; animation: menu-in .2s ease both; backdrop-filter: blur(18px); }
.language > div a { display: flex; min-height: 43px; gap: 10px; padding: 0 11px; align-items: center; border-radius: 11px; color: var(--muted); font-size: 13px; transition: color .18s, background .18s; }
.language > div a:hover { background: rgba(255,255,255,.06); color: #fff; }
.header-cta, .primary-button { position: relative; display: inline-flex; min-height: 46px; padding: 0 23px; align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: 999px; background: var(--lime); color: #071008; cursor: pointer; font-size: 12px; font-weight: 900; box-shadow: 0 12px 34px rgba(212,255,67,.11); transition: transform .22s, background .22s, box-shadow .22s; }
.header-cta::before, .primary-button::before { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.52) 48%, transparent 70%); content: ""; transform: translateX(-130%); transition: transform .55s; }
.header-cta:hover::before, .primary-button:hover::before { transform: translateX(130%); }
.header-cta:hover, .primary-button:hover { background: var(--lime-soft); box-shadow: 0 18px 48px rgba(212,255,67,.18); transform: translateY(-2px); }
.menu-button { display: none; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); cursor: pointer; }
.menu-button span { display: block; width: 17px; height: 1.5px; background: #fff; transition: transform .25s, opacity .2s; }
.menu-button span + span { margin-top: 5px; }
.menu-button.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-button.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-nav { display: none; }

.hero { position: relative; display: grid; width: min(1580px, 100%); min-height: min(960px, 100svh); margin-inline: auto; padding: 154px 70px 94px; grid-template-columns: 1.03fr .97fr; gap: clamp(42px, 5vw, 90px); align-items: center; isolation: isolate; overflow: hidden; }
.hero::before { position: absolute; z-index: -1; top: -18%; right: -14%; width: min(58vw, 850px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212,255,67,.13), rgba(110,231,247,.04) 38%, transparent 69%); content: ""; filter: blur(38px); animation: breathe 7s ease-in-out infinite; }
.hero::after { position: absolute; z-index: -1; right: 4%; bottom: -18%; width: 48%; height: 54%; border-radius: 50%; background: rgba(155,140,255,.045); content: ""; filter: blur(85px); }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(circle at 72% 42%, black, transparent 67%); }
.hero-copy, .hero-visual { position: relative; z-index: 1; min-width: 0; }
.hero-copy::before { display: inline-flex; margin-bottom: 22px; padding: 7px 10px; border: 1px solid rgba(212,255,67,.14); border-radius: 999px; background: rgba(212,255,67,.045); color: rgba(212,255,67,.76); content: "ELPASH / DIGITAL ENGINEERING"; font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.hero .eyebrow { margin-bottom: 27px; }
.hero h1 { max-width: 820px; margin: 0; font-size: clamp(64px, 7vw, 116px); font-weight: 950; letter-spacing: -.077em; line-height: .83; }
.hero h1 span { display: block; text-wrap: balance; }
.outline-word { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.7); text-shadow: 0 0 38px rgba(255,255,255,.035); }
.hero-description { max-width: 640px; margin: 34px 0 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.72; text-wrap: pretty; }
.hero-buttons { display: flex; margin-top: 37px; gap: 11px; flex-wrap: wrap; }
.hero-buttons .primary-button, .secondary-button, .outline-button { min-height: 56px; padding-inline: 28px; }
.secondary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.026); color: #fff; font-size: 12px; font-weight: 800; transition: background .22s, border-color .22s, color .22s, transform .22s; }
.secondary-button:hover, .outline-button:hover { border-color: rgba(212,255,67,.34); background: rgba(212,255,67,.07); color: var(--lime); transform: translateY(-2px); }
.hero-meta { display: flex; margin-top: 38px; gap: 10px; flex-wrap: wrap; color: var(--muted-2); font: 720 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta span { padding: 9px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(255,255,255,.018); }
.hero-meta span:first-child { border-color: rgba(212,255,67,.15); color: rgba(212,255,67,.72); }

.hero-visual { perspective: 1400px; transform: translateZ(0); }
.visual-window { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: linear-gradient(145deg, rgba(19,31,23,.92), rgba(8,14,10,.96)); box-shadow: 0 60px 150px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.055), 0 0 0 8px rgba(255,255,255,.012); transform: rotateY(var(--tilt-y, -5deg)) rotateX(var(--tilt-x, 3deg)) translateZ(0); transition: transform .22s ease-out; will-change: transform; }
.visual-window::before { position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 22%, transparent 72%, rgba(212,255,67,.035)); content: ""; pointer-events: none; }
.visual-window::after { position: absolute; z-index: 3; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,255,67,.6), transparent); content: ""; opacity: .42; animation: scan 5s linear infinite; }
.window-bar { display: flex; height: 56px; padding: 0 20px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); color: var(--muted-2); font: 700 8px/1 ui-monospace, monospace; letter-spacing: .13em; }
.window-bar i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #39423b; box-shadow: 0 0 12px currentColor; }
.window-bar i:first-child { background: var(--orange); color: var(--orange); }
.window-bar i:nth-child(2) { background: #ffc85b; color: #ffc85b; }
.window-bar i:nth-child(3) { background: var(--lime); color: var(--lime); }
.window-bar span { margin-left: auto; }
.visual-body { padding: clamp(20px, 3vw, 38px); }
.visual-kpi { position: relative; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(135deg, rgba(255,255,255,.046), rgba(255,255,255,.014)); }
.visual-kpi small, .visual-cards small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.visual-kpi strong { display: block; margin-top: 12px; background: linear-gradient(90deg, #fff 15%, var(--lime) 105%); color: transparent; font-size: clamp(44px, 5vw, 74px); letter-spacing: -.065em; -webkit-background-clip: text; background-clip: text; }
.visual-kpi em { position: absolute; top: 25px; right: 25px; padding: 7px 10px; border: 1px solid rgba(212,255,67,.14); border-radius: 999px; background: rgba(212,255,67,.07); color: var(--lime); font-size: 9px; font-style: normal; }
.visual-chart { display: flex; height: 184px; margin-top: 17px; padding: 25px 21px 0; align-items: flex-end; gap: clamp(7px, 1.15vw, 12px); border: 1px solid var(--line); border-radius: 21px; background: repeating-linear-gradient(to top, transparent 0, transparent 39px, rgba(255,255,255,.042) 40px); }
.visual-chart span { flex: 1; min-width: 7px; border-radius: 5px 5px 1px 1px; background: linear-gradient(to top, rgba(212,255,67,.12), var(--lime)); box-shadow: 0 -8px 25px rgba(212,255,67,.08); transform-origin: bottom; animation: bar-in .95s cubic-bezier(.2,.8,.2,1) both; }
.visual-chart span:nth-child(2) { animation-delay: .06s; }.visual-chart span:nth-child(3) { animation-delay: .12s; }.visual-chart span:nth-child(4) { animation-delay: .18s; }.visual-chart span:nth-child(5) { animation-delay: .24s; }.visual-chart span:nth-child(6) { animation-delay: .3s; }.visual-chart span:nth-child(7) { animation-delay: .36s; }
.visual-cards { display: grid; margin-top: 15px; grid-template-columns: 1fr 1fr; gap: 15px; }
.visual-cards div { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.022); }
.visual-cards strong { display: block; margin-top: 8px; font-size: 28px; letter-spacing: -.055em; }
.float-tag { position: absolute; z-index: 4; padding: 11px 15px; border: 1px solid rgba(212,255,67,.26); border-radius: 999px; background: rgba(12,20,14,.92); color: var(--lime); box-shadow: 0 18px 55px rgba(0,0,0,.36); font: 760 8px/1 ui-monospace, monospace; letter-spacing: .12em; backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }
.float-tag.top { top: -17px; right: 31px; }
.float-tag.bottom { bottom: -14px; left: -19px; animation-delay: -2s; }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.014); }
.marquee > div { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee span { display: inline-flex; height: 70px; padding-inline: 34px; align-items: center; gap: 34px; color: rgba(255,255,255,.51); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.marquee b { color: var(--lime); }

.stats { display: grid; padding-block: 86px; grid-template-columns: repeat(4, 1fr); }
.stats article { position: relative; padding: 15px 31px; border-right: 1px solid var(--line); }
.stats article:first-child { padding-left: 0; }
.stats article:last-child { border: 0; }
.stats strong { display: block; background: linear-gradient(135deg, #fff, rgba(255,255,255,.63)); color: transparent; font-size: clamp(43px, 5vw, 72px); letter-spacing: -.075em; line-height: 1; -webkit-background-clip: text; background-clip: text; }
.stats span { display: block; margin-top: 14px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.section-head { display: grid; margin-bottom: 64px; grid-template-columns: 1.25fr .75fr; gap: 76px; align-items: end; }
.section-head h2, .about-statement h2, .security-copy h2, .faq-section h2, .contact-copy h2, .inner-cta h2 { max-width: 900px; margin: 0; font-size: clamp(43px, 5.25vw, 78px); font-weight: 920; letter-spacing: -.063em; line-height: .96; text-wrap: balance; }
.section-head > p, .about-statement > p, .security-copy > p, .contact-copy > p, .inner-cta > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.78; text-wrap: pretty; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.service-card { position: relative; min-height: 410px; overflow: hidden; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); isolation: isolate; transition: transform .32s, background .32s, border-color .32s, box-shadow .32s; }
.service-card::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(300px circle at 12% 0%, rgba(212,255,67,.08), transparent 55%); content: ""; opacity: 0; transition: opacity .3s; }
.service-card::after { position: absolute; z-index: -1; right: -95px; bottom: -100px; width: 230px; height: 230px; border: 1px solid rgba(212,255,67,.1); border-radius: 50%; content: ""; transition: transform .5s, border-color .3s; }
.service-number { position: absolute; top: 27px; right: 29px; color: var(--muted-2); font: 700 9px/1 ui-monospace, monospace; }
.service-card > i { display: grid; width: 54px; height: 54px; margin: 35px 0 50px; place-items: center; border: 1px solid rgba(212,255,67,.2); border-radius: 17px; background: rgba(212,255,67,.05); color: var(--lime); font-size: 23px; font-style: normal; box-shadow: inset 0 0 25px rgba(212,255,67,.03); }
.service-card > small { color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .17em; }
.service-card h3 { margin: 14px 0 13px; font-size: 28px; letter-spacing: -.04em; }
.service-card p { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.service-card > b { position: absolute; right: 30px; bottom: 28px; left: 30px; color: rgba(255,255,255,.47); font-size: 10px; letter-spacing: .02em; }

.work-section { width: 100%; max-width: none; padding-inline: max(48px, calc((100vw - var(--max)) / 2 + 48px)); background: linear-gradient(180deg, rgba(11,17,13,.87), #080d0a); border-block: 1px solid rgba(255,255,255,.04); }
.work-section .section-head { max-width: var(--max); margin-inline: auto; }
.project-list { width: min(var(--max), 100%); margin-inline: auto; }
.project-card { position: relative; display: grid; min-height: 570px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #0d1510; grid-template-columns: 1.34fr .66fr; box-shadow: 0 30px 90px rgba(0,0,0,.2); }
.project-card:nth-child(even) { grid-template-columns: .66fr 1.34fr; }
.project-card:nth-child(even) .project-visual { order: 2; }
.project-card:nth-child(even) .project-copy { order: 1; }
.project-visual { position: relative; min-height: 500px; overflow: hidden; background: #111914; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 11%, #111914), #0c120e 65%); }
.project-visual::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.04); content: ""; pointer-events: none; }
.project-visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mock-ui { position: absolute; inset: 8.5%; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(11,18,13,.92); box-shadow: 0 38px 95px rgba(0,0,0,.55); grid-template-columns: 70px 1fr; transform: perspective(1100px) rotateX(2.5deg) rotateY(-3.5deg); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.mock-side { display: flex; padding: 21px 15px; align-items: center; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); }
.mock-side b { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: var(--accent); color: #071008; }
.mock-side i { display: block; width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.11); }
.mock-main { display: flex; padding: 42px; flex-direction: column; }
.mock-main > small { color: var(--accent); font: 720 8px/1 ui-monospace, monospace; letter-spacing: .14em; }
.mock-main > strong { margin-top: 18px; font-size: clamp(32px, 4vw, 64px); letter-spacing: -.067em; }
.mock-chart { display: flex; height: 170px; margin-top: auto; padding-top: 30px; align-items: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.mock-chart i { flex: 1; height: 45%; border-radius: 5px 5px 0 0; background: var(--accent); background: color-mix(in srgb, var(--accent) 80%, transparent); }
.mock-chart i:nth-child(2) { height: 68%; }.mock-chart i:nth-child(3) { height: 54%; }.mock-chart i:nth-child(4) { height: 84%; }.mock-chart i:nth-child(5) { height: 73%; }.mock-chart i:nth-child(6) { height: 96%; }
.mock-main > span { margin-top: 15px; color: var(--muted-2); font: 700 8px/1 ui-monospace, monospace; letter-spacing: .15em; }
.project-copy { display: flex; padding: 55px 46px; flex-direction: column; }
.project-copy > span { color: var(--accent); font: 750 8px/1 ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
.project-copy h3 { margin: 20px 0 18px; font-size: clamp(39px, 4.6vw, 70px); letter-spacing: -.064em; line-height: .95; }
.project-copy > p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.project-copy > div { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); }
.project-copy > div small { display: block; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.project-copy > div strong { display: block; margin-top: 10px; color: #fff; font-size: 16px; line-height: 1.45; }

.process-section { border-block: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.process-grid article { position: relative; min-height: 285px; padding: 36px 31px; border-right: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(255,255,255,.012)); }
.process-grid article:last-child { border-right: 0; }
.process-grid span { display: inline-grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(212,255,67,.24); border-radius: 50%; background: rgba(212,255,67,.035); color: var(--lime); font: 750 8px/1 ui-monospace, monospace; }
.process-grid h3 { margin: 76px 0 14px; font-size: 25px; letter-spacing: -.035em; }
.process-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.68; }

.about-section { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }
.about-statement > p { max-width: 700px; margin-top: 25px; }
.about-points { display: grid; margin-top: 39px; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-points span { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); color: rgba(255,255,255,.73); font-size: 12px; }
.about-points span::first-letter { color: var(--lime); }
.about-orbit { position: relative; display: grid; width: min(470px, 100%); aspect-ratio: 1; margin: auto; place-items: center; }
.about-orbit::before { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(212,255,67,.12), transparent 63%); content: ""; }
.orbit { position: absolute; border: 1px solid rgba(212,255,67,.17); border-radius: 50%; animation: spin 22s linear infinite; }
.orbit::after { position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 23px var(--lime); content: ""; }
.orbit-one { inset: 7%; }
.orbit-two { inset: 21%; animation-direction: reverse; animation-duration: 15s; }
.about-orbit > div { position: relative; display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(212,255,67,.29); border-radius: 42px; background: linear-gradient(145deg, #142017, #0b120d); box-shadow: 0 0 75px rgba(212,255,67,.1); }
.about-orbit b { color: var(--lime); font-size: 67px; }
.about-orbit small { position: absolute; bottom: 19px; color: var(--muted-2); font-size: 7px; letter-spacing: .15em; }

.security-section { display: grid; width: 100%; max-width: none; padding-inline: max(48px, calc((100vw - var(--max)) / 2 + 48px)); grid-template-columns: .9fr 1.1fr; gap: 90px; background: var(--lime); color: #071008; }
.security-copy .eyebrow { color: #071008; }
.security-copy > p { color: rgba(7,16,8,.65); }
.security-code { overflow: hidden; align-self: center; border: 1px solid rgba(7,16,8,.19); border-radius: 23px; background: #09100b; color: #fff; box-shadow: 0 35px 85px rgba(7,16,8,.24); }
.security-code div { display: grid; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.085); grid-template-columns: 44px 1fr auto; align-items: center; }
.security-code div:last-child { border: 0; }
.security-code span { color: rgba(255,255,255,.26); font: 700 9px/1 ui-monospace, monospace; }
.security-code code { color: rgba(255,255,255,.75); font-size: 10px; }
.security-code b { color: var(--lime); font-size: 8px; letter-spacing: .11em; }

.faq-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.84); cursor: pointer; font-size: 16px; font-weight: 750; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); transition: transform .25s, background .25s; }
.faq-list details[open] summary span { background: rgba(212,255,67,.06); transform: rotate(45deg); }
.faq-list p { max-width: 760px; margin: -3px 55px 28px 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.contact-section { display: grid; width: 100%; max-width: none; padding-inline: max(48px, calc((100vw - var(--max)) / 2 + 48px)); grid-template-columns: .82fr 1.18fr; gap: 100px; background: linear-gradient(180deg, #0b120d, #080c09); border-top: 1px solid var(--line); }
.contact-copy { align-self: start; position: sticky; top: 126px; }
.contact-copy > p { margin-top: 25px; }
.contact-copy > a { display: inline-block; margin-top: 34px; color: var(--lime); font-size: 18px; font-weight: 750; }
.contact-form, .install-form { display: flex; padding: 34px; flex-direction: column; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); box-shadow: 0 35px 90px rgba(0,0,0,.16); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { display: flex; color: rgba(255,255,255,.5); flex-direction: column; gap: 9px; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: none; background: rgba(255,255,255,.024); color: #fff; transition: border-color .2s, background .2s, box-shadow .2s; }
input, select { height: 54px; padding: 0 15px; }
textarea { padding: 15px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(212,255,67,.48); background: rgba(255,255,255,.04); box-shadow: 0 0 0 4px rgba(212,255,67,.045); }
select option { background: #101712; color: #fff; }
label small { color: var(--muted-2); font-size: 8px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.honeypot { position: fixed; left: -9999px; opacity: 0; }
.alert { padding: 14px 16px; border-radius: 12px; font-size: 12px; line-height: 1.5; }
.alert.success { border: 1px solid rgba(212,255,67,.24); background: rgba(212,255,67,.07); color: var(--lime); }
.alert.error { border: 1px solid rgba(255,119,87,.28); background: rgba(255,119,87,.08); color: #ff9f8a; }

.site-footer { padding: 84px max(48px, calc((100vw - var(--max)) / 2 + 48px)) 30px; border-top: 1px solid var(--line); background: #040705; }
.footer-top { display: grid; padding-bottom: 72px; grid-template-columns: .5fr 1fr .5fr; gap: 40px; align-items: center; }
.footer-top h2 { margin: 0; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.065em; line-height: .94; text-wrap: balance; }
.footer-top > a:last-child { color: var(--lime); justify-self: end; font-weight: 750; }
.footer-bottom { display: flex; padding-top: 28px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 9px; }
.footer-bottom div { display: flex; gap: 20px; }
.footer-bottom a { transition: color .18s; }
.footer-bottom a:hover { color: #fff; }
.whatsapp-fab { position: fixed; z-index: 80; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(212,255,67,.4); border-radius: 19px; background: var(--lime); color: #071008; box-shadow: 0 20px 55px rgba(0,0,0,.42), 0 0 0 7px rgba(212,255,67,.035); font: 950 12px/1 ui-monospace, monospace; letter-spacing: -.04em; transition: transform .2s, box-shadow .2s; }
.whatsapp-fab:hover { box-shadow: 0 24px 65px rgba(0,0,0,.48), 0 0 0 9px rgba(212,255,67,.05); transform: translateY(-3px) scale(1.03); }

.interior { min-height: 100vh; }
.interior-hero { padding-top: 196px; padding-bottom: 104px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 14%, rgba(212,255,67,.085), transparent 28%); }
.interior-hero h1 { max-width: 1080px; margin: 0; font-size: clamp(58px, 8vw, 118px); letter-spacing: -.078em; line-height: .88; text-wrap: balance; }
.interior-hero > p:last-child { max-width: 780px; margin: 31px 0 0; color: var(--muted); font-size: 18px; line-height: 1.72; }
.back-link { display: inline-flex; margin-bottom: 57px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: color .2s; }
.back-link:hover { color: var(--lime); }
.capability-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.capability-section .section-head { display: block; margin: 0; }
.capability-section .section-head h2 { font-size: clamp(38px, 4vw, 62px); }
.capability-list { border-top: 1px solid var(--line); }
.capability-list article { display: grid; min-height: 84px; border-bottom: 1px solid var(--line); grid-template-columns: 65px 48px 1fr; align-items: center; }
.capability-list article > span { color: var(--muted-2); font: 700 9px/1 ui-monospace, monospace; }
.capability-list article > b { color: var(--lime); }
.capability-list h3 { margin: 0; font-size: 17px; }
.inner-cta { width: 100%; max-width: none; padding-inline: max(48px, calc((100vw - 1100px)) / 2); text-align: center; background: #0b120d; }
.inner-cta .eyebrow { justify-content: center; }
.inner-cta p { max-width: 690px; margin: 25px auto; }
.inner-cta .primary-button { margin-top: 15px; }
.legal-content { max-width: 1000px; }
.legal-content article { display: grid; padding: 49px 0; border-bottom: 1px solid var(--line); grid-template-columns: 80px 1fr; }
.legal-content article > span { color: var(--lime); font: 700 9px/1 ui-monospace, monospace; }
.legal-content h2 { margin: 0 0 17px; font-size: 31px; letter-spacing: -.04em; }
.legal-content p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.82; }
.legal-note { margin-top: 45px; padding: 20px; border: 1px solid rgba(212,255,67,.18); border-radius: 15px; background: rgba(212,255,67,.045); color: rgba(255,255,255,.67); font-size: 12px; }

@media (hover: hover) and (pointer: fine) {
  .service-card:hover { z-index: 2; border-color: rgba(212,255,67,.27); background: #121d16; box-shadow: 0 34px 80px rgba(0,0,0,.25); transform: translateY(-7px); }
  .service-card:hover::before { opacity: 1; }
  .service-card:hover::after { border-color: rgba(212,255,67,.2); transform: scale(1.22); }
  .project-card:hover .mock-ui { transform: perspective(1100px) rotateX(1deg) rotateY(-1.2deg) scale(1.015); }
  .project-card:hover .project-visual > img { transform: scale(1.035); }
}

@keyframes menu-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } }
@keyframes bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes breathe { 50% { opacity: .68; transform: scale(1.06); } }
@keyframes scan { from { top: 5%; } to { top: 95%; } }

@media (max-width: 1100px) {
  .site-header { top: 9px; }
  .header-inner { width: calc(100% - 18px); padding-inline: 13px; }
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .mobile-nav { position: fixed; z-index: -1; top: 88px; right: 9px; left: 9px; display: flex; max-height: calc(100dvh - 98px); padding: 14px; overflow-y: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(8,14,10,.96); box-shadow: 0 35px 100px rgba(0,0,0,.54); flex-direction: column; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.985); transition: opacity .24s, transform .24s, visibility .24s; backdrop-filter: blur(20px) saturate(135%); }
  .mobile-nav.open { pointer-events: auto; opacity: 1; visibility: visible; transform: none; }
  .mobile-nav a { display: flex; min-height: 58px; padding: 0 17px; align-items: center; border-bottom: 1px solid var(--line); border-radius: 13px; color: rgba(255,255,255,.76); font-size: 15px; font-weight: 750; }
  .mobile-nav a:last-child { border: 0; background: var(--lime); color: #071008; justify-content: center; margin-top: 8px; }
  .hero { min-height: auto; padding: 142px 34px 94px; grid-template-columns: 1fr; }
  .hero-copy { max-width: 890px; }
  .hero-visual { width: min(780px, 100%); margin: 8px auto 0; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .project-card, .project-card:nth-child(even) { grid-template-columns: 1fr; }
  .project-card:nth-child(even) .project-visual, .project-card:nth-child(even) .project-copy { order: initial; }
  .project-copy { min-height: 390px; }
  .about-section, .security-section, .contact-section { grid-template-columns: 1fr; }
  .about-orbit { max-width: 410px; }
  .security-code { width: min(720px, 100%); }
  .faq-section { grid-template-columns: 1fr; gap: 38px; }
  .contact-copy { position: static; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-top > a:last-child { justify-self: start; }
  .capability-section { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --radius: 22px; --radius-lg: 28px; }
  html { scroll-padding-top: 84px; }
  .page-ambient::after { background-size: 42px 42px; opacity: .5; }
  .section-pad { padding: 86px 19px; }
  .site-header { top: 7px; }
  .header-inner { width: calc(100% - 14px); height: 64px; padding: 0 9px 0 12px; border-radius: 20px; }
  .site-header .brand > span:last-child { display: block; }
  .site-header .brand b { font-size: 12px; }
  .site-header .brand small { font-size: 5.5px; }
  .site-header .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .header-cta { display: none; }
  .language summary { min-width: 62px; min-height: 42px; padding-inline: 10px; }
  .language > div { position: fixed; top: 78px; right: 8px; left: 8px; width: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .language > div a { min-height: 48px; }
  .menu-button { width: 42px; height: 42px; }
  .mobile-nav { top: 78px; max-height: calc(100dvh - 88px); }

  .hero { min-height: auto; padding: 112px 19px 72px; gap: 48px; }
  .hero::before { top: -2%; right: -65%; width: 145vw; filter: blur(24px); opacity: .75; animation: none; }
  .hero::after { display: none; }
  .hero-grid { background-size: 42px 42px; opacity: .24; }
  .hero-copy::before { margin-bottom: 18px; }
  .hero .eyebrow { margin-bottom: 22px; font-size: 8px; line-height: 1.45; }
  .hero h1 { font-size: clamp(49px, 15vw, 70px); line-height: .87; letter-spacing: -.068em; }
  .hero-description { margin-top: 25px; font-size: 15px; line-height: 1.68; }
  .hero-buttons { margin-top: 29px; flex-direction: column; }
  .hero-buttons a { width: 100%; }
  .hero-buttons .primary-button, .secondary-button { min-height: 55px; }
  .hero-meta { margin-top: 27px; gap: 7px; }
  .hero-meta span { padding: 8px 9px; font-size: 7.5px; }
  .hero-visual { margin-top: 3px; }
  .visual-window { border-radius: 23px; box-shadow: 0 30px 75px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05); transform: none !important; will-change: auto; }
  .visual-window::after { display: none; }
  .window-bar { height: 47px; padding-inline: 14px; font-size: 7px; }
  .visual-body { padding: 15px; }
  .visual-kpi { padding: 20px; border-radius: 17px; }
  .visual-kpi strong { font-size: 46px; }
  .visual-kpi em { top: 18px; right: 18px; }
  .visual-chart { height: 128px; margin-top: 12px; padding: 19px 12px 0; gap: 6px; border-radius: 17px; }
  .visual-cards { gap: 10px; margin-top: 10px; }
  .visual-cards div { padding: 16px; border-radius: 15px; }
  .visual-cards strong { font-size: 22px; }
  .float-tag { display: none; }
  .marquee span { height: 58px; padding-inline: 22px; gap: 22px; font-size: 8px; }
  .marquee > div { animation-duration: 36s; }

  .stats { display: flex; padding: 56px 19px; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .stats::-webkit-scrollbar, .services-grid::-webkit-scrollbar, .process-grid::-webkit-scrollbar { display: none; }
  .stats article { min-width: 68vw; padding: 19px 22px; border-right: 1px solid var(--line); scroll-snap-align: start; }
  .stats article:first-child { padding-left: 3px; }
  .stats strong { font-size: 52px; }

  .section-head { margin-bottom: 39px; grid-template-columns: 1fr; gap: 21px; }
  .section-head h2, .about-statement h2, .security-copy h2, .faq-section h2, .contact-copy h2, .inner-cta h2 { font-size: clamp(39px, 11.5vw, 50px); line-height: .97; }
  .section-head > p, .about-statement > p, .security-copy > p, .contact-copy > p { font-size: 14px; line-height: 1.72; }

  .services-grid { display: flex; margin-right: -19px; padding-right: 19px; gap: 11px; overflow-x: auto; scroll-padding-left: 0; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
  .service-card { min-width: 84vw; min-height: 370px; padding: 27px; scroll-snap-align: start; }
  .service-card > i { margin: 31px 0 45px; }

  .work-section, .security-section, .contact-section { padding-inline: 19px; }
  .project-card { min-height: 0; margin-bottom: 14px; border-radius: 23px; }
  .project-visual { min-height: 330px; }
  .mock-ui { inset: 7%; grid-template-columns: 46px 1fr; border-radius: 17px; transform: none; }
  .mock-side { padding-inline: 7px; }
  .mock-side b { width: 30px; height: 30px; }
  .mock-side i { width: 18px; }
  .mock-main { padding: 25px 19px; }
  .mock-main > strong { font-size: 34px; }
  .mock-chart { height: 105px; gap: 6px; }
  .project-copy { min-height: 350px; padding: 32px 24px; }
  .project-copy h3 { font-size: 43px; }

  .process-grid { display: flex; margin-right: -19px; padding-right: 19px; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-grid article { min-width: 82vw; min-height: 280px; padding: 29px 25px; border: 1px solid var(--line); border-radius: 20px; scroll-snap-align: start; }
  .process-grid h3 { margin-top: 66px; }
  .about-section { gap: 40px; }
  .about-points { grid-template-columns: 1fr; }
  .about-orbit { width: min(330px, 92vw); }
  .about-orbit > div { width: 112px; height: 112px; border-radius: 33px; }
  .about-orbit b { font-size: 52px; }
  .about-orbit small { bottom: 14px; }

  .security-section { gap: 37px; }
  .security-code { border-radius: 19px; }
  .security-code div { padding: 19px 14px; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; }
  .security-code code { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .security-code b { font-size: 7px; }
  .faq-list summary { min-height: 77px; font-size: 14px; }
  .faq-list p { margin-right: 0; }

  .contact-form, .install-form { padding: 22px 17px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  input, select { height: 55px; }
  .site-footer { padding: 66px 19px calc(25px + env(safe-area-inset-bottom)); }
  .footer-top { padding-bottom: 50px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 20px; line-height: 1.55; }
  .footer-bottom div { flex-wrap: wrap; gap: 13px; }
  .whatsapp-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 17px; }

  .interior-hero { padding-top: 142px; padding-bottom: 78px; }
  .interior-hero h1 { font-size: clamp(50px, 15vw, 69px); }
  .interior-hero > p:last-child { font-size: 15px; }
  .back-link { margin-bottom: 44px; }
  .capability-list article { min-height: 76px; grid-template-columns: 41px 34px 1fr; }
  .capability-list h3 { font-size: 15px; }
  .legal-content article { padding: 38px 0; grid-template-columns: 39px 1fr; }
  .legal-content p { grid-column: 2; font-size: 14px; }
}

@media (max-width: 390px) {
  .site-header .brand > span:last-child { display: none; }
  .hero h1 { font-size: 47px; }
  .hero-meta span:last-child { display: none; }
  .visual-kpi strong { font-size: 41px; }
}

html.perf-lite .page-ambient { background: linear-gradient(180deg, #060a07, #050806); }
html.perf-lite .page-ambient::after { opacity: .32; }
html.perf-lite .site-header.solid .header-inner, html.perf-lite .mobile-nav, html.perf-lite .language > div { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.perf-lite .hero::before, html.perf-lite .hero::after { filter: none; animation: none; opacity: .32; }
html.perf-lite .visual-window::after, html.perf-lite .float-tag { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .visual-window { transform: none !important; }
}