@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#070e19;--panel:#0d1b2c;--panel2:#12283d;--blue:#4c9bc9;--gold:#d8b56b;--text:#e7eaf0;--muted:#9aa9b9;--border:#3a4b5d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.65}a{color:var(--gold);text-decoration:none}a:hover{color:#ffe1a2}h1,h2,h3,.brand,.sigil{font-family:Cinzel,Georgia,serif}h1,h2,h3{line-height:1.18}h2{font-size:clamp(2.1rem,5vw,4rem);margin:.2em 0}h2 em,h1 em{font-style:normal;color:var(--gold)}h3{font-size:1.3rem;color:#f1d49a}.muted{color:var(--muted)}.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 5%,#142b43 0%,#070e19 62%)}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.2;animation:float 15s ease-in-out infinite}.orb1{width:600px;height:600px;background:#155b9d;top:10%;left:-15%}.orb2{width:450px;height:450px;background:#a27930;bottom:10%;right:-12%;animation-delay:-7s}.particles i{position:absolute;width:2px;height:2px;background:#e5c487;box-shadow:0 0 8px #d8b56b;border-radius:50%;animation:rise var(--dur) linear infinite;left:var(--left);top:100%;opacity:.65}@keyframes rise{to{transform:translateY(-110vh) translateX(30px);opacity:0}}@keyframes float{50%{transform:translate(60px,-50px)}}.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:12px clamp(18px,4vw,70px);background:#07101de8;backdrop-filter:blur(16px);border-bottom:1px solid #d8b56b30}.brand{display:flex;align-items:center;gap:12px;color:white;font-weight:700;letter-spacing:.08em;white-space:nowrap}.brand b{color:var(--gold)}.brand small{display:block;font:500 9px Inter;letter-spacing:.18em;color:var(--muted)}.sigil{display:grid;place-items:center;border:2px solid var(--gold);width:50px;height:50px;transform:rotate(45deg);color:var(--gold);font-weight:900;box-shadow:0 0 22px #d8b56b44,inset 0 0 16px #d8b56b22;font-size:19px;flex-shrink:0}.sigil::first-letter{color:#e9e0c3}.nav nav{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.nav nav a{font-size:12px;font-weight:700;letter-spacing:.04em;color:#d6dfeb}.nav nav a:hover{color:var(--gold)}button,input,select,textarea{font:inherit}button{cursor:pointer}.goldbtn,.outlinebtn{border:1px solid var(--gold);border-radius:4px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:.2s}.goldbtn{background:linear-gradient(120deg,#e4c783,#b48c49);color:#101722;box-shadow:0 0 28px #d8b56b2a}.goldbtn:hover{transform:translateY(-2px);filter:brightness(1.1);color:#101722}.outlinebtn{background:#0d2031a0;color:var(--gold)}.outlinebtn:hover{background:#213a4e}.mobileMenu{display:none}.hero{min-height:calc(100svh - 76px);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:100px 20px 80px;background:linear-gradient(180deg,#08132177,#07101c99),radial-gradient(ellipse at center,#1b456588,transparent 65%)}.hero:before{content:'';position:absolute;inset:0;opacity:.28;background:repeating-linear-gradient(110deg,transparent 0 110px,#d8b56b10 112px,transparent 114px)}.heroFog{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 85%,#4d779a44,transparent 40%),radial-gradient(ellipse at 75% 85%,#886d3e2b,transparent 45%);animation:float 20s ease-in-out infinite}.heroContent{position:relative;max-width:850px;z-index:1}.eyebrow{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.3em}.crest{margin:30px auto 35px;width:135px;height:135px;border:3px double var(--gold);border-radius:24px;display:grid;place-items:center;font:900 65px Cinzel;color:#f3dca8;box-shadow:0 0 60px #4c9bc95c,inset 0 0 40px #d8b56b2d;transform:rotate(-5deg);text-shadow:0 0 18px #d8b56b77}.hero h1{font-size:clamp(3.6rem,11vw,8.5rem);letter-spacing:.06em;margin:0;text-shadow:0 4px 25px #000}.heroSubtitle{font-family:Cinzel;font-size:clamp(1rem,2.5vw,1.5rem);color:#d8dfe8;letter-spacing:.05em}.lead{max-width:650px;margin:25px auto;color:#c2ccd8}.actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:30px auto}.heroStats{display:flex;justify-content:center;gap:30px;margin-top:70px;color:var(--gold);font-family:Cinzel;font-weight:700}.heroStats span{display:flex;flex-direction:column;font-size:18px}.heroStats strong{font:600 10px Inter;letter-spacing:.2em;color:#a7b5c6}.scrollhint{position:absolute;bottom:20px;font-size:10px;letter-spacing:.2em;color:#a7b5c6}.section{max-width:1160px;margin:auto;padding:105px 22px;scroll-margin-top:80px}.sectionHeading{text-align:center;max-width:760px;margin:0 auto 50px}.sectionHeading>p:last-child{color:#b2c1d0}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tile,.panel,.post{background:linear-gradient(145deg,#112438df,#0b1726f5);border:1px solid #d8b56b2d;border-radius:10px;padding:27px;box-shadow:0 14px 35px #0002}.tile{transition:.25s}.tile:hover{transform:translateY(-5px);border-color:#d8b56b77}.tileIcon{font-size:34px;color:var(--gold)}.tile p,.panel p{color:#b9c6d3}.infoGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.rules{margin-top:20px}.toolbar,.formrow{display:flex;gap:12px;flex-wrap:wrap}.toolbar input,.formrow input,.formrow select{flex:1;min-width:180px}input,select,textarea{background:#06111f;color:white;border:1px solid #40556a;border-radius:5px;padding:13px;min-width:0}textarea{width:100%;min-height:100px;resize:vertical;margin:10px 0}form>input{width:100%;margin:10px 0}input:focus,textarea:focus,select:focus{outline:2px solid #b99554}button:disabled{opacity:.55}.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:20px 0}.roster>div{border:1px solid #3a4b5d;padding:12px;border-radius:6px}.roster small{display:block;color:var(--muted)}.postList{display:grid;gap:15px;margin-top:20px}.post{padding:20px}.post h3{margin:5px 0}.post .meta{font-size:12px;color:#aebfce}.post .tag{color:#d8b56b;text-transform:uppercase;letter-spacing:.1em;font-size:11px}.post p{white-space:pre-wrap;overflow-wrap:anywhere}.post button{margin-right:8px}.chatTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.chatTabs button{background:#152e43;color:#b9c9d8;border:1px solid #39536b;border-radius:5px;padding:9px 12px}.chatTabs button.active{background:#b99653;color:#111a25}.chatMessages{height:340px;overflow-y:auto;background:#060f1c;border:1px solid #30465c;border-radius:7px;padding:15px}.chatMessage{padding:7px 0;border-bottom:1px solid #243a4b;overflow-wrap:anywhere}.chatMessage b{color:#e5c78b}.chatMessage time{color:#8b9eb0;font-size:11px;margin-left:8px}.chatComposer{display:flex;gap:10px;margin-top:12px}.chatComposer input{flex:1}.center{text-align:center;margin-top:30px}footer{border-top:1px solid #d8b56b44;padding:55px 20px;text-align:center;background:#050c16}footer .sigil{margin:0 auto 30px}#toast{position:fixed;right:20px;bottom:20px;background:#172c40;border:1px solid var(--gold);color:white;border-radius:6px;padding:12px 18px;max-width:360px;display:none;z-index:99}.memberOnly{display:none}@media(max-width:950px){.nav{flex-wrap:wrap}.mobileMenu{display:block;background:none;border:1px solid #6d8295;color:white;padding:7px 12px}.nav nav{display:none;order:5;width:100%;flex-direction:column}.nav nav.open{display:flex}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.tiles,.infoGrid{grid-template-columns:1fr}.heroStats{gap:18px}.nav .goldbtn{padding:9px}.brand{font-size:12px}.brand small{font-size:7px}.section{padding:70px 18px}.hero{min-height:740px}.crest{width:110px;height:110px}.chatComposer{flex-wrap:wrap}.chatComposer button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Doe Relax guild crest identity: antique gold, midnight blue and sapphire */
:root{--bg:#080a11;--panel:#101725;--panel2:#14243a;--blue:#2378bb;--gold:#e0aa4b;--text:#f2e7d4;--muted:#a8b3c5;--border:#6b502b}
.nav{background:#090b13f0;border-bottom-color:#b9823d66}
.ambient{background:radial-gradient(ellipse at 50% 12%,#123456 0%,#080a11 67%)}
.hero{background:radial-gradient(ellipse at 50% 35%,#173c69aa 0%,#0b1425 43%,#070910 85%)}
.hero:before{opacity:.2;background:repeating-linear-gradient(120deg,transparent 0 125px,#e6b85a17 127px,transparent 130px)}
.brandLogo{width:60px;height:60px;object-fit:contain;border-radius:12px;filter:drop-shadow(0 0 12px #d79c3d55)}
.heroLogo{display:block;width:min(70vw,520px);height:auto;margin:0 auto 22px;object-fit:contain;filter:drop-shadow(0 16px 40px #000a) drop-shadow(0 0 32px #c38b3655)}
.footerLogo{display:block;width:130px;height:auto;margin:0 auto 24px;filter:drop-shadow(0 0 18px #c38b3655)}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.goldbtn{background:linear-gradient(125deg,#f4d083,#b97523 58%,#e0ae54);color:#0b0d12;border-color:#e5b55f}
.tile,.panel,.post{background:linear-gradient(150deg,#16263ce8,#0a101cf5);border-color:#b9873e50}
@media(max-width:600px){.brandLogo{width:46px;height:46px}.heroLogo{width:min(90vw,390px)}.hero{min-height:680px;padding-top:65px}}

/* Horde identity | Doe Relax */
:root{--bg:#0c0809;--panel:#1a1013;--panel2:#30141a;--blue:#a52826;--gold:#e5aa49;--text:#f6e9d6;--muted:#c3aaa6;--border:#744032}
body{background:#0c0809}
.ambient{background:radial-gradient(ellipse at 50% 0%,#55121b 0%,#1d0b10 40%,#090708 82%)}
.orb1{background:#a5201e;opacity:.28}.orb2{background:#d66b22;opacity:.22}
.nav{background:#160a0dec;border-bottom:1px solid #b95e3266}
.nav nav a{color:#e6d1c5}.nav nav a:hover{color:#ffbe66}
.hero{background:linear-gradient(180deg,#170a0ba8,#10080cdd),radial-gradient(ellipse at center,#8b221d99,transparent 68%)}
.heroFog{background:radial-gradient(ellipse at 18% 80%,#a52c2545,transparent 43%),radial-gradient(ellipse at 80% 80%,#f07b2d30,transparent 45%)}
.hero:before{background:repeating-linear-gradient(115deg,transparent 0 120px,#d06b2d18 122px,transparent 124px)}
.brandLogo,.heroLogo,.footerLogo{filter:drop-shadow(0 14px 28px #000b) drop-shadow(0 0 20px #c7442c66)}
.heroLogo{width:min(78vw,570px)}
.eyebrow,h2 em,h1 em,.tileIcon{color:#f2b45b}
.goldbtn{background:linear-gradient(130deg,#f4c66a,#c76529 54%,#8b231e);border-color:#f2b05c;color:#170b0c;box-shadow:0 0 26px #b53d2945}
.outlinebtn{background:#270e12ba;color:#f5b75e;border-color:#b76537}.outlinebtn:hover{background:#4c1a1b}
.tile,.panel,.post{background:linear-gradient(145deg,#32161bdc,#140c10f5);border:1px solid #b56b3d5e;box-shadow:0 15px 40px #0005}
.tile:hover{border-color:#e7a65e}.tile h3,.panel h3{color:#f0bd78}
input,select,textarea{background:#170c10;border-color:#70413c}
.chatTabs button{background:#35181b;border-color:#714039}.chatTabs button.active{background:#b55b2c;color:#fff}
.chatMessages{background:#13090d;border-color:#693732}
footer{background:#0a0709;border-top-color:#a95b3566}
@media(max-width:600px){.heroLogo{width:min(94vw,440px)}}


/* Horde fortress landing page: visual reference 2026-11-09 */
:root{--bg:#0b0608;--gold:#efba67;--text:#f7ece3;--muted:#cfb9b1}
.nav{min-height:82px;gap:16px;padding:9px clamp(15px,3vw,54px);background:linear-gradient(180deg,#120a0feF,#0c070bec);box-shadow:0 5px 25px #0009;border-bottom:2px solid #8d2927}
.nav .brandLogo{width:76px;height:66px;object-fit:contain;border-radius:0}
.nav .brand span{font-size:13px;line-height:1.2}
.nav nav{gap:clamp(9px,1.8vw,29px);align-items:center}
.nav nav a{font-size:13px;font-weight:600;position:relative;white-space:nowrap;padding:13px 0}
.nav nav a:first-child:after,.nav nav a:hover:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#f0342c;box-shadow:0 0 12px #e92925}
.hero{min-height:780px;padding:65px 22px 42px;isolation:isolate;background:linear-gradient(180deg,#150b19c0 0%,#34141a44 27%,#13070ad9 85%),radial-gradient(ellipse at 50% 25%,#9e403f 0%,#322037 39%,#12080d 78%)}
.hero:before{opacity:.35;background:linear-gradient(90deg,#0503079c,transparent 24%,transparent 76%,#0503079c),repeating-linear-gradient(113deg,transparent 0 150px,#ff7b4010 153px,transparent 156px)}
.heroFog{background:radial-gradient(ellipse at 22% 77%,#ef4c254d,transparent 44%),radial-gradient(ellipse at 76% 76%,#dc362b47,transparent 45%);animation:float 20s ease-in-out infinite}
.heroContent{width:min(1320px,100%);max-width:1320px}
.hero .eyebrow{letter-spacing:.32em;color:#f3c584;text-shadow:0 2px 10px #000}
.heroLogo{width:min(53vw,455px);max-height:470px;object-fit:contain;margin:2px auto 0;filter:drop-shadow(0 12px 30px #000) drop-shadow(0 0 25px #de4b22a3)}
.heroSubtitle{margin:0;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;color:#f05a3b;text-shadow:0 3px 10px #000;letter-spacing:.025em}
.hero .lead{margin:10px auto 18px;font-size:clamp(1rem,1.6vw,1.24rem);font-weight:600;line-height:1.55;color:#f4ece9;text-shadow:0 2px 9px #000}
.hero .lead strong{color:#f6c96b}
.hero .actions{margin:19px auto 30px;gap:22px}
.hero .goldbtn,.hero .outlinebtn{min-width:min(340px,90vw);padding:16px 28px;font-size:14px;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);border:2px solid #f2ae4e;box-shadow:inset 0 0 0 3px #49140f,0 9px 24px #0009}
.hero .goldbtn{color:#fff;background:linear-gradient(105deg,#8c1818,#d72c1b 46%,#390a0e)}
.hero .twitchbtn,.twitchbtn{background:linear-gradient(110deg,#2a103e,#6e27a1 55%,#260d37);border-color:#b16aff;color:#fff}
.heroHighlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1250px;margin:20px auto 0}
.highlight{display:flex;align-items:center;gap:15px;text-align:left;padding:18px 16px;min-height:110px;background:linear-gradient(155deg,#342025ee,#100b10f5);border:2px solid #875345;box-shadow:inset 0 0 0 2px #12090c,0 9px 20px #0008;clip-path:polygon(3% 0,97% 0,100% 12%,100% 88%,97% 100%,3% 100%,0 88%,0 12%)}
.highlight:hover{border-color:#e9aa5a;transform:translateY(-3px);color:#fff}
.highlight>span{font-size:36px;color:#ee6a32;text-shadow:0 0 14px #bd342b}
.highlight b{display:block;font:700 clamp(17px,1.8vw,25px) Cinzel,serif;color:#fff}
.highlight small{display:block;font-size:12px;line-height:1.45;color:#ead6c9}
.heroSpire{position:absolute;z-index:-1;bottom:80px;width:clamp(120px,20vw,330px);height:65%;opacity:.65;filter:drop-shadow(0 0 18px #d7392366);background:linear-gradient(90deg,#0b0609,#45151b 45%,#13080b);clip-path:polygon(50% 0,62% 17%,67% 12%,76% 33%,86% 28%,91% 100%,8% 100%,14% 28%,24% 33%,33% 12%,38% 17%)}
.heroSpireLeft{left:-4%}.heroSpireRight{right:-5%;transform:scaleX(-1)}
.sectionCompact{padding-top:60px;padding-bottom:60px}
.featurePanel{text-align:center;max-width:960px;margin:auto;padding:45px}
.featurePanel .actions{margin-bottom:0}
.featurePanel h2{font-size:clamp(2rem,4vw,3.2rem)}
.featurePanel p:not(.eyebrow){max-width:700px;margin:16px auto 25px}
@media(max-width:1100px){.nav{flex-wrap:wrap}.mobileMenu{display:block;background:#281016;color:#fff;border:1px solid #9d5944;border-radius:4px;padding:8px 13px}.nav nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch}.nav nav.open{display:flex}.nav nav a{padding:9px 4px}.heroHighlights{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.nav .brandLogo{width:52px;height:50px}.nav .brand span{font-size:11px}.hero{min-height:0;padding:45px 14px 30px}.heroLogo{width:min(87vw,370px);max-height:390px}.heroHighlights{gap:9px}.highlight{padding:12px 9px;min-height:95px;gap:8px}.highlight>span{font-size:24px}.highlight b{font-size:15px}.highlight small{font-size:10px}.heroSpire{opacity:.35}.hero .actions{gap:12px}.hero .goldbtn,.hero .outlinebtn{min-width:min(340px,90vw)}}