/* =========================================================
   Techmate AI - Hero
   ========================================================= */

/* ========================================
   Hero Section
======================================== */

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100vh;

    padding-top: 8rem;
    overflow: hidden;
}

/* ========================================
   Hero Grid
======================================== */

.hero-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 5rem;
}

/*==================================================
Hero Background
==================================================*/

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

    pointer-events:none;
}

/*--------------------------------*/

.gradient-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

    animation:orbFloat 14s ease-in-out infinite;
}

/*--------------------------------*/

.orb-blue{

    width:650px;

    height:650px;

    background:#2563EB;

    top:-200px;

    right:-120px;
}

/*--------------------------------*/

.orb-purple{

    width:550px;

    height:550px;

    background:#7C3AED;

    bottom:-220px;

    left:-150px;

    animation-delay:3s;
}

/*--------------------------------*/

.orb-cyan{

    width:350px;

    height:350px;

    background:#06B6D4;

    top:35%;

    left:55%;

    opacity:.25;

    animation-delay:6s;
}

/*--------------------------------*/

.grid-overlay{

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:70px 70px;

    mask-image:radial-gradient(circle, black 40%, transparent 100%);

    opacity:.35;
}

/*--------------------------------*/

.hero>*{

    position:relative;

    z-index:2;
}

/* ========================================
   Left Content
======================================== */

.hero-content {

    max-width: 650px;

}

/* ========================================
   Badge
======================================== */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    padding: .65rem 1.25rem;

    margin-bottom: 2rem;

    border-radius: 999px;

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

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

    color: var(--color-secondary);

    font-size: .875rem;

    font-weight: 600;

    letter-spacing: .05em;

    text-transform: uppercase;

    backdrop-filter: blur(18px);
}

.badge-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--color-secondary);

    box-shadow:
        0 0 15px var(--color-secondary);
}

/* ========================================
   Title
======================================== */

.hero-title {

    font-size: clamp(3.8rem, 8vw, 6rem);

    line-height: 1.05;

    margin-bottom: 2rem;

    letter-spacing: -.05em;
}

/* ========================================
   Description
======================================== */

.hero-description {

    font-size: 1.15rem;

    color: var(--color-text-muted);

    margin-bottom: 2.5rem;

    max-width: 620px;
}

/* ========================================
   Buttons
======================================== */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 4rem;

    flex-wrap: wrap;
}

/* ========================================
   Stats
======================================== */

.hero-stats {

    display: flex;

    gap: 3rem;

    flex-wrap: wrap;
}

.stat {

    display: flex;

    flex-direction: column;

    gap: .35rem;
}

.stat h3 {

    font-size: 2rem;

    color: var(--color-white);

    margin: 0;
}

.stat span {

    color: var(--color-text-muted);

    font-size: .95rem;
}

/* ========================================
   Right Side
======================================== */

/* ========================================
   Hero Visual
======================================== */

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:700px;
}

/* ========================================
   Dashboard
======================================== */

.ai-dashboard{

    width:100%;

    max-width:480px;

    padding:2rem;

    position:relative;

    z-index:5;
    box-shadow:

        0 30px 80px rgba(0,0,0,.45),

        0 0 120px rgba(37,99,235,.12),

        inset 0 1px rgba(255,255,255,.05);
}
.ai-dashboard::before{

    content:"";

    position:absolute;

    inset:-60px;

    background:radial-gradient(

        circle,

        rgba(37,99,235,.18),

        transparent 70%

    );

    z-index:-1;

    filter:blur(40px);
}

/* Header */

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:2rem;
}

.dashboard-controls{

    display:flex;

    gap:.5rem;
}

.dashboard-dot{

    width:10px;

    height:10px;

    border-radius:50%;
}

.blue{

    background:#2563EB;
}

.cyan{

    background:#06B6D4;
}

.purple{

    background:#7C3AED;
}

.dashboard-status{

    display:flex;

    align-items:center;

    gap:.5rem;

    font-size:.9rem;

    color:var(--color-text-muted);
}

