/* =========================================================
   OFFENSIVE POINT
   GLOBAL STYLESHEET
   ========================================================= */


/* =========================================================
   01. ROOT VARIABLES
   ========================================================= */

:root {

    /* Brand Colors */

    --op-black: #000000;
    --op-obsidian: #050505;
    --op-dark: #080808;
    --op-dark-2: #0d0d0d;
    --op-card: #111111;

    --op-red: #ff1e1e;
    --op-red-light: #ff3b3b;
    --op-red-dark: #c90000;

    --op-white: #ffffff;
    --op-white-soft: #eeeeee;

    --op-gray: #888888;
    --op-gray-light: #aaaaaa;
    --op-gray-dark: #555555;

    --op-border: #222222;
    --op-border-light: #2c2c2c;


    /* Typography */

    --op-heading-font: "Rajdhani", sans-serif;
    --op-body-font: "Space Grotesk", sans-serif;


    /* Layout */

    --op-container-width: 1200px;

    --op-section-padding: 100px;

    --op-border-radius: 6px;


    /* Effects */

    --op-transition: all 0.3s ease;

    --op-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45);

    --op-red-glow:
        0 0 25px rgba(255, 30, 30, 0.25);

}


/* =========================================================
   02. GLOBAL RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    padding: 0;

    background: var(--op-black);

    color: var(--op-white-soft);

    font-family: var(--op-body-font);

    font-size: 16px;

    line-height: 1.7;

    overflow-x: hidden;

}


/* Remove default margins */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}


/* Images */

img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* Links */

a {

    color: inherit;

    text-decoration: none;

    transition: var(--op-transition);

}


/* Buttons */

button,
input,
textarea,
select {

    font-family: inherit;

}


/* Selection */

::selection {

    background: var(--op-red);

    color: var(--op-white);

}


/* Scrollbar */

::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-track {

    background: var(--op-black);

}


::-webkit-scrollbar-thumb {

    background: #333333;

    border-radius: 10px;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--op-red);

}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--op-heading-font);

    color: var(--op-white);

    font-weight: 700;

    line-height: 1.15;

}


h1 {

    font-size: clamp(2.8rem, 6vw, 5.5rem);

}


h2 {

    font-size: clamp(2.2rem, 4vw, 3.5rem);

}


h3 {

    font-size: clamp(1.6rem, 3vw, 2.4rem);

}


h4 {

    font-size: 1.5rem;

}


h5 {

    font-size: 1.25rem;

}


h6 {

    font-size: 1.1rem;

}


p {

    color: var(--op-gray);

}


/* Small uppercase label */

.op-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

}


.op-eyebrow::before {

    content: "";

    width: 25px;

    height: 2px;

    background: var(--op-red);

}


/* Highlight text */

.op-text-red {

    color: var(--op-red);

}


.op-text-white {

    color: var(--op-white);

}


.op-text-gray {

    color: var(--op-gray);

}


/* =========================================================
   04. GLOBAL SECTION
   ========================================================= */

.op-section {

    position: relative;

    padding: var(--op-section-padding) 0;

    overflow: hidden;

}


.op-section-dark {

    background: var(--op-dark);

}


.op-section-black {

    background: var(--op-black);

}


/* Section heading */

.op-section-heading {

    max-width: 750px;

    margin: 0 auto 60px;

    text-align: center;

}


.op-section-heading h2 {

    margin-bottom: 20px;

}


.op-section-heading p {

    max-width: 650px;

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   05. CONTAINER
   ========================================================= */

.op-container {

    width: 100%;

    max-width: var(--op-container-width);

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

    padding-right: 20px;

}


/* =========================================================
   06. BUTTONS
   ========================================================= */

.op-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding: 12px 25px;

    border: 1px solid transparent;

    border-radius: var(--op-border-radius);

    font-family: var(--op-heading-font);

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    cursor: pointer;

    transition: var(--op-transition);

}


/* Primary */

.op-btn-primary {

    background: var(--op-red);

    color: var(--op-white);

    border-color: var(--op-red);

}


.op-btn-primary:hover {

    background: var(--op-red-dark);

    border-color: var(--op-red-dark);

    color: var(--op-white);

    transform: translateY(-2px);

    box-shadow: var(--op-red-glow);

}


/* Outline */

.op-btn-outline {

    background: transparent;

    color: var(--op-white);

    border-color: #444444;

}


.op-btn-outline:hover {

    background: var(--op-red);

    border-color: var(--op-red);

    color: var(--op-white);

    transform: translateY(-2px);

}


/* Small */

.op-btn-sm {

    min-height: 42px;

    padding: 9px 18px;

    font-size: 14px;

}


/* =========================================================
   07. CARDS
   ========================================================= */

.op-card {

    position: relative;

    height: 100%;

    padding: 30px;

    background: var(--op-card);

    border: 1px solid var(--op-border);

    border-radius: var(--op-border-radius);

    overflow: hidden;

    transition: var(--op-transition);

}


.op-card:hover {

    border-color: rgba(255, 30, 30, 0.45);

    transform: translateY(-5px);

    box-shadow: var(--op-shadow);

}


/* Card red line */

.op-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--op-red);

    transition: width 0.4s ease;

}


.op-card:hover::before {

    width: 100%;

}


/* =========================================================
   08. ICON BOX
   ========================================================= */

.op-icon-box {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    background: rgba(255, 30, 30, 0.08);

    border: 1px solid rgba(255, 30, 30, 0.2);

    border-radius: var(--op-border-radius);

    color: var(--op-red);

    font-size: 22px;

    transition: var(--op-transition);

}


.op-card:hover .op-icon-box {

    background: var(--op-red);

    color: var(--op-white);

    border-color: var(--op-red);

}


/* =========================================================
   09. CYBER GRID BACKGROUND
   ========================================================= */

.op-grid-bg {

    background-color: var(--op-black);

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

}


/* =========================================================
   10. RED GLOW
   ========================================================= */

.op-red-glow {

    position: relative;

}


.op-red-glow::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background: rgba(255, 30, 30, 0.08);

    filter: blur(120px);

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   11. TERMINAL STYLE
   ========================================================= */

.op-terminal {

    background: #070707;

    border: 1px solid #252525;

    border-radius: 6px;

    overflow: hidden;

    box-shadow: var(--op-shadow);

}


.op-terminal-header {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 12px 15px;

    background: #101010;

    border-bottom: 1px solid #222222;

}


.op-terminal-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #444444;

}


.op-terminal-body {

    padding: 25px;

    color: #bdbdbd;

    font-family: monospace;

    font-size: 14px;

    line-height: 1.8;

}


.op-terminal-prompt {

    color: var(--op-red);

}


.op-terminal-command {

    color: var(--op-white);

}


/* =========================================================
   12. BADGES
   ========================================================= */

.op-badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 12px;

    background: rgba(255, 30, 30, 0.08);

    border: 1px solid rgba(255, 30, 30, 0.25);

    border-radius: 50px;

    color: var(--op-red);

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}


.op-badge-dark {

    background: #151515;

    border-color: #292929;

    color: var(--op-gray-light);

}


/* =========================================================
   13. FORMS
   ========================================================= */

.op-form-control {

    width: 100%;

    min-height: 50px;

    padding: 12px 15px;

    background: #0d0d0d;

    border: 1px solid #292929;

    border-radius: var(--op-border-radius);

    color: var(--op-white);

    outline: none;

    transition: var(--op-transition);

}


.op-form-control::placeholder {

    color: #555555;

}


.op-form-control:focus {

    background: #0d0d0d;

    border-color: var(--op-red);

    color: var(--op-white);

    box-shadow: 0 0 0 3px rgba(255, 30, 30, 0.08);

}


textarea.op-form-control {

    min-height: 140px;

    resize: vertical;

}


/* =========================================================
   14. DIVIDERS
   ========================================================= */

.op-divider {

    width: 100%;

    height: 1px;

    background: var(--op-border);

}


.op-red-divider {

    width: 50px;

    height: 3px;

    background: var(--op-red);

}


/* =========================================================
   15. PARTICLES
   ========================================================= */

#particles-js {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    pointer-events: none;

}


/* =========================================================
   16. BACK TO TOP
   ========================================================= */

.op-back-to-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--op-red);

    color: var(--op-white);

    border: none;

    border-radius: 4px;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: var(--op-transition);

    z-index: 999;

}


.op-back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.op-back-to-top:hover {

    background: var(--op-red-dark);

    transform: translateY(-3px);

}


/* =========================================================
   17. UTILITY CLASSES
   ========================================================= */

.op-uppercase {

    text-transform: uppercase;

}


.op-letter-spacing {

    letter-spacing: 1px;

}


.op-mono {

    font-family: monospace;

}


.op-transition {

    transition: var(--op-transition);

}


.op-hidden {

    display: none !important;

}


/* =========================================================
   OFFENSIVE POINT NAVBAR
========================================================= */

.op-navbar {

    position: relative;

    width: 100%;

    min-height: 66px;

    padding: 0;

    background: rgba(0, 0, 0, 0.94);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    z-index: 1000;

}


/* =========================================================
   NAVBAR BRAND
========================================================= */

.op-navbar-brand {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-right: 35px;

}


.op-navbar-logo {

    width: 155px;

    height: auto;

    /*max-height: 45px;*/

    object-fit: contain;

}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.op-nav-link {

    position: relative;

    padding: 22px 11px !important;

    color: #858585 !important;

    font-family: var(--op-heading-font);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: var(--op-transition);

}


.op-nav-link:hover {

    color: var(--op-white) !important;

}


/* Red underline */

.op-nav-link::after {

    content: "";

    position: absolute;

    left: 11px;

    right: 11px;

    bottom: 14px;

    height: 2px;

    background: var(--op-red);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.3s ease;

}


.op-nav-link:hover::after {

    transform: scaleX(1);

}


/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

.op-nav-link.active {

    color: var(--op-white) !important;

}


.op-nav-link.active::after {

    transform: scaleX(1);

}


/* =========================================================
   LIVE TRAINING BADGE
========================================================= */

.op-nav-badge {

    display: inline-block;

    margin-left: 4px;

    padding: 2px 4px;

    background: rgba(255, 30, 30, 0.1);

    border: 1px solid rgba(255, 30, 30, 0.3);

    border-radius: 3px;

    color: var(--op-red);

    font-family: var(--op-body-font);

    font-size: 7px;

    font-weight: 600;

    line-height: 1;

    vertical-align: middle;

}


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

.op-navbar-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* Login */

.op-nav-login {

    color: #858585;

    font-family: var(--op-heading-font);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.op-nav-login:hover {

    color: var(--op-white);

}


/* =========================================================
   GET STARTED BUTTON
========================================================= */

.op-navbar-actions .op-btn {

    min-height: 38px;

    padding: 7px 15px;

    font-size: 13px;

}


/* =========================================================
   NAVBAR LOGGED-IN USER
========================================================= */

.op-navbar-user {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 5px 8px 5px 5px;

    background: rgba(255,255,255,0.015);

    border: 1px solid #202020;

    border-radius: 4px;

    text-decoration: none;

    transition:

        border-color 0.25s ease,

        background 0.25s ease;

}


.op-navbar-user:hover {

    background: rgba(255,255,255,0.025);

    border-color: #303030;

}


/* =========================================================
   USER AVATAR
========================================================= */

.op-navbar-user-avatar {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    flex-shrink: 0;

    background:

        linear-gradient(
            135deg,
            rgba(255,30,30,0.15),
            rgba(255,30,30,0.04)
        );

    border: 1px solid rgba(255,30,30,0.25);

    border-radius: 50%;

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 10px;

    font-weight: 700;

}


.op-navbar-user-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   USER INFORMATION
========================================================= */

.op-navbar-user-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 75px;

}


.op-navbar-user-info span {

    margin-bottom: 2px;

    color: #383838;

    font-family: monospace;

    font-size: 5px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}


.op-navbar-user-info strong {

    max-width: 120px;

    overflow: hidden;

    color: #888888;

    font-family: monospace;

    font-size: 7px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.op-navbar-user:hover
.op-navbar-user-info strong {

    color: #b0b0b0;

}


/* =========================================================
   USER ARROW
========================================================= */

.op-navbar-user-arrow {

    margin-left: 3px;

    color: #3d3d3d;

    font-size: 7px;

    transition: transform 0.25s ease;

}


.op-navbar-user:hover
.op-navbar-user-arrow {

    color: var(--op-red);

    transform: translateY(2px);

}

/* =========================================================
   NAVBAR USER
========================================================= */

.op-navbar-user {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: inherit;

    padding: 4px 8px 4px 4px;

    border-radius: 999px;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;

}


.op-navbar-user:hover {

    background: rgba(255, 255, 255, 0.05);

}


/* =========================================================
   AVATAR
========================================================= */

.op-navbar-user-avatar {

    width: 38px;

    height: 38px;

    min-width: 38px;

    min-height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #1c1c1c;

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

}


/* =========================================================
   AVATAR IMAGE
========================================================= */

.op-navbar-user-avatar img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

}


/* =========================================================
   INITIALS
========================================================= */

.op-navbar-user-avatar span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

}


/* =========================================================
   USER NAME
========================================================= */

.op-navbar-user-info {

    display: flex;

    align-items: center;

    min-width: 0;

}


.op-navbar-user-info strong {

    display: block;

    max-width: 140px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .op-navbar-user {

        width: fit-content;

        margin-top: 12px;

    }

}


/* =========================================================
   DESKTOP NAVBAR SIZE
========================================================= */

@media (min-width: 992px) {

    .op-navbar-user {

        min-height: 42px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .op-navbar-user {

        width: 100%;

        margin-top: 10px;

        padding: 8px;

    }


    .op-navbar-user-info {

        flex: 1;

    }


    .op-navbar-user-info strong {

        max-width: none;

    }


    .op-navbar-user-arrow {

        margin-left: auto;

    }

}

/* =========================================================
   NAVBAR TOGGLER
========================================================= */

.op-navbar-toggler {

    width: 42px;

    height: 42px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111111;

    border: 1px solid #292929;

    border-radius: 4px;

}


.op-navbar-toggler:focus {

    box-shadow: none;

    border-color: var(--op-red);

}


.op-navbar-toggler .navbar-toggler-icon {

    width: 20px;

    height: 20px;

    background-image: none;

    position: relative;

}


.op-navbar-toggler .navbar-toggler-icon::before,
.op-navbar-toggler .navbar-toggler-icon::after {

    content: "";

    position: absolute;

    left: 0;

    width: 20px;

    height: 2px;

    background: var(--op-white);

    transition: var(--op-transition);

}


.op-navbar-toggler .navbar-toggler-icon::before {

    top: 6px;

}


.op-navbar-toggler .navbar-toggler-icon::after {

    top: 13px;

}

/* =========================================================
   HERO SECTION
========================================================= */

.op-hero {

    position: relative;

    min-height: calc(100vh - 66px);

    display: flex;

    align-items: center;

    padding: 100px 0 110px;

    background:

        radial-gradient(
            circle at 15% 50%,
            rgba(255, 30, 30, 0.08),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 45%,
            rgba(255, 30, 30, 0.05),
            transparent 30%
        ),

        #000000;

    overflow: hidden;

}


/* Cyber grid */

.op-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );

    pointer-events: none;

}


/* =========================================================
   HERO EYEBROW
========================================================= */

.op-hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding: 7px 12px;

    background: rgba(255, 30, 30, 0.06);

    border: 1px solid rgba(255, 30, 30, 0.2);

    border-radius: 3px;

    color: #d4d4d4;

    font-family: var(--op-heading-font);

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


/* Status dot */

.op-status-dot {

    width: 7px;

    height: 7px;

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(255, 30, 30, 0.8);

    animation: opPulse 2s infinite;

}


@keyframes opPulse {

    0%,
    100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.5;

        transform: scale(0.75);

    }

}


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

.op-hero-title {

    max-width: 800px;

    margin-bottom: 25px;

    color: var(--op-white);

    font-family: var(--op-heading-font);

    font-size: clamp(
        3.2rem,
        6vw,
        5.5rem
    );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -1.5px;

}


.op-hero-title span {

    color: var(--op-red);

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.op-hero-description {

    max-width: 650px;

    margin-bottom: 35px;

    color: #999999;

    font-size: 17px;

    line-height: 1.8;

}


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

.op-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 40px;

}


.op-hero-actions .op-btn {

    min-width: 175px;

}


/* =========================================================
   HERO FEATURES
========================================================= */

.op-hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

}


.op-hero-feature {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #777777;

    font-size: 13px;

}


.op-hero-feature i {

    color: var(--op-red);

    font-size: 13px;

}


/* =========================================================
   HERO TERMINAL
========================================================= */

.op-hero-terminal-wrapper {

    position: relative;

    padding: 20px;

}


/* Red glow behind terminal */

.op-hero-terminal-wrapper::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: 50%;

    left: 50%;

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

    background: rgba(255, 30, 30, 0.08);

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;

}


/* Terminal */

.op-hero-terminal {

    position: relative;

    z-index: 2;

    background: rgba(8, 8, 8, 0.95);

    border-color: #292929;

    box-shadow:

        0 30px 80px rgba(0, 0, 0, 0.7),

        0 0 40px rgba(255, 30, 30, 0.05);

    transform: perspective(1000px)
               rotateY(-3deg);

    transition: transform 0.5s ease;

}


.op-hero-terminal:hover {

    transform: perspective(1000px)
               rotateY(0deg)
               translateY(-5px);

}


/* Terminal title */

.op-terminal-title {

    margin-left: 8px;

    color: #555555;

    font-family: monospace;

    font-size: 11px;

}


/* Terminal body */

.op-hero-terminal .op-terminal-body {

    min-height: 320px;

    padding: 25px;

}


/* Terminal output */

.op-terminal-output {

    margin-top: 15px;

    color: #777777;

}


.op-terminal-red {

    color: var(--op-red);

}


.op-terminal-green {

    color: #777777;

}


/* Terminal status */

.op-terminal-status {

    display: inline-block;

    margin-top: 10px;

    padding: 4px 8px;

    background: rgba(255, 30, 30, 0.08);

    border: 1px solid rgba(255, 30, 30, 0.15);

    color: var(--op-red);

    font-size: 11px;

}


/* Cursor */

.op-terminal-cursor {

    margin-top: 8px;

    color: var(--op-red);

    animation: opCursor 1s infinite;

}


