@charset "UTF-8";
/*
 * Nebula Blue (Primary)
 *   P-500 #2563EB logo fills, large surfaces
 *   P-600 #1E40AF body text / icons on light bg (AA 4.9∶1)
 *   P-050 #EDF4FF very-light UI backgrounds
 *
 * Pulse Teal (Complement / CTA)
 *   C-500 #006A7A main buttons, links, success state
 *   C-600 #005761 hover / active
 *   C-050 #E3FAFF tint
 *
 * Quantum Violet (Triadic Accent)
 *   T-500 #BE4BFF highlights, warnings, illustration warmth
 *   T-600 #9A28D9 hover / dark-mode text
 *   T-050 #FCEBFF tint
 *
 * Neutrals
 *   N-000 #FFFFFF base light
 *   N-050 #F6F7F9 containers, inputs
 *   N-700 #404040 secondary text
 *   N-900 #121212 dark-mode cards / body
 *   N-950 #0B0B0B dark-mode bg
 *
 * Functional
 *   Danger #FF5757
 *   Info   #3F8CFF
 */

/*  ------------------------------------------------------------
    1. CORE BRAND HUES — “NEBULA” SYSTEM
    ------------------------------------------------------------  */

:root
{
    --p-050:#EDF4FF;--p-050-rgb:237,244,255;
    --p-300:#8DB4FF;--p-300-rgb:141,180,255;
    --p-500:#2563EB;--p-500-rgb:37,99,235;
    --p-600:#1E40AF;--p-600-rgb:30,64,175;

    --c-050:#E3FAFF;--c-050-rgb:227,250,255;
    --c-300:#4ECFDC;--c-300-rgb:78,207,220;
    --c-500:#006A7A;--c-500-rgb:0,106,122;
    --c-600:#005761;--c-600-rgb:0,87,97;

    --t-050:#FCEBFF;--t-050-rgb:252,235,255;
    --t-500:#BE4BFF;--t-500-rgb:190,75,255;
    --t-600:#9A28D9;--t-600-rgb:154,40,217;

    --n-000:#FFFFFF;--n-000-rgb:255,255,255;
    --n-050:#F6F7F9;--n-050-rgb:246,247,249;
    --n-100:#E2E4E7;--n-100-rgb:226,228,231;
    --n-700:#404040;--n-700-rgb:64,64,64;
    --n-900:#121212;--n-900-rgb:18,18,18;
    --n-950:#0B0B0B;--n-950-rgb:11,11,11;

    --danger-500:#FF5757;
    --info-500:#3F8CFF;
}
/*  ------------------------------------------------------------
    1. BASE
    ------------------------------------------------------------  */
html
{
    box-sizing:border-box;
}

*,*::before,*::after
{
    box-sizing:inherit;
}

body
{
    margin:0;
    font-family:'Inter',sans-serif;
    font-weight:300;
    line-height:1.6;
    color:var(--n-900);
    background:var(--n-050);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3
{
    font-weight:600;
    line-height:1.2;
    margin:0 0 .6em 0;
    color:var(--p-600);
}

h1
{
    font-size:clamp(2.2rem,5vw + 1rem,4rem);
}

h2
{
    font-size:clamp(1.6rem,3vw + .5rem,2.6rem);
}

h3
{
    font-size:1.4rem;
}

p
{
    font-size:1.3rem;
    margin:0 0 1.2em 0;
    max-width:60ch;
}

a
{
    color:var(--c-500);
    text-decoration:none;
    transition:color .2s ease;
}

a:hover,a:focus
{
    color:var(--c-600);
}

.inner
{
    width:min(92%,1200px);
    margin-inline:auto;
    padding:4rem 0;
}

.inner.narrow
{
    max-width:700px;
}

/*  ------------------------------------------------------------
    2. HEADER
    ------------------------------------------------------------  */
.site-header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(var(--n-000-rgb),.8);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--n-100);
    z-index:100;
}

.site-header .inner
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.2rem min(4%,2rem);   /*  increased padding  */
}

.logo
{
    display:flex;
    align-items:center;
    gap:.6rem;
}
.logo span
{
    font-size:1.4rem;
    font-weight:600;
    color:var(--p-300);
    margin-left:-1rem;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.logo-img
{
    height:3.5rem;              /*  ≈40 px – more visual weight  */
    width:auto;
    display:block;
    filter:drop-shadow(0 1px 2px rgba(var(--n-700-rgb),.35));
    transition:transform .2s ease;
}

.logo-img:hover
{
    transform:scale(1.05);
}

#menu-btn
{
    display:none;
    background:none;
    border:none;
    color:var(--p-600);
    font-size:1.8rem;            /*  slightly bigger for new bar  */
}

nav ul
{
    list-style:none;
    display:flex;
    gap:2rem;
    margin:0;
    padding:0;
}

nav a
{
    color:var(--c-050);
    font-size:.95rem;
    text-transform:uppercase;
    letter-spacing:.02em;
}

nav.open
{
    display:block;
}

/*  ------------------------------------------------------------
    3. HERO
    ------------------------------------------------------------  */
.hero
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;          /* stay full height */
    text-align:center;
}

