/*
Theme Name: Inside Jokes
Theme URI: https://insidejokes.cz
Author: Tomas Kral
Version: 1.0
Text Domain: inside-jokes
*/
:root {

    /* BACKGROUNDS */

    --bg: #050505;
    --bg2: #0d0d0d;
    --bg3: #151515;

    /* CARDS */

    --card: #111111;
    --card-hover: #181818;

    /* BORDERS */

    --border: #232323;
    --border-light: #333333;

    /* BRAND */

    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-light: rgba(139,92,246,.15);

    /* TEXT */

    --text: #ffffff;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;

    /* EFFECTS */

    --shadow-sm: 0 0 20px rgba(139,92,246,.10);
    --shadow-md: 0 0 30px rgba(139,92,246,.15);
    --shadow-lg: 0 0 40px rgba(139,92,246,.20);

    /* LAYOUT */

    --container: 1400px;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;

    --transition: .3s ease;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Plus Jakarta Sans',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 30px;
}

section{
    padding:35px 0 0 0;
}

h1,h2,h3,h4,h5,h6{
    font-weight:800;
    letter-spacing:-0.03em;
}

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

.site-header {

    position: sticky;
    top: 0;
    z-index: 999;

    background: rgba(5, 5, 5, .9);

    backdrop-filter: blur(20px);

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

}

.site-header .container {

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 90px;

}

/* ==========================
   LOGO
========================== */

.logo {

    color: var(--text);

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;

    transition: var(--transition);

}

.logo:hover {

    color: var(--primary);

}

/* ==========================
   MENU
========================== */

.main-nav ul {

    display: flex;
    align-items: center;

    gap: 50px;

    margin: 0;
    padding: 0;

    list-style: none;

}

.main-nav li {

    margin: 0;
    padding: 0;

}

.main-nav a {

    position: relative;

    color: var(--text-secondary);

    font-size: 15px;

    font-weight: 500;

    letter-spacing: .5px;

    transition: .25s ease;

}

/* FIALOVÁ LINKA */

.main-nav a::after {

    content: '';

    position: absolute;

    left: 0;
    bottom: -12px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: width .25s ease;

}

.main-nav a:hover {

    color: var(--text);

}

.main-nav a:hover::after {

    width: 100%;

}

/* AKTIVNÍ POLOŽKA */

.current-menu-item > a,
.current_page_item > a {

    color: var(--text);

}

.current-menu-item > a::after,
.current_page_item > a::after {

    width: 100%;

}

/* ==========================
   BUTTON
========================== */

.header-cta {

    display: inline-flex;

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

    height: 48px;

    padding: 0 28px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    transition: .25s ease;

}

.header-cta:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

}
.header-actions{

    display:flex;
    align-items:center;
    gap:15px;
}
/* ==========================
   MOBILE
========================== */

@media (max-width: 991px) {

    .site-header .container {

        flex-direction: column;

        justify-content: center;

        gap: 20px;

        padding: 20px 0;

    }

    .main-nav ul {

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;

    }

}

@media (max-width: 768px) {

    .logo {

        font-size: 20px;

    }

    .header-cta {

        width: 100%;

    }

}

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

.hero {

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

    display: flex;
    align-items: center;

    background-image: url('../images/hero-bg-ij.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    position: relative;

    padding: 80px 0;

}
.hero::before {

    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.85) 30%,
            rgba(0,0,0,.75) 60%,
            rgba(0,0,0,.80) 100%
        );

}
.hero::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(139,92,246,.18) 0%,
            transparent 45%
        );

    pointer-events: none;

}
.hero .container {

    position: relative;
    z-index: 2;

}



.hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;
    
    gap: 80px;

    align-items: center;

}

.hero-content {

    max-width: 650px;

}

.hero-label {

    display: inline-block;

    margin-bottom: 30px;

    padding: 8px 16px;

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

    border-radius: 999px;

    color: var(--text-muted);

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.hero h1 {

    font-size: clamp(72px, 10vw, 160px);

    line-height: .9;

    font-weight: 800;

    letter-spacing: -4px;

    margin-bottom: 30px;

}

.hero p {

    font-size: 20px;

    color: var(--text-secondary);

    max-width: 550px;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 40px;

}

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

.hero-visual {

    display: flex;
    justify-content: flex-end;

}

.hero-card {

    width: 100%;
    max-width: 600px;

    border-radius: 24px;

    overflow: hidden;

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

    background: linear-gradient(
        135deg,
        var(--bg2),
        var(--card)
    );

}

.hero-image {

    height: 650px;

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

    color: var(--text-muted);

    font-size: 18px;

}

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

@media (max-width: 991px) {

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .hero {

        min-height: auto;

    }

    .hero h1 {

        font-size: 80px;

    }

    .hero-image {

        height: 400px;

    }

}

@media (max-width: 768px) {

    .hero h1 {

        font-size: 64px;

        letter-spacing: -2px;

    }

    .hero p {

        font-size: 18px;

    }

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

.btn,
.btn-outline {

    display: inline-flex;

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

    height: 54px;

    padding: 0 32px;

    border-radius: 14px;

    font-size: 15px;
    font-weight: 600;

    transition: .25s ease;

}

/* PRIMARY */

.btn {

    background: var(--primary);

    color: #fff;

}

.btn:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

}

/* SECONDARY */

.btn-outline {

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

    background: transparent;

    color: var(--text);

}

.btn-outline:hover {

    border-color: var(--primary);

    color: var(--primary);

}
.hero .btn {
    height: 58px;
    padding: 0 38px;
}
/* ==========================
   ABOUT
========================== */

.about {

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

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.section-tag {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.about h2 {

    font-size: 56px;

    line-height: 1.1;

    margin-bottom: 24px;

}

.about p {

    color: var(--text-secondary);

    font-size: 18px;

    margin-bottom: 20px;

    max-width: 600px;

}

/* STATS */

.stats {

    display: grid;

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

    gap: 24px;

}

.stat-card {

    background: var(--card);

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

    border-radius: 20px;

    padding: 40px;

    transition: .25s ease;

}

.stat-card:hover {

    border-color: var(--primary);

    transform: translateY(-4px);

}

.stat-card h3 {

    font-size: 56px;

    line-height: 1;

    margin-bottom: 12px;

}

.stat-card span {

    color: var(--text-muted);

}

/* MOBILE */

@media (max-width: 991px) {

    .about-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 768px) {

    .about h2 {

        font-size: 42px;

    }

    .stats {

        grid-template-columns: 1fr;

    }

}

/* ==========================
   SERVICES
========================== */

.section-header {

    max-width: 800px;

    margin-bottom: 70px;

}

.section-header h2 {

    font-size: 56px;

    line-height: 1.1;

    margin-bottom: 20px;

}

.section-header p {

    color: var(--text-secondary);

    font-size: 18px;

}

/* GRID */

.services-grid {

    display: grid;

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

    gap: 24px;

}

/* CARD */

.service-card {

    position: relative;

    background: var(--card);

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

    border-radius: 24px;

    padding: 40px;

    transition: .3s ease;

}

.service-card:hover {

    border-color: var(--primary);

    transform: translateY(-5px);

}

.service-number {

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 25px;

}

.service-card h3 {

    font-size: 24px;

    margin-bottom: 15px;

}

.service-card p {

    color: var(--text-muted);

    line-height: 1.7;

}

/* TABLET */

@media (max-width: 991px) {

    .services-grid {

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

    }

}

/* MOBILE */

@media (max-width: 768px) {

    .services-grid {

        grid-template-columns: 1fr;

    }

    .section-header h2 {

        font-size: 42px;

    }

}

/* ==========================
   PROCESS
========================== */

.process {

    background: var(--bg2);

}

.timeline {

    position: relative;

    display: grid;

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

    gap: 24px;

    margin-top: 80px;

}

.timeline-line {

    position: absolute;

    top: 30px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: var(--border);

    z-index: 1;

}

.step {

    position: relative;

    z-index: 2;

    text-align: center;

}

.step-number {

    width: 60px;
    height: 60px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: var(--card);

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

    color: var(--primary);

    font-size: 18px;
    font-weight: 700;

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

    transition: .3s ease;

}

.step:hover .step-number {

    border-color: var(--primary);

    transform: scale(1.05);

}

.step h3 {

    font-size: 22px;

    margin-bottom: 12px;

}

.step p {

    color: var(--text-muted);

    font-size: 15px;

    max-width: 220px;

    margin: 0 auto;

}

/* TABLET */

@media (max-width: 991px) {

    .timeline {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .timeline-line {

        display: none;

    }

    .step {

        text-align: left;

    }

    .step-number {

        margin: 0 0 20px;

    }

    .step p {

        max-width: none;

        margin: 0;

    }

}

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

.audience {

    background: var(--bg);

}

.audience-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 70px;

}

.audience-card {

    background: var(--card);

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

    border-radius: 24px;

    padding: 50px;

    transition: .3s ease;

}

.audience-card:hover {

    border-color: var(--primary);

    transform: translateY(-5px);

}

.audience-icon {

    font-size: 36px;

    margin-bottom: 25px;

}

.audience-card h3 {

    font-size: 32px;

    margin-bottom: 30px;

}

.audience-card ul {

    list-style: none;

    padding: 0;

}

.audience-card li {

    position: relative;

    padding-left: 24px;

    margin-bottom: 16px;

    color: var(--text-secondary);

}

.audience-card li::before {

    content: '';

    position: absolute;

    left: 0;
    top: 11px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}

/* MOBILE */

@media (max-width: 991px) {

    .audience-grid {

        grid-template-columns: 1fr;

    }

}

/* ==========================
   PORTFOLIO
========================== */

.portfolio-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 70px;

}

.portfolio-item {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

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

    height: 380px;

    cursor: pointer;

}

.portfolio-image {

    width: 100%;
    height: 100%;

    background: linear-gradient(
        135deg,
        var(--card),
        var(--bg3)
    );

    transition: .5s ease;

}

.portfolio-item:hover .portfolio-image {

    transform: scale(1.05);

}

.portfolio-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 30px;

    background: linear-gradient(
        transparent,
        rgba(0,0,0,.9)
    );

}

.portfolio-overlay span {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.portfolio-overlay h3 {

    font-size: 26px;

    color: var(--text);

}

/* RESPONSIVE */

@media (max-width: 991px) {

    .portfolio-grid {

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

    }

}

@media (max-width: 768px) {

    .portfolio-grid {

        grid-template-columns: 1fr;

    }

}

/* ==========================
   WHY US
========================== */

.why {

    background: var(--bg2);

}

.why-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 70px;

}

.why-card {

    background: var(--card);

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

    border-radius: 24px;

    padding: 40px;

    transition: .3s ease;

}

.why-card:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

}

.why-number {

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 20px;

}

.why-card h3 {

    font-size: 24px;

    margin-bottom: 16px;

    line-height: 1.3;

}

.why-card p {

    color: var(--text-muted);

    line-height: 1.7;

}

/* TABLET */

@media (max-width: 1200px) {

    .why-grid {

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

    }

}

/* MOBILE */

@media (max-width: 768px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

}

/* ==========================
   MUSIC
========================== */

.music {

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

}

.music-wrapper {

    display: grid;

    grid-template-columns: 1fr 500px;

    gap: 80px;

    align-items: center;

}

.music-content h2 {

    font-size: 56px;

    line-height: 1.1;

    margin-bottom: 25px;

}

.music-content p {

    color: var(--text-secondary);

    font-size: 18px;

    max-width: 650px;

    margin-bottom: 35px;

}

/* PLATFORMY */

