/*==================================================
TABLE OF CONTENTS
====================================================

1. About Hero
2. Animated Background
3. Hero Content
4. Hero Buttons
5. Hero Statistics
6. Company Introduction
7. Display System

==================================================*/


/*==================================================
ABOUT HERO
==================================================*/

.about-hero{

position:relative;

display:flex;

align-items:center;

min-height:100vh;

padding-top:180px;

padding-bottom:120px;

overflow:hidden;

}


/*==================================================
ANIMATED BACKGROUND
==================================================*/

.about-grid-bg{

position:absolute;

inset:0;

background-image:

linear-gradient(

rgba(99,232,255,.04) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(99,232,255,.04) 1px,

transparent 1px

);

background-size:60px 60px;

mask-image:

linear-gradient(

180deg,

rgba(0,0,0,.15),

#000,

rgba(0,0,0,.25)

);

pointer-events:none;

}


/*==================================================
MOTHERBOARD CIRCUITS
==================================================*/

.about-circuit{

position:absolute;

inset:0;

pointer-events:none;

opacity:.45;

background:

linear-gradient(

90deg,

transparent 8%,

rgba(99,232,255,.07) 8.4%,

transparent 8.8%

),

linear-gradient(

180deg,

transparent 30%,

rgba(99,232,255,.08) 30.4%,

transparent 30.8%

),

linear-gradient(

90deg,

transparent 74%,

rgba(99,232,255,.08) 74.4%,

transparent 74.8%

);

}


/*==================================================
FLOATING PARTICLES
==================================================*/

.about-particles{

position:absolute;

inset:0;

pointer-events:none;

opacity:.45;

background-image:

radial-gradient(circle,var(--primary) 1px,transparent 1.5px);

background-size:160px 160px;

animation:particlesFloat 25s linear infinite;

}


/*==================================================
NETWORK NODES
==================================================*/

.network-node{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:var(--primary);

box-shadow:

0 0 15px var(--primary),

0 0 35px var(--primary);

animation:nodePulse 3s infinite;

}

.node-1{

top:15%;

left:12%;

}

.node-2{

top:22%;

right:16%;

}

.node-3{

top:55%;

left:8%;

}

.node-4{

right:10%;

top:62%;

}

.node-5{

bottom:18%;

left:18%;

}

.node-6{

bottom:14%;

right:22%;

}


/*==================================================
HERO CONTENT
==================================================*/

.about-hero-content{

position:relative;

max-width:760px;

z-index:5;

}

.hero-title{

margin:28px 0;

font-size:4.4rem;

line-height:1.1;

max-width:900px;

}

.hero-description{

max-width:700px;

margin-bottom:45px;

font-size:1.08rem;

color:var(--text-light);

}


/*==================================================
BUTTONS
==================================================*/

.hero-actions{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:70px;

}


/*==================================================
STATISTICS
==================================================*/

.hero-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

max-width:720px;

}

.stat-card{

padding:35px;

text-align:center;

border-radius:24px;

background:var(--glass);

border:1px solid var(--border-primary);

box-shadow:var(--shadow-sm);

backdrop-filter:blur(22px);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:

var(--shadow-lg),

var(--glow-primary);

}

.stat-card h3{

margin-bottom:10px;

font-size:2.3rem;

color:var(--primary-light);

}

.stat-card span{

color:var(--text-light);

}


/*==================================================
COMPANY INTRODUCTION
==================================================*/

.about-intro{

position:relative;

overflow:hidden;

}

.about-intro-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

gap:90px;

align-items:center;

}

.intro-content .section-title{

margin:20px 0 28px;

}

.intro-content p{

margin-bottom:24px;

color:var(--text-light);

line-height:1.9;

}


/*==================================================
DISPLAY SYSTEM
==================================================*/

.intro-display{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}




/*==================================================
AI CORE
==================================================*/

.display-core{

position:absolute;

left:50%;

top:50%;

width:150px;

height:150px;

transform:translate(-50%,-50%);

border-radius:50%;

background:

radial-gradient(

circle,

#ffffff 0%,

var(--primary-light) 25%,

var(--primary) 55%,

transparent 100%

);

box-shadow:

0 0 35px rgba(99,232,255,.8),

0 0 80px rgba(99,232,255,.45),

0 0 160px rgba(99,232,255,.20);


z-index:20;

}


