:root {

    --bg:
        #060306;

    --bg-soft:
        #0b070c;

    --card:
        rgba(16, 9, 16, 0.86);

    --card-strong:
        rgba(20, 10, 19, 0.96);

    --pink:
        #ff2295;

    --pink-bright:
        #ff4caf;

    --pink-dark:
        #a50d61;

    --pink-soft:
        rgba(255, 34, 149, .12);

    --white:
        #f7f4f7;

    --text:
        #d8d1d8;

    --muted:
        #858085;

    --dim:
        #555055;

    --green:
        #53e7a0;

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

    --border-pink:
        rgba(255,34,149,.30);

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

    --radius:
        20px;

    --container:
        1240px;

}


* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    background:
        var(--bg);

    color:
        var(--white);

    font-family:
        Vazirmatn,
        system-ui,
        sans-serif;

    overflow-x:
        hidden;

}


button,
input {

    font-family:
        inherit;

}


button {
    cursor:
        pointer;
}


.container {

    width:
        min(
            var(--container),
            calc(100% - 40px)
        );

    margin:
        auto;

}


.background-grid {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    background-image:

        linear-gradient(
            rgba(255,34,149,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,34,149,.035) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

}


.aurora {

    position:
        fixed;

    width:
        650px;

    height:
        650px;

    border-radius:
        50%;

    filter:
        blur(100px);

    opacity:
        .12;

    pointer-events:
        none;

    z-index:
        -1;

}


.aurora-one {

    background:
        #ff1590;

    right:
        -250px;

    top:
        -280px;

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

}


.aurora-two {

    background:
        #8d19ff;

    left:
        -280px;

    bottom:
        -300px;

    animation:
        auroraTwo 17s ease-in-out infinite alternate;

}


.noise {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .025;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}


.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(6,3,6,.72);

    backdrop-filter:
        blur(24px);

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

}


.header-inner {

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        white;

    text-decoration:
        none;

}


.brand-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--pink-bright);

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

    background:
        linear-gradient(
            145deg,
            rgba(255,34,149,.18),
            transparent
        );

    box-shadow:
        0 0 35px rgba(255,34,149,.15);

    font-size:
        21px;

}


.brand-text strong {

    display:
        block;

    font-size:
        15px;

    letter-spacing:
        2px;

}


.brand-text span {

    display:
        block;

    color:
        #777;

    font-size:
        8px;

    letter-spacing:
        3px;

}


.main-nav {

    display:
        flex;

    flex:
        1;

    gap:
        5px;

}


.main-nav a {

    color:
        #999;

    text-decoration:
        none;

    font-size:
        11px;

    padding:
        10px 13px;

    border-radius:
        11px;

    transition:
        .2s;

}


.main-nav a:hover {

    color:
        white;

    background:
        var(--pink-soft);

}


.header-actions {

    display:
        flex;

    gap:
        8px;

}


.ghost-button,
.glass-button,
.pink-button {

    border-radius:
        12px;

    padding:
        11px 16px;

    font-size:
        11px;

    color:
        var(--text);

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

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

    transition:
        .25s;

}


.ghost-button:hover,
.glass-button:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--border-pink);

}


.pink-button {

    color:
        white;

    border-color:
        rgba(255,100,185,.5);

    background:
        linear-gradient(
            135deg,
            #ff168d,
            #c71378
        );

    box-shadow:
        0 12px 40px rgba(255,34,149,.20);

}


.pink-button:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.12);

    box-shadow:
        0 18px 50px rgba(255,34,149,.32);

}


.large {

    padding:
        15px 22px;

}


.mobile-menu-button {

    display:
        none;

    border:
        0;

    background:
        none;

    color:
        white;

    font-size:
        22px;

}


.hero {

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

}


.hero-grid {

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    padding:
        65px 0 40px;

}


