/* Naxonify case page styles (from the approved canvas design). */
body{margin:0;background:#FFFFFF}
a{color:#0866F5}a:hover{color:#03142F}
.nx{font-family:'Open Sans',sans-serif;color:#03142F;background:#FFFFFF;-webkit-font-smoothing:antialiased;overflow-x:clip}
.nx *{box-sizing:border-box}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.navy{background:#03142F;color:#FFFFFF}
.grey{background:#EEF1F5}
.label{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0866F5;margin:0}
.label::before{content:"";width:28px;height:2px;background:currentColor}
.navy .label{color:#7DB4FF}
.disp{font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.h2{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:18px 0 0}
.p{font-size:19px;line-height:1.6;color:#5B6576;margin:0}
.navy .p{color:#A9B4CC}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;font:700 16px 'Open Sans',sans-serif;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before{transform:scaleX(1)}
.b-blue{background:#0866F5;color:#FFFFFF}.b-blue::before{background:#03142F}.b-blue:hover{color:#FFFFFF}
.b-white{background:#FFFFFF;color:#03142F}.b-white::before{background:#0866F5}.b-white:hover{color:#FFFFFF}
.b-line{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}.b-line::before{background:#FFFFFF}.b-line:hover{color:#03142F}
.navl{display:flex;gap:34px;margin-left:auto}
.ddt{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#FFFFFF;text-decoration:none;font-size:15px;font-weight:600}
.ddt:hover{color:#FFFFFF}
.crumb{display:flex;gap:10px;font-size:14px;color:#A9B4CC;flex-wrap:wrap}
.crumb a{color:#FFFFFF;text-decoration:none}
.swoosh path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s cubic-bezier(.6,0,.2,1) .3s forwards}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#FFFFFF}
.tag.b{background:#0866F5}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:end}
.snap{background:#FFFFFF;color:#03142F;border-radius:28px;padding:32px;box-shadow:0 50px 100px -30px rgba(0,0,0,.6)}
.snap dl{margin:0;display:flex;flex-direction:column}
.snap div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid #E4E7EC;font-size:15px}
.snap div:first-child{border-top:0}
.snap dt{color:#5B6576;font-weight:600}
.snap dd{margin:0;font-weight:800;text-align:right}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:-64px;position:relative;z-index:3}
.rt{background:#FFFFFF;border-radius:24px;padding:32px;box-shadow:0 30px 60px -30px rgba(3,20,47,.3);transition:transform .35s,background .35s,color .35s}
.rt:hover{transform:translateY(-6px);background:#03142F;color:#FFFFFF}
.rt b{display:block;font-size:56px;font-weight:800;letter-spacing:-.045em;line-height:1}
.rt span{display:block;font-size:15px;line-height:1.5;color:#5B6576;margin-top:12px;transition:color .35s}
.rt:hover span{color:#A9B4CC}
.ba{display:flex;flex-direction:column;gap:28px;margin-top:56px}
.bar{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center}
.bar .k{font-size:16px;font-weight:700}
.trk{display:flex;flex-direction:column;gap:8px}
.ln{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700}
.ln i{display:block;height:14px;border-radius:14px;background:#C3C9D4;transform-origin:left;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}
.ln.a i{background:#0866F5;animation-delay:.25s}
.ln small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5B6576;width:56px;flex:none}
.chal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.ch{padding:28px;border-radius:22px;background:#FFFFFF;border:1.5px solid #E4E7EC}
.ch .n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#FEF3F2;color:#B42318;font-size:14px;font-weight:800}
.ch p{font-size:16px;line-height:1.55;margin:16px 0 0;font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.sticky{position:sticky;top:96px}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.15)}
.tl li{position:relative;padding:0 0 44px 76px}
.tl .d{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:#0866F5;color:#FFFFFF;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 0 0 8px #03142F}
.tl h3{font-size:22px;font-weight:800;margin:8px 0 0}
.tl p{font-size:16px;line-height:1.65;color:#A9B4CC;margin:10px 0 0}
.out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.ot{padding:32px;border-radius:24px;background:#EEF1F5}
.ot h3{font-size:22px;font-weight:800;margin:0}
.ot p{font-size:16px;line-height:1.6;color:#5B6576;margin:10px 0 0}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.rc{display:flex;flex-direction:column;justify-content:space-between;min-height:260px;padding:32px;border-radius:28px;background:#03142F;color:#FFFFFF;text-decoration:none;transition:background .35s,transform .35s}
.rc:hover{background:#0866F5;color:#FFFFFF;transform:translateY(-6px)}
.rc b{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1}
.rc small{display:block;font-size:14px;color:#A9B4CC;margin-top:8px}
.rc:hover small{color:#E3ECFF}
.rc strong{font-size:19px;font-weight:800;line-height:1.3}
.up{animation:up 1s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rv{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 25%}.ln i{animation-timeline:view();animation-range:entry 10% cover 40%;animation-timing-function:linear}}
@media (max-width:1100px){.hero,.split{grid-template-columns:minmax(0,1fr)}.res,.chal,.out,.rel{grid-template-columns:repeat(2,minmax(0,1fr))}.sticky{position:static}.h2{font-size:42px}.hd{font-size:60px !important}.bar{grid-template-columns:minmax(0,1fr);gap:10px}}
@media (max-width:640px){.wrap{padding:0 16px}.navl{display:none}.res,.chal,.out,.rel{grid-template-columns:minmax(0,1fr)}.h2{font-size:32px}.hd{font-size:40px !important}.rt b{font-size:44px}}
@media (prefers-reduced-motion:reduce){.nx *{animation:none !important}.swoosh path{stroke-dashoffset:0}}