/*==================================================
ENERGY RINGS
==================================================*/

.display-ring{

position:absolute;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.ring-1{

width:220px;

height:220px;

border:2px solid rgba(99,232,255,.45);

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.ring-2{

width:340px;

height:340px;

border:2px dashed rgba(99,232,255,.18);

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.ring-3{

width:470px;

height:470px;

border:1px solid rgba(99,232,255,.12);

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}


/*==================================================
RING GLOW
==================================================*/

.display-ring::before{

content:"";

position:absolute;

inset:0;

border-radius:50%;

background:

repeating-conic-gradient(

from 0deg,

transparent 0deg 12deg,

rgba(255,255,255,.8) 12deg 15deg,

transparent 15deg 40deg

);

mask:

radial-gradient(

circle,

transparent 47%,

#000 50%,

#000 54%,

transparent 57%

);

opacity:.45;

}


/*==================================================
DISPLAY NODES
==================================================*/

.display-node{

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:var(--primary);

box-shadow:

0 0 15px var(--primary),

0 0 35px var(--primary);



z-index:10;

}

.node-a{

top:14%;

left:50%;

transform:translateX(-50%);

}

.node-b{

top:34%;

right:14%;

}

.node-c{

bottom:20%;

right:22%;

}

.node-d{

bottom:14%;

left:50%;

transform:translateX(-50%);

}

.node-e{

left:16%;

top:35%;

}

.node-f{

left:20%;

bottom:26%;

}



/*==================================================
CIRCUIT CONNECTIONS
==================================================*/

.circuit-line{

position:absolute;

left:50%;

top:50%;

width:2px;

height:170px;

margin-left:-1px;

margin-top:-170px;

border-radius:50px;

background:
linear-gradient(
180deg,
rgba(99,232,255,.95),
rgba(99,232,255,.25),
transparent
);

transform-origin:center bottom;

opacity:.45;

z-index:3;

pointer-events:none;

}


.line-1{

transform:rotate(0deg);

}

.line-2{

transform:rotate(60deg);

}

.line-3{

transform:rotate(120deg);

}

.line-4{

transform:rotate(180deg);

}

.line-5{

transform:rotate(240deg);

}

.line-6{

transform:rotate(300deg);

}




/*==================================================
ENERGY BEAMS
==================================================*/

.energy-beams{

position:absolute;

inset:0;

pointer-events:none;

display:flex;

align-items:center;

justify-content:center;

}

.beam{

position:absolute;

left:50%;
top:50%;

width:2px;
height:170px;

margin-left:-1px;
margin-top:-170px;

transform-origin:center bottom;


background:

linear-gradient(

180deg,

rgba(99,232,255,.95),

rgba(99,232,255,.15),

transparent

);

box-shadow:

0 0 12px rgba(99,232,255,.7);

opacity:.8;


}





.beam-1{

transform:


rotate(0deg);

}

.beam-2{

transform:


rotate(60deg);

}

.beam-3{

transform:


rotate(120deg);

}

.beam-4{

transform:


rotate(180deg);

}

.beam-5{

transform:



rotate(240deg);

}

.beam-6{

transform:



rotate(300deg);

}







/*==================================================
DATA PACKETS
==================================================*/

.packet{

position:absolute;

left:50%;

top:0;

width:8px;

height:8px;

border-radius:50%;

background:#ffffff;

box-shadow:

0 0 12px rgba(99,232,255,.9);

transform:translateX(-50%);

z-index:30;

}






/*==================================================
REACTOR SYSTEM
==================================================*/

.reactor-system{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

transform-style:preserve-3d;

will-change:transform;

overflow:visible;
}







/*==================================================
FOUNDER
==================================================*/

.founder{

position:relative;

overflow:hidden;

}

.founder-grid{

display:grid;

grid-template-columns:.95fr 1.05fr;

gap:100px;

align-items:center;

margin-top:80px;

}





/*==================================================
FOUNDER DISPLAY
==================================================*/

.founder-display{

position:relative;

display:flex;

align-items:center;

justify-content:center;

min-height:720px;

perspective:1600px;

}


/*==================================================
AI TERMINAL
==================================================*/

.founder-terminal{

position:relative;

width:440px;

height:560px;

display:flex;

align-items:center;

justify-content:center;

border-radius:36px;

background:var(--glass);

border:1px solid var(--border-primary);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

overflow:visible;

box-shadow:

var(--shadow-lg),

var(--glow-primary);

transform-style:preserve-3d;

will-change:transform;

}





/*==================================================
PORTRAIT
==================================================*/

.portrait-frame{

position:absolute;

inset:22px;

overflow:hidden;

border-radius:28px;

z-index:10;

}

.portrait-frame img{

width:100%;

height:100%;

object-fit:cover;

display:block;

user-select:none;

pointer-events:none;

}


/*==================================================
TERMINAL GLOW
==================================================*/

.terminal-glow{

position:absolute;

width:620px;

height:620px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,217,255,.22),

transparent 72%

);

z-index:-1;

pointer-events:none;

filter:blur(20px);

}


/*==================================================
HOLOGRAPHIC RINGS
==================================================*/

/*==================================================
TERMINAL RING MARKERS
==================================================*/


.terminal-ring{

position:absolute;

left:50%;
top:50%;

width:520px;
height:520px;

transform:translate(-50%,-50%);

overflow:visible;

pointer-events:none;

}


.ring-outline{

fill:none;

stroke:rgba(99,232,255,.18);

stroke-width:2;

}


.ring-segment{

fill:none;

stroke:#63e8ff;

stroke-width:7;

stroke-linecap:round;

filter:drop-shadow(0 0 8px rgba(99,232,255,.9));

}









/*==================================================
HUD CORNERS
==================================================*/

.corner{

position:absolute;

width:34px;

height:34px;

border-color:var(--primary);

border-style:solid;

z-index:30;

}

.tl{

top:18px;

left:18px;

border-width:3px 0 0 3px;

}

.tr{

top:18px;

right:18px;

border-width:3px 3px 0 0;

}

.bl{

bottom:18px;

left:18px;

border-width:0 0 3px 3px;

}

.br{

bottom:18px;

right:18px;

border-width:0 3px 3px 0;

}


/*==================================================
TERMINAL GRID
==================================================*/

.terminal-grid{

position:absolute;

inset:0;

border-radius:36px;

background-image:

linear-gradient(

rgba(99,232,255,.05) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(99,232,255,.05) 1px,

transparent 1px

);

background-size:40px 40px;

pointer-events:none;

z-index:2;

opacity:.45;

}



/*==================================================
SCANNER
==================================================*/

.terminal-scan{

position:absolute;

left:0;

top:0;

width:100%;

height:3px;

background:

linear-gradient(

90deg,

transparent,

var(--primary),

transparent

);

box-shadow:

0 0 20px var(--primary);

z-index:25;

}

.terminal-ring-1{

width:520px;

height:520px;

}


.terminal-ring-2{

width:610px;
height:610px;

}

.terminal-ring-3{

width:700px;
height:700px;

}


.ring-outline-2{

fill:none;

stroke:rgba(99,232,255,.10);

stroke-width:2;

stroke-dasharray:8 10;

}


.ring-segment-2{

fill:none;

stroke:#63e8ff;

stroke-width:6;

stroke-linecap:round;

filter:drop-shadow(0 0 10px rgba(99,232,255,.8));

}


.ring-outline-3{

fill:none;

stroke:rgba(99,232,255,.07);

stroke-width:2;

}


.ring-segment-3{

fill:none;

stroke:#63e8ff;

stroke-width:5;

stroke-linecap:round;

opacity:.8;

filter:drop-shadow(0 0 8px rgba(99,232,255,.9));

}


/*==================================================
HUD SQUARES
==================================================*/

.hud-square{

position:absolute;

width:10px;

height:10px;

border:2px solid var(--primary);

background:rgba(99,232,255,.15);

box-shadow:

0 0 10px rgba(99,232,255,.4);

z-index:28;

}

.square-1{

top:12%;

left:-18px;

}

.square-2{

top:30%;

right:-18px;

}

.square-3{

bottom:24%;

left:-18px;

}

.square-4{

bottom:10%;

right:-18px;

}





/*==================================================
VISION & MISSION
==================================================*/

.vision-mission{

    position:relative;

    overflow:hidden;

}


/*==================================================
VISION & MISSION GRID
==================================================*/

.vision-mission-grid{

    display:grid;

    grid-template-columns:

    1fr

    260px

    1fr;

    gap:50px;

    align-items:center;

    margin-top:80px;

}


/*==================================================
DIRECTION CARD
==================================================*/

.direction-card{

    position:relative;

    min-height:430px;

    padding:50px 42px;

    border-radius:30px;

    background:var(--glass);

    border:1px solid var(--border-primary);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    overflow:hidden;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}


.direction-card:hover{

    transform:translateY(-10px);

    border-color:rgba(99,232,255,.35);

    box-shadow:

    var(--shadow-lg),

    var(--glow-primary);

}


/*==================================================
CARD GLOW
==================================================*/

.direction-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(99,232,255,.12),

        transparent 70%

    );

    top:-100px;

    right:-80px;

    pointer-events:none;

}


