.brxe-code{width:100%}:where(.brxe-divider){align-items:center;display:flex;font-size:30px;gap:30px}:where(.brxe-divider).horizontal{width:100%}:where(.brxe-divider).horizontal .line{border-top:1px solid}:where(.brxe-divider).vertical{flex-direction:column}:where(.brxe-divider).vertical .line{border-right:1px solid;width:auto}:where(.brxe-divider) .line{position:relative;width:100%}:where(.brxe-divider) .icon{flex-shrink:0;position:relative}:where(.brxe-divider) a{display:inline-flex}.brxe-button{width:auto}:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}.brxe-icon{font-size:60px}svg.brxe-icon{font-size:inherit}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{overflow:hidden;position:relative}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute!important;text-align:center;width:100%;z-index:1}*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter','Segoe UI',Arial,sans-serif; font-size:16px; line-height:1.6; color:#1a1a2e; background:#fff; } :root { --blue: #0097A7; --blue-dark: #00838f; --blue-light: rgba(0,151,167,0.08); --navy: #0d1b2a; --slate: #4a5568; --mid: #718096; --border: #e8ecf0; --white: #ffffff; --soft: #f7f9fc; --radius: 14px; } h1,h2,h3 { line-height:1.2; font-weight:700; color:var(--navy); } h1 { font-size:clamp(2rem,4vw,3.1rem); } h2 { font-size:clamp(1.5rem,2.8vw,2.2rem); } h3 { font-size:1.1rem; } p { color:var(--slate); line-height:1.8; max-width:64ch; } .container { max-width:1160px; margin:0 auto; padding:0 28px; } section { padding:96px 0; background:var(--white); } section.soft { background:var(--soft); } .tag { display:inline-block; color:var(--blue-dark); font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } .tag::before { content:''; display:inline-block; width:18px; height:2px; background:var(--blue); vertical-align:middle; margin-right:8px; border-radius:2px; } .btn { display:inline-block; padding:12px 28px; border-radius:6px; font-weight:600; font-size:.93rem; text-decoration:none; cursor:pointer; border:none; transition:all .18s; } .btn-primary { background:var(--blue); color:#fff; } .btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); } .btn-ghost { background:transparent; color:var(--navy); border:1.5px solid var(--border); } .btn-ghost:hover { border-color:var(--blue); color:var(--blue-dark); } .btn-outline-blue { background:transparent; color:var(--blue); border:1.5px solid var(--blue); } .btn-outline-blue:hover { background:var(--blue); color:#fff; } .btn-white { background:#fff; color:var(--navy); font-weight:700; } .btn-white:hover { background:#f0fbfc; } .btn-ghost-white { background:transparent; color:rgba(255,255,255,.75); border:1.5px solid rgba(255,255,255,.3); } .btn-ghost-white:hover { color:#fff; border-color:rgba(255,255,255,.7); } .btn-full { width:100%; text-align:center; }  #hero { padding:96px 0 80px; border-bottom:1px solid var(--border); } .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .hero-headline { margin-bottom:16px; } .hero-headline em { font-style:normal; color:var(--blue); } .hero-sub { font-size:1.05rem; margin-bottom:32px; max-width:46ch; } .hero-ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .hero-link { font-size:.87rem; color:var(--mid); text-decoration:none; } .hero-link:hover { color:var(--blue); } .hero-link::after { content:' →'; } .hero-img { width:100%; display:block; border-radius:16px; } .hero-stats { display:flex; gap:40px; margin-top:48px; padding-top:32px; border-top:1px solid var(--border); } .stat-val { font-size:1.65rem; font-weight:800; color:var(--navy); line-height:1; } .stat-val span { color:var(--blue); } .stat-lbl { font-size:.76rem; color:var(--mid); margin-top:5px; }  #partners { padding:32px 0; border-bottom:1px solid var(--border); background:var(--white); } .partners-inner { display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .partners-label { font-size:.76rem; color:var(--mid); font-weight:500; white-space:nowrap; } .partner-logos { display:flex; gap:36px; align-items:center; flex-wrap:wrap; } .partner-logo { font-size:1.05rem; font-weight:800; color:#b0bec5; letter-spacing:.04em; }  .section-header { margin-bottom:48px; } .section-header h2 { margin-bottom:10px; } .format-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .format-cards { display:flex; flex-direction:column; gap:20px; } .format-card { padding:32px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); position:relative; transition:border-color .2s; } .format-card:hover { border-color:var(--blue); } .format-card.primary { border-color:var(--blue); } .primary-badge { position:absolute; top:-12px; left:24px; background:var(--blue); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 12px; border-radius:20px; } .format-card h3 { margin-bottom:8px; } .format-card p { font-size:.88rem; margin-bottom:18px; max-width:none; } .check-list { list-style:none; display:flex; flex-direction:column; gap:7px; } .check-list li { font-size:.85rem; color:var(--slate); display:flex; align-items:center; gap:10px; } .check-list li::before { content:''; width:6px; height:6px; background:var(--blue); border-radius:50%; flex-shrink:0; } .scene-img { width:100%; border-radius:var(--radius); display:block; box-shadow:0 16px 48px rgba(0,0,0,.1); }  .specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; } .spec-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:32px; display:grid; grid-template-columns:160px 1fr; gap:28px; align-items:start; } .spec-img { width:100%; display:block; } .spec-tag { display:inline-block; background:var(--blue-light); color:var(--blue-dark); font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:4px; margin-bottom:8px; letter-spacing:.05em; } .spec-card h3 { margin-bottom:3px; } .spec-subtitle { font-size:.8rem; color:var(--mid); margin-bottom:12px; } .spec-list { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .spec-list li { font-size:.82rem; color:var(--slate); display:flex; align-items:center; gap:8px; } .spec-list li::before { content:''; width:5px; height:5px; background:var(--blue); border-radius:50%; flex-shrink:0; } .spec-ctas { display:flex; gap:10px; flex-wrap:wrap; }  .configurator { display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:start; } .modules { display:flex; flex-direction:column; gap:12px; } .module { border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--white); } .module.open { border-color:var(--blue); } .module-head { display:flex; align-items:center; gap:14px; padding:17px 20px; cursor:pointer; user-select:none; } .mod-icon { width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.95rem; background:var(--soft); flex-shrink:0; } .module.open .mod-icon { background:var(--blue-light); } .mod-name { font-weight:600; font-size:.93rem; color:var(--navy); flex:1; } .mod-caret { color:var(--mid); font-size:.72rem; transition:transform .25s; } .module.open .mod-caret { transform:rotate(180deg); color:var(--blue); } .module-body { display:none; border-top:1px solid var(--border); background:var(--soft); } .module.open .module-body { display:block; } .module-body-inner { padding:16px 20px 20px; }  .charger-preview { width:100%; border-radius:10px; margin-bottom:14px; display:block; } .opts { display:flex; flex-direction:column; gap:8px; } .opt { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1.5px solid var(--border); border-radius:8px; background:var(--white); cursor:pointer; transition:border-color .15s; } .opt:hover { border-color:var(--blue); } .opt.sel { border-color:var(--blue); background:#f0fbfc; } .radio { width:15px; height:15px; border-radius:50%; border:2px solid var(--border); margin-top:3px; flex-shrink:0; transition:all .15s; background:#fff; } .opt.sel .radio { border-color:var(--blue); background:var(--blue); box-shadow:inset 0 0 0 3px #fff; } .opt-name { font-size:.87rem; font-weight:600; color:var(--navy); } .opt-desc { font-size:.77rem; color:var(--mid); margin-top:2px; } .summary { position:sticky; top:24px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:28px; } .summary-label { font-size:.7rem; font-weight:600; color:var(--mid); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; } .summary-product { font-size:1.2rem; font-weight:800; color:var(--navy); margin-bottom:22px; } .summary-product span { color:var(--blue); } .sum-rows { display:flex; flex-direction:column; margin-bottom:22px; } .sum-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:.84rem; } .sum-row:last-child { border-bottom:none; } .sum-key { color:var(--mid); } .sum-val { color:var(--navy); font-weight:500; } .sum-val.active { color:var(--blue-dark); font-weight:600; } .sum-cta { display:flex; flex-direction:column; gap:9px; }  .software-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .sw-cards { display:flex; flex-direction:column; gap:20px; } .sw-card { padding:24px 28px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); display:flex; gap:16px; align-items:flex-start; } .sw-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; } .sw-card h3 { font-size:1rem; margin-bottom:5px; } .sw-card p { font-size:.84rem; max-width:none; margin:0; } .ui-img { width:100%; border-radius:var(--radius); display:block; box-shadow:0 20px 56px rgba(0,0,0,.12); }  .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .why-card { padding:26px; border-radius:var(--radius); background:var(--white); border:1.5px solid var(--border); } .why-card h3 { font-size:.96rem; margin-bottom:7px; } .why-card p { font-size:.83rem; max-width:none; }  .api-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .api-copy h2 { margin-bottom:14px; } .api-copy > p { margin-bottom:26px; } .int-list { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; } .int-item { display:flex; gap:14px; align-items:flex-start; padding:15px 17px; border:1.5px solid var(--border); border-radius:10px; background:var(--white); transition:border-color .18s; } .int-item:hover { border-color:var(--blue); } .int-dot { width:7px; height:7px; background:var(--blue); border-radius:50%; flex-shrink:0; margin-top:6px; } .int-item strong { display:block; font-size:.88rem; color:var(--navy); margin-bottom:2px; } .int-item span { font-size:.79rem; color:var(--mid); } .api-diagram { background:var(--soft); border:1.5px solid var(--border); border-radius:var(--radius); padding:28px; } .diag-title { font-size:.7rem; font-weight:600; color:var(--mid); letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; } .diag-flow { display:flex; flex-direction:column; gap:5px; } .diag-node { display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--white); border:1.5px solid var(--border); border-radius:7px; font-size:.8rem; color:var(--navy); } .diag-node.core { border-color:var(--blue); background:#f0fbfc; } .diag-dot { width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; } .diag-node.core .diag-dot { background:var(--blue); } .diag-badge { margin-left:auto; font-size:.62rem; color:var(--blue-dark); background:var(--blue-light); padding:2px 7px; border-radius:4px; font-weight:600; } .diag-arrow { font-size:.7rem; color:var(--mid); padding:2px 13px; display:flex; align-items:center; gap:6px; } .diag-arrow::before { content:'↕'; color:var(--blue); }  #demo { background:var(--navy) !important; padding:80px 0; text-align:center; } #demo .tag { color:rgba(255,255,255,.4); } #demo .tag::before { background:rgba(255,255,255,.2); } #demo h2 { color:#fff; margin-bottom:12px; } #demo p { color:rgba(255,255,255,.6); margin:0 auto 30px; } .demo-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .demo-fine { margin-top:14px; font-size:.75rem; color:rgba(255,255,255,.28); max-width:none; }  .faq-header { text-align:center; margin-bottom:44px; } .faq-header p { margin:0 auto; text-align:center; } .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .faq-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:26px; } .faq-card h3 { font-size:.95rem; margin-bottom:10px; color:var(--navy); } .faq-divider { width:28px; height:2px; background:var(--blue); margin-bottom:10px; border-radius:2px; } .faq-card p { font-size:.84rem; max-width:none; }  .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; } .contact-copy h2 { margin-bottom:12px; } .contact-copy > p { margin-bottom:26px; } .trust-list { display:flex; flex-direction:column; gap:10px; } .trust-item { display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--slate); } .trust-check { width:18px; height:18px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; color:var(--blue-dark); font-size:.6rem; font-weight:700; flex-shrink:0; } .form-box { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:34px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .fg { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; } .fg label { font-size:.78rem; font-weight:600; color:var(--slate); } .fg input,.fg select,.fg textarea { padding:10px 12px; border:1.5px solid var(--border); border-radius:7px; font-size:.87rem; font-family:inherit; color:var(--navy); background:#fff; outline:none; transition:border-color .15s; } .fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--blue); } .fg textarea { min-height:86px; resize:vertical; } .form-note { font-size:.73rem; color:var(--mid); margin-top:9px; } @media(max-width:860px) { .hero-grid,.format-layout,.specs-grid,.configurator, .software-layout,.why-grid,.api-grid,.contact-grid,.faq-grid { grid-template-columns:1fr; } .spec-card { grid-template-columns:1fr; } .summary { position:static; } .form-row { grid-template-columns:1fr; } section { padding:68px 0; } }  #diff { background: var(--soft); } .diff-grid { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: start; margin-bottom: 48px; } .diff-col { padding: 36px; border-radius: var(--radius); } .diff-them { background: var(--white); border: 1.5px solid var(--border); } .diff-us { background: #f0fbfc; border: 1.5px solid var(--blue); } .diff-col-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .us-label { color: var(--blue-dark); border-color: rgba(0,151,167,.2); } .diff-items { display: flex; flex-direction: column; gap: 20px; } .diff-item { display: flex; gap: 14px; align-items: flex-start; } .diff-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .neg-dot { background: #fee2e2; color: #dc2626; } .neg-dot::before { content: '✕'; } .pos-dot { background: var(--blue-light); color: var(--blue-dark); } .pos-dot::before { content: '✓'; } .diff-item strong { display: block; font-size: .9rem; color: var(--navy); margin-bottom: 3px; } .diff-item span { font-size: .82rem; color: var(--mid); line-height: 1.6; } .diff-divider { display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--mid); padding-top: 48px; } .diff-cta { text-align: center; } @media(max-width:860px) { .diff-grid { grid-template-columns: 1fr; } .diff-divider { padding: 12px 0; } }