@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("/static/vendor/fonts/inter-800.woff2") format("woff2"); }
/* Sign-in page, built on the approved mockup: the artwork is the background, the form
and tiles are live HTML laid over it in the mockup's own proportions (1556 x 1011). */
.ciq-signin.lp { display: block; width: 100%; flex: 1 1 100%; align-self: stretch; min-height: 100vh; background: #fbf4ea; color: #0f2742; font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.lp-stage { position: relative; width: 100%; aspect-ratio: 1556 / 1011; min-height: 100vh; container-type: inline-size;
background: #fbf4ea url("/static/branding/login-hero.webp") left top / cover no-repeat; overflow: hidden; }
@media (min-aspect-ratio: 1556/1011) { .lp-stage { min-height: 0; } }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-mhead { display: none; }
.lp-lang { position: absolute; left: 89.6cqw; top: 2.2cqw; display: inline-flex; align-items: center; gap: .55cqw; margin: 0; font-size: 1.05cqw; font-weight: 500; color: #0f2742; }
.lp-lang select { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
/* the card: x 797..1431, y 78..607 of the mockup */
.lp-cardslot { position: absolute; left: 51.2cqw; top: 5cqw; width: 40.8cqw; }
.lp-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 1.5cqw;
background: rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 2cqw 4cqw -1.4cqw rgba(60,80,110,.25); animation: lp-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.lp-card .card-body { position: relative; z-index: 1; padding: 2.9cqw 3cqw 2.6cqw; }
.lp-blob { position: absolute; z-index: 0; }
.lp-blob.b1 { top: 0; right: 7.2cqw; width: 6.8cqw; height: 3.6cqw; background: linear-gradient(135deg, #c4f1df, #e0f8ef); clip-path: polygon(0 0,100% 0,78% 100%,22% 100%); }
.lp-blob.b2 { top: 0; right: 0; width: 9.8cqw; height: 9.8cqw; background: linear-gradient(160deg, #bfe6f5, #e1f4fb); clip-path: polygon(34% 0,100% 0,100% 76%,72% 58%); border-top-right-radius: 1.5cqw; }
.lp-form-title { margin: 0; font-size: 1.95cqw; font-weight: 800; letter-spacing: -.02em; color: #0c1f3a; }
.lp-form-sub { margin: .35cqw 0 1.9cqw; font-size: 1cqw; color: #55687f; }
.lp-card .form-label { font-size: 1cqw; font-weight: 700; color: #10253f; margin-bottom: .6cqw; }
.lp-card .mb-3 { margin-bottom: 1.4cqw !important; }
.lp-card .form-control { height: 3.3cqw; border-radius: .75cqw; border: 1px solid #d5dfe9; background: rgba(255,255,255,.95); font-size: 1cqw; padding-left: 3.2cqw; }
.lp-card .form-control:focus { border-color: #0e8aa8; box-shadow: 0 0 0 .3cqw rgba(14,138,168,.16); }
.lp-card .ciq-input-ico > i.bi:first-child { color: #5b6f86; font-size: 1.15cqw; }
.lp-card .ciq-signin-row { margin: 1cqw 0 1.4cqw; font-size: 1cqw; }
.lp-card .ciq-signin-btn { height: 3.6cqw; border: 0; border-radius: .8cqw; font-size: 1.2cqw; font-weight: 700; color: #fff; display: flex; gap: .6cqw; align-items: center; justify-content: center;
background: linear-gradient(100deg, #0a6f93 0%, #0e8aa8 50%, #19c3b5 100%); box-shadow: 0 1cqw 1.8cqw -.7cqw rgba(14,138,168,.6); transition: transform .15s, filter .15s; }
.lp-card .ciq-signin-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.lp-card .ciq-signin-btn i { font-size: 1.3cqw; }
.lp-help { margin: 1.3cqw 0 0; font-size: 1cqw; line-height: 1.65; color: #55687f; }
.lp-help a { color: #0b7fa0; text-decoration: none; } .lp-help a:hover { text-decoration: underline; }
/* What's inside: x 748..1515, y 640..872 */
.lp-tilesslot { position: absolute; left: 48.1cqw; top: 41.3cqw; width: 49.3cqw; }
.lp-inside-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8cqw; }
.lp-inside-head h3 { margin: 0; font-size: 1.35cqw; font-weight: 800; color: #0c1f3a; }
.lp-inside-head span { font-size: .95cqw; color: #55687f; }
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; }
.lp-tile { display: flex; align-items: center; gap: .8cqw; padding: 1.1cqw .9cqw; border-radius: .9cqw; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.95);
box-shadow: 0 .7cqw 1.5cqw -.9cqw rgba(60,80,110,.4); transition: transform .18s, box-shadow .18s; animation: lp-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.lp-tile:hover { transform: translateY(-.25cqw); box-shadow: 0 1.2cqw 2cqw -1cqw rgba(60,80,110,.45); }
.lp-tile > div { flex: 1; min-width: 0; }
.lp-tile b { display: block; font-size: .9cqw; line-height: 1.2; color: #10253f; }
.lp-tile small { display: block; margin-top: .2cqw; font-size: .72cqw; line-height: 1.35; color: #55687f; }
.lp-tile-ico { flex: none; width: 3.1cqw; height: 3.1cqw; border-radius: .8cqw; display: grid; place-items: center; font-size: 1.5cqw; align-self: flex-start; }
.lp-go { flex: none; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; display: grid; place-items: center; font-size: .75cqw; }
.t-blue .lp-tile-ico { background: #e3eefc; color: #2f6fe0; } .t-blue .lp-go { background: #e5ecff; color: #3b5bdb; }
.t-green .lp-tile-ico { background: #dcf5ea; color: #1aa36b; } .t-green .lp-go { background: #d6f4e6; color: #18a06a; }
.t-amber .lp-tile-ico { background: #fff0d1; color: #e8960c; } .t-amber .lp-go { background: #ffe9bd; color: #d98a0b; }
.t-violet .lp-tile-ico { background: #ece6fb; color: #7a52d9; } .t-violet .lp-go { background: #e6defa; color: #6a42c9; }
.t-orange .lp-tile-ico { background: #fff0d4; color: #f0a020; } .t-orange .lp-go { background: #ffe6b3; color: #e09010; }
.t-red .lp-tile-ico { background: #fde4e4; color: #e5484d; } .t-red .lp-go { background: #fbd9da; color: #d93a40; }
.lp-tile:nth-child(2){animation-delay:.06s}.lp-tile:nth-child(3){animation-delay:.12s}.lp-tile:nth-child(4){animation-delay:.18s}.lp-tile:nth-child(5){animation-delay:.24s}.lp-tile:nth-child(6){animation-delay:.3s}
.lp-demoslot:not(:empty) { padding: 24px 5vw 40px; max-width: 900px; margin: 0 auto; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-card, .lp-tile { animation: none; } }
/* narrow screens: the artwork's baked copy cannot reflow, so show a live header over a soft background */
@media (max-width: 1000px) {
.lp-stage { aspect-ratio: auto; min-height: 0; container-type: normal; padding: 22px 16px 40px; background: linear-gradient(160deg, #dcecf8, #fbf4ea 55%); display: grid; gap: 22px; }
.lp-mhead { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.lp-mhead b { font-size: 1.6rem; font-weight: 800; color: #1b3a63; line-height: 1; } .lp-mhead em { font-style: normal; color: #1aa6b7; }
.lp-mhead small { display: block; color: #55687f; margin-top: 3px; }
.lp-mhead p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: #0c1f3a; }
.lp-lang { position: static; justify-self: end; font-size: .95rem; order: -1; }
.lp-cardslot, .lp-tilesslot { position: static; width: auto; }
.lp-card { border-radius: 18px; } .lp-card .card-body { padding: 24px 20px; }
.lp-form-title { font-size: 1.7rem; } .lp-form-sub, .lp-form-title + p { font-size: 1rem; margin-bottom: 18px; }
.lp-card .form-label, .lp-card .ciq-signin-row, .lp-help { font-size: .95rem; }
.lp-card .form-control { height: 52px; font-size: 1rem; padding-left: 44px; border-radius: 12px; }
.lp-card .ciq-input-ico > i.bi:first-child { font-size: 1.1rem; }
.lp-card .ciq-signin-btn { height: 54px; font-size: 1.1rem; border-radius: 12px; } .lp-card .ciq-signin-btn i { font-size: 1.3rem; }
.lp-inside-head h3 { font-size: 1.2rem; } .lp-inside-head span { font-size: .85rem; }
.lp-grid { grid-template-columns: 1fr; gap: 10px; }
.lp-tile { padding: 14px; border-radius: 14px; gap: 12px; } .lp-tile b { font-size: .95rem; } .lp-tile small { font-size: .8rem; }
.lp-tile-ico { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; } .lp-go { width: 28px; height: 28px; font-size: .8rem; }
.lp-blob.b1 { right: 90px; width: 100px; height: 50px; } .lp-blob.b2 { width: 120px; height: 120px; }
}
/* the Gray Matter "g": the site's own mark, spinning on its vertical axis over the artwork */
.lp-g { position: absolute; display: block; overflow: visible; transform-origin: 50% 50%; animation: lp-spin 4.5s linear infinite; will-change: transform; filter: drop-shadow(0 .3cqw .5cqw rgba(60,40,80,.18)); }
.lp-g-top { left: 3.95cqw; top: 3.5cqw; height: 5.3cqw; width: 3.84cqw; }
.lp-g-bot { left: 84.9cqw; top: 59cqw; height: 3.4cqw; width: 2.46cqw; }
.lp-g-m { display: none; }
@keyframes lp-spin { from { transform: perspective(600px) rotateY(0deg); } to { transform: perspective(600px) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .lp-g { animation: none; } }
@media (max-width: 1000px) { .lp-g-top, .lp-g-bot { display: none; } .lp-g-m { display: block; position: static; width: 40px; height: 55px; grid-row: 1 / 3; } }
/* ---- live (vector) copy over the photo: crisp at any size or pixel density ---- */
.lp-stage { background-image: url("/static/branding/login-hero.webp"); }
.lp-veil { position: absolute; inset: 0 auto 0 0; width: 34cqw; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.28) 60%, transparent); pointer-events: none; }
.lp-brand { position: absolute; left: 8.75cqw; top: 3.9cqw; display: grid; gap: .25cqw; }
.lp-brand-name { font-size: 2.3cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #1b3a63; }
.lp-brand-name em, .lp-corner-name em { font-style: normal; color: #14a7b4; }
.lp-brand-by { font-size: 1.15cqw; color: #4f6178; }
.lp-title { position: absolute; left: 4cqw; top: 12.2cqw; margin: 0; font-size: 3.05cqw; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: #0b1f3b; }
.lp-title em { font-style: normal; background: linear-gradient(90deg, #0d8aa6, #17b9ad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { position: absolute; left: 4cqw; top: 19.4cqw; width: 26cqw; margin: 0; font-size: 1.14cqw; line-height: 1.65; color: #37506b; }
.lp-points { position: absolute; left: 3.6cqw; top: 27.6cqw; width: 28cqw; margin: 0; padding: 0; list-style: none; }
.lp-points li { position: absolute; left: 0; top: calc(var(--y) * 5.95cqw); display: flex; gap: 1.3cqw; align-items: flex-start; width: 100%; }
.lp-points li:nth-child(4) { top: 20.1cqw; margin-top: -.4cqw; } /* the mockup spaces the last row a little wider */
.lp-points b { display: block; font-size: 1.07cqw; font-weight: 700; color: #10253f; margin-top: .45cqw; }
.lp-points small { display: block; margin-top: .25cqw; font-size: .9cqw; line-height: 1.5; color: #4a6078; }
.lp-ico { flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 1.6cqw; box-shadow: 0 .5cqw 1.3cqw rgba(40,70,110,.14), inset 0 0 0 1px rgba(255,255,255,.8); }
.lp-ico.c1 { background: #e3f2fc; color: #2b86cf; } .lp-ico.c2 { background: #dff6ec; color: #1fa36a; }
.lp-ico.c3 { background: #ece5fc; color: #7a3fe0; } .lp-ico.c4 { background: #fff1cf; color: #f2a516; }
.lp-tag { position: absolute; left: 39.6cqw; top: 22.8cqw; width: 11cqw; overflow: visible; }
.lp-corner { position: absolute; left: 88.1cqw; top: 59.1cqw; display: grid; gap: .1cqw; }
.lp-corner-name { font-size: 1.45cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #1b3a63; }
.lp-corner-by { font-size: .8cqw; color: #4f6178; }
.lp-stage, .lp-stage * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 1000px) {
.lp-veil, .lp-brand, .lp-title, .lp-lead, .lp-points, .lp-tag, .lp-corner { display: none; }
}
.lp-title { font-size: 2.6cqw; top: 12.6cqw; line-height: 1.14; letter-spacing: -.03em; }
.lp-lead { font-size: 1.04cqw; line-height: 1.66; white-space: nowrap; width: auto; top: 19.4cqw; }
.lp-points { top: 28.2cqw; width: 26cqw; }
.lp-points li { top: calc(var(--y) * 5.98cqw); white-space: nowrap; }
.lp-points li:nth-child(4) { top: 18.7cqw; margin-top: 0; }
.lp-points b { font-size: 1.02cqw; margin-top: .55cqw; }
.lp-points small { font-size: .85cqw; line-height: 1.55; }
.lp-ico { width: 4cqw; height: 4cqw; margin-left: 0; }
.lp-brand-name { font-size: 2.15cqw; } .lp-brand-by { font-size: 1.08cqw; }
.lp-brand { top: 4.1cqw; }
.lp-tag { left: 39.2cqw; top: 23cqw; }
/* all 14 applications: four across, each a compact tile (icon + name, then the line under it) */
.lp-stage { aspect-ratio: 1556 / 1140; background-size: cover; background-position: center bottom; }
.lp-g-bot, .lp-corner { display: none; }
.lp-tilesslot { width: 49.5cqw; }
.lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8cqw; }
.lp-tile { display: grid; grid-template-columns: auto 1fr; column-gap: .65cqw; row-gap: .35cqw; align-items: center; padding: .85cqw .8cqw; min-height: 6.3cqw; }
.lp-tile-ico { width: 2.5cqw; height: 2.5cqw; font-size: 1.2cqw; border-radius: .65cqw; align-self: center; }
.lp-tile b { font-size: .82cqw; line-height: 1.2; }
.lp-tile small { grid-column: 1 / -1; margin: 0; font-size: .68cqw; line-height: 1.35; }
.lp-go { display: none; }
@media (max-width: 1000px) {
.lp-stage { aspect-ratio: auto; }
.lp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-tile { grid-template-columns: auto 1fr; padding: 12px; column-gap: 10px; min-height: 0; }
.lp-tile-ico { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 11px; }
.lp-tile b { font-size: .88rem; } .lp-tile small { font-size: .76rem; }
}
@media (max-width: 560px) { .lp-grid { grid-template-columns: 1fr; } }
/* ---- v5: no tiles; larger left copy; compact sign-in card centred in the right half ---- */
.lp-stage { aspect-ratio: 1556 / 1011; background-position: left top; }
.lp-veil { width: 44cqw; background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.4) 62%, transparent); }
.lp-brand { left: 8.9cqw; top: 3.9cqw; } .lp-brand-name { font-size: 2.3cqw; } .lp-brand-by { font-size: 1.2cqw; }
.lp-title { left: 4cqw; top: 11.6cqw; font-size: 3cqw; }
.lp-lead { top: 19.6cqw; font-size: 1.28cqw; line-height: 1.62; color: #2f4863; }
.lp-points { top: 31cqw; width: 36cqw; }
.lp-points li { top: calc(var(--y) * 7cqw); gap: 1.5cqw; }
.lp-points li:nth-child(4) { top: 21cqw; }
.lp-points b { font-size: 1.28cqw; margin-top: .3cqw; color: #0c2038; }
.lp-points small { font-size: 1.04cqw; line-height: 1.5; margin-top: .25cqw; color: #3d556f; }
.lp-ico { width: 4.6cqw; height: 4.6cqw; font-size: 1.9cqw; }
.lp-tag { left: 42.5cqw; top: 22cqw; width: 11cqw; }
.lp-cardslot { left: 59cqw; top: 12.5cqw; width: 32cqw; }
.lp-card { border-radius: 1.1cqw; }
.lp-card .card-body { padding: 2.1cqw 2.3cqw 1.9cqw; }
.lp-form-title { font-size: 1.6cqw; } .lp-form-sub { font-size: .9cqw; margin: .2cqw 0 1.3cqw; }
.lp-card .form-label { font-size: .88cqw; margin-bottom: .4cqw; }
.lp-card .mb-3 { margin-bottom: .9cqw !important; }
.lp-card .form-control { height: 2.8cqw; font-size: .92cqw; padding-left: 2.7cqw; border-radius: .6cqw; }
.lp-card .ciq-input-ico > i.bi:first-child { font-size: 1cqw; }
.lp-card .ciq-signin-row { margin: .7cqw 0 1cqw; font-size: .88cqw; }
.lp-card .form-check-input { width: .95cqw; height: .95cqw; }
.lp-card .ciq-signin-btn { height: 3cqw; font-size: 1cqw; border-radius: .65cqw; box-shadow: 0 .7cqw 1.4cqw -.6cqw rgba(14,138,168,.6); }
.lp-card .ciq-signin-btn i { font-size: 1.1cqw; }
.lp-help { font-size: .82cqw; margin-top: 1cqw; line-height: 1.55; }
.lp-blob.b1 { right: 5.4cqw; width: 5cqw; height: 2.6cqw; } .lp-blob.b2 { width: 7.2cqw; height: 7.2cqw; }
.lp-lang { left: 88cqw; top: 2cqw; font-size: .95cqw; }
@media (max-width: 1000px) { .lp-tilesslot { display: none; } }
.lp-veil { width: 48cqw; background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.55) 55%, rgba(255,255,255,.2) 85%, transparent); }
/* ---- v6: the right side, composed: aurora, orbits, floating live-style widgets, app marquee ---- */
.lp-cardslot { left: 57.5cqw; top: 13cqw; width: 31cqw; z-index: 5; }
.lp-lang { z-index: 6; }
.lp-aurora { position: absolute; left: 47cqw; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lp-aurora i { position: absolute; border-radius: 50%; filter: blur(4cqw); opacity: .55; animation: lp-drift 16s ease-in-out infinite alternate; }
.lp-aurora .a1 { width: 26cqw; height: 26cqw; left: 12cqw; top: -6cqw; background: radial-gradient(circle, #8be3d6, transparent 68%); }
.lp-aurora .a2 { width: 24cqw; height: 24cqw; right: -4cqw; top: 14cqw; background: radial-gradient(circle, #c3b2ff, transparent 68%); animation-duration: 20s; }
.lp-aurora .a3 { width: 22cqw; height: 22cqw; left: 8cqw; bottom: -6cqw; background: radial-gradient(circle, #ffd9a0, transparent 68%); animation-duration: 18s; }
@keyframes lp-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(2.5cqw,2cqw) scale(1.12); } }
.lp-orbit { position: absolute; left: 56cqw; top: -1cqw; width: 33.5cqw; aspect-ratio: 1; z-index: 1; pointer-events: none; overflow: visible; }
.lp-orbit g { transform-origin: 300px 300px; animation: lp-rot 60s linear infinite; }
.lp-orbit .o2 { animation-duration: 38s; animation-direction: reverse; } .lp-orbit .o3 { animation-duration: 90s; }
@keyframes lp-rot { to { transform: rotate(360deg); } }
.lp-w { position: absolute; z-index: 6; display: grid; gap: .55cqw; padding: .95cqw 1.1cqw; border-radius: 1.1cqw; color: #10253f;
background: rgba(255,255,255,.66); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
border: 1px solid rgba(255,255,255,.85); box-shadow: 0 1.4cqw 3cqw -1.2cqw rgba(50,70,120,.38), inset 0 1px 0 rgba(255,255,255,.9);
animation: lp-float 7s ease-in-out infinite; }
.lp-w .w-head { display: flex; gap: .6cqw; align-items: center; } .lp-w b { font-size: .82cqw; font-weight: 700; display: block; line-height: 1.1; } .lp-w small { font-size: .62cqw; color: #5a6e86; display: block; margin-top: .1cqw; }
.w-ico { display: grid; place-items: center; width: 1.9cqw; height: 1.9cqw; border-radius: .55cqw; font-size: .95cqw; flex: none; }
.w-ico.t1 { background: #d9f6ef; color: #12a58f; } .w-ico.t2 { background: #e0ebff; color: #3b6fe0; } .w-ico.t3 { background: #ffeccb; color: #e08a00; } .w-ico.t4 { background: #e6e0ff; color: #6a4be0; }
.w-big { font-size: 1.7cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .w-big em { font-style: normal; font-size: .75cqw; color: #12a58f; vertical-align: .25cqw; } .w-big small { display: inline; font-size: .7cqw; font-weight: 500; }
.w-spark { width: 100%; height: 2.2cqw; display: block; }
.w-ring { position: relative; width: 4.6cqw; height: 4.6cqw; } .w-ring svg { width: 100%; height: 100%; } .w-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05cqw; font-weight: 800; }
.w-ring .ring { stroke-dashoffset: 201; animation: lp-fill 2.2s .5s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes lp-fill { to { stroke-dashoffset: 16; } }
.w-avatars { display: flex; align-items: center; } .w-avatars i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--c); color: #fff; font: 700 .65cqw/1.5cqw inherit; text-align: center; font-style: normal; margin-left: -.35cqw; border: .13cqw solid #fff; }
.w-avatars i:first-child { margin-left: 0; } .w-avatars span { margin-left: .5cqw; font-size: .68cqw; font-weight: 600; color: #5a6e86; }
.w-adm { left: 49.8cqw; top: 8cqw; width: 11.5cqw; animation-delay: -1s; }
.w-att { left: 86.3cqw; top: 15cqw; width: 8.6cqw; justify-items: center; animation-delay: -3s; } .w-att .w-head { justify-self: start; }
.w-plc { left: 50.2cqw; top: 37.5cqw; width: 11.5cqw; animation-delay: -5s; }
.w-res { left: 80.5cqw; top: 38.2cqw; display: flex; align-items: center; gap: .7cqw; padding: .8cqw 1.1cqw; animation-delay: -2s; } .w-res b { white-space: nowrap; } .w-res small { white-space: nowrap; }
@keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.7cqw); } }
.lp-marquee { position: absolute; left: 47cqw; right: 0; top: 50.6cqw; z-index: 6; overflow: hidden; padding: .4cqw 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lp-track { display: flex; gap: .8cqw; width: max-content; animation: lp-marq 48s linear infinite; }
.lp-marquee:hover .lp-track { animation-play-state: paused; }
@keyframes lp-marq { to { transform: translateX(-50%); } }
.lp-chip { display: inline-flex; align-items: center; gap: .55cqw; padding: .6cqw 1.1cqw .6cqw .7cqw; border-radius: 99cqw; font-size: .88cqw; font-weight: 600; color: #10253f; white-space: nowrap;
background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 .6cqw 1.3cqw -.8cqw rgba(50,70,120,.4); }
.lp-chip i { display: grid; place-items: center; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; font-size: .85cqw; }
.lp-chip.c0 i { background: #e3eefc; color: #2f6fe0; } .lp-chip.c1 i { background: #dcf5ea; color: #1aa36b; } .lp-chip.c2 i { background: #fff0d1; color: #e8960c; }
.lp-chip.c3 i { background: #ece6fb; color: #7a52d9; } .lp-chip.c4 i { background: #ffe9c8; color: #e0861a; } .lp-chip.c5 i { background: #fde4e4; color: #e5484d; }
.lp-marquee-cap { margin: .8cqw 0 0; text-align: center; font-size: .8cqw; letter-spacing: .08em; text-transform: uppercase; color: #5a6e86; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lp-w, .lp-track, .lp-orbit g, .lp-aurora i { animation: none; } .w-ring .ring { animation: none; stroke-dashoffset: 16; } }
@media (max-width: 1000px) {
.lp-aurora, .lp-orbit, .lp-w { display: none; }
.lp-marquee { position: static; padding: 0; } .lp-chip { font-size: .85rem; padding: 8px 14px 8px 8px; gap: 8px; } .lp-chip i { width: 26px; height: 26px; font-size: .9rem; } .lp-track { gap: 10px; }
.lp-marquee-cap { font-size: .72rem; margin-top: 12px; }
}
.lp-cardslot { left: 59.5cqw; top: 12.5cqw; }
.lp-orbit { left: 58cqw; }
.w-adm { left: 48.2cqw; top: 7.2cqw; width: 10.6cqw; }
.w-plc { left: 48.2cqw; top: 36cqw; width: 10.6cqw; }
.w-att { left: 89.6cqw; top: 14.5cqw; }
.w-res { left: 79cqw; top: 41.6cqw; }
/* =================== v7: the sheet — midnight, gold hairline, serif voice =================== */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/vendor/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/vendor/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/static/vendor/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
.lp-aurora, .lp-orbit, .lp-w, .lp-marquee { display: none !important; }
.lp-sheet { position: absolute; z-index: 4; left: 53.5cqw; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 3.2cqw 0 0 3.2cqw;
background: radial-gradient(120% 80% at 85% 0%, #123b52 0%, transparent 55%), linear-gradient(165deg, #0a2236 0%, #07182b 55%, #050f1d 100%);
box-shadow: -2.4cqw 0 6cqw -1cqw rgba(8,24,44,.35), inset 1px 0 0 rgba(255,255,255,.08); animation: sh-in 1s cubic-bezier(.2,.8,.2,1) both; }
.lp-sheet::before { content: ""; position: absolute; left: 0; top: 4cqw; bottom: 4cqw; width: 1px; background: linear-gradient(180deg, transparent, #e7c36a 30%, #19c3b5 70%, transparent); opacity: .85; }
.sh-glow { position: absolute; border-radius: 50%; filter: blur(5cqw); animation: lp-drift 18s ease-in-out infinite alternate; }
.sh-glow.g1 { width: 26cqw; height: 26cqw; right: -6cqw; top: -8cqw; background: radial-gradient(circle, rgba(25,195,181,.45), transparent 65%); }
.sh-glow.g2 { width: 22cqw; height: 22cqw; left: -4cqw; bottom: -6cqw; background: radial-gradient(circle, rgba(231,195,106,.28), transparent 65%); animation-duration: 24s; }
.sh-grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); }
.sh-mono { position: absolute; right: -4cqw; bottom: -5cqw; width: 22cqw; opacity: .09; animation: lp-rot 80s linear infinite; }
@keyframes sh-in { from { opacity: 0; transform: translateX(3cqw); } to { opacity: 1; transform: none; } }
.lp-lang { left: auto; right: 3cqw; top: 2cqw; z-index: 7; color: #c9d6e4; } .lp-lang select { color: #c9d6e4; } .lp-lang select option { color: #10253f; }
.lp-greet { position: absolute; z-index: 7; left: 59cqw; top: 11.6cqw; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: .8cqw; font-size: .78cqw; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #e7c36a; }
.lp-eyebrow i { width: 2.6cqw; height: 1px; background: linear-gradient(90deg, transparent, #e7c36a); }
.lp-cardslot { left: 59cqw; top: 13.6cqw; width: 33cqw; z-index: 7; }
.lp-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; animation: lp-rise .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.lp-card .card-body { padding: 0; }
.lp-blob { display: none; }
.lp-form-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 3.5cqw; letter-spacing: -.01em; line-height: 1; color: #fff; }
.lp-form-title::after { content: "."; color: #e7c36a; }
.lp-form-sub { font-size: .95cqw; color: #9fb3c8; margin: .7cqw 0 2.2cqw; }
.lp-card .form-label { font-size: .72cqw; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8fa6bd; margin-bottom: .55cqw; }
.lp-card .mb-3 { margin-bottom: 1.3cqw !important; }
.lp-card .form-control { height: 3.3cqw; font-size: 1.02cqw; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: .8cqw; padding-left: 3cqw; transition: border-color .2s, background .2s, box-shadow .2s; caret-color: #19c3b5; }
.lp-card .form-control::placeholder { color: #6f869d; }
.lp-card .form-control:hover { border-color: rgba(255,255,255,.28); }
.lp-card .form-control:focus { background: rgba(255,255,255,.09); border-color: #19c3b5; box-shadow: 0 0 0 .28cqw rgba(25,195,181,.18), 0 0 2cqw rgba(25,195,181,.25); color: #fff; }
.lp-card .form-control:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100cqw #10293d inset; transition: background-color 9999s; }
.lp-card .ciq-input-ico > i.bi:first-child { color: #7f97ae; font-size: 1.1cqw; left: 1.1cqw; }
.lp-card .ciq-input-ico:focus-within > i.bi:first-child { color: #19c3b5; }
.lp-card .ciq-eye { color: #8fa6bd; } .lp-card .ciq-eye:hover { color: #fff; }
.lp-card .ciq-signin-row { margin: 1cqw 0 1.9cqw; font-size: .9cqw; color: #b6c6d6; }
.lp-card .form-check-label { color: #b6c6d6; }
.lp-card .form-check-input { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.lp-card .form-check-input:checked { background-color: #19c3b5; border-color: #19c3b5; }
.lp-card .ciq-signin-btn { position: relative; overflow: hidden; height: 3.6cqw; border: 0; border-radius: .85cqw; font-size: 1.05cqw; font-weight: 700; letter-spacing: .04em; color: #04202b;
background: linear-gradient(100deg, #f1d58a 0%, #e7c36a 30%, #19c3b5 100%); box-shadow: 0 1.2cqw 2.6cqw -1cqw rgba(25,195,181,.6), inset 0 1px 0 rgba(255,255,255,.55); }
.lp-card .ciq-signin-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: sh-shine 4.5s 1.5s ease-in-out infinite; }
@keyframes sh-shine { 0% { left: -40%; } 40%, 100% { left: 130%; } }
.lp-card .ciq-signin-btn:hover { transform: translateY(-.15cqw); filter: brightness(1.05); }
.lp-card .ciq-signin-btn i { font-size: 1.3cqw; }
.lp-help { margin: 1.7cqw 0 0; font-size: .82cqw; line-height: 1.7; color: #8fa6bd; padding-top: 1.3cqw; border-top: 1px solid rgba(255,255,255,.09); }
.lp-help a { color: #e7c36a; }
.lp-card .alert-danger { background: rgba(251,46,60,.12); border: 1px solid rgba(251,46,60,.4); color: #ffb4ba; border-radius: .7cqw; font-size: .9cqw; }
.lp-ticker { position: absolute; z-index: 7; left: 53.5cqw; right: 0; bottom: 2.2cqw; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-tick-track { display: flex; align-items: center; gap: 1.3cqw; width: max-content; animation: lp-marq 70s linear infinite; font-size: .82cqw; letter-spacing: .22em; text-transform: uppercase; color: #8fa6bd; white-space: nowrap; }
.lp-tick-track em { font-style: normal; color: #e7c36a; font-size: .5cqw; }
.lp-tick-cap { margin: .9cqw 0 0; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.15cqw; color: #c9d6e4; letter-spacing: .02em; }
.lp-tag { left: 41.5cqw; }
@media (prefers-reduced-motion: reduce) { .lp-sheet, .sh-glow, .sh-mono, .lp-tick-track, .lp-card .ciq-signin-btn::after { animation: none; } }
@media (max-width: 1000px) {
.lp-sheet, .lp-greet { display: none; }
.lp-stage { background: linear-gradient(165deg, #0a2236, #07182b 60%, #050f1d); }
.lp-mhead b { color: #fff; } .lp-mhead p { color: #fff; } .lp-mhead small { color: #9fb3c8; } .lp-lang, .lp-lang select { color: #c9d6e4; }
.lp-form-title { font-size: 2.4rem; } .lp-form-sub { font-size: .95rem; margin-bottom: 20px; }
.lp-card .form-label { font-size: .72rem; } .lp-card .form-control { height: 52px; font-size: 1rem; padding-left: 44px; border-radius: 12px; }
.lp-card .ciq-input-ico > i.bi:first-child { font-size: 1.1rem; left: 14px; }
.lp-card .ciq-signin-btn { height: 54px; font-size: 1.05rem; border-radius: 12px; } .lp-card .ciq-signin-btn i { font-size: 1.3rem; }
.lp-card .ciq-signin-row, .lp-help { font-size: .9rem; }
.lp-ticker { position: static; mask-image: none; -webkit-mask-image: none; } .lp-tick-track { font-size: .72rem; gap: 14px; } .lp-tick-cap { font-size: 1.05rem; margin-top: 12px; }
}
.ciq-signin.lp .card.lp-card { --bs-card-bg: transparent; --bs-card-border-color: transparent; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ciq-signin.lp .card.lp-card .form-label, .ciq-signin.lp .card.lp-card .ciq-hint { color: #8fa6bd; }
.ciq-signin.lp .card.lp-card .lp-form-title { color: #fff; }
.ciq-signin.lp .card.lp-card .lp-form-sub { color: #9fb3c8; }
/* =================== v8: one continuous wallpaper, light luxury glass =================== */
.lp-stage { background-size: cover; background-position: left top; }
.lp-sheet, .lp-aurora, .lp-orbit, .lp-w { display: none !important; }
.lp-veil { width: 46cqw; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.5) 55%, rgba(255,255,255,.15) 88%, transparent); }
/* atmosphere over the whole canvas */
.lp-atmos { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.lp-atmos .rays { position: absolute; right: -10cqw; top: -22cqw; width: 70cqw; height: 70cqw; opacity: .55; mix-blend-mode: soft-light; animation: lp-rot 120s linear infinite;
background: conic-gradient(from 180deg at 50% 50%, transparent 0 8deg, rgba(255,240,200,.9) 12deg, transparent 20deg 46deg, rgba(255,240,200,.7) 52deg, transparent 62deg 100deg, rgba(255,240,200,.8) 108deg, transparent 118deg 360deg);
-webkit-mask-image: radial-gradient(circle, #000 5%, transparent 65%); mask-image: radial-gradient(circle, #000 5%, transparent 65%); }
.lp-atmos .leaves { position: absolute; filter: blur(.55cqw); opacity: .16; transform-origin: 50% 100%; animation: lp-sway 9s ease-in-out infinite alternate; }
.lp-atmos .l1 { right: -3cqw; top: -4cqw; width: 26cqw; transform: rotate(160deg); }
.lp-atmos .l2 { right: 14cqw; top: -7cqw; width: 18cqw; transform: rotate(185deg); animation-duration: 12s; opacity: .12; }
@keyframes lp-sway { from { rotate: -2.5deg; } to { rotate: 3deg; } }
.lp-atmos .bk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw); border-radius: 50%; opacity: var(--o);
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,236,190,.55) 45%, rgba(255,214,150,0) 72%); filter: blur(.12cqw); animation: lp-bk var(--d) ease-in-out infinite alternate; }
@keyframes lp-bk { from { transform: translate(0,0) scale(1); } to { transform: translate(1.2cqw,-1.8cqw) scale(1.15); } }
/* top-right chrome */
.lp-lang, .lp-lang select { color: #1d3350; } .lp-lang { right: 3cqw; }
.lp-greet { left: 60.4cqw; top: 10.4cqw; }
.lp-eyebrow { color: #0a7c91; } .lp-eyebrow i { background: linear-gradient(90deg, transparent, #0a7c91); }
/* the glass card */
.lp-cardslot { left: 58.6cqw; top: 12.6cqw; width: 33.4cqw; z-index: 7; }
.ciq-signin.lp .card.lp-card { position: relative; border-radius: 1.7cqw; overflow: visible;
background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.38)) !important; backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
box-shadow: 0 3cqw 6cqw -2cqw rgba(60,50,30,.35), 0 .4cqw 1.2cqw rgba(60,50,30,.08), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3) !important; }
@property --lp-a { syntax: ""; initial-value: 0deg; inherits: false; }
.ciq-signin.lp .card.lp-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.2px; pointer-events: none;
background: conic-gradient(from var(--lp-a), rgba(255,255,255,.9), #e7c36a 12%, rgba(255,255,255,.2) 28%, #19c3b5 52%, rgba(255,255,255,.2) 70%, #e7c36a 88%, rgba(255,255,255,.9));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lp-border 9s linear infinite; }
@keyframes lp-border { to { --lp-a: 360deg; } }
.lp-card .card-body { padding: 2.9cqw 3cqw 2.5cqw; }
.ciq-signin.lp .card.lp-card .lp-form-title { color: #0b1f3a; font-size: 3.3cqw; }
.ciq-signin.lp .card.lp-card .lp-form-title::after { color: #14a7b4; }
.ciq-signin.lp .card.lp-card .lp-form-sub { color: #4b6179; }
.ciq-signin.lp .card.lp-card .form-label { color: #35506d; }
.lp-card .form-control { color: #0b1f3a; background: rgba(255,255,255,.72); border: 1px solid rgba(20,50,90,.14); box-shadow: inset 0 1px 2px rgba(20,50,90,.05); }
.lp-card .form-control::placeholder { color: #7a8ea5; }
.lp-card .form-control:hover { border-color: rgba(20,50,90,.28); }
.lp-card .form-control:focus { background: #fff; color: #0b1f3a; border-color: #14a7b4; box-shadow: 0 0 0 .3cqw rgba(20,167,180,.18), 0 .8cqw 1.8cqw -.8cqw rgba(20,167,180,.35); }
.lp-card .form-control:-webkit-autofill { -webkit-text-fill-color: #0b1f3a; -webkit-box-shadow: 0 0 0 100cqw #fff inset; }
.lp-card .ciq-input-ico > i.bi:first-child { color: #5d7490; } .lp-card .ciq-input-ico:focus-within > i.bi:first-child { color: #0e8aa8; }
.lp-card .ciq-eye { color: #5d7490; } .lp-card .ciq-eye:hover { color: #0b1f3a; }
.lp-card .ciq-signin-row, .lp-card .form-check-label { color: #3d556f; }
.lp-card .form-check-input { background-color: rgba(255,255,255,.8); border-color: rgba(20,50,90,.3); }
.lp-card .ciq-signin-btn { color: #fff; background: linear-gradient(100deg, #08536f 0%, #0b7f9c 45%, #19c3b5 100%);
box-shadow: 0 1.4cqw 2.6cqw -1cqw rgba(8,83,111,.6), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
.lp-card .ciq-signin-btn::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }
.lp-help { color: #4b6179; border-top: 1px solid rgba(20,50,90,.1); } .lp-help a { color: #0a7c91; font-weight: 600; }
.lp-card .alert-danger { background: rgba(220,38,60,.1); border: 1px solid rgba(220,38,60,.35); color: #a3182c; }
/* the app ticker, now on the wallpaper */
.lp-ticker { left: 50cqw; bottom: 2.4cqw; z-index: 7; }
.lp-tick-track { color: #2c4561; font-weight: 600; } .lp-tick-track em { color: #c79a2b; }
.lp-tick-cap { color: #1d3350; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.lp-tag { left: 41.5cqw; }
@media (prefers-reduced-motion: reduce) { .lp-atmos .rays, .lp-atmos .leaves, .lp-atmos .bk, .ciq-signin.lp .card.lp-card::before { animation: none; } }
@media (max-width: 1000px) {
.lp-atmos .rays, .lp-atmos .leaves { display: none; }
.lp-stage { background: linear-gradient(165deg, #dcecf8 0%, #fbf3e6 55%, #f6e9d6 100%); }
.lp-mhead b { color: #1b3a63; } .lp-mhead p { color: #0c1f3a; } .lp-mhead small { color: #4b6179; } .lp-lang, .lp-lang select { color: #1d3350; }
.lp-card .card-body { padding: 24px 20px; } .ciq-signin.lp .card.lp-card .lp-form-title { font-size: 2.4rem; }
.lp-tick-track { color: #2c4561; } .lp-tick-cap { color: #1d3350; }
}