.solution-hero { padding:170px var(--gutter) 90px; min-height:85svh; display:grid; grid-template-columns:1fr 1fr; gap:5%; align-items:center; overflow:hidden; background:radial-gradient(ellipse at 85% 25%,#fff9,transparent 55%),#e5e7eb; }
.solution-copy { position:relative; z-index:2; }
.solution-label { margin:46px 0 22px; color:var(--blue); font-size:14px; }
.solution-hero h1 { font-size:clamp(40px,4.4vw,76px); line-height:1.02; letter-spacing:-.065em; font-weight:450; margin-bottom:30px; }
.solution-copy .section-lead { font-size:18px; max-width:520px; }
.solution-copy .button { margin-top:30px; }
.solution-art { position:relative; min-width:0; min-height:480px; display:grid; place-items:center; perspective:1100px; }
.solution-art-note { position:absolute; bottom:0; left:0; right:0; font-size:10px; text-align:center; color:var(--muted); }
.solution-security { background:radial-gradient(ellipse at 75% 40%,#152c4c,#080d14 65%); color:#f2f4f8; }
.solution-security .solution-label { color:#d4b573; }
.solution-security .section-lead,.solution-security .solution-art-note { color:#b9c4d2; }
.solution-vault { position:relative; width:340px; height:340px; transform-style:preserve-3d; transform:rotateX(12deg) rotateY(-24deg) rotateZ(8deg); }
.solution-lock { position:absolute; inset:20px; border:2px solid #9daec5; border-radius:30px; display:grid; place-items:center; background:linear-gradient(130deg,#e6e9ee,#25394e 28%,#0b3d91 55%,#061b3d); box-shadow:15px 22px 0 #081b32,17px 24px 0 #a5acb3,25px 45px 75px #0009,inset 2px 2px 2px #fff; }
.solution-lock svg { width:100px; height:130px; color:#ddbd79; filter:drop-shadow(4px 5px 2px #0005); }
.solution-orbit { position:absolute; inset:-42px; border:1px solid #d4a85366; border-radius:50%; transform:rotateX(55deg) rotateY(-15deg) translateZ(30px); }
.solution-vault>i { position:absolute; width:25px; height:25px; border-radius:50%; background:radial-gradient(circle at 25% 20%,white,#c7b480 25%,#2d291e 75%); left:-25px; top:80px; }
.solution-vault>i:nth-last-child(2) { left:auto; right:-55px; top:240px; width:45px; height:45px; }
.solution-vault>i:last-child { left:220px; top:-50px; width:15px; height:15px; }
.solution-device { width:100%; max-width:540px; position:relative; transform:rotateY(-20deg) rotateX(10deg) rotateZ(-4deg); transform-style:preserve-3d; filter:drop-shadow(25px 45px 18px #18273a22); }
.device-screen { border:9px solid #171c24; border-radius:14px 14px 3px 3px; background:#f4f6f9; height:300px; overflow:hidden; box-shadow:inset 0 0 0 1px #7f8a99,9px 4px 0 #6b727b; }
.device-bar { height:26px; display:flex; gap:4px; padding:8px 10px; background:#e3e9ef; }
.device-bar i { width:5px; height:5px; border-radius:50%; background:#8898ad; }
.device-bar span { margin-left:auto; font-size:5px; letter-spacing:1px; }
.device-app { display:flex; height:100%; }
.device-side { background:#0b2142; width:52px; flex-shrink:0; padding:20px 14px; color:white; }
.device-side b { font-size:20px; }
.device-side i { display:block; height:4px; margin-top:22px; background:#a1b9d5; border-radius:2px; }
.device-board { padding:20px; width:100%; }
.device-board>span { font-size:15px; color:#173458; }
.device-chart { display:flex; height:120px; align-items:flex-end; gap:10px; padding:20px 0 0; border-bottom:1px solid #bdcad8; }
.device-chart i { height:var(--bar); flex:1; background:linear-gradient(#60a5fa,#0b3d91); border-radius:3px 3px 0 0; }
.device-chart i:last-child { background:linear-gradient(#e1c68b,#987229); }
.device-row { display:flex; gap:12px; margin-top:14px; }
.device-row i { height:30px; flex:1; border:1px solid #c5d0dd; border-radius:3px; }
.device-base { height:16px; background:linear-gradient(#f3f6f9,#838b95); margin:0 -28px; border-radius:3px 3px 50% 50%; }
.device-phone { position:absolute; right:-5px; bottom:-20px; transform:rotateY(15deg) rotateZ(11deg) translateZ(80px); width:108px; height:205px; border:6px solid #202731; border-radius:23px; background:#e9f0f7; box-shadow:6px 7px 0 #9199a3; display:flex; flex-direction:column; align-items:center; padding:24px 12px; gap:10px; }
.device-phone span { width:38px; height:38px; border-radius:50%; background:#0b3d91; color:white; text-align:center; padding-top:8px; font-size:16px; }
.device-phone i { height:5px; background:#a1b0c3; width:90%; }
.device-phone b { margin-top:auto; background:#d4a853; width:28px; height:28px; border-radius:50%; text-align:center; }
.solution-capabilities h2,.solution-process h2,.solution-work h2 { font-size:clamp(30px,3.5vw,54px); line-height:1.1; letter-spacing:-.055em; max-width:680px; }
.solution-capabilities>div { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:64px; }
.solution-capabilities article { border-top:1px solid #99a6b855; padding-top:24px; }
.solution-cap-icon { color:var(--blue); font-size:38px; }
.solution-capabilities h3 { font-size:23px; letter-spacing:-.035em; margin:22px 0 16px; }
.solution-capabilities p { font-size:15px; line-height:1.6; color:var(--muted); }
.solution-process { background:#dce1e7; }
.solution-process ol { display:grid; grid-template-columns:repeat(4,1fr); margin-top:60px; list-style:none; padding:0; }
.solution-process li { border-top:1px solid #70829a55; padding:28px 28px 0 0; }
.solution-process li>span { color:var(--blue); font-size:13px; }
.solution-process h3 { font-weight:450; font-size:25px; margin-top:30px; max-width:210px; }
.solution-work { background:#0c1119; color:white; display:flex; justify-content:space-between; align-items:center; gap:40px; }
.solution-work .button { flex-shrink:0; }
@media(prefers-reduced-motion:no-preference) { .solution-vault,.solution-device { animation:solution-breathe 8s ease-in-out infinite alternate; } }
@keyframes solution-breathe { from { translate:0 0; } to { translate:0 -12px; } }
@media(max-width:1000px) { .solution-hero { grid-template-columns:1fr; padding-top:130px; } .solution-art { min-height:400px; } .solution-device { width:85%; } .solution-capabilities>div { grid-template-columns:1fr 1fr; } .solution-process ol { grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:600px) { .solution-hero { padding-bottom:55px; } .solution-label { margin-top:28px; } .solution-hero h1 { font-size:43px; } .solution-copy .section-lead { font-size:16px; } .solution-art { min-height:320px; } .solution-device { width:82%; } .device-screen { height:205px; border-width:6px; } .device-side { width:35px; padding:16px 8px; } .device-board { padding:12px; } .device-chart { height:80px; gap:6px; } .device-row i { height:20px; } .device-phone { scale:.7; transform-origin:bottom right; right:-20px; bottom:-10px; } .solution-vault { scale:.74; } .solution-capabilities>div { gap:20px; margin-top:40px; } .solution-capabilities h3 { font-size:20px; } .solution-capabilities p { font-size:13px; } .solution-process h3 { font-size:21px; } .solution-work { align-items:flex-start; flex-direction:column; } }