@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   TITAN
   GLOBAL STYLE
============================================================ */

:root {
    --bg: var(--theme-background);
    --panel: var(--theme-surface);
    --panel2: var(--theme-surface);

    --text: var(--theme-text);
    --muted: var(--theme-muted);

    --gold: var(--theme-primary);
    --gold2: var(--theme-secondary);

    --line: color-mix(
        in srgb,
        var(--theme-primary) 25%,
        transparent
    );

    --danger: #e35d5d;

    /* TITAN HOME ACCENT
       Angelegt als kompatible Akzentfarben für
       die bestehenden titan-* Komponenten.
    */
    --titan-accent: #8b5cf6;
    --titan-accent-light: #a78bfa;
    --titan-accent-soft: rgba(139,92,246,.10);
    --titan-accent-border: rgba(139,92,246,.18);
    --titan-accent-glow: rgba(139,92,246,.35);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            #39240d 0,
            #0b0907 36%,
            #060505 100%
        );

    color: var(--text);

    font-family:
        Inter,
        Arial,
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    line-height: 1.65;
    color: var(--muted);
}

img {
    max-width: 100%;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


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

.site-header {
    height: 76px;

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

    padding: 0 5vw;

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

    background: rgba(6,5,4,.92);

    backdrop-filter: blur(12px);

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


.brand {
    display: flex;
    gap: 10px;
    align-items: center;
}


.brand-mark {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

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

    color:
        var(--gold2);

    font-weight: 800;
}


.brand strong,
.brand small {
    display: block;

    font-family:
        'Barlow Condensed',
        sans-serif;

    letter-spacing: 2px;
}


.brand strong {
    font-size: 22px;
}


.brand small {
    font-size: 10px;
    color: var(--gold);
}


nav {
    display: flex;

    gap: 22px;

    align-items: center;

    font-size: 13px;
    font-weight: 600;
}


nav a:hover {
    color: var(--gold2);
}


.nav-button {
    border:
        1px solid var(--gold);

    padding:
        9px 14px;
}


/* ============================================================
   HERO – GLOBAL
============================================================ */

.hero {
    min-height: 650px;

    position: relative;

    display: flex;
    align-items: end;

    padding:
        70px 7%;

    overflow: hidden;

    background-image:
        url('../img/clan-hero.jpg');

    background-size: cover;

    background-position:
        center 28%;
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,3,2,.94),
            rgba(4,3,2,.4) 55%,
            rgba(4,3,2,.55)
        ),
        linear-gradient(
            0deg,
            #080706,
            transparent 35%
        );
}


.hero-content {
    position: relative;

    max-width: 720px;
}


.eyebrow {
    color: var(--gold2);

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 800;
}


.hero h1 {
    font:
        800
        clamp(46px,7vw,88px)
        / .9
        'Barlow Condensed',
        sans-serif;

    margin: 14px 0;

    text-transform: uppercase;
}


.hero h1 em {
    color: var(--gold2);

    font-style: normal;
}


.hero p {
    font-size: 17px;

    max-width: 620px;
}


.hero-actions {
    display: flex;

    gap: 12px;

    margin-top: 28px;
}


/* ============================================================
   BUTTONS
============================================================ */

.btn {
    display: inline-block;

    padding:
        13px 20px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 12px;

    cursor: pointer;
}


.btn.gold {
    background:
        var(--gold);

    color:
        #120d05;
}


.btn.gold:hover {
    background:
        var(--gold2);
}


.btn.ghost {
    border:
        1px solid #66502d;
}


.btn.ghost:hover {
    border-color:
        var(--gold);

    color:
        var(--gold2);
}


/* ============================================================
   STANDARD SECTIONS
============================================================ */

.section {
    padding:
        55px 5vw;
}


.section-head {
    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 25px;
}


.section-head h2 {
    font:
        700
        42px
        / 1
        'Barlow Condensed',
        sans-serif;

    margin:
        7px 0;
}


.section-head > a {
    color:
        var(--gold2);

    font-size:
        13px;
}


/* ============================================================
   SERVER / NEWS GLOBAL
============================================================ */

.server-grid,
.news-grid {
    display: grid;

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

    gap: 18px;
}


.server-card,
.news-card,
.panel,
.forum-card {
    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );

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

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


.server-card {
    padding:
        24px;
}


.status-row {
    font-size:
        11px;

    letter-spacing:
        1.5px;

    color:
        #9b9a93;
}


.dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    margin-right: 7px;
}


