/*==================================================
CAREER PLATFORM
Luxury UI Framework
Version 2.0
==================================================*/

:root{

--black:#050505;
--surface:#0D0D0D;
--surface2:#161616;
--surface3:#202020;

--white:#FFFFFF;
--text:#D8D8D8;
--muted:#8E8E93;

--accent:#0057FF;
--accentHover:#2A75FF;

--glass:rgba(255,255,255,.05);
--glassBorder:rgba(255,255,255,.08);

--radius:24px;

--shadow:0 30px 90px rgba(0,0,0,.45);

--transition:.45s cubic-bezier(.19,1,.22,1);

}

/*======================================
RESET
======================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

overflow-x:hidden;

}

body{

background:var(--black);

color:var(--white);

font-family:'Inter',sans-serif;

overflow-x:hidden;

}

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

.container{

width:92%;

max-width:1500px;

margin:auto;

}

.container-small{

width:88%;

max-width:1200px;

margin:auto;

}

/*======================================
SECTIONS
======================================*/

section{

position:relative;

padding:140px 0;

}

.section-dark{

background:#090909;

}

.section-light{

background:#111;

}

/*======================================
BACKGROUND EFFECTS
======================================*/

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

radial-gradient(circle at 10% 15%,rgba(0,87,255,.14),transparent 28%),

radial-gradient(circle at 90% 0%,rgba(255,255,255,.03),transparent 25%),

radial-gradient(circle at 40% 90%,rgba(0,87,255,.07),transparent 30%),

#050505;

pointer-events:none;

z-index:-5;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

transition:var(--transition);

}

.navbar{

width:94%;

max-width:1700px;

margin:20px auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 30px;

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

backdrop-filter:blur(24px);

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

border-radius:70px;

transition:var(--transition);

}

.navbar.scrolled{

margin-top:10px;

background:rgba(8,8,8,.90);

}

.logo{

display:flex;

align-items:center;

}

.logo img{

height:48px;

}

.navbar ul{

display:flex;

list-style:none;

gap:38px;

}

.navbar ul li a{

color:#fff;

text-decoration:none;

font-weight:500;

font-size:.95rem;

position:relative;

transition:.35s;

}

.navbar ul li a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--accent);

transition:.35s;

}

.navbar ul li a:hover{

color:var(--accent);

}

.navbar ul li a:hover::after{

width:100%;

}

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

.nav-actions{

display:flex;

gap:18px;

align-items:center;

}

.login-btn{

color:#fff;

text-decoration:none;

font-weight:600;

}

.join-btn{

padding:14px 28px;

background:#fff;

color:#000;

border-radius:999px;

text-decoration:none;

font-weight:700;

transition:var(--transition);

}

.join-btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(255,255,255,.15);

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

background:#fff;

color:#000;

text-decoration:none;

border-radius:999px;

font-weight:700;

transition:var(--transition);

}

.primary-btn:hover{

transform:translateY(-6px);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:999px;

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

color:#fff;

text-decoration:none;

transition:var(--transition);

margin-left:16px;

}