.music-platforms {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.platform-card {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background: var(--card);

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

    border-radius: 20px;

    transition: .3s ease;

}

.platform-card:hover {

    border-color: var(--primary);

    transform: translateX(5px);

}

.platform-icon {

    width: 60px;
    height: 60px;

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

    border-radius: 14px;

    background: var(--bg3);

    font-size: 24px;

}

.platform-card h3 {

    font-size: 22px;

    margin-bottom: 4px;

}

.platform-card span {

    color: var(--text-muted);

    font-size: 14px;

}

/* MOBILE */

@media (max-width: 991px) {

    .music-wrapper {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 768px) {

    .music-content h2 {

        font-size: 42px;

    }

}

/* ==========================
   PARTNERS
========================== */

.partners {

    background: var(--bg2);

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

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

}

.section-header.center {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 80px;

}

.partners-grid {

    display: grid;

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

    gap: 24px;

}

.partner-item {

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--card);

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

    border-radius: 20px;

    transition: .3s ease;

}

.partner-item:hover {

    border-color: var(--primary);

    transform: translateY(-4px);

}

.partner-item img {

    max-width: 120px;

    max-height: 50px;

    opacity: .7;

    transition: .3s ease;

}

.partner-item:hover img {

    opacity: 1;

}

/* TABLET */

@media (max-width: 1200px) {

    .partners-grid {

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

    }

}

/* MOBILE */

@media (max-width: 768px) {

    .partners-grid {

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

    }

}

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

.cta-section {

    padding: 140px 0;

}

.cta-box {

    text-align: center;

    padding: 100px 60px;

    border-radius: 32px;

    background: linear-gradient(
        135deg,
        var(--card),
        var(--bg2)
    );

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

}

.cta-box h2 {

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

    line-height: 1.1;

    margin: 25px 0;

}

.cta-box p {

    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 18px;

    color: var(--text-secondary);

}

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

}

/* MOBILE */

@media (max-width: 768px) {

    .cta-box {

        padding: 60px 30px;

    }

    .cta-buttons {

        flex-direction: column;

    }

    .cta-buttons a {

        width: 100%;

    }

}

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

.site-footer {

    padding: 80px 0 40px;

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

    background: var(--bg2);
    margin-bottom:-120px;

}

.footer-top {

    display: grid;

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

    gap: 60px;

    padding-bottom: 50px;

}

.footer-brand h3 {

    font-size: 28px;

    margin-bottom: 15px;

    letter-spacing: 2px;

}

.footer-brand p {

    max-width: 400px;

    color: var(--text-muted);

}

.footer-contact,
.footer-links {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.footer-contact h4,
.footer-links h4 {

    margin-bottom: 15px;

    color: var(--text);

}

.footer-contact a,
.footer-links a {

    color: var(--text-muted);

    transition: .25s ease;

}

.footer-contact a:hover,
.footer-links a:hover {

    color: var(--primary);

}

.footer-bottom {

    padding-top: 30px;

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

    text-align: center;

}

.footer-bottom p {

    color: var(--text-muted);

    font-size: 14px;

}

/* MOBILE */

@media (max-width: 991px) {

    .footer-top {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}

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

.back-to-top {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 55px;
    height: 55px;

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

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 24px;

    z-index: 999;

    transition: .25s ease;

}

.back-to-top:hover {

    background: var(--primary-hover);

    transform: translateY(-4px);

}

/* ===================================
   SINGLE AKCE
=================================== */

.single-event{
    padding:80px 0 120px;
}

/* HERO */

.event-hero{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:50px;
    align-items:start;
    margin-bottom:80px;
}


.event-poster {
    position: relative;
    overflow: hidden;

    
    aspect-ratio: 3 / 4;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;

    background: #0a0a0d;
    width: 320px;
    height: 380px;
    overflow: hidden;
    border-radius: 16px;
}

/* Obrázek z WordPress featured image */
.event-poster img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

/* Jemné zatmavení spodní části */
.event-poster::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0, 0, 0, 0.28) 100%
        );
}

/* Placeholder pokud obrázek není */
.event-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #8b5cf6;

    font-weight: 800;
    letter-spacing: 0.12em;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(139, 92, 246, 0.18),
            transparent 45%
        ),
        #0a0a0d;
}

.event-info h1{
    font-size:4rem;
    line-height:1;
    margin-bottom:20px;
}

.event-lead{
    font-size:1.15rem;
    color:var(--text-secondary);
    line-height:1.8;
    margin-bottom:25px;
}

.event-status{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:600;
}

.event-status.planned{
    background:rgba(139,92,246,.15);
    color:var(--primary);
    margin: 25px 0;
}

.event-status.live{
    background:rgba(34,197,94,.15);
    color:#22c55e;
    margin: 25px 0;
}

.event-status.finished{
    background:rgba(191, 28, 28, 0.15);
    color:#c52222;
    margin: 25px 0;
}

/* SLUŽBY */

.event-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
}

.badge{
    background:rgba(139,92,246,.12);
    border:1px solid rgba(139,92,246,.25);
    color:var(--primary);
    padding:10px 16px;
    border-radius:12px;
    font-size:.9rem;
    font-weight:600;
}

/* INFO */

.event-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.summary-item{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
}

.summary-item span{
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-muted);
    margin-bottom:8px;
}

.summary-item strong{
    font-size:1.1rem;
    color:var(--text);
}

/* GRID SEKCE */

.event-bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:80px;
}

.event-box{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:35px;
}

.event-box h2{
    margin-bottom:25px;
    font-size:1.4rem;
}

/* HARMONOGRAM */

.timeline-content{
    position:relative;
}

.timeline-content::before{
    content:'';
    position:absolute;
    left:25px;
    top:10px;
    bottom:10px;
    width:2px;
    background:var(--primary);
}

.timeline-content p{
    position:relative;
    padding-left:85px;
    margin-bottom:20px;
    color:var(--text-secondary);
    line-height:1.7;
}

.timeline-content p:last-child{
    margin-bottom:0;
}

.timeline-content p::before{
    content:'';
    position:absolute;
    left:19px;
    top:5px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 15px rgba(139,92,246,.4);
}

/* PARTNEŘI */

.partners-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.partner{
    min-height:120px;
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.partner img{
    max-width:100%;
    max-height:70px;
    width:auto;
}

/* REFERENCE */

.reference-card{
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    margin-bottom:15px;
}

.reference-card:last-child{
    margin-bottom:0;
}

.reference-card h3{
    margin-bottom:10px;
}

.reference-card p{
    color:var(--text-secondary);
    line-height:1.7;
}

/* TLAČÍTKA */

.event-box .btn{
    margin-top:20px;
}

/* AFTERMOVIE */

.event-aftermovie{
    margin-top:80px;
}

.event-aftermovie h2{
    text-align:center;
    margin-bottom:30px;
}

.event-aftermovie iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
    border-radius:20px;
}

/* MOBIL */

@media(max-width:991px){

    .event-hero{
        grid-template-columns:1fr;
    }

    .event-summary-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .event-bottom-grid{
        grid-template-columns:1fr;
    }

    .event-info h1{
        font-size:3rem;
    }
}

@media(max-width:576px){

    .event-summary-grid{
        grid-template-columns:1fr;
    }

    .partners-grid{
        grid-template-columns:1fr;
    }

    .event-info h1{
        font-size:2.3rem;
    }

    .timeline-content p{
        padding-left:65px;
    }
}


.event-title-row{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

    flex-wrap:wrap;
}

.event-title-row h1{
    margin:0;
}

.event-badge-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 16px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;
}

.event-badge-status.planned{

    background:rgba(139,92,246,.15);

    color:var(--primary);

    border:1px solid rgba(139,92,246,.3);
}

.event-badge-status.live{

    background:rgba(34,197,94,.15);

    color:#22c55e;

    border:1px solid rgba(34,197,94,.3);
}

.event-badge-status.finished{

    background:rgba(172, 17, 17, 0.15);

    color:#d60404;

    border:1px solid rgba(161, 107, 107, 0.3);
}

.reference-avatar{

    width:70px;
    height:70px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:15px;
}

.reference-position{

    display:block;

    color:var(--primary);

    margin-bottom:10px;
}

.reference-rating{

    color:#fbbf24;

    margin-bottom:15px;

    font-size:1.1rem;
}

.partners-grid{

    display:grid;

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

    gap:20px;
}

.partner-card{

    background:var(--bg2);

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

    border-radius:20px;

    padding:25px;

    transition:.3s ease;
}

.partner-card:hover{

    transform:translateY(-4px);

    border-color:var(--primary);
}

.partner-logo{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;
}

.partner-logo img{

    max-width:100%;

    max-height:70px;

    width:auto;
}

.partner-card h3{

    margin-bottom:10px;

    font-size:1.2rem;
}

.partner-type{

    display:inline-flex;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(139,92,246,.15);

    color:var(--primary);

    font-size:.8rem;

    font-weight:600;

    margin-bottom:15px;
}

.partner-card p{

    color:var(--text-secondary);

    line-height:1.7;

    margin-bottom:20px;
}

.partner-link{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;
}

.partner-link:hover{

    opacity:.8;
}

/* ===================================
   ARCHIVE AKCE
=================================== */

.events-archive{
    padding:120px 0;
}

.archive-header{
    text-align:center;
    margin-bottom:60px;
}

.archive-header h1{
    margin:15px 0;
}

.archive-header p{
    color:var(--text-secondary);
}

.events-table-wrapper{
    overflow-x:auto;
}

.events-table{

    width:100%;

    border-collapse:collapse;

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;
}

.events-table th{

    text-align:left;

    padding:20px;

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

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--text-muted);
}

.events-table td{

    padding:20px;

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

    vertical-align:middle;
}

.events-table tr:hover{

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

.event-title-cell{

    display:flex;

    align-items:center;

    gap:15px;
}

.event-thumb{

    width:60px;

    height:60px;

    flex-shrink:0;
}

.event-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:12px;
}

.event-title-cell strong{

    display:block;

    margin-bottom:4px;
}

.event-title-cell span{

    color:var(--text-secondary);

    font-size:.9rem;
}

.table-link{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;
}

.table-link:hover{

    opacity:.8;
}

@media(max-width:991px){

    .events-table{

        min-width:900px;
    }

}
.events-archive{
    padding:120px 0;
}

.archive-header{
    text-align:center;
    margin-bottom:60px;
}

.events-list{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.event-row{

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;

    transition:.3s ease;
}

.event-row:hover{

    border-color:var(--primary);
}

.event-row-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:1px solid var(--border);
}

.event-main{

    display:flex;

    align-items:center;

    gap:20px;
}

.event-thumb{

    width:70px;
    height:70px;
}

.event-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:12px;
}

.event-main h3{

    margin:0 0 5px;
}

.event-main h3 a{

    text-decoration:none;

    color:inherit;
}

.event-date{

    color:var(--text-secondary);
}

.event-row-bottom{

    display:grid;

    grid-template-columns:
    repeat(6,1fr)
    140px;

    gap:20px;

    padding:25px 30px;
}

.event-info-item strong{

    display:block;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--text-muted);

    margin-bottom:8px;
}

.event-action{

    display:flex;

    align-items:center;

    justify-content:flex-end;
}

@media(max-width:991px){

    .event-row-top{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }

    .event-row-bottom{

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

    .event-action{

        justify-content:flex-start;
    }

}

@media(max-width:576px){

    .event-row-bottom{

        grid-template-columns:1fr;
    }

}
.single-akce-datum {
    padding: 15px 0;
}

/* ===================================
   ARCHIVE GALERIE
=================================== */

.gallery-archive{
    padding:120px 0;
}

.archive-header{
    text-align:center;
    margin-bottom:60px;
}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:30px;
}

.gallery-card{

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;

    transition:.3s ease;
}

.gallery-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);
}

.gallery-image{

    aspect-ratio:16/10;

    overflow:hidden;
}

.gallery-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s ease;
}

.gallery-card:hover .gallery-image img{

    transform:scale(1.05);
}

.gallery-content{

    padding:25px;
}

.gallery-content h2{

    margin-bottom:15px;

    font-size:1.4rem;
}

.gallery-content h2 a{

    color:inherit;

    text-decoration:none;
}

.gallery-meta{

    color:var(--text-secondary);

    margin-bottom:10px;
}

.gallery-content .btn{

    margin-top:20px;
}

/* ===================================
   SINGLE GALERIE
=================================== */

.single-gallery{
    padding:120px 0;
}

.gallery-header{

    display:grid;

    grid-template-columns:1fr 450px;

    gap:50px;

    align-items:center;

    margin-bottom:80px;
}

