@charset "utf-8";
.hero {position: relative;min-height: 103rem;padding-block: var(--sec-pad);color: #fff;overflow: clip;background: var(--ink);}
.hero .bgimg img {animation: kb 2.4s var(--ease) both;}
.hero .bgimg::after {content: '';position: absolute;inset: 0;background: rgba(6, 14, 31, .15);}
.hero-glow {position: absolute;inset: 0;z-index: 1;background: radial-gradient(circle at var(--gx, 72%) var(--gy, 38%), rgba(36, 92, 255, .38), transparent 38%);mix-blend-mode: screen;transition: background .2s;pointer-events: none;}
.hero .inner {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;gap: 4.8rem;}
.hero-tt {font-size: clamp(4.6rem, 6.6vw, 11.2rem);font-weight: 800;line-height: 1.15;letter-spacing: -.02em;}
.hero-box {display: flex;flex-direction: column;align-items: flex-start;gap: 4rem;}
.hero-p {max-width: 62rem;}
.cue {position: absolute;left: var(--page-gutter);bottom: 5rem;z-index: 2;display: flex;align-items: center;gap: 1.6rem;font-size: 1.3rem;font-weight: 500;letter-spacing: .3em;color: rgba(255, 255, 255, .8);}
.cue i {position: relative;display: block;width: .1rem;height: 6.4rem;background: rgba(255, 255, 255, .3);overflow: hidden;}
.cue i::after {content: '';position: absolute;inset: 0;background: #fff;animation: cue 2.2s ease-in-out infinite;}
.prod {background: var(--ink);color: #fff;}
.prod-bg {position: absolute;inset: 0;z-index: 0;}
.prod-bg img {width: 100%;height: 100%;object-fit: cover;}
.prod-bg::after {content: '';position: absolute;inset: 0;background: linear-gradient(90deg, #060b18 0%, #060b18 42%, rgba(6, 11, 24, .2) 64%, rgba(6, 11, 24, .12) 100%);}
.ring-p {position: absolute;right: 4rem;top: 4rem;z-index: 1;width: 40rem;height: 40rem;animation: spin 60s linear infinite;pointer-events: none;}
.ring-p img {width: 100%;height: 100%;}
.prod-sw {width: 100%;overflow: hidden;}
.prod-sw .swiper-slide {height: auto;}
.prod-ctl {display: flex;align-items: center;gap: 3.2rem;width: 100%;color: var(--muted);font-weight: 500;}
.prod-no b {color: #fff;font-weight: 700;}
.prod-bar {flex: 1;height: .2rem;background: rgba(255, 255, 255, .16);overflow: hidden;}
.prod-bar i {display: block;width: 100%;height: 100%;background: linear-gradient(90deg, var(--blue), var(--cyan));transform-origin: left center;transform: scaleX(.5);transition: transform .6s var(--ease);}
.prod-btns {display: flex;gap: 1.2rem;}
.prod-btns button {display: grid;place-items: center;width: 5.6rem;height: 5.6rem;border: .1rem solid rgba(255, 255, 255, .3);border-radius: 50%;color: #fff;font-size: 2.2rem;transition: background .3s, border-color .3s, opacity .3s;}
.prod-btns button:hover {background: var(--blue);border-color: var(--blue);}
.prod-btns button:disabled {opacity: .3;cursor: default;background: none;border-color: rgba(255, 255, 255, .3);}
.apps {background: #000;color: #fff;}
.apps-bg {position: absolute;inset: 0;z-index: 0;}
.apps-bg img {width: 100%;height: 100%;object-fit: cover;}
.apps-bg::after {content: '';position: absolute;inset: 0;background: linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .72) 55%, rgba(0, 0, 0, .38));}
.app-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 4.8rem;width: 100%;}
.app-card {position: relative;display: flex;flex-direction: column;justify-content: flex-end;gap: 3.2rem;min-height: 40rem;padding: 4.8rem;overflow: hidden;isolation: isolate;transition: translate .5s var(--ease), box-shadow .5s;}
.app-card img {position: absolute;inset: 0;z-index: -2;width: 100%;height: 100%;object-fit: cover;transition: scale 1s var(--ease);}
.app-card::before {content: '';position: absolute;inset: 0;z-index: -1;background: rgba(5, 10, 23, .32);transition: background .5s;}
.app-card.dim::before {background: rgba(6, 14, 31, .55);}
.app-card::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: .5rem;background: linear-gradient(90deg, var(--blue), var(--cyan));scale: 0 1;transform-origin: left center;transition: scale .6s var(--ease);}
.app-card:hover {translate: 0 -.8rem;box-shadow: 0 3rem 6rem rgba(0, 0, 0, .5);}
.app-card:hover img {scale: 1.08;}
.app-card:hover::before {background: rgba(5, 10, 23, .62);}
.app-card:hover::after {scale: 1 1;}
.app-card h3 {color: #fff;}
.app-card p {color: #fff;}
.tech {background: var(--tech-bg);}
.tech::before {content: '';position: absolute;inset: 0;z-index: 0;background-image: linear-gradient(rgba(36, 92, 255, .07) .1rem, transparent .1rem), linear-gradient(90deg, rgba(36, 92, 255, .07) .1rem, transparent .1rem);background-size: 10rem 10rem;pointer-events: none;}
.orbit {position: absolute;right: 10rem;top: 9.5rem;z-index: 1;width: 49rem;height: 49rem;pointer-events: none;}
.orbit i {position: absolute;inset: var(--in);animation: spin var(--t) linear infinite;}
.orbit i img {width: 100%;height: 100%;}
.orbit i::after {content: '';position: absolute;left: 50%;top: -.5rem;width: 1rem;height: 1rem;margin-left: -.5rem;border-radius: 50%;background: var(--blue);box-shadow: 0 0 1.6rem var(--blue);}
.orbit i:nth-child(1) {--in: 0;--t: 40s;}
.orbit i:nth-child(2) {--in: 5.5rem;--t: 28s;animation-direction: reverse;}
.orbit i:nth-child(3) {--in: 11rem;--t: 18s;}
.promise {background: linear-gradient(90deg, #0b1f4b 0%, #245cff 55%, #00e5ff 100%);color: #fff;}
.rings {position: absolute;right: -48rem;top: -44rem;z-index: 0;width: 151rem;height: 151rem;pointer-events: none;translate: calc(var(--mx, 0) * -2rem) calc(var(--my, 0) * -2rem);transition: translate .6s var(--ease);}
.rings img {position: absolute;left: 50%;top: 50%;max-width: none;animation: pulse 6s ease-in-out infinite;animation-delay: var(--dl);translate: -50% -50%;}
.rings img:nth-child(1) {width: 104.6rem;--dl: 0s;}
.rings img:nth-child(2) {width: 120rem;--dl: -1.2s;}
.rings img:nth-child(3) {width: 135.4rem;--dl: -2.4s;}
.rings img:nth-child(4) {width: 150.8rem;--dl: -3.6s;}
.rings img:nth-child(5) {width: 166.2rem;--dl: -4.8s;}
.big {font-size: clamp(5rem, 8.5vw, 14.4rem);font-weight: 800;line-height: 1.15;letter-spacing: -.02em;text-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .4);}
.promise-p {font-size: clamp(2.2rem, 1.9vw, 3.2rem);font-weight: 700;line-height: 1.15;text-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .4);}
.contact {background: var(--ink);color: #fff;}
.contact .bgimg::after {content: '';position: absolute;inset: 0;background: rgba(6, 14, 31, .63);}
.contact > .inner {gap: 4.8rem;}
@media (max-width: 1280px) {
.orbit {right: 4rem;opacity: .6;}
}
@media (max-width: 1024px) {
.hero {min-height: 80svh;}
.cue {left: var(--page-gutter);}
.app-grid {gap: 2.4rem;}
.app-card {padding: 3.2rem;}
.orbit {display: none;}
.rings {right: -70rem;}
}
@media (max-width: 768px) {
.hero {min-height: 72svh;}
.hero .inner {gap: 3.2rem;}
.cue {display: none;}
.app-grid, .p-grid, .rel-grid {grid-template-columns: 1fr;gap: 4rem 0;}
.app-grid {gap: 2rem;}
.app-card {min-height: 30rem;padding: 2.4rem;}
.prod-ctl {gap: 1.6rem;}
.prod-btns button {width: 4.8rem;height: 4.8rem;}
.ring-p {width: 24rem;height: 24rem;right: -6rem;}
.rings {right: -90rem;top: -50rem;opacity: .7;}
}