:root { --background:#080b11; --foreground:#f5f7fb; --muted:#a0aabd; --accent:#6494ff; --border:rgba(164,185,222,.13); --surface:#0e131e; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.65; } img { max-width:100%; display:block; } h1,h2,h3,p { margin:0; } h1,h2,h3 { line-height:1.15; } ::selection { background:#375ac7; color:#fff; } :focus-visible { outline:2px solid #8bb1ff; outline-offset:5px; } .container { max-width:1280px; width:calc(100% - 112px); margin:auto; } .section { padding:112px 0; position:relative; } .section-heading { max-width:680px; } .eyebrow { color:#8eaeef; display:flex; gap:10px; align-items:center; font-size:12px; font-weight:600; letter-spacing:1.8px; line-height:1.6; } .eyebrow>span { width:6px; height:6px; background:#6e9fff; border-radius:1px; display:inline-block; } h2 { font-size:clamp(32px,3.1vw,44px); font-weight:600; letter-spacing:-1.5px; margin:20px 0; } .section-heading>p,.section-top>p { color:var(--muted); max-width:620px; font-size:17px; line-height:1.8; } .section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:55px; margin-bottom:44px; } .section-top .section-heading { max-width:520px; } .section-top h2 { margin-bottom:0; } .section-top>p { max-width:350px; padding-bottom:3px; } .button { display:inline-flex; gap:13px; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border:1px solid var(--border); border-radius:7px; font-size:14px; font-weight:600; line-height:1.5; transition:transform .22s,background .22s,box-shadow .22s,border-color .22s; } .button:hover { transform:translateY(-2px); border-color:#6589d5; } .button:active { transform:scale(.98); } .button.primary { color:white; background:linear-gradient(110deg,#366ae8,#5476ed); border-color:#7098ff60; box-shadow:0 4px 24px #2d56cc20,inset 0 1px 0 #ffffff17; } .button.primary:hover { box-shadow:0 4px 30px #426ee94d; background:linear-gradient(110deg,#477efc,#6587ff); } .button.secondary { background:#ffffff03; color:#d3d9e5; } .button.light { background:#eff3ff; color:#101a34; border-color:#fff; } .skip-link { position:fixed; top:10px; left:20px; transform:translateY(-180%); padding:12px 20px; z-index:100; background:#fff; color:#111; border-radius:5px; } .skip-link:focus { transform:translateY(0); } #top-sentinel { position:absolute; top:0; width:1px; height:20px; }
.header { position:absolute; top:0; width:100%; z-index:30; border-bottom:1px solid transparent; transition:background .25s,border-color .25s; animation:nav-enter .65s ease-out both; } .header.scrolled { position:fixed; background:#080b11eb; backdrop-filter:blur(18px); border-color:var(--border); } .header-inner { height:88px; display:flex; align-items:center; justify-content:space-between; gap:30px; } .brand { display:inline-flex; align-items:center; gap:11px; font-size:25px; font-weight:700; letter-spacing:-1px; flex-shrink:0; min-height:44px; } .brand-period { color:#6a9dff; } .brand-mark { display:block; position:relative; width:36px; height:39px; background:#fff; border-radius:7px; overflow:hidden; } .brand-mark img { position:absolute; width:79px; max-width:none; height:79px; left:-22px; top:-14px; } .navigation { display:flex; gap:29px; align-items:center; } .navigation>a:not(.button) { display:flex; align-items:center; min-height:44px; position:relative; color:#aeb7c8; font-size:14px; transition:color .2s; } .navigation>a:not(.button)::after { position:absolute; content:""; bottom:5px; width:100%; height:1px; background:#729bff; transform:scaleX(0); transform-origin:left; transition:transform .2s; } .navigation>a:hover,.navigation>a[aria-current] { color:white; } .navigation>a:hover::after,.navigation>a[aria-current]::after { transform:scaleX(1); } .header-cta { min-height:41px; padding:10px 17px; background:#ffffff07; font-size:13px; } .menu-toggle,.navigation .mobile-cta { display:none; }
.hero { position:relative; overflow:hidden; padding-top:150px; background:radial-gradient(ellipse at 79% 43%,#182e662e,transparent 49%); } .hero::before { content:""; position:absolute; width:600px; height:600px; top:-400px; left:30%; background:radial-gradient(circle,#3658a124,transparent 65%); pointer-events:none; animation:orb 28s ease-in-out infinite alternate; } .hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:15px; align-items:center; min-height:560px; } .hero-copy { position:relative; z-index:2; padding:25px 0 50px; } .hero-eyebrow { font-size:11px; letter-spacing:1.6px; animation:enter .7s .05s both; } h1 { font-size:clamp(46px,4.65vw,68px); font-weight:650; line-height:1.08; letter-spacing:-3.1px; max-width:655px; margin:25px 0; animation:enter .7s .1s both; } h1 em,.final-cta em { font-style:normal; color:#88aaff; background:linear-gradient(95deg,#8cafff,#739bff 50%,#a294f1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-copy>p { max-width:540px; font-size:17px; color:var(--muted); line-height:1.85; animation:enter .7s .2s both; } .hero-actions { display:flex; gap:13px; flex-wrap:wrap; margin:31px 0 23px; animation:enter .7s .3s both; } .hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:#99a5b9; font-size:12px; animation:enter .7s .4s both; } .hero-trust i { width:3px; height:3px; background:#5d6d88; border-radius:50%; } .hero-bottom { border-top:1px solid var(--border); padding:24px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; color:#9aa6ba; font-size:11px; letter-spacing:1.4px; margin-top:35px; } .hero-bottom>a { letter-spacing:0; font-size:13px; min-height:44px; display:flex; align-items:center; gap:18px; } .hero-bottom>a span { color:#a5bcfb; font-size:19px; }
.hero-visual { position:relative; height:510px; width:100%; max-width:560px; isolation:isolate; animation:visual-enter 1s .4s both; } .visual-grid { position:absolute; inset:0; background-image:linear-gradient(#6b8fb90b 1px,transparent 1px),linear-gradient(90deg,#6b8fb90b 1px,transparent 1px); background-size:37px 37px; mask-image:radial-gradient(ellipse,black,transparent 70%); } .orbit { border:1px solid #6494ff0c; border-radius:50%; width:470px; height:470px; position:absolute; top:0; left:20px; } .orbit-two { width:370px; height:370px; top:50px; left:70px; } .connector-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .connector-lines path { fill:none; stroke:#5479bf; stroke-width:1; stroke-dasharray:4 7; opacity:.55; animation:flow 18s linear infinite; } .workspace-card { position:absolute; width:83%; top:126px; left:8%; background:linear-gradient(130deg,#172131,#101620 65%); border:1px solid #8199bd35; border-radius:10px; transform:perspective(900px) rotateY(-8deg) rotateX(5deg) rotateZ(-3deg); box-shadow:0 25px 70px #0009,0 0 80px #345eab0e; overflow:hidden; } .workspace-top { height:43px; border-bottom:1px solid #ffffff0c; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-size:12px; color:#bac8e1; } .workspace-top>div { display:flex; gap:9px; align-items:center; } .mini-logo { color:#8bafff; font-weight:700; } .window-dots { letter-spacing:3px; color:#64728b; } .workspace-body { display:flex; min-height:230px; } .workspace-sidebar { display:flex; flex-direction:column; gap:24px; padding:23px 16px; border-right:1px solid #ffffff08; color:#8395b5; } .workspace-sidebar>svg:first-child { color:#7da3ff; } .workspace-main { padding:21px 20px; min-width:0; flex:1; } .workspace-title { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#dce5f4; } .visual-chart { margin-top:18px; border:1px solid #91aee014; border-radius:5px; padding:12px 12px 0; background:#070d171f; } .chart-label { font-size:12px; color:#cedbf1; } .chart-label>span { color:#7e91ae; display:block; font-size:10px; margin-top:2px; } .visual-chart svg { display:block; width:100%; height:74px; margin-top:10px; } .chart-line { fill:none; stroke:#73a0ff; stroke-width:2; } .workflow-row { display:flex; align-items:center; gap:6px; font-size:9px; margin-top:14px; } .workflow-row span { display:flex; gap:4px; align-items:center; color:#9eafd0; } .workflow-row i { flex:1; height:1px; background:#34405b; } .workflow-row .workflow-active { color:#b5c9ff; background:#344d8b40; border:1px solid #567cca40; border-radius:4px; padding:3px 7px; } .interface-bars { display:flex; gap:9px; margin-top:13px; } .interface-bars span { height:4px; background:#223047; width:25%; border-radius:2px; } .interface-bars span:last-child { width:15%; } .node { display:flex; gap:12px; align-items:center; position:absolute; padding:14px 16px; border:1px solid #869bc533; background:linear-gradient(120deg,#172235,#101722); border-radius:9px; box-shadow:0 15px 35px #0006; font-size:12px; color:#dce6f9; z-index:3; } .node>svg { color:#7b9fe9; flex-shrink:0; } .node small { display:block; font-size:10px; margin-top:2px; color:#90a1bc; } .node-api { top:49px; left:40%; transform:rotate(3deg); } .node-indicator { width:5px; height:5px; border-radius:50%; background:#88b0ff; margin-left:8px; } .node-data { top:338px; left:0; transform:rotate(-5deg); } .node-calendar { right:0; top:377px; transform:rotate(3deg); } .code-fragment { position:absolute; left:10%; top:94px; font-family:monospace; font-size:10px; color:#7890b7; transform:rotate(-3deg); } .code-fragment span { color:#a492d5; } .visual-caption { display:flex; gap:11px; align-items:center; position:absolute; width:100%; justify-content:center; bottom:12px; font-size:9px; letter-spacing:1.3px; color:#8292ae; } .visual-caption i { width:14px; height:1px; background:#35517e; }
.capability-strip { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#0c1018; padding:23px 0; } .marquee-track { display:flex; width:max-content; animation:marquee 45s linear infinite; } .marquee-group { display:flex; align-items:center; flex-shrink:0; } .marquee-group>span { display:flex; align-items:center; gap:44px; padding-right:44px; font-size:15px; color:#a6b1c4; white-space:nowrap; } .strip-star { color:#536989; font-size:16px; } .capability-strip:hover .marquee-track { animation-play-state:paused; }
.services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .service-card { background:linear-gradient(140deg,#111722,#0c111a); padding:28px; border:1px solid var(--border); border-radius:10px; transition:transform .25s,border-color .25s,box-shadow .25s; } .service-card:hover { transform:translateY(-4px); border-color:#7298e350; box-shadow:0 0 40px #406acb09; } .service-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; } .icon-box { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:#5a86ea0c; border:1px solid #86a6e421; border-radius:9px; color:#8dafef; } .service-card .icon-box { transition:transform .25s; } .service-card:hover .icon-box { transform:rotate(-5deg); } .card-index { font-size:11px; color:#91a0b7; font-family:monospace; } .service-card h3 { font-size:19px; letter-spacing:-.4px; font-weight:550; margin-bottom:13px; } .service-card p { font-size:14px; line-height:1.85; color:var(--muted); min-height:79px; } .service-tags { display:flex; flex-wrap:wrap; gap:6px 12px; border-top:1px solid var(--border); margin-top:25px; padding-top:18px; } .service-tags span { font-size:11px; color:#a1aec2; } .service-tags span+span::before { content:"·"; margin-right:12px; color:#53627c; } .in-view { animation:enter .65s ease-out both; }
.products-section { background:#0b0f17; border-block:1px solid #ffffff05; } .products-section .section-heading { max-width:660px; margin-bottom:44px; } .product-card { display:grid; grid-template-columns:1fr 1fr; border:1px solid #7999ed2e; border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 95% 30%,#23387055,transparent 60%),#101724; } .product-copy { padding:50px; } .product-badge { font-size:10px; letter-spacing:1.7px; color:#9db6f4; } .product-copy h3 { font-size:48px; letter-spacing:-2px; margin:21px 0; font-weight:650; } .product-copy h3>span { color:#9a95ff; } .product-copy p { color:#aebace; font-size:16px; line-height:1.85; } .chips { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0 31px; } .chips span { font-size:11px; border:1px solid #99a9d42b; color:#c1cce0; border-radius:5px; padding:4px 9px; background:#ffffff03; } .product-map { margin:30px; margin-left:0; background:#0c12217d; border:1px solid #8ca5de20; border-radius:10px; padding:25px; position:relative; } .product-map-title { display:flex; justify-content:space-between; align-items:center; color:#889bc0; font-size:9px; letter-spacing:1.4px; } .mini-cross { font-size:22px; font-weight:200; color:#91a7d0; } .product-hub { display:flex; flex-direction:column; align-items:center; padding:28px 0 36px; position:relative; } .product-hub::after { content:""; height:22px; width:1px; background:#60759c60; position:absolute; bottom:0; } .product-hub>span { font-size:33px; font-weight:600; line-height:1; width:54px; height:54px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(140deg,#8082f9,#5354b5); box-shadow:0 6px 24px #5354b530; margin-bottom:9px; } .product-hub strong { font-size:17px; font-weight:500; } .product-hub small { font-size:11px; color:#8c9cba; margin-top:2px; } .product-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .product-feature-grid>div { display:flex; gap:10px; align-items:center; background:#1a253880; border:1px solid #99b2eb20; border-radius:6px; padding:15px 12px; color:#b6c2d8; font-size:11px; } .product-feature-grid svg { color:#939cf0; } .product-map>p { margin-top:24px; display:flex; gap:8px; align-items:center; justify-content:center; font-size:11px; color:#899bbd; }
.principles-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; } .principles-layout h2 { max-width:480px; } .principles-layout .section-heading>p { max-width:410px; } .principle { display:flex; align-items:flex-start; gap:22px; padding:26px 0; border-bottom:1px solid var(--border); } .principle:first-child { padding-top:3px; } .principle:last-child { border-bottom:0; padding-bottom:0; } .principle>svg { color:#88a8e4; flex-shrink:0; margin-top:3px; } .principle h3 { font-size:18px; font-weight:550; margin-bottom:10px; } .principle p { color:var(--muted); font-size:14px; line-height:1.85; }
.process-section { background:#0b0f17; border-block:1px solid var(--border); } .process-tabs { display:grid; grid-template-columns:repeat(6,1fr); margin-top:47px; } .process-step { color:#9ba7bd; background:none; border:0; text-align:left; position:relative; padding:0 15px 25px 0; display:flex; flex-direction:column; gap:14px; font-size:15px; } .step-number { font-size:12px; display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; border:1px solid #2b3548; background:#101621; transition:all .3s; font-family:monospace; } .process-step.selected { color:white; } .process-step.reached .step-number { border-color:#577ac5; color:#a8c4ff; background:#23427d36; } .step-track { position:absolute; bottom:0; left:0; width:100%; height:2px; background:#222d42; } .step-track::after { content:""; display:block; width:0; background:#739eff; height:100%; transition:width .5s; } .reached .step-track::after { width:100%; } .process-detail { display:flex; gap:35px; align-items:center; padding:34px 40px; border:1px solid #8aa6d61a; background:linear-gradient(100deg,#121d30,#0f151f); border-radius:10px; margin-top:28px; min-height:176px; } .detail-number { font-size:61px; font-weight:300; color:#779be660; line-height:1; letter-spacing:-3px; } .process-detail>div { max-width:780px; } .process-detail h3 { font-size:21px; font-weight:550; margin-bottom:10px; } .process-detail p { font-size:14px; color:var(--muted); line-height:1.8; } .process-detail>svg { margin-left:auto; flex-shrink:0; color:#789bdc55; }
.technology-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:25px; margin-top:48px; } .technology-grid article { padding-right:18px; border-right:1px solid var(--border); } .technology-grid article:last-child { border:0; } .technology-grid svg { color:#8fabdf; margin-bottom:21px; } .technology-grid h3 { font-size:17px; margin-bottom:18px; font-weight:550; } .technology-grid ul { padding:0; margin:0; list-style:none; color:var(--muted); font-size:13px; } .technology-grid li { margin:10px 0; } .technology-note { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; gap:12px; color:#8fa0bc; align-items:center; font-size:13px; }
.about-section { border-top:1px solid var(--border); background:linear-gradient(180deg,#0b1018,#080b11); } .about-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:95px; align-items:start; margin-bottom:50px; } .about-layout h2 { max-width:370px; } .about-copy p { color:var(--muted); margin-bottom:18px; font-size:16px; line-height:1.9; } .about-copy p:first-child { color:#c2ccdd; } .brand-banner { width:100%; height:auto; border-radius:11px; border:1px solid #eaf0ff; }
.contact-section { background:#0c111b; border-block:1px solid var(--border); } .contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:start; } .contact-copy h2 { max-width:390px; font-size:48px; } .contact-copy .section-heading>p { font-size:16px; max-width:380px; } .direct-contact { display:flex; align-items:center; gap:16px; margin-top:35px; } .direct-contact>div>span { display:block; color:#9daac0; font-size:12px; margin-bottom:4px; } .direct-contact a { font-size:18px; color:#c4d7ff; } .direct-contact a:hover { color:white; } .contact-note { color:#95a1b6; font-size:14px; max-width:360px; margin-top:24px; } .contact-expectation { border-top:1px solid var(--border); margin-top:50px; padding-top:30px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:14px; color:#899bb8; } .contact-symbol { font-family:monospace; font-size:45px; color:#334a71; font-weight:700; }.contact-form { background:#111824; border:1px solid #8498bd26; border-radius:12px; padding:32px; position:relative; } .form-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:15px; } .form-heading h3 { font-size:18px; font-weight:550; } .form-heading>span { font-size:11px; color:#99a7bd; flex-shrink:0; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:21px 18px; } .field { display:flex; flex-direction:column; gap:8px; min-width:0; } .field.full { grid-column:1/-1; } .field label { font-size:13px; color:#d0d8e7; } .field label>span { color:#92b1f4; margin-left:3px; } .field label>.optional { color:#8d9bb1; font-size:11px; } .field input,.field select,.field textarea { width:100%; min-height:46px; height:auto; color:#e4eaf5; font-size:14px; background:#0c121d; border:1px solid #93a9d329; border-radius:6px; padding:12px 13px; box-shadow:none; outline:none; transition:border-color .2s,box-shadow .2s; } .field select { padding-right:30px; } .field [data-slot=native-select-wrapper] { width:100%; } .field textarea { resize:vertical; min-height:125px; field-sizing:fixed; } .field input::placeholder,.field textarea::placeholder { color:#8d9bb0; opacity:1; } .field input:focus,.field select:focus,.field textarea:focus { border-color:#638cff; box-shadow:0 0 0 3px #5c88e31a; } .field [aria-invalid=true] { border-color:#ef9898; } .field-error { color:#ffb2b2; font-size:12px; line-height:1.5; } .form-privacy { font-size:11px; line-height:1.8; color:#93a1b7; margin:20px 0; } .form-privacy a { text-decoration:underline; color:#b8c8e8; text-underline-offset:3px; } .submit-button { width:100%; } .honeypot { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .form-error { border:1px solid #d2838340; background:#51252540; color:#ffc3c3; border-radius:6px; padding:12px 14px; font-size:13px; margin-bottom:18px; } .form-success { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:510px; padding:45px; background:#111824; border:1px solid #8498bd26; border-radius:12px; animation:enter .5s; } .success-icon { display:grid; place-items:center; border-radius:50%; height:64px; width:64px; background:#294f463d; color:#a5e3ca; margin-bottom:25px; } .form-success h3 { font-size:28px; margin-bottom:18px; } .form-success p { color:var(--muted); } .spin { animation:spin 1s linear infinite; }
.final-cta { padding:106px 0; text-align:center; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 115%,#2d439055,transparent 70%),#0a0e16; } .final-cta::after { content:""; width:700px; height:400px; border:1px solid #8ea9ff0c; border-radius:50%; position:absolute; left:50%; top:60%; transform:translateX(-50%); pointer-events:none; } .final-cta .container { position:relative; z-index:1; } .final-cta .eyebrow { justify-content:center; font-size:10px; } .final-cta h2 { font-size:44px; margin:23px 0 18px; } .final-cta p { color:var(--muted); max-width:620px; margin:0 auto 29px; font-size:16px; } .footer { border-top:1px solid var(--border); padding-top:62px; } .footer-main { display:grid; grid-template-columns:2fr 1fr 1.25fr 1fr 1.1fr; gap:35px; padding-bottom:50px; } .footer-brand p { color:#95a2b8; font-size:13px; margin:14px 0 11px; } .footer-main h3 { font-size:13px; font-weight:550; margin:10px 0 18px; } .footer-main>div>a:not(.brand) { display:block; font-size:12px; line-height:2; color:#a1acc0; padding:3px 0; } .footer-main a:hover { color:#e6efff; } .footer-bottom { border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:20px; color:#8c99af; font-size:11px; padding:23px 0; }
.legal-header { border-bottom:1px solid var(--border); } .legal-header .container { display:flex; justify-content:space-between; align-items:center; min-height:90px; } .legal-main { max-width:800px; padding:80px 0 100px; } .legal-main h1 { font-size:48px; animation:none; margin:20px 0; } .legal-main .legal-intro { color:#b7c4da; font-size:18px; margin-bottom:40px; } .legal-main h2 { font-size:24px; margin:35px 0 15px; letter-spacing:-.5px; } .legal-main p,.legal-main li { color:#aab6ca; font-size:16px; line-height:1.9; } .legal-main a { color:#a7c2ff; text-decoration:underline; text-underline-offset:3px; } .legal-date { font-size:12px!important; color:#8b9ab2!important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes enter { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes nav-enter { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } } @keyframes visual-enter { from { opacity:0; transform:scale(.96) translateY(15px); } to { opacity:1; transform:scale(1) translateY(0); } } @keyframes marquee { to { transform:translateX(-50%); } } @keyframes flow { to { stroke-dashoffset:-220; } } @keyframes orb { to { transform:translate(90px,80px); } } @keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1600px) { .hero { padding-top:175px; } .hero-grid { min-height:615px; } h1 { font-size:72px; } }
@media(max-width:1100px) { .container { width:calc(100% - 64px); } .header-inner { gap:20px; } .navigation { gap:20px; } .hero-grid { grid-template-columns:1.12fr 1fr; gap:0; } h1 { font-size:55px; letter-spacing:-2.4px; } .hero-visual { transform-origin:center right; } .node-calendar { right:0; font-size:10px; padding:10px; } .node-data { padding:10px; } .service-card { padding:23px; } .service-tags { gap:5px 8px; } .principles-layout { gap:60px; } .contact-layout { gap:45px; } .product-copy { padding:35px; } .product-map { margin:22px 22px 22px 0; padding:20px; } .product-feature-grid>div { flex-direction:column; text-align:center; font-size:11px; } .technology-grid { gap:15px; } .technology-grid li { font-size:12px; } .about-layout { gap:55px; } }
@media(max-width:1100px) { .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .header-inner { height:76px; } .navigation { gap:18px; } .header-cta { display:none; } .hero { padding-top:125px; } .hero-grid { grid-template-columns:1fr; } .hero-copy { max-width:700px; padding-bottom:0; } h1 { max-width:650px; font-size:64px; } .hero-copy>p { max-width:600px; } .hero-visual { width:540px; margin:12px auto 0; } .hero-bottom { margin-top:0; } .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .section { padding:85px 0; } .section-top { gap:30px; } .section-top>p { max-width:280px; font-size:15px; } .product-copy { padding:30px; } .product-map { padding:16px; } .product-hub { padding-top:45px; } .principles-layout { gap:40px; } .technology-grid { grid-template-columns:repeat(3,1fr); gap:32px; } .technology-grid article:nth-child(3) { border:0; } .technology-grid li { font-size:13px; } .contact-layout { grid-template-columns:1fr; gap:40px; } .contact-copy { display:grid; grid-template-columns:1fr 1fr; gap:20px 45px; } .contact-copy .section-heading { grid-row:span 3; } .direct-contact { margin-top:28px; } .contact-note { margin-top:0; } .contact-expectation { display:none; } .contact-copy h2 { font-size:41px; } .footer-main { grid-template-columns:repeat(4,1fr); gap:25px; } .footer-brand { grid-column:1/-1; margin-bottom:5px; } }
@media(max-width:640px) { .container { width:calc(100% - 40px); } .section { padding:72px 0; } .header-inner { height:72px; } .brand { font-size:23px; gap:9px; } .brand-mark { width:33px; height:36px; } .menu-toggle { display:grid; place-items:center; width:44px; height:44px; background:none; color:#e9efff; border:1px solid var(--border); border-radius:6px; } .navigation { position:absolute; top:72px; left:0; right:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:16px 20px 24px; background:#0d131ffb; border-bottom:1px solid var(--border); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s,visibility .2s,transform .2s; } .navigation.open { opacity:1; visibility:visible; transform:translateY(0); } .navigation>a:not(.button) { padding:9px 8px; font-size:16px; } .navigation>a::after { display:none; } .navigation .mobile-cta { display:flex; margin-top:12px; } .hero { padding-top:109px; } .hero-eyebrow { font-size:9px; letter-spacing:1.3px; } h1 { font-size:45px; letter-spacing:-2px; line-height:1.1; margin:23px 0; } .hero-copy>p { font-size:16px; line-height:1.8; } .hero-actions { gap:10px; margin-top:26px; } .hero-actions .button { padding:12px 16px; font-size:13px; } .hero-trust { font-size:10px; gap:8px; } .hero-visual { width:100%; height:375px; margin-top:24px; } .orbit { width:320px; height:320px; left:calc(50% - 160px); top:15px; } .orbit-two { width:250px; height:250px; left:calc(50% - 125px); top:50px; } .workspace-card { top:90px; left:5%; width:90%; } .workspace-top { height:33px; padding:0 10px; font-size:10px; } .workspace-body { min-height:175px; } .workspace-sidebar { padding:16px 10px; gap:19px; } .workspace-sidebar>svg { width:12px; height:12px; } .workspace-main { padding:13px; } .workspace-title { font-size:10px; } .visual-chart { padding:8px 8px 0; margin-top:11px; } .chart-label { font-size:9px; } .chart-label>span { font-size:8px; } .visual-chart svg { height:48px; } .workflow-row { font-size:8px; margin-top:8px; } .interface-bars { margin-top:9px; } .node { font-size:10px; gap:8px; padding:9px 11px; } .node small { font-size:8px; } .node-api { top:27px; left:auto; right:15px; } .node-api>svg { width:16px; } .node-data { top:262px; left:0; } .node-calendar { top:305px; right:0; } .code-fragment { top:60px; left:5%; font-size:8px; } .visual-caption { bottom:0; font-size:7px; gap:7px; letter-spacing:.7px; } .visual-caption i { width:9px; } .hero-bottom { padding:20px 0; margin-top:20px; } .hero-bottom>span { font-size:8px; max-width:160px; line-height:1.9; letter-spacing:.9px; } .hero-bottom>a { font-size:11px; gap:8px; } .capability-strip { padding:18px 0; } .marquee-track { animation:none; width:100%; } .marquee-group:first-child { flex-wrap:wrap; justify-content:center; gap:12px 20px; width:100%; padding:0 20px; } .marquee-group:nth-child(2) { display:none; } .marquee-group>span { font-size:11px; padding:0; gap:8px; } .strip-star { font-size:11px; } .eyebrow { font-size:10px; letter-spacing:1.5px; } h2 { font-size:34px; letter-spacing:-1px; margin:16px 0; } .section-top { display:block; margin-bottom:30px; } .section-top>p { margin-top:20px; max-width:100%; font-size:16px; } .section-heading>p { font-size:16px; } .services-grid { grid-template-columns:1fr; gap:13px; } .service-card { padding:25px; } .service-top { margin-bottom:21px; } .service-card p { min-height:0; font-size:15px; } .service-card h3 { font-size:20px; } .service-tags { margin-top:23px; } .service-tags span { font-size:11px; } .product-card { grid-template-columns:1fr; } .product-copy { padding:28px; } .product-copy h3 { font-size:44px; } .product-copy p { font-size:15px; } .product-map { margin:0 20px 20px; padding:20px; } .product-hub { padding-top:20px; } .product-feature-grid>div { flex-direction:row; font-size:10px; } .principles-layout { grid-template-columns:1fr; gap:32px; } .principle { gap:18px; } .principle p { font-size:15px; } .process-tabs { display:flex; flex-direction:column; margin-top:30px; } .process-step { flex-direction:row; padding:0 0 20px; gap:20px; align-items:center; } .step-number { position:relative; z-index:1; width:36px; height:36px; flex-shrink:0; } .step-track { width:2px; height:100%; left:17px; top:0; } .step-track::after { width:100%; height:0; transition:height .3s; } .reached .step-track::after { width:100%; height:100%; } .process-step:last-child .step-track { height:36px; } .process-step:last-child { padding-bottom:0; } .process-detail { padding:25px; gap:15px; align-items:flex-start; margin-top:28px; min-height:240px; } .detail-number { font-size:33px; margin-top:2px; letter-spacing:-1px; } .process-detail h3 { font-size:19px; } .process-detail p { font-size:14px; } .process-detail>svg { display:none; } .technology-grid { grid-template-columns:1fr 1fr; gap:30px 22px; margin-top:35px; } .technology-grid article:nth-child(3) { border-right:1px solid var(--border); } .technology-grid article:nth-child(2n),.technology-grid article:last-child { border:0; } .technology-grid article { padding-right:10px; } .technology-grid li { font-size:12px; line-height:1.8; } .technology-grid h3 { font-size:16px; } .technology-note { align-items:flex-start; font-size:12px; gap:10px; } .technology-note>svg { flex-shrink:0; margin-top:3px; } .about-layout { grid-template-columns:1fr; gap:15px; margin-bottom:25px; } .about-copy p { font-size:15px; } .brand-banner { border-radius:6px; } .contact-copy { display:block; } .contact-copy h2 { font-size:39px; } .direct-contact { margin-top:30px; } .contact-note { margin-top:18px; } .contact-form { padding:24px 20px; } .form-heading { align-items:flex-start; } .form-heading h3 { font-size:17px; } .form-grid { grid-template-columns:1fr; gap:18px; } .field input,.field select,.field textarea { font-size:16px; } .field label { font-size:14px; } .form-privacy { font-size:12px; } .form-success { min-height:400px; padding:30px; } .final-cta { padding:75px 0; } .final-cta h2 { font-size:36px; } .final-cta p { font-size:15px; } .footer { padding-top:40px; } .footer-main { grid-template-columns:1fr 1fr; gap:25px; padding-bottom:35px; } .footer-main h3 { font-size:14px; margin:0 0 10px; } .footer-main>div>a:not(.brand) { min-height:38px; font-size:13px; display:flex; align-items:center; } .footer-bottom { flex-direction:column; gap:7px; } .legal-main { padding:45px 0 65px; } .legal-main h1 { font-size:38px; } .legal-header .button { font-size:12px; padding:10px; } }
.field [data-slot=native-select-wrapper] { position:relative; } .field [data-slot=native-select-icon] { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; pointer-events:none; color:#98a9c4; } .field select { appearance:none; } .field select option { background:#111824; color:#e4eaf5; }
.button.primary { background:linear-gradient(110deg,#315fd4,#4263d5); } .button.primary:hover { background:linear-gradient(110deg,#3868df,#4b6bdc); } .process-step { min-height:44px; } .direct-contact a { display:inline-flex; min-height:44px; align-items:center; }
.capability-strip { position:relative; } .marquee-control { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; background:#111925; border:1px solid #93a9d329; border-radius:6px; color:#becbe3; font-size:16px; box-shadow:-12px 0 18px #0c1018; }
@media(max-width:640px) { .footer-main>div>a:not(.brand) { min-height:44px; } }
@media(max-width:640px),(prefers-reduced-motion:reduce) { .marquee-control { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } html { scroll-behavior:auto; } }