.gallery-info h1{

    margin:15px 0 30px;
}

.gallery-meta{

    display:grid;

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

    gap:15px;
}

.meta-item{

    background:var(--card);

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

    border-radius:16px;

    padding:20px;
}

.meta-item strong{

    display:block;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--text-muted);

    margin-bottom:8px;
}

.meta-item a{

    color:var(--primary);

    text-decoration:none;
}

.meta-date{

    display:flex;
    flex-direction:column;
    gap:4px;

}

.meta-date-day{

    font-weight:700;
    color:#fff;

}

.meta-date-time{

    font-size:.9rem;
    color:#a1a1aa;

}
.meta-location{

    display:flex;
    flex-direction:column;
    gap:4px;

}

.meta-location-title{

    font-weight:700;
    color:#fff;

}

.meta-location-address{

    font-size:.9rem;
    color:#a1a1aa;

}
.gallery-cover{
    max-width:320px;
    max-height: 400px;
}
.gallery-cover img{

    width:100%;

    max-height: 400px;

    border-radius:20px;

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

.gallery-content{

    max-width:1400px;

    margin:0 auto;
}

/* Gutenberg galerie */

.gallery-content .wp-block-gallery{

    margin-top:0;
}

.gallery-content .wp-block-image img{

    border-radius:16px;
}

.gallery-back{

    text-align:center;

    margin-top:60px;
}

@media(max-width:991px){

    .gallery-header{

        grid-template-columns:1fr;
    }

    .gallery-meta{

        grid-template-columns:1fr;
    }

}


.portfolio-item{
    position:relative;
    height:380px;
}

.portfolio-item a{
    display:block;
    width:100%;
    height:100%;
}
.portfolio-image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.portfolio-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.portfolio-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:30px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.75) 35%,
        rgba(0,0,0,.35) 70%,
        rgba(0,0,0,.10) 100%
    );
}

.portfolio-overlay span{

    display:inline-block;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;
}

.portfolio-overlay h3{
    color:#fff;
    margin:0;
}

.section-footer{
    text-align:center;
    margin-top:50px;
}

/* ODKAZ NA GALERII */

.event-gallery-link{
    margin:30px 0;
}

.event-gallery-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:40px;

    background:linear-gradient(
        135deg,
        rgba(139,92,246,.15),
        rgba(139,92,246,.05)
    );

    border:1px solid rgba(139,92,246,.25);

    border-radius:24px;
}

.event-gallery-box span{

    display:block;

    color:var(--primary);

    text-transform:uppercase;

    font-size:.8rem;

    letter-spacing:1px;

    margin-bottom:10px;
}

.event-gallery-box h2{
    margin:0;
}

@media(max-width:768px){

    .event-gallery-box{

        flex-direction:column;

        align-items:flex-start;
    }

}

/* ===================================
   ARCHIVE REFERENCE
=================================== */

.references-archive{
    padding:120px 0;
}

.references-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(380px,1fr));

    gap:30px;
}

.reference-item{

    background:var(--card);

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

    border-radius:24px;

    padding:35px;

    transition:.3s ease;
}

.reference-item:hover{

    transform:translateY(-5px);

    border-color:var(--primary);
}

.reference-avatar{

    width:80px;
    height:80px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

    border:3px solid rgba(139,92,246,.2);
}

.reference-rating{

    color:#fbbf24;

    font-size:1.2rem;

    margin-bottom:15px;

    letter-spacing:2px;
}

.reference-item h3{

    margin-bottom:8px;
}

.reference-company{

    display:block;

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;
}

.reference-text{

    color:var(--text-secondary);

    line-height:1.8;
}

/* ===================================
   TESTIMONIALS
=================================== */

.testimonials{
    background:var(--bg2);
}

.testimonials-grid{

    display:grid;

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

    gap:30px;
}

.testimonial-card{

    background:var(--card);

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

    border-radius:24px;

    padding:35px;

    transition:.3s ease;
}

.testimonial-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);
}

.testimonial-rating{

    color:#fbbf24;

    font-size:1.2rem;

    margin-bottom:20px;
}

.testimonial-text{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:30px;

    min-height:140px;
}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:15px;
}

.testimonial-author img{

    width:60px;
    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(139,92,246,.25);
}

.testimonial-author strong{

    display:block;

    margin-bottom:5px;
}

.testimonial-author span{

    color:var(--text-muted);

    font-size:.9rem;
}

@media(max-width:991px){

    .testimonials-grid{

        grid-template-columns:1fr;
    }

}
/* PARTNERI */

.partners-archive-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;
}

.partner-archive-card{

    background:var(--card);

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

    border-radius:24px;

    padding:30px;

    text-align:center;

    transition:.3s ease;
}

.partner-archive-card:hover{

    border-color:var(--primary);

    transform:translateY(-5px);
}

.partner-header{

    display:grid;

    grid-template-columns:250px 1fr;

    gap:50px;

    align-items:center;

    margin-bottom:80px;
}

.partner-logo-large img{

    width:100%;
}

.event-cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:25px;
}

.event-card{

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;
}

.event-card img{

    width:100%;

    height:220px;

    object-fit:cover;
}

.event-card h3{

    padding:20px;
}

/* ===================================
   CLIENT ZONE
=================================== */

.client-zone{
    padding:120px 0;
}

.client-header{
    margin-bottom:60px;
}

.client-header h1{
    margin-bottom:10px;
}

.client-header p{
    color:var(--text-secondary);
}

.client-events h2{
    margin-bottom:30px;
}

.client-event-card{

    display:grid;

    grid-template-columns:1fr 180px;

    gap:40px;

    align-items:center;

    background:var(--card);

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

    border-radius:20px;

    padding:35px;

    margin-bottom:25px;
}

.client-event-card h3{
    margin-bottom:8px;
}

.client-event-card span{
    color:var(--primary);
}

@media(max-width:768px){

    .client-event-card{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }

}
/* CLIENT GALLERIES */

.client-galleries{
    margin-top:80px;
}

.client-galleries h2{
    margin-bottom:30px;
}

.client-gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(380px,1fr));

    gap:25px;
}

.client-gallery-card{

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;
}

.client-gallery-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;
}

.client-gallery-content{
    padding:25px;
}

.client-gallery-content h3{
    margin-bottom:20px;
}

.client-documents{
    margin-top:80px;
}

.client-document-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.client-document{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--card);

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

    border-radius:20px;

    padding:25px;
}

.client-document span{
    color:var(--primary);
}

@media(max-width:768px){

    .client-document{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }

}

.event-progress{
    margin-top:15px;
}

.event-progress-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

.event-progress-bar{

    height:12px;

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

    border-radius:999px;

    overflow:hidden;
}

.event-progress-fill{

    background:linear-gradient(
        90deg,
        #8b5cf6,
        #a855f7
    );

    height:100%;
}

.event-checklist{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    margin-top:20px;
}

.event-step{
    display:flex;
    align-items:center;
    gap:8px;
}

.event-step .done{
    color:#22c55e;
}

.event-step .waiting{
    color:var(--text-muted);
}
.event-progress-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:20px;
}

.event-progress-details h4{
    margin-bottom:10px;
    font-size:.9rem;
    text-transform:uppercase;
    color:var(--text-muted);
}

.done-step{
    color:#22c55e;
    margin-bottom:8px;
}

.waiting-step{
    color:var(--text-muted);
    margin-bottom:8px;
}

@media(max-width:768px){
    .event-progress-details{
        grid-template-columns:1fr;
    }
}

.event-status{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

    margin:15px 0;
}

.event-status.planovana{
    background:rgba(59,130,246,.15);
    color:#60a5fa;
}

.event-status.probiha{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.event-status.dokoncena{
    background:rgba(168,85,247,.15);
    color:#c084fc;
}
.event-percent{

    color:var(--primary);

    margin-left:10px;

    font-size:1rem;

    font-weight:700;
}

/* DASHBOARD */

.client-dashboard{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:40px 0 60px;
}

.dashboard-card{

    background:var(--card);

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

    border-radius:20px;

    padding:30px;

    text-align:center;
}

.dashboard-card strong{

    display:block;

    font-size:2.5rem;

    line-height:1;

    margin-bottom:10px;

    color:var(--primary);
}

.dashboard-card span{

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.8rem;
}

@media(max-width:768px){

    .client-dashboard{
        grid-template-columns:repeat(2,1fr);
    }

}

.client-project{

    padding:120px 0;
}

.client-project h1{

    font-size:4rem;

    margin-bottom:30px;
}

.project-progress{

    display:flex;

    justify-content:space-between;

    margin-bottom:15px;
}

.project-progress strong{

    color:var(--primary);

    font-size:1.2rem;
}

.project-status-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-top:40px;
}

.project-completed,
.project-pending{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:30px;
}

.project-completed h3{

    color:#22c55e;

    margin-bottom:20px;
}

.project-pending h3{

    color:#f59e0b;

    margin-bottom:20px;
}

.project-step{

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.05);
}

.project-documents,
.project-galleries{

    margin-top:80px;
}

.project-documents h2,
.project-galleries h2{

    margin-bottom:30px;
}

.project-document-list{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.project-document{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:25px;
}

.project-document h3{

    margin:0 0 5px;
}

.project-document span{

    color:#888;
}

.project-gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:30px;
}

.project-gallery-card{

    overflow:hidden;

    border-radius:20px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);
}

.project-gallery-card img{

    width:100%;

    height:250px;

    object-fit:cover;
}

.project-gallery-content{

    padding:25px;
}
.document-event{

    margin:6px 0;

    color:#8b5cf6;

    font-size:.9rem;

    font-weight:500;
}
.project-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:40px;
}

.project-header h1{

    margin:0;
}

.back-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

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

    border-radius:12px;

    background:var(--card);

    color:var(--text);

    text-decoration:none;

    white-space:nowrap;

    transition:.3s ease;
}

.back-button:hover{

    border-color:var(--primary);

    color:var(--primary);
}
.project-timeline{
    margin-top:60px;
}

.timeline-box{

    background:var(--card);

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

    border-radius:20px;

    padding:25px 40px;

    line-height:1.8;
}
.project-client-note{

    margin-top:60px;
}

.client-note-box{

    background:rgba(139,92,246,.08);

    border:1px solid rgba(139,92,246,.25);

    border-radius:20px;

    padding:30px;

    line-height:1.8;
}

.client-note-box p{
    margin:0;
}
.project-updated{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:50px 0 0 0;

    padding:20px 25px;

    background:var(--card);

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

    border-radius:16px;
}

.project-updated span{

    color:var(--text-muted);

    font-size:.9rem;
}

.project-updated strong{

    color:var(--primary);

    font-weight:600;
}

@media(max-width:768px){

    .project-updated{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;
    }

}
.project-contact{

    margin-top:60px;
}

.project-contact-card{

    background:var(--card);

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

    border-radius:20px;

    padding:30px;
}

.contact-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.05);
}

.contact-row:last-child{
    border-bottom:none;
}

.contact-row strong{

    color:var(--text-muted);
}

.contact-row a{

    color:var(--primary);

    text-decoration:none;
}

@media(max-width:768px){

    .contact-row{

        flex-direction:column;

        align-items:flex-start;

        gap:5px;
    }

}
.project-invoices {

    margin: 25px 0 0 0;
} 
.client-invoices{

    margin-top:80px;
}

