/* ===========================================================
   SMI TERMINAL
   Global Styles
   Version : 1.0
=========================================================== */

/* ===========================
   GOOGLE FONTS
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');


/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font-body);

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:var(--lh-normal);

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


/* ===========================
   IMAGES
=========================== */

img{

    display:block;

    max-width:100%;

}


/* ===========================
   LINKS
=========================== */

a{

    color:inherit;

    text-decoration:none;

}


/* ===========================
   LISTS
=========================== */

ul{

    list-style:none;

}


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

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}


/* ===========================
   INPUTS
=========================== */

input,
textarea{

    font-family:inherit;

    outline:none;

}


/* ===========================
   HEADINGS
=========================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    font-weight:700;

    line-height:1.15;

}


/* ===========================
   PARAGRAPH
=========================== */

p{

    color:var(--text-secondary);

}


/* ===========================
   CONTAINER
=========================== */

.container{

    width:min(92%,var(--container-width));

    margin:auto;

}


/* ===========================
   SECTION
=========================== */

.section{

    padding:var(--section-padding) 0;

}


/* ===========================
   TEXT SELECTION
=========================== */

::selection{

    background:var(--primary);

    color:#000;

}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08101d;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* ===========================================================
   HEADER
=========================================================== */

.header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(24px);

    background:rgba(6,10,18,.65);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.navbar{
    height:var(--navbar-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/*=====================================================
                    LOGO
======================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    flex-shrink:0;

}

.logo-icon{

    width:44px;

    height:44px;

    min-width:44px;

    max-width:44px;

    object-fit:contain;

    display:block;

}

.logo-text{

    font-family:var(--font-heading);

    font-size:30px;

    font-weight:700;

    line-height:1;

}

.logo-white{

    color:var(--text);

}

.logo-blue{

    color:var(--primary);

}

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

.nav-links a{
    color:var(--text-secondary);
    transition:var(--transition-fast);
}

.nav-links a:hover{
    color:var(--primary);
}

.nav-actions{
    display:flex;
    gap:15px;
}

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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    position:relative;

    overflow:hidden;

    transition:.35s ease;

    cursor:pointer;

}


/*======================================
PRIMARY
======================================*/

.btn-primary{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    color:var(--text);

    box-shadow:
        0 12px 35px rgba(0,180,255,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 60px rgba(0,180,255,.50);

}


/*======================================
SECONDARY
======================================*/

.btn-secondary{

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

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

    backdrop-filter:blur(10px);

    color:#fff;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.10);

    transform:translateY(-4px);

}


/*======================================
OUTLINE
======================================*/

.btn-outline{

    background:rgba(255,255,255,.04);

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

    backdrop-filter:blur(10px);

    color:#fff;

}

.btn-outline:hover{

    background:rgba(255,255,255,.10);

    transform:translateY(-4px);

}


/*======================================
SHINE EFFECT
======================================*/

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.btn:hover::before{

    left:160%;

}

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

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    align-items:center;

    gap:90px;

    padding-top:70px;

}

.hero-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(0,229,255,.08);
    border:1px solid rgba(0,229,255,.25);
    color:var(--primary);
    margin-bottom:28px;
    font-size:14px;
}

.hero h1{
    font-size:72px;
    line-height:1.05;
    max-width:720px;
    margin-bottom:28px;
}

.hero h1 span{
    color:var(--primary);
}

.hero p{
    font-size:20px;
    max-width:640px;
    margin-bottom:45px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:70px;
}

.hero-stats{
    display:flex;
    gap:55px;
}

.hero-stats h2{
    font-size:40px;
    color:var(--primary);
}

.hero-stats span{
    color:var(--text-muted);
}

/* ===========================================================
   VIDEO FRAME
=========================================================== */

.video-frame{

    width:100%;
    height:640px;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        #121c34,
        #09101f
    );

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

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 40px 120px rgba(0,0,0,.45);

}

