:root {
  --bg: #05030b;
  --bg-deep: #020106;
  --panel: rgba(12, 8, 24, .86);
  --panel-strong: #0d0919;
  --line: rgba(201, 91, 255, .24);
  --line-blue: rgba(51, 150, 255, .28);
  --text: #f7f3ff;
  --muted: #b2a9c6;
  --purple: #a819ff;
  --purple-bright: #d747ff;
  --blue: #238dff;
  --cyan: #57dfff;
  --red: #ff284b;
  --discord: #5865f2;
  --travel: #f6bd57;
  --travel-soft: #63e6c2;
  --success: #55f0a7;
  --max: 1220px;
  --radius: 22px;
  --shadow: 0 32px 90px rgba(0, 0, 0, .48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 12%, rgba(137, 0, 255, .13), transparent 31%),
    radial-gradient(circle at 88% 32%, rgba(23, 111, 255, .10), transparent 29%),
    linear-gradient(180deg, #07030e 0%, var(--bg) 44%, #05040a 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(190, 84, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 131, 255, .022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.015) 4px);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 112px 0; }

.skip-link { position: fixed; left: 12px; top: -64px; z-index: 1000; padding: 10px 14px; background: white; color: #111; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: rgba(5, 3, 11, .86);
  backdrop-filter: blur(18px);
  border-color: rgba(200, 80, 255, .18);
}
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: Oxanium, sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; }
.brand img { filter: drop-shadow(0 0 12px rgba(190, 35, 255, .55)); }
.brand > span > span { color: var(--purple-bright); text-shadow: 0 0 16px rgba(213, 71, 255, .45); }
.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a { position: relative; color: #b9adc8; text-decoration: none; font-size: .87rem; font-weight: 700; transition: .2s ease; }
.main-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: linear-gradient(90deg, var(--purple-bright), var(--blue)); transition: right .2s ease; }
.main-nav a:hover { color: white; }
.main-nav a:hover::after { right: 0; }
.main-nav .nav-cta { padding: 10px 16px; color: white; border: 1px solid rgba(211, 70, 255, .45); background: rgba(176, 29, 255, .10); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(18, 10, 31, .92); padding: 10px; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: white; border-radius: 2px; }

.hero {
  position: relative;
  min-height: 830px;
  display: flex;
  align-items: center;
  padding: 132px 0 94px;
  overflow: hidden;
  isolation: isolate;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("assets/banner-dragonhu.webp");
  background-size: cover;
  background-position: center;
  opacity: .34;
  filter: saturate(1.18) contrast(1.08);
  transform: scale(1.02);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3,1,8,.97) 0%, rgba(5,2,12,.87) 40%, rgba(6,2,13,.38) 70%, rgba(4,1,9,.78) 100%),
    linear-gradient(180deg, rgba(4,1,9,.15), #05030b 96%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 26px 20px 28px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(194, 42, 255, .22);
  clip-path: polygon(0 24px,24px 0,18% 0,18% 2px,80% 2px,80% 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
}
.cyber-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4; background: linear-gradient(90deg, transparent 6%, rgba(211,68,255,.18) 6.1%, transparent 6.2%, transparent 88%, rgba(53,141,255,.17) 88.1%, transparent 88.2%); }
.hero-layout { display: grid; grid-template-columns: 1.03fr .97fr; gap: 58px; align-items: center; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow { margin: 0 0 16px; color: #d16dff; font-size: .75rem; font-weight: 800; letter-spacing: .18em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px var(--success); }
h1, h2, h3 { margin-top: 0; line-height: 1.08; }
h1 { margin-bottom: 25px; font-family: Oxanium, sans-serif; font-size: clamp(3.4rem, 6.5vw, 6.3rem); letter-spacing: -.055em; text-transform: uppercase; text-shadow: 0 0 38px rgba(143, 37, 255, .18); }
h1 span, .travel-copy h2 span { color: transparent; background: linear-gradient(100deg, #f4f0ff 0%, #d541ff 46%, #7e4dff 75%, #3a9bff 100%); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 14px rgba(190, 48, 255, .28)); }
.hero-lead { max-width: 670px; margin: 0 0 31px; color: #c7bfd4; font-size: 1.08rem; }
.hero-actions, .community-actions, .contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.button { appearance: none; cursor: pointer; font-family: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 22px; border: 1px solid transparent; text-decoration: none; font-weight: 800; font-size: .9rem; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.button:hover { transform: translateY(-3px); }
.button.primary { background: linear-gradient(115deg, #a515ff, #5b47ff); box-shadow: 0 17px 44px rgba(155, 29, 255, .3); }
.button.twitch { border-color: rgba(200, 78, 255, .54); background: rgba(73, 18, 99, .48); }
.button.discord { background: linear-gradient(120deg, #5865f2, #794cf4); box-shadow: 0 17px 44px rgba(88, 101, 242, .26); }
.button.secondary { border-color: rgba(218, 94, 255, .28); background: rgba(255,255,255,.035); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 31px; }
.hero-meta span, .topic-list span, .travel-pills span { border: 1px solid rgba(195, 80, 255, .21); background: rgba(26, 10, 39, .56); color: #c4b6d3; padding: 7px 11px; font-family: Oxanium, sans-serif; font-size: .69rem; letter-spacing: .08em; }

.hero-visual { position: relative; min-height: 545px; display: grid; place-items: center; }
.avatar-stage { position: relative; width: min(100%, 505px); aspect-ratio: 1; display: grid; place-items: center; }
.avatar-stage::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(139,29,255,.28), rgba(30,8,58,.06) 65%, transparent 68%); filter: blur(14px); }
.hero-avatar { position: relative; z-index: 3; width: 82%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid rgba(198, 44, 255, .84); box-shadow: 0 0 0 10px rgba(121, 22, 179, .12), 0 0 48px rgba(184, 33, 255, .42), 0 38px 90px rgba(0,0,0,.52); }
.stage-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(185, 54, 255, .27); }
.ring-one { inset: 1%; animation: spin 18s linear infinite; }
.ring-two { inset: 13%; border-style: dashed; animation: spin 11s linear infinite reverse; }
.stage-ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--purple-bright); box-shadow: 0 0 18px var(--purple-bright); }
.stage-label { position: absolute; z-index: 5; min-width: 158px; padding: 11px 14px; border: 1px solid rgba(205, 81, 255, .38); background: rgba(7,3,15,.8); backdrop-filter: blur(12px); box-shadow: 0 18px 36px rgba(0,0,0,.38); }
.stage-label small, .stage-label strong { display: block; }
.stage-label small { color: #806d90; font-size: .57rem; letter-spacing: .17em; }
.stage-label strong { color: #e8c8ff; font-family: Oxanium, sans-serif; font-size: .9rem; letter-spacing: .08em; }
.stage-label-top { top: 58px; right: -5px; }
.stage-label-bottom { left: -7px; bottom: 70px; }
.mini-identity { position: absolute; z-index: 6; width: 103px; padding: 7px; border: 1px solid rgba(95, 147, 255, .35); background: rgba(5,3,12,.84); box-shadow: 0 16px 34px rgba(0,0,0,.42); }
.mini-identity img { aspect-ratio: 1; object-fit: cover; }
.mini-identity span { display: block; padding: 6px 2px 1px; text-align: center; color: #aabffd; font-family: Oxanium, sans-serif; font-size: .62rem; letter-spacing: .14em; }
.labs-mini { right: -2px; bottom: 28px; transform: rotate(3deg); }
.vod-mini { left: 6px; top: 36px; border-color: rgba(255, 55, 82, .42); transform: rotate(-3deg); }
.hero-status { position: absolute; inset: auto 0 0; border-top: 1px solid rgba(204, 70, 255, .19); background: rgba(4,2,9,.64); backdrop-filter: blur(10px); }
.hero-status .container { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 22px; overflow-x: auto; color: #776d86; font-family: Oxanium, sans-serif; font-size: .68rem; letter-spacing: .16em; white-space: nowrap; }
.hero-status i { width: 4px; height: 4px; border-radius: 50%; background: #8e35bc; box-shadow: 0 0 9px rgba(194,60,255,.5); }

.section-heading { max-width: 780px; margin-bottom: 45px; }
.section-heading h2, .community-copy h2, .about-copy h2, .contact-box h2, .travel-copy h2 { margin-bottom: 18px; font-family: Oxanium, sans-serif; font-size: clamp(2.2rem, 4.5vw, 4rem); letter-spacing: -.04em; text-transform: uppercase; }
.section-heading > p:last-child, .community-copy > p, .about-copy > p, .contact-box p { color: var(--muted); }
.channels-section { position: relative; }
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 23px; }
.channel-card { position: relative; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15,7,27,.93), rgba(8,5,16,.94)); box-shadow: 0 24px 60px rgba(0,0,0,.24); overflow: hidden; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.channel-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 2px solid var(--accent, var(--purple)); opacity: .72; }
.channel-card:hover { transform: translateY(-6px); border-color: rgba(212, 80, 255, .5); box-shadow: 0 32px 75px rgba(0,0,0,.36), 0 0 30px rgba(161,30,255,.08); }
.channel-card.gaming { --accent: #bd32ff; }
.channel-card.labs { --accent: #278dff; }
.channel-card.vod { --accent: #ff2b48; }
.channel-card.live { --accent: #9b45ff; }
.channel-media { position: relative; height: 280px; overflow: hidden; background: #08050f; }
.channel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(8,4,15,.96) 100%); }
.channel-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s ease, filter .45s ease; }
.channel-card:hover .channel-media img { transform: scale(1.035); filter: saturate(1.1); }
.wide-media img { object-position: center; }
.media-code { position: absolute; z-index: 2; top: 15px; right: 15px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(4,2,10,.7); color: #d2c6da; font-family: Oxanium, sans-serif; font-size: .58rem; letter-spacing: .13em; }
.channel-body { min-height: 310px; display: flex; flex-direction: column; padding: 25px 27px 27px; }
.card-tag { margin-bottom: 10px; color: #866e98; font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.channel-card h3 { margin-bottom: 12px; font-family: Oxanium, sans-serif; font-size: 1.55rem; text-transform: uppercase; }
.channel-card p { margin: 0 0 19px; color: var(--muted); }
.topic-list { display: flex; flex-wrap: wrap; gap: 7px; }
.channel-body > a { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(200, 82, 255, .15); color: #d795ff; text-decoration: none; font-weight: 800; font-size: .86rem; }
.labs .channel-body > a { color: #6dbdff; }
.vod .channel-body > a { color: #ff7e91; }


.latest-section {
  position: relative;
  border-top: 1px solid rgba(190, 67, 255, .13);
  background:
    radial-gradient(circle at 13% 18%, rgba(159, 25, 255, .10), transparent 30%),
    radial-gradient(circle at 87% 75%, rgba(35, 141, 255, .08), transparent 28%);
}
.latest-heading,
.schedule-heading {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.latest-heading > div,
.schedule-heading > div { max-width: 780px; }
.refresh-button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(203, 72, 255, .30);
  background: rgba(22, 8, 35, .72);
  color: #dcb8ee;
  font: 700 .78rem/1 Oxanium, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.refresh-button:hover { border-color: rgba(218, 82, 255, .58); color: white; }
.refresh-button span { display: inline-block; margin-right: 7px; font-size: 1.05rem; }
.refresh-button.loading span { animation: spin 1s linear infinite; }
.latest-status,
.module-notice {
  min-height: 29px;
  margin: -25px 0 21px;
  color: #8c819b;
  font-size: .82rem;
}
.latest-status.error { color: #ff9daa; }
.latest-status.ready { color: #8fb7a5; }
.loading-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--purple-bright);
  box-shadow: 0 0 14px rgba(215,71,255,.8);
  animation: pulse 1.2s ease-in-out infinite;
}
.latest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.latest-card {
  --latest-accent: #c13cff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .9fr) 1.1fr;
  min-height: 286px;
  border: 1px solid rgba(198, 72, 255, .20);
  background: linear-gradient(145deg, rgba(15,7,27,.91), rgba(7,4,14,.96));
  overflow: hidden;
  clip-path: polygon(17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%,0 17px);
  transition: transform .22s ease, border-color .22s ease;
}
.latest-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--latest-accent), transparent 70%);
  z-index: 4;
}
.latest-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--latest-accent) 48%, transparent); }
.latest-card[data-accent="blue"] { --latest-accent: #2b9dff; }
.latest-card[data-accent="red"] { --latest-accent: #ff334f; }
.latest-card[data-accent="travel"] { --latest-accent: #f1b74e; }
.latest-thumb {
  position: relative;
  min-height: 100%;
  background: #08050e;
  overflow: hidden;
}
.latest-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 46%, rgba(7,4,14,.86) 100%), linear-gradient(180deg, transparent 50%, rgba(7,4,14,.62));
}
.latest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.latest-play {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--latest-accent) 70%, white 10%);
  background: rgba(5,3,11,.78);
  color: white;
  box-shadow: 0 0 24px color-mix(in srgb, var(--latest-accent) 34%, transparent);
}
.latest-body { min-width: 0; display: flex; flex-direction: column; padding: 25px; }
.latest-channel {
  margin-bottom: 10px;
  color: var(--latest-accent);
  font: 800 .64rem/1.2 Oxanium, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.latest-body h3 {
  margin-bottom: 11px;
  font: 700 1.28rem/1.18 Oxanium, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-body p { margin: 0; color: #9e93aa; font-size: .82rem; }
.latest-body > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #dec5ed;
  text-decoration: none;
  font-weight: 800;
  font-size: .82rem;
}
.latest-card.fallback .latest-body h3 { font-size: 1.42rem; }

.live-center-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid rgba(182, 55, 255, .18);
}
.live-center-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("assets/channel-live-banner.webp") center / cover no-repeat;
  opacity: .19;
  filter: saturate(1.22);
}
.live-center-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(4,2,9,.98), rgba(8,3,16,.89) 48%, rgba(4,2,9,.72));
}
.live-center-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 58px; align-items: center; }
.live-copy h2 { margin-bottom: 22px; font: 700 clamp(2.2rem, 4.5vw, 4rem)/1.08 Oxanium, sans-serif; text-transform: uppercase; letter-spacing: -.04em; }
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #80758d;
}
.live-dot.live { background: #ff3150; box-shadow: 0 0 16px #ff3150; animation: pulse 1.1s ease-in-out infinite; }
.live-dot.offline { background: #8b7d96; }
.live-dot.unknown { background: #f4bd55; box-shadow: 0 0 12px rgba(244,189,85,.5); }
.twitch-state {
  margin-bottom: 26px;
  padding: 19px 20px;
  border-left: 2px solid #6f5b7e;
  background: rgba(255,255,255,.025);
}
.twitch-state[data-state="live"] { border-color: #ff3150; background: rgba(255,49,80,.055); }
.twitch-state[data-state="offline"] { border-color: #806c91; }
.twitch-state[data-state="unknown"] { border-color: #f1b754; }
.twitch-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 8px;
  border: 1px solid currentColor;
  color: #af9cbb;
  font: 800 .58rem/1 Oxanium, sans-serif;
  letter-spacing: .13em;
}
.twitch-state[data-state="live"] .twitch-badge { color: #ff7589; }
.twitch-state[data-state="unknown"] .twitch-badge { color: #f6cf83; }
.twitch-state strong { display: block; margin-bottom: 6px; font: 700 1.08rem/1.35 Oxanium, sans-serif; }
.twitch-state p { margin: 0; color: #a89caf; font-size: .88rem; }
.live-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.privacy-note { max-width: 560px; margin: 15px 0 0; color: #766b80; font-size: .75rem; }
.twitch-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  border: 1px solid rgba(194, 67, 255, .31);
  background: #05030a;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 42px rgba(153, 24, 255, .08);
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.twitch-stage::after { content: "TWITCH_PLAYER_05"; position: absolute; z-index: 5; top: 12px; right: 14px; color: rgba(255,255,255,.34); font: 600 .55rem/1 Oxanium, sans-serif; letter-spacing: .14em; pointer-events: none; }
.twitch-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.54) saturate(1.1); }
.twitch-stage-overlay { position: absolute; z-index: 2; left: 22px; bottom: 19px; display: flex; flex-direction: column; }
.twitch-stage-overlay span { color: #cc67ff; font: 800 .62rem/1 Oxanium, sans-serif; letter-spacing: .16em; }
.twitch-stage-overlay strong { margin-top: 6px; font: 700 1.05rem/1 Oxanium, sans-serif; }
.twitch-player-placeholder { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; color: #c6b9ce; cursor: pointer; }
.twitch-player-placeholder p { margin: 12px 0 0; font-size: .85rem; }
.play-symbol { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid rgba(208,72,255,.57); background: rgba(10,4,18,.73); box-shadow: 0 0 32px rgba(185,38,255,.23); color: white; font-size: 1.4rem; }
.twitch-stage iframe { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; border: 0; }

.schedule-section { position: relative; }
.schedule-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 8px; color: #90849c; font-size: .75rem; }
.schedule-legend span { display: inline-flex; align-items: center; gap: 7px; }
.schedule-legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend-live { background: #ce3aff; box-shadow: 0 0 10px rgba(206,58,255,.6); }
.legend-video { background: #2d98ff; box-shadow: 0 0 10px rgba(45,152,255,.6); }
.schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.schedule-loading { grid-column: 1 / -1; color: #8b8097; }
.schedule-card {
  --schedule-accent: #c23cff;
  position: relative;
  display: grid;
  grid-template-columns: 126px 1fr;
  min-height: 200px;
  border: 1px solid rgba(194, 63, 255, .18);
  background: linear-gradient(145deg, rgba(14,7,25,.84), rgba(7,4,13,.94));
  overflow: hidden;
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.schedule-card[data-accent="blue"] { --schedule-accent: #2d98ff; }
.schedule-card[data-accent="travel"] { --schedule-accent: #efb74d; }
.schedule-date {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.07);
  background: color-mix(in srgb, var(--schedule-accent) 8%, transparent);
  text-align: center;
}
.schedule-date::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--schedule-accent); }
.schedule-date strong { color: white; font: 800 2.05rem/1 Oxanium, sans-serif; }
.schedule-date span { margin-top: 7px; color: var(--schedule-accent); font: 800 .62rem/1.2 Oxanium, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.schedule-date small { margin-top: 8px; color: #8c8097; font-size: .7rem; }
.schedule-date.pending strong { font-size: 1.28rem; }
.schedule-card-body { display: flex; flex-direction: column; padding: 22px 23px; }
.schedule-type { color: var(--schedule-accent); font: 800 .59rem/1.2 Oxanium, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.schedule-card h3 { margin: 9px 0 9px; font: 700 1.15rem/1.2 Oxanium, sans-serif; text-transform: uppercase; }
.schedule-card p { margin: 0 0 12px; color: #a69aaa; font-size: .85rem; }
.schedule-platform { color: #776c81; font-size: .72rem; }
.schedule-card-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 15px; }
.schedule-card-actions a { padding: 7px 10px; border: 1px solid rgba(255,255,255,.10); color: #c9bcd0; text-decoration: none; font-size: .72rem; font-weight: 700; }
.schedule-card-actions a:hover { border-color: var(--schedule-accent); color: white; }
.schedule-updated { margin: 18px 0 0; color: #6f6479; font-size: .72rem; }

@keyframes pulse { 0%,100% { opacity: .42; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

.travel-section { padding-top: 50px; }
.travel-feature { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; min-height: 560px; border: 1px solid rgba(246, 189, 87, .38); overflow: hidden; box-shadow: var(--shadow); isolation: isolate; background: linear-gradient(120deg, rgba(12,10,6,.92), rgba(5,14,14,.9)); clip-path: polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px); }
.travel-feature::before { content: ""; position: absolute; inset: 18px; z-index: 4; pointer-events: none; border: 1px solid rgba(246,189,87,.26); clip-path: polygon(0 18px,18px 0,100% 0,100% 100%,0 100%); }
.travel-media { position: relative; min-height: 100%; }
.travel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.travel-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,7,.18), rgba(3,7,9,.55) 100%), linear-gradient(180deg, rgba(3,7,9,.08), rgba(3,7,9,.42)); }
.travel-copy { position: relative; z-index: 5; padding: 74px 74px 74px 56px; display: flex; flex-direction: column; justify-content: center; }
.travel-eyebrow { color: var(--travel); }
.travel-copy h2 span { background: linear-gradient(100deg, #ffe9a7, #f7b84d 50%, #62e3c2 100%); background-clip: text; -webkit-background-clip: text; }
.travel-copy p { max-width: 590px; color: #d8d6ce; font-size: 1.03rem; }
.travel-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.travel-pills span { border-color: rgba(246,189,87,.35); background: rgba(31,25,11,.52); color: #f6db9f; }
.travel-button { background: linear-gradient(115deg, #f2b54b, #55d6b4); color: #0a0c0b; box-shadow: 0 17px 44px rgba(239, 181, 76, .22); }
.travel-route { position: absolute; z-index: 3; right: 56px; top: 34px; display: flex; align-items: center; opacity: .68; }
.travel-route span { width: 12px; height: 12px; border: 2px solid var(--travel); border-radius: 50%; box-shadow: 0 0 13px rgba(246,189,87,.5); }
.travel-route i { width: 70px; border-top: 1px dashed rgba(246,189,87,.62); }
.travel-stamp { position: absolute; z-index: 5; left: 30px; bottom: 28px; width: 126px; height: 126px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(246,189,87,.48); border-radius: 50%; background: rgba(2,7,8,.56); backdrop-filter: blur(8px); color: #f7d78f; text-align: center; transform: rotate(-7deg); }
.travel-stamp small, .travel-stamp strong, .travel-stamp span { display: block; }
.travel-stamp small { font-size: .57rem; letter-spacing: .16em; }
.travel-stamp strong { font-family: Oxanium, sans-serif; font-size: 1rem; letter-spacing: .08em; }
.travel-stamp span { color: var(--travel-soft); font-family: Oxanium, sans-serif; }

.community-section { position: relative; overflow: hidden; border-block: 1px solid rgba(187, 66, 255, .2); isolation: isolate; }
.community-bg { position: absolute; inset: 0; z-index: -3; background: url("assets/offline-dragonhu.webp") center / cover no-repeat; opacity: .22; filter: saturate(1.2); }
.community-section::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,2,10,.97), rgba(9,4,17,.83) 55%, rgba(5,2,10,.87)); }
.community-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 68px; align-items: center; }
.community-panel { padding: 22px; border: 1px solid rgba(200,78,255,.34); background: rgba(7,3,14,.82); backdrop-filter: blur(12px); box-shadow: var(--shadow), 0 0 44px rgba(154,24,255,.08); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.server-head { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 11px 10px 20px; border-bottom: 1px solid rgba(198,76,255,.18); }
.server-head strong, .server-head span { display: block; }
.server-head > div span { color: var(--muted); font-size: .76rem; }
.online-pill { color: var(--success); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.discord-widget-shell { margin: 18px 0 14px; border: 1px solid rgba(88,101,242,.28); background: rgba(3,2,10,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); overflow: hidden; }
.discord-widget-shell iframe { display: block; width: 100%; min-height: 380px; background: #1e1f22; }
.widget-note { margin: 0 0 14px; color: #9d94b1; font-size: .82rem; }
.server-invite { display: grid; grid-template-columns: 1fr auto auto; gap: 13px; align-items: center; padding: 13px 15px; border: 1px solid rgba(88,101,242,.4); background: rgba(88,101,242,.1); text-decoration: none; }
.server-invite span, .server-invite strong { display: block; }
.server-invite span { color: #817ea5; font-size: .58rem; letter-spacing: .15em; }
.server-invite strong { font-family: Oxanium, sans-serif; letter-spacing: .07em; }
.server-invite b { color: #aeb5ff; }

.patreon-section { position: relative; }
.patreon-feature { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 22px; padding: 40px; border: 1px solid rgba(255, 115, 71, .30); background: linear-gradient(125deg, rgba(32,8,18,.92), rgba(16,8,24,.96)); box-shadow: var(--shadow); clip-path: polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); }
.patreon-feature::before { content: "PATREON / DRAGON CLUB"; position: absolute; right: 22px; top: 14px; color: rgba(255,255,255,.10); font-family: Oxanium, sans-serif; font-size: .58rem; letter-spacing: .18em; }
.patreon-eyebrow { color: #ff8d70; }
.patreon-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.patreon-button { background: linear-gradient(120deg, #ff7a50, #ff4e62); box-shadow: 0 18px 42px rgba(255, 92, 71, .22); }
.patreon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.patreon-card { padding: 22px; border: 1px solid rgba(255,115,71,.18); background: rgba(255,255,255,.03); }
.patreon-card span { display: block; margin-bottom: 22px; color: #af6d7b; font-family: Oxanium, sans-serif; font-size: .7rem; }
.patreon-card h3 { margin-bottom: 10px; font-family: Oxanium, sans-serif; font-size: 1.15rem; text-transform: uppercase; }
.patreon-card p { margin: 0; color: #c5b7c8; font-size: .9rem; }

.services-section { position: relative; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.service-card { position: relative; min-height: 235px; padding: 25px; border: 1px solid rgba(190,70,255,.18); background: linear-gradient(145deg, rgba(15,7,27,.78), rgba(8,5,15,.88)); clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); transition: transform .24s ease, border-color .24s ease; }
.service-card::before { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 2px; background: linear-gradient(90deg, var(--purple-bright), transparent); }
.service-card:hover { transform: translateY(-5px); border-color: rgba(214,77,255,.44); }
.service-card > span { display: block; margin-bottom: 34px; color: #735e83; font-family: Oxanium, sans-serif; font-size: .7rem; }
.service-card h3 { font-family: Oxanium, sans-serif; font-size: 1.22rem; text-transform: uppercase; }
.service-card p { color: var(--muted); font-size: .89rem; }
.cta-card { background: linear-gradient(140deg, rgba(127, 28, 193, .3), rgba(28, 76, 170, .23)); }
.cta-card a { color: #e3a6ff; font-weight: 800; text-decoration: none; }

.about-section { border-top: 1px solid rgba(191,67,255,.18); }
.about-layout { display: grid; grid-template-columns: .83fr 1.17fr; gap: 72px; align-items: center; }
.portrait-frame { position: relative; max-width: 470px; margin-inline: auto; padding: 18px; border: 1px solid rgba(199,74,255,.3); background: rgba(13,6,23,.82); box-shadow: var(--shadow); clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.portrait-frame::before { content: ""; position: absolute; inset: 9px; z-index: 2; pointer-events: none; border: 1px solid rgba(60,146,255,.18); }
.portrait-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center; filter: saturate(.94) contrast(1.04); }
.portrait-code { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 31px; padding: 12px 14px; border: 1px solid rgba(207,79,255,.3); background: rgba(5,2,11,.78); backdrop-filter: blur(10px); }
.portrait-code span, .portrait-code strong { display: block; }
.portrait-code span { color: #7f6b8e; font-size: .58rem; letter-spacing: .16em; }
.portrait-code strong { font-family: Oxanium, sans-serif; font-size: .85rem; letter-spacing: .08em; }
.about-lead { font-size: 1.06rem; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 30px; }
.value-grid div { padding: 16px; border: 1px solid rgba(197,72,255,.18); background: rgba(255,255,255,.02); }
.value-grid strong, .value-grid span { display: block; }
.value-grid strong { margin-bottom: 5px; color: #d894ff; font-size: .88rem; }
.value-grid span { color: #8f849d; font-size: .74rem; }

.contact-section { padding-top: 48px; }
.contact-box { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center; padding: 47px; border: 1px solid rgba(208,76,255,.34); background: linear-gradient(120deg, rgba(109,17,162,.32), rgba(26,71,149,.24)); box-shadow: var(--shadow), 0 0 50px rgba(168,25,255,.08); clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.contact-box::before { content: "CONTACT_LINK"; position: absolute; top: 13px; right: 17px; color: rgba(255,255,255,.12); font-family: Oxanium, sans-serif; font-size: .55rem; letter-spacing: .16em; }
.contact-box h2 { font-size: clamp(1.9rem, 3.9vw, 3.2rem); }
.email-display { display: inline-block; margin-top: 4px; color: #f0c7ff; font-family: Oxanium, sans-serif; font-size: clamp(1rem, 2vw, 1.35rem); text-decoration: none; overflow-wrap: anywhere; }
.contact-actions { justify-content: flex-end; max-width: 330px; }

.site-footer { margin-top: 112px; border-top: 1px solid rgba(194,69,255,.18); background: #030207; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 65px; padding: 58px 0; }
.footer-brand p { max-width: 390px; color: #7b7088; }
.footer-email { color: #bc83d8; font-size: .82rem; text-decoration: none; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links div { display: flex; flex-direction: column; gap: 8px; }
.footer-links strong { margin-bottom: 6px; font-size: .8rem; }
.footer-links a { color: #81758d; text-decoration: none; font-size: .8rem; }
.footer-links a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid rgba(192,68,255,.13); color: #645a70; font-size: .73rem; }
.footer-bottom a { text-decoration: none; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

.legal-page { min-height: 100vh; padding: 132px 0 80px; }
.legal-card { position: relative; max-width: 880px; margin-inline: auto; padding: 40px; border: 1px solid rgba(201,77,255,.27); background: rgba(13,7,23,.9); box-shadow: var(--shadow); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.legal-card h1 { font-size: clamp(2rem, 6vw, 4rem); }
.legal-card h2 { margin-top: 34px; font-family: Oxanium, sans-serif; }
.legal-card p, .legal-card li { color: var(--muted); }
.notice { padding: 14px 16px; border: 1px solid rgba(246,189,87,.28); background: rgba(246,189,87,.06); color: #f6d999 !important; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .main-nav { position: fixed; inset: 82px 20px auto; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; border: 1px solid var(--line); background: rgba(7,3,14,.96); backdrop-filter: blur(18px); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px; }
  .nav-toggle { display: block; }
  .hero { min-height: auto; }
  .hero-layout, .community-layout, .about-layout, .contact-box, .patreon-feature { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-meta { justify-content: center; }
  .hero-visual { min-height: 500px; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-card { display: grid; grid-template-columns: .83fr 1.17fr; }
  .channel-media { height: 100%; min-height: 390px; }
  .channel-body { min-height: 390px; }
  .community-layout, .about-layout { gap: 50px; }
  .travel-feature { grid-template-columns: 1fr; min-height: 0; }
  .travel-media { min-height: 360px; }
  .travel-copy { padding: 44px 28px 44px; }
  .travel-route { right: 28px; top: 24px; transform: scale(.82); transform-origin: right; }
  .patreon-grid { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .patreon-grid { grid-template-columns: repeat(2, 1fr); }
  .latest-grid { grid-template-columns: 1fr; }
  .live-center-layout { grid-template-columns: 1fr; }
  .live-copy { text-align: center; }
  .live-actions { justify-content: center; }
  .privacy-note { margin-inline: auto; }
  .schedule-grid { grid-template-columns: 1fr; }
  .latest-heading, .schedule-heading { align-items: flex-start; }
  .contact-actions { justify-content: flex-start; max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 82px 0; }
  .hero { padding: 118px 0 92px; }
  .hero::after { inset: 12px 8px 14px; }
  h1 { font-size: clamp(3rem, 16vw, 4.7rem); }
  .hero-visual { min-height: 390px; }
  .avatar-stage { width: 360px; max-width: 100%; }
  .stage-label { min-width: 132px; padding: 9px 11px; }
  .stage-label-top { right: 0; top: 32px; }
  .stage-label-bottom { left: 0; bottom: 43px; }
  .mini-identity { width: 77px; }
  .vod-mini { top: 13px; }
  .labs-mini { bottom: 2px; }
  .hero-status .container { justify-content: flex-start; }
  .latest-heading, .schedule-heading { display: block; }
  .refresh-button { margin-top: 14px; }
  .latest-status { margin-top: 0; }
  .latest-card { grid-template-columns: 1fr; }
  .latest-thumb { min-height: 220px; }
  .live-center-layout { gap: 34px; }
  .schedule-card { grid-template-columns: 96px 1fr; }
  .schedule-date { padding: 12px 8px; }
  .schedule-date strong { font-size: 1.55rem; }
  .schedule-card-body { padding: 19px 17px; }
  .schedule-legend { margin-top: 15px; }
  .channel-card { display: block; }
  .channel-media { height: 280px; min-height: 0; }
  .channel-body { min-height: 335px; }
  .travel-feature { grid-template-columns: 1fr; }
  .travel-media { min-height: 320px; }
  .travel-image { object-position: center 24%; }
  .travel-copy { padding: 38px 24px 34px; }
  .travel-route { right: 20px; top: 18px; transform: scale(.72); transform-origin: right; }
  .travel-stamp { width: 104px; height: 104px; left: 20px; bottom: 18px; }
  .patreon-grid { grid-template-columns: 1fr; }
  .service-grid, .value-grid { grid-template-columns: 1fr; }
  .contact-box { padding: 29px; }
  .contact-actions { align-items: stretch; }
  .contact-actions .button { width: 100%; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .server-head { grid-template-columns: auto 1fr; }
  .online-pill { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   V6 – üzleti, referencia- és kapcsolatfelvételi modulok
   -------------------------------------------------------------------------- */
.configuration-note { margin: 22px 0 0; color: #887d94; font-size: .82rem; }
.patreon-v6-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.patreon-purpose { position: relative; padding: 31px; border: 1px solid rgba(255,115,71,.28); background: linear-gradient(145deg, rgba(38,10,21,.95), rgba(13,7,21,.96)); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.panel-code { display: block; margin-bottom: 36px; color: #936576; font-family: Oxanium,sans-serif; font-size: .62rem; letter-spacing: .16em; }
.patreon-purpose h3 { font-family: Oxanium,sans-serif; font-size: 1.7rem; text-transform: uppercase; }
.check-list { display: grid; gap: 11px; padding: 0; margin: 24px 0 31px; list-style: none; color: #c7bacb; }
.check-list li { position: relative; padding-left: 25px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #ff8566; font-weight: 800; }
.patreon-tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.tier-card { position: relative; min-height: 310px; display: flex; flex-direction: column; padding: 26px; border: 1px solid rgba(255,115,71,.19); background: rgba(255,255,255,.028); clip-path: polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px); }
.tier-card.featured { border-color: rgba(255,115,71,.5); background: linear-gradient(145deg, rgba(94,23,38,.37), rgba(27,10,29,.88)); transform: translateY(-7px); box-shadow: 0 22px 45px rgba(255,70,76,.09); }
.tier-index { color: #a36675; font-family: Oxanium,sans-serif; font-size: .72rem; }
.tier-card h3 { margin: 48px 0 14px; font-family: Oxanium,sans-serif; font-size: 1.15rem; text-transform: uppercase; }
.tier-card p { color: #bcaec2; font-size: .88rem; }
.tier-card a { margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(255,115,71,.15); color: #ff9d82; text-decoration: none; font-weight: 800; font-size: .82rem; }

.projects-section { position: relative; border-top: 1px solid rgba(194,70,255,.14); }
.projects-heading, .services-heading, .latest-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; max-width: none; }
.project-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.project-card { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 320px; border: 1px solid rgba(194,76,255,.2); background: linear-gradient(145deg, rgba(15,7,27,.92), rgba(8,5,16,.96)); overflow: hidden; clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.project-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.04); }
.project-card-body { display: flex; flex-direction: column; padding: 27px; }
.project-status { width: fit-content; padding: 5px 8px; border: 1px solid rgba(85,240,167,.28); color: #78f3b6; font-family: Oxanium,sans-serif; font-size: .58rem; letter-spacing: .12em; }
.project-status.building { border-color: rgba(246,189,87,.3); color: #f6d58b; }
.project-card h3 { margin: 32px 0 12px; font-family: Oxanium,sans-serif; font-size: 1.4rem; text-transform: uppercase; }
.project-card p { color: #aa9db5; font-size: .9rem; }
.project-detail-button { margin-top: auto; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(199,72,255,.16); background: transparent; color: #d795ff; text-align: left; font: inherit; font-weight: 800; cursor: pointer; }

.service-grid-v6 { grid-template-columns: repeat(3,1fr); }
.service-card-v6 { min-height: 390px; display: flex; flex-direction: column; }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(205,72,255,.3); background: rgba(158,31,228,.08); color: #dc9cff; font-family: Oxanium,sans-serif; font-weight: 800; }
.service-card-v6 > span { position: absolute; top: 18px; right: 20px; margin: 0; }
.service-card-v6 ul { display: grid; gap: 7px; padding: 0; margin: 10px 0 22px; list-style: none; color: #91869d; font-size: .8rem; }
.service-card-v6 li::before { content: "+ "; color: #bd4cff; }
.service-card-v6 > a { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(198,70,255,.14); color: #d997ff; text-decoration: none; font-weight: 800; font-size: .84rem; }
.service-cta { background: linear-gradient(145deg, rgba(110,25,169,.33), rgba(20,49,112,.25)); }

.faq-section { border-top: 1px solid rgba(195,69,255,.14); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { font-family: Oxanium,sans-serif; font-size: clamp(2.1rem,4vw,3.7rem); text-transform: uppercase; }
.faq-intro p { color: var(--muted); }
.faq-list { display: grid; gap: 11px; }
.faq-list details { border: 1px solid rgba(195,72,255,.18); background: rgba(14,7,24,.72); }
.faq-list summary { position: relative; padding: 21px 58px 21px 22px; cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #d45cff; font-family: Oxanium,sans-serif; font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 22px 22px; color: #aaa0b4; }

.quote-section { padding-top: 62px; }
.quote-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 42px; align-items: start; }
.quote-copy { position: sticky; top: 120px; }
.quote-copy h2 { font-family: Oxanium,sans-serif; font-size: clamp(2.2rem,4.5vw,4rem); text-transform: uppercase; }
.quote-copy > p { color: var(--muted); }
.quote-contact-card, .response-expectation { margin-top: 25px; padding: 22px; border: 1px solid rgba(200,76,255,.2); background: rgba(255,255,255,.025); }
.quote-contact-card span, .response-expectation strong { display: block; color: #806d8e; font-size: .64rem; letter-spacing: .14em; }
.quote-contact-card a { display: block; margin: 8px 0; color: #e1b1fb; font-family: Oxanium,sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.quote-contact-card p, .response-expectation span { color: #958a9f; font-size: .82rem; }
.quote-form { position: relative; padding: 32px; border: 1px solid rgba(204,75,255,.3); background: linear-gradient(145deg, rgba(17,8,29,.94), rgba(7,5,14,.98)); box-shadow: var(--shadow); clip-path: polygon(19px 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%,0 19px); }
.form-progress { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-bottom: 15px; border-bottom: 1px solid rgba(194,70,255,.17); color: #7f6b8d; font-family: Oxanium,sans-serif; font-size: .62rem; letter-spacing: .12em; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; }
.form-grid label { display: grid; gap: 8px; }
.form-grid label.full { grid-column: 1/-1; }
.form-grid label > span { color: #b6a8bf; font-size: .78rem; font-weight: 700; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; border: 1px solid rgba(194,76,255,.19); background: rgba(3,2,8,.72); color: white; padding: 13px 14px; font: inherit; outline: none; border-radius: 0; }
.quote-form textarea { resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: rgba(211,76,255,.65); box-shadow: 0 0 0 3px rgba(180,43,255,.08); }
.quote-form [aria-invalid="true"] { border-color: #ff5d79; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.consent-row { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0; color: #9e93a8; font-size: .78rem; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-status { min-height: 25px; margin-top: 16px; color: #9f94aa; font-size: .86rem; }
.form-status.success { color: #66f2b0; }
.form-status.error { color: #ff8ea1; }
.turnstile-container { margin: 20px 0; }

.project-dialog { width: min(760px,calc(100% - 28px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid rgba(205,76,255,.42); background: rgba(8,4,15,.98); color: white; box-shadow: 0 38px 100px rgba(0,0,0,.72); }
.project-dialog::backdrop { background: rgba(2,1,5,.78); backdrop-filter: blur(8px); }
.dialog-frame { position: relative; padding: 38px; }
.dialog-close { position: absolute; right: 16px; top: 14px; width: 42px; height: 42px; border: 1px solid rgba(205,76,255,.24); background: transparent; color: white; font-size: 1.5rem; cursor: pointer; }
.dialog-code { color: #8d709e; font-family: Oxanium,sans-serif; font-size: .63rem; letter-spacing: .15em; }
.project-dialog h2 { margin: 18px 0; font-family: Oxanium,sans-serif; font-size: clamp(2rem,5vw,3.4rem); text-transform: uppercase; }
.project-dialog > div > p { color: #b4a8be; }
.dialog-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin: 27px 0; }
.dialog-columns > div { padding: 18px; border: 1px solid rgba(196,71,255,.16); background: rgba(255,255,255,.022); }
.dialog-columns h3 { font-family: Oxanium,sans-serif; text-transform: uppercase; font-size: .9rem; }
.dialog-columns p { color: #a89daf; font-size: .86rem; }
.dialog-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.dialog-tech span { padding: 7px 10px; border: 1px solid rgba(195,72,255,.2); color: #cdb5db; font-size: .72rem; }

.service-page .site-header { position: sticky; background: rgba(5,3,11,.94); border-bottom: 1px solid rgba(200,80,255,.18); }
.service-main { min-height: 100vh; padding: 74px 0 100px; }
.service-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding: 58px 0 80px; }
.service-hero h1 { font-size: clamp(3rem,6vw,5.6rem); }
.service-hero p { color: var(--muted); font-size: 1.04rem; }
.service-hero-panel { padding: 27px; border: 1px solid rgba(201,74,255,.25); background: rgba(15,7,27,.8); }
.service-hero-panel strong { display: block; margin-bottom: 10px; font-family: Oxanium,sans-serif; font-size: 1.2rem; }
.service-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.service-detail-card { padding: 29px; border: 1px solid rgba(198,72,255,.17); background: rgba(255,255,255,.022); }
.service-detail-card h2 { font-family: Oxanium,sans-serif; font-size: 1.45rem; text-transform: uppercase; }
.service-detail-card p, .service-detail-card li { color: #aaa0b3; }
.service-detail-card ul { padding-left: 20px; }
.service-process { margin-top: 70px; }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.process-step { padding: 23px; border-top: 2px solid #b13cff; background: rgba(255,255,255,.022); }
.process-step span { color: #765d84; font-family: Oxanium,sans-serif; font-size: .68rem; }
.process-step h3 { margin: 30px 0 10px; font-family: Oxanium,sans-serif; text-transform: uppercase; font-size: 1rem; }
.process-step p { color: #958b9d; font-size: .82rem; }
.service-page-cta { margin-top: 70px; padding: 38px; border: 1px solid rgba(205,76,255,.28); background: linear-gradient(120deg, rgba(104,20,160,.29), rgba(22,68,145,.22)); }

@media (max-width: 1050px) {
  .patreon-v6-layout, .quote-layout, .faq-layout { grid-template-columns: 1fr; }
  .patreon-tier-grid { grid-template-columns: repeat(3,1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .faq-intro, .quote-copy { position: static; }
  .service-hero { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .patreon-tier-grid, .service-grid-v6 { grid-template-columns: 1fr 1fr; }
  .project-card { grid-template-columns: .75fr 1.25fr; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .projects-heading, .services-heading, .latest-heading { align-items: flex-start; flex-direction: column; }
  .patreon-tier-grid, .service-grid-v6, .form-grid, .service-detail-grid, .dialog-columns, .process-grid { grid-template-columns: 1fr; }
  .tier-card.featured { transform: none; }
  .project-card { display: block; }
  .project-card img { height: 220px; }
  .project-card-body { min-height: 280px; }
  .quote-form { padding: 24px; }
  .dialog-frame { padding: 29px 22px; }
}