.hero-kicker {

    color:
        var(--pink-bright);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.hero-kicker b {

    color:
        #555;

    margin:
        0 8px;

}


.online-dot {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-left:
        6px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 14px var(--green);

}


.hero h1 {

    font-size:
        clamp(
            46px,
            6vw,
            82px
        );

    line-height:
        1.05;

    letter-spacing:
        -3px;

    margin:
        22px 0;

}


.hero h1 strong {

    display:
        block;

    color:
        var(--pink-bright);

    text-shadow:
        0 0 50px rgba(255,34,149,.35);

}


.hero-content > p {

    max-width:
        650px;

    color:
        #999;

    font-size:
        14px;

    line-height:
        2;

}


.hero-buttons {

    display:
        flex;

    gap:
        10px;

    margin:
        28px 0;

}


.hero-stats {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

    color:
        #666;

    font-size:
        9px;

}


.hero-stats strong {

    display:
        block;

    color:
        white;

    font-size:
        14px;

}


.online-stat {

    color:
        var(--green);

}


.online-stat i {

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px var(--green);

    margin-left:
        5px;

}


.hero-visual {

    height:
        520px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

}


.orbit {

    position:
        absolute;

    border:
        1px solid rgba(255,34,149,.20);

    border-radius:
        50%;

}


.orbit-one {

    width:
        400px;

    height:
        400px;

    animation:
        rotate 18s linear infinite;

}


.orbit-two {

    width:
        310px;

    height:
        310px;

    border-style:
        dashed;

    animation:
        rotateReverse 13s linear infinite;

}


.orbit-three {

    width:
        225px;

    height:
        225px;

    box-shadow:
        0 0 100px rgba(255,34,149,.16);

}


.hero-core {

    width:
        155px;

    height:
        155px;

    border-radius:
        50%;

    display:
        grid;

    place-content:
        center;

    text-align:
        center;

    background:
        radial-gradient(
            circle,
            #ff62b7,
            #cf167e 28%,
            #180913 68%
        );

    border:
        1px solid #ff7bc5;

    box-shadow:
        0 0 100px rgba(255,34,149,.42);

}


.hero-core span {

    font-size:
        11px;

}


.hero-core strong {

    font-size:
        42px;

    line-height:
        1;

}


.hero-core small {

    font-size:
        6px;

    color:
        #ffd7ec;

    letter-spacing:
        2px;

}


.floating-card {

    position:
        absolute;

    padding:
        13px 18px;

    border-radius:
        14px;

    background:
        rgba(13,7,14,.85);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        var(--shadow);

}


.floating-card strong {

    display:
        block;

    font-size:
        20px;

}


.floating-card span {

    color:
        #666;

    font-size:
        7px;

    letter-spacing:
        1px;

}


.floating-one {

    top:
        80px;

    right:
        8%;

}


.floating-two {

    bottom:
        90px;

    left:
        2%;

}


.floating-three {

    top:
        220px;

    right:
        0;

}


.ticker {

    overflow:
        hidden;

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

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

}


.ticker-track {

    width:
        max-content;

    display:
        flex;

    gap:
        60px;

    padding:
        14px 0;

    color:
        #666;

    font-size:
        9px;

    letter-spacing:
        2px;

    animation:
        ticker 35s linear infinite;

}


.ticker-track span:first-child {

    color:
        var(--pink-bright);

}


.section {

    padding:
        110px 0;

}


.section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        32px;

}


.section-heading label {

    color:
        var(--pink-bright);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.section-heading h2 {

    margin:
        10px 0 7px;

    font-size:
        38px;

}


.section-heading p {

    color:
        #777;

    font-size:
        12px;

    margin:
        0;

}


.forum-layout {

    display:
        grid;

    grid-template-columns:
        1fr 310px;

    gap:
        20px;

}


.forum-list {

    display:
        grid;

    gap:
        10px;

}


.forum-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        23px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            110deg,
            rgba(18,9,18,.88),
            rgba(10,7,11,.82)
        );

    overflow:
        hidden;

    transition:
        .25s;

}


.forum-card:hover {

    transform:
        translateX(-6px);

    border-color:
        var(--border-pink);

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

}


.forum-card.featured {

    border-color:
        rgba(255,34,149,.32);

    background:
        linear-gradient(
            110deg,
            rgba(255,34,149,.09),
            rgba(10,7,11,.88)
        );

}