.video-placeholder{

    width:92%;
    height:92%;

    border-radius:22px;

    background:#0b1324;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:34px;

    letter-spacing:10px;

}

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

.hero-background{

    position:absolute;

    inset:0;

    z-index:-2;

}

.gradient-one{

    position:absolute;

    width:700px;

    height:700px;

    background:#00e5ff22;

    filter:blur(180px);

    left:-220px;

    top:-150px;

}

.gradient-two{

    position:absolute;

    width:600px;

    height:600px;

    background:#6c63ff22;

    filter:blur(180px);

    right:-200px;

    bottom:-180px;

}

.grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

}

/* ===========================================================
   SCROLL
=========================================================== */

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    font-size:34px;

    color:var(--primary);

    animation:floating 2.5s infinite;

}

/* ======================================
   HERO STATS
====================================== */

.hero-stats{

    display:flex;
    gap:20px;
    margin-top:50px;
    flex-wrap:wrap;

}

.glass-card{

    min-width:170px;

    padding:24px;

    border-radius:22px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 40px rgba(0,180,255,.08);

    transition:.35s;

    cursor:pointer;

}

.glass-card:hover{

    transform:translateY(-10px);

    border-color:#00C8FF;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 55px rgba(0,200,255,.28);

}

.glass-card h2{

    font-size:38px;

    color:white;

    margin-bottom:8px;

}

.glass-card p{

    color:#A7B3C5;

    font-size:14px;

    line-height:1.5;

}

/*=====================================================
            HERO TERMINAL SCENE
======================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;

}


.terminal-scene{

    position:relative;

    width:100%;

    max-width:950px;

    height:720px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*=====================================================
            TERMINAL DEVICE
======================================================*/

.terminal-device{

    width:860px;

    height:510px;

    padding:18px;

    border-radius:30px;

    background:linear-gradient(
        160deg,
        #232733 0%,
        #0d1117 100%
    );

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

    box-shadow:
        0 60px 120px rgba(0,0,0,.60),
        0 0 80px rgba(0,200,255,.15);

    transform:
        rotateY(-8deg)
        rotateX(5deg);

    transform-style:preserve-3d;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/* Premium hover */

.terminal-device:hover{

    transform:
        rotateY(-4deg)
        rotateX(2deg)
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 80px 160px rgba(0,0,0,.65),
        0 0 120px rgba(0,200,255,.22);

}


/* Blue edge glow */

.terminal-device::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:32px;

    background:linear-gradient(
        135deg,
        rgba(0,200,255,.20),
        transparent 35%,
        transparent 65%,
        rgba(124,58,237,.20)
    );

    filter:blur(16px);

    z-index:-1;

}


/*=====================================================
            SCREEN
======================================================*/

.terminal-screen{

    width:100%;

    height:100%;

    border-radius:20px;

    overflow:hidden;

    background:#05070d;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.55);

}


/*=====================================================
            VIDEO PLACEHOLDER
======================================================*/

.video-placeholder{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    font-size:38px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

    background:

    radial-gradient(circle at top,#113860,#04080f 75%);

}


.video-placeholder::before{

    content:"▶";

    width:90px;

    height:90px;

    border-radius:50%;

    margin-bottom:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

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

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

    backdrop-filter:blur(10px);

}


/*=====================================================
            FLOATING CARDS
======================================================*/

.floating-card{

    position:absolute;

    padding:22px 28px;

    border-radius:22px;

    backdrop-filter:blur(20px);

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

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

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

    color:white;

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 45px rgba(0,180,255,.10);

    animation:floatCard 4.5s ease-in-out infinite;

    z-index:20;

}


.floating-card span{

    display:block;

    color:#8ba8d6;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:8px;

}


.floating-card h2{

    font-size:34px;

    margin-bottom:6px;

}


.floating-card p{

    color:#4DFF9A;

    font-weight:600;

}


/*=====================================================
            CARD POSITIONS
======================================================*/

.ai-score{

    top:20px;

    left:-40px;

    animation-delay:0s;

}

.live-market{

    right:-25px;

    bottom:15px;

    animation-delay:2.2s;

}


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

.terminal-device::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:32px;

    background:

    linear-gradient(

        135deg,

        rgba(0,180,255,.15),

        transparent,

        rgba(126,87,255,.12)

    );

    z-index:-1;

    filter:blur(12px);

}


