/* =========================================================
   HERO
   Portfolio: Lekan Olowookere
========================================================= */

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

.hero{

    position:relative;

    min-height:110vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:calc(var(--navbar-height) + 4rem);

}

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

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

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

.grid-overlay{

    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;

    mask-image:linear-gradient(to bottom,
    rgba(255,255,255,.8),
    transparent);

}

/* ==========================================
   ORBS
========================================== */

.gradient-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

}

.orb-1{

    width:420px;

    height:420px;

    background:#3B82F6;

    top:-120px;

    left:-100px;

    animation:float 8s ease-in-out infinite;

}

.orb-2{

    width:320px;

    height:320px;

    background:#06B6D4;

    right:-120px;

    top:180px;

    animation:float 12s ease-in-out infinite;

}

.orb-3{

    width:260px;

    height:260px;

    background:#8B5CF6;

    bottom:-80px;

    left:40%;

    animation:float 10s ease-in-out infinite;

}

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

.hero-content{

    display:grid;

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

    gap:5rem;

    align-items:start; /* Align to start for precise control */
    padding-top: 2rem;

}

.hero-right {
    margin-top: 8rem; /* Offset to align with the 'Business Insight' line */
}

/* ==========================================
   LEFT
========================================== */

.hero-left{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

/* ==========================================
   BADGE
========================================== */

.hero-badge{

    width:max-content;

    display:flex;

    align-items:center;

    gap:.8rem;

    padding:.75rem 1.25rem;

    border-radius:999px;

    background:var(--bg-glass);

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

    backdrop-filter:blur(16px);

    color:var(--text-primary);

    font-size:.9rem;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--color-success);

    box-shadow:0 0 12px var(--color-success);

}

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

.hero-title{

    font-size:clamp(3.5rem,7vw,6rem);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

}

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

.hero-description{

    font-size:1.2rem;

    color:var(--text-secondary);

    max-width:650px;

}

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

.hero-buttons{

    display:flex;

    gap:1.25rem;

    flex-wrap:wrap;

}

/* ==========================================
   STACK
========================================== */

.hero-stack{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:.5rem;

}

/* ==========================================
   RIGHT
========================================== */

.hero-right{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:flex-start;

    gap:2rem;

}

.hero-portrait{

    flex:0 0 min(340px, 45%);

    min-height:520px;

    padding:1.5rem;

    border-radius:32px;

    display:grid;

    place-items:center;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02));

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

}

.portrait-placeholder{

    width:100%;

    height:100%;

    border-radius:28px;

    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));

    border:1px dashed rgba(255,255,255,.25);

    display:grid;

    place-items:center;

    padding:2rem;

    text-align:center;

    color:var(--text-secondary);

    font-size:1rem;

}

.portrait-placeholder span{

    display:block;

    max-width:220px;

}

/* ==========================================
   DASHBOARD
========================================== */

.dashboard-preview{

    flex:1 1 min(520px, 55%);

    min-width:420px;

    min-height:520px;

    padding:2rem;

    border-radius:32px;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02));

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

}

/* ==========================================
   KPI / STATS
========================================== */

.hero-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:2rem;
    margin-top:5rem;
    padding:3rem;
    background:var(--bg-glass);
    border:1px solid var(--border-color);
    border-radius:32px;
    backdrop-filter:blur(16px);
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    font-family: 'Space Grotesk', sans-serif;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

}
/* ==========================================
   DASHBOARD HEADER
========================================== */

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:2rem;

}

.dashboard-header h3{

    font-size:1.3rem;

}

.dashboard-header p{

    font-size:.85rem;

    color:var(--text-muted);

}

.dashboard-status{

    display:flex;

    align-items:center;

    gap:.5rem;

}

/* ==========================================
   REVENUE CARD
========================================== */

.revenue-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem;

    border-radius:20px;

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

    margin-bottom:1.5rem;

}

.revenue-card small{

    color:var(--text-muted);

}

.revenue-card h2{

    font-size:2rem;

    margin-top:.5rem;

}

.positive{

    color:var(--color-success);

    font-weight:700;

}

/* ==========================================
   CHART
========================================== */

