/* A compact, balanced capsule and the original Gogmas palette. */
.site-header {
  top: 16px;
  width: min(900px, calc(100% - 48px));
  min-height: 76px;
  padding: 9px 28px;
  gap: 38px;
  background: linear-gradient(115deg, #202c40f5, #1e293bf5);
  border-color: #b6a0ff26;
  box-shadow: 0 12px 50px #050a1840, inset 0 1px #ffffff06;
}
.site-header .brand { flex: 0 0 auto; justify-content: center; min-height: 50px; }
.site-header .wordmark { font-size: 40px; letter-spacing: -2px; }
.site-header .brand-image { position: relative; display: block; width: 165px; height: 52px; overflow: hidden; }
.site-header .brand-image img { position: absolute; width: 232px; height: auto; max-width: none; left: -28px; top: -51px; }
.site-header nav { flex: 0 1 auto; gap: 28px; }
.site-header nav a { font-size: 15px; font-weight: 650; padding-block: 10px; transition: color .2s; }
.site-header nav a::before { content: ''; position: absolute; inset: 5px -10px; background: #b395ff0a; border-radius: 14px; opacity: 0; transition: opacity .2s; }
.site-header nav a:hover::before { opacity: 1; }
.site-header nav a[aria-current]::after { height: 2px; bottom: 4px; border-radius: 2px; }

/* Footer: a real brand signature, useful navigation and the supplied contact logos. */
.site-footer {
  position: relative;
  isolation: isolate;
  padding: 58px 0 26px;
  background: linear-gradient(125deg, #19253a, #1c2138 60%, #20273d);
  border-top: 1px solid #ab92ef2c;
  overflow: hidden;
}
.site-footer::before { content: ''; position: absolute; left: 8%; top: -150px; width: 350px; height: 350px; border-radius: 50%; background: #8b5cf60c; filter: blur(45px); z-index: -1; }
.footer-layout { display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: 65px; align-items: start; }
.footer-brand .brand, .footer-brand > a { display: inline-flex; margin-bottom: 19px; }
.footer-brand .wordmark { font-size: 46px; }
.footer-brand .brand-image { position: relative; display: block; width: 165px; height: 52px; overflow: hidden; transform: scale(1.12); transform-origin: left center; }
.footer-brand .brand-image img { position: absolute; width: 232px; height: auto; max-width: none; left: -28px; top: -51px; }
.footer-brand > p { max-width: 285px; font-size: 13px; line-height: 1.85; }
.footer-brand > span { display: block; margin-top: 18px; font-size: 9px; letter-spacing: .18em; color: #a69abe; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; align-items: start; }
.footer-nav h2, .footer-nav h3, .footer-channels h2, .footer-channels h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; margin: 7px 0 17px; color: #e6def7; }
.footer-nav h2, .footer-nav h3 { grid-column: 1 / -1; }
.footer-nav > a, .footer-nav nav a { color: #aab6ce; font-size: 12px; width: fit-content; transition: color .2s, transform .2s; }
.footer-nav > a:hover, .footer-nav nav a:hover { color: #d3b8ff; transform: translateX(3px); }
.footer-nav nav { display: grid; grid-column: 1/-1; grid-template-columns: 1fr 1fr; gap: 11px 22px; }
.footer-channels { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; }
.footer-channels h2, .footer-channels h3 { margin-bottom: 10px; }
.site-footer .footer-contact { display: flex; align-items: center; justify-content: flex-start; gap: 13px; min-height: 41px; font-size: 13px; padding: 7px 10px 7px 0; border-radius: 12px; background: transparent; text-align: left; border: 1px solid transparent; color: #c6d0e3; transition: transform .22s, color .22s; }
.site-footer .footer-contact img { width: 29px; height: 29px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 7px #0003); transition: transform .3s; }
.site-footer .footer-contact:hover { color: white; transform: translateX(3px); }
.site-footer .footer-contact:hover img { transform: rotate(-9deg) scale(1.12); }
.site-footer .copy-hint { margin-left: 3px; border-color: #a88bf52b; color: #b5a4d4; font-size: 8px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; border-top: 1px solid #c2c6e316; margin-top: 38px; padding-top: 23px; }
.footer-bottom p, .footer-bottom span, .footer-bottom a, .footer-bottom small { font-size: 11px; color: #8493af; }
.footer-bottom a:hover { color: #d2b7ff; }
.footer-bottom .footer-signoff { display: inline-flex; align-items: center; gap: 8px; color: #a69abf; }
.footer-bottom .footer-signoff::before { content: ''; width: 5px; height: 5px; background: #aa84ff; border-radius: 50%; box-shadow: 0 0 10px #aa84ff70; }

/* Direct contact choices; the original supplied logos stay colorful. */
.contact-grid { gap: 24px; }
.contact-card { position: relative; overflow: hidden; text-align: left; border-color: #a78bfa29; background: linear-gradient(135deg, #263149bf, #1b2439e8); padding: 32px; box-shadow: 0 16px 40px #00000010; }
.contact-card::before { content: ''; pointer-events: none; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -90px; top: -85px; background: #9b67ff0a; transition: transform .4s, background .4s; }
.contact-card:hover::before { transform: scale(2); background: #9b67ff12; }
.contact-card > .contact-logo, .contact-card .contact-logo { width: 57px; height: 57px; object-fit: contain; margin-bottom: 22px; filter: drop-shadow(0 8px 13px #0003); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.contact-card:hover .contact-logo { transform: translateY(-5px) rotate(-8deg); }
.contact-card .service-icon:has(.contact-logo) { width: 65px; height: 65px; padding: 6px; background: transparent; border: 0; }
.contact-card .service-icon .contact-logo { margin: 0; }
.contact-card .contact-title, .contact-card h2 { font-size: 25px; }
.contact-card strong { font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.contact-page-intro { padding: 20px 0 85px; text-align: center; }
.contact-page-intro p { max-width: 610px; margin-inline: auto; font-size: 14px; }
.mail-write { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #cbb3ff; border-bottom: 1px solid #b998ff50; padding: 9px 0; font-size: 13px; transition: color .2s, border-color .2s; }
.mail-write:hover { color: white; border-color: #d2b7ff; }

/* The contact launcher is an orbit of real icons, not a floating rectangular card. */
.contact-widget { position: fixed; right: max(26px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 66px; height: 66px; display: block; z-index: 120; isolation: isolate; }
.contact-widget::before { content: ''; position: absolute; width: 215px; height: 215px; bottom: -38px; right: -38px; border-radius: 50%; background: radial-gradient(circle, #191e37c9, #191e3760 45%, transparent 72%); pointer-events: none; z-index: -1; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s; }
.contact-widget.is-open::before { opacity: 1; transform: scale(1); }
.contact-widget .contact-toggle { position: relative; z-index: 3; width: 66px; height: 66px; padding: 0; border: 1px solid #c8a7ff6b; border-radius: 50%; background: radial-gradient(circle at 25% 20%, #4d4376, #282b48 56%, #20263d); box-shadow: 0 6px 28px #080b2266, 0 0 22px #a25df52e, inset 0 1px 9px #ffffff08; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; overflow: visible; }
.contact-widget .contact-toggle:hover { transform: translateY(-3px); box-shadow: 0 8px 32px #080b2280, 0 0 26px #a25df55c; }
.contact-widget .contact-toggle:active { transform: scale(.93); }
.contact-widget .contact-toggle > img { height: 58px; width: 58px; object-fit: contain; mix-blend-mode: screen; transition: transform .45s, opacity .2s; pointer-events: none; }
.contact-widget .contact-toggle > .icon { width: 25px; height: 25px; color: #ede1ff; transition: transform .4s, opacity .2s; }
.contact-widget.is-open .contact-toggle > img, .contact-widget.is-open .contact-toggle > .icon { transform: scale(.4) rotate(-90deg); opacity: 0; }
.contact-widget .contact-orbit-ring { position: absolute; inset: -5px; border: 1px solid #ab85ed20; border-top-color: #b694ff88; border-bottom-color: #ef76c870; border-radius: inherit; pointer-events: none; animation: contact-ring-turn 12s linear infinite; }
.contact-widget .contact-close-mark { position: absolute; width: 22px; height: 22px; opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .2s, transform .4s; pointer-events: none; }
.contact-close-mark::before, .contact-close-mark::after { content: ''; position: absolute; left: 10px; top: 0; width: 2px; height: 22px; background: #e8d9ff; border-radius: 2px; }
.contact-close-mark::before { transform: rotate(45deg); }.contact-close-mark::after { transform: rotate(-45deg); }
.contact-widget.is-open .contact-close-mark { opacity: 1; transform: rotate(0) scale(1); }
.contact-widget .contact-dot { right: 2px; top: 2px; height: 10px; width: 10px; border-color: #2c2b46; background: #5dd6b1; box-shadow: 0 0 9px #5dd6b155; }
.contact-widget.is-open .contact-dot { opacity: 0; }
.contact-widget .contact-panel { position: absolute; right: 0; bottom: 0; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; backdrop-filter: none; pointer-events: none; }
.contact-widget .contact-panel > span { display: none; }
.contact-widget .contact-actions { display: contents; margin: 0; }
.contact-widget .contact-actions > a, .contact-widget .contact-actions > button { --orbit-x: 0px; --orbit-y: 0px; position: absolute; right: 4px; bottom: 4px; width: 58px; height: 58px; padding: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #313b55, #222c44); border: 1px solid #ae96e74f; box-shadow: 0 6px 20px #080c2555, inset 0 1px #ffffff0a; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(0, 0) scale(.1) rotate(-90deg); transform-origin: 50% 50%; transition: transform .56s cubic-bezier(.34,1.5,.5,1), opacity .25s ease, visibility 0s .62s, background .2s, box-shadow .2s; transition-delay: calc((2 - var(--orbit-order, 0)) * 35ms), calc((2 - var(--orbit-order, 0)) * 35ms), .62s, 0s, 0s; }
.contact-widget .contact-actions > :nth-child(1) { --orbit-x: -116px; --orbit-y: -7px; }
.contact-widget .contact-actions > :nth-child(2) { --orbit-x: -91px; --orbit-y: -86px; }
.contact-widget .contact-actions > :nth-child(3) { --orbit-x: -8px; --orbit-y: -120px; }
.contact-widget.is-open .contact-actions > a, .contact-widget.is-open .contact-actions > button { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--orbit-x), var(--orbit-y)) scale(1) rotate(0); transition-delay: calc(var(--orbit-order, 0) * 65ms), calc(var(--orbit-order, 0) * 55ms), 0s, 0s, 0s; }
.contact-widget .contact-actions img { width: 32px; height: 32px; max-width: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px #0002); }
.contact-widget .contact-actions .icon { width: 28px; height: 28px; }
.contact-widget.is-open .contact-actions img { animation: contact-orb-float 3.8s ease-in-out infinite; animation-delay: calc(var(--orbit-order, 0) * -.8s); }
.contact-widget.is-open .contact-actions > a:hover, .contact-widget.is-open .contact-actions > button:hover, .contact-widget.is-open .contact-actions > a:focus-visible, .contact-widget.is-open .contact-actions > button:focus-visible { transform: translate(var(--orbit-x), calc(var(--orbit-y) - 4px)) scale(1.1) rotate(-5deg); background: linear-gradient(145deg, #3b4563, #2a304e); box-shadow: 0 8px 25px #080c2570, 0 0 20px #9c6ef62c; }
.contact-widget .contact-orb::after { content: attr(data-contact-label); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 5px); white-space: nowrap; font-size: 10px; letter-spacing: .01em; color: #eee7ff; background: #202b42f5; border: 1px solid #b69ce637; border-radius: 7px; padding: 5px 8px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.contact-widget .contact-orb:hover::after, .contact-widget .contact-orb:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.contact-hint { position: absolute; right: 81px; bottom: 11px; width: max-content; max-width: 225px; padding: 10px 15px; background: linear-gradient(125deg, #263149ef, #292a46f5); border: 1px solid #b49df137; border-radius: 17px 17px 4px 17px; box-shadow: 0 8px 25px #050a1833; pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(10px) scale(.96); transform-origin: right center; transition: opacity .3s, transform .4s cubic-bezier(.34,1.4,.64,1), visibility 0s .4s; }
.contact-hint p { font-size: 12px; font-weight: 650; color: #ede5ff; line-height: 1.45; white-space: nowrap; transition: opacity .2s, transform .2s; }
.contact-hint > span { display: block; font-size: 9px; margin-top: 2px; color: #a7b0c8; }
.contact-widget.show-hint:not(.is-open) .contact-hint { opacity: 1; visibility: visible; transform: translateX(0) scale(1); transition-delay: 0s; }
.contact-widget.hint-changing .contact-hint p { opacity: 0; transform: translateY(-4px); }
.toast { max-width: min(620px, calc(100% - 40px)); }
@keyframes contact-ring-turn { to { transform: rotate(360deg); } }
@keyframes contact-orb-float { 0%,100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }

@media (max-width: 1000px) {
  .site-header { gap: 25px; padding-inline: 24px; }
  .site-header nav { gap: 22px; }
  .site-header nav a { font-size: 14px; }
  .footer-layout { gap: 35px; grid-template-columns: 1fr .8fr 1fr; }
  .footer-nav { column-gap: 14px; }
  .contact-card { padding: 25px; }
  .contact-card strong { font-size: 18px; }
}
@media (max-width: 760px) {
  .footer-layout { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 10px 35px; }
  .footer-brand .brand, .footer-brand > a { margin-bottom: 0; justify-self: start; }
  .footer-brand > p { font-size: 12px; }
  .footer-brand > span { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 700px) {
  .site-header { min-height: 66px; width: calc(100% - 28px); top: 12px; padding: 6px 15px 6px 22px; }
  .site-header .brand { min-height: 48px; }
  .site-header .wordmark { font-size: 37px; }
  .site-header .brand-image { width: 148px; height: 48px; }
  .site-header .brand-image img { width: 210px; left: -26px; top: -45px; }
  .site-header nav { top: 76px; padding: 17px 25px; }
  .site-header nav a { font-size: 16px; padding-block: 11px; }
  .site-header nav a[aria-current]::after { bottom: 4px; }
  .contact-card { display: grid; grid-template-columns: 51px 1fr; gap: 0 20px; padding: 25px; }
  .contact-card > .contact-logo { grid-column: 1; grid-row: 1 / 4; width: 48px; height: 48px; margin: 0; }
  .contact-card > .service-icon:has(.contact-logo) { width: 51px; height: 51px; grid-row: 1 / 4; }
  .contact-card .service-icon .contact-logo { width: 43px; height: 43px; }
  .contact-card h2, .contact-card .contact-title { font-size: 21px; grid-column: 2; }
  .contact-card strong { grid-column: 2; font-size: 18px; }
  .contact-card > span:last-child { grid-column: 2; font-size: 11px; }
  .contact-page-intro { padding-bottom: 65px; }
  .contact-page-intro p { font-size: 13px; }
  .site-footer { padding: 40px 0 107px; }
  .footer-brand .wordmark { font-size: 43px; }
  .footer-nav { gap: 12px 18px; }
  .footer-nav h2, .footer-nav h3, .footer-channels h2, .footer-channels h3 { font-size: 10px; margin-bottom: 12px; }
  .site-footer .footer-contact { font-size: 12px; gap: 10px; }
  .site-footer .footer-contact img { width: 25px; height: 25px; }
  .site-footer .copy-hint { display: none; }
  .footer-bottom { margin-top: 25px; padding-top: 23px; }
  .footer-bottom p, .footer-bottom span, .footer-bottom small { font-size: 10px; }
  .contact-widget { right: max(19px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  .contact-widget .contact-toggle { width: 58px; height: 58px; }
  .contact-widget .contact-toggle > img { width: 52px; height: 52px; }
  .contact-widget .contact-panel { width: 58px; height: 58px; }
  .contact-widget .contact-actions > a, .contact-widget .contact-actions > button { width: 54px; height: 54px; right: 2px; bottom: 2px; padding: 12px; }
  .contact-widget .contact-actions > :nth-child(1) { --orbit-x: -106px; --orbit-y: -5px; }
  .contact-widget .contact-actions > :nth-child(2) { --orbit-x: -83px; --orbit-y: -81px; }
  .contact-widget .contact-actions > :nth-child(3) { --orbit-x: -4px; --orbit-y: -112px; }
  .contact-widget .contact-actions img { width: 30px; height: 30px; }
  .contact-hint { right: 72px; bottom: 7px; max-width: calc(100vw - 120px); padding: 9px 13px; }
  .contact-hint p { font-size: 11px; }
  .contact-hint > span { font-size: 8px; }
  .toast { bottom: 95px; }
}
@media (max-width: 420px) {
  .footer-layout { grid-template-columns: 1fr 1.05fr; gap: 25px 20px; }
  .footer-brand { display: block; }
  .footer-brand .brand, .footer-brand > a { margin-bottom: 16px; }
  .footer-brand > p { max-width: 310px; }
  .footer-brand > span { margin-top: 15px; }
  .footer-nav, .footer-nav nav { grid-template-columns: 1fr; gap: 8px; }
  .footer-nav > a, .footer-nav nav a { font-size: 11px; }
  .footer-channels { gap: 5px; }
  .site-footer .footer-contact { font-size: 10px; gap: 8px; }
  .site-footer .footer-contact img { width: 24px; height: 24px; }
  .contact-card strong { font-size: 17px; }
  .contact-widget .contact-hint p { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-widget *, .contact-widget *::before, .contact-widget *::after { animation: none !important; transition: none !important; }
  .site-footer .footer-contact:hover, .site-footer .footer-contact:hover img, .contact-card:hover .contact-logo { transform: none; }
}