.forum-icon {

    width:
        50px;

    height:
        50px;

    flex:
        none;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    color:
        var(--pink-bright);

    border:
        1px solid rgba(255,34,149,.25);

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

    font-size:
        20px;

}


.forum-content {

    flex:
        1;

}


.forum-content h3 {

    font-size:
        14px;

    margin:
        0 0 7px;

}


.forum-content p {

    color:
        #777;

    font-size:
        10px;

    margin:
        0 0 10px;

}


.forum-content small {

    color:
        #555;

    font-size:
        8px;

}


.arrow {

    color:
        #555;

    font-size:
        25px;

}


.sidebar {

    display:
        grid;

    gap:
        12px;

    align-content:
        start;

}


.side-panel {

    padding:
        20px;

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

    border-radius:
        var(--radius);

    background:
        rgba(13,8,14,.88);

}


.panel-heading {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        14px;

    font-size:
        11px;

}


.panel-heading span {

    color:
        var(--green);

    font-size:
        8px;

}


.activity {

    padding:
        13px 0;

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

}


.activity:last-child {

    border:
        0;

}


.activity b {

    display:
        block;

    font-size:
        10px;

}


.activity small {

    color:
        #666;

    font-size:
        8px;

}


.statistics {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.statistics .panel-heading {

    grid-column:
        1 / -1;

}


.stat-box {

    padding:
        13px;

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

    border-radius:
        12px;

}


.stat-box strong {

    display:
        block;

    color:
        var(--pink-bright);

}


.stat-box span {

    color:
        #666;

    font-size:
        8px;

}


.dark-section {

    background:
        #0a060b;

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

}


.server-grid {

    display:
        grid;

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

    gap:
        12px;

}


.server-card {

    padding:
        22px;

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

    border-radius:
        var(--radius);

    background:
        #100a11;

    transition:
        .25s;

}


.server-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--border-pink);

}


.server-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.server-header strong {

    font-size:
        13px;

}


.server-online {

    color:
        var(--green);

    font-size:
        8px;

}


.server-online i {

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px var(--green);

}


.server-card > p {

    color:
        #666;

    font-size:
        10px;

}


.server-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-top:
        14px;

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

    color:
        #666;

    font-size:
        9px;

}


.server-footer b {

    color:
        white;

}


.server-footer button {

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

    background:
        var(--pink-soft);

    color:
        var(--pink-bright);

    border-radius:
        8px;

    padding:
        7px 12px;

    font-size:
        8px;

}


.resource-grid {

    display:
        grid;

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

    gap:
        12px;

}


.resource-card {

    padding:
        22px;

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

    border-radius:
        var(--radius);

    background:
        rgba(13,8,14,.8);

    transition:
        .25s;

}


.resource-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--border-pink);

}


.resource-card > span {

    display:
        inline-block;

    color:
        var(--pink-bright);

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

    padding:
        5px 8px;

    border-radius:
        7px;

    font-size:
        8px;

}


.resource-card h3 {

    font-size:
        13px;

    margin:
        18px 0 7px;

}


.resource-card p,
.resource-card footer {

    color:
        #666;

    font-size:
        9px;

}


.resource-card footer {

    margin-top:
        18px;

    padding-top:
        12px;

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

}


.member-grid {

    display:
        grid;

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

    gap:
        12px;

}


.member-card {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        17px;

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

    border-radius:
        17px;

    background:
        rgba(13,8,14,.8);

}


.avatar {

    width:
        40px;

    height:
        40px;

    flex:
        none;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #ff268f,
            #67204d
        );

    font-weight:
        900;

}


.member-info {

    flex:
        1;

}


.member-info strong {

    display:
        block;

    font-size:
        11px;

}


.member-info small {

    color:
        #666;

    font-size:
        8px;

}


.member-card > b {

    color:
        var(--pink-bright);

    font-size:
        10px;

}


.member-card > b small {

    color:
        #666;

    font-size:
        7px;

}


.feature-section {

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255,34,149,.07),
            transparent 50%
        );

}


.feature-grid {

    display:
        grid;

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

    gap:
        12px;

}


.feature-grid article {

    min-height:
        175px;

    padding:
        28px;

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

    border-radius:
        21px;

    background:
        rgba(13,8,14,.72);

    transition:
        .25s;

}