/*==================================================
DIRECTION ICON
==================================================*/

.direction-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    margin-bottom:30px;

    background:rgba(99,232,255,.08);

    border:1px solid rgba(99,232,255,.2);

    color:var(--primary-light);

    font-size:24px;

    box-shadow:

    0 0 25px rgba(99,232,255,.08);

}


.direction-label{

    display:block;

    margin-bottom:12px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

}


.direction-content h3{

    margin-bottom:22px;

    font-size:1.8rem;

    line-height:1.25;

}


.direction-content p{

    margin-bottom:18px;

    color:var(--text-light);

    line-height:1.8;

}


.direction-content p:last-child{

    margin-bottom:0;

}


/*==================================================
CARD NUMBER
==================================================*/

.direction-number{

    position:absolute;

    right:28px;

    bottom:20px;

    font-size:5rem;

    line-height:1;

    font-weight:800;

    color:rgba(99,232,255,.035);

    pointer-events:none;

}


/*==================================================
CENTRAL TECHNOLOGY CORE
==================================================*/

.direction-core{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

}


/*==================================================
CORE ORBITS
==================================================*/

.core-orbit{

    position:absolute;

    left:50%;

    top:50%;

    border-radius:50%;

    transform:

    translate(-50%,-50%);

    border:1px solid rgba(99,232,255,.2);

    pointer-events:none;

}


