:root{
  --petrol:#0E2A2F; --petrol-2:#133840; --petrol-3:#1C4A53;
  --signal:#12A4D9; --signal-ink:#0A79A3; --signal-soft:#DDF1F9;
  --mist:#EEF5F6; --paper:#FBFDFD; --text:#1B2B2E; --muted:#526a6e; --line:#D5E3E5;
  --on-dark:#E6F0F1; --on-dark-muted:#A7C0C4;
  --display:'Bricolage Grotesque', 'Manrope', sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:var(--signal-ink)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.btn-signal{background:var(--signal);color:#04202A}
.btn-signal:hover{background:#40BCE8}
.btn-line{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(230,240,241,.35)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--on-dark)}

/* ---------- nav ---------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:50;padding:0 16px}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(14,42,47,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 8px 8px 18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-family:var(--body);font-size:22px;font-weight:800;letter-spacing:-.3px}
.logo-text b span{color:var(--signal)}
.logo-text small{font-size:8.5px;font-weight:600;letter-spacing:3px;color:var(--on-dark-muted);margin-top:3px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.nav ul a{display:block;color:var(--on-dark);text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 14px;border-radius:999px}
.nav ul a:hover{background:rgba(255,255,255,.08)}
.nav .btn{display:inline-flex;min-height:44px;padding:0 20px;font-size:14.5px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer}
@media (max-width:920px){
  .menu-btn{display:grid;place-items:center}
  .nav-links{display:none;position:absolute;top:70px;left:16px;right:16px;background:var(--petrol);border-radius:20px;padding:12px;border:1px solid rgba(255,255,255,.1)}
  .nav-links.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch}
  .nav ul a{padding:14px 16px}
  .nav ul .btn{margin-top:6px}
}

/* ---------- hero ---------- */
.hero{background:var(--petrol);color:var(--on-dark);padding:150px 0 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(18,164,217,.16) 1px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000 40%,transparent)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:clamp(42px,6.4vw,84px);font-weight:800;letter-spacing:-.035em;line-height:.98;font-variation-settings:"opsz" 96}
.hero .lead{font-size:clamp(17px,1.6vw,19px);color:var(--on-dark-muted);max-width:30em;margin:26px 0 34px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.place{margin-top:40px;display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--on-dark-muted)}
.place i{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(18,164,217,.2)}

/* map of services */
.map{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin-left:auto}
.map svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .trace{fill:none;stroke:#2A5961;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.map .trace.on{stroke:var(--signal)}
@keyframes draw{to{stroke-dashoffset:0}}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border-radius:26%;background:var(--signal);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(18,164,217,.12),0 0 0 22px rgba(18,164,217,.06)}
.core svg{width:62%;height:62%}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;color:var(--on-dark);font:600 13.5px var(--body);opacity:0;animation:pop .45s ease-out forwards}
.node .dot{width:56px;height:56px;border-radius:18px;background:var(--petrol-2);border:1.5px solid #2A5961;display:grid;place-items:center;color:var(--signal);transition:background .2s,border-color .2s,color .2s}
.node:hover .dot{border-color:var(--signal)}
.node[aria-pressed="true"] .dot{background:var(--signal);border-color:var(--signal);color:#04202A}
.node[aria-pressed="true"] span{color:#fff}
@keyframes pop{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
.readout{max-width:540px;margin:22px 0 0 auto;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;min-height:96px}
.readout h3{font-size:22px;color:#fff;font-weight:700}
.readout p{color:var(--on-dark-muted);margin-top:6px;font-size:15.5px}
.readout a{color:var(--signal);font-weight:700;font-size:15px;text-decoration:none;display:inline-block;margin-top:10px}
.readout a:hover{text-decoration:underline}
@media (max-width:980px){
  .hero{padding-top:130px}
  .hero .wrap{grid-template-columns:1fr}
  .map,.readout{margin-left:auto;margin-right:auto}
}
@media (max-width:520px){
  .node .dot{width:44px;height:44px;border-radius:14px}
  .node .dot svg{width:20px;height:20px}
  .node{font-size:12px;gap:6px}
}

/* ---------- services bento ---------- */
.section{padding:112px 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.head h2{font-size:clamp(34px,4.6vw,58px)}
.head p{color:var(--muted);font-size:17.5px;max-width:32em}
@media (max-width:860px){.head{grid-template-columns:1fr;gap:16px}}

.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{position:relative;border-radius:28px;padding:32px;background:var(--mist);display:flex;flex-direction:column;gap:14px;scroll-margin-top:110px;overflow:hidden}
.tile h3{font-size:28px}
.tile p{color:var(--muted);max-width:34em}
.tile .ico{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--signal-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px;list-style:none;padding-left:0}
.chips li{font-size:14px;font-weight:600;background:#fff;border-radius:999px;padding:8px 14px;color:var(--text)}
.t-sec{grid-column:span 4;grid-row:span 2;background:var(--petrol);color:var(--on-dark)}
.t-sec h3{color:#fff;font-size:clamp(30px,3.4vw,44px)}
.t-sec p{color:var(--on-dark-muted);font-size:17px}
.t-sec .ico{background:var(--petrol-3);color:var(--signal)}
.t-sec .chips li{background:var(--petrol-2);color:var(--on-dark);border:1px solid #2A5961}
.t-sec .scan{position:absolute;right:-60px;top:-60px;width:300px;height:300px;opacity:.5;pointer-events:none}
.t-auto{grid-column:span 2;grid-row:span 2;background:var(--signal-soft)}
.t-erp,.t-drive,.t-solar{grid-column:span 2}
.t-net{grid-column:span 6;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.t-net .chips{margin-top:0;padding-top:0;justify-content:flex-end;max-width:520px}
.t-solar{background:#F6EFE0}
.t-solar .ico{color:#8A5A00}
@media (max-width:980px){
  .t-sec{grid-column:span 6;grid-row:auto}
  .t-auto{grid-column:span 6;grid-row:auto}
  .t-erp,.t-drive,.t-solar{grid-column:span 3}
  .t-solar{grid-column:span 6}
  .t-net{grid-template-columns:1fr;gap:14px}
  .t-net .chips{justify-content:flex-start}
}
@media (max-width:620px){.t-sec .scan{display:none}.t-erp,.t-drive{grid-column:span 6}.tile{padding:26px;border-radius:22px}}

/* ---------- approach ---------- */
.approach{background:var(--petrol);color:var(--on-dark)}
.approach .head h2{color:#fff}
.approach .head p{color:var(--on-dark-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px}
.promise{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:26px 0;border-top:1px solid rgba(255,255,255,.12)}
.promise svg{color:var(--signal)}
.promise h3{font-size:21px;color:#fff;font-weight:700;letter-spacing:-.01em}
.promise p{color:var(--on-dark-muted);margin-top:6px}
@media (max-width:760px){.split{grid-template-columns:1fr}}

.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.stages-title{font-size:clamp(24px,2.6vw,32px);color:#fff;margin:88px 0 0;letter-spacing:-.02em}
.steps .focus{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.steps .focus span{font-size:12.5px;font-weight:600;color:var(--on-dark);border:1px solid #2A5961;border-radius:999px;padding:4px 10px;line-height:1.4}
.steps li{position:relative;padding:0 24px 0 0}
.steps .n{width:44px;height:44px;border-radius:50%;background:var(--signal);color:#04202A;display:grid;place-items:center;font-weight:800;font-family:var(--display);position:relative;z-index:1}
.steps li:not(:last-child)::before{content:"";position:absolute;top:22px;left:44px;right:0;height:2px;background:linear-gradient(90deg,var(--signal),#2A5961)}
.steps h3{font-size:20px;color:#fff;margin:18px 0 6px;font-weight:700}
.steps p{color:var(--on-dark-muted);font-size:15.5px;padding-right:12px}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:28px}
  .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:18px;padding:0}
  .steps li:not(:last-child)::before{top:44px;bottom:-28px;left:21px;right:auto;width:2px;height:auto;background:#2A5961}
  .steps h3{margin:8px 0 4px}
  .steps p{grid-column:2}
}

/* ---------- sectors ---------- */
.sectors{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,42px);line-height:1.3;letter-spacing:-.02em;color:#9DB3B7;max-width:20em}
.sectors b{color:var(--petrol);font-weight:800}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
details{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:17px;color:var(--petrol)}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mist);display:grid;place-items:center;transition:transform .25s,background .2s}
details[open] summary .pm{transform:rotate(45deg);background:var(--signal-soft)}
details p{color:var(--muted);padding:0 40px 22px 0}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-card{background:var(--petrol);border-radius:36px;padding:56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;color:var(--on-dark)}
.contact-card h2{color:#fff;font-size:clamp(34px,4.4vw,54px)}
.contact-card .sub{color:var(--on-dark-muted);margin:18px 0 32px;font-size:17px}
.reach{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.reach li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.reach svg{color:var(--signal)}
.reach small{display:block;color:var(--on-dark-muted);font-size:13px}
.reach a,.reach span{color:#fff;text-decoration:none;font-weight:600}
label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14px;color:var(--on-dark)}
input,select,textarea{font:inherit;font-weight:500;color:#fff;background:var(--petrol);border:1.5px solid #2A5961;border-radius:14px;padding:13px 15px;min-height:50px}
input::placeholder,textarea::placeholder{color:#7F9DA2}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal)}
textarea{min-height:120px;resize:vertical}
.btn-wa{background:#25D366;color:#04210F}
.btn-wa:hover{background:#4BE183}
.form-error{color:#FFB4A8;font-size:14px;font-weight:600;min-height:1em}
@media (max-width:980px){.contact-card{grid-template-columns:1fr;padding:36px 24px;border-radius:28px;gap:36px}}

/* ---------- footer ---------- */
footer{padding:72px 0 32px;color:var(--muted);font-size:15px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
footer .logo{color:var(--petrol)}
footer .logo-text small{color:var(--muted)}
footer .logo-text b span{color:var(--signal-ink)}
footer h4{font-family:var(--display);color:var(--petrol);font-size:17px;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--petrol)}
.copy{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.credit a{color:var(--petrol);font-weight:700}
.credit a:hover{color:var(--signal-ink)}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

.wa-wrap{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:12px}
.wa{position:relative;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(14,42,47,.3);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s;animation:waIn .6s cubic-bezier(.2,1.4,.4,1) 1.2s both}
.wa svg{animation:wiggle 5s ease-in-out 3s infinite;transform-origin:50% 60%}
.wa::before,.wa::after{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:ring 2.4s cubic-bezier(.2,.6,.4,1) 2s infinite}
.wa::after{animation-delay:3.2s}
.wa:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 14px 36px rgba(37,211,102,.45)}
.wa .badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:#FF5A3D;color:#fff;font:800 11px var(--body);display:grid;place-items:center;border:2px solid #fff;animation:badgeIn .4s cubic-bezier(.2,1.4,.4,1) 4.2s both}
.wa-bubble{background:#fff;color:var(--petrol);font-weight:700;font-size:14.5px;padding:10px 14px 10px 16px;border-radius:16px 16px 4px 16px;box-shadow:0 10px 30px rgba(14,42,47,.18);text-decoration:none;display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(16px) scale(.9);transform-origin:right center;pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble .typing{display:inline-flex;gap:3px}
.wa-bubble .typing i{width:5px;height:5px;border-radius:50%;background:#25D366;animation:typing 1.2s infinite}
.wa-bubble .typing i:nth-child(2){animation-delay:.15s}.wa-bubble .typing i:nth-child(3){animation-delay:.3s}
.wa-close{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:50%;margin-left:2px}
.wa-close:hover{background:var(--mist)}
@keyframes waIn{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes wiggle{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-16deg)}88%{transform:rotate(14deg)}91%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}}
@keyframes badgeIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes typing{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}
@media (max-width:520px){.wa-bubble{font-size:13.5px}}


/* ---------- life ---------- */
.offer{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(18,164,217,.12);border:1px solid rgba(18,164,217,.35);color:#CFEFFB;font-weight:600;font-size:14px;text-decoration:none;margin-bottom:26px}
.offer b{background:var(--signal);color:#04202A;border-radius:999px;padding:3px 10px;font-size:12.5px}
.offer:hover{border-color:var(--signal)}
.hero h1 .rot{display:block;color:var(--signal);height:1.02em;overflow:hidden}
.hero h1 .rot span{display:inline-block}
.rot span.out{animation:rotOut .35s ease-in forwards}
.rot span.in{animation:rotIn .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rotOut{to{transform:translateY(-100%);opacity:0}}
@keyframes rotIn{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.hero .intro > *{opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero .intro > :nth-child(2){animation-delay:.08s}.hero .intro > :nth-child(3){animation-delay:.18s}.hero .intro > :nth-child(4){animation-delay:.28s}.hero .intro > :nth-child(5){animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(18,164,217,.22),transparent 60%);pointer-events:none;transform:translate(-50%,-50%);left:var(--gx,75%);top:var(--gy,45%);transition:left .6s ease-out,top .6s ease-out}
.map .flow{fill:var(--signal);opacity:.0;animation:fadein .4s 1.2s forwards}
.map .flow.hot{fill:#fff}
@keyframes fadein{to{opacity:.9}}
.core{animation:breathe 3.2s ease-in-out 1.2s infinite}
@keyframes breathe{50%{box-shadow:0 0 0 14px rgba(18,164,217,.16),0 0 0 32px rgba(18,164,217,.05)}}
.readout > *{transition:opacity .25s, transform .25s}
.readout.swap > *{opacity:0;transform:translateY(6px)}
.progress-ring{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}
.progress-ring i{width:18px;height:3px;border-radius:2px;background:#2A5961}
.progress-ring i.on{background:var(--signal)}

.ticker{background:var(--signal);color:#04202A;overflow:hidden;white-space:nowrap;padding:16px 0;font-family:var(--display);font-weight:700;font-size:20px}
.ticker .track{display:inline-flex;gap:40px;animation:marquee 38s linear infinite;padding-left:40px}
.ticker span{display:inline-flex;align-items:center;gap:40px}
.ticker span::after{content:"";width:8px;height:8px;border-radius:50%;background:#04202A}
.ticker:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .8s cubic-bezier(.2,.8,.2,1)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(18,164,217,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.tile:hover::after{opacity:1}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(14,42,47,.35)}
.tile.reveal.in:hover{transform:translateY(-4px)}
.tile .ico{transition:transform .35s}
.tile:hover .ico{transform:rotate(-8deg) scale(1.08)}
.t-sec .scan circle{transform-origin:150px 150px;animation:ping 3.6s ease-out infinite}
.t-sec .scan g circle:nth-child(2){animation-delay:1.2s}.t-sec .scan g circle:nth-child(3){animation-delay:2.4s}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.tile-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--signal-ink);background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;text-decoration:none;min-height:44px}
.t-sec .tile-cta{color:var(--signal)}
.tile-cta svg{transition:transform .25s}
.tile-cta:hover svg{transform:translateX(4px)}

.steps li .n{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.steps li:not(:last-child)::before{transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.6,0,.2,1) .2s}
.steps.in li:not(:last-child)::before{transform:none}
@media (max-width:860px){.steps li:not(:last-child)::before{transform-origin:top;transform:scaleY(0)}.steps.in li:not(:last-child)::before{transform:none}}

.cta-band{position:relative;overflow:hidden;border-radius:36px;background:var(--signal);color:#04202A;padding:56px;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.cta-band h2{font-size:clamp(30px,3.8vw,48px);color:#04202A}
.cta-band p{margin-top:12px;font-size:17.5px;color:#0B3A4A;max-width:34em}
.cta-band .btn{background:#04202A;color:#fff}
.cta-band .btn:hover{background:var(--petrol-3)}
.cta-band svg.deco{position:absolute;right:-40px;bottom:-60px;width:320px;opacity:.18;pointer-events:none}
@media (max-width:820px){.cta-band{grid-template-columns:1fr;padding:36px 26px;border-radius:28px}}

/* wizard */
.wizard{background:var(--petrol-2);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:20px;min-height:460px}
.wiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--on-dark-muted);font-weight:600}
.bar{height:6px;border-radius:6px;background:var(--petrol);overflow:hidden}
.bar i{display:block;height:100%;width:25%;background:var(--signal);border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.wstep{display:none;flex-direction:column;gap:16px;animation:stepIn .45s cubic-bezier(.2,.8,.2,1)}
.wstep.active{display:flex}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.wstep h3{font-size:26px;color:#fff;font-weight:700}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0}
.opts label{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1.5px solid #2A5961;background:var(--petrol);cursor:pointer;min-height:56px;font-size:15px;transition:border-color .2s,background .2s,transform .15s}
.opts label:hover{border-color:var(--signal)}
.opts label:active{transform:scale(.98)}
.opts label svg{flex:none;color:var(--signal)}
.opts input:checked+label{background:var(--signal);border-color:var(--signal);color:#04202A}
.opts input:checked+label svg{color:#04202A}
.opts input:focus-visible+label{outline:2px solid var(--signal);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;flex-wrap:wrap}
.back{background:none;border:0;color:var(--on-dark-muted);font:600 15px var(--body);cursor:pointer;min-height:44px;padding:0 4px}
.back:hover{color:#fff}
.back[hidden]{display:none}
.summary{font-size:14.5px;color:var(--on-dark-muted);background:var(--petrol);border-radius:14px;padding:12px 16px}
.summary b{color:#fff;font-weight:600}
.done{text-align:center;align-items:center;justify-content:center;flex:1}
.done .tick{width:72px;height:72px;border-radius:50%;background:var(--signal);display:grid;place-items:center;animation:popIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
@media (max-width:560px){.opts,.fields{grid-template-columns:1fr}.wizard{padding:20px}}




/* ---------- more life ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--signal),#5FD3F5);transform-origin:left;transform:scaleX(0);z-index:80}
.hero canvas.net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.map{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:transform}
.core svg{animation:corePulse 3.2s ease-in-out 1.2s infinite}
@keyframes corePulse{50%{transform:scale(1.06)}}
.node .dot{transition:background .2s,border-color .2s,color .2s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.node:hover .dot{transform:translateY(-4px) scale(1.06)}
.node[aria-pressed="true"] .dot{box-shadow:0 0 0 6px rgba(18,164,217,.18),0 0 24px rgba(18,164,217,.5)}

.btn{position:relative;overflow:hidden;transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.btn-signal::after,.cta-band .btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out 2s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateY(-3px)}96%{transform:translateY(1px)}}

.split-words .w{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--wi) * 55ms)}
.in .split-words .w,.split-words.in .w{opacity:1;transform:none}

.tile .ico svg{transform-origin:center}
.t-sec .ico svg{animation:shieldPulse 2.8s ease-in-out infinite}
.t-auto .ico svg{animation:homeGlow 3s ease-in-out infinite}
.t-erp .ico svg path{animation:bars 2.4s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box}
.t-drive .ico svg{animation:drive 3s ease-in-out infinite}
.t-solar .ico svg{animation:spin 14s linear infinite}
.t-net .ico svg rect{animation:blink 2.4s ease-in-out infinite}
.t-net .ico svg rect:nth-child(2){animation-delay:.4s}.t-net .ico svg rect:nth-child(3){animation-delay:.8s}
@keyframes shieldPulse{50%{transform:scale(1.15)}}
@keyframes homeGlow{50%{filter:drop-shadow(0 0 6px rgba(18,164,217,.9));transform:translateY(-2px)}}
@keyframes bars{50%{transform:scaleY(.6)}}
@keyframes drive{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.35}}

.tile .chips li{opacity:0;transform:translateY(10px) scale(.9);transition:opacity .45s,transform .5s cubic-bezier(.2,1.4,.4,1),background .2s,color .2s;transition-delay:calc(.25s + var(--ci) * 45ms)}
.tile.in .chips li{opacity:1;transform:none}
.tile .chips li:hover{background:var(--signal);color:#04202A;transition-delay:0s}
.t-sec .chips li:hover{background:var(--signal);color:#04202A}

.promise svg *{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) .2s}
.promise.in svg *{stroke-dashoffset:0}
.steps .n{transform:scale(0);transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.steps.in .n{transform:scale(1)}
.steps.in li:nth-child(2) .n{transition-delay:.25s}.steps.in li:nth-child(3) .n{transition-delay:.5s}.steps.in li:nth-child(4) .n{transition-delay:.75s}

.sectors b{color:#9DB3B7;transition:color .5s;transition-delay:calc(var(--bi) * 140ms)}
.sectors.in b{color:var(--petrol)}
.sectors b{background:linear-gradient(var(--signal),var(--signal)) no-repeat 0 92%/0% 6px;transition:color .5s,background-size .6s;transition-delay:calc(var(--bi) * 140ms)}
.sectors.in b{background-size:100% 6px}

details p{animation:none}
details[open] p{animation:faqIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.cta-band{background:linear-gradient(120deg,#12A4D9,#3CC4EE,#12A4D9);background-size:220% 220%;animation:bandShift 8s ease-in-out infinite}
@keyframes bandShift{50%{background-position:100% 50%}}
.cta-band svg.deco{animation:spin 40s linear infinite}

footer .logo svg{animation:floaty 4s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-4px)}}
.ticker .track span:hover{color:#fff}


/* ---------- motion v3 ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.js .hero .intro{visibility:hidden}
.js .hero .intro > *{animation:none;opacity:1;transform:none}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wd > span{display:inline-block;will-change:transform}
.nav{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav.hide{transform:translateY(-140%)}
.gs .btn{transition:background .2s,color .2s}
.gs .tile.reveal{opacity:1;transform:none}
.gs .cta-band svg.deco{animation:none}
.gs .steps li:not(:last-child)::before{transform:scaleX(var(--lp,0));transition:none}
.gs .steps .n{transform:scale(var(--np,0));transition:transform .55s cubic-bezier(.2,1.4,.4,1);transition-delay:0s!important}
@media (max-width:860px){.gs .steps li:not(:last-child)::before{transform:scaleY(var(--lp,0))}}
.sectors b.on{color:var(--petrol);background-size:100% 6px}
.gs .sectors b{transition-delay:0s}
.gs .sectors.in b:not(.on){color:#9DB3B7;background-size:0% 6px}
.cursor,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:95;border-radius:50%;opacity:0;transition:opacity .3s,width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .3s}
.cursor{width:36px;height:36px;border:1.5px solid var(--signal)}
.cursor-dot{width:6px;height:6px;background:var(--signal)}
.cursor.on,.cursor-dot.on{opacity:1}
.cursor.big{width:72px;height:72px;background:rgba(18,164,217,.14)}
.cursor.hidden,.cursor-dot.hidden{opacity:0}
footer{overflow:hidden}
.foot-big{font-family:var(--display);font-weight:800;font-size:clamp(64px,15vw,230px);line-height:.9;letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px #C3D6D9;margin-top:44px;user-select:none}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  .split-words .w,.tile .chips li{opacity:1!important;transform:none!important}
  .promise svg *{stroke-dashoffset:0!important}
  .steps .n{transform:none!important}
  .hero canvas.net{display:none}
  .reveal,.hero .intro > *{opacity:1!important;transform:none!important}
  .ticker .track{animation:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- services dropdown ---------- */
.has-sub{position:relative}
.nav ul.sub{list-style:none;margin:0;padding:10px;position:absolute;top:calc(100% + 12px);left:50%;width:340px;display:grid;gap:2px;background:var(--petrol);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s}
.nav ul.sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .sub a{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:14px}
.nav .sub a[aria-current="page"]{background:rgba(18,164,217,.14)}
.sub .si{width:36px;height:36px;border-radius:10px;background:var(--petrol-2);display:grid;place-items:center;color:var(--signal)}
.sub b{display:block;font-size:14.5px;color:#fff;line-height:1.3}
.sub small{display:block;font-size:12.5px;color:var(--on-dark-muted);font-weight:500;line-height:1.35}
@media (max-width:920px){
  .nav ul.sub{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 6px 10px;background:none}
  .nav ul.sub::before{display:none}
  .sub small{display:none}
  .nav .sub a{padding:8px 10px}
  .sub .si{width:30px;height:30px}
  .nav-links{max-height:calc(100vh - 100px);overflow-y:auto}
}

/* ---------- homepage tile links ---------- */
.tile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:4px}
.tile-more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(27,43,46,.3)}
.tile-more:hover{text-decoration-color:currentColor}
.t-sec .tile-more{color:#fff;text-decoration-color:rgba(255,255,255,.35)}

/* ---------- service pages ---------- */
.crumbs{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--on-dark-muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:#4F7479}
.crumbs a{color:var(--on-dark);text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.svc-hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1}
.svc-hero .lead{margin:24px 0 32px}
.ticks{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;font-weight:600;color:var(--on-dark-muted)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{color:var(--signal)}
#hero-visual{position:relative}
.illus{display:block;width:100%;max-width:520px;height:auto;margin-left:auto;overflow:visible;will-change:transform}
.illus text{font-family:var(--body)}
@media (max-width:980px){.illus{margin:8px auto 0}}

.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ocard{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:24px;background:var(--mist);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s}
.ocard.reveal{transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),box-shadow .35s,background .3s}
.gs .ocard.reveal{opacity:1;transform:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s}
.ocard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(14,42,47,.35);background:#E3F1F4}
.ocard .ok{width:42px;height:42px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--signal-ink);transition:transform .35s cubic-bezier(.2,1.4,.4,1),background .3s,color .3s}
.ocard:hover .ok{transform:rotate(-8deg) scale(1.08);background:var(--signal);color:#04202A}
.ocard h3{font-size:22px;margin-top:6px}
.ocard p{color:var(--muted)}
@media (max-width:960px){.offer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.offer-grid{grid-template-columns:1fr}.ocard{padding:24px;border-radius:20px}}

.related{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rcard{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;background:var(--mist);color:var(--text);text-decoration:none;transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.rcard:hover{background:var(--petrol);color:#fff;transform:translateY(-4px)}
.rcard .ico{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--signal-ink);transition:background .3s}
.rcard:hover .ico{background:var(--petrol-3);color:var(--signal)}
.rcard b{font-family:var(--display);font-size:19px;letter-spacing:-.01em;line-height:1.15;margin-top:6px}
.rcard small{font-size:14px;color:var(--muted);line-height:1.4}
.rcard:hover small{color:var(--on-dark-muted)}
@media (max-width:1060px){.related{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.related{grid-template-columns:1fr 1fr}.rcard{padding:18px}}

/* ---------- illustrations ---------- */
.illus .wf{animation:wf 2.4s ease-out infinite}
.illus .wf.a2{animation-delay:.3s}.illus .wf.a3{animation-delay:.6s}
@keyframes wf{0%,100%{opacity:.15}40%{opacity:1}}

/* security */
.il-sec .cam{transform-origin:90px 83px;animation:camPan 7s ease-in-out infinite}
@keyframes camPan{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(9deg)}}
.il-sec .rec{animation:recBlink 1.1s steps(1) infinite}
@keyframes recBlink{50%{opacity:0}}
.il-sec .target{animation:walkIn 7s ease-in-out infinite}
@keyframes walkIn{0%{transform:translateX(80px);opacity:0}10%{opacity:1}36%,94%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.il-sec .box{transform-box:fill-box;transform-origin:center;animation:lockOn 7s ease-in-out infinite}
@keyframes lockOn{0%,38%{opacity:0;transform:scale(1.3)}46%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
.il-sec .alert{animation:alertIn 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes alertIn{0%,46%{opacity:0;transform:translateY(18px)}54%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-8px)}}

/* home automation */
.il-home .win{fill:#1C4A53}
.il-home .w1{animation:winA 8s infinite}
.il-home .w3{animation:winB 8s infinite}
@keyframes winA{0%,10%{fill:#1C4A53}14%,92%{fill:#FFC857}97%,100%{fill:#1C4A53}}
@keyframes winB{0%,20%{fill:#1C4A53}24%,92%{fill:#FFC857}97%,100%{fill:#1C4A53}}
.il-home .cur{transform-box:fill-box;animation:curtain 8s cubic-bezier(.6,0,.2,1) infinite}
.il-home .cl{transform-origin:left center}.il-home .cr{transform-origin:right center}
@keyframes curtain{0%,30%{transform:scaleX(1)}38%,90%{transform:scaleX(.16)}97%,100%{transform:scaleX(1)}}
.il-home .knob{animation:knob 8s cubic-bezier(.2,1.4,.4,1) infinite}
.il-home .trk{animation:trk 8s infinite}
@keyframes knob{0%,12%{transform:none}16%,92%{transform:translateX(12px)}97%,100%{transform:none}}
@keyframes trk{0%,12%{fill:#2A5961}16%,92%{fill:#12A4D9}97%,100%{fill:#2A5961}}
.il-home .lockdot{animation:lockd 8s 2.4s infinite}
@keyframes lockd{0%,12%{fill:#FF5A3D}16%,92%{fill:#3DDC97}97%,100%{fill:#FF5A3D}}

/* erp */
.il-erp .ebar{transform-box:fill-box;transform-origin:center bottom;animation:barLive 2.8s ease-in-out infinite alternate}
@keyframes barLive{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.il-erp .kpi{transform-box:fill-box;transform-origin:left center;animation:kpi 3s ease-in-out infinite alternate}
@keyframes kpi{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
.il-erp .ln{stroke-dasharray:260;stroke-dashoffset:260;animation:lineDraw 5s ease-in-out infinite}
@keyframes lineDraw{0%{stroke-dashoffset:260}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
.il-erp .donut{stroke-dasharray:239;stroke-dashoffset:239;animation:donut 5s ease-in-out infinite}
@keyframes donut{0%{stroke-dashoffset:239}50%,82%{stroke-dashoffset:70}100%{stroke-dashoffset:239}}
.il-erp .menu-on{animation:menuOn 6s steps(1) infinite}
@keyframes menuOn{0%{transform:translateY(0)}33%{transform:translateY(28px)}66%{transform:translateY(56px)}}
.il-erp .toast{animation:alertIn 6s cubic-bezier(.2,.8,.2,1) infinite}

/* drive through */
.il-drive .car{animation:driveLane 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes driveLane{0%{transform:translateX(-180px)}20%,40%{transform:translateX(70px)}55%,75%{transform:translateX(300px)}100%{transform:translateX(640px)}}
.il-drive .wheel{transform-box:fill-box;transform-origin:center;animation:wheelSpin 8s linear infinite}
@keyframes wheelSpin{0%{transform:rotate(0)}20%,40%{transform:rotate(720deg)}55%,75%{transform:rotate(1080deg)}100%{transform:rotate(2160deg)}}
.il-drive .snd{animation:snd 8s infinite}
.il-drive .snd.s2{animation-name:snd2}.il-drive .snd.s3{animation-name:snd3}
@keyframes snd{0%,21%{opacity:0}23%,39%{opacity:1}41%,100%{opacity:0}}
@keyframes snd2{0%,23%{opacity:0}25%,39%{opacity:1}41%,100%{opacity:0}}
@keyframes snd3{0%,25%{opacity:0}27%,39%{opacity:1}41%,100%{opacity:0}}
.il-drive .mrow{animation:mrow 8s infinite}
@keyframes mrow{0%,22%{fill:#C9D9DB}26%,40%{fill:#12A4D9}44%,100%{fill:#C9D9DB}}
.il-drive .pickup{animation:pick 8s infinite}
@keyframes pick{0%,54%{opacity:.3}58%,74%{opacity:.95}78%,100%{opacity:.3}}
.il-drive .ready{transform-box:fill-box;transform-origin:center;animation:ready 8s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes ready{0%,56%{opacity:0;transform:translateY(10px) scale(.9)}61%,74%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-6px)}}

/* solar */
.il-solar .rays{transform-origin:90px 90px;animation:spin 16s linear infinite}
.il-solar .halo{transform-origin:90px 90px;animation:halo 3s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.2);opacity:.12}}
.il-solar .beam{stroke-dasharray:6 12;animation:beam 1.1s linear infinite}
@keyframes beam{to{stroke-dashoffset:-36}}
.il-solar .panel{animation:panelGlow 3s ease-in-out infinite}
@keyframes panelGlow{50%{fill:#46C8F0}}
.il-solar .batt{transform-box:fill-box;transform-origin:center bottom;animation:charge 6s ease-in-out infinite}
@keyframes charge{0%{transform:scaleY(.12)}85%,100%{transform:scaleY(1)}}

/* networking */
.il-net .led{animation:led 1.4s steps(1) infinite}
@keyframes led{50%{opacity:.2}}
.il-net .dev{transition:stroke .3s}

@media (prefers-reduced-motion:reduce){.illus *{animation:none!important}}

/* ---------- contact ---------- */
.contact-cta{display:flex;flex-direction:column;gap:16px;background:var(--petrol-2);border-radius:24px;padding:28px}
.contact-cta h3{font-size:26px;color:#fff;font-weight:700}
.contact-cta p{color:var(--on-dark-muted)}
.contact-cta .btn{align-self:flex-start;margin-top:6px}
.opt-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;border-radius:16px;border:1.5px solid #2A5961;background:var(--petrol);color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:border-color .2s,background .2s,transform .15s}
.opt-link svg{flex:none;color:var(--signal)}
.opt-link:hover{border-color:var(--signal);background:#163F47}
.opt-link:active{transform:scale(.98)}
.contact-hero .wrap{align-items:start}
.contact-hero .reach{margin-top:34px;max-width:460px}
.contact-hero #hero-visual{scroll-margin-top:100px}
.contact-hero .wizard{box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.related.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.steps.three{grid-template-columns:1fr}}
@media (max-width:620px){.related.six{grid-template-columns:1fr 1fr}}

/* ---------- mega menu ---------- */
.nav-inner{position:relative}
.nav .has-sub.mega{position:static}
.mega-panel{position:absolute;top:calc(100% + 12px);left:0;right:0;background:var(--petrol);border:1px solid rgba(255,255,255,.1);border-radius:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);padding:24px 26px 18px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s}
.mega-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-sub.mega:hover > .mega-panel,.has-sub.mega:focus-within > .mega-panel{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px}
.nav .mcol ul{display:grid;gap:0;flex-direction:column;align-items:stretch;list-style:none;margin:4px 0 0;padding:0 0 0 46px}
.nav .mcol a.mcat{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;font-weight:700;font-size:15px;color:#fff}
.nav .mcol a.mcat .si{width:34px;height:34px;border-radius:10px;background:var(--petrol-2);display:grid;place-items:center;color:var(--signal);flex:none}
.nav .mcol ul a{padding:5px 8px;font-weight:500;font-size:14px;color:var(--on-dark-muted);border-radius:8px}
.nav .mcol ul a:hover,.nav .mcol ul a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06)}
.nav .mcol a.mcat[aria-current="page"]{background:rgba(18,164,217,.14)}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:var(--on-dark-muted)}
.nav .mega-foot a{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--petrol-2);color:#fff;font-weight:700}
.nav .mega-foot a:hover{background:var(--petrol-3)}
@media (max-width:920px){
  .mega-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 6px 6px}
  .mega-panel::before{display:none}
  .mega-grid{grid-template-columns:1fr;gap:2px}
  .nav .mcol ul{display:none}
  .nav .mcol a.mcat{padding:8px 10px;font-size:14.5px}
  .nav .mcol a.mcat .si{width:30px;height:30px}
  .mega-foot{margin-top:8px;padding-top:8px;border:0}
  .mega-foot span{display:none}
}

/* ---------- homepage category tiles ---------- */
.tile .chips a{display:block;margin:-8px -14px;padding:8px 14px;border-radius:999px;color:inherit;text-decoration:none}
.bento .tile .ico svg,.bento .tile .ico svg *{animation:none}
.bento .t-sec .ico svg{animation:shieldPulse 2.8s ease-in-out infinite}
.bento .t-auto .ico svg{animation:homeGlow 3s ease-in-out infinite}
.bento .t-erp .ico svg{animation:homeGlow 2.6s ease-in-out infinite}
.bento .t-drive .ico svg{animation:shieldPulse 1.6s ease-in-out infinite}
.bento .t-solar .ico svg{animation:shieldPulse 2.2s ease-in-out infinite}
.bento .t-net .ico svg{animation:tiltIco 3s ease-in-out infinite}
@keyframes tiltIco{0%,70%,100%{transform:none}80%{transform:rotate(-14deg)}90%{transform:rotate(10deg)}}
.tile .count{font-size:13px;font-weight:700;color:var(--signal-ink);letter-spacing:.02em}
.t-sec .count{color:var(--signal)}

/* ---------- service cards on hub pages ---------- */
.scard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scard{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:24px;background:var(--mist);color:var(--text);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s}
.scard.reveal{transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),box-shadow .35s,background .3s}
.scard.reveal.in:hover,.scard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(14,42,47,.35);background:#E3F1F4}
.scard .ok{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--signal-ink);transition:transform .35s cubic-bezier(.2,1.4,.4,1),background .3s,color .3s}
.scard:hover .ok{transform:rotate(-8deg) scale(1.08);background:var(--signal);color:#04202A}
.scard h3{font-size:21px;margin-top:6px}
.scard p{color:var(--muted);font-size:15.5px}
.scard .go{margin-top:auto;padding-top:6px;font-weight:700;font-size:14.5px;color:var(--signal-ink);display:inline-flex;align-items:center;gap:6px}
.scard .go svg{transition:transform .25s}
.scard:hover .go svg{transform:translateX(4px)}
@media (max-width:960px){.scard-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.scard-grid{grid-template-columns:1fr}.scard{padding:22px;border-radius:20px}}

.cat-block{padding-top:72px;scroll-margin-top:100px}
.cat-block:first-child{padding-top:0}
.cat-block .head{margin-bottom:28px}
.cat-block .head h2{display:flex;align-items:center;gap:14px}
.cat-block .head h2 .si{width:52px;height:52px;border-radius:16px;background:var(--petrol);display:grid;place-items:center;color:var(--signal);flex:none}
.cat-block .head a{font-weight:700;color:var(--signal-ink)}

/* hub hero: category index */
.cat-index{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:520px;margin-left:auto}
.cat-index a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--petrol-2);border:1px solid #2A5961;color:#fff;text-decoration:none;transition:border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.cat-index a:hover{border-color:var(--signal);transform:translateX(-4px);background:#163F47}
.cat-index .si{width:44px;height:44px;border-radius:13px;background:var(--petrol);display:grid;place-items:center;color:var(--signal)}
.cat-index b{font-size:16px}
.cat-index small{display:block;color:var(--on-dark-muted);font-size:13px;font-weight:500}
.cat-index em{font-style:normal;font-weight:800;color:var(--signal);font-size:14px}
@media (max-width:980px){.cat-index{margin:8px auto 0}}
#services{overflow-x:clip}

/* ---------- client logo marquee ---------- */
.clients{background:#fff;padding:34px 0 30px;border-block:1px solid #E3ECEE;overflow:hidden}
.clients-title{text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 16px 22px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clients .ticker.logos{background:none;color:var(--text);padding:6px 0;font-size:inherit;transform:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.clients .ticker.logos .track{gap:56px;padding-left:56px;animation:marquee 46s linear infinite}
.clients .ticker.logos:hover .track{animation-play-state:paused}
.clients .lg{display:inline-flex;align-items:center;gap:12px;color:#5F7A80;filter:grayscale(1);opacity:.75;transition:opacity .3s,color .3s,filter .3s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.clients .lg::after{display:none}
.clients .lg:hover{opacity:1;filter:none;color:var(--petrol);transform:translateY(-2px)}
.clients .lg i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--petrol);color:#fff;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.clients .lg b{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.clients .lg1 i{background:var(--signal);color:#04202A;border-radius:50%}
.clients .lg2 i{background:none;border:2px solid currentColor;color:inherit}
.clients .lg2 b{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.clients .lg3 i{border-radius:50% 50% 12px 50%;background:var(--petrol-3)}
.clients .lg4 b{font-weight:600;font-style:italic}
.clients .lg:hover i{background:var(--signal);color:#04202A;border-color:var(--signal)}
@media (max-width:620px){.clients{padding:26px 0 22px}.clients .lg b{font-size:18px}.clients .lg i{width:38px;height:38px;font-size:14px}.clients .ticker.logos .track{gap:40px;padding-left:40px;animation-duration:36s}}
@media (prefers-reduced-motion:reduce){.clients .ticker.logos .track{animation:none!important;flex-wrap:wrap;justify-content:center;white-space:normal;padding:0 16px}}
/* client cards: real logos keep their own colours */
.clients .ticker.logos .track{gap:18px;padding-left:18px;align-items:center}
.clients .lg{height:84px;padding:0 22px;border-radius:18px;background:var(--mist);border:1px solid #E3ECEE;filter:none;opacity:1;color:var(--petrol)}
.clients .lg-img{padding:10px 18px;border-color:transparent;box-shadow:0 10px 24px -16px rgba(14,42,47,.5)}
.clients .lg-img[style*="#ffffff"]{border-color:#E3ECEE;box-shadow:none}
.clients .lg-img img{height:100%;width:auto;display:block}
.clients .lg:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(14,42,47,.55)}
@media (max-width:620px){.clients .lg{height:68px;padding:0 16px}.clients .lg-img{padding:8px 14px}.clients .ticker.logos .track{gap:12px;padding-left:12px}}

/* ---------- illustrations, set two ---------- */
.illus .toast{animation:alertIn 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ping2{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes pulse2{50%{opacity:.25}}
@keyframes grow2{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes dashMove{to{stroke-dashoffset:-40}}
/* signage */
.il-screens .slides{animation:slides 9s cubic-bezier(.7,0,.3,1) infinite}
@keyframes slides{0%,28%{transform:translateX(0)}33%,61%{transform:translateX(-240px)}66%,94%{transform:translateX(-480px)}100%{transform:translateX(-720px)}}
.il-screens .feed{animation:feedUp 7s linear infinite}
@keyframes feedUp{to{transform:translateY(-184px)}}
.il-screens .pub{transform-box:fill-box;transform-origin:left center;animation:pub 4s ease-in-out infinite}
@keyframes pub{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
/* tracking */
.il-tracking .pres{animation:presWalk 8s ease-in-out infinite}
@keyframes presWalk{0%,8%{transform:translateX(-120px)}45%,55%{transform:translateX(120px)}92%,100%{transform:translateX(-120px)}}
.il-tracking .ptz{transform-origin:240px 90px;animation:ptz 8s ease-in-out infinite}
@keyframes ptz{0%,8%{transform:rotate(22deg)}45%,55%{transform:rotate(-22deg)}92%,100%{transform:rotate(22deg)}}
.il-tracking .live{animation:recBlink 1.1s steps(1) infinite}
.il-tracking .frame{animation:pulse2 2s ease-in-out infinite}
/* video wall */
.il-videowall .vb{transform-box:fill-box;transform-origin:center bottom;animation:grow2 2.4s ease-in-out infinite alternate}
.il-videowall .ln{stroke-dasharray:140;animation:lineDraw2 4s ease-in-out infinite}
@keyframes lineDraw2{0%{stroke-dashoffset:140}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-140}}
.il-videowall .pin{transform-box:fill-box;transform-origin:center;animation:ping2 1.6s ease-out infinite}
.il-videowall .rec{animation:recBlink 1.1s steps(1) infinite}
.il-videowall .row{animation:pulse2 1.8s ease-in-out infinite}
.il-videowall .dial{animation:dial 5s ease-in-out infinite}
@keyframes dial{50%{stroke-dasharray:140 151}}
/* meeting */
.il-meeting .ring{opacity:0;animation:spk 8s infinite}
.il-meeting .r1{animation-delay:2s}.il-meeting .r2{animation-delay:4s}.il-meeting .r3{animation-delay:6s}
@keyframes spk{0%,24%{opacity:1}26%,100%{opacity:0}}
.il-meeting .ct{animation:ctOn 8s infinite}
.il-meeting .c1{animation-delay:2s}.il-meeting .c2{animation-delay:4s}.il-meeting .c3{animation-delay:6s}
@keyframes ctOn{0%,24%{stroke:#12A4D9;stroke-width:4}26%,100%{stroke:#2A5961;stroke-width:2}}
.il-meeting .mic{transform-box:fill-box;transform-origin:center;animation:ping2 2s ease-out infinite}
/* booking */
.il-booking .walker{animation:walker 8s ease-in-out infinite}
@keyframes walker{0%{transform:translateX(-40px)}35%,60%{transform:translateX(150px)}75%,100%{transform:translateX(150px);opacity:0}}
.il-booking .st-busy{animation:busy 8s steps(1) infinite}
@keyframes busy{0%,39%{opacity:0}40%,92%{opacity:1}93%,100%{opacity:0}}
/* touch wall */
.il-touchwall .rip{transform-box:fill-box;transform-origin:center;animation:ping2 3s ease-out infinite}
.il-touchwall .cell{animation:pulse2 4s ease-in-out infinite}
.il-touchwall .hand{animation:handTap 3s ease-in-out infinite}
@keyframes handTap{0%,100%{transform:translate(0,0)}40%{transform:translate(-14px,-22px)}50%{transform:translate(-14px,-18px)}}
/* kiosk */
.il-kiosk .tap{transform-box:fill-box;transform-origin:center;animation:ping2 2.4s ease-out infinite}
.il-kiosk .cart{transform-box:fill-box;transform-origin:center;animation:cartPop 2.4s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes cartPop{0%,30%{transform:scale(0)}40%,90%{transform:scale(1)}100%{transform:scale(0)}}
.il-kiosk .receipt{animation:receipt 7s ease-in-out infinite}
@keyframes receipt{0%,50%{transform:translateY(-50px);opacity:0}60%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
/* access */
.il-access .scan{animation:scanY 7s ease-in-out infinite}
@keyframes scanY{0%,40%{transform:translateY(0)}20%{transform:translateY(88px)}41%,100%{opacity:0}}
.il-access .led{animation:ledOk 7s steps(1) infinite}
@keyframes ledOk{0%,44%{fill:#FF5A3D}45%,90%{fill:#3DDC97}91%,100%{fill:#FF5A3D}}
.il-access .leaf{transform-box:fill-box;transform-origin:left center;animation:doorOpen 7s ease-in-out infinite}
@keyframes doorOpen{0%,46%{transform:scaleX(1)}56%,84%{transform:scaleX(.25)}94%,100%{transform:scaleX(1)}}
/* perimeter */
.il-perimeter .intruder{animation:approach 7s ease-in-out infinite}
@keyframes approach{0%{transform:translateX(520px);opacity:0}10%{opacity:1}40%,90%{transform:translateX(330px);opacity:1}100%{transform:translateX(330px);opacity:0}}
.il-perimeter .beams path{animation:dashMove 1s linear infinite}
.il-perimeter .flash{animation:recBlink .5s steps(1) infinite}
/* fire */
.il-fire .det,.il-fire .snd{animation:recBlink .7s steps(1) infinite}
.il-fire .smoke{animation:smokeUp 4s ease-in-out infinite}
@keyframes smokeUp{0%{transform:translateY(20px);opacity:0}50%{opacity:.8}100%{transform:translateY(-10px);opacity:0}}
.il-fire .arrow{animation:pulse2 1.2s ease-in-out infinite}
/* building */
.il-building .fl .win{animation:winOn 6s ease-in-out infinite;animation-delay:inherit}
@keyframes winOn{0%,20%{fill:#2A5961}30%,85%{fill:#FFC857}95%,100%{fill:#2A5961}}
.il-building .fan{animation:none}
.il-building .fan path{transform-origin:0 0;animation:spin 2s linear infinite}
.il-building .ln{stroke-dasharray:200;animation:lineDraw3 5s ease-in-out infinite}
@keyframes lineDraw3{0%{stroke-dashoffset:200}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}
/* parking */
.il-parking .car{animation:carIn 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes carIn{0%{transform:translateX(-160px)}25%,50%{transform:translateX(150px)}100%{transform:translateX(560px)}}
.il-parking .arm{transform-origin:336px 238px;animation:armUp 8s ease-in-out infinite}
@keyframes armUp{0%,38%{transform:rotate(0)}46%,70%{transform:rotate(-80deg)}80%,100%{transform:rotate(0)}}
.il-parking .beam{animation:beamOn 8s steps(1) infinite}
@keyframes beamOn{0%,24%{opacity:0}25%,40%{opacity:1}41%,100%{opacity:0}}
.il-parking .ok{animation:ledOk 8s steps(1) infinite}
.il-parking .toast{animation:alertIn 8s cubic-bezier(.2,.8,.2,1) infinite}
/* acoustic */
.il-acoustic .wv{transform-box:view-box;transform-origin:150px 210px;animation:waveOut 1.6s ease-out infinite}
@keyframes waveOut{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
.il-acoustic .waves2{animation:pulse2 1.6s ease-in-out infinite}
.il-acoustic .pn{animation:pulse2 3s ease-in-out infinite}
/* rack */
.il-rack .led{animation:recBlink 1.3s steps(1) infinite}
.il-rack .cool,.il-rack .warm{animation:dashMove 1s linear infinite}
.il-rack .ok{animation:pulse2 2s ease-in-out infinite}
/* cabling */
.il-patch .cab{stroke-dasharray:14 10;animation:dashMove 1.4s linear infinite}
.il-patch .pl{animation:recBlink 1.2s steps(1) infinite}
/* cloud */
.il-cloud .sync{transform-box:fill-box;transform-origin:center;animation:spin 3s linear infinite}
/* shield */
.il-shield .sh{animation:pulse2 2.4s ease-in-out infinite}
.il-shield .th{animation:hit 3s ease-in infinite}
.il-shield .t1{animation-delay:-.75s}.il-shield .t2{animation-delay:-1.5s}.il-shield .t3{animation-delay:-2.25s}
@keyframes hit{0%{transform:translate(0,0);opacity:1}70%{opacity:1}80%,100%{transform:translate(var(--hx,0),var(--hy,0));opacity:0}}
.il-shield .t0{--hx:120px;--hy:70px}.il-shield .t1{--hx:-110px;--hy:40px}.il-shield .t2{--hx:110px;--hy:-90px}.il-shield .t3{--hx:-100px;--hy:-90px}
/* blueprint */
.il-blueprint .draw{stroke-dasharray:2400;stroke-dashoffset:2400;animation:bpDraw 9s ease-in-out infinite}
.il-blueprint .d2{stroke-dasharray:4 4;stroke-dashoffset:0;animation:pulse2 2s ease-in-out infinite}
@keyframes bpDraw{0%{stroke-dashoffset:2400}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.il-blueprint .furn{animation:furnIn 9s ease-in-out infinite}
@keyframes furnIn{0%,40%{opacity:0;transform:translateY(10px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
.il-blueprint .dim{animation:furnIn 9s ease-in-out infinite}
/* joinery */
.il-joinery .p1{animation:slideL 8s cubic-bezier(.2,.8,.2,1) infinite}
.il-joinery .p2{animation:slideB 8s cubic-bezier(.2,.8,.2,1) infinite .2s}
.il-joinery .p3{animation:slideB 8s cubic-bezier(.2,.8,.2,1) infinite .4s}
.il-joinery .p4{animation:slideB 8s cubic-bezier(.2,.8,.2,1) infinite .6s}
.il-joinery .p5{animation:slideT 8s cubic-bezier(.2,.8,.2,1) infinite .9s}
@keyframes slideL{0%{transform:translateX(-500px)}12%,88%{transform:none}100%{transform:translateX(500px);opacity:0}}
@keyframes slideB{0%{transform:translateY(200px);opacity:0}12%,88%{transform:none;opacity:1}100%{opacity:0}}
@keyframes slideT{0%{transform:translateY(-200px);opacity:0}12%,88%{transform:none;opacity:1}100%{opacity:0}}
.il-joinery .scr{animation:pulse2 2s ease-in-out infinite}
.il-joinery .cable{animation:dashMove 1.2s linear infinite}
/* flooring */
.il-tiles .tl{animation:tileIn 7s ease-out infinite;animation-delay:inherit}
@keyframes tileIn{0%{opacity:0;transform:translateY(-20px)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
.il-tiles .lift{animation:liftT 7s ease-in-out infinite}
@keyframes liftT{0%,30%{transform:none}45%,80%{transform:translate(20px,-70px) rotate(-12deg)}95%,100%{transform:none}}
.il-tiles .wire{animation:dashMove 1.2s linear infinite}
/* vault */
.il-vault .wheel{animation:none}
.il-vault .wheel *{animation:none}
.il-vault .wheel{transform-box:view-box}
.il-vault .wheel > *{transform-origin:0 0;animation:wheelTurn 7s ease-in-out infinite}
@keyframes wheelTurn{0%,30%{transform:rotate(0)}60%,90%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}
.il-vault .led{animation:ledOk 7s steps(1) infinite}
/* ai */
.il-ai .p0{animation:walkA 7s linear infinite}.il-ai .p1{animation:walkB 9s linear infinite}.il-ai .p2{animation:walkC 8s linear infinite}
@keyframes walkA{0%{transform:translate(60px,110px)}100%{transform:translate(300px,100px)}}
@keyframes walkB{0%{transform:translate(310px,190px)}100%{transform:translate(70px,180px)}}
@keyframes walkC{0%{transform:translate(110px,150px)}50%{transform:translate(250px,140px)}100%{transform:translate(110px,150px)}}
.il-ai .heat{transform-box:fill-box;transform-origin:center;animation:halo 3s ease-in-out infinite}
.il-ai .ab{transform-box:fill-box;transform-origin:center bottom;animation:grow2 2.2s ease-in-out infinite alternate}
.il-ai .rec{animation:recBlink 1.1s steps(1) infinite}
/* iot */
.il-iot .ping{transform-box:fill-box;transform-origin:center;animation:ping2 2.8s ease-out infinite}
.il-iot .hub{transform-box:fill-box;transform-origin:center;animation:ping2 2s ease-out infinite}
.il-iot .lk{animation:dashMove 1s linear infinite}
/* vr */
.il-vr .cube{animation:none}
.il-vr .cube > *{transform-origin:0 0;animation:cubeSpin 6s ease-in-out infinite}
@keyframes cubeSpin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(60deg) scale(1.08)}}
.il-vr .gh{animation:pulse2 2.4s ease-in-out infinite}
.il-vr .lens{animation:pulse2 3s ease-in-out infinite}
/* turnstile */
.il-turnstile .vis{animation:visPass 6s ease-in-out infinite}
@keyframes visPass{0%{transform:translateX(20px);opacity:0}10%{opacity:1}35%,50%{transform:translateX(150px)}85%{transform:translateX(300px);opacity:1}100%{transform:translateX(320px);opacity:0}}
.il-turnstile .flap{transform-box:fill-box;transform-origin:left center;animation:flapOpen 6s ease-in-out infinite}
.il-turnstile .f1{animation-delay:1.6s}
@keyframes flapOpen{0%,36%{transform:scaleX(1)}44%,60%{transform:scaleX(.1)}68%,100%{transform:scaleX(1)}}
.il-turnstile .ok{animation:recBlink 1s steps(1) infinite}
.il-turnstile .zb{transform-box:fill-box;transform-origin:left center;animation:zone 5s ease-in-out infinite alternate}
.il-turnstile .z1{animation-delay:-1.5s}.il-turnstile .z2{animation-delay:-3s}
@keyframes zone{from{transform:scaleX(.3)}to{transform:scaleX(.9)}}
/* energy */
.il-energy .needle{animation:none}
.il-energy .needle > *{transform-origin:0 0;animation:needle 6s ease-in-out infinite}
@keyframes needle{0%,15%{transform:rotate(50deg)}60%,90%{transform:rotate(-45deg)}100%{transform:rotate(50deg)}}
.il-energy .eb{transform-box:fill-box;transform-origin:center bottom;animation:grow2 3s ease-in-out infinite alternate}