:root {
    --bg: #07090b;
    --bg-soft: #0d1115;
    --panel: #11161a;
    --panel-2: #171d21;
    --line: rgba(205, 159, 70, .28);
    --gold: #c99b45;
    --gold-bright: #f0cb79;
    --gold-pale: #f6e2ac;
    --text: #e7dfd0;
    --muted: #a79f91;
    --red: #7d2927;
    --red-dark: #3e1718;
    --shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background: var(--bg);
    font-family: "Mali", Tahoma, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    min-height: 78px;
    padding: 10px clamp(18px, 5vw, 76px);
    display: flex;
    align-items: center;
    gap: 34px;
    background: linear-gradient(180deg, rgba(5, 7, 9, .96), rgba(5, 7, 9, .78));
    border-bottom: 1px solid rgba(204, 158, 66, .35);
    backdrop-filter: blur(13px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .24);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    text-decoration: none;
}
.brand-mark {
    width: 51px;
    height: 51px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}
.brand-copy strong {
    display: block;
    color: #f0d291;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.35px;
}
.brand-copy small {
    display: block;
    margin-top: 5px;
    color: #a8874b;
    font-family: "Cinzel", serif;
    font-size: 9px;
    letter-spacing: 3px;
}

.main-nav {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
.main-nav a,
.footer-links a,
.text-link {
    text-decoration: none;
}
.main-nav a {
    position: relative;
    padding: 10px 0;
    color: #c9c0b1;
    font-size: 13px;
    font-weight: 600;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 2px;
    height: 1px;
    background: var(--gold-bright);
    transition: .2s ease;
}
.main-nav a:hover { color: var(--gold-bright); }
.main-nav a:hover::after { left: 0; right: 0; }

.header-actions { display: flex; gap: 9px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(220, 174, 83, .72);
    border-radius: 3px;
    color: #f5e8c6;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .1px;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.button-small { min-height: 40px; padding: 9px 15px; }
.button-large { min-height: 52px; padding: 13px 24px; }
.button-ghost { background: rgba(255, 255, 255, .025); border-color: rgba(207, 162, 72, .42); }
.button-dark { background: rgba(10, 12, 14, .78); border-color: rgba(224, 186, 104, .34); }
.button-gold {
    color: #1a1308;
    background: linear-gradient(180deg, #f0cd79 0%, #be8d35 100%);
    border-color: #f2d58f;
    box-shadow: inset 0 1px rgba(255,255,255,.52), 0 4px 20px rgba(181,126,36,.16);
    text-shadow: 0 1px rgba(255,255,255,.22);
}
.button-discord { background: linear-gradient(180deg, #5f6caa, #3f4a7d); border-color: #8f9bd4; }

.hero {
    position: relative;
    min-height: 920px;
    padding: 150px clamp(22px, 7vw, 120px) 150px;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: #111 url("img/longdo-travianz-war-bg.png") center center / cover no-repeat;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 16% 45%, rgba(159, 57, 35, .09), transparent 24%),
        linear-gradient(90deg, rgba(4,6,8,.90) 0%, rgba(4,6,8,.73) 30%, rgba(5,7,9,.40) 55%, rgba(5,7,9,.22) 100%),
        linear-gradient(0deg, #07090b 0%, rgba(7,9,11,.08) 31%, rgba(7,9,11,.24) 100%);
}
.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: inset 0 0 180px rgba(0,0,0,.55);
}
.hero-content {
    width: min(720px, 100%);
    margin-top: -10px;
    text-shadow: 0 3px 13px rgba(0,0,0,.92);
}
.eyebrow {
    margin: 0 0 13px;
    color: #d5a34b;
    font-family: "Cinzel", serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3.7px;
}
.hero-title-wrap { display: flex; align-items: flex-end; gap: 19px; flex-wrap: wrap; }
h1, h2, h3 { margin-top: 0; }
h1 {
    margin-bottom: 0;
    font-family: "Cinzel", serif;
    color: #f3ead6;
    font-size: clamp(48px, 6.25vw, 92px);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
}
h1 span { color: var(--gold-bright); }
.version {
    margin-bottom: 7px;
    color: #c79845;
    font-family: "Cinzel", serif;
    font-size: clamp(27px, 3.2vw, 49px);
    line-height: .9;
    letter-spacing: -1px;
}
.hero-kicker {
    margin: 17px 0 0;
    color: #d9c18e;
    font-family: "Cinzel", serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
}
.hero-lead {
    max-width: 650px;
    margin: 24px 0 31px;
    color: #d3ccbf;
    font-size: clamp(16px, 1.45vw, 19px);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }

.hero-bottom {
    position: absolute;
    left: clamp(18px, 5vw, 76px);
    right: clamp(18px, 5vw, 76px);
    bottom: 34px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(221, 178, 90, .42);
    border-bottom: 1px solid rgba(221, 178, 90, .17);
    background: rgba(8, 10, 12, .55);
    backdrop-filter: blur(9px);
}
.hero-bottom > div {
    min-height: 72px;
    padding: 15px 20px;
    border-right: 1px solid rgba(221, 178, 90, .16);
}
.hero-bottom > div:last-child { border-right: 0; }
.hero-bottom span,
.hero-bottom strong { display: block; }
.hero-bottom span {
    margin-bottom: 4px;
    color: #8d806c;
    font-family: "Cinzel", serif;
    font-size: 9px;
    letter-spacing: 2px;
}
.hero-bottom strong { color: #e9ddc6; font-size: 13px; }

.intro-section {
    max-width: 1340px;
    margin: 0 auto;
    padding: 120px clamp(22px, 6vw, 90px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: start;
}
.section-copy h2,
.section-heading h2,
.community-copy h2,
.final-cta h2 {
    margin-bottom: 18px;
    color: #efe6d6;
    font-size: clamp(31px, 4vw, 52px);
    line-height: 1.38;
    letter-spacing: 0;
}
.section-copy h2 span { color: #cba457; }
.section-copy > p:last-child,
.section-heading > p:last-child,
.community-copy > p:last-child,
.final-cta p { color: var(--muted); }

.war-features { display: grid; gap: 0; border-top: 1px solid var(--line); }
.war-features article {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
}
.feature-number {
    color: #725a31;
    font-family: "Cinzel", serif;
    font-size: 28px;
    font-weight: 700;
}
.war-features strong { display: block; margin-bottom: 7px; color: #eee2cb; font-size: 19px; line-height: 1.45; }
.war-features p { margin: 0; color: #9e978c; font-size: 14px; line-height: 1.8; }

.tribe-section {
    position: relative;
    padding: 120px clamp(22px, 6vw, 90px) 135px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(13,17,21,.98), rgba(7,9,11,.99)),
        url("img/longdo-travianz-hero-bg.png") center / cover no-repeat;
    border-top: 1px solid rgba(204,158,66,.16);
    border-bottom: 1px solid rgba(204,158,66,.16);
}
.tribe-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background: radial-gradient(circle at center, rgba(207,164,83,.17), transparent 43%);
    pointer-events: none;
}
.section-heading { position: relative; max-width: 760px; margin: 0 auto 50px; text-align: center; }
.section-heading.align-left { margin-left: 0; text-align: left; }
.tribe-grid {
    position: relative;
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.tribe-card {
    grid-column: span 2;
    position: relative;
    min-height: 390px;
    padding: 35px;
    overflow: hidden;
    border: 1px solid rgba(204,158,66,.30);
    background: linear-gradient(145deg, rgba(29,36,40,.96), rgba(10,13,16,.98));
    box-shadow: 0 20px 60px rgba(0,0,0,.24);
    transition: transform .22s ease, border-color .22s ease;
}
.tribe-card:hover { transform: translateY(-6px); border-color: rgba(239,197,111,.62); }
.tribe-card::after {
    content: "";
    position: absolute;
    inset: auto -80px -100px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(45px);
    opacity: .18;
    background: var(--gold);
}
.roman::after { background: #b66537; }
.gaul::after { background: #5f7c58; }
.teuton::after { background: #86413a; }
.egyptian::after { background: #b58d42; }
.hun::after { background: #416f72; }
.tribe-card:nth-child(4) { grid-column: 2 / span 2; }
.tribe-card:nth-child(5) { grid-column: 4 / span 2; }
.tribe-symbol {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: 57px;
    border: 1px solid rgba(233,195,118,.58);
    color: var(--gold-bright);
    font-family: "Cinzel", serif;
    font-size: 30px;
    font-weight: 800;
    transform: rotate(45deg);
}
.tribe-symbol::first-letter { transform: rotate(-45deg); }
.tribe-symbol { line-height: 1; }
.tribe-label,
.tribe-role {
    color: #a88a55;
    font-family: "Cinzel", serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.2px;
}
.tribe-card h3 { margin: 7px 0 11px; color: #f1e8d6; font-family: "Cinzel", serif; font-size: 33px; line-height: 1.2; }
.tribe-card > p:not(.tribe-label) { color: #a9a196; line-height: 1.85; }
.tribe-role { position: absolute; left: 35px; bottom: 28px; }

.news-section {
    max-width: 1340px;
    margin: auto;
    padding: 125px clamp(22px, 6vw, 90px);
}
.news-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 13px; }
.news-card {
    position: relative;
    min-height: 285px;
    padding: 33px;
    border: 1px solid rgba(201,155,69,.27);
    background: linear-gradient(145deg, #151b1f, #0b0f12);
}
.news-main { background: linear-gradient(145deg, rgba(83,29,29,.96), rgba(28,16,18,.99)); }
.card-line { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(#e6b75f, #7d2927); }
.news-tag { display: inline-block; margin-bottom: 28px; color: #c79a47; font-family: "Cinzel", serif; font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.news-card h3 { margin-bottom: 10px; color: #eee4d1; font-size: 25px; line-height: 1.45; }
.news-card p { margin-bottom: 24px; color: #a69f93; font-size: 14px; line-height: 1.8; }
.news-card a { color: #e0b85f; font-weight: 700; text-decoration: none; }

.community-section {
    max-width: 1280px;
    margin: 10px auto 120px;
    padding: 58px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    border: 1px solid rgba(198,153,65,.34);
    background:
        linear-gradient(90deg, rgba(28,21,19,.98), rgba(12,15,18,.97)),
        radial-gradient(circle at right, rgba(128,46,40,.2), transparent 45%);
    box-shadow: var(--shadow);
}
.community-copy { max-width: 700px; }
.community-copy h2 { margin-bottom: 12px; font-size: clamp(30px, 3.3vw, 46px); }
.community-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.text-link { color: #d9ba77; font-size: 13px; font-weight: 700; }

.final-cta {
    min-height: 330px;
    padding: 75px clamp(22px, 8vw, 135px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    background:
        linear-gradient(90deg, rgba(5,7,9,.97), rgba(5,7,9,.65)),
        url("img/longdo-travianz-war-bg.png") center 58% / cover no-repeat;
    border-top: 1px solid rgba(204,158,66,.28);
}
.final-cta > div { max-width: 700px; }
.final-cta h2 { margin-bottom: 10px; }
.final-cta p { margin: 0; }

.site-footer {
    min-height: 105px;
    padding: 22px clamp(18px, 5vw, 76px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
    color: #81786b;
    background: #040506;
    border-top: 1px solid rgba(204,158,66,.18);
    font-size: 11px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.footer-brand img { width: 39px; height: 39px; object-fit: contain; }
.footer-brand strong { display: block; color: #bca779; }
.footer-brand small { display: block; color: #665b4b; font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 2px; }
.footer-links { justify-self: end; display: flex; gap: 18px; }
.footer-links a:hover { color: #d6b363; }

@media (max-width: 1080px) {
    .main-nav { display: none; }
    .header-actions { margin-left: auto; }
    .hero { min-height: 820px; }
    .hero-bottom { grid-template-columns: repeat(2, 1fr); }
    .hero-bottom > div:nth-child(2) { border-right: 0; }
    .hero-bottom > div:nth-child(-n+2) { border-bottom: 1px solid rgba(221,178,90,.14); }
    .intro-section { grid-template-columns: 1fr; }
    .tribe-grid { grid-template-columns: 1fr; }
    .tribe-card,
    .tribe-card:nth-child(4),
    .tribe-card:nth-child(5) { grid-column: auto; min-height: 310px; }
    .tribe-symbol { margin-bottom: 35px; }
    .news-grid { grid-template-columns: 1fr; }
    .news-card { min-height: auto; }
    .community-section { margin-inline: 24px; }
}

@media (max-width: 760px) {
    .site-header { min-height: 70px; padding-inline: 15px; }
    .brand-mark { width: 45px; height: 45px; }
    .brand-copy strong { font-size: 15px; }
    .button-ghost { display: none; }
    .hero { min-height: 780px; padding: 120px 22px 210px; background-position: 60% center; }
    .hero::before {
        background:
            linear-gradient(90deg, rgba(4,6,8,.87), rgba(4,6,8,.58)),
            linear-gradient(0deg, #07090b 0%, rgba(7,9,11,.22) 40%, rgba(7,9,11,.36) 100%);
    }
    h1 { letter-spacing: -2.4px; }
    .version { margin-bottom: 2px; }
    .hero-kicker { letter-spacing: 3px; }
    .hero-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
    .hero-bottom { left: 15px; right: 15px; bottom: 18px; grid-template-columns: 1fr 1fr; }
    .hero-bottom > div { min-height: 64px; padding: 12px; }
    .hero-bottom strong { font-size: 11px; }
    .intro-section,
    .tribe-section,
    .news-section { padding-top: 88px; padding-bottom: 88px; }
    .war-features article { grid-template-columns: 52px 1fr; gap: 12px; }
    .tribe-card { padding: 28px; }
    .tribe-role { left: 28px; }
    .community-section { margin: 0 16px 82px; padding: 38px 26px; flex-direction: column; align-items: stretch; }
    .community-actions { width: 100%; }
    .final-cta { padding-block: 58px; flex-direction: column; align-items: flex-start; }
    .site-footer { grid-template-columns: 1fr; justify-items: start; }
    .footer-links { justify-self: start; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .header-actions .button-small { font-size: 12px; padding-inline: 12px; }
    .hero { min-height: 740px; padding-top: 112px; }
    .eyebrow { letter-spacing: 2.3px; }
    .hero-title-wrap { gap: 11px; }
    h1 { font-size: 45px; }
    .version { font-size: 27px; }
    .hero-lead { font-size: 15px; }
    .hero-bottom { grid-template-columns: 1fr; position: absolute; }
    .hero-bottom > div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-right: 0; border-bottom: 1px solid rgba(221,178,90,.12); }
    .hero-bottom > div:last-child { border-bottom: 0; }
    .hero-bottom span { margin: 0; }
    .tribe-card { min-height: 335px; }
    .site-footer { padding-block: 30px; }
}