:root {
  --ink: #071012;
  --ink-soft: #102023;
  --ink-line: rgba(225, 245, 241, .16);
  --paper: #f3f4ef;
  --paper-muted: #d1d7d1;
  --teal: #54e2c4;
  --teal-deep: #147b6b;
  --orange: #ff7146;
  --dark: #071113;
  --line: rgba(7, 16, 18, .16);
  --font: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 16px; line-height: 1.55; }
body.is-locked { overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .055; 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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 86px; padding: 0 5.6vw; display: flex; align-items: center; justify-content: space-between; color: #eef5f1; border-bottom: 1px solid rgba(238,245,241,.16); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.brand-mark { position: relative; display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 3px; align-items: end; width: 24px; height: 26px; transform: skewY(-24deg); }
.brand-mark i { display: block; width: 5px; background: var(--teal); }
.brand-mark i:nth-child(1) { height: 11px; }
.brand-mark i:nth-child(2) { height: 21px; background: #fff; }
.brand-mark i:nth-child(3) { height: 15px; background: var(--orange); }
.brand-logo { display: block; width: auto; max-width: 185px; height: 32px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; gap: 28px; margin-left: 54px; }
.main-nav a, .text-action { padding: 8px 0; border: 0; color: inherit; background: none; font-size: 14px; transition: color .22s ease; }
.main-nav a:hover, .text-action:hover { color: var(--teal); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.header-cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; color: var(--ink); background: var(--teal); font-size: 14px; font-weight: 700; border-radius: 3px; transition: transform .22s ease, background .22s ease; }
.header-cta:hover { transform: translateY(-2px); background: #9ff7e6; }

.hero { position: relative; min-height: 820px; height: 100vh; overflow: hidden; color: #f3f8f5; background: var(--ink); }
#commerce-scene { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.hero-grid { position: absolute; z-index: 1; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(157,226,212,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157,226,212,.07) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(700px, 52vw); min-height: 100%; padding: 138px 0 96px 8.4vw; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.eyebrow span { display: inline-block; width: 25px; height: 1px; background: currentColor; }
.hero h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 670px; margin-bottom: 24px; color: #f7faf8; font-size: 72px; font-weight: 700; letter-spacing: 0; line-height: 1.13; }
.hero h1 em { color: var(--teal); font-style: normal; }
.hero-summary { width: 515px; max-width: 100%; margin-bottom: 34px; color: #b9cbc5; font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 50px; padding: 0 20px; border: 1px solid transparent; border-radius: 3px; color: var(--ink); background: var(--teal); font-size: 14px; font-weight: 700; transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.primary-button:hover { transform: translateY(-2px); background: #99f6e3; }
.primary-button span { font-size: 18px; line-height: 1; }
.play-button { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; color: #e7f2ed; background: none; font-size: 14px; }
.play-button b { display: grid; place-items: center; width: 29px; height: 29px; color: var(--teal); border: 1px solid rgba(84,226,196,.7); border-radius: 50%; font-size: 10px; }
.hero-meta { display: flex; gap: 29px; margin: 72px 0 0; }
.hero-meta div { padding-left: 12px; border-left: 1px solid rgba(145,215,200,.4); }
.hero-meta dt { margin-bottom: 2px; color: var(--teal); font-size: 13px; font-weight: 800; }
.hero-meta dd { margin: 0; color: #adc1bb; font-size: 12px; }
.hero-caption { position: absolute; z-index: 3; right: 5.6vw; bottom: 37px; display: flex; align-items: center; gap: 12px; color: #94a8a1; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.hero-caption i { width: 45px; height: 1px; background: var(--teal); }
.hero-caption strong { margin-left: 18px; color: #f3f8f5; font-size: 11px; }

.intro-band { padding: 142px 8.4vw 118px; background: var(--paper); }
.section-index { margin-bottom: 28px; color: var(--teal-deep); font-size: 11px; font-weight: 800; letter-spacing: 1.3px; }
.intro-heading, .section-heading-row, .contact-row { display: grid; grid-template-columns: 1.32fr .68fr; gap: 8vw; align-items: end; }
h2 { font-size: 47px; font-weight: 700; letter-spacing: 0; line-height: 1.22; }
.intro-heading h2 { margin-bottom: 0; }
.intro-heading > p { margin: 0 0 7px; color: #51625e; font-size: 16px; line-height: 1.8; }
.capability-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 78px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability { position: relative; min-height: 314px; padding: 26px 25px; border-right: 1px solid var(--line); }
.capability:last-child { border-right: 0; }
.capability:hover { background: #e8efea; }
.cap-number { color: #789087; font-size: 12px; font-weight: 800; }
.capability h3 { margin: 56px 0 13px; font-size: 21px; line-height: 1.3; }
.capability p { max-width: 245px; margin-bottom: 0; color: #50615d; font-size: 14px; line-height: 1.75; }
.focus-capability { color: #eff9f5; background: var(--ink-soft); }
.focus-capability:hover { background: #10292a; }
.focus-capability .cap-number, .focus-capability p { color: #b5d0c8; }
.line-diagram { position: absolute; right: 24px; bottom: 27px; left: 25px; display: flex; align-items: end; gap: 6px; height: 44px; }
.line-diagram i { flex: 1; height: 4px; background: var(--teal); transform-origin: bottom; animation: chart-rise 2.8s ease-in-out infinite; }
.line-diagram i:nth-child(2) { height: 19px; animation-delay: .2s; }.line-diagram i:nth-child(3) { height: 33px; animation-delay: .4s; }.line-diagram i:nth-child(4) { height: 26px; animation-delay: .6s; }
@keyframes chart-rise { 50% { transform: scaleY(.45); opacity: .45; } }

.product-section { padding: 142px 8.4vw 124px; background: var(--paper); }
.product-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; }
.product-heading h2 { margin: 0; }.product-heading h2 em { color: var(--teal-deep); font-style: normal; }
.product-heading > p { max-width: 410px; margin: 0 0 6px; color: #51625e; font-size: 16px; line-height: 1.82; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 72px; border: 1px solid var(--line); background: var(--line); }
.product-panel { position: relative; display: flex; flex-direction: column; min-height: 335px; overflow: hidden; padding: 26px 29px; background: #f8faf6; transition: background .25s ease, transform .25s ease; }
.product-panel:hover { z-index: 1; background: #e6efea; transform: translateY(-3px); }
.product-panel.is-primary { color: #ecf8f3; background: #0b1a1c; }.product-panel.is-primary:hover { background: #10282a; }
.product-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #647a72; font-size: 10px; font-weight: 800; letter-spacing: 1px; }.product-panel.is-primary .product-panel-top { color: #8bb6a9; }
.product-panel-top b { color: var(--teal-deep); font-size: 10px; letter-spacing: 1.2px; }.product-panel.is-primary .product-panel-top b { color: var(--teal); }
.product-panel-copy { position: relative; z-index: 2; max-width: 340px; margin-top: auto; }.product-panel-copy h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.22; }.product-panel-copy p { margin: 0; color: #52655f; font-size: 14px; line-height: 1.8; }.product-panel.is-primary .product-panel-copy p { color: #acc8bf; }
.product-art { position: absolute; top: 72px; right: 29px; width: 166px; height: 116px; transform: perspective(620px) rotateX(58deg) rotateZ(-28deg); }.product-art i { position: absolute; display: block; border: 1px solid rgba(20,123,107,.62); background: rgba(84,226,196,.1); box-shadow: 12px 12px 0 rgba(20,123,107,.09); }.product-art i:nth-child(1) { inset: 2px 20px 34px 1px; }.product-art i:nth-child(2) { inset: 26px 4px 13px 27px; border-color: rgba(255,113,70,.58); background: rgba(255,113,70,.08); }.product-art i:nth-child(3) { inset: 49px 28px 0 10px; }.product-panel.is-primary .product-art i { border-color: rgba(84,226,196,.72); background: rgba(84,226,196,.11); }
.product-art-1 { transform: perspective(620px) rotateX(58deg) rotateZ(-11deg); }.product-art-1 i:nth-child(1) { inset: 8px 44px 16px 5px; }.product-art-1 i:nth-child(2) { inset: 35px 7px 4px 46px; }.product-art-1 i:nth-child(3) { inset: 14px 12px 38px 56px; }
.product-art-2 { transform: perspective(620px) rotateX(58deg) rotateZ(-42deg); }.product-art-2 i:nth-child(1) { inset: 14px 20px 21px 7px; }.product-art-2 i:nth-child(2) { inset: 31px 52px 0 38px; }.product-art-2 i:nth-child(3) { inset: 2px 6px 48px 59px; }
.product-art-3 { transform: perspective(620px) rotateX(58deg) rotateZ(-23deg); }.product-art-3 i:nth-child(1) { inset: 2px 37px 21px 4px; }.product-art-3 i:nth-child(2) { inset: 30px 7px 0 49px; }.product-art-3 i:nth-child(3) { inset: 21px 55px 16px 26px; }

.system-visual { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 635px; overflow: hidden; padding: 115px 8.4vw; color: #e9f5ef; background: #0b191b; }
.system-visual:before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(146,211,198,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(146,211,198,.1) 1px, transparent 1px); background-size: 56px 56px; }
.visual-copy, .architecture { position: relative; z-index: 1; }
.visual-copy { align-self: center; max-width: 480px; }.visual-copy h2 { margin-bottom: 21px; }.visual-copy > p:last-child { color: #a8beb7; font-size: 16px; line-height: 1.85; }
.architecture { min-height: 390px; }
.architecture svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.architecture path { stroke: rgba(84,226,196,.58); stroke-width: 1; stroke-dasharray: 5 7; animation: dash 10s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -180; } }
.arch-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 126px; height: 126px; border: 1px solid var(--teal); color: var(--teal); background: #102a2a; box-shadow: 20px 20px 0 rgba(84,226,196,.08); transform: translate(-50%, -50%) rotate(45deg); }
.arch-core span { font-size: 52px; font-weight: 800; transform: rotate(-45deg); }.arch-core b { position: absolute; bottom: 14px; font-size: 9px; letter-spacing: 2px; transform: rotate(-45deg); }
.arch-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; color: #e9f5ef; font-size: 13px; font-weight: 700; }.arch-node i { width: 10px; height: 10px; border: 1px solid var(--orange); transform: rotate(45deg); }.node-a { top: 17%; left: 5%; }.node-b { top: 16%; right: 4%; }.node-c { bottom: 15%; left: 4%; }.node-d { right: 2%; bottom: 14%; }

.versions-section { padding: 133px 8.4vw 122px; background: #edf0eb; }
.section-heading-row { align-items: end; }.section-heading-row h2 { margin: 0; }.section-heading-row > p { max-width: 380px; margin: 0 0 7px; color: #596865; font-size: 15px; line-height: 1.75; }
.version-list { margin-top: 78px; border-top: 1px solid var(--line); }
.version-item { display: grid; grid-template-columns: 100px 1fr 200px 1.25fr; align-items: center; min-height: 133px; gap: 20px; border-bottom: 1px solid var(--line); transition: padding .25s ease, color .25s ease, background .25s ease; }.version-item:hover, .version-item.active { padding: 0 22px; color: #eaf7f1; background: var(--ink-soft); }.version-item p { margin: 0; color: var(--teal-deep); font-size: 12px; font-weight: 800; }.version-item:hover p, .version-item.active p { color: var(--teal); }.version-item h3 { margin: 0; font-size: 31px; font-weight: 700; }.version-item > span { color: #778985; font-size: 10px; font-weight: 700; letter-spacing: 1px; }.version-item > div { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.version-item b { max-width: 245px; color: #596864; font-size: 14px; font-weight: 500; }.version-item:hover b, .version-item.active b { color: #b5c9c1; }.version-item a { color: var(--teal-deep); font-size: 13px; font-weight: 800; white-space: nowrap; }.version-item:hover a, .version-item.active a { color: var(--teal); }.version-item a i { padding-left: 6px; font-size: 20px; font-style: normal; }

.pricing-section { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; min-height: 670px; overflow: hidden; padding: 126px 8.4vw; color: #f3f8f5; background: #1c3434; }.pricing-main { position: relative; z-index: 1; }.pricing-main h2 { margin-bottom: 21px; }.pricing-main > p { max-width: 510px; color: #b5c9c1; font-size: 16px; line-height: 1.85; }.pricing-main .light { margin-top: 24px; color: #f3f8f5; background: transparent; border-color: rgba(238,248,244,.45); }.pricing-main .light:hover { color: var(--ink); background: var(--teal); border-color: var(--teal); }.pricing-detail { position: relative; z-index: 1; align-self: end; border-top: 1px solid rgba(238,248,244,.2); }.pricing-detail div { display: grid; grid-template-columns: 46px 1fr; gap: 3px 0; padding: 20px 0; border-bottom: 1px solid rgba(238,248,244,.2); }.pricing-detail span { grid-row: span 2; color: var(--teal); font-size: 13px; font-weight: 800; }.pricing-detail strong { font-size: 18px; }.pricing-detail p { margin: 3px 0 0; color: #b5c9c1; font-size: 13px; }.pricing-orbit { position: absolute; right: 3vw; top: 50%; width: 620px; height: 620px; border: 1px solid rgba(129,215,197,.2); border-radius: 50%; transform: translateY(-50%) rotateX(63deg) rotateZ(-24deg); }.pricing-orbit i { position: absolute; display: block; width: 45px; height: 45px; border: 1px solid var(--orange); transform: rotate(45deg); }.pricing-orbit i:nth-child(1) { top: 12%; left: 20%; }.pricing-orbit i:nth-child(2) { right: 9%; bottom: 19%; width: 22px; height: 22px; border-color: var(--teal); }.pricing-orbit i:nth-child(3) { right: 28%; top: 10%; width: 15px; height: 15px; border-color: #e2f3ec; }

.api-section { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 137px 8.4vw; color: #102020; background: #dbe4dc; }.api-copy { align-self: center; }.api-copy h2 { margin-bottom: 21px; }.api-copy > p:not(.section-index) { max-width: 455px; color: #50625d; font-size: 16px; line-height: 1.84; }.underlined-button { display: inline-flex; gap: 14px; margin-top: 18px; padding: 6px 0; border: 0; border-bottom: 1px solid #102020; color: var(--ink); background: none; font-size: 14px; font-weight: 800; }.api-terminal { align-self: center; border: 1px solid rgba(10,29,30,.35); border-radius: 4px; box-shadow: 16px 16px 0 rgba(18,87,78,.17); background: #0c191a; color: #d6e8e2; transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }.terminal-top { display: flex; align-items: center; gap: 6px; height: 43px; padding: 0 16px; border-bottom: 1px solid rgba(208,237,227,.17); }.terminal-top span { width: 7px; height: 7px; border-radius: 50%; background: #5e6e6a; }.terminal-top span:nth-child(1) { background: var(--orange); }.terminal-top span:nth-child(2) { background: #e6c962; }.terminal-top b { margin-left: 8px; color: #8da8a0; font-size: 10px; letter-spacing: 1px; }.terminal-body { min-height: 252px; padding: 27px 29px; }.terminal-body p { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; margin-bottom: 17px; color: #d6e8e2; font-size: 13px; }.terminal-body i { color: #77bfad; font-style: normal; }.terminal-body strong { color: var(--teal); font-size: 11px; letter-spacing: 1px; }.terminal-body span { color: #8da8a0; font-size: 12px; }.terminal-pulse { display: flex; align-items: end; gap: 8px; height: 74px; margin-top: 37px; }.terminal-pulse b { flex: 1; height: 15%; background: var(--teal); animation: signal 1.8s ease-in-out infinite; }.terminal-pulse b:nth-child(2){height:48%;animation-delay:.12s}.terminal-pulse b:nth-child(3){height:27%;animation-delay:.24s}.terminal-pulse b:nth-child(4){height:82%;animation-delay:.36s}.terminal-pulse b:nth-child(5){height:51%;animation-delay:.48s}.terminal-pulse b:nth-child(6){height:96%;animation-delay:.6s}.terminal-pulse b:nth-child(7){height:43%;animation-delay:.72s}.terminal-pulse b:nth-child(8){height:69%;animation-delay:.84s}@keyframes signal{50%{transform:scaleY(.55);opacity:.5}}

.company-section { position: relative; display: grid; grid-template-columns: 1fr .83fr; min-height: 610px; overflow: hidden; padding: 121px 8.4vw; color: #eff8f4; background: var(--ink); }.company-grid { position: absolute; inset: 0; opacity: .7; background-image: linear-gradient(45deg, transparent 49%, rgba(94,219,195,.12) 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, rgba(94,219,195,.07) 50%, transparent 51%); background-size: 88px 88px; mask-image: linear-gradient(90deg, #000, transparent 72%); }.company-copy, .company-statement { position: relative; z-index: 1; }.company-copy h2 { margin-bottom: 20px; }.company-copy > p:last-child { max-width: 590px; color: #a8beb6; font-size: 16px; line-height: 1.85; }.company-statement { align-self: end; padding-left: 10vw; }.company-statement span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: 2px; }.company-statement strong { display: block; margin-top: 13px; color: transparent; -webkit-text-stroke: 1px rgba(225,249,240,.8); font-size: 49px; line-height: 1.08; }

.contact-section { padding: 122px 8.4vw 104px; background: var(--paper); }.contact-row h2 { margin-bottom: 0; }.consult-form { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 18px; }.consult-form label { color: #52625e; font-size: 12px; font-weight: 700; }.consult-form label.full { grid-column: span 2; }.consult-form input, .consult-form textarea { display: block; width: 100%; margin-top: 7px; padding: 10px 0; border: 0; border-bottom: 1px solid #899792; outline: none; color: var(--ink); background: transparent; font-size: 15px; transition: border-color .2s ease; }.consult-form textarea { min-height: 83px; resize: vertical; }.consult-form input:focus, .consult-form textarea:focus { border-color: var(--teal-deep); }.consult-form button { justify-self: start; margin-top: 5px; }.form-note { align-self: center; margin: 5px 0 0; color: #6a7974; font-size: 12px; }

.site-footer { position:relative; overflow:hidden; padding:64px 8.4vw 0; color:#9ab1aa; background:#071314; font-size:13px; }.site-footer:before { position:absolute; top:0; right:8.4vw; left:8.4vw; height:1px; background:rgba(119,229,204,.26); content:""; }.site-footer-main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(205px,.95fr) minmax(390px,1.9fr) minmax(180px,.72fr) auto; gap:44px; align-items:start; max-width:1500px; margin:0 auto; }.site-footer-brand .brand { color:#eff9f4; font-size:18px; }.site-footer-brand>p { max-width:245px; margin:19px 0 0; color:#819993; font-size:12px; line-height:1.9; }.site-footer-nav { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); gap:28px; }.site-footer h2 { margin:0 0 18px; color:#edf8f3; font-size:14px; font-weight:700; line-height:1.35; }.site-footer ul { display:grid; gap:11px; margin:0; padding:0; list-style:none; }.site-footer a { color:inherit; transition:color .2s ease; }.site-footer-nav a { display:inline-block; color:#a1b7b0; line-height:1.45; }.site-footer a:hover { color:var(--teal); }.site-footer-contact { min-width:0; }.site-footer-contact p { margin:0 0 11px; color:#a1b7b0; line-height:1.65; overflow-wrap:anywhere; }.site-footer-qrs { display:flex; align-items:flex-start; gap:14px; }.site-footer-qrs figure { width:88px; margin:0; text-align:center; }.site-footer-qrs img { display:block; width:88px; aspect-ratio:1; padding:4px; background:#fff; object-fit:contain; }.site-footer-qrs figcaption { margin-top:9px; color:#b3c9c1; font-size:11px; line-height:1.4; }.site-footer-friends { position:relative; z-index:1; display:flex; gap:22px; max-width:1500px; margin:52px auto 0; padding:17px 0; border-top:1px solid rgba(204,242,229,.13); border-bottom:1px solid rgba(204,242,229,.13); color:#6f8980; font-size:12px; }.site-footer-friends>span { flex:0 0 auto; color:#c5d6cf; font-weight:700; }.site-footer-friends>div { display:flex; flex-wrap:wrap; gap:10px 21px; }.site-footer-friends a { color:#92aaa3; }.site-footer-bottom { position:relative; z-index:1; max-width:1500px; margin:0 auto; padding:19px 0 23px; }.site-footer-legal { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#728b83; font-size:10px; letter-spacing:.5px; }.site-footer-legal p,.site-footer-legal a,.site-footer-legal span { margin:0; }.site-footer-legal a { color:#809890; letter-spacing:0; }.site-footer-legal a:hover { color:var(--teal); }

.login-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(3,11,12,.72); backdrop-filter: blur(11px); transition: opacity .2s ease, visibility .2s ease; }.login-overlay.is-open { visibility: visible; opacity: 1; }.login-panel { position: relative; width: min(475px, 100%); overflow: hidden; padding: 47px; color: #eff9f4; background: #0c1b1d; border: 1px solid rgba(142,232,208,.3); box-shadow: 23px 23px 0 rgba(81,226,195,.12); }.login-panel:after { content: ""; position: absolute; right: -80px; bottom: -90px; width: 240px; height: 240px; border: 1px solid rgba(84,226,196,.25); transform: rotate(45deg); }.close-button { position: absolute; z-index: 1; top: 15px; right: 16px; width: 32px; height: 32px; border: 1px solid rgba(239,249,244,.25); border-radius: 50%; color: #eff9f4; background: transparent; font-size: 22px; line-height: 1; }.panel-k { position: absolute; right: 35px; top: 45px; color: rgba(84,226,196,.14); font-size: 125px; font-weight: 800; line-height: .7; }.login-panel > * { position: relative; z-index: 1; }.login-panel h2 { margin: 0 0 10px; font-size: 34px; }.login-panel > p:not(.eyebrow) { max-width: 330px; color: #aabfb8; font-size: 14px; line-height: 1.75; }.login-panel form { display: grid; gap: 17px; margin-top: 27px; }.login-panel label { color: #a6bdb5; font-size: 12px; }.login-panel input { display: block; width: 100%; margin-top: 7px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(221,242,233,.25); outline: none; color: #eff9f4; background: transparent; }.login-panel input:focus { border-color: var(--teal); }.login-panel form button { width: 100%; margin-top: 5px; }.login-panel small { display: block; margin-top: 22px; color: #7c9690; font-size: 11px; }

@media (max-width: 1100px) { .site-header{padding:0 4vw}.main-nav{gap:17px;margin-left:20px}.hero-copy{width:68vw;padding-left:6vw}.hero h1{font-size:58px}.product-section,.versions-section,.api-section,.company-section,.contact-section{padding-left:6vw;padding-right:6vw}.system-visual,.pricing-section{padding-left:6vw;padding-right:6vw}.capability{padding:24px 18px}.version-item{grid-template-columns:80px 1fr 150px 1.1fr}.company-statement{padding-left:3vw}.site-footer{padding-right:6vw;padding-left:6vw}.site-footer:before{right:6vw;left:6vw}.site-footer-main{grid-template-columns:minmax(215px,.8fr) 1fr}.site-footer-nav{grid-column:2;grid-row:span 2}.site-footer-qrs{grid-column:1}.site-footer-contact{grid-column:1} }
@media (max-width: 760px) { body{font-size:15px}.site-header{height:70px;max-width:100vw;padding:0 20px}.main-nav,.header-actions .text-action{display:none}.header-cta{padding:8px 11px;font-size:12px}.brand{font-size:17px}.hero{min-height:720px}.hero-copy{width:100%;padding:116px 24px 84px}.hero h1{font-size:42px;line-height:1.2}.hero-summary{width:auto;max-width:calc(100vw - 48px);font-size:15px;line-height:1.75;overflow-wrap:anywhere}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-meta{gap:14px;margin-top:47px;flex-wrap:wrap}.hero-meta div{width:calc(50% - 7px)}.hero-caption{right:24px;bottom:22px}.hero-caption span{display:none}.hero-grid{background-size:48px 48px}.product-section,.versions-section,.api-section,.company-section,.contact-section{padding:77px 24px}.system-visual,.pricing-section{padding:77px 24px}.section-index{margin-bottom:18px}.product-heading,.section-heading-row,.contact-row,.api-section,.company-section,.pricing-section,.system-visual{grid-template-columns:1fr;gap:28px}h2{font-size:33px}.product-heading > p,.section-heading-row > p{font-size:15px}.product-grid{grid-template-columns:1fr;margin-top:42px}.product-panel{min-height:284px;padding:22px}.product-panel-copy h3{font-size:24px}.product-art{right:22px;top:62px;transform:perspective(620px) rotateX(58deg) rotateZ(-28deg) scale(.82);transform-origin:top right}.product-art-1{transform:perspective(620px) rotateX(58deg) rotateZ(-11deg) scale(.82)}.product-art-2{transform:perspective(620px) rotateX(58deg) rotateZ(-42deg) scale(.82)}.product-art-3{transform:perspective(620px) rotateX(58deg) rotateZ(-23deg) scale(.82)}.capability-layout{grid-template-columns:1fr 1fr;margin-top:42px}.capability{min-height:258px;border-bottom:1px solid var(--line)}.capability:nth-child(2){border-right:0}.capability h3{margin-top:34px;font-size:18px}.capability p{font-size:13px}.system-visual{min-height:735px}.visual-copy{max-width:none}.architecture{min-height:310px}.arch-core{width:92px;height:92px}.arch-core span{font-size:41px}.arch-node{font-size:11px}.node-a{left:0}.node-b{right:0}.node-c{left:0}.node-d{right:0}.version-list{margin-top:41px}.version-item{grid-template-columns:56px 1fr;gap:5px;min-height:166px;padding:22px 0}.version-item:hover,.version-item.active{padding:22px 12px}.version-item > span{grid-column:2}.version-item > div{grid-column:1 / -1;align-items:flex-end}.version-item h3{font-size:25px}.version-item b{font-size:12px}.pricing-section{min-height:690px}.pricing-orbit{right:-230px;width:520px;height:520px}.pricing-detail{margin-top:10px}.api-terminal{transform:none}.terminal-body{padding:23px 18px}.terminal-body p{grid-template-columns:25px 1fr}.terminal-body p span,.terminal-body p strong{grid-column:2}.company-section{min-height:560px}.company-statement{padding-left:0}.company-statement strong{font-size:35px}.consult-form{grid-template-columns:1fr}.consult-form label.full{grid-column:auto}.form-note{margin:0}.site-footer{padding:43px 24px 0}.site-footer:before{right:24px;left:24px}.site-footer-main{grid-template-columns:1fr;gap:31px}.site-footer-nav{grid-column:auto;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.site-footer-brand>p{max-width:340px}.site-footer-contact{grid-column:auto}.site-footer-qrs{grid-column:auto}.site-footer-friends{align-items:flex-start;flex-direction:column;gap:11px;margin-top:39px;padding:15px 0}.site-footer-friends>div{gap:9px 18px}.site-footer-bottom{padding:17px 0 21px}.site-footer-legal{align-items:flex-start;flex-direction:column;gap:5px;line-height:1.55}.login-panel{padding:40px 27px}.login-panel h2{font-size:29px} }
@media (max-width: 390px) { .hero h1{font-size:37px}.capability-layout{grid-template-columns:1fr}.capability{border-right:0}.capability:nth-child(2){border-right:0}.hero-meta div{width:100%} }
@media (max-width: 760px) { .brand-logo{max-width:150px;height:28px}.site-footer-legal{text-align:left} }