.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Arial;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Arial;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-15721 .elementor-element.elementor-element-fe1fac5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Arial;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Arial;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}:root{--page-title-display:none;}@media(max-width:1440px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}}@media(max-width:1024px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}}@media(max-width:767px){.elementor-widget-container .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-container .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .eael-protected-content-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-html .protected-content-error-msg{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}}/* Start custom CSS */:root{ --navy:#071b2d;--blue:#1678b8;--green:#00c957;--cyan:#56caff; --ink:#102c44;--muted:#667b8b;--line:#dce7ee;--soft:#f3f8fb; --white:#fff;--shadow:0 28px 80px rgba(7,27,45,.14) } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Montserrat',sans-serif; color:var(--ink); background:#fff; overflow-x:hidden } a{text-decoration:none;color:inherit} .container{width:min(1180px,90%);margin:auto} .section{padding:110px 0} .soft{background:var(--soft)} .dark{background:linear-gradient(135deg,#061827,#0b314a);color:#fff}
.reveal{ opacity:0; transform:translateY(45px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1) } .reveal.visible{ opacity:1; transform:none } .d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; color:var(--blue); background:#edf7fb; border:1px solid #d7eaf3; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase } .eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(0,201,87,.1) }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 21px; border-radius:11px; font-size:13px; font-weight:850; transition:.25s } .btn-green{ background:var(--green); color:#002010; box-shadow:0 14px 32px rgba(0,201,87,.18) } .btn-green:hover{transform:translateY(-3px)} .btn-dark{background:var(--navy);color:#fff} .btn-outline{ color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2) }
.scrollbar{ position:fixed; left:0; top:0; width:100%; height:3px; z-index:9999; background:rgba(0,0,0,.06) } .scrollbar span{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--green),var(--cyan)) }
/* HERO */ .hero{ min-height:820px; display:flex; align-items:center; position:relative; overflow:hidden; color:#fff; background: radial-gradient(circle at 84% 29%,rgba(86,202,255,.19),transparent 22%), radial-gradient(circle at 14% 85%,rgba(0,201,87,.14),transparent 27%), linear-gradient(135deg,#04131f,#0a2d46 63%,#061b2c) } .hero:before{ 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:48px 48px; mask-image:linear-gradient(to bottom,black,transparent) } .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; padding:82px 0; position:relative; z-index:2 } .hero .eyebrow{ color:#c8f1dc; background:rgba(255,255,255,.05); border-color:rgba(0,227,106,.22) } .hero h1{ font-size:clamp(54px,6.8vw,88px); line-height:.93; letter-spacing:-.07em; margin:20px 0 24px } .hero h1 span{color:#68e2a0} .hero-copy{ color:#bfd2dd; max-width:650px; font-size:18px; line-height:1.78; margin-bottom:30px } .hero-actions{display:flex;gap:11px;flex-wrap:wrap} .hero-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:27px } .hero-chips span{ padding:9px 11px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); border-radius:10px; font-size:11px; font-weight:800; color:#d9e6eb }
/* HERO ARCHITECTURE */ .hero-art{ height:545px; position:relative } .art-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:250px; height:170px; border-radius:24px; background:rgba(255,255,255,.07); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px rgba(0,0,0,.28); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:4 } .art-core strong{font-size:24px} .art-core small{ font-size:9px; color:#9fb5c1; letter-spacing:.08em; text-transform:uppercase; margin-top:8px } .ring{ position:absolute; left:50%; top:50%; border:1px dashed rgba(86,202,255,.25); border-radius:50%; transform:translate(-50%,-50%); animation:spin 20s linear infinite } .r1{width:470px;height:305px} .r2{ width:370px; height:245px; border-color:rgba(0,201,87,.22); animation-direction:reverse; animation-duration:14s } @keyframes spin{ to{transform:translate(-50%,-50%) rotate(360deg)} }
.node{ position:absolute; width:140px; min-height:92px; padding:13px 14px; border-radius:17px; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 20px 45px rgba(0,0,0,.22); z-index:5 } .node em{ font-style:normal; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); font-weight:900 } .node strong{ display:block; font-size:13px; margin-top:5px } .node small{ display:block; color:var(--muted); font-size:9px; line-height:1.5; margin-top:5px } .n1{left:0;top:65px} .n2{right:0;top:85px} .n3{left:15px;bottom:48px} .n4{right:9px;bottom:38px}
.connector{ position:absolute; left:50%; top:50%; height:1px; background: linear-gradient( 90deg, rgba(86,202,255,0), rgba(86,202,255,.4), rgba(0,201,87,.55) ); transform-origin:left center; z-index:2 } .c1{width:205px;transform:rotate(205deg)} .c2{width:205px;transform:rotate(-25deg)} .c3{width:205px;transform:rotate(155deg)} .c4{width:205px;transform:rotate(25deg)}
.caption{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:#8ea7b5; width:330px; text-align:center }
/* SECTION HEAD */ .head{ text-align:center; max-width:800px; margin:0 auto 58px } .head h2{ font-size:clamp(40px,5vw,63px); line-height:.98; letter-spacing:-.055em; margin:16px 0 } .head p{ color:var(--muted); font-size:17px; line-height:1.75 }
/* SOLUTION CARDS */ .solution-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px } .solution{ border:1px solid var(--line); border-radius:25px; overflow:hidden; background:#fff; box-shadow:0 12px 40px rgba(8,27,45,.06); transition:.35s } .solution:hover{ transform:translateY(-9px) scale(1.005); box-shadow:var(--shadow) } .solution-media{ height:250px; position:relative; overflow:hidden } .solution-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s ease } .solution:hover img{transform:scale(1.06)} .solution-media:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,18,29,.02),rgba(3,18,29,.66)) } .solution-badge{ position:absolute; z-index:2; top:18px; left:18px; padding:7px 9px; border-radius:999px; background:rgba(7,27,45,.78); border:1px solid rgba(255,255,255,.15); color:#e4f4fa; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase } .solution-body{padding:28px} .solution-body h3{ font-size:29px; letter-spacing:-.03em; margin:0 0 9px } .solution-body p{ font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 17px } .links{ display:flex; gap:8px; flex-wrap:wrap } .links a{ font-size:10px; font-weight:900; color:var(--blue); padding:8px 10px; background:#edf7fb; border-radius:8px }
/* CATEGORY RAIL */ .rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:23px; overflow:hidden; background:#fff } .rail-item{ padding:28px 23px; border-right:1px solid var(--line); position:relative; transition:.3s } .rail-item:last-child{border-right:0} .rail-item:hover{ background:#f8fbfc; transform:translateY(-4px) } .rail-item .n{ font-size:10px; color:var(--blue); font-weight:900; text-transform:uppercase; letter-spacing:.1em } .rail-item h3{ font-size:18px; margin:12px 0 7px } .rail-item p{ font-size:12px; color:var(--muted); line-height:1.6 } .rail-item:after{ content:"→"; position:absolute; right:18px; bottom:20px; color:var(--green); font-size:19px; font-weight:900 }
/* DETAIL SECTIONS */ .feature{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center } .feature-copy h2{margin:14px 0 18px} .feature-copy p{ font-size:17px; line-height:1.75; color:var(--muted) } .check-list{ display:grid; gap:11px; margin-top:24px } .check-list div{ font-size:14px; font-weight:800 } .check-list span{ width:22px; height:22px; border-radius:50%; background:#e8f7ef; color:var(--green); display:inline-flex; align-items:center; justify-content:center; font-size:12px; margin-right:7px } .feature-image{ position:relative; border-radius:28px; overflow:hidden; min-height:430px; box-shadow:var(--shadow) } .feature-image img{ width:100%; height:100%; min-height:430px; object-fit:contain; background:#f7fafc; padding:26px; transition:transform 1s ease; filter:drop-shadow(0 24px 28px rgba(10,37,55,.16)) } .feature-image:hover img{transform:scale(1.04)} .insight{ position:absolute; right:20px; bottom:20px; background:rgba(7,27,45,.86); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:16px; color:#fff; width:210px } .insight small{ display:block; color:#93aab7; font-size:9px; text-transform:uppercase; letter-spacing:.08em } .insight strong{ display:block; font-size:17px; margin-top:4px } .insight span{ display:block; color:#69e2a0; font-size:10px; font-weight:800; margin-top:5px } .dark .feature-copy h2{color:#fff} .dark .feature-copy p{color:#b8ccd7} .dark .check-list div{color:#fff} .dark .check-list span{background:rgba(0,201,87,.13)}
/* CTA */ .footer-cta{ padding:100px 0; background:linear-gradient(135deg,#061927,#0b3a53); color:#fff; text-align:center; position:relative; overflow:hidden } .footer-cta:before{ content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(0,227,106,.12); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) } .footer-cta .container{position:relative;z-index:2} .footer-cta h2{color:#fff} .footer-cta p{ max-width:670px; margin:17px auto 28px; color:#b9cdd7; line-height:1.75 } .foot{ display:flex; justify-content:space-between; gap:20px }
/* PRODUCT SHOWCASE */ .solution-media{ height:290px !important; padding:0 !important; position:relative; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 42%,rgba(38,117,168,.12),transparent 42%), linear-gradient(145deg,#f7fafc,#edf3f6) !important; overflow:hidden; } .solution-media:before{ content:""; position:absolute; width:270px; height:170px; border-radius:50%; background:radial-gradient(ellipse,rgba(13,63,91,.16),transparent 68%); bottom:8px; left:50%; transform:translateX(-50%); filter:blur(3px); } .solution-media:after{ content:""; position:absolute; inset:0; background:linear-gradient( 115deg, transparent 22%, rgba(255,255,255,.54) 48%, transparent 66% ); transform:translateX(-120%); transition:transform 1s ease; pointer-events:none; } .solution:hover .solution-media:after{ transform:translateX(120%) } .solution-media img{ width:82% !important; height:82% !important; padding:0 !important; object-fit:contain !important; position:relative; z-index:2; filter:drop-shadow(0 20px 22px rgba(10,37,55,.18)); transform:translateY(5px) scale(.94); transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease } .solution:hover .solution-media img{ transform:translateY(-3px) scale(1.03); filter:drop-shadow(0 28px 30px rgba(10,37,55,.24)) } .ebt-media{ background: radial-gradient(circle at 50% 40%,rgba(0,201,87,.13),transparent 38%), linear-gradient(145deg,#eef7f3,#e7f1f5) !important; } .ebt-card-visual{ transform:rotate(-4deg) scale(.96) !important; box-shadow: 0 25px 45px rgba(6,32,48,.24), 0 0 0 1px rgba(255,255,255,.5) inset !important; transition: transform .75s cubic-bezier(.2,.7,.2,1), box-shadow .75s ease !important; position:relative; z-index:2; } .solution:hover .ebt-card-visual{ transform:rotate(-2deg) translateY(-6px) scale(1.03) !important; box-shadow: 0 32px 55px rgba(6,32,48,.30), 0 0 0 1px rgba(255,255,255,.5) inset !important; } .product-caption{ position:absolute; right:18px; bottom:16px; z-index:4; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(214,226,233,.9); color:#4e6474; font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; box-shadow:0 8px 20px rgba(10,37,55,.08); } .product-glow{ position:absolute; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(22,119,184,.14),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); filter:blur(1px); z-index:1; } .hardware-pulse{ animation:hardwarePulse 4.5s ease-in-out infinite; } @keyframes hardwarePulse{ 0%,100%{filter:drop-shadow(0 10px 18px rgba(0,201,87,.05))} 50%{filter:drop-shadow(0 16px 28px rgba(0,201,87,.22))} }
/* RESPONSIVE */ @media(max-width:1000px){ .hero-grid,.feature{grid-template-columns:1fr} .hero-art{max-width:720px;margin:auto} .solution-grid{grid-template-columns:1fr} .rail{grid-template-columns:repeat(2,1fr)} .rail-item:nth-child(2){border-right:0} } @media(max-width:650px){ .container{width:91%} .section{padding:78px 0} .hero{min-height:auto} .hero-grid{padding:70px 0} .hero h1{font-size:49px} .hero-copy{font-size:16px} .hero-art{ height:420px; transform:scale(.87); transform-origin:center } .rail{grid-template-columns:1fr} .rail-item{ border-right:0; border-bottom:1px solid var(--line) } .rail-item:last-child{border-bottom:0} .feature-image,.feature-image img{min-height:350px} .foot{flex-direction:column} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{transition:none} .ring{animation:none} .solution,.rail-item,.btn,.solution-media img,.feature-image img,.ebt-card-visual{ transition:none } .solution-media:after{transition:none} }/* End custom CSS */