/*=====================================================
            FLOAT ANIMATION
======================================================*/

@keyframes floatCard{

0%{

transform:translateY(0);

}

25%{

transform:translateY(-12px);

}

50%{

transform:translateY(-5px);

}

75%{

transform:translateY(-16px);

}

100%{

transform:translateY(0);

}

}

/*=====================================================
        EXPERIENCE ANIMATIONS
======================================================*/

@keyframes dashboardFloat{

0%,100%{

transform:rotateY(-5deg) rotateX(2deg) translateY(0);

}

50%{

transform:rotateY(-5deg) rotateX(2deg) translateY(-12px);

}

}

@keyframes glowPulse{

0%,100%{

opacity:.55;
transform:scale(1);

}

50%{

opacity:1;
transform:scale(1.08);

}

}

@keyframes glassSweep{

0%{

left:-130%;

}

100%{

left:170%;

}

}

/*=====================================================
        PREMIUM HERO BACKGROUND
======================================================*/

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    isolation:isolate;

}


.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-5;

}


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

.grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:80px 80px;

    animation:gridMove 40s linear infinite;

}


/*======================================
    NOISE
======================================*/

.noise{

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:

    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:5px 5px;

}


/*======================================
    BLUE GLOW
======================================*/

.gradient-one{

    position:absolute;

    width:900px;

    height:900px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:#00BFFF;

    filter:blur(180px);

    opacity:.16;

    animation:moveOne 22s ease-in-out infinite;

}


/*======================================
    PURPLE GLOW
======================================*/

.gradient-two{

    position:absolute;

    width:800px;

    height:800px;

    right:-250px;

    bottom:-250px;

    border-radius:50%;

    background:#7C3AED;

    filter:blur(180px);

    opacity:.14;

    animation:moveTwo 25s ease-in-out infinite;

}


/*======================================
    MARKET LIGHT
======================================*/

.market-glow{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(0,180,255,.12),

    transparent 60%);

    animation:pulseGlow 8s infinite;

}

/*=====================================================
            BACKGROUND ANIMATION
======================================================*/

@keyframes moveOne{

0%{

transform:translate(0,0);

}

50%{

transform:translate(160px,80px);

}

100%{

transform:translate(0,0);

}

}

@keyframes moveTwo{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-150px,-120px);

}

100%{

transform:translate(0,0);

}

}

@keyframes pulseGlow{

0%{

opacity:.15;

transform:scale(1);

}

50%{

opacity:.35;

transform:scale(1.08);

}

100%{

opacity:.15;

transform:scale(1);

}

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(80px);

}

}

/*=====================================================
        MARKET PULSE
======================================================*/

.market-pulse{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.market-pulse span{

    position:absolute;

    left:-30%;

    width:160%;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,200,255,.28),

        transparent

    );

    opacity:.18;

    animation:marketMove 12s linear infinite;

}

.market-pulse span:nth-child(1){

    top:18%;

    animation-duration:12s;

}

.market-pulse span:nth-child(2){

    top:36%;

    animation-duration:16s;

}

.market-pulse span:nth-child(3){

    top:54%;

    animation-duration:14s;

}

.market-pulse span:nth-child(4){

    top:72%;

    animation-duration:18s;

}

.market-pulse span:nth-child(5){

    top:88%;

    animation-duration:22s;

}

@keyframes marketMove{

    0%{

        transform:translateX(-20%);

        opacity:0;

    }

    15%{

        opacity:.22;

    }

    85%{

        opacity:.22;

    }

    100%{

        transform:translateX(30%);

        opacity:0;

    }

}

/*=====================================================
                    HERO VIDEO
======================================================*/

