:root { --ink:#101214; --muted:#63696a; --aqua:#69c7ca; --paper:#f7f7f3; --line:#d9ddda; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.page { position:relative; display:flex; flex-direction:column; min-height:100vh; padding:25px clamp(25px,5vw,80px) 22px; overflow:hidden; }
.page::before { content:""; position:absolute; top:0; left:0; width:9px; height:100%; background:var(--aqua); }
.topbar,.footer { display:flex; align-items:center; justify-content:space-between; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; }
.topbar { justify-content:flex-end; padding-bottom:19px; border-bottom:1px solid var(--line); color:#575e5f; }.topbar-date { color:var(--aqua); font-size:12px; }
.content { width:min(960px,100%); flex:1; display:grid; grid-template-columns:.91fr 1.25fr; column-gap:clamp(35px,7vw,120px); align-items:center; margin:0 auto; padding:62px 0 52px; }
.brand-switch { width:100%; height:290px; position:relative; display:grid; place-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-switch::before,.brand-switch::after { content:""; position:absolute; width:8px; height:8px; border:1px solid var(--aqua); border-radius:50%; background:var(--paper); }.brand-switch::before { left:-4px; top:-4px; }.brand-switch::after { right:-4px; bottom:-4px; }
.brand { position:absolute; width:100%; display:grid; place-items:center; }
.logo-crop { position:relative; width:100%; height:180px; overflow:hidden; display:grid; place-items:center; }
.logo-crop img { display:block; max-width:none; }
.jaque-crop img { width:275px; }.zengu-crop img { width:330px; }
.old-logo { animation:old-out 700ms cubic-bezier(.65,0,.85,.2) .58s forwards; }.zengu-logo { opacity:0; transform:translateY(8px); animation:new-in 750ms cubic-bezier(.16,.9,.25,1) 1.12s forwards; }
.announcement { opacity:0; transform:translateY(14px); animation:rise 700ms ease 1.42s forwards; }.eyebrow { margin:0 0 16px; color:#558e91; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; }
h1 { margin:0; max-width:560px; font-size:clamp(48px,7.1vw,96px); font-weight:500; line-height:.93; letter-spacing:-.075em; } h1 span { color:var(--aqua); }
.intro { max-width:385px; margin:25px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.redirect-panel { margin-top:42px; max-width:390px; opacity:0; animation:rise 700ms ease 1.82s forwards; }.redirect-line { display:flex; justify-content:space-between; margin-bottom:11px; color:#4e5556; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.02em; }.progress-track { height:2px; overflow:hidden; background:#d4d8d5; }.progress-fill { width:0; height:100%; background:var(--aqua); animation:progress var(--redirect-duration,4.5s) cubic-bezier(.2,.8,.2,1) 1.9s forwards; }
.continue-link { display:inline-flex; gap:9px; margin-top:16px; color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; transition:color .2s,border-color .2s; }.continue-link:hover { color:#3ca7ab; border-color:#3ca7ab; }.continue-link span { font-size:16px; line-height:.7; }
.footer { gap:12px; justify-content:flex-start; padding-top:18px; color:#737979; border-top:1px solid var(--line); font-size:9px; }.footer span:nth-child(2) { color:var(--aqua); font-size:15px; line-height:.5; }
@keyframes old-out { to { opacity:0; filter:blur(6px); transform:scale(.94); } } @keyframes new-in { to { opacity:1; transform:none; } } @keyframes rise { to { opacity:1; transform:none; } } @keyframes progress { to { width:100%; } }
@media (max-width:680px) { .page { padding:20px 25px 17px; }.content { display:flex; flex-direction:column; align-items:stretch; gap:50px; padding:43px 0; }.brand-switch { height:210px; }.logo-crop { height:144px; }.jaque-crop img { width:245px; }.zengu-crop img { width:292px; } h1 { font-size:clamp(49px,15vw,74px); }.intro { font-size:15px; }.redirect-panel { margin-top:31px; }.footer { flex-wrap:wrap; font-size:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::after,*::before { animation-duration:.01ms!important; animation-iteration-count:1!important; } }