:root {
            --accent: #C8272D;
            --accent-2: #E5484D;
            --ok: #2FA66A;
            --bg: #05080E;
            --bg2: #090D15;
            --panel: #0C111A;
            --t1: #F2F3F6;
            --t2: #A3A9B8;
            --t3: #6C7384;
            --line: rgba(255, 255, 255, .09);
            --line2: rgba(255, 255, 255, .18);
            --nav: rgba(5, 8, 14, .78);
            --shadow: 0 30px 80px rgba(0, 0, 0, .5);
            --glass: rgba(255, 255, 255, .05);
            --ease: cubic-bezier(.22, 1, .36, 1);
        }

        [data-theme="light"] {
            --bg: #F4F5F8;
            --bg2: #FFFFFF;
            --panel: #FFFFFF;
            --t1: #11141B;
            --t2: #505768;
            --t3: #8A90A0;
            --line: rgba(17, 20, 27, .1);
            --line2: rgba(17, 20, 27, .22);
            --nav: rgba(244, 245, 248, .82);
            --shadow: 0 30px 70px rgba(30, 40, 70, .15);
            --glass: rgba(255, 255, 255, .55);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: Inter, system-ui, sans-serif;
            background: var(--bg);
            color: var(--t1);
            line-height: 1.65;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            transition: background .5s, color .5s
        }

        body.lock {
            overflow: hidden
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: Poppins, sans-serif;
            letter-spacing: -.02em;
            line-height: 1.12
        }

        a {
            color: inherit;
            text-decoration: none
        }

        ul {
            list-style: none
        }

        button {
            font-family: inherit
        }

        .mono {
            font-family: 'JetBrains Mono', monospace
        }

        .container {
            width: min(1200px, 90%);
            margin-inline: auto
        }

        section {
            padding: 130px 0;
            position: relative
        }

        p {
            color: var(--t2)
        }

        .label {
            font: 500 .72rem 'JetBrains Mono';
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--accent-2);
            display: inline-flex;
            align-items: center;
            gap: 12px
        }

        .label::before {
            content: "";
            width: 28px;
            height: 1px;
            background: currentColor
        }

        h2.title {
            font-size: clamp(2rem, 3.8vw, 3.2rem);
            font-weight: 300;
            margin: 18px 0 18px
        }

        h2.title b {
            font-weight: 600
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
            mix-blend-mode: normal
        }

        ::view-transition-old(root) {
            z-index: 1
        }

        ::view-transition-new(root) {
            z-index: 2
        }

        #progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            width: 0;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            z-index: 500
        }

        /* PRELOADER */
        #pre {
            position: fixed;
            inset: 0;
            z-index: 1000
        }

        .pre-c {
            position: absolute;
            left: 0;
            right: 0;
            height: 50.5%;
            background: var(--bg);
            transition: transform 1.1s var(--ease)
        }

        .pre-c.t {
            top: 0
        }

        .pre-c.b {
            bottom: 0
        }

        #pre.done .t {
            transform: translateY(-101%)
        }

        #pre.done .b {
            transform: translateY(101%)
        }

        .pre-in {
            position: absolute;
            inset: 0;
            display: grid;
            place-content: center;
            justify-items: center;
            gap: 22px;
            z-index: 2;
            transition: opacity .5s, transform .8s var(--ease)
        }

        #pre.done .pre-in {
            opacity: 0;
            transform: scale(.94)
        }

        .pre-logo {
            width: min(340px, 66vw);
            height: auto;
            opacity: 0;
            transform: scale(.9);
            animation: logoin 1.3s var(--ease) .1s forwards
        }

        @keyframes logoin {
            to {
                opacity: 1;
                transform: none
            }
        }

        .pre-bar {
            width: 200px;
            height: 1px;
            background: var(--line2);
            position: relative;
            overflow: hidden
        }

        .pre-bar i {
            position: absolute;
            inset: 0;
            background: var(--accent-2);
            transform: scaleX(0);
            transform-origin: left
        }

        .pre-n {
            font: 500 .7rem 'JetBrains Mono';
            letter-spacing: .2em;
            color: var(--t3)
        }


        /* NAV */
        .nav {
            position: fixed;
            inset: 0 0 auto 0;
            z-index: 200;
            transition: background .4s, border-color .4s, transform .6s var(--ease);
            border-bottom: 1px solid transparent
        }

        .nav.scrolled {
            background: var(--nav);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-color: var(--line)
        }

        .nav .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 82px;
            gap: 24px;
            transition: height .4s
        }

        .nav.scrolled .container {
            height: 68px
        }

        .brand {
            display: flex;
            align-items: center
        }

        .brand img {
            height: 74px;
            width: auto;
            display: block;
            transition: transform .5s var(--ease), height .4s var(--ease)
        }

        .brand:hover img {
            transform: scale(1.05)
        }

        .nav.scrolled .brand img {
            height: 58px
        }

        .footer .brand img {
            height: 130px
        }

        .logo-d {
            display: none !important
        }

        [data-theme="dark"] .logo-l {
            display: none !important
        }

        [data-theme="dark"] .logo-d {
            display: block !important
        }

        .nav-links {
            display: flex;
            gap: 34px
        }

        .nav-links a {
            font-size: .88rem;
            color: var(--t2);
            position: relative;
            padding: 6px 0;
            transition: color .3s
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background: var(--accent-2);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .5s var(--ease)
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--t1)
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            transform: scaleX(1);
            transform-origin: left
        }

        .nav-cta {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 32px;
            border-radius: 99px;
            font: 500 .74rem Poppins;
            letter-spacing: .14em;
            text-transform: uppercase;
            border: 1px solid var(--line2);
            color: var(--t1);
            cursor: pointer;
            background: transparent;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: color .45s var(--ease), border-color .45s, transform .25s
        }

        .btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--t1);
            transform: translateY(101%);
            border-radius: 50% 50% 0 0/100% 100% 0 0;
            transition: transform .6s var(--ease), border-radius .6s var(--ease);
            z-index: -1
        }

        .btn:hover {
            color: var(--bg);
            border-color: var(--t1)
        }

        .btn:hover::before {
            transform: none;
            border-radius: 0
        }

        .btn-fill {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            box-shadow: 0 12px 34px rgba(200, 39, 45, .3)
        }

        .btn-fill::before {
            background: var(--accent-2)
        }

        .btn-fill:hover {
            color: #fff;
            border-color: var(--accent-2)
        }

        .btn-sm {
            padding: 10px 22px;
            font-size: .68rem
        }

        .btn .ar {
            transition: transform .4s var(--ease)
        }

        .btn:hover .ar {
            transform: translateX(5px)
        }

        .theme-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--line2);
            background: transparent;
            color: var(--t1);
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: .4s var(--ease)
        }

        .theme-btn:hover {
            border-color: var(--t1);
            transform: rotate(25deg)
        }

        .theme-btn span {
            font-size: 1.15rem;
            line-height: 1
        }

        .theme-btn .sun {
            display: none
        }

        [data-theme="light"] .theme-btn .sun {
            display: block
        }

        [data-theme="light"] .theme-btn .moon {
            display: none
        }

        .burger {
            display: none;
            background: none;
            border: 0;
            width: 36px;
            height: 36px;
            cursor: pointer;
            flex-direction: column;
            gap: 6px;
            justify-content: center;
            align-items: center
        }

        .burger span {
            width: 22px;
            height: 1.5px;
            background: var(--t1)
        }

        /* HERO */
        .hero {
            min-height: 100vh;
            padding: 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--bg)
        }

        .slides {
            position: absolute;
            inset: 0
        }

        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 2s ease;
            overflow: hidden;
            background: var(--base)
        }

        .slide.on {
            opacity: 1
        }

        .slide .ph {
            position: absolute;
            inset: -4%;
            background-size: cover;
            background-position: center
        }

        .slide.on .ph {
            animation: kb 12s ease-out forwards
        }

        @keyframes kb {
            from {
                transform: scale(1)
            }

            to {
                transform: scale(1.1)
            }
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px)
        }

        .blob.a {
            width: 55vw;
            height: 55vw;
            left: -10vw;
            top: -18vw;
            background: var(--b0);
            animation: d1 22s ease-in-out infinite alternate
        }

        .blob.b {
            width: 46vw;
            height: 46vw;
            right: -8vw;
            top: 8vh;
            background: var(--b1);
            animation: d2 26s ease-in-out infinite alternate
        }

        .blob.c {
            width: 34vw;
            height: 34vw;
            left: 34vw;
            bottom: -14vw;
            background: var(--b2);
            animation: d3 18s ease-in-out infinite alternate
        }

        .blob.d {
            width: 20vw;
            height: 20vw;
            left: 48vw;
            top: 30vh;
            background: var(--b3);
            opacity: .8;
            animation: d2 15s ease-in-out infinite alternate-reverse
        }

        @keyframes d1 {
            to {
                transform: translate(10vw, 8vh) scale(1.12)
            }
        }

        @keyframes d2 {
            to {
                transform: translate(-9vw, 10vh) scale(.92)
            }
        }

        @keyframes d3 {
            to {
                transform: translate(-12vw, -8vh) scale(1.2)
            }
        }

        .s1 {
            --base: #05080E;
            --b0: #0E4A5C;
            --b1: #13304F;
            --b2: #082230;
            --b3: #C46285
        }

        .s2 {
            --base: #090608;
            --b0: #8A1C22;
            --b1: #3A1219;
            --b2: #4A0F16;
            --b3: #5A5F70
        }

        .s3 {
            --base: #060810;
            --b0: #1E3FA0;
            --b1: #0F6A85;
            --b2: #2A2560;
            --b3: #8C93E0
        }

        [data-theme="light"] .s1 {
            --base: #EEF1F6;
            --b0: #BCD8EE;
            --b1: #E8C8D6;
            --b2: #D4E4F0;
            --b3: #F4B6C6
        }

        [data-theme="light"] .s2 {
            --base: #F5EFEE;
            --b0: #F2C4BE;
            --b1: #F7E0D4;
            --b2: #EBD3D8;
            --b3: #D8DBE4
        }

        [data-theme="light"] .s3 {
            --base: #EEF0F7;
            --b0: #BCCBF2;
            --b1: #BFE2EA;
            --b2: #DAD6F0;
            --b3: #C5CAEA
        }

        .hero.gl .slide .blob {
            display: none
        }

        .hero.gl .slide {
            background: transparent
        }

        #gl {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: none
        }

        .hero.gl #gl {
            display: block
        }

        .hero.gl.photo #gl {
            opacity: .42;
            mix-blend-mode: screen
        }

        [data-theme="light"] .hero.gl.photo #gl {
            mix-blend-mode: multiply
        }

        .grain {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .08;
            mix-blend-mode: overlay;
            background-image: var(--grain, none)
        }

        .shade {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 62%), linear-gradient(0deg, var(--bg) 0%, transparent 26%)
        }

        [data-theme="light"] .shade {
            background: linear-gradient(90deg, rgba(244, 245, 248, .55), transparent 62%), linear-gradient(0deg, var(--bg) 0%, transparent 26%)
        }

        .hero .container {
            position: relative;
            z-index: 3;
            padding-top: 60px;
            will-change: transform, opacity
        }

        .hr {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.1s var(--ease), transform 1.1s var(--ease)
        }

        .hr.in {
            opacity: 1;
            transform: none
        }

        .hero h1 {
            font-size: clamp(3.1rem, 7.6vw, 6.6rem);
            font-weight: 700;
            letter-spacing: -.035em;
            line-height: 1.02;
            margin-top: 26px
        }

        .ln {
            display: block;
            overflow: hidden;
            padding-bottom: .1em;
            margin-bottom: -.1em
        }

        .ln>span {
            display: block;
            transform: translateY(112%);
            transition: transform 1.3s var(--ease)
        }

        .ln.lt {
            font-weight: 300
        }

        .ln.lt>span {
            transition-delay: .15s
        }

        .ready .ln>span {
            transform: none
        }

        .rule {
            width: min(320px, 40vw);
            height: 1px;
            background: var(--t1);
            margin: 38px 0 28px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1.6s var(--ease) .8s
        }

        .ready .rule {
            transform: none
        }

        .hero p.lead {
            font-size: 1.02rem;
            max-width: 520px;
            margin-bottom: 38px
        }

        .hero-btns {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }

        .rail {
            position: absolute;
            right: 3.5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px
        }

        .rail i {
            display: block;
            width: 1px;
            height: 90px;
            background: var(--line2)
        }

        .rail button {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: 1px solid var(--t2);
            background: transparent;
            cursor: pointer;
            padding: 0;
            transition: .4s var(--ease)
        }

        .rail button.on {
            background: var(--accent-2);
            border-color: var(--accent-2);
            transform: scale(1.4)
        }

        .live {
            position: absolute;
            right: 9%;
            bottom: 130px;
            width: 310px;
            z-index: 4;
            background: var(--glass);
            border: 1px solid var(--line2);
            border-radius: 16px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 18px 20px;
            box-shadow: var(--shadow)
        }

        .live-h {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font: 500 .64rem 'JetBrains Mono';
            letter-spacing: .16em;
            color: var(--t2);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--line)
        }

        .live-h i {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ok);
            margin-right: 8px;
            animation: pl 1.8s infinite
        }

        .live-b {
            height: 112px;
            overflow: hidden;
            position: relative
        }

        .lr {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 11px 0;
            border-bottom: 1px solid var(--line);
            font: .7rem 'JetBrains Mono';
            color: var(--t2);
            animation: lin .7s var(--ease)
        }

        .lr b {
            font-weight: 500;
            color: var(--t1)
        }

        .lr em {
            font-style: normal;
            color: var(--ok)
        }

        .lr em.bk {
            color: var(--accent-2)
        }

        @keyframes lin {
            from {
                opacity: 0;
                transform: translateY(-14px)
            }
        }

        .hero-foot {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 34px;
            z-index: 4
        }

        .hero-foot .container {
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap
        }

        .cap {
            font: 500 .72rem 'JetBrains Mono';
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--t2);
            display: flex;
            gap: 16px;
            align-items: center
        }

        .cap em {
            font-style: normal;
            color: var(--t1)
        }

        .cap .tl {
            width: 90px;
            height: 1px;
            background: var(--line2);
            position: relative;
            overflow: hidden
        }

        .cap .tl::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--t1);
            transform: scaleX(0);
            transform-origin: left
        }

        .cap .tl.run::after {
            animation: tl 6s linear forwards
        }

        @keyframes tl {
            to {
                transform: scaleX(1)
            }
        }

        .scroll {
            font: 500 .68rem 'JetBrains Mono';
            letter-spacing: .2em;
            color: var(--t3);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .scroll i {
            width: 1px;
            height: 34px;
            background: var(--line2);
            position: relative;
            overflow: hidden
        }

        .scroll i::after {
            content: "";
            position: absolute;
            left: 0;
            top: -100%;
            width: 100%;
            height: 100%;
            background: var(--t1);
            animation: sc 2.4s ease-in-out infinite
        }

        @keyframes sc {
            to {
                top: 100%
            }
        }

        @keyframes pl {
            50% {
                opacity: .3
            }
        }

        /* STATS + MARQUEE */
        .stats {
            padding: 0;
            background: var(--bg2);
            border-block: 1px solid var(--line)
        }

        .stats .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .stat {
            padding: 56px 30px;
            border-left: 1px solid var(--line)
        }

        .stat:first-child {
            border-left: 0;
            padding-left: 0
        }

        .stat b {
            font: 300 clamp(2.6rem, 4.2vw, 3.8rem) Poppins;
            letter-spacing: -.03em;
            display: block;
            line-height: 1
        }

        .stat b sup {
            font-size: .38em;
            color: var(--accent-2);
            font-weight: 500;
            margin-left: 4px;
            vertical-align: top;
            position: relative;
            top: .4em
        }

        .stat span {
            display: block;
            margin-top: 14px;
            font: 500 .7rem 'JetBrains Mono';
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--t3)
        }

        .mq {
            padding: 46px 0;
            overflow: hidden;
            border-bottom: 1px solid var(--line);
            display: grid;
            gap: 10px;
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
        }

        .mq-t {
            display: flex;
            width: max-content;
            gap: 0;
            animation: mq 50s linear infinite
        }

        .mq-t.rev {
            animation-direction: reverse;
            animation-duration: 60s
        }

        .mq:hover .mq-t {
            animation-play-state: paused
        }

        .mq-t span {
            font: 600 clamp(2.2rem, 5vw, 4.2rem) Poppins;
            letter-spacing: -.02em;
            color: transparent;
            -webkit-text-stroke: 1px var(--line2);
            white-space: nowrap;
            padding: 0 34px;
            display: flex;
            align-items: center;
            gap: 68px;
            transition: color .4s, -webkit-text-stroke-color .4s
        }

        .mq-t span::after {
            content: "";
            width: 12px;
            height: 12px;
            background: var(--accent);
            transform: rotate(45deg);
            flex: none
        }

        .mq-t span:hover {
            color: var(--t1);
            -webkit-text-stroke-color: var(--t1)
        }

        @keyframes mq {
            to {
                transform: translateX(-50%)
            }
        }

        /* BENTO */
        .head {
            max-width: 700px;
            margin-bottom: 70px
        }

        .head p {
            font-size: 1.05rem
        }

        .bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 18px
        }

        .bc {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 24px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: border-color .4s, transform .6s var(--ease), box-shadow .5s
        }

        .bc::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(229, 72, 77, .16), transparent 55%);
            opacity: 0;
            transition: opacity .4s;
            pointer-events: none
        }

        .bc:hover {
            border-color: var(--line2);
            transform: translateY(-5px);
            box-shadow: var(--shadow)
        }

        .bc:hover::before {
            opacity: 1
        }

        .b1 {
            grid-column: span 5;
            grid-row: span 2
        }

        .b2 {
            grid-column: span 7
        }

        .b3 {
            grid-column: span 4
        }

        .b4 {
            grid-column: span 3
        }

        .bc .n {
            font: 500 .72rem 'JetBrains Mono';
            color: var(--t3);
            letter-spacing: .14em;
            display: flex;
            justify-content: space-between
        }

        .bc .n em {
            font-style: normal;
            color: var(--accent-2)
        }

        .bc h3 {
            font-size: 1.4rem;
            font-weight: 500;
            margin: 22px 0 10px
        }

        .bc p {
            font-size: .93rem;
            max-width: 420px
        }

        .radar {
            width: min(100%, 330px);
            aspect-ratio: 1;
            margin: 30px auto 0;
            border-radius: 50%;
            position: relative;
            background: radial-gradient(circle, transparent 0 19%, var(--line) 19.4% 20%, transparent 20.4% 39%, var(--line) 39.4% 40%, transparent 40.4% 59%, var(--line) 59.4% 60%, transparent 60.4% 79%, var(--line2) 79.4% 80%, transparent 80.4%)
        }

        .radar::before,
        .radar::after {
            content: "";
            position: absolute;
            background: var(--line)
        }

        .radar::before {
            left: 10%;
            right: 10%;
            top: 50%;
            height: 1px
        }

        .radar::after {
            top: 10%;
            bottom: 10%;
            left: 50%;
            width: 1px
        }

        .sweep {
            position: absolute;
            inset: 10%;
            border-radius: 50%;
            background: conic-gradient(from 0deg, transparent 0 68%, rgba(229, 72, 77, .5) 100%);
            animation: spin 5s linear infinite
        }

        .sweep::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            width: 1.5px;
            height: 50%;
            background: var(--accent-2);
            transform-origin: bottom;
            box-shadow: 0 0 12px var(--accent-2)
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .blip {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-2)
        }

        .blip::after {
            content: "";
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 1px solid var(--accent-2);
            animation: ping 2.6s ease-out infinite
        }

        @keyframes ping {
            from {
                transform: scale(.3);
                opacity: 1
            }

            to {
                transform: scale(2.6);
                opacity: 0
            }
        }

        .radar .core {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 12px;
            height: 12px;
            margin: -6px;
            border-radius: 50%;
            background: var(--t1)
        }

        .eng {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
            margin-top: 28px
        }

        .eng i {
            aspect-ratio: 1.15;
            border-radius: 10px;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            font: 500 .66rem 'JetBrains Mono';
            font-style: normal;
            color: var(--t3);
            transition: all .5s var(--ease)
        }

        .eng i.act {
            background: rgba(229, 72, 77, .14);
            border-color: var(--accent-2);
            color: var(--t1);
            box-shadow: 0 0 24px rgba(229, 72, 77, .3);
            transform: translateY(-3px)
        }

        .spark {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 96px;
            margin-top: 22px;
            border-bottom: 1px solid var(--line);
            position: relative
        }

        .spark::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 20px;
            border-top: 1px dashed var(--line2)
        }

        .spark i {
            flex: 1;
            background: var(--line2);
            border-radius: 3px 3px 0 0;
            height: var(--h);
            transform-origin: bottom;
            animation: bar 5s ease-in-out infinite;
            animation-delay: calc(var(--k)*55ms)
        }

        .spark i.hot {
            background: var(--accent-2);
            box-shadow: 0 0 14px rgba(229, 72, 77, .6)
        }

        @keyframes bar {
            0% {
                transform: scaleY(0)
            }

            35%,
            88% {
                transform: scaleY(1)
            }

            100% {
                transform: scaleY(0)
            }
        }

        @keyframes fa {

            0%,
            50% {
                opacity: 0
            }

            62%,
            88% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .score-tag {
            position: absolute;
            right: 30px;
            top: 96px;
            font: 500 .7rem 'JetBrains Mono';
            color: var(--accent-2);
            animation: fa 5s ease-in-out infinite
        }

        .lat {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-top: 20px
        }

        .lat b {
            font: 300 4.6rem Poppins;
            letter-spacing: -.05em;
            line-height: 1
        }

        .lat span {
            font: 500 .8rem 'JetBrains Mono';
            color: var(--accent-2)
        }

        .chips {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 22px
        }

        .chips span {
            font: 500 .62rem 'JetBrains Mono';
            letter-spacing: .12em;
            padding: 6px 11px;
            border-radius: 99px;
            border: 1px solid var(--line2);
            color: var(--t3);
            animation: chip 4s ease-in-out infinite
        }

        .chips span:nth-child(2) {
            animation-delay: .5s
        }

        .chips span:nth-child(3) {
            animation-delay: 1s
        }

        @keyframes chip {

            0%,
            10% {
                color: var(--t3);
                border-color: var(--line2);
                background: transparent
            }

            22%,
            80% {
                color: #fff;
                border-color: var(--accent-2);
                background: var(--accent)
            }

            100% {
                color: var(--t3);
                border-color: var(--line2);
                background: transparent
            }
        }

        /* PLATFORM split */
        .alt {
            background: var(--bg2);
            border-block: 1px solid var(--line)
        }

        .split {
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 90px;
            align-items: center
        }

        .split p.big {
            font-size: 1.05rem;
            margin-bottom: 34px
        }

        .checks li {
            padding: 17px 0;
            border-top: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            gap: 16px;
            font-size: .94rem;
            color: var(--t2);
            transition: padding .4s var(--ease), color .3s
        }

        .checks li:hover {
            padding-left: 12px;
            color: var(--t1)
        }

        .checks li:last-child {
            border-bottom: 1px solid var(--line)
        }

        .checks b {
            font: 500 .7rem 'JetBrains Mono';
            color: var(--t1);
            letter-spacing: .08em;
            white-space: nowrap
        }

        .console {
            background: #090C13;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 16px;
            box-shadow: var(--shadow);
            overflow: hidden;
            color: #D6D9E2
        }

        .c-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 18px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            font: .74rem 'JetBrains Mono';
            color: #7C8396
        }

        .c-bar i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #2A2F3B
        }

        .c-bar span {
            margin-left: 8px
        }

        .c-bar em {
            margin-left: auto;
            font-style: normal;
            padding: 3px 10px;
            border-radius: 99px;
            font-size: .66rem;
            letter-spacing: .1em;
            background: rgba(47, 166, 106, .14);
            color: #4ACB8E;
            transition: .5s
        }

        .c-bar em.crit {
            background: rgba(229, 72, 77, .16);
            color: #FF7378
        }

        .c-body {
            padding: 10px 18px 18px
        }

        .row {
            display: grid;
            grid-template-columns: 84px 1fr auto;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            font-size: .86rem;
            opacity: .2;
            transition: opacity .6s, transform .7s var(--ease), background .6s;
            transform: translateX(-12px)
        }

        .row.on {
            opacity: 1;
            transform: none
        }

        .row time {
            font: .74rem 'JetBrains Mono';
            color: #6F7689;
            padding-top: 2px
        }

        .row code {
            font: .7rem 'JetBrains Mono';
            color: #8D94A8;
            padding: 2px 8px;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 5px;
            align-self: start
        }

        .row.bad .ev {
            color: #FF8A8E
        }

        .row.good .ev {
            color: #4ACB8E
        }

        .c-foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 18px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            font: .74rem 'JetBrains Mono';
            color: #7C8396
        }

        .c-foot b {
            font-size: 1.6rem;
            font-weight: 400;
            color: #F2F3F6;
            margin-left: 10px;
            transition: color .5s
        }

        .c-scan {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
            transform: translateX(-100%)
        }

        .console.run .c-scan {
            animation: scan 1.2s linear infinite
        }

        @keyframes scan {
            to {
                transform: translateX(100%)
            }
        }

        /* PIPELINE */
        .pipe {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            position: relative
        }

        .pipe::before {
            content: "";
            position: absolute;
            top: 7px;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--line2)
        }

        .pfill {
            position: absolute;
            top: 7px;
            left: 0;
            height: 2px;
            margin-top: -.5px;
            width: 0;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            box-shadow: 0 0 14px var(--accent-2)
        }

        .pstep {
            padding-right: 24px;
            position: relative;
            opacity: .4;
            transition: opacity .6s
        }

        .pstep::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--bg);
            border: 1px solid var(--t3);
            z-index: 1;
            transition: .5s var(--ease)
        }

        .pstep.act {
            opacity: 1
        }

        .pstep.act::before {
            background: var(--accent-2);
            border-color: var(--accent-2);
            box-shadow: 0 0 0 6px rgba(229, 72, 77, .18), 0 0 18px var(--accent-2)
        }

        .pstep .n {
            margin-top: 38px;
            font: 500 .72rem 'JetBrains Mono';
            color: var(--t3);
            letter-spacing: .12em
        }

        .pstep h3 {
            font-size: 1.25rem;
            font-weight: 500;
            margin: 8px 0 8px
        }

        .pstep p {
            font-size: .9rem
        }

        /* SCORE */
        .score {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 100px;
            align-items: center
        }

        .gauge {
            position: relative;
            width: min(350px, 100%);
            aspect-ratio: 1;
            margin-inline: auto
        }

        @property --p {
            syntax: '<number>';
            inherits: false;
            initial-value: 0
        }

        .ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--line) 0);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
            transition: --p 2.4s var(--ease)
        }

        .gauge .orbit {
            position: absolute;
            inset: -6%;
            border-radius: 50%;
            border: 1px dashed var(--line2);
            animation: spin 40s linear infinite
        }

        .gauge .orbit::after {
            content: "";
            position: absolute;
            top: -4px;
            left: 50%;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-2)
        }

        .gauge .val {
            position: absolute;
            inset: 0;
            display: grid;
            place-content: center;
            text-align: center
        }

        .gauge .val b {
            font: 300 5.2rem Poppins;
            letter-spacing: -.04em;
            line-height: 1
        }

        .gauge .val span {
            font: 500 .7rem 'JetBrains Mono';
            letter-spacing: .22em;
            color: var(--ok);
            margin-top: 8px
        }

        .meter {
            margin-bottom: 26px
        }

        .meter div:first-child {
            display: flex;
            justify-content: space-between;
            font-size: .9rem;
            margin-bottom: 10px;
            color: var(--t2)
        }

        .meter b {
            font: 500 .8rem 'JetBrains Mono';
            color: var(--t1)
        }

        .bar {
            height: 2px;
            background: var(--line);
            position: relative
        }

        .bar i {
            display: block;
            height: 100%;
            width: 0;
            background: var(--accent-2);
            transition: width 1.9s var(--ease);
            position: relative
        }

        .bar i::after {
            content: "";
            position: absolute;
            right: -1px;
            top: -3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-2);
            box-shadow: 0 0 12px var(--accent-2)
        }

        /* CHAT */
        .chat .c-body {
            display: grid;
            gap: 14px;
            min-height: 360px;
            align-content: start;
            padding: 24px
        }

        .msg {
            max-width: 86%;
            padding: 13px 18px;
            border-radius: 14px;
            font-size: .9rem;
            line-height: 1.55;
            opacity: 0;
            transform: translateY(10px);
            transition: .6s var(--ease)
        }

        .msg.on {
            opacity: 1;
            transform: none
        }

        .msg.u {
            justify-self: end;
            background: #1B2030;
            color: #E6E8EE;
            border-bottom-right-radius: 4px
        }

        .msg.a {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .12);
            color: #C9CDD9;
            border-bottom-left-radius: 4px;
            min-width: 90px
        }

        .msg.a::before {
            content: "RAKSHA";
            display: block;
            font: 500 .62rem 'JetBrains Mono';
            letter-spacing: .2em;
            color: #E5484D;
            margin-bottom: 6px
        }

        .msg.typing {
            display: flex;
            gap: 5px;
            align-items: center;
            flex-wrap: wrap
        }

        .msg.typing::before {
            width: 100%
        }

        .msg.typing i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #7C8396;
            animation: bn 1s infinite
        }

        .msg.typing i:nth-child(3) {
            animation-delay: .15s
        }

        .msg.typing i:nth-child(4) {
            animation-delay: .3s
        }

        @keyframes bn {
            50% {
                transform: translateY(-5px);
                opacity: .4
            }
        }

        /* ROLES */
        .roles {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 70px;
            align-items: center
        }

        .tab {
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            border: 0;
            border-top: 1px solid var(--line);
            padding: 28px 0;
            color: var(--t3);
            cursor: pointer;
            position: relative;
            transition: color .4s, padding .5s var(--ease)
        }

        .tab:last-child {
            border-bottom: 1px solid var(--line)
        }

        .tab .n {
            font: 500 .72rem 'JetBrains Mono';
            letter-spacing: .14em
        }

        .tab h3 {
            font-size: 1.6rem;
            font-weight: 400;
            margin: 6px 0 0;
            transition: color .4s
        }

        .tab p {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            font-size: .93rem;
            transition: max-height .6s var(--ease), opacity .5s, margin .5s
        }

        .tab.on {
            color: var(--t1);
            padding-left: 14px
        }

        .tab.on p {
            max-height: 90px;
            opacity: 1;
            margin-top: 10px
        }

        .tab::after {
            content: "";
            position: absolute;
            left: 0;
            top: -1px;
            height: 2px;
            width: 100%;
            background: var(--accent-2);
            transform: scaleX(0);
            transform-origin: left
        }

        .tab.on::after {
            animation: tl 6s linear forwards
        }

        .pane {
            display: none
        }

        .pane.on {
            display: block;
            animation: pin .8s var(--ease)
        }

        @keyframes pin {
            from {
                opacity: 0;
                transform: translateY(16px)
            }
        }

        .mock {
            padding: 26px;
            min-height: 340px
        }

        .ex {
            display: flex;
            align-items: center;
            gap: 26px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, .08)
        }

        .ex .mini {
            position: relative;
            inset: auto;
            width: 92px;
            height: 92px;
            flex: none;
            transition: none;
            background: conic-gradient(#2FA66A 94%, #1F2430 0);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px))
        }

        .ex h4 {
            font-size: 1.5rem;
            font-weight: 400;
            color: #F2F3F6;
            margin-bottom: 6px
        }

        .ex p {
            font-size: .86rem;
            color: #8D94A8
        }

        .kpis {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 24px
        }

        .kpis div {
            padding: 16px;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 12px
        }

        .kpis b {
            font: 300 1.8rem Poppins;
            color: #F2F3F6;
            display: block
        }

        .kpis span {
            font: .64rem 'JetBrains Mono';
            letter-spacing: .12em;
            color: #6F7689;
            text-transform: uppercase
        }

        .tbl {
            width: 100%;
            border-collapse: collapse;
            font: .76rem 'JetBrains Mono';
            color: #C3C8D6
        }

        .tbl th {
            text-align: left;
            font-weight: 400;
            color: #6F7689;
            padding: 0 0 12px;
            letter-spacing: .1em;
            font-size: .66rem
        }

        .tbl td {
            padding: 13px 0;
            border-top: 1px solid rgba(255, 255, 255, .07)
        }

        .sev {
            padding: 3px 9px;
            border-radius: 99px;
            font-size: .64rem
        }

        .sev.h {
            background: rgba(229, 72, 77, .16);
            color: #FF7378
        }

        .sev.m {
            background: rgba(245, 158, 11, .15);
            color: #F5B041
        }

        .sev.l {
            background: rgba(47, 166, 106, .15);
            color: #4ACB8E
        }

        .tbl tr {
            animation: pin .7s var(--ease) both
        }

        .tbl tr:nth-child(2) {
            animation-delay: .1s
        }

        .tbl tr:nth-child(3) {
            animation-delay: .2s
        }

        .tbl tr:nth-child(4) {
            animation-delay: .3s
        }

        .tbl tr:nth-child(5) {
            animation-delay: .4s
        }

        .sw-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-top: 1px solid rgba(255, 255, 255, .07);
            font-size: .88rem;
            color: #C3C8D6
        }

        .sw-row:first-of-type {
            border-top: 0
        }

        .sw-row small {
            display: block;
            font: .66rem 'JetBrains Mono';
            color: #6F7689;
            margin-top: 2px
        }

        .tg {
            width: 42px;
            height: 24px;
            border-radius: 99px;
            background: #2A2F3B;
            position: relative;
            flex: none
        }

        .tg::after {
            content: "";
            position: absolute;
            left: 3px;
            top: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #8D94A8;
            transition: .4s var(--ease)
        }

        .tg.on {
            background: var(--accent)
        }

        .tg.on::after {
            left: 21px;
            background: #fff
        }

        /* CTA */
        .cta {
            padding: 20px 0 0
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            min-height: 480px;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 100px 30px
        }

        .cta-box h2 {
            font-size: clamp(2.4rem, 5vw, 4.4rem);
            font-weight: 300;
            margin-bottom: 18px
        }

        .cta-box h2 b {
            font-weight: 700
        }

        .cta-box p {
            max-width: 520px;
            margin: 0 auto 38px
        }

        .cta-in {
            position: relative;
            z-index: 3
        }

        /* FOOTER */
        .footer {
            background: var(--bg2);
            border-top: 1px solid var(--line);
            padding: 90px 0 40px;
            overflow: hidden
        }

        .foot-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 50px
        }

        .footer h4 {
            font: 500 .72rem 'JetBrains Mono';
            letter-spacing: .18em;
            text-transform: uppercase;
            margin-bottom: 22px;
            color: var(--t3)
        }

        .footer li {
            margin-bottom: 11px
        }

        .footer li a {
            color: var(--t2);
            font-size: .9rem;
            transition: .3s var(--ease);
            display: inline-block
        }

        .footer li a:hover {
            color: var(--t1);
            transform: translateX(6px)
        }

        .stat-ok {
            font: 500 .72rem 'JetBrains Mono';
            letter-spacing: .1em;
            color: var(--t2);
            display: inline-flex;
            align-items: center;
            gap: 10px
        }

        .stat-ok i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--ok);
            animation: pl 2.4s ease-in-out infinite
        }

        .foot-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 60px;
            padding-top: 26px;
            border-top: 1px solid var(--line);
            font-size: .8rem;
            color: var(--t3)
        }

        .totop {
            position: fixed;
            right: 24px;
            bottom: 24px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid var(--line2);
            background: var(--nav);
            backdrop-filter: blur(10px);
            color: var(--t1);
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transform: translateY(14px);
            transition: .4s var(--ease);
            z-index: 150
        }

        .totop.show {
            opacity: 1;
            pointer-events: auto;
            transform: none
        }

        .totop:hover {
            background: var(--t1);
            color: var(--bg)
        }

        /* reveal */
        .rv {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s var(--ease), transform 1s var(--ease)
        }

        .rv.in {
            opacity: 1;
            transform: none
        }

        .rv.d1 {
            transition-delay: .1s
        }

        .rv.d2 {
            transition-delay: .2s
        }

        .rv.d3 {
            transition-delay: .3s
        }

        .rv.d4 {
            transition-delay: .4s
        }

        .rv.L {
            transform: translateX(-50px)
        }

        .rv.R {
            transform: translateX(50px)
        }

        .rv.L.in,
        .rv.R.in {
            transform: none
        }

        .sw .w {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
            padding-bottom: .14em;
            margin-bottom: -.14em
        }

        .sw .w>span {
            display: inline-block;
            transform: translateY(115%);
            transition: transform 1.1s var(--ease);
            transition-delay: calc(var(--i)*55ms)
        }

        .sw.in .w>span {
            transform: none
        }

        @media(max-width:1100px) {
            .live {
                display: none
            }
        }

        @media(max-width:980px) {
            section {
                padding: 90px 0
            }

            .split,
            .score,
            .foot-grid,
            .roles {
                grid-template-columns: 1fr;
                gap: 56px
            }

            .bento {
                grid-template-columns: 1fr 1fr
            }

            .b1,
            .b2,
            .b3,
            .b4 {
                grid-column: span 2;
                grid-row: auto
            }

            .stats .container {
                grid-template-columns: 1fr 1fr
            }

            .stat:nth-child(3) {
                border-left: 0;
                padding-left: 0
            }

            .stat {
                padding: 38px 24px
            }

            .pipe {
                grid-template-columns: 1fr;
                gap: 34px
            }

            .pipe::before,
            .pfill {
                display: none
            }

            .pstep::before {
                display: none
            }

            .pstep .n {
                margin-top: 0
            }

            .rail {
                display: none
            }

            .nav-links {
                position: fixed;
                top: 68px;
                left: 0;
                right: 0;
                flex-direction: column;
                gap: 0;
                background: var(--nav);
                backdrop-filter: blur(18px);
                padding: 10px 5%;
                border-bottom: 1px solid var(--line);
                transform: translateY(-140%);
                transition: transform .5s var(--ease)
            }

            .nav-links a {
                display: block;
                padding: 16px 0;
                border-bottom: 1px solid var(--line)
            }

            .nav-links.open {
                transform: none
            }

            .burger {
                display: flex
            }

            .nav-cta .btn {
                display: none
            }
        }

        @media(max-width:560px) {
            .stats .container {
                grid-template-columns: 1fr
            }

            .stat {
                border-left: 0;
                padding-left: 0
            }

            .hero-foot .scroll,
            .cap .tl {
                display: none
            }

            .eng {
                grid-template-columns: repeat(4, 1fr)
            }

            .kpis {
                grid-template-columns: 1fr
            }

            .pre-bar {
                width: 150px
            }
        }

        @media(prefers-reduced-motion:reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }
        }
    
