@view-transition{navigation:auto}
header{view-transition-name:hdr;transition:box-shadow .4s}.sc header{box-shadow:0 6px 24px rgba(11,36,71,.14)}
header .w,.lg img{transition:height .4s}.sc header .w{height:3.5rem}.sc .lg img{height:36px}
.pg{position:fixed;top:0;left:0;right:0;height:3px;z-index:9;background:linear-gradient(90deg,#1a5fa8,#00d4ff);transform-origin:left;transform:scaleX(var(--sp,0))}
.js .rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter .9s ease var(--d,0s)}
.js .rv.in,.rvf .rv{opacity:1;transform:none;filter:none}
.btn{position:relative;overflow:hidden;transition:transform .3s}.btn:hover{transform:translateY(-2px)}
.btn:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .8s}.btn:hover:after{left:140%}
.hero2{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero2 .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:-3;animation:kb 30s ease-in-out infinite alternate}
.hero2:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 16%,rgba(11,36,71,.78) 52%,rgba(11,36,71,.1))}
.hex,.hexbg:before{position:absolute;inset:-35%;z-index:-2;background:url(svg/hex-pattern.svg) center/cover;opacity:.45;animation:spin 140s linear infinite}.hexbg:before{content:"";opacity:.6}
.hexbg{position:relative;overflow:hidden;isolation:isolate}
.hero2 .w{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding-top:5.5rem;padding-bottom:6rem}
.hero2 h1{color:#fff}.hero2 p{color:#cfd9ec;font-size:1.15rem}.hero2 .bt{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.sp .wd{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);animation:wd .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .25s)}
.stage{position:relative;height:440px}
.fl{position:absolute;transform:translate3d(calc(var(--mx,0)*var(--k)*50px),calc(var(--my,0)*var(--k)*50px - var(--sy,0)*var(--k)*.12px),0);transition:transform .25s ease-out}
.fl img{width:100%;display:block;filter:drop-shadow(0 18px 28px rgba(0,212,255,.28));animation:fl 7s ease-in-out infinite}
.fl:nth-child(2n) img{animation-duration:9s;animation-delay:-3s}.fl:nth-child(3n) img{animation-duration:11s;animation-delay:-6s}
.cue{position:absolute;left:50%;bottom:1.2rem;width:2px;height:44px;background:linear-gradient(#00d4ff,transparent);animation:cue 2.2s ease-in-out infinite}
.pimg{position:relative;background:var(--navy);color:#fff;overflow:hidden;border-color:transparent}
.pimg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;animation:kb 26s ease-in-out infinite alternate}.pimg .flip{scale:-1 1}
.pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 12%,rgba(11,36,71,.5) 55%,transparent)}
.pimg .w{position:relative;z-index:1}.pimg h1{color:#fff}.pimg p{color:#cfd9ec}
.mq{overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}.mq>div{display:flex;width:max-content;animation:mq 42s linear infinite}.mq:hover>div{animation-play-state:paused}
.mq span{padding:1rem 2.2rem;font:600 .95rem Montserrat,sans-serif;color:var(--mut);white-space:nowrap}
.row{position:relative;grid-template-columns:56px minmax(0,15rem) 1fr auto;align-items:center;overflow:hidden}
.row:before,.glass:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(0,150,230,.14),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}.row:hover:before,.glass:hover:before{opacity:1}
.ico{width:56px;height:56px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.row:hover .ico{transform:rotate(-8deg) scale(1.18)}
.row h3{display:inline;justify-self:start;background:linear-gradient(var(--bl),var(--bl)) 0 100%/0 2px no-repeat;transition:background-size .5s}.row:hover h3{background-size:100% 2px}.row span{transition:transform .4s}.row:hover span{transform:translateX(6px)}
.fig{margin:0}.js .fig img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1),transform 2.2s cubic-bezier(.2,.7,.2,1)}.js .fig.in img,.rvf .fig img{clip-path:inset(0)}
.fig img{width:100%;height:auto;display:block;border-radius:6px;transform:scale(1.08);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}.fig.in img{transform:none}
.fig figcaption{font:500 .9rem Montserrat,sans-serif;color:var(--mut);padding-top:.7rem}
.dk{background:var(--navy);color:#fff}.dk p{color:#cfd9ec}.dk td{border-color:#26416d;color:#fff}.dk td:first-child{color:#9fb0cc}
.lic{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:center}
.glass{position:relative;min-height:250px;padding:2.2rem 2.4rem;background:url(svg/glass-card.svg) center/100% 100% no-repeat;overflow:hidden}
.glass td{font-size:.93rem;padding:.45rem .5rem .45rem 0}.seal{position:absolute;right:1.4rem;top:1.1rem;width:84px;height:84px;animation:spin 36s linear infinite}
.chips{display:flex;flex-wrap:wrap;gap:.7rem}.chips span{border:1px solid var(--line);padding:.55rem 1.1rem;border-radius:99px;font:500 .9rem Montserrat,sans-serif;transition:transform .3s,background .3s,border-color .3s}.chips span:hover{background:var(--soft);transform:translateY(-4px);border-color:var(--bl)}
.stp li{border-top-color:transparent;position:relative}.stp li:after{content:"";position:absolute;top:-3px;left:0;height:3px;width:100%;background:var(--bl);transform:scaleX(0);transform-origin:left;transition:transform .9s ease calc(var(--i,0)*.16s)}.stp.in li:after,.rvf .stp li:after{transform:scaleX(1)}
.bi{width:92px;height:92px;display:block;margin-bottom:.6rem;animation:fl 6s ease-in-out infinite}
.box{transition:transform .4s,box-shadow .4s}.box:hover{box-shadow:0 18px 40px rgba(11,36,71,.14)}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.2) translate(-2%,-1%)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fl{50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes wd{to{opacity:1;transform:none}}@keyframes cue{0%,100%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}}@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:820px){.hero2 .w,.lic{grid-template-columns:1fr}.stage{height:280px}.row{grid-template-columns:48px 1fr}.row p,.row span{grid-column:2}.hero2 .w{padding-top:3.5rem;padding-bottom:4rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none;filter:none}.js .fig img{clip-path:none}.sp .wd{opacity:1;transform:none}.stp li:after{transform:scaleX(1)}}
html{scroll-behavior:smooth}
.wa{position:fixed;right:calc(1.1rem + env(safe-area-inset-right,0px));bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:8;display:flex;align-items:center;gap:.6rem;text-decoration:none;view-transition-name:wa;animation:waIn .8s cubic-bezier(.2,.8,.2,1) 1.2s both}
.wa svg{order:2;width:58px;height:58px;padding:14px;border-radius:50%;background:#25d366;fill:#fff;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:transform .3s}
.wa i{position:absolute;right:0;top:0;width:58px;height:58px;border-radius:50%;border:2px solid #25d366;animation:ring 2.6s ease-out infinite;pointer-events:none}.wa i+i{animation-delay:1.3s}
.wa .wl{order:1;background:#fff;color:#0b2447;font:600 .85rem Montserrat,sans-serif;padding:.55rem .95rem;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.wa:hover .wl,.wa:focus-visible .wl{opacity:1;transform:none}.wa:hover svg{transform:scale(1.1) rotate(-8deg)}
@keyframes waIn{from{opacity:0;transform:scale(.4) translateY(24px)}}@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.wvs{position:absolute;left:0;right:0;bottom:0;height:130px;z-index:-1;pointer-events:none}
.wv{position:absolute;bottom:0;left:-6%;width:112%;height:100%}.wv.a{animation:sw 14s ease-in-out infinite alternate}.wv.b{opacity:.7;scale:-1 1;height:78%;animation:sw 19s ease-in-out infinite alternate-reverse}.wv.c{opacity:.5;height:52%;animation:sw 25s ease-in-out infinite alternate}
@keyframes sw{to{transform:translateX(5%)}}
.hero2 .fade{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--soft))}
.blend{position:relative}.blend:before,.blend:after{content:"";position:absolute;left:0;right:0;height:80px;pointer-events:none}.blend:before{top:0;background:linear-gradient(var(--bg),transparent)}.blend:after{bottom:0;background:linear-gradient(transparent,var(--soft))}
.net{position:absolute;right:-4%;top:0;height:100%;width:auto;opacity:.5;animation:fl 12s ease-in-out infinite}
.cat{display:inline-block;padding:.25rem .85rem;border:1px solid var(--sil);border-radius:99px;font:600 .75rem Montserrat,sans-serif;margin-bottom:1rem}
.meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font:500 .85rem Montserrat,sans-serif;color:#cfd9ec;margin-top:1rem}
.art{max-width:72ch}.art .lede{font-size:1.2rem;color:var(--fg)}.art h2{margin-top:2.6rem;padding-left:1rem;border-left:4px solid var(--bl)}.art h3{margin:1.6rem 0 .4rem}
.art b,.art strong{font-weight:600}.art ul{padding:0;list-style:none;margin:0 0 1.2rem}.art li{position:relative;padding:.55rem 0 .55rem 1.7rem;border-top:1px solid var(--line)}.art li:last-child{border-bottom:1px solid var(--line)}
.art li:before{content:"";position:absolute;left:.2rem;top:1.1rem;width:.6rem;height:.6rem;border-radius:2px;background:linear-gradient(135deg,var(--bl),#00d4ff);transform:rotate(45deg)}
.lead3d{float:right;width:150px;margin:0 0 1rem 1.5rem}.lead3d img{width:100%;display:block;filter:drop-shadow(0 16px 24px rgba(0,150,230,.3));animation:fl 7s ease-in-out infinite}
.take{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--bl);padding:1.2rem 1.4rem;margin:2.4rem 0 1rem}.take h3{margin-top:0}.take li:last-child{border-bottom:0}
.call{display:grid;grid-template-columns:96px 1fr;gap:1.2rem;align-items:center;background:var(--soft);border:1px solid var(--line);padding:1.1rem 1.4rem;margin:2rem 0}.call img{width:96px;animation:fl 6s ease-in-out infinite}.call h3{margin:0 0 .3rem}.call p{margin:0;color:var(--mut)}
.endcta{position:relative;margin:2.6rem 0 1.4rem;padding:2rem;border-radius:6px;overflow:hidden}.endcta h2{border:0;padding:0;margin-top:0;color:#fff}.endcta .g3{position:absolute;right:1rem;top:1rem;width:110px;opacity:.9;animation:fl 8s ease-in-out infinite}.endcta .bt{display:flex;gap:.7rem;flex-wrap:wrap}.endcta p{max-width:46ch}
.disc{font-size:.85rem;color:var(--mut)}
.toc{margin:0;padding-left:1.1rem;font:500 .9rem Montserrat,sans-serif}.toc a{text-decoration:none;color:var(--mut);display:block;padding:.3rem 0;transition:color .3s,transform .3s}.toc a:hover,.toc a.on{color:var(--bl);transform:translateX(4px)}
.bg3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.5rem}.chips button{font:500 .9rem Montserrat,sans-serif;border:1px solid var(--line);background:none;color:var(--fg);padding:.55rem 1.1rem;border-radius:99px;cursor:pointer;transition:background .3s,color .3s,transform .3s}.chips button.on,.chips button:hover{background:var(--btn);color:var(--bt);border-color:var(--btn)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;color:var(--fg);background:var(--bg);transition:transform .4s,box-shadow .4s}.card[hidden]{display:none}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,36,71,.16)}.js .card.rv.in{transition:transform .4s,box-shadow .4s}
.card .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}.card .p{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.card:hover .p{transform:scale(1.1)}
.card .t{position:absolute;left:1rem;bottom:.8rem;width:52px;height:52px;transition:transform .5s}.card:hover .t{transform:translateY(-4px) rotate(-6deg)}
.cb{padding:1.2rem 1.3rem 1.4rem}.cb h3{margin:.4rem 0 .5rem;font-size:1.05rem}.cb p{font-size:.93rem;color:var(--mut);margin:0 0 .8rem}.cat2{font:600 .72rem Montserrat,sans-serif;color:var(--bl)}.rm{font:500 .8rem Montserrat,sans-serif;color:var(--mut)}
@media(max-width:820px){.bg3{grid-template-columns:1fr}.lead3d{width:110px}.endcta .g3{display:none}.wa .wl{display:none}.call{grid-template-columns:72px 1fr}.call img{width:72px}}

.lg img{height:auto;width:230px;max-width:56vw;transition:width .4s}.lg .ld{display:none}.sc .lg img{height:auto;width:190px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lg .ll{display:none}:root:not([data-theme=light]) .lg .ld{display:block}}
:root[data-theme=dark] .lg .ll{display:none}:root[data-theme=dark] .lg .ld{display:block}
header .w{height:5rem}.sc header .w{height:4.1rem}
footer img{height:auto;width:250px;max-width:80%}
.sec{padding:3.5rem 0}.hero2 .w{padding-top:4.5rem;padding-bottom:5rem}
@media(max-width:820px){.sec{padding:2.4rem 0}.hero2 .w{padding-top:3rem;padding-bottom:3.5rem}}


  .nn-motion-container {
    width: 100%;
    max-width: 480px;
    background: radial-gradient(circle, #1B3B5F 0%, #0F2B48 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.15);
    display: inline-block;
  }

  .nn-motion-svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* 1. Bar Heights Bounce Animation */
  .nn-bar {
    transform-origin: bottom;
    animation: barPulse 4s ease-in-out infinite alternate;
  }
  .nn-bar-1 { animation-delay: 0s; }
  .nn-bar-2 { animation-delay: 0.4s; }
  .nn-bar-3 { animation-delay: 0.8s; }
  .nn-bar-4 { animation-delay: 1.2s; }

  @keyframes barPulse {
    0% { transform: scaleY(0.92); }
    100% { transform: scaleY(1.05); }
  }

  /* 2. Radar Scan Sweep Animation */
  .nn-scan-line {
    animation: radarSweep 5s linear infinite;
  }

  @keyframes radarSweep {
    0% { transform: translateX(0px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(400px); opacity: 0; }
  }

  /* 3. Glowing Node Pulse */
  .nn-node {
    animation: nodeGlow 2s ease-in-out infinite alternate;
  }
  @keyframes nodeGlow {
    0% { r: 5px; opacity: 0.8; }
    100% { r: 8px; opacity: 1; }
  }

  /* 4. Floating Badge Movement */
  .nn-floating-badge {
    animation: floatBadge 3.5s ease-in-out infinite alternate;
  }

  @keyframes floatBadge {
    0% { transform: translate(230px, 160px); }
    100% { transform: translate(230px, 148px); }
  }

  /* 5. Animated Stroke Line Draw */
  .nn-trend-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 3s ease-out forwards, lineGlow 3s ease-in-out infinite alternate 3s;
  }

  @keyframes drawLine {
    to { stroke-dashoffset: 0; }
  }

  @keyframes lineGlow {
    0% { stroke: #0072CE; }
    100% { stroke: #00D4FF; }
  }


  .nn-motion-box {
    width: 100%;
    max-width: 450px;
    background: radial-gradient(circle, #1B3B5F 0%, #0F2B48 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }

  /* Magnifying Glass Orbit/Scan Loop */
  .nn-scanner-glass {
    animation: auditScan 4s ease-in-out infinite alternate;
  }

  @keyframes auditScan {
    0% { transform: translate(0px, 0px); }
    50% { transform: translate(40px, 30px); }
    100% { transform: translate(15px, 65px); }
  }

  /* Animated Checkmark Pop */
  .nn-check-mark {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: checkPop 2.5s ease-out infinite alternate;
  }

  @keyframes checkPop {
    0%, 30% { stroke-dashoffset: 40; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }


  /* Gentle Floating Animation */
  .nn-calc-float {
    animation: calcFloat 3.5s ease-in-out infinite alternate;
  }

  @keyframes calcFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
  }

  /* Floating Coins Movement */
  .nn-coin-1 {
    animation: coinFloat1 4s ease-in-out infinite alternate;
  }
  .nn-coin-2 {
    animation: coinFloat2 3s ease-in-out infinite alternate 0.5s;
  }

  @keyframes coinFloat1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-8px, -15px) rotate(10deg); }
  }
  @keyframes coinFloat2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(10px, -12px) rotate(-10deg); }
  }

  /* Screen Pulse */
  .nn-screen-text {
    animation: textBlink 2s ease-in-out infinite alternate;
  }
  @keyframes textBlink {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
  }


  /* Blinking LED Lights */
  .nn-led-1 { animation: ledBlink 1s ease-in-out infinite alternate; }
  .nn-led-2 { animation: ledBlink 1.5s ease-in-out infinite alternate 0.3s; }

  @keyframes ledBlink {
    0% { fill: #0F2B48; opacity: 0.3; }
    100% { fill: #00D4FF; opacity: 1; }
  }

  /* Flowing Data Cable Effect */
  .nn-cable {
    animation: dataFlow 1.5s linear infinite;
  }

  @keyframes dataFlow {
    to { stroke-dashoffset: -24; }
  }

  /* Node Core Pulsing */
  .nn-node-pulse {
    animation: nodeExpand 1.8s ease-in-out infinite alternate;
  }

  @keyframes nodeExpand {
    0% { r: 4px; opacity: 0.6; }
    100% { r: 8px; opacity: 1; }
  }

.mg1{width:100%;height:auto;max-width:560px;overflow:visible}
.animate-float-logo{animation:floatLogo 6s ease-in-out infinite}@keyframes floatLogo{50%{transform:translateY(-12px) rotate(.5deg)}}
.animate-radar-sweep{transform-origin:50% 70%;animation:palmRadarSweep 12s linear infinite}@keyframes palmRadarSweep{to{transform:rotate(360deg)}}
.animate-node-1{animation:nodePulse 2s ease-in-out infinite}.animate-node-2{animation:nodePulse 2.5s ease-in-out infinite .4s}.animate-node-3{animation:nodePulse 3s ease-in-out infinite .8s}
@keyframes nodePulse{0%,100%{r:3px;opacity:.5}50%{r:5px;opacity:1}}
.animate-draw-line{stroke-dasharray:600;stroke-dashoffset:600;animation:drawPath 4s cubic-bezier(.4,0,.2,1) infinite alternate}@keyframes drawPath{to{stroke-dashoffset:0}}
.mgcard{animation:cardFloat 5s ease-in-out infinite alternate}@keyframes cardFloat{to{translate:0 -10px}}
.stage .fl{left:0;top:0;width:100%}.mgs{margin:0 0 1rem}.mgs .nn-motion-box,.mgs .nn-motion-container{max-width:100%;display:block}.card .th{aspect-ratio:5/3}