/* Motion layer: intro choreography, scroll reveals, ambient loops and micro-interactions.
   Animates transform/opacity-type properties only; everything settles to the static design in style.css. */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}

/* Header: sticky, glass when scrolled, hides on scroll down */
.header{position:sticky;top:0;z-index:40;transition:translate .6s var(--ease-out),background .4s,border-color .4s,backdrop-filter .4s;animation:header-in 1s var(--ease-out) backwards}
.header.is-scrolled{background:#071013c4;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:#ffffff14}
.header.is-hidden:not(:focus-within){translate:0 -100%}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2f9fb0,var(--cyan) 60%,#c4fbf1);box-shadow:0 0 12px #72e1de66;pointer-events:none}
.brand img{transition:rotate .9s var(--ease-out),scale .9s var(--ease-out)}
.brand:hover img{rotate:-14deg;scale:1.06}
.language svg{transition:rotate .8s var(--ease-out)}
.language:hover svg{rotate:180deg}
@media(min-width:761px){
  .header nav a{position:relative;padding:6px 0}
  .header nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan);scale:0 1;transform-origin:100% 50%;transition:scale .5s var(--ease-out)}
  .header nav a:hover::after,.header nav a.is-active::after{scale:1 1;transform-origin:0 50%}
}
.header nav a.is-active{color:var(--text)}
.header nav.open{animation:nav-open .45s var(--ease-out)}
.header nav.open a{animation:rise-sm .55s var(--ease-out) backwards}
.header nav.open a:nth-child(2){animation-delay:.05s}
.header nav.open a:nth-child(3){animation-delay:.1s}
.header nav.open a:nth-child(4){animation-delay:.15s}

