:root { --navy:#071427; --navy-2:#0b1e38; --blue:#204397; --cyan:#22d3ee; --ink:#0a1628; --muted:#617084; --paper:#f5f8fc; --line:#dce4ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:white; color:var(--ink); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none!important; }
svg { display:block; }
.shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.site-header { position:absolute; z-index:40; inset:0 0 auto; height:88px; color:white; border-bottom:1px solid rgba(255,255,255,.12); }
.nav-wrap { height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; width:128px; height:76px; overflow:hidden; flex:none; }
.brand img { width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:screen; }
.brand-compact { width:190px; height:142px; }
.desktop-nav { display:flex; gap:35px; margin-left:auto; margin-right:44px; }
.desktop-nav a { font-size:13px; color:#cbd7e7; position:relative; }
.desktop-nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--cyan); transition:.25s; }
.desktop-nav a:hover:after { right:0; }
.nav-cta,.button-primary { display:inline-flex; align-items:center; gap:12px; background:var(--cyan); color:#04101e; font-weight:700; padding:14px 18px; font-size:13px; transition:.25s; }
.nav-cta:hover,.button-primary:hover { background:#67e8f9; transform:translateY(-2px); }
.language-button { border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.04); color:white; min-width:42px; height:42px; cursor:pointer; font-size:11px; font-weight:800; letter-spacing:.12em; transition:.2s; }
.language-button:hover { border-color:var(--cyan); color:var(--cyan); }
.desktop-language { margin-right:12px; }
.mobile-actions { display:none; align-items:center; gap:4px; }
.menu-button { display:none; background:none; border:0; color:#fff; padding:8px; cursor:pointer; }
.mobile-menu { position:fixed; z-index:60; inset:0; visibility:hidden; pointer-events:none; background:rgba(2,8,16,.62); opacity:0; transition:opacity .25s,visibility .25s; }
.mobile-menu.open { visibility:visible; pointer-events:auto; opacity:1; }
.mobile-menu-inner { position:absolute; top:0; right:0; width:min(420px,100%); height:100%; padding:20px 24px 32px; background:#08172a; color:white; border-left:1px solid rgba(255,255,255,.15); transform:translateX(100%); transition:transform .3s ease; box-shadow:-30px 0 80px rgba(0,0,0,.35); }
.mobile-menu.open .mobile-menu-inner { transform:translateX(0); }
.mobile-menu-head { display:flex; align-items:center; justify-content:space-between; }
.mobile-menu-head .menu-button { display:block; }
.mobile-menu-inner>p { color:#71849d; font-size:9px; letter-spacing:.18em; text-transform:uppercase; margin:28px 5px 4px; }
.mobile-nav { display:flex; flex-direction:column; margin-top:34px; }
.mobile-nav a { display:grid; grid-template-columns:35px 1fr auto; align-items:center; border-top:1px solid rgba(255,255,255,.12); padding:22px 5px; font-size:23px; }
.mobile-nav a span { color:var(--cyan); font-size:10px; }
.mobile-contact { margin-top:28px; display:flex; align-items:center; justify-content:space-between; background:var(--cyan); color:#071427; padding:18px; font-weight:800; font-size:14px; }

.hero { width:100%; max-width:none; min-height:760px; padding:190px max(24px,calc((100vw - 1180px)/2)) 50px; position:relative; overflow:hidden; color:white; background:radial-gradient(circle at 75% 44%,rgba(21,106,183,.36),transparent 32%),linear-gradient(115deg,#061326 0%,#0a1d35 56%,#071426 100%); }
.hero:before { content:""; position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to right,black,transparent 62%); }
.hero-copy { width:54%; position:relative; z-index:2; }
.eyebrow,.section-kicker { color:var(--cyan); text-transform:uppercase; letter-spacing:.23em; font-size:11px; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:25px; }
.eyebrow span { width:28px; height:1px; background:var(--cyan); }
.hero h1 { font-size:clamp(58px,7vw,102px); line-height:.89; letter-spacing:-.065em; margin:0; font-weight:750; }
.hero h1 em,.contact-inner h2 em { display:inline-block; color:transparent; -webkit-text-stroke:1px #62e6f4; font-style:normal; font-weight:500; }
.hero-copy>p { max-width:570px; color:#afbdd0; font-size:18px; line-height:1.7; margin:30px 0; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.button-primary { padding:17px 22px; }
.button-text { display:inline-flex; gap:9px; align-items:center; font-size:13px; color:#d5e0ed; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:6px; }
.hero-visual { position:absolute; width:44%; aspect-ratio:1; right:5%; top:155px; display:grid; place-items:center; pointer-events:none; }
.orbit { position:absolute; border:1px solid rgba(96,216,239,.17); border-radius:50%; animation:spin 28s linear infinite; }
.orbit:before { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cyan); top:18%; left:5%; box-shadow:0 0 16px var(--cyan); }
.orbit-one { width:88%; height:88%; }
.orbit-two { width:62%; height:62%; animation-direction:reverse; animation-duration:19s; }
.hero-monogram { width:310px; height:245px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); background:#061326; backdrop-filter:blur(12px); transform:rotate(-4deg); box-shadow:0 35px 80px rgba(0,0,0,.28); position:relative; overflow:hidden; }
.hero-monogram img { width:100%; height:100%; object-fit:cover; transform:rotate(4deg) scale(1.08); mix-blend-mode:screen; }
.code-card { position:absolute; z-index:3; display:grid; grid-template-columns:30px 1fr; padding:15px; width:155px; background:rgba(8,27,49,.85); border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 45px rgba(0,0,0,.25); backdrop-filter:blur(10px); animation:float 5s ease-in-out infinite; }
.code-card svg { grid-row:span 2; color:var(--cyan); margin-top:3px; }
.code-symbol { grid-row:span 2; color:var(--cyan); margin-top:3px; font-weight:800; }
.code-card span { font-size:9px; color:#8293aa; text-transform:uppercase; letter-spacing:.15em; }.code-card strong { font-size:13px; margin-top:3px; }
.card-one { left:0; top:16%; }.card-two { right:0; bottom:17%; animation-delay:-2.5s; }
.floating-dot { position:absolute; border-radius:50%; border:1px solid var(--cyan); }.dot-one { width:14px;height:14px;left:13%;bottom:22%;}.dot-two { width:7px;height:7px;right:15%;top:16%;background:var(--cyan);}.dot-three { width:5px;height:5px;left:45%;top:4%;background:white; }
.hero-bottom { position:absolute; bottom:34px; left:max(24px,calc((100vw - 1180px)/2)); right:max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:22px; font-size:9px; letter-spacing:.17em; color:#71849d; }.hero-bottom div { height:1px; background:rgba(255,255,255,.12); flex:1; }.hero-bottom strong { color:#8aa0b8; font-weight:500; }
.signal-strip { background:var(--cyan); color:#061426; overflow:hidden; }.signal-inner { min-height:61px; display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:10px; font-weight:800; letter-spacing:.2em; }.signal-inner i { width:4px;height:4px;background:#164492;border-radius:50%; }

.section { padding-block:120px; }
.section-heading { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:80px; margin-bottom:65px; }
.section-heading h2,.about-copy h2 { margin:14px 0 0; font-size:clamp(39px,4.4vw,63px); line-height:1.04; letter-spacing:-.045em; }
.section-heading>p { color:var(--muted); line-height:1.75; margin:0 0 5px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { padding:34px; min-height:305px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; transition:.3s; }
.service-card:before { content:""; position:absolute; inset:100% 0 0; background:var(--navy); transition:.35s; z-index:-1; }.service-card:hover:before { inset:0; }.service-card:hover { color:white; transform:translateY(-3px); }.service-card:hover p { color:#a9b8cb; }.service-card:hover .service-line { width:100%; }
.service-top { display:flex; justify-content:space-between; color:#9aabba; }.service-top span { font-size:10px; letter-spacing:.15em; }.service-top svg { color:var(--blue); width:31px; height:31px; }.service-card:hover .service-top svg { color:var(--cyan); }
.service-card h3 { font-size:21px; margin:54px 0 14px; }.service-card p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; transition:.3s; }.service-line { position:absolute; bottom:0; left:0; height:3px; width:0; background:var(--cyan); transition:.35s; }

.work-section { background:var(--navy); color:white; padding-block:120px; }
.section-heading.light>p { color:#96a8bf; }.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:-20px 0 38px; }.filter-row button { color:#8799ae; border:1px solid rgba(255,255,255,.14); background:transparent; border-radius:30px; font-size:12px; padding:9px 15px; cursor:pointer; transition:.2s; }.filter-row button:hover,.filter-row button.active { color:#061426; background:var(--cyan); border-color:var(--cyan); }
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:55px 28px; }
.project-card { min-width:0; animation:reveal .35s ease both; animation-delay:var(--delay); }.project-browser { height:330px; position:relative; overflow:hidden; background:#102944; border:1px solid rgba(255,255,255,.12); }.browser-bar { height:31px; position:relative; z-index:3; background:#e8edf2; display:flex; align-items:center; gap:5px; padding:0 10px; color:#738095; }.browser-bar>span { width:6px;height:6px;border-radius:50%;background:#9aa8b7; }.browser-bar small { margin:auto; transform:translateX(-15px); font-size:9px; }.project-browser img { width:100%; height:calc(100% - 31px); object-fit:cover; object-position:top; position:relative; z-index:2; display:block; transition:transform .7s ease; }.project-card:hover img { transform:scale(1.035); }.project-fallback { position:absolute; inset:31px 0 0; display:grid; place-content:center; text-align:center; gap:14px; color:#79dce9; }.project-fallback svg { margin:auto; }.project-fallback span { color:#9caec2; font-size:13px; }
.project-meta { display:flex; justify-content:space-between; align-items:center; padding-top:19px; }.project-meta span { color:#7f92aa; font-size:10px; text-transform:uppercase; letter-spacing:.17em; }.project-meta h3 { margin:7px 0 0; font-size:23px; }.project-link { width:42px;height:42px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:.25s; }.project-link svg { color:white; }.project-card:hover .project-link { background:var(--cyan); border-color:var(--cyan); transform:rotate(45deg); }.project-card:hover .project-link svg { color:#061426; }

.about-section { padding-block:130px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-visual { min-height:530px; background:var(--navy); position:relative; overflow:hidden; }.about-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at center,black,transparent 76%); }.about-mark { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:18px; }.about-mark>span { color:white; font-size:11px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; }.about-pill { position:absolute; left:35px;bottom:35px;display:flex;align-items:center;gap:12px;color:white;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:14px 17px; }.about-pill svg { color:var(--cyan); }.about-pill span { font-size:11px;line-height:1.5;color:#94a7bc; }.about-pill strong { color:white; }
.about-copy>p { color:var(--muted); line-height:1.8; font-size:16px; margin:28px 0 34px; }.principles { display:flex; flex-direction:column; }.principles>div { display:flex;gap:14px;border-top:1px solid var(--line);padding:17px 0; }.principles svg,.principles>div>b { color:var(--blue); width:17px;flex:none;margin-top:3px; }.principles span { color:var(--muted);font-size:13px;line-height:1.5; }.principles strong { display:block;color:var(--ink);font-size:14px;margin-bottom:3px; }

.contact-section { background:linear-gradient(125deg,#0a1d37,#061326); color:white; text-align:center; padding:120px 0; position:relative; overflow:hidden; }.contact-section:before { content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(34,211,238,.13);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 100px rgba(34,211,238,.06);pointer-events:none; }.contact-inner { position:relative; z-index:1; }.contact-inner h2 { font-size:clamp(47px,6.2vw,85px);line-height:.98;letter-spacing:-.055em;margin:19px 0 25px; }.contact-inner p { color:#9cafc4;max-width:570px;margin:0 auto 38px;line-height:1.7; }.contact-button { width:min(560px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;background:var(--cyan);color:#071427;padding:21px 23px;font-size:16px;font-weight:700;transition:.25s; }.contact-button:hover { background:white;transform:translateY(-3px); }.contact-details { display:flex;justify-content:center;gap:30px;color:#8396ae;font-size:12px;margin-top:28px; }.contact-details a:hover { color:var(--cyan); }
footer { background:#050e1b;color:white;padding:55px 0 25px;border-top:1px solid rgba(255,255,255,.08); }.footer-main { display:grid;grid-template-columns:1.5fr 1fr auto;align-items:start;gap:40px; }.footer-main p { color:#7589a1;font-size:12px;margin:18px 0 0; }.footer-links { display:flex;gap:25px;color:#9aacbf;font-size:12px; }.footer-links a:hover { color:var(--cyan); }.socials { display:flex;gap:10px; }.socials a { width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15); }.socials a:hover { background:var(--cyan);color:#071427; }.socials svg { width:16px; }.footer-bottom { display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:45px;color:#596e87;font-size:9px;letter-spacing:.13em;text-transform:uppercase; }

.faq-chat { position:fixed; z-index:55; right:22px; bottom:22px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.faq-launcher { order:2; display:flex; align-items:center; gap:9px; border:0; background:var(--cyan); color:#061426; min-height:54px; padding:0 18px; cursor:pointer; font-size:12px; font-weight:900; letter-spacing:.1em; box-shadow:0 16px 42px rgba(0,0,0,.25); }
.faq-launcher svg { width:20px; }
.faq-panel { width:min(380px,calc(100vw - 34px)); height:min(580px,calc(100vh - 110px)); display:flex; flex-direction:column; background:white; border:1px solid #d9e3ef; box-shadow:0 24px 80px rgba(4,16,30,.3); transform:translateY(12px) scale(.97); transform-origin:bottom right; opacity:0; visibility:hidden; pointer-events:none; transition:.22s; overflow:hidden; }
.faq-chat.open .faq-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.faq-panel>header { display:flex; align-items:center; gap:12px; min-height:74px; padding:13px 15px; color:white; background:linear-gradient(120deg,#071427,#0d2949); }
.faq-avatar { width:42px; height:42px; display:grid; place-items:center; background:var(--cyan); color:#071427; border-radius:50%; flex:none; }
.faq-avatar svg { width:21px; }
.faq-panel header>div:nth-child(2) { display:flex; flex-direction:column; gap:4px; min-width:0; }
.faq-panel header strong { font-size:14px; }
.faq-panel header span { color:#9db0c6; font-size:10px; }
.faq-header-actions { margin-left:auto; display:flex; align-items:center; gap:2px; }
.faq-header-actions button { width:34px; height:34px; display:grid; place-items:center; border:0; background:transparent; color:white; padding:7px; cursor:pointer; border-radius:50%; transition:.2s; }
.faq-header-actions button:hover { background:rgba(255,255,255,.1); }
.faq-header-actions button:disabled { opacity:.28; cursor:default; }
.faq-header-actions svg { width:17px; height:17px; }
.faq-messages { flex:1; overflow:auto; padding:17px 14px; display:flex; flex-direction:column; gap:10px; background:#f4f7fb; }
.chat-message { max-width:88%; padding:11px 13px; font-size:12px; line-height:1.55; box-shadow:0 3px 12px rgba(8,26,45,.05); }
.chat-message.bot { align-self:flex-start; background:white; color:#25374b; border:1px solid #e0e7f0; border-radius:4px 14px 14px 14px; }
.chat-message.user { align-self:flex-end; background:#0b2340; color:white; border-radius:14px 4px 14px 14px; }
.faq-quick { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-top:8px; padding-top:11px; border-top:1px solid #dbe5ef; }
.faq-quick>span { color:#70839a; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1px 2px; }
.faq-quick button { border:1px solid #b9d7e2; background:white; color:#17364e; padding:8px 11px; border-radius:18px; text-align:left; cursor:pointer; font-size:11px; transition:.2s; }
.faq-quick button:hover { background:#e3fbff; border-color:var(--cyan); }
.faq-form { display:grid; grid-template-columns:1fr 46px; border-top:1px solid #dfe7f0; background:white; padding:10px; gap:7px; }
.faq-form input { width:100%; min-width:0; border:1px solid #d7e0ea; background:#f8fafc; padding:11px 12px; outline:none; font-size:12px; }
.faq-form input:focus { border-color:#38cde4; }
.faq-form button { border:0; background:var(--cyan); color:#061426; display:grid; place-items:center; cursor:pointer; }
.faq-form button svg { width:18px; }

@keyframes spin { to { transform:rotate(360deg); } } @keyframes float { 50% { transform:translateY(-12px); } } @keyframes reveal { from { opacity:0;transform:translateY(12px); } }
@media(max-width:900px){ .desktop-nav,.nav-cta,.desktop-language{display:none}.mobile-actions{display:flex}.mobile-actions .menu-button{display:block}.hero{min-height:850px;padding-top:150px}.hero-copy{width:100%}.hero-visual{width:62%;opacity:.45;right:-12%;top:300px}.hero-copy>p{max-width:540px}.services-grid{grid-template-columns:repeat(2,1fr)}.section-heading{grid-template-columns:1fr;gap:25px}.about-section{grid-template-columns:1fr;gap:55px}.about-visual{min-height:440px}.footer-main{grid-template-columns:1fr auto}.footer-links{display:none}}
@media(max-width:620px){.shell{width:min(100% - 34px,1180px)}.site-header{height:76px}.brand{width:112px;height:68px}.mobile-menu .brand{width:128px;height:76px}.hero{min-height:790px;padding:130px 17px 45px}.hero h1{font-size:55px}.hero-copy>p{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.hero-visual{width:95%;right:-45%;top:335px}.hero-monogram{width:230px;height:180px}.code-card{display:none}.hero-bottom strong{display:none}.signal-inner{width:max-content;animation:marquee 14s linear infinite;padding-right:35px}.signal-strip{overflow:hidden}.section,.work-section{padding-block:85px}.section-heading{margin-bottom:42px}.services-grid{grid-template-columns:1fr}.service-card{min-height:250px;padding:28px}.service-card h3{margin-top:35px}.projects-grid{grid-template-columns:1fr;gap:40px}.project-browser{height:245px}.about-section{padding-block:85px}.about-visual{min-height:350px}.about-copy h2,.section-heading h2{font-size:39px}.contact-section{padding:90px 0}.contact-inner h2{font-size:49px}.contact-button{font-size:13px;padding:18px 15px}.contact-details{flex-direction:column;gap:8px}.footer-main{grid-template-columns:1fr}.socials{margin-top:8px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:10px}.faq-chat{right:12px;bottom:12px}.faq-launcher{min-height:50px;padding:0 15px}.faq-panel{height:min(560px,calc(100vh - 82px))}}
@keyframes marquee { to { transform:translateX(-42%); } }
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}