.online {
    background:
        #72d36b;

    box-shadow:
        0 0 10px #72d36b;
}


.offline {
    background:
        var(--danger);
}


.game {
    float: right;

    color:
        var(--gold2);
}


.server-card h3 {
    font:
        700
        28px
        'Barlow Condensed',
        sans-serif;

    margin:
        20px 0;
}


.server-meta {
    display: flex;

    justify-content: space-between;

    padding:
        10px 0;

    border-top:
        1px solid #2a2116;

    color:
        var(--muted);

    font-size:
        12px;
}


.server-meta strong {
    color:
        var(--text);
}


/* ============================================================
   NEWS
============================================================ */

.news-card img {
    width: 100%;
    height: 170px;

    object-fit: cover;
}


.news-body {
    padding:
        20px;
}


.news-body h3 {
    font:
        700
        28px
        'Barlow Condensed',
        sans-serif;

    margin:
        8px 0;
}


.news-body .date {
    font-size:
        11px;

    color:
        var(--gold);
}


.news-body a {
    color:
        var(--gold2);

    font-size:
        12px;

    font-weight:
        700;
}


/* ============================================================
   FEATURE STRIP
============================================================ */

.feature-strip {
    display: grid;

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

    gap: 1px;

    background:
        var(--line);

    padding: 0;
}


.feature-strip > div {
    background:
        #100d09;

    padding:
        25px;
}


.feature-strip strong,
.feature-strip span {
    display: block;
}


.feature-strip strong {
    font:
        700
        20px
        'Barlow Condensed',
        sans-serif;

    color:
        var(--gold2);
}


.feature-strip span {
    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;
}


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

.site-footer {
    border-top:
        1px solid var(--line);

    margin-top:
        40px;

    padding:
        35px 5vw;

    display: flex;

    justify-content:
        space-between;

    gap:
        25px;

    align-items:
        center;

    background:
        #070605;
}


.site-footer span,
.site-footer small {
    color:
        var(--muted);

    font-size:
        11px;

    margin-left:
        12px;
}


.footer-links {
    display: flex;

    gap:
        16px;

    font-size:
        12px;

    color:
        var(--muted);
}


.footer-links a:hover {
    color:
        var(--gold2);
}


/* ============================================================
   ALERTS
============================================================ */

.alert {
    margin:
        20px 5vw;

    padding:
        13px 16px;

    border:
        1px solid;
}


.alert.success {
    border-color:
        #345b34;

    background:
        #102010;
}


.alert.error {
    border-color:
        #6a2929;

    background:
        #210e0e;
}


/* ============================================================
   TABLE
============================================================ */

.table {
    width:
        100%;

    border-collapse:
        collapse;

    background:
        var(--panel);

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


.table th,
.table td {
    padding:
        13px;

    text-align:
        left;

    border-bottom:
        1px solid #2a2116;

    font-size:
        13px;
}


.table th {
    color:
        var(--gold2);
}


/* ============================================================
   FORMS
============================================================ */

.form {
    max-width:
        720px;
}


.form label {
    display:
        block;

    font-size:
        12px;

    color:
        var(--muted);

    margin:
        14px 0 6px;
}


.form input,
.form textarea,
.form select {
    width:
        100%;

    background:
        #0a0907;

    color:
        var(--text);

    border:
        1px solid #44331c;

    padding:
        12px;

    border-radius:
        0;
}


.form input:focus,
.form textarea:focus,
.form select:focus {
    outline:
        none;

    border-color:
        var(--gold);
}


.form textarea {
    min-height:
        160px;

    resize:
        vertical;
}


.form button {
    margin-top:
        18px;

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

    background:
        var(--gold);

    color:
        #100c06;

    padding:
        12px 18px;

    font-weight:
        800;

    cursor:
        pointer;
}


/* ============================================================
   PANELS
============================================================ */

.panel {
    padding:
        25px;
}


.muted {
    color:
        var(--muted);

    font-size:
        12px;
}


/* ============================================================
   FORUM
============================================================ */

.forum-list {
    display:
        grid;

    gap:
        12px;
}


.forum-card {
    padding:
        20px;

    display:
        flex;

    justify-content:
        space-between;
}


.forum-card h3 {
    margin:
        0 0 5px;

    font:
        700
        25px
        'Barlow Condensed',
        sans-serif;
}


/* ============================================================
   MEMBERS
============================================================ */

.member-grid {
    display:
        grid;

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

    gap:
        16px;
}


.member-card {
    padding:
        22px;

    text-align:
        center;

    background:
        var(--panel);

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


.member-card img {
    width:
        90px;

    height:
        90px;

    border-radius:
        50%;

    object-fit:
        cover;

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


.member-card h3 {
    font:
        700
        25px
        'Barlow Condensed',
        sans-serif;

    margin:
        10px 0 3px;
}


.rank {
    color:
        var(--gold2);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


/* ============================================================
   TITAN HOME
============================================================ */

.titan-home {
    width:
        100%;
}


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

.titan-hero {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        35px;

    border-radius:
        26px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(139,92,246,.24),
            transparent 38%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(139,92,246,.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(17,17,27,.98),
            rgba(8,8,15,.98)
        );

    border:
        1px solid
        rgba(139,92,246,.20);

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


/* ============================================================
   TITAN HERO BACKGROUND
============================================================ */

.titan-hero.has-background {
    background-image:
        linear-gradient(
            90deg,
            rgba(8,8,15,.94) 0%,
            rgba(8,8,15,.78) 42%,
            rgba(8,8,15,.45) 100%
        ),
        var(--titan-hero-image);

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/* ============================================================
   TITAN HERO GLOW
============================================================ */

.titan-hero::before {
    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(139,92,246,.12);

    filter:
        blur(50px);

    pointer-events:
        none;
}


/* ============================================================
   TITAN HERO BOTTOM LINE
============================================================ */

.titan-hero::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139,92,246,.55),
            transparent
        );
}


/* ============================================================
   TITAN HERO CONTENT
============================================================ */

.titan-hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        760px;

    padding:
        70px;
}


.titan-hero-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        18px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(139,92,246,.10);

    border:
        1px solid
        rgba(139,92,246,.20);

    color:
        var(--gold2);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.titan-hero-badge-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--gold);

    box-shadow:
        0 0 12px
        rgba(139,92,246,.8);
}