.hero-video{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    background:#000;

    border-radius:18px;

}


/*=====================================================
                VIDEO CONTROLS
======================================================*/

.video-controls{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:9999;

}

.video-controls button{

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:rgba(8,15,30,.70);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.35s;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 8px 20px rgba(0,0,0,.35);

}

.video-controls button:hover{

    background:linear-gradient(
        135deg,
        #00d4ff,
        #4f7cff
    );

    transform:scale(1.08);

}

/*=========================================
        LIVE CARD HEADER
=========================================*/

.card-header{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00ff84;

    animation:liveBlink 1.2s infinite;

    box-shadow:0 0 12px #00ff84;

}

@keyframes liveBlink{

0%,100%{

opacity:1;

}

50%{

opacity:.3;

}

}

.ai-score h2{

    font-size:42px;

    margin:0;

    transition:.4s;

}

.ai-score small{

    color:#8ba6c5;

    font-size:14px;

}

.live-market p{

    transition:.4s;

}

/*=====================================================
                LIVE MARKET TICKER
======================================================*/

.market-ticker{

    margin-top:96px;

    width:100%;

    height:48px;

    background:rgba(8,14,26,.95);

    display:flex;

    align-items:center;

    overflow:hidden;

    position:relative;

    z-index:998;

}

/* ADD THIS RIGHT HERE */

.market-ticker::before,
.market-ticker::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.market-ticker::before{
    left:0;
    background:linear-gradient(to right,#080e1a 0%,rgba(8,14,26,0) 100%);
}

.market-ticker::after{
    right:0;
    background:linear-gradient(to left,#080e1a 0%,rgba(8,14,26,0) 100%);
}

/* THEN CONTINUE */

/* ADD THIS HERE */

.ticker-track{

    display:flex;

    width:max-content;

}

.ticker-content{
    display:flex;
    align-items:center;
    gap:60px;
    white-space:nowrap;
    animation:tickerMove 25s linear infinite;
}

.ticker-content span{
    flex-shrink:0;
    font-size:19px;
    font-weight:800;
    letter-spacing:.1px;
    text-transform:uppercase;
}

.separator{
    color:rgba(255,255,255,.25);
    font-size:18px;
    margin:0 12px;
}

/* Engine Colors */

.cyan{
    color:#00D4FF;
}

.purple{
    color:#9B5CFF;
}

.gold{
    color:#FFD54A;
}

.orange{
    color:#FF9E45;
}

.green{
    color:#34D399;
}

.blue{
    color:#4DA6FF;
}

.violet{
    color:#A855F7;
}

.lime{
    color:#84CC16;
}

.pink{
    color:#EC4899;
}

.teal{
    color:#2DD4BF;
}

/* Glowing Dot */

.dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 10px currentColor;
    margin-right:10px;
    vertical-align:middle;
}

@keyframes tickerMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.market-ticker:hover .ticker-content{
    animation-play-state:paused;
}

/*=========================================
AI ECOSYSTEM
=========================================*/

.ecosystem{

    position:relative;

    padding:120px 0 140px;

    overflow:hidden;

}

/* Background Glow */

.ecosystem::before{

    content:"";

    position:absolute;

    left:50%;

    top:45%;

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

    width:900px;

    height:900px;

    background:radial-gradient(circle,
        rgba(0,212,255,.08),
        rgba(0,212,255,.03),
        transparent 72%);

    pointer-events:none;

    z-index:0;

}

/* Keep Content Above Glow */

.ecosystem .container{

    position:relative;

    z-index:2;

}

/*======================================
 EXPERIENCE SECTION
======================================*/

.experience{

    padding:140px 0;

    position:relative;

}

.experience .container{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:80px;

    align-items:center;

}

.experience-left h2{

    font-size:56px;

    line-height:1.1;

    margin:20px 0;

}

.experience-left h2 span{

    color:var(--primary);

}

.experience-left p{

    color:#9fb2c9;

    line-height:1.8;

    font-size:18px;

    margin-bottom:35px;

}

.experience-list{

    margin-bottom:40px;

}

.exp-item{

    padding:15px 0;

    color:#dce8f6;

    font-size:18px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

/*=====================================================
            EXPERIENCE IMAGE
=====================================================*/

.experience-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;

}

/* Blue Glow */

.experience-right::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,212,255,.22),
        rgba(0,212,255,.08),
        transparent 72%);

    filter:blur(70px);

    z-index:0;

    animation:glowPulse 6s ease-in-out infinite;

}

