:root {
    --sidebar-width: 3rem;
    --sidebar-expanded: 10rem;
    --transition: 0.3s ease;
    --progress-width: 0.5rem;
    /* thickness of progress strip */
    --progress-height: 6rem;
    /* visible height of progress track */
    --transition: 200ms ease;
    --radius: 8px;
    --left-offset: 4rem;
    /* distance from left edge, adjust as needed */
    --btn-width: 3.2rem;
    /* overall width of the control */
    --btn-gap: 0.6rem;
}


.hero-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding-top: 7rem;
}


.hero-content-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;

}

.name-div {
    display: flex;
    flex-direction: column !important;
    gap: 0;
}

.hero-title {
    font-size: var(--font-size-herod);
    font-family: var(--font-display);
    line-height: var(--line-height-tight);
    letter-spacing: var(--space-sm);
    font-weight: 800;
    color: var(--clr-primary-blue);
}

.hero-subtitle {
    text-align: center;
    font-family: var(--font-mono);
    color: var(--clr-primary-blue);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
}

.hero-subtitle span {
    text-align: center;
    font-family: var(--font-mono);
    color: var(--clr-primary-orange);
    font-size: var(--font-size-h1);
}

.hero-content div p {}



.mylogo {
    width: 200px;
    transition: all var(--transition-normal);
}

.mylogo:hover {
    transform: scale(1.1);
}


@media (max-width:800px) {
    .hero-content-div {
        width: 100%;
        gap: 4rem;
        align-items: center;

    }

    .name-div {

        gap: 2rem;
    }

    .mylogo {
        width: 300px;
        transition: all var(--transition-normal);
    }
}

@media (max-width:430px) {

    .hero-content {
        padding-top: 3rem;
    }

    .hero-content-div {

        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 2rem;

    }

    .hero-subtitle span {
        display: block;

    }

    .name-div {
        gap: 2rem;
    }

    .mylogo {
        width: 300px;
        transition: all var(--transition-normal);
    }

}

@media (max-width:500px) {

    .hero-content {
        padding-top: 3rem;
    }
}


/* vertical sidebar */



.v-sidebar {
    position: fixed;
    top: 50%;
    right: var(--left-offset);
    transform: translateY(-50%);
    width: var(--sidebar-width);
    background: var(--bg);
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    z-index: 999;
    padding: 0.2rem;
    border-radius: calc(var(--btn-width) / 2);
    border: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition);
}

.v-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.v-sidebar li {
    width: 100%;
}

.v-sidebar a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--clr-neutral-blue);
    text-decoration: none;
    padding: 0.6rem 0.5rem;
    transition: color var(--transition);
}

.v-sidebar a .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.v-sidebar a .label {
    opacity: 0;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.v-sidebar:hover,
.v-sidebar.expanded {
    width: var(--sidebar-expanded);
}

.v-sidebar:hover a .label,
.v-sidebar.expanded a .label {
    opacity: 1;
    color: var(--clr-primary-orange);
}

.v-sidebar a:hover .icon {
    color: var(--clr-primary-orange);
}

/* Scroll button (previous styles) */
.v-scroll-control {
    position: fixed;
    left: 4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.v-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 3rem;
    background: var(--clr-neutral-blue) !important;
    border: none;
    border-radius: 50%;
    padding: 0.6rem;
    cursor: pointer;

}

.arrow {
    color: var(--clr-primary-blue);
}

.v-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--font-size-xs) !important;
    color: var(--clr-primary-blue) !important;
    font-family: var(--font-mono);
}

.progress-track {
    display: block;
    width: 0.5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.25rem;
    margin-top: 0.2rem;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--clr-primary-orange), var(--clr-neutral-blue), var(--clr-primary-blue)) !important;
}






/* fixed vertical control container on left */
.v-scroll-control {
    position: fixed;
    left: var(--left-offset);
    top: 50%;
    transform: translateY(-50%);
    /* center vertically */
    z-index: 9999;
    pointer-events: auto;
    transition: opacity var(--transition), transform var(--transition);
}

/* button base */
.v-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--btn-gap);
    width: var(--btn-width);
    background: var(--bg);
    color: var(--text);
    padding: 0.6rem;
    border-radius: calc(var(--btn-width) / 2);
    border: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* hidden state for unobtrusive UI */
.v-scroll-control.is-hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(-8px);
    pointer-events: none;
}

.v-sidebar.is-hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
    pointer-events: none;
}

/* small scale on hover for presence */
.v-btn:hover {
    transform: translateY(-4px)
}

/* arrow */
.arrow {
    display: block;
    margin-top: 0.1rem;
    color: var(--clr-primary-blue);
    transition: color var(--transition);
}

/* vertical text — using writing-mode for vertical layout */
.v-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    line-height: 1;
    transform: rotate(180deg);
    /* flip so text reads top-to-bottom */
    color: var(--text);
    user-select: none;
    transition: color var(--transition);
}

/* progress track (thin integrated strip) */
.progress-track {
    display: block;
    width: var(--progress-width);
    height: var(--progress-height);
    border-radius: calc(var(--progress-width) / 2);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.1rem;
    position: relative;
    align-self: center;
}

/* the fill — height is animated by JS from 0% -> 100% (bottom-to-top) */
.progress-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent-light), var(--accent));
    transition: height 160ms linear;
}

/* hover accent */
.v-btn:hover .arrow,
.v-btn:hover .v-text {
    color: var(--accent);
}

/* Focus styles for accessibility */
.v-btn:focus {
    outline: 2px solid rgba(255, 102, 0, 0.22);
    outline-offset: 4px;
}

/* small screens: nudge left offset inwards */
@media (max-width:700px) {
    :root {
        --left-offset: 1.2rem;
        --btn-width: 3rem;
        --progress-height: 5rem;
    }

    .v-scroll-control {
        left: var(--left-offset);
    }


}