@keyframes opCursor {

    0%,
    45% {

        opacity: 1;

    }

    50%,
    100% {

        opacity: 0;

    }

}


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

.op-hero-floating-card {

    position: absolute;

    right: -5px;

    bottom: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    background: rgba(15, 15, 15, 0.95);

    border: 1px solid #292929;

    border-left: 2px solid var(--op-red);

    border-radius: 4px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

}


.op-hero-floating-card > i {

    color: var(--op-red);

    font-size: 20px;

}


.op-hero-floating-card div {

    display: flex;

    flex-direction: column;

}


.op-hero-floating-card strong {

    color: #ffffff;

    font-family: var(--op-heading-font);

    font-size: 13px;

}


.op-hero-floating-card span {

    color: #666666;

    font-size: 11px;

}


/* =========================================================
   HERO FADE
========================================================= */

.op-hero-fade {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100px;

    background: linear-gradient(
        to bottom,
        transparent,
        #000000
    );

    pointer-events: none;

}

/* =========================================================
   SECTION 02
   PREMIUM OFFENSIVE SECURITY SKILLS
========================================================= */

.op-skills-section {

    position: relative;

    padding: 120px 0;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255, 30, 30, 0.035),
            transparent 40%
        ),

        #050505;

    overflow: hidden;

}


/* =========================================================
   INTRO
========================================================= */

.op-skills-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;

}


.op-skills-intro-left {

    max-width: 650px;

}


.op-skills-intro-left h2 {

    margin: 18px 0 0;

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 0.98;

    letter-spacing: -1px;

}


.op-skills-intro-left h2 span {

    display: block;

    color: var(--op-red);

}


.op-skills-intro-right {

    max-width: 420px;

    padding-bottom: 5px;

}


.op-skills-intro-right p {

    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.9;

}


.op-skills-intro-line {

    width: 60px;

    height: 2px;

    margin-top: 25px;

    background: var(--op-red);

}


/* =========================================================
   PREMIUM SKILL CARD
========================================================= */

.op-skill-card-premium {

    position: relative;

    min-height: 410px;

    display: flex;

    flex-direction: column;

    padding: 38px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,0.025),
            transparent 45%
        ),

        #0a0a0a;

    border: 1px solid #1d1d1d;

    border-radius: 7px;

    overflow: hidden;

    transition:

        transform 0.45s ease,

        border-color 0.45s ease,

        box-shadow 0.45s ease;

}


/* Background glow */

.op-skill-card-premium::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    top: -130px;

    right: -100px;

    background: rgba(255, 30, 30, 0.05);

    filter: blur(80px);

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.45s ease;

}


.op-skill-card-premium:hover::before {

    opacity: 1;

}


.op-skill-card-premium:hover {

    transform: translateY(-8px);

    border-color: rgba(255, 30, 30, 0.35);

    box-shadow:

        0 25px 70px rgba(0, 0, 0, 0.55),

        0 0 40px rgba(255, 30, 30, 0.04);

}


/* =========================================================
   BACKGROUND NUMBER
========================================================= */

.op-skill-bg-number {

    position: absolute;

    top: -10px;

    right: 25px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 150px;

    font-weight: 700;

    line-height: 1;

    user-select: none;

    pointer-events: none;

    transition: color 0.4s ease;

}


.op-skill-card-premium:hover .op-skill-bg-number {

    color: rgba(255,30,30,0.045);

}


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

.op-skill-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}


.op-skill-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.07);

    border: 1px solid rgba(255,30,30,0.18);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 21px;

    transition: var(--op-transition);

}


.op-skill-card-premium:hover .op-skill-icon {

    background: var(--op-red);

    color: #ffffff;

    border-color: var(--op-red);

    box-shadow:

        0 0 25px rgba(255,30,30,0.18);

}


.op-skill-phase {

    color: #444444;

    font-family: monospace;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}


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

.op-skill-content {

    position: relative;

    z-index: 2;

    max-width: 550px;

}


.op-skill-content h3 {

    margin-bottom: 17px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.05;

}


.op-skill-content h3 span {

    display: block;

    color: var(--op-red);

}


.op-skill-content p {

    max-width: 510px;

    margin-bottom: 30px;

    color: #727272;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   TOOL STACK
========================================================= */

.op-tool-stack {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;

}


.op-tool {

    min-width: 76px;

    height: 52px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    background: rgba(255,255,255,0.015);

    border: 1px solid #1d1d1d;

    border-radius: 4px;

    color: #454545;

    transition:

        border-color 0.3s ease,

        color 0.3s ease,

        background 0.3s ease;

}


.op-tool i {

    font-size: 20px;

    color: #363636;

    transition: color 0.3s ease;

}


.op-tool small {

    color: #555555;

    font-family: var(--op-body-font);

    font-size: 9px;

    font-weight: 600;

    white-space: nowrap;

    transition: color 0.3s ease;

}


.op-tool-text {

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #202020;

    color: #4a4a4a;

    border-radius: 3px;

    font-family: var(--op-heading-font);

    font-size: 12px;

    transition: var(--op-transition);

}


/* Tool hover */

.op-tool:hover {

    background: rgba(255,30,30,0.035);

    border-color: rgba(255,30,30,0.18);

}


.op-tool:hover i {

    color: #666666;

}


.op-tool:hover small {

    color: #888888;

}


.op-tool:hover .op-tool-text {

    background: rgba(255,30,30,0.15);

    color: #999999;

}


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

.op-skill-card-footer {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid #171717;

}


.op-skill-card-footer span {

    color: #444444;

    font-family: monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    transition: color 0.3s ease;

}


.op-skill-card-premium:hover
.op-skill-card-footer span {

    color: var(--op-red);

}


.op-skill-arrow-line {

    width: 35px;

    height: 1px;

    background: #282828;

    transition: width 0.3s ease;

}


.op-skill-card-premium:hover
.op-skill-arrow-line {

    width: 65px;

    background: var(--op-red);

}


.op-skill-card-footer i {

    color: #333333;

    font-size: 10px;

    transition: color 0.3s ease;

}


.op-skill-card-premium:hover
.op-skill-card-footer i {

    color: var(--op-red);

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.op-skills-statement {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 65px;

}


.op-statement-line {

    width: 100px;

    height: 1px;

    background: #202020;

}


.op-statement-content {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #555555;

    font-family: var(--op-heading-font);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-statement-content i {

    color: var(--op-red);

}


.op-statement-red {

    color: var(--op-red);

}


/* =========================================================
   SECTION 03
   FREE HANDS-ON LABS
========================================================= */

.op-labs-section {

    position: relative;

    padding: 120px 0;

    background: #080808;

    overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

.op-labs-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 60px;

}


.op-labs-header-left {

    max-width: 650px;

}


.op-labs-header-left h2 {

    margin: 18px 0 0;

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 0.98;

}


.op-labs-header-left h2 span {

    display: block;

    color: var(--op-red);

}


.op-labs-header-right {

    max-width: 400px;

}


.op-labs-header-right p {

    margin-bottom: 20px;

    color: #777777;

    font-size: 14px;

    line-height: 1.8;

}


/* View all */

.op-labs-view-all {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #aaaaaa;

    font-family: var(--op-heading-font);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-labs-view-all i {

    color: var(--op-red);

    transition: transform 0.3s ease;

}


.op-labs-view-all:hover {

    color: #ffffff;

}


.op-labs-view-all:hover i {

    transform: translateX(5px);

}


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

.op-lab-card {

    position: relative;

    height: 100%;

    background: #0c0c0c;

    border: 1px solid #1d1d1d;

    border-radius: 6px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease,

        box-shadow 0.4s ease;

}


.op-lab-card:hover {

    transform: translateY(-7px);

    border-color: rgba(255,30,30,0.3);

    box-shadow:

        0 25px 60px rgba(0,0,0,0.5),

        0 0 35px rgba(255,30,30,0.04);

}


/* =========================================================
   LAB VISUAL
========================================================= */

.op-lab-visual {

    position: relative;

    height: 210px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at center,
            rgba(255,30,30,0.07),
            transparent 55%
        ),

        #070707;

    border-bottom: 1px solid #1c1c1c;

    overflow: hidden;

}


/* Grid */

.op-lab-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    mask-image: radial-gradient(
        circle,
        black,
        transparent 80%
    );

}


/* Terminal */

.op-lab-terminal {

    position: relative;

    z-index: 2;

    width: 72%;

    padding: 20px;

    background: rgba(10,10,10,0.9);

    border: 1px solid #252525;

    border-radius: 5px;

    box-shadow:

        0 15px 40px rgba(0,0,0,0.6),

        0 0 25px rgba(255,30,30,0.03);

    font-family: monospace;

}


.op-lab-terminal span {

    display: block;

    margin-bottom: 8px;

    color: #555555;

    font-size: 10px;

}


.op-lab-terminal strong {

    color: #888888;

    font-size: 12px;

    font-weight: 400;

}


.op-lab-terminal strong::before {

    content: "> ";

    color: var(--op-red);

}


/* Number */

.op-lab-number {

    position: absolute;

    right: 20px;

    bottom: 10px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 100px;

    font-weight: 700;

    line-height: 1;

}


/* Free badge */

.op-lab-free-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 3;

    padding: 5px 9px;

    background: rgba(255,30,30,0.08);

    border: 1px solid rgba(255,30,30,0.25);

    border-radius: 3px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

}


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

.op-lab-content {

    padding: 28px;

}


/* Meta */

.op-lab-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

    color: #444444;

    font-family: monospace;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-lab-difficulty {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}


.op-lab-difficulty i {

    font-size: 6px;

}


.op-lab-difficulty.easy {

    color: #777777;

}


.op-lab-difficulty.medium {

    color: #999999;

}


/* Heading */

.op-lab-content h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 27px;

    line-height: 1.05;

}


.op-lab-content h3 span {

    display: block;

    color: var(--op-red);

}


/* Description */

.op-lab-content p {

    min-height: 75px;

    margin-bottom: 22px;

    color: #707070;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   TAGS
========================================================= */

.op-lab-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 25px;

}


.op-lab-tags span {

    padding: 5px 8px;

    background: #151515;

    border: 1px solid #242424;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 9px;

    transition: var(--op-transition);

}


.op-lab-card:hover .op-lab-tags span {

    border-color: #303030;

    color: #777777;

}


/* =========================================================
   LAB FOOTER
========================================================= */

.op-lab-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

    border-top: 1px solid #181818;

}


.op-lab-type {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #4d4d4d;

    font-family: monospace;

    font-size: 9px;

}


.op-lab-type i {

    color: #555555;

}


/* View Lab */

.op-lab-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #777777;

    font-family: var(--op-heading-font);

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}


.op-lab-link i {

    color: var(--op-red);

    transition: transform 0.3s ease;

}


.op-lab-link:hover {

    color: #ffffff;

}


.op-lab-link:hover i {

    transform: translateX(4px);

}


/* =========================================================
   BOTTOM CTA
========================================================= */

.op-labs-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 60px;

    padding: 30px;

    background:

        linear-gradient(
            90deg,
            rgba(255,30,30,0.04),
            transparent
        ),

        #0b0b0b;

    border: 1px solid #1c1c1c;

    border-left: 2px solid var(--op-red);

    border-radius: 5px;

}


.op-labs-bottom-label {

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.op-labs-bottom p {

    margin: 7px 0 0;

    color: #888888;

    font-size: 14px;

}


/* =========================================================
   SECTION 04
   COURSES
========================================================= */

.op-courses-section {

    position: relative;

    padding: 120px 0;

    background: #050505;

    overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

.op-courses-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 60px;

}


.op-courses-header h2 {

    margin: 18px 0 0;

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 0.98;

}


.op-courses-header h2 span {

    display: block;

    color: var(--op-red);

}


.op-courses-header-description {

    max-width: 400px;

}


.op-courses-header-description p {

    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   FEATURED COURSE
========================================================= */

.op-featured-course {

    position: relative;

    padding: 55px;

    background:

        radial-gradient(
            circle at 80% 50%,
            rgba(255,30,30,0.07),
            transparent 35%
        ),

        #0a0a0a;

    border: 1px solid #202020;

    border-radius: 7px;

    overflow: hidden;

    transition: var(--op-transition);

}


.op-featured-course:hover {

    border-color: rgba(255,30,30,0.3);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.5);

}


/* Grid */

.op-featured-course-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

    pointer-events: none;

}


/* Large number */

.op-featured-course-number {

    position: absolute;

    top: -25px;

    right: 30px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 200px;

    font-weight: 700;

    line-height: 1;

}


/* Course label */

.op-course-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color: #777777;

    font-family: monospace;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


.op-course-status-dot {

    width: 6px;

    height: 6px;

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(255,30,30,0.7);

}


/* Featured title */

.op-featured-course h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: clamp(
        3rem,
        5vw,
        4.8rem
    );

    line-height: 0.95;

}


.op-featured-course h3 span {

    display: block;

    color: var(--op-red);

}


.op-featured-course-description {

    position: relative;

    z-index: 2;

    max-width: 650px;

    margin-bottom: 30px;

    color: #777777;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   COURSE META
========================================================= */

.op-course-meta {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 35px;

}


.op-course-meta div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #555555;

    font-size: 11px;

}


.op-course-meta i {

    color: #666666;

}


/* =========================================================
   TERMINAL
========================================================= */

.op-course-terminal {

    position: relative;

    z-index: 2;

    background: #070707;

    border: 1px solid #252525;

    border-radius: 5px;

    box-shadow:

        0 20px 50px rgba(0,0,0,0.6);

    transform:
        perspective(1000px)
        rotateY(-4deg);

    transition: transform 0.5s ease;

}


.op-featured-course:hover
.op-course-terminal {

    transform:
        perspective(1000px)
        rotateY(0deg);

}


.op-course-terminal-header {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 11px 13px;

    background: #101010;

    border-bottom: 1px solid #1e1e1e;

}


.op-course-terminal-header span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #333333;

}


.op-course-terminal-header small {

    margin-left: 7px;

    color: #444444;

    font-family: monospace;

    font-size: 9px;

}


.op-course-terminal-body {

    padding: 25px;

    font-family: monospace;

    font-size: 11px;

}


.op-course-terminal-line {

    margin-bottom: 25px;

    color: #777777;

}


.terminal-prompt {

    margin-right: 8px;

    color: var(--op-red);

}


/* Progress */

.op-progress-item {

    display: flex;

    justify-content: space-between;

    padding: 9px 0;

    border-bottom: 1px solid #151515;

    color: #555555;

    font-size: 9px;

}


.op-progress-item span:last-child {

    color: #555555;

}


.op-progress-item:nth-child(4)
span:last-child {

    color: var(--op-red);

}


/* Terminal status */

.op-course-terminal-status {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 20px;

    padding: 10px;

    background: rgba(255,30,30,0.04);

    border: 1px solid rgba(255,30,30,0.1);

}


.op-course-terminal-status span {

    color: #444444;

}


.op-course-terminal-status strong {

    color: var(--op-red);

    font-weight: 500;

}


/* =========================================================
   SECONDARY COURSE CARDS
========================================================= */

.op-course-card {

    position: relative;

    height: 100%;

    padding: 32px;

    background: #0a0a0a;

    border: 1px solid #1d1d1d;

    border-radius: 6px;

    overflow: hidden;

    transition: var(--op-transition);

}


.op-course-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--op-red);

    transition: width 0.4s ease;

}


.op-course-card:hover::before {

    width: 100%;

}


.op-course-card:hover {

    transform: translateY(-6px);

    border-color: #303030;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.45);

}


/* Card top */

.op-course-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.op-course-card-top > span {

    color: #444444;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1.5px;

}


/* Icon */

.op-course-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 20px;

    transition: var(--op-transition);

}


.op-course-card:hover
.op-course-icon {

    background: var(--op-red);

    border-color: var(--op-red);

    color: #ffffff;

}


/* Title */

.op-course-card h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 25px;

}


/* Description */

.op-course-card p {

    min-height: 80px;

    margin-bottom: 22px;

    color: #707070;

    font-size: 13px;

    line-height: 1.8;

}


/* Tags */

.op-course-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 25px;

}


.op-course-tags span {

    padding: 4px 7px;

    background: #151515;

    border: 1px solid #242424;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


/* Link */

.op-course-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #777777;

    font-family: var(--op-heading-font);

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}


.op-course-link i {

    color: var(--op-red);

    transition: transform 0.3s ease;

}


.op-course-link:hover {

    color: #ffffff;

}


.op-course-link:hover i {

    transform: translateX(4px);

}


/* =========================================================
   BOTTOM CTA
========================================================= */

.op-courses-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 55px;

    padding-top: 25px;

    border-top: 1px solid #181818;

}


.op-courses-bottom > span {

    color: #444444;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1.5px;

}

/* =========================================================
   SECTION 05
   LIVE TRAINING & MENTORSHIP
========================================================= */

.op-live-section {

    position: relative;

    padding: 120px 0;

    background: #000000;

    overflow: hidden;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.op-live-wrapper {

    position: relative;

    padding: 75px;

    background:

        radial-gradient(
            circle at 85% 50%,
            rgba(255, 30, 30, 0.08),
            transparent 35%
        ),

        #090909;

    border: 1px solid #202020;

    border-radius: 7px;

    overflow: hidden;

}


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

.op-live-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        linear-gradient(
            to right,
            black,
            transparent 90%
        );

    pointer-events: none;

}


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

.op-live-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

}


/* =========================================================
   STATUS
========================================================= */

.op-live-status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    color: #777777;

    font-family: monospace;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


.op-live-status strong {

    padding: 4px 7px;

    background: rgba(255,30,30,0.08);

    border: 1px solid rgba(255,30,30,0.2);

    border-radius: 3px;

    color: var(--op-red);

    font-size: 8px;

}


.op-live-status-dot {

    width: 7px;

    height: 7px;

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(255,30,30,0.7);

    animation: opLivePulse 2s infinite;

}


@keyframes opLivePulse {

    0%,
    100% {

        opacity: 1;

        box-shadow:
            0 0 8px rgba(255,30,30,0.5);

    }

    50% {

        opacity: 0.4;

        box-shadow:
            0 0 18px rgba(255,30,30,0.9);

    }

}


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

