/* services.html — kostasz.gr */

/* Στυλ στοιχείων */
.s-1{font-family: 'Commissioner', system-ui, sans-serif !important;background: #FFFFFF !important;color: #27273D !important;min-height: 100vh !important;overflow-x: clip !important}
.s-2{position: sticky !important;top: 0 !important;z-index: 40 !important;background: rgba(255,255,255,0.94) !important;backdrop-filter: blur(12px) !important;-webkit-backdrop-filter: blur(12px) !important;border-bottom: 1px solid #EDEDF5 !important}
.s-3{max-width: 1240px !important;margin: 0 auto !important;padding: 14px 24px !important;display: flex !important;flex-wrap: wrap !important;align-items: center !important;justify-content: space-between !important;gap: 14px !important}
.s-4{display: flex !important;align-items: center !important;gap: 10px !important;text-decoration: none !important}
.s-5{width: 34px !important;height: 34px !important;border-radius: 8px !important;background: #695EFE !important;color: #FFFFFF !important;display: flex !important;align-items: center !important;justify-content: center !important;font-family: 'JetBrains Mono', monospace !important;font-weight: 700 !important;font-size: 14px !important}
.s-6{font-size: 15px !important;font-weight: 700 !important;line-height: 1.2 !important}
.s-7{font-weight: 500 !important;color: #5F5F78 !important;font-size: 13px !important}
.s-8{display: flex !important;flex-wrap: wrap !important;align-items: center !important;gap: 6px 24px !important;font-size: 15px !important;font-weight: 500 !important}
.s-9{text-decoration: none !important}
.s-10{font-weight: 800 !important;color: #5A4FE6 !important}
.s-11{display: flex !important;align-items: center !important;gap: 4px !important}
.s-12{width: 32px !important;height: 32px !important;border-radius: 50% !important;display: flex !important;align-items: center !important;justify-content: center !important;color: #5F5F78 !important;background: transparent !important;border: 1px solid #E3E3F0 !important;text-decoration: none !important}
.s-13{display: flex !important;border: 1px solid #D6D6EA !important;border-radius: 999px !important;overflow: hidden !important;padding: 2px !important}
.s-14{text-decoration: none !important;background: #161626 !important;color: #FFFFFF !important;padding: 12px 22px !important;border-radius: 999px !important;font-weight: 700 !important;font-size: 13px !important;letter-spacing: 0.04em !important;text-transform: uppercase !important}
.s-15{width: 46px !important;height: 46px !important;border-radius: 50% !important;border: 1px solid #D6D6EA !important;background: #FFFFFF !important;color: #161626 !important;align-items: center !important;justify-content: center !important;padding: 0 !important}
.s-16{flex-direction: column !important;align-items: flex-start !important;gap: 18px !important;padding: 8px 24px 26px !important;font-size: 18px !important;font-weight: 600 !important;border-top: 1px solid #EDEDF5 !important}
.s-17{padding: 20px 12px 0 !important}
.s-18{position: relative !important;border-radius: 32px !important;overflow: hidden !important;background: #161626 !important;color: #FFFFFF !important;min-height: 520px !important;display: flex !important;align-items: flex-end !important}
.s-19{position: absolute !important;inset: 0 !important;width: 100% !important;height: 100% !important;object-fit: cover !important;object-position: center 35% !important}
.s-20{position: absolute !important;inset: 0 !important;background: linear-gradient(90deg, rgba(22,22,38,0.9) 0%, rgba(22,22,38,0.55) 45%, rgba(22,22,38,0.1) 100%), linear-gradient(0deg, rgba(22,22,38,0.75) 0%, rgba(22,22,38,0) 55%) !important}
.s-21{position: relative !important;width: 100% !important;max-width: 1240px !important;margin: 0 auto !important;padding: 56px 24px !important;box-sizing: border-box !important;display: flex !important;flex-direction: column !important;gap: 18px !important}
.s-22{font-size: 13px !important;color: #C9C9DA !important}
.s-23{color: #FFFFFF !important}
.s-24{margin: 0 !important;font-size: clamp(30px, 3.6vw, 52px) !important;line-height: 1.05 !important;font-weight: 900 !important;text-transform: uppercase !important}
.s-25{margin: 0 !important;max-width: 640px !important;font-size: 18px !important;line-height: 1.6 !important;color: #E2E2EE !important}
.s-26{display: flex !important;flex-wrap: wrap !important;gap: 8px !important}
.s-27{font-size: 12px !important;font-weight: 800 !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;padding: 8px 14px !important;border-radius: 999px !important;background: rgba(255,255,255,0.14) !important;border: 1px solid rgba(255,255,255,0.25) !important}
.s-28{max-width: 1240px !important;margin: 0 auto !important;padding: 56px 24px 24px !important}
.s-29{display: flex !important;flex-wrap: wrap !important;justify-content: space-between !important;align-items: flex-end !important;gap: 16px !important;margin-bottom: 24px !important}
.s-30{margin: 0 !important;font-size: clamp(20px, 1.9vw, 26px) !important;font-weight: 900 !important;text-transform: uppercase !important}
.s-31{font-size: 15px !important;color: #5F5F78 !important}
.s-32{display: grid !important;grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)) !important;gap: 12px !important}
.s-33{display: flex !important;align-items: center !important;gap: 14px !important;padding: 10px 16px 10px 10px !important;border-radius: 20px !important;background: #F0F0FA !important;text-decoration: none !important;color: #27273D !important}
.s-34{width: 56px !important;height: 56px !important;border-radius: 14px !important;object-fit: cover !important;flex-shrink: 0 !important}
.s-35{display: flex !important;flex-direction: column !important;gap: 2px !important;flex-grow: 1 !important;min-width: 0 !important}
.s-36{font-family: 'JetBrains Mono', monospace !important;font-size: 11px !important;color: #5A4FE6 !important}
.s-37{font-size: 15px !important;font-weight: 800 !important;line-height: 1.25 !important}
.s-38{width: 34px !important;height: 34px !important;border-radius: 50% !important;background: #FFFFFF !important;display: flex !important;align-items: center !important;justify-content: center !important;flex-shrink: 0 !important}
.s-39{position: relative !important;overflow: hidden !important;background: #FFFFFF !important}
.s-40{position: relative !important;max-width: 1240px !important;margin: 0 auto !important;padding: 88px 24px !important;display: flex !important;flex-wrap: wrap !important;gap: 48px !important;align-items: flex-start !important}
.s-41{flex: 1 1 380px !important;min-width: 0 !important;display: flex !important;flex-direction: column !important;gap: 16px !important}
.s-42{border-radius: 32px !important;overflow: hidden !important;background: #161626 !important;color: #FFFFFF !important;box-shadow: 0 30px 60px -36px rgba(22,22,38,0.6) !important}
.s-43{display: flex !important;align-items: center !important;gap: 7px !important;padding: 14px 20px !important;border-bottom: 1px solid #2E2E48 !important}
.s-44{width: 10px !important;height: 10px !important;border-radius: 50% !important;background: #FF5F57 !important}
.s-45{width: 10px !important;height: 10px !important;border-radius: 50% !important;background: #FEBC2E !important}
.s-46{width: 10px !important;height: 10px !important;border-radius: 50% !important;background: #28C840 !important}
.s-47{font-family: 'JetBrains Mono', monospace !important;font-size: 12px !important;color: #8592A0 !important;margin-left: 8px !important}
.s-48{padding: 16px 0 20px !important;font-family: 'JetBrains Mono', monospace !important;font-size: 13px !important;line-height: 1.75 !important;min-height: 368px !important;box-sizing: border-box !important;overflow-x: auto !important}
.s-49{display: flex !important;white-space: pre !important}
.s-50{width: 40px !important;text-align: right !important;padding-right: 14px !important;color: #8592A0 !important;flex-shrink: 0 !important}
.s-51{display: flex !important}
.s-52{width: 40px !important;text-align: right !important;padding-right: 14px !important;color: #8592A0 !important}
.s-53{background: #695EFE !important}
.s-54{display: flex !important;flex-wrap: wrap !important;gap: 6px !important}
.s-55{font-size: 12px !important;font-weight: 600 !important;padding: 6px 12px !important;border-radius: 999px !important;background: #E4E4EF !important;color: #3A3A55 !important}
.s-56{flex: 999 1 520px !important;min-width: 0 !important;display: flex !important;flex-direction: column !important;gap: 16px !important}
.s-57{font-family: 'JetBrains Mono', monospace !important;font-size: 13px !important;color: #5A4FE6 !important}
.s-58{margin: 0 !important;font-size: clamp(22px, 2.3vw, 32px) !important;line-height: 1.1 !important;font-weight: 900 !important;text-transform: uppercase !important}
.s-59{margin: 0 !important;font-size: 18px !important;line-height: 1.6 !important;color: #3A3A55 !important;font-weight: 500 !important}
.s-60{margin: 0 !important;font-size: 16px !important;line-height: 1.75 !important;color: #27273D !important}
.s-61{display: flex !important;flex-direction: column !important;gap: 12px !important;padding-top: 4px !important}
.s-62{font-size: 12px !important;font-weight: 800 !important;letter-spacing: 0.1em !important;color: #5A4FE6 !important}
.s-63{display: flex !important;flex-wrap: wrap !important;gap: 10px !important}
.s-64{display: inline-flex !important;align-items: center !important;gap: 9px !important;height: 52px !important;padding: 0 20px !important;border-radius: 16px !important;background: #FFFFFF !important;border: 1px solid #E3E3F0 !important;color: #161626 !important;font-size: 17px !important;font-weight: 700 !important;box-shadow: 0 10px 24px -18px rgba(22,22,38,0.5) !important}
.s-65{display: grid !important;grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)) !important;gap: 16px !important}
.s-66{display: flex !important;flex-direction: column !important;gap: 8px !important;background: #F0F0FA !important;border-radius: 20px !important;padding: 22px 24px !important}
.s-67{font-family: 'JetBrains Mono', monospace !important;font-size: 12px !important;color: #5A4FE6 !important}
.s-68{font-size: 17px !important;font-weight: 800 !important;color: #161626 !important}
.s-69{font-size: 15px !important;line-height: 1.6 !important;color: #55556E !important}
.s-70{border-radius: 32px !important;overflow: hidden !important;height: 360px !important;background: #161626 !important}
.s-71{display: block !important;width: 100% !important;height: 100% !important;object-fit: cover !important}
.s-72{display: grid !important;grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;gap: 16px !important}
.s-73{font-size: 13px !important;font-weight: 800 !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;color: #5A4FE6 !important}
.s-74{margin: 0 !important;padding-left: 20px !important;font-size: 15px !important;line-height: 1.7 !important;columns: 2 240px !important;column-gap: 28px !important}
.s-75{break-inside: avoid !important;margin-bottom: 4px !important}
.s-76{flex: 1 1 100% !important;min-width: 0 !important}
.s-77{display: flex !important;flex-wrap: wrap !important;gap: 16px !important;align-items: stretch !important}
.s-78{flex: 1 1 380px !important;min-width: 0 !important;min-height: 260px !important;border-radius: 20px !important;overflow: hidden !important;background: #161626 !important;position: relative !important}
.s-79{position: absolute !important;inset: 0 !important;width: 100% !important;height: 100% !important;object-fit: cover !important}
.s-80{flex: 999 1 340px !important;min-width: 0 !important;display: flex !important;flex-direction: column !important;gap: 16px !important}
.s-81{display: block !important;font-size: 13px !important;font-weight: 800 !important;letter-spacing: 0.1em !important;color: #5A4FE6 !important;margin-bottom: 10px !important}
.s-82{margin: 0 0 8px !important;font-size: clamp(20px, 2vw, 28px) !important;line-height: 1.12 !important;font-weight: 900 !important;text-transform: uppercase !important}
.s-83{color: #695EFE !important}
.s-84{font-family: 'JetBrains Mono', monospace !important;font-size: 13px !important;font-weight: 700 !important;color: #5A4FE6 !important}
.s-85{font-size: 20px !important;font-weight: 700 !important;display: flex !important;align-items: center !important;gap: 8px !important}
.s-86{padding: 0 12px 12px !important}
.s-87{border-radius: 40px !important;background: #161626 !important;color: #FFFFFF !important;overflow: hidden !important;position: relative !important}
.s-88{max-width: 1240px !important;margin: 0 auto !important;padding: 88px 24px !important;display: flex !important;flex-wrap: wrap !important;gap: 40px !important;align-items: center !important;justify-content: space-between !important}
.s-89{font-size: 13px !important;font-weight: 700 !important;letter-spacing: 0.1em !important;color: #B9B3FF !important}
.s-90{margin: 0 !important;font-size: clamp(22px, 2.4vw, 34px) !important;line-height: 1.08 !important;font-weight: 900 !important;text-transform: uppercase !important}
.s-91{margin: 0 !important;font-size: 17px !important;line-height: 1.6 !important;color: #C9C9DA !important;max-width: 560px !important}
.s-92{flex: 1 1 320px !important;min-width: 0 !important;display: flex !important;flex-direction: column !important;gap: 12px !important}
.s-93{text-decoration: none !important;display: flex !important;justify-content: space-between !important;align-items: center !important;gap: 12px !important;background: #695EFE !important;padding: 18px 24px !important;border-radius: 999px !important;font-weight: 800 !important;font-size: 17px !important}
.s-94{text-decoration: none !important;display: flex !important;justify-content: space-between !important;align-items: center !important;gap: 12px !important;border: 1px solid rgba(255,255,255,0.35) !important;padding: 17px 24px !important;border-radius: 999px !important;font-weight: 700 !important;font-size: 16px !important}
.s-95{font-size: 14px !important;color: #C9C9DA !important;padding-left: 8px !important}
.s-96{padding: 12px !important}
.s-97{background: #F0F0FA !important;color: #27273D !important;border-radius: 40px !important;overflow: hidden !important}
.s-98{max-width: 1240px !important;margin: 0 auto !important;padding: 72px 24px 40px !important;display: grid !important;grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;gap: 40px !important}
.s-99{display: flex !important;flex-direction: column !important;gap: 16px !important;grid-column: span 1 !important}
.s-100{width: 40px !important;height: 40px !important;border-radius: 10px !important;background: #695EFE !important;color: #FFFFFF !important;display: flex !important;align-items: center !important;justify-content: center !important;font-family: 'JetBrains Mono', monospace !important;font-weight: 700 !important;font-size: 15px !important}
.s-101{font-size: 16px !important;font-weight: 800 !important;line-height: 1.2 !important}
.s-102{margin: 0 !important;font-size: 14px !important;line-height: 1.65 !important;color: #55556E !important}
.s-103{display: flex !important;gap: 8px !important}
.s-104{width: 42px !important;height: 42px !important;border-radius: 50% !important;display: flex !important;align-items: center !important;justify-content: center !important;color: #27273D !important;background: #FFFFFF !important;border: 1px solid #E3E3F0 !important;text-decoration: none !important}
.s-105{display: flex !important;flex-direction: column !important;gap: 12px !important}
.s-106{font-size: 12px !important;font-weight: 800 !important;letter-spacing: 0.1em !important;text-transform: uppercase !important;color: #5A4FE6 !important}
.s-107{text-decoration: none !important;font-size: 15px !important;color: #3A3A55 !important}
.s-108{text-decoration: none !important;font-size: 17px !important;font-weight: 800 !important;color: #27273D !important}
.s-109{text-decoration: none !important;font-size: 15px !important;font-weight: 600 !important;color: #5A4FE6 !important}
.s-110{font-size: 14px !important;line-height: 1.6 !important;color: #55556E !important}
.s-111{max-width: 1240px !important;margin: 0 auto !important;padding: 0 24px !important}
.s-112{border-top: 1px solid #DCDCEC !important;padding: 22px 0 26px !important;display: flex !important;flex-wrap: wrap !important;justify-content: space-between !important;gap: 10px !important;font-size: 13px !important;color: #5F5F78 !important}

/* Κανόνες σελίδας, εφέ, responsive */
body{margin:0}
a{color:inherit}a:hover{opacity:.85}
button{font:inherit;cursor:pointer}
.kb{animation:kzkb 12s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kzkb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,-1%)}}
.fx-clients{background:linear-gradient(rgba(22,22,38,.86),rgba(22,22,38,.86)),url(../../img/1e804e788b3a6a29a7ff61bc5a0d9cb6.jpg) center/cover fixed}
.nav-burger{display:none}
.nav-panel{display:none}
@media (max-width:960px){
.nav-links{display:none !important}
.nav-burger{display:flex !important}
.nav-panel{display:flex}
}
@media (max-width:640px){
[data-pad]{padding-top:60px !important;padding-bottom:60px !important}
.hero-h{height:520px !important}
.cs{height:470px}
}
@media (hover:none){.fx-stats,.fx-quote,.fx-contact,.fx-clients{background-attachment:scroll}}
.soc a{transition:background .3s,color .3s,border-color .3s}.soc a:hover{background:#695EFE !important;color:#FFFFFF !important;border-color:#695EFE !important;opacity:1}
.fadein{animation:kzfade .9s ease both}
@keyframes kzfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.caret{display:inline-block;width:9px;height:18px;vertical-align:-4px;animation:kzblink 1s steps(1) infinite}
@keyframes kzblink{50%{opacity:0}}
#s-ai{scroll-margin-top:72px}
.aic{transition:transform .35s,background .35s}.aic:hover{transform:translateY(-3px);background:#E8E8F8 !important}
@media (prefers-reduced-motion: reduce){.caret{animation:none}}
html{scroll-behavior:smooth}
.svrow{scroll-margin-top:72px}
.svtx>*{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.sv-in .svtx>*{opacity:1;transform:none}
.sv-in .svtx>*:nth-child(2){transition-delay:.08s}.sv-in .svtx>*:nth-child(3){transition-delay:.18s}.sv-in .svtx>*:nth-child(4){transition-delay:.26s}.sv-in .svtx>*:nth-child(5){transition-delay:.34s}.sv-in .svtx>*:nth-child(6){transition-delay:.42s}.sv-in .svtx>*:nth-child(7){transition-delay:.5s}.sv-in .svtx>*:nth-child(n+8){transition-delay:.58s}
.svmedia{opacity:1;transform:none}
.slx{translate:-45vw 0;opacity:0;transition:translate 1.1s cubic-bezier(.16,.84,.24,1),opacity .7s ease}
.slx.slx-in{translate:0 0;opacity:1}
.sv-in .svmedia{opacity:1;transform:none}
.svh::after{content:'';display:block;height:4px;width:110px;margin-top:16px;border-radius:4px;background:linear-gradient(90deg,#695EFE 0%,#B9B3FF 35%,#695EFE 60%,#3B33B8 100%);background-size:220% 100%;transform:scaleX(0);transform-origin:left center;transition:transform .9s .35s cubic-bezier(.65,0,.25,1),width .6s cubic-bezier(.65,0,.25,1)}
.sv-in .svh::after{transform:scaleX(1);animation:svshine 2.6s linear infinite}
.svrow:hover .svh::after{width:220px}
@keyframes svshine{from{background-position:110% 0}to{background-position:-110% 0}}
.svimg{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.svrow:hover .svimg{transform:scale(1.06)}
.svimg2{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.svgr-row{opacity:0;transform:translateY(30px);transition:opacity .7s .3s ease,transform .9s .3s cubic-bezier(.2,.7,.2,1)}
.sv-in .svgr-row{opacity:1;transform:none}
.ait{transition:border-color .3s,box-shadow .3s,transform .3s}.ait:hover{border-color:#695EFE !important;box-shadow:0 0 0 3px rgba(105,94,254,.25) !important;transform:translateY(-2px)}
.svgimg img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.svgimg:hover img{transform:scale(1.06)}
.svrow:hover .svimg2{transform:translate(10px,-8px)}
@media (max-width:640px){.svimg2{margin:-60px 0 0 14% !important;height:190px !important}}
.idx{position:relative;transition:background .35s,color .35s,transform .35s}
.idx::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px;background:#695EFE;transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.65,0,.25,1)}
.idx:hover,.idx:focus-visible{background:#E8E8F8 !important;color:#161626 !important;transform:translateY(-3px);opacity:1}
.idx:hover::after,.idx:focus-visible::after{transform:scaleX(1)}
.idx-a{transition:transform .35s}
.idx:hover .idx-a{transform:translateY(3px);color:#695EFE}
.chip{transition:background .3s,color .3s}
.chip:hover{background:#695EFE !important;color:#FFFFFF !important;opacity:1}
.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35}
.flow path{fill:none;stroke:#B9B3FF;stroke-width:1.4;stroke-dasharray:4 12;animation:kzflow 22s linear infinite}
.flow path:nth-child(2n){stroke-dasharray:60 18;animation-duration:30s;animation-direction:reverse}
@keyframes kzflow{to{stroke-dashoffset:-640}}
@media (prefers-reduced-motion: reduce){.kb,.fadein,.flow path{animation:none}.svimg{transition:none}html{scroll-behavior:auto}.svtx>*,.svmedia,.slx{opacity:1;transform:none;translate:none;transition:none}.svh::after{transform:none;animation:none !important}}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pc{position:relative;aspect-ratio:1200/720;margin-top:8px}
.pc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl{fill:none;stroke:#161626;stroke-width:2.5;stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke .3s}
.pc-on .pl{animation:pcdraw 1.3s cubic-bezier(.6,0,.2,1) forwards}
.pc-on .pl-1{animation-delay:.25s}.pc-on .pl-2{animation-delay:.5s}.pc-on .pl-3{animation-delay:.75s}
@keyframes pcdraw{to{stroke-dashoffset:0}}
.pc{container-type:inline-size}
.c3-wrap{--s:21cqw;position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);transform:translate(-50%,-46%);perspective:1400px}
.c3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.c3f{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 9%;box-sizing:border-box;backface-visibility:hidden;color:#FFFFFF;border:1px solid rgba(255,255,255,.18)}
.c3-n{font-family:'JetBrains Mono',monospace;font-size:calc(var(--s)*.07);opacity:.75}
.c3-t{font-size:calc(var(--s)*.105);font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em}
.c3-f{font-family:'JetBrains Mono',monospace;font-size:calc(var(--s)*.065);opacity:.8}
.c3-0{transform:rotateY(0deg) translateZ(calc(var(--s)/2));background:linear-gradient(150deg,#8E85FF,#5A4FE6)}
.c3-1{transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(150deg,#2A2A44,#161626)}
.c3-2{transform:rotateY(180deg) translateZ(calc(var(--s)/2));background:linear-gradient(150deg,#D6D6FF,#B9B3FF);color:#161626}
.c3-3{transform:rotateY(270deg) translateZ(calc(var(--s)/2));background:linear-gradient(150deg,#695EFE,#3B33B8)}
.c3-top{transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#FFFFFF,#E2E2F3);align-items:center;color:#695EFE}
.c3-top span{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:calc(var(--s)*.22)}
.c3-bot{transform:rotateX(-90deg) translateZ(calc(var(--s)/2));background:#161626}
.c3-shadow{position:absolute;left:-10%;right:-10%;bottom:-38%;height:22%;background:radial-gradient(closest-side,rgba(22,22,38,.22),transparent)}
.pb{cursor:pointer;outline:none}
.pb-on .pb-t{color:#695EFE}
.pc-a0 .pl-0,.pc-a1 .pl-1,.pc-a2 .pl-2,.pc-a3 .pl-3{stroke:#695EFE;stroke-width:3.5}
.pc-a0 .pd-0,.pc-a1 .pd-1,.pc-a2 .pd-2,.pc-a3 .pd-3{fill:#695EFE}
.ait{transition:background .3s,border-color .3s,transform .3s}.ait:hover{border-color:#695EFE;box-shadow:0 0 0 3px rgba(105,94,254,.45);transform:translateY(-2px)}
.pd{fill:#161626;stroke:#FFFFFF;stroke-width:2}
.pc-on .pd{animation:pcpop .4s .2s both}@keyframes pcpop{from{opacity:0}to{opacity:1}}
.pb{position:absolute;width:27%;display:flex;flex-direction:column;gap:8px;color:#161626;transition:transform .3s}
.pb:hover{transform:translateY(-3px)}
.pb:hover .pb-t{color:#695EFE}
.pb-0{left:0;top:2%}.pb-1{left:0;top:68%}.pb-2{right:0;top:2%}.pb-3{right:0;top:68%}
.pc:has(.pb-0:hover) .pl-0,.pc:has(.pb-1:hover) .pl-1,.pc:has(.pb-2:hover) .pl-2,.pc:has(.pb-3:hover) .pl-3{stroke:#695EFE}
@media (max-width:900px){.pc{aspect-ratio:auto;display:flex;flex-direction:column;gap:22px}.pc-lines{display:none}.c3-wrap{position:relative;left:auto;top:auto;transform:none;margin:30px auto 50px;--s:190px}.pb{position:static;width:auto;background:#F0F0FA;border-radius:22px;padding:22px}}
@media (prefers-reduced-motion: reduce){.pl{stroke-dashoffset:0;animation:none!important}.c3{transition:none}}
@media (max-width:900px){#dev-cube .pb{background:#FFFFFF}}
.svfill{align-self:stretch}
.svfill .svimg3{flex:1 1 0;aspect-ratio:auto !important;min-height:200px}
.svstack{grid-template-columns:1fr !important}
.svgr-full .svgimg{flex:1 1 100% !important;height:clamp(260px,40vw,520px)}
.svgr-full>div:last-child{flex:1 1 100% !important}
.skiplink{position:absolute;left:12px;top:12px;z-index:100;background:#161626;color:#FFFFFF;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(-200%);transition:transform .2s,opacity .2s}
.skiplink:focus{opacity:1;pointer-events:auto;transform:none}