/* Dashboard */

.experience-right img{

    position:relative;

    width:100%;

    max-width:760px;

    border-radius:26px;

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

    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 0 60px rgba(0,212,255,.08);

    transform:
        rotateY(-5deg)
        rotateX(2deg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    z-index:2;

    animation:dashboardFloat 6s ease-in-out infinite;

}

/* Hover */

.experience-right:hover img{

    transform:
        rotateY(-4deg)
        rotateX(2deg)
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 70px 160px rgba(0,0,0,.65),
        0 0 100px rgba(0,212,255,.22);

}



/*-----------------------------------------
Section Header
-----------------------------------------*/

.section-header{

    text-align:center;

    max-width:900px;

    margin:0 auto 90px;

}

.section-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    border:1px solid rgba(0,212,255,.20);

    background:rgba(0,212,255,.06);

    color:#00D4FF;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.section-header h2{

    font-size:58px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:24px;

    color:#ffffff;

}

.section-header h2 span{

    color:#00D4FF;

}

.section-header p{

    font-size:20px;

    color:#9aa5b5;

    line-height:1.8;

}

/*-----------------------------------------
Engine Grid
-----------------------------------------*/

.engine-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

/*-----------------------------------------
Cards
-----------------------------------------*/

.engine-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    min-height:260px;

    border-radius:24px;

    background:rgba(16,21,36,.80);

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

    backdrop-filter:blur(14px);

    transition:all .35s ease;

}

.engine-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:currentColor;

    box-shadow:0 0 18px currentColor;

}

.engine-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,212,255,.30);

    background:rgba(20,28,45,.90);

    box-shadow:0 20px 50px rgba(0,212,255,.10);

}

/*-----------------------------------------
Icon
-----------------------------------------*/

.engine-icon{

    font-size:42px;

    margin-bottom:24px;

    transition:.35s;

}

.engine-card:hover .engine-icon{

    transform:scale(1.1);

}

/*-----------------------------------------
Heading
-----------------------------------------*/

.engine-card h3{

    font-size:28px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:18px;

}

/*-----------------------------------------
Description
-----------------------------------------*/

.engine-card p{

    font-size:17px;

    line-height:1.8;

    color:#98a4b7;

}

/*=========================================
WATCH DEMO MODAL
=========================================*/

.demo-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.88);

    backdrop-filter:blur(12px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:99999;

}

.demo-modal.active{

    opacity:1;

    visibility:visible;

}

.demo-box{

    width:min(1400px,92%);

    background:#000;

    border-radius:28px;

    overflow:hidden;

    position:relative;

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

    box-shadow:0 40px 120px rgba(0,0,0,.6);

    transform:scale(.94);

    transition:.35s;

}

.demo-modal.active .demo-box{

    transform:scale(1);

}

.demo-box video{

    width:100%;

    display:block;

}


/* Both Videos */

.demo-video{

    display:block;

    margin:auto;

    max-width:100%;

    max-height:85vh;

    width:auto;

    height:auto;

    object-fit:contain;

    opacity:0;

    transition:opacity .6s ease;

}

.demo-video.show{

    opacity:1;

}

.close-demo{

    position:absolute;

    top:18px;

    right:18px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#fff;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

    z-index:100;

}

.close-demo:hover{

    background:#00D4FF;

    color:#000;

}

.nav-links{

display:flex;

align-items:center;

gap:38px;

}

.nav-links li{

list-style:none;

}