.op-live-content h2 {

    margin-bottom: 25px;

    color: #ffffff;

    font-size: clamp(
        3rem,
        5vw,
        4.8rem
    );

    line-height: 0.95;

    letter-spacing: -1px;

}


.op-live-content h2 span {

    display: block;

    color: var(--op-red);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.op-live-description {

    max-width: 600px;

    margin-bottom: 35px;

    color: #777777;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   FEATURES
========================================================= */

.op-live-features {

    display: grid;

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

    gap: 15px;

    margin-bottom: 35px;

}


.op-live-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px;

    background: rgba(255,255,255,0.015);

    border: 1px solid #181818;

    border-radius: 4px;

    transition: var(--op-transition);

}


.op-live-feature:hover {

    border-color: #292929;

    background: rgba(255,30,30,0.02);

}


.op-live-feature-icon {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.12);

    border-radius: 3px;

    color: var(--op-red);

    font-size: 13px;

}


.op-live-feature div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.op-live-feature strong {

    color: #b0b0b0;

    font-family: var(--op-heading-font);

    font-size: 12px;

    font-weight: 600;

}


.op-live-feature span {

    color: #555555;

    font-size: 10px;

}


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

.op-live-actions {

    display: flex;

    align-items: center;

    gap: 18px;

}


.op-live-note {

    color: #4f4f4f;

    font-family: monospace;

    font-size: 9px;

}


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

.op-live-session-card {

    position: relative;

    z-index: 2;

    background: #070707;

    border: 1px solid #252525;

    border-radius: 6px;

    box-shadow:

        0 30px 70px rgba(0,0,0,0.6),

        0 0 40px rgba(255,30,30,0.04);

    transform:

        perspective(1000px)
        rotateY(-4deg);

    transition: transform 0.5s ease;

}


.op-live-session-card:hover {

    transform:

        perspective(1000px)
        rotateY(0deg)
        translateY(-5px);

}


/* =========================================================
   SESSION HEADER
========================================================= */

.op-live-session-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 18px;

    background: #0d0d0d;

    border-bottom: 1px solid #1c1c1c;

}


.op-live-session-header div:first-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.op-session-label {

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1.5px;

}


.op-live-session-header strong {

    color: #777777;

    font-family: var(--op-heading-font);

    font-size: 11px;

    letter-spacing: 0.5px;

}


/* Live indicator */

.op-session-live-indicator {

    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

}


.op-session-live-indicator span {

    width: 5px;

    height: 5px;

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(255,30,30,0.7);

}


/* =========================================================
   SESSION BODY
========================================================= */

.op-live-session-body {

    padding: 30px;

}


.op-session-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    background: rgba(255,30,30,0.07);

    border: 1px solid rgba(255,30,30,0.18);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 20px;

}


.op-session-category {

    color: #4d4d4d;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1.5px;

}


.op-live-session-body h3 {

    margin: 10px 0 25px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.1;

}


/* =========================================================
   SESSION DETAILS
========================================================= */

.op-session-details {

    display: flex;

    flex-direction: column;

    gap: 11px;

    padding: 15px 0;

    border-top: 1px solid #171717;

    border-bottom: 1px solid #171717;

}


.op-session-details div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #5b5b5b;

    font-size: 11px;

}


.op-session-details i {

    width: 15px;

    color: #555555;

    text-align: center;

}


/* =========================================================
   PROGRESS
========================================================= */

.op-session-progress {

    margin-top: 22px;

}


.op-session-progress-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 9px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-session-progress-top span:last-child {

    color: var(--op-red);

}


.op-session-progress-bar {

    height: 3px;

    background: #171717;

    overflow: hidden;

}


.op-session-progress-bar span {

    display: block;

    width: 18%;

    height: 100%;

    background: var(--op-red);

    box-shadow:
        0 0 10px rgba(255,30,30,0.6);

}


/* =========================================================
   SESSION FOOTER
========================================================= */

.op-live-session-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 18px;

    border-top: 1px solid #1a1a1a;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

}


.op-live-session-footer span {

    display: flex;

    align-items: center;

    gap: 6px;

}


.op-live-session-footer i {

    color: var(--op-red);

}

/* =========================================================
   SECTION 06
   WHY OFFENSIVE POINT
========================================================= */

.op-why-section {

    position: relative;

    padding: 120px 0;

    background: #050505;

    overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

/*.op-why-header {*/

/*    max-width: 750px;*/

/*    margin: 0 auto 65px;*/

/*    text-align: center;*/

/*}*/

/* =========================================================
   WHY OFFENSIVE POINT — HEADER
========================================================= */

.op-why-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;

}


/* =========================================================
   LEFT SIDE
========================================================= */

.op-why-header-left {

    max-width: 650px;

}


.op-why-header-left h2 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 0.98;

    letter-spacing: -1px;

}


.op-why-header-left h2 span {

    display: block;

    color: var(--op-red);

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.op-why-header-right {

    max-width: 420px;

    padding-bottom: 5px;

}


.op-why-header-right p {

    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.9;

}


/* Red accent line */

.op-why-header-line {

    width: 60px;

    height: 2px;

    margin-top: 25px;

    background: var(--op-red);

}


/*.op-why-header h2 {*/

/*    margin: 18px 0 20px;*/

/*    color: #ffffff;*/

/*    font-size: clamp(*/
/*        2.5rem,*/
/*        5vw,*/
/*        4.2rem*/
/*    );*/

/*    line-height: 0.98;*/

/*    letter-spacing: -1px;*/

/*}*/


/*.op-why-header h2 span {*/

/*    display: block;*/

/*    color: var(--op-red);*/

/*}*/


/*.op-why-header p {*/

/*    max-width: 620px;*/

/*    margin: 0 auto;*/

/*    color: #707070;*/

/*    font-size: 14px;*/

/*    line-height: 1.9;*/

/*}*/


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

.op-why-grid {

    display: grid;

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

    gap: 1px;

    background: #202020;

    border: 1px solid #202020;

}


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

.op-why-card {

    position: relative;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    padding: 38px;

    background: #080808;

    overflow: hidden;

    transition:
        background 0.4s ease;

}


.op-why-card:hover {

    background: #0b0b0b;

}


/* =========================================================
   NUMBER
========================================================= */

.op-why-card-number {

    position: absolute;

    top: 15px;

    right: 25px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 100px;

    font-weight: 700;

    line-height: 1;

    transition:
        color 0.4s ease;

}


.op-why-card:hover
.op-why-card-number {

    color: rgba(255,30,30,0.05);

}


/* =========================================================
   ICON
========================================================= */

.op-why-icon {

    position: relative;

    z-index: 2;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 18px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;

}


.op-why-card:hover
.op-why-icon {

    background: var(--op-red);

    border-color: var(--op-red);

    color: #ffffff;

    box-shadow:
        0 0 25px rgba(255,30,30,0.15);

}


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

.op-why-card-content {

    position: relative;

    z-index: 2;

    max-width: 480px;

}


.op-why-label {

    display: block;

    margin-bottom: 8px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.8px;

}


.op-why-card h3 {

    margin-bottom: 13px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.1;

}


.op-why-card p {

    max-width: 440px;

    margin: 0;

    color: #686868;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   CARD BOTTOM LINE
========================================================= */

.op-why-card-line {

    width: 35px;

    height: 2px;

    margin-top: auto;

    background: #252525;

    transition:
        width 0.4s ease,
        background 0.4s ease;

}


.op-why-card:hover
.op-why-card-line {

    width: 80px;

    background: var(--op-red);

}


/* =========================================================
   PHILOSOPHY BAR
========================================================= */

.op-why-philosophy {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 45px;

    padding: 20px 25px;

    background: #090909;

    border: 1px solid #1c1c1c;

    border-radius: 4px;

}


/* Terminal */

.op-why-philosophy-terminal {

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-family: monospace;

    font-size: 9px;

}


.op-why-philosophy-terminal span {

    color: #444444;

}


.op-why-philosophy-terminal strong {

    color: #666666;

    font-weight: 400;

}


.op-why-philosophy-terminal strong::before {

    content: "> ";

    color: var(--op-red);

}


/* Philosophy */

.op-why-philosophy-text {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #555555;

    font-family: var(--op-heading-font);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-why-philosophy-text i {

    color: #333333;

    font-size: 9px;

}


.op-why-philosophy-text .active {

    color: var(--op-red);

}


/* =========================================================
   SECTION 07
   FINAL CTA
========================================================= */

.op-final-cta-section {

    position: relative;

    padding: 110px 0;

    background: #050505;

    overflow: hidden;

}


/* =========================================================
   CTA CONTAINER
========================================================= */

.op-final-cta {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 80px 40px;

    background:

        radial-gradient(
            circle at center,
            rgba(255,30,30,0.075),
            transparent 48%
        ),

        #090909;

    border: 1px solid #202020;

    border-radius: 7px;

    overflow: hidden;

}


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

.op-final-cta-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


/* =========================================================
   RED GLOW
========================================================= */

.op-final-cta-glow {

    position: absolute;

    width: 350px;

    height: 350px;

    top: 50%;

    left: 50%;

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

    background: rgba(255,30,30,0.06);

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   CROSSHAIR
========================================================= */

.op-final-crosshair {

    position: absolute;

    width: 300px;

    height: 300px;

    top: 50%;

    left: 50%;

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

    border: 1px solid rgba(255,255,255,0.025);

    border-radius: 50%;

    pointer-events: none;

}


.op-final-crosshair::before {

    content: "";

    position: absolute;

    inset: 35px;

    border: 1px solid rgba(255,30,30,0.06);

    border-radius: 50%;

}


.op-final-crosshair::after {

    content: "";

    position: absolute;

    inset: 75px;

    border: 1px solid rgba(255,255,255,0.025);

    border-radius: 50%;

}


.crosshair-horizontal {

    position: absolute;

    top: 50%;

    left: -30px;

    right: -30px;

    height: 1px;

    background: rgba(255,255,255,0.025);

}


.crosshair-vertical {

    position: absolute;

    top: -30px;

    bottom: -30px;

    left: 50%;

    width: 1px;

    background: rgba(255,255,255,0.025);

}


.crosshair-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 7px;

    height: 7px;

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

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:

        0 0 20px rgba(255,30,30,0.7);

}


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

.op-final-cta-content {

    position: relative;

    z-index: 3;

    max-width: 760px;

    text-align: center;

}


.op-final-cta-content .op-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

}


.op-final-cta-content h2 {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5.3rem
    );

    line-height: 0.94;

    letter-spacing: -1.5px;

}


.op-final-cta-content h2 span {

    display: block;

    color: var(--op-red);

}


.op-final-cta-content > p {

    max-width: 620px;

    margin: 0 auto 35px;

    color: #777777;

    font-size: 14px;

    line-height: 1.9;

}


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

.op-final-cta-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 35px;

}


/* =========================================================
   CTA NOTE
========================================================= */

.op-final-cta-note {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding-top: 22px;

    border-top: 1px solid #1a1a1a;

}


.op-final-cta-note span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-final-cta-note i {

    color: #555555;

}


/* =========================================================
   HOVER
========================================================= */

.op-final-cta {

    transition:

        border-color 0.4s ease,

        box-shadow 0.4s ease;

}


.op-final-cta:hover {

    border-color: rgba(255,30,30,0.25);

    box-shadow:

        0 30px 80px rgba(0,0,0,0.5),

        0 0 50px rgba(255,30,30,0.03);

}




/* =========================================================
   18. FOOTER
   ========================================================= */

.op-footer {

    position: relative;

    background: #050505;

    border-top: 1px solid rgba(255, 30, 30, 0.15);

    padding: 80px 0 30px;

    overflow: hidden;

}


.op-footer::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    top: -250px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(255, 30, 30, 0.06);

    filter: blur(100px);

    pointer-events: none;

}


.op-footer-brand {

    display: inline-block;

}


.op-footer-brand img {

    width: 220px;

    max-width: 100%;

}


.op-footer-description {

    max-width: 420px;

    color: #8d8d8d;

    font-size: 15px;

    line-height: 1.8;

}


.op-footer-title {

    margin-bottom: 22px;

    color: var(--op-white);

    font-family: var(--op-heading-font);

    font-size: 18px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}


.op-footer-links li {

    margin-bottom: 12px;

}


.op-footer-links a {

    color: #777777;

    font-size: 14px;

}


.op-footer-links a:hover {

    color: var(--op-red);

    padding-left: 5px;

}


.op-social-links {

    display: flex;

    gap: 10px;

}


.op-social-link {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0d0d0d;

    border: 1px solid #222222;

    border-radius: 4px;

    color: #8a8a8a;

}


.op-social-link:hover {

    background: var(--op-red);

    border-color: var(--op-red);

    color: var(--op-white);

    transform: translateY(-3px);

}


.op-footer-divider {

    width: 100%;

    height: 1px;

    background: #1c1c1c;

    margin: 55px 0 25px;

}


.op-copyright,
.op-founder {

    color: #666666;

    font-size: 13px;

}


.op-copyright strong {

    color: #aaaaaa;

}


.op-founder span {

    color: var(--op-red);

}


/* =========================================================
   19. RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width: 991.98px) {

    :root {

        --op-section-padding: 80px;

    }

}


@media (max-width: 767.98px) {

    :root {

        --op-section-padding: 65px;

    }


    body {

        font-size: 15px;

    }


    .op-section-heading {

        margin-bottom: 40px;

    }


    .op-card {

        padding: 25px;

    }


    .op-footer {

        padding: 60px 0 25px;

    }


    .op-footer-divider {

        margin: 40px 0 20px;

    }


    .op-copyright,
    .op-founder {

        text-align: center;

    }


    .op-back-to-top {

        right: 15px;

        bottom: 15px;

        width: 42px;

        height: 42px;

    }

}


@media (max-width: 575.98px) {

    .op-btn {

        width: 100%;

    }


    .op-section-heading h2 {

        font-size: 2.1rem;

    }


    .op-terminal-body {

        padding: 20px;

        font-size: 13px;

    }

}

/* =========================================
   OFFENSIVE POINT FOOTER
========================================= */

.op-footer {
    position: relative;
    background: #050505;
    border-top: 1px solid rgba(255, 30, 30, 0.15);
    padding: 80px 0 30px;
    overflow: hidden;
}


/* Subtle red glow */

.op-footer::before {
    content: "";
    position: absolute;

    width: 400px;
    height: 400px;

    top: -250px;
    left: 50%;

    transform: translateX(-50%);

    background: rgba(255, 30, 30, 0.06);

    filter: blur(100px);

    pointer-events: none;
}


/* Footer Logo */

.op-footer-brand {
    display: inline-block;
    text-decoration: none;
}

.op-footer-brand img {
    width: 220px;
    max-width: 100%;
}


/* Description */

.op-footer-description {
    max-width: 420px;

    color: #8d8d8d;

    font-size: 15px;

    line-height: 1.8;
}


/* Footer Titles */

.op-footer-title {
    color: #ffffff;

    font-family: "Rajdhani", sans-serif;

    font-size: 18px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 22px;
}


/* Footer Links */

.op-footer-links {
    list-style: none;

    padding: 0;
    margin: 0;
}

.op-footer-links li {
    margin-bottom: 12px;
}

.op-footer-links a {
    color: #777777;

    text-decoration: none;

    font-size: 14px;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.op-footer-links a:hover {
    color: #ff1e1e;

    padding-left: 5px;
}


/* Social Links */

.op-social-links {
    display: flex;

    gap: 10px;
}

.op-social-link {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #8a8a8a;

    background: #0d0d0d;

    border: 1px solid #222222;

    border-radius: 4px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.op-social-link:hover {
    color: #ffffff;

    background: #ff1e1e;

    border-color: #ff1e1e;

    transform: translateY(-3px);
}


/* Divider */

.op-footer-divider {
    height: 1px;

    background: #1c1c1c;

    margin: 55px 0 25px;
}


/* Copyright */

.op-copyright {
    color: #666666;

    font-size: 13px;
}

.op-copyright strong {
    color: #aaaaaa;
}


/* Founder */

.op-founder {
    color: #666666;

    font-size: 13px;
}

.op-founder span {
    color: #ff1e1e;
}


/* =========================================
   BACK TO TOP
========================================= */

.op-back-to-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ff1e1e;

    color: #ffffff;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

    z-index: 999;
}

.op-back-to-top.show {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.op-back-to-top:hover {
    background: #d90000;
}



/* COURSE PAGE */

/* =========================================================
   COURSES PAGE
   HERO
========================================================= */

.op-courses-page-hero {

    position: relative;

    padding: 150px 0 110px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(255,30,30,0.06),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-courses-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;

}


.op-courses-page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.op-courses-page-hero h1 {

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.5rem,
        7vw,
        6.5rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-courses-page-hero h1 span {

    display: block;

    color: var(--op-red);

}


.op-courses-page-hero-content > p {

    max-width: 680px;

    color: #777777;

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   HERO STATS
========================================================= */

.op-courses-hero-stats {

    display: flex;

    align-items: center;

    gap: 40px;

    margin-top: 45px;

}


.op-courses-hero-stats div {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding-left: 15px;

    border-left: 1px solid #292929;

}


.op-courses-hero-stats strong {

    color: #aaaaaa;

    font-family: var(--op-heading-font);

    font-size: 22px;

}


.op-courses-hero-stats span {

    color: #4d4d4d;

    font-family: monospace;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =========================================================
   COURSE CATALOG SECTION
========================================================= */

.op-course-catalog-section {

    padding: 110px 0;

    background: #080808;

}


/* =========================================================
   PREMIUM SECTION
========================================================= */

.op-premium-courses-section {

    padding: 110px 0;

    background: #050505;

}


/* =========================================================
   CATALOG HEADER
========================================================= */

.op-catalog-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;

}


.op-catalog-header h2 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        4rem
    );

    line-height: 0.95;

}


.op-catalog-header h2 span {

    display: block;

    color: var(--op-red);

}


.op-catalog-header-description {

    max-width: 420px;

}


.op-catalog-header-description p {

    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   FREE COURSE CARD
========================================================= */

.op-course-catalog-card {

    height: 100%;

    background: #0b0b0b;

    border: 1px solid #1e1e1e;

    border-radius: 6px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease,

        box-shadow 0.4s ease;

}


.op-course-catalog-card:hover {

    transform: translateY(-7px);

    border-color: rgba(255,30,30,0.3);

    box-shadow:

        0 25px 60px rgba(0,0,0,0.5);

}


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

.op-catalog-card-visual {

    position: relative;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.06),
            transparent 55%
        ),

        #070707;

    border-bottom: 1px solid #1d1d1d;

    overflow: hidden;

}


.op-catalog-card-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    mask-image:

        radial-gradient(
            circle,
            black,
            transparent 75%
        );

}