.feature-grid article:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--border-pink);

    box-shadow:
        0 25px 60px rgba(0,0,0,.4);

}


.feature-grid article > b {

    color:
        var(--pink-bright);

    font-size:
        25px;

}


.feature-grid h3 {

    font-size:
        14px;

}


.feature-grid p {

    color:
        #777;

    font-size:
        10px;

    line-height:
        1.9;

}


.cta {

    margin-top:
        40px;

    margin-bottom:
        100px;

    padding:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    border-radius:
        28px;

    background:
        linear-gradient(
            110deg,
            rgba(255,34,149,.10),
            #0d080f
        );

}


.cta h2 {

    font-size:
        34px;

    margin:
        9px 0;

}


.cta p {

    color:
        #777;

    font-size:
        11px;

}


footer {

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

    background:
        #050306;

}


.footer-inner {

    min-height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #555;

    font-size:
        9px;

}


.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        500;

    display:
        none;

    place-items:
        center;

    padding:
        20px;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(18px);

}


.modal.active {

    display:
        grid;

}


.modal-box {

    position:
relative;

width:
    min(92vw, 520px);

padding:
    34px;

background:
    linear-gradient(
        145deg,
        rgba(20, 10, 18, .97),
        rgba(8, 4, 10, .98)
    );

border:
    1px solid
    rgba(255, 34, 149, .28);

border-radius:
    26px;

box-shadow:
    0 30px 90px
    rgba(0, 0, 0, .7),

    0 0 55px
    rgba(255, 34, 149, .12);

backdrop-filter:
    blur(24px);

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

animation:
    modalIn .28s ease both;

}

.modal-box::before {

content:
    "";

position:
    absolute;

inset:
    0;

border-radius:
    inherit;

pointer-events:
    none;

background:
    radial-gradient(
        circle at 15% 0%,
        rgba(255, 34, 149, .12),
        transparent 35%
    );

}

@keyframes modalIn {

from {

    opacity:
        0;

    transform:
        translateY(18px)
        scale(.96);

}

to {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

}

}

.modal-close {

position:
    absolute;

top:
    14px;

left:
    14px;

width:
    38px;

height:
    38px;

display:
    grid;

place-items:
    center;

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

border-radius:
    50%;

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

color:
    var(--muted);

font-size:
    25px;

line-height:
    1;

cursor:
    pointer;

transition:
    .22s ease;

z-index:
    2;

}

.modal-close:hover {

color:
    var(--white);

border-color:
    var(--border-pink);

background:
    rgba(255,34,149,.12);

box-shadow:
    0 0 22px
    rgba(255,34,149,.15);

transform:
    rotate(90deg);

}

.modal-content {

position:
    relative;

z-index:
    1;

}

.modal-title {

margin:
    0 0 10px;

font-size:
    26px;

font-weight:
    900;

color:
    var(--white);

}

.modal-subtitle {

margin:
    0 0 26px;

color:
    var(--muted);

font-size:
    14px;

line-height:
    1.9;

}

.modal-form {

display:
    grid;

gap:
    14px;

}

.form-group {

display:
    grid;

gap:
    8px;

}

.form-group label {

font-size:
    13px;

font-weight:
    700;

color:
    #e8dce5;

}

.form-group input,
.form-group textarea,
.form-group select {

width:
    100%;

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

outline:
    none;

border-radius:
    15px;

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

color:
    var(--white);

padding:
    13px 15px;

font-family:
    inherit;

font-size:
    14px;

transition:
    .2s ease;

}

.form-group textarea {

min-height:
    120px;

resize:
    vertical;

}

.form-group select {

appearance:
    none;

}

.form-group input::placeholder,
.form-group textarea::placeholder {

color:
    #756875;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

border-color:
    rgba(255,34,149,.5);

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

box-shadow:
    0 0 0 4px
    rgba(255,34,149,.07),

    0 0 25px
    rgba(255,34,149,.08);

}

