:root{--navy:#07111d;--ink:#102034;--muted:#52657a;--teal:#00a88f;--aqua:#00d9b5;--blue:#3b82f6;--line:#dce5e9;--bg:#f6f8f9}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}a:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}.container{width:min(1180px,calc(100% - 40px));margin:auto}.skip{position:absolute;top:-60px;left:16px;background:var(--aqua);color:var(--navy);z-index:30;padding:8px 12px}.skip:focus{top:12px}.eyebrow{font:700 .75rem/1.4 ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#087c6c;margin:0 0 14px}.eyebrow.light{color:#56edcf}.section{padding:92px 0}.section-heading{max-width:690px;margin-bottom:36px}.section-heading h2,.split-copy h2,.cta h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.05em;line-height:1.13;margin:0 0 18px}.section-heading p,.split-copy p{font-size:1.06rem;color:var(--muted);margin:0}.section-heading.center{text-align:center;margin:0 auto 40px}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.header:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--aqua),var(--blue))}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand img{width:151px;height:auto;object-fit:contain}.brand-divider{width:1px;height:30px;background:var(--line)}.brand-product{font-size:1.07rem;font-weight:800;letter-spacing:-.04em;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:27px;font-weight:650;font-size:.88rem}.nav-links a:hover,.footer a:hover{color:#087c6c}.nav-links .nav-contact{background:var(--teal);color:var(--navy);padding:11px 17px;border-radius:9px}.nav-links .nav-contact:hover{background:var(--aqua);color:var(--navy)}
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:86px 0 92px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 77% 35%,rgba(0,217,181,.13),transparent 36%),radial-gradient(circle at 20% 100%,rgba(59,130,246,.1),transparent 34%);pointer-events:none}.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to right,transparent,black 35%);pointer-events:none}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:52px;align-items:center}.hero h1{font-size:clamp(2.8rem,5.4vw,5.35rem);line-height:1.05;letter-spacing:-.065em;margin:0 0 24px;max-width:680px}.hero h1 span{color:var(--aqua)}.hero-lead{max-width:600px;font-size:1.16rem;line-height:1.7;color:#bdcbd7;margin:0}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:13px 20px;font-weight:750;font-size:.94rem;min-height:50px;transition:transform .2s,background .2s,border-color .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--teal);color:#041b20}.btn-primary:hover{background:var(--aqua)}.btn-outline{border:1px solid rgba(255,255,255,.26);color:#fff}.btn-outline:hover{border-color:var(--aqua)}.hero-points{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:38px;color:#9fb3c3;font:600 .75rem/1.4 ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}.hero-points span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua)}
.flow-card{background:#0b1926;border:1px solid #254354;border-radius:21px;box-shadow:0 35px 90px -34px #000;overflow:hidden}.flow-top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid #243847;color:#95aebd;font:600 .68rem/1.3 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.live-indicator{color:#63e9c8;white-space:nowrap}.live-indicator:before{content:"";display:inline-block;width:7px;height:7px;background:#45dcad;border-radius:50%;margin-right:7px;box-shadow:0 0 11px #45dcad;animation:blink 1.6s ease-in-out infinite}.flow-body{padding:30px 28px 25px}.flow-row{display:grid;grid-template-columns:1fr 52px 1.12fr 52px 1fr;align-items:center}.flow-node{min-height:168px;background:#122638;border:1px solid #315164;border-radius:15px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:19px 16px;position:relative;z-index:1}.flow-node.broker{background:linear-gradient(145deg,#0e514f,#0c343d);border-color:#23b39b;box-shadow:0 0 35px rgba(0,217,181,.16)}.node-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#1b3b4b;color:#70e8d0;font:800 .83rem ui-monospace,Consolas,monospace;margin-bottom:13px}.broker .node-icon{background:rgba(255,255,255,.12);color:#fff}.flow-node strong{font-size:1rem;line-height:1.2;color:#fff}.flow-node small{color:#aac3ce;font-size:.72rem;line-height:1.4;margin-top:8px}.flow-link{height:3px;background:#315564;position:relative;overflow:hidden}.flow-link:after{content:"";position:absolute;top:-3px;left:-12px;width:11px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 15px var(--aqua);animation:packet 2.6s linear infinite}.flow-link.out:after{animation-delay:1.3s}.flow-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:23px;text-align:center;color:#9eb8c7;font:600 .65rem/1.3 ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}.flow-stages span{padding:9px 4px;border:1px solid #284150;border-radius:7px}.flow-stages b{color:#65e1c6}.flow-log{margin-top:18px;border-top:1px solid #233a49;padding-top:15px;color:#9bb4c3;font:.71rem/1.7 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}.flow-log b{color:#68e2c7}.flow-log i{font-style:normal;color:#dbe9ed}.hero-caption{font-size:.74rem;color:#90aabc;text-align:center;margin:14px 0 0}
.intro-strip{background:#eaf8f5;border-bottom:1px solid #cceae3}.intro-inner{display:grid;grid-template-columns:repeat(3,1fr)}.intro-item{padding:26px 30px;border-right:1px solid #cceae3}.intro-item:first-child{padding-left:0}.intro-item:last-child{border-right:0}.intro-item strong{display:block;color:#0d3a3b;font-size:.97rem}.intro-item span{display:block;color:#4a696e;font-size:.83rem;margin-top:3px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 25px 70px -45px rgba(7,17,29,.55)}.step-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#dff6f0;color:#087c6c;font:800 .78rem ui-monospace,Consolas,monospace}.step h3{font-size:1.3rem;letter-spacing:-.025em;line-height:1.25;margin:24px 0 10px}.step p{color:var(--muted);font-size:.96rem;margin:0}.step code{font-size:.84em;background:#e9f5f2;padding:2px 5px;border-radius:4px;color:#086c61}
.use-section{background:#fff;border-block:1px solid var(--line)}.use-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}.use-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.use-card{border:1px solid var(--line);background:#f9fbfb;border-radius:16px;padding:23px;min-height:186px}.use-card .symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#e2f6f2;color:#088b78;font:800 1rem ui-monospace,Consolas,monospace}.use-card h3{font-size:1.06rem;margin:17px 0 6px}.use-card p{font-size:.88rem;color:var(--muted);margin:0}.small-note{font-size:.88rem!important;margin-top:18px!important}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.value{padding:27px 28px;border:1px solid var(--line);border-radius:16px;background:#fff}.value h3{font-size:1.13rem;margin:0 0 9px}.value p{color:var(--muted);margin:0;font-size:.94rem}.value:before{content:"";display:block;width:35px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--blue));margin-bottom:22px}.faq-section{background:#fff;border-top:1px solid var(--line)}.faq-list{max-width:820px;margin:0 auto}.faq{border-bottom:1px solid var(--line);padding:23px 0}.faq h3{font-size:1.12rem;margin:0 0 8px}.faq p{color:var(--muted);margin:0}
.cta{background:linear-gradient(125deg,#07111d,#0d353c);color:#fff;padding:76px 0}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:40px}.cta h2{color:#fff;max-width:650px}.cta p{color:#b5cdd4;margin:0;max-width:620px}.cta-actions{display:flex;flex-wrap:wrap;gap:11px;flex-shrink:0}.footer{background:#06101b;color:#a7b9c8;padding:42px 0 28px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:28px;border-bottom:1px solid #253542}.footer-brand{font-weight:800;color:#fff;font-size:1.25rem}.footer-brand span{color:var(--aqua)}.footer-links{display:flex;flex-wrap:wrap;gap:18px;font-size:.86rem}.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font-size:.78rem}.footer a:hover{color:var(--aqua)}@keyframes packet{0%{left:-12px;opacity:0}12%,88%{opacity:1}100%{left:100%;opacity:0}}@keyframes blink{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:46px}.hero-copy{max-width:760px}.flow-card{max-width:760px}.use-grid{gap:34px}.cta-grid{align-items:flex-start;flex-direction:column}}@media(max-width:720px){.container{width:min(100% - 32px,1180px)}.nav{height:auto;min-height:70px;flex-wrap:wrap;padding-block:11px;gap:12px}.brand img{width:117px}.brand-product{font-size:.95rem}.nav-links{width:100%;gap:15px;overflow-x:auto;white-space:nowrap;font-size:.77rem;padding-bottom:3px}.nav-links .nav-contact{padding:7px 10px}.hero{padding:64px 0 68px}.hero h1{font-size:clamp(2.65rem,10vw,4rem)}.section{padding:66px 0}.intro-inner,.steps,.value-grid{grid-template-columns:1fr}.intro-item{border-right:0;border-bottom:1px solid #cceae3;padding:16px 0}.intro-item:last-child{border-bottom:0}.use-grid{grid-template-columns:1fr}.footer-top{align-items:flex-start;flex-direction:column}.flow-body{padding:18px 13px 19px}.flow-row{grid-template-columns:1fr 23px 1.1fr 23px 1fr}.flow-node{min-height:139px;padding:12px 8px}.flow-node strong{font-size:.73rem}.flow-node small{font-size:.61rem}.node-icon{width:31px;height:31px;font-size:.65rem}.flow-stages{font-size:.54rem}.flow-stages span{padding:6px 2px}.flow-top{padding:12px 13px;font-size:.58rem}}@media(max-width:420px){.use-list{grid-template-columns:1fr}.hero-actions .btn{width:100%}.flow-node small{display:none}.flow-node{min-height:110px}.flow-stages{grid-template-columns:1fr;text-align:left}.flow-stages span{padding:6px 9px}.flow-log{font-size:.62rem}.hero-points{font-size:.67rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* MQTT visuals */
.node-icon img{width:31px;height:31px;object-fit:contain}
.mqtt-diagram{margin:0 0 32px;background:#eef8f6;border:1px solid #d4e9e3;border-radius:22px;overflow:hidden}
.mqtt-diagram picture,.mqtt-diagram img{display:block;width:100%}.mqtt-diagram img{height:auto}
.mqtt-diagram figcaption{padding:0 24px 20px;color:#426768;font-size:.9rem;text-align:center}
.usage-photo{margin:28px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0c2430}
.usage-photo img{width:100%;height:auto;aspect-ratio:2.5;object-fit:cover}
.usage-photo figcaption{padding:12px 16px;background:#eef8f6;color:#426768;font-size:.82rem;line-height:1.5}
@media(max-width:720px){.mqtt-diagram figcaption{padding:4px 16px 17px;font-size:.82rem}}