.orbit-one{

    width:130px;

    height:130px;

}


.orbit-two{

    width:175px;

    height:175px;

    border-style:dashed;

}


.orbit-three{

    width:220px;

    height:220px;

    border-color:rgba(99,232,255,.08);

}


/*==================================================
CORE LIGHT
==================================================*/

.core-light{

    position:relative;

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        #ffffff 0%,

        var(--primary-light) 28%,

        var(--primary) 60%,

        transparent 100%

    );

    color:#07111d;

    font-size:26px;

    box-shadow:

    0 0 30px rgba(99,232,255,.8),

    0 0 70px rgba(99,232,255,.4);

    z-index:3;

}


.core-label{

    position:absolute;

    bottom:-35px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:.65rem;

    font-weight:700;

    letter-spacing:3px;

    color:var(--primary);

}


/*==================================================
MISSION PRINCIPLES
==================================================*/

.mission-principles{

    margin-top:130px;

}


/*==================================================
PRINCIPLES HEADING
==================================================*/

.principles-heading{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}


.principles-heading h3{

    margin:18px 0;

    font-size:2.5rem;

}


.principles-heading h3 span{

    color:var(--primary);

}


.principles-heading p{

    color:var(--text-light);

    line-height:1.8;

}


/*==================================================
PRINCIPLES GRID
==================================================*/

.principles-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:24px;

}


/*==================================================
PRINCIPLE CARD
==================================================*/

.principle-card{

    position:relative;

    padding:35px 28px;

    min-height:260px;

    border-radius:24px;

    background:var(--glass);

    border:1px solid var(--border-primary);

    backdrop-filter:blur(18px);

    transition:var(--transition);

    overflow:hidden;

}