.invoice-list{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.invoice-card{

    display:grid;

    grid-template-columns:1fr auto auto;

    gap:20px;

    align-items:center;

    padding:25px;

    background:var(--card);

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

    border-radius:20px;
}

.invoice-status{

    padding:8px 14px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;
}

.invoice-status.uhrazeno{

    background:rgba(34,197,94,.15);

    color:#22c55e;
}

.invoice-status.cekajici{

    background:rgba(245,158,11,.15);

    color:#f59e0b;
}

.invoice-status.po_splatnosti{

    background:rgba(239,68,68,.15);

    color:#ef4444;
}
.empty-state{

    padding:40px;

    text-align:center;

    color:var(--text-muted);
}
.project-footer-nav{

    display:flex;

    justify-content:flex-end;

    margin-top:80px;
}
.dashboard-invoices{

    text-align:left;
}

.dashboard-invoices strong{

    display:block;

    margin-bottom:20px;

    color:var(--primary);
}

.invoice-summary{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.invoice-row{

    display:flex;

    justify-content:space-between;

    font-size:.9rem;
}

.invoice-row.paid span{
    color:#22c55e;
}

.invoice-row.pending span{
    color:#f59e0b;
}

.invoice-row.overdue span{
    color:#ef4444;
}
.client-activity{

    margin:30px 0 50px;

    padding:20px 25px;

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:16px;
}
.client-activity h2{

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

    opacity:.6;
}

.activity-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;


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

    padding:10px 0;

    font-size:.92rem;
}

.activity-item:last-child{

    border-bottom:none;
}

.activity-item span{

    opacity:.85;
    font-weight:500;
}

.activity-item small{

    font-size:.8rem;

    opacity:.45;

    white-space:nowrap;
}
.purple {
    color: var(--primary);
}
.project-info-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin:30px 0 40px;
}

.project-info-card{

    background:var(--card);

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

    border-radius:16px;

    padding:20px;
}

.project-info-card span{

    display:block;

    font-size:.85rem;

    opacity:.6;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.05em;
}

.project-info-card strong{

    display:block;

    font-size:1rem;

    line-height:1.5;
}

.project-info-card small{

    opacity:.7;

    font-weight:400;
}
.project-countdown{

    margin:0 0 40px;

    padding:20px 25px;

    border-radius:16px;

    background:
        rgba(59,130,246,.08);

    border:
        1px solid rgba(59,130,246,.2);

    text-align:center;
}

.project-countdown.upcoming{

    background:rgba(59,130,246,.08);

    border:1px solid rgba(59,130,246,.2);
}

.project-countdown.upcoming strong{

    color:#60a5fa;
}

.project-countdown.running{

    background:rgba(34,197,94,.08);

    border:1px solid rgba(34,197,94,.2);
}

.project-countdown.running strong{

    color:#22c55e;
}

.project-countdown.finished{

    background:rgba(239,68,68,.08);

    border:1px solid rgba(239,68,68,.2);
}

.project-countdown.finished strong{

    color:#ef4444;
}

.project-countdown strong{

    color:#60a5fa;

    font-size:1.05rem;
}

.project-timeline{

    margin:30px 0;
}


.timeline-item{

    position:relative;

    display:flex;

    gap:30px;

    padding:0 0 25px 0;
}

.timeline-item:last-child{

    padding-bottom:0;
}

.timeline-item::before{

    content:'';

    position:absolute;

    left:70px;

    top:24px;

    width:2px;

    height:100%;

    background:rgba(255,255,255,.08);
}

.timeline-item:last-child::before{

    display:none;
}

.timeline-time{

    min-width:70px;

    font-weight:700;

    color:var(--primary);
}

.timeline-content{

    position:relative;

    flex:1;

    padding-left:25px;
}

.timeline-content::before{

    content:'';

    position:absolute;

    left:-7px;

    top:7px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--primary);
}
.login-page{

    max-width:500px;

    margin:80px auto;
}

.login-box{

    padding:40px;

    border-radius:20px;

    background:var(--card);

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

.login-box h1{

    margin-bottom:30px;
}

.login-box input{

    width:100%;

    margin-bottom:15px;
}
.login-box form p{
    margin-bottom:20px;
}

.login-box label{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-weight:500;
}

.login-box input[type="text"],
.login-box input[type="password"]{

    width:100%;
    height:50px;

    padding:0 15px;

    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;

    background:#111;
    color:#fff;
}

.login-box .login-remember{

    display:flex;
    align-items:center;
    gap:10px;
}

.login-box .login-remember input{

    width:auto;
    margin:0;
}

.login-box .button-primary{

    width:100%;

    height:50px;

    border:none;
    border-radius:12px;

    background:linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#fff;

    font-weight:600;

    cursor:pointer;
}

.login-box .button-primary:hover{

    opacity:.9;
}

.login-box a{

    color:#a855f7;
}
.header-client-zone{

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

    height:44px;

    padding:0 20px;

    border-radius:12px;

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

    color:#fff;

    text-decoration:none;

    transition:.2s;
}

.header-client-zone:hover{

    border-color:#8b5cf6;

    color:#8b5cf6;
}
.user-menu{

    position:relative;
}

.user-menu-toggle{

    display:flex;
    align-items:center;
    gap:8px;

    height:44px;

    padding:0 18px;

    border-radius:12px;

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

    background:transparent;

    color:#fff;

    cursor:pointer;

    transition:.2s;
}

.user-menu-toggle:hover{

    border-color:#8b5cf6;
}

.user-dropdown{

    position:absolute;

    top:55px;

    right:0;

    min-width:220px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    overflow:hidden;

    display:none;

    z-index:9999;

    box-shadow:
        0 20px 40px rgba(0,0,0,.4);
}

.user-menu.active .user-dropdown{

    display:block;
}

.user-dropdown a{

    display:block;

    padding:14px 18px;

    color:#fff;

    text-decoration:none;

    transition:.2s;
}

.user-dropdown a:hover{

    background:rgba(255,255,255,.05);
}

.registration-page{

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:80px 20px;
}

.registration-box{

    width:100%;

    max-width:500px;

    padding:40px;

    border-radius:20px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);
}

.registration-box h1{

    margin-bottom:20px;
}

.registration-box form{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.registration-box input{

    width:100%;

    height:50px;

    padding:0 15px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#18181b;

    color:#fff;
}

.client-profile{

    padding:60px 0;
}

.profile-form{

    max-width:700px;
}

.form-group{

    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.form-group input{

    width:100%;

    height:50px;

    padding:0 15px;

    border-radius:12px;

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

    background:#111;

    color:#fff;
}

.success-message{

    margin-bottom:20px;

    padding:15px;

    border-radius:12px;

    background:rgba(34,197,94,.15);

    color:#22c55e;
}
.error-message{

    margin-bottom:20px;

    padding:15px;

    border-radius:12px;

    background:rgba(239,68,68,.15);

    color:#ef4444;
}
.project-review{

    max-width:700px;

    margin:60px auto;

    padding:35px;

    border-radius:20px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

}

.project-review h2{

    margin:0 0 25px;

    font-size:32px;

}

.project-review form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.project-review select{

    width:180px;

    height:50px;

    padding:0 15px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#0f172a;

    color:#fff;

    font-size:18px;

}

.project-review textarea{

    width:100%;

    min-height:180px;

    padding:20px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#0f172a;

    color:#fff;

    font-size:15px;

    line-height:1.6;

}

.project-review textarea::placeholder{

    color:#64748b;

}

.project-review select:focus,
.project-review textarea:focus{

    outline:none;

    border-color:#8b5cf6;

    box-shadow:
        0 0 0 3px
        rgba(139,92,246,.15);

}

.project-review .btn{

    width:220px;

    height:54px;

}
.review-finished{

    max-width:700px;

    margin:50px auto;

    padding:25px 30px;

    border-radius:16px;

    background:rgba(34,197,94,.08);

    border:1px solid rgba(34,197,94,.2);

}

.review-finished strong{

    display:block;

    color:#22c55e;

    margin-bottom:8px;

}

.review-finished p{

    margin:0;

    color:#cbd5e1;

}

.hero-brand-logo {
    position: absolute;

    left: 72%;
    top: 64%;

    width: 350px;
    height: auto;

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

    mix-blend-mode: screen;

    opacity: 0.22;

   

    pointer-events: none;
    user-select: none;

    z-index: 1;
}
.hero-brand-logo2 {
    position: absolute;

    left: 27%;
    top: 64%;

    width: 350px;
    height: auto;

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

    mix-blend-mode: screen;

    opacity: 0.22;

   

    pointer-events: none;
    user-select: none;

    z-index: 1;
}

::selection {
    background: rgba(139, 92, 246, 0.18);
    color: inherit;
}

::-moz-selection {
    background: rgba(139, 92, 246, 0.18);
    color: inherit;
}
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.65) #050505;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.65);
    border-radius: 999px;
    border: 2px solid #050505;
}

::-webkit-scrollbar-thumb:hover {
    background: #8b5cf6;
}
input,
textarea {
    caret-color: var(--primary);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding-top: 24px;
    margin-top: 40px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright {
    margin: 0;

    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}


/* STRANGER CREDIT */

.stranger-credit {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #fff;
    text-decoration: none;

    transition: opacity 0.25s ease;
}

.stranger-credit-label {
    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.22em;

    color: rgba(255, 255, 255, 0.4);
}

.stranger-credit-divider {
    width: 1px;
    height: 22px;

    background: rgba(255, 255, 255, 0.12);
}

.stranger-credit-brand {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.28em;

    color: #fff;

    transition:
        color 0.25s ease,
        letter-spacing 0.25s ease;
}

.stranger-credit-arrow {
    font-size: 18px;
    line-height: 1;

    color: #8b5cf6;

    transition: transform 0.25s ease;
}


/* HOVER */

.stranger-credit:hover
.stranger-credit-brand {
    color: #8b5cf6;
    letter-spacing: 0.34em;
}

.stranger-credit:hover
.stranger-credit-arrow {
    transform: translate(3px, -3px);
}


/* MOBILE */

@media (max-width: 700px) {

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* ======================================================
   SINGLE EVENT
====================================================== */

.single-event{
    background:#09090b;
    color:#fff;
    overflow:hidden;
}


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

.event-hero{

    position:relative;
    height:100vh;
min-height:820px;
    display:flex;
    align-items:center;
    overflow:hidden;
  
    margin-top:-80px;

}

.event-hero-background{

    position:absolute;
    inset:0;
    z-index:1;

}

.event-hero-image{

    width:100%;
    height:100%;
    object-fit:cover;
    filter:
brightness(.45)
contrast(1.05)
saturate(.9);

}

.event-hero::before{

    content:"";
    position:absolute;
    inset:0;
    z-index:2;

    background:

linear-gradient(
90deg,
rgba(5,5,8,.95) 0%,
rgba(8,8,12,.82) 32%,
rgba(25,18,40,.55) 55%,
rgba(124,58,237,.28) 100%
);

}

.event-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:180px;

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

    z-index:3;

}

.event-hero .container{

    position:relative;
    z-index:5;

}

.event-hero-content{

    max-width:760px;
    display:flex;

align-items:center;

height:100%;

}
.event-hero-left{

    max-width:720px;

}
.event-status{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    font-size:.85rem;
    font-weight:700;

    margin-bottom:30px;

    backdrop-filter:blur(18px);

}

.event-status.planned{

    background:rgba(139,92,246,.18);
    color:#c4b5fd;
    border: 1px solid  #c4b5fd;

}

.event-status.live{

    background:rgba(22,163,74,.15);
    color:#86efac;
    border: 1px solid  #86efac;

}

.event-status.finished{

    background:rgba(187, 3, 3, 0.08);
    color:#c31010;
    border: 1px solid  #c31010;

}

.event-title{

    font-size:clamp(4rem,8vw,6rem);
    line-height:1.05;
    font-weight:900;

    margin-bottom:28px;

}

.event-description{

    font-size:1.25rem;
    color:#d4d4d8;

    line-height:1.9;

    max-width:700px;

    margin-bottom:45px;

}

.event-meta{

    display:flex;
    flex-wrap:wrap;

    gap:20px;

    margin-bottom:40px;

}

.meta-item{

    display:flex;
    align-items:center;

    gap:12px;

    padding:15px 22px;

    border-radius:16px;

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

    backdrop-filter:blur(16px);

}

.meta-item i{

    color:#8b5cf6;
    font-size:1.15rem;

}

.event-services{

    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-bottom:45px;

}

.event-service{

    padding:10px 18px;

    border-radius:999px;

    background:#18181b;

    color:#d4d4d8;

    font-size:.9rem;

    border:1px solid rgba(255,255,255,.08);

}

.event-actions{

    display:flex;
    flex-wrap:wrap;

    gap:18px;

}

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:14px;

    background:#8b5cf6;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.btn-primary:hover{

    background:#7c3aed;

    transform:translateY(-3px);

}



