/* WinBordro detail page. */
.wb { --wb-accent: #c5c1ff; --wb-teal: #b8f0d8; }
.mp:has(.wb) { padding-top: 38px; }
.wb-hero { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 42px; align-items: center; padding: 24px 0 52px; }
.wb-hero__copy { position: relative; z-index: 1; animation: wb-copy-in .8s ease-out both; }
.wb .mp-eyebrow { font-size: 10px; letter-spacing: .15em; }
.wb-hero .mp-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.wb-hero .mp-eyebrow > span { opacity: .5; }
.wb h1 { font-size: clamp(25px,2.6vw,36px); line-height: 1.24; letter-spacing: -.045em; font-weight: 500; margin: 0 0 22px; }
.wb-brand { display: block; font-size: clamp(52px,5.8vw,80px); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; margin-bottom: 20px; }
.wb-brand > span, .wb h2 > span { color: var(--wb-accent); }
.wb .wb-lead { font-size: 22px; line-height: 1.4; color: #fff; margin-bottom: 14px; letter-spacing: -.025em; }
.wb-lead span { color: var(--wb-accent); }
.wb-hero__copy > p:not(.wb-lead) { max-width: 450px; font-size: 14px; }
.wb .mp-actions { gap: 18px; margin-top: 24px; }
.wb .mp-button { font: inherit; font-size: 12px; cursor: pointer; }
.wb .mp-textlink { font-size: 12px; }
.wb-showcase { position: relative; isolation: isolate; min-width: 0; margin: 0; padding: 12px 0 0; perspective: 1400px; }
.wb-showcase__halo { position: absolute; z-index: -1; inset: -60px -55px -25px; border-radius: 50%; background: radial-gradient(ellipse at 60% 35%,#827de72b,transparent 64%),radial-gradient(ellipse at 25% 70%,#389ed41a,transparent 65%); pointer-events: none; animation: wb-glow-in 2s ease-out both; }
.wb-showcase__stage { overflow: hidden; padding: 8px; border: 1px solid #c9c7ff38; border-radius: 21px; background: linear-gradient(145deg,#32365b,#1b2140); box-shadow: 0 28px 65px -20px #050b2c99,0 1px 0 #ffffff12 inset; animation: wb-product-in 1.3s cubic-bezier(.16,1,.3,1) backwards; transition: transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s; }
.wb-showcase__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 16px; color: #e4e8fc; font-size: 11px; }
.wb-showcase__bar > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.wb-showcase__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-teal); box-shadow: 0 0 0 4px #b8f0d80b; }
.wb-showcase__badge { padding: 4px 8px; border: 1px solid #c5c1ff2b; border-radius: 6px; color: #d2cffb; font-size: 9px; white-space: nowrap; }
.wb-showcase__image { position: relative; display: block; overflow: hidden; border-radius: 13px; background: #eef3ff; cursor: zoom-in; }
.wb-showcase__image picture,.wb-showcase__image img { display: block; width: 100%; }
.wb-showcase__image img { height: auto; aspect-ratio: 3 / 2; }
.wb-showcase__image:focus-visible { outline-offset: -4px; }
.wb-showcase__zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #ffffff3b; border-radius: 100px; color: #fff; background: #18244ced; box-shadow: 0 4px 20px #15294b26; font-size: 10px; transition: background .25s; }
.wb-showcase__zoom svg { width: 15px; height: 15px; }
.wb-showcase__image:hover .wb-showcase__zoom { background: #2d3d71; }
.wb-showcase figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 23px 5px 0; }
.wb-showcase__flow { display: inline-flex; align-items: center; gap: 13px; color: #e4e8fc; font-size: 11px; }
.wb-showcase__flow span { animation: wb-copy-in .8s both; }
.wb-showcase__flow span:nth-of-type(1) { animation-delay: .25s; }
.wb-showcase__flow span:nth-of-type(2) { animation-delay: .5s; }
.wb-showcase__flow span:nth-of-type(3) { color: var(--wb-teal); animation-delay: .75s; }
.wb-showcase__flow i { font-style: normal; color: #7b84b4; }
.wb-showcase__note { color: #b8c2dd; font-size: 10px; }
.wb-preview { width: min(1280px,calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; border: 1px solid #ffffff33; border-radius: 18px; color: #eef2ff; background: #182040; box-shadow: 0 40px 100px #0006; }
.wb-preview::backdrop { background: #080d22d9; backdrop-filter: blur(8px); }
.wb-preview[open] { animation: wb-copy-in .25s ease-out; }
.wb-preview__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: #182040; }
.wb .wb-preview__bar h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.wb-preview__bar button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 1px solid #ffffff33; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.wb-preview__bar button span { font-size: 24px; line-height: 1; }
.wb-preview__bar button:hover { background: #ffffff12; }
.wb-preview__bar button:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 3px; }
.wb-preview > img { display: block; width: 100%; height: auto; }
.wb-preview-open { overflow: hidden; }
.wb-nav { display: flex; align-items: center; gap: 26px; padding: 19px 24px; border: 1px solid var(--mp-line); border-radius: 14px; background: linear-gradient(110deg,#c5c1ff09,transparent); }
.wb-nav a { font-size: 11px; color: #cbd4eb; }
.wb-nav a:hover { color: var(--wb-accent); }
.wb-nav .wb-nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--wb-accent); }
.wb section { scroll-margin-top: 110px; }
.wb h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.2; margin: 0; }
.wb-overview { display: grid; grid-template-columns: 1fr 1.1fr; align-items: start; gap: 80px; padding: 64px 0; }
.wb-overview > div:last-child p { font-size: 14px; margin: 0 0 15px; }
.wb-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 23px; }
.wb-tags span { padding: 8px 11px; border: 1px solid #c5c1ff2e; border-radius: 6px; color: #d3d9ec; font-size: 10px; }
.wb-features { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 66px; padding: 62px 0; border-top: 1px solid var(--mp-line); }
.wb-features__intro { position: sticky; top: 120px; }
.wb-features__intro p { max-width: 320px; margin: 23px 0; font-size: 13px; }
.wb-module { border-bottom: 1px solid var(--mp-line); transition: background .25s; }
.wb-module[open] { background: linear-gradient(110deg,#c5c1ff09,transparent); }
.wb-module:first-child { border-top: 1px solid var(--mp-line); }
.wb-module summary, .wb-faq__list summary { display: flex; align-items: center; gap: 18px; padding: 21px 4px; list-style: none; cursor: pointer; }
.wb-module summary::-webkit-details-marker, .wb-faq__list summary::-webkit-details-marker { display: none; }
.wb-module summary:focus-visible, .wb-faq__list summary:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 3px; border-radius: 4px; }
.wb-module__number { color: #aeb5d3; font-size: 10px; }
.wb-module h3 { margin: 0; color: #f1f2ff; font-weight: 500; letter-spacing: -.02em; font-size: 17px; }
.wb-module__plus { position: relative; flex: 0 0 20px; height: 20px; margin-left: auto; }
.wb-module__plus::before, .wb-module__plus::after { content: ''; position: absolute; top: 9px; left: 4px; width: 12px; height: 1px; background: var(--wb-accent); transition: transform .2s; }
.wb-module__plus::after { transform: rotate(90deg); }
.wb-module[open] .wb-module__plus::after { transform: rotate(0); }
.wb-module[open] h3, .wb-module summary:hover h3 { color: var(--wb-accent); }
.wb-module__body { padding: 0 30px 24px; }
.wb-module__body p { margin: 0 0 14px; color: #c5cee3; font-size: 13px; }
.wb-module__body ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.wb-module__body li { position: relative; padding-left: 16px; color: #d6deef; font-size: 11px; line-height: 1.7; }
.wb-module__body li::before { position: absolute; content: ''; left: 0; top: .65em; width: 4px; height: 4px; border-radius: 50%; background: var(--wb-accent); }
.wb-module[open] .wb-module__body { animation: wb-content-in .25s both; }
.wb-portal { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; padding: 58px 0; border-top: 1px solid var(--mp-line); }
.wb-portal > div:first-child > p { max-width: 500px; margin: 20px 0; font-size: 13px; }
.wb-portal__links { border-top: 1px solid var(--mp-line); }
.wb-portal__links a { display: grid; grid-template-columns: 1fr auto; gap: 8px 15px; align-items: center; padding: 17px 5px; border-bottom: 1px solid var(--mp-line); transition: padding .2s,color .2s; }
.wb-portal__links a:hover { padding-inline: 11px; color: var(--wb-accent); }
.wb-portal__links a > span { grid-column: 1; color: #aab3cf; font-size: 8px; letter-spacing: .1em; }
.wb-portal__links a > strong { grid-column: 1; font-size: 14px; font-weight: 500; }
.wb-portal__links a > i { grid-column: 2; grid-row: 1 / span 2; color: var(--wb-accent); font-size: 18px; font-style: normal; }
.wb-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 66px; padding: 58px 0; border-top: 1px solid var(--mp-line); }
.wb-faq__list { border-top: 1px solid var(--mp-line); }
.wb-faq__list details { border-bottom: 1px solid var(--mp-line); }
.wb-faq__list summary { justify-content: space-between; font-size: 13px; color: #eef0fc; }
.wb-faq__list summary span { color: var(--wb-accent); font-size: 19px; }
.wb-faq__list p { margin: 0; padding: 0 32px 20px 4px; font-size: 12px; }
.wb-cta { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 38px; border: 1px solid #c5c1ff32; border-radius: 18px; background: radial-gradient(ellipse at top left,#9891ef12,transparent 70%); }
.wb-cta p { margin: 18px 0 0; font-size: 13px; }
.wb-related { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0 5px; color: #bdc9df; font-size: 11px; }
@keyframes wb-copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wb-product-in { from { opacity: 0; transform: translateY(32px) rotateX(6deg) rotateY(-6deg) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wb-glow-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes wb-content-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .wb-showcase:hover .wb-showcase__stage { transform: translateY(-6px) rotateX(1deg); box-shadow: 0 36px 70px -20px #050b2cb3,0 1px 0 #ffffff12 inset; } }
@media (max-width: 1050px) { .wb-hero { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 26px; } .wb-overview, .wb-features, .wb-portal, .wb-faq { gap: 36px; } .wb-showcase__note { display: none; } }
@media (max-width: 760px) {
    .mp:has(.wb) { padding-top: 28px; }
    .wb-hero { grid-template-columns: 1fr; gap: 30px; padding: 10px 0 32px; }
    .wb-brand { font-size: clamp(46px,10.5vw,68px); }
    .wb h1 { font-size: 28px; }
    .wb-showcase { padding-top: 0; }
    .wb-showcase__stage { padding: 6px; border-radius: 16px; }
    .wb-showcase__bar { padding: 7px 6px 12px; font-size: 10px; }
    .wb-showcase__image { border-radius: 10px; }
    .wb-showcase__zoom { right: 9px; bottom: 9px; padding: 8px 10px; font-size: 9px; }
    .wb-showcase figcaption { padding-top: 18px; }
    .wb-showcase__halo { inset: -25px -15px; }
    .wb-preview { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
    .wb-preview__bar { padding: 8px 12px; }
    .wb .wb-preview__bar h2 { font-size: 12px; }
    .wb-nav { flex-wrap: wrap; gap: 18px 20px; padding: 18px; }
    .wb-nav .wb-nav__cta { margin-left: 0; }
    .wb-overview, .wb-features, .wb-portal, .wb-faq { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
    .wb-features__intro { position: static; }
    .wb-features__intro p { max-width: none; }
    .wb-module summary { gap: 13px; }
    .wb-module h3 { font-size: 15px; }
    .wb-module__body { padding-left: 27px; padding-right: 5px; }
    .wb-portal__links a { padding-block: 14px; }
    .wb-cta { align-items: start; flex-direction: column; padding: 26px; gap: 25px; }
    .wb-related { flex-direction: column; gap: 16px; }
}
@media (max-width: 420px) { .wb .mp-actions { align-items: start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .wb *, .wb *::before, .wb *::after { animation: none !important; transition: none !important; } }