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

.os-hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #000;
}

/* =========================
   VIDEO
========================= */

.os-hero-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .58;

    transform: scale(1.03);

    filter:
        brightness(.95)
        contrast(1.08)
        saturate(1.08);

    animation:
        videoBright 8s ease-in-out infinite alternate;
}

/* =========================
   DYNAMIC LIGHT EFFECT
========================= */

.os-light-reveal {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.22) 0%,
            rgba(154,195,28,.18) 20%,
            rgba(154,195,28,.08) 40%,
            rgba(0,0,0,0) 75%
        );

    mix-blend-mode: screen;

    animation:
        revealLight 7s ease-in-out infinite alternate;
}

/* =========================
   OVERLAY
========================= */

.os-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.58) 10%,
            rgba(0,0,0,.22) 50%,
            rgba(0,0,0,.58) 100%
        );

    z-index: 1;

    animation:
        overlayFade 7s ease-in-out infinite alternate;
}

/* =========================
   GLOW EFFECTS
========================= */

.os-light-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    z-index: 2;
}

.glow-1 {

    top: 10%;
    left: -120px;

    width: 380px;
    height: 380px;

    background:
        rgba(154,195,28,.34);

    animation:
        floatGlow 10s ease-in-out infinite;
}

.glow-2 {

    bottom: -80px;
    right: -120px;

    width: 420px;
    height: 420px;

    background:
        rgba(212,121,53,.22);

    animation:
        floatGlow 14s ease-in-out infinite;
}

.glow-3 {

    top: 45%;
    left: 42%;

    width: 300px;
    height: 300px;

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

    animation:
        pulseGlow 5s ease-in-out infinite;
}

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

.os-hero-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

    padding-top: 120px;
}

/* =========================
   MINI TAG
========================= */

.os-hero-mini {

    display: inline-flex;

    align-items: center;

    margin-bottom: 24px;

    padding: 10px 18px;

    border:
        1px solid rgba(154,195,28,.25);

    border-radius: 999px;

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

    color: var(--os-green);

    font-family: var(--os-title-font);

    font-size: 13px;

    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 25px rgba(154,195,28,.12);
}

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

.os-hero-content h1 {

    font-family: var(--os-title-font);

    font-size: clamp(48px, 6vw, 92px);

    line-height: .95;

    margin-bottom: 28px;

    text-transform: uppercase;

    color: #fff;

    text-shadow:
        0 0 12px rgba(255,255,255,.15),
        0 0 35px rgba(154,195,28,.10),
        0 5px 25px rgba(0,0,0,.45);
}

/* GREEN WORD */

.os-hero-content h1 span {

    color: var(--os-green);

    text-shadow:
        0 0 20px rgba(154,195,28,.45),
        0 0 50px rgba(154,195,28,.22);
}

/* =========================
   PARAGRAPH
========================= */

.os-hero-content p {

    max-width: 650px;

    font-size: 20px;

    line-height: 1.9;

    color: #f1f1f1;

    margin-bottom: 40px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.3);
}

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

.os-hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;
}

.os-btn-outline {

    background: transparent !important;

    border:
        1.5px solid var(--os-orange);

    color: var(--os-white);
}

.os-btn-outline:hover {

    background:
        rgba(212,121,53,.12) !important;
}

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

.os-scroll-indicator {

    position: absolute;

    left: 50%;
    bottom: 34px;

    transform: translateX(-50%);

    z-index: 5;
}

.os-scroll-indicator span {

    position: relative;

    display: block;

    width: 28px;
    height: 46px;

    border:
        2px solid rgba(255,255,255,.45);

    border-radius: 999px;
}

.os-scroll-indicator span::before {

    content: '';

    position: absolute;

    top: 8px;
    left: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--os-green);

    transform: translateX(-50%);

    animation: scrollMove 2s infinite;
}

/* =========================
   BRAND SECTION
========================= */

.os-brand-section {

    position: relative;

    padding: 80px 0 100px;

    background:
        linear-gradient(
            to bottom,
            #000 0%,
            #050505 100%
        );

    overflow: hidden;
}

.os-brand-bg-glow {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 600px;
    height: 220px;

    background:
        radial-gradient(
            circle,
            rgba(154,195,28,.18) 0%,
            rgba(154,195,28,.08) 40%,
            rgba(0,0,0,0) 75%
        );

    filter: blur(70px);

    pointer-events: none;
}

.os-brand-wrap {

    position: relative;

    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 40px;
}

.os-brand-line {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(154,195,28,.45),
            transparent
        );
}