.section-subtitle{

    display:inline-block;

    color:#8b5cf6;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:15px;

}

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

.event-content{

    margin-top:-80px;
    

}

.event-grid{
    display:grid;
    grid-template-columns: minmax(700px,1fr) 380px;
    gap:35px;
    align-items:start;
}

.event-main{

    display:flex;
    flex-direction:column;
    gap:40px;

}


/* ======================================================
   CARDS
====================================================== */

.event-card{

    background:#121216;

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    padding:45px;

    

    min-height: 420px;

}

.event-card h2{

    font-size:2.25rem;

    margin:0 0 25px;

}

.event-card h3{

    font-size:1.4rem;

    margin-bottom:20px;

}

.event-lead{

    font-size:1.15rem;

    line-height:1.9;

    color:#d4d4d8;

    margin-bottom:35px;

}

.event-text{

    color:#d4d4d8;

    line-height:2;

}

.event-text p{

    margin-bottom:24px;

}

.event-text img{

    max-width:100%;
    height:auto;

    border-radius:18px;

}

.event-text ul,
.event-text ol{

    padding-left:22px;

    margin:30px 0;

}

.event-text li{

    margin-bottom:12px;

}

.event-info-list li{

    display:grid;

    grid-template-columns:48px 100px 1fr;

    gap:20px;

    align-items:flex-start;

}

.event-info-list strong{

    font-size:1rem;

    font-weight:600;

    color:#fff;

}

.event-info-list > li > div{

    color:#d4d4d8;

}

.location-name{

    font-weight:700;

    color:#fff;

    margin-bottom:4px;

}

.location-address{

    color:#8b8b94;

    line-height:1.6;

}

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

.section-header{

    margin:40px 0;

}

.section-header h2{

    font-size:2.3rem;

    margin-bottom:18px;

}

.section-header p{

    color:#a1a1aa;

    line-height:1.8;

    max-width:700px;

}


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

.event-gallery-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #6d28d9,
        #8b5cf6
    );

    border-radius:24px;

    padding:50px;
    margin: 35px 0;

}

.event-gallery-card::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    top:-150px;
    right:-120px;

    border-radius:50%;

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

}

.event-gallery-content{

    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

    z-index:2;

}

.event-gallery-content h2{

    font-size:2rem;

    color:#fff;

    margin-bottom:18px;

}

.event-gallery-content p{

    color:#ede9fe;

    line-height:1.8;

    max-width:520px;

}

.event-gallery-card .btn-primary{

    background:#fff;

    color:#6d28d9;

}

.event-gallery-card .btn-primary:hover{

    background:#f5f3ff;

}


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

.event-sidebar{

    position:sticky;

    top:120px;

}

.event-info-card{

    background:#121216;

    border-radius:24px;

    padding:35px;

    border:1px solid rgba(255,255,255,.06);

    

}

.event-info-card h3{

    margin-bottom:30px;

    font-size:1.6rem;

}

.event-info-list{

    list-style:none;

    padding:0;
    margin:0 0 35px;

}

.event-info-list li{

    display:grid;
    grid-template-columns:44px 80px 1fr;
    gap:18px;

    align-items:flex-start;

    padding:20px 0;

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

}

.event-info-list li:last-child{

    border-bottom:none;

}

.event-info-list i{

    width:32px;
    height:32px;

    display:flex;

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

    border-radius:12px;

    background:#2b1d47;

    color:#a855f7;

}

.event-info-label{

    font-size:.95rem;

    font-weight:500;

    color:#b3b3bd;

    padding-top:8px;

}

.event-info-value{

    font-weight:600;

    color:#fff;

    padding-top:8px;

}

.location-name{

    font-weight:700;

    color:#fff;

}

.location-address{

    margin-top:5px;

    color:#8f8f98;

    font-size:.9rem;

    line-height:1.5;

}
.event-type{

    display:inline-block;

    margin-bottom:16px;

    color:#8b5cf6;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}
.event-heading{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.event-title{

    margin:0;

}

.event-status{

    margin:0;

    flex-shrink:0;

}
@media (max-width:768px){

    .event-heading{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}
/* ======================================================
   TIMELINE
====================================================== */

.event-section{

    padding:0 0 35px 0;

}

.event-timeline{

    position:relative;

    max-width:900px;

    margin:60px auto 0;

}

.event-timeline::before{

    content:"";

    position:absolute;

    left:29px;
    top:0;
    bottom:0;

    width:2px;

    background:
    linear-gradient(
        to bottom,
        #8b5cf6,
        rgba(139,92,246,.15)
    );

}

.timeline-row{

    position:relative;

    display:grid;

    grid-template-columns:60px 120px 1fr;

    gap:35px;

    align-items:center;

    margin-bottom:40px;

}

.timeline-dot{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#8b5cf6;

    box-shadow:
        0 0 0 8px rgba(139,92,246,.12);

    justify-self:center;

    z-index:5;

}

.timeline-time{

    font-weight:700;

    color:#8b5cf6;

    font-size:1rem;

}

.timeline-card{

    background:#121216;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.06);

    padding:25px 30px;

    color:#d4d4d8;

    transition:.25s;

}

.timeline-card:hover{

    transform:translateY(-4px);

    border-color:rgba(139,92,246,.45);

}


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

.event-grid-2{

    display:grid;

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

    gap:40px;

}


/* ======================================================
   PARTNERS
====================================================== */

.partners-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:25px;

}

.partner-card{

    background:#18181b;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    transition:.3s;

    display:flex;

    flex-direction:column;

}

.partner-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

}

.partner-card-top{

    height:180px;

    display:flex;

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

    padding:30px;

    background:#09090b;

}

.partner-logo img{

    max-width:170px;
    max-height:90px;

    width:auto;
    height:auto;

}

.partner-card-body{

    padding:30px;

    flex:1;

}

.partner-card-body h3{

    font-size:1.3rem;

    margin-bottom:12px;

}

.partner-type{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(139,92,246,.15);

    color:#c4b5fd;

    font-size:.82rem;

}

.partner-card-body p{

    color:#a1a1aa;

    line-height:1.8;

}

.partner-card-footer{

    padding:0 30px 30px;

}


/* ======================================================
   REFERENCES
====================================================== */

.references-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));

    gap:30px;

}

.reference-card{

    background:#18181b;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.06);

    padding:35px;

    transition:.3s;

}

.reference-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

}

.reference-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.reference-avatar{

    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:50%;

}

.reference-top h3{

    margin:0;

    font-size:1.15rem;

}

.reference-top span{

    color:#a1a1aa;

    font-size:.9rem;

}

.reference-stars{

    display:flex;

    gap:5px;

    margin-bottom:22px;

}

.reference-stars i{

    color:#facc15;

}

.reference-card blockquote{

    margin:0;

    padding:0;

    color:#d4d4d8;

    line-height:1.9;

    font-style:normal;

    position:relative;

}

.reference-card blockquote::before{

    content:"“";

    position:absolute;

    left:-8px;
    top:-28px;

    font-size:4rem;

    color:rgba(139,92,246,.18);

    font-family:serif;

}
/* ======================================================
   AFTERMOVIE
====================================================== */

.event-video{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#121216;

    border:1px solid rgba(255,255,255,.06);

    aspect-ratio:16/9;

    box-shadow:
        0 30px 70px rgba(0,0,0,.35);

}

.event-video iframe{

    width:100%;
    height:100%;

    border:none;

}


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

.event-cta{

    padding:120px 0;

}

.event-cta-box{

    position:relative;

    overflow:hidden;

    padding:80px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #6d28d9,
        #8b5cf6
    );

}

.event-cta-box::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    top:-180px;
    right:-120px;

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

}

.event-cta-box::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    left:-120px;
    bottom:-120px;

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

}

.event-cta-box>*{

    position:relative;

    z-index:2;

}

.event-cta-box h2{

    color:#fff;

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

    margin:18px 0 25px;

}

.event-cta-box p{

    color:#ede9fe;

    font-size:1.1rem;

    line-height:1.9;

    max-width:720px;

    margin-bottom:40px;

}

.event-cta .btn-primary{

    background:#fff;

    color:#6d28d9;

}

.event-cta .btn-primary:hover{

    background:#f5f3ff;

}

.event-cta .btn-outline{

    border-color:rgba(255,255,255,.35);

}

.event-cta .btn-outline:hover{

    background:#fff;

    color:#6d28d9;

}


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

.partner-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:700;

    color:#8b5cf6;

    transition:.25s;

}

.partner-link:hover{

    transform:translateX(6px);

}


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

.event-card,
.partner-card,
.reference-card,
.event-info-card,
.timeline-card{

    transition:
    transform .3s ease,
    border-color .3s ease;

}

.event-card:hover,
.event-info-card:hover{

    border-color:rgba(139,92,246,.35);

    

    

}


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

.event-card,
.partner-card,
.reference-card,
.timeline-row,
.event-gallery-card{

    animation:eventFade .7s ease both;

}

@keyframes eventFade{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/* ======================================================
   SELECTION
====================================================== */

::selection{

    background:#8b5cf6;

    color:#fff;

}


/* ======================================================
   SCROLLBAR
====================================================== */

.event-text::-webkit-scrollbar{

    width:10px;

}

.event-text::-webkit-scrollbar-thumb{

    background:#8b5cf6;

    border-radius:999px;

}

.event-text::-webkit-scrollbar-track{

    background:#18181b;

}


/* ======================================================
   IMAGES
====================================================== */

.event-text img,
.partner-logo img,
.reference-avatar{

    user-select:none;

}


/* ======================================================
   FOCUS
====================================================== */

.btn-primary:focus,
.btn-outline:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(139,92,246,.25);

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

@media (max-width:1400px){

    .event-grid{

        grid-template-columns:1fr 340px;

    }

}

@media (max-width:1200px){

    .event-grid{

        grid-template-columns:1fr;

    }

    .event-sidebar{

        position:relative;
        top:auto;

    }

    .event-grid-2{

        grid-template-columns:1fr;

    }

}

@media (max-width:992px){

    .event-hero{

        min-height:600px;

        padding:80px 0;

    }

    .event-title{

        font-size:3rem;

    }

    .event-description{

        font-size:1.05rem;

    }

    .event-card{

        padding:35px;

    }

    .event-gallery-content{

        flex-direction:column;
        align-items:flex-start;

    }

    .references-grid{

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

    }

    .partners-grid{

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

    }

}

@media (max-width:768px){

    .event-content,
    .event-section,
    .event-cta{

        padding:0 0 70px 0;

    }

    .event-hero{

        min-height:auto;

        padding:120px 0 70px;

    }

    .event-title{

        font-size:2.5rem;

    }

    .event-meta{

        flex-direction:column;

    }

    .meta-item{

        width:100%;

    }

    .event-actions{

        flex-direction:column;

    }

    .btn-primary,
    .btn-outline{

        width:100%;

    }

    .event-card{

        padding:28px;

        border-radius:18px;

    }

    .event-gallery-card{

        padding:35px;

    }

    .event-gallery-content{

        gap:25px;

    }

    .event-info-card{

        padding:28px;

    }

    .timeline-row{

        grid-template-columns:40px 90px 1fr;

        gap:18px;

    }

    .event-timeline::before{

        left:63px;

    }

    .timeline-card{

        padding:18px;

    }

    .references-grid{

        grid-template-columns:1fr;

    }

    .partners-grid{

        grid-template-columns:1fr;

    }

    .event-cta-box{

        padding:40px 30px;

    }

}

@media (max-width:576px){

    .event-title{

        font-size:2rem;

    }

    .event-description{

        font-size:1rem;

    }

    .event-card h2{

        font-size:1.7rem;

    }

    .section-header h2{

        font-size:1.8rem;

    }

    .timeline-row{

        display:block;

        padding-left:35px;

        margin-bottom:30px;

    }

    .timeline-dot{

        position:absolute;

        left:0;
        top:8px;

    }

    .timeline-time{

        margin-bottom:12px;

    }

    .event-timeline::before{

        left:8px;

    }

    .partner-card{

        border-radius:16px;

    }

    .reference-card{

        padding:25px;

    }

    .reference-top{

        align-items:flex-start;

    }

    .reference-avatar{

        width:56px;
        height:56px;

    }

    .event-video{

        border-radius:18px;

    }

}


/* ======================================================
   SMOOTH
====================================================== */

html{

    scroll-behavior:smooth;

}


/* ======================================================
   PURPLE GLOW
====================================================== */

.event-card,
.event-info-card,
.partner-card,
.reference-card{

    position:relative;

}

.event-card::before,
.event-info-card::before,
.partner-card::before,
.reference-card::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    background:
    linear-gradient(
        135deg,
        rgba(139,92,246,.18),
        transparent,
        transparent
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.event-card:hover::before,
.event-info-card:hover::before,
.partner-card:hover::before,
.reference-card:hover::before{

    opacity:1;

}


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

.event-service,
.partner-type{

    backdrop-filter:blur(12px);

}


/* ======================================================
   IMAGES
====================================================== */

.partner-logo img,
.reference-avatar,
.event-hero-image{

    display:block;

}


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

.event-section:last-child{

    padding-bottom:0;

}
/* =========================================================
   INSIDE JOKES — ABOUT US
========================================================= */

.ij-about {
    background: #050505;
    color: #fff;
}

.ij-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.ij-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ij-about h1,
.ij-about h2,
.ij-about h3,
.ij-about p {
    margin-top: 0;
}

.ij-about h1,
.ij-about h2 {
    letter-spacing: -.04em;
}

.ij-about h1 {
    font-size: clamp(52px, 6vw, 88px);
    line-height: .94;
    margin-bottom: 28px;
}

.ij-about h1 span {
    color: #8b5cf6;
}

.ij-about h2 {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    margin-bottom: 25px;
}

.ij-about p {
    color: #aaa;
    font-size: 15px;
    line-height: 1.7;
}


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

.ij-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ij-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

.ij-btn-primary {
    background: #8b5cf6;
    color: #fff;
}

.ij-btn-primary:hover {
    background: #9d72ff;
    transform: translateY(-2px);
}

.ij-btn-outline {
    border: 1px solid #444;
    color: #fff;
}

.ij-btn-outline:hover {
    border-color: #8b5cf6;
    color: #fff;
}


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

.ij-about-hero {
    min-height: 640px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #070707;
}

.ij-about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,.85) 38%,
            rgba(5,5,5,.15) 100%);
    pointer-events: none;
}