.principle-card:hover{

    transform:translateY(-8px);

    border-color:rgba(99,232,255,.3);

    box-shadow:

    var(--shadow-lg),

    var(--glow-primary);

}


.principle-number{

    position:absolute;

    top:18px;

    right:22px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;

    color:rgba(99,232,255,.4);

}


.principle-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:14px;

    background:rgba(99,232,255,.07);

    color:var(--primary-light);

    border:1px solid rgba(99,232,255,.15);

}


.principle-card h4{

    margin-bottom:14px;

    font-size:1.15rem;

}


.principle-card p{

    color:var(--text-light);

    font-size:.92rem;

    line-height:1.7;

}






/*==================================================
CORE VALUES
==================================================*/

.core-values{

    position:relative;

    overflow:hidden;

}


/*==================================================
VALUES GRID
==================================================*/

.values-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:28px;

    margin-top:80px;

}


/*==================================================
VALUE CARD
==================================================*/

.value-card{

    position:relative;

    padding:40px 34px;

    min-height:330px;

    border-radius:28px;

    background:var(--glass);

    border:1px solid var(--border-primary);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    overflow:hidden;

    transition:var(--transition);

}


.value-card:hover{

    transform:translateY(-10px);

    border-color:rgba(99,232,255,.35);

    box-shadow:

    var(--shadow-lg),

    var(--glow-primary);

}


/*==================================================
CARD BACKGROUND GLOW
==================================================*/

.value-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-90px;

    right:-70px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(99,232,255,.12),

        transparent 70%

    );

    pointer-events:none;

}


/*==================================================
VALUE NUMBER
==================================================*/

.value-number{

    position:absolute;

    top:22px;

    right:25px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:2px;

    color:rgba(99,232,255,.45);

}


/*==================================================
VALUE ICON
==================================================*/

.value-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:17px;

    background:rgba(99,232,255,.07);

    border:1px solid rgba(99,232,255,.18);

    color:var(--primary-light);

    font-size:21px;

    box-shadow:

    0 0 25px rgba(99,232,255,.07);

}


.value-tag{

    display:block;

    margin-bottom:10px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

}


.value-card h3{

    margin-bottom:16px;

    font-size:1.35rem;

    line-height:1.3;

}


.value-card p{

    color:var(--text-light);

    line-height:1.75;

    font-size:.94rem;

}


/*==================================================
VALUES STATEMENT
==================================================*/

.values-statement{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:35px;

    align-items:center;

    margin-top:70px;

    padding:45px;

    border-radius:30px;

    background:

    linear-gradient(

        135deg,

        rgba(99,232,255,.08),

        rgba(99,232,255,.025)

    );

    border:1px solid rgba(99,232,255,.18);

    box-shadow:var(--shadow-lg);

}


/*==================================================
STATEMENT ICON
==================================================*/

.values-statement-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:rgba(99,232,255,.1);

    border:1px solid rgba(99,232,255,.25);

    color:var(--primary-light);

    font-size:28px;

    box-shadow:

    0 0 35px rgba(99,232,255,.15);

}


/*==================================================
STATEMENT CONTENT
==================================================*/

.values-statement-content span{

    display:block;

    margin-bottom:8px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

}


.values-statement-content h3{

    margin-bottom:12px;

    font-size:1.7rem;

}


.values-statement-content p{

    max-width:850px;

    color:var(--text-light);

    line-height:1.8;

}





/*==================================================
COMPANY JOURNEY
==================================================*/

.company-journey{

    position:relative;

    overflow:hidden;

}


/*==================================================
JOURNEY INTRO
==================================================*/

.journey-intro{

    max-width:850px;

    margin:70px auto 100px;

    text-align:center;

    position:relative;

}


.journey-intro-line{

    width:70px;

    height:2px;

    margin:0 auto 30px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--primary),

        transparent

    );

    box-shadow:

    0 0 15px rgba(99,232,255,.5);

}


.journey-intro p{

    color:var(--text-light);

    line-height:1.9;

    font-size:1.02rem;

}


/*==================================================
TIMELINE
==================================================*/

.timeline{

    position:relative;

    max-width:1100px;

    margin:0 auto;

    padding:30px 0;

}


