:root { --ink:#03070d; --surface:#09111d; --line:rgba(184,226,237,.14); --white:#edf7fa; --muted:#91a5b3; --cyan:#6ff5e0; --cyan-bright:#b8fff4; --gold:#d7b56e; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; color:var(--white); background:var(--ink); font-family:var(--sans); } a { color:inherit; } .site-shell { overflow:hidden; background:radial-gradient(ellipse 90% 56% at 75% 0%,rgba(22,74,93,.19),transparent 65%),var(--ink); } .skip-link { position:absolute; left:-9999px; top:0; z-index:10; background:var(--cyan); color:var(--ink); padding:.75rem 1rem; } .skip-link:focus { left:1rem; top:1rem; }
.nav { position:absolute; top:0; left:0; z-index:5; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:88px; padding:1.1rem clamp(1.25rem,4vw,5rem); border-bottom:1px solid rgba(184,226,237,.09); background:linear-gradient(180deg,rgba(3,7,13,.7),rgba(3,7,13,0)); } .brand { display:inline-flex; align-items:center; gap:.72rem; text-decoration:none; } .brand-mark { position:relative; display:block; width:54px; height:54px; overflow:hidden; border:1px solid rgba(111,245,224,.58); box-shadow:0 0 30px rgba(111,245,224,.12),inset 0 0 18px rgba(111,245,224,.08); } .brand-mark:after { content:""; position:absolute; inset:4px; border:1px solid rgba(111,245,224,.17); pointer-events:none; } .brand-mark img { position:absolute; width:164px; max-width:none; height:auto; left:-55px; top:-36px; filter:invert(1) contrast(1.16); mix-blend-mode:screen; } .brand-wordmark { display:grid; gap:1px; color:var(--white); font:500 .67rem/1 var(--mono); letter-spacing:.16em; } .brand-wordmark span { color:var(--cyan); font-size:.51rem; letter-spacing:.21em; } .menu-toggle { display:none; } .nav-links { display:flex; gap:clamp(1rem,2.4vw,2.5rem); align-items:center; } .nav-links a,.motion-toggle { color:var(--muted); font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-decoration:none; transition:color .2s ease,text-shadow .2s ease; } .nav-links a:hover,.motion-toggle:hover { color:var(--cyan); text-shadow:0 0 15px rgba(111,245,224,.4); } .motion-toggle { padding:0; border:0; background:transparent; cursor:pointer; }
.section { position:relative; } .hero { min-height:100svh; display:flex; align-items:center; padding:8rem clamp(1.25rem,12vw,13rem) 5rem; isolation:isolate; } .hero:before { content:""; position:absolute; z-index:-1; inset:0; opacity:.43; background:linear-gradient(90deg,transparent 49.93%,rgba(111,245,224,.14) 50%,transparent 50.07%),linear-gradient(rgba(111,245,224,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(111,245,224,.07) 1px,transparent 1px); background-size:auto,42px 42px,42px 42px; mask-image:linear-gradient(90deg,transparent 0,black 38%,black 100%),linear-gradient(180deg,black,transparent 88%); mask-composite:intersect; pointer-events:none; } #universe { position:absolute; z-index:-1; inset:0; width:100%; height:100%; opacity:1; } .hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,7,13,.97) 0%,rgba(3,7,13,.82) 34%,rgba(3,7,13,.25) 65%,rgba(3,7,13,.08)); pointer-events:none; } .universe-hud { position:absolute; z-index:-1; inset:0; pointer-events:none; } .universe-core { position:absolute; top:50%; left:68%; display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(111,245,224,.86); color:var(--cyan); font:500 .75rem var(--mono); letter-spacing:.08em; box-shadow:0 0 25px rgba(111,245,224,.25); transform:translate(-50%,-50%) rotate(-10deg); } .universe-axis { position:absolute; top:50%; left:68%; width:min(31vw,370px); height:1px; background:linear-gradient(90deg,transparent,rgba(111,245,224,.6),transparent); transform-origin:left center; } .axis-a { transform:rotate(28deg); } .axis-b { transform:rotate(-56deg); } .axis-c { width:min(24vw,290px); background:linear-gradient(90deg,transparent,rgba(215,181,110,.45),transparent); transform:rotate(142deg); } .orbit-tag { position:absolute; color:rgba(232,245,245,.82); font:400 .58rem var(--mono); letter-spacing:.12em; } .tag-niyali { top:29%; right:15%; } .tag-suite { bottom:25%; right:24%; } .tag-neo { top:57%; right:5%; color:var(--cyan); } .motion-paused #universe,.webgl-unavailable #universe { opacity:0; } .motion-paused .universe-hud { opacity:.28; } .hero-copy { position:relative; z-index:2; max-width:790px; } .eyebrow { margin:0; display:flex; align-items:center; gap:.65rem; color:var(--muted); font:400 .68rem var(--mono); letter-spacing:.14em; text-transform:uppercase; } .eyebrow span { width:1.6rem; height:1px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); } h1,h2,h3,p { margin-top:0; } h1 { margin:1.3rem 0 1.6rem; font-size:clamp(3.5rem,8.5vw,8.75rem); font-weight:700; line-height:.9; letter-spacing:-.078em; text-wrap:balance; } h1 em,h2 em { color:var(--cyan); font-style:normal; text-shadow:0 0 35px rgba(111,245,224,.15); } .lede { max-width:530px; color:#c0cbd1; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.75; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; } .button { display:inline-flex; align-items:center; gap:2.4rem; padding:.95rem 1.1rem; border:1px solid var(--line); font:500 .72rem var(--mono); letter-spacing:.08em; text-decoration:none; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; } .button:hover { transform:translateY(-3px); } .button.primary { background:var(--cyan); color:var(--ink); border-color:var(--cyan); box-shadow:0 12px 30px rgba(111,245,224,.16); } .button.primary:hover { box-shadow:0 15px 38px rgba(111,245,224,.28); } .button.primary span { font-size:1.1rem; } .button.ghost:hover { color:var(--cyan); border-color:var(--cyan); } .hero-status { position:absolute; bottom:2rem; left:clamp(1.25rem,4vw,5rem); display:flex; align-items:center; gap:.6rem; color:var(--muted); font:400 .62rem var(--mono); letter-spacing:.1em; text-transform:uppercase; } .status-dot { width:.42rem; height:.42rem; background:var(--cyan); border-radius:50%; animation:pulse 2s infinite; box-shadow:0 0 14px var(--cyan); } .status-code { margin-left:1.4rem; color:#65717c; } .hero-index { position:absolute; right:clamp(1.25rem,4vw,5rem); bottom:2rem; display:grid; gap:.4rem; color:var(--muted); font:400 .6rem var(--mono); text-align:right; letter-spacing:.1em; }
.section-pad { padding:clamp(5rem,12vw,11rem) clamp(1.25rem,8vw,9rem); } .manifesto { background:#0a1019; border-top:1px solid var(--line); } .manifesto-grid { display:grid; grid-template-columns:1.45fr .65fr; gap:5rem; margin-top:2.2rem; align-items:end; } h2 { margin:0; font-size:clamp(2.8rem,6.2vw,6.4rem); letter-spacing:-.065em; line-height:.96; } .body-copy { color:#afbbc4; font-size:1.05rem; line-height:1.8; } .signal-line { display:flex; gap:.45rem; margin-top:6rem; } .signal-line i { display:block; flex:1; height:2px; background:var(--line); } .signal-line i:nth-child(3) { background:var(--cyan); }
.ecosystem { background:linear-gradient(135deg,#03070d 0%,#07121e 100%); } .section-heading { display:flex; justify-content:space-between; } .section-number,.product-index,.product-type,.fine-print { font:400 .65rem var(--mono); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; } .product-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line); } .product-card { position:relative; min-height:470px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; background:linear-gradient(145deg,rgba(13,28,43,.98),rgba(5,11,19,.98)); transition:transform .35s ease,background .35s ease; } .product-card:hover { z-index:1; background:linear-gradient(145deg,#102d40,#071019); transform:translateY(-8px); } .product-card>div:not(.product-orbit) { position:relative; z-index:1; } .product-card h3 { margin:.8rem 0 1rem; font-size:clamp(2rem,3vw,3.2rem); letter-spacing:-.065em; line-height:.9; } .product-card p:not(.product-index):not(.product-type) { max-width:250px; color:#aab7c0; font-size:.9rem; line-height:1.7; } .product-card>a,.product-card>span:last-child { position:relative; z-index:1; align-self:flex-end; font:400 1.5rem var(--mono); text-decoration:none; transition:color .2s ease; } .product-card>a:hover { color:var(--cyan); } .product-orbit { position:absolute; width:260px; height:260px; right:-80px; top:42px; border:1px solid rgba(111,245,224,.23); border-radius:50%; box-shadow:inset 0 0 45px rgba(111,245,224,.03); } .product-orbit:before,.product-orbit:after { content:""; position:absolute; border:1px solid rgba(111,245,224,.13); border-radius:50%; } .product-orbit:before { inset:35px; } .product-orbit:after { inset:84px; background:rgba(111,245,224,.08); box-shadow:0 0 34px rgba(111,245,224,.14); } .orbit-two { border-color:rgba(215,181,110,.28); transform:rotateX(65deg) rotateZ(-22deg); } .orbit-three { border-radius:42% 58% 52% 48%; animation:orbit 12s linear infinite; } .fine-print { margin-top:1.3rem; text-transform:none; letter-spacing:.02em; }
.ventures { background:#090f18; border-block:1px solid var(--line); } .ventures-intro { display:grid; grid-template-columns:1.45fr .65fr; gap:4rem; margin:2.8rem 0 4rem; align-items:end; } .venture-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .venture-card { position:relative; min-height:230px; padding:1.3rem; overflow:hidden; background:#0b121c; transition:background .3s ease; } .venture-card:after { content:""; position:absolute; width:110px; height:110px; right:-38px; bottom:-48px; border:1px solid rgba(125,247,227,.17); border-radius:50%; transition:transform .45s ease; } .venture-card:hover { background:#101d28; } .venture-card:hover:after { transform:scale(1.5); } .venture-no,.venture-type { position:relative; z-index:1; font:400 .62rem var(--mono); color:var(--cyan); letter-spacing:.1em; text-transform:uppercase; } .venture-type { margin:2.6rem 0 .5rem; color:var(--muted); } .venture-card h3 { position:relative; z-index:1; margin:0; max-width:220px; font-size:1.3rem; line-height:1.05; letter-spacing:-.05em; } .venture-card>p:last-child { position:relative; z-index:1; margin:1rem 0 0; max-width:215px; color:#9faeba; font-size:.78rem; line-height:1.55; }
.capabilities { background:var(--surface); border-block:1px solid var(--line); } .capability-intro { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; } .capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:5rem; background:var(--line); } .capability { min-height:275px; padding:1.4rem; background:var(--surface); } .capability span { color:var(--cyan); font:400 .66rem var(--mono); } .capability h3 { margin:4.4rem 0 .9rem; font-size:1.15rem; letter-spacing:-.04em; } .capability p { color:#9faeba; font-size:.86rem; line-height:1.7; } .statement { min-height:75vh; display:flex; align-items:center; background:#080c13; } .statement-grid { display:grid; grid-template-columns:.8fr 1.5fr .75fr; gap:3rem; align-items:center; width:100%; } .contact { background:var(--cyan); color:var(--ink); } .contact .eyebrow { color:#31504d; } .contact .eyebrow span { background:var(--ink); } .contact-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:4rem; align-items:end; } .contact h2 em { color:#245652; } .contact-action p { color:#31504d; line-height:1.6; } .contact .button { margin:1rem 0 1.25rem; color:var(--white); background:var(--ink); border-color:var(--ink); } .contact-note { font:400 .62rem var(--mono); } footer { display:flex; justify-content:space-between; gap:1rem; padding:1.8rem clamp(1.25rem,4vw,5rem); border-top:1px solid var(--line); color:var(--muted); font:400 .66rem var(--mono); letter-spacing:.04em; } .footer-system { color:var(--cyan); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible { opacity:1; transform:none; } @keyframes pulse { 50% { box-shadow:0 0 0 5px rgba(125,247,227,.12); } } @keyframes orbit { to { transform:rotate(360deg); } }
@media (max-width:960px) { .venture-grid { grid-template-columns:repeat(2,1fr); } .universe-core,.universe-axis { left:75%; } } @media (max-width:760px) { .nav { min-height:76px; padding-top:.8rem; } .brand-mark { width:44px; height:44px; } .brand-mark img { width:136px; left:-46px; top:-30px; } .brand-wordmark { font-size:.58rem; } .brand-wordmark span { font-size:.45rem; } .menu-toggle { display:block; border:1px solid var(--line); padding:.5rem .65rem; background:rgba(3,7,13,.72); color:var(--white); font:500 .64rem var(--mono); letter-spacing:.08em; } .nav-links { display:none; position:absolute; top:5.2rem; right:1.25rem; padding:1rem; background:#0c121d; border:1px solid var(--line); flex-direction:column; align-items:flex-start; } .nav-links.open { display:flex; } .hero { align-items:flex-end; padding-inline:1.25rem; padding-bottom:7.5rem; } .hero:before { background-size:auto,28px 28px,28px 28px; } .hero:after { background:linear-gradient(180deg,rgba(3,7,13,.88),rgba(3,7,13,.45) 55%,rgba(3,7,13,.92)); } .universe-core,.universe-axis { left:66%; top:37%; } .universe-axis { width:220px; } .orbit-tag { display:none; } .hero-status { left:1.25rem; } .section-pad { padding-inline:1.25rem; } .manifesto-grid,.capability-intro,.ventures-intro,.contact-grid,.statement-grid { grid-template-columns:1fr; gap:2rem; } .product-list,.capability-grid,.venture-grid { grid-template-columns:1fr; } .product-card { min-height:340px; } .capability { min-height:215px; } .statement { min-height:0; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } #universe { display:none; } .hero { background:radial-gradient(circle at 75% 20%,#18323a 0, var(--ink) 48%); } .reveal { opacity:1; transform:none; } }