.ij-about-hero-inner {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ij-about-hero-content {
    position: relative;
    z-index: 3;
}

.ij-about-hero-content p {
    max-width: 470px;
}

.ij-about-hero-image {
    height: 640px;
    position: relative;
}

.ij-about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


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

.ij-about-intro {
    padding: 100px 0;
    background: #0b0b0b;
}

.ij-about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.ij-about-intro-image img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.ij-about-intro-content {
    max-width: 520px;
}

.ij-about-intro-content strong {
    color: #fff;
}

.ij-text-link {
    display: inline-flex;
    gap: 10px;
    margin-top: 15px;
    color: #8b5cf6;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.ij-text-link span {
    transition: .2s ease;
}

.ij-text-link:hover span {
    transform: translateX(5px);
}


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

.ij-about-values {
    padding: 100px 0;
}

.ij-section-heading {
    margin-bottom: 45px;
}

.ij-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ij-value-card {
    min-height: 250px;
    padding: 25px;
    position: relative;
    background: #111;
    border: 1px solid #1d1d1d;
    border-radius: 9px;
}

.ij-value-number {
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 700;
}

.ij-value-icon {
    margin: 30px 0 18px;
    color: #8b5cf6;
    font-size: 28px;
}

.ij-value-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.ij-value-card p {
    font-size: 13px;
}


/* =========================================================
   PROCESS
========================================================= */

.ij-about-process {
    padding: 100px 0;
    background: #0b0b0b;
}

.ij-center {
    text-align: center;
}

.ij-process {
    display: flex;
    align-items: flex-start;
}

.ij-process-item {
    flex: 1;
    text-align: center;
}

.ij-process-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid #8b5cf6;
    border-radius: 50%;
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 700;
}

.ij-process-item h3 {
    font-size: 15px;
    margin-bottom: 8px;
}

.ij-process-item p {
    max-width: 160px;
    margin: 0 auto;
    font-size: 11px;
}

.ij-process-line {
    width: 70px;
    height: 1px;
    margin-top: 21px;
    background: #333;
}


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

.ij-about-statement {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 470px;
    background: #080808;
}

.ij-about-statement-image img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    display: block;
    object-fit: cover;
}

.ij-about-statement-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px;
}

.ij-highlight {
    color: #8b5cf6 !important;
    font-weight: 600;
}


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

.ij-about-stats {
    padding: 30px 0;
    background: #0d0d0d;
}

.ij-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ij-stat {
    padding: 28px;
    border: 1px solid #202020;
    border-radius: 9px;
    background: #111;
}

.ij-stat strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 34px;
    letter-spacing: -.04em;
}

.ij-stat span {
    color: #777;
    font-size: 11px;
}


/* =========================================================
   TEAM
========================================================= */

.ij-about-team {
    padding: 110px 0;
}

.ij-section-heading > p {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.ij-team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ij-team-card {
    overflow: hidden;
    border: 1px solid #202020;
    border-radius: 9px;
    background: #0d0d0d;
}

.ij-team-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111;
}

.ij-team-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: .4s ease;
}

.ij-team-card:hover .ij-team-image img {
    transform: scale(1.04);
}

.ij-team-content {
    padding: 18px;
}

.ij-team-content h3 {
    margin-bottom: 5px;
    font-size: 16px;
}

.ij-team-content span {
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
}

.ij-team-content p {
    margin-top: 12px;
    font-size: 11px;
}


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

.ij-about-cta {
    padding: 40px 0 110px;
}

.ij-cta-box {
    padding: 80px 30px;
    text-align: center;
    border: 1px solid #202020;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,.16),
            transparent 60%
        ),
        #101010;
}

.ij-cta-box p {
    max-width: 500px;
    margin: 0 auto 28px;
}


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

@media (max-width: 900px) {

    .ij-about-hero-inner,
    .ij-about-intro-grid,
    .ij-about-statement {
        grid-template-columns: 1fr;
    }

    .ij-about-hero {
        min-height: auto;
    }

    .ij-about-hero-content {
        padding: 90px 0 40px;
    }

    .ij-about-hero-image {
        height: 420px;
    }

    .ij-values-grid,
    .ij-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ij-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ij-process {
        flex-direction: column;
        gap: 25px;
    }

    .ij-process-item {
        width: 100%;
    }

    .ij-process-line {
        width: 1px;
        height: 30px;
        margin: 0 auto;
    }

    .ij-about-statement-content {
        padding: 60px 30px;
    }

}


@media (max-width: 600px) {

    .ij-container {
        width: min(100% - 28px, 1160px);
    }

    .ij-about h1 {
        font-size: 48px;
    }

    .ij-about h2 {
        font-size: 34px;
    }

    .ij-values-grid,
    .ij-stats-grid,
    .ij-team-grid {
        grid-template-columns: 1fr;
    }

    .ij-about-hero-image {
        height: 330px;
    }

    .ij-about-intro,
    .ij-about-values,
    .ij-about-process,
    .ij-about-team {
        padding: 70px 0;
    }

    .ij-cta-box {
        padding: 60px 20px;
    }

}
/* =========================================================
   INSIDE JOKES — SLUŽBY
========================================================= */

.ij-services {
    background: #050505;
    color: #fff;
}

.ij-services .ij-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.ij-services h1,
.ij-services h2,
.ij-services h3,
.ij-services p {
    margin-top: 0;
}

.ij-services h1,
.ij-services h2 {
    letter-spacing: -0.045em;
}

.ij-services p {
    color: #999;
    font-size: 14px;
    line-height: 1.75;
}

.ij-services .ij-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}


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

.ij-services .ij-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ij-services .ij-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

.ij-services .ij-btn-primary {
    background: #8b5cf6;
    color: #fff;
}

.ij-services .ij-btn-primary:hover {
    background: #9d72ff;
    color: #fff;
    transform: translateY(-2px);
}

.ij-services .ij-btn-outline {
    border: 1px solid #333;
    color: #fff;
}

.ij-services .ij-btn-outline:hover {
    border-color: #8b5cf6;
    color: #fff;
}


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

.ij-services-hero {
    min-height: 590px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(139, 92, 246, .14),
            transparent 34%
        ),
        #050505;
}

.ij-services-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.ij-services-hero-content {
    max-width: 560px;
}

.ij-services-hero h1 {
    margin-bottom: 28px;
    font-size: clamp(58px, 7vw, 94px);
    line-height: .91;
}

.ij-services-hero h1 span {
    color: #8b5cf6;
}

.ij-services-hero p {
    max-width: 470px;
    margin-bottom: 30px;
}


/* HERO VISUAL */

.ij-services-hero-visual {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ij-services-hero-visual::before,
.ij-services-hero-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ij-services-hero-visual::before {
    width: 330px;
    height: 330px;
    background: rgba(139, 92, 246, .12);
    filter: blur(80px);
}

.ij-services-hero-visual::after {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: linear-gradient(
        transparent,
        #8b5cf6,
        transparent
    );
    opacity: .25;
}

.ij-services-hero-card {
    width: min(390px, 100%);
    aspect-ratio: 4 / 5;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    border: 1px solid #252525;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #18121f 0%,
            #090909 48%,
            #111 100%
        );
    box-shadow: 0 25px 80px rgba(0,0,0,.5);
}

.ij-services-hero-card::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    top: -100px;
    right: -70px;
    border-radius: 50%;
    background: #8b5cf6;
    opacity: .2;
    filter: blur(70px);
}

.ij-services-hero-card::after {
    content: "IJ";
    position: absolute;
    top: 45px;
    right: 40px;
    color: rgba(139,92,246,.15);
    font-size: 130px;
    font-weight: 900;
    line-height: 1;
}

.ij-services-hero-card span {
    margin-bottom: auto;
    position: relative;
    z-index: 2;
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.ij-services-hero-card strong {
    position: relative;
    z-index: 2;
    font-size: clamp(38px, 5vw, 62px);
    line-height: .9;
    letter-spacing: -.05em;
}

.ij-services-hero-card small {
    margin-top: 20px;
    position: relative;
    z-index: 2;
    color: #777;
    font-size: 9px;
    letter-spacing: .16em;
}


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

.ij-services-intro {
    padding: 100px 0;
    background: #0b0b0b;
}

.ij-services-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
}

.ij-services-intro h2 {
    margin-bottom: 0;
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: .95;
}

.ij-services-intro-grid > div:last-child {
    max-width: 520px;
}

.ij-services-intro-grid p {
    margin-bottom: 18px;
}


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

.ij-services-main {
    padding: 110px 0;
}

.ij-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}


/* SERVICE CARD */

.ij-service-card {
    min-height: 460px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid #1d1d1d;
    border-radius: 10px;
    background: #101010;
    transition:
        border-color .25s ease,
        transform .25s ease,
        background .25s ease;
}

.ij-service-card:hover {
    border-color: rgba(139,92,246,.5);
    background: #121212;
    transform: translateY(-4px);
}

.ij-service-card-large {
    grid-row: span 2;
    min-height: 934px;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(139,92,246,.12),
            transparent 35%
        ),
        #101010;
}

.ij-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ij-service-number {
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 700;
}

.ij-service-label {
    color: #555;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}

.ij-service-icon {
    margin-top: 65px;
    margin-bottom: 20px;
    color: #8b5cf6;
    font-size: 34px;
    line-height: 1;
}

.ij-service-card h2 {
    margin-bottom: 20px;
    font-size: clamp(30px, 3vw, 46px);
    line-height: .95;
}

.ij-service-card p {
    max-width: 470px;
    margin-bottom: 25px;
}

.ij-service-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ij-service-card li {
    padding: 11px 0 11px 18px;
    position: relative;
    border-bottom: 1px solid #1e1e1e;
    color: #bbb;
    font-size: 12px;
}

.ij-service-card li::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 18px;
    left: 0;
    border-radius: 50%;
    background: #8b5cf6;
}


