:root {
    --black-deep:#101820;
    --black-soft:#101820;
    --black-card:#101820;
    --gray-dark:#D9D9D6;
    --gray-mid:#D9D9D6;
    --gray-light:#D9D9D6;
    --white:#ffffff;
    --white-soft:#FFFFFF;
    --cyan-bright:#009CDE;
    --cyan-glow:#009CDE;
    --blue-primary:#009CDE;
    --gradient-primary:#009CDE;
    --font-display:"Roboto", sans-serif;
    --font-heading:"Roboto", sans-serif;
    --font-body:"Roboto", sans-serif;
    --section-padding:120px 0;
    --container-max:1400px;
    --container-padding:0 40px;
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast:300ms var(--ease-out);
    --transition-med:500ms var(--ease-out);
    --glow-sm:0 0 10px rgba(0, 156, 222, 0.3);
    --glow-md:0 0 20px rgba(0, 156, 222, 0.4), 0 0 40px rgba(0, 156, 222, 0.2);
    --glow-lg:0 0 30px rgba(0, 156, 222, 0.5), 0 0 60px rgba(0, 156, 222, 0.3), 0 0 100px rgba(0, 156, 222, 0.1);
    --glow-text:0 0 10px rgba(0, 156, 222, 0.5), 0 0 20px rgba(0, 156, 222, 0.3);
    --blue-electric:#009CDE
}
*,*::before,*::after {
    margin:0;
    padding:0;
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    font-size:16px
}
body {
    font-family:var(--font-body);
    background:var(--black-deep);
    color:var(--white-soft);
    overflow-x:hidden;
    line-height:1.6
}
a {
    text-decoration:none;
    color:inherit
}
button {
    cursor:pointer;
    border:none;
    background:none;
    font-family:inherit
}
img {
    max-width:100%;
    display:block
}
.container {
    max-width:var(--container-max);
    margin:0 auto;
    padding:var(--container-padding)
}
.section-title {
    font-family:var(--font-display);
    font-size:clamp(2rem, 5vw, 3.5rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:1rem
}
.section-subtitle {
    font-family:var(--font-heading);
    font-size:clamp(1rem, 2vw, 1.3rem);
    color:var(--gray-light);
    max-width:600px
}
.gradient-text {
    background:var(--gradient-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:#fff0;
    background-clip:text
}
.navbar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:20px 0;
    transition:all var(--transition-med)
}
.navbar.scrolled {
    padding:12px 0;
    background:rgb(16 24 32 / .9);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgb(0 156 222 / .1)
}
.navbar .container {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.nav-logo {
    display:flex;
    align-items:center
}
.nav-logo img {
    height:40px;
    width:auto;
    display:block
}
.nav-links {
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none
}
.nav-links a {
    font-family:var(--font-heading);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray-light);
    transition:color var(--transition-fast);
    position:relative
}
.nav-links a::after {
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:0;
    height:1px;
    background:var(--cyan-bright);
    transition:width var(--transition-fast);
    box-shadow:var(--glow-sm)
}
.nav-links a:hover {
    color:var(--cyan-bright)
}
.nav-links a:hover::after {
    width:100%
}
.nav-cta {
    padding:10px 24px;
    border:1px solid var(--cyan-bright);
    border-radius:4px;
    font-family:var(--font-heading);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    transition:all var(--transition-fast)
}
.nav-cta:hover {
    background:var(--cyan-bright);
    color:var(--white) !important;
    box-shadow:var(--glow-md)
}
.hamburger {
    display:none;
    flex-direction:column;
    gap:6px;
    width:30px
}
.hamburger span {
    width:100%;
    height:2px;
    background:var(--white);
    transition:all var(--transition-fast)
}
.hamburger.active span:nth-child(1) {
    transform:rotate(45deg) translate(5px,6px)
}
.hamburger.active span:nth-child(2) {
    opacity:0
}
.hamburger.active span:nth-child(3) {
    transform:rotate(-45deg) translate(5px,-6px)
}
.mobile-menu {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgb(16 24 32 / .98);
    z-index:999;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:30px
}
.mobile-menu.active {
    display:flex
}
.mobile-menu a {
    font-family:var(--font-display);
    font-size:1.5rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--white);
    transition:color var(--transition-fast)
}
.mobile-menu a:hover {
    color:var(--cyan-bright)
}
#hero {
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--black-deep)
}
.hero-grid {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:var(--black-deep);
    background-image:url(../images/cover.gif);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
    opacity:0;
    animation:fadeInHero 2.5s ease-in forwards
}
@keyframes fadeInHero {
    0% {
        opacity:0;
        filter:blur(10px)
    }
    100% {
        opacity:.4;
        filter:blur(0)
    }
}
.hero-beam-container {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
    overflow:hidden
}
.beam-svg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.beam-origin {
    position:absolute;
    top:50%;
    left:5%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    background:var(--cyan-bright);
    border-radius:50%;
    box-shadow:0 0 20px var(--cyan-bright),0 0 40px var(--cyan-bright),0 0 60px rgb(0 156 222 / .5),0 0 80px rgb(0 156 222 / .3);
    animation:originPulse 2s ease-in-out infinite;
    z-index:3
}
@keyframes originPulse {
    0%,100% {
        box-shadow:0 0 20px var(--cyan-bright),0 0 40px var(--cyan-bright),0 0 60px rgb(0 156 222 / .5);
        transform:translateY(-50%) scale(1)
    }
    50% {
        box-shadow:0 0 30px var(--cyan-bright),0 0 60px var(--cyan-bright),0 0 90px rgb(0 156 222 / .7);
        transform:translateY(-50%) scale(1.2)
    }
}
.hero-content {
    position:relative;
    z-index:3;
    max-width:900px;
    padding:0 40px
}
.hero-badge {
    display:inline-block;
    padding:8px 20px;
    border:1px solid rgb(0 156 222 / .3);
    border-radius:20px;
    font-family:var(--font-heading);
    font-size:.75rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:30px;
    opacity:0;
    transform:translateY(20px)
}
.hero-logo {
    margin-bottom:20px;
    opacity:0;
    transform:translateY(30px)
}
.hero-logo img {
    max-width:400px;
    width:100%;
    height:auto;
    display:block
}
.hero-headline {
    font-family:var(--font-display);
    font-size:clamp(2rem, 5vw, 4rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:20px;
    color:var(--white);
    line-height:1.1;
    opacity:0;
    transform:translateY(30px)
}
.hero-headline .accent {
    color:var(--cyan-bright);
    text-shadow:var(--glow-text)
}
.hero-subtitle {
    font-family:var(--font-body);
    font-size:clamp(1rem, 1.5vw, 1.2rem);
    color:var(--gray-light);
    margin-bottom:40px;
    max-width:600px;
    line-height:1.7;
    opacity:0;
    transform:translateY(30px)
}
.hero-ctas {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(30px)
}
.btn-primary {
    padding:16px 32px;
    background:var(--cyan-bright);
    border-radius:4px;
    font-family:var(--font-heading);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--black-deep);
    transition:all var(--transition-fast);
    display:inline-flex;
    align-items:center;
    gap:10px;
    position:relative;
    overflow:hidden
}
.btn-primary::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, #009CDE,transparent);
    transition: left 0.5s
}
.btn-primary:hover::before {
    left:100%
}
.btn-primary:hover {
    box-shadow:var(--glow-lg);
    transform:translateY(-2px)
}
.btn-secondary {
    padding:16px 32px;
    border:1px solid rgb(0 156 222 / .3);
    border-radius:4px;
    font-family:var(--font-heading);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    transition:all var(--transition-fast);
    position:relative;
    overflow:hidden
}
.btn-secondary::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background:rgb(0 156 222 / .1);
    transition:width var(--transition-fast);
    z-index:-1
}
.btn-secondary:hover::before {
    width:100%
}
.btn-secondary:hover {
    border-color:var(--cyan-bright);
    box-shadow:var(--glow-md)
}
.scroll-indicator {
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:0
}
.scroll-indicator span {
    font-family:var(--font-heading);
    font-size:.75rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--gray-light)
}
.scroll-arrow {
    width:20px;
    height:20px;
    border-right:2px solid var(--cyan-bright);
    border-bottom:2px solid var(--cyan-bright);
    transform:rotate(45deg);
    animation:scrollPulse 2s infinite
}
@keyframes scrollPulse {
    0%,100% {
        opacity:.3;
        transform:rotate(45deg) translate(0,0)
    }
    50% {
        opacity:1;
        transform:rotate(45deg) translate(5px,5px)
    }
}
.stats-bar {
    padding:80px 0;
    border-top:1px solid rgb(0 156 222 / .1);
    border-bottom:1px solid rgb(0 156 222 / .1);
    background:linear-gradient(180deg,var(--black-deep) 0%,rgb(0 156 222 / .08) 50%,var(--black-deep) 100%)
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px
}
.stat-item {
    text-align:center;
    padding:30px 20px
}
.stat-icon {
    width:48px;
    height:48px;
    margin:0 auto 20px;
    background:rgb(0 156 222 / .1);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--glow-sm)
}
.stat-icon svg {
    width:24px;
    height:24px;
    stroke:var(--cyan-bright);
    stroke-width:2.5;
    fill:none
}
.stat-number {
    font-family:var(--font-display);
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:800;
    color:var(--cyan-bright);
    text-shadow:var(--glow-text);
    margin-bottom:8px
}
.stat-label {
    font-family:var(--font-heading);
    font-size:.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray-light)
}
.stat-certified {
    font-family:var(--font-heading);
    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    text-shadow:var(--glow-text);
    line-height:1.6
}
#belief {
    padding:var(--section-padding);
    position:relative;
    background:radial-gradient(circle at 50% 0%,rgb(0 156 222 / .1) 0%,var(--black-deep) 60%)
}
#belief .container {
    max-width:1200px;
    text-align:center
}
.belief-number {
    font-family:var(--font-display);
    font-size:.9rem;
    color:var(--cyan-bright);
    letter-spacing:3px;
    margin-bottom:20px
}
.belief-title {
    font-family:var(--font-display);
    font-size:1.2rem;
    text-transform:uppercase;
    letter-spacing:4px;
    color:var(--gray-light);
    margin-bottom:20px
}
.belief-headline {
    font-family:var(--font-display);
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:30px;
    line-height:1.2;
    color:var(--white)
}
.belief-text {
    font-size:1.1rem;
    line-height:1.9;
    color:var(--gray-light)
}
#matrix-demo {
    position:relative;
    min-height:100vh;
    padding:100px 0;
    overflow:hidden;
    background:var(--black-deep)
}
.matrix-header {
    text-align:center;
    margin-bottom:80px;
    position:relative;
    z-index:2
}
.matrix-label {
    font-family:var(--font-heading);
    font-size:.9rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:20px
}
.matrix-title {
    font-family:var(--font-display);
    font-size:clamp(2rem, 5vw, 4rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--white);
    margin-bottom:20px
}
.matrix-description {
    font-size:1.1rem;
    color:var(--gray-light);
    max-width:600px;
    margin:0 auto;
    line-height:1.7
}
.matrix-stage {
    position:relative;
    width:100%;
    height:500px;
    background:#101820;
    border:1px solid rgb(0 156 222 / .1);
    border-radius:12px;
    overflow:hidden
}
.beam-canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1
}
.matrix-headlight {
    position:absolute;
    left:80px;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:100px;
    border:2px solid var(--cyan-bright);
    border-radius:30px 10px 10px 30px;
    background:rgb(0 156 222 / .1);
    box-shadow:0 0 30px rgb(0 156 222 / .5),inset 0 0 20px rgb(0 156 222 / .3);
    z-index:2
}
.matrix-hud {
    position:absolute;
    bottom:30px;
    right:30px;
    text-align:right;
    font-family:var(--font-heading);
    font-size:.85rem;
    letter-spacing:2px;
    color:var(--cyan-bright);
    z-index:3
}
.matrix-hud div {
    margin-bottom:8px
}
#solutions {
    padding:var(--section-padding)
}
.solutions-header {
    text-align:center;
    margin-bottom:100px
}
.solutions-header .label {
    font-family:var(--font-heading);
    font-size:.9rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:20px
}
.chapter {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:150px
}
.chapter:last-child {
    margin-bottom:0
}
.chapter:nth-child(even) .chapter-image {
    order:2
}
.chapter-image {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--black-card);
    border:1px solid rgb(0 156 222 / .1);
    transition:all var(--transition-med)
}
.chapter-image:hover {
    border-color:var(--cyan-bright);
    box-shadow:var(--glow-md);
    transform:translateY(-5px)
}
.chapter-image-inner {
    width:100%;
    height:100%;
    background:linear-gradient(90deg, #009CDE,rgb(0 156 222 / .05));
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden
}
.chapter-image-inner::after {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(90deg, #009CDE, transparent);
    animation:imageShine 4s infinite
}
@keyframes imageShine {
    0% {
        left:-100%
    }
    100% {
        left:200%
    }
}
.chapter-image svg {
    width:80%;
    height:80%;
    opacity:.7;
    transition:all var(--transition-med)
}
.chapter-image:hover svg {
    opacity:1;
    transform:scale(1.02)
}
.svg-beam {
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:drawBeam 4s linear infinite
}
@keyframes drawBeam {
    to {
        stroke-dashoffset:0
    }
}
.pulse-node {
    animation:nodePulse 2s ease-in-out infinite alternate
}
@keyframes nodePulse {
    from {
        r:4;
        opacity:.5;
        filter:drop-shadow(0 0 2px var(--cyan-bright))
    }
    to {
        r:8;
        opacity:1;
        filter:drop-shadow(0 0 10px var(--cyan-bright))
    }
}
.chapter-badge {
    display:inline-block;
    padding:6px 16px;
    border:1px solid rgb(0 156 222 / .3);
    border-radius:20px;
    font-family:var(--font-heading);
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:20px
}
.chapter-content h3 {
    font-family:var(--font-display);
    font-size:clamp(1.5rem, 3vw, 2.2rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:20px;
    color:var(--white);
    line-height:1.3
}
.chapter-content p {
    font-size:1rem;
    color:var(--gray-light);
    line-height:1.8;
    margin-bottom:30px
}
.chapter-features {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:30px
}
.feature-tag {
    padding:8px 16px;
    background:rgb(0 156 222 / .08);
    border:1px solid rgb(0 156 222 / .2);
    border-radius:4px;
    font-family:var(--font-heading);
    font-size:.8rem;
    letter-spacing:1px;
    color:var(--cyan-glow);
    transition:all var(--transition-fast);
    opacity:0;
    transform:translateX(-20px)
}
.feature-tag.visible {
    opacity:1;
    transform:translateX(0)
}
.feature-tag:hover {
    background:rgb(0 156 222 / .15);
    border-color:var(--cyan-bright);
    box-shadow:var(--glow-sm);
    transform:translateY(-2px)
}
.chapter-specs {
    display:flex;
    gap:30px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgb(0 156 222 / .1)
}
.chapter-spec {
    font-family:var(--font-display);
    font-size:1.2rem;
    font-weight:700;
    color:var(--cyan-bright);
    text-shadow:var(--glow-text)
}
.chapter-spec-label {
    font-family:var(--font-heading);
    font-size:.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-light);
    display:block;
    margin-top:4px
}
.chapter-cta {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-heading);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    transition:all var(--transition-fast);
    margin-top:20px
}
.chapter-cta:hover {
    gap:16px;
    text-shadow:var(--glow-text)
}
.chapter-cta svg {
    width:20px;
    height:20px;
    stroke:var(--cyan-bright);
    stroke-width:2;
    fill:none;
    transition:transform var(--transition-fast)
}
.chapter-cta:hover svg {
    transform:translateX(5px)
}
.process-section {
    padding: 60px 0;
    background:linear-gradient(180deg,var(--black-deep) 0%,rgb(0 156 222 / .08) 50%,var(--black-deep) 100%);
    border-bottom:1px solid rgb(0 156 222 / .08)
}
.process-header {
    text-align:center;
    margin-bottom:60px
}
.process-label {
    font-family:var(--font-heading);
    font-size:.9rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:20px
}
.process-layout {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
    align-items:center
}
@media (max-width:768px) {
    .process-layout {
        display:flex;
        flex-direction:column
    }
}
.process-tabs-container {
    display:flex;
    flex-direction:column;
    gap:15px
}
.process-tab-btn {
    text-align:left;
    padding:20px;
    border-radius:8px;
    border:1px solid rgb(255 255 255 / .05);
    background:#fff0;
    color:var(--gray-light);
    font-family:var(--font-display);
    font-size:.95rem;
    letter-spacing:1px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:all 0.3s ease
}
.process-tab-btn.active {
    border-color:rgb(0 156 222 / .3);
    background:rgb(0 156 222 / .05);
    color:var(--white)
}
.process-tab-arrow {
    font-size:1.2rem
}
.process-info-panel {
    background:var(--black-card);
    border:1px solid rgb(0 156 222 / .15);
    border-radius:16px;
    padding:50px;
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:var(--glow-md);
    position:relative;
    overflow:hidden;
    transition:border-color 0.3s ease
}
.process-ambient-glow {
    position:absolute;
    top:-50px;
    right:-50px;
    width:150px;
    height:150px;
    background:rgb(0 156 222 / .1);
    filter:blur(40px);
    border-radius:50%
}
.process-step-title {
    font-family:var(--font-display);
    font-size:1.5rem;
    text-transform:uppercase;
    color:var(--cyan-bright);
    margin-bottom:20px;
    text-shadow:var(--glow-text)
}
.process-step-desc {
    color:var(--white-soft);
    font-size:1.05rem;
    line-height:1.8
}
.process-header {
    text-align:center;
    margin-bottom:80px
}
.timeline {
    position:relative;
    max-width:900px;
    margin:0 auto
}
.timeline::before {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:100%;
    background:rgb(0 156 222 / .15)
}
.timeline-progress {
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:0;
    background:var(--gradient-primary);
    box-shadow:var(--glow-sm)
}
.timeline-item {
    position:relative;
    padding:40px 0;
    display:grid;
    grid-template-columns:1fr 60px 1fr;
    gap:30px;
    align-items:center
}
.timeline-item:nth-child(odd) .timeline-content {
    grid-column:1;
    text-align:right
}
.timeline-item:nth-child(even) .timeline-content {
    grid-column:3;
    text-align:left
}
.timeline-dot {
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--black-deep);
    border:2px solid rgb(0 156 222 / .3);
    margin:0 auto;
    position:relative;
    z-index:2;
    transition:all var(--transition-fast)
}
.timeline-item.active .timeline-dot {
    background:var(--cyan-bright);
    border-color:var(--cyan-bright);
    box-shadow:var(--glow-md)
}
.timeline-number {
    font-family:var(--font-display);
    font-size:.8rem;
    font-weight:700;
    color:var(--cyan-bright);
    letter-spacing:2px;
    margin-bottom:8px
}
.timeline-content h3 {
    font-family:var(--font-display);
    font-size:1.2rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
    color:var(--white)
}
.timeline-content p {
    font-size:.9rem;
    color:var(--gray-light);
    line-height:1.7
}
#why {
    padding:var(--section-padding)
}
.why-header {
    text-align:center;
    margin-bottom:80px
}
.why-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px
}
.why-card {
    padding:40px 30px;
    background:var(--black-card);
    border:1px solid rgb(0 156 222 / .08);
    border-radius:12px;
    text-align:center;
    transition:all var(--transition-med);
    position:relative;
    overflow:hidden
}
.why-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(180deg, rgba(0, 156, 222, 0.2), transparent);
    opacity:0;
    transition:opacity var(--transition-fast)
}
.why-card:hover {
    transform:translateY(-10px);
    border-color:var(--cyan-bright);
    box-shadow:var(--glow-md)
}
.why-card:hover::before {
    opacity:1
}
.why-icon {
    width:60px;
    height:60px;
    margin:0 auto 24px;
    display:flex;
    align-items:center;
    justify-content:center
}
.why-icon svg {
    width:48px;
    height:48px;
    stroke:var(--cyan-bright);
    stroke-width:1.5;
    fill:none
}
.why-card h3 {
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:16px;
    color:var(--white)
}
.why-card p {
    font-size:.9rem;
    color:var(--gray-light);
    line-height:1.7
}
#contact {
    padding:var(--section-padding)
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.contact-info h2 {
    font-family:var(--font-display);
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:24px;
    line-height:1.2;
    color:var(--white)
}
.contact-info>p {
    font-size:1.1rem;
    color:var(--gray-light);
    line-height:1.8;
    margin-bottom:40px
}
.contact-checks {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:40px
}
.contact-check {
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-heading);
    font-size:.9rem;
    color:var(--white-soft)
}
.contact-check .check-icon {
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgb(0 156 222 / .2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--cyan-bright);
    font-size:.8rem
}
.contact-form {
    background:var(--black-card);
    border:1px solid rgb(0 156 222 / .1);
    border-radius:12px;
    padding:40px
}
.form-group {
    margin-bottom:24px
}
.form-group label {
    display:block;
    font-family:var(--font-heading);
    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray-light);
    margin-bottom:8px
}
.form-group input,.form-group textarea,.form-group select {
    width:100%;
    padding:14px 18px;
    background:rgb(10 10 10 / .8);
    border:1px solid rgb(0 156 222 / .15);
    border-radius:6px;
    font-family:var(--font-body);
    font-size:.95rem;
    color:var(--white);
    transition:all var(--transition-fast);
    outline:none
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
    border-color:var(--cyan-bright);
    box-shadow:0 0 0 3px rgb(0 156 222 / .1),var(--glow-sm)
}
.form-group textarea {
    min-height:120px;
    resize:vertical
}
.form-group select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center
}
.form-group select option {
    background:var(--black-deep);
    color:var(--white)
}
.form-submit {
    width:100%;
    padding:16px;
    background:var(--cyan-bright);
    border-radius:6px;
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--black-deep);
    transition:all var(--transition-fast)
}
.form-submit:hover {
    box-shadow:var(--glow-lg);
    transform:translateY(-2px)
}
.form-success {
    display:none;
    text-align:center;
    padding:40px
}
.form-success.show {
    display:block
}
.form-success .checkmark {
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid var(--cyan-bright);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:1.5rem;
    color:var(--cyan-bright)
}
footer {
    padding:60px 0 30px;
    border-top:1px solid rgb(0 156 222 / .08)
}
.footer-content {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:30px;
    margin-bottom:40px
}
.footer-logo img {
    height:85px;
    width:auto;
    display:block
}
.footer-tagline p {
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    letter-spacing:2px;
    color:var(--white-soft);
    text-transform:uppercase
}
@media (max-width:768px) {
    .footer-content {
        flex-direction:column;
        text-align:center;
        gap:20px
    }
}
.footer-bottom {
    text-align:center;
    padding-top:30px;
    border-top:1px solid rgb(255 255 255 / .05);
    font-size:.8rem;
    color:var(--gray-light)
}
.reveal {
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)
}
.reveal.visible {
    opacity:1;
    transform:translateY(0)
}
.bg-mesh-cyan {
    background: radial-gradient(circle at 0% 0%, rgba(0, 156, 222, 0.1) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(0, 156, 222, 0.1) 0%, transparent 50%), var(--black-deep);
}
.bg-mesh-violet {
    background: radial-gradient(circle at 0% 0%, rgba(189, 0, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(189, 0, 255, 0.1) 0%, transparent 50%), var(--black-deep);
}
.bg-mesh-dark {
    background:var(--black-deep)
}
.process-tab-btn {
    cursor:pointer;
    border:1px solid rgb(255 255 255 / .05);
    background:#fff0;
    color:var(--gray-light);
    transition:all var(--transition-fast)
}
.process-tab-btn:hover {
    border-color:rgb(0 156 222 / .3);
    color:var(--white)
}
.process-tab-btn.active {
    color:var(--white)
}
@media (max-width:1024px) {
    .why-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .chapter {
        grid-template-columns:1fr;
        gap:40px
    }
    .chapter:nth-child(even) .chapter-image {
        order:0
    }
    .contact-grid {
        grid-template-columns:1fr
    }
    .stats-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-content {
        grid-template-columns:1fr 1fr
    }
    .lighting-grid {
        grid-template-columns:1fr!important
    }
    .magnetic-layout {
        grid-template-columns:1fr!important
    }
    .history-grid {
        grid-template-columns:1fr!important
    }
    #process>.reveal {
        grid-template-columns:1fr!important
    }
}
@media (max-width:768px) {
    :root {
        --section-padding:80px 0;
        --container-padding:0 20px
    }
    .nav-links {
        display:none
    }
    .hamburger {
        display:flex
    }
    .why-grid {
        grid-template-columns:1fr
    }
    .stats-grid {
        grid-template-columns:1fr 1fr
    }
    .timeline-item {
        grid-template-columns:30px 1fr;
        gap:20px
    }
    .timeline-item:nth-child(odd) .timeline-content,.timeline-item:nth-child(even) .timeline-content {
        grid-column:2;
        text-align:left
    }
    .timeline::before,.timeline-progress {
        left:15px;
        transform:none
    }
    .timeline-dot {
        grid-column:1
    }
    .footer-content {
        grid-template-columns:1fr;
        gap:30px
    }
    .contact-checks {
        grid-template-columns:1fr
    }
    .matrix-stage {
        height:400px
    }
    .matrix-headlight {
        left:40px;
        width:40px;
        height:70px
    }
}
@media (max-width:480px) {
    .hero-ctas {
        flex-direction:column;
        align-items:stretch
    }
    .btn-primary,.btn-secondary {
        width:100%;
        text-align:center;
        justify-content:center
    }
    .stats-grid {
        grid-template-columns:1fr
    }
    .contact-form {
        padding:24px
    }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:0.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:0.01ms!important
    }
}
#light-rays-canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none
}
.belief-layout {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:60px;
    align-items:center
}
.belief-text-content {
    text-align:left
}
.belief-title-left {
    font-family:var(--font-heading);
    font-size:.9rem;
    color:var(--blue-electric);
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:20px
}
.belief-headline-left {
    font-family:var(--font-display);
    font-size:3.2rem;
    line-height:1.2;
    color:var(--white);
    margin-bottom:30px
}
@media (max-width:992px) {
    .belief-layout {
        grid-template-columns:1fr;
        text-align:center
    }
    .belief-text-content {
        text-align:center
    }
}
.ecosystem-container {
    position:relative;
    width:100%;
    max-width:500px;
    margin:0 auto;
    aspect-ratio:1 / 1
}
.ecosystem-center {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:184px;
    height:184px;
    background: radial-gradient(circle, #101820 0%, transparent 80%);
    border:1px solid rgb(0 156 222 / .4);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 30px rgb(0 156 222 / .2);
    z-index:2
}
.ecosystem-center img {
    width:120px
}
.ecosystem-ring {
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:80%;
    border:1px dashed rgb(0 156 222 / .3);
    border-radius:50%;
    z-index:1;
    animation:rotateRing 60s linear infinite
}
@keyframes rotateRing {
    100% {
        transform:rotate(360deg)
    }
}
.ecosystem-node {
    position:absolute;
    width:72px;
    height:72px;
    transform:translate(-50%,-50%);
    z-index:3
}
.node-icon-wrapper {
    width:72px;
    height:72px;
    margin:0;
    background:var(--black-card);
    border:1px solid rgb(0 156 222 / .5);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 10px rgb(0 156 222 / .2);
    color:var(--cyan-bright);
    transition:all 0.3s ease
}
.ecosystem-node:hover .node-icon-wrapper {
    background:rgb(0 156 222 / .1);
    box-shadow:0 0 15px rgb(0 156 222 / .4);
    transform:scale(1.1)
}
.node-icon-wrapper svg {
    width:32px;
    height:32px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5
}
.ecosystem-node span {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 120px;
    text-align: center;
    font-family:var(--font-heading);
    font-size:.7rem;
    color:var(--white);
    text-transform:uppercase;
    letter-spacing:1px;
    display: block;
}
.node-1 {
    top:10%;
    left:50%
}
.node-2 {
    top:30%;
    left:84.6%
}
.node-3 {
    top:70%;
    left:84.6%
}
.node-4 {
    top:90%;
    left:50%
}
.node-5 {
    top:70%;
    left:15.4%
}
.node-6 {
    top:30%;
    left:15.4%
}
@media (max-width:768px) {
    .ecosystem-container {
        max-width:320px
    }
    .ecosystem-node {
        width:40px;
        height:40px
    }
    .node-icon-wrapper {
        width:40px;
        height:40px
    }
    .node-icon-wrapper svg {
        width:18px;
        height:18px
    }
    .ecosystem-node span {
        font-size:.55rem
    }
    .ecosystem-center {
        width:115px;
        height:115px
    }
    .ecosystem-center img {
        width:70px
    }
}