.status-indicator{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 10px #22c55e;
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(34,197,94,.6);
    }

    70%{
        box-shadow:0 0 0 12px rgba(34,197,94,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(34,197,94,0);
    }

}

/* Blocks */

.dashboard-body{

    display:flex;

    flex-direction:column;

    gap:2rem;
}

.dashboard-label{

    margin-bottom:.75rem;

    font-weight:600;
}

.progress-bar{

    height:8px;

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

    border-radius:999px;

    overflow:hidden;
}

.progress-fill{

    width:96%;

    height:100%;

    background:var(--gradient-primary);

    border-radius:999px;
}

.progress-value{

    margin-top:.5rem;

    text-align:right;

    font-size:.9rem;

    color:var(--color-secondary);
}

/* Services */

.dashboard-item{

    display:flex;

    justify-content:space-between;

    padding:.85rem 0;

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

.dashboard-item strong{

    color:var(--color-secondary);
}

/* Metrics */

.dashboard-metrics{

    display:grid;

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

    gap:1rem;
}

.dashboard-metrics div{

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

    padding:1rem;

    border-radius:16px;

    text-align:center;
}

.dashboard-metrics h3{

    margin-bottom:.35rem;
}



/* ========================================
   Scroll Indicator
======================================== */

.scroll-indicator {

    position: absolute;

    left: 50%;

    bottom: 2rem;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .75rem;

    color: var(--color-text-muted);

    font-size: .8rem;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.scroll-line {

    width: 2px;

    height: 70px;

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

    overflow: hidden;
}

.scroll-line span {

    display: block;

    width: 100%;

    height: 24px;

    background: var(--gradient-primary);

    animation: scrollLine 2s infinite;
}

@keyframes scrollLine {

    0% {

        transform: translateY(-30px);

    }

    100% {

        transform: translateY(70px);

    }

}

/*==================================================
Floating Widgets
==================================================*/

.floating-widget{

    position:absolute;

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem 1.2rem;

    min-width:220px;

    z-index:10;

    transition:.4s ease;
}

.floating-widget:hover{

    transform:translateY(-8px) scale(1.03);
}

/*--------------------------------*/

.widget-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:16px;

    background:rgba(37,99,235,.12);

    font-size:1.35rem;
}

.widget-content h4{

    margin-bottom:.25rem;

    font-size:1.05rem;
}

.widget-content p{

    margin:0;

    font-size:.85rem;

    color:var(--color-text-muted);
}

/*--------------------------------*/

.widget-performance{

    top:-25px;

    left:-70px;
}

.widget-cloud{

    top:80px;

    right:-85px;
}

.widget-automation{

    bottom:-20px;

    right:40px;
}

/* ========================================
   Responsive
======================================== */

@media (max-width:992px){

    .hero{

        padding-top:7rem;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:4rem;

        text-align:center;
    }

    .hero-content{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-visual{

        height:550px;

    }

}

@media (max-width:768px){

    .hero-title{

        font-size:clamp(3rem,12vw,4.5rem);

    }

    .hero-description{

        font-size:1rem;

    }

    .scroll-indicator{

        display:none;

    }

}

@keyframes orbFloat{

    0%{

        transform:
        translate(0,0)
        scale(1);
    }

    25%{

        transform:
        translate(40px,-25px)
        scale(1.05);
    }

    50%{

        transform:
        translate(-30px,20px)
        scale(.96);
    }

    75%{

        transform:
        translate(25px,35px)
        scale(1.03);
    }

    100%{

        transform:
        translate(0,0)
        scale(1);
    }

}

@keyframes dashboardFloat {
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

.ai-dashboard{
    animation:dashboardFloat 8s ease-in-out infinite;
}

.btn-primary{

    position:relative;

    overflow:hidden;
}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;
}

.btn-primary:hover::before{

    left:150%;
}

.dashboard-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.18),
    rgba(124,58,237,.12),
    transparent 70%);

    filter:blur(60px);

    z-index:0;

    transition:transform .2s linear;
}
.ai-dashboard,
.floating-widget,
.dashboard-glow{

    transition:

    transform .4s ease;
}