.op-catalog-card-number {

    position: absolute;

    right: 18px;

    bottom: -7px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 100px;

    font-weight: 700;

}


.op-catalog-card-icon {

    position: relative;

    z-index: 2;

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.2);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 25px;

}


/* =========================================================
   STATUS
========================================================= */

.op-catalog-status {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    background: #0b0b0b;

    border: 1px solid #222222;

    border-radius: 3px;

    font-family: monospace;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-catalog-status i {

    font-size: 5px;

}


.op-catalog-status.available {

    color: #777777;

}


.op-catalog-status.available i {

    color: #777777;

}


.op-catalog-status.progress {

    color: #555555;

}


.op-catalog-status.progress i {

    color: var(--op-red);

}


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

.op-catalog-card-body {

    display: flex;

    flex-direction: column;

    min-height: 340px;

    padding: 28px;

}


.op-catalog-card-type {

    margin-bottom: 12px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-catalog-card-body h3 {

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 26px;

}


.op-catalog-card-body p {

    min-height: 92px;

    margin-bottom: 20px;

    color: #6b6b6b;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   TAGS
========================================================= */

.op-catalog-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 25px;

}


.op-catalog-tags span {

    padding: 5px 7px;

    background: #141414;

    border: 1px solid #222222;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


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

.op-catalog-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid #191919;

}


.op-course-platform {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #4d4d4d;

    font-family: monospace;

    font-size: 9px;

}


.op-course-platform i {

    color: #555555;

}


.op-catalog-course-link {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #777777;

    font-family: var(--op-heading-font);

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


.op-catalog-course-link i {

    color: var(--op-red);

    transition: transform 0.3s ease;

}


.op-catalog-course-link:hover {

    color: #ffffff;

}


.op-catalog-course-link:hover i {

    transform: translateX(4px);

}


.op-catalog-disabled-link {

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


/* =========================================================
   PREMIUM COURSE CARD
========================================================= */

.op-premium-course-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 38px 40px;

    margin-bottom: 15px;

    background:

        linear-gradient(
            90deg,
            rgba(255,30,30,0.025),
            transparent 60%
        ),

        #090909;

    border: 1px solid #202020;

    border-radius: 6px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease;

}


.op-premium-course-card:hover {

    transform: translateX(5px);

    border-color: rgba(255,30,30,0.3);

}


/* Featured */

.op-premium-course-card.featured {

    background:

        radial-gradient(
            circle at 20% 50%,
            rgba(255,30,30,0.06),
            transparent 45%
        ),

        #0a0a0a;

    border-color: rgba(255,30,30,0.18);

}


/* Number */

.op-premium-course-number {

    position: absolute;

    top: -15px;

    right: 20px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 120px;

    font-weight: 700;

    line-height: 1;

}


/* Featured label */

.op-premium-featured-label {

    position: absolute;

    top: 0;

    left: 40px;

    padding: 5px 9px;

    background: var(--op-red);

    color: #ffffff;

    font-family: monospace;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* Main */

.op-premium-course-main {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    max-width: 850px;

}


.op-premium-course-icon {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 21px;

}


.op-premium-course-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-premium-course-label span {

    color: var(--op-red);

}


.op-premium-course-content h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.05;

}


.op-premium-course-content h3 span {

    color: var(--op-red);

}


.op-premium-course-content p {

    margin-bottom: 20px;

    color: #6d6d6d;

    font-size: 13px;

    line-height: 1.8;

}


/* Tags */

.op-premium-course-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.op-premium-course-tags span {

    padding: 5px 7px;

    background: #141414;

    border: 1px solid #242424;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


/* =========================================================
   PREMIUM ACTION
========================================================= */

.op-premium-course-action {

    position: relative;

    z-index: 2;

    min-width: 220px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 18px;

}


.op-premium-course-action > span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    text-align: right;

}


.op-premium-course-action > span i {

    color: #555555;

}


/* =========================================================
   PREMIUM NOTE
========================================================= */

.op-premium-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 30px;

    padding: 18px 20px;

    background: #090909;

    border: 1px solid #181818;

    border-left: 2px solid #292929;

    border-radius: 4px;

}


.op-premium-note > div {

    color: #555555;

}


.op-premium-note p {

    margin: 0;

    color: #4d4d4d;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   COURSE PAGE CTA
========================================================= */

.op-course-page-cta {

    padding: 110px 0;

    background: #080808;

}


.op-course-page-cta-inner {

    position: relative;

    padding: 75px 30px;

    text-align: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.05),
            transparent 55%
        ),

        #0a0a0a;

    border: 1px solid #202020;

    border-radius: 6px;

    overflow: hidden;

}


.op-course-page-cta-inner h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5vw,
        4.5rem
    );

    line-height: 0.95;

}


.op-course-page-cta-inner h2 span {

    color: var(--op-red);

}


.op-course-page-cta-inner > p {

    max-width: 600px;

    margin: 0 auto 30px;

    color: #707070;

    font-size: 13px;

    line-height: 1.8;

}


.op-course-page-cta-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

}

/* LABS PAGE */

/* =========================================================
   LABS PAGE
   HERO
========================================================= */

.op-labs-page-hero {

    position: relative;

    padding: 150px 0 110px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(255,30,30,0.06),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-labs-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


.op-labs-page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.op-labs-page-hero h1 {

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.5rem,
        7vw,
        6.5rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-labs-page-hero h1 span {

    display: block;

    color: var(--op-red);

}


.op-labs-page-hero-content > p {

    max-width: 650px;

    color: #777777;

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   HERO STATS
========================================================= */

.op-labs-hero-stats {

    display: flex;

    gap: 40px;

    margin-top: 45px;

}


.op-labs-hero-stats div {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding-left: 15px;

    border-left: 1px solid #292929;

}


.op-labs-hero-stats strong {

    color: #aaaaaa;

    font-family: var(--op-heading-font);

    font-size: 22px;

}


.op-labs-hero-stats span {

    color: #4d4d4d;

    font-family: monospace;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =========================================================
   LAB INTRO / CATALOG
========================================================= */

.op-labs-intro-section {

    padding: 110px 0;

    background: #080808;

}


/* =========================================================
   CATALOG HEADER
========================================================= */

.op-labs-catalog-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;

}


.op-labs-catalog-header-left {

    max-width: 650px;

}


.op-labs-catalog-header-left h2 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        4rem
    );

    line-height: 0.95;

}


.op-labs-catalog-header-left h2 span {

    display: block;

    color: var(--op-red);

}


.op-labs-catalog-header-right {

    max-width: 420px;

}


.op-labs-catalog-header-right p {

    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.9;

}


.op-labs-header-line {

    width: 60px;

    height: 2px;

    margin-top: 25px;

    background: var(--op-red);

}


/* =========================================================
   TOOLBAR
========================================================= */

.op-labs-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

    padding: 14px 18px;

    background: #0a0a0a;

    border: 1px solid #1c1c1c;

    border-radius: 4px;

}


.op-labs-toolbar-left {

    display: flex;

    align-items: center;

    gap: 15px;

}


.op-labs-toolbar-label {

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-labs-toolbar-count {

    color: #444444;

    font-family: monospace;

    font-size: 8px;

}


.op-labs-toolbar-right {

    display: flex;

    gap: 15px;

}


.op-labs-toolbar-right span {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #4d4d4d;

    font-family: monospace;

    font-size: 8px;

}


.op-labs-toolbar-right i {

    font-size: 5px;

}


/* =========================================================
   LAB CATALOG CARD
========================================================= */

.op-lab-catalog-card {

    height: 100%;

    background: #0a0a0a;

    border: 1px solid #1e1e1e;

    border-radius: 6px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease,

        box-shadow 0.4s ease;

}


.op-lab-catalog-card:hover {

    transform: translateY(-7px);

    border-color: rgba(255,30,30,0.3);

    box-shadow:

        0 25px 60px rgba(0,0,0,0.5);

}


/* =========================================================
   LAB VISUAL
========================================================= */

.op-lab-catalog-visual {

    position: relative;

    height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at center,
            rgba(255,30,30,0.06),
            transparent 55%
        ),

        #060606;

    border-bottom: 1px solid #1c1c1c;

    overflow: hidden;

}


.op-lab-catalog-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    mask-image:

        radial-gradient(
            circle,
            black,
            transparent 75%
        );

}


/* =========================================================
   TERMINAL WINDOW
========================================================= */

.op-lab-terminal-window {

    position: relative;

    z-index: 2;

    width: 72%;

    background: #080808;

    border: 1px solid #262626;

    border-radius: 5px;

    box-shadow:

        0 20px 50px rgba(0,0,0,0.6);

    transition:

        transform 0.4s ease,

        border-color 0.4s ease;

}


.op-lab-catalog-card:hover
.op-lab-terminal-window {

    transform: translateY(-4px);

    border-color: #333333;

}


/* Terminal header */

.op-lab-terminal-header {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 9px 11px;

    background: #101010;

    border-bottom: 1px solid #1c1c1c;

}


.op-lab-terminal-header > span {

    width: 6px;

    height: 6px;

    background: #303030;

    border-radius: 50%;

}


.op-lab-terminal-header small {

    margin-left: 7px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

}


/* Terminal body */

.op-terminal-body {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 20px;

    font-family: monospace;

    font-size: 9px;

}


.op-terminal-body span {

    color: #555555;

}


.op-terminal-body strong {

    color: #888888;

    font-weight: 400;

}


.op-terminal-body strong::before {

    content: "> ";

    color: var(--op-red);

}


.op-terminal-body em {

    color: #4b4b4b;

    font-style: normal;

}


.op-terminal-body em:last-child {

    color: #666666;

}


/* =========================================================
   LAB NUMBER
========================================================= */

.op-lab-catalog-number {

    position: absolute;

    right: 18px;

    bottom: -10px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 120px;

    font-weight: 700;

    line-height: 1;

}


/* =========================================================
   FREE BADGE
========================================================= */

.op-lab-catalog-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 3;

    padding: 5px 9px;

    background: rgba(255,30,30,0.08);

    border: 1px solid rgba(255,30,30,0.25);

    border-radius: 3px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.2px;

}


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

.op-lab-catalog-body {

    display: flex;

    flex-direction: column;

    min-height: 330px;

    padding: 28px;

}


.op-lab-catalog-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-lab-level {

    display: flex;

    align-items: center;

    gap: 6px;

}


.op-lab-level i {

    font-size: 5px;

}


.op-lab-level.beginner {

    color: #777777;

}


.op-lab-level.intermediate {

    color: #999999;

}


.op-lab-level.beginner i {

    color: #666666;

}


.op-lab-level.intermediate i {

    color: var(--op-red);

}


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

.op-lab-catalog-body h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 28px;

    line-height: 1.05;

}


.op-lab-catalog-body h3 span {

    display: block;

    color: var(--op-red);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.op-lab-catalog-body > p {

    min-height: 75px;

    margin-bottom: 20px;

    color: #6b6b6b;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   TAGS
========================================================= */

.op-lab-catalog-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 25px;

}


.op-lab-catalog-tags span {

    padding: 5px 7px;

    background: #141414;

    border: 1px solid #222222;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


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

.op-lab-catalog-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid #191919;

}


.op-lab-catalog-info {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #4d4d4d;

    font-family: monospace;

    font-size: 8px;

}


.op-lab-catalog-info i {

    color: #555555;

}


.op-lab-catalog-link {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #777777;

    font-family: var(--op-heading-font);

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


.op-lab-catalog-link i {

    color: var(--op-red);

    transition: transform 0.3s ease;

}


.op-lab-catalog-link:hover {

    color: #ffffff;

}


.op-lab-catalog-link:hover i {

    transform: translateX(4px);

}


/* =========================================================
   HOW IT WORKS
========================================================= */

.op-labs-how-section {

    padding: 110px 0;

    background: #050505;

}


/* =========================================================
   STEPS
========================================================= */

.op-lab-steps {

    display: grid;

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

    border: 1px solid #202020;

}


.op-lab-step {

    position: relative;

    min-height: 280px;

    padding: 30px;

    background: #080808;

    border-right: 1px solid #202020;

    overflow: hidden;

}


.op-lab-step:last-child {

    border-right: 0;

}


.op-lab-step-number {

    position: absolute;

    top: 12px;

    right: 15px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 75px;

    font-weight: 700;

}


.op-lab-step-icon {

    position: relative;

    z-index: 2;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 4px;

    color: var(--op-red);

}


.op-lab-step h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 21px;

}


.op-lab-step p {

    position: relative;

    z-index: 2;

    margin: 0;

    color: #626262;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   FINAL CTA
========================================================= */

.op-labs-page-cta {

    padding: 110px 0;

    background: #080808;

}


.op-labs-page-cta-inner {

    position: relative;

    padding: 75px 30px;

    text-align: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.05),
            transparent 55%
        ),

        #0a0a0a;

    border: 1px solid #202020;

    border-radius: 6px;

    overflow: hidden;

}


.op-labs-page-cta-inner h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5vw,
        4.5rem
    );

    line-height: 0.95;

}


.op-labs-page-cta-inner h2 span {

    display: block;

    color: var(--op-red);

}


.op-labs-page-cta-inner p {

    max-width: 600px;

    margin: 0 auto 30px;

    color: #707070;

    font-size: 13px;

    line-height: 1.8;

}

/* LAB DETAIL PAGE */
/* =========================================================
   LAB DETAIL PAGE
   HEADER
========================================================= */

.op-lab-detail-header {

    padding: 125px 0 55px;

    background: #050505;

    border-bottom: 1px solid #181818;

}


.op-lab-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    color: #444444;

    font-family: monospace;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-lab-breadcrumb a {

    color: #666666;

}


.op-lab-breadcrumb a:hover {

    color: var(--op-red);

}


.op-lab-breadcrumb i {

    color: #333333;

    font-size: 7px;

}


.op-lab-detail-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

}


.op-lab-detail-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 15px;

}


.op-lab-detail-id {

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-lab-detail-status,
.op-lab-detail-level {

    padding: 5px 8px;

    border: 1px solid #242424;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-lab-detail-status {

    color: #666666;

}


.op-lab-detail-status i {

    margin-right: 5px;

    color: #777777;

    font-size: 5px;

}


.op-lab-detail-heading h1 {

    max-width: 850px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5vw,
        5rem
    );

    line-height: 0.95;

    letter-spacing: -1px;

}


.op-lab-detail-heading h1 span {

    display: block;

    color: var(--op-red);

}