.hero .inner
{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* tagline text ---------------------------------------------------------------- */

.tagline
{
    font-size:clamp(1.25rem,1.3vw + 1rem,2rem);
    line-height:1.45;
    max-width:42ch;
    margin:1.2rem 0 2.2rem 0;
    color:rgba(255,255,255,.95);   /* remove the black box */
    background:none !important;    /* overrides any previous rule */
}

/* accent words ---------------------------------------------------------------- */

.highlight
{
    background:linear-gradient(90deg,#41d1ff 0%,#bd34fe 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-weight:600;
}

.tagline .accent
{
    color:var(--c-300);
    font-weight:600;
}

.cta
{
    display:inline-block;
    margin-top:2rem;
    padding:.9rem 1.8rem;
    background:var(--n-000);
    color:var(--p-600);
    border-radius:4px;
    font-weight:600;
    letter-spacing:.05em;
    transition:background .25s ease,color .25s ease;
}

.cta:hover,.cta:focus
{
    background:var(--c-300);
    color:var(--n-000);
}

/*  ------------------------------------------------------------
    4. STACK
    ------------------------------------------------------------  */
.stack
{
    background:var(--n-000);
}

.skills
{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.6rem;
    margin:2rem 0 0 0;
    padding:0;
}

.skills li
{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem 1.2rem;
    background:var(--n-050);
    border:1px solid var(--n-100);
    border-radius:6px;
    font-weight:400;
}

.skills i
{
    color:var(--p-500);
    font-size:1.2rem;
}

/*  ------------------------------------------------------------
    5. PROJECTS
    ------------------------------------------------------------  */
.projects
{
    background:var(--p-050);
}

.card-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.6rem;
    margin-top:2rem;
}

.card
{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--n-000);
    border:1px solid var(--n-100);
    border-radius:6px;
    padding:1.6rem;
    min-height:160px;
    transition:transform .2s ease,box-shadow .2s ease;
}

.card:hover,.card:focus
{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(var(--n-700-rgb),.12);
}

.card.ghost
{
    cursor:default;
    opacity:.5;
}

.card h3
{
    margin-bottom:.4rem;
}

.card p
{
    margin:0;
    font-size:.9rem;
    color:var(--n-700);
}

/* ─── HELPERS ─────────────────────────────────────────────────── */
.wrapper
{
    width:min(95%,1100px);
    margin-inline:auto;
}

/* ─── EXPERTISE ───────────────────────────────────────────────── */
.expertise
{
    background:#0d0d0d;
    padding-block:4.5rem;
}

.expertise h2
{
    margin-bottom:2.5rem;
    color:#9bbcff;
}

.expertise__list
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.4rem;
    list-style:none;
    padding:0;
    margin:0;
}

.expertise__list li
{
    display:flex;
    font-size:1.2rem;
    align-items:center;
    gap:.85rem;
    padding:1.1rem 1.3rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:.65rem;
    background:rgba(255,255,255,.02);
    transition:background .25s,border-color .25s;
}

.expertise__list li:hover
{
    background:rgba(66,135,255,.08);
    border-color:rgba(66,135,255,.3);
}

.expertise__list i
{
    flex-shrink:0;
    font-size:1.45rem;
    color:#3d7bff;
}

/* ─── VENTURES ───────────────────────────────────────────────── */
.ventures
{
    background:var(--c-050);
    padding-block:5rem 6rem;
}

.ventures h2
{
    color:#9bbcff;
    margin-bottom:2.7rem;
}

.ventures__grid
{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:1.75rem;
    list-style:none;
    padding:0;
    margin:0;
}

.ventures__grid li
{
    padding:1.3rem 1.35rem 1.6rem;
    background:#111;
    border:1px solid #303030;
    border-radius:.65rem;
    transition:transform .25s,box-shadow .25s;
}

.ventures__grid li:hover
{
    transform:translateY(-4px);
    box-shadow:0 6px 14px -4px rgba(0,0,0,.45);
}

.ventures__grid h3
{
    margin:0 0 .7rem 0;
    font-size:1.15rem;
    color:#3d7bff;
    font-weight:600;
}

.ventures__grid p
{
    margin:0;
    font-size:.9rem;
    line-height:1.45;
    color:#aaa;
}

