/* ===================================================
   gig.iszy.cloud
   PRIVATE ACCESS
=================================================== */

:root{

--bg:#06070a;
--surface:#0d1017;
--surface2:#141923;

--border:rgba(255,255,255,.06);

--text:#ffffff;
--muted:#8b94a7;

--green:#00ff9d;
--green2:#00d47e;

--blue:#5c7cfa;

--radius:18px;

--shadow:
0 10px 40px rgba(0,0,0,.35);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}

/* ====================================== */

body::before{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

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

background-size:55px 55px;

opacity:.18;

pointer-events:none;

z-index:-5;

}

/* ====================================== */

.background-grid{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-4;

}

.background-grid::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(0,255,157,.10),
transparent 70%);

top:-250px;

right:-180px;

filter:blur(120px);

animation:float1 14s ease-in-out infinite alternate;

}

.background-grid::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(92,124,250,.10),
transparent 70%);

bottom:-180px;

left:-180px;

filter:blur(120px);

animation:float2 16s ease-in-out infinite alternate;

}

@keyframes float1{

to{

transform:
translate(-120px,100px);

}

}

@keyframes float2{

to{

transform:
translate(100px,-100px);

}

}

/* ====================================== */

.container{

width:min(1180px,92%);

margin:auto;

}

/* ====================================== */

header{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(16px);

background:rgba(6,7,10,.75);

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

}

/* ====================================== */

.nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

/* ====================================== */

.logo{

font-size:1.25rem;

font-weight:800;

letter-spacing:.05em;

}

.logo span{

color:var(--green);

}

/* ====================================== */

nav{

display:flex;

gap:18px;

align-items:center;

}

nav a{

text-decoration:none;

color:var(--muted);

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#fff;

}

/* ====================================== */

.hero{

padding:90px 0 70px;

}

/* ====================================== */

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

background:

rgba(0,255,157,.08);

border:

1px solid rgba(0,255,157,.15);

color:var(--green);

font-size:.82rem;

font-weight:700;

letter-spacing:.12em;

margin-bottom:26px;

text-transform:uppercase;

}

/* ====================================== */

.hero h1{

font-size:4rem;

font-weight:800;

margin-bottom:18px;

letter-spacing:-2px;

}

/* ====================================== */

.hero p{

color:var(--muted);

font-size:1.1rem;

max-width:550px;

}

/* ====================================== */

main{

padding-bottom:80px;

}

/* ====================================== */

.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(310px,1fr));

gap:26px;

margin-top:35px;

}

/* ====================================== */

strong{

font-weight:700;

}

small{

color:var(--muted);

font-size:.9rem;

}
/* ===================================================
   MANYLIVE FEATURED CARD
=================================================== */

.featured{

position:relative;

background:
linear-gradient(
180deg,
rgba(18,22,31,.98),
rgba(12,15,22,.98));

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

border-radius:24px;

padding:42px;

margin-bottom:38px;

overflow:hidden;

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

transition:.35s;

}

.featured:hover{

transform:translateY(-6px);

border-color:rgba(0,255,157,.25);

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

}

.featured::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

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

filter:blur(50px);

}

/* ====================================== */

.featured-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:999px;

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

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

color:var(--green);

font-size:.78rem;

font-weight:700;

margin-bottom:24px;

}

.featured-tag::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--green);

}

/* ====================================== */

.featured h2{

font-size:2.4rem;

margin-bottom:10px;

}

.featured p{

color:var(--muted);

margin-bottom:24px;

}

/* ====================================== */

.roles{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:28px 0;

}

.roles span{

padding:12px 18px;

background:#171d28;

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

border-radius:999px;

font-size:.92rem;

transition:.25s;

}

.roles span:hover{

border-color:rgba(0,255,157,.25);

transform:translateY(-2px);

}

/* ====================================== */

.apply-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 34px;

border-radius:14px;

background:linear-gradient(
135deg,
#00ff9d,
#00d47e);

color:#08110d;

font-weight:800;

text-decoration:none;

transition:.3s;

box-shadow:
0 15px 35px rgba(0,255,157,.25);

}

.apply-btn:hover{

transform:translateY(-3px);

box-shadow:
0 25px 50px rgba(0,255,157,.35);

}

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

.card{

background:var(--surface);

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

border-radius:20px;

padding:28px;

transition:.35s;

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-6px);

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

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

}

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent);

opacity:0;

transition:.3s;

}

.card:hover::before{

opacity:1;

}

/* ====================================== */

.status{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 14px;

border-radius:999px;

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

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

font-size:.78rem;

font-weight:700;

color:#d7dee8;

margin-bottom:22px;

}

.status::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--green);

}

/* ====================================== */

.card h3{

font-size:1.45rem;

margin-bottom:8px;

}

.card p{

color:var(--muted);

margin-bottom:24px;

}

/* ====================================== */

.budget{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 18px;

border-radius:14px;

background:#171d28;

margin-bottom:24px;

}

.budget span{

color:var(--muted);

}

.budget strong{

font-size:1rem;

}

/* ====================================== */

.card button{

width:100%;

padding:15px;

background:#202737;

border:none;

border-radius:12px;

color:#fff;

font-size:.95rem;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.card button:hover{

background:#2a3448;

}
/* ===================================================
   CONTACT
=================================================== */

#contact{

padding:30px 0 80px;

}

.contact-panel{

background:linear-gradient(
180deg,
#10141d,
#0d1017);

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

border-radius:24px;

overflow:hidden;

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

}

.contact-panel h2{

padding:32px;

font-size:1.7rem;

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

}

/* ====================================== */

.contact-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 32px;

text-decoration:none;

color:#fff;

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

transition:.3s;

}

.contact-row:last-child{

border-bottom:none;

}

.contact-row:hover{

background:#171d28;

}

.contact-row small{

display:block;

font-size:.82rem;

color:var(--muted);

margin-bottom:6px;

}

.contact-row strong{

font-size:1.05rem;

font-weight:600;

}

.recommend{

padding:8px 14px;

border-radius:999px;

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

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

color:var(--green);

font-size:.78rem;

font-weight:700;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#080b11;

}

::-webkit-scrollbar-thumb{

background:#222c3d;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#31405b;

}

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

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero{

animation:fadeUp .7s ease;

}

.featured{

animation:fadeUp .8s ease;

}

.card{

animation:fadeUp .8s ease;

animation-fill-mode:both;

}

.card:nth-child(1){animation-delay:.05s;}
.card:nth-child(2){animation-delay:.10s;}
.card:nth-child(3){animation-delay:.15s;}
.card:nth-child(4){animation-delay:.20s;}
.card:nth-child(5){animation-delay:.25s;}

.contact-panel{

animation:fadeUp .9s ease;

}

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

@media(max-width:900px){

.hero{

padding:70px 0 50px;

}

.hero h1{

font-size:2.8rem;

}

.nav{

flex-direction:column;

gap:18px;

}

.roles{

gap:10px;

}

.roles span{

width:100%;

text-align:center;

}

.contact-row{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

}

@media(max-width:600px){

.container{

width:94%;

}

.hero h1{

font-size:2.2rem;

}

.featured{

padding:28px;

}

.card{

padding:22px;

}

.contact-panel h2{

padding:24px;

}

.contact-row{

padding:20px 24px;

}

.apply-btn{

width:100%;

}

}

/* ===================================================
   SMALL POLISH
=================================================== */

::selection{

background:var(--green);

color:#08110d;

}

a{

transition:.3s;

}

button{

font-family:inherit;

}

img{

max-width:100%;

display:block;

}

.hidden{

display:none;

}

.center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-40{

margin-top:40px;

}