.op-lab-detail-heading p {

    max-width: 700px;

    margin: 0;

    color: #686868;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   POINTS
========================================================= */

.op-lab-points {

    flex-shrink: 0;

    min-width: 130px;

    padding: 20px;

    text-align: center;

    background: #0a0a0a;

    border: 1px solid #222222;

    border-radius: 5px;

}


.op-lab-points strong {

    display: block;

    color: #ffffff;

    font-family: var(--op-heading-font);

    font-size: 34px;

    line-height: 1;

}


.op-lab-points span {

    display: block;

    margin-top: 8px;

    color: #444444;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


/* =========================================================
   WORKSPACE
========================================================= */

.op-lab-workspace {

    padding: 60px 0 100px;

    background: #080808;

}


/* =========================================================
   SIDEBAR
========================================================= */

.op-lab-sidebar {

    position: sticky;

    top: 100px;

    background: #0a0a0a;

    border: 1px solid #1d1d1d;

    border-radius: 5px;

    overflow: hidden;

}


.op-lab-sidebar-progress {

    padding: 20px;

    border-bottom: 1px solid #1d1d1d;

}


.op-lab-sidebar-progress-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

}


.op-lab-sidebar-progress-header span {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-lab-sidebar-progress-header strong {

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

}


.op-lab-progress-bar {

    width: 100%;

    height: 3px;

    background: #1d1d1d;

    overflow: hidden;

}


.op-lab-progress-bar span {

    display: block;

    height: 100%;

    background: var(--op-red);

}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.op-lab-sidebar-nav,
.op-lab-sidebar-section {

    padding: 20px;

    border-bottom: 1px solid #1d1d1d;

}


.op-lab-sidebar-label {

    display: block;

    margin-bottom: 12px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-lab-sidebar-link {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 8px;

    margin-bottom: 3px;

    color: #555555;

    border-left: 2px solid transparent;

    font-size: 10px;

}


.op-lab-sidebar-link:hover {

    color: #999999;

    background: #0e0e0e;

}


.op-lab-sidebar-link.active {

    color: #ffffff;

    background: #0e0e0e;

    border-left-color: var(--op-red);

}


.op-lab-sidebar-icon {

    width: 22px;

    text-align: center;

    color: #444444;

}


.op-lab-sidebar-link.active
.op-lab-sidebar-icon {

    color: var(--op-red);

}


.op-lab-sidebar-link small {

    margin-left: auto;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

}


/* =========================================================
   TOOLS
========================================================= */

.op-lab-tool-list {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

}


.op-lab-tool-list span {

    padding: 5px 7px;

    background: #111111;

    border: 1px solid #202020;

    border-radius: 3px;

    color: #4d4d4d;

    font-family: monospace;

    font-size: 7px;

}


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

.op-lab-main-content {

    min-width: 0;

}


.op-lab-content-section {

    margin-bottom: 25px;

    padding: 40px;

    background: #0a0a0a;

    border: 1px solid #1d1d1d;

    border-radius: 5px;

}


.op-lab-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-lab-section-label span {

    color: var(--op-red);

}


.op-lab-content-section h2 {

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 28px;

}


.op-lab-content-section > p {

    max-width: 800px;

    color: #6c6c6c;

    font-size: 13px;

    line-height: 1.9;

}


/* =========================================================
   TARGET INFORMATION
========================================================= */

.op-lab-target-box {

    margin: 30px 0;

    background: #080808;

    border: 1px solid #202020;

    border-radius: 4px;

    overflow: hidden;

}


.op-lab-target-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 17px;

    background: #0d0d0d;

    border-bottom: 1px solid #1c1c1c;

}


.op-lab-target-header > span:first-child {

    color: #777777;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-lab-target-header i {

    margin-right: 6px;

    color: var(--op-red);

}


.op-target-status {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

}


.op-lab-target-grid {

    display: grid;

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

}


.op-lab-target-grid div {

    padding: 18px;

    border-right: 1px solid #1c1c1c;

}


.op-lab-target-grid div:last-child {

    border-right: 0;

}


.op-lab-target-grid span {

    display: block;

    margin-bottom: 6px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-lab-target-grid strong {

    color: #777777;

    font-family: monospace;

    font-size: 9px;

    font-weight: 400;

}


/* =========================================================
   OBJECTIVES
========================================================= */

.op-lab-objectives {

    margin-top: 35px;

}


.op-lab-objectives h3 {

    margin-bottom: 15px;

    color: #aaaaaa;

    font-size: 16px;

}


.op-lab-objectives ul {

    display: grid;

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

    gap: 10px;

    padding: 0;

    margin: 0;

    list-style: none;

}


.op-lab-objectives li {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: #666666;

    font-size: 11px;

    line-height: 1.6;

}


.op-lab-objectives i {

    margin-top: 3px;

    color: #555555;

    font-size: 9px;

}


/* =========================================================
   TASK HEADER
========================================================= */

.op-lab-task-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

}


.op-lab-task-header h2 {

    margin-bottom: 15px;

}


.op-lab-task-points {

    flex-shrink: 0;

    padding: 6px 9px;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 3px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

}


/* =========================================================
   HINT
========================================================= */

.op-lab-hint-box {

    display: flex;

    gap: 12px;

    margin: 25px 0;

    padding: 17px;

    background: #0d0d0d;

    border: 1px solid #1e1e1e;

    border-left: 2px solid #333333;

    border-radius: 3px;

}


.op-lab-hint-box > i {

    color: #555555;

    margin-top: 2px;

}


.op-lab-hint-box strong {

    display: block;

    margin-bottom: 5px;

    color: #777777;

    font-family: monospace;

    font-size: 9px;

}


.op-lab-hint-box p {

    margin: 0;

    color: #555555;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   QUESTION
========================================================= */

.op-lab-question {

    margin-top: 25px;

    padding: 25px;

    background: #080808;

    border: 1px solid #1e1e1e;

    border-radius: 4px;

}


.op-lab-question-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

}


.op-lab-question-header span {

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-lab-question-header strong {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-lab-question h3 {

    margin-bottom: 20px;

    color: #aaaaaa;

    font-size: 15px;

    line-height: 1.5;

}


/* =========================================================
   ANSWER INPUTS
========================================================= */

.op-lab-answer-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.op-lab-answer-input,
.op-lab-text-input {

    width: 100%;

    padding: 13px 14px;

    background: #0d0d0d;

    border: 1px solid #252525;

    border-radius: 3px;

    color: #aaaaaa;

    font-family: monospace;

    font-size: 11px;

    outline: none;

    resize: vertical;

}


.op-lab-answer-input:focus,
.op-lab-text-input:focus {

    border-color: rgba(255,30,30,0.4);

    box-shadow:

        0 0 0 2px rgba(255,30,30,0.03);

}


.op-lab-answer-input::placeholder,
.op-lab-text-input::placeholder {

    color: #353535;

}


/* =========================================================
   FLAG BOX
========================================================= */

.op-lab-flag-box {

    margin-top: 25px;

    padding: 25px;

    background:

        linear-gradient(
            90deg,
            rgba(255,30,30,0.035),
            transparent
        ),

        #090909;

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 4px;

}


.op-lab-flag-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

}


.op-lab-flag-header > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.op-lab-flag-header i {

    color: var(--op-red);

}


.op-lab-flag-header strong {

    color: #999999;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1px;

}


.op-lab-flag-header > span {

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

}


.op-lab-flag-box > p {

    margin-bottom: 18px;

    color: #555555;

    font-size: 11px;

}


.op-lab-flag-form {

    display: flex;

    gap: 10px;

}


.op-lab-flag-input-wrapper {

    flex: 1;

    display: flex;

    align-items: center;

    padding: 0 13px;

    background: #070707;

    border: 1px solid #252525;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 11px;

}


.op-lab-flag-input-wrapper:focus-within {

    border-color: rgba(255,30,30,0.4);

}


.op-lab-flag-input-wrapper input {

    width: 100%;

    padding: 13px 3px;

    background: transparent;

    border: 0;

    outline: 0;

    color: #999999;

    font-family: monospace;

    font-size: 11px;

}


.op-lab-flag-input-wrapper input::placeholder {

    color: #333333;

}


/* =========================================================
   RADIO CHOICES
========================================================= */

.op-lab-choice-group {

    display: flex;

    gap: 10px;

    margin-bottom: 15px;

}


.op-lab-choice-group label {

    cursor: pointer;

}


.op-lab-choice-group input {

    display: none;

}


.op-lab-choice-group label span {

    display: block;

    min-width: 100px;

    padding: 10px 15px;

    text-align: center;

    background: #0d0d0d;

    border: 1px solid #242424;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 9px;

}


.op-lab-choice-group input:checked + span {

    color: #ffffff;

    background: rgba(255,30,30,0.06);

    border-color: rgba(255,30,30,0.4);

}


/* =========================================================
   FINAL FLAG
========================================================= */

.op-lab-final-flag {

    margin-top: 30px;

    padding: 35px;

    text-align: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.05),
            transparent 60%
        ),

        #080808;

    border: 1px solid #252525;

    border-radius: 4px;

}


.op-lab-final-flag-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 18px;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 50%;

    color: var(--op-red);

}


.op-lab-final-flag h3 {

    margin-bottom: 10px;

    color: #ffffff;

    font-size: 20px;

}


.op-lab-final-flag p {

    margin-bottom: 20px;

    color: #555555;

    font-size: 11px;

}


.op-lab-final-form {

    max-width: 550px;

    display: flex;

    gap: 10px;

    margin: auto;

}


.op-lab-final-form input {

    flex: 1;

    padding: 13px 15px;

    background: #0d0d0d;

    border: 1px solid #252525;

    border-radius: 3px;

    color: #aaa;

    font-family: monospace;

    font-size: 11px;

    outline: none;

}


.op-lab-final-form input:focus {

    border-color: rgba(255,30,30,0.4);

}


/* =========================================================
   SUBMISSIONS
========================================================= */

.op-lab-submissions {

    margin-top: 25px;

    border: 1px solid #1e1e1e;

    border-radius: 4px;

    overflow: hidden;

}


.op-lab-submission-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 18px;

    border-bottom: 1px solid #1b1b1b;

}


.op-lab-submission-row:last-child {

    border-bottom: 0;

}


.op-lab-submission-row div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.op-lab-submission-row div span {

    color: #777777;

    font-size: 10px;

}


.op-lab-submission-row div small {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

}


.op-lab-submission-row strong {

    font-family: monospace;

    font-size: 8px;

}


.op-lab-submission-row strong.pending {

    color: #777777;

}


.op-lab-submission-row strong.not-submitted {

    color: #333333;

}


/* =========================================================
   COMPLETION
========================================================= */

.op-lab-completion-section {

    padding: 0 0 100px;

    background: #080808;

}


.op-lab-completion-box {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 25px 30px;

    background: #0a0a0a;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-lab-completion-box > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 4px;

    color: var(--op-red);

}


.op-lab-completion-box div {

    flex: 1;

}


.op-lab-completion-box div span {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-lab-completion-box h2 {

    margin: 5px 0 0;

    color: #aaaaaa;

    font-size: 17px;

}

/* LIVE TRAINING PAGE */
/* =========================================================
   LIVE TRAINING PAGE
   HERO
========================================================= */

.op-live-hero {

    position: relative;

    padding: 155px 0 120px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(255,30,30,0.08),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-live-hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


.op-live-hero-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

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

    background: rgba(255,30,30,0.04);

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;

}


.op-live-hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    text-align: center;

    margin: auto;

}


/* =========================================================
   STATUS
========================================================= */

.op-live-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    padding: 7px 11px;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.2);

    border-radius: 3px;

    color: #777777;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.2px;

}


.op-live-status-dot {

    width: 5px;

    height: 5px;

    background: var(--op-red);

    border-radius: 50%;

    box-shadow:

        0 0 10px rgba(255,30,30,0.7);

    animation: op-live-pulse 2s infinite;

}


@keyframes op-live-pulse {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.35;

    }

}


.op-live-hero h1 {

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.7rem,
        7vw,
        6.5rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-live-hero h1 span {

    display: block;

    color: var(--op-red);

}


.op-live-hero-content > p {

    max-width: 700px;

    margin: 0 auto;

    color: #737373;

    font-size: 15px;

    line-height: 1.9;

}


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

.op-live-hero-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 35px;

}


.op-live-hero-note {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 30px;

}


.op-live-hero-note span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}


.op-live-hero-note i {

    color: #555555;

}


/* =========================================================
   POSITIONING
========================================================= */

.op-live-positioning {

    padding: 110px 0;

    background: #080808;

}


.op-live-positioning-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: start;

}


.op-live-positioning h2,
.op-live-section-header h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.6rem,
        5vw,
        4.2rem
    );

    line-height: 0.95;

}


.op-live-positioning h2 span,
.op-live-section-header h2 span {

    display: block;

    color: var(--op-red);

}


.op-live-positioning-grid > div:last-child {

    padding-top: 15px;

}


.op-live-positioning-grid p {

    margin-bottom: 20px;

    color: #6c6c6c;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   LEARNING
========================================================= */

.op-live-learning-section {

    padding: 110px 0;

    background: #050505;

}


.op-live-section-header {

    max-width: 700px;

    margin-bottom: 55px;

}


.op-live-section-header > p {

    max-width: 600px;

    color: #666666;

    font-size: 13px;

    line-height: 1.8;

}


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

.op-live-learning-card {

    position: relative;

    display: flex;

    gap: 25px;

    height: 100%;

    padding: 32px;

    background: #0a0a0a;

    border: 1px solid #1e1e1e;

    border-radius: 5px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease;

}


.op-live-learning-card:hover {

    transform: translateY(-6px);

    border-color: rgba(255,30,30,0.3);

}


.op-live-learning-number {

    position: absolute;

    right: 15px;

    bottom: -10px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 100px;

    font-weight: 700;

}


.op-live-learning-icon {

    position: relative;

    z-index: 2;

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 5px;

    color: var(--op-red);

}


.op-live-card-label {

    display: block;

    margin-bottom: 8px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.3px;

}


.op-live-learning-card h3 {

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 21px;

}


.op-live-learning-card p {

    margin-bottom: 18px;

    color: #636363;

    font-size: 12px;

    line-height: 1.8;

}


.op-live-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

}


.op-live-tags span {

    padding: 5px 7px;

    background: #141414;

    border: 1px solid #222222;

    border-radius: 3px;

    color: #505050;

    font-family: monospace;

    font-size: 7px;

}


/* =========================================================
   TRAINING FORMAT
========================================================= */

.op-live-format-section {

    padding: 110px 0;

    background: #080808;

}


.op-live-format-grid {

    display: grid;

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

    border: 1px solid #202020;

}


.op-live-format-card {

    position: relative;

    min-height: 290px;

    padding: 32px;

    background: #090909;

    border-right: 1px solid #202020;

    overflow: hidden;

}


.op-live-format-card:last-child {

    border-right: 0;

}


.op-live-format-number {

    position: absolute;

    right: 12px;

    top: -8px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 90px;

    font-weight: 700;

}


.op-live-format-card > i {

    position: relative;

    z-index: 2;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 4px;

    color: var(--op-red);

}


.op-live-format-card h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 18px;

}


.op-live-format-card p {

    position: relative;

    z-index: 2;

    margin: 0;

    color: #5f5f5f;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   AUDIENCE
========================================================= */

.op-live-audience-section {

    padding: 110px 0;

    background: #050505;

}


.op-live-audience-description {

    max-width: 550px;

    margin-top: 25px;

    color: #696969;

    font-size: 13px;

    line-height: 1.9;

}


.op-live-audience-list {

    border-top: 1px solid #1d1d1d;

}


.op-live-audience-list > div {

    display: flex;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #1d1d1d;

}


.op-live-audience-list > div > i {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0b0b0b;

    border: 1px solid #202020;

    border-radius: 4px;

    color: #777777;

}


.op-live-audience-list h3 {

    margin-bottom: 6px;

    color: #aaaaaa;

    font-size: 14px;

}


.op-live-audience-list p {

    margin: 0;

    color: #555555;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   EARLY ACCESS
========================================================= */

.op-live-early-section {

    padding: 110px 0;

    background: #080808;

}


.op-live-early-box {

    display: grid;

    grid-template-columns:
        1fr 420px;

    gap: 70px;

    align-items: center;

    padding: 65px;

    background:

        radial-gradient(
            circle at 20% 50%,
            rgba(255,30,30,0.06),
            transparent 50%
        ),

        #0a0a0a;

    border: 1px solid #242424;

    border-radius: 6px;

}


.op-live-early-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.7rem,
        5vw,
        4.5rem
    );

    line-height: 0.95;

}


.op-live-early-content h2 span {

    display: block;

    color: var(--op-red);

}


.op-live-early-content > p {

    max-width: 560px;

    color: #6b6b6b;

    font-size: 13px;

    line-height: 1.9;

}


.op-live-early-benefits {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 25px;

}


.op-live-early-benefits span {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-live-early-benefits i {

    color: var(--op-red);

}


/* =========================================================
   FORM
========================================================= */

.op-live-early-form-wrapper {

    padding: 25px;

    background: #070707;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-live-early-form {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.op-live-form-field {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.op-live-form-field label {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-live-form-field input,
.op-live-form-field select {

    width: 100%;

    padding: 13px 14px;

    background: #0d0d0d;

    border: 1px solid #252525;

    border-radius: 3px;

    outline: none;

    color: #888888;

    font-family: monospace;

    font-size: 10px;

}


.op-live-form-field input::placeholder {

    color: #383838;

}


.op-live-form-field input:focus,
.op-live-form-field select:focus {

    border-color: rgba(255,30,30,0.4);

}


.op-live-form-field select {

    appearance: auto;

}


.op-live-early-form .op-btn {

    width: 100%;

    margin-top: 5px;

}


.op-live-early-form small {

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    line-height: 1.6;

    text-align: center;

}


/* =========================================================
   FINAL
========================================================= */

.op-live-final-section {

    padding: 110px 0;

    background: #050505;

}


.op-live-final-content {

    text-align: center;

}


.op-live-final-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5vw,
        4.5rem
    );

    line-height: 0.95;

}


.op-live-final-content h2 span {

    color: var(--op-red);

}


.op-live-final-content > p {

    max-width: 550px;

    margin: 0 auto 30px;

    color: #666666;

    font-size: 13px;

    line-height: 1.8;

}


.op-live-final-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

}

/* ABOUT PAGE */
/* =========================================================
   ABOUT PAGE
   HERO
========================================================= */

.op-about-hero {

    position: relative;

    padding: 155px 0 115px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(255,30,30,0.07),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-about-hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


.op-about-hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

}


.op-about-hero h1 {

    max-width: 850px;

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.5rem,
        7vw,
        6.2rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-about-hero h1 span {

    display: block;

    color: var(--op-red);

}


.op-about-hero-content > p {

    max-width: 700px;

    color: #707070;

    font-size: 15px;

    line-height: 1.9;

}


.op-about-hero-line {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 40px;

}


.op-about-hero-line span {

    width: 55px;

    height: 1px;

    background: var(--op-red);

}


.op-about-hero-line small {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1.5px;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.op-about-introduction {

    padding: 110px 0;

    background: #080808;

}


.op-about-two-column {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 100px;

}


.op-about-two-column h2 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(
        2.6rem,
        5vw,
        4.3rem
    );

    line-height: 0.95;

}


.op-about-two-column h2 span {

    display: block;

    color: var(--op-red);

}


.op-about-two-column > div:last-child {

    padding-top: 5px;

}


.op-about-two-column p {

    margin-bottom: 20px;

    color: #666666;

    font-size: 13px;

    line-height: 1.9;

}


.op-about-large-text {

    color: #999999 !important;

    font-size: 18px !important;

    line-height: 1.7 !important;

}


/* =========================================================
   MISSION / VISION
========================================================= */

.op-about-mission-section {

    padding: 110px 0;

    background: #050505;

}


.op-about-mission-card {

    position: relative;

    height: 100%;

    padding: 45px;

    background:

        radial-gradient(
            circle at top right,
            rgba(255,30,30,0.05),
            transparent 45%
        ),

        #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    overflow: hidden;

}


.op-about-mission-card.vision {

    background:

        radial-gradient(
            circle at top right,
            rgba(255,255,255,0.025),
            transparent 45%
        ),

        #090909;

}


.op-about-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 40px;

}


.op-about-card-number {

    color: rgba(255,255,255,0.04);

    font-family: var(--op-heading-font);

    font-size: 75px;

    font-weight: 700;

    line-height: 0.8;

}


.op-about-card-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 4px;

    color: var(--op-red);

}


.op-about-card-label {

    display: block;

    margin-bottom: 15px;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.op-about-mission-card h2 {

    max-width: 500px;

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.05;

}


.op-about-mission-card h2 span {

    color: var(--op-red);

}


.op-about-mission-card p {

    max-width: 600px;

    color: #626262;

    font-size: 12px;

    line-height: 1.9;

}


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

.op-about-difference-section {

    padding: 110px 0;

    background: #080808;

}


.op-about-section-heading {

    max-width: 700px;

    margin-bottom: 55px;

}


.op-about-section-heading h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.6rem,
        5vw,
        4.3rem
    );

    line-height: 0.95;

}


.op-about-section-heading h2 span {

    display: block;

    color: var(--op-red);

}


.op-about-section-heading p {

    max-width: 620px;

    color: #666666;

    font-size: 13px;

    line-height: 1.9;

}


/* =========================================================
   PRINCIPLES
========================================================= */

.op-about-principle {

    position: relative;

    height: 100%;

    min-height: 280px;

    padding: 30px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    overflow: hidden;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease;

}


.op-about-principle:hover {

    transform: translateY(-6px);

    border-color: rgba(255,30,30,0.25);

}


