:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-2: #0b1220;
  --surface: #111827;
  --surface-solid: #0d1421;
  --surface-2: #151f31;
  --surface-3: #1b2740;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.28);
  --text: #f3f7ff;
  --muted: #9aa9bd;
  --soft: #d5e0ee;
  --accent: #8cc63f;
  --accent-2: #b9ff2f;
  --blue: #3b82f6;
  --red: #ef4444;
  --amber: #f59e0b;
  --green: #22c55e;
  --purple: #a78bfa;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-2: #eef4fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f3f7fc;
  --surface-3: #e7eef8;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.22);
  --text: #101827;
  --muted: #5d6b7c;
  --soft: #263548;
  --accent: #5f8f1f;
  --accent-2: #40720e;
  --blue: #2563eb;
  --red: #dc2626;
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 7px 22px rgba(15, 23, 42, 0.08);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 45%, #0c0b15 100%);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font: inherit; }
button, a, input, select, textarea { transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease; }
.shell { position: relative; z-index: 1; min-height: 100vh; }
.shell.public-shell { display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "main" "foot"; }
.shell.with-sidebar { display: grid; min-height: 100vh; grid-template-columns: 292px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "top top" "side main" "side foot"; }
.topbar { grid-area: top; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; padding: 0 30px; background: color-mix(in srgb, var(--surface-solid) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; min-width: 0; gap: 12px; font-weight: 800; }
.brand-partner-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: 1rem; letter-spacing: .01em; }
.brand-copy span { color: var(--muted); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: .92rem; white-space: nowrap; }
.nav a, .nav-button { color: var(--muted); font-weight: 600; }
.nav a:hover, .nav-button:hover { color: var(--accent-2); }
.nav-cert { white-space: nowrap; }
.nav-cta { color: var(--accent-2) !important; }
.inline-form { display: inline; margin: 0; }
.nav-button, .theme-toggle { border: 0; cursor: pointer; }
.nav-button { padding: 0; background: transparent; }
.theme-toggle, .lang-select { min-height: 36px; padding: 0 14px; color: var(--soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: .86rem; }
.lang-select { min-width: 132px; outline: none; }
.theme-toggle:hover, .lang-select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); }
.sidebar { grid-area: side; position: sticky; top: 70px; align-self: start; height: calc(100vh - 70px); overflow-y: auto; padding: 22px 16px; background: color-mix(in srgb, var(--surface-solid) 94%, black); border-right: 1px solid var(--line); scrollbar-color: var(--surface-3) transparent; }
.sidebar-section { display: grid; gap: 6px; margin-bottom: 24px; }
.sidebar-label { margin: 0 0 8px; color: color-mix(in srgb, var(--accent-2) 72%, var(--muted)); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sidebar a { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 10px; color: var(--soft); border: 1px solid transparent; border-radius: 8px; font-size: .88rem; }
.sidebar a:hover { color: var(--accent-2); background: var(--surface-2); border-color: var(--line); }
.nav-accordion { border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 78%, transparent); overflow: hidden; }
.nav-accordion + .nav-accordion { margin-top: 8px; }
.nav-accordion summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; color: var(--soft); font-weight: 700; }
.nav-accordion summary::-webkit-details-marker { display: none; }
.nav-accordion[open] summary { color: var(--accent-2); border-bottom: 1px solid var(--line); }
.chev { color: var(--muted); transform: rotate(0deg); }
.nav-accordion[open] .chev { transform: rotate(180deg); }
.nav-accordion-list { display: grid; gap: 2px; padding: 7px; }
.nav-accordion-list a { min-height: 30px; padding-left: 8px; font-size: .82rem; color: var(--muted); }
.challenge-code { display: inline-flex; min-width: 48px; color: var(--accent-2); font-weight: 800; font-size: .70rem; }
.view-category { margin-top: 4px; color: var(--accent-2) !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
.icon-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 8px; font-size: .72rem; font-weight: 900; }
.icon-pill.mini { min-width: 32px; height: 24px; border-radius: 6px; }
.page { grid-area: main; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 72px; min-height: calc(100vh - 70px - 175px); }
.footer { grid-area: foot; padding: 22px 28px; color: var(--muted); background: color-mix(in srgb, var(--surface-solid) 96%, black); border-top: 1px solid var(--line); }
.footer-inner { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 42px; align-items: start; }
.footer-brand { display: flex; gap: 12px; align-items: center; }
.footer-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
.footer-brand strong, .footer-links strong { color: var(--text); }
.footer-brand span { display: block; font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 20px; }
.footer a { color: var(--accent-2); }
.footer a:hover { color: var(--text); }
.footer-note { grid-column: 1 / -1; margin: 0; font-size: .80rem; border-top: 1px solid var(--line); padding-top: 14px; }
.footer-credit { grid-column: 1 / -1; margin: -6px 0 0; font-size: .80rem; color: var(--soft); }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); align-items: center; gap: 64px; min-height: calc(100vh - 250px); padding: 64px 0; }
.pro-hero { position: relative; }
.hero-copy h1, .page-head h1, .challenge-head h1 { margin: 0; font-size: clamp(2.4rem, 4.5vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; font-weight: 900; }
.hero-text, .lead { max-width: 700px; color: var(--soft); font-size: 1.05rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 10px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 8px; font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.partner-lockup { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 40px; padding: 6px 14px 6px 7px; margin-bottom: 16px; color: var(--soft); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: .86rem; font-weight: 800; }
.partner-lockup img { width: 28px; height: 28px; object-fit: contain; border-radius: 5px; }
.hero-stats { display: grid; gap: 14px; }
.progress-panel, .form-panel, .auth-box, .side-panel, .lab-console, .output-panel, .detail-main, .review-item, .feature, .stat, .submissions, .metric, .category-card, .challenge-row, .empty { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.metric, .stat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-left: 3px solid var(--accent); }
.metric:nth-child(2) { border-left-color: var(--red); }
.metric strong, .stat strong { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.metric span, .stat span, .muted { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; font-weight: 800; font-size: .92rem; }
.button:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-1px); }
.button.primary { color: #101827; background: var(--accent-2); border-color: var(--accent-2); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); color: #101827; }
.button.ghost { color: var(--soft); background: transparent; }
.button.danger { color: white; background: var(--red); border-color: var(--red); }
.button.linkedin-button { gap: 8px; color: #fff; background: #0a66c2; border-color: #0a66c2; }
.button.linkedin-button:hover { color: #fff; background: #004182; border-color: #004182; }
.button.support-button { gap:8px; color:#171300; background:#ffdd00; border-color:#ffdd00; }
.button.support-button:hover { color:#171300; background:#ffe95c; border-color:#ffe95c; }
.linkedin-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.72); border-radius: 3px; font-size: .7rem; font-weight: 900; line-height: 1; letter-spacing: 0; }
.certificate-share-actions { margin-top: 18px; }
.button.full { width: 100%; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.band { padding: 26px 0; }
.feature-grid, .category-grid, .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature, .detail-main, .side-panel, .lab-console, .output-panel, .form-panel, .submissions { padding: 22px; }
.feature h2, .category-card h2, .challenge-row h2, .detail-main h2, .lab-console h2, .output-panel h2, .submissions h2, .form-panel h2 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 900; }
.feature p, .category-card p, .detail-main p, .form-panel p { color: var(--soft); }
.feature { border-top: 2px solid var(--accent); }
.feature:nth-child(2) { border-top-color: var(--red); }
.auth-shell { display: grid; place-items: center; min-height: calc(100vh - 260px); }
.auth-box { width: min(440px, 100%); padding: 28px; }
.auth-box h1 { margin: 0 0 18px; font-size: 1.6rem; font-weight: 900; }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: var(--text); font-weight: 700; font-size: .92rem; }
input, select, textarea { width: 100%; padding: 11px 12px; color: var(--text); background: color-mix(in srgb, var(--bg) 80%, black); border: 1px solid var(--line); border-radius: 9px; outline: none; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.legal-consent {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 13px;
  color: var(--soft);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
}
.legal-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #ff253a;
  cursor: pointer;
}
.legal-consent a { color: #ff5264; text-decoration: underline; text-underline-offset: 2px; }
.legal-consent:focus-within { border-color: rgba(255,47,69,.72); }
.page-head, .challenge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.challenge-head > .badge { align-self: flex-start; flex: 0 0 auto; }
.progress-panel { padding: 22px; margin-bottom: 22px; }
.progress-copy, .card-top, .row-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-copy strong { font-size: 1.8rem; line-height: 1; font-weight: 900; }
.progress-track, .mini-track { height: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.progress-track span, .mini-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.progress-percent { display: inline-block; margin-top: 9px; color: var(--muted); }
.category-card { display: grid; gap: 12px; min-height: 210px; padding: 20px; }
.category-card:hover, .challenge-row:hover, .feature:hover { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); transform: translateY(-1px); }
.filter-bar { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; margin-bottom: 18px; }
.challenge-list { display: grid; gap: 10px; }
.challenge-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; padding: 17px; }
.code { color: var(--accent-2); font-size: .8rem; font-weight: 900; }
.badge, .solved { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border-radius: 7px; font-size: .74rem; font-weight: 900; border: 1px solid transparent; }
.badge.easy { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.badge.medium { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.badge.hard { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.badge.challenge { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.badge.insane { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.solved { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.detail-grid, .lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.hint-box { margin-top: 16px; padding: 13px 15px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.hint-box summary { cursor: pointer; color: var(--accent-2); font-weight: 900; }
.alert { padding: 12px 14px; margin-bottom: 16px; border-radius: 9px; border: 1px solid var(--line); border-left: 3px solid var(--line); }
.alert.success { color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); border-left-color: var(--green); }
.alert.error { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); border-left-color: var(--red); }

.verification-box { text-align: center; }
.verification-box .muted { line-height: 1.65; }
.verification-mark {
  display: inline-grid;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(255,82,100,.48);
  border-radius: 50%;
  background: rgba(239,35,60,.1);
}
.verification-mark::before { content: '@'; color: #ff5264; font-size: 1.4rem; font-weight: 900; }
.verification-mark.success { border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.verification-mark.success::before { content: '\2713'; color: var(--green); }
.verification-mark.invalid::before { content: '!'; color: var(--red); }
.verification-address { margin: 18px 0; color: var(--soft); }
.verification-address strong { display: block; margin-top: 5px; color: var(--text); }
.verification-resend { margin-top: 22px; }
.verification-password { text-align: left; }
.verification-help { margin: 18px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.verification-help a { color: #ff5264; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); background: var(--surface-2); font-size: .78rem; text-transform: uppercase; }
pre { min-height: 130px; margin: 0; padding: 13px; overflow-x: auto; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; white-space: pre-wrap; word-break: break-word; }
.static-field { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.static-field > * { min-width: 0; overflow-wrap: anywhere; }
.review-stream { display: grid; gap: 12px; }
.review-item { padding: 16px; }
.unsafe-render { margin-top: 10px; }
.empty { padding: 22px; color: var(--muted); border-style: dashed; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.contact-strip a { min-width:0; max-width:100%; color:var(--accent-2); overflow-wrap:anywhere; }
@media (max-width: 1100px) { .shell.with-sidebar { grid-template-columns: 1fr; grid-template-areas: "top" "side" "main" "foot"; } .sidebar { position: static; height: auto; max-height: 380px; border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 900px) { .topbar, .footer, .page-head, .challenge-head, .challenge-row { flex-direction: column; align-items: stretch; } .nav { flex-wrap: wrap; gap: 12px; } .hero, .detail-grid, .lab-grid, .feature-grid, .category-grid, .stats-grid, .footer-inner { grid-template-columns: 1fr; } .hero { min-height: auto; gap: 28px; } .filter-bar { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; } }
@media (max-width: 560px) { .topbar, .page, .footer { width: 100%; padding-left: 16px; padding-right: 16px; } .page { padding-top: 26px; } .hero-copy h1, .page-head h1, .challenge-head h1 { font-size: 2rem; } .brand-copy span { display: none; } .metric, .stat, .progress-copy, .card-top, .row-meta, .static-field { align-items: flex-start; flex-direction: column; } }

/* --- Professional white/red cyber UI refresh --- */
:root {
  --bg: #060910;
  --bg-2: #0a101a;
  --surface: #101722;
  --surface-solid: #0b111b;
  --surface-2: #131c29;
  --surface-3: #1a2434;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f8fafc;
  --muted: #a8b3c4;
  --soft: #d9e2ef;
  --accent: #ef233c;
  --accent-2: #ffffff;
  --blue: #4f86ff;
  --red: #ef233c;
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --shadow-soft: 0 12px 34px rgba(0,0,0,.28);
}
:root[data-theme="light"] {
  --bg: #f7f8fb;
  --bg-2: #eef1f6;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f2f5fa;
  --surface-3: #e7edf7;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.20);
  --text: #0f172a;
  --muted: #5b6678;
  --soft: #263244;
  --accent: #d90429;
  --accent-2: #101827;
  --blue: #2f6de0;
  --red: #d90429;
}
body {
  background:
    radial-gradient(circle at 72% 28%, rgba(239,35,60,.18), transparent 28rem),
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.045), transparent 22rem),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 55%, #080810 100%);
}
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 72% 25%, rgba(217,4,41,.12), transparent 28rem),
    linear-gradient(135deg, #ffffff 0%, #f3f6fb 60%, #edf1f7 100%);
}
.topbar {
  min-height: 74px;
  padding: 0 34px;
  background: rgba(10, 16, 26, .88);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.88); }
.brand-partner-logo { border-radius: 10px; border-color: rgba(255,255,255,.15); }
.nav { gap: 20px; font-size: .9rem; }
.nav a, .nav-button { color: var(--muted); }
.nav a:hover, .nav-button:hover, .nav-cta { color: var(--text) !important; }
.nav-cta { font-weight: 800; }
.theme-toggle, .lang-select {
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border-color: var(--line-strong);
  box-shadow: none;
}
.theme-toggle:hover, .lang-select:hover { border-color: var(--red); color: var(--text); }
.public-shell .page { width: min(1320px, calc(100% - 64px)); padding-bottom: 44px; }
.premium-landing {
  min-height: calc(100vh - 290px);
  grid-template-columns: minmax(0, .95fr) minmax(420px, .85fr);
  gap: 70px;
  padding: 82px 0 54px;
}
.premium-landing .hero-copy h1 span { color: var(--red); text-shadow: 0 0 34px rgba(239,35,60,.22); }
.partner-lockup, .eyebrow {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--soft);
  box-shadow: none;
}
.eyebrow:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 18px rgba(239,35,60,.8); }
.button { border-radius: 10px; box-shadow: none; }
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #ef233c, #b80d22);
  border-color: rgba(239,35,60,.72);
}
.button.primary:hover { color: #fff; background: #ef233c; border-color: #ff5267; }
.button.ghost { color: var(--soft); background: rgba(255,255,255,.035); }
.button.ghost:hover { color: var(--text); border-color: rgba(255,255,255,.28); }
.cyber-visual {
  position: relative;
  min-height: 430px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(239,35,60,.32), transparent 8rem),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.08), transparent 16rem),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.45), inset 0 0 60px rgba(239,35,60,.06);
}
.cyber-visual:before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(239,35,60,.32) 49% 50%, transparent 51% 100%),
    radial-gradient(circle, rgba(239,35,60,.35) 1px, transparent 1.5px);
  background-size: 110px 100%, 24px 24px;
  transform: perspective(700px) rotateX(60deg) translateY(130px);
  opacity: .36;
  animation: cyberDrift 9s linear infinite;
}
.cyber-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.06), transparent 62%);
  transform: translateX(-80%);
  animation: sheen 6s ease-in-out infinite;
}
.cyber-orbit { position: absolute; inset: 50%; border: 1px solid rgba(239,35,60,.55); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 32px rgba(239,35,60,.12); }
.orbit-one { width: 270px; height: 270px; animation: spin 18s linear infinite; }
.orbit-two { width: 360px; height: 360px; border-style: dashed; opacity: .65; animation: spin 28s linear reverse infinite; }
.orbit-three { width: 455px; height: 455px; opacity: .28; animation: pulseRing 4s ease-in-out infinite; }
.cyber-shield { position: absolute; left: 50%; top: 50%; width: 128px; height: 150px; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 92% 17%, 82% 78%, 50% 100%, 18% 78%, 8% 17%); background: rgba(239,35,60,.12); border: 2px solid var(--red); box-shadow: 0 0 42px rgba(239,35,60,.42); }
.shield-top { position: absolute; inset: 18px 18px 52px; border: 2px solid rgba(255,255,255,.70); border-bottom: 0; border-radius: 999px 999px 0 0; }
.shield-lock { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); color: #fff; font-size: 3rem; font-weight: 900; text-shadow: 0 0 20px rgba(239,35,60,.8); }
.node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px var(--red), 0 0 34px var(--red); }
.node-a { left: 22%; top: 24%; animation: blink 2.2s infinite; }
.node-b { right: 19%; top: 31%; animation: blink 3.1s infinite; }
.node-c { left: 62%; bottom: 17%; animation: blink 2.6s infinite; }
.scan-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,35,60,.85), transparent); box-shadow: 0 0 20px rgba(239,35,60,.75); animation: scan 3.4s ease-in-out infinite; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: -10px 0 34px; padding: 18px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; }
.hero-metrics .metric { min-height: 96px; background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.10); box-shadow: none; }
.hero-metrics .metric:first-child { border-left: 0; }
.hero-metrics .metric strong { color: #fff; }
.metric, .stat { border-left-color: var(--red); }
.metric:nth-child(2), .feature:nth-child(2) { border-left-color: var(--red); border-top-color: var(--red); }
.feature { border-top-color: rgba(255,255,255,.16); }
.feature:hover, .category-card:hover, .challenge-row:hover { border-color: rgba(239,35,60,.35); }
.icon-pill, .icon-pill.mini, .challenge-code, .code, .sidebar-label, .nav-accordion[open] summary, .sidebar a:hover { color: var(--text); }
.icon-pill { background: rgba(239,35,60,.10); border-color: rgba(239,35,60,.30); }
.nav-accordion[open] summary { background: rgba(239,35,60,.08); }
.view-category, .footer a, .contact-strip a { color: var(--text) !important; }
.view-category:hover, .footer a:hover, .contact-strip a:hover { color: #ff586b !important; }
.progress-track span, .mini-track span { background: linear-gradient(90deg, var(--red), #ffffff); }
.footer.public-footer { padding: 0; background: rgba(6,9,16,.98); border-top: 1px solid rgba(255,255,255,.10); }
.professional-footer { padding: 34px 0 22px; grid-template-columns: 1.25fr .75fr 1fr; gap: 28px 56px; }
.footer-about-text { margin: 16px 0 0; max-width: 440px; color: var(--muted); font-size: .86rem; }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column strong { color: var(--text); margin-bottom: 4px; }
.footer-credit { margin-top: 10px; color: var(--muted); }
:root[data-theme="light"] .cyber-visual { background: radial-gradient(circle at 50% 52%, rgba(217,4,41,.18), transparent 9rem), linear-gradient(135deg, #fff, #f2f5fb); box-shadow: 0 24px 60px rgba(15,23,42,.12); }
:root[data-theme="light"] .hero-metrics { background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.10); }
:root[data-theme="light"] .hero-metrics .metric strong { color: var(--text); }
:root[data-theme="light"] .footer.public-footer { background: #ffffff; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pulseRing { 0%,100% { opacity:.20; transform: translate(-50%, -50%) scale(.98); } 50% { opacity:.42; transform: translate(-50%, -50%) scale(1.03); } }
@keyframes scan { 0%,100% { transform: translateY(-130px); opacity:.1; } 50% { transform: translateY(130px); opacity:1; } }
@keyframes blink { 0%,100% { opacity:.35; transform: scale(.75); } 50% { opacity:1; transform: scale(1.25); } }
@keyframes cyberDrift { to { background-position: 110px 0, 24px 24px; } }
@keyframes sheen { 0%, 55% { transform: translateX(-90%); } 100% { transform: translateX(90%); } }
@media (max-width: 900px) { .premium-landing, .hero-metrics, .professional-footer { grid-template-columns: 1fr; } .cyber-visual { min-height: 320px; } .hero-metrics .metric { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); } .hero-metrics .metric:first-child { border-top: 0; } }

/* --- v2 clean white/red professional cyber range refinements --- */
:root, :root[data-theme="light"] {
  color-scheme: dark;
  --bg: #07080d;
  --bg-2: #0d111a;
  --surface: #151822;
  --surface-solid: #0c1119;
  --surface-2: #191d29;
  --surface-3: #222737;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #ffffff;
  --muted: #8f98a8;
  --soft: #dfe5ef;
  --accent: #ff253a;
  --accent-2: #ffffff;
  --red: #ff253a;
  --blue: #ffffff;
  --green: #35d07f;
}
body {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.045), transparent 26rem),
    radial-gradient(circle at 78% 34%, rgba(255,37,58,.12), transparent 30rem),
    linear-gradient(135deg, #080a10 0%, #111520 54%, #09090f 100%);
}
.theme-toggle { display:none !important; }
.topbar { background: rgba(12,17,25,.96); min-height: 72px; }
.nav { gap: 22px; }
.nav a, .nav-button { font-weight: 700; }
.nav a:hover, .nav-button:hover, .nav-cta { color: #fff !important; }
.nav-cta { color: #ff2f43 !important; }
.lang-select { min-width: 132px; }
.button.primary { background: #ff253a; border-color: #ff253a; color:#fff; box-shadow:none; }
.button.primary:hover { background:#d91629; border-color:#ff5264; }
.hero-copy h1 span, .premium-landing .hero-copy h1 span { color:#ff253a; }
.premium-landing { grid-template-columns: minmax(0, .88fr) minmax(460px, .78fr); gap: 72px; padding-top: 88px; }
.mission-preview {
  position: relative; overflow:hidden; min-height: 430px; padding: 28px; border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11); box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.mission-preview:before { content:''; position:absolute; inset:-35%; background: radial-gradient(circle, rgba(255,37,58,.28) 1px, transparent 2px); background-size: 26px 26px; opacity:.23; animation: cyberDrift 12s linear infinite; }
.mission-preview:after { content:''; position:absolute; right:-120px; top:45px; width:360px; height:360px; border:1px solid rgba(255,37,58,.34); border-radius:50%; box-shadow:0 0 55px rgba(255,37,58,.14), inset 0 0 45px rgba(255,37,58,.07); animation: spin 32s linear infinite; }
.mission-preview > * { position:relative; z-index:1; }
.preview-header { display:flex; align-items:center; gap:10px; color:#dfe5ef; margin-bottom:28px; }
.preview-header span:last-child { margin-left:auto; color:#ff253a; font-weight:800; }
.status-dot { width:9px; height:9px; border-radius:99px; background:#ff253a; box-shadow:0 0 18px rgba(255,37,58,.9); }
.preview-level { display:grid; grid-template-columns:72px 1fr; gap:18px; padding:24px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(0,0,0,.20); }
.level-badge { width:68px; height:68px; display:grid; place-items:center; border-radius:50%; color:#fff; border:2px solid #ff253a; box-shadow:0 0 24px rgba(255,37,58,.2); font-weight:900; }
.preview-row { display:flex; justify-content:space-between; gap:16px; color:var(--muted); }
.preview-row strong { color:#fff; }
.preview-level small { color:#8f98a8; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.preview-stats div { padding:18px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.preview-stats strong { display:block; font-size:2rem; color:#fff; }
.preview-stats span { color:#8f98a8; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.preview-labs { display:grid; gap:10px; margin-top:18px; }
.preview-labs span { padding:14px 16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:12px; color:#dfe5ef; }
.hero-metrics { display:none; }
.feature-grid { margin-top: 8px; }
.feature, .category-card, .progress-panel, .form-panel, .auth-box, .side-panel, .lab-console, .output-panel, .detail-main, .review-item, .submissions, .challenge-row, .profile-stat, .rank-panel, .mini-progress-card, .achievement, .pending-row { background:rgba(21,24,34,.88); border-color:rgba(255,255,255,.09); }
.feature { border-top: 1px solid rgba(255,37,58,.55); }
.sidebar { background:#101620; }
.sidebar-label { color:#ff253a; }
.nav-accordion[open] summary { background:rgba(255,37,58,.09); color:#fff; }
.challenge-code, .code { color:#ff253a; }
.icon-pill, .icon-pill.mini { color:#fff; background:rgba(255,37,58,.10); border-color:rgba(255,37,58,.35); }
.progress-track span, .mini-track span { background: linear-gradient(90deg,#ff253a,#ffffff); }
.public-footer { background:#070a10 !important; }
.professional-footer { grid-template-columns: 1.2fr .65fr .9fr; border-top:1px solid rgba(255,37,58,.24); }
.footer-brand strong { color:#fff; }
.footer a { color:#fff !important; }
.footer a:hover { color:#ff4457 !important; }
.footer-credit { color:#cfd6e1; }

.profile-hero { display:grid; gap:16px; margin-bottom:18px; }
.breadcrumb { color:#8f98a8; font-size:.82rem; font-weight:800; }
.rank-panel { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:24px; padding:24px; border-radius:18px; }
.rank-main { min-width:0; }
.rank-avatar { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:88px; height:88px; overflow:hidden; border-radius:50%; background:rgba(255,37,58,.10); border:2px solid #ff253a; box-shadow:0 0 28px rgba(255,37,58,.18); }
.rank-avatar > .rank-avatar-label { color:#fff; font-size:1.45rem; line-height:1; }
.rank-avatar > .rank-avatar-level { color:#fff; font-size:.78rem; line-height:1.2; white-space:nowrap; }
.rank-avatar-level span { font-size:inherit; }
.rank-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#8f98a8; }
.rank-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); color:#8f98a8; }
.rank-meta-item { display:flex; align-items:baseline; gap:8px; min-width:0; }
.rank-meta-item + .rank-meta-item { justify-content:flex-end; padding-left:20px; border-left:1px solid rgba(255,255,255,.14); }
.rank-meta-value { color:#cfd6e1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank-meta-value strong { color:#fff; }
.xp-pill { display:inline-flex; min-height:28px; align-items:center; padding:0 12px; background:rgba(255,37,58,.12); border:1px solid rgba(255,37,58,.35); border-radius:999px; color:#fff; font-weight:900; }
.progress-track.large { height:10px; margin:12px 0; }
.profile-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.profile-stat { padding:20px; border-radius:14px; }
.profile-stat strong { display:block; color:#fff; font-size:2rem; }
.profile-stat span { color:#8f98a8; text-transform:uppercase; font-size:.72rem; font-weight:900; letter-spacing:.06em; }
.mini-category-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.mini-progress-card { padding:15px; border-radius:13px; }
.mini-progress-card div:first-child { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; }
.achievement-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.achievement { display:grid; grid-template-rows:auto auto 1fr; gap:9px; min-height:148px; padding:16px; border-radius:14px; }
.achievement-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.achievement-icon svg { width:22px; height:22px; }
.achievement-threshold { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:24px; padding:0 7px; color:#aeb6c3; background:rgba(255,37,58,.08); border:1px solid rgba(255,37,58,.24); border-radius:6px; font-size:.68rem; font-weight:900; font-variant-numeric:tabular-nums; }
.achievement strong { line-height:1.3; }
.achievement small { align-self:end; color:#8f98a8; line-height:1.35; }
.achievement:not(.unlocked) strong, .achievement:not(.unlocked) small { opacity:.58; }
.achievement.unlocked { border-color:rgba(255,37,58,.42); box-shadow:0 0 26px rgba(255,37,58,.08); }
.achievement.unlocked .achievement-icon { color:#fff; background:rgba(255,37,58,.18); border-color:rgba(255,37,58,.58); box-shadow:0 0 20px rgba(255,37,58,.13); }
.achievement.unlocked .achievement-threshold { color:#fff; background:rgba(255,37,58,.15); border-color:rgba(255,37,58,.45); }
.section-title { color:#fff; font-weight:900; margin:4px 0 12px; }
.pending-list { display:grid; gap:10px; }
.pending-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; min-height:66px; padding:14px; border-radius:14px; }
.pending-row small { display:block; color:#8f98a8; margin-top:2px; }
@media(max-width:1000px){ .premium-landing,.mini-category-progress,.profile-stats-grid,.achievement-row{grid-template-columns:1fr 1fr}.mission-preview{min-height:360px}.professional-footer{grid-template-columns:1fr} }
@media(max-width:640px){ .premium-landing,.mini-category-progress,.profile-stats-grid,.achievement-row{grid-template-columns:1fr}.preview-stats{grid-template-columns:1fr}.mission-preview{padding:18px}.pending-row{grid-template-columns:1fr}.topbar{padding:12px 16px;height:auto}.nav{white-space:normal}.rank-panel{grid-template-columns:1fr;padding:20px}.rank-avatar{width:82px;height:82px}.rank-top{align-items:flex-start;flex-direction:column}.rank-meta{grid-template-columns:1fr;gap:10px}.rank-meta-item + .rank-meta-item{justify-content:flex-start;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.14);border-left:0} }

/* --- Final requested home-only polish: reference-style red/white cyber landing --- */
.public-shell .page { width:min(1460px, calc(100% - 72px)); }
.home-cyber-hero { min-height: 610px; grid-template-columns:minmax(0,.9fr) minmax(520px,1fr); align-items:center; gap:72px; padding:70px 0 32px; }
.home-cyber-hero:before { content:''; position:absolute; inset:-40px -80px 0 auto; width:62%; background:radial-gradient(circle at 64% 45%, rgba(255,37,58,.28), transparent 19rem), radial-gradient(circle at 40% 52%, rgba(255,255,255,.05), transparent 22rem); pointer-events:none; }
.home-cyber-hero .hero-copy { position:relative; z-index:2; }
.home-cyber-hero .eyebrow { display:inline-flex; min-height:34px; padding:0 14px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.13); text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; }
.home-cyber-hero .hero-copy h1 { margin-top:20px; font-size:clamp(3rem, 6.3vw, 5.5rem); letter-spacing:-.055em; text-shadow:0 1px 0 rgba(255,37,58,.35); }
.home-cyber-hero .hero-copy h1 span { color:#ff253a; }
.home-cyber-hero .hero-text { max-width:640px; font-size:1.08rem; line-height:1.65; color:#cfd6e1; }
.home-cyber-hero .action-row { margin-top:26px; }
.home-cyber-hero .button { min-height:54px; padding:0 24px; border-radius:8px; font-weight:900; }
.home-cyber-hero .button.primary { background:linear-gradient(135deg,#ff253a,#d90d23); box-shadow:0 16px 38px rgba(255,37,58,.24); }
.home-cyber-hero .button.ghost { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.16); color:#fff; }
.capability-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; margin-top:36px; max-width:760px; }
.capability-row div { display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; min-width:0; }
.capability-row .cap-icon { grid-row:1/3; }
.cap-icon { width:48px; height:48px; display:inline-grid; place-items:center; border-radius:12px; color:#ff6a78; background:rgba(255,37,58,.10); border:1px solid rgba(255,37,58,.36); box-shadow:inset 0 0 24px rgba(255,37,58,.06); font-weight:900; }
.capability-row strong { color:#fff; font-size:1rem; line-height:1.1; }
.capability-row small { color:#aeb7c6; font-size:.84rem; }
.home-red-visual { min-height:520px; border:0; border-radius:0; background:radial-gradient(circle at 62% 50%, rgba(255,37,58,.32), transparent 12rem), radial-gradient(circle at 58% 58%, rgba(255,255,255,.10), transparent 18rem); box-shadow:none; overflow:visible; }
.home-red-visual:before { opacity:.42; background:radial-gradient(circle, rgba(255,37,58,.55) 1px, transparent 1.8px), linear-gradient(90deg, transparent, rgba(255,37,58,.34), transparent); background-size:26px 26px, 100% 1px; transform:perspective(900px) rotateX(62deg) translateY(160px); }
.home-red-visual:after { content:''; position:absolute; inset:3% 0 0 0; background:radial-gradient(ellipse at 55% 55%, transparent 0 26%, rgba(255,37,58,.20) 26.3% 26.9%, transparent 27.2% 100%), linear-gradient(90deg, transparent 0 8%, rgba(255,37,58,.22) 12%, transparent 18% 42%, rgba(255,37,58,.20) 48%, transparent 62% 100%); opacity:.62; animation:scan 4.8s ease-in-out infinite; }
.home-red-visual .cyber-shield { width:168px; height:196px; background:rgba(255,37,58,.08); border:2px solid #ff253a; filter:drop-shadow(0 0 34px rgba(255,37,58,.65)); }
.home-red-visual .shield-lock { font-size:4.2rem; color:#ff253a; }
.home-red-visual .shield-top { border-color:rgba(255,255,255,.72); }
.home-red-visual .orbit-one { width:310px; height:310px; border-color:rgba(255,37,58,.80); }
.home-red-visual .orbit-two { width:425px; height:425px; border-color:rgba(255,37,58,.48); }
.home-red-visual .orbit-three { width:545px; height:545px; border-color:rgba(255,37,58,.28); }
.home-red-visual .node { background:#ff253a; }
.map-dots { position:absolute; inset:6% 0 0 0; background:radial-gradient(circle at 18% 35%, rgba(255,37,58,.35) 0 1px, transparent 2px), radial-gradient(circle at 44% 28%, rgba(255,37,58,.28) 0 1px, transparent 2px), radial-gradient(circle at 70% 43%, rgba(255,37,58,.32) 0 1px, transparent 2px); background-size:22px 18px, 24px 20px, 26px 22px; opacity:.45; mask-image:linear-gradient(90deg, transparent, black 18%, black 88%, transparent); }
.home-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:20px 0 28px; padding:28px 34px; border:1px solid rgba(255,37,58,.48); border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,37,58,.03)); box-shadow:0 20px 60px rgba(0,0,0,.25), inset 0 0 80px rgba(255,37,58,.03); }
.stat-box { display:grid; grid-template-columns:58px auto; grid-template-rows:auto auto; gap:0 16px; align-items:center; padding:0 38px; border-left:1px solid rgba(255,255,255,.12); }
.stat-box:first-child { border-left:0; }
.stat-box .cap-icon { grid-row:1/3; width:58px; height:58px; }
.stat-box strong { color:#fff; font-size:2rem; line-height:1; }
.stat-box span:last-child { color:#aeb7c6; }
.band { display:none; }
.premium-home-footer.public-footer { margin-top:0; background:linear-gradient(180deg,#070a10,#05070c) !important; border-top:1px solid rgba(255,255,255,.10); }
.premium-home-footer .professional-footer { padding:34px 0 18px; grid-template-columns:1.25fr .65fr .75fr 1fr; gap:34px 58px; border-top:0; }
.footer-logo-lockup strong { font-size:1.3rem; line-height:1; }
.footer-logo-lockup strong span { color:#ff253a; }
.footer-logo-lockup em { display:block; font-style:normal; text-transform:uppercase; letter-spacing:.14em; color:#aeb7c6; font-size:.72rem; margin-top:3px; }
.social-row { display:flex; gap:10px; margin-top:18px; }
.social-row a { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); color:#cfd6e1 !important; text-decoration:none; }
.social-row a:hover { border-color:rgba(255,37,58,.55); color:#ff4457 !important; }
.footer-column a { text-decoration:none; color:#cfd6e1 !important; }
.footer-column strong { color:#fff; font-size:1rem; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.09); color:#9aa4b5; font-size:.86rem; }
@media(max-width:1100px){ .home-cyber-hero{grid-template-columns:1fr}.home-red-visual{min-height:420px}.capability-row,.home-stat-strip{grid-template-columns:repeat(2,1fr)}.stat-box{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:20px}.premium-home-footer .professional-footer{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column} }
@media(max-width:640px){ .public-shell .page{width:min(100% - 32px, 1460px)}.capability-row,.home-stat-strip,.premium-home-footer .professional-footer{grid-template-columns:1fr}.home-cyber-hero{padding-top:38px}.home-red-visual{min-height:320px}.stat-box{padding:18px 0}.capability-row div{grid-template-columns:44px 1fr}.cap-icon{width:44px;height:44px} }

/* Static homepage cyber image: no live/animated canvas, no moving SVG effects */
.home-red-visual.static-red-shield {
  min-height: 520px;
  border: 0 !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(5,8,14,.08), rgba(5,8,14,0) 18%, rgba(5,8,14,0)),
    url('/public/img/home-red-shield-static.png') !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  background-size: contain !important;
  box-shadow: none !important;
  overflow: hidden;
}
.home-red-visual.static-red-shield::before,
.home-red-visual.static-red-shield::after { display: none !important; animation: none !important; }
.home-red-visual.static-red-shield * { display: none !important; animation: none !important; }
.home-cyber-hero::before { display: none !important; }
@media(max-width:1100px){ .home-red-visual.static-red-shield{ min-height:420px; background-position:center !important; } }
@media(max-width:640px){ .home-red-visual.static-red-shield{ min-height:300px; } }

/* --- Final fix: CSS-only static home hero art, no pasted screenshot/image, no animation --- */
.home-red-visual.static-red-shield {
  background-image: none !important;
}
.home-red-visual.css-red-shield {
  position: relative;
  min-height: 520px;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 64% 54%, rgba(255, 37, 58, .42), transparent 12rem),
    radial-gradient(circle at 66% 54%, rgba(255, 255, 255, .10), transparent 18rem),
    radial-gradient(circle at 80% 18%, rgba(255, 37, 58, .22), transparent 12rem),
    linear-gradient(90deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, .12) 25%, rgba(8, 12, 20, 0) 100%);
  box-shadow: none !important;
}
.home-red-visual.css-red-shield::before,
.home-red-visual.css-red-shield::after { display: none !important; animation: none !important; }
.red-world-map {
  position: absolute;
  inset: 7% 2% 18% 0;
  opacity: .50;
  background:
    radial-gradient(circle at 20% 36%, rgba(255,37,58,.55) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 42% 30%, rgba(255,37,58,.42) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 68% 42%, rgba(255,37,58,.50) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 86% 26%, rgba(255,37,58,.40) 0 1.2px, transparent 1.8px);
  background-size: 22px 18px, 24px 20px, 20px 19px, 25px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  z-index: 1;
}
.red-world-map::before {
  content: '';
  position: absolute;
  inset: 14% 8% 20% 3%;
  background:
    radial-gradient(ellipse at 30% 44%, rgba(255,37,58,.18) 0 16%, transparent 16.5%),
    radial-gradient(ellipse at 50% 34%, rgba(255,37,58,.15) 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 71% 46%, rgba(255,37,58,.16) 0 17%, transparent 17.5%);
  filter: blur(.5px);
}
.red-grid-plane {
  position: absolute;
  left: 6%;
  right: 3%;
  bottom: 2%;
  height: 42%;
  background:
    linear-gradient(rgba(255,37,58,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,37,58,.24) 1px, transparent 1px);
  background-size: 36px 28px;
  transform: perspective(900px) rotateX(62deg) translateY(60px);
  transform-origin: center bottom;
  opacity: .22;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse at 66% 60%, #000 0 42%, transparent 74%);
  mask-image: radial-gradient(ellipse at 66% 60%, #000 0 42%, transparent 74%);
}
.red-beam {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,37,58,.85), transparent);
  box-shadow: 0 0 12px rgba(255,37,58,.8), 0 0 28px rgba(255,37,58,.35);
  z-index: 2;
}
.red-beam-a { width: 82%; right: 0; top: 26%; transform: rotate(-8deg); }
.red-beam-b { width: 78%; right: 1%; top: 51%; transform: rotate(.5deg); }
.red-beam-c { width: 62%; right: 9%; bottom: 24%; transform: rotate(9deg); }
.red-hud-ring {
  position: absolute;
  left: 64%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,37,58,.50);
  box-shadow: 0 0 34px rgba(255,37,58,.18), inset 0 0 24px rgba(255,37,58,.08);
  z-index: 3;
}
.ring-outer { width: 410px; height: 410px; opacity: .45; }
.ring-mid { width: 310px; height: 310px; opacity: .72; border-style: dashed; }
.ring-inner { width: 210px; height: 210px; opacity: .86; }
.red-hud-ring::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}
.red-shield-outline {
  position: absolute;
  left: 64%;
  top: 52%;
  width: 170px;
  height: 200px;
  transform: translate(-50%, -50%);
  z-index: 5;
  clip-path: polygon(50% 0, 89% 16%, 80% 77%, 50% 100%, 20% 77%, 11% 16%);
  background: linear-gradient(180deg, rgba(255,37,58,.12), rgba(255,37,58,.035));
  border: 2px solid #ff253a;
  box-shadow: 0 0 26px rgba(255,37,58,.7), inset 0 0 30px rgba(255,37,58,.13);
}
.red-shield-outline::before {
  content: '';
  position: absolute;
  inset: 14px 16px 18px;
  clip-path: polygon(50% 0, 88% 17%, 78% 76%, 50% 96%, 22% 76%, 12% 17%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 0 18px rgba(255,37,58,.16);
}
.red-lock {
  position: absolute;
  width: 58px;
  height: 48px;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  border: 3px solid #ff253a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,37,58,.65);
}
.red-lock::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -38px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border: 3px solid #ff253a;
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
}
.red-lock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 16px;
  width: 8px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #ff253a;
  box-shadow: 0 0 12px rgba(255,37,58,.9);
}
.red-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 26px #ff253a, 0 0 48px #ff253a;
  z-index: 6;
}
.spark-a { right: 20%; top: 18%; }
.spark-b { right: 9%; top: 34%; }
.spark-c { right: 30%; bottom: 14%; }
.home-cyber-hero::before { display: block !important; }
@media(max-width:1100px){ .home-red-visual.css-red-shield{ min-height:420px; } .red-hud-ring{ left:50%; } .red-shield-outline{ left:50%; } }
@media(max-width:640px){ .home-red-visual.css-red-shield{ min-height:300px; } .ring-outer{width:300px;height:300px}.ring-mid{width:230px;height:230px}.ring-inner{width:160px;height:160px}.red-shield-outline{width:120px;height:145px}.red-lock{width:42px;height:35px}.red-lock::before{width:30px;height:30px;top:-27px} }

/* --- FINAL HOME PAGE REFERENCE FIX: CSS-only, no pasted image, no live animation --- */
.public-shell .page {
  width: min(1460px, calc(100% - 64px)) !important;
  padding: 0 0 0 !important;
}
.public-shell .topbar {
  min-height: 78px;
  padding-inline: 34px;
  background: rgba(7, 11, 18, .94) !important;
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.public-shell .brand-partner-logo { width: 48px; height: 48px; }
.public-shell .brand-copy strong { font-size: 1.28rem; }
.public-shell .brand-copy strong::first-letter { color: inherit; }
.public-shell .brand-copy span { font-size: .72rem; letter-spacing: .16em; }
.public-shell .nav { gap: 26px; }
.public-shell .nav a { color: #d3d8e4; font-weight: 600; }
.public-shell .nav-cta { color: #ff2f45 !important; }
.public-shell .lang-select {
  min-width: 150px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.16);
  color: #f6f8fb;
}
.public-home-reference {
  position: relative;
  display: grid;
  grid-template-columns: minmax(540px, .92fr) minmax(560px, 1.08fr) !important;
  gap: 54px !important;
  align-items: center;
  min-height: 690px !important;
  padding: 58px 0 34px !important;
  overflow: hidden;
}
.public-home-reference::before {
  content: '';
  position: absolute;
  inset: 0 -9vw auto auto;
  width: 62%;
  height: 100%;
  background:
    radial-gradient(circle at 70% 45%, rgba(255,35,54,.20), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.07), transparent 14rem);
  pointer-events: none;
  z-index: 0;
}
.public-home-reference .hero-copy,
.public-home-reference .home-reference-visual { position: relative; z-index: 1; }
.home-reference-copy { max-width: 690px; }
.reference-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 14px !important;
  margin: 0 0 18px !important;
  border-radius: 9px !important;
  color: #e9edf5 !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 30px rgba(255,255,255,.015);
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ff253a;
  box-shadow: 0 0 14px rgba(255,37,58,.85);
}
.public-home-reference h1 {
  margin: 0 0 20px !important;
  font-size: clamp(4.2rem, 6.5vw, 6.7rem) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  font-weight: 950 !important;
  color: #fff;
  text-shadow: 0 2px 0 rgba(255,37,58,.24), 0 18px 70px rgba(0,0,0,.35);
}
.public-home-reference h1 span {
  color: #ff263d !important;
  text-shadow: 0 0 28px rgba(255,37,58,.18);
}
.public-home-reference .hero-text {
  max-width: 640px !important;
  margin: 0 !important;
  color: #cfd5df !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
}
.reference-actions { margin-top: 26px !important; gap: 16px !important; }
.reference-actions .button {
  min-width: 164px;
  min-height: 54px !important;
  border-radius: 8px !important;
  font-size: .93rem !important;
  font-weight: 850 !important;
}
.reference-actions .button.primary {
  color: white !important;
  border-color: #ff253a !important;
  background: linear-gradient(135deg, #ff253a, #dc1028) !important;
  box-shadow: 0 16px 38px rgba(255,37,58,.22) !important;
}
.reference-actions .button.ghost {
  color: #f6f8fb !important;
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,.012) !important;
}
.button-icon { color: #ffffff; opacity: .88; }
.reference-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
  max-width: 780px;
}
.reference-highlights > div {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  min-width: 0;
}
.feature-icon {
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  color: #ff6978;
  background: linear-gradient(145deg, rgba(255,37,58,.13), rgba(255,37,58,.045));
  border: 1px solid rgba(255,37,58,.42);
  box-shadow: inset 0 0 22px rgba(255,37,58,.04), 0 8px 26px rgba(0,0,0,.16);
  font-weight: 900;
}
.reference-highlights strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.12;
  font-weight: 850;
}
.reference-highlights small {
  display: block;
  color: #b8c0ce;
  font-size: .83rem;
}
.home-reference-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(circle at 66% 52%, rgba(255,37,58,.34), transparent 14rem),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.12), transparent 9rem),
    linear-gradient(90deg, transparent 0 12%, rgba(5,9,15,.12) 22%, rgba(5,9,15,0) 100%);
}
.reference-map-dots {
  position: absolute;
  inset: 9% 0 20% 0;
  opacity: .55;
  background:
    radial-gradient(circle, rgba(255,38,61,.72) 0 1px, transparent 1.75px),
    radial-gradient(circle, rgba(255,255,255,.38) 0 1px, transparent 1.85px);
  background-size: 18px 17px, 41px 37px;
  background-position: 0 0, 11px 7px;
  -webkit-mask-image:
    radial-gradient(ellipse at 22% 45%, #000 0 20%, transparent 20.6%),
    radial-gradient(ellipse at 40% 36%, #000 0 18%, transparent 18.6%),
    radial-gradient(ellipse at 62% 42%, #000 0 25%, transparent 25.6%),
    radial-gradient(ellipse at 82% 28%, #000 0 17%, transparent 17.6%),
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:
    radial-gradient(ellipse at 22% 45%, #000 0 20%, transparent 20.6%),
    radial-gradient(ellipse at 40% 36%, #000 0 18%, transparent 18.6%),
    radial-gradient(ellipse at 62% 42%, #000 0 25%, transparent 25.6%),
    radial-gradient(ellipse at 82% 28%, #000 0 17%, transparent 17.6%),
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  z-index: 1;
}
.reference-speed-lines {
  position: absolute;
  inset: 6% 0 8%;
  background:
    linear-gradient(94deg, transparent 0 20%, rgba(255,37,58,.55) 35%, transparent 49% 100%),
    linear-gradient(176deg, transparent 0 32%, rgba(255,37,58,.34) 46%, transparent 60% 100%),
    linear-gradient(4deg, transparent 0 36%, rgba(255,37,58,.36) 50%, transparent 68% 100%),
    linear-gradient(90deg, transparent 0 10%, rgba(255,37,58,.22) 13%, transparent 18% 60%, rgba(255,37,58,.25) 65%, transparent 76% 100%);
  opacity: .75;
  filter: drop-shadow(0 0 10px rgba(255,37,58,.45));
  z-index: 2;
}
.reference-grid-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2%;
  height: 42%;
  background:
    linear-gradient(rgba(255,37,58,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,37,58,.18) 1px, transparent 1px);
  background-size: 34px 26px;
  transform: perspective(880px) rotateX(64deg) translateY(70px);
  transform-origin: center bottom;
  opacity: .18;
  -webkit-mask-image: radial-gradient(ellipse at 62% 50%, #000 0 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at 62% 50%, #000 0 45%, transparent 72%);
  z-index: 1;
}
.reference-orbit {
  position: absolute;
  left: 62%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,37,58,.46);
  box-shadow: 0 0 36px rgba(255,37,58,.15), inset 0 0 24px rgba(255,37,58,.08);
  z-index: 3;
}
.orbit-one { width: 500px; height: 500px; opacity: .34; }
.orbit-two { width: 370px; height: 370px; opacity: .56; border-style: dashed; }
.orbit-three { width: 245px; height: 245px; opacity: .78; }
.reference-shield {
  position: absolute;
  left: 62%;
  top: 52%;
  width: 194px;
  height: 226px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 90% 16%, 80% 78%, 50% 100%, 20% 78%, 10% 16%);
  background: linear-gradient(180deg, rgba(255,37,58,.16), rgba(255,37,58,.045));
  border: 2px solid #ff253a;
  filter: drop-shadow(0 0 26px rgba(255,37,58,.82)) drop-shadow(0 0 70px rgba(255,37,58,.34));
  z-index: 5;
}
.reference-shield::before {
  content: '';
  position: absolute;
  inset: 14px 17px 22px;
  clip-path: polygon(50% 0, 89% 17%, 78% 76%, 50% 96%, 22% 76%, 11% 17%);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 0 26px rgba(255,37,58,.17);
}
.reference-lock {
  position: absolute;
  width: 62px;
  height: 50px;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  border: 3px solid #ff253a;
  border-radius: 13px;
  box-shadow: 0 0 18px rgba(255,37,58,.85);
}
.reference-lock::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -39px;
  width: 44px;
  height: 43px;
  transform: translateX(-50%);
  border: 3px solid #ff253a;
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
}
.reference-lock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 16px;
  width: 9px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #ff253a;
  box-shadow: 0 0 12px rgba(255,37,58,.95);
}
.reference-glow-base {
  position: absolute;
  left: 62%;
  bottom: 7%;
  width: 280px;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,37,58,.85), rgba(255,37,58,.16) 38%, transparent 72%);
  filter: blur(2px);
  z-index: 2;
}
.reference-light {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 28px rgba(255,37,58,.95), 0 0 60px rgba(255,37,58,.75);
  z-index: 6;
}
.light-one { top: 16%; right: 18%; }
.light-two { top: 37%; right: 4%; }
.light-three { bottom: 18%; right: 26%; }
.reference-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 0 28px;
  padding: 26px 34px;
  border: 1px solid rgba(255,37,58,.50);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.018), rgba(255,37,58,.04));
  box-shadow: 0 22px 60px rgba(0,0,0,.25), inset 0 0 80px rgba(255,37,58,.035);
}
.reference-stat {
  display: grid;
  grid-template-columns: 58px auto;
  grid-template-rows: auto auto;
  gap: 0 16px;
  align-items: center;
  min-height: 74px;
  padding: 0 42px;
  border-left: 1px solid rgba(255,255,255,.13);
}
.reference-stat:first-child { border-left: 0; }
.reference-stat .feature-icon { width: 58px; height: 58px; }
.reference-stat strong { color: #fff; font-size: 2rem; line-height: 1; font-weight: 900; }
.reference-stat span:last-child { color: #b8c0ce; }
.public-shell .band,
.public-shell .feature-grid { display: none !important; }
.public-shell .premium-home-footer.public-footer {
  margin-top: 0 !important;
  padding: 0 34px !important;
  background: linear-gradient(180deg, rgba(5,8,14,.98), #05070c) !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
}
.public-shell .premium-home-footer .professional-footer {
  width: min(1460px, 100%);
  padding: 34px 0 18px !important;
  display: grid !important;
  grid-template-columns: 1.35fr .75fr .9fr 1fr;
  gap: 34px 60px;
  border-top: 0 !important;
}
.public-shell .footer-logo-lockup strong span { color: #ff253a; }
.public-shell .footer-column a:hover,
.public-shell .social-row a:hover { color: #ff4457 !important; }
.public-shell .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.09);
}
@media (max-width: 1180px) {
  .public-home-reference { grid-template-columns: 1fr !important; min-height: auto !important; }
  .home-reference-copy { max-width: 760px; }
  .home-reference-visual { min-height: 440px; }
  .reference-orbit, .reference-shield, .reference-glow-base { left: 50%; }
  .reference-stat-strip, .reference-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); padding: 20px; }
  .reference-stat:nth-child(1), .reference-stat:nth-child(2) { border-top: 0; }
  .public-shell .premium-home-footer .professional-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .public-shell .page { width: min(100% - 32px, 1460px) !important; }
  .public-shell .topbar { padding-inline: 16px; }
  .public-shell .nav { gap: 12px; }
  .public-home-reference h1 { font-size: 3.2rem !important; }
  .reference-highlights, .reference-stat-strip, .public-shell .premium-home-footer .professional-footer { grid-template-columns: 1fr; }
  .reference-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.10) !important; padding: 18px 0; }
  .reference-stat:first-child { border-top: 0 !important; }
  .home-reference-visual { min-height: 330px; }
  .orbit-one { width: 315px; height: 315px; }
  .orbit-two { width: 245px; height: 245px; }
  .orbit-three { width: 170px; height: 170px; }
  .reference-shield { width: 122px; height: 145px; }
  .reference-lock { width: 40px; height: 33px; }
  .reference-lock::before { width: 28px; height: 28px; top: -25px; }
  .public-shell .footer-bottom { flex-direction: column; }
}


/* User requested final homepage clean-up: remove right-side hero graphic entirely. */
.public-home-reference {
  grid-template-columns: minmax(540px, .88fr) minmax(420px, 1.12fr) !important;
}
.home-reference-blank {
  min-height: 520px;
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home-reference-blank::before,
.home-reference-blank::after { display: none !important; content: none !important; }
.home-reference-visual,
.home-red-visual,
.css-red-shield,
.static-red-shield,
.red-world-map,
.red-grid-plane,
.red-beam,
.red-hud-ring,
.red-shield-outline,
.red-lock,
.red-spark,
.reference-map-dots,
.reference-speed-lines,
.reference-grid-floor,
.reference-orbit,
.reference-shield,
.reference-glow-base,
.reference-light {
  display: none !important;
  visibility: hidden !important;
  background-image: none !important;
  animation: none !important;
}
.public-home-reference::before {
  background: radial-gradient(circle at 78% 45%, rgba(255,37,58,.08), transparent 22rem) !important;
}
.public-shell .brand-partner-logo {
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
}
@media (max-width: 1100px) {
  .public-home-reference { grid-template-columns: 1fr !important; }
  .home-reference-blank { display: none !important; }
}

/* --- 2026 requested homepage rebuild: screenshot-matched dark red cyber landing --- */
.public-shell {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 37, 58, .16), transparent 28rem),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.035), transparent 22rem),
    linear-gradient(135deg, #050912 0%, #080d16 48%, #05070d 100%);
}

.public-shell .page {
  width: min(1480px, calc(100% - 72px)) !important;
  padding: 0 0 28px !important;
  min-height: 0 !important;
}

.public-shell .topbar {
  min-height: 80px;
  padding: 0 38px;
  background: rgba(4, 9, 17, .94) !important;
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
}

.public-shell .brand {
  gap: 14px;
}

.public-shell .brand-partner-logo {
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 22px rgba(44, 128, 255, .12);
}

.public-shell .brand-copy {
  line-height: 1;
}

.public-shell .brand-copy strong {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.public-shell .brand-copy strong span {
  display: inline;
  color: #ff253a;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.public-shell .brand-copy > span {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.public-shell .nav {
  gap: 24px;
  color: #d8dde7;
  font-size: .94rem;
}

.public-shell .nav a,
.public-shell .nav-button {
  color: #d8dde7;
  font-weight: 600;
}

.public-shell .nav a:hover {
  color: #ffffff !important;
}

.language-control,
.theme-chip,
.public-shell .nav-login,
.public-shell .nav-cta {
  min-height: 42px;
  border-radius: 8px;
}

.language-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 146px;
  padding: 0;
  background: transparent;
  border: 0;
  z-index: 40;
}

.language-trigger {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 9px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  color: #f7f9fd;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.language-trigger:hover,
.language-trigger:focus-visible,
.language-trigger[aria-expanded="true"] {
  color: #ffffff;
  border-color: rgba(255,47,69,.72);
  background: rgba(255,255,255,.055);
  outline: 0;
}

.language-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.language-trigger[aria-expanded="true"] .language-chevron {
  transform: translateY(2px) rotate(225deg);
}

.language-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 196px;
  padding: 6px;
  background: #111724;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
}

.language-options[hidden] { display: none; }

.language-options button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: #d8dde7;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.language-options button:hover,
.language-options button:focus-visible {
  color: #ffffff;
  background: rgba(255,255,255,.07);
  outline: 0;
}

.language-options button[aria-checked="true"] {
  color: #ffffff;
  background: rgba(255,37,58,.11);
}

.language-code {
  color: #ff5264;
  font-size: .7rem;
  font-weight: 800;
}

.language-check {
  width: 9px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
}

.language-options button[aria-checked="true"] .language-check {
  border-color: #ff5264;
}

.language-icon,
.theme-chip-icon,
.button-icon,
.contact-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.language-icon {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.8px solid #ffffff;
  border-radius: 50%;
}

.language-icon::before,
.language-icon::after {
  content: "";
  position: absolute;
  inset: 3px 6px;
  border-left: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
  border-radius: 50%;
}

.language-icon::after {
  inset: 8px 2px auto;
  height: 1.5px;
  border: 0;
  border-top: 1.5px solid #ffffff;
  border-radius: 0;
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  color: #ffffff;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.16);
  cursor: default;
}

.theme-chip-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset -5px -3px 0 0 #ffffff;
}

.public-shell .nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  color: #ffffff !important;
}

.public-shell .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  padding: 0 20px;
  color: #ffffff !important;
  border: 1px solid rgba(255,37,58,.85);
  background: linear-gradient(135deg, #ff253a, #df1028);
  box-shadow: 0 14px 28px rgba(255,37,58,.22);
}

.public-home-reference {
  position: relative;
  grid-template-columns: minmax(500px, .88fr) minmax(600px, 1.12fr) !important;
  gap: 54px !important;
  min-height: 520px !important;
  padding: 60px 0 24px !important;
  overflow: visible !important;
}

.public-home-reference::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0 0 0 auto !important;
  width: 62% !important;
  background:
    radial-gradient(circle at 58% 42%, rgba(255,37,58,.18), transparent 23rem),
    linear-gradient(90deg, transparent, rgba(255,37,58,.035), transparent);
  z-index: 0;
}

.public-shell {
  overflow-x: clip;
}

.public-home-reference .hero-copy {
  position: relative;
  z-index: 3;
}

.home-reference-copy {
  max-width: 690px;
}

.reference-pill {
  min-height: 34px !important;
  margin: 0 0 22px !important;
  padding: 0 14px !important;
  color: #dce3ef !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  letter-spacing: .045em !important;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff253a;
  box-shadow: 0 0 16px rgba(255,37,58,.9);
}

.public-home-reference h1 {
  margin: 0 0 22px !important;
  color: #ffffff;
  font-size: clamp(4.2rem, 6.7vw, 6.95rem) !important;
  font-weight: 950 !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  text-shadow: 0 20px 65px rgba(0,0,0,.35);
}

.public-home-reference h1 span {
  color: #ff253a !important;
  text-shadow: 0 0 28px rgba(255,37,58,.22);
}

.public-home-reference .hero-text {
  max-width: 640px !important;
  color: #d3d9e4 !important;
  font-size: 1.12rem !important;
  line-height: 1.62 !important;
}

.reference-actions {
  gap: 16px !important;
  margin-top: 28px !important;
}

.reference-actions .button {
  min-width: 178px;
  min-height: 54px !important;
  gap: 14px;
  border-radius: 8px !important;
  font-size: .94rem !important;
  font-weight: 850 !important;
}

.reference-actions .button.primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff253a, #df1028) !important;
  border-color: rgba(255,37,58,.92) !important;
  box-shadow: 0 16px 36px rgba(255,37,58,.24) !important;
}

.reference-actions .button.ghost {
  color: #ffffff !important;
  background: rgba(255,255,255,.022) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.button-arrow {
  position: relative;
  width: 18px;
  height: 12px;
}

.button-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 17px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
}

.button-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.player-icon,
.verify-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.player-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 7px;
  height: 7px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
}

.player-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 13px;
  height: 7px;
  border: 1.8px solid currentColor;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.verify-icon::before {
  content: "";
  position: absolute;
  inset: 2px 4px;
  clip-path: polygon(50% 0, 88% 18%, 78% 75%, 50% 100%, 22% 75%, 12% 18%);
  border: 2px solid currentColor;
}

.verify-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.reference-highlights {
  grid-template-columns: repeat(5, minmax(118px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 38px !important;
  max-width: 820px !important;
}

.reference-highlights > div,
.reference-stat {
  min-width: 0;
}

.feature-icon {
  position: relative;
  color: #ff6d7c !important;
  background: linear-gradient(145deg, rgba(255,37,58,.16), rgba(255,37,58,.045)) !important;
  border: 1px solid rgba(255,37,58,.42) !important;
  border-radius: 10px !important;
}

.feature-icon::before {
  content: "";
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.icon-shield { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 6v6c0 5-3.7 8.8-9 10-5.3-1.2-9-5-9-10V6l9-4Zm0 3.1L6 7.7V12c0 3.5 2.2 6.1 6 7 3.8-.9 6-3.5 6-7V7.7l-6-2.6Zm4.7 5.1-5.6 5.6-3-3 1.5-1.5 1.5 1.5 4.1-4.1 1.5 1.5Z'/%3E%3C/svg%3E"); }
.icon-cube { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 2.8L6.4 8 12 11.2 17.6 8 12 4.8ZM5 9.8v6l6 3.3v-6L5 9.8Zm14 0-6 3.3v6l6-3.3v-6Z'/%3E%3C/svg%3E"); }
.icon-flag { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5V3Zm4 1h10l-2 5 2 5H9V4Z'/%3E%3C/svg%3E"); }
.icon-trend { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17h18v2H3v-2Zm2-3 5-5 4 4 6-7v5h-2V9.2l-3.8 4.5-4.1-4.1L6.4 15.4 5 14Z'/%3E%3C/svg%3E"); }
.icon-cert { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H4V4Zm2 2v7h12V6H6Zm2 11h8v2H8v-2Zm11-1.5 1.2 2.2 2.4.4-1.7 1.7.4 2.4L19 21l-2.2 1.2.4-2.4-1.7-1.7 2.4-.4 1.1-2.2Z'/%3E%3C/svg%3E"); }
.icon-target { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v3.1a7 7 0 0 1 5.9 5.9H22v2h-3.1a7 7 0 0 1-5.9 5.9V22h-2v-3.1A7 7 0 0 1 5.1 13H2v-2h3.1A7 7 0 0 1 11 5.1V2Zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E"); }
.icon-terminal { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v10h14V7H5Zm2 2 4 3-4 3v-2.4L8.5 12 7 10.4V9Zm6 6h4v-2h-4v2Z'/%3E%3C/svg%3E"); }
.icon-users { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.5 0a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM2 21c.4-4.3 3-7 7-7s6.6 2.7 7 7H2Zm13.8-7c3.4.3 5.6 2.7 6.2 7h-4c-.2-2.5-1-4.7-2.2-7Z'/%3E%3C/svg%3E"); }
.icon-award { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14 4l2.8.1.9 2.7 2.3 1.6-.8 2.7.8 2.7-2.3 1.6-.9 2.7-2.8.1-2 2-2-2-2.8-.1-.9-2.7L4 13.8l.8-2.7L4 8.4l2.3-1.6.9-2.7L10 4l2-2Zm0 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-4 11.4 2 .1 2 2 2-2 2-.1v4.1L12 21l-4 1.5v-4.1Z'/%3E%3C/svg%3E"); }

.final-home-art {
  position: relative;
  z-index: 2;
  min-height: 560px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 63% 51%, rgba(255,37,58,.38), transparent 13rem),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.10), transparent 8rem),
    linear-gradient(90deg, rgba(4,8,15,0) 0 10%, rgba(4,8,15,.16) 28%, rgba(4,8,15,0) 100%);
}

.final-map {
  position: absolute;
  inset: 8% 0 18% 0;
  opacity: .62;
  background:
    radial-gradient(circle, rgba(255,37,58,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.26) 0 1px, transparent 1.9px);
  background-size: 17px 16px, 43px 39px;
  background-position: 0 0, 12px 8px;
  -webkit-mask-image:
    radial-gradient(ellipse at 20% 43%, #000 0 18%, transparent 18.7%),
    radial-gradient(ellipse at 38% 33%, #000 0 18%, transparent 18.7%),
    radial-gradient(ellipse at 60% 42%, #000 0 27%, transparent 27.8%),
    radial-gradient(ellipse at 82% 30%, #000 0 18%, transparent 18.8%),
    linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent);
  mask-image:
    radial-gradient(ellipse at 20% 43%, #000 0 18%, transparent 18.7%),
    radial-gradient(ellipse at 38% 33%, #000 0 18%, transparent 18.7%),
    radial-gradient(ellipse at 60% 42%, #000 0 27%, transparent 27.8%),
    radial-gradient(ellipse at 82% 30%, #000 0 18%, transparent 18.8%),
    linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent);
}

.final-speed {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,37,58,.95), transparent);
  box-shadow: 0 0 14px rgba(255,37,58,.75), 0 0 34px rgba(255,37,58,.36);
}

.final-speed-a { top: 25%; right: -5%; width: 86%; transform: rotate(-8deg); }
.final-speed-b { top: 51%; right: -4%; width: 88%; transform: rotate(.5deg); }
.final-speed-c { bottom: 24%; right: 4%; width: 66%; transform: rotate(8deg); }

.final-ring {
  position: absolute;
  left: 62%;
  top: 51%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,37,58,.48);
  border-radius: 50%;
  box-shadow: 0 0 36px rgba(255,37,58,.18), inset 0 0 28px rgba(255,37,58,.09);
}

.final-ring::before,
.final-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,37,58,.24);
}

.final-ring::before { inset: 10%; }
.final-ring::after { inset: 24%; border-color: rgba(255,255,255,.11); }
.final-ring-outer { width: 500px; height: 500px; opacity: .35; }
.final-ring-mid { width: 372px; height: 372px; opacity: .6; border-style: dashed; }
.final-ring-inner { width: 246px; height: 246px; opacity: .82; }

.final-shield {
  position: absolute;
  left: 62%;
  top: 51%;
  width: 196px;
  height: 228px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 90% 16%, 80% 78%, 50% 100%, 20% 78%, 10% 16%);
  background:
    linear-gradient(180deg, rgba(255,37,58,.16), rgba(255,37,58,.045)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%);
  border: 2px solid #ff253a;
  filter: drop-shadow(0 0 28px rgba(255,37,58,.88)) drop-shadow(0 0 70px rgba(255,37,58,.34));
}

.final-shield::before {
  content: "";
  position: absolute;
  inset: 14px 17px 22px;
  clip-path: polygon(50% 0, 89% 17%, 78% 76%, 50% 96%, 22% 76%, 11% 17%);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 0 28px rgba(255,37,58,.20);
}

.final-shield::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,.34), transparent);
}

.final-lock {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 62px;
  height: 50px;
  transform: translate(-50%, -50%);
  border: 3px solid #ff253a;
  border-radius: 13px;
  box-shadow: 0 0 18px rgba(255,37,58,.85);
}

.final-lock::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -39px;
  width: 44px;
  height: 43px;
  transform: translateX(-50%);
  border: 3px solid #ff253a;
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
}

.final-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 9px;
  height: 21px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #ff253a;
  box-shadow: 0 0 12px rgba(255,37,58,.95);
}

.final-floor {
  position: absolute;
  left: 7%;
  right: 4%;
  bottom: -3%;
  height: 42%;
  background:
    linear-gradient(rgba(255,37,58,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,37,58,.18) 1px, transparent 1px);
  background-size: 34px 26px;
  transform: perspective(880px) rotateX(64deg) translateY(70px);
  transform-origin: center bottom;
  opacity: .18;
  -webkit-mask-image: radial-gradient(ellipse at 62% 50%, #000 0 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at 62% 50%, #000 0 45%, transparent 72%);
}

.final-base {
  position: absolute;
  left: 62%;
  bottom: 7%;
  width: 300px;
  height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,37,58,.86), rgba(255,37,58,.18) 40%, transparent 74%);
  filter: blur(2px);
}

.final-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff, 0 0 30px rgba(255,37,58,.95), 0 0 60px rgba(255,37,58,.75);
}

.final-spark-a { top: 16%; right: 18%; }
.final-spark-b { top: 35%; right: 4%; }
.final-spark-c { bottom: 17%; right: 27%; }

.reference-stat-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 0 28px !important;
  padding: 32px 34px !important;
  border: 1px solid rgba(255,37,58,.50) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.018), rgba(255,37,58,.04)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.25), inset 0 0 80px rgba(255,37,58,.035) !important;
}

.reference-stat {
  display: grid !important;
  grid-template-columns: 58px auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 0 18px !important;
  min-height: 76px;
  padding: 0 42px !important;
  border-left: 1px solid rgba(255,255,255,.13) !important;
}

.reference-stat:first-child {
  border-left: 0 !important;
}

.reference-stat .feature-icon {
  grid-row: 1 / 3;
  width: 58px !important;
  height: 58px !important;
}

.reference-stat strong {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.reference-stat span:last-child {
  color: #b8c0ce;
}

.public-shell .premium-home-footer.public-footer {
  padding: 0 38px !important;
  background: linear-gradient(180deg, rgba(5,8,14,.985), #05070c) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.public-shell .premium-home-footer .professional-footer {
  width: min(1480px, 100%) !important;
  padding: 28px 0 18px !important;
  grid-template-columns: 1.3fr .72fr .82fr .72fr 1.25fr !important;
  gap: 32px 48px !important;
  border-top: 0 !important;
}

.footer-logo-lockup img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9px !important;
}

.public-shell .footer-logo-lockup strong {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1;
}

.public-shell .footer-logo-lockup strong span {
  color: #ff253a;
}

.footer-logo-lockup em {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: .73rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-about-text {
  max-width: 330px !important;
  margin: 14px 0 0 !important;
  color: #c1c9d6 !important;
  font-size: .92rem !important;
  line-height: 1.5;
}

.social-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.social-row a {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: #cfd6e1 !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 900;
}

.public-shell .footer-column {
  gap: 10px;
}

.public-shell .footer-column strong {
  color: #ffffff;
  margin-bottom: 5px;
}

.public-shell .footer-column a {
  color: #cfd6e1 !important;
  text-decoration: none;
}

.public-shell .footer-column a:hover {
  color: #ff4457 !important;
}

.contact-column a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-column a span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-icon {
  position: relative;
  width: 17px;
  height: 17px;
  color: #ff4457;
}

.contact-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--contact-mask) center / contain no-repeat;
  mask: var(--contact-mask) center / contain no-repeat;
}

.mail-icon { --contact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 3.3V17h14V8.3l-7 5-7-5Zm1.2-1.3L12 11.2 17.8 7H6.2Z'/%3E%3C/svg%3E"); }
.phone-icon { --contact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2h4l1 5-2.5 1.5c1.2 2.5 3.1 4.4 5.6 5.7l1.6-2.6 5 1v4c0 2.2-1.8 3.9-4 3.7C9.1 19.6 2.5 13 1.7 4.7 1.5 2.7 3.2 2 6.6 2Z'/%3E%3C/svg%3E"); }
.link-icon { --contact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1.5 1.5 0 0 1 0-2.1l3.8-3.8a3 3 0 0 1 4.2 4.2l-3 3-1.4-1.4 3-3a1 1 0 1 0-1.4-1.4L12 12.7a1.5 1.5 0 0 1-2.1 0ZM8.4 9.3l1.4 1.4-3 3A1 1 0 0 0 8.2 15l3.8-3.8a1.5 1.5 0 0 1 2.1 2.1l-3.8 3.8a3 3 0 1 1-4.2-4.2l2.3-3.6Z'/%3E%3C/svg%3E"); }

.public-shell .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #9da7b7;
  font-size: .9rem;
}

.heart-mark {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 3px -2px;
  transform: rotate(-45deg);
  background: #ff253a;
}

.heart-mark::before,
.heart-mark::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff253a;
}

.heart-mark::before { top: -7px; left: 0; }
.heart-mark::after { left: 7px; top: 0; }

@media (max-width: 1240px) {
  .public-shell .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-block: 14px;
  }

  .public-shell .nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .public-home-reference {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 46px !important;
  }

  .final-home-art {
    min-height: 440px;
  }

  .final-ring,
  .final-shield,
  .final-base {
    left: 50%;
  }

  .reference-highlights,
  .reference-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .reference-stat {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding: 20px !important;
  }

  .reference-stat:nth-child(1),
  .reference-stat:nth-child(2) {
    border-top: 0 !important;
  }

  .public-shell .premium-home-footer .professional-footer {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  .public-shell .page {
    width: min(100% - 32px, 1480px) !important;
  }

  .public-shell .topbar {
    padding-inline: 16px;
  }

  .public-shell .brand-copy strong {
    font-size: 1.25rem;
  }

  .public-shell .brand-copy > span {
    font-size: .62rem;
  }

  .language-control,
  .theme-chip,
  .public-shell .nav-login,
  .public-shell .nav-cta {
    min-height: 38px;
  }

  .public-home-reference h1 {
    font-size: 3.3rem !important;
    letter-spacing: -.06em !important;
  }

  .public-home-reference .hero-text {
    font-size: 1rem !important;
  }

  .reference-actions .button {
    width: 100%;
  }

  .reference-highlights,
  .reference-stat-strip,
  .public-shell .premium-home-footer .professional-footer {
    grid-template-columns: 1fr !important;
  }

  .reference-highlights {
    gap: 14px !important;
  }

  .final-home-art {
    min-height: 320px;
  }

  .final-ring-outer { width: 315px; height: 315px; }
  .final-ring-mid { width: 242px; height: 242px; }
  .final-ring-inner { width: 170px; height: 170px; }
  .final-shield { width: 124px; height: 148px; }
  .final-lock { width: 40px; height: 34px; border-radius: 9px; }
  .final-lock::before { width: 29px; height: 28px; top: -26px; }
  .final-lock::after { top: 10px; height: 16px; }

  .reference-stat {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding: 18px 0 !important;
  }

  .reference-stat:first-child {
    border-top: 0 !important;
  }

  .public-shell .footer-bottom {
    flex-direction: column;
  }
}

/* Desktop tightening after visual QA. */
.public-shell .topbar {
  padding-inline: 34px;
}

.public-shell .brand-partner-logo {
  width: 48px !important;
  height: 48px !important;
}

.public-shell .brand-copy strong {
  font-size: 1.36rem;
}

.public-shell .brand-copy > span {
  font-size: .68rem;
}

.public-shell .nav {
  gap: 17px;
  font-size: .88rem;
}

.language-control {
  min-width: 142px;
  padding-left: 0;
}

.theme-chip {
  padding-inline: 15px;
}

.public-shell .nav-login {
  min-width: 68px;
  padding-inline: 15px;
}

.public-shell .nav-cta {
  min-width: 86px;
  padding-inline: 17px;
}

.public-home-reference {
  align-items: start !important;
  min-height: 0 !important;
  padding: 56px 0 18px !important;
}

.final-home-art {
  min-height: 500px;
  background:
    radial-gradient(circle at 55% 51%, rgba(255,37,58,.38), transparent 13rem),
    radial-gradient(circle at 74% 20%, rgba(255,255,255,.10), transparent 8rem),
    linear-gradient(90deg, rgba(4,8,15,0) 0 10%, rgba(4,8,15,.16) 28%, rgba(4,8,15,0) 100%);
}

.final-ring,
.final-shield,
.final-base {
  left: 55%;
}

.reference-highlights {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 18px !important;
  max-width: none !important;
}

.reference-highlights > div {
  flex: 0 0 auto;
  width: auto;
  grid-template-columns: 50px max-content;
}

.reference-highlights strong {
  white-space: nowrap;
}

.reference-stat-strip {
  padding: 24px 28px !important;
}

.reference-stat {
  padding: 0 28px !important;
}

.reference-stat strong {
  font-size: 1.86rem;
}

@media (max-width: 1240px) {
  .reference-highlights {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.reference-stat:last-child {
  padding-right: 18px !important;
}

.reference-stat:last-child strong {
  font-size: 1.68rem;
}

@media (max-width: 700px) {
  .final-home-art {
    min-height: 320px;
  }

  .reference-highlights {
    grid-template-columns: 1fr !important;
  }
}

/* --- Final requested performance/homepage cleanup --- */
/* Remove public homepage dark button completely */
.public-shell .theme-toggle,
.public-shell .theme-chip { display: none !important; }

/* Keep homepage simple: no animated/live hero art, no large CSS visual on the right. */
.public-home-reference,
.home-cyber-hero,
.premium-landing {
  grid-template-columns: minmax(0, 720px) minmax(280px, 1fr) !important;
  align-items: center !important;
}
.home-empty-visual {
  min-height: 430px;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}
.final-home-art,
.home-red-visual,
.cyber-visual,
.home-reference-visual,
.home-reference-blank,
.static-red-shield,
.css-red-shield,
.red-world-map,
.red-grid-plane,
.red-beam,
.red-hud-ring,
.red-hud-shield,
.red-hud-lock,
.red-spark,
.final-map,
.final-speed,
.final-ring,
.final-shield,
.final-floor,
.final-base,
.final-spark {
  display: none !important;
  visibility: hidden !important;
  animation: none !important;
  transition: none !important;
}
.public-home-reference::before,
.public-home-reference::after,
.home-cyber-hero::before,
.home-cyber-hero::after,
.home-empty-visual::before,
.home-empty-visual::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
/* Disable expensive homepage animations/glows while preserving the visual style. */
.public-shell *,
.public-shell *::before,
.public-shell *::after {
  animation: none !important;
}
.public-shell .hero-copy h1,
.public-shell .public-home-reference h1,
.public-shell .home-reference-copy h1 {
  text-shadow: none !important;
}
@media (max-width: 1000px) {
  .public-home-reference,
  .home-cyber-hero,
  .premium-landing {
    grid-template-columns: 1fr !important;
  }
  .home-empty-visual { display: none !important; }
}

/* --- Production layout and readability pass --- */
*,
*::before,
*::after {
  letter-spacing: 0 !important;
}

body {
  background: var(--bg);
}

.public-shell {
  background: #06090f;
}

.public-shell .nav > a[href="/login"]:not(.nav-login),
.public-shell .nav > a[href="/register"]:not(.nav-cta) {
  display: none;
}

.public-home-reference,
.home-cyber-hero,
.premium-landing {
  grid-template-columns: minmax(0, 760px) !important;
  justify-content: start !important;
  min-height: auto !important;
}

.home-empty-visual {
  display: none !important;
}

.hero-copy h1 {
  font-size: 4.2rem;
}

.public-home-reference h1 {
  font-size: 4.2rem !important;
}

.page-head h1,
.challenge-head h1 {
  font-size: 2.65rem;
}

.progress-panel,
.form-panel,
.auth-box,
.side-panel,
.lab-console,
.output-panel,
.detail-main,
.review-item,
.feature,
.stat,
.submissions,
.metric,
.category-card,
.challenge-row,
.empty,
.nav-accordion,
.profile-stat,
.rank-panel,
.mini-progress-card,
.achievement,
.pending-row {
  border-radius: 8px;
}

.achievement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 6px;
}

.after-action {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.after-action h2,
.profile-security h2,
.legal-content h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.after-action h3 {
  margin: 18px 0 6px;
  color: var(--accent-2);
  font-size: .92rem;
}

.after-action p,
.legal-content p {
  margin: 0;
  color: var(--soft);
}

.profile-security {
  margin-top: 26px;
}

.legal-head {
  max-width: 800px;
}

.legal-content {
  display: grid;
  gap: 0;
  max-width: 860px;
  border-top: 1px solid var(--line);
}

.legal-content article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.unsafe-render {
  min-height: 0;
  max-height: 320px;
}

.table-wrap {
  max-width: 100%;
}

td,
th {
  overflow-wrap: anywhere;
}

.reflection-list {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--muted);
}

.reflection-list li + li {
  margin-top: 0.55rem;
}

@media (max-width: 900px) {
  .shell.with-sidebar > .topbar,
  .shell.with-sidebar > .sidebar,
  .shell.with-sidebar > .page {
    min-width: 0;
    max-width: 100%;
  }

  .topbar {
    position: static;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .topbar .nav {
    width: 100%;
  }

  .shell.with-sidebar .sidebar {
    max-height: 350px;
  }

  .hero-copy h1 {
    font-size: 3.35rem;
  }

  .page-head h1,
  .challenge-head h1 {
    font-size: 2.25rem;
  }

  .reference-highlights {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 640px) {
  .page {
    width: calc(100% - 32px);
  }

  .hero-copy h1,
  .public-home-reference h1 {
    font-size: 2.8rem !important;
  }

  .page-head h1,
  .challenge-head h1 {
    font-size: 1.9rem;
  }

  .shell.with-sidebar .topbar .nav > a[href="/dashboard"],
  .shell.with-sidebar .topbar .nav > a[href="/profile"],
  .shell.with-sidebar .topbar .nav > a[href="/categories"],
  .shell.with-sidebar .topbar .nav > a[href="/submit"],
  .shell.with-sidebar .topbar .nav > a[href="/certificate"] {
    display: none;
  }

  .language-control {
    min-width: 132px;
  }

  .reference-highlights > div {
    width: 100%;
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .reference-highlights strong {
    white-space: normal;
  }

  .form-panel,
  .auth-box,
  .side-panel,
  .lab-console,
  .output-panel,
  .detail-main,
  .submissions,
  .category-card {
    padding: 18px;
  }

  th,
  td {
    padding: 9px;
    font-size: .82rem;
  }
}

/* Discord community links */
.discord-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011c.05.06.098.123.144.185a12.7 12.7 0 0 0-3.536 0c.046-.062.094-.124.145-.185a13.197 13.197 0 0 0-3.257 1.011C.533 6.494-.32 9.057.099 11.594c1.55 1.15 3.053 1.852 4.527 2.316.368-.506.696-1.049.982-1.623-.54-.203-1.057-.451-1.548-.736.13-.095.258-.193.382-.291 2.98 1.388 6.205 1.388 9.149 0 .125.098.253.196.382.291-.491.285-1.008.533-1.548.736.286.574.614 1.117.982 1.623 1.474-.464 2.977-1.166 4.527-2.316.49-2.941-.837-5.478-3.429-7.225ZM6.82 10.347c-.895 0-1.627-.823-1.627-1.834 0-1.01.717-1.834 1.627-1.834.918 0 1.642.831 1.627 1.834 0 1.011-.717 1.834-1.627 1.834Zm4.495 0c-.895 0-1.627-.823-1.627-1.834 0-1.01.717-1.834 1.627-1.834.918 0 1.642.831 1.627 1.834 0 1.011-.717 1.834-1.627 1.834Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011c.05.06.098.123.144.185a12.7 12.7 0 0 0-3.536 0c.046-.062.094-.124.145-.185a13.197 13.197 0 0 0-3.257 1.011C.533 6.494-.32 9.057.099 11.594c1.55 1.15 3.053 1.852 4.527 2.316.368-.506.696-1.049.982-1.623-.54-.203-1.057-.451-1.548-.736.13-.095.258-.193.382-.291 2.98 1.388 6.205 1.388 9.149 0 .125.098.253.196.382.291-.491.285-1.008.533-1.548.736.286.574.614 1.117.982 1.623 1.474-.464 2.977-1.166 4.527-2.316.49-2.941-.837-5.478-3.429-7.225ZM6.82 10.347c-.895 0-1.627-.823-1.627-1.834 0-1.01.717-1.834 1.627-1.834.918 0 1.642.831 1.627 1.834 0 1.011-.717 1.834-1.627 1.834Zm4.495 0c-.895 0-1.627-.823-1.627-1.834 0-1.01.717-1.834 1.627-1.834.918 0 1.642.831 1.627 1.834 0 1.011-.717 1.834-1.627 1.834Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.coffee-mark {
  display: block;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.nav-discord,
.button.discord-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-shell .nav-discord {
  color: #dbe0ff !important;
}

.public-shell .nav-discord:hover {
  color: #ffffff !important;
}

.public-shell .nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
}

.public-shell .nav-social:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .34);
}

.public-shell .nav-linkedin {
  color: #8ac4ff !important;
}

.public-shell .nav-linkedin .linkedin-mark {
  width: 18px;
  height: 18px;
  font-size: .58rem;
}

.public-shell .nav-support {
  color: #ffda55 !important;
}

.public-shell .nav-support .coffee-mark {
  width: 18px;
  height: 18px;
}

.button.discord-button {
  color: #ffffff;
  background: #5865f2;
  border-color: #6f7bf7;
}

.button.discord-button:hover {
  color: #ffffff;
  background: #4752c4;
  border-color: #7f89f8;
}

.sidebar-discord-link .discord-mark {
  width: 19px;
  height: 19px;
  color: #8792ff;
}

.sidebar-linkedin-link .linkedin-mark {
  width: 19px;
  height: 19px;
  color: #74b9ff;
  border-color: rgba(116, 185, 255, .72);
  font-size: .62rem;
}

.sidebar-support-link .coffee-mark {
  color: #ffda55;
}

.community-panel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 4px 0 28px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.community-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #ffffff;
  background: #5865f2;
  border: 1px solid #7f89f8;
  border-radius: 8px;
}

.community-panel-icon .discord-mark {
  width: 25px;
  height: 25px;
}

.community-panel .eyebrow {
  margin-bottom: 4px;
}

.community-panel h2 {
  margin: 0 0 5px;
  font-size: 1.15rem;
}

.community-panel p:last-child {
  margin: 0;
  color: var(--muted);
}

.community-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.community-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  color: #e9edf5;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

.community-action:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.discord-community-action {
  background: rgba(88, 101, 242, .13);
  border-color: rgba(111, 123, 247, .42);
}

.discord-community-action .discord-mark {
  color: #aeb5ff;
}

.linkedin-community-action {
  background: rgba(10, 102, 194, .13);
  border-color: rgba(55, 145, 235, .42);
}

.linkedin-community-action .linkedin-mark {
  flex: 0 0 auto;
  color: #8ac4ff;
  border-color: rgba(138, 196, 255, .78);
}

.support-community-action {
  background: rgba(255, 221, 0, .07);
  border-color: rgba(255, 221, 0, .30);
}

.support-community-action .coffee-mark {
  color: #ffda55;
}

.social-row .discord-social {
  color: #aeb5ff !important;
}

.social-row .discord-social:hover {
  color: #ffffff !important;
  border-color: #6f7bf7;
}

.social-row .linkedin-social {
  color: #8ac4ff !important;
}

.social-row .linkedin-social .linkedin-mark {
  width: 18px;
  height: 18px;
  font-size: .58rem;
}

.social-row .support-social {
  color: #ffda55 !important;
}

.social-row .support-social .coffee-mark {
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .community-panel {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .community-actions {
    grid-template-columns: 1fr;
  }
}

/* Platform overview */
.platform-overview {
  width: 100vw;
  margin: 64px calc(50% - 50vw) 0;
  padding: 76px 32px 82px;
  color: #f6f7fb;
  background: #090d14;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.platform-overview-inner {
  width: min(1380px, 100%);
  margin: 0 auto;
}

.platform-overview-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: end;
}

.platform-overview .eyebrow {
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 37, 58, .10);
  border-color: rgba(255, 37, 58, .44);
}

.platform-overview h2 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 4vw, 3.4rem);
  line-height: 1.05;
  font-weight: 900;
}

.platform-overview-lead {
  margin: 0;
  color: #b5bfcd;
  font-size: 1.05rem;
  line-height: 1.75;
}

.platform-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 54px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.platform-principle {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: 30px 28px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

.platform-principle:first-child {
  border-left: 0;
}

.platform-principle .feature-icon {
  width: 58px;
  height: 58px;
}

.platform-principle h3 {
  margin: 2px 0 8px;
  color: #ffffff;
  font-size: 1.05rem;
}

.platform-principle p {
  margin: 0;
  color: #9fa9b8;
  font-size: .88rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .platform-overview-intro,
  .platform-principles {
    grid-template-columns: 1fr;
  }

  .platform-overview-intro {
    gap: 26px;
  }

  .platform-principle,
  .platform-principle:first-child {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
  }

  .platform-principle:first-child {
    border-top: 0;
  }
}

@media (max-width: 620px) {
  .platform-overview {
    padding: 48px 20px 56px;
  }

  .platform-overview h2 {
    font-size: 2.25rem;
  }

  .platform-principle {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 24px 0;
  }

  .platform-principle .feature-icon {
    width: 48px;
    height: 48px;
  }
}

/* Compact author reference on the platform landing page */
.author-teaser {
  padding: 70px 32px 76px;
  color: #f6f7fb;
  background: #070b12;
}

.author-teaser-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(52px, 8vw, 112px);
  align-items: center;
}

.author-teaser-copy {
  max-width: 760px;
}

.author-teaser .eyebrow {
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 37, 58, .10);
  border-color: rgba(255, 37, 58, .44);
}

.author-teaser h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.06;
  font-weight: 900;
}

.author-teaser-copy > p:not(.eyebrow) {
  max-width: 700px;
  margin: 22px 0 28px;
  color: #aeb7c5;
  font-size: 1rem;
  line-height: 1.75;
}

.author-teaser .button {
  min-height: 50px;
}

.author-teaser-portrait {
  width: 300px;
  aspect-ratio: .92;
  overflow: hidden;
}

.author-teaser-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 800px) {
  .author-teaser-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 38px;
  }

  .author-teaser-portrait {
    width: 220px;
  }
}

@media (max-width: 620px) {
  .author-teaser {
    padding: 52px 20px 58px;
  }

  .author-teaser-inner {
    grid-template-columns: 1fr;
  }

  .author-teaser-portrait {
    width: min(260px, 100%);
  }
}

/* Author story */
.about-author {
  width: 100vw;
  margin: 64px calc(50% - 50vw) -44px;
  padding: 76px 32px 82px;
  scroll-margin-top: 84px;
  color: #f6f7fb;
  background: #090d14;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.about-author.about-author-page {
  width: 100%;
  min-height: calc(100vh - 78px);
  margin: 0;
  border-top: 0;
  border-bottom: 0;
}

.about-author-inner {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.about-portrait-column {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin-top: 76px;
}

.about-portrait-frame {
  width: 100%;
  max-width: 560px;
  aspect-ratio: .92;
  overflow: hidden;
}

.about-portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.about-motto {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  margin: 18px 0 0;
  color: #d9dee8;
  font-size: .76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.about-motto::before {
  content: "";
  flex: 0 0 42px;
  height: 2px;
  background: #ff253a;
}

.about-author-copy {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.about-author-copy .eyebrow {
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 37, 58, .10);
  border-color: rgba(255, 37, 58, .44);
}

.about-author-copy h1,
.about-author-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 4vw, 3.4rem);
  line-height: 1.03;
  font-weight: 900;
}

.about-role {
  margin: 13px 0 0;
  color: #ff6474;
  font-size: 1.05rem;
  font-weight: 800;
}

.about-lead {
  max-width: 780px;
  margin: 28px 0 0;
  color: #f0f2f6;
  font-size: 1.15rem;
  line-height: 1.65;
}

.about-story {
  max-width: 820px;
  margin: 16px 0 0;
  color: #aeb7c5;
  line-height: 1.75;
}

.about-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.about-metric {
  min-width: 0;
  padding: 22px 20px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

.about-metric:nth-child(3n + 1) {
  border-left: 0;
}

.about-metric:nth-child(n + 4) {
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.about-metric strong,
.about-metric span {
  display: block;
}

.about-metric strong {
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
}

.about-metric span {
  margin-top: 8px;
  color: #9fa9b8;
  font-size: .76rem;
  line-height: 1.35;
}

.about-recognition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
  margin-top: 26px;
  font-size: .82rem;
}

.about-recognition-label {
  color: #8995a6;
  font-weight: 800;
  text-transform: uppercase;
}

.about-recognition a {
  color: #e9edf5;
  text-decoration: underline;
  text-decoration-color: rgba(255, 37, 58, .72);
  text-underline-offset: 4px;
}

.about-recognition a:hover {
  color: #ffffff;
  text-decoration-color: #ff253a;
}

.about-support {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.about-support-copy {
  min-width: 0;
  max-width: 530px;
}

.about-support h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
}

.about-support p {
  margin: 7px 0 0;
  color: #9fa9b8;
  font-size: .86rem;
}

.about-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}

.about-actions .button {
  min-height: 48px;
  border-radius: 7px;
}

.about-actions .linkedin-button {
  color: #ffffff;
  background: #0a66c2;
  border-color: #247ed5;
}

.about-actions .linkedin-button:hover {
  color: #ffffff;
  background: #0859aa;
  border-color: #4b9be8;
}

.about-actions .linkedin-mark {
  flex: 0 0 auto;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .82);
}

@media (max-width: 1120px) {
  .about-author-inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 40px;
  }

  .about-support {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  .about-author {
    padding-top: 60px;
    padding-bottom: 68px;
  }

  .about-author-inner {
    grid-template-columns: 1fr;
  }

  .about-portrait-column {
    grid-column: 1;
    grid-row: 1;
    width: min(470px, 100%);
    margin-top: 0;
  }

  .about-author-copy {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .about-author {
    padding: 48px 20px 56px;
  }

  .about-author-inner {
    gap: 38px;
  }

  .about-author-copy h1,
  .about-author-copy h2 {
    font-size: 2.25rem;
  }

  .about-role {
    font-size: .95rem;
  }

  .about-lead {
    margin-top: 22px;
    font-size: 1.02rem;
  }

  .about-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-metric,
  .about-metric:nth-child(3n + 1) {
    border-left: 1px solid rgba(255, 255, 255, .10);
  }

  .about-metric:nth-child(2n + 1) {
    border-left: 0;
  }

  .about-metric:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .10);
  }

  .about-actions {
    width: 100%;
  }

  .about-actions .button {
    flex: 1 1 190px;
  }
}