*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c0:#060612;--text:#e8e8f8;--muted:#8888aa;
  --v:#7c6af7;--o:#f06a4e;--t:#3ecfb2;--g:#f7c948;
  --ai-glow:rgba(124,106,247,.35);--office-glow:rgba(62,207,178,.35);
}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--c0);color:var(--text);
  overflow:hidden;
}
a{color:inherit;text-decoration:none}

.split-root{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  position:relative;
}

.split-divider{
  position:absolute;
  left:50%;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
}

.split-brand{
  position:absolute;
  top:24px;left:50%;
  transform:translateX(-50%);
  z-index:20;
  text-align:center;
  pointer-events:none;
}
.split-brand .mark{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 18px;border-radius:999px;
  background:rgba(6,6,18,.75);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
}
.split-brand-logo{
  display:block;
  height:36px;
  width:auto;
}

.panel{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 8vw 72px;
  cursor:pointer;
  overflow:hidden;
  transition:filter .35s ease;
  outline:none;
}
.panel::before{
  content:'';position:absolute;inset:0;opacity:.55;transition:opacity .35s;
}
.panel-ai::before{
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%,rgba(124,106,247,.22),transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(240,106,78,.12),transparent 55%),
    linear-gradient(135deg,#0a0818,#12102a);
}
.panel-office::before{
  background:
    radial-gradient(ellipse 80% 60% at 80% 50%,rgba(62,207,178,.2),transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(247,201,72,.1),transparent 55%),
    linear-gradient(225deg,#081210,#0a1a18);
}
.panel:hover::before,.panel:focus-visible::before{opacity:.85}
.panel:hover,.panel:focus-visible{filter:brightness(1.06)}

.panel-inner{position:relative;z-index:2;max-width:420px}
.panel-ai .panel-inner{margin-right:auto}
.panel-office .panel-inner{margin-left:auto;text-align:right}

.panel-brand{
  margin-bottom:18px;
}
.panel-logo{
  display:block;
  height:42px;
  width:auto;
  max-width:min(248px,72vw);
}
.panel-office .panel-logo{margin-left:auto}
.panel-office .panel-brand{display:flex;flex-direction:column;align-items:flex-end}

.panel-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  margin:12px 0 0;
}
.panel-ai .panel-tag{color:var(--v)}
.panel-office .panel-tag{color:var(--t)}

.panel-desc{
  font-size:15px;line-height:1.65;color:var(--muted);
  margin-bottom:28px;
}
.panel-office .panel-desc{margin-left:auto}

.panel-feats{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  margin-bottom:32px;font-size:13.5px;color:#b8b8d0;
}
.panel-office .panel-feats{align-items:flex-end}
.panel-feats li{display:flex;align-items:center;gap:10px}
.panel-office .panel-feats li{flex-direction:row-reverse;text-align:right}
.panel-feats li::before{
  content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.panel-ai .panel-feats li::before{background:var(--v);box-shadow:0 0 10px var(--ai-glow)}
.panel-office .panel-feats li::before{background:var(--t);box-shadow:0 0 10px var(--office-glow)}

.panel-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:10px;
  font-size:14px;font-weight:800;
  border:1px solid transparent;
  transition:transform .2s,box-shadow .2s;
  pointer-events:none;
}
.panel-ai .panel-cta{
  background:linear-gradient(135deg,var(--v),var(--o));color:#fff;
  box-shadow:0 12px 40px var(--ai-glow);
}
.panel-office .panel-cta{
  background:linear-gradient(135deg,var(--t),#2aab92);color:#061612;
  box-shadow:0 12px 40px var(--office-glow);
}
.panel:hover .panel-cta,.panel:focus-visible .panel-cta{
  transform:translateY(-2px);
}

.panel-visual{
  position:absolute;right:5%;bottom:8%;
  width:min(240px,35vw);opacity:.35;
  font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7;
  padding:16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.35);
  pointer-events:none;
}
.panel-office .panel-visual{right:auto;left:5%;text-align:left}
.panel-ai .panel-visual{color:#a89cf7}
.panel-office .panel-visual{color:#6edfd0}

.split-footer{
  position:absolute;bottom:0;left:0;right:0;z-index:20;
  display:flex;justify-content:center;align-items:center;gap:16px;
  padding:16px;font-size:12px;color:var(--muted);
  background:linear-gradient(180deg,transparent,rgba(6,6,18,.9));
  pointer-events:none;
}
.split-footer a{pointer-events:auto;color:var(--muted)}
.split-footer a:hover{color:var(--text)}

@media(max-width:900px){
  body{overflow:auto}
  .split-root{grid-template-columns:1fr;min-height:auto}
  .split-divider{display:none}
  .panel{min-height:50vh;padding:88px 7vw 64px}
  .panel-office .panel-inner{text-align:left;margin-left:0}
  .panel-office .panel-brand{align-items:flex-start}
  .panel-office .panel-logo{margin-left:0}
  .panel-office .panel-tag{margin-left:0}
  .panel-office .panel-feats{align-items:flex-start}
  .panel-office .panel-feats li{flex-direction:row;text-align:left}
  .panel-desc{margin-left:0!important}
  .panel-visual{display:none}
  .split-brand{top:16px;width:90%}
}

@media(prefers-reduced-motion:reduce){
  .panel,.panel::before,.panel-cta{transition:none}
}