.chart-card{

    padding:1.5rem;

    border-radius:20px;

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

    margin-bottom:1.5rem;

}

.chart-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:1rem;

    color:var(--text-secondary);

    font-size:.9rem;

}

.line-chart{

    width:100%;

    height:180px;

}

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

.mini-grid{

    display:grid;

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

    gap:1rem;

    margin-bottom:1.5rem;

}

.mini-card{

    padding:1.2rem;

    border-radius:18px;

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

    transition:var(--transition-normal);

}

.mini-card:hover{

    transform:translateY(-6px);

    background:rgba(59,130,246,.08);

}

.mini-card span{

    display:block;

    color:var(--text-muted);

    font-size:.8rem;

    margin-bottom:.6rem;

}

.mini-card strong{

    font-size:1.4rem;

}

/* ==========================================
   TECH
========================================== */

.dashboard-tech{

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

}
/* ==========================================
   CHART ANIMATION
========================================== */

@keyframes chartDrawing{
    from{
        stroke-dashoffset:1000;
    }
    to{
        stroke-dashoffset:0;
    }
}

@keyframes pointFadeIn{
    from{
        opacity:0;
        transform:scale(0.5);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

#chartLine{

    stroke-dasharray:1000;

    stroke-dashoffset:0;

    animation:chartDrawing 2s ease-out forwards;
}

.chart-point{

    fill:#3B82F6;

    stroke:#ffffff;

    stroke-width:2;

    opacity:1;

    transform-origin:center;

    transition:transform .3s ease;

    animation:pointFadeIn 1.5s ease-out forwards;
}

.chart-point:nth-child(1){ animation-delay:.2s; }
.chart-point:nth-child(2){ animation-delay:.4s; }
.chart-point:nth-child(3){ animation-delay:.6s; }
.chart-point:nth-child(4){ animation-delay:.8s; }
.chart-point:nth-child(5){ animation-delay:1s; }
.chart-point:nth-child(6){ animation-delay:1.2s; }
.chart-point:nth-child(7){ animation-delay:1.4s; }
.chart-point:nth-child(8){ animation-delay:1.6s; }
.chart-point:nth-child(9){ animation-delay:1.8s; }

.chart-point:hover{

    transform:scale(1.4);

    cursor:pointer;
}
/* ==========================================
   DASHBOARD TABS
========================================== */

.dashboard-tabs{

    display:flex;

    gap:.75rem;

    margin-bottom:1.75rem;

}

.dashboard-tab{

    padding:.65rem 1.2rem;

    border-radius:999px;

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

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

    color:var(--text-secondary);

    transition:var(--transition-normal);

}

.dashboard-tab:hover{

    background:rgba(59,130,246,.12);

    color:var(--text-primary);

}

.dashboard-tab.active{

    background:var(--gradient-primary);

    color:#fff;

    border-color:transparent;

}

.dashboard-view{

    display:none;

}

.dashboard-view.active{

    display:block;
}
/* ==========================================
   TRUST STRIP
========================================== */

#loader{

    position:fixed;

    inset:0;

    z-index:var(--z-loader);

    display:grid;

    place-items:center;

    background:var(--bg-body);

    color:var(--text-primary);

}

.loader-logo{

    width:84px;

    height:84px;

    display:grid;

    place-items:center;

    margin-bottom:1.5rem;

    border-radius:24px;

    background:var(--gradient-primary);

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

    font-size:1.6rem;

    font-weight:800;

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

}

.loader-text{

    font-size:0.95rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--text-muted);

}

.hero-trust{

    margin-top:5rem;

    padding-top:3rem;

    border-top:1px solid var(--border-color);

}


.trust-label{

    text-align:center;

    color:var(--text-muted);

    font-size:.9rem;

    margin-bottom:2rem;

}


.trust-items{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

}


.trust-item{

    padding:.85rem 1.5rem;

    border-radius:999px;

    background:var(--bg-glass);

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

    color:var(--text-secondary);

    font-weight:600;

    backdrop-filter:blur(12px);

    transition:var(--transition-normal);

}


.trust-item:hover{

    color:white;

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

    transform:translateY(-5px);

}