.titan-hero h1 {
    margin:
        0;

    font-size:
        clamp(42px,6vw,76px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

    font-weight:
        950;
}


.titan-hero h1 em {
    color:
        var(--gold2);

    font-style:
        normal;

    text-shadow:
        0 0 35px
        rgba(139,92,246,.25);
}


.titan-hero-text {
    max-width:
        650px;

    margin:
        24px 0 0;

    font-size:
        15px;

    line-height:
        1.8;

    color:
        rgba(255,255,255,.55);
}


.titan-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;
}


.titan-hero-mini {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    margin-top:
        38px;
}


.titan-hero-mini-item {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255,255,255,.45);

    font-size:
        11px;
}


.titan-hero-mini-item strong {
    color:
        #fff;

    font-size:
        13px;
}


.titan-mini-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--gold);

    box-shadow:
        0 0 12px
        rgba(139,92,246,.7);
}


/* ============================================================
   TITAN WELCOME
============================================================ */

.titan-welcome {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(260px,.7fr);

    gap:
        20px;

    margin-bottom:
        25px;
}


.titan-panel {
    position:
        relative;

    padding:
        26px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.075),
            rgba(255,255,255,.018)
        );

    border:
        1px solid
        rgba(139,92,246,.14);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.12);
}


.titan-panel-title {
    margin-bottom:
        18px;
}


.titan-panel-title span {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        var(--gold);
}


.titan-panel-title h2 {
    margin:
        0;

    font-size:
        20px;
}


/* ============================================================
   TITAN USER
============================================================ */

.titan-user {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.titan-user-avatar {
    width:
        68px;

    height:
        68px;

    flex:
        0 0 68px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.25),
            rgba(139,92,246,.05)
        );

    border:
        1px solid
        rgba(139,92,246,.25);

    font-size:
        26px;

    font-weight:
        900;
}


.titan-user-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.titan-user-name strong {
    display:
        block;

    font-size:
        17px;
}


.titan-user-name span {
    display:
        block;

    margin-top:
        4px;

    font-size:
        11px;

    color:
        rgba(255,255,255,.40);
}


.titan-user-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        20px;
}


/* ============================================================
   TITAN TEAM DASHBOARD
============================================================ */

.titan-team-dashboard {
    margin-top:
        25px;
}


.titan-team-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;

    padding-bottom:
        15px;

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


