@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black: #0a0d0f;
  --white: #fafafa;
  --muted: #c4c8ca;
  --gold: #c89a4a;
  --gold2: #e0b96a;
  --blue: #2b7fff;
  --blue2: #5ba4ff;
}
body { background: var(--black); color: var(--white); font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--gold2); outline-offset: 5px; }
.skip-link { position: absolute; left: 20px; top: 12px; z-index: 100; padding: 10px 18px; background: var(--white); color: var(--black); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 18px max(5vw, calc((100vw - 1320px) / 2)); pointer-events: none; }
.topbar img { display: block; width: 112px; height: 62px; object-fit: contain; mix-blend-mode: lighten; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: max(650px, calc(100svh - 125px)); }
.panel { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 140px clamp(28px, 5vw, 90px) 80px; text-decoration: none; isolation: isolate; }
.panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--panel-border) 1px, transparent 1px), linear-gradient(90deg, var(--panel-border) 1px, transparent 1px); background-size: 90px 90px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 75%); opacity: .6; }
.panel::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at center, var(--panel-glow), transparent 65%); }
.panel.left { --panel-accent: var(--gold2); --panel-button: var(--gold); --panel-border: rgba(200, 154, 74, .3); --panel-glow: rgba(200, 154, 74, .1); --panel-button-text: var(--black); background: linear-gradient(135deg, #0d0c0a, #14110a); }
.panel.right { --panel-accent: var(--blue2); --panel-button: var(--blue); --panel-border: rgba(43, 127, 255, .15); --panel-glow: rgba(43, 127, 255, .14); --panel-button-text: var(--white); background: linear-gradient(225deg, #08090d, #0a0f1a); border-left: 1px solid #ffffff26; }
.panel-content { max-width: 490px; text-align: center; animation: fade-up .7s ease both; }
.panel.right .panel-content { animation-delay: .12s; }
.panel-eyebrow { color: var(--panel-accent); text-transform: uppercase; letter-spacing: .34em; font-size: 11px; font-weight: 500; margin-bottom: 16px; }
.panel-title { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: clamp(48px, 5.5vw, 84px); line-height: 1.06; letter-spacing: -.015em; text-transform: uppercase; margin-bottom: 20px; }
.panel-title .accent { color: var(--panel-accent); }
.panel-keywords { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--panel-accent); }
.panel-sub { max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 auto 30px; }
.panel-cta { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 14px 28px; border: 1px solid var(--panel-button); border-radius: 100px; background: var(--panel-button); color: var(--panel-button-text); font-size: 12px; font-weight: 700; line-height: 1.3; transition: background .2s, border-color .2s, transform .2s; }
.arrow { font-size: 18px; line-height: 1; transition: transform .2s; }
.panel:hover .panel-cta { background: var(--panel-accent); border-color: var(--panel-accent); transform: translateY(-2px); }
.panel:hover .arrow { transform: translateX(4px); }
.panel.right:focus-visible { outline-color: var(--blue2); }
.panel:focus-visible { outline-offset: -5px; }
.bottom-strip, .legal-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; padding: 23px 24px 12px; }
.bottom-strip { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.legal-strip { gap: 12px; padding: 6px 24px 23px; color: var(--muted); font-size: 10px; }
.bottom-strip a, .legal-strip a { text-decoration: none; transition: color .2s; }
.bottom-strip a:hover, .legal-strip a:hover { color: var(--gold2); }
.sep { width: 3px; height: 3px; border-radius: 50%; background: #ffffff45; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .panel { min-height: 520px; padding: 132px 7vw 62px; }
  .panel.right { min-height: 460px; padding-top: 64px; border-left: 0; border-top: 1px solid #ffffff26; }
  .panel-content { max-width: 560px; }
  .panel-title { font-size: clamp(48px, 9vw, 72px); }
  .topbar { padding-left: 7vw; }
}
@media (max-width: 380px) {
  .panel { padding-right: 24px; padding-left: 24px; }
  .panel-title { font-size: 44px; }
  .panel-keywords { gap: 10px; }
  .legal-strip { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}