/* ============================================================
   INVI STUDIO — Hero Section
   ============================================================ */

.ww-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ww-base-space-16) var(--ww-base-space-24);
    overflow: hidden;
}

.ww-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ww-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--ww-base-shadow-overlay-50), var(--ww-base-page-overlay-85), var(--ww-invi-page-bg));
}

.ww-hero__orb-1 {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: var(--ww-base-glow-cyan-orb);
    border-radius: 50%;
    filter: blur(120px);
    animation: ww-pulse 4s infinite;
}

.ww-hero__orb-2 {
    position: absolute;
    bottom: 25%;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background: var(--ww-base-glow-purple-orb);
    border-radius: 50%;
    filter: blur(120px);
    animation: ww-pulse 4s infinite;
    animation-delay: 1s;
}

.ww-hero__content {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    text-align: center;
}

.ww-hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: var(--ww-base-weight-black);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--ww-base-space-24);
}

.ww-hero__subtitle {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    color: var(--ww-invi-page-text-muted);
    line-height: 1.6;
    max-width: 64rem;
    margin: 0 auto var(--ww-base-space-48);
}

.ww-hero__buttons {
    display: flex;
    gap: var(--ww-base-space-16);
    justify-content: center;
    flex-wrap: wrap;
}

.ww-btn-primary {
    padding: var(--ww-base-space-16) var(--ww-base-space-32);
    border-radius: var(--ww-base-radius-8);
    font-size: var(--ww-base-font-18);
    font-weight: var(--ww-base-weight-semibold);
    background: var(--ww-invi-btn-primary-bg);
    border: 1px solid var(--ww-invi-btn-primary-border);
    color: var(--ww-base-white);
    cursor: pointer;
    transition: all var(--ww-base-transition-fast);
    box-shadow: var(--ww-invi-btn-primary-shadow);
}

.ww-btn-primary:hover {
    transform: scale(1.05);
}

.ww-btn-secondary {
    padding: var(--ww-base-space-16) var(--ww-base-space-32);
    border-radius: var(--ww-base-radius-8);
    font-size: var(--ww-base-font-18);
    font-weight: var(--ww-base-weight-semibold);
    background: transparent;
    border: 1px solid var(--ww-invi-btn-secondary-border);
    color: var(--ww-invi-btn-secondary-text);
    cursor: pointer;
    transition: all var(--ww-base-transition-fast);
}

.ww-btn-secondary:hover {
    background: var(--ww-base-glass-05);
}