.titan-team-header-left {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.titan-team-icon {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(139,92,246,.10);

    border:
        1px solid
        rgba(139,92,246,.18);

    font-size:
        18px;
}


.titan-team-header-text span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.titan-team-header-text strong {
    display:
        block;

    font-size:
        16px;
}


.titan-team-header-text small {
    display:
        block;

    margin-top:
        3px;

    font-size:
        10px;

    opacity:
        .38;
}


/* ============================================================
   TITAN TEAM GRID
============================================================ */

.titan-home .titan-team-grid {
    display:
        grid;

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

    gap:
        10px;

    width:
        100%;
}


.titan-home .titan-team-grid .titan-team-card {
    min-width:
        0;

    width:
        100%;
}


.titan-team-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        155px;

    padding:
        16px;

    border-radius:
        15px;

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

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

    color:
        inherit;

    text-decoration:
        none;

    overflow:
        hidden;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.titan-team-card:hover {
    transform:
        translateY(-3px);

    background:
        rgba(139,92,246,.07);

    border-color:
        rgba(139,92,246,.20);
}


.titan-team-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.titan-team-card-icon {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(139,92,246,.10);

    border:
        1px solid
        rgba(139,92,246,.14);

    font-size:
        16px;
}


.titan-team-card-count {
    font-size:
        24px;

    font-weight:
        950;

    color:
        #fff;
}


.titan-team-card h3 {
    margin:
        14px 0 5px;

    font-size:
        13px;
}


.titan-team-card p {
    margin:
        0;

    font-size:
        9px;

    line-height:
        1.55;

    opacity:
        .42;
}


.titan-team-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding-top:
        12px;

    color:
        var(--gold2);

    font-size:
        9px;

    font-weight:
        900;
}


.titan-team-card-footer span:last-child {
    transition:
        transform .2s ease;
}


.titan-team-card:hover
.titan-team-card-footer span:last-child {
    transform:
        translateX(3px);
}


/* ============================================================
   TITAN CLANWAR
============================================================ */

.titan-clanwar-summary {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        12px;

    padding:
        15px 17px;

    border-radius:
        14px;

    background:
        linear-gradient(
            90deg,
            rgba(139,92,246,.08),
            rgba(255,255,255,.02)
        );

    border:
        1px solid
        rgba(139,92,246,.11);

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.titan-clanwar-summary:hover {
    background:
        rgba(139,92,246,.11);

    border-color:
        rgba(139,92,246,.22);
}


.titan-clanwar-summary-left {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.titan-clanwar-summary-icon {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(139,92,246,.10);

    font-size:
        15px;
}


.titan-clanwar-summary-text strong {
    display:
        block;

    font-size:
        12px;
}


.titan-clanwar-summary-text span {
    display:
        block;

    margin-top:
        3px;

    font-size:
        9px;

    opacity:
        .4;
}


.titan-clanwar-summary-count {
    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


.titan-clanwar-summary-count strong {
    font-size:
        24px;

    font-weight:
        950;
}


.titan-clanwar-summary-count span {
    font-size:
        9px;

    opacity:
        .42;
}


/* ============================================================
   TITAN QUICK LINKS
============================================================ */

.titan-quick-links {
    display:
        grid;

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

    gap:
        9px;
}


.titan-quick-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        13px;

    border-radius:
        12px;

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

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

    color:
        inherit;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        .2s ease;
}


.titan-quick-link:hover {
    transform:
        translateY(-2px);

    background:
        rgba(139,92,246,.08);

    border-color:
        rgba(139,92,246,.22);
}


/* ============================================================
   TITAN STATS
============================================================ */

.titan-stats {
    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        38px;
}


.titan-stat {
    position:
        relative;

    padding:
        22px;

    overflow:
        hidden;

    border-radius:
        16px;

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

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


.titan-stat::after {
    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -35px;

    bottom:
        -45px;

    border-radius:
        50%;

    background:
        rgba(139,92,246,.08);

    filter:
        blur(10px);
}


.titan-stat-label {
    display:
        block;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    opacity:
        .4;
}


.titan-stat-value {
    display:
        block;

    margin-top:
        7px;

    font-size:
        27px;

    font-weight:
        950;
}


.titan-stat-value small {
    font-size:
        12px;

    font-weight:
        600;

    opacity:
        .4;
}


.titan-stat-sub {
    display:
        block;

    margin-top:
        4px;

    font-size:
        10px;

    color:
        var(--gold2);
}


/* ============================================================
   TITAN SECTION
============================================================ */

.titan-section {
    margin-bottom:
        45px;
}


.titan-section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.titan-section-head span {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    color:
        var(--gold);

    text-transform:
        uppercase;
}


.titan-section-head h2 {
    margin:
        0;

    font-size:
        24px;
}


.titan-section-head a {
    color:
        var(--gold2);

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;
}


.titan-section-head a:hover {
    text-decoration:
        underline;
}


/* ============================================================
   TITAN SERVERS
============================================================ */

.titan-server-grid {
    display:
        grid;

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

    gap:
        15px;
}


.titan-server {
    padding:
        20px;

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.06),
            rgba(255,255,255,.02)
        );

    border:
        1px solid
        rgba(139,92,246,.12);
}


.titan-server-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        14px;
}


