@import url("https://fonts.googleapis.com/css2?family=Metrophobic&display=swap");


.metrophobic-regular {
  font-family: "Metrophobic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root{--blue:#2563eb;--blue2:#1d4ed8;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Metrophobic",sans-serif;color:var(--ink);background:#fff;line-height:1.5}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:absolute;inset:0 0 auto;z-index:30}.nav{height:80px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:18px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--blue);color:#fff;box-shadow:0 10px 30px rgba(37,99,235,.22)}nav{display:flex;gap:28px}nav a{color:#64748b;text-decoration:none;font-size:14px;font-weight:600}nav a:hover{color:var(--blue)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:13px 20px;text-decoration:none;font-size:14px;font-weight:800;transition:.2s}.btn.small{padding:10px 16px}.primary{background:var(--blue);color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.22)}.primary:hover{background:var(--blue2);transform:translateY(-1px)}.secondary{border:1px solid var(--line);background:#fff;color:#334155;box-shadow:0 4px 16px rgba(15,23,42,.05)}.dark{border:1px solid #334155;background:#111827;color:#fff}.hero{position:relative;overflow:hidden;padding:150px 0 100px}.glow{position:absolute;border-radius:999px;filter:blur(70px);pointer-events:none}.glow-a{top:-140px;left:50%;transform:translateX(-50%);width:900px;height:560px;background:rgba(219,234,254,.85)}.glow-b{right:-120px;top:300px;width:360px;height:360px;background:rgba(207,250,254,.75)}.hero-inner{position:relative;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.hero h1,.section-head h2,.ecosystem h2,.cta h2{letter-spacing:-.045em;line-height:1.02;margin:24px auto 0;font-weight:900}.hero h1{max-width:930px;font-size:clamp(48px,7vw,76px)}.hero h1 em{font-style:normal;color:var(--blue)}.hero> .container>p,.hero-inner>p{max-width:740px;margin:24px auto 0;color:var(--muted);font-size:18px;line-height:1.8}.actions{margin-top:30px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.hero-preview{max-width:1000px;margin:64px auto 0;animation:float 5s ease-in-out infinite}.section-alt{background:rgba(248,250,252,.75);border-top:1px solid #f1f5f9}.applications{padding:110px 0}.section-head{text-align:center;max-width:800px;margin:auto}.section-head h2{font-size:clamp(40px,5vw,58px)}.section-head p{font-size:18px;color:var(--muted);line-height:1.75}.product-list{display:grid;gap:120px;margin-top:90px}.product{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.product.reverse .copy{order:2}.product.reverse .preview{order:1}.kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em;color:#94a3b8;font-weight:900}.kicker b{color:var(--blue)}.kicker i{display:block;width:42px;height:1px;background:#bfdbfe}.copy h3{font-size:42px;line-height:1.08;letter-spacing:-.04em;margin:20px 0}.copy>p{color:var(--muted);font-size:18px;line-height:1.8}.copy ul{list-style:none;padding:0;margin:26px 0}.copy li{margin:12px 0;font-weight:700;color:#334155;font-size:14px}.copy li:before{content:'✓';display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:50%;background:#eff6ff;color:var(--blue)}.browser{border-radius:20px;border:1px solid var(--line);box-shadow:0 28px 80px -28px rgba(15,23,42,.32);overflow:hidden;padding:13px}.browser.dark{background:#020617;color:#fff}.browser.light{background:#fff;padding:28px}.dots{display:flex;gap:6px;align-items:center;padding:0 4px 12px}.dots i{width:10px;height:10px;border-radius:50%;background:#f87171}.dots i:nth-child(2){background:#fbbf24}.dots i:nth-child(3){background:#34d399}.dots small{margin-left:7px;color:#64748b}.ide-grid{height:320px;display:grid;grid-template-columns:120px 1fr;background:#0f172a;border-radius:13px;overflow:hidden}.ide-grid aside{border-right:1px solid #1e293b;padding:13px;display:flex;flex-direction:column;gap:9px}.ide-grid aside b{font-size:10px;color:#94a3b8}.ide-grid aside span{font-size:9px;color:#94a3b8;background:#1e293b;border:1px solid #334155;border-radius:7px;padding:9px}.canvas{position:relative;background-image:radial-gradient(#334155 1px,transparent 1px);background-size:18px 18px}.node{position:absolute;width:118px;padding:10px;border-radius:8px;font-size:9px;font-weight:800}.n1{left:40px;top:45px;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.45);color:#93c5fd}.n2{left:45%;top:105px;background:rgba(139,92,246,.12);border:1px solid rgba(167,139,250,.45);color:#c4b5fd}.n3{right:35px;top:210px;background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.45);color:#6ee7b7}.canvas svg{position:absolute;width:100%;height:100%;inset:0}.canvas path{fill:none;stroke:#60a5fa;stroke-width:2}.canvas path+path{stroke:#a78bfa}.home-top,.hmi-top{display:flex;justify-content:space-between;align-items:start}.home-top div,.hmi-top div{display:flex;flex-direction:column}.home-top small,.hmi-top small{color:#94a3b8;font-size:10px}.home-top span{background:#ecfdf5;color:#059669;border-radius:8px;padding:5px 8px;font-size:9px;font-weight:900}.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.room-grid>div,.metric-grid>div{border:1px solid #f1f5f9;border-radius:14px;padding:14px}.room-grid i{display:block;width:32px;height:32px;border-radius:10px;background:#dbeafe;margin-bottom:30px}.room-grid div:nth-child(2) i,.room-grid div:nth-child(3) i{background:#f1f5f9}.room-grid b,.room-grid small{display:block;font-size:10px}.room-grid small{color:#94a3b8}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-grid div{display:flex;flex-direction:column}.metric-grid .temp{background:var(--blue);color:#fff}.metric-grid small{font-size:9px;color:#94a3b8}.metric-grid .temp small{color:#bfdbfe}.metric-grid b{font-size:24px;margin-top:4px}.hmi{padding:18px}.hmi-top span{background:rgba(16,185,129,.1);color:#34d399;border-radius:8px;padding:5px 8px;font-size:9px;font-weight:900}.metric-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.metric-cards div,.bars,.machines{background:#020617;border:1px solid #1e293b;border-radius:12px;padding:12px}.metric-cards small,.bars>small,.machines>small{color:#64748b;font-size:9px}.metric-cards b{display:block;font-size:17px;margin-top:5px}.hmi-bottom{display:grid;grid-template-columns:1.45fr .75fr;gap:10px}.bars{height:160px;position:relative}.barset{position:absolute;left:12px;right:12px;bottom:15px;height:110px;display:flex;align-items:end;gap:6px}.barset i{display:block;flex:1;background:rgba(59,130,246,.72);border-radius:3px 3px 0 0}.machines p{display:flex;justify-content:space-between;font-size:9px;color:#94a3b8}.machines i{width:8px;height:8px;background:#34d399;border-radius:50%}.machines .warn{background:#fbbf24}.ecosystem{padding:100px 0}.ecosystem-card{border:1px solid var(--line);border-radius:28px;padding:55px;box-shadow:0 24px 80px -35px rgba(15,23,42,.25);display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;position:relative;overflow:hidden}.ecosystem h2{font-size:46px}.ecosystem-card>div>p{color:var(--muted);font-size:17px;line-height:1.8}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:20px}.step>b{color:var(--blue);font-size:12px}.step h3{font-size:22px;margin:32px 0 0}.step strong{font-size:12px;color:var(--blue)}.step p{font-size:13px;color:var(--muted);line-height:1.6}.cta{padding:0 0 100px}.cta-box{background:#020617;border-radius:28px;padding:70px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}.cta-box:before{content:'';position:absolute;width:600px;height:280px;left:50%;top:-170px;transform:translateX(-50%);background:rgba(37,99,235,.35);filter:blur(60px);border-radius:50%}.cta-box>*{position:relative}.cta-box>span{color:#60a5fa;font-size:11px;font-weight:900;letter-spacing:.18em}.cta h2{font-size:50px;max-width:780px}.cta p{color:#94a3b8;max-width:700px;margin:20px auto;font-size:16px}footer{border-top:1px solid #f1f5f9;padding:30px 0}.footer-inner{display:flex;justify-content:space-between;align-items:center;color:#64748b;font-size:14px}.smallmark{width:28px;height:28px;border-radius:8px;font-size:11px}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@media(max-width:900px){nav{display:none}.product,.ecosystem-card{grid-template-columns:1fr}.product.reverse .copy,.product.reverse .preview{order:initial}.steps{grid-template-columns:1fr}.hero h1{font-size:52px}.footer-inner{flex-direction:column}.ecosystem-card{padding:34px}.cta h2{font-size:40px}}@media(max-width:620px){.container{width:min(100% - 28px,1180px)}.nav>.btn{display:none}.hero{padding-top:125px}.hero h1{font-size:43px}.hero-inner>p{font-size:16px}.product-list{gap:84px}.copy h3{font-size:36px}.ide-grid{grid-template-columns:82px 1fr;height:260px}.n2{left:37%}.n3{right:12px}.room-grid{grid-template-columns:1fr}.hmi-bottom{grid-template-columns:1fr}.bars{height:130px}.ecosystem h2,.section-head h2{font-size:38px}}

.hero-preview {
  width: 100%;
  margin-top: 48px;
}

.hero-preview img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
}

.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ========================================
   ARTICLE 1tes
   Original image: 1917 × 902
   Ratio: ~2.125 : 1
======================================== */

.article-1 .preview > img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;

  aspect-ratio: 1093 / 802;
  object-fit: contain;

  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}


/* ========================================
   ARTICLE 2
   Original image: 1093 × 802
   Ratio: ~1.363 : 1
======================================== */

.article-2 .preview > img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;

  aspect-ratio: 1093 / 802;
  object-fit: contain;

  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}


/* ========================================
   ARTICLE 3
   Original image: 1915 × 892
   Ratio: ~2.147 : 1
======================================== */

.article-3 .preview > img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;

  aspect-ratio: 1093 / 802;
  object-fit: contain;

  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {
  .preview {
    padding: 12px 0;
  }

  .article-1 .preview > img,
  .article-2 .preview > img,
  .article-3 .preview > img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}