/* Buttons and arrows */
.button{translate:var(--tx,0) var(--ty,0);transition:background .25s,transform .25s,box-shadow .25s,border-color .25s,color .25s,translate .45s var(--ease-out)}
.button:not(.small){position:relative;overflow:hidden;isolation:isolate}
.button:not(.small)::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#ffffffa6 50%,transparent 65%);translate:-110% 0;pointer-events:none}
.button:not(.small):hover::before{animation:shine .9s var(--ease-out)}
.hero-buttons .button::before{animation:shine-idle 6s ease-in-out 3.2s infinite}
.button:hover{box-shadow:0 10px 40px #72e1de2e}
.button:hover>span:last-child,.inline-link:hover>span:last-child,.contact-email:hover>span,.service-card:hover .card-top>span:last-child{animation:arrow-hop .65s var(--ease-out)}
.text-button:hover .play-icon{animation:nudge-down 1.1s ease-in-out infinite}
.play-icon{transition:background .25s,border-color .25s}
.text-button:hover .play-icon{border-color:var(--cyan)}

/* Hero intro */
.hero-glow{animation:fade-in 2.4s ease-out backwards,glow-drift 18s ease-in-out 2.4s infinite alternate}
.hero-content{translate:0 calc(var(--hero-scroll,0) * -48px);opacity:calc(1 - var(--hero-scroll,0) * .55)}
.hero-content>:not(h1){animation:rise-in 1.1s var(--ease-out) backwards}
.hero-content>.eyebrow{animation-delay:.1s}
#hero-title>span:not(.gradient-text){display:inline-block}
#hero-title>span{animation:rise-in 1.25s var(--ease-out) backwards}
#hero-title>span:nth-of-type(1){animation-delay:.22s}
#hero-title>span:nth-of-type(2){animation-delay:.34s}
#hero-title .gradient-text{background-image:linear-gradient(110deg,#b6f5e9,#66d5d7 25%,#63b3cb 50%,#66d5d7 75%,#b6f5e9);background-size:200% 100%;animation:rise-plain 1.25s var(--ease-out) .46s backwards,gradient-pan 10s linear 1.7s infinite}
.hero-content>.hero-description{animation-delay:.62s}
.hero-content>.hero-buttons{animation-delay:.74s}
.hero-content>.hero-platforms{animation-delay:.86s}
.art-coordinate,.motion-toggle{animation:fade-in 1s ease-out 1.6s backwards}
.motion-toggle{transition:border-color .25s,color .25s,background .25s}
.motion-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.eyebrow .status-dot,.contact-location .status-dot{position:relative}
.eyebrow .status-dot::after,.contact-location .status-dot::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--cyan);animation:ping 2.6s ease-out infinite}
.hero-bottom{animation:fade-in 1.2s ease-out 1s backwards}
.hero-bottom a>span:last-child{display:inline-block;animation:nudge-down 2.2s ease-in-out 2s infinite}
/* Intro must finish even if motion is paused early */
.motion-paused :is(.header,.hero-content>:not(h1),#hero-title>span:not(.gradient-text),.art-coordinate,.motion-toggle,.hero-bottom,.header nav.open,.header nav.open a){animation-play-state:running!important}
.motion-paused :is(#hero-title .gradient-text,.hero-glow){animation-play-state:running,paused!important}

/* Hero scene: "your idea" hub wired to the products the company builds (positions/scale per breakpoint) */
.eco{position:absolute;inset:0;isolation:isolate;--cx:50%;--cy:46%}
.eco::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#83c9c42e 1px,transparent 1.4px) 0 0/24px 24px;-webkit-mask-image:radial-gradient(ellipse 58% 62% at var(--cx) var(--cy),#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at var(--cx) var(--cy),#000 10%,transparent 100%);pointer-events:none}
.eco::after{content:'';position:absolute;left:var(--cx);top:var(--cy);width:480px;height:480px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#2ad4c824,transparent 62%);pointer-events:none;animation:core-breathe 7s ease-in-out infinite}
.eco-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.eco-core,.eco-node{position:absolute;z-index:2;left:var(--x);top:var(--y);translate:-50% -50%;scale:var(--s,1);transition:opacity .9s var(--ease-out),filter .9s var(--ease-out)}
.eco.is-intro :is(.eco-core,.eco-node):not(.is-on){opacity:0;filter:blur(10px)}
.eco-core{--x:var(--cx);--y:var(--cy);width:88px;height:88px;scale:var(--core-s,1)}
.core-chip{position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center;border-radius:26px;background:linear-gradient(150deg,#22474c,#0e2025 72%);border:1px solid #3f6f73;box-shadow:0 0 0 7px #72e1de0a,0 18px 50px -12px #000,0 0 80px #72e1de3d,inset 0 1px 0 #ffffff1a}
.core-chip::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam),transparent 0 58%,#c4fbf1 82%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 5s linear infinite}
.core-chip img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 14px #72e1de66)}
.core-ring{position:absolute;left:50%;top:50%;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;border:1px dashed #72e1de33;animation:spin 48s linear infinite;pointer-events:none}
.core-ring-2{width:228px;height:228px;margin:-114px 0 0 -114px;border:1px solid #72e1de3a;opacity:0;animation:none}
.core-label{position:absolute;z-index:1;left:50%;top:calc(100% + 16px);translate:-50% 0;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:9px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#d3f1ed;padding:6px 12px 6px 9px;border-radius:999px;background:#0d1e22f0;border:1px solid #2d5156}
.core-label svg,.eco-tag svg{width:13px;height:13px;flex:none;color:var(--cyan)}
.eco-card{padding:12px 13px 13px;border-radius:15px;background:linear-gradient(165deg,#15292ef7,#0b171cf7);border:1px solid #284349;box-shadow:0 26px 60px -24px #000,inset 0 1px 0 #ffffff12;color:#d7e6e6;transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),border-color .4s,box-shadow .4s}
.eco-card:hover{border-color:#3f6f73;box-shadow:0 30px 70px -24px #000,0 0 44px #72e1de1c,inset 0 1px 0 #ffffff12}
.eco-node::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid #8af5ec;box-shadow:0 0 0 4px #72e1de1c,0 0 36px #72e1de47;opacity:0;pointer-events:none}
.eco-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.2px}
.eco-icon{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px;background:#72e1de17;border:1px solid #72e1de33;color:var(--cyan)}
.eco-icon svg{width:13px;height:13px}
.eco-live{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#6cd3a5;box-shadow:0 0 0 3px #6cd3a51f,0 0 10px #6cd3a5;animation:live-blink 2.4s ease-in-out infinite}
.eco-pill{position:relative;margin-left:auto;padding:3px 7px 3px 15px;border-radius:999px;font-style:normal;font-size:8px;font-weight:600;letter-spacing:.4px;color:#8fe8c0;background:#6cd3a514;border:1px solid #6cd3a540}
.eco-pill::before{content:'';position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#6cd3a5;box-shadow:0 0 8px #6cd3a5;animation:live-blink 2.4s ease-in-out infinite}
.eco-tag{position:absolute;left:50%;top:calc(100% + 12px);translate:-50% 0;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:10px;font-weight:600;color:#d7e6e6;padding:6px 11px 6px 8px;border-radius:999px;background:#0e1f23f0;border:1px solid #2b4a4f}
.node-mobile{--x:16%;--y:41%;border-radius:25px}
.eco-phone{position:relative;width:122px;height:224px;padding:24px 9px 9px;border-radius:25px;background:linear-gradient(170deg,#132a2f,#0a171b);border:3px solid #36565d;box-shadow:0 30px 60px -20px #000,0 0 0 1px #0b1418,inset 0 0 0 1px #ffffff0d;overflow:hidden}
.ph-notch{position:absolute;top:7px;left:50%;width:36px;height:8px;margin-left:-18px;border-radius:6px;background:#050d0f}
.ph-head b{display:block;width:62%;height:6px;border-radius:3px;background:#e2f0ee}
.ph-head s{display:block;width:40%;height:4px;margin-top:5px;border-radius:2px;background:#3a5a5c}
.ph-card{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px;border-radius:12px;background:linear-gradient(135deg,#1f5458,#143236);border:1px solid #2f6064}
.ph-ring{--p:72%;width:28px;height:28px;flex:none;border-radius:50%;background:conic-gradient(var(--cyan) var(--p),#ffffff1c 0);-webkit-mask:radial-gradient(circle,transparent 9px,#000 9.5px);mask:radial-gradient(circle,transparent 9px,#000 9.5px);transition:--p 1.4s var(--ease-out)}
.ph-card>span,.ph-row>span,.ph-toast>span{flex:1;display:grid;gap:4px}
.ph-card b,.ph-row b,.ph-toast b{display:block;width:80%;height:4px;border-radius:2px;background:#d4ebe8}
.ph-card s,.ph-row s,.ph-toast s{display:block;width:55%;height:3px;border-radius:2px;background:#47696b}
.ph-row{display:flex;align-items:center;gap:7px;margin-top:10px;padding:0 2px}
.ph-row i{width:17px;height:17px;flex:none;border-radius:6px;background:linear-gradient(135deg,#72e1de66,#a481cd55)}
.ph-row+.ph-row i{background:linear-gradient(135deg,#a481cd66,#72e1de33)}
.ph-tabs{position:absolute;left:9px;right:9px;bottom:9px;height:24px;display:flex;justify-content:space-around;align-items:center;border-radius:12px;background:#0b1a1e;border:1px solid #213a3f}
.ph-tabs i{width:5px;height:5px;border-radius:50%;background:#3e5f62}
.ph-tabs i:first-child{width:14px;border-radius:3px;background:var(--cyan)}
.ph-toast{position:absolute;z-index:2;left:7px;right:7px;top:7px;display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:11px;background:#e9f6f3;box-shadow:0 10px 24px -8px #000;opacity:0;translate:0 -130%}
.ph-toast i{width:14px;height:14px;flex:none;border-radius:5px;background:linear-gradient(135deg,#72e1de,#3fa6b5)}
.ph-toast b{background:#16353a}
.ph-toast s{background:#8fb3b1}
.node-erp{--x:78%;--y:23%;width:238px}
.erp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.erp-kpis>div{padding:8px 9px;border-radius:9px;background:#0c1c21;border:1px solid #223b40}
.erp-kpis s{display:block;width:46%;height:4px;border-radius:2px;background:#2b4a4c}
.erp-kpis b{display:block;width:72%;height:8px;margin-top:6px;border-radius:3px;background:linear-gradient(90deg,#9ff0e8,#4fb6c4)}
.erp-kpis div+div b{width:58%;background:linear-gradient(90deg,#c3a8ec,#8d74c9)}
.erp-bars{height:62px;margin-top:10px;display:flex;align-items:flex-end;gap:5px;padding:0 1px;border-bottom:1px solid #2c4a50;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 15px)}
.erp-bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#72e1decc,#72e1de24);transition:height 1.1s var(--ease-out)}
.erp-bars i.is-hot{background:linear-gradient(180deg,#e2fffb,#72e1de66);box-shadow:0 0 14px #72e1de55}
.node-auto{--x:81%;--y:71%;width:216px}
.auto-steps{display:grid;gap:6px}
.auto-step{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;background:#0c1c21;border:1px solid #213a3f;transition:border-color .4s,background .4s,box-shadow .4s}
.auto-step i{width:13px;height:13px;flex:none;border-radius:50%;border:1.5px solid #3b6064;transition:border-color .4s,background .4s}
.auto-step span{flex:1;height:4px;border-radius:2px;background:#25403f;overflow:hidden}
.auto-step s{display:block;height:100%;background:linear-gradient(90deg,#72e1de,#c4fbf1);transform-origin:0 50%;scale:0 1}
.auto-step b{font-size:10px;line-height:1;color:var(--cyan);opacity:0;scale:0;transition:scale .5s var(--ease-back),opacity .3s}
.auto-step.is-active{border-color:#72e1de66;background:#103034;box-shadow:0 0 18px #72e1de1a}
.auto-step.is-active i{border-color:var(--cyan);border-top-color:transparent;animation:spin .8s linear infinite}
.auto-step.is-active s{scale:1 1;transition:scale 1.6s var(--ease-in-out)}
.auto-step.is-done i{border-color:var(--cyan);background:#72e1de2e}
.auto-step.is-done s{scale:1 1}
.auto-step.is-done b{opacity:1;scale:1}
.node-cloud{--x:28%;--y:80%;width:228px}
.cloud-browser{border-radius:9px;background:#0c1c21;border:1px solid #223b40;overflow:hidden}
.cb-bar{display:flex;align-items:center;gap:4px;padding:6px 7px;border-bottom:1px solid #1d3439}
.cb-bar i{width:5px;height:5px;border-radius:50%;background:#3b5b5e}
.cb-bar span{flex:1;height:7px;margin-left:6px;border-radius:4px;background:#1a3035}
.cb-hero{height:30px;margin:7px;border-radius:6px;background:linear-gradient(110deg,#1b4448 30%,#2c666c 50%,#1b4448 70%) 0 0/250% 100%;animation:shimmer 3.4s linear infinite}
.cb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 7px 7px}
.cb-tiles i{height:16px;border-radius:4px;background:#16292e;border:1px solid #213a3f}
.cloud-deploy{height:3px;margin-top:10px;border-radius:2px;background:#1d3439;overflow:hidden}
.cloud-deploy span{display:block;height:100%;background:linear-gradient(90deg,#72e1de,#c4fbf1);transform-origin:0 50%}
@media(min-width:761px) and (max-width:1100px){
  /* hero copy overlaps the left of the stage here, so the scene sits further right */
  .eco{--cx:62%;--cy:45%}
  .node-mobile{--x:31%;--y:28%}
  .node-erp{--x:80%;--y:16%}
  .node-auto{--x:82%;--y:71%}
  .node-cloud{--x:42%;--y:77%}
}
@media(max-width:760px){
  .eco{--cy:45%}
  .node-mobile{--x:15%;--y:38%}
  .node-erp{--x:76%;--y:19%}
  .node-auto{--x:79%;--y:70%}
  .node-cloud{--x:29%;--y:81%}
}

/* Capability marquee */
.capability-strip.is-marquee{justify-content:flex-start;flex-wrap:nowrap;gap:0;padding-left:0;padding-right:0;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-group{display:flex;align-items:center;flex:none;gap:30px;padding-right:30px;animation:marquee var(--marquee-duration,40s) linear infinite}
.capability-strip:hover .marquee-group{animation-play-state:paused}
.marquee-group>span{flex:none;min-width:0;transition:color .3s}
.marquee-group>span:hover{color:var(--cyan)}
.marquee-group>i{display:inline-block;animation:spin 12s linear infinite}

/* Scroll reveals (classes are added by motion.js only when motion is allowed) */
.reveal{opacity:0;translate:0 34px;transition:opacity 1s var(--ease-out) var(--d,0s),translate 1.2s var(--ease-out) var(--d,0s),scale 1.2s var(--ease-out) var(--d,0s),clip-path 1.3s var(--ease-out) var(--d,0s)}
.reveal.visible{opacity:1;translate:none}
.reveal-fade{translate:none}
.reveal-scale{translate:0 26px;scale:.965}
.reveal-scale.visible{scale:none}
.reveal-mask{translate:0 .55em;clip-path:inset(100% -8% 0 -8%)}
.reveal-mask.visible{clip-path:inset(-30% -8% -30% -8%)}
.inline-link.reveal{transition:gap .25s,opacity 1s var(--ease-out) var(--d,0s),translate 1.2s var(--ease-out) var(--d,0s)}
.solution-tabs>button.reveal{transition:color .3s,padding .5s var(--ease-out),opacity 1s var(--ease-out) var(--d,0s),translate 1.2s var(--ease-out) var(--d,0s)}
.contact-email.reveal{transition:color .3s,opacity 1s var(--ease-out) var(--d,0s),translate 1.2s var(--ease-out) var(--d,0s)}
.section-label.reveal .status-dot{transition:scale .7s var(--ease-back) calc(var(--d,0s) + .2s)}
.section-label.reveal:not(.visible) .status-dot{scale:0}
.section>.section-label::after,.section-heading .section-label::after{content:'';flex:0 0 48px;height:1px;background:linear-gradient(90deg,#72e1de88,transparent);transform-origin:0 50%;transition:scale 1.1s var(--ease-out) .35s}
.section-label.reveal:not(.visible)::after{scale:0 1}

/* Principles */
.principle-icon{display:inline-block;transition:rotate .8s var(--ease-out),scale .8s var(--ease-out)}
.principles>div:hover .principle-icon{rotate:90deg;scale:1.12}

/* Service cards: tilt, spotlight and illustrated scenes */
.service-card{transform:perspective(1100px) rotateX(calc(var(--py,0) * -6deg)) rotateY(calc(var(--px,0) * 7deg));transition:border-color .4s,transform .7s var(--ease-out),opacity 1s var(--ease-out) var(--d,0s),translate 1.3s var(--ease-out) var(--d,0s)}
.service-card:hover{border-color:#4c8484;transform:perspective(1100px) rotateX(calc(var(--py,0) * -6deg)) rotateY(calc(var(--px,0) * 7deg)) translateY(-6px)}
.service-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),#8af5eccc,transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.service-card::after,.solution-panel::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#72e1de12,transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.service-card:hover::before,.service-card:hover::after,.solution-panel:hover::after{opacity:1}
.dashboard{transition:transform 1s var(--ease-out)}
.back-phone{animation:float-y 7s ease-in-out infinite;transition:rotate 1s var(--ease-out),scale 1s var(--ease-out)}
.front-phone{animation:float-y 7s ease-in-out -3.5s infinite;transition:rotate 1s var(--ease-out),scale 1s var(--ease-out)}
.mobile-card:hover .back-phone{rotate:-6deg;scale:1.03}
.mobile-card:hover .front-phone{rotate:5deg;scale:1.03}
.app-orbit{animation:spin 16s linear infinite}
.phone-wave{animation:sway 6s ease-in-out infinite}
.enterprise-card:hover .dashboard{transform:perspective(900px) rotateY(-5deg) rotateZ(-1.5deg)}
.dash-stats b,.dash-stats em{font-variant-numeric:tabular-nums}
.chart path[pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease-in-out) calc(var(--d,0s) + .45s)}
.chart svg>path:first-of-type{transition:opacity 1.4s ease calc(var(--d,0s) + 1.5s)}
.chart-ring{transform-box:fill-box;transform-origin:center;animation:chart-ping 2.4s ease-out infinite}
.chart-dot,.chart-ring{transition:opacity .6s ease calc(var(--d,0s) + 2.2s)}
.reveal:not(.visible) .chart path[pathLength]{stroke-dashoffset:1}
.reveal:not(.visible) :is(.chart svg>path:first-of-type,.chart-dot,.chart-ring){opacity:0}
.dash-table i{transform-origin:0 50%;background:linear-gradient(90deg,#38504f 35%,#6aa6a2 50%,#38504f 65%) 0 0/300% 100%;animation:bar-shimmer 3.2s linear infinite;transition:scale 1s var(--ease-out) calc(var(--d,0s) + 1s)}
.dash-table i:nth-of-type(2){transition-delay:calc(var(--d,0s) + 1.15s);animation-delay:-.4s}
.dash-table i:nth-of-type(3){transition-delay:calc(var(--d,0s) + 1.3s);animation-delay:-.8s}
.reveal:not(.visible) .dash-table i{scale:0 1}
.flow-line{position:relative}
.flow-line::after{content:'';position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#c4fbf1;box-shadow:0 0 8px var(--cyan);animation:flow-dot 2.4s var(--ease-in-out) infinite}
.flow-node{animation:node-pulse 2.4s ease-in-out infinite}
.flow-core::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam),transparent 0 62%,#c4fbf1 84%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 4s linear infinite}
.flow-core::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid #72e1de;animation:core-ring 3s ease-out infinite;pointer-events:none}
.flow-core img{transition:rotate 1s var(--ease-out)}
.tools-card:hover .flow-core img{rotate:360deg}
.flow-branches>div:before{background:linear-gradient(90deg,#527578 30%,#c4fbf1 50%,#527578 70%) 0 0/300% 100%;animation:flow-pulse 2.4s linear infinite}
.flow-branches>div{transition:translate .6s var(--ease-out),border-color .4s}
.flow-branches>div:nth-child(2){--i:1}
.flow-branches>div:nth-child(2):before{animation-delay:.25s}
.flow-branches>div:nth-child(3){--i:2}
.flow-branches>div:nth-child(3):before{animation-delay:.5s}
.tools-card:hover .flow-branches>div{translate:5px 0;border-color:#4f8a8c;transition-delay:calc(var(--i,0) * 70ms)}
.flow-branches b{transition:scale .55s var(--ease-back) calc(var(--d,0s) + 1s + var(--i,0) * .28s),opacity .3s ease calc(var(--d,0s) + 1s + var(--i,0) * .28s)}
.reveal:not(.visible) .flow-branches b{scale:0;opacity:0}

/* Solutions */
.solution-tabs>button{position:relative;transition:color .3s,padding .5s var(--ease-out)}
.solution-tabs>button::before{content:'';position:absolute;left:0;top:50%;width:2px;height:20px;margin-top:-10px;background:var(--cyan);border-radius:2px;scale:1 0;transition:scale .5s var(--ease-out)}
.solution-tabs>button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--cyan),#72e1de33);transform-origin:0 50%;scale:0 1;transition:scale .8s var(--ease-out)}
.solution-tabs>button[aria-selected=true]::before{scale:1 1}
.solution-tabs>button[aria-selected=true]::after{scale:1 1}
.solution-tabs>button:hover{color:#d6e6e6}
.solution-tabs>button[aria-selected=true]:hover{color:var(--cyan)}
.solution-tabs>button span:last-child{display:inline-block;transition:rotate .6s var(--ease-out),translate .6s var(--ease-out)}
.solution-tabs>button:hover span:last-child{translate:3px -3px}
.solution-tabs>button[aria-selected=true] span:last-child{rotate:45deg;translate:none}
.solution-panel{position:relative;overflow:hidden}
.solution-panel>*{position:relative;z-index:1}
.panel-kicker{display:inline-block}
.layer-1{overflow:hidden;animation:layer-float 6s ease-in-out infinite}
.layer-1::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff30 50%,transparent 70%);translate:-100% 0;animation:sheen 5.5s ease-in-out 1s infinite}
.layer-2{animation:layer-float-sm 6s ease-in-out -.5s infinite}
.layer-3{animation:layer-float-xs 6s ease-in-out -1s infinite}
.stack-spark{animation:twinkle 3.2s ease-in-out infinite}
.spark-2{animation-delay:-1.6s}

/* Process timeline */
.step-line::before{z-index:1;animation:dot-ping 4.8s ease-out infinite}
.process-grid>article:nth-child(2) .step-line::before{animation-delay:1.2s}
.process-grid>article:nth-child(3) .step-line::before{animation-delay:2.4s}
.process-grid>article:nth-child(4) .step-line::before{animation-delay:3.6s}
.step-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),#72e1de40 70%,transparent);transform-origin:0 50%;transition:scale 1.4s var(--ease-out) calc(var(--d,0s) + .35s)}
.reveal:not(.visible) .step-line::after{scale:0 1}
.step-number{display:inline-block;transition:color .4s,translate .6s var(--ease-out)}
.process-grid>article:hover .step-number{color:var(--cyan);translate:6px 0}
.step-tag{transition:color .4s,letter-spacing .6s var(--ease-out)}
.process-grid>article:hover .step-tag{color:var(--cyan);letter-spacing:3px}

/* Contact */
.contact-orb{animation:spin 90s linear infinite}
.contact-orb::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid #72e1de55;animation:ripple 6s ease-out infinite}
.contact::after{content:'';position:absolute;width:560px;height:560px;right:-160px;bottom:-260px;border-radius:50%;background:radial-gradient(circle,#2ad4c824,transparent 65%);z-index:-1;animation:aurora 16s ease-in-out infinite alternate;pointer-events:none}
.contact h2 span{background:linear-gradient(90deg,var(--cyan),#c4fbf1) no-repeat 0 94%/100% 2px;transition:background-size 1.4s var(--ease-out) calc(var(--d,0s) + .6s)}
.contact h2.reveal:not(.visible) span{background-size:0 2px}
.contact-email{position:relative}
.contact-email::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cyan);scale:0 1;transform-origin:100% 50%;transition:scale .6s var(--ease-out)}
.contact-email:hover::after{scale:1 1;transform-origin:0 50%}
.contact-email,.footer-links a,.footer-company>a{transition:color .3s}

/* Dialog */
dialog[open]{animation:dialog-in .6s var(--ease-out)}
dialog[open]::backdrop{animation:fade-in .4s ease-out}
dialog[open] :is(h2,p,label,.button){animation:rise-sm .6s var(--ease-out) backwards}
dialog[open] h2{animation-delay:.05s}
dialog[open] label:nth-of-type(1){animation-delay:.1s}
dialog[open] label:nth-of-type(2){animation-delay:.15s}
dialog[open] label:nth-of-type(3){animation-delay:.2s}
dialog[open] label:nth-of-type(4){animation-delay:.25s}
dialog[open] .button{animation-delay:.3s}
input,textarea,select{transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{border-color:#72e1deaa;box-shadow:0 0 0 4px #72e1de14}

@keyframes header-in{from{opacity:0;translate:0 -100%}}
@keyframes nav-open{from{opacity:0;translate:0 -10px}}
@keyframes fade-in{from{opacity:0}}
@keyframes rise-in{from{opacity:0;translate:0 40px;filter:blur(12px)}}
@keyframes rise-plain{from{opacity:0;translate:0 40px}}
@keyframes rise-sm{from{opacity:0;translate:0 14px}}
@keyframes gradient-pan{to{background-position:200% 0}}
@keyframes glow-drift{to{translate:-70px 50px;scale:1.15}}
@keyframes spin{to{rotate:360deg}}
@keyframes ping{0%{scale:1;opacity:.8}70%,100%{scale:3.2;opacity:0}}
@keyframes nudge-down{50%{translate:0 4px}}
@keyframes shine{to{translate:110% 0}}
@keyframes shine-idle{0%,72%{translate:-110% 0}100%{translate:110% 0}}
@keyframes arrow-hop{0%{translate:0 0}40%{translate:.45em -.45em;opacity:0}41%{translate:-.45em .45em;opacity:0}100%{translate:0 0;opacity:1}}
@keyframes marquee{to{translate:-100% 0}}
@keyframes float-y{50%{translate:0 -9px}}
@keyframes sway{50%{rotate:8deg}}
@keyframes chart-ping{0%{scale:1;opacity:.9}80%,100%{scale:3.4;opacity:0}}
@keyframes bar-shimmer{from{background-position:100% 0}to{background-position:-50% 0}}
@keyframes flow-dot{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
@keyframes flow-pulse{from{background-position:100% 0}to{background-position:0 0}}
@keyframes node-pulse{50%{border-color:#72e1de88;box-shadow:0 0 18px #72e1de22}}
@keyframes beam{to{--beam:360deg}}
@keyframes core-ring{0%{opacity:.55;scale:1}100%{opacity:0;scale:1.45}}
@keyframes layer-float{50%{translate:0 -9px}}
@keyframes layer-float-sm{50%{translate:0 -5px}}
@keyframes layer-float-xs{50%{translate:0 -2px}}
@keyframes sheen{0%,55%{translate:-100% 0}100%{translate:100% 0}}
@keyframes twinkle{50%{opacity:.3;scale:.6;rotate:90deg}}
@keyframes dot-ping{0%{box-shadow:0 0 0 0 #72e1deb0}25%,100%{box-shadow:0 0 0 10px #72e1de00}}
@keyframes ripple{0%{scale:1;opacity:.7}100%{scale:1.6;opacity:0}}
@keyframes aurora{to{translate:-180px -90px;scale:1.25}}
@keyframes live-blink{50%{opacity:.35}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes core-breathe{50%{scale:1.12;opacity:.7}}
@keyframes dialog-in{from{opacity:0;translate:0 26px;scale:.96}}

@media(max-width:760px){
  .marquee-group{gap:24px;padding-right:24px}
}
@media(prefers-reduced-motion:reduce){
  .header,.hero-content{translate:none!important;opacity:1}
  .reveal{opacity:1;translate:none;scale:none;clip-path:none}
}