.secondary-btn:hover{

background:#fff;

color:#000;

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

.hero{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}

.hero video{

position:absolute;

top:50%;

left:50%;

width:100%;

height:100%;

object-fit:cover;

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

filter:brightness(.35);

z-index:-3;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(180deg,

rgba(0,0,0,.10),

rgba(0,0,0,.65),

rgba(5,5,5,1));

z-index:-2;

}

.hero-gradient{

position:absolute;

width:850px;

height:850px;

right:-200px;

top:-200px;

background:radial-gradient(circle,

rgba(0,87,255,.22),

transparent 70%);

filter:blur(80px);

pointer-events:none;

z-index:-1;

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

}

.hero-content{

width:92%;

max-width:1450px;

margin:auto;

padding-top:100px;

}

.hero-content .eyebrow{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

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

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

font-size:.78rem;

letter-spacing:3px;

text-transform:uppercase;

font-weight:700;

margin-bottom:30px;

}

.hero-content h1{

font-size:clamp(4.5rem,9vw,7rem);

line-height:.95;

max-width:900px;

letter-spacing:-5px;

margin-bottom:30px;

font-weight:900;

}

.hero-content p{

font-size:1.25rem;

max-width:720px;

color:#BEBEBE;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

margin-bottom:70px;

flex-wrap:wrap;

}

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

.hero-stats{

display:grid;

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

gap:22px;

max-width:1100px;

}

.hero-stats div{

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

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

backdrop-filter:blur(20px);

border-radius:22px;

padding:30px;

transition:var(--transition);

}

.hero-stats div:hover{

transform:translateY(-8px);

border-color:rgba(0,87,255,.40);

box-shadow:0 20px 60px rgba(0,87,255,.18);

}

.hero-stats h2{

font-size:2.2rem;

margin-bottom:8px;

font-weight:800;

}

.hero-stats span{

font-size:.95rem;

color:#A6A6A6;

}

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

.scroll-indicator{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

}

.scroll-indicator span{

font-size:.8rem;

letter-spacing:3px;

text-transform:uppercase;

color:#B5B5B5;

}

.scroll-indicator .line{

width:2px;

height:70px;

background:linear-gradient(

to bottom,

#ffffff,

transparent);

animation:scrollLine 2.5s infinite;

}

/*======================================
CUSTOM CURSOR
======================================*/

.cursor{

position:fixed;

width:14px;

height:14px;

background:#ffffff;

border-radius:50%;

pointer-events:none;

z-index:999999;

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

transition:width .25s,height .25s;

mix-blend-mode:difference;

}

.cursor-blur{

position:fixed;

width:220px;

height:220px;

background:rgba(0,87,255,.14);

filter:blur(80px);

border-radius:50%;

pointer-events:none;

z-index:999998;

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

}

/*======================================
FEATURED SECTION
======================================*/

.featured-section{

background:#050505;

}

.section-header{

text-align:center;

max-width:900px;

margin:0 auto 80px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

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

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

font-size:.75rem;

letter-spacing:3px;

font-weight:700;

margin-bottom:22px;

}

.featured-grid{

display:grid;

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

gap:35px;

}

.featured-card{

position:relative;

height:620px;

border-radius:28px;

overflow:hidden;

cursor:pointer;

}

.featured-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.featured-card:hover img{

transform:scale(1.08);

}

.card-overlay{

position:absolute;

inset:0;

display:flex;

justify-content:flex-end;

flex-direction:column;

padding:40px;

background:linear-gradient(

180deg,

transparent,

rgba(0,0,0,.85));

}

.card-overlay h3{

font-size:2rem;

margin-bottom:12px;

}

.card-overlay p{

color:#D2D2D2;

max-width:320px;

}

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

@keyframes floatGlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(30px);

}

}

@keyframes scrollLine{

0%{

opacity:0;

height:10px;

}

50%{

opacity:1;

height:70px;

}

100%{

opacity:0;

height:10px;

}

}
/*==================================================
ARTIST EXPERIENCE
==================================================*/

.artist-experience{

position:relative;

padding:180px 0;

background:#060606;

overflow:hidden;

}

.artist-experience::before{

content:"";

position:absolute;

top:-250px;

right:-250px;

width:700px;

height:700px;

background:radial-gradient(circle,

rgba(0,87,255,.12),

transparent 70%);

filter:blur(90px);

pointer-events:none;

}

.section-intro{

max-width:900px;

margin-bottom:90px;

}

.section-label{

display:inline-flex;

align-items:center;

padding:10px 20px;

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

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

border-radius:999px;

letter-spacing:3px;

font-size:.75rem;

font-weight:700;

text-transform:uppercase;

margin-bottom:30px;

}

.section-intro h2{

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

line-height:1;

max-width:900px;

margin-bottom:30px;

letter-spacing:-3px;

}

.section-intro p{

max-width:760px;

font-size:1.15rem;

}

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

.experience-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

align-items:stretch;

}

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

.experience-large{

position:relative;

height:760px;

overflow:hidden;

border-radius:34px;

cursor:pointer;

}

.experience-large img{

width:100%;

height:100%;

object-fit:cover;

transition:1.4s;

}

