.solutions-section{background:var(--surface)}
.solutions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.solution-card{display:flex;flex-direction:column;align-items:start;min-height:270px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.2s}
.solutions-section .solution-card{background:var(--canvas)}
.solution-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#90b8f4}
.solution-kind{display:inline-block;background:var(--soft);color:var(--blue-bright);padding:5px 10px;border-radius:7px;font-size:11px;font-weight:800;margin-bottom:24px}
.solution-card h3{font-size:20px;margin-bottom:12px}
.solution-card p{font-size:14px;color:var(--muted);line-height:1.75}
.solution-card a{display:inline-flex;align-items:center;gap:8px;color:var(--blue-bright);font-size:13px;font-weight:800;margin-top:auto}
.solution-card a svg{width:16px}
.solution-thumb{width:calc(100% + 56px);height:160px;object-fit:cover;margin:-28px -28px 24px;border-radius:var(--radius) var(--radius) 0 0}
.detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:start}
.detail-grid p:not(.eyebrow),.editorial>p{font-size:19px;color:var(--muted);line-height:2}
.detail-grid .section-link,.editorial .section-link{margin-top:20px}
.editorial{max-width:840px}
.article-card{min-height:300px}
@media(max-width:1050px){.solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr;gap:22px}}
@media(max-width:520px){.solutions-grid{grid-template-columns:1fr}.solution-card{min-height:230px}}