.op-about-principle-number {

    position: absolute;

    top: -8px;

    right: 10px;

    color: rgba(255,255,255,0.025);

    font-family: var(--op-heading-font);

    font-size: 90px;

    font-weight: 700;

}


.op-about-principle > i {

    position: relative;

    z-index: 2;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 35px;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.13);

    border-radius: 4px;

    color: var(--op-red);

}


.op-about-principle h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 18px;

}


.op-about-principle p {

    position: relative;

    z-index: 2;

    margin: 0;

    color: #5d5d5d;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   PLATFORM
========================================================= */

.op-about-platform-section {

    padding: 110px 0;

    background: #050505;

}


.op-about-platform-intro {

    max-width: 500px;

    margin-top: 25px;

    color: #666666;

    font-size: 13px;

    line-height: 1.9;

}


.op-about-platform-list {

    border-top: 1px solid #1d1d1d;

}


.op-about-platform-item {

    display: flex;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid #1d1d1d;

}


.op-about-platform-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0a0a0a;

    border: 1px solid #202020;

    border-radius: 4px;

    color: #666666;

}


.op-about-platform-item > div:last-child > span {

    display: block;

    margin-bottom: 5px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-about-platform-item h3 {

    margin-bottom: 7px;

    color: #aaaaaa;

    font-size: 17px;

}


.op-about-platform-item p {

    max-width: 600px;

    margin: 0;

    color: #555555;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   VALUES
========================================================= */

.op-about-values-section {

    padding: 110px 0;

    background: #080808;

}


.op-about-values-grid {

    display: grid;

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

    border-top: 1px solid #202020;

    border-left: 1px solid #202020;

}


.op-about-value {

    min-height: 230px;

    padding: 35px;

    border-right: 1px solid #202020;

    border-bottom: 1px solid #202020;

}


.op-about-value > span {

    display: block;

    margin-bottom: 30px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.op-about-value h3 {

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 20px;

}


.op-about-value p {

    max-width: 550px;

    margin: 0;

    color: #5e5e5e;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   RESPONSIBLE SECURITY
========================================================= */

.op-about-security-section {

    padding: 110px 0;

    background: #050505;

}


.op-about-security-box {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 35px;

    padding: 55px;

    background:

        radial-gradient(
            circle at left,
            rgba(255,30,30,0.05),
            transparent 50%
        ),

        #090909;

    border: 1px solid #202020;

    border-left: 2px solid var(--op-red);

    border-radius: 5px;

}


.op-about-security-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 5px;

    color: var(--op-red);

    font-size: 22px;

}


.op-about-security-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.4rem,
        4vw,
        3.8rem
    );

    line-height: 0.95;

}


.op-about-security-content h2 span {

    color: var(--op-red);

}


.op-about-security-content p {

    max-width: 750px;

    color: #636363;

    font-size: 12px;

    line-height: 1.9;

}


/* =========================================================
   FUTURE
========================================================= */

.op-about-future-section {

    padding: 110px 0;

    background: #080808;

}


.op-about-future-content {

    max-width: 850px;

}


.op-about-future-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5rem
    );

    line-height: 0.95;

}


.op-about-future-content h2 span {

    color: var(--op-red);

}


.op-about-future-content > p {

    max-width: 700px;

    color: #656565;

    font-size: 13px;

    line-height: 1.9;

}


.op-about-future-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;

}


.op-about-future-list span {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 10px;

    background: #0c0c0c;

    border: 1px solid #1e1e1e;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-about-future-list i {

    color: var(--op-red);

}


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

.op-about-cta-section {

    padding: 110px 0;

    background: #050505;

}


.op-about-cta {

    position: relative;

    padding: 80px 30px;

    text-align: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.06),
            transparent 55%
        ),

        #090909;

    border: 1px solid #222222;

    border-radius: 6px;

    overflow: hidden;

}


.op-about-cta h2 {

    max-width: 800px;

    margin: 18px auto;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5vw,
        4.8rem
    );

    line-height: 0.95;

}


.op-about-cta h2 span {

    color: var(--op-red);

}


.op-about-cta p {

    max-width: 600px;

    margin: 0 auto 30px;

    color: #666666;

    font-size: 13px;

    line-height: 1.8;

}


.op-about-cta-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

}

/* CONTACT PAGE */
/* =========================================================
   CONTACT PAGE
   HERO
========================================================= */

.op-contact-hero {

    position: relative;

    padding: 150px 0 100px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(255,30,30,0.07),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-contact-hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


.op-contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.op-contact-hero h1 {

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.5rem,
        7vw,
        6rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-contact-hero h1 span {

    color: var(--op-red);

}


.op-contact-hero-content > p {

    max-width: 650px;

    color: #6b6b6b;

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   CONTACT MAIN
========================================================= */

.op-contact-main {

    padding: 110px 0;

    background: #080808;

}


/* =========================================================
   CONTACT INFO
========================================================= */

.op-contact-info {

    padding-right: 30px;

}


.op-contact-info h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.6rem,
        5vw,
        4rem
    );

    line-height: 0.95;

}


.op-contact-info h2 span {

    display: block;

    color: var(--op-red);

}


.op-contact-info > p {

    max-width: 500px;

    margin-bottom: 40px;

    color: #636363;

    font-size: 12px;

    line-height: 1.9;

}


.op-contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 20px 0;

    border-top: 1px solid #1d1d1d;

}


.op-contact-info-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0b0b0b;

    border: 1px solid #202020;

    border-radius: 4px;

    color: #666666;

}


.op-contact-info-item > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.op-contact-info-item span {

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.2px;

}


.op-contact-info-item a {

    color: #999999;

    font-family: monospace;

    font-size: 10px;

}


.op-contact-info-item a:hover {

    color: var(--op-red);

}


.op-contact-info-item p {

    margin: 0;

    color: #666666;

    font-size: 10px;

    line-height: 1.6;

}


/* =========================================================
   SOCIALS
========================================================= */

.op-contact-socials {

    padding-top: 30px;

}


.op-contact-social-label {

    display: block;

    margin-bottom: 12px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1.2px;

}


.op-contact-social-links {

    display: flex;

    gap: 7px;

}


.op-contact-social-links a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0b0b0b;

    border: 1px solid #202020;

    border-radius: 3px;

    color: #555555;

    font-size: 12px;

    transition:

        color 0.3s ease,

        border-color 0.3s ease;

}


.op-contact-social-links a:hover {

    color: var(--op-red);

    border-color: rgba(255,30,30,0.3);

}


/* =========================================================
   CONTACT FORM
========================================================= */

.op-contact-form-wrapper {

    padding: 40px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-contact-form-header {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 35px;

}


.op-contact-form-number {

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1px;

}


.op-contact-form-header h2 {

    margin: 12px 0 0;

    color: #ffffff;

    font-size: 26px;

}


.op-contact-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.op-contact-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.op-contact-field label {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.op-contact-field input,
.op-contact-field select,
.op-contact-field textarea {

    width: 100%;

    padding: 13px 14px;

    background: #0d0d0d;

    border: 1px solid #252525;

    border-radius: 3px;

    outline: none;

    color: #999999;

    font-family: monospace;

    font-size: 10px;

}


.op-contact-field textarea {

    resize: vertical;

    min-height: 150px;

}


.op-contact-field input::placeholder,
.op-contact-field textarea::placeholder {

    color: #383838;

}


.op-contact-field input:focus,
.op-contact-field select:focus,
.op-contact-field textarea:focus {

    border-color: rgba(255,30,30,0.4);

    box-shadow:

        0 0 0 2px rgba(255,30,30,0.025);

}


.op-contact-consent {

    padding: 5px 0;

}


.op-contact-consent label {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    cursor: pointer;

}


.op-contact-consent input {

    margin-top: 2px;

    accent-color: var(--op-red);

}


.op-contact-consent span {

    color: #4d4d4d;

    font-family: monospace;

    font-size: 7px;

    line-height: 1.7;

}


.op-contact-form > .op-btn {

    align-self: flex-start;

}


/* =========================================================
   QUICK OPTIONS
========================================================= */

.op-contact-options {

    padding: 110px 0;

    background: #050505;

}


.op-contact-section-header {

    max-width: 700px;

    margin-bottom: 50px;

}


.op-contact-section-header h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        2.6rem,
        5vw,
        4.2rem
    );

    line-height: 0.95;

}


.op-contact-section-header h2 span {

    color: var(--op-red);

}


.op-contact-option {

    position: relative;

    display: block;

    height: 100%;

    padding: 30px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    transition:

        transform 0.4s ease,

        border-color 0.4s ease;

}


.op-contact-option:hover {

    transform: translateY(-6px);

    border-color: rgba(255,30,30,0.25);

}


.op-contact-option-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.13);

    border-radius: 4px;

    color: var(--op-red);

}


.op-contact-option > span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.3px;

}


.op-contact-option h3 {

    margin: 8px 0 10px;

    color: #ffffff;

    font-size: 19px;

}


.op-contact-option p {

    max-width: 330px;

    margin: 0;

    color: #5d5d5d;

    font-size: 11px;

    line-height: 1.8;

}


.op-contact-option-arrow {

    position: absolute;

    right: 25px;

    bottom: 25px;

    color: #333333;

    transition: color 0.3s ease;

}


.op-contact-option:hover
.op-contact-option-arrow {

    color: var(--op-red);

}


/* =========================================================
   FAQ
========================================================= */

.op-contact-faq {

    padding: 110px 0;

    background: #080808;

}


.op-contact-faq-list {

    max-width: 900px;

    border-top: 1px solid #202020;

}


.op-contact-faq-item {

    border-bottom: 1px solid #202020;

}


.op-contact-faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 0;

    background: transparent;

    border: 0;

    outline: 0;

    color: #999999;

    font-size: 13px;

    text-align: left;

}


.op-contact-faq-question:hover {

    color: #ffffff;

}


.op-contact-faq-question i {

    color: #444444;

    font-size: 9px;

    transition:

        transform 0.3s ease,

        color 0.3s ease;

}


.op-contact-faq-question[aria-expanded="true"] i {

    color: var(--op-red);

    transform: rotate(45deg);

}


.op-contact-faq-answer {

    max-width: 750px;

    padding: 0 35px 25px 0;

    color: #5d5d5d;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   FINAL CTA
========================================================= */

.op-contact-final {

    padding: 110px 0;

    background: #050505;

}


.op-contact-final-content {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.op-contact-final-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5rem
    );

    line-height: 0.95;

}


.op-contact-final-content h2 span {

    color: var(--op-red);

}


.op-contact-final-content p {

    max-width: 600px;

    margin: 0 auto 30px;

    color: #626262;

    font-size: 13px;

    line-height: 1.8;

}

.op-contact-final-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}

/* PRIVACY POLICY PAGE */

/* =========================================================
   LEGAL PAGES
   PRIVACY POLICY
========================================================= */


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

.op-legal-hero {

    position: relative;

    padding: 150px 0 95px;

    background:

        radial-gradient(
            circle at 45% 30%,
            rgba(255,30,30,0.06),
            transparent 45%
        ),

        #050505;

    overflow: hidden;

}


.op-legal-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


.op-legal-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.op-legal-hero h1 {

    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(
        3.5rem,
        7vw,
        6rem
    );

    line-height: 0.9;

    letter-spacing: -2px;

}


.op-legal-hero h1 span {

    color: var(--op-red);

}


.op-legal-hero-content > p {

    max-width: 700px;

    color: #686868;

    font-size: 13px;

    line-height: 1.9;

}


.op-legal-meta {

    margin-top: 30px;

}


.op-legal-meta span {

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


/* =========================================================
   MAIN
========================================================= */

.op-legal-section {

    padding: 90px 0 110px;

    background: #080808;

}


/* =========================================================
   SIDEBAR
========================================================= */

.op-legal-sidebar {

    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    border-left: 1px solid #202020;

}


.op-legal-sidebar-title {

    padding: 0 0 15px 18px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.2px;

}


.op-legal-sidebar a {

    position: relative;

    padding: 8px 15px 8px 18px;

    color: #505050;

    font-family: monospace;

    font-size: 8px;

    line-height: 1.5;

    transition:

        color 0.3s ease,

        padding-left 0.3s ease;

}


.op-legal-sidebar a:hover {

    padding-left: 23px;

    color: var(--op-red);

}


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

.op-legal-content {

    max-width: 850px;

}


.op-legal-content section {

    position: relative;

    padding-bottom: 65px;

    margin-bottom: 65px;

    border-bottom: 1px solid #1d1d1d;

    scroll-margin-top: 100px;

}


.op-legal-content section:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0;

}


.op-legal-number {

    display: block;

    margin-bottom: 15px;

    color: var(--op-red);

    font-family: monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1px;

}


.op-legal-content h2 {

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 27px;

    line-height: 1.1;

}


.op-legal-content h3 {

    margin-top: 30px;

    margin-bottom: 13px;

    color: #aaaaaa;

    font-size: 15px;

}


.op-legal-content p {

    margin-bottom: 18px;

    color: #626262;

    font-size: 12px;

    line-height: 2;

}


.op-legal-content ul {

    padding-left: 20px;

    margin: 20px 0 25px;

}


.op-legal-content li {

    margin-bottom: 9px;

    padding-left: 5px;

    color: #626262;

    font-size: 12px;

    line-height: 1.8;

}


.op-legal-content li::marker {

    color: #3f3f3f;

}


/* =========================================================
   CONTACT BOX
========================================================= */

.op-legal-contact-box {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 30px;

}


.op-legal-contact-box > div {

    min-width: 220px;

    padding: 20px;

    background: #0b0b0b;

    border: 1px solid #202020;

    border-radius: 4px;

}


.op-legal-contact-box span {

    display: block;

    margin-bottom: 8px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

}


.op-legal-contact-box a {

    color: #888888;

    font-family: monospace;

    font-size: 9px;

}


.op-legal-contact-box a:hover {

    color: var(--op-red);

}


/* =========================================================
   FINAL CTA
========================================================= */

.op-legal-final {

    padding: 110px 0;

    background: #050505;

}


.op-legal-final-content {

    max-width: 750px;

    margin: auto;

    text-align: center;

}


.op-legal-final-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5rem
    );

    line-height: 0.95;

}


.op-legal-final-content h2 span {

    color: var(--op-red);

}


.op-legal-final-content p {

    max-width: 600px;

    margin: 0 auto 30px;

    color: #606060;

    font-size: 12px;

    line-height: 1.9;

}

/* TERMS AND CONDITIONS PAGE */
/* =========================================================
   TERMS - SECURITY WARNING
========================================================= */

.op-legal-warning-box {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin: 30px 0;

    padding: 22px;

    background: rgba(255, 30, 30, 0.035);

    border: 1px solid rgba(255, 30, 30, 0.14);

    border-left: 2px solid var(--op-red);

    border-radius: 4px;

}


.op-legal-warning-box > i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--op-red);

}


.op-legal-warning-box strong {

    display: block;

    margin-bottom: 8px;

    color: #aaaaaa;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


.op-legal-warning-box p {

    margin: 0;

    color: #5e5e5e;

    font-size: 11px;

    line-height: 1.8;

}


@media (max-width: 575.98px) {

    .op-legal-warning-box {

        padding: 18px;

    }

}

/* =========================================================
   USER DASHBOARD
========================================================= */


/* =========================================================
   DASHBOARD HERO
========================================================= */

.op-dashboard {

    background: #050505;

}


.op-dashboard-hero {

    position: relative;

    padding: 145px 0 70px;

    background:

        radial-gradient(
            circle at 70% 20%,
            rgba(255,30,30,0.055),
            transparent 40%
        ),

        #050505;

    overflow: hidden;

}


.op-dashboard-welcome {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

}


.op-dashboard-welcome h1 {

    margin: 18px 0 12px;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height: 0.95;

}


.op-dashboard-welcome h1 span {

    color: var(--op-red);

}


.op-dashboard-welcome p {

    max-width: 650px;

    margin: 0;

    color: #5f5f5f;

    font-size: 12px;

    line-height: 1.8;

}


.op-dashboard-profile {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.op-dashboard-avatar {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: rgba(255,30,30,0.08);

    border: 1px solid rgba(255,30,30,0.25);

    border-radius: 50%;

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 20px;

    font-weight: 700;

}


.op-dashboard-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.op-dashboard-profile strong {

    display: block;

    color: #aaaaaa;

    font-size: 11px;

}


.op-dashboard-profile span {

    display: block;

    margin-top: 4px;

    color: #444444;

    font-family: monospace;

    font-size: 7px;

}


/* =========================================================
   STATISTICS
========================================================= */

.op-dashboard-stats {

    padding: 0 0 40px;

    background: #050505;

}


.op-dashboard-stat {

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 100px;

    padding: 22px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 4px;

}


.op-dashboard-stat-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.12);

    border-radius: 4px;

    color: var(--op-red);

}


.op-dashboard-stat span {

    display: block;

    margin-bottom: 5px;

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

}


.op-dashboard-stat strong {

    color: #dddddd;

    font-family: var(--op-heading-font);

    font-size: 24px;

}


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

.op-dashboard-content {

    padding: 20px 0 110px;

    background: #050505;

}


.op-dashboard-card {

    margin-bottom: 20px;

    padding: 30px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-dashboard-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

}


.op-dashboard-card-label {

    display: block;

    margin-bottom: 7px;

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

}


.op-dashboard-card-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

}


.op-dashboard-card-header a {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

    white-space: nowrap;

}


.op-dashboard-card-header a:hover {

    color: var(--op-red);

}


.op-dashboard-card-header a i {

    margin-left: 5px;

    font-size: 7px;

}


/* =========================================================
   PROGRESS
========================================================= */

.op-dashboard-progress-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

}


.op-dashboard-progress-top span {

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-dashboard-progress-top strong {

    color: var(--op-red);

    font-family: monospace;

    font-size: 9px;

}


.op-dashboard-progress-bar {

    height: 5px;

    overflow: hidden;

    background: #161616;

    border-radius: 10px;

}


.op-dashboard-progress-bar span {

    display: block;

    height: 100%;

    background: var(--op-red);

    border-radius: inherit;

}


/* =========================================================
   SOLVED LABS
========================================================= */

.op-dashboard-lab {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 16px 0;

    border-top: 1px solid #191919;

}


.op-dashboard-lab:first-child {

    border-top: 0;

}


.op-dashboard-lab-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0d0d0d;

    border: 1px solid #202020;

    border-radius: 4px;

    color: #555555;

}