.experience-large:hover img{

transform:scale(1.08);

}

.experience-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:60px;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.92));

}

.experience-overlay h3{

font-size:2.7rem;

margin-bottom:20px;

max-width:600px;

}

.experience-overlay p{

max-width:560px;

margin-bottom:25px;

color:#D1D1D1;

}

.experience-overlay a{

display:inline-flex;

align-items:center;

gap:12px;

text-decoration:none;

font-weight:700;

color:#fff;

font-size:1rem;

transition:.35s;

}

.experience-overlay a:hover{

transform:translateX(8px);

}

/*======================================
RIGHT PANELS
======================================*/

.experience-side{

display:grid;

grid-template-columns:1fr;

gap:28px;

}

.mini-panel{

position:relative;

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

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

backdrop-filter:blur(24px);

border-radius:26px;

padding:35px;

overflow:hidden;

transition:.45s;

}

.mini-panel::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:180px;

height:180px;

background:rgba(0,87,255,.10);

border-radius:50%;

filter:blur(45px);

transition:.5s;

}

.mini-panel:hover{

transform:translateY(-10px);

border-color:rgba(0,87,255,.40);

box-shadow:0 25px 70px rgba(0,87,255,.12);

}

.mini-panel:hover::before{

transform:scale(1.4);

}

.mini-panel .icon{

width:72px;

height:72px;

border-radius:18px;

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

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.mini-panel .icon i{

font-size:28px;

color:#fff;

}

.mini-panel h4{

font-size:1.55rem;

margin-bottom:14px;

}

.mini-panel p{

margin:0;

color:#B7B7B7;

}

/*======================================
EDITORIAL STRIP
======================================*/

.editorial-strip{

padding:180px 0;

background:#050505;

}

.editorial-grid{

display:grid;

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

gap:30px;

}

.editorial-card{

position:relative;

height:540px;

overflow:hidden;

border-radius:30px;

}

.editorial-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.editorial-card:hover img{

transform:scale(1.06);

}

.editorial-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.88));

}

.editorial-content{

position:absolute;

left:35px;

bottom:35px;

z-index:2;

}

.editorial-content h3{

font-size:2rem;

margin-bottom:12px;

}

.editorial-content span{

font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

color:#C8C8C8;

}

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

.partner-bar{

padding:90px 0;

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

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

}

.partner-logos{

display:grid;

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

gap:40px;

align-items:center;

}

.partner-logos img{

width:140px;

margin:auto;

opacity:.45;

transition:.4s;

filter:grayscale(100%);

}

.partner-logos img:hover{

opacity:1;

filter:grayscale(0);

transform:scale(1.08);

}
/*==================================================
CINEMATIC CAREERS
==================================================*/

.careers-showcase{

position:relative;

padding:220px 0;

background:#050505;

overflow:hidden;

}

.careers-showcase::before{

content:"";

position:absolute;

left:-250px;

top:-250px;

width:700px;

height:700px;

background:radial-gradient(circle,
rgba(0,87,255,.08),
transparent 70%);

filter:blur(80px);

pointer-events:none;

}

.career-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.career-image{

position:relative;

height:900px;

overflow:hidden;

border-radius:36px;

}

.career-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1.2s;

}

.career-image:hover img{

transform:scale(1.06);

}

.career-content h2{

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

line-height:.95;

letter-spacing:-3px;

margin-bottom:35px;

max-width:700px;

}

.career-content p{

max-width:620px;

margin-bottom:50px;

}

.career-list{

display:flex;

flex-direction:column;

gap:22px;

}

.career-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:28px 34px;

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

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

border-radius:22px;

transition:var(--transition);

cursor:pointer;

}

.career-item:hover{

transform:translateX(12px);

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

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

box-shadow:0 20px 50px rgba(0,87,255,.12);

}

.career-item h4{

font-size:1.45rem;

margin:0;

}

.career-item span{

font-size:.95rem;

color:#A5A5A5;

}

/*==================================================
MARKETPLACE
==================================================*/

.marketplace{

padding:220px 0;

background:#070707;

}

.market-grid{

display:grid;

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

gap:28px;

}

.market-card{

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

border-radius:30px;

overflow:hidden;

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

transition:.5s;

}

.market-card:hover{

transform:translateY(-14px);

box-shadow:0 30px 80px rgba(0,0,0,.40);

border-color:rgba(0,87,255,.30);

}

.market-card img{

width:100%;

height:280px;

object-fit:cover;

transition:1s;

}

.market-card:hover img{

transform:scale(1.08);

}

.market-body{

padding:30px;

}

.market-body h3{

font-size:1.5rem;

margin-bottom:14px;

}

.market-body p{

font-size:.96rem;

margin-bottom:18px;

}

.market-price{

font-size:1.3rem;

font-weight:700;

color:#fff;

}

/*==================================================
SUCCESS METRICS
==================================================*/

.metrics{

padding:180px 0;

background:#050505;

}

.metrics-grid{

display:grid;

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

gap:25px;

}

.metric{

padding:45px;

border-radius:28px;

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

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

text-align:center;

transition:.4s;

}

.metric:hover{

transform:translateY(-10px);

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

}

.metric h2{

font-size:4rem;

font-weight:900;

margin-bottom:10px;

}

.metric p{

margin:0;

color:#AFAFAF;

}

/*==================================================
INVESTMENT PANEL
==================================================*/

.investor-panel{

padding:200px 0;

background:#060606;

}

.dashboard{

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

border-radius:36px;

padding:50px;

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

backdrop-filter:blur(28px);

}

.dashboard-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 0;

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

}

.dashboard-row:last-child{

border:none;

}

.dashboard-row strong{

font-size:1.1rem;

}

/*==================================================
NEWSLETTER
==================================================*/

.newsletter{

padding:220px 0;

text-align:center;

background:#050505;

}

.newsletter-box{

max-width:950px;

margin:auto;

padding:80px;

border-radius:40px;

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

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

backdrop-filter:blur(30px);

}

.newsletter-form{

display:flex;

gap:18px;

margin-top:45px;

}

.newsletter-form input{

flex:1;

padding:22px 26px;

background:#111;

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

border-radius:999px;

color:#fff;

font-size:1rem;

outline:none;

}

.newsletter-form button{

padding:22px 42px;

background:#fff;

color:#000;

border:none;

border-radius:999px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.newsletter-form button:hover{

transform:translateY(-4px);

}

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

footer{

padding:120px 0 60px;

background:#030303;

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

}

.footer-grid{

display:grid;

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

gap:60px;

}

.footer-logo{

height:54px;

margin-bottom:25px;

}

.footer-grid h4{

margin-bottom:24px;

font-size:1.1rem;

}

.footer-grid ul{

list-style:none;

padding:0;

}

.footer-grid li{

margin-bottom:14px;

}

.footer-grid a{

color:#AFAFAF;

text-decoration:none;

transition:.3s;

}

.footer-grid a:hover{

color:#fff;

}

.footer-bottom{

margin-top:70px;

padding-top:30px;

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

display:flex;

justify-content:space-between;

align-items:center;

color:#8C8C8C;

font-size:.9rem;

}
/*=========================================
PREMIUM NAVIGATION
=========================================*/

.nav-left{

display:flex;

align-items:center;

}

.nav-center{

display:flex;

align-items:center;

}

.nav-right{

display:flex;

align-items:center;

gap:20px;

}

.nav-links{

display:flex;

align-items:center;

gap:38px;

list-style:none;

}

.nav-links li{

position:relative;

}

.nav-links a{

color:#fff;

text-decoration:none;

font-weight:600;

font-size:.95rem;

transition:.35s;

}

.nav-links a.active{

color:var(--accent);

}

.nav-links a:hover{

color:var(--accent);

}

.search-btn{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

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

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

border-radius:50%;

cursor:pointer;

transition:.35s;

}

.search-btn:hover{

background:var(--accent);

transform:translateY(-3px);

}

.mobile-toggle{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.mobile-toggle span{

width:26px;

height:2px;

background:#fff;

display:block;

}