:root{
  --bg:#060606;
  --s1:#0c0c0c;
  --border:#1c1c1c;
  --red:#ff3a2d;
  --orange:#f5a520;
  --purple:#8b31ff;
  --magenta:#cc3ae0;
  --text:#f4f1ea;
  --muted:#a29f99
}

body{
  font-family:'IBM Plex Mono','Consolas','Courier New',monospace;
  background:var(--bg);
  color:var(--text)
}

.mobile-brand{display:none}

.split-hero{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100svh;
  display:flex;
  overflow:hidden;
  background:#050505
}

.split-hero::before{
  content:'';
  position:absolute;
  z-index:20;
  inset:0 auto 0 50%;
  width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.18) 16%,rgba(255,255,255,.18) 84%,transparent);
  pointer-events:none
}

.split-brandmark{
  position:absolute;
  z-index:30;
  top:clamp(22px,4vw,44px);
  left:50%;
  translate:-50% 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
  white-space:nowrap;
  pointer-events:none
}

.split-brandmark strong{
  color:#fff;
  font-size:clamp(.95rem,1.4vw,1.15rem);
  letter-spacing:.16em;
  text-transform:lowercase
}

.split-brandmark span{
  color:rgba(255,255,255,.5);
  font-size:.68rem;
  letter-spacing:.11em;
  text-transform:uppercase
}

.split-half{
  --accent:var(--red);
  position:relative;
  flex:1 1 50%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(92px,12vw,150px) clamp(28px,6vw,96px) clamp(54px,7vw,88px);
  overflow:hidden;
  color:var(--text);
  text-decoration:none;
  transition:flex-grow .55s cubic-bezier(.2,.75,.15,1),filter .4s ease;
  outline:none
}

.split-half::before,
.split-half::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none
}

.split-left{
  background:
    radial-gradient(circle at 32% 48%,rgba(255,58,45,.17),transparent 34%),
    linear-gradient(135deg,#0d0807 0%,#070707 58%,#050505 100%)
}

.split-left::before{
  opacity:.26;
  background-image:
    linear-gradient(rgba(255,58,45,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,58,45,.2) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(90deg,#000,transparent 88%)
}

.split-left::after{
  background:linear-gradient(90deg,transparent 70%,rgba(0,0,0,.42))
}

.split-right{
  --accent:var(--purple);
  background:
    radial-gradient(circle at 68% 48%,rgba(139,49,255,.2),transparent 35%),
    linear-gradient(225deg,#0b0710 0%,#070707 58%,#050505 100%)
}

.split-right::before{
  opacity:.22;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(204,58,224,.16) 5px 6px),
    repeating-linear-gradient(90deg,transparent 0 71px,rgba(139,49,255,.12) 71px 72px);
  mask-image:linear-gradient(270deg,#000,transparent 88%)
}

.split-right::after{
  background:linear-gradient(270deg,transparent 70%,rgba(0,0,0,.42))
}

.split-content{
  position:relative;
  z-index:5;
  width:min(100%,520px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .55s cubic-bezier(.2,.75,.15,1)
}

.split-kicker{
  min-height:1em;
  margin-bottom:clamp(30px,5vw,54px);
  color:var(--accent);
  font-size:clamp(.64rem,.8vw,.76rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase
}

.split-logo{
  width:clamp(58px,6vw,82px);
  height:clamp(58px,6vw,82px);
  object-fit:contain;
  margin-bottom:18px;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 40%,transparent))
}

.split-label{
  color:var(--accent);
  font-size:clamp(2rem,4.3vw,4.5rem);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.9
}

.split-headline{
  display:block;
  max-width:12ch;
  margin-top:22px;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(1.7rem,3vw,3.3rem);
  font-weight:780;
  letter-spacing:-.045em;
  line-height:1
}

.split-copy{
  max-width:52ch;
  margin-top:20px;
  color:rgba(244,241,234,.65);
  font-size:clamp(.82rem,1vw,.98rem);
  line-height:1.75
}

.split-cta{
  min-height:48px;
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:0 18px;
  color:#fff;
  border:1px solid color-mix(in srgb,var(--accent) 72%,#fff 8%);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.035em;
  transition:background .25s ease,border-color .25s ease,transform .25s ease
}

.split-proof{
  margin-top:24px;
  color:rgba(255,255,255,.35);
  font-size:.67rem;
  letter-spacing:.13em;
  text-transform:uppercase
}

.split-half:hover,
.split-half:focus-visible{flex-grow:1.1}

.split-half:hover .split-content,
.split-half:focus-visible .split-content{transform:translateY(-5px)}

.split-half:hover .split-cta,
.split-half:focus-visible .split-cta{
  background:color-mix(in srgb,var(--accent) 24%,transparent);
  border-color:var(--accent);
  transform:translateX(4px)
}

.split-half:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}

.scroll-spacer{display:none;height:0}

.shared-footer{
  position:relative;
  z-index:2;
  background:var(--bg);
  border-top:1px solid var(--border)
}

html[dir="rtl"] .split-content{align-items:flex-start;text-align:right}
html[dir="rtl"] .split-proof{letter-spacing:.04em}

@media(max-width:800px){
  .split-hero{
    min-height:100svh;
    flex-direction:column
  }

  .split-hero::before{
    inset:50% 0 auto;
    width:auto;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent)
  }

  .split-brandmark{
    top:50%;
    translate:-50% -50%;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.13);
    background:#080808
  }

  .split-brandmark span{display:none}

  .split-half{
    flex:1 1 50%;
    min-height:50svh;
    padding:clamp(34px,8vw,56px) 24px
  }

  .split-left{order:1}
  .split-right{order:2}

  .split-content{width:min(100%,560px)}
  .split-kicker{margin-bottom:12px}
  .split-logo{width:44px;height:44px;margin-bottom:8px}
  .split-label{font-size:clamp(1.65rem,8vw,2.35rem)}
  .split-headline{max-width:18ch;margin-top:9px;font-size:clamp(1.3rem,5.7vw,1.9rem)}
  .split-copy{display:none}
  .split-cta{min-height:44px;margin-top:15px;padding:0 14px}
  .split-proof{display:none}
}

@media(max-width:380px){
  .split-kicker{font-size:.56rem}
  .split-cta{font-size:.68rem}
}

@media(prefers-reduced-motion:reduce){
  .split-half,.split-content,.split-cta{transition:none}
}

html[data-motion="reduce"] .split-half,
html[data-motion="reduce"] .split-content,
html[data-motion="reduce"] .split-cta{transition:none}