/* 06. COMPONENTS */
@layer components {

    /* Skip link for keyboard / screen-reader users */
    .skip-link {
        position: absolute;
        inset-block-start: -64px;
        inset-inline-start: 16px;
        z-index: calc(var(--z-modal) + 10);
        padding-block: 12px;
        padding-inline: 20px;
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--accent-primary);
        color: var(--on-brand);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 700;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        transition: inset-block-start var(--duration-medium) var(--ease-out)
    }

    .skip-link:focus, .skip-link:focus-visible {
        inset-block-start: 16px;
        outline: 2px solid var(--color-white);
        outline-offset: 2px
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        min-height: 48px;
        padding-block: 14px;
        padding-inline: 28px;
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1;
        letter-spacing: .02em;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition)
    }

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn:active {
        transform: translateY(0)
    }

    .btn:disabled, .btn[aria-disabled="true"] {
        opacity: .45;
        pointer-events: none
    }

    .btn-primary {
        background: var(--accent-primary);
        color: var(--on-brand)
    }

    .btn-primary:hover {
        background: var(--color-white);
        box-shadow: var(--shadow-glow)
    }

    .btn-outline {
        border: 1px solid var(--border-light);
        color: var(--text-primary);
        background: var(--glass);
        backdrop-filter: blur(10px)
    }

    .btn-outline:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: rgba(200, 255, 0, .055)
    }

    .btn .arrow {
        font-size: 17px;
        transform: translateX(4px) rotate(45deg);
        transition: transform var(--duration-medium) var(--ease-out)
    }

    .btn:hover .arrow {
        transform: translateX(4px) rotate(0)
    }

    /* Hamburger & Mobile Menu*/
    .hamburger {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
        z-index: calc(var(--z-nav) + 1)
    }

    .hamburger span {
        width: 28px;
        height: 2px;
        background: var(--text-primary);
        transform-origin: center;
        transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out)
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg)
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0)
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg)
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-nav) - 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: 80px;
        padding-inline: clamp(24px, 6vw, 40px);
        background: var(--bg-primary);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-slow) var(--ease-out), visibility var(--duration-slow) var(--ease-out)
    }

    .mobile-menu.active {
        opacity: 1;
        visibility: visible
    }

    .mobile-menu a {
        display: block;
        padding-block: var(--space-3);
        border-block-end: 1px solid var(--border-subtle);
        font-family: var(--font-display);
        font-size: var(--text-5xl);
        font-weight: 600;
        color: var(--text-secondary);
        opacity: 0;
        transform: translateY(30px);
        min-height: 44px;
        transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out), color var(--transition), padding-inline-start var(--transition)
    }

    .mobile-menu.active a {
        opacity: 1;
        transform: translateY(0)
    }

    .mobile-menu a:hover {
        color: var(--accent-primary);
        padding-inline-start: var(--space-5)
    }

    /* Generic cards & Modal */
    .metric-item, .service-card, .testimonial-card, .pricing-card, .press-card, .comparison-col, .industry-card {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        transition: transform var(--duration-medium) var(--ease-out), background-color var(--duration-medium) var(--ease-out), border-color var(--duration-medium) var(--ease-out), box-shadow var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out)
    }

    .modal {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        display: grid;
        place-items: center;
        padding: var(--space-5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-medium) var(--ease-out), visibility var(--duration-medium) var(--ease-out)
    }

    .modal.open {
        opacity: 1;
        visibility: visible
    }

    .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .76);
        backdrop-filter: blur(16px)
    }

    .modal-panel {
        position: relative;
        z-index: 1;
        width: min(980px, 100%);
        overflow: hidden;
        background: var(--bg-card);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        transform: translateY(20px) scale(.98);
        transition: transform var(--duration-medium) var(--ease-out)
    }

    .modal.open .modal-panel {
        transform: translateY(0) scale(1)
    }

    .modal-media {
        aspect-ratio: 16 / 9;
        background: var(--bg-secondary)
    }

    .modal-media img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .modal-content {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-7)
    }

    .modal-meta {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--accent-primary)
    }

    .modal-title {
        font-size: var(--text-4xl);
        line-height: var(--leading-tight)
    }

    .modal-copy {
        max-width: 68ch;
        color: var(--text-secondary);
        line-height: var(--leading-relaxed)
    }

    .modal-close {
        position: absolute;
        inset-block-start: var(--space-4);
        inset-inline-end: var(--space-4);
        z-index: 2;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, .56);
        color: var(--color-white);
        transition: background-color var(--transition), color var(--transition), transform var(--transition)
    }

    .modal-close:hover {
        background: var(--accent-primary);
        color: var(--on-brand);
        transform: rotate(90deg)
    }

    /* Back to top / progress */
    .scroll-progress {
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 0;
        z-index: var(--z-progress);
        width: 0;
        height: 3px;
        background: var(--accent-gradient);
        box-shadow: 0 0 10px rgba(200, 255, 0, .5);
        transition: width var(--duration-instant) linear
    }

    .back-to-top {
        position: fixed;
        inset-inline-end: var(--space-8);
        inset-block-end: var(--space-8);
        z-index: var(--z-sticky);
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--accent-primary);
        color: var(--on-brand);
        font-size: 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        box-shadow: 0 8px 24px rgba(200, 255, 0, .2);
        transition: opacity var(--duration-medium) var(--ease-out), visibility var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out), background-color var(--transition)
    }

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .back-to-top:hover {
        background: var(--color-white);
        transform: translateY(-4px)
    }

    .noise-overlay {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: var(--z-overlay);
        opacity: .022;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }
}