:root .sig--web-morph { display: flex; container-type: inline-size; padding: clamp(16px, 4cqw, 36px) clamp(16px, 4cqw, 36px) clamp(26px, 6cqw, 50px); }
:root .sig--web-morph svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-morph .mo { --a: #2f9e8f; --b: #123c38; position: relative; flex: 1; display: flex; align-items: center; transition: opacity .45s; }
:root .sig--web-morph .mo.fade { opacity: 0; }
:root .sig--web-morph .mo__win { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
:root .sig--web-morph .mo__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #ebe8ee; }
:root .sig--web-morph .mo__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d1ccd6; }
:root .sig--web-morph .mo__url { flex: 1; margin-left: 8px; padding: 4px 10px; border-radius: 6px; background: #fff; color: #555; font: 400 11.5px/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--web-morph .mo__tag { padding: 4px 9px; border-radius: 999px; background: #3a3540; color: #fff; font: 600 10px/1 var(--f-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; transition: background .4s; }
:root .sig--web-morph .is-new .mo__tag { background: var(--v); }
:root .sig--web-morph .mo__page { display: flex; flex-direction: column; gap: clamp(6px, 1.4cqw, 12px); padding: clamp(8px, 1.8cqw, 14px); min-height: clamp(250px, 50cqw, 360px); transition: background .6s; }
:root .sig--web-morph .mo__page[data-st="old"] { background: #d4d0c8 repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 6px); }
:root .sig--web-morph .mo__page[data-st="new"] { background: #fff; }
:root .sig--web-morph .mo__nav, :root .sig--web-morph .mo__hero, :root .sig--web-morph .mo__cols, :root .sig--web-morph .mo__foot { transition: background .6s, border-radius .6s, padding .6s, box-shadow .6s, border-color .6s, filter .22s, opacity .22s, transform .5s var(--ease-out); }
:root .sig--web-morph .mid { filter: blur(6px); opacity: .35; transform: scale(.985); }
:root .sig--web-morph .mo__nav { display: flex; align-items: center; gap: 10px; padding: 5px 8px; background: linear-gradient(#f0f0f0, #a8a8a8); border: 2px outset #fff; font-family: "Times New Roman", Georgia, serif; }
:root .sig--web-morph .mo__logo { font: 700 clamp(12px, 2.2cqw, 16px)/1 "Times New Roman", Georgia, serif; color: #000080; text-shadow: 1px 1px 0 #fff; white-space: nowrap; }
:root .sig--web-morph .mo__links { display: flex; flex-wrap: wrap; gap: 2px 8px; font: 400 clamp(10px, 1.7cqw, 12px)/1.2 "Times New Roman", serif; }
:root .sig--web-morph .mo__links u { color: #0000ee; }
:root .sig--web-morph .mo__cta { display: none; }
:root .sig--web-morph .mo__hero { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px; background: linear-gradient(90deg, #000080, #1084d0); border: 3px ridge #c0c0c0; }
:root .sig--web-morph .mo__h { margin: 0; color: #ff0; font: italic 700 clamp(13px, 2.6cqw, 19px)/1.2 "Comic Sans MS", "Chalkboard SE", cursive; text-shadow: 2px 2px 0 #000; text-align: center; }
:root .sig--web-morph .mo__sub { margin: 4px 0 0; color: #fff; font: 400 clamp(9px, 1.5cqw, 11px)/1.3 "Times New Roman", serif; text-align: center; }
:root .sig--web-morph .mo__btn { display: none; }
:root .sig--web-morph .mo__img { position: relative; width: clamp(70px, 16cqw, 120px); aspect-ratio: 4 / 3; overflow: hidden; border: 3px inset #c0c0c0; background: repeating-conic-gradient(#bbb 0 25%, #eee 0 50%) 0 0 / 12px 12px; transition: all .6s var(--ease-out); }
:root .sig--web-morph .mo__img i, :root .sig--web-morph .mo__img b { position: absolute; border-radius: 50%; opacity: 0; transition: opacity .6s .2s, transform .9s .2s var(--ease-out); transform: translateY(20%); }
:root .sig--web-morph .mo__img i { left: -10%; right: 25%; bottom: -45%; height: 90%; background: var(--a); }
:root .sig--web-morph .mo__img b { left: 40%; right: -20%; bottom: -55%; height: 100%; background: color-mix(in srgb, var(--b) 70%, var(--a)); }
:root .sig--web-morph .mo__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #808080; background: #fff; }
:root .sig--web-morph .mo__c { display: grid; gap: 4px; align-content: start; padding: 0 0 8px; border-right: 1px solid #808080; transition: all .6s var(--ease-out); }
:root .sig--web-morph .mo__c:last-child { border-right: 0; }
:root .sig--web-morph .mo__c b { padding: 3px 6px; background: #000080; color: #fff; font: 700 clamp(9.5px, 1.6cqw, 11.5px)/1.2 Arial, sans-serif; text-transform: uppercase; }
:root .sig--web-morph .mo__c i { height: 5px; margin: 0 6px; background: #b8b8b8; }
:root .sig--web-morph .mo__c i + i { width: 60%; }
:root .sig--web-morph .mo__ci { display: none; }
:root .sig--web-morph .mo__foot { margin: 0; color: #707070; font: 400 clamp(9px, 1.4cqw, 10.5px)/1.2 "Times New Roman", serif; text-align: center; }
:root .sig--web-morph .mo__nav.nw { padding: 4px 4px 10px; background: #fff; border: 0; border-bottom: 1px solid #eee; border-radius: 0; }
:root .sig--web-morph .nw .mo__logo { color: var(--b); font-family: var(--f-display); letter-spacing: -.04em; text-shadow: none; }
:root .sig--web-morph .nw .mo__logo::before { content: ""; display: inline-block; width: .75em; height: .75em; margin-right: .35em; border-radius: 35% 50%; background: var(--a); vertical-align: -.08em; }
:root .sig--web-morph .nw .mo__links { margin-left: auto; font-family: var(--f-display); font-size: clamp(9.5px, 1.6cqw, 11.5px); }
:root .sig--web-morph .nw .mo__links u { color: #555; text-decoration: none; }
:root .sig--web-morph .nw .mo__links u:nth-child(n + 4) { display: none; }
:root .sig--web-morph .nw .mo__cta { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--b); color: #fff; font: 600 clamp(9.5px, 1.5cqw, 11px)/1 var(--f-display); white-space: nowrap; }
:root .sig--web-morph .mo__hero.nw { padding: clamp(12px, 3cqw, 24px); border: 0; border-radius: 14px; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--a) 70%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--b) 85%, var(--a)), var(--b)); }
:root .sig--web-morph .nw .mo__h { color: #fff; font: normal 700 clamp(16px, 3.8cqw, 30px)/1.05 var(--f-display); letter-spacing: -.045em; text-shadow: none; text-align: left; max-width: 15ch; }
:root .sig--web-morph .nw .mo__sub { color: color-mix(in srgb, var(--a) 25%, #fff); font-family: var(--f-body); text-align: left; margin-top: 8px; }
:root .sig--web-morph .nw .mo__btn { display: inline-block; margin-top: 12px; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--b); font: 600 clamp(9.5px, 1.6cqw, 11.5px)/1 var(--f-display); }
:root .sig--web-morph .nw .mo__img { width: clamp(90px, 24cqw, 190px); border: 0; border-radius: 12px; background: linear-gradient(180deg, #fff5dc, color-mix(in srgb, var(--a) 30%, #fff)); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
:root .sig--web-morph .nw .mo__img i, :root .sig--web-morph .nw .mo__img b { opacity: 1; transform: none; }
:root .sig--web-morph .mo__cols.nw { gap: clamp(6px, 1.4cqw, 12px); border: 0; background: transparent; }
:root .sig--web-morph .nw .mo__c { gap: 6px; padding: clamp(8px, 1.8cqw, 14px); border: 0; border-radius: 12px; background: #f6f4f8; }
:root .sig--web-morph .nw .mo__ci { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--a) 22%, #fff); color: var(--b); font-size: 14px; }
:root .sig--web-morph .nw .mo__c b { padding: 0; background: none; color: #222; font: 600 clamp(10.5px, 1.8cqw, 13px)/1.2 var(--f-display); letter-spacing: -.02em; text-transform: none; }
:root .sig--web-morph .nw .mo__c i { margin: 0; height: 5px; border-radius: 3px; background: #e2dee6; }
:root .sig--web-morph .mo__foot.nw { color: #8a8590; font-family: var(--f-body); text-align: left; }
:root .sig--web-morph .mo__scan { position: absolute; left: 0; right: 0; top: 34px; height: 60px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(161, 0, 255, .18) 70%, rgba(227, 184, 255, .9) 98%, transparent); }
:root .sig--web-morph .mo__scan.go { animation: moScan 1.6s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes moScan{ 0% { opacity: 0; transform: translateY(-40px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(clamp(230px, 48cqw, 340px)); } }
:root .sig--web-morph .mo__phone { position: absolute; right: -2%; bottom: -8%; z-index: 3; width: clamp(74px, 17cqw, 124px); aspect-ratio: 9 / 18; padding: 5px; border-radius: 18px; background: #111; box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transform: translate(20px, 30px) rotate(6deg); transition: opacity .5s, transform .9s var(--ease-out); }
:root .sig--web-morph .is-new .mo__phone { opacity: 1; transform: rotate(3deg); }
:root .sig--web-morph .mo__ps { height: 100%; display: flex; flex-direction: column; gap: 5px; padding: 8px 6px; border-radius: 13px; background: #fff; overflow: hidden; }
:root .sig--web-morph .mo__ps b { padding: 8px 6px; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--b) 85%, var(--a)), var(--b)); color: #fff; font: 700 clamp(7.5px, 1.4cqw, 10px)/1.1 var(--f-display); letter-spacing: -.03em; }
:root .sig--web-morph .mo__ps i { height: 30%; border-radius: 8px; background: linear-gradient(180deg, #fff5dc, color-mix(in srgb, var(--a) 40%, #fff)); }
:root .sig--web-morph .mo__ps span { align-self: flex-start; width: 60%; height: 12px; border-radius: 999px; background: var(--b); }
:root .sig--web-morph .mo__ps em { height: 5px; border-radius: 3px; background: #e5e1e9; }
:root .sig--web-morph .mo__ps em + em { width: 70%; }
:root .sig--web-morph .mo__seo { position: absolute; left: 4%; bottom: -6%; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: #1b1b1b; color: #fff; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .35s, transform .6s var(--ease-out); }
:root .sig--web-morph .is-seo .mo__seo { opacity: 1; transform: none; }
:root .sig--web-morph .mo__seo > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2f9e5b; font-size: 15px; }
:root .sig--web-morph .mo__seo b { display: block; font: 600 12.5px/1.2 var(--f-display); }
:root .sig--web-morph .mo__seo small { color: #cfc8d6; font-size: 11.5px; }
@container (max-width: 460px){:root .sig--web-morph .nw .mo__links, :root .sig--web-morph .mo__links u:nth-child(n + 4) { display: none; }
:root .sig--web-morph .mo__cols { grid-template-columns: 1fr 1fr; }
:root .sig--web-morph .mo__c:nth-child(3) { display: none; }
:root .sig--web-morph .mo__phone { width: 64px; }

}
:root .sig--web-morph .mo__hero { position: relative; }
:root .sig--web-morph .mo__new { position: absolute; left: -6px; top: -10px; display: grid; place-items: center; width: 44px; height: 44px; background: #ff2a2a; color: #ff0; font: italic 700 11px/1 "Comic Sans MS", cursive; clip-path: polygon(50% 0, 61% 30%, 95% 25%, 70% 50%, 95% 75%, 61% 70%, 50% 100%, 39% 70%, 5% 75%, 30% 50%, 5% 25%, 39% 30%); animation: moBlink 1s steps(2) infinite; transition: opacity .3s, transform .4s; }
@keyframes moBlink{ 50% { opacity: .35; } }
:root .sig--web-morph .nw .mo__new { opacity: 0; transform: scale(0); animation: none; }
:root .sig--web-morph .mo__uc { margin: 0; padding: 4px; text-align: center; color: #000; font: 700 clamp(9px, 1.5cqw, 11px)/1 Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; background: repeating-linear-gradient(-45deg, #ffd400 0 10px, #111 10px 20px); }
:root .sig--web-morph .mo__uc { -webkit-text-stroke: 0; text-shadow: 0 0 3px #ffd400, 0 0 3px #ffd400, 0 0 3px #ffd400; transition: opacity .3s, max-height .5s, padding .5s; max-height: 30px; overflow: hidden; }
:root .sig--web-morph .is-new .mo__uc, :root .sig--web-morph .mo__page[data-st="new"] .mo__uc { opacity: 0; max-height: 0; padding: 0; }
:root .sig--web-morph { text-align: left; }