/* =========================================================
   FEATURE
========================================================= */

.ij-services-feature {
    padding: 110px 0;
    background: #0b0b0b;
}

.ij-services-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.ij-services-feature-content h2 {
    margin-bottom: 30px;
    font-size: clamp(40px, 5vw, 66px);
    line-height: .92;
}

.ij-services-feature-content p {
    max-width: 480px;
}

.ij-services-feature-content .ij-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.ij-services-feature-content .ij-text-link span {
    transition: .2s ease;
}

.ij-services-feature-content .ij-text-link:hover span {
    transform: translateX(5px);
}


/* FEATURE LIST */

.ij-services-feature-list {
    border-top: 1px solid #262626;
}

.ij-feature-row {
    min-height: 90px;
    display: grid;
    grid-template-columns: 45px 1fr auto;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid #262626;
}

.ij-feature-row span {
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
}

.ij-feature-row strong {
    font-size: 15px;
}

.ij-feature-row small {
    color: #666;
    font-size: 10px;
}


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

.ij-services-target {
    padding: 110px 0;
}

.ij-services-target .ij-section-heading {
    margin-bottom: 50px;
}

.ij-services-target .ij-section-heading h2 {
    margin-bottom: 18px;
    font-size: clamp(38px, 4.5vw, 58px);
}

.ij-services-target .ij-section-heading p {
    max-width: 480px;
    margin: 0 auto;
}

.ij-center {
    text-align: center;
}


/* TARGET CARDS */

.ij-target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ij-target-card {
    min-height: 270px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #202020;
    border-radius: 10px;
    background: #101010;
    text-decoration: none;
    transition: .25s ease;
}

.ij-target-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-4px);
}

.ij-target-card > span {
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
}

.ij-target-card h3 {
    margin-top: 50px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 23px;
}

.ij-target-card p {
    margin-bottom: 25px;
    font-size: 12px;
}

.ij-target-card strong {
    margin-top: auto;
    color: #8b5cf6;
    font-size: 11px;
}


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

.ij-services-cta {
    padding: 30px 0 110px;
}

.ij-services .ij-cta-box {
    padding: 90px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #202020;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,.16),
            transparent 58%
        ),
        #101010;
}

.ij-services .ij-cta-box::before {
    content: "IJ";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    color: rgba(139,92,246,.025);
    font-size: 230px;
    font-weight: 900;
    pointer-events: none;
}

.ij-services .ij-cta-box > * {
    position: relative;
    z-index: 2;
}

.ij-services .ij-cta-box h2 {
    margin-bottom: 20px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: .95;
}

.ij-services .ij-cta-box p {
    max-width: 500px;
    margin: 0 auto 28px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .ij-services-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ij-services-hero {
        padding: 80px 0;
    }

    .ij-services-hero-visual {
        min-height: 400px;
    }

    .ij-services-intro-grid,
    .ij-services-feature-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ij-services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ij-service-card-large {
        grid-row: auto;
        min-height: 500px;
    }

    .ij-target-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .ij-services .ij-container {
        width: min(100% - 28px, 1160px);
    }

    .ij-services-hero {
        padding: 65px 0;
    }

    .ij-services-hero h1 {
        font-size: 52px;
    }

    .ij-services-hero-visual {
        min-height: 330px;
    }

    .ij-services-hero-card {
        width: 280px;
        padding: 25px;
    }

    .ij-services-hero-card strong {
        font-size: 42px;
    }

    .ij-services-intro,
    .ij-services-main,
    .ij-services-feature,
    .ij-services-target {
        padding: 70px 0;
    }

    .ij-services-intro h2 {
        font-size: 40px;
    }

    .ij-services-grid {
        grid-template-columns: 1fr;
    }

    .ij-service-card,
    .ij-service-card-large {
        min-height: 430px;
    }

    .ij-service-card-large {
        min-height: 500px;
    }

    .ij-service-icon {
        margin-top: 45px;
    }

    .ij-services-feature-content h2 {
        font-size: 44px;
    }

    .ij-feature-row {
        grid-template-columns: 35px 1fr;
        padding: 16px 0;
    }

    .ij-feature-row small {
        grid-column: 2;
    }

    .ij-services-target .ij-section-heading h2 {
        font-size: 40px;
    }

    .ij-services .ij-cta-box {
        padding: 65px 20px;
    }

    .ij-services .ij-cta-box h2 {
        font-size: 42px;
    }

}
/* =========================================================
   INSIDE JOKES — KONTAKT
========================================================= */

.ij-contact {
    background: #050505;
    color: #fff;
}

.ij-contact .ij-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.ij-contact h1,
.ij-contact h2,
.ij-contact h3,
.ij-contact p {
    margin-top: 0;
}

.ij-contact h1,
.ij-contact h2 {
    letter-spacing: -.045em;
}

.ij-contact p {
    color: #999;
    font-size: 14px;
    line-height: 1.75;
}

.ij-contact .ij-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/* =========================================================
   BUTTON
========================================================= */

.ij-contact .ij-btn {
    min-height: 46px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

.ij-contact .ij-btn-primary {
    background: #8b5cf6;
    color: #fff;
}

.ij-contact .ij-btn-primary:hover {
    background: #9d72ff;
    color: #fff;
    transform: translateY(-2px);
}


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

.ij-contact-hero {
    padding: 125px 0 105px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(139,92,246,.13),
            transparent 32%
        ),
        #050505;
}

.ij-contact-hero::after {
    content: "KONTAKT";
    position: absolute;
    right: -20px;
    bottom: -35px;
    color: rgba(139,92,246,.025);
    font-size: clamp(100px, 18vw, 260px);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

.ij-contact-hero h1 {
    max-width: 900px;
    margin-bottom: 30px;
    font-size: clamp(55px, 7vw, 94px);
    line-height: .91;
}

.ij-contact-hero h1 span {
    color: #8b5cf6;
}

.ij-contact-hero p {
    max-width: 570px;
}


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

.ij-contact-main {
    padding: 100px 0 120px;
    background: #0b0b0b;
}

.ij-contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
    align-items: start;
}


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

.ij-contact-info {
    padding-top: 15px;
}

.ij-contact-info h2 {
    margin-bottom: 28px;
    font-size: clamp(40px, 4.5vw, 60px);
    line-height: .94;
}

.ij-contact-info > p {
    max-width: 430px;
    margin-bottom: 45px;
}


/* DETAILS */

.ij-contact-details {
    border-top: 1px solid #222;
}

.ij-contact-detail {
    min-height: 85px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid #222;
    color: #fff;
    text-decoration: none;
}

.ij-contact-detail-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border: 1px solid #292929;
    border-radius: 7px;
    color: #8b5cf6;
    font-size: 13px;
    transition: .2s ease;
}

.ij-contact-detail:hover .ij-contact-detail-icon {
    border-color: #8b5cf6;
    background: rgba(139,92,246,.08);
}

.ij-contact-detail small {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.ij-contact-detail strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}


/* SOCIALS */

.ij-contact-socials {
    margin-top: 40px;
}

.ij-contact-socials-title {
    display: block;
    margin-bottom: 14px;
    color: #666;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ij-contact-socials > div {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ij-contact-socials a {
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
    transition: .2s ease;
}

.ij-contact-socials a:hover {
    color: #8b5cf6;
}


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

.ij-contact-form-wrap {
    padding: 42px;
    border: 1px solid #202020;
    border-radius: 10px;
    background: #101010;
}

.ij-contact-form-header {
    margin-bottom: 40px;
}

.ij-contact-form-header h2 {
    margin-bottom: 0;
    font-size: clamp(35px, 4vw, 52px);
    line-height: .95;
}


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

.ij-contact-form {
    width: 100%;
}

.ij-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.ij-form-group {
    margin-bottom: 20px;
}

.ij-form-row .ij-form-group {
    margin-bottom: 0;
}

.ij-form-group label {
    display: block;
    margin-bottom: 9px;
    color: #bbb;
    font-size: 10px;
    font-weight: 600;
}

.ij-form-group input,
.ij-form-group select,
.ij-form-group textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 1px solid #282828;
    border-radius: 6px;
    outline: none;
    background: #080808;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.ij-form-group input,
.ij-form-group select {
    height: 48px;
    padding: 0 15px;
}

.ij-form-group textarea {
    min-height: 150px;
    padding: 14px 15px;
    resize: vertical;
    line-height: 1.6;
}

.ij-form-group input::placeholder,
.ij-form-group textarea::placeholder {
    color: #555;
}

.ij-form-group select {
    appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 20px,
        calc(100% - 12px) 20px;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
}

.ij-form-group input:focus,
.ij-form-group select:focus,
.ij-form-group textarea:focus {
    border-color: #8b5cf6;
    background: #0a0a0a;
}


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

.ij-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 5px;
}

.ij-checkbox {
    max-width: 390px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #666;
    font-size: 10px;
    line-height: 1.5;
    cursor: pointer;
}

.ij-checkbox input {
    width: 14px;
    height: 14px;
    margin: 1px 0 0;
    flex: 0 0 14px;
    accent-color: #8b5cf6;
}


/* =========================================================
   AFTER / PROCESS
========================================================= */

.ij-contact-after {
    padding: 110px 0;
}

.ij-contact-after .ij-section-heading {
    margin-bottom: 60px;
}

.ij-contact-after .ij-section-heading h2 {
    margin-bottom: 0;
    font-size: clamp(40px, 5vw, 62px);
    line-height: .95;
}

.ij-center {
    text-align: center;
}


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

.ij-contact-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ij-contact-step {
    min-height: 210px;
    padding: 28px;
    border: 1px solid #202020;
    border-radius: 9px;
    background: #0d0d0d;
}

.ij-contact-step > span {
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
}

.ij-contact-step h3 {
    margin-top: 48px;
    margin-bottom: 10px;
    font-size: 16px;
}

.ij-contact-step p {
    margin-bottom: 0;
    font-size: 11px;
}


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

.ij-contact-cta {
    padding: 20px 0 110px;
}

.ij-contact .ij-cta-box {
    padding: 90px 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #202020;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,.16),
            transparent 58%
        ),
        #101010;
}

.ij-contact .ij-cta-box::before {
    content: "IJ";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    color: rgba(139,92,246,.025);
    font-size: 240px;
    font-weight: 900;
    letter-spacing: -.1em;
    pointer-events: none;
}

.ij-contact .ij-cta-box > * {
    position: relative;
    z-index: 2;
}

.ij-contact .ij-cta-box h2 {
    margin-bottom: 18px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: .94;
}

.ij-contact .ij-cta-box p {
    margin-bottom: 28px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

    .ij-contact-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .ij-contact-info {
        max-width: 650px;
    }

    .ij-contact-steps {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .ij-contact .ij-container {
        width: min(100% - 28px, 1160px);
    }

    .ij-contact-hero {
        padding: 75px 0 70px;
    }

    .ij-contact-hero h1 {
        font-size: 50px;
    }

    .ij-contact-main {
        padding: 70px 0 80px;
    }

    .ij-contact-info h2 {
        font-size: 42px;
    }

    .ij-contact-form-wrap {
        padding: 25px 20px;
    }

    .ij-contact-form-header h2 {
        font-size: 38px;
    }

    .ij-form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .ij-form-row .ij-form-group {
        margin-bottom: 20px;
    }

    .ij-form-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .ij-contact-after {
        padding: 75px 0;
    }

    .ij-contact-steps {
        grid-template-columns: 1fr;
    }

    .ij-contact-step {
        min-height: 170px;
    }

    .ij-contact-step h3 {
        margin-top: 35px;
    }

    .ij-contact-cta {
        padding: 0 0 75px;
    }

    .ij-contact .ij-cta-box {
        padding: 65px 20px;
    }

    .ij-contact .ij-cta-box h2 {
        font-size: 42px;
    }

}
/* =========================================================
   INSIDE JOKES — MERCH
========================================================= */

.ij-merch {
    background: #050505;
    color: #fff;
}

.ij-merch .ij-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.ij-merch h1,
.ij-merch h2,
.ij-merch h3,
.ij-merch p {
    margin-top: 0;
}

.ij-merch h1,
.ij-merch h2 {
    letter-spacing: -.045em;
}

.ij-merch p {
    color: #999;
    font-size: 14px;
    line-height: 1.75;
}

.ij-merch .ij-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/* =========================================================
   BUTTON
========================================================= */

.ij-merch .ij-btn {
    min-height: 46px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

.ij-merch .ij-btn-primary {
    background: #8b5cf6;
    color: #fff;
}

.ij-merch .ij-btn-primary:hover {
    background: #9d72ff;
    color: #fff;
    transform: translateY(-2px);
}


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

.ij-merch-hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(139, 92, 246, .16),
            transparent 30%
        ),
        #050505;
}