/* ===== INNER PAGES (built on the index design system) ===== */
:root{--crimson:var(--accent);--ember:var(--accent-2);--g8:var(--line);--fd:Poppins,sans-serif;--fm:'JetBrains Mono',monospace}
section{padding:90px 0}
.grad,.grad .w>span{background:linear-gradient(100deg,var(--accent-2),var(--accent) 55%,#FF8A8E);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:600}
.eyebrow{font:500 .72rem 'JetBrains Mono';letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}.eyebrow i{display:none}
.page-hero{position:relative;min-height:64vh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden}
.page-hero .container{position:relative;z-index:3;will-change:transform,opacity}
.page-hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:300;letter-spacing:-.035em;line-height:1.04;margin:22px 0 0;max-width:15ch}
.page-hero p{max-width:600px;font-size:1.08rem;margin-top:22px}
.page-hero .container::after{content:"";display:block;width:min(320px,40vw);height:1px;background:var(--t1);margin-top:36px;transform:scaleX(0);transform-origin:left;animation:rl 1.6s var(--ease) 1.1s forwards}
.nf404 .container::after{margin-inline:auto;transform-origin:center}.nf404 h1{max-width:none}
@keyframes rl{to{transform:none}}
.hbg{position:absolute;inset:0;overflow:hidden;background:var(--base)}
.hbg .gl{position:absolute;inset:0;width:100%;height:100%;display:none}.hbg.gl .gl{display:block}.hbg.gl .blob{display:none}
.hbg .blob{will-change:transform}
.sec-head{max-width:700px;margin:0 auto 60px;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.8vw,3.2rem);font-weight:300;margin:18px 0}.sec-head p{font-size:1.05rem}.sec-head p:empty{display:none}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:32px;position:relative;overflow:hidden;transition:border-color .4s,transform .6s var(--ease),box-shadow .5s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(229,72,77,.16),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{border-color:var(--line2);box-shadow:var(--shadow)}.card:hover::before{opacity:1}
.card h3{font-size:1.28rem;font-weight:500;margin:18px 0 10px;position:relative}.card p{font-size:.93rem;position:relative}
.ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.3);transition:transform .6s var(--ease)}
.card:hover .ico{transform:rotate(-8deg) scale(1.1)}
.tag{display:inline-block;margin-top:16px;font:500 .62rem 'JetBrains Mono';letter-spacing:.12em;padding:6px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--t3);text-transform:uppercase;transition:.4s}
.card:hover .tag{color:#fff;background:var(--accent);border-color:var(--accent-2)}
.card.stat{padding:34px 28px;border-left:1px solid var(--line)}
.card.stat b{font:300 3.4rem Poppins;letter-spacing:-.03em;display:block;line-height:1}
.card.stat span{display:block;margin-top:12px;font:500 .7rem 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}.reveal.left{transform:translateX(-50px)}.reveal.right{transform:translateX(50px)}.reveal.zoom{transform:scale(.94)}
.reveal.left.in,.reveal.right.in,.reveal.zoom.in{transform:none}
.card.reveal.in:hover{transform:translateY(-5px)}
.card.reveal.in{transition:opacity 1s var(--ease),transform .6s var(--ease),border-color .4s,box-shadow .5s}
/* buttons (legacy names) */
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 12px 34px rgba(200,39,45,.3)}
.btn-primary::before{background:var(--accent-2)}.btn-primary:hover{color:#fff;border-color:var(--accent-2)}
.btn .arrow{transition:transform .4s var(--ease)}.btn:hover .arrow{transform:translateX(5px)}
/* timeline */
.tl{position:relative;max-width:820px;margin:0 auto;padding-left:70px}
.tl::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:1px;background:var(--line2)}
.tl::after{content:"";position:absolute;left:23px;top:0;width:2px;margin-left:-.5px;height:calc(var(--fill,0)*100%);background:linear-gradient(var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent-2)}
.tl-item{position:relative;margin-bottom:22px}
.tl-item .dot{position:absolute;left:-70px;top:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:500 .8rem 'JetBrains Mono';background:var(--bg);border:1px solid var(--t3);color:var(--t3);transition:.7s var(--ease);z-index:1}
.tl-item.in .dot{background:var(--accent);border-color:var(--accent-2);color:#fff;box-shadow:0 0 0 6px rgba(229,72,77,.18),0 0 22px var(--accent-2)}
.tl-item h3 small{display:block;font:500 .68rem 'JetBrains Mono';color:var(--accent-2);letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
/* tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.tabs .tab{display:inline-block;width:auto;border:1px solid var(--line2);border-radius:99px;padding:13px 24px;font:500 .74rem 'JetBrains Mono';letter-spacing:.08em;color:var(--t2);background:transparent;cursor:pointer;transition:.5s var(--ease)}
.tabs .tab:last-child{border-bottom:1px solid var(--line2)}.tabs .tab::after{display:none}
.tabs .tab:hover{color:var(--t1);border-color:var(--t1)}
.tabs .tab.on{background:var(--accent);border-color:var(--accent-2);color:#fff;padding-left:24px;box-shadow:0 10px 30px rgba(200,39,45,.3)}
.panel{display:none}.panel.on{display:block;animation:pin .8s var(--ease)}
/* faq */
.faq{border-top:1px solid var(--line)}.faq:last-child{border-bottom:1px solid var(--line)}
.faq button{width:100%;text-align:left;background:none;border:0;color:var(--t1);font:500 1.08rem Poppins;padding:26px 44px 26px 0;cursor:pointer;position:relative;transition:padding .4s var(--ease),color .3s}
.faq button:hover{padding-left:12px;color:var(--accent-2)}
.faq button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.7rem;font-weight:300;color:var(--accent-2);transition:transform .5s var(--ease)}
.faq.open button::after{transform:translateY(-50%) rotate(135deg)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}.faq .a p{padding:0 0 26px}
/* prose */
.prose{max-width:760px;margin:0 auto}.prose h2{font-size:1.5rem;font-weight:500;margin:44px 0 12px}.prose h2:first-child{margin-top:0}.prose p{font-size:1rem}
/* forms */
.field{margin-bottom:18px}.field label{display:block;font:500 .7rem 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.input{width:100%;background:transparent;border:1px solid var(--line2);border-radius:12px;padding:14px 16px;color:var(--t1);font:inherit;transition:border-color .3s,box-shadow .3s}
.input:focus{outline:0;border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(229,72,77,.15)}
textarea.input{min-height:130px;resize:vertical}select.input option{background:var(--panel);color:var(--t1)}
.form-ok{display:none;margin-top:16px;color:var(--ok);font-size:.9rem}.form-ok.show{display:block;animation:pin .8s var(--ease)}
/* download */
.dl{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hash{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:.72rem 'JetBrains Mono';color:var(--t3);word-break:break-all}
.hash .tab{display:inline-block;width:auto;border:1px solid var(--line2);border-radius:99px;color:var(--t2);padding:4px 12px;cursor:pointer}.hash .tab::after{display:none}.hash .tab:hover{background:var(--t1);color:var(--bg)}
/* raksha */
.term{background:#090C13;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;color:#D6D9E2}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font:.74rem 'JetBrains Mono';color:#7C8396}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#2A2F3B}.term-bar span{margin-left:8px}
.term .chat{display:grid;gap:14px;min-height:340px;align-content:start;padding:24px}
.pipeline{display:grid;gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:32px;transition:border-color .4s,transform .6s var(--ease)}
.step.reveal.in:hover{transform:translateY(-5px);border-color:var(--line2)}
.step .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:600 .9rem Poppins;margin-bottom:16px;box-shadow:0 0 0 6px rgba(229,72,77,.18)}
.step h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}.step p{font-size:.92rem}
/* cta */
.cta{position:relative;overflow:hidden;text-align:center;padding:96px 30px;border-radius:32px;background:var(--panel);border:1px solid var(--line)}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.cta::before{width:55%;aspect-ratio:1;left:-12%;top:-45%;background:radial-gradient(closest-side,rgba(229,72,77,.38),transparent);animation:d1 18s ease-in-out infinite alternate}
.cta::after{width:45%;aspect-ratio:1;right:-8%;bottom:-50%;background:radial-gradient(closest-side,rgba(60,90,200,.3),transparent);animation:d2 22s ease-in-out infinite alternate}
.cta>*{position:relative;z-index:1}.cta h2{font-size:clamp(2.2rem,4.6vw,4rem);font-weight:300;margin-bottom:16px}.cta p{max-width:520px;margin:0 auto 34px}
/* 404 */
.big{font:800 clamp(7rem,26vw,19rem) Poppins;line-height:.9;letter-spacing:-.06em;position:relative;display:inline-block;animation:flick 5s steps(1) infinite}
.big::before,.big::after{content:attr(data-t);position:absolute;inset:0;background:none;-webkit-text-fill-color:currentColor;color:var(--accent-2);opacity:.55;mix-blend-mode:screen;pointer-events:none}
.big::before{animation:gl1 3s infinite steps(1)}.big::after{color:#4C8DFF;animation:gl2 3s infinite steps(1)}
@keyframes gl1{0%,90%,100%{clip-path:inset(0 0 100% 0)}92%{clip-path:inset(20% 0 55% 0);transform:translateX(-8px)}96%{clip-path:inset(60% 0 10% 0);transform:translateX(6px)}}
@keyframes gl2{0%,86%,100%{clip-path:inset(0 0 100% 0)}88%{clip-path:inset(50% 0 20% 0);transform:translateX(8px)}94%{clip-path:inset(10% 0 70% 0);transform:translateX(-6px)}}
@keyframes flick{0%,97%{opacity:1}98%{opacity:.8}}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.grid.g2[style*="gap:50px"],.grid.g2[style*="gap:40px"]{gap:24px!important}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}.grid.g2{grid-template-columns:1fr!important}.pipeline{grid-template-columns:1fr!important}
.page-hero{min-height:auto;padding:130px 0 60px}.page-hero h1{max-width:none}section{padding:64px 0}.cta{padding:70px 22px}
.tl{padding-left:56px}.tl::before,.tl::after{left:17px}.tl-item .dot{left:-56px;width:36px;height:36px;font-size:.7rem}.tabs .tab{padding:11px 16px;font-size:.68rem}.card{padding:26px}}

/* ===== v2 refinements ===== */
.ico{background:transparent;filter:grayscale(1);border-radius:14px;border-color:var(--line2)}
.card:hover .ico{filter:none;border-color:rgba(229,72,77,.5)}
.kk{font:500 .72rem 'JetBrains Mono';letter-spacing:.16em;color:var(--accent-2)}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.band{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;width:90%;margin:30px auto 0;border-block:1px solid var(--line)}
.band div{padding:44px 24px;border-left:1px solid var(--line)}.band div:first-child{border-left:0;padding-left:0}
.band b{font:300 clamp(2.4rem,4vw,3.6rem) Poppins;letter-spacing:-.03em;line-height:1}.band small{font:500 1rem 'JetBrains Mono';color:var(--accent-2);margin-left:4px}
.band span{display:block;margin-top:12px;font:500 .7rem 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.cmp{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.cmp table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.cmp th{font:500 .68rem 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--t3);text-align:left;padding:20px 24px;border-bottom:1px solid var(--line)}
.cmp td{padding:18px 24px;border-top:1px solid var(--line);color:var(--t2);transition:background .3s}.cmp td:first-child{color:var(--t1);font-weight:500}
.cmp tr:hover td{background:rgba(229,72,77,.05)}.cmp th:last-child,.cmp td:last-child{color:var(--t1)}
.cmp td:last-child{border-left:1px solid rgba(229,72,77,.3)}
.term .logs{padding:10px 20px 18px}.lg{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.86rem;color:#D6D9E2}
.lg time{font:.74rem 'JetBrains Mono';color:#6F7689}.lg code{font:.7rem 'JetBrains Mono';color:#8D94A8;padding:2px 8px;border:1px solid rgba(255,255,255,.12);border-radius:5px;align-self:start}
.lg.bad span{color:#FF8A8E}.lg.good span{color:#4ACB8E}
#links+.nav-cta{gap:10px}
@media(max-width:800px){.band{grid-template-columns:1fr 1fr}.band div:nth-child(3){border-left:0;padding-left:0}.lg{grid-template-columns:1fr auto}.lg time{display:none}}