/* L2JOne Command Atlas — original visual layer for the Interlude C6 platform. */
:root {
  --bg: #07111f;
  --bg-soft: #0c192b;
  --surface: rgba(13, 29, 49, .88);
  --surface-solid: #0d1d31;
  --surface-2: #142840;
  --line: rgba(117, 209, 233, .20);
  --line-strong: rgba(117, 209, 233, .52);
  --text: #eef6ff;
  --muted: #a5b8ca;
  --muted-2: #70879f;
  --primary: #63d7cf;
  --primary-2: #a8d3ff;
  --cyan: #6ed6ff;
  --success: #70e0b3;
  --warning: #f5bd68;
  --danger: #ef7c91;
  --radius: 18px;
}

html { background: var(--bg); }
body {
  color: var(--text);
  background: var(--bg);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}
body::before {
  background:
    radial-gradient(circle at 8% 5%, rgba(87, 100, 255, .18), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(67, 211, 196, .14), transparent 28%),
    radial-gradient(circle at 66% 76%, rgba(111, 71, 218, .09), transparent 26%),
    linear-gradient(180deg, #07111f 0%, #06101d 47%, #091526 100%);
}
body::after {
  opacity: .38;
  background-image: radial-gradient(rgba(137, 220, 255, .16) .65px, transparent .8px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 66%, transparent 96%);
}

h1, h2, h3, .brand-copy strong, .price-card h3, .page-hero h1 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.container { width: min(100% - 48px, 1240px); }
.section { padding: 116px 0; }
.section-soft { background: transparent; }
.section-label {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow { color: var(--primary); letter-spacing: .16em; }
.eyebrow::before, .eyebrow::after { display: none; }

/* Floating navigation: deliberately different from the reference header. */
.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  width: min(1240px, calc(100% - 28px));
  height: 66px;
  border: 1px solid rgba(131, 214, 236, .18);
  border-radius: 16px;
  background: rgba(7, 17, 31, .76);
  box-shadow: 0 18px 45px rgba(0, 5, 16, .28);
  backdrop-filter: blur(18px) saturate(140%);
  transform: translateX(-50%);
}
.home-page .site-header { position: fixed; }
.site-header.is-scrolled { border-color: rgba(117, 209, 233, .38); background: rgba(7, 17, 31, .94); box-shadow: 0 18px 50px rgba(0, 5, 16, .42); }
.header-inner { min-height: 64px; padding: 0 12px; }
.brand { gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-color: rgba(110, 214, 255, .54); border-radius: 11px; background: linear-gradient(145deg, #173a5e, #0b1d34); box-shadow: inset 0 0 18px rgba(95, 213, 207, .13), 0 0 20px rgba(109, 124, 255, .13); }
.brand-mark::before, .brand-mark::after { border-color: rgba(157, 222, 255, .28); }
.brand-mark span { color: #cbeaff; }
.brand-copy strong { color: #eff8ff; font-size: 18px; letter-spacing: -.04em; }
.brand-copy small { color: #82a8c4; font-size: 8px; letter-spacing: .13em; }
.desktop-nav { gap: 15px; }
.desktop-nav a { color: #93aabf; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: none; }
.desktop-nav a:hover { color: #b8fbf1; }
.language-trigger, .header-whatsapp { color: #a8c2d7; border-color: rgba(110, 214, 255, .18); border-radius: 10px; background: rgba(255,255,255,.025); }
.language-trigger:hover, .header-whatsapp:hover { color: #d5fffb; border-color: rgba(99, 215, 207, .58); background: rgba(99, 215, 207, .09); }
.mobile-menu { border-color: rgba(110, 214, 255,.18); border-radius: 14px; background: #0a1728; }
.mobile-menu a { color: #c9d8e5; border-color: rgba(110, 214, 255,.12); }

.button { min-height: 44px; border-radius: 11px; font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.button-primary { color: #05131b; border-color: #8dece0; background: linear-gradient(135deg, #a3f2e9, #63d7cf 52%, #6aa8ff); box-shadow: 0 14px 28px rgba(81, 209, 198, .20), inset 0 1px rgba(255,255,255,.58); }
.button-primary:hover { color: #031017; background: linear-gradient(135deg, #d0fff8, #82e7de 50%, #90bcff); box-shadow: 0 18px 38px rgba(79, 204, 196, .34); }
.button-ghost, .button-secondary { color: #c9e9ff; border-color: rgba(125, 194, 255, .30); background: rgba(17, 42, 69, .54); }
.button-ghost:hover, .button-secondary:hover { color: #ecffff; border-color: rgba(99, 215, 207, .70); background: rgba(56, 107, 146, .36); }

/* Hero — a command blueprint instead of the reference's crest/ring composition. */
.citadel-hero { position: relative; min-height: 850px; overflow: hidden; padding: 160px 0 152px; }
.citadel-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,17,31,.96) 5%, rgba(7,17,31,.50) 54%, rgba(7,17,31,.86) 100%), linear-gradient(0deg, #07111f, transparent 30%); }
.citadel-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(117,209,233,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(117,209,233,.10) 1px, transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(105deg, transparent 20%, #000 54%, transparent 96%); }
.citadel-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(405px, .82fr); align-items: center; gap: 72px; }
.citadel-hero-copy { max-width: 730px; }
.citadel-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; color: #b8fbf1; border: 1px solid rgba(99, 215, 207, .38); border-radius: 999px; background: rgba(52, 138, 159, .13); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.citadel-kicker svg { width: 15px; }
.citadel-hero h1 { max-width: 780px; margin: 24px 0 24px; color: #eff8ff; font-size: clamp(48px, 6.35vw, 82px); font-weight: 700; letter-spacing: -.065em; line-height: .98; text-transform: none; text-wrap: balance; }
.citadel-hero h1 em { display: block; margin-top: 7px; color: #74ddd3; font-style: normal; }
.citadel-hero-copy > p { max-width: 650px; margin: 0; color: #afc1d2; font-size: 16px; line-height: 1.82; }
.citadel-actions { margin-top: 33px; }
.citadel-proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; color: #9db5c8; font-size: 10px; }
.citadel-proof-row span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(127, 183, 224, .16); border-radius: 8px; background: rgba(13, 35, 58, .44); }
.citadel-proof-row svg { width: 13px; color: #70e0b3; }
.citadel-aurora { position: absolute; pointer-events: none; filter: blur(16px); }
.citadel-aurora-left { width: 460px; height: 460px; top: 250px; left: -270px; border-radius: 50%; background: rgba(78, 89, 255, .25); }
.citadel-aurora-right { width: 490px; height: 490px; top: 50px; right: -205px; border-radius: 50%; background: rgba(54, 218, 199, .18); }
.citadel-coordinate { position: absolute; z-index: 1; color: rgba(152, 212, 255, .36); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .16em; }
.citadel-coordinate-a { bottom: 72px; left: max(24px, calc((100% - 1240px) / 2)); }
.citadel-coordinate-b { top: 135px; right: max(24px, calc((100% - 1240px) / 2)); writing-mode: vertical-rl; }

.citadel-blueprint { position: relative; overflow: hidden; min-height: 500px; padding: 23px; border: 1px solid rgba(115, 208, 233, .35); border-radius: 24px 6px 24px 6px; background: linear-gradient(145deg, rgba(19, 48, 77, .96), rgba(8, 22, 39, .98)); box-shadow: 24px 28px 0 rgba(98, 101, 255, .08), 0 30px 70px rgba(0, 4, 16, .34); isolation: isolate; }
.citadel-blueprint::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .54; background-image: linear-gradient(135deg, transparent 49.7%, rgba(112,215,255,.13) 50%, transparent 50.3%), linear-gradient(45deg, transparent 49.7%, rgba(112,215,255,.09) 50%, transparent 50.3%); background-size: 74px 74px; }
.citadel-blueprint::after { content: ""; position: absolute; z-index: -1; right: -82px; bottom: -100px; width: 300px; height: 300px; border: 1px solid rgba(118, 222, 221, .26); border-radius: 28px; background: linear-gradient(135deg, rgba(86, 99, 255, .15), transparent); transform: rotate(28deg); }
.blueprint-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(142, 213, 240, .20); color: #9fc2dd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .10em; text-transform: uppercase; }
.blueprint-bar span { display: inline-flex; align-items: center; gap: 7px; }.blueprint-bar svg { width: 14px; color: #72dfd1; }
.blueprint-state { color: #aaffd6; }.blueprint-state svg { color: #70e0b3; }
.blueprint-intro { display: flex; align-items: center; gap: 17px; padding: 29px 0 24px; }
.blueprint-token { display: grid; width: 88px; height: 88px; place-items: center; color: #061725; border: 1px solid #9bfbef; border-radius: 18px 4px 18px 4px; background: linear-gradient(145deg, #b8fff1, #64d7cf); box-shadow: 0 0 0 8px rgba(99,215,207,.09); font-family: "Space Grotesk", sans-serif; font-size: 29px; font-weight: 700; letter-spacing: -.08em; }
.blueprint-intro strong { display: block; color: #edf8ff; font-family: "Space Grotesk", sans-serif; font-size: 26px; letter-spacing: -.055em; }.blueprint-intro div > span { display: block; margin-top: 7px; color: #85b0cb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .16em; }
.blueprint-specs { display: grid; gap: 10px; margin: 0; }
.blueprint-specs > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 15px; border: 1px solid rgba(139, 210, 238, .15); border-radius: 12px; background: rgba(5, 19, 35, .44); }
.blueprint-specs dt { display: inline-flex; align-items: center; gap: 9px; color: #9bb7ca; font-size: 10px; font-weight: 700; }.blueprint-specs dt svg { width: 15px; color: #71dbd0; }
.blueprint-specs dd { margin: 0; color: #d8efff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; text-align: right; }
.blueprint-footer { position: absolute; right: 23px; bottom: 20px; left: 23px; display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(142, 213, 240, .20); color: #6f97b4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .10em; }

.citadel-stats-strip { position: relative; z-index: 2; margin-top: -73px; }
.citadel-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.citadel-stats-grid > div { display: grid; align-content: center; min-height: 116px; padding: 21px 23px; border: 1px solid rgba(126, 204, 235, .23); border-radius: 14px; background: rgba(10, 28, 47, .92); box-shadow: 0 18px 38px rgba(0, 5, 17, .20); }
.citadel-stats-grid strong { color: #8eeae1; font-family: "Space Grotesk", sans-serif; font-size: 31px; letter-spacing: -.06em; }.citadel-stats-grid span { margin-top: 7px; color: #8ba9bd; font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }

/* Modular content surface. */
.modules-section { padding-top: 134px; }
.l2j-section-heading { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; width: min(910px, 100%); margin: 0 0 48px; text-align: left; }
.l2j-section-heading-row { grid-template-columns: minmax(0, 1fr) auto; width: 100%; align-items: end; }
.l2j-section-heading h2 { max-width: 800px; margin: 8px 0 12px; color: #edf7ff; font-size: clamp(33px, 4vw, 54px); letter-spacing: -.055em; line-height: 1.04; text-transform: none; }
.l2j-section-heading p { max-width: 710px; margin: 0; color: #9eb4c6; font-size: 14px; line-height: 1.78; }
.section-index { display: grid; min-height: 55px; align-content: start; padding-top: 4px; color: #75ded4; border-right: 1px solid rgba(116, 222, 212, .42); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: -.04em; }
.module-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.module-card { position: relative; grid-column: span 4; min-height: 265px; overflow: hidden; padding: 26px; border: 1px solid rgba(132, 198, 235, .20); border-radius: 18px; background: linear-gradient(145deg, rgba(17, 42, 69, .93), rgba(9, 25, 43, .96)); box-shadow: 0 18px 42px rgba(0, 4, 15, .15); }
.module-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #65d9cf, #79a9ff, transparent); opacity: .68; }
.module-card:nth-child(1) { grid-column: span 8; min-height: 302px; background: linear-gradient(118deg, rgba(18, 55, 85, .97), rgba(11, 29, 51, .97)); }
.module-card:nth-child(1) ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.module-card:nth-child(2)::before, .module-card:nth-child(5)::before, .module-card:nth-child(8)::before { background: linear-gradient(90deg, #9e84ff, #72c7ff, transparent); }
.module-card:nth-child(3)::before, .module-card:nth-child(6)::before, .module-card:nth-child(9)::before { background: linear-gradient(90deg, #6de5ae, #6ed6ff, transparent); }
.module-card:hover { transform: translateY(-6px); border-color: rgba(121, 221, 213, .56); box-shadow: 0 26px 54px rgba(0, 5, 17, .28); }
.module-number { position: absolute; top: 18px; left: 23px; color: rgba(166, 217, 246, .32); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; }
.module-icon { position: absolute; top: 22px; right: 23px; display: grid; width: 40px; height: 40px; place-items: center; color: #82e9df; border: 1px solid rgba(112, 222, 215, .30); border-radius: 12px 4px 12px 4px; background: rgba(88, 196, 191, .09); }.module-icon svg { width: 19px; }
.module-card h3 { max-width: 290px; margin: 48px 0 18px; color: #eaf7ff; font-size: 20px; letter-spacing: -.04em; }.module-card ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }.module-card li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; color: #a8bdce; font-size: 12px; line-height: 1.46; }.module-card li svg { width: 14px; color: #71ddd3; }

.l2j-security-section { padding-top: 0; }.l2j-security-panel { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(260px, .58fr); align-items: center; gap: 34px; padding: 34px 38px; border: 1px solid rgba(123, 190, 252, .24); border-radius: 18px; background: linear-gradient(120deg, rgba(24, 45, 93, .76), rgba(9, 25, 44, .92)); box-shadow: 0 24px 58px rgba(0, 4, 17, .22); }.l2j-security-mark { display: grid; width: 76px; height: 76px; place-items: center; color: #a5a2ff; border: 1px solid rgba(167, 156, 255, .40); border-radius: 18px 4px 18px 4px; background: rgba(109, 90, 231, .14); }.l2j-security-mark svg { width: 34px; }.l2j-security-panel h2 { margin: 9px 0 10px; color: #eff8ff; font-size: 26px; letter-spacing: -.05em; }.l2j-security-panel p { margin: 0; color: #a8bdce; font-size: 13px; line-height: 1.72; }.l2j-security-panel ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }.l2j-security-panel li { display: grid; grid-template-columns: 17px 1fr; gap: 8px; color: #bed0dd; font-size: 12px; line-height: 1.45; }.l2j-security-panel li svg { width: 15px; color: #70e0b3; }

.l2j-video-section { background: linear-gradient(180deg, rgba(65, 112, 180, .08), transparent 85%); }.video-grid { gap: 18px; }.video-card { border-color: rgba(122, 206, 236, .22); border-radius: 17px; background: rgba(10, 27, 47, .91); box-shadow: 0 18px 38px rgba(0, 5, 16, .18); }.video-card:hover { border-color: rgba(99, 215, 207, .65); box-shadow: 0 26px 54px rgba(0, 5, 16, .32); }.video-thumbnail { background: #0a1d32; }.video-thumbnail::after { background: linear-gradient(180deg, transparent 42%, rgba(5, 14, 27, .74)); }.video-thumbnail > svg { color: #eaffff; border-color: rgba(161, 255, 245, .75); background: rgba(24, 98, 114, .88); }.video-card-copy { min-height: 138px; }.video-card-copy time { color: #73d9d0; }.video-card-copy strong { color: #e9f7ff; }.video-card-copy > span:last-child { color: #8fdcff; }.video-empty { color: #a9bfce; border-color: var(--line); border-radius: 17px; background: rgba(10, 27, 47, .66); }.video-empty svg { color: #72dfd1; }

.l2j-updates-section { border-top: 0; }.release-card, .l2j-release-grid .release-card { border-color: rgba(121, 196, 233, .20); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 39, 65, .92), rgba(9, 23, 39, .94)); }.release-card:hover, .release-card.is-featured { border-color: rgba(112, 222, 211, .52); background: linear-gradient(145deg, rgba(20, 53, 84, .95), rgba(10, 27, 46, .98)); }.release-version { color: #071722; background: #7be4da; }.release-card time { color: #86a7bf; }.release-card h3 { color: #edf8ff; }.release-card p { color: #a8bdce; }.text-link { color: #7ce3d8; }.text-link:hover { color: #c9fff9; }
.server-card { border-color: rgba(121, 196, 233, .20); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 39, 65, .92), rgba(9, 23, 39, .94)); }.server-card:hover { border-color: rgba(112, 222, 211, .52); background: linear-gradient(145deg, rgba(20, 53, 84, .95), rgba(10, 27, 46, .98)); }.server-logo { color: #72dfd1; border-color: rgba(112, 222, 211, .28); border-radius: 12px; background: rgba(67, 191, 183, .10); }.server-body h3 { color: #edf8ff; }.server-body p { color: #a8bdce; }

.l2j-pricing-section { background: linear-gradient(180deg, rgba(101, 92, 235, .10), transparent 88%); }.l2j-pricing-grid { align-items: stretch; }.price-card { border-color: rgba(126, 193, 238, .24); border-radius: 18px; background: linear-gradient(160deg, rgba(17, 43, 70, .96), rgba(8, 22, 39, .97)); }.price-card.is-popular { border-color: rgba(111, 223, 212, .76); box-shadow: 0 28px 68px rgba(49, 150, 170, .16), inset 0 1px rgba(205,255,248,.10); }.popular-tag { color: #05222a; background: #84e9df; }.price-card h3 { color: #eff8ff; }.price-card > p, .update-period { color: #9db6c9; }.price { color: #8fe8df; }.plan-list { border-color: rgba(135, 205, 239, .16); }.plan-list li { color: #aec3d3; }.plan-list svg { color: #72dfd1; }.l2j-delivery-rule { border-color: rgba(111, 223, 212, .31); border-radius: 15px; background: rgba(56, 154, 148, .10); }.l2j-delivery-rule > svg { color: #7ce3d8; }.commercial-rule strong { color: #ecfbff; }.commercial-rule p { color: #abc1d2; }

.l2j-faq-section { padding-top: 84px; }.faq-list { max-width: 950px; margin: 0; }.faq-item { border-color: rgba(122, 196, 234, .20); border-radius: 14px; background: rgba(10, 28, 47, .82); }.faq-item[open] { border-color: rgba(112, 222, 211, .50); background: rgba(14, 38, 63, .93); }.faq-item summary { color: #dff1ff; font-family: "Space Grotesk", sans-serif; font-size: 14px; }.faq-item summary svg { color: #72dfd1; }.faq-answer { color: #a9bfce; }
.l2j-cta-section { padding-top: 34px; }.l2j-cta { overflow: hidden; border-color: rgba(117, 209, 233, .38); border-radius: 20px; background: linear-gradient(125deg, rgba(23, 49, 89, .96), rgba(8, 25, 43, .98)); }.l2j-cta::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 330px; height: 330px; border: 1px solid rgba(118, 222, 221, .24); border-radius: 34px; background: linear-gradient(135deg, rgba(98, 105, 255, .17), transparent); transform: rotate(30deg); }.l2j-cta h2 { color: #edf8ff; }.l2j-cta p { color: #abc1d2; }

/* Secondary pages, VPS and footer share the same L2JOne identity. */
.page-hero { border-color: rgba(118, 204, 237, .18); background: linear-gradient(180deg, rgba(32, 67, 109, .66), rgba(7, 17, 31, .14)); }.page-hero::after { border-color: rgba(111, 223, 212, .16); box-shadow: 0 0 0 80px rgba(74, 106, 255, .045), 0 0 0 160px rgba(88, 216, 207, .025); }.page-hero h1 { color: #eff8ff; }.page-hero p { color: #a9bfce; }.panel-card, .plan-summary, .gateway-panel, .auth-card, .form-card { border-color: rgba(122, 196, 234, .18); border-radius: 17px; background: linear-gradient(150deg, rgba(15, 39, 65, .92), rgba(8, 22, 39, .93)); }.field input, .field textarea, .field select, .catalog-search input { color: #e8f5ff; border-color: rgba(121, 196, 233, .23); background: rgba(5, 17, 30, .62); }.field input:focus, .field textarea:focus, .field select:focus, .catalog-search input:focus { border-color: rgba(112, 222, 211, .68); box-shadow: 0 0 0 3px rgba(99, 215, 207, .11); }.alert { border-color: rgba(121, 196, 233, .24); background: rgba(19, 53, 83, .86); }
.vps-hero { padding-bottom: 96px; }.vps-section { padding-top: 82px; }.vps-plan-grid { gap: 18px; }.vps-plan-card { border-color: rgba(122, 196, 234, .26); border-radius: 18px; background: rgba(10, 28, 47, .93); box-shadow: 0 18px 42px rgba(0, 5, 16, .19); }.vps-plan-card:hover { border-color: rgba(112, 222, 211, .68); box-shadow: 0 28px 56px rgba(0, 5, 16, .32); }.vps-plan-main { background: linear-gradient(145deg, rgba(22, 58, 88, .94), rgba(10, 28, 47, .98)); }.vps-plan-main::after { right: -42px; top: -68px; border-color: rgba(121, 229, 219, .18); border-radius: 24px; background: linear-gradient(135deg, rgba(96, 105, 255, .12), transparent); box-shadow: none; transform: rotate(28deg); }.vps-plan-label { color: #06232b; border-radius: 7px; background: #8debe1; }.vps-plan-card h2 { color: #eff8ff; }.vps-from { color: #9db6c9; }.vps-price strong { color: #8ce8df; }.vps-price span { color: #88a8bf; }.vps-plan-details { background: rgba(3, 15, 27, .26); }.vps-plan-details li { color: #b4c6d3; }.vps-plan-details svg { color: #72dfd1; }.vps-plan-details strong { color: #e6f5ff; }.vps-plan-gold { border-color: rgba(112, 222, 211, .70); }.vps-plan-gold .vps-plan-main { background: linear-gradient(145deg, rgba(27, 74, 93, .96), rgba(10, 30, 48, .98)); }.vps-plan-ember .vps-plan-main { background: linear-gradient(145deg, rgba(38, 49, 103, .96), rgba(11, 26, 49, .98)); }.hostinger-promo { border-color: rgba(112, 222, 211, .32); border-radius: 18px; background: linear-gradient(125deg, rgba(20, 57, 79, .90), rgba(8, 24, 42, .94)); }.hostinger-promo-mark { color: #8fe8df; border-color: rgba(112, 222, 211, .42); border-radius: 17px; background: rgba(59, 185, 177, .10); }.hostinger-promo-copy h2 { color: #eff8ff; }.hostinger-promo-copy p { color: #b1c6d6; }.hostinger-promo-copy small { color: #89a5ba; }
.site-footer { border-color: rgba(122, 196, 234, .16); background: #050e1a; }.footer-grid h3 { color: #8debe1; }.footer-brand p, .footer-grid a:not(.brand):not(.social-links a) { color: #91aabd; }.footer-grid a:hover { color: #c9fff9; }.social-links a { color: #7ce3d8; border-color: rgba(112, 222, 211, .20); border-radius: 10px; background: rgba(57, 175, 167, .10); }.footer-bottom { border-color: rgba(122, 196, 234, .14); color: #71899d; }.site-preview-banner { color: #04151c; border-color: #a5fbf0; border-radius: 12px; background: #79ddd3; box-shadow: 0 14px 34px rgba(0,5,16,.35); }

@media (max-width: 1080px) {
  .desktop-nav { gap: 10px; }.desktop-nav a { font-size: 9px; }
  .citadel-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .78fr); gap: 38px; }
  .module-card { padding: 23px; }.l2j-security-panel { grid-template-columns: 72px 1fr; }.l2j-security-panel ul { grid-column: 2; }
}
@media (max-width: 880px) {
  .container { width: min(100% - 32px, 1240px); }
  .site-header { top: 10px; width: calc(100% - 20px); height: 64px; }.header-inner { min-height: 62px; }.desktop-nav, .header-buy { display: none; }.menu-toggle { display: grid; color: #a9f4eb; border-color: rgba(112,222,211,.32); background: rgba(38, 123, 132, .18); }
  .citadel-hero { min-height: 0; padding: 132px 0 132px; }.citadel-hero-grid { grid-template-columns: 1fr; gap: 42px; }.citadel-hero-copy { margin: 0 auto; text-align: center; }.citadel-actions, .citadel-proof-row { justify-content: center; }.citadel-blueprint { width: min(100%, 610px); min-height: 470px; margin: 0 auto; }
  .citadel-stats-grid { grid-template-columns: 1fr 1fr; }.citadel-stats-grid > div { min-height: 100px; }
  .module-card, .module-card:nth-child(1) { grid-column: span 6; min-height: 265px; }.module-card:nth-child(1) ul { grid-template-columns: 1fr; }
  .l2j-security-panel { grid-template-columns: 76px 1fr; padding: 30px; }.l2j-security-panel ul { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }.l2j-section-heading-row { align-items: start; flex-direction: row; }
}
@media (max-width: 620px) {
  .container { width: calc(100% - 26px); }.section { padding: 78px 0; }.language-trigger { color: #a9f4eb; }.header-whatsapp { display: none; }.brand-copy small { display: none; }
  .citadel-hero { padding: 112px 0 108px; }.citadel-hero h1 { font-size: 45px; line-height: 1.0; }.citadel-hero-copy > p { font-size: 14px; }.citadel-actions { display: grid; }.citadel-actions .button { width: 100%; }.citadel-proof-row { gap: 8px; }.citadel-coordinate { display: none; }.citadel-blueprint { min-height: 455px; padding: 18px; border-radius: 18px 4px 18px 4px; }.blueprint-intro { gap: 14px; }.blueprint-token { width: 72px; height: 72px; font-size: 25px; }.blueprint-intro strong { font-size: 23px; }.blueprint-specs > div { padding: 12px; }.blueprint-footer { right: 18px; bottom: 16px; left: 18px; font-size: 8px; }
  .citadel-stats-strip { margin-top: -52px; }.citadel-stats-grid { gap: 8px; }.citadel-stats-grid > div { min-height: 87px; padding: 16px; }.citadel-stats-grid strong { font-size: 25px; }.citadel-stats-grid span { font-size: 8px; }
  .modules-section { padding-top: 94px; }.l2j-section-heading { grid-template-columns: 1fr; gap: 10px; margin-bottom: 34px; }.l2j-section-heading-row { display: flex; flex-direction: column; }.l2j-section-heading h2 { font-size: 31px; }.l2j-section-heading p { font-size: 13px; }.section-index { display: block; min-height: 0; padding: 0 0 9px; border-right: 0; border-bottom: 1px solid rgba(116,222,212,.42); font-size: 13px; }
  .module-grid { grid-template-columns: 1fr; gap: 13px; }.module-card, .module-card:nth-child(1) { grid-column: auto; min-height: 0; }.module-card { padding: 23px; }.module-card h3 { font-size: 19px; }
  .l2j-security-section { padding-top: 0; }.l2j-security-panel { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; text-align: center; }.l2j-security-mark { margin: auto; }.l2j-security-panel ul { grid-column: auto; grid-template-columns: 1fr; text-align: left; }
  .video-grid { grid-template-columns: 1fr; }.l2j-faq-section { padding-top: 56px; }.l2j-cta-section { padding-top: 25px; }.l2j-cta .cta-actions { display: grid; }.l2j-cta .button { width: 100%; }
  .vps-section { padding-top: 52px; }.vps-plan-grid { grid-template-columns: 1fr; }.vps-plan-card:last-child { grid-column: auto; width: auto; }.hostinger-promo { grid-template-columns: 1fr; gap: 19px; padding: 27px 22px; text-align: center; }.hostinger-promo-mark { margin: auto; }.hostinger-promo .button { grid-column: auto; justify-self: stretch; }
}

/* Public capability catalog: functional information without source-tree exposure. */
.catalog-public-hero { padding-bottom: 86px; }
.catalog-safety-note { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 760px; margin-top: 26px; padding: 12px 14px; color: #b7d0df; border: 1px solid rgba(117, 209, 233, .24); border-radius: 12px; background: rgba(7, 25, 43, .54); font-size: 11px; line-height: 1.55; }
.catalog-safety-note svg { width: 17px; flex: 0 0 auto; margin-top: 1px; color: #78e1d3; }
.catalog-public-section { padding-top: 66px; }
.catalog-public-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.catalog-public-tabs a { display: flex; align-items: center; justify-content: center; min-height: 58px; gap: 9px; padding: 11px 13px; text-align: center; }
.catalog-public-tabs a span { line-height: 1.25; }
.catalog-public-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 26px; padding: 25px 28px; border: 1px solid rgba(117, 209, 233, .20); border-radius: 18px; background: linear-gradient(120deg, rgba(19, 49, 78, .82), rgba(9, 23, 40, .87)); }
.catalog-public-intro-icon { display: grid; width: 50px; height: 50px; place-items: center; color: #85ece1; border: 1px solid rgba(112, 222, 211, .32); border-radius: 14px 5px 14px 5px; background: rgba(65, 176, 170, .10); }
.catalog-public-intro-icon svg { width: 23px; }
.catalog-public-intro h2 { margin: 7px 0 7px; color: #ecf8ff; font-size: 27px; letter-spacing: -.05em; }
.catalog-public-intro p { max-width: 740px; margin: 0; color: #acc2d2; font-size: 13px; line-height: 1.7; }
.catalog-public-toolbar { align-items: center; min-height: 70px; padding: 0 0 3px; }
.catalog-public-toolbar .catalog-note { max-width: 480px; margin: 0; color: #8eaabd; font-size: 11px; line-height: 1.65; }
.catalog-public-entry { border-color: rgba(119, 202, 234, .20); background: linear-gradient(125deg, rgba(15, 39, 65, .88), rgba(8, 22, 39, .92)); }
.catalog-public-entry:hover { border-color: rgba(118, 224, 213, .48); }
.catalog-public-entry[open] { border-color: rgba(111, 223, 212, .58); background: linear-gradient(125deg, rgba(18, 50, 77, .95), rgba(9, 27, 46, .98)); }
.catalog-public-entry .catalog-entry-icon { color: #8debe1; border-color: rgba(111, 223, 212, .25); background: rgba(64, 185, 175, .10); }
.catalog-public-entry .catalog-entry-copy small { color: #88ddd5; }
.catalog-public-entry .catalog-entry-copy strong { color: #edf8ff; }
.catalog-public-entry .catalog-entry-copy span { color: #a5bfce; }
.catalog-public-entry .catalog-entry-body { grid-template-columns: minmax(0, 760px); padding-bottom: 24px; }
.catalog-public-entry .catalog-entry-body p { color: #b5cbda; line-height: 1.8; }
.catalog-public-pagination { justify-content: space-between; gap: 12px; }
.catalog-public-pagination .button { min-width: 124px; }

.vps-catalog-section { padding-top: 0; }
.vps-catalog-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 25px; padding: 30px 34px; border: 1px solid rgba(116, 215, 209, .28); border-radius: 19px; background: linear-gradient(120deg, rgba(15, 52, 75, .83), rgba(8, 24, 42, .93)); box-shadow: 0 22px 54px rgba(0, 5, 16, .18); }
.vps-catalog-mark { display: grid; width: 62px; height: 62px; place-items: center; color: #89ece2; border: 1px solid rgba(112, 222, 211, .34); border-radius: 17px 5px 17px 5px; background: rgba(64, 185, 175, .11); }
.vps-catalog-mark svg { width: 29px; }
.vps-catalog-card h2 { margin: 7px 0 8px; color: #edf8ff; font-size: 25px; letter-spacing: -.05em; }
.vps-catalog-card p { max-width: 760px; margin: 0; color: #afc5d4; font-size: 12px; line-height: 1.72; }

@media (max-width: 1080px) {
  .catalog-public-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .catalog-public-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .catalog-public-tabs a { min-width: 0; }
  .catalog-public-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
  .catalog-public-toolbar .catalog-note { max-width: none; }
  .vps-catalog-card { grid-template-columns: 1fr; padding: 27px 23px; text-align: center; }
  .vps-catalog-mark { margin: auto; }
  .vps-catalog-card .button { justify-self: stretch; }
}
@media (max-width: 500px) {
  .catalog-public-hero { padding-bottom: 64px; }
  .catalog-safety-note { font-size: 10px; }
  .catalog-public-intro { grid-template-columns: 1fr; padding: 22px; }
  .catalog-public-intro h2 { font-size: 24px; }
  .catalog-public-entry .catalog-entry-body { padding-right: 18px; padding-left: 62px; }
  .catalog-public-pagination { justify-content: center; }
}

/*
 * Chronicle presentation for the public L2JOne home page.
 * It deliberately keeps the project visual distinct: an obsidian journal,
 * archival gold typography and cyan technical accents rather than a copy of
 * any third-party game-server storefront.
 */
.home-page { --chronicle-ink: #070504; --chronicle-wine: #170707; --chronicle-panel: #120b09; --chronicle-panel-2: #1c100c; --chronicle-gold: #dfad42; --chronicle-gold-light: #f7d37b; --chronicle-paper: #fff4df; --chronicle-muted: #c8ad8e; --chronicle-line: rgba(217, 166, 61, .24); }
.home-page body, body.home-page { background: var(--chronicle-ink); }
.home-page::before, body.home-page::before { opacity: 1; background: radial-gradient(circle at 10% 7%, rgba(113, 21, 18, .20), transparent 30%), radial-gradient(circle at 86% 16%, rgba(116, 69, 18, .16), transparent 25%), linear-gradient(180deg, #090504 0%, #140605 44%, #080504 100%); }
.home-page::after, body.home-page::after { opacity: .19; background-image: radial-gradient(rgba(233, 194, 111, .22) .55px, transparent .7px); background-size: 23px 23px; }
.home-page .site-header { border-color: rgba(225, 174, 72, .17); background: rgba(9, 5, 4, .83); box-shadow: 0 18px 48px rgba(0, 0, 0, .44); }
.home-page .site-header.is-scrolled { border-color: rgba(239, 189, 75, .42); background: rgba(9, 5, 4, .96); }
.home-page .brand-mark { border-color: rgba(238, 184, 71, .55); background: linear-gradient(145deg, #5e260f, #b96825 54%, #ecb84f); box-shadow: inset 0 0 13px rgba(255,248,217,.25), 0 0 22px rgba(217, 128, 34, .13); }
.home-page .brand-mark span { color: #fff6e3; }.home-page .brand-copy strong { color: #fff3dd; }.home-page .brand-copy small, .home-page .desktop-nav a { color: #c2a98c; }.home-page .desktop-nav a:hover { color: #ffda83; }
.home-page .language-trigger, .home-page .header-whatsapp { color: #d9c1a2; border-color: rgba(224, 171, 62, .22); background: rgba(94, 45, 10, .10); }.home-page .language-trigger:hover, .home-page .header-whatsapp:hover { color: #fff1d1; border-color: rgba(239, 188, 72, .60); background: rgba(193, 117, 19, .12); }
.home-page .button { border-radius: 7px; }.home-page .button-primary { color: #241005; border-color: #f3cb6c; background: linear-gradient(135deg, #fff0b9 0%, #f4c353 36%, #b46017 100%); box-shadow: 0 14px 30px rgba(181, 91, 13, .25), inset 0 1px rgba(255,255,255,.45); }.home-page .button-primary:hover { color: #160804; background: linear-gradient(135deg, #fff1b9, #f8cc61 44%, #cc751f); box-shadow: 0 19px 42px rgba(191, 91, 10, .40); }.home-page .button-ghost, .home-page .button-secondary { color: #f5d38b; border-color: rgba(230, 177, 67, .42); background: rgba(51, 23, 11, .50); }.home-page .button-ghost:hover, .home-page .button-secondary:hover { color: #fff4dd; border-color: rgba(251, 204, 93, .82); background: rgba(121, 62, 16, .32); }

.chronicle-hero { position: relative; min-height: 780px; overflow: hidden; padding: 154px 0 106px; background: linear-gradient(106deg, rgba(15, 5, 4, .98) 0%, rgba(24, 7, 5, .92) 49%, rgba(9, 5, 4, .92) 100%); isolation: isolate; }
.chronicle-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(6,4,3,.24), transparent 46%, rgba(6,4,3,.54)), radial-gradient(ellipse 58% 98% at 92% 56%, rgba(109, 53, 13, .17), transparent 66%); }
.chronicle-noise { position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: repeating-linear-gradient(113deg, rgba(255, 217, 142, .055) 0 1px, transparent 1px 9px); mask-image: linear-gradient(90deg, #000, transparent 78%); }
.chronicle-orbit { position: absolute; z-index: -1; border: 1px solid rgba(224, 171, 64, .18); border-radius: 50%; pointer-events: none; }
.chronicle-orbit-a { top: 96px; right: -170px; width: 690px; height: 690px; box-shadow: 0 0 0 22px rgba(218, 159, 55, .035), 0 0 0 52px rgba(218, 159, 55, .025); }.chronicle-orbit-b { top: 178px; right: 67px; width: 450px; height: 450px; border-style: dashed; transform: rotate(17deg); }
.chronicle-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .98fr) minmax(390px, .84fr); align-items: center; gap: 48px; }.chronicle-copy { max-width: 700px; }
.chronicle-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; color: #f7ce73; border: 1px solid rgba(233, 179, 66, .44); border-radius: 5px; background: rgba(93, 37, 10, .30); box-shadow: inset 0 0 18px rgba(218, 153, 46, .08); font-size: 10px; font-weight: 800; letter-spacing: .17em; }.chronicle-badge svg { width: 14px; }
.chronicle-stars { display: block; margin-top: 24px; color: #f5be3f; font-size: 17px; letter-spacing: 5px; text-shadow: 0 0 17px rgba(243, 176, 44, .24); }
.chronicle-copy h1, .chronicle-section-head h2, .chronicle-plan h3, .partner-showcase h2, .monthly-update-panel h3, .comparison-title h3 { font-family: Georgia, "Times New Roman", serif; }
.chronicle-copy h1 { max-width: 690px; margin: 12px 0 22px; color: var(--chronicle-paper); font-size: clamp(49px, 6vw, 83px); font-weight: 800; letter-spacing: -.055em; line-height: .91; text-transform: uppercase; text-wrap: balance; }.chronicle-copy h1 em { color: var(--chronicle-gold); font-style: normal; text-shadow: 0 6px 25px rgba(164, 88, 13, .18); }
.chronicle-copy > p { max-width: 610px; margin: 0; color: #d5baa0; font-size: 15px; line-height: 1.85; }.chronicle-actions { margin-top: 30px; }.chronicle-proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; color: #c3a686; font-size: 10px; }.chronicle-proof-row span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-left: 2px solid rgba(234, 181, 66, .60); background: rgba(46, 17, 9, .35); }.chronicle-proof-row svg { width: 14px; color: #e6b443; }
.chronicle-book-stage { position: relative; display: grid; min-height: 560px; place-items: center; }.chronicle-book-glow { position: absolute; width: min(84%, 430px); aspect-ratio: 1; border: 1px solid rgba(236, 177, 61, .25); border-radius: 50%; background: radial-gradient(circle, rgba(227, 149, 35, .16), rgba(4, 16, 27, .08) 44%, transparent 69%); box-shadow: 0 0 0 25px rgba(209, 144, 42, .025), 0 0 90px rgba(205, 121, 25, .14); }.chronicle-book-stage::before { position: absolute; width: min(95%, 520px); height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(239, 185, 75, .5), transparent); transform: rotate(-16deg); }
.chronicle-book { position: relative; z-index: 1; width: min(100%, 450px); max-height: 555px; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(22px 32px 30px rgba(0, 0, 0, .48)) saturate(.94); transform: translateY(0) rotate(-2deg); transition: transform .4s ease, filter .4s ease; }.chronicle-book-stage:hover .chronicle-book { filter: drop-shadow(26px 38px 39px rgba(0,0,0,.62)) saturate(1.04); transform: translateY(-7px) rotate(1deg); }

/* Keep the hero balanced on very wide desktop screens while preserving the
   compact two-column composition on ordinary laptop widths. */
@media (min-width: 1500px) {
  .chronicle-hero-grid { width: min(1380px, calc(100% - 96px)); grid-template-columns: minmax(0, 1fr) minmax(440px, .78fr); gap: 64px; }
  .chronicle-book-stage { transform: translateX(-24px); }
  .chronicle-orbit-a { right: -96px; }
  .chronicle-orbit-b { right: 105px; }
}

.chronicle-history { position: relative; z-index: 2; margin-top: -1px; padding-bottom: 78px; background: linear-gradient(180deg, rgba(12,5,4,.96), rgba(10,5,4,.92)); }.chronicle-history-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--chronicle-line); border-radius: 14px; background: linear-gradient(110deg, rgba(43, 17, 8, .92), rgba(16, 8, 6, .98)); box-shadow: 0 24px 55px rgba(0,0,0,.25); }.chronicle-history-grid article { min-height: 124px; padding: 28px 30px; border-right: 1px solid rgba(219, 166, 61, .19); text-align: center; }.chronicle-history-grid article:last-child { border-right: 0; }.chronicle-history-grid strong { display: block; color: #efbc4a; font-family: Georgia, serif; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: .015em; }.chronicle-history-grid span { display: block; margin-top: 8px; color: #c8a986; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.chronicle-requirements { padding-top: 108px; background: linear-gradient(180deg, rgba(12,5,4,.93), rgba(20,6,5,.95)); }.chronicle-section-head { max-width: 790px; margin-bottom: 42px; }.chronicle-section-head > span, .monthly-update-panel > div > span, .comparison-title > span { color: #efbd54; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }.chronicle-section-head h2 { max-width: 790px; margin: 12px 0 14px; color: #fff2dc; font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -.055em; line-height: 1.02; }.chronicle-section-head p { max-width: 690px; margin: 0; color: #c6aa8b; font-size: 14px; line-height: 1.82; }
.requirement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.requirement-card { position: relative; min-height: 220px; padding: 26px; overflow: hidden; border: 1px solid rgba(222, 171, 66, .20); border-radius: 10px; background: linear-gradient(145deg, rgba(39, 17, 10, .84), rgba(15, 8, 6, .98)); box-shadow: 0 17px 34px rgba(0,0,0,.16); }.requirement-card::after { position: absolute; right: -20px; bottom: -28px; width: 104px; height: 104px; border: 1px solid rgba(234, 180, 70, .10); border-radius: 50%; content: ""; }.requirement-card:hover { border-color: rgba(244, 194, 80, .56); transform: translateY(-5px); }.requirement-icon { display: grid; width: 43px; height: 43px; place-items: center; color: #f3bc3e; border: 1px solid rgba(239, 184, 63, .38); background: rgba(129, 49, 13, .24); }.requirement-icon svg { width: 20px; }.requirement-card h3 { margin: 24px 0 10px; color: #fff0d3; font-family: Georgia, serif; font-size: 19px; line-height: 1.16; }.requirement-card p { margin: 0; color: #bf9f7f; font-size: 12px; line-height: 1.7; }
.chronicle-notice { display: grid; grid-template-columns: 47px minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 20px; padding: 22px 25px; border: 1px solid rgba(228, 174, 67, .30); border-radius: 10px; background: linear-gradient(100deg, rgba(89, 37, 11, .37), rgba(16, 8, 6, .84)); }.chronicle-notice > svg { width: 26px; color: #f0ba43; }.chronicle-notice strong { display: block; color: #fff0d5; font-family: Georgia, serif; font-size: 17px; }.chronicle-notice p { max-width: 680px; margin: 6px 0 0; color: #c2a482; font-size: 12px; line-height: 1.68; }.chronicle-notice .text-link { color: #f0bf52; white-space: nowrap; }

.chronicle-modules { padding-top: 102px; background: radial-gradient(circle at 4% 40%, rgba(110, 29, 16, .13), transparent 28%), #080504; }.chronicle-module-grid .module-card { border-color: rgba(228, 173, 62, .18); border-radius: 9px; background: linear-gradient(145deg, rgba(34, 16, 10, .94), rgba(12, 7, 5, .98)); }.chronicle-module-grid .module-card::before { height: 2px; background: linear-gradient(90deg, #e4ad3e, #a94915, transparent); }.chronicle-module-grid .module-card:nth-child(1) { background: linear-gradient(118deg, rgba(57, 23, 12, .96), rgba(16, 8, 6, .98)); }.chronicle-module-grid .module-card:nth-child(2)::before, .chronicle-module-grid .module-card:nth-child(5)::before, .chronicle-module-grid .module-card:nth-child(8)::before { background: linear-gradient(90deg, #eaad36, #d75a24, transparent); }.chronicle-module-grid .module-card:nth-child(3)::before, .chronicle-module-grid .module-card:nth-child(6)::before, .chronicle-module-grid .module-card:nth-child(9)::before { background: linear-gradient(90deg, #f1cf73, #b8751d, transparent); }.chronicle-module-grid .module-card:hover { border-color: rgba(247, 196, 79, .63); box-shadow: 0 27px 56px rgba(0,0,0,.30); }.chronicle-module-grid .module-number { color: rgba(240, 193, 92, .34); }.chronicle-module-grid .module-icon { color: #edb33d; border-color: rgba(237, 179, 61, .30); background: rgba(143, 51, 12, .18); }.chronicle-module-grid .module-card h3 { color: #fff0d8; font-family: Georgia, serif; }.chronicle-module-grid .module-card li { color: #c4a785; }.chronicle-module-grid .module-card li svg { color: #e9b642; }
.home-page .l2j-video-section, .home-page .l2j-updates-section, .home-page .l2j-client-section, .home-page .l2j-faq-section { background: transparent; }.home-page .l2j-section-heading h2, .home-page .l2j-section-heading-row h2 { color: #fff0d9; font-family: Georgia, serif; }.home-page .l2j-section-heading p { color: #c4a887; }.home-page .section-index { color: #edbc4c; border-color: rgba(225, 169, 55, .46); }.home-page .section-label, .home-page .eyebrow { color: #ebb840; }.home-page .video-card, .home-page .release-card, .home-page .server-card { border-color: rgba(226, 171, 62, .20); border-radius: 10px; background: linear-gradient(145deg, rgba(35, 17, 11, .92), rgba(11, 7, 5, .95)); }.home-page .video-card:hover, .home-page .release-card:hover, .home-page .release-card.is-featured, .home-page .server-card:hover { border-color: rgba(247, 196, 80, .60); background: linear-gradient(145deg, rgba(58, 23, 12, .95), rgba(15, 8, 6, .98)); }.home-page .video-thumbnail { background: #160b07; }.home-page .video-thumbnail > svg { color: #fff1d4; border-color: rgba(255, 211, 115, .75); background: rgba(137, 48, 15, .86); }.home-page .video-card-copy time, .home-page .text-link { color: #efbc4d; }.home-page .video-card-copy strong, .home-page .release-card h3, .home-page .server-body h3 { color: #fff0d8; }.home-page .video-card-copy > span:last-child, .home-page .release-card p, .home-page .server-body p { color: #c4a887; }.home-page .release-version { color: #241005; background: #eabd50; }

.chronicle-pricing { padding-top: 110px; background: radial-gradient(circle at 92% 3%, rgba(137, 41, 18, .15), transparent 31%), linear-gradient(180deg, #0c0504, #150605 70%, #090504); }.pricing-head { max-width: 880px; }.chronicle-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }.chronicle-plan { position: relative; display: flex; flex-direction: column; min-height: 528px; padding: 28px; overflow: hidden; border: 1px solid rgba(224, 171, 61, .25); border-radius: 12px; background: linear-gradient(155deg, rgba(40, 18, 11, .94), rgba(12, 7, 5, .98)); box-shadow: 0 20px 48px rgba(0,0,0,.18); }.chronicle-plan.is-featured { border-color: rgba(244, 191, 70, .75); box-shadow: 0 25px 62px rgba(125, 43, 11, .25), inset 0 1px rgba(255, 225, 156, .10); }.chronicle-plan.is-featured::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, #b34416, #f3c455 48%, #b34416); }.chronicle-plan-tag { position: absolute; top: 0; left: 50%; padding: 6px 12px; color: #241005; border-radius: 0 0 7px 7px; background: #f1bd4c; font-size: 8px; font-weight: 900; letter-spacing: .10em; transform: translateX(-50%); }.chronicle-plan-top > span { color: #eabb4f; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.chronicle-plan h3 { margin: 14px 0 9px; color: #fff1db; font-size: 29px; letter-spacing: -.045em; }.chronicle-plan-top p { min-height: 53px; margin: 0; color: #c4a584; font-size: 12px; line-height: 1.65; }.chronicle-plan-price { margin: 22px 0 18px; padding: 18px 0; border-top: 1px solid rgba(226,171,61,.16); border-bottom: 1px solid rgba(226,171,61,.16); }.chronicle-plan-price strong { display: block; color: #f6c653; font-family: Georgia, serif; font-size: clamp(29px, 3.2vw, 43px); letter-spacing: -.05em; }.chronicle-plan-price small { display: block; margin-top: 5px; color: #a98a6d; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.chronicle-plan ul { display: grid; gap: 11px; padding: 0; margin: 0 0 24px; list-style: none; }.chronicle-plan li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; color: #d1b18f; font-size: 12px; line-height: 1.45; }.chronicle-plan li svg { width: 15px; color: #e9b541; }.chronicle-plan .button { width: 100%; margin-top: auto; }.chronicle-source-option { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: -5px 0 17px; padding: 12px; border: 1px solid rgba(241, 190, 79, .23); background: rgba(119, 53, 11, .18); }.chronicle-source-option span { color: #c7a787; font-size: 10px; }.chronicle-source-option b { color: #f6c752; font-family: Georgia, serif; font-size: 17px; }.chronicle-source-option a { grid-column: 1/-1; color: #efbd4c; font-size: 10px; font-weight: 800; }
.monthly-update-panel { display: grid; grid-template-columns: minmax(0, .82fr) minmax(460px, 1fr); gap: 35px; align-items: center; margin-top: 19px; padding: 30px 33px; border: 1px solid rgba(227, 173, 62, .28); border-radius: 12px; background: linear-gradient(105deg, rgba(71, 25, 10, .72), rgba(18, 8, 6, .96)); }.monthly-update-panel h3 { margin: 9px 0 8px; color: #fff0d8; font-size: 28px; letter-spacing: -.04em; }.monthly-update-panel p { max-width: 520px; margin: 0; color: #c5a887; font-size: 12px; line-height: 1.7; }.monthly-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.monthly-price-grid article { padding: 16px 12px; border: 1px solid rgba(231,178,68,.20); background: rgba(8,5,4,.36); text-align: center; }.monthly-price-grid strong { display: block; color: #efbe4d; font-family: Georgia, serif; font-size: 30px; line-height: 1; }.monthly-price-grid span { display: block; min-height: 30px; margin-top: 7px; color: #c4a483; font-size: 9px; line-height: 1.35; }.monthly-price-grid b { display: block; margin-top: 9px; color: #fff0d5; font-size: 14px; }
.comparison-wrap { margin-top: 58px; }.comparison-title { margin-bottom: 17px; text-align: center; }.comparison-title h3 { margin: 7px 0 0; color: #fff0d8; font-size: 32px; letter-spacing: -.04em; }.comparison-scroll { overflow-x: auto; border: 1px solid rgba(225, 171, 63, .28); border-radius: 12px; background: rgba(12,7,5,.91); }.chronicle-comparison { width: 100%; min-width: 760px; border-collapse: collapse; }.chronicle-comparison th, .chronicle-comparison td { padding: 16px 15px; border-bottom: 1px solid rgba(227, 173, 63, .12); color: #c3a584; font-size: 11px; text-align: center; }.chronicle-comparison th { color: #f5cf79; background: rgba(75, 30, 11, .42); font-family: Georgia, serif; font-size: 12px; }.chronicle-comparison th:first-child, .chronicle-comparison td:first-child { width: 29%; color: #eed3a2; text-align: left; }.chronicle-comparison td:not(:first-child) { color: #e9bb4a; font-weight: 800; }.chronicle-comparison tbody tr:last-child td { border-bottom: 0; color: #ffe2a3; background: rgba(92, 38, 10, .24); }

.partner-showcase { padding-top: 100px; background: linear-gradient(180deg, #080504, #120605 76%, #080504); }.partner-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }.partner-showcase-head h2 { max-width: 680px; margin: 9px 0; color: #fff0d8; font-size: clamp(30px, 3.7vw, 48px); letter-spacing: -.055em; }.partner-showcase-head p { max-width: 680px; margin: 0; color: #c4a786; font-size: 13px; line-height: 1.72; }.partner-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.partner-showcase-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 13px; align-items: center; min-height: 112px; padding: 19px; border: 1px solid rgba(227, 173, 62, .21); border-radius: 9px; background: linear-gradient(145deg, rgba(37,17,10,.94), rgba(11,7,5,.97)); }.partner-showcase-card:hover { border-color: rgba(245,196,80,.59); transform: translateY(-3px); }.partner-logo { display: grid; grid-row: span 2; width: 48px; height: 48px; place-items: center; overflow: hidden; color: #ecb747; border: 1px solid rgba(235, 181, 68, .30); background: rgba(109, 43, 11, .18); }.partner-logo img { width: 100%; height: 100%; object-fit: contain; }.partner-logo svg { width: 22px; }.partner-showcase-card strong { color: #fff0d9; font-family: Georgia, serif; font-size: 16px; }.partner-showcase-card small { color: #b99b7d; font-size: 10px; line-height: 1.4; }.partner-empty { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; gap: 17px; align-items: center; grid-column: 1/-1; padding: 24px; border: 1px solid rgba(228,173,62,.25); border-radius: 10px; background: linear-gradient(100deg, rgba(77,29,10,.43), rgba(13,7,5,.95)); }.partner-empty > svg { width: 27px; color: #efbd4b; }.partner-empty strong { color: #fff0d8; font-family: Georgia, serif; font-size: 18px; }.partner-empty p { margin: 6px 0 0; color: #c4a786; font-size: 12px; line-height: 1.6; }
.home-page .faq-item { border-color: rgba(226,171,62,.20); border-radius: 8px; background: rgba(26, 12, 8, .85); }.home-page .faq-item[open] { border-color: rgba(243, 190, 74, .54); background: rgba(48, 20, 10, .91); }.home-page .faq-item summary { color: #ffe9c6; font-family: Georgia, serif; }.home-page .faq-item summary svg { color: #edba48; }.home-page .faq-answer { color: #c5a887; }.home-page .l2j-cta { border-color: rgba(231,176,66,.35); border-radius: 12px; background: linear-gradient(112deg, rgba(83, 29, 11, .92), rgba(17, 8, 6, .98)); }.home-page .l2j-cta::after { border-color: rgba(232, 177, 69, .22); background: linear-gradient(135deg, rgba(184,93,19,.20), transparent); }.home-page .l2j-cta h2 { color: #fff0d8; font-family: Georgia, serif; }.home-page .l2j-cta p { color: #c4a786; }.home-page .site-footer { border-color: rgba(226,171,62,.14); background: #060403; }.home-page .footer-grid h3 { color: #efbd4d; }.home-page .footer-brand p, .home-page .footer-grid a:not(.brand):not(.social-links a) { color: #bda182; }.home-page .footer-grid a:hover { color: #ffde8b; }.home-page .social-links a { color: #efbc4b; border-color: rgba(226,171,62,.20); background: rgba(116,48,11,.16); }.home-page .footer-bottom { border-color: rgba(226,171,62,.12); color: #947a61; }
.home-page .faq-item summary { position: relative; display: block; padding-right: 76px; }
.home-page .faq-item summary::after { position: absolute; top: 50%; right: 24px; color: #f59e0b; border-color: rgba(245,158,11,.56); background: rgba(101,47,9,.22); transform: translateY(-50%); }
.home-page .faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
@media (max-width: 720px) { .home-page .faq-item summary { padding-right: 62px; }.home-page .faq-item summary::after { right: 16px; } }
.home-page .site-preview-banner { top:96px; right:auto; bottom:auto; left:50%; z-index:170; color:#291203; border-color:#f2c663; background:linear-gradient(135deg,#ffe3a0,#c8741d); transform:translateX(-50%); }

/* Checkout, affiliate and login additions used by the commercial portal. */
.checkout-monthlies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 18px; }.checkout-monthlies label { display: grid; gap: 5px; padding: 13px; color: #d6b896; border: 1px solid rgba(227,173,62,.24); border-radius: 9px; background: rgba(39,17,10,.45); cursor: pointer; font-size: 11px; }.checkout-monthlies label:has(input:checked) { color: #fff0d8; border-color: rgba(239,188,72,.68); background: rgba(105,42,10,.34); }.checkout-monthlies input { accent-color: #d99b2f; }.checkout-contract { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; color: #c4a887; font-size: 11px; line-height: 1.55; }.checkout-contract input { margin-top: 2px; accent-color: #d99b2f; }
.partner-public-grid, .partner-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.partner-public-card, .partner-rule-card { padding: 25px; border: 1px solid rgba(226,171,62,.21); border-radius: 10px; background: linear-gradient(145deg, rgba(37,17,10,.90), rgba(11,7,5,.97)); }.partner-public-card svg, .partner-rule-card svg { width: 25px; color: #edb849; }.partner-public-card h2, .partner-rule-card h3 { margin: 17px 0 9px; color: #fff0d9; font-family: Georgia, serif; font-size: 21px; }.partner-public-card p, .partner-rule-card p, .partner-rule-list li { color: #c4a786; font-size: 12px; line-height: 1.72; }.partner-rule-list { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }.partner-rule-list li { display: grid; grid-template-columns: 15px 1fr; gap: 8px; }.partner-rule-list svg { width: 15px; color: #ebb840; }

@media (max-width: 1040px) {
  .chronicle-hero-grid { grid-template-columns: minmax(0,1fr) minmax(345px,.72fr); gap: 25px; }.chronicle-book-stage { min-height: 500px; }.chronicle-book { width: min(100%, 385px); }.requirement-grid { grid-template-columns: repeat(2, 1fr); }.chronicle-plan-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }.chronicle-plan { padding: 23px; }.monthly-update-panel { grid-template-columns: 1fr; gap: 23px; }.partner-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .chronicle-hero { min-height: 0; padding: 120px 0 72px; }.chronicle-hero-grid { grid-template-columns: 1fr; }.chronicle-copy { max-width: 710px; text-align: center; }.chronicle-actions, .chronicle-proof-row { justify-content: center; }.chronicle-book-stage { min-height: 430px; margin-top: -10px; }.chronicle-book { width: min(100%, 345px); max-height: 430px; }.chronicle-orbit-a { top: auto; right: -205px; bottom: -190px; }.chronicle-history-grid { grid-template-columns: 1fr; }.chronicle-history-grid article { min-height: 86px; padding: 19px; border-right: 0; border-bottom: 1px solid rgba(219,166,61,.19); }.chronicle-history-grid article:last-child { border-bottom: 0; }.chronicle-plan-grid { grid-template-columns: 1fr; max-width: 580px; margin: auto; }.chronicle-plan { min-height: 0; }.chronicle-plan-top p { min-height: 0; }.partner-public-grid, .partner-rules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .home-page .site-header { background: rgba(9,5,4,.93); }.chronicle-hero { padding-top: 111px; }.chronicle-copy h1 { font-size: clamp(42px, 13vw, 58px); }.chronicle-copy > p { font-size: 13px; }.chronicle-stars { margin-top: 17px; }.chronicle-actions { display: grid; }.chronicle-actions .button { width: 100%; }.chronicle-book-stage { min-height: 354px; }.chronicle-book { width: min(100%, 280px); max-height: 350px; }.chronicle-history { padding-bottom: 54px; }.chronicle-history-grid strong { font-size: 20px; }.chronicle-requirements, .chronicle-modules, .chronicle-pricing, .partner-showcase { padding-top: 76px; }.chronicle-section-head h2 { font-size: 34px; }.requirement-grid { grid-template-columns: 1fr; }.requirement-card { min-height: 0; }.chronicle-notice { grid-template-columns: 1fr; gap: 11px; padding: 21px; }.chronicle-notice .text-link { margin-top: 4px; }.chronicle-module-grid .module-card:nth-child(1) ul { grid-template-columns: 1fr; }.monthly-update-panel { padding: 24px 20px; }.monthly-price-grid { grid-template-columns: 1fr; }.monthly-price-grid article { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; text-align: left; }.monthly-price-grid span { min-height: 0; margin: 0; }.monthly-price-grid b { margin: 0; }.comparison-title h3 { font-size: 28px; }.partner-showcase-head { display: grid; align-items: start; gap: 18px; }.partner-showcase-head .button { width: 100%; }.partner-showcase-grid { grid-template-columns: 1fr; }.partner-empty { grid-template-columns: 1fr; gap: 12px; }.partner-empty .button { width: 100%; }.checkout-monthlies { grid-template-columns: 1fr; }
}

/* One public identity for every route: content, purchase, authentication and client area. */
body.l2jone-chronicle:not(.home-page) {
  --bg: #090504;
  --bg-soft: #130806;
  --surface: rgba(31, 14, 9, .90);
  --surface-solid: #1a0c08;
  --surface-2: #2b130b;
  --line: rgba(228, 173, 62, .22);
  --line-strong: rgba(245, 194, 79, .62);
  --text: #fff0da;
  --muted: #c6a786;
  --muted-2: #9d7e62;
  --primary: #efbb48;
  --primary-2: #ffe09a;
  --cyan: #efbb48;
  --success: #9bd18a;
  --warning: #efbb48;
  --danger: #ef8590;
  color: var(--text);
  background: var(--bg);
}
body.l2jone-chronicle:not(.home-page)::before { opacity: 1; background: radial-gradient(circle at 8% 4%, rgba(115, 25, 16, .23), transparent 29%), radial-gradient(circle at 88% 10%, rgba(126, 68, 12, .14), transparent 27%), linear-gradient(180deg, #0a0504 0%, #160605 50%, #080504 100%); }
body.l2jone-chronicle:not(.home-page)::after { opacity: .17; background-image: radial-gradient(rgba(238, 193, 94, .25) .55px, transparent .7px); background-size: 25px 25px; }
body.l2jone-chronicle:not(.home-page) h1, body.l2jone-chronicle:not(.home-page) h2, body.l2jone-chronicle:not(.home-page) h3, body.l2jone-chronicle:not(.home-page) .page-hero h1 { color: #fff0d9; font-family: Georgia, "Times New Roman", serif; }
body.l2jone-chronicle:not(.home-page) .site-header { border-color: rgba(228, 173, 62, .20); background: rgba(9, 5, 4, .88); box-shadow: 0 18px 48px rgba(0, 0, 0, .40); }
body.l2jone-chronicle:not(.home-page) .site-header.is-scrolled { border-color: rgba(244, 191, 73, .47); background: rgba(9, 5, 4, .97); }
body.l2jone-chronicle:not(.home-page) .brand-mark { border-color: rgba(239, 184, 70, .54); background: linear-gradient(145deg, #672a10, #bd6c22 55%, #efbd54); box-shadow: inset 0 0 13px rgba(255,245,208,.25), 0 0 20px rgba(211,126,26,.14); }
body.l2jone-chronicle:not(.home-page) .brand-mark span, body.l2jone-chronicle:not(.home-page) .brand-copy strong { color: #fff1d9; }
body.l2jone-chronicle:not(.home-page) .brand-copy small, body.l2jone-chronicle:not(.home-page) .desktop-nav a, body.l2jone-chronicle:not(.home-page) .footer-grid a:not(.brand):not(.social-links a) { color: #c4a686; }
body.l2jone-chronicle:not(.home-page) .desktop-nav a:hover, body.l2jone-chronicle:not(.home-page) .footer-grid a:hover { color: #ffe19a; }
body.l2jone-chronicle:not(.home-page) .language-trigger, body.l2jone-chronicle:not(.home-page) .header-whatsapp, body.l2jone-chronicle:not(.home-page) .mobile-menu { color: #dfc09c; border-color: rgba(226, 171, 62, .24); background: rgba(83, 34, 10, .20); }
body.l2jone-chronicle:not(.home-page) .language-trigger:hover, body.l2jone-chronicle:not(.home-page) .header-whatsapp:hover { color: #fff0d6; border-color: rgba(244, 191, 73, .65); background: rgba(129, 58, 11, .26); }
body.l2jone-chronicle:not(.home-page) .mobile-menu a { color: #ddc0a0; border-color: rgba(226, 171, 62, .16); }
body.l2jone-chronicle:not(.home-page) .button { border-radius: 7px; }
body.l2jone-chronicle:not(.home-page) .button-primary { color: #211004; border-color: #f5cb6a; background: linear-gradient(135deg, #fff0b8, #f2be48 46%, #b25b14); box-shadow: 0 13px 28px rgba(175, 82, 11, .23), inset 0 1px rgba(255,255,255,.45); }
body.l2jone-chronicle:not(.home-page) .button-primary:hover { color: #160803; background: linear-gradient(135deg, #fff4c4, #f8cc61 46%, #cf761d); box-shadow: 0 18px 38px rgba(182, 83, 9, .36); }
body.l2jone-chronicle:not(.home-page) .button-ghost, body.l2jone-chronicle:not(.home-page) .button-secondary { color: #f2c95f; border-color: rgba(230, 176, 64, .45); background: rgba(56, 24, 9, .48); }
body.l2jone-chronicle:not(.home-page) .button-ghost:hover, body.l2jone-chronicle:not(.home-page) .button-secondary:hover { color: #fff0d4; border-color: rgba(248, 198, 83, .82); background: rgba(116, 50, 11, .30); }

body.l2jone-chronicle:not(.home-page) .page-hero { border-color: rgba(226, 171, 62, .19); background: linear-gradient(180deg, rgba(80, 26, 11, .53), rgba(11, 5, 4, .07)); }
body.l2jone-chronicle:not(.home-page) .page-hero::after { border-color: rgba(229, 176, 69, .18); box-shadow: 0 0 0 80px rgba(187, 90, 18, .04), 0 0 0 160px rgba(221, 165, 61, .025); }
body.l2jone-chronicle:not(.home-page) .page-hero p, body.l2jone-chronicle:not(.home-page) .intro-card p, body.l2jone-chronicle:not(.home-page) .content-heading p, body.l2jone-chronicle:not(.home-page) .page-shell p { color: #c6a786; }
body.l2jone-chronicle:not(.home-page) .panel-card, body.l2jone-chronicle:not(.home-page) .form-card, body.l2jone-chronicle:not(.home-page) .intro-card, body.l2jone-chronicle:not(.home-page) .info-card, body.l2jone-chronicle:not(.home-page) .highlight-card, body.l2jone-chronicle:not(.home-page) .update-row, body.l2jone-chronicle:not(.home-page) .gateway-panel, body.l2jone-chronicle:not(.home-page) .plan-summary, body.l2jone-chronicle:not(.home-page) .gateway-card, body.l2jone-chronicle:not(.home-page) .fee-breakdown, body.l2jone-chronicle:not(.home-page) .catalog-entry, body.l2jone-chronicle:not(.home-page) .catalog-public-entry, body.l2jone-chronicle:not(.home-page) .property-file-card, body.l2jone-chronicle:not(.home-page) .property-section { border-color: rgba(226, 171, 62, .22); background: linear-gradient(145deg, rgba(38, 17, 10, .93), rgba(12, 7, 5, .98)); }
body.l2jone-chronicle:not(.home-page) .panel-card:hover, body.l2jone-chronicle:not(.home-page) .gateway-card:hover, body.l2jone-chronicle:not(.home-page) .gateway-card.is-selected, body.l2jone-chronicle:not(.home-page) .catalog-entry[open], body.l2jone-chronicle:not(.home-page) .catalog-public-entry[open], body.l2jone-chronicle:not(.home-page) .property-file-card[open] { border-color: rgba(246, 194, 78, .59); background: linear-gradient(145deg, rgba(58, 23, 11, .95), rgba(15, 8, 6, .98)); }
body.l2jone-chronicle:not(.home-page) .field label, body.l2jone-chronicle:not(.home-page) .form-row, body.l2jone-chronicle:not(.home-page) .field small, body.l2jone-chronicle:not(.home-page) .auth-form > p { color: #c5a786; }
body.l2jone-chronicle:not(.home-page) .field input, body.l2jone-chronicle:not(.home-page) .field textarea, body.l2jone-chronicle:not(.home-page) .field select, body.l2jone-chronicle:not(.home-page) .catalog-search input { color: #fff0dc; border-color: rgba(227, 172, 62, .26); background: rgba(12, 6, 4, .74); }
body.l2jone-chronicle:not(.home-page) .field input:focus, body.l2jone-chronicle:not(.home-page) .field textarea:focus, body.l2jone-chronicle:not(.home-page) .field select:focus, body.l2jone-chronicle:not(.home-page) .catalog-search input:focus { border-color: rgba(244, 190, 73, .78); box-shadow: 0 0 0 3px rgba(225, 161, 47, .12); }
body.l2jone-chronicle:not(.home-page) .badge, body.l2jone-chronicle:not(.home-page) .catalog-tabs a, body.l2jone-chronicle:not(.home-page) .catalog-public-tabs a, body.l2jone-chronicle:not(.home-page) .catalog-proof span { color: #ebcb83; border-color: rgba(226, 171, 62, .24); background: rgba(85, 35, 10, .22); }
body.l2jone-chronicle:not(.home-page) .badge-success { color: #b8e397; border-color: rgba(151, 205, 108, .34); background: rgba(104, 151, 57, .09); }
body.l2jone-chronicle:not(.home-page) .badge-warning { color: #ffe0a0; border-color: rgba(239, 188, 72, .45); background: rgba(154, 89, 11, .13); }
body.l2jone-chronicle:not(.home-page) .text-link, body.l2jone-chronicle:not(.home-page) .catalog-entry-copy small, body.l2jone-chronicle:not(.home-page) .catalog-public-entry .catalog-entry-copy small { color: #efbc4d; }
body.l2jone-chronicle:not(.home-page) .faq-item { border-color: rgba(225, 170, 62, .22); border-radius: 8px; background: rgba(30, 13, 8, .88); }
body.l2jone-chronicle:not(.home-page) .faq-item[open] { border-color: rgba(246, 194, 78, .56); background: rgba(56, 22, 11, .92); }
body.l2jone-chronicle:not(.home-page) .faq-item summary, body.l2jone-chronicle:not(.home-page) .info-card summary { color: #fff0d9; font-family: Georgia, serif; }
body.l2jone-chronicle:not(.home-page) .faq-item summary::after, body.l2jone-chronicle:not(.home-page) .info-card summary::after { color: #efbb48; border-color: rgba(226, 171, 62, .32); }
body.l2jone-chronicle:not(.home-page) .faq-answer, body.l2jone-chronicle:not(.home-page) .info-content li, body.l2jone-chronicle:not(.home-page) .update-content > p, body.l2jone-chronicle:not(.home-page) .changelog li { color: #c6a786; }

body.l2jone-chronicle:not(.home-page).auth-page { background: #090504; }
body.l2jone-chronicle:not(.home-page) .auth-visual { border-color: rgba(228, 173, 62, .20); background: radial-gradient(circle at 35% 42%, rgba(169, 66, 17, .22), transparent 29%), linear-gradient(145deg, #230c07, #090504 68%); }
body.l2jone-chronicle:not(.home-page) .auth-visual::before { background-image: linear-gradient(rgba(222, 170, 66, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(222, 170, 66, .065) 1px, transparent 1px); }
body.l2jone-chronicle:not(.home-page) .auth-quote h2 { color: #fff0d9; font-family: Georgia, serif; }
body.l2jone-chronicle:not(.home-page) .social-button { color: #d7b691; border-color: rgba(226, 171, 62, .24); background: rgba(49, 20, 8, .56); }
body.l2jone-chronicle:not(.home-page) .social-button:hover { color: #fff0d9; border-color: rgba(246, 194, 78, .60); }

body.l2jone-chronicle:not(.home-page) .vps-plan-card, body.l2jone-chronicle:not(.home-page) .vps-plan-main, body.l2jone-chronicle:not(.home-page) .hostinger-promo, body.l2jone-chronicle:not(.home-page) .vps-catalog-card { border-color: rgba(226, 171, 62, .27); background: linear-gradient(145deg, rgba(43, 18, 10, .93), rgba(12, 7, 5, .97)); }
body.l2jone-chronicle:not(.home-page) .vps-plan-card:hover, body.l2jone-chronicle:not(.home-page) .vps-plan-gold { border-color: rgba(246, 194, 78, .62); box-shadow: 0 26px 54px rgba(0,0,0,.30); }
body.l2jone-chronicle:not(.home-page) .vps-plan-label { color: #241004; background: #efbb48; }
body.l2jone-chronicle:not(.home-page) .vps-price strong, body.l2jone-chronicle:not(.home-page) .vps-catalog-mark, body.l2jone-chronicle:not(.home-page) .hostinger-promo-mark { color: #efbc4d; }
body.l2jone-chronicle:not(.home-page) .vps-plan-details { background: rgba(8, 5, 4, .31); }
body.l2jone-chronicle:not(.home-page) .vps-plan-details li, body.l2jone-chronicle:not(.home-page) .vps-plan-details strong, body.l2jone-chronicle:not(.home-page) .vps-from, body.l2jone-chronicle:not(.home-page) .vps-price span, body.l2jone-chronicle:not(.home-page) .hostinger-promo-copy p { color: #c7a786; }
body.l2jone-chronicle:not(.home-page) .vps-plan-details svg { color: #e9b646; }

body.l2jone-chronicle:not(.home-page) .panel-body, body.l2jone-chronicle:not(.home-page) .panel-layout { background: #090504; }
body.l2jone-chronicle:not(.home-page) .panel-sidebar { border-color: rgba(226,171,62,.20); background: linear-gradient(180deg, #1a0b07, #090504); }
body.l2jone-chronicle:not(.home-page) .panel-role { border-color: rgba(226,171,62,.22); background: rgba(102,42,10,.17); }
body.l2jone-chronicle:not(.home-page) .panel-nav a { color: #c3a483; }
body.l2jone-chronicle:not(.home-page) .panel-nav a:hover { color: #fff0d9; background: rgba(134,57,11,.17); }
body.l2jone-chronicle:not(.home-page) .panel-nav a.is-active { color: #fff0d9; border-color: rgba(239,188,72,.28); background: linear-gradient(90deg, rgba(167,69,12,.30), rgba(78,30,8,.10)); }
body.l2jone-chronicle:not(.home-page) .panel-topbar { border-color: rgba(226,171,62,.19); background: rgba(10,5,4,.88); }
body.l2jone-chronicle:not(.home-page) .avatar, body.l2jone-chronicle:not(.home-page) .metric-icon { color: #efbc4d; border-color: rgba(226,171,62,.28); background: rgba(116,46,10,.15); }
body.l2jone-chronicle:not(.home-page) .metric-card, body.l2jone-chronicle:not(.home-page) .data-table { border-color: rgba(226,171,62,.22); background: linear-gradient(145deg, rgba(38,17,10,.91), rgba(12,7,5,.97)); }
body.l2jone-chronicle:not(.home-page) .data-table th { color: #d7b58b; background: rgba(91,35,10,.32); }
body.l2jone-chronicle:not(.home-page) .data-table th, body.l2jone-chronicle:not(.home-page) .data-table td { border-color: rgba(226,171,62,.14); }
body.l2jone-chronicle:not(.home-page) .license-box code, body.l2jone-chronicle:not(.home-page) .license-key-row code { color: #f2ca69; border-color: rgba(226,171,62,.24); background: rgba(10,5,4,.62); }

body.l2jone-chronicle:not(.home-page) .site-footer { border-color: rgba(226,171,62,.16); background: #060403; }
body.l2jone-chronicle:not(.home-page) .footer-grid h3 { color: #efbc4d; }
body.l2jone-chronicle:not(.home-page) .social-links a { color: #efbc4d; border-color: rgba(226,171,62,.22); background: rgba(108,42,10,.16); }
body.l2jone-chronicle:not(.home-page) .footer-bottom { border-color: rgba(226,171,62,.13); color: #997b60; }

@media (max-width: 620px) {
  body.l2jone-chronicle:not(.home-page) .site-header { background: rgba(9,5,4,.96); }
}

/* Commercial catalog: six cards and an explicit web-system companion offer. */
.chronicle-website-plan { border-color: rgba(99, 180, 197, .42); background: radial-gradient(circle at 88% 7%, rgba(55, 145, 166, .16), transparent 28%), linear-gradient(155deg, rgba(20, 29, 30, .96), rgba(10, 7, 6, .99)); }
.chronicle-website-plan::after { position: absolute; right: -45px; bottom: -65px; width: 168px; height: 168px; border: 1px solid rgba(102, 200, 219, .18); border-radius: 50%; content: ""; }
.chronicle-website-plan .chronicle-plan-price strong { color: #8ed5e2; }
.chronicle-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.chronicle-card-actions .button { margin-top: 0; }
.chronicle-card-actions .button-secondary { color: #d8f0f4; border-color: rgba(126, 209, 223, .45); }
.chronicle-comparison { min-width: 1060px; }
@media (max-width: 620px) { .chronicle-card-actions { grid-template-columns: 1fr; } }

/* The base stylesheet is intentionally generic, but every public L2JOne
 * route loads this file.  Keep the browser canvas and the accessibility
 * shortcut in the same Chronicle palette so no blue flash or blue edge is
 * visible on internal pages, loading states, or overscroll. */
html { background: #070504; }
body.l2jone-chronicle { background: #070504; }
body.l2jone-chronicle .skip-link { color: #241005; background: #f2c55b; box-shadow: 0 8px 24px rgba(0, 0, 0, .42); }

/* Local Control Center showcase: operational capability without exposing the
 * protected delivery, endpoints, or internal server structure. */
body.l2jone-chronicle:not(.home-page) .catalog-public-tabs { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.control-center-showcase { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 26px; align-items: stretch; margin: 0 0 16px; padding: 18px; border: 1px solid rgba(229, 177, 68, .30); border-radius: 13px; background: radial-gradient(circle at 88% 10%, rgba(176, 82, 14, .16), transparent 35%), linear-gradient(142deg, rgba(48, 19, 10, .94), rgba(11, 6, 4, .98)); box-shadow: 0 24px 52px rgba(0, 0, 0, .22); }
.control-center-media { display: grid; align-content: start; gap: 10px; padding: 9px; border: 1px solid rgba(232, 181, 73, .19); border-radius: 8px; background: rgba(7, 4, 3, .56); }
.control-center-media img { display: block; width: 100%; border: 1px solid rgba(234, 183, 72, .22); border-radius: 5px; background: #160c07; box-shadow: 0 14px 32px rgba(0, 0, 0, .33); }
.control-center-media span { color: #ae8e6e; font-size: 10px; line-height: 1.45; }
.control-center-copy { align-self: center; padding: 13px 8px 13px 2px; }
.control-center-copy h2 { max-width: 540px; margin: 9px 0 14px; color: #fff0d8; font-size: clamp(28px, 3.2vw, 41px); letter-spacing: -.045em; line-height: 1.04; }
.control-center-copy > p { max-width: 520px; margin: 0; color: #c9aa87; font-size: 13px; line-height: 1.76; }
.control-center-local-note { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 21px; padding: 13px 14px; color: #e3c79f; border-left: 2px solid #e8b74a; background: rgba(104, 42, 10, .30); font-size: 11px; font-weight: 700; line-height: 1.58; }
.control-center-local-note svg { width: 18px; color: #f2c353; }
.control-center-group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.control-center-group { min-height: 180px; padding: 20px; border: 1px solid rgba(226, 171, 62, .20); border-radius: 9px; background: linear-gradient(145deg, rgba(35, 16, 10, .91), rgba(11, 7, 5, .98)); }
.control-center-group:hover { border-color: rgba(246, 194, 78, .56); transform: translateY(-3px); }
.control-center-group > span { display: grid; width: 38px; height: 38px; place-items: center; color: #f0bb48; border: 1px solid rgba(232, 179, 65, .34); background: rgba(127, 48, 11, .22); }
.control-center-group > span svg { width: 19px; }
.control-center-group h3 { margin: 18px 0 8px; color: #fff0d8; font-size: 18px; }
.control-center-group p { margin: 0; color: #c2a482; font-size: 11px; line-height: 1.68; }
@media (max-width: 960px) { .control-center-showcase { grid-template-columns: 1fr; }.control-center-copy { padding: 8px; }.control-center-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { body.l2jone-chronicle:not(.home-page) .catalog-public-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }.control-center-showcase { padding: 11px; gap: 16px; }.control-center-copy h2 { font-size: 28px; }.control-center-group-grid { grid-template-columns: 1fr; }.control-center-group { min-height: 0; } }

/* Protected-contract controls in the customer workspace. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.l2jone-chronicle:not(.home-page) .button-row { display:flex; flex-wrap:wrap; gap:10px; }
body.l2jone-chronicle:not(.home-page) .panel-card-copy { max-width:720px; margin:0 0 16px; color:#c6a786; line-height:1.7; }

/* Global contact entry point: discrete and consistent with the Chronicle palette. */
.telegram-contact-toggle { color:#f3fbff; border-color:rgba(255,255,255,.20); background:linear-gradient(135deg,#229ed9,#168ac0); }
.telegram-contact-toggle:hover { color:#fff; border-color:rgba(255,255,255,.34); background:linear-gradient(135deg,#32aeeb,#168ac0); }

/* The catalog was introduced before the Chronicle palette.  Keep its safety
 * notices and information blocks in the same wine-and-gold family as every
 * other public route; the blue in the book illustration remains intentional. */
body.l2jone-chronicle:not(.home-page) .catalog-safety-note {
  color: #d4b892;
  border-color: rgba(226, 171, 62, .27);
  background: rgba(63, 25, 9, .46);
}
body.l2jone-chronicle:not(.home-page) .catalog-safety-note svg {
  color: #efbd4d;
}
body.l2jone-chronicle:not(.home-page) .catalog-public-intro {
  border-color: rgba(226, 171, 62, .25);
  background: linear-gradient(120deg, rgba(63, 24, 10, .91), rgba(13, 7, 5, .98));
}
body.l2jone-chronicle:not(.home-page) .catalog-public-intro-icon {
  color: #efbd4d;
  border-color: rgba(232, 180, 69, .34);
  background: rgba(129, 49, 11, .20);
}
body.l2jone-chronicle:not(.home-page) .catalog-public-intro h2,
body.l2jone-chronicle:not(.home-page) .catalog-public-entry .catalog-entry-copy strong {
  color: #fff0d9;
}
body.l2jone-chronicle:not(.home-page) .catalog-public-intro p,
body.l2jone-chronicle:not(.home-page) .catalog-public-toolbar .catalog-note,
body.l2jone-chronicle:not(.home-page) .catalog-public-entry .catalog-entry-copy span,
body.l2jone-chronicle:not(.home-page) .catalog-public-entry .catalog-entry-body p {
  color: #c6a786;
}
body.l2jone-chronicle:not(.home-page) .catalog-public-entry .catalog-entry-icon {
  color: #efbd4d;
  border-color: rgba(232, 180, 69, .29);
  background: rgba(129, 49, 11, .18);
}

/* Website delivery is part of the same commercial family, not a separate
 * blue product line. */
.chronicle-website-plan {
  border-color: rgba(232, 180, 69, .42);
  background: radial-gradient(circle at 88% 7%, rgba(157, 67, 13, .18), transparent 28%), linear-gradient(155deg, rgba(47, 20, 10, .96), rgba(10, 7, 6, .99));
}
.chronicle-website-plan::after { border-color: rgba(235, 185, 76, .20); }
.chronicle-website-plan .chronicle-plan-price strong { color: #f6c653; }
.chronicle-card-actions .button-secondary { color: #f0c861; border-color: rgba(230, 176, 64, .45); }