@property --solution-window-phase{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --solution-window-strength{syntax:"<number>";inherits:false;initial-value:1}
@font-face{font-family:"Vertex Old Turkic";src:url("/assets/fonts/noto-sans-old-turkic.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
/* Enterprise services share the site's theme and section-entry animation. */
.solutions{border-top:1px solid var(--border);scroll-margin-top:100px}
.solutions .section-head{max-width:760px}
.solutions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.solution-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-m,16px);background:var(--surface);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.solution-card:hover{transform:translateY(-6px);border-color:var(--text-muted);box-shadow:0 20px 45px #0000000a}
.solution-visual{height:220px;display:grid;place-items:center;position:relative;overflow:hidden;color:var(--text);background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--text) 5%,transparent),transparent 70%);border-bottom:1px solid var(--border)}
.solution-copy{padding:28px 28px 32px}.solution-number{display:block;color:var(--text-muted);font-size:11px;letter-spacing:.18em;margin-bottom:16px;font-variant-numeric:tabular-nums}
.solution-copy h3{font-size:23px;letter-spacing:-.025em;margin:0 0 14px;color:var(--text)}
.solution-copy p{font-size:15px;line-height:1.75;color:var(--text-muted);margin:0;text-wrap:pretty}
.solutions-action{display:flex;justify-content:center;margin-top:32px}.solutions-action a{gap:16px}.solutions-action svg{width:20px;height:20px;transition:transform .25s ease}.solutions-action a:hover svg{transform:translateX(4px)}
.solution-flow{display:flex;align-items:center;width:76%;max-width:290px;direction:ltr}
.solution-flow i{width:50px;height:58px;flex:none;border:1px solid var(--border-strong,var(--text-muted));border-radius:12px;background:var(--bg);position:relative;box-shadow:0 8px 16px #00000008}
.solution-flow i:before{content:'';position:absolute;width:15px;height:11px;border:1.5px solid currentColor;border-radius:2px;left:16px;top:20px;opacity:.65}
.solution-flow i:nth-of-type(2):before{border-radius:50%;height:15px;top:18px}
.solution-flow i:last-child:before{border-width:0 0 1.5px 1.5px;width:15px;height:8px;transform:rotate(-45deg)}
.solution-flow b{flex:1;height:1px;background:var(--border-strong,var(--text-muted));position:relative}
.solution-flow b:after{content:'';position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--text);animation:solution-transfer 3s ease-in-out infinite;animation-play-state:paused}
.solution-flow b:nth-of-type(2):after{animation-delay:1.5s}
.solution-window{width:68%;height:132px;border:1px solid var(--border-strong,var(--text-muted));border-radius:10px;background:var(--bg);box-shadow:0 15px 25px #00000009;transform:perspective(700px) rotateY(calc(-10deg * cos(var(--solution-window-phase) - 45deg) * var(--solution-window-strength))) rotateX(calc(5deg * cos(var(--solution-window-phase) + 45deg) * var(--solution-window-strength)));transition:--solution-window-strength .6s cubic-bezier(.22,1,.36,1);animation:solution-window-tilt 2s linear infinite;animation-play-state:paused}
.solution-card:hover .solution-window{--solution-window-strength:0}
.solution-window>div{height:27px;border-bottom:1px solid var(--border);display:flex;gap:5px;align-items:center;padding:0 10px;direction:ltr}.solution-window i{width:4px;height:4px;border-radius:50%;background:var(--text-muted)}
.solution-window>span{display:block;margin:14px 16px 0;height:8px;background:var(--border);border-radius:3px;transform-origin:left;transform:scaleX(.82);opacity:.65;transition:transform .45s ease,opacity .45s ease}.solution-window>span:nth-of-type(1){width:38%;background:var(--text-muted)}.solution-window>span:nth-of-type(2){width:70%;transition-delay:.06s}.solution-window>span:nth-of-type(3){width:52%;transition-delay:.12s}
/* Ten nodes: two named side nodes, four above and four below. */
.solution-network{width:92%;max-width:320px;height:180px;direction:ltr}
.solution-network .network-diagram{width:100%;height:100%;overflow:visible}
.network-orbit{transform-origin:150px 90px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.network-tethers{fill:none;stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 6;animation:solution-connect 15s linear infinite;animation-play-state:paused}
.network-nodes rect,.network-hub{fill:var(--bg);stroke:var(--text-muted);stroke-width:1}
.network-nodes text{fill:var(--text);text-anchor:middle;dominant-baseline:middle;font-family:inherit;font-size:10px;font-weight:500}
.solution-card:hover .network-orbit{transform:scale(.72)}
.solution-visual.diagram-active *,.solution-visual.diagram-active *:after{animation-play-state:running}
@keyframes solution-transfer{0%{left:0;opacity:0}15%{opacity:.8}85%{opacity:.8}100%{left:100%;opacity:0}}
.solution-card:hover .solution-window>span{transform:scaleX(1.12);opacity:1}
@keyframes solution-connect{to{stroke-dashoffset:-110}}
@media(max-width:1000px){.solutions-grid{gap:14px}.solution-copy{padding:24px 20px}.solution-visual{height:180px}.solution-flow i{width:40px;height:50px}.solution-flow i:before{left:12px;top:17px}.solution-flow i:nth-of-type(2):before{top:15px}}
@media(max-width:720px){.solutions-grid{grid-template-columns:1fr}.solution-visual{height:200px}.solution-copy{padding:26px}.solutions-action a{text-align:center}.solution-flow{max-width:270px}}
@media(prefers-reduced-motion:reduce){.solution-card,.solution-window,.solutions-action svg{transition:none}.solution-card:hover{transform:none}.solution-visual *,.solution-visual *:after{animation:none!important}}
/* Icons fill only on hover; no glow, pulsing or drop shadow. */
.solution-flow i{display:grid;place-items:center;box-shadow:none}
.solution-flow i:before{content:none}
.solution-flow i svg{width:24px;height:24px;fill:transparent;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:fill .25s ease;filter:none}
.solution-card:hover .solution-flow i svg{fill:currentColor}
.solution-flow b:after{animation-duration:1.4s}
.solution-flow b:nth-of-type(2):after{animation-delay:.7s}
@media(prefers-reduced-motion:reduce){.network-orbit,.solution-flow i svg{transition:none}.solution-card:hover .network-orbit{transform:none}}

.network-nodes text.network-rune{font-family:"Vertex Old Turkic";font-size:13px;font-weight:400}
@media(prefers-reduced-motion:reduce){.solution-window>span{transition:none}}

/* Continuous elliptical tilt: no stops at corners or jump at the loop seam.
   Hover eases the tilt amplitude to zero while preserving the running phase. */
@keyframes solution-window-tilt{from{--solution-window-phase:0deg}to{--solution-window-phase:360deg}}