.titan-server-status {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.titan-server-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ef4444;
}


.titan-server-dot.online {
    background:
        #22c55e;

    box-shadow:
        0 0 12px
        rgba(34,197,94,.65);
}


.titan-server-game {
    padding:
        4px 7px;

    border-radius:
        6px;

    background:
        rgba(139,92,246,.08);

    color:
        var(--gold2);

    font-size:
        8px;

    font-weight:
        900;
}


.titan-server h3 {
    margin:
        0 0 16px;

    font-size:
        16px;
}


.titan-server-meta {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        9px 0;

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

    font-size:
        10px;
}


.titan-server-meta span {
    opacity:
        .4;
}


.titan-server-meta strong {
    font-weight:
        800;
}


/* ============================================================
   TITAN NEWS
============================================================ */

.titan-news-grid {
    display:
        grid;

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

    gap:
        15px;
}


.titan-news {
    overflow:
        hidden;

    border-radius:
        17px;

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

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

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.titan-news:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(139,92,246,.22);
}


.titan-news-image {
    height:
        145px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.15),
            rgba(255,255,255,.02)
        );
}


.titan-news-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


.titan-news:hover
.titan-news-image img {
    transform:
        scale(1.04);
}


.titan-news-body {
    padding:
        17px;
}


.titan-news-date {
    font-size:
        9px;

    color:
        var(--gold2);

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.titan-news h3 {
    margin:
        8px 0;

    font-size:
        15px;

    line-height:
        1.3;
}


.titan-news p {
    margin:
        0;

    font-size:
        11px;

    line-height:
        1.6;

    opacity:
        .45;
}


.titan-news-link {
    display:
        inline-block;

    margin-top:
        14px;

    color:
        var(--gold2);

    font-size:
        10px;

    font-weight:
        900;

    text-decoration:
        none;
}


/* ============================================================
   TITAN COMMUNITY
============================================================ */

.titan-community {
    display:
        grid;

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

    gap:
        1px;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        rgba(139,92,246,.14);

    border:
        1px solid
        rgba(139,92,246,.14);
}


.titan-community-item {
    padding:
        22px;

    background:
        rgba(10,10,18,.9);
}


.titan-community-item strong {
    display:
        block;

    font-size:
        11px;

    letter-spacing:
        .05em;
}


.titan-community-item span {
    display:
        block;

    margin-top:
        6px;

    font-size:
        10px;

    line-height:
        1.5;

    opacity:
        .4;
}


/* ============================================================
   TITAN COUNTER SECTION
============================================================ */

.titan-counter-section {
    width:
        100%;

    margin-top:
        22px;

    padding-top:
        38px;

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


.titan-counter-header {
    text-align:
        center;

    margin-bottom:
        25px;
}


.titan-counter-header span {
    display:
        block;

    margin-bottom:
        6px;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .13em;

    color:
        var(--gold);

    text-transform:
        uppercase;
}


.titan-counter-header h2 {
    margin:
        0;

    font-size:
        25px;
}


.titan-counter-header p {
    max-width:
        550px;

    margin:
        9px auto 0;

    font-size:
        11px;

    line-height:
        1.6;

    opacity:
        .4;
}


/* ============================================================
   TITAN COUNTER GRID
============================================================ */

.titan-counter-grid2 {
    display:
        grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:
        12px;
}


.titan-counter {
    position:
        relative;

    padding:
        22px 16px;

    text-align:
        center;

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.08),
            rgba(255,255,255,.02)
        );

    border:
        1px solid
        rgba(139,92,246,.12);

    overflow:
        hidden;
}


.titan-counter-number {
    display:
        block;

    font-size:
        27px;

    font-weight:
        950;

    color:
        #fff;
}


.titan-counter-label {
    display:
        block;

    margin-top:
        5px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    opacity:
        .42;
}


.titan-counter-live {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        8px;

    font-size:
        8px;

    color:
        #22c55e;
}


.titan-counter-live::before {
    content:
        "";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 8px
        rgba(34,197,94,.7);
}


/* ============================================================
   TITAN VISITOR COUNTER
============================================================ */

