/*======================================================
Guild Motion Alpha 3.1
Core Styles
======================================================*/

:root{

--bg:#050505;
--surface:#101010;
--surface-light:#171717;

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

--white:#ffffff;
--text:#d8d8d8;
--muted:#9d9d9d;

--pink:#ff4fc4;
--purple:#8d5cff;

--gradient:linear-gradient(
135deg,
#ff4fc4 0%,
#d86cff 45%,
#8d5cff 100%
);

--radius:22px;

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

--transition:.35s ease;

}

/*======================================================
Reset
======================================================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:var(--text);

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

line-height:1.6;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1240px,92%);

margin:auto;

}

/*======================================================
Typography
======================================================*/

h1,
h2,
h3,
h4{

color:#fff;

font-weight:900;

line-height:1.02;

letter-spacing:-1px;

}

p{

font-size:18px;

color:var(--text);

}

.gradient{

background:linear-gradient(
90deg,
#ff4fc4 0%,
#ff78d4 25%,
#d86cff 60%,
#8d5cff 100%
);

background-size:250% 250%;

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientShift 8s ease infinite;

display:inline-block;

}

.eyebrow{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

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

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

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:#dcdcdc;

margin-bottom:26px;

}

/*======================================================
Buttons
======================================================*/

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:999px;

font-weight:700;

transition:.35s ease;

cursor:pointer;

}

.button.primary{

background:var(--gradient);

color:#fff;

box-shadow:0 12px 35px rgba(170,80,255,.30);

}

.button.primary:hover{

transform:translateY(-4px);

box-shadow:0 18px 45px rgba(170,80,255,.45);

}

.button.secondary{

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

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

backdrop-filter:blur(12px);

color:white;

}

.button.secondary:hover{

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

transform:translateY(-4px);

}
/*======================================================
Header
======================================================*/

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:1000;

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

backdrop-filter:blur(18px);

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

transition:.35s ease;

}

.header-container{

display:flex;

align-items:center;

justify-content:space-between;

padding:22px 0;

}

.logo img{
    height:60px;
    width:auto;
    display:block;
}

nav{

display:flex;

align-items:center;

gap:34px;

}

nav a{

font-weight:600;

color:#d7d7d7;

position:relative;

padding-bottom:6px;

transition:.3s ease;

}
nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;

    background:linear-gradient(90deg,#ff4fc4,#8d5cff);

    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
}
nav a:hover::after{
    transform:scaleX(1);
}
nav a:hover{

color:#fff;

}

/*======================================================
Hero
======================================================*/

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:130px 0 80px;
position:relative;
}

.hero-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:60px;
align-items:start;
max-width:1240px;
margin:auto;
width:100%;
}

/* LEFT */

.hero-left{
display:flex;
flex-direction:column;
gap:20px;
}

/* ✅ FIX: ensures EXACT 3 lines */
.hero-left h1 div{
display:block;
white-space:nowrap;
}

/* main title size */
.hero-left h1{
font-size:78px;
line-height:1.2;
margin:20px 0 30px;
}

/* paragraph */
.hero-left p{
font-size:20px;
max-width:560px;
color:#d0d0d0;
margin-bottom:42px;
line-height:1.85;
}

/* buttons */
.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:55px;
}

/* stats */
.hero-stats{
display:flex;
gap:55px;
}

/* RIGHT */

.hero-right{
display:flex;
justify-content:flex-end;
align-items:flex-start;
}
/*======================================================
Glass Dashboard
======================================================*/

.glass-panel{

position:relative;

width:100%;

max-width:760px;

padding:28px;

border-radius:30px;

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

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

backdrop-filter:blur(22px);

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

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

overflow:hidden;

}

.glass-panel::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:1px;

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

}

.panel-header{

display:flex;

align-items:center;

gap:10px;

margin-bottom:24px;

}

.panel-dot{

width:12px;

height:12px;

border-radius:50%;

}

.panel-dot.pink{

background:#ff4fc4;

}

.panel-dot.purple{

background:#8d5cff;

}

.panel-dot.white{

background:#ffffff;

}

/*======================================================
Dashboard Layout
======================================================*/

.dashboard-layout{

display:grid;

grid-template-columns:180px 1fr;

gap:28px;

min-height:620px;

}

.dashboard-sidebar{

display:flex;

flex-direction:column;

gap:12px;

padding-right:22px;

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

}

.sidebar-logo{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

font-size:18px;

font-weight:800;

color:white;

background:transparent;

margin-bottom:18px;

box-shadow:none;

}

.dashboard-sidebar a{

padding:10px 14px;

border-radius:12px;

font-size:15px;

font-weight:600;

color:#bfbfbf;

transition:var(--transition);

}

.dashboard-sidebar a:hover{

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

color:white;

}

.dashboard-sidebar a.active{

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

color:white;

}

.dashboard-main{

display:flex;

flex-direction:column;

gap:22px;

}

/*======================================================
Dashboard Components
======================================================*/

.dashboard-search{

padding:16px 20px;

border-radius:14px;

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

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

color:#9f9f9f;

font-size:15px;

}

.dashboard-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.dashboard-tags span{

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:600;

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

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

color:#d6d6d6;

}

.dashboard-section{

display:flex;

flex-direction:column;

gap:16px;

}

.dashboard-section h4{

font-size:16px;

font-weight:700;

color:white;

letter-spacing:.2px;

}
/*======================================================
Asset Cards
======================================================*/