.os-brand-logo {

    position: relative;

    justify-self: center;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 520px;

    min-height: 170px;

    padding: 30px 50px;

    border-radius: 30px;

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

    border:
        1px solid rgba(154,195,28,.12);

    backdrop-filter: blur(12px);

    box-shadow:
        0 0 35px rgba(154,195,28,.08);

    overflow: hidden;
}

.os-brand-logo::before {

    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform: skewX(-25deg);

    animation:
        shineMove 6s infinite;
}

.os-brand-logo img {

    position: relative;

    z-index: 2;

    display: block;

    margin: auto;

    max-width: 100%;

    width: 380px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(154,195,28,.18));

    transition: .4s ease;
}

.os-brand-logo:hover img {

    transform: scale(1.03);

    filter:
        drop-shadow(0 0 28px rgba(154,195,28,.35));
}

/* =========================
   CATEGORIES
========================= */

.os-categories {

    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            to bottom,
            #050505 0%,
            #000 100%
        );

    overflow: hidden;
}

.os-categories-bg {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(154,195,28,.08),
            transparent 40%
        );
}

/* =========================
   HEADING
========================= */

.os-section-heading {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;
}

.os-section-mini {

    display: inline-flex;

    padding: 10px 18px;

    margin-bottom: 22px;

    border-radius: 999px;

    border:
        1px solid rgba(154,195,28,.22);

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

    color: var(--os-green);

    font-family: var(--os-title-font);

    font-size: 13px;

    letter-spacing: 1px;
}

/* LIGHT TITLE */

.os-light-title {

    position: relative;

    font-family: var(--os-title-font);

    font-size: clamp(42px, 5vw, 76px);

    line-height: .95;

    margin-bottom: 26px;

    color: #fff;

    text-transform: uppercase;

    text-shadow:
        0 0 10px rgba(255,255,255,.18),
        0 0 22px rgba(154,195,28,.18),
        0 0 55px rgba(154,195,28,.10),
        0 6px 25px rgba(0,0,0,.45);
}

.os-light-title::after {

    content: '';

    position: absolute;

    left: 50%;
    bottom: -18px;

    transform: translateX(-50%);

    width: 180px;
    height: 2px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(154,195,28,.95),
            transparent
        );

    box-shadow:
        0 0 18px rgba(154,195,28,.55);
}

.os-section-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #d5d5d5;
}

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

.os-categories-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 30px;
}

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

.os-category-card {

    position: relative;

    display: flex;

    align-items: flex-end;

    min-height: 620px;

    border-radius: 34px;

    overflow: hidden;

    background: #111;

    border:
        1px solid rgba(154,195,28,.10);

    transition: .5s ease;
}

.os-category-card:hover {

    transform:
        translateY(-12px);

    border:
        1px solid rgba(154,195,28,.28);

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);
}

/* IMAGE */

.os-category-image {

    position: absolute;

    inset: 0;
}

.os-category-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 1s ease;
}

.os-category-card:hover img {

    transform: scale(1.08);
}

/* OVERLAY */

.os-category-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92) 5%,
            rgba(0,0,0,.45) 40%,
            rgba(0,0,0,.10) 100%
        );
}

/* CONTENT */

.os-category-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 38px;
}

.os-category-content span {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--os-green);

    font-family: var(--os-title-font);

    font-size: 14px;

    letter-spacing: 2px;
}

/* CATEGORY TITLES */

.os-category-content h3 {

    font-family: var(--os-title-font);

    font-size: 34px;

    line-height: 1.1;

    margin-bottom: 18px;

    color: #fff;

    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(255,255,255,.12),
        0 0 18px rgba(154,195,28,.12),
        0 4px 18px rgba(0,0,0,.35);
}

.os-category-content p {

    font-size: 16px;

    line-height: 1.8;

    color: #d0d0d0;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes videoBright {

    0%{

        filter:
            brightness(.75)
            contrast(1.05)
            saturate(1.05);
    }

    50%{

        filter:
            brightness(1.08)
            contrast(1.15)
            saturate(1.15);
    }

    100%{

        filter:
            brightness(.88)
            contrast(1.08)
            saturate(1.08);
    }
}

@keyframes overlayFade {

    0%{
        opacity: .88;
    }

    50%{
        opacity: .45;
    }

    100%{
        opacity: .75;
    }
}

@keyframes revealLight {

    0%{

        opacity: .15;

        transform: scale(1);
    }

    50%{

        opacity: .75;

        transform: scale(1.08);
    }

    100%{

        opacity: .35;

        transform: scale(1.02);
    }
}

@keyframes floatGlow {

    0%{

        transform:
            translateY(0px)
            translateX(0px);
    }

    50%{

        transform:
            translateY(-20px)
            translateX(10px);
    }

    100%{

        transform:
            translateY(0px)
            translateX(0px);
    }
}

