/* Thémis visual system: vivid, near-black surfaces with magenta and indigo light. */
:root {
  color-scheme: dark;
  --bg: #0c0b11;
  --panel: #15141d;
  --panel2: #1d1b28;
  --line: #343140;
  --text: #f7f3fb;
  --muted: #a7a3b2;
  --accent: #ed5eaa;
  --gold: #c19aff;
  --mint: #7edbd0;
  --rose: #ef6aaa;
  --max: 1200px;
  font-family: 'DM Sans', 'Montserrat', sans-serif;
}

body {
  background:
    radial-gradient(ellipse at 7% 4%, #8d3ed51b, transparent 34rem),
    radial-gradient(ellipse at 92% 18%, #ed4b9412, transparent 32rem),
    var(--bg);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.ambient--one { background: #9b42ec; opacity: .15; }
.ambient--two { background: #ee4d9d; opacity: .12; }
.site-header {
  border-color: #ffffff12;
  background: linear-gradient(180deg, #100e17ad, #100e1700);
}
.brand { letter-spacing: .14em; }
.brand img { filter: drop-shadow(0 0 12px #d7a7ff55); }
.main-nav { color: #aaa5b7; }
.main-nav a:hover, .main-nav a.active, .site-footer nav a:hover { color: #fff; }
.nav-soon { color: #e68bc5; }
.button { border-radius: 10px; }
.button--primary {
  color: #fff;
  background: linear-gradient(110deg, #d448a4, #8759ed 92%);
  box-shadow: 0 8px 30px #bd49bd36, inset 0 1px #ffffff35;
}
.button--primary:hover {
  background: linear-gradient(110deg, #eb5ab6, #9a6aff 92%);
  box-shadow: 0 12px 38px #bd49bd55, inset 0 1px #ffffff48;
}
.button--outline, .button--ghost { border-color: #4b425e; background: #17141fbd; }
.button--outline:hover, .button--ghost:hover { border-color: #b47be5; background: #21192c; }
.hero { min-height: 690px; }
.hero::before {
  background: radial-gradient(ellipse at 63% 46%, #8f55ed26, transparent 67%), radial-gradient(ellipse at 80% 60%, #ee4b9b10, transparent 55%);
}
.eyebrow, .section-label { color: #c9bed9; }
.pulse-dot, .live-dot { background: #83e1d6; box-shadow: 0 0 14px #83e1d6; }
.hero h1, .page-title, .manifesto-grid h2, .section-heading h2, .callout-content h2, .final-cta h2 {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -.055em;
}
.accent { color: #e989c5; }
.hero-lead { color: #c1bacd; }
.hero-note { color: #a7a0b4; }
.shield-mini, .visual-caption span { color: #dfa0e3; }
.hero-sigil {
  background: radial-gradient(circle, #c050dc35, #5865f200 72%);
  box-shadow: 0 0 120px #a14be744;
}
.hero-sigil img { filter: drop-shadow(0 0 34px #dd8ce9a0); }
.orbit { border-color: #d476e33a; }
.orbit--inner { border-color: #7986ff44; }
.float-card {
  border-color: #51455f;
  background: linear-gradient(135deg, #211c2beF, #15131ded);
  box-shadow: 0 20px 70px #0008, 0 0 34px #a34ee80d;
}
.status-icon { background: #7edbd019; color: #86e2d7; }
.activity-top b { color: #e78bd0; }
.activity-chart i { background: linear-gradient(0deg, #7951e3, #f071b5); }
.guild-gem { background: #9753d526; color: #d4a9ff; }
.visual-caption { color: #a49bad; }
.section-wrap { border-color: #ffffff10; }
.manifesto-grid h2 span, .section-heading h2 span, .callout-content h2 span, .final-cta h2 span { color: #d8a0ee; }
.manifesto-grid > p, .section-heading > p, .feature-card p, .callout-content p, .final-cta > p { color: #b2acbd; }
.feature-card {
  border-color: #393443;
  border-radius: 16px;
  background: linear-gradient(145deg, #1b1923, #121118 82%);
  box-shadow: inset 0 1px #ffffff08;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: #8758b6;
  box-shadow: 0 18px 48px #0005, 0 0 35px #c54da90c, inset 0 1px #ffffff12;
}
.feature-icon { background: linear-gradient(145deg, #bd4da626, #714ce626); color: #e8a0dc; }
.feature-icon--gold { background: #8856e82a; color: #c4a4ff; }
.feature-icon--mint { background: #4ab9aa20; color: #83ded4; }
.feature-icon--rose { background: #e04e9826; color: #f086bb; }
.feature-meta { color: #bcb3c9; }
.feature-meta span, .feature-tag { color: #df90cb; }
.feature-card a { color: #da98ec; }
.mini-bars i { background: linear-gradient(180deg, #ed72bb, #7653df); }
.dashboard-callout, .premium-banner {
  border-color: #544465;
  border-radius: 18px;
  background: radial-gradient(ellipse at 80% 8%, #a04ce62b, transparent 47%), radial-gradient(ellipse at 13% 90%, #e94c9917, transparent 42%), linear-gradient(130deg, #1b1724, #121118 80%);
}
.callout-stats b { color: #e5a1e1; }
.callout-stats span { color: #aaa2b7; }
.final-cta { border-color: #ffffff13; }
.site-footer { border-color: #ffffff15; color: #aaa4b5; }
.toast { border-color: #7a56a1; background: #211a2b; color: #f8eefb; }

/* Dashboard and support surfaces keep their existing modules and controls. */
.page-kicker, .module-index { color: #df91cf; }
.page-intro { color: #bcb5c8; }
.notice { border-color: #675073; background: #aa4cc00d; color: #d4c8dd; }
.notice strong { color: #f0b0dc; }
.side-panel, .content-panel, .support-card, .premium-card {
  border-color: #383342;
  border-radius: 14px;
  background: linear-gradient(145deg, #1a1822, #131219);
}
.side-panel a { color: #aaa3b5; }
.side-panel a.selected { background: #c34da51e; color: #f3c2e2; }
.side-panel small, .module-index { color: #d18acb; }
.server-select, .field input, .field select, .field textarea, .role-option input,
.field input[type=url], .field input[type=text], .field input:not([type]) {
  background: #111018;
  color: #f6f0fa;
  border-color: #413a4d;
}
.module-status, .server-ribbon { background: linear-gradient(110deg, #211c2a, #17151e); }
.switch input:checked + span { background: linear-gradient(100deg, #d448a4, #8759ed); }
.rule-card, .check-grid label, .widget-preview { border-color: #393443; background: #121118; }
.rule-top .rule-glyph, .role-option-emoji { background: #b04cc21d; color: #df9ddf; }
.field label { color: #c0b5cc; }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: #d963b4; }
.check-grid label:has(input:checked) { border-color: #a05bb4; background: #a744a612; }
.check-grid input, .badge-picker input { accent-color: #d653ae; }
.widget-preview-card, .ticket-preview { background: #201b29; }
.ticket-preview button { color: #fff; background: linear-gradient(105deg, #d448a4, #8759ed); }
.guild-avatar { border-color: #d15ba555; background: #b64db31f; color: #f1c4e4; }
.preview-chip { border-color: #765482; color: #e6a3d4; }
.text-link { color: #e4a4da; }
.badge-soon { color: #df91cf; }
.premium-banner h2 { color: #f7f0fb; }

/* The profile preview still honors the color selected in its editor. */
.character-card {
  background: linear-gradient(155deg, color-mix(in srgb, var(--profile-accent) 12%, #201b2a), color-mix(in srgb, var(--profile-accent) 5%, #15131e) 63%, #100f16);
  box-shadow: 0 25px 70px #0009, 0 0 50px #a64ed10c, inset 0 0 0 4px #ffffff08;
}
.character-card:before { border-color: color-mix(in srgb, var(--profile-accent) 34%, transparent); }
.profile-editor, .profile-showcase {
  border-color: #3b3448;
  background: linear-gradient(145deg, #1b1923, #121118 86%);
}
.editor-heading { border-color: #ffffff14; }
.profile-field { border-color: #ffffff12; }
.profile-field textarea, .social-field, .social-avatar-field input,
.color-input-wrap, .badge-picker label {
  border-color: #3e384b;
  background: #121118;
  color: #eee8f4;
}
.profile-field textarea:focus, .social-field input:focus { outline-color: #d963b4; }
.color-presets button:focus-visible { border-color: #f0a5d9; }
.character-count, .profile-hint, .social-avatar-field, .showcase-caption { color: #aaa3b5; }
.badge-picker label:has(input:checked) { border-color: #a05bb4; background: #a744a612; }
.badge-token { background: #a348c126; color: #e5b5ef; }
.live-label { color: #83ded4; }
.character-card .character-socials { border-color: #ffffff18; }
.equipment-slot { border-color: #57445f; background: linear-gradient(145deg, #211b2a, #121118); }
.equipment-slot--rare { border-color: #9b69ca; }
.equipment-slot--epic { border-color: #d45aa7; background: linear-gradient(145deg, #302035, #15131c); }
.equipment-slot--weapon { border-color: #8570dc; background: linear-gradient(145deg, #29233c, #17151e); }
.account-avatar { background: #282034; }

/* Slow aurora drift brings a little motion to every section. */
.ambient--one { animation: aurora-drift-one 18s ease-in-out infinite alternate; }
.ambient--two { animation: aurora-drift-two 23s ease-in-out infinite alternate; }
.themis-constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .77;
}
@keyframes aurora-drift-one {
  from { transform: translate3d(-2vw, -1vh, 0) scale(.92); }
  to { transform: translate3d(12vw, 8vh, 0) scale(1.13); }
}
@keyframes aurora-drift-two {
  from { transform: translate3d(1vw, 2vh, 0) scale(1.05); }
  to { transform: translate3d(-12vw, -9vh, 0) scale(.9); }
}
body > main, body > footer { position: relative; z-index: 1; }
.scroll-marker {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  background: linear-gradient(90deg, #f06bb4, #ab73fa 62%, #7edbd0);
  box-shadow: 0 0 14px #d64bbd9c;
}
.hero-copy.is-visible .eyebrow,
.hero-copy.is-visible h1,
.hero-copy.is-visible .hero-lead,
.hero-copy.is-visible .hero-actions,
.hero-copy.is-visible .hero-note {
  animation: hero-arrive .72s cubic-bezier(.2,.8,.2,1) both;
}
.hero-copy.is-visible h1 { animation-delay: .09s; }
.hero-copy.is-visible .hero-lead { animation-delay: .19s; }
.hero-copy.is-visible .hero-actions { animation-delay: .29s; }
.hero-copy.is-visible .hero-note { animation-delay: .39s; }
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(19px); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-sigil::after {
  content: '';
  position: absolute;
  inset: -24px;
  border: 1px solid transparent;
  border-top-color: #f08acb;
  border-right-color: #9a8bff;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px #df5fca8a);
  animation: sigil-orbit 10s linear infinite;
}
@keyframes sigil-orbit { to { transform: rotate(360deg); } }
.orbit--outer { animation: orbit-turn 48s linear infinite; }
.orbit--inner { animation: orbit-turn-reverse 34s linear infinite; }
@keyframes orbit-turn {
  from { transform: translate(-50%, -50%) rotate(-19deg); }
  to { transform: translate(-50%, -50%) rotate(341deg); }
}
@keyframes orbit-turn-reverse {
  from { transform: translate(-50%, -50%) rotate(40deg); }
  to { transform: translate(-50%, -50%) rotate(-320deg); }
}
.feature-grid > :nth-child(2) { transition-delay: 70ms; }
.feature-grid > :nth-child(3) { transition-delay: 120ms; }
.feature-grid > :nth-child(4) { transition-delay: 170ms; }
.feature-grid > :nth-child(5) { transition-delay: 220ms; }
.feature-card, .support-card, .premium-card { transform-style: preserve-3d; }
.feature-card:hover, .support-card:hover, .premium-card:hover {
  transition-delay: 0s;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
  background-image: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), #ba5be51b, transparent 76%), linear-gradient(145deg, #1b1923, #121118 82%);
  border-color: #9a63c0;
  box-shadow: 0 18px 48px #0006, 0 0 34px #bd49bd18, inset 0 1px #ffffff16;
}
.support-card, .premium-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-image .22s ease; }
.feature-card:hover .feature-icon, .support-card:hover .feature-icon, .premium-card:hover .feature-icon {
  transform: translateZ(12px) scale(1.06);
  box-shadow: 0 0 24px #cf5cc225;
}
.feature-icon { transition: transform .24s ease, box-shadow .24s ease; }
.hero-visual .float-card {
  animation: card-bob 6s ease-in-out infinite;
}
.hero-visual .float-card--activity { animation-delay: -2s; }
.hero-visual .float-card--guild { animation-delay: -4s; }
@keyframes card-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.button--primary { background-size: 160% 160%; animation: button-glint 7s ease-in-out infinite; }
@keyframes button-glint {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.guild-marquee {
  position: relative;
  overflow: hidden;
  padding: 17px 0;
  border-top: 1px solid #ffffff0e;
  border-bottom: 1px solid #ffffff0e;
  background: linear-gradient(90deg, #13101a, #191321 50%, #13101a);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.guild-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: guild-marquee 32s linear infinite;
}

.guild-marquee-group { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.guild-marquee span { white-space: nowrap; color: #c8bed3; font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.guild-marquee i { font-style: normal; color: #df75cd; font-size: 13px; text-shadow: 0 0 12px #e05ac877; }
@keyframes guild-marquee { to { transform: translateX(-50%); } }
.support-grid > :nth-child(2), .premium-grid > :nth-child(2) { transition-delay: 80ms; }
.support-grid > :nth-child(3), .premium-grid > :nth-child(3) { transition-delay: 160ms; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .2s ease both page-leave; }
::view-transition-new(root) { animation: .38s cubic-bezier(.2,.75,.2,1) both page-arrive; }
@keyframes page-leave { to { opacity: 0; filter: blur(5px); transform: scale(.99); } }
@keyframes page-arrive { from { opacity: 0; filter: blur(5px); transform: translateY(8px) scale(.99); } }

@media (max-width: 800px) {
  .site-header { background: #100e17eb; border-bottom-color: #ffffff16; }
  .main-nav { background: #100e17f5; border-color: #ffffff18; }
}
@media (max-width: 700px), (pointer: coarse) {
  .feature-card:hover, .support-card:hover, .premium-card:hover { transform: translateY(-3px); }
  .hero-visual .float-card { animation-duration: 8s; }
  .themis-constellation { opacity: .5; }
  .guild-marquee-group { gap: 19px; padding-right: 19px; }
  .guild-marquee span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}