.titan-counter-grid {
    display:
        grid;

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

    gap:
        13px;
}


.titan-counter-card {
    overflow:
        hidden;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.075),
            rgba(255,255,255,.018)
        );

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


.titan-counter-card-header {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        15px 16px;

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


.titan-counter-icon {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 36px;

    border-radius:
        10px;

    background:
        rgba(139,92,246,.09);

    border:
        1px solid
        rgba(139,92,246,.13);

    font-size:
        15px;
}


.titan-counter-card-header strong {
    display:
        block;

    font-size:
        12px;

    font-weight:
        900;
}


.titan-counter-card-header span {
    display:
        block;

    margin-top:
        3px;

    font-size:
        8px;

    opacity:
        .35;
}


.titan-counter-list {
    padding:
        5px 0;
}


.titan-counter-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    min-height:
        39px;

    padding:
        0 16px;

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


.titan-counter-row:last-child {
    border-bottom:
        0;
}


.titan-counter-row span {
    font-size:
        9px;

    opacity:
        .43;
}


.titan-counter-row strong {
    font-size:
        10px;

    font-weight:
        900;
}


.titan-counter-row-online strong {
    color:
        #86efac;
}


/* ============================================================
   TITAN EMPTY
============================================================ */

.titan-empty {
    padding:
        28px;

    text-align:
        center;

    border-radius:
        16px;

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

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

    font-size:
        12px;

    opacity:
        .45;
}


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


/* ------------------------------------------------------------
   <= 1050px
------------------------------------------------------------ */

@media (max-width: 1050px) {

    .titan-news-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .titan-counter-grid2 {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .titan-team-grid,
    .titan-home .titan-team-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ------------------------------------------------------------
   <= 1000px
------------------------------------------------------------ */

@media (max-width: 1000px) {

    .titan-counter-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ------------------------------------------------------------
   <= 900px
------------------------------------------------------------ */

@media (max-width: 900px) {

    nav {
        gap:
            10px;
    }

    nav a:nth-child(n+4) {
        display:
            none;
    }

    .server-grid,
    .news-grid,
    .member-grid,
    .feature-strip {
        grid-template-columns:
            1fr 1fr;
    }

    .hero {
        min-height:
            580px;
    }

    .site-footer {
        flex-wrap:
            wrap;
    }

}


/* ------------------------------------------------------------
   <= 850px
------------------------------------------------------------ */

@media (max-width: 850px) {

    .titan-hero-content {
        padding:
            45px 35px;
    }

    .titan-welcome {
        grid-template-columns:
            1fr;
    }

    .titan-server-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .titan-community {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .titan-stats {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ------------------------------------------------------------
   <= 650px
------------------------------------------------------------ */

@media (max-width: 650px) {

    .titan-counter-grid {
        grid-template-columns:
            1fr;
    }

}


/* ------------------------------------------------------------
   <= 600px
------------------------------------------------------------ */

@media (max-width: 600px) {

    .site-header {
        padding:
            0 18px;
    }

    .brand strong {
        font-size:
            18px;
    }

    .hero {
        padding:
            45px 22px;
    }

    .section {
        padding:
            40px 20px;
    }

    .server-grid,
    .news-grid,
    .member-grid,
    .feature-strip {
        grid-template-columns:
            1fr;
    }

    .footer-links {
        flex-wrap:
            wrap;
    }


    /* TITAN HOME */

    .titan-hero {
        min-height:
            450px;

        border-radius:
            20px;
    }

    .titan-hero-content {
        padding:
            35px 22px;
    }

    .titan-hero h1 {
        font-size:
            42px;
    }

    .titan-hero-text {
        font-size:
            13px;
    }

    .titan-server-grid,
    .titan-news-grid {
        grid-template-columns:
            1fr;
    }

    .titan-counter-grid2 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .titan-section-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .titan-team-grid,
    .titan-home .titan-team-grid {
        grid-template-columns:
            1fr;
    }

    .titan-team-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .titan-clanwar-summary {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* ------------------------------------------------------------
   <= 420px
------------------------------------------------------------ */

@media (max-width: 420px) {

    .titan-stats {
        grid-template-columns:
            1fr;
    }

    .titan-community {
        grid-template-columns:
            1fr;
    }

    .titan-counter-grid {
        grid-template-columns:
            1fr;
    }

    .titan-counter-grid2 {
        grid-template-columns:
            1fr;
    }

    .titan-quick-links {
        grid-template-columns:
            1fr;
    }

}