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

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

html{
scroll-behavior:smooth;
}

img{
max-width:100%;
height:auto;
display:block;
object-fit:cover;
}

ul{
list-style:none;
}

a{
text-decoration:none;
color:#00f260;
transition:.3s;
}

a:hover{
color:#fff;
text-decoration:underline;
}

/* =========================
VARIABLES
========================= */

:root{

--bg-color:#050505;
--surface-color:#0f0f11;
--surface-hover:#1a1a1e;

--primary-gradient:linear-gradient(135deg,#00f260,#0575e6);

--text-main:#ffffff;
--text-muted:#a1a1aa;

--glass-bg:rgba(255,255,255,0.03);
--glass-border:rgba(255,255,255,0.08);

--radius-sm:10px;
--radius-md:16px;
--radius-lg:24px;

}

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

body{

font-family:'Outfit',sans-serif;
background:var(--bg-color);
color:var(--text-main);
line-height:1.6;
overflow-x:hidden;

background-image:
radial-gradient(circle at 15% 50%,rgba(5,117,230,0.08),transparent 25%),
radial-gradient(circle at 85% 30%,rgba(178,36,239,0.08),transparent 25%);

}

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

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

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

header{

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

background:rgba(5,5,5,0.8);
backdrop-filter:blur(12px);

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

}

nav{

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

}

.logo{

font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:1.4rem;

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

}

.logo span{
color:#00f260;
}

.menu{

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

}

.menu a{

font-size:.95rem;
color:#ddd;

}

.menu a:hover{
color:#00f260;
}

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

.btn-primary{

background:var(--primary-gradient);
color:#fff;

padding:10px 22px;
border-radius:50px;

font-weight:600;
font-size:.9rem;

border:none;
cursor:pointer;

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

}

.btn-primary:hover{

transform:translateY(-2px);
box-shadow:0 4px 15px rgba(0,242,96,.3);

}

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

.hero{

text-align:center;
padding:80px 20px;

}

.hero h1{

font-size:2.6rem;
margin-bottom:15px;

}

.hero p{

color:var(--text-muted);
max-width:650px;
margin:auto;

}

/* =========================
SEARCH
========================= */

.search-box{

margin-top:30px;

}

.search-box input{

width:320px;
padding:12px;

border-radius:30px;
border:1px solid #333;

background:#111;
color:#fff;

}

.search-box button{

margin-left:10px;
padding:12px 18px;

border-radius:30px;
border:none;

background:var(--primary-gradient);
color:#fff;

cursor:pointer;

}

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

.group-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;

margin-top:40px;

}

.group-card{

background:var(--surface-color);

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

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

padding:18px;

transition:.3s;

}

.group-card:hover{

background:var(--surface-hover);
transform:translateY(-4px);

}

.group-card img{

width:100%;
height:160px;
border-radius:12px;
margin-bottom:12px;

}

.group-card h3{

font-size:1.1rem;
margin-bottom:6px;

}

.group-card p{

font-size:.9rem;
color:var(--text-muted);

}

/* =========================
GROUP PAGE
========================= */

.group-page{

max-width:900px;
margin:auto;

padding:40px 20px;

}

.group-header{

display:flex;
gap:20px;
align-items:center;
margin-bottom:25px;

}

.group-header img{

width:120px;
height:120px;
border-radius:20px;

}

.group-header h1{
font-size:1.8rem;
}

.group-description{

margin-top:20px;
color:#ccc;

}

/* =========================
RESULTS PAGE
========================= */

.results-container{

max-width:1000px;
margin:auto;

padding:20px;

}

.group-list{

margin-top:25px;

}

.group-item{

display:flex;
align-items:center;

background:#111;

border:1px solid #222;

padding:16px;

border-radius:14px;

margin-bottom:15px;

}

.group-item img{

width:70px;
height:70px;

border-radius:50%;

margin-right:15px;

}

.group-item h3{
font-size:1rem;
}

/* =========================
LEGAL PAGES
========================= */

.legal-container{

max-width:850px;
margin:auto;

padding:60px 20px;

}

.legal-container h1{

font-size:2rem;
margin-bottom:20px;

}

.legal-container p{

color:#ccc;
margin-bottom:15px;

}

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

.contact-box{

max-width:600px;
margin:auto;

padding:40px 20px;

}

.contact-box input,
.contact-box textarea{

width:100%;

padding:12px;

margin-bottom:15px;

border-radius:8px;

border:1px solid #333;

background:#111;

color:#fff;

}

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

footer{

margin-top:80px;

padding:40px 20px;

border-top:1px solid #222;

text-align:center;

color:#777;

font-size:.9rem;

}

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

@media(max-width:768px){

.hero h1{
font-size:2rem;
}

.group-header{
flex-direction:column;
text-align:center;
}

.menu{
display:none;
}

.search-box input{
width:100%;
margin-bottom:10px;
}

.search-box button{
width:100%;
margin-left:0;
}

}