:root{
      --orange:#ff6a00;
      --black:#0b0b0b;
      --white:#ffffff;
      --muted:#f4f4f4;
      --accent:#ffb86b;
      --max-width:1100px;
    }
    *{box-sizing:border-box}
    html,body{
        height:100%;
        margin:0;
        font-family:Montserrat,system-ui,Arial; 
        background:linear-gradient(180deg,var(--black) 0%, #111 50%, #1a0b0b 100%);
        color:var(--white)
    }
    a{color:var(--accent)}
    .container{
        max-width:var(--max-width);
        margin:24px auto;
        padding:24px
    }
    header{
        display:flex;
        gap:16px;
        align-items:center;
        justify-content:space-between
    }
    .logo{
        display:flex;
        align-items:center;
        gap:12px
    }
    .logo .icon{
        width:56px;
        height:56px;
        border-radius:12px;
        background:var(--orange);
        display:grid;
        place-items:center;
        font-family:Nosifer;
        color:var(--black);
        font-size:24px;
        box-shadow:0 6px 20px rgba(0,0,0,.6)
    }
    nav{
        display:flex;
        gap:12px;
        flex-wrap:wrap
    }
    nav button{
        background:transparent;
        border:2px solid rgba(255,255,255,.08);
        padding:8px 14px;
        color:var(--white);
        border-radius:10px;
        cursor:pointer
    }
    nav button.active{
        background:var(--orange);
        color:var(--black);
        border-color:transparent
    }

    .hero{
        display:grid;
        grid-template-columns:1fr 420px
        ;gap:24px;
        align-items:center;
        margin-top:18px
    }
    .hero-card{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        padding:28px;
        border-radius:16px;
        box-shadow:0 10px 40px rgba(0,0,0,.6);
        backdrop-filter:blur(2px)
    }
    .hero h1{
        font-family:Nosifer, monospace;
        font-size:48px;
        margin:0 0 8px;
        color:var(--orange);
        text-shadow:0 4px 14px rgba(255,106,0,.12)
    }
    .hero p.lead{
        margin:0 0 12px;
        color:#eaeaea;
        opacity:.95
    }
    .cta-row{
        display:flex;
        gap:10px
    }
    .btn{
        padding:10px 16px;
        border-radius:10px;
        border:none;
        cursor:pointer;
        font-weight:600
    }
    .btn.play{
        background:var(--white);
        color:var(--black)
    }
    .btn.join{
        background:transparent;border:2px solid var(--orange);
        color:var(--orange)
    }
    main{
        margin-top:22px
    }
    .card{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
        padding:20px;
        border-radius:12px;
        margin-bottom:18px}

    .grid-2{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px
    }

    .members{
        display:flex;
        gap:12px;
        flex-wrap:wrap
    }
    .member{
        flex:1 1 220px;
        min-width:180px;
        background:rgba(255,255,255,0.02);
        padding:12px;
        border-radius:10px;
        display:flex;
        gap:12px;
        align-items:center
    }
    .member .avatar{
        width:64px;
        height:64px;
        border-radius:12px;
        background:linear-gradient(45deg,var(--orange),#ffbb66);
        display:grid;
        place-items:center;
        color:var(--black);
        font-weight:700
    }
    .member h4{
        margin:0 0 4px
    }
    .member p{
        margin:0;
        font-size:13px;
        color:#ddd
    }

    .products ul{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:8px
    }
    .product{
        display:flex;
        gap:12px;
        align-items:flex-start;
        padding:12px;
        border-radius:8px;
        background:rgba(255,255,255,0.02)
    }
    .product .thumb{
        width:84px;
        height:64px;
        border-radius:8px;
        background:linear-gradient(90deg,#3a3a3a,#111);
        display:grid;
        place-items:center
    }
    .product .meta{
        flex:1
    }
    .product h5{
        margin:0 0 6px
    }
    .product p{
        margin:0;color:#ddd;
        font-size:13px
    }
    .details{
        display:none;
        margin-top:8px;
        padding:8px;
        background:rgba(255,255,255,0.02);
        border-radius:6px
    }
    .toggle-detail{
        cursor:pointer;
        background:transparent;
        border:none;
        color:var(--accent);
        font-weight:600
    }

    .gallery{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
        gap:8px
    }
    .gallery img{
        width:100%;
        height:140px;
        object-fit:cover;
        border-radius:8px;
        cursor:pointer;
        filter:grayscale(.05) contrast(1.05)
    }

    .modal{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.8);
        display:none;
        align-items:center;
        justify-content:center;
        padding:20px
    }

    .modal .modal-inner{
        max-width:900px;
        width:100%;
        background:var(--black);
        padding:14px;
        border-radius:10px
    }
    .modal img{
        width:100%;
        height:auto;
        border-radius:6px
    }

    form{
        display:flex;
        flex-direction:column;
        gap:10px
    }
    input,textarea,select{
        padding:10px;
        border-radius:8px;
        border:1px solid rgba(255,255,255,0.06);
        background:transparent;
        color:var(--white)
    }
    label{
        font-size:13px
    }
    .small{
        font-size:13px;
        color:#ccc
    }
    footer{
        margin-top:24px;
        padding:12px;
        text-align:center;
        color:#bbb
    }

    @media(max-width:920px){
        .hero{
            grid-template-columns:1fr;
        }
        .logo .icon{
            width:48px;height:48px
        }
    }
    .floating{
        animation:floaty 6s ease-in-out infinite
    }
    @keyframes floaty{
        0%{transform:translateY(0)}
        50%{transform:translateY(-8px)}
        100%{transform:translateY(0)}
    }