.op-dashboard-lab-info {

    min-width: 0;

    flex: 1;

}


.op-dashboard-lab-info h3 {

    margin: 0 0 4px;

    color: #aaaaaa;

    font-size: 12px;

}


.op-dashboard-lab-info span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

}


.op-dashboard-lab-meta {

    display: flex;

    align-items: flex-end;

    flex-direction: column;

    gap: 5px;

}


.op-dashboard-lab-meta strong {

    color: #777777;

    font-family: monospace;

    font-size: 8px;

}


.op-difficulty {

    padding: 4px 7px;

    border: 1px solid #222222;

    border-radius: 2px;

    color: #555555;

    font-family: monospace;

    font-size: 6px;

    text-transform: uppercase;

}


/* =========================================================
   BADGES
========================================================= */

.op-dashboard-badges {

    display: flex;

    flex-direction: column;

}


.op-dashboard-badge {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 0;

    border-top: 1px solid #191919;

}


.op-dashboard-badge:first-child {

    border-top: 0;

}


.op-badge-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.12);

    border-radius: 50%;

    color: var(--op-red);

}


.op-dashboard-badge strong {

    display: block;

    margin-bottom: 4px;

    color: #999999;

    font-size: 10px;

}


.op-dashboard-badge span {

    display: block;

    color: #444444;

    font-size: 8px;

    line-height: 1.5;

}


/* =========================================================
   PERSONAL DETAILS
========================================================= */

.op-dashboard-profile-details {

    display: flex;

    flex-direction: column;

}


.op-dashboard-profile-details > div {

    padding: 14px 0;

    border-top: 1px solid #191919;

}


.op-dashboard-profile-details > div:first-child {

    border-top: 0;

}


.op-dashboard-profile-details span {

    display: block;

    margin-bottom: 5px;

    color: #3f3f3f;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-dashboard-profile-details strong {

    display: block;

    overflow: hidden;

    color: #888888;

    font-family: monospace;

    font-size: 9px;

    font-weight: 400;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   ACTIVITY
========================================================= */

.op-dashboard-activity-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 0;

    border-top: 1px solid #191919;

}


.op-activity-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #333333;

}


.op-activity-dot.success {

    background: var(--op-red);

    box-shadow:
        0 0 8px rgba(255,30,30,0.3);

}


.op-activity-dot.failed {

    background: #333333;

}


.op-dashboard-activity-item > div:nth-child(2) {

    flex: 1;

}


.op-dashboard-activity-item strong {

    display: block;

    margin-bottom: 4px;

    color: #888888;

    font-size: 9px;

}


.op-dashboard-activity-item span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

}


.op-activity-result {

    text-align: right;

}


.op-activity-result span {

    font-family: monospace;

    font-size: 8px;

}


.op-activity-result .success {

    color: var(--op-red);

}


.op-activity-result .failed {

    color: #444444;

}


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

.op-dashboard-quick-actions {

    display: flex;

    flex-direction: column;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    overflow: hidden;

}


.op-dashboard-quick-actions a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 18px;

    border-bottom: 1px solid #191919;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-dashboard-quick-actions a:last-child {

    border-bottom: 0;

}


.op-dashboard-quick-actions a:hover {

    color: #999999;

    background: #0d0d0d;

}


.op-dashboard-quick-actions a > i:first-child {

    width: 18px;

    color: #444444;

    text-align: center;

}


.op-dashboard-quick-actions a > span {

    flex: 1;

}


.op-dashboard-quick-actions a > i:last-child {

    color: #333333;

    font-size: 7px;

}


.op-dashboard-quick-actions a:hover
> i:first-child {

    color: var(--op-red);

}


/* =========================================================
   EMPTY STATE
========================================================= */

.op-dashboard-empty {

    padding: 30px 15px;

    text-align: center;

}


.op-dashboard-empty > i {

    margin-bottom: 12px;

    color: #292929;

    font-size: 25px;

}


.op-dashboard-empty p {

    margin-bottom: 18px;

    color: #484848;

    font-size: 10px;

}


.op-dashboard-muted {

    margin: 0;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

}


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

@media (max-width: 991.98px) {

    .op-dashboard-welcome {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-dashboard-profile {

        margin-top: 10px;

    }

}


@media (max-width: 767.98px) {

    .op-dashboard-hero {

        padding: 110px 0 55px;

    }


    .op-dashboard-welcome h1 {

        font-size: 2.8rem;

    }


    .op-dashboard-card {

        padding: 22px;

    }


    .op-dashboard-lab {

        align-items: flex-start;

    }


    .op-dashboard-lab-meta {

        display: none;

    }

}


@media (max-width: 575.98px) {

    .op-dashboard-welcome h1 {

        font-size: 2.5rem;

    }


    .op-dashboard-stat {

        min-height: 85px;

    }


    .op-dashboard-stat strong {

        font-size: 21px;

    }

}

/* =========================================================
   DASHBOARD GRID BACKGROUND
========================================================= */

.op-dashboard-hero {

    position: relative;

}


.op-dashboard-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at 70% 30%,
            black,
            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   PROGRESS META
========================================================= */

.op-dashboard-progress-meta {

    display: flex;

    gap: 25px;

    margin-top: 15px;

}


.op-dashboard-progress-meta span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

}


.op-dashboard-progress-meta i {

    margin-right: 5px;

    color: #555555;

}


/* =========================================================
   DIFFICULTY STATES
========================================================= */

.op-difficulty.easy {

    color: #555555;

}


.op-difficulty.medium {

    color: #777777;

}


.op-difficulty.hard {

    color: #999999;

}


/* =========================================================
   DASHBOARD CARD HOVER
========================================================= */

.op-dashboard-stat,
.op-dashboard-card,
.op-dashboard-quick-actions {

    transition:

        border-color 0.3s ease,

        transform 0.3s ease;

}


.op-dashboard-stat:hover {

    border-color: rgba(255,30,30,0.18);

}


.op-dashboard-card:hover {

    border-color: #252525;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .op-dashboard-profile {

        width: 100%;

        padding-top: 20px;

        border-top: 1px solid #1c1c1c;

    }


    .op-dashboard-progress-meta {

        justify-content: space-between;

    }


    .op-dashboard-card-header {

        align-items: flex-start;

    }

}


@media (max-width: 575.98px) {

    .op-dashboard-progress-meta {

        flex-direction: column;

        gap: 7px;

    }

}

/* =========================================================
   USER PROFILE PAGE
========================================================= */


/* =========================================================
   PROFILE HERO
========================================================= */

.op-profile-page {

    background: #050505;

}


.op-profile-hero {

    position: relative;

    padding: 140px 0 65px;

    background:

        radial-gradient(
            circle at 75% 25%,
            rgba(255,30,30,0.055),
            transparent 40%
        ),

        #050505;

    overflow: hidden;

}


.op-profile-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at 70% 30%,
            black,
            transparent 70%
        );

    pointer-events: none;

}


.op-profile-header {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.op-profile-identity {

    display: flex;

    align-items: center;

    gap: 25px;

}


.op-profile-avatar {

    position: relative;

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:

        linear-gradient(
            135deg,
            rgba(255,30,30,0.12),
            rgba(255,30,30,0.025)
        );

    border: 1px solid rgba(255,30,30,0.25);

    border-radius: 50%;

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 38px;

    font-weight: 700;

}


.op-profile-avatar-edit {

    position: absolute;

    right: -2px;

    bottom: 4px;

    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111111;

    border: 1px solid #292929;

    border-radius: 50%;

    color: #777777;

    font-size: 9px;

}


.op-profile-avatar-edit:hover {

    color: var(--op-red);

    border-color: rgba(255,30,30,0.3);

}


.op-profile-identity h1 {

    margin: 15px 0 8px;

    color: #ffffff;

    font-size: clamp(
        2.7rem,
        5vw,
        4.5rem
    );

    line-height: 0.9;

}


.op-profile-identity h1 span {

    color: var(--op-red);

}


.op-profile-identity p {

    margin: 0;

    color: #555555;

    font-family: monospace;

    font-size: 8px;

}


.op-profile-status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: 10px;

    color: #555555;

}


.op-profile-status i {

    color: #666666;

    font-size: 5px;

}


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

.op-profile-content {

    padding: 35px 0 110px;

    background: #050505;

}


.op-profile-card {

    margin-bottom: 20px;

    padding: 30px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-profile-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

}


.op-profile-label {

    display: block;

    margin-bottom: 7px;

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

}


.op-profile-card-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

}


.op-profile-card-number {

    color: rgba(255,255,255,0.04);

    font-family: var(--op-heading-font);

    font-size: 45px;

    font-weight: 700;

    line-height: 0.7;

}


/* =========================================================
   PROFILE FORM
========================================================= */

.op-profile-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.op-profile-field label {

    color: #555555;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.op-profile-input {

    position: relative;

}


.op-profile-input > i {

    position: absolute;

    top: 50%;

    left: 13px;

    transform: translateY(-50%);

    color: #383838;

    font-size: 9px;

    pointer-events: none;

}


.op-profile-input input,
.op-profile-input select,
.op-profile-field textarea {

    width: 100%;

    padding: 13px 13px 13px 35px;

    background: #0d0d0d;

    border: 1px solid #242424;

    border-radius: 3px;

    outline: none;

    color: #999999;

    font-family: monospace;

    font-size: 9px;

    transition: border-color 0.3s ease;

}


.op-profile-field textarea {

    padding: 13px;

    resize: vertical;

    min-height: 120px;

    line-height: 1.7;

}


.op-profile-input input:focus,
.op-profile-input select:focus,
.op-profile-field textarea:focus {

    border-color: rgba(255,30,30,0.35);

}


.op-profile-form-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #191919;

}


.op-profile-reset {

    padding: 10px 5px;

    background: transparent;

    border: 0;

    color: #444444;

    font-family: monospace;

    font-size: 8px;

}


.op-profile-reset:hover {

    color: #888888;

}


/* =========================================================
   SECURITY
========================================================= */

.op-security-list {

    display: flex;

    flex-direction: column;

}


.op-security-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 0;

    border-top: 1px solid #191919;

}


.op-security-item:first-child {

    border-top: 0;

}


.op-security-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0d0d0d;

    border: 1px solid #202020;

    border-radius: 4px;

    color: #555555;

}


.op-security-info {

    flex: 1;

}


.op-security-info strong {

    display: block;

    margin-bottom: 5px;

    color: #999999;

    font-size: 10px;

}


.op-security-info span {

    display: block;

    color: #444444;

    font-family: monospace;

    font-size: 7px;

    line-height: 1.6;

}


.op-profile-small-btn {

    padding: 8px 10px;

    background: #0c0c0c;

    border: 1px solid #252525;

    border-radius: 3px;

    color: #555555;

    font-family: monospace;

    font-size: 7px;

    white-space: nowrap;

}


.op-profile-small-btn:hover {

    border-color: rgba(255,30,30,0.25);

    color: #999999;

}


/* =========================================================
   ACCOUNT DANGER
========================================================= */

.op-profile-danger {

    border-color: rgba(255,30,30,0.10);

}


.op-profile-danger-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 18px;

    background: rgba(255,30,30,0.025);

    border: 1px solid rgba(255,30,30,0.08);

    border-radius: 4px;

}


.op-profile-danger-content strong {

    display: block;

    margin-bottom: 5px;

    color: #888888;

    font-size: 10px;

}


.op-profile-danger-content p {

    margin: 0;

    color: #444444;

    font-size: 8px;

}


.op-profile-danger-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 12px;

    background: transparent;

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 3px;

    color: #777777;

    font-family: monospace;

    font-size: 7px;

    white-space: nowrap;

}


.op-profile-danger-btn:hover {

    color: var(--op-red);

    border-color: rgba(255,30,30,0.35);

}


/* =========================================================
   PROFILE OVERVIEW
========================================================= */

.op-profile-overview {

    padding: 5px 0 25px;

    text-align: center;

}


.op-profile-overview-avatar {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 15px;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.18);

    border-radius: 50%;

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 28px;

    font-weight: 700;

}


.op-profile-overview h3 {

    margin-bottom: 5px;

    color: #aaaaaa;

    font-size: 15px;

}


.op-profile-overview > span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

}


.op-profile-member {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 15px;

    color: #4a4a4a;

    font-family: monospace;

    font-size: 7px;

}


.op-profile-member i {

    color: #444444;

}


/* =========================================================
   MINI STATS
========================================================= */

.op-profile-mini-stats {

    display: grid;

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

    border-top: 1px solid #191919;

}


.op-profile-mini-stats > div {

    padding: 18px 5px;

    text-align: center;

    border-right: 1px solid #191919;

}


.op-profile-mini-stats > div:last-child {

    border-right: 0;

}


.op-profile-mini-stats strong {

    display: block;

    margin-bottom: 5px;

    color: #999999;

    font-family: var(--op-heading-font);

    font-size: 18px;

}


.op-profile-mini-stats span {

    color: #3f3f3f;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 0.8px;

}


/* =========================================================
   SECURITY LEVEL
========================================================= */

.op-security-level {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}


.op-security-level-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 50%;

    color: var(--op-red);

}


.op-security-level span {

    display: block;

    margin-bottom: 5px;

    color: #414141;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 1px;

}


.op-security-level strong {

    display: block;

    color: #999999;

    font-size: 11px;

}


.op-level-progress {

    margin-bottom: 18px;

}


.op-level-progress-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}


.op-level-progress-top span {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

}


.op-level-description {

    margin: 0;

    color: #444444;

    font-size: 8px;

    line-height: 1.7;

}


.op-level-description strong {

    color: #777777;

}


/* =========================================================
   PROFILE NAVIGATION
========================================================= */

.op-profile-navigation {

    display: flex;

    flex-direction: column;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    overflow: hidden;

}


.op-profile-navigation a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border-bottom: 1px solid #191919;

    color: #505050;

    font-family: monospace;

    font-size: 8px;

}


.op-profile-navigation a:last-child {

    border-bottom: 0;

}


.op-profile-navigation a:hover {

    color: #999999;

    background: #0d0d0d;

}


.op-profile-navigation a > i:first-child {

    width: 18px;

    color: #444444;

    text-align: center;

}


.op-profile-navigation a span {

    flex: 1;

}


.op-profile-navigation a > i:last-child {

    color: #333333;

    font-size: 7px;

}


.op-profile-navigation a:hover
> i:first-child {

    color: var(--op-red);

}


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

@media (max-width: 991.98px) {

    .op-profile-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-profile-header > div:last-child {

        margin-top: 5px;

    }

}


@media (max-width: 767.98px) {

    .op-profile-hero {

        padding: 110px 0 55px;

    }


    .op-profile-identity {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-profile-avatar {

        width: 85px;

        height: 85px;

        font-size: 32px;

    }


    .op-profile-identity h1 {

        font-size: 2.8rem;

    }


    .op-profile-card {

        padding: 22px;

    }


    .op-security-item {

        align-items: flex-start;

        flex-wrap: wrap;

    }


    .op-security-info {

        min-width: calc(100% - 60px);

    }


    .op-profile-small-btn {

        margin-left: 57px;

    }


    .op-profile-danger-content {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-profile-danger-btn {

        width: 100%;

        justify-content: center;

    }

}


@media (max-width: 575.98px) {

    .op-profile-form-actions {

        align-items: stretch;

        flex-direction: column;

    }


    .op-profile-form-actions .op-btn {

        width: 100%;

    }


    .op-profile-reset {

        text-align: center;

    }

}

/* =========================================================
   BADGES PAGE
========================================================= */


/* =========================================================
   BADGES HERO
========================================================= */

.op-badges-page {

    background: #050505;

}


.op-badges-hero {

    position: relative;

    padding: 145px 0 75px;

    background:

        radial-gradient(
            circle at 75% 25%,
            rgba(255,30,30,0.06),
            transparent 42%
        ),

        #050505;

    overflow: hidden;

}


.op-badges-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at 70% 30%,
            black,
            transparent 70%
        );

    pointer-events: none;

}


.op-badges-hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

}


.op-badges-hero h1 {

    margin: 18px 0 15px;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5.5rem
    );

    line-height: 0.9;

}


.op-badges-hero h1 span {

    color: var(--op-red);

}


.op-badges-hero p {

    max-width: 600px;

    margin: 0;

    color: #555555;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   BADGE SUMMARY
========================================================= */

.op-badge-summary {

    display: flex;

    flex-shrink: 0;

    border: 1px solid #202020;

    background: rgba(9,9,9,0.8);

}


.op-badge-summary > div {

    min-width: 105px;

    padding: 20px 18px;

    text-align: center;

    border-right: 1px solid #202020;

}


.op-badge-summary > div:last-child {

    border-right: 0;

}


.op-badge-summary strong {

    display: block;

    margin-bottom: 7px;

    color: #cccccc;

    font-family: var(--op-heading-font);

    font-size: 25px;

}


.op-badge-summary span {

    color: #414141;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 1px;

}


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

.op-badges-content {

    padding: 40px 0 120px;

    background: #050505;

}


/* =========================================================
   PROGRESS
========================================================= */

.op-badges-progress {

    margin-bottom: 70px;

    padding: 25px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

}


.op-badges-progress-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;

}


.op-badges-progress-header span {

    display: block;

    margin-bottom: 7px;

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.op-badges-progress-header strong {

    color: #999999;

    font-size: 11px;

}


.op-badges-progress-header > div:last-child strong {

    color: var(--op-red);

    font-family: var(--op-heading-font);

    font-size: 20px;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.op-badges-section {

    margin-bottom: 75px;

}


.op-badges-section-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

}


.op-badges-section-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 25px;

}


.op-badges-count {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


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

.op-badge-card {

    position: relative;

    height: 100%;

    min-height: 315px;

    padding: 25px;

    background: #090909;

    border: 1px solid #202020;

    border-radius: 5px;

    overflow: hidden;

    transition:

        transform 0.3s ease,

        border-color 0.3s ease;

}


.op-badge-card:hover {

    transform: translateY(-3px);

    border-color: #2b2b2b;

}


.op-badge-card.earned {

    border-color: rgba(255,30,30,0.12);

}


.op-badge-card.earned:hover {

    border-color: rgba(255,30,30,0.3);

}


.op-badge-card.locked {

    opacity: 0.72;

}


/* =========================================================
   BADGE CARD TOP
========================================================= */

.op-badge-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.op-badge-status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 7px;

    background: rgba(255,30,30,0.04);

    border: 1px solid rgba(255,30,30,0.1);

    border-radius: 2px;

    color: #555555;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 0.5px;

}