@keyframes pulseGlow {

    0%{

        opacity: .4;

        transform: scale(1);
    }

    50%{

        opacity: .9;

        transform: scale(1.12);
    }

    100%{

        opacity: .4;

        transform: scale(1);
    }
}

@keyframes scrollMove {

    0%{

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(0);
    }

    40%{
        opacity: 1;
    }

    100%{

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(18px);
    }
}

@keyframes shineMove {

    0%{
        left: -120%;
    }

    100%{
        left: 140%;
    }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 1200px){

    .os-categories-grid{

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

@media(max-width: 991px){

    .os-hero{

        min-height: auto;

        padding: 160px 0 120px;
    }

    .os-hero-content{

        padding-top: 0;
    }

    .os-hero-content p{

        font-size: 18px;
    }

    .os-brand-wrap{

        gap: 24px;
    }
}

@media(max-width: 768px){

    .os-hero-content h1{

        font-size: 54px;

        line-height: 1;
    }

    .os-hero-buttons{

        flex-direction: column;

        align-items: stretch;
    }

    .os-brand-logo{

        padding: 24px;
    }

    .os-brand-logo img{

        width: 240px;
    }

    .os-brand-line{

        max-width: 80px;
    }

    .os-categories{

        padding: 90px 0;
    }

    .os-categories-grid{

        grid-template-columns: 1fr;
    }

    .os-category-card{

        min-height: 500px;
    }

    .os-category-content{

        padding: 30px;
    }

    .os-category-content h3{

        font-size: 28px;
    }
}

@media(max-width: 576px){

    .os-hero-content h1{

        font-size: 40px;
    }

    .os-hero-content p{

        font-size: 16px;

        line-height: 1.7;
    }

    .os-brand-section{

        padding: 70px 0 90px;
    }

    .os-brand-wrap{

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .os-brand-line{

        display: none;
    }
}

/* =========================
   CTA SECTION
========================= */

.os-cta-section {

    position: relative;

    padding: 130px 0;

    background:
        linear-gradient(
            to bottom,
            #000 0%,
            #050505 100%
        );

    overflow: hidden;
}

/* =========================
   GLOWS
========================= */

.os-cta-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.glow-left {

    top: -120px;
    left: -120px;

    width: 420px;
    height: 420px;

    background:
        rgba(154,195,28,.18);
}

.glow-right {

    bottom: -140px;
    right: -120px;

    width: 460px;
    height: 460px;

    background:
        rgba(212,121,53,.14);
}

/* =========================
   CTA BOX
========================= */

.os-cta-box {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    padding: 70px;

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    border:
        1px solid rgba(154,195,28,.16);

    backdrop-filter: blur(18px);

    box-shadow:
        0 0 60px rgba(154,195,28,.06),
        0 20px 60px rgba(0,0,0,.35);

    overflow: hidden;
}

/* LIGHT LINE */

.os-cta-box::before {

    content: '';

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    transform: skewX(-25deg);

    animation:
        shineMove 7s infinite;
}

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

.os-cta-content {

    position: relative;

    z-index: 2;

    max-width: 760px;
}

/* MINI */

.os-cta-mini {

    display: inline-flex;

    margin-bottom: 24px;

    padding: 10px 18px;

    border-radius: 999px;

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

    border:
        1px solid rgba(154,195,28,.18);

    color: var(--os-green);

    font-family: var(--os-title-font);

    font-size: 13px;

    letter-spacing: 1px;
}

/* TITLE */

.os-cta-content h2 {

    font-family: var(--os-title-font);

    font-size: clamp(42px, 5vw, 76px);

    line-height: .92;

    margin-bottom: 28px;

    color: #fff;

    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(255,255,255,.12),
        0 0 24px rgba(154,195,28,.14),
        0 0 60px rgba(154,195,28,.10);
}

/* TEXT */

.os-cta-content p {

    max-width: 620px;

    font-size: 18px;

    line-height: 1.9;

    color: #d5d5d5;
}

/* =========================
   ACTIONS
========================= */

.os-cta-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 18px;

    min-width: 280px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 991px){

    .os-cta-box{

        flex-direction: column;

        align-items: flex-start;

        padding: 50px;
    }

    .os-cta-actions{

        width: 100%;
    }
}

@media(max-width: 768px){

    .os-cta-section{

        padding: 90px 0;
    }

    .os-cta-box{

        padding: 36px;
    }

    .os-cta-content h2{

        font-size: 42px;
    }

    .os-cta-content p{

        font-size: 16px;
    }
}