.ij-merch-hero::after {
    content: "MERCH";
    position: absolute;
    right: -15px;
    bottom: -30px;
    color: rgba(139, 92, 246, .025);
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

.ij-merch-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.ij-merch-hero-content {
    position: relative;
    z-index: 2;
}

.ij-merch-hero h1 {
    margin-bottom: 28px;
    font-size: clamp(58px, 7vw, 94px);
    line-height: .9;
}

.ij-merch-hero h1 span {
    color: #8b5cf6;
}

.ij-merch-hero p {
    max-width: 470px;
    margin-bottom: 30px;
}


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

.ij-merch-hero-visual {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ij-merch-hero-product {
    width: min(430px, 100%);
    height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ij-merch-hero-product::before {
    content: "";
    width: 390px;
    height: 390px;
    position: absolute;
    border-radius: 50%;
    background: rgba(139, 92, 246, .17);
    filter: blur(80px);
}

.ij-merch-shirt {
    width: 285px;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 20px 20px 12px 12px;
    transform: rotate(-4deg);
    box-shadow: 30px 35px 80px rgba(0,0,0,.6);
}

.ij-merch-shirt::before,
.ij-merch-shirt::after {
    content: "";
    width: 105px;
    height: 155px;
    position: absolute;
    top: 10px;
    background: #111;
}

.ij-merch-shirt::before {
    left: -75px;
    border-radius: 20px 5px 20px 20px;
    transform: rotate(22deg);
}

.ij-merch-shirt::after {
    right: -75px;
    border-radius: 5px 20px 20px 20px;
    transform: rotate(-22deg);
}

.ij-merch-shirt span {
    position: relative;
    z-index: 2;
    color: #8b5cf6;
    font-size: 35px;
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
    text-align: center;
}


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

.ij-merch-intro {
    padding: 100px 0;
    background: #0b0b0b;
}

.ij-merch-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.ij-merch-intro h2 {
    margin-bottom: 0;
    font-size: clamp(40px, 4.5vw, 60px);
    line-height: .94;
}

.ij-merch-intro-grid > div:last-child {
    max-width: 500px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.ij-merch-products {
    padding: 110px 0;
}

.ij-merch-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 45px;
}

.ij-merch-heading h2 {
    margin-bottom: 0;
    font-size: clamp(38px, 4vw, 55px);
    line-height: .95;
}


/* FILTER */

.ij-merch-filter {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.ij-merch-filter button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #282828;
    border-radius: 6px;
    background: transparent;
    color: #777;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.ij-merch-filter button:hover,
.ij-merch-filter button.active {
    border-color: #8b5cf6;
    background: #8b5cf6;
    color: #fff;
}


/* PRODUCT GRID */

.ij-merch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 15px;
}

.ij-product-card {
    min-width: 0;
}

.ij-product-image {
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    position: relative;
    border: 1px solid #1f1f1f;
    border-radius: 9px;
    background: #0d0d0d;
    text-decoration: none;
}

.ij-product-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(139,92,246,.04);
    opacity: 0;
    transition: .25s ease;
}

.ij-product-card:hover .ij-product-image::after {
    opacity: 1;
}

.ij-product-badge {
    position: absolute;
    z-index: 5;
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border-radius: 4px;
    background: #8b5cf6;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}


/* =========================================================
   PRODUCT PLACEHOLDERS
========================================================= */

.ij-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ij-product-placeholder::before {
    content: "";
    width: 55%;
    height: 70%;
    position: absolute;
    top: 17%;
    left: 22%;
    border-radius: 15px 15px 8px 8px;
    box-shadow: 0 30px 50px rgba(0,0,0,.4);
}

.ij-product-placeholder::after {
    content: "";
    position: absolute;
    width: 65px;
    height: 65px;
    top: 28%;
    left: calc(50% - 32px);
    border-radius: 50%;
    background: #8b5cf6;
    opacity: .08;
    filter: blur(20px);
}


/* BLACK SHIRT */

.ij-product-black-shirt::before {
    background: #151515;
}

.ij-product-black-shirt strong {
    color: #8b5cf6;
}


/* WHITE SHIRT */

.ij-product-white-shirt::before {
    background: #e8e8e8;
}

.ij-product-white-shirt strong {
    color: #111;
    position: relative;
    z-index: 3;
    font-size: 21px;
    line-height: .9;
    text-align: center;
}


/* HOODIE */

.ij-product-hoodie::before {
    width: 60%;
    height: 74%;
    top: 14%;
    background: #121212;
    border-radius: 22px 22px 10px 10px;
}

.ij-product-hoodie::after {
    width: 105px;
    height: 75px;
    top: 8%;
    background: #111;
    border-radius: 50%;
    opacity: 1;
    filter: none;
}

.ij-product-hoodie strong {
    position: relative;
    z-index: 3;
    color: #8b5cf6;
    font-size: 26px;
}


/* PURPLE HOODIE */

.ij-product-purple-hoodie::before {
    width: 60%;
    height: 74%;
    top: 14%;
    background: #8b5cf6;
    border-radius: 22px 22px 10px 10px;
}

.ij-product-purple-hoodie::after {
    width: 105px;
    height: 75px;
    top: 8%;
    background: #8054e7;
    border-radius: 50%;
    opacity: 1;
    filter: none;
}

.ij-product-purple-hoodie strong {
    position: relative;
    z-index: 3;
    color: #fff;
    font-size: 22px;
    line-height: .9;
    text-align: center;
}


/* CAP */

.ij-product-cap::before {
    width: 58%;
    height: 32%;
    top: 37%;
    border-radius: 70px 70px 12px 12px;
    background: #121212;
}

.ij-product-cap::after {
    width: 40%;
    height: 9%;
    top: 57%;
    left: 30%;
    border-radius: 0 50% 50% 0;
    background: #101010;
    opacity: 1;
    filter: none;
}

.ij-product-cap strong {
    position: relative;
    z-index: 4;
    margin-top: 20px;
    color: #8b5cf6;
    font-size: 19px;
}


/* BAG */

.ij-product-bag::before {
    width: 45%;
    height: 58%;
    top: 23%;
    border-radius: 5px;
    background: #111;
}

.ij-product-bag::after {
    width: 28%;
    height: 15%;
    top: 15%;
    left: 36%;
    border: 6px solid #111;
    border-bottom: 0;
    border-radius: 50px 50px 0 0;
    opacity: 1;
    filter: none;
}

.ij-product-bag strong {
    position: relative;
    z-index: 4;
    color: #8b5cf6;
    font-size: 25px;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.ij-product-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 3px 0;
}

.ij-product-info h3 {
    margin-bottom: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.ij-product-info span {
    color: #666;
    font-size: 10px;
}

.ij-product-info > strong {
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
}


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

.ij-merch-statement {
    padding: 100px 0;
    background: #0b0b0b;
}

.ij-merch-statement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.ij-merch-statement-visual {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #202020;
    border-radius: 10px;
    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.18),
            transparent 48%
        ),
        #080808;
}

.ij-merch-statement-visual::before {
    content: "";
    width: 65%;
    height: 65%;
    position: absolute;
    border: 1px solid rgba(139,92,246,.25);
    border-radius: 50%;
}

.ij-merch-statement-visual::after {
    content: "";
    width: 45%;
    height: 45%;
    position: absolute;
    border: 1px solid rgba(139,92,246,.16);
    border-radius: 50%;
}

.ij-merch-statement-logo {
    position: relative;
    z-index: 2;
    color: #8b5cf6;
    font-size: clamp(70px, 10vw, 130px);
    font-weight: 900;
    letter-spacing: -.1em;
}

.ij-merch-statement-content h2 {
    margin-bottom: 30px;
    font-size: clamp(45px, 5vw, 70px);
    line-height: .9;
}

.ij-merch-statement-content p {
    max-width: 430px;
}


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

.ij-merch-info {
    padding: 100px 0;
}

.ij-merch-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ij-merch-info-grid > div {
    min-height: 250px;
    padding: 28px;
    border: 1px solid #202020;
    border-radius: 9px;
    background: #0d0d0d;
}

.ij-merch-info-grid h3 {
    margin-bottom: 15px;
    font-size: 25px;
    line-height: .95;
}

.ij-merch-info-grid p {
    font-size: 11px;
}


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

.ij-merch-cta {
    padding: 20px 0 110px;
}

.ij-merch .ij-cta-box {
    padding: 90px 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #202020;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,.16),
            transparent 58%
        ),
        #101010;
}

.ij-merch .ij-cta-box::before {
    content: "IJ";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    color: rgba(139,92,246,.025);
    font-size: 240px;
    font-weight: 900;
    letter-spacing: -.1em;
    pointer-events: none;
}

.ij-merch .ij-cta-box > * {
    position: relative;
    z-index: 2;
}

.ij-merch .ij-cta-box h2 {
    margin-bottom: 18px;
    font-size: clamp(42px, 5vw, 65px);
    line-height: .93;
}

.ij-merch .ij-cta-box p {
    margin-bottom: 28px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .ij-merch-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ij-merch-hero {
        padding: 85px 0;
    }

    .ij-merch-hero-visual {
        min-height: 450px;
    }

    .ij-merch-intro-grid,
    .ij-merch-statement-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ij-merch-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ij-merch-info-grid {
        grid-template-columns: 1fr;
    }

    .ij-merch-info-grid > div {
        min-height: 190px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .ij-merch .ij-container {
        width: min(100% - 28px, 1160px);
    }

    .ij-merch-hero {
        padding: 70px 0;
    }

    .ij-merch-hero h1 {
        font-size: 50px;
    }

    .ij-merch-hero-visual {
        min-height: 380px;
    }

    .ij-merch-hero-product {
        height: 370px;
    }

    .ij-merch-shirt {
        width: 220px;
        height: 275px;
    }

    .ij-merch-shirt::before,
    .ij-merch-shirt::after {
        width: 80px;
        height: 125px;
    }

    .ij-merch-shirt::before {
        left: -57px;
    }

    .ij-merch-shirt::after {
        right: -57px;
    }

    .ij-merch-intro,
    .ij-merch-products,
    .ij-merch-statement,
    .ij-merch-info {
        padding: 70px 0;
    }

    .ij-merch-intro h2 {
        font-size: 42px;
    }

    .ij-merch-heading {
        display: block;
    }

    .ij-merch-heading h2 {
        margin-bottom: 25px;
        font-size: 40px;
    }

    .ij-merch-filter {
        gap: 5px;
    }

    .ij-merch-filter button {
        padding: 0 11px;
    }

    .ij-merch-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 10px;
    }

    .ij-product-info {
        display: block;
    }

    .ij-product-info > strong {
        display: block;
        margin-top: 7px;
    }

    .ij-merch-statement-content h2 {
        font-size: 48px;
    }

    .ij-merch-info-grid {
        grid-template-columns: 1fr;
    }

    .ij-merch .ij-cta-box {
        padding: 65px 20px;
    }

    .ij-merch .ij-cta-box h2 {
        font-size: 42px;
    }

}