@media screen { .header.wrap { max-width: 1680px; min-height: 64px; padding-inline: 60px; border-bottom: 0; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .header.wrap:after { content: ""; position: absolute; bottom: 0; left: 4%; right: 4%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent); pointer-events: none; } .architecture-journey + .section-divider { position: relative; width: min(1600px, calc(100vw - 120px)); left: 50%; transform: translateX(-50%); } .systems-hero { width: min(1600px, calc(100vw - 120px)); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); gap: 4.5%; align-items: start; min-height: 790px; padding: 74px 0 28px; isolation: isolate; } .hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/images/hero/atmosphere.webp') center / cover; opacity: .5; mask-image: linear-gradient(transparent 5%, #000 40%, #000 88%, transparent); } .systems-hero:before { content: ''; position: absolute; inset: 0 calc((min(1600px, 100vw - 120px) - 100vw) / 2); z-index: -3; pointer-events: none; background: linear-gradient(var(--paper), #020303 10%, #020303 92%, var(--paper)); } .hero-system-grid, .hero-system-hud { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--accent); } .hero-system-grid { opacity: .45; background-image: radial-gradient(#bfc8d95c .6px, transparent .8px), linear-gradient(#d2d8e112 1px, transparent 1px), linear-gradient(90deg, #d2d8e112 1px, transparent 1px); background-size: 28px 28px, 140px 140px, 140px 140px; mask-image: radial-gradient(ellipse at 53% 40%, #000, transparent 78%); } .hero-system-hud { opacity: .65; } [data-theme='studio'] .hero-qr-codes > img:first-child { filter: grayscale(1) brightness(4); } [data-theme='studio'] .hero-scene { background: #080a0d; } .systems-hero .hero-copy { padding: 25px 0 0 26px; min-width: 0; position: relative; z-index: 2; animation: none; } .systems-hero .eyebrow { font: 12px/1.5 ui-monospace, monospace; letter-spacing: .2em; margin-bottom: 31px; } .hero-identity { position: relative; } .hero-identity:after { content: ''; position: absolute; left: -9px; right: 0; bottom: -5px; height: 22px; border-bottom: 1px solid var(--accent); border-inline: 1px solid var(--accent); opacity: .65; pointer-events: none; } .hero-copy:before { content: ""; position: absolute; left: 2px; top: 330px; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--accent), transparent); opacity: .7; pointer-events: none; } .hero-system-marker { position: absolute; top: -22px; right: 0; font: 8px/1 ui-monospace, monospace; letter-spacing: .12em; color: var(--accent); } .hero-system-marker i { margin-left: 28px; font-style: normal; } .systems-hero .eyebrow:after { content: ''; position: absolute; top: 48px; left: 26px; width: 52%; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); opacity: .85; } .systems-hero .name-line:first-child:before { content: ''; position: absolute; top: -9px; left: -9px; width: 25%; height: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .systems-hero h1 { font-size: clamp(66px, 7.65vw, 128px); line-height: 1; letter-spacing: -.065em; font-weight: 800; } .systems-hero .name-line:first-child { margin-bottom: .05em; } .systems-hero .name-line:first-child .name-text { padding: 0 .08em .03em; line-height: .97; } .systems-hero .name-line:nth-child(2) .name-text { font-size: 1.19em; padding: 0; line-height: .88; letter-spacing: -.065em; } .systems-hero .name-line:first-child:after { content: ''; position: absolute; inset: -9px; border: 1px solid var(--line); border-left-color: var(--accent); pointer-events: none; } .systems-hero .name-text { clip-path: none; white-space: nowrap; } .hero-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:31px; } .systems-hero .hero-eyebrow-row .eyebrow { margin:0; } .hero-availability-text { display:inline-flex; white-space:nowrap; } .hero-availability-character { display:inline-block; } .hero-availability-text.is-typing .hero-availability-character { opacity:0; } .hero-availability-text.is-typing .hero-availability-character.is-visible { opacity:1; } .hero-qr { flex:none; display:flex; padding:0; } .hero-qr-codes { display:flex; align-items:center; gap:7px; } .hero-qr img { width:27px; height:27px; background:transparent; } .hero-qr-codes > img:first-child { filter:none; } .systems-hero .hero-title { font: 600 clamp(20px, 1.7vw, 27px)/1.3 var(--heading); letter-spacing: -.03em; margin: 18px 0 0; } .systems-hero .hero-intro { max-width: 600px; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.65; margin: 18px 0 0; } .systems-hero .hero-actions { gap: 26px; margin-top: 24px; } .systems-hero .hero-actions button { min-height: 44px; font-size: 13px; } .systems-hero .hero-cta { width: 320px; max-width: 100%; min-height: 106px; margin: -24px 0 -24px -24px; padding: 0 42px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #ffffffd6; font-size: 15px; font-weight: 540; position: relative; isolation: isolate; transition: transform .2s ease-out; } .hero-cta:before { content: ''; position: absolute; inset: 28% 7%; z-index: -2; background: color-mix(in srgb, var(--accent) 23%, #050608); opacity: .72; transition: opacity .2s; pointer-events: none; } .hero-cta:after { content: ''; position: absolute; inset: 29% 8%; z-index: 0; clip-path: polygon(2% 0, 98% 0, 100% 18%, 100% 82%, 98% 100%, 2% 100%, 0 82%, 0 18%); background: linear-gradient(102deg, transparent 12%, color-mix(in srgb, var(--accent) 28%, transparent) 34%, rgba(255,255,255,.82) 50%, color-mix(in srgb, var(--accent) 38%, transparent) 66%, transparent 88%) -70% 0 / 42% 100% no-repeat; opacity: 0; mix-blend-mode: screen; pointer-events: none; } .hero-cta-layer { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: filter .22s ease, opacity .22s ease; } .hero-cta-label, .hero-cta-arrow { position: relative; z-index: 1; } .hero-cta-label { white-space: nowrap; } .hero-cta-arrow { font-size: 20px; line-height: 1; } .systems-hero .hero-cta:is(:hover, :focus-visible) { transform: translateY(-2px) scale(1.02); } .hero-cta:is(:hover, :focus-visible):before { opacity: 1; } .hero-cta:is(:hover, :focus-visible) .hero-cta-layer { filter: brightness(1.18) saturate(1.1); } .hero-cta:is(:hover, :focus-visible) .hero-cta-arrow { transform: translateX(4px); } [data-theme='studio'] .hero-cta-layer { filter: grayscale(1); } [data-theme='studio'] .hero-cta:is(:hover, :focus-visible) .hero-cta-layer { filter: grayscale(1) brightness(1.18); } .hero-proof { display: grid; grid-template-columns: .85fr 1.15fr .8fr 1.2fr; gap: 0; list-style: none; padding: 0; margin: 45px 0 0; max-width: 650px; } .hero-proof li { padding: 0 20px; border-left: 1px solid var(--accent); min-height: 52px; } .hero-proof strong, .hero-proof span { display: block; font-size: 13px; line-height: 1.45; } .hero-proof strong { font-weight: 650; text-transform: uppercase; } .hero-proof li:first-child { padding-left: 0; border-left: 0; } .hero-proof li:first-child strong { font-size: 21px; line-height: 1; font-weight: 500; } .hero-proof li:first-child span { max-width: 7ch; } .hero-proof span { margin-top: 3px; color: var(--muted); } .hero-scene { position: relative; isolation: isolate; aspect-ratio: 1.212; border: 1px solid #ffffff30; background: radial-gradient(ellipse at 82% 60%, #ff344914, transparent 60%), #080a0d; box-shadow: inset 0 1px 0 #ffffff09, 0 15px 50px #0003; color: #f4f5f7; overflow: hidden; } .hero-scene:before, .hero-scene:after { content: ''; position: absolute; width: 48px; height: 26%; z-index: 6; pointer-events: none; opacity: .9; filter: drop-shadow(0 0 4px var(--accent)); } .hero-scene:before { left: 0; top: 24px; border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); } .hero-scene:after { right: 0; bottom: 24px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .hero-scene-side { position: absolute; right: 13px; top: 40%; writing-mode: vertical-rl; font: 7px/1 ui-monospace, monospace; letter-spacing: .14em; color: #c5cbd3; } .hero-scene-side--left { left: 23px; right: auto; transform: rotate(180deg); } .hero-scene-art, .hero-scene-copy { position: absolute; inset: 0; } .hero-scene-art { overflow: hidden; } .hero-scene-art:after { content: ''; position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, #0002, #0008 25%, #0005 48%, transparent 74%); pointer-events: none; } .hero-grid, .hero-terrain, .hero-terrain img, .hero-nodes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-grid { opacity: 1; } .hero-nodes { pointer-events: none; } .hero-node { opacity: .45; } .hero-terrain { transform: translate(calc(var(--hero-x, 0px) * var(--depth)), calc(var(--hero-y, 0px) * var(--depth))); transition: transform .3s ease-out; } .hero-terrain--back { --depth: .25; --travel: 2px; opacity: .16; } .hero-terrain--mid { --depth: .5; --travel: 4px; opacity: .8; } .hero-terrain--mid .hero-faceted-mountains { width: 118%; height: 100%; left: -23%; top: 0; object-fit: contain; mask-image: linear-gradient(#000 50%, transparent 95%); } .hero-terrain--front { --depth: 1; --travel: 8px; } .hero-orb { position: absolute; width: 21%; aspect-ratio: 1; right: 4%; top: 17%; } .hero-orb img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-scan { z-index: 4; position: absolute; width: 2px; height: 45%; top: -8%; left: 45%; background: linear-gradient(transparent, #ff3347, #fff, #ff3347, transparent); opacity: .9; box-shadow: 0 0 14px 3px #ff3347aa, 0 0 50px 14px #ff334733; } .hero-scan:after { content: ''; position: absolute; top: 48%; left: -1px; width: 4px; height: 28px; background: linear-gradient(transparent, #ffe2e5, transparent); box-shadow: 0 0 12px 3px #ff2639, 0 0 40px 12px #ff263944; } .hero-scan--secondary { left: 13%; top: 54%; height: 43%; } .hero-orbit { opacity: .4; } .hero-sphere { opacity: .82; } .hero-scene-copy { z-index: 5; display: flex; flex-direction: column; padding: 26px 28px; } .hero-scene-top, .hero-scene-bottom { display: flex; justify-content: space-between; align-items: center; font: 13px/1.5 ui-monospace, monospace; } .hero-scene-top b, .hero-statement b { color: var(--accent); } .hero-scene-bottom { margin-top: auto; } .hero-scene-link { display: grid; place-items: center; color: #fff; transition: border-color .2s, background .2s; font-size: 27px; border: 1px solid #ffffff40; border-radius: 50%; width: 46px; height: 46px; text-align: center; } .hero-scene-link:hover, .hero-scene-link:focus-visible { border-color: var(--accent); background: var(--accent-soft); } .hero-scene small { font: 10px/1.5 ui-monospace, monospace; letter-spacing: .1em; } .hero-statement { font: 800 clamp(24px, 3.2vw, 55px)/1.02 var(--heading); margin-top: auto; margin-left: 16.5%; padding-top: 22px; letter-spacing: -.045em; } .hero-statement > span { display: block; } .hero-statement small { display: block; margin-top: 20px; color: #bfc4cd; } .hero-twinkles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .3; } .hero-twinkles i:nth-child(1) { top: 12%; left: 68%; } .hero-twinkles i:nth-child(2) { top: 68%; left: 52%; animation-delay: -2s; } .hero-twinkles i:nth-child(3) { top: 85%; left: 32%; animation-delay: -4s; } .hero-twinkles i:nth-child(4) { top: 50%; left: 92%; animation-delay: -1s; } .hero-twinkles i:nth-child(5) { top: 73%; left: 81%; animation-delay: -3s; } .hero-twinkles i:nth-child(6) { top: 31%; left: 16%; animation-delay: -5s; } [data-theme='studio'] .systems-hero :is(.hero-atmosphere, .hero-scene-art, .hero-data-code) { filter: grayscale(1); } } @media screen and (prefers-reduced-motion: no-preference) { .hero-node { animation: hero-node-pulse 8s ease-in-out var(--node-delay) infinite; } .hero-sphere { animation: hero-pulse 4s ease-in-out infinite; } .hero-orbit { animation: hero-orbit 18s ease-in-out infinite; } .hero-grid { animation: hero-shimmer 4s ease-in-out infinite alternate; } .hero-scan { animation: hero-sweep 7s ease-in-out infinite alternate; } .hero-twinkles i { animation-name: hero-twinkle; animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .hero-terrain img { animation: hero-drift 16s ease-in-out infinite alternate; } .systems-hero:not(.hero-active) .hero-scene-art * { animation-play-state: paused; } .intro-play .systems-hero .name-text { animation: hero-title-swipe .72s cubic-bezier(.16, 1, .3, 1) calc(.52s + var(--line-delay)) both; } .intro-play .hero-statement > span { animation: hero-enter .5s cubic-bezier(.16, 1, .3, 1) calc(.6s + var(--order) * .12s) both; } .intro-play .hero-scene { animation: hero-enter .5s cubic-bezier(.16, 1, .3, 1) .2s both; } .intro-play .systems-hero .hero-intro { animation: hero-enter .4s ease-out 1s both; } .intro-play .systems-hero :is(.hero-actions, .hero-proof) { animation: hero-enter .3s ease-out 1.2s both; } .intro-play .hero-cta-layer { animation: hero-cta-power-on 1.15s cubic-bezier(.16, 1, .3, 1) 1.35s both; } .intro-play .hero-cta:after { animation: hero-cta-light-sweep 1.2s cubic-bezier(.2, .7, .25, 1) 1.52s both; } .systems-hero.hero-active .hero-cta:before { animation: hero-cta-idle-glow 5.8s ease-in-out 2.8s infinite alternate; } } @keyframes hero-node-pulse { 0%, 65%, 100% { opacity: .25; } 80% { opacity: .85; } } @keyframes hero-pulse { 50% { transform: scale(1.025); } } @keyframes hero-orbit { 50% { transform: rotate(9deg); } } @keyframes hero-shimmer { to { opacity: .45; } } @keyframes hero-sweep { to { transform: translateY(24%); opacity: .65; } } @keyframes hero-twinkle { 50% { opacity: .8; } 75% { opacity: .15; } } @keyframes hero-drift { to { transform: translateY(var(--travel)); } } @keyframes hero-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes hero-title-swipe { from { opacity: .35; clip-path: inset(0 100% 0 0); transform: translateX(-8px); } to { opacity: 1; clip-path: inset(0); transform: none; } } @keyframes hero-cta-power-on { 0% { opacity: .28; transform: scale(.985); } 46% { opacity: 1; transform: scale(1.012); } 70% { opacity: .76; } 100% { opacity: 1; transform: none; } } @keyframes hero-cta-light-sweep { 0% { opacity: 0; background-position: -70% 0; } 18% { opacity: .92; } 76% { opacity: .55; } 100% { opacity: 0; background-position: 170% 0; } } @keyframes hero-cta-idle-glow { from { opacity: .62; } to { opacity: .82; } } @media screen and (min-width: 1281px) and (max-width: 1500px) { .hero-qr { top: 0; } } @media screen and (max-width: 1280px) { .hero-qr img { width:32px; height:32px; } .systems-hero .hero-actions { gap: 12px; } .systems-hero .hero-cta { gap: 15px; width: 280px; min-height: 93px; margin-left: 0; padding-inline: 36px; font-size: 13px; } } @media screen and (max-width: 1280px) { .systems-hero:before { inset: 0; } .hero-copy:before { display: none; } .header.wrap { padding-inline: 24px; } .architecture-journey + .section-divider { width: 100%; left: auto; transform: none; } .systems-hero .hero-copy { padding: 0; } .systems-hero .eyebrow:after { display: none; } .systems-hero { width: 100%; left: auto; transform: none; grid-template-columns: 1fr; min-height: 0; padding: 42px 0; gap: 32px; } .systems-hero h1 { font-size: clamp(62px, 11vw, 112px); } .hero-scene { width: 100%; max-width: 760px; justify-self: center; } .hero-statement { font-size: clamp(30px, 6vw, 60px); } .systems-hero .hero-actions { gap: 20px; } .hero-qr { right: 0; top: 20px; } .hero-qr img { width: 60px; height: 60px; } .hero-proof { max-width: 680px; } } @media screen and (max-width: 600px) { .hero-qr img { width:24px; height:24px; } .systems-hero .hero-copy { padding: 0; } .hero-statement { margin-left: 8%; padding-top: 0; } .hero-scene-side--left { left: 8px; } .hero-scene:before{top:4px} .hero-proof li { padding: 0 12px; } .hero-proof li:first-child { padding-left: 12px; border-left: 1px solid var(--accent); } .systems-hero .hero-intro { font-size: 14px; } .systems-hero h1 { font-size: clamp(44px, 12vw, 72px); } .systems-hero .hero-title { font-size: 20px; } .systems-hero .eyebrow { font-size: 8px; letter-spacing: .14em; } .hero-proof { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; } .hero-scene { aspect-ratio: 1; } .hero-scene-copy { padding: 20px; } .hero-statement { font-size: clamp(24px, 6.5vw, 38px); } .hero-scene small { font-size: 7px; } .hero-scene-top { font-size: 9px; } .hero-terrain { transform: none; } .hero-twinkles i:nth-child(n+4) { display: none; } } @media screen and (max-width:600px){.hero-scene-copy{z-index:7}.hero-statement{position:relative;z-index:8;margin:clamp(64px,19vw,96px) 10% auto 3%;padding:10px 0 12px 16px;color:#fff;text-shadow:0 2px 3px #000,0 0 20px #000,0 0 38px #000c;isolation:isolate}.hero-statement:before{content:'';position:absolute;inset:-24px -36px -28px -30px;z-index:-1;background:radial-gradient(ellipse at 30% 52%,#020303f2,#020303bd 42%,#02030366 62%,transparent 80%)}.hero-statement>span,.hero-statement small{position:relative;z-index:1}} @media screen and (max-width:720px) { .systems-hero .hero-cta { margin-left: -12px; } .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 100%; margin-top: 28px; } .hero-proof li { min-width: 0; padding-inline: 12px; } .hero-proof li:first-child { padding-left: 12px; border-left: 1px solid var(--accent); } .systems-hero:before, .hero-atmosphere, .hero-system-grid, .hero-system-hud { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); } .systems-hero:before { top: 0; bottom: 0; background: linear-gradient(180deg, var(--paper), #020303 12%, #020303 76%, var(--paper)); } .hero-system-grid { mask-image: radial-gradient(ellipse 78% 72% at 50% 40%, #000 42%, transparent 100%); } } @media (prefers-reduced-motion: reduce) { .systems-hero *, .systems-hero *:before { animation: none !important; transition: none !important; } .hero-terrain { transform: none !important; } .hero-availability-character { opacity:1 !important; } } @media print { .hero-scene, .hero-atmosphere, .hero-qr, .hero-system-marker, .hero-system-grid, .hero-system-hud { display: none !important; } .hero-proof { display: flex; gap: 24px; padding: 0; list-style: none; } .hero-proof strong, .hero-proof span { display: block; font-size: 9pt; } }