/* “coming soon” card styling */
.ventures__coming-soon
{
    background:#72767c;
    border-color:transparent;
    cursor:default;
}

.ventures__coming-soon h3,
.ventures__coming-soon p
{
    color:#f2f2f2;
}

/*  ------------------------------------------------------------
    6. CONTACT
    ------------------------------------------------------------  */
.contact
{
    background:var(--n-000);
}

.contact a
{
    font-weight:600;
}

/*  ------------------------------------------------------------
    7. FOOTER
    ------------------------------------------------------------  */
.site-footer
{
    background:var(--n-000);
    border-top:1px solid var(--n-100);
    text-align:center;
    padding:2rem 0;
}

.site-footer small
{
    color:var(--n-700);
}

/*  ------------------------------------------------------------
    8. RESPONSIVE
    ------------------------------------------------------------  */
@media (max-width:900px)
{
    nav
    {
        position:fixed;
        top:var(--header-height,65px);   /* fallback height */
        right:0;
        width:260px;
        background:var(--n-950);         /* dark-mode drawer */
        border-left:1px solid var(--n-900);
        transform:translateX(100%);
        transition:transform .25s ease;
        height:calc(100vh - var(--header-height,65px));
        padding:2rem 1.6rem;
    }

    nav.open
    {
        transform:translateX(0);
    }

    nav ul
    {
        flex-direction:column;
        gap:1.2rem;
    }

    nav a
    {
        color:var(--n-050);              /* make links readable on dark bg */
        font-size:1rem;
    }

    nav a:hover,
    nav a:focus
    {
        color:var(--c-300);
    }

    #menu-btn
    {
        display:block;
        color:var(--n-050);              /* white burger icon */
    }
}


@media all
{
    body
    {
        color:var(--n-050);
        background:var(--n-950);
    }

    .site-header
    {
        background:rgba(var(--n-950-rgb),.7);
        border-color:var(--n-900);
    }

    nav
    {
        /*background:transparent;*/
    }

    .hero
    {
        background:linear-gradient(135deg,var(--p-600) 0%,var(--c-600) 100%);
    }

    h1,h2,h3,.logo-img
    {
        color:var(--p-300);
    }

    p,.skills li,.card,.contact,.site-footer,.stack
    {
        background:var(--n-900);
        color:var(--n-050);
    }

    .card p
    {
        color:var(--n-050);
    }

    .skills li,.card
    {
        border-color:var(--n-700);
    }

    .site-footer
    {
        border-color:var(--n-900);
    }

    .cta
    {
        background:var(--n-050);
        color:var(--p-600);
    }

    .cta:hover,.cta:focus
    {
        background:var(--c-600);
        color:var(--n-000);
    }

    .logo-img
    {
        filter:drop-shadow(0 1px 2px rgba(var(--n-000-rgb),.35));
    }
}




/*  ------------------------------------------------------------
    10. INTERACTIVE EFFECTS
    ------------------------------------------------------------  */

.hero
{
    position:relative;
}

.hero .inner
{
    position:relative;
    z-index:2;
}



.highlight.heat
{
    animation:heatPulse 1.4s ease-out forwards;
}

@keyframes heatPulse
{
    0%
    {
        text-shadow:0 0 0 rgba(190,75,255,0);
    }
    45%
    {
        text-shadow:0 0 12px rgba(190,75,255,.9),0 0 24px rgba(0,106,122,.9);
    }
    100%
    {
        text-shadow:0 0 0 rgba(190,75,255,0);
    }
}

.expertise__list li
{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease,transform .6s ease;
    position:relative;
}

.expertise__list li.reveal
{
    opacity:1;
    transform:none;
}

/*  ── configurable expertise line animation ────────────────  */
:root
{
    --line-duration:.8s;
}
.expertise__list.fast   { --line-duration:.2s; }
.expertise__list.slow   { --line-duration:1.2s; }

.expertise__list li::before
{
    content:'';
    position:absolute;
    left:1.3rem;
    top:50%;
    height:2px;
    width:calc((100% - 2.6rem) * var(--line-progress,0));
    background:#3d7bff;
    transform:translateY(-50%);
    transform-origin:left;
    transition:width var(--line-duration) linear;
}


.expertise__list li.reveal::before
{
    /* keep the same expression so scroll-sync continues */
    width:calc((100% - 2.6rem) * var(--line-progress,0));
}

.ventures__grid li
{
    position:relative;
    overflow:hidden;
}

.ventures__grid li::after
{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(130deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
}

.ventures__grid li.sweep::after
{
    animation:sweep .9s ease-out forwards;
}

@keyframes sweep
{
    0%
    {
        transform:translateX(-100%) skewX(-20deg);
    }
    100%
    {
        transform:translateX(150%) skewX(-20deg);
    }
}