.op-badge-status i {

    color: var(--op-red);

    font-size: 6px;

}


.op-badge-card.locked .op-badge-status {

    background: #0d0d0d;

    border-color: #202020;

}


.op-badge-card.locked .op-badge-status i {

    color: #444444;

}


.op-badge-number {

    color: #252525;

    font-family: var(--op-heading-font);

    font-size: 30px;

    font-weight: 700;

}


/* =========================================================
   LARGE BADGE ICON
========================================================= */

.op-badge-large-icon {

    display: flex;

    justify-content: center;

    margin: 20px 0;

}


.op-badge-large-icon > div {

    width: 85px;

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle,
            rgba(255,30,30,0.1),
            rgba(255,30,30,0.015) 65%
        );

    border: 1px solid rgba(255,30,30,0.2);

    border-radius: 50%;

    color: var(--op-red);

    font-size: 28px;

    box-shadow:

        0 0 35px
        rgba(255,30,30,0.04);

}


.op-badge-card.locked
.op-badge-large-icon > div {

    background: #0d0d0d;

    border-color: #202020;

    color: #333333;

    box-shadow: none;

}


/* =========================================================
   BADGE TEXT
========================================================= */

.op-badge-card h3 {

    margin: 0 0 8px;

    color: #bbbbbb;

    text-align: center;

    font-size: 15px;

}


.op-badge-card p {

    max-width: 280px;

    min-height: 40px;

    margin: 0 auto 20px;

    color: #444444;

    text-align: center;

    font-size: 8px;

    line-height: 1.7;

}


/* =========================================================
   BADGE FOOTER
========================================================= */

.op-badge-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 17px;

    border-top: 1px solid #191919;

}


.op-badge-card-footer span {

    color: #3d3d3d;

    font-family: monospace;

    font-size: 6px;

}


.op-badge-card-footer strong {

    color: var(--op-red);

    font-family: monospace;

    font-size: 7px;

}


/* =========================================================
   LOCKED BADGE REQUIREMENT
========================================================= */

.op-badge-requirement {

    display: flex;

    justify-content: space-between;

    margin-top: 15px;

}


.op-badge-requirement span {

    color: #3c3c3c;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 0.8px;

}


.op-badge-requirement strong {

    color: #555555;

    font-family: monospace;

    font-size: 7px;

}


.op-badge-mini-progress {

    height: 3px;

    margin-top: 8px;

    overflow: hidden;

    background: #171717;

    border-radius: 5px;

}


.op-badge-mini-progress span {

    display: block;

    height: 100%;

    background: #444444;

}


/* =========================================================
   COMING SOON
========================================================= */

.op-badges-coming {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 30px;

    background: #090909;

    border: 1px solid #202020;

    border-left: 2px solid rgba(255,30,30,0.3);

    border-radius: 5px;

}


.op-badges-coming-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: rgba(255,30,30,0.05);

    border: 1px solid rgba(255,30,30,0.12);

    border-radius: 50%;

    color: var(--op-red);

}


.op-badges-coming > div:nth-child(2) {

    flex: 1;

}


.op-badges-coming h2 {

    margin: 7px 0;

    color: #aaaaaa;

    font-size: 19px;

}


.op-badges-coming h2 span {

    color: var(--op-red);

}


.op-badges-coming p {

    max-width: 600px;

    margin: 0;

    color: #444444;

    font-size: 8px;

    line-height: 1.7;

}


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

@media (max-width: 991.98px) {

    .op-badges-hero-content {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-badge-summary {

        width: 100%;

    }


    .op-badge-summary > div {

        flex: 1;

    }


    .op-badges-coming {

        align-items: flex-start;

        flex-wrap: wrap;

    }

}


@media (max-width: 767.98px) {

    .op-badges-hero {

        padding: 110px 0 60px;

    }


    .op-badges-hero h1 {

        font-size: 3rem;

    }


    .op-badge-summary > div {

        min-width: 0;

        padding: 15px 10px;

    }


    .op-badge-summary strong {

        font-size: 20px;

    }


    .op-badges-progress {

        margin-bottom: 50px;

    }


    .op-badges-section {

        margin-bottom: 55px;

    }


    .op-badges-coming {

        padding: 22px;

    }


    .op-badges-coming .op-btn {

        width: 100%;

        justify-content: center;

    }

}


@media (max-width: 575.98px) {

    .op-badge-summary span {

        font-size: 5px;

    }


    .op-badge-summary strong {

        font-size: 18px;

    }


    .op-badges-section-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-badge-card {

        min-height: 300px;

    }

}

/* =========================================================
   AUTHENTICATION PAGES
========================================================= */

.op-auth-page {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 120px 0 60px;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(255,30,30,0.055),
            transparent 40%
        ),

        #050505;

    overflow: hidden;

}


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

.op-auth-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;

}


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

.op-auth-card {

    position: relative;

    z-index: 2;

    padding: 40px;

    background:

        linear-gradient(
            145deg,
            rgba(14,14,14,0.98),
            rgba(7,7,7,0.98)
        );

    border: 1px solid #222222;

    border-radius: 5px;

    box-shadow:

        0 30px 80px
        rgba(0,0,0,0.35);

}


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

.op-auth-brand {

    margin-bottom: 35px;

    text-align: center;

}


.op-auth-brand img {

    width: 135px;

    height: auto;

    max-height: 55px;

    object-fit: contain;

}


/* =========================================================
   HEADER
========================================================= */

.op-auth-header {

    margin-bottom: 32px;

    text-align: center;

}


.op-auth-header h1 {

    margin: 15px 0 12px;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        3.7rem
    );

    line-height: 0.95;

}


.op-auth-header h1 span {

    color: var(--op-red);

}


.op-auth-header p {

    max-width: 430px;

    margin: 0 auto;

    color: #505050;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   FORM
========================================================= */

.op-auth-form {

    display: flex;

    flex-direction: column;

    gap: 19px;

}


.op-auth-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.op-auth-field label {

    color: #555555;

    font-family: monospace;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.op-auth-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.op-auth-label-row a {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

}


.op-auth-label-row a:hover {

    color: var(--op-red);

}


/* =========================================================
   INPUT
========================================================= */

.op-auth-input {

    position: relative;

}


.op-auth-input > i {

    position: absolute;

    top: 50%;

    left: 14px;

    transform: translateY(-50%);

    color: #363636;

    font-size: 9px;

    pointer-events: none;

}


.op-auth-input input {

    width: 100%;

    height: 46px;

    padding: 0 42px 0 38px;

    background: #0d0d0d;

    border: 1px solid #242424;

    border-radius: 3px;

    outline: none;

    color: #aaaaaa;

    font-family: monospace;

    font-size: 9px;

    transition:

        border-color 0.25s ease,

        background 0.25s ease;

}


.op-auth-input input::placeholder {

    color: #353535;

}


.op-auth-input input:focus {

    background: #0f0f0f;

    border-color: rgba(255,30,30,0.35);

}


.op-auth-input:focus-within > i {

    color: var(--op-red);

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.op-auth-password-toggle {

    position: absolute;

    top: 50%;

    right: 13px;

    transform: translateY(-50%);

    padding: 5px;

    background: transparent;

    border: 0;

    color: #3e3e3e;

    font-size: 9px;

}


.op-auth-password-toggle:hover {

    color: #888888;

}


/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.op-password-strength {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 2px;

}


.op-password-bars {

    display: flex;

    gap: 3px;

    flex: 1;

}


.op-password-bars span {

    height: 2px;

    flex: 1;

    background: #1c1c1c;

}


.op-password-strength > span {

    color: #3d3d3d;

    font-family: monospace;

    font-size: 6px;

    white-space: nowrap;

}


/* =========================================================
   CHECKBOX
========================================================= */

.op-auth-checkbox {

    margin-top: -2px;

}


.op-auth-checkbox label {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    cursor: pointer;

}


.op-auth-checkbox input {

    width: 12px;

    height: 12px;

    flex-shrink: 0;

    margin-top: 1px;

    accent-color: var(--op-red);

}


.op-auth-checkbox span {

    color: #444444;

    font-family: monospace;

    font-size: 7px;

    line-height: 1.7;

}


.op-auth-checkbox a {

    color: #777777;

}


.op-auth-checkbox a:hover {

    color: var(--op-red);

}


/* =========================================================
   SUBMIT
========================================================= */

.op-auth-submit {

    width: 100%;

    justify-content: center;

    margin-top: 5px;

    padding-top: 14px;

    padding-bottom: 14px;

}


/* =========================================================
   ACCOUNT SWITCH
========================================================= */

.op-auth-switch {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 28px;

    padding-top: 25px;

    border-top: 1px solid #191919;

}


.op-auth-switch span {

    color: #414141;

    font-family: monospace;

    font-size: 7px;

}


.op-auth-switch a {

    color: #888888;

    font-family: monospace;

    font-size: 7px;

}


.op-auth-switch a:hover {

    color: var(--op-red);

}


.op-auth-switch a i {

    margin-left: 3px;

    font-size: 6px;

}


/* =========================================================
   SECURITY MESSAGE
========================================================= */

.op-auth-security {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

    color: #333333;

    text-align: center;

}


.op-auth-security i {

    color: #3b3b3b;

    font-size: 9px;

}


.op-auth-security span {

    font-family: monospace;

    font-size: 6px;

    line-height: 1.6;

}


/* =========================================================
   BACK LINK
========================================================= */

.op-auth-back {

    position: relative;

    z-index: 2;

    margin-top: 18px;

    text-align: center;

}


.op-auth-back a {

    color: #3a3a3a;

    font-family: monospace;

    font-size: 7px;

}


.op-auth-back a:hover {

    color: #777777;

}


.op-auth-back i {

    margin-right: 5px;

}


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

@media (max-width: 575.98px) {

    .op-auth-page {

        padding: 100px 15px 40px;

        align-items: flex-start;

    }


    .op-auth-card {

        padding: 30px 22px;

    }


    .op-auth-brand {

        margin-bottom: 28px;

    }


    .op-auth-header {

        margin-bottom: 27px;

    }


    .op-auth-header h1 {

        font-size: 2.7rem;

    }


    .op-auth-switch {

        align-items: center;

        flex-direction: column;

    }

}

/* =========================================================
   OFFENSIVE POINT ACADEMY HERO
   COURSE ROADMAP VISUAL
========================================================= */

.op-academy-hero {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.op-academy-hero-visual {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.op-academy-visual-glow {

    position: absolute;

    width: 350px;

    height: 350px;

    background: rgba(255, 30, 30, 0.065);

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

}


/* =========================================================
   ROADMAP CONTAINER
========================================================= */

.op-academy-roadmap {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 470px;

    padding: 25px;

    background:

        linear-gradient(
            145deg,
            #0c0c0c,
            #070707
        );

    border: 1px solid #242424;

    border-radius: 6px;

    box-shadow:

        0 30px 80px rgba(0,0,0,0.45),

        0 0 60px rgba(255,30,30,0.035);

    transform:

        perspective(1000px)
        rotateY(-3deg);

    transition:

        transform 0.4s ease;

}


.op-academy-roadmap:hover {

    transform:

        perspective(1000px)
        rotateY(0deg)
        translateY(-4px);

}


/* =========================================================
   ROADMAP HEADER
========================================================= */

.op-academy-roadmap-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 20px;

    border-bottom: 1px solid #1b1b1b;

}


.op-academy-roadmap-header span {

    display: block;

    margin-bottom: 6px;

    color: #3e3e3e;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 1px;

}


.op-academy-roadmap-header strong {

    display: block;

    color: #aaaaaa;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 0.5px;

}


.op-academy-roadmap-status {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px 7px;

    border: 1px solid rgba(255,30,30,0.12);

    background: rgba(255,30,30,0.035);

    border-radius: 2px;

    color: #555555;

    font-family: monospace;

    font-size: 5px;

    letter-spacing: 0.5px;

    white-space: nowrap;

}


.op-academy-roadmap-status i {

    color: var(--op-red);

    font-size: 5px;

}


/* =========================================================
   ROADMAP PATH
========================================================= */

.op-academy-roadmap-path {

    position: relative;

    padding: 20px 0 10px;

}


/* =========================================================
   PATH ITEM
========================================================= */

.op-academy-path-item {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 65px;

}


.op-academy-path-marker {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #0d0d0d;

    border: 1px solid #272727;

    border-radius: 50%;

    color: #444444;

    font-size: 8px;

}


.op-academy-path-content {

    flex: 1;

    min-width: 0;

}


.op-academy-path-content span {

    display: block;

    margin-bottom: 3px;

    color: #3d3d3d;

    font-family: monospace;

    font-size: 5px;

    letter-spacing: 0.8px;

}


.op-academy-path-content strong {

    display: block;

    margin-bottom: 3px;

    color: #777777;

    font-size: 10px;

}


.op-academy-path-content small {

    display: block;

    color: #3b3b3b;

    font-family: monospace;

    font-size: 6px;

}


.op-academy-path-state {

    color: #333333;

    font-family: monospace;

    font-size: 5px;

    white-space: nowrap;

}


/* =========================================================
   COMPLETED
========================================================= */

.op-academy-path-item.completed
.op-academy-path-marker {

    background: rgba(255,30,30,0.05);

    border-color: rgba(255,30,30,0.18);

    color: #777777;

}


.op-academy-path-item.completed
.op-academy-path-content strong {

    color: #999999;

}


.op-academy-path-item.completed
.op-academy-path-state {

    color: #4c4c4c;

}


/* =========================================================
   ACTIVE
========================================================= */

.op-academy-path-item.active
.op-academy-path-marker {

    background: rgba(255,30,30,0.08);

    border-color: rgba(255,30,30,0.45);

    color: var(--op-red);

    box-shadow:

        0 0 20px rgba(255,30,30,0.08);

}


.op-academy-path-item.active
.op-academy-path-content strong {

    color: #d0d0d0;

}


.op-academy-path-item.active
.op-academy-path-state {

    color: var(--op-red);

}


/* =========================================================
   LOCKED
========================================================= */

.op-academy-path-item.locked {

    opacity: 0.45;

}


.op-academy-path-item.locked
.op-academy-path-marker {

    background: #0b0b0b;

    border-color: #1e1e1e;

}


/* =========================================================
   PATH CONNECTORS
========================================================= */

.op-academy-path-line {

    position: relative;

    width: 1px;

    height: 20px;

    margin-left: 15px;

    background: #1b1b1b;

}


.op-academy-path-line.completed-line {

    background:

        linear-gradient(
            to bottom,
            rgba(255,30,30,0.3),
            rgba(255,30,30,0.12)
        );

}


.op-academy-path-line.active-line {

    background:

        linear-gradient(
            to bottom,
            rgba(255,30,30,0.18),
            #1b1b1b
        );

}


/* =========================================================
   ROADMAP FOOTER
========================================================= */

.op-academy-roadmap-footer {

    padding-top: 20px;

    border-top: 1px solid #1b1b1b;

}


.op-academy-roadmap-footer > div:first-child {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;

}


.op-academy-roadmap-footer span {

    color: #3e3e3e;

    font-family: monospace;

    font-size: 6px;

    letter-spacing: 0.7px;

}


.op-academy-roadmap-footer strong {

    color: var(--op-red);

    font-family: monospace;

    font-size: 7px;

}


.op-academy-roadmap-progress {

    height: 3px;

    overflow: hidden;

    background: #171717;

}


.op-academy-roadmap-progress span {

    display: block;

    width: 68%;

    height: 100%;

    background: var(--op-red);

    box-shadow:

        0 0 10px rgba(255,30,30,0.35);

}


/* =========================================================
   FLOATING COURSE CARD
========================================================= */

.op-academy-floating-card {

    position: absolute;

    z-index: 4;

    right: -10px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 215px;

    padding: 12px;

    background: rgba(10,10,10,0.96);

    border: 1px solid #252525;

    border-left: 2px solid var(--op-red);

    border-radius: 4px;

    box-shadow:

        0 20px 50px rgba(0,0,0,0.4);

}


.op-academy-floating-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: rgba(255,30,30,0.06);

    border: 1px solid rgba(255,30,30,0.15);

    border-radius: 3px;

    color: var(--op-red);

    font-size: 10px;

}


.op-academy-floating-info {

    flex: 1;

}


.op-academy-floating-info span {

    display: block;

    margin-bottom: 3px;

    color: #3e3e3e;

    font-family: monospace;

    font-size: 5px;

    letter-spacing: 1px;

}


.op-academy-floating-info strong {

    display: block;

    color: #888888;

    font-family: monospace;

    font-size: 8px;

}


.op-academy-floating-card > i {

    color: #3a3a3a;

    font-size: 8px;

}


/* =========================================================
   DECORATIVE PARTICLES
========================================================= */

.op-academy-particle {

    position: absolute;

    z-index: 1;

    color: rgba(255,30,30,0.18);

    font-family: monospace;

    font-size: 9px;

    pointer-events: none;

}


.op-academy-particle-one {

    top: 55px;

    left: 0;

}


.op-academy-particle-two {

    top: 150px;

    right: 0;

    color: rgba(255,255,255,0.08);

}


.op-academy-particle-three {

    bottom: 70px;

    left: 15px;

    color: rgba(255,30,30,0.12);

}


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

@media (max-width: 991.98px) {

    .op-academy-hero-visual {

        min-height: 480px;

        margin-top: 10px;

    }


    .op-academy-floating-card {

        right: 0;

    }

}


@media (max-width: 575.98px) {

    .op-academy-hero-visual {

        min-height: 450px;

    }


    .op-academy-roadmap {

        padding: 20px;

        transform: none;

    }


    .op-academy-roadmap:hover {

        transform: translateY(-3px);

    }


    .op-academy-path-state {

        display: none;

    }


    .op-academy-path-content strong {

        font-size: 9px;

    }


    .op-academy-path-content small {

        font-size: 5px;

    }


    .op-academy-floating-card {

        right: 5px;

        bottom: 5px;

        min-width: 195px;

    }


    .op-academy-particle {

        display: none;

    }

}