.visual-mark{display:block;width:218px;height:218px;max-width:none;object-fit:contain;filter:drop-shadow(0 14px 25px rgba(0,0,0,.2))}
.hero{transition:background .35s ease,color .35s ease}
.hero-visual:before,.hero-visual:after{content:none}
.hero-visual .orbit{top:50%;left:50%;width:72%;border-width:1.5px;border-color:rgba(127,170,240,.42);opacity:.16;transform-origin:center;pointer-events:none;will-change:transform,opacity;animation:questify-ring 7.5s linear infinite!important}
.hero-visual .orbit-one{animation-delay:0s!important}
.hero-visual .orbit-two{animation-delay:-2.5s!important}
.hero-visual .orbit-three{animation-delay:-5s!important}
.hero-visual .orbit-dot{--dot-x:16px;--dot-y:-20px;position:absolute;z-index:1;width:9px;height:9px;border-radius:50%;background:#77adff;box-shadow:0 0 22px rgba(94,157,255,.85);pointer-events:none;will-change:transform;animation:questify-dot-float 4.8s ease-in-out infinite!important}
.hero-visual .dot-one{top:11%;left:21%;animation-delay:0s!important}
.hero-visual .dot-two{--dot-x:-21px;--dot-y:13px;top:33%;right:6%;width:7px;height:7px;animation-delay:-1.2s!important}
.hero-visual .dot-three{--dot-x:14px;--dot-y:19px;bottom:17%;left:12%;width:6px;height:6px;animation-delay:-2.4s!important}
.hero-visual .dot-four{--dot-x:-18px;--dot-y:-15px;bottom:12%;right:17%;animation-delay:-3.6s!important}
.hero-visual .float-card{--card-x:8px;--card-y:-15px;z-index:3;white-space:nowrap;will-change:transform;animation:questify-card-float 5.6s ease-in-out infinite!important}
.hero-visual .card-two{--card-x:-7px;--card-y:13px;animation-delay:-1.8s!important}
.hero-visual .card-three{--card-x:-10px;--card-y:-12px;animation-delay:-3.6s!important;font-size:11px;letter-spacing:.07em}
html[lang=ar] .card-three{letter-spacing:0}
@keyframes questify-ring{0%{transform:translate(-50%,-50%) scale(.28);opacity:.16}12%{opacity:.6}72%{opacity:.37}100%{transform:translate(-50%,-50%) scale(1.65);opacity:.08}}
@keyframes questify-dot-float{0%,100%{transform:translate3d(0,0,0) scale(.82);opacity:.55}50%{transform:translate3d(var(--dot-x),var(--dot-y),0) scale(1.25);opacity:1}}
@keyframes questify-card-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--card-x),var(--card-y),0)}}
html[data-theme=light] .hero{background:linear-gradient(135deg,#f1f7ff 0%,#dfeeff 57%,#d2e5fb 100%);color:#10294d}
html[data-theme=light] .hero-glow{background:radial-gradient(circle at 74% 44%,rgba(80,151,241,.27),transparent 36%)}
html[data-theme=light] .hero .eyebrow{color:#285ca5}
html[data-theme=light] .hero-lead{color:#405d80}
html[data-theme=light] .hero-proof{color:#345577}
html[data-theme=light] .hero-proof svg{color:#2765b2}
html[data-theme=light] .hero .button.text{color:#1b5298}
html[data-theme=light] .hero .button.text:hover{color:#0d3975}
html[data-theme=light] .hero-bottom{color:#587da9}
html[data-theme=light] .orbit{border-color:rgba(35,94,171,.43)}
html[data-theme=light] .orbit-dot{background:#2268be;box-shadow:0 0 20px rgba(37,112,208,.55)}
html[data-theme=light] .visual-core{background:linear-gradient(140deg,#255ba1,#153764 72%);border-color:#4d86d0}
html[data-theme=light] .float-card{background:rgba(255,255,255,.88);border-color:rgba(43,104,179,.25);color:#1b4577;box-shadow:0 18px 35px rgba(42,90,156,.13)}
html[data-theme=light] .mini-line{background:linear-gradient(90deg,#2e69b9aa,#2e69b911)}
html[data-theme=light] .float-dot{background:#3178cb}
.page-hero:after{content:none}
@media(max-width:520px){.visual-mark{width:185px;height:185px}}

/* Header controls: the translation mark stays visible at mobile sizes. */
.site-header{transition:background-color .4s ease,border-color .4s ease}
.lang-button,.nav-actions .theme-button{height:42px;min-width:42px;border-radius:12px;transition:background-color .3s ease,color .3s ease,transform .3s ease}
.lang-button{padding:0 10px;gap:8px;white-space:nowrap}
.lang-button:hover,.nav-actions .theme-button:hover{background:var(--soft);transform:translateY(-2px)}
.lang-button .language-icon{display:block;width:22px;height:22px;flex:none;color:var(--blue-bright)}
.nav-actions .theme-button{position:relative;display:inline-grid;place-items:center;overflow:hidden;background:var(--soft);cursor:pointer}
.theme-icon-wrap{position:relative;display:block;width:24px;height:24px;color:var(--blue-bright)}
.theme-icon-wrap svg{position:absolute;inset:0;width:24px;height:24px;transition:transform .48s cubic-bezier(.2,.9,.25,1.2),opacity .3s ease}
.theme-sun{transform:rotate(0) scale(1);opacity:1}
.theme-moon{transform:rotate(-75deg) scale(.45);opacity:0}
html[data-theme=dark] .theme-sun{transform:rotate(95deg) scale(.45);opacity:0}
html[data-theme=dark] .theme-moon{transform:rotate(0) scale(1);opacity:1}
.theme-button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transform:scale(.2);pointer-events:none}
.theme-button.theme-activated::after{animation:theme-control-glow .48s ease-out}
@keyframes theme-control-glow{0%{opacity:.13;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:480px){.lang-button .language-icon{display:block}.lang-button{padding-inline:7px;gap:5px}.nav-actions .theme-button{min-width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.lang-button,.nav-actions .theme-button,.theme-icon-wrap svg{transition:none!important}.theme-button.theme-activated::after{animation:none!important}}
.main-nav .nav-affiliate{display:none}
@media(max-width:1050px){.main-nav .nav-affiliate{display:block}}

/* Keep both header controls in the same visual system. */
.nav-actions .lang-button{background:var(--soft);color:var(--blue-bright);font-weight:800}
.nav-actions .lang-button:hover{background:var(--line)}
.nav-actions .nav-cta{min-height:44px;border-radius:12px;padding-inline:17px;font-weight:800;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.nav-actions .nav-cta:hover{background:#174d9a;transform:translateY(-2px);box-shadow:0 10px 22px #164d9b33}
html[dir=rtl] .nav-actions .nav-cta svg{transform:scaleX(-1)}