.nav-links li a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:#ffffff;

    font-size:16px;

    font-weight:650;

    letter-spacing:.2px;

    transition:.28s ease;

}

.nav-links li a img{

width:28px;

height:28px;

object-fit:contain;

opacity:.95;

 transition:all .28s ease;

}

.nav-links li a:hover{

color:#18d7ff;

}

.nav-links li a:hover img{

transform:translateY(-2px) scale(1.08);

opacity:1;

filter:
drop-shadow(0 0 8px rgba(24,215,255,.45));

}

.hero-webinar{

    position:absolute;

    top:-140px;

    left:55%;

    transform:translateX(-50%);

    width:700px;

    height:130px;

    padding:0 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:16px;

    background:rgba(8,18,35,.82);

    border:1px solid rgba(0,234,255,.15);

    backdrop-filter:blur(20px);

    z-index:25;

}

.webinar-widget-glow{

    position:absolute;

    inset:-80px;

    background:
    radial-gradient(circle,
    rgba(0,234,255,.12),
    transparent 70%);

    animation:rotateGlow 10s linear infinite;

}

.webinar-live{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:16px;

    letter-spacing:2px;

    position:relative;

}

.live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00ff66;

    box-shadow:0 0 12px #00ff66;

    animation:blink 1s infinite;

}

/* 👇 YAHAN ADD KARO */

.webinar-left{

    flex:1; 

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:4px;

    min-width:0;

}

.webinar-left h3{

    margin:0;

    font-size:36px;      /* pehle 26px */

    font-weight:700;

    white-space:nowrap;

    color:#fff;

}

.webinar-left p{

    margin:0;

    font-size:13px;

    color:#8fb4d7;

}

.join-webinar-btn{

    position:relative;

    width:170px;

    height:42px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(135deg,#00d8ff,#3d6dff);

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:
        0 0 15px rgba(0,216,255,.35),
        0 0 35px rgba(61,109,255,.25);

}


@keyframes blink{

    50%{

        opacity:.35;

    }

}

@keyframes rotateGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================================================
   QUANTUM NAVIGATION — FORCE VISIBLE
========================================================= */

.nav-links .quantum-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav-links .quantum-nav-link {
    width: 58px !important;
    height: 62px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    padding: 0 !important;
    margin: 0 !important;

    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    color: #ffffff !important;
}


/* CIRCLE */

.nav-links .quantum-nav-orb {
    width: 31px !important;
    height: 31px !important;

    min-width: 31px !important;
    min-height: 31px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;

    border-radius: 50% !important;

    border: 1px solid #39ddff !important;

    background: #071521 !important;

    box-shadow:
        0 0 8px rgba(57, 221, 255, .55),
        inset 0 0 8px rgba(57, 221, 255, .15) !important;

    box-sizing: border-box !important;
}


/* ROTATING OUTER RING */

.nav-links .quantum-nav-orb::before {
    content: "" !important;

    position: absolute !important;

    width: 39px !important;
    height: 39px !important;

    border-radius: 50% !important;

    border: 1px solid transparent !important;
    border-top-color: #39ddff !important;

    animation: quantumNavSpin 3s linear infinite !important;

    box-sizing: border-box !important;
}


/* CORE */

.nav-links .quantum-nav-core {
    width: 7px !important;
    height: 7px !important;

    display: block !important;

    border-radius: 50% !important;

    background: #43e6ff !important;

    box-shadow:
        0 0 7px #43e6ff,
        0 0 15px #43e6ff !important;
}


/* TEXT */

.nav-links .quantum-nav-text {
    display: block !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* HOVER */

.nav-links .quantum-nav-link:hover .quantum-nav-orb {
    transform: scale(1.1);

    border-color: #61ecff !important;

    box-shadow:
        0 0 16px rgba(57, 221, 255, .75),
        inset 0 0 12px rgba(57, 221, 255, .2) !important;
}

.nav-links .quantum-nav-link:hover .quantum-nav-text {
    color: #43e6ff !important;
}


/* ROTATION */

@keyframes quantumNavSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}