.form-submit {

width:
    100%;

margin-top:
    6px;

min-height:
    48px;

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

border-radius:
    15px;

background:
    linear-gradient(
        135deg,
        var(--pink),
        var(--pink-dark)
    );

color:
    #fff;

font-family:
    inherit;

font-size:
    14px;

font-weight:
    800;

cursor:
    pointer;

box-shadow:
    0 12px 30px
    rgba(255,34,149,.2);

transition:
    .22s ease;

}

.form-submit:hover {

transform:
    translateY(-2px);

box-shadow:
    0 18px 40px
    rgba(255,34,149,.3);

}

.form-submit:active {

transform:
    translateY(0)
    scale(.98);

}

.form-switch {

margin-top:
    18px;

text-align:
    center;

color:
    var(--muted);

font-size:
    13px;

}

.form-switch button {

border:
    0;

background:
    transparent;

color:
    var(--pink-bright);

font-family:
    inherit;

font-weight:
    800;

cursor:
    pointer;

}

.form-switch button:hover {

text-decoration:
    underline;

}

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

.search-box {

display:
    grid;

gap:
    15px;

}

.search-input-wrap {

position:
    relative;

}

.search-input-wrap span {

position:
    absolute;

top:
    50%;

right:
    15px;

transform:
    translateY(-50%);

color:
    var(--pink);

pointer-events:
    none;

}

.search-input {

width:
    100%;

height:
    54px;

padding:
    0 45px 0 16px;

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

border-radius:
    16px;

outline:
    none;

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

color:
    var(--white);

font-family:
    inherit;

font-size:
    15px;

}

.search-input:focus {

border-color:
    rgba(255,34,149,.45);

box-shadow:
    0 0 0 4px
    rgba(255,34,149,.06);

}

.search-results {

display:
    grid;

gap:
    8px;

}

.search-result {

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    15px;

padding:
    13px 15px;

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

border-radius:
    14px;

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

transition:
    .2s ease;

}

.search-result:hover {

border-color:
    rgba(255,34,149,.25);

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

transform:
    translateX(-3px);

}

.search-result strong {

color:
    var(--white);

font-size:
    13px;

}

.search-result span {

color:
    var(--muted);

font-size:
    11px;

}

/* =========================================================
TOAST
========================================================= */

.toast {

position:
    fixed;

right:
    24px;

bottom:
    24px;

z-index:
    9999;

min-width:
    240px;

max-width:
    min(420px, calc(100vw - 48px));

padding:
    14px 18px;

border:
    1px solid
    rgba(255,34,149,.25);

border-radius:
    16px;

background:
    rgba(14, 7, 13, .92);

color:
    var(--white);

box-shadow:
    0 18px 50px
    rgba(0,0,0,.5),

    0 0 30px
    rgba(255,34,149,.1);

backdrop-filter:
    blur(18px);

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

font-size:
    13px;

font-weight:
    600;

opacity:
    0;

visibility:
    hidden;

transform:
    translateY(15px);

transition:
    .25s ease;

}

.toast.show {

opacity:
    1;

visibility:
    visible;

transform:
    translateY(0);

}

/* =========================================================
BUTTON RIPPLE / PRESS EFFECT
========================================================= */

button {

-webkit-tap-highlight-color:
    transparent;

}

button:active {

transform:
    scale(.97);

}

/* =========================================================
SELECTION
========================================================= */

::selection {

background:
    rgba(255,34,149,.28);

color:
    #fff;

}

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

::-webkit-scrollbar {

width:
    9px;

}

::-webkit-scrollbar-track {

background:
    #050205;

}

::-webkit-scrollbar-thumb {

border:
    2px solid
    #050205;

border-radius:
    999px;

background:
    linear-gradient(
        180deg,
        var(--pink),
        var(--pink-dark)
    );

}

::-webkit-scrollbar-thumb:hover {

background:
    var(--pink-bright);

}

/* =========================================================
FOCUS ACCESSIBILITY
========================================================= */

:focus-visible {

outline:
    2px solid
    rgba(255,34,149,.75);

outline-offset:
    3px;

}

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