.preview-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

padding:18px;

border-radius:18px;

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

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

transition:var(--transition);

}

.preview-card:hover{

transform:translateY(-4px);

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

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

}

.featured-asset{

padding:16px 18px;

}

.asset-thumb{

width:72px;

height:72px;

border-radius:16px;

overflow:hidden;

flex-shrink:0;

background:linear-gradient(
135deg,
#ff4fc4,
#8d5cff
);

display:flex;

align-items:center;

justify-content:center;

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

}

.asset-thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s ease;

}

.preview-card:hover .asset-thumb img{

transform:scale(1.08);

}

.asset-info{

flex:1;

display:flex;

flex-direction:column;

gap:4px;

}

.asset-info strong{

color:#fff;

font-size:16px;

font-weight:700;

}

.asset-info small{

font-size:13px;

color:#9c9c9c;

}

.asset-rating{

font-size:13px;

letter-spacing:1px;

color:#ffd96a;

margin-top:4px;

}

.asset-price{

font-size:20px;

font-weight:800;

color:#fff;

}

/*======================================================
Dashboard Stats
======================================================*/

.dashboard-stats{

display:grid;

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

gap:16px;

}

.dashboard-stats div{

padding:18px;

border-radius:18px;

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

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

transition:var(--transition);

}

.dashboard-stats div:hover{

transform:translateY(-3px);

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

}

.dashboard-stats small{

display:block;

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

color:#9d9d9d;

margin-bottom:8px;

}

.dashboard-stats h3{

font-size:28px;

color:#fff;

}

/*======================================================
Activity Feed
======================================================*/

.activity-feed{

display:flex;

flex-direction:column;

gap:14px;

}

.activity-item{

display:flex;

align-items:center;

gap:12px;

padding:14px 16px;

border-radius:14px;

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

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

font-size:14px;

color:#d2d2d2;

}

.activity-item strong{

color:#fff;

}

.activity-dot{

width:10px;

height:10px;

border-radius:50%;

background:var(--gradient);

flex-shrink:0;

box-shadow:0 0 12px rgba(255,79,196,.5);

}

/*======================================================
Creator Card
======================================================*/

.creator-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:16px;

padding:18px;

border-radius:18px;

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

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

}

.creator-card img{

width:56px;

height:56px;

border-radius:50%;

object-fit:cover;

}

.creator-card strong{

color:white;

display:block;

margin-bottom:4px;

}

.creator-card small{

color:#9f9f9f;

font-size:13px;

}
/*======================================================
Sections
======================================================*/

section{

padding:120px 0;

}

section h2{

font-size:54px;

margin-bottom:24px;

}

section p{

max-width:760px;

margin-bottom:40px;

}

/*======================================================
Feature Cards
======================================================*/

.feature-grid{

display:grid;

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

gap:28px;

margin-top:50px;

}

.feature-card{

padding:34px;

border-radius:24px;

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

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

transition:var(--transition);

}

.feature-card:hover{

transform:translateY(-6px);

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

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

}

.feature-card h3{

font-size:24px;

margin-bottom:16px;

}

.feature-card p{

margin:0;

font-size:17px;

line-height:1.8;

}

/*======================================================
Join Section
======================================================*/

.join-box{

text-align:center;

}

.join-box form{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:40px;

}

.join-box input{

width:400px;

max-width:100%;

padding:18px 24px;

border-radius:999px;

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

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

color:#fff;

font-size:16px;

outline:none;

transition:var(--transition);

}

.join-box input:focus{

border-color:rgba(255,79,196,.45);

box-shadow:0 0 0 4px rgba(255,79,196,.12);

}

.join-box button{

padding:18px 36px;

border:none;

border-radius:999px;

cursor:pointer;

font-size:16px;

font-weight:700;

background:var(--gradient);

color:white;

transition:var(--transition);

}

.join-box button:hover{

transform:translateY(-4px);

}

/*======================================================
Footer
======================================================*/

footer{

padding:60px 0;

background:#040404;

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

text-align:center;

}

.footer-logo{

height:60px;

margin:0 auto 24px;

}

footer p{

margin:10px 0;

color:#999;

}

/*======================================================
Responsive
======================================================*/

@media(max-width:1100px){

.hero{

padding:150px 0 80px;

}

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-left{

padding-top:0;

max-width:100%;

}

.hero-left h1{

font-size:60px;

}

.hero-right{

justify-content:center;

}

.glass-panel{

max-width:100%;

}

.dashboard-layout{

grid-template-columns:1fr;

}

.dashboard-sidebar{

flex-direction:row;

flex-wrap:wrap;

border-right:none;

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

padding-bottom:20px;

}

nav{

display:none;

}

}

@media(max-width:768px){

.container{

width:94%;

}

.hero{

padding:140px 0 70px;

}

.hero-left h1{

font-size:46px;

}

.hero-buttons{

flex-direction:column;

}

.button{

width:100%;

}

section{

padding:90px 0;

}

section h2{

font-size:42px;

}

.feature-grid{

grid-template-columns:1fr;

}

.dashboard-stats{

grid-template-columns:1fr;

}

.join-box form{

flex-direction:column;

align-items:center;

}

.join-box input{

width:100%;

}

}

/*======================================================
Animations
======================================================*/

@keyframes gradientShift{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }