:root { --ink:#eaf2ff; --muted:#9cacc5; --soft:#60718b; --canvas:#07111f; --surface:#0c192b; --surface-2:#101f34; --line:rgba(185,210,244,.15); --accent:#8cffc1; --accent-2:#7db4ff; --navy:#07111f; --shadow:0 24px 70px rgba(0,0,0,.22); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; } body.light { --ink:#10203a; --muted:#52627c; --soft:#8190a6; --canvas:#f4f7fb; --surface:#fff; --surface-2:#edf3fa; --line:rgba(24,52,91,.14); --accent:#087c4c; --accent-2:#306ecc; --navy:#10203a; --shadow:0 24px 70px rgba(14,35,65,.1); }
a { color:inherit; text-decoration:none; } button { color:inherit; font:inherit; } .noise { pointer-events:none; position:fixed; inset:0; z-index:10; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .cursor-glow { width:520px; height:520px; border-radius:50%; position:fixed; z-index:-1; pointer-events:none; background:radial-gradient(circle,rgba(45,125,255,.12),transparent 66%); transform:translate(-50%,-50%); transition:transform .15s ease; }
.section-shell { width:min(1180px, calc(100% - 48px)); margin:auto; } .site-header { width:min(1280px,calc(100% - 48px)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; } .brand { display:flex; align-items:center; gap:10px; letter-spacing:.11em; font:500 11px 'DM Mono',monospace; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--accent); color:var(--accent); border-radius:8px; letter-spacing:0; font-weight:500; } .desktop-nav { display:flex; gap:30px; color:var(--muted); font-size:13px; } .desktop-nav a:hover { color:var(--accent); } .header-actions { display:flex; align-items:center; gap:15px; }.icon-button { background:transparent; border:0; cursor:pointer; padding:5px; display:grid; place-items:center; } .icon-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; } .button { background:var(--accent); color:#061d18; border:1px solid var(--accent); padding:15px 20px; border-radius:5px; display:inline-flex; gap:13px; align-items:center; justify-content:center; font-size:13px; font-weight:800; cursor:pointer; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(118,255,183,.2); }.button span { font-size:18px; line-height:10px; }.button-small { padding:10px 14px; font-size:12px; }.hero { display:grid; grid-template-columns:1.04fr .96fr; gap:56px; min-height:620px; align-items:center; padding:86px 0 94px; }.eyebrow,.section-number,.card-topline,.project-label { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; color:var(--accent); }.status-dot { display:inline-block; width:7px; height:7px; background:var(--accent); box-shadow:0 0 0 4px rgba(140,255,193,.1); border-radius:50%; margin:0 10px 1px 1px; }.hero h1,.section-heading h2,.contact h2 { font-size:clamp(43px,5.1vw,75px); letter-spacing:-.065em; line-height:.98; margin:25px 0 25px; font-weight:700; max-width:700px; }.hero h1 em,.section-heading h2 em,.contact h2 em { font-family:Georgia,serif; color:var(--accent); font-weight:400; }.hero-lede { font-size:16px; color:var(--muted); max-width:525px; line-height:1.8; }.hero-lede strong { color:var(--ink); }.hero-actions { display:flex; align-items:center; gap:27px; margin-top:33px; }.text-button { border:0; background:none; cursor:pointer; font-size:12px; color:var(--muted); padding:10px 0; }.text-button:hover { color:var(--accent); }.copy-symbol { margin-left:6px; color:var(--accent); }.proof-row { display:flex; gap:30px; margin-top:70px; padding-top:20px; border-top:1px solid var(--line); }.proof-row div { display:grid; gap:4px; }.proof-row strong { font-size:11px; }.proof-row span { color:var(--soft); font-size:10px; }.architecture-card { background:linear-gradient(145deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:14px; padding:21px; box-shadow:var(--shadow); position:relative; overflow:hidden; }.architecture-card:before { content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(125,180,255,.08),transparent 40%); }.card-topline,.metric-strip { position:relative; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }.ping { color:var(--accent); }.architecture { height:305px; position:relative; margin:9px 0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:25px 25px; border-radius:8px; }.arch-line { position:absolute; height:1px; transform-origin:left; background:linear-gradient(90deg,var(--accent-2),var(--accent)); opacity:.6; }.line-one { left:26%; top:31%; width:24%; transform:rotate(27deg); }.line-two { left:49%; top:43%; width:24%; transform:rotate(-23deg); }.line-three { left:65%; top:56%; width:21%; transform:rotate(40deg); }.node { position:absolute; width:108px; padding:11px 8px 9px; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:7px; cursor:pointer; display:grid; text-align:left; transition:transform .2s,border-color .2s,box-shadow .2s; }.node:hover,.node.active { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,.18); }.node-icon { color:var(--accent); font-size:16px; }.node b { font-size:11px; margin-top:4px; }.node small { font:9px 'DM Mono',monospace; color:var(--muted); margin-top:3px; }.node-source { left:7%; top:18%; }.node-pipeline { left:31%; top:41%; }.node-cloud { right:8%; top:23%; }.node-observe { right:10%; bottom:11%; }.packet { position:absolute; width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 13px var(--accent); animation:float 3.2s infinite ease-in-out; }.packet-a { left:38%;top:40%; }.packet-b { right:27%;top:47%;animation-delay:-1.1s; }.packet-c { right:18%;bottom:29%;animation-delay:-2.1s; }.node-caption { min-height:42px; margin:14px 0; color:var(--muted); font-size:12px; line-height:1.6; position:relative; }.metric-strip { padding-top:14px; border-top:1px solid var(--line); }.metric-strip i { display:inline-block; width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 5px 1px 0; }.signal-band { overflow:hidden; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.ticker-track { display:flex; width:max-content; gap:25px; align-items:center; color:var(--soft); font:500 11px 'DM Mono',monospace; letter-spacing:.13em; animation:ticker 28s linear infinite; }.ticker-track i { color:var(--accent); font-style:normal; }.section-block { padding:130px 0; }.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:58px; }.section-heading h2 { font-size:clamp(35px,4.1vw,56px); margin:15px 0 0; }.section-heading p { max-width:345px; font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 3px; }.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.project { border:1px solid var(--line); background:var(--surface); border-radius:10px; overflow:hidden; transition:transform .25s,border-color .25s; }.project:hover { transform:translateY(-6px); border-color:rgba(140,255,193,.45); }.project-featured { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; }.project-visual { min-height:245px; position:relative; overflow:hidden; background:var(--surface-2); }.project-featured .project-visual { min-height:340px; }.project-content { padding:30px; }.project h3 { margin:13px 0 13px; font-size:24px; letter-spacing:-.045em; }.project-content p { color:var(--muted); line-height:1.75; font-size:13px; }.outcomes { display:flex; gap:7px; flex-wrap:wrap; margin-top:22px; }.outcomes span { border:1px solid var(--line); border-radius:20px; padding:6px 9px; color:var(--muted); font:9px 'DM Mono',monospace; }.deployment-visual { padding:27px; display:flex; flex-direction:column; justify-content:center; }.terminal-bar { display:flex; gap:6px; align-items:center; height:30px; border-radius:7px 7px 0 0; padding:0 10px; color:var(--soft); background:#07101c; font:9px 'DM Mono',monospace; }.terminal-bar span { width:6px;height:6px;border-radius:50%;background:#314158; }.terminal-bar b { margin:auto; font-weight:400; }.terminal-lines { background:#081521; padding:16px 18px; border-radius:0 0 7px 7px; font:11px 'DM Mono',monospace; line-height:1.5; box-shadow:12px 14px 0 rgba(9,27,44,.5); }.terminal-lines p { margin:4px 0; color:#bfcee3; }.terminal-lines span { color:#8cffc1; }.terminal-lines .success { color:#8cffc1; }.terminal-lines i { color:#6f839f; font-style:normal; }.visual-badge { margin-top:22px; font:10px 'DM Mono',monospace; letter-spacing:.1em; color:var(--accent-2); }.project-toggle { background:none; border:0; padding:19px 0 0; cursor:pointer; color:var(--accent); font-size:12px; font-weight:700; }.project-toggle span { font-size:18px; margin-left:6px; }.project-details { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }.project-details p { overflow:hidden; margin:0; }.project.expanded .project-details { grid-template-rows:1fr; }.project.expanded .project-toggle span { display:inline-block; transform:rotate(45deg); }.reliability-visual { display:grid; place-items:center; }.ring { position:absolute; border:1px solid rgba(125,180,255,.45); border-radius:50%; }.ring-one { width:155px;height:155px; }.ring-two { width:205px;height:205px;border-color:rgba(140,255,193,.2); }.ring-core { width:102px;height:102px; display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--canvas);border:1px solid var(--accent);color:var(--accent);font-size:28px;font-weight:700;z-index:1;letter-spacing:-.08em; }.ring-core small { font:8px 'DM Mono',monospace;letter-spacing:.15em; }.chart-bars { position:absolute; left:25px;right:25px;bottom:18px;height:37px;display:flex;gap:7px;align-items:end;opacity:.6; }.chart-bars i { flex:1;background:linear-gradient(0deg,var(--accent-2),transparent);height:var(--h,45%); }.chart-bars i:nth-child(2n){--h:75%}.chart-bars i:nth-child(3n){--h:100%}.automation-visual { display:flex;align-items:center;justify-content:center;gap:9px;padding:20px; }.flow-step { min-width:76px;border:1px solid var(--line);border-radius:5px;padding:11px 8px;font:9px 'DM Mono',monospace;color:var(--muted);display:flex;justify-content:space-between; }.flow-step b { color:var(--accent); }.active-step { border-color:var(--accent);color:var(--ink);box-shadow:0 0 25px rgba(140,255,193,.13); }.flow-arrow { color:var(--accent-2); }.capabilities { border-top:1px solid var(--line); }.capability-layout { display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line); }.capability-tabs { border-right:1px solid var(--line); }.capability-tab { width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:24px 25px 24px 0;display:grid;grid-template-columns:50px 1fr 25px;text-align:left;cursor:pointer;color:var(--muted);transition:color .2s,background .2s; }.capability-tab:hover,.capability-tab.selected { color:var(--ink);background:linear-gradient(90deg,transparent,rgba(125,180,255,.06)); }.capability-tab span { color:var(--soft);font:10px 'DM Mono',monospace; }.capability-tab i { color:var(--accent);font-style:normal; }.capability-panel { padding:12px 0 15px 47px; }.panel-index { color:var(--accent);font:10px 'DM Mono',monospace;margin-top:18px; }.capability-panel h3 { font-size:29px;letter-spacing:-.05em;margin:34px 0 13px; }.capability-panel p { max-width:435px;color:var(--muted);font-size:14px;line-height:1.8; }.capability-panel ul { list-style:none;padding:20px 0 0;margin:0; }.capability-panel li { border-top:1px solid var(--line);padding:15px 0;color:var(--muted);font-size:12px;line-height:1.6; }.capability-panel li span { display:inline-block;width:68px;color:var(--accent);font:9px 'DM Mono',monospace; }.approach-section { background:#0c1b30;color:#eaf2ff;padding:115px 0; }.light-heading h2 { color:#eaf2ff; }.light-heading p { color:#aabbd2; }.principles-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(185,210,244,.16); }.principle { background:#0c1b30;padding:33px 28px;min-height:230px; }.principle>span { color:#8cffc1;font:10px 'DM Mono',monospace; }.principle h3 { margin:48px 0 10px;font-size:20px;letter-spacing:-.04em; }.principle p { color:#aabbd2;font-size:12px;line-height:1.75; }.contact { padding-bottom:120px; }.contact-grid { display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:center; }.contact h2 { font-size:clamp(37px,4.7vw,62px);max-width:740px; }.contact>div>p { color:var(--muted);font-size:14px; }.contact-card { border:1px solid var(--line);padding:28px;border-radius:9px;background:var(--surface); }.contact-card>p { display:inline;font:10px 'DM Mono',monospace;color:var(--muted); }.contact-card h3 { margin:36px 0 20px;font-size:25px;letter-spacing:-.05em; }.contact-button { width:100%; }.contact-card small { display:block;color:var(--soft);font-size:10px;line-height:1.6;margin-top:14px; }.contact-card code { color:var(--accent); }.site-footer { border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;color:var(--soft);font:10px 'DM Mono',monospace; }.site-footer a:hover { color:var(--accent); }.toast { position:fixed;bottom:24px;left:50%;transform:translate(-50%,100px);padding:11px 16px;background:var(--ink);color:var(--canvas);box-shadow:var(--shadow);font-size:12px;border-radius:5px;opacity:0;transition:.25s;z-index:30; }.toast.show { transform:translate(-50%,0);opacity:1; }.reveal { opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1;transform:none; }.reveal-delay { transition-delay:.13s; }
@keyframes ticker { to { transform:translateX(-42%); } } @keyframes float { 50% { transform:translateY(-8px);opacity:.45; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important;scroll-behavior:auto !important;transition-duration:.01ms !important; } }
@media (max-width:760px) { .section-shell,.site-header { width:min(100% - 32px,1180px); }.desktop-nav { display:none; }.site-header { height:70px; }.header-actions { gap:8px; }.header-actions .button-small { padding:9px 11px; }.hero { grid-template-columns:1fr;padding:60px 0 65px;gap:48px; }.hero h1 { font-size:47px; }.hero-lede { font-size:14px; }.proof-row { margin-top:45px;gap:17px; }.proof-row span { max-width:80px; }.architecture { height:285px; }.node { width:95px; }.node-source { left:3%; }.node-pipeline { left:28%; }.node-cloud { right:3%; }.node-observe { right:5%; }.section-block { padding:80px 0; }.section-heading,.contact-grid { display:block; }.section-heading p { margin-top:24px; }.projects-grid,.project-featured { grid-template-columns:1fr; }.project-featured { grid-column:auto; }.project-featured .project-visual { min-height:265px; }.capability-layout { grid-template-columns:1fr; }.capability-tabs { border-right:0; }.capability-panel { padding:7px 0 0; }.approach-section { padding:75px 0; }.principles-grid { grid-template-columns:1fr; }.principle { min-height:0;padding:27px; }.principle h3 { margin-top:27px; }.contact-card { margin-top:42px; }.site-footer { gap:14px;flex-wrap:wrap; }.cursor-glow { display:none; } }