@media (max-width: 950px) {

.header-inner {

    min-height:
        70px;

}


.main-nav {

    position:
        absolute;

    top:
        calc(100% + 10px);

    right:
        16px;

    left:
        16px;

    display:
        none;

    flex-direction:
        column;

    align-items:
        stretch;

    padding:
        12px;

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

    border-radius:
        20px;

    background:
        rgba(10,5,10,.96);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.55);

    backdrop-filter:
        blur(20px);

}


.main-nav.active {

    display:
        flex;

}


.main-nav a {

    padding:
        13px 15px;

}


.mobile-menu {

    display:
        grid;

}


.hero {

    min-height:
        auto;

    padding-top:
        70px;

}


.hero-grid {

    grid-template-columns:
        1fr;

}


.hero-visual {

    min-height:
        500px;

}


.forum-layout {

    grid-template-columns:
        1fr;

}


.sidebar {

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

}


.server-grid {

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

}


.resource-grid {

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

}


.feature-grid {

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

}

}

@media (max-width: 600px) {

:root {

    --radius:
        17px;

}


.container {

    width:
        min(
            calc(100% - 28px),
            var(--container)
        );

}


.header-actions .search-button {

    display:
        none;

}


.header-actions .pink-button {

    display:
        none;

}


.brand-text strong {

    font-size:
        12px;

}


.brand-text span {

    font-size:
        8px;

    letter-spacing:
        1.5px;

}


.brand-icon {

    width:
        39px;

    height:
        39px;

    font-size:
        18px;

}


.hero {

    padding:
        52px 0 70px;

}


.hero h1 {

    font-size:
        clamp(
            34px,
            11vw,
            56px
        );

    line-height:
        1.2;

}


.hero-description {

    font-size:
        13px;

}


.hero-actions {

    flex-direction:
        column;

    align-items:
        stretch;

}


.hero-actions button {

    width:
        100%;

}


.hero-stats {

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

}


.hero-visual {

    min-height:
        390px;

}


.orbit {

    width:
        250px;

    height:
        250px;

}


.orbit.two {

    width:
        190px;

    height:
        190px;

}


.orbit.three {

    width:
        135px;

    height:
        135px;

}


.core {

    width:
        96px;

    height:
        96px;

}


.floating-card {

    padding:
        10px 12px;

}


.floating-card strong {

    font-size:
        12px;

}


.floating-card span {

    font-size:
        9px;

}


.floating-card.card-one {

    top:
        8%;

    right:
        0;

}


.floating-card.card-two {

    left:
        0;

    bottom:
        13%;

}


.floating-card.card-three {

    right:
        4%;

    bottom:
        0;

}


.ticker-item {

    padding:
        0 20px;

    font-size:
        10px;

}


.section {

    padding:
        75px 0;

}


.section-heading {

    align-items:
        flex-start;

}


.section-heading h2 {

    font-size:
        27px;

}


.forum-card {

    padding:
        18px;

}


.forum-icon {

    width:
        44px;

    height:
        44px;

}


.forum-card h3 {

    font-size:
        14px;

}


.forum-card p {

    font-size:
        11px;

}


.sidebar {

    grid-template-columns:
        1fr;

}


.server-grid,
.resource-grid,
.feature-grid {

    grid-template-columns:
        1fr;

}


.server-card {

    min-height:
        250px;

}


.member-grid {

    grid-template-columns:
        1fr;

}


.member-card {

    padding:
        15px;

}


.cta {

    margin-top:
        20px;

    margin-bottom:
        20px;

    padding:
        28px 20px;

    flex-direction:
        column;

    align-items:
        stretch;

    text-align:
        center;

}


.cta .large {

    width:
        100%;

}


footer {

    margin-top:
        40px;

}


.footer-inner {

    flex-direction:
        column;

    text-align:
        center;

    gap:
        16px;

}


.modal-box {

    padding:
        28px 20px;

    border-radius:
        22px;

}


.modal-title {

    font-size:
        22px;

}


.toast {

    right:
        14px;

    bottom:
        14px;

    max-width:
        calc(100vw - 28px);

    min-width:
        0;

    width:
        calc(100vw - 28px);

}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {

    scroll-behavior:
        auto !important;

    animation-duration:
        .01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        .01ms !important;

}

}

/* =========================================================
END
========================================================= */