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

:root{

    --bg:#0b0615;
    --bg2:#140a24;
    --panel:rgba(28,18,46,.78);

    --gold:#f4d37b;
    --gold2:#d6b15d;

    --text:#fff8ea;
    --muted:#d9d0bd;

    --border:rgba(244,211,123,.12);

    --purple:#8b5cf6;
    --purple2:#6d28d9;

}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    color:var(--text);

    background:
    radial-gradient(circle at top,#5b21b622 0%,transparent 35%),
    radial-gradient(circle at right,#9333ea18 0%,transparent 35%),
    linear-gradient(180deg,var(--bg),var(--bg2));

    line-height:1.7;

}

.container{

    width:92%;
    max-width:1300px;
    margin:auto;

}

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:999;

    backdrop-filter:blur(20px);

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

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

}

header .container{

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

    padding:22px 0;

}

.logo{

    color:var(--gold);

    text-decoration:none;

    font-size:34px;

    font-weight:bold;

    letter-spacing:3px;

}

nav{

    display:flex;
    gap:28px;

}

nav a{

    color:var(--muted);

    text-decoration:none;

    transition:.35s;

}

nav a:hover{

    color:var(--gold);

}

.github-btn{

    color:var(--gold);

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

    padding:12px 24px;

    border-radius:12px;

    text-decoration:none;

    transition:.35s;

}

.github-btn:hover{

    background:var(--gold);

    color:#120b20;

}

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,#8b5cf622 0%,transparent 55%),

    radial-gradient(circle at bottom right,#d6b15d18 0%,transparent 40%);

    filter:blur(40px);

}

.hero-grid{

    position:relative;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

    z-index:2;

}

.hero-badge{

    display:inline-block;

    background:#29183d;

    color:var(--gold);

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

    padding:12px 22px;

    border-radius:999px;

    margin-bottom:30px;

}

.hero h1{

    font-size:72px;

    color:var(--gold);

    line-height:1.05;

    margin-bottom:28px;

    text-shadow:0 0 25px rgba(244,211,123,.25);

}

.hero p{

    font-size:22px;

    color:var(--muted);

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.btn{

    text-decoration:none;

    padding:17px 36px;

    border-radius:14px;

    transition:.35s;

    font-weight:bold;

}

.btn-primary{

    background:linear-gradient(135deg,var(--gold),var(--gold2));

    color:#140a24;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 0 35px rgba(244,211,123,.35);

}

.btn-secondary{

    border:2px solid var(--gold);

    color:var(--gold);

}

.btn-secondary:hover{

    background:var(--gold);

    color:#120b20;

}

.hero-stats{

    display:flex;

    gap:35px;

}

.hero-stats h2{

    color:var(--gold);

}

.hero-stats span{

    color:var(--muted);

}

.ai-window{

    background:var(--panel);

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

    border-radius:24px;

    backdrop-filter:blur(22px);

    overflow:hidden;

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

}

.window-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

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

}

.dots{

    display:flex;

    gap:8px;

}

.dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--gold);

}

.window-title{

    color:var(--gold);

    font-weight:bold;

}

.window-content{

    padding:35px;

}

.avatar-circle{

    width:140px;

    height:140px;

    border-radius:50%;

    margin:0 auto 35px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,var(--purple),var(--purple2));

    color:var(--gold);

    font-size:34px;

    font-weight:bold;

    box-shadow:0 0 40px rgba(139,92,246,.35);

}

.status{

    display:grid;

    gap:16px;

}

.status-item{

    display:flex;

    justify-content:space-between;

    padding:16px 20px;

    border-radius:14px;

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

}

.status-item strong{

    color:var(--gold);

}

.section{

    padding:120px 0;

}

.section h2{

    color:var(--gold);

    text-align:center;

    font-size:46px;

    margin-bottom:45px;

}

.cards{

    display:grid;

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

    gap:28px;

}

.card{

    background:var(--panel);

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

    padding:34px;

    border-radius:20px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

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

    border-color:var(--gold);

}

.card h3{

    color:var(--gold);

    margin-bottom:14px;

}

.section p{

    text-align:center;

    color:var(--muted);

    max-width:800px;

    margin:auto;

}

footer{

    padding:45px 0;

    text-align:center;

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

    color:var(--muted);

}

@media(max-width:980px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:760px){

header .container{

flex-direction:column;

gap:18px;

}

nav{

flex-wrap:wrap;

justify-content:center;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

}

}