/*==================================================
TIMELINE CENTRAL LINE
==================================================*/

.timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:1px;

    transform:translateX(-50%);

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(99,232,255,.5),

        rgba(99,232,255,.15),

        transparent

    );

    box-shadow:

    0 0 15px rgba(99,232,255,.15);

}


/*==================================================
TIMELINE ITEM
==================================================*/

.timeline-item{

    position:relative;

    display:flex;

    width:50%;

    padding:30px 60px 70px 0;

}


/*==================================================
REVERSE ITEM
==================================================*/

.timeline-item-reverse{

    margin-left:50%;

    padding:

    30px 0 70px 60px;

}


/*==================================================
TIMELINE MARKER
==================================================*/

.timeline-marker{

    position:absolute;

    top:30px;

    right:-23px;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#07111d;

    border:1px solid rgba(99,232,255,.45);

    color:var(--primary-light);

    font-size:.72rem;

    font-weight:700;

    box-shadow:

    0 0 20px rgba(99,232,255,.15);

    z-index:5;

}


.timeline-item-reverse .timeline-marker{

    left:-23px;

    right:auto;

}


/*==================================================
ACTIVE MARKER
==================================================*/

.timeline-marker-active{

    background:

    radial-gradient(

        circle,

        var(--primary-light),

        var(--primary)

    );

    color:#07111d;

    border-color:var(--primary-light);

    box-shadow:

    0 0 20px rgba(99,232,255,.8),

    0 0 50px rgba(99,232,255,.3);

}


/*==================================================
TIMELINE CONTENT
==================================================*/

.timeline-content{

    position:relative;

    width:100%;

    padding:35px;

    border-radius:26px;

    background:var(--glass);

    border:1px solid var(--border-primary);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.timeline-content:hover{

    transform:translateY(-8px);

    border-color:rgba(99,232,255,.3);

    box-shadow:

    var(--shadow-lg),

    var(--glow-primary);

}


/*==================================================
TIMELINE CARD GLOW
==================================================*/

.timeline-content::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    top:-80px;

    right:-60px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(99,232,255,.1),

        transparent 70%

    );

    pointer-events:none;

}


/*==================================================
TIMELINE LABEL
==================================================*/

.timeline-label{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:.7rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*==================================================
TIMELINE TITLE
==================================================*/

.timeline-content h3{

    margin-bottom:16px;

    font-size:1.45rem;

}


/*==================================================
TIMELINE DESCRIPTION
==================================================*/

.timeline-content p{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:22px;

}


/*==================================================
TIMELINE TAGS
==================================================*/

.timeline-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.timeline-tags span{

    padding:7px 12px;

    border-radius:50px;

    background:rgba(99,232,255,.06);

    border:1px solid rgba(99,232,255,.12);

    color:var(--primary-light);

    font-size:.68rem;

    font-weight:600;

}


/*==================================================
JOURNEY CLOSING
==================================================*/

.journey-closing{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:30px;

    align-items:center;

    max-width:900px;

    margin:90px auto 0;

    padding:40px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        rgba(99,232,255,.08),

        rgba(99,232,255,.02)

    );

    border:1px solid rgba(99,232,255,.18);

    box-shadow:var(--shadow-lg);

}


/*==================================================
CLOSING CORE
==================================================*/

.journey-closing-core{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:rgba(99,232,255,.08);

    border:1px solid rgba(99,232,255,.25);

    color:var(--primary-light);

    font-size:25px;

    box-shadow:

    0 0 30px rgba(99,232,255,.12);

}


/*==================================================
CLOSING CONTENT
==================================================*/

.journey-closing-content span{

    display:block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.7rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


.journey-closing-content h3{

    margin-bottom:12px;

    font-size:1.6rem;

}


.journey-closing-content p{

    color:var(--text-light);

    line-height:1.8;

}





/*==================================================
CORE VALUES
==================================================*/

.core-values{

position:relative;

overflow:hidden;

}


/*==================================================
VALUES GRID
==================================================*/

.values-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:70px;

}


/*==================================================
VALUE CARD
==================================================*/

.value-card{

position:relative;

padding:40px 32px;

min-height:300px;

border-radius:28px;

background:var(--glass);

border:1px solid var(--border-primary);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

box-shadow:var(--shadow-sm);

overflow:hidden;

transition:

transform .4s ease,

border-color .4s ease,

box-shadow .4s ease;

}


/*==================================================
CARD HOVER
==================================================*/

.value-card:hover{

transform:translateY(-10px);

border-color:rgba(99,232,255,.4);

box-shadow:

var(--shadow-lg),

var(--glow-primary);

}


/*==================================================
VALUE ICON
==================================================*/

.value-icon{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

border-radius:16px;

background:rgba(99,232,255,.08);

border:1px solid rgba(99,232,255,.2);

color:var(--primary);

font-size:22px;

box-shadow:

0 0 20px rgba(99,232,255,.08);

}


/*==================================================
VALUE NUMBER
==================================================*/

.value-number{

position:absolute;

top:28px;

right:30px;

font-size:3.5rem;

font-weight:800;

line-height:1;

color:rgba(99,232,255,.06);

pointer-events:none;

}


/*==================================================
VALUE TITLE
==================================================*/

.value-card h3{

margin-bottom:15px;

font-size:1.35rem;

color:var(--text);

}


/*==================================================
VALUE DESCRIPTION
==================================================*/

.value-card p{

font-size:.95rem;

line-height:1.8;

color:var(--text-light);

}


/*==================================================
VALUE CARD GLOW
==================================================*/

.value-card::after{

content:"";

position:absolute;

width:180px;

height:180px;

right:-100px;

bottom:-100px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(99,232,255,.12),

transparent 70%

);

pointer-events:none;

transition:transform .5s ease;

}


.value-card:hover::after{

transform:scale(1.5);

}



/*==================================================
WHY CHOOSE MEGATECH
===================================================*/

.why-megatech{

    position:relative;

    overflow:hidden;

}


/*==================================================
MAIN GRID
===================================================*/

.why-megatech-grid{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:100px;

    align-items:center;

}


/*==================================================
VISUAL
===================================================*/

.why-visual{

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*==================================================
VISUAL GLOW
===================================================*/

.why-visual-glow{

    position:absolute;

    width:480px;

    height:480px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(99,232,255,.18),

        rgba(99,232,255,.06) 45%,

        transparent 72%

    );

    filter:blur(25px);

    pointer-events:none;

}


/*==================================================
CORE
===================================================*/

.why-core{

    position:relative;

    width:340px;

    height:340px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}


/*==================================================
CORE RINGS
===================================================*/

.why-core-ring{

    position:absolute;

    left:50%;

    top:50%;

    border-radius:50%;

    transform:translate(-50%,-50%);

    pointer-events:none;

}


/* INNER RING */

.ring-a{

    width:220px;

    height:220px;

    border:1px solid rgba(99,232,255,.55);

    box-shadow:

        0 0 20px rgba(99,232,255,.15);

}


/* MIDDLE RING */

.ring-b{

    width:290px;

    height:290px;

    border:1px dashed rgba(99,232,255,.28);

}


/* OUTER RING */

.ring-c{

    width:340px;

    height:340px;

    border:1px solid rgba(99,232,255,.12);

}


/*==================================================
CORE CENTER
===================================================*/

.why-core-center{

    position:relative;

    width:150px;

    height:150px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(99,232,255,.28),

        rgba(7,17,29,.9) 68%

    );

    border:1px solid rgba(99,232,255,.55);

    box-shadow:

        0 0 30px rgba(99,232,255,.35),

        0 0 80px rgba(99,232,255,.12);

    z-index:5;

}


.why-core-center i{

    font-size:2.5rem;

    color:var(--primary-light);

}


.why-core-center span{

    font-size:.75rem;

    font-weight:700;

    letter-spacing:3px;

    color:var(--text-light);

}


/*==================================================
STATUS LABELS
===================================================*/

.why-status{

    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    border:1px solid var(--border-primary);

    border-radius:30px;

    background:rgba(7,17,29,.65);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:var(--text-light);

    font-size:.8rem;

    letter-spacing:.5px;

    box-shadow:var(--shadow-sm);

}


.why-status span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

        0 0 10px var(--primary);

}


/* STATUS POSITIONS */

.status-one{

    top:16%;

    left:4%;

}


.status-two{

    top:48%;

    right:0;

}


.status-three{

    bottom:17%;

    left:10%;

}


/*==================================================
CONTENT
===================================================*/

.why-content{

    position:relative;

}


.why-content .section-title{

    margin:20px 0 25px;

}


.why-intro{

    max-width:680px;

    margin-bottom:40px;

    color:var(--text-light);

    line-height:1.85;

}


/*==================================================
FEATURE
===================================================*/

.why-feature{

    display:flex;

    gap:20px;

    padding:22px 0;

    border-bottom:1px solid rgba(99,232,255,.08);

    transition:var(--transition);

}


.why-feature:first-of-type{

    border-top:1px solid rgba(99,232,255,.08);

}


.why-feature:hover{

    transform:translateX(8px);

}


/*==================================================
FEATURE ICON
===================================================*/

.why-feature-icon{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(99,232,255,.08);

    border:1px solid rgba(99,232,255,.2);

    color:var(--primary-light);

    transition:var(--transition);

}


.why-feature:hover .why-feature-icon{

    background:rgba(99,232,255,.16);

    box-shadow:

        0 0 20px rgba(99,232,255,.18);

}


.why-feature-icon i{

    font-size:1rem;

}


/*==================================================
FEATURE CONTENT
===================================================*/

.why-feature h3{

    margin-bottom:7px;

    font-size:1.05rem;

}


.why-feature p{

    margin:0;

    color:var(--text-light);

    line-height:1.7;

    font-size:.92rem;

}





/*==================================================
OUR EXPERTISE
===================================================*/

.expertise{

    position:relative;

    overflow:hidden;

}


/*==================================================
EXPERTISE GRID
===================================================*/

.expertise-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2px;

    margin-top:70px;

    border:1px solid rgba(99,232,255,.1);

    background:rgba(99,232,255,.08);

}


/*==================================================
EXPERTISE ITEM
===================================================*/

.expertise-item{

    position:relative;

    display:grid;

    grid-template-columns:55px 70px 1fr 30px;

    align-items:center;

    gap:20px;

    min-height:190px;

    padding:35px;

    background:rgba(7,17,29,.72);

    border:1px solid rgba(99,232,255,.06);

    overflow:hidden;

    transition:var(--transition);

}


/*==================================================
HOVER GLOW
===================================================*/

.expertise-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:center;

    transition:var(--transition);

}


.expertise-item:hover{

    background:rgba(99,232,255,.055);

    transform:translateY(-4px);

}


.expertise-item:hover::before{

    transform:scaleY(1);

}


/*==================================================
NUMBER
===================================================*/

.expertise-number{

    align-self:start;

    padding-top:4px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:2px;

    color:rgba(99,232,255,.4);

}


/*==================================================
ICON
===================================================*/

.expertise-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(99,232,255,.07);

    border:1px solid rgba(99,232,255,.18);

    color:var(--primary-light);

    transition:var(--transition);

}


.expertise-item:hover .expertise-icon{

    background:rgba(99,232,255,.14);

    border-color:rgba(99,232,255,.4);

    box-shadow:

        0 0 25px rgba(99,232,255,.18);

    transform:scale(1.06);

}


.expertise-icon i{

    font-size:1.25rem;

}


/*==================================================
CONTENT
===================================================*/

.expertise-content{

    position:relative;

    z-index:2;

}


.expertise-content h3{

    margin-bottom:10px;

    font-size:1.15rem;

}


.expertise-content p{

    margin:0;

    color:var(--text-light);

    font-size:.9rem;

    line-height:1.75;

}


/*==================================================
ARROW
===================================================*/

.expertise-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(99,232,255,.45);

    transition:var(--transition);

}


.expertise-item:hover .expertise-arrow{

    color:var(--primary-light);

    transform:translateX(5px);

}


.expertise-arrow i{

    font-size:.9rem;

}


/*==================================================
EXPERTISE GLOW
===================================================*/

.expertise-item:hover::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-100px;

    border-radius:50%;

    background:rgba(99,232,255,.08);

    filter:blur(35px);

    pointer-events:none;

}