@charset "UTF-8";

.dl-main { color: #242630; font-size: 15px; line-height: 1.75; }
.dl-main h1, .dl-main h2, .dl-main h3, .dl-main p { margin: 0; }
.dl-main a { text-decoration: none; }
.dl-container { max-width: 1168px; padding: 0 24px; margin: 0 auto; }
.dl-hero { background: #23232d; color: white; padding: 80px 0 90px; }
.dl-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.dl-main .dl-eyebrow { display: block; color: #a94c00; font-size: 13px; font-weight: 700; letter-spacing: 1.8px; margin-bottom: 18px; }
.dl-hero .dl-eyebrow, .dl-contact .dl-eyebrow { color: #ffb260; }
.dl-main h1 { font-size: 32px; line-height: 1.5; letter-spacing: -0.5px; word-break: keep-all; }
.dl-intro { color: #cdcdd5; padding-top: 24px; max-width: 550px; word-break: keep-all; }
.dl-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.dl-badges span { border: 1px solid #625146; background: #322c2b; border-radius: 4px; color: #ffcc99; padding: 6px 11px; font-size: 12px; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.dl-main .dl-button { display: inline-flex; justify-content: center; gap: 22px; align-items: center; background: #f7941d; color: #23232d; padding: 13px 22px; font-weight: 700; border-radius: 4px; min-height: 48px; }
.dl-main .dl-button:hover { background: #ffb260; }
.dl-main .dl-text-link { color: #fff; border-bottom: 1px solid #7a7a86; font-size: 14px; padding: 5px 0; }
.dl-main a:focus-visible { outline: 3px solid #d27417; outline-offset: 5px; }
.dl-visual { padding: 28px; border: 1px solid #444450; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #48403c 0, #2b2b36 60%); }
.dl-visual-label { font-size: 10px; letter-spacing: 3px; color: #babac5; text-align: center; }
.dl-device { margin: 28px auto; max-width: 286px; padding: 24px; border-radius: 10px; border: 1px solid #63616a; border-top: 5px solid #8e8a8c; background: linear-gradient(135deg,#45454f,#30303a); box-shadow: 10px 16px 0 #1b1b24, 0 25px 45px #191921; transform: rotate(-5deg); }
.dl-device-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 2px; color: #ededf1; }
.dl-status { width: 6px; height: 6px; border-radius: 50%; background: #f7941d; box-shadow: 0 0 10px #f7941d; }
.dl-device-title { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 26px 0 18px; letter-spacing: 1px; }
.dl-device-rule { height: 2px; width: 40px; background: #f7941d; }
.dl-device-caption { font-size: 8px; letter-spacing: 1px; margin-top: 15px; color: #c9c9d1; }
.dl-ports { display: flex; gap: 7px; margin-top: 22px; }
.dl-ports i { height: 16px; flex: 1; border: 2px solid #77737a; border-bottom-color: #bd8045; background: #20202a; }
.dl-visual-flow { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 38px; color: #dcdce4; font-size: 12px; }
.dl-visual-flow b { color: #f7941d; }
.dl-section { padding: 88px 0; scroll-margin-top: 90px; }
.dl-muted { background: #f6f7f9; }
.dl-heading { text-align: center; max-width: 790px; margin: 0 auto 42px; }
.dl-main h2 { font-size: 32px; line-height: 1.4; letter-spacing: -1px; word-break: keep-all; }
.dl-heading p { color: #626570; margin-top: 16px; word-break: keep-all; }
.dl-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.dl-card { background: white; border: 1px solid #e1e3e9; border-radius: 8px; padding: 30px; }
.dl-number { display: block; color: #a94c00; font-size: 13px; letter-spacing: 1px; font-weight: 700; margin-bottom: 20px; }
.dl-main h3 { font-size: 18px; line-height: 1.4; margin-bottom: 14px; word-break: keep-all; }
.dl-card p, .dl-flow p, .dl-steps p { color: #626570; font-size: 15px; word-break: keep-all; }
.dl-main .dl-note { text-align: center; margin-top: 26px; color: #686a74; font-size: 13px; }
.dl-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; list-style: none; padding: 0; margin: 0; }
.dl-flow li { position: relative; padding: 28px 20px; text-align: center; border: 1px solid #dedee5; border-radius: 8px; }
.dl-flow li:nth-child(2) { background: #fff8f0; border-color: #e9b67e; }
.dl-flow li:not(:last-child)::after { content: '→'; position: absolute; right: -29px; top: 42%; color: #a94c00; font-size: 23px; }
.dl-flow .dl-number { margin-bottom: 12px; }
.dl-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; gap: 28px; padding: 0; margin: 0; }
.dl-steps li { border-top: 2px solid #d9dbe2; padding-top: 24px; }
.dl-steps li:first-child { border-color: #f7941d; }
.dl-contact { text-align: center; background: #23232d; color: white; padding: 72px 0; }
.dl-contact p { color: #cdcdd5; margin-top: 20px; word-break: keep-all; }
.dl-contact .dl-button { margin-top: 30px; }
.dl-contact .dl-contact-note { font-size: 13px; color: #aaaab7; }
.dl-icon { width: 80px; height: 80px; display: block; }
.dl-pricing { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; padding: 18px; border-left: 3px solid #f7941d; background: #34313a; border-radius: 0 6px 6px 0; }
.dl-pricing .dl-icon { flex: 0 0 30px; width: 30px; height: 30px; color: #ffb260; }
.dl-pricing strong { display: block; font-size: 15px; color: #ffcc99; line-height: 1.5; word-break: keep-all; }
.dl-pricing p { margin-top: 7px; font-size: 14px; color: #dedce3; line-height: 1.65; word-break: keep-all; }
.dl-flow-section { background: #eef2f6; }
.dl-flow-art { display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; margin: 0 auto 24px; border-radius: 50%; background: #eef2f7; color: #536c8b; }
.dl-flow li { background: #fff; border: 0; box-shadow: 0 8px 32px #2733440c; }
.dl-flow li:nth-child(2) { background: #fff1dc; border: 1px solid #e9b67e; box-shadow: 0 10px 36px #c374151c; }
.dl-flow li:nth-child(2) .dl-flow-art { background: #ffe0ad; color: #a94c00; }
.dl-flow li:last-child .dl-flow-art { background: #e2f2ec; color: #287c6c; }
.dl-flow li:not(:last-child)::after { top: 48%; }
.dl-functions { background: #293746; color: white; position: relative; }
.dl-functions .dl-heading .dl-eyebrow { color: #ffb260; }
.dl-functions .dl-heading p { color: #c7d3de; }
.dl-functions .dl-card { background: #334656; border: 1px solid #4b5e6d; border-top: 3px solid #f7941d; }
.dl-functions .dl-card p { color: #d3dce4; }
.dl-card-art { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.dl-card-art .dl-icon { width: 64px; height: 64px; }
.dl-card-art .dl-number { margin: 0; font-size: 32px; color: #b9c5d2; font-weight: 400; }
.dl-functions .dl-card-art { color: #ffb260; }
.dl-functions .dl-card-art .dl-number { color: #8192a2; }
.dl-custom-section { background: #f0f3f7; }
.dl-options .dl-card { border: 0; border-bottom: 3px solid #d3deeb; box-shadow: 0 6px 20px #25344906; }
.dl-options .dl-card-art { color: #496d9c; }
.dl-options .dl-card:nth-child(2), .dl-options .dl-card:nth-child(5) { border-bottom-color: #f3be78; }
.dl-options .dl-card:nth-child(2) .dl-card-art, .dl-options .dl-card:nth-child(5) .dl-card-art { color: #b36317; }
.dl-options .dl-card:nth-child(3), .dl-options .dl-card:nth-child(6) { border-bottom-color: #9bcbbf; }
.dl-options .dl-card:nth-child(3) .dl-card-art, .dl-options .dl-card:nth-child(6) .dl-card-art { color: #328474; }
.dl-process-section { background: #fff8ee; }
.dl-steps li { border-top: 0; padding: 0 8px; position: relative; }
.dl-steps .dl-number { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid #ebbd83; font-size: 22px; margin-bottom: 26px; position: relative; z-index: 1; }
.dl-steps li:first-child .dl-number { background: #f7941d; border-color: #f7941d; color: #23232d; }
.dl-steps li:not(:last-child)::after { content: ''; position: absolute; top: 32px; left: 78px; width: calc(100% - 55px); border-top: 2px dashed #e1c6a3; }
@media (max-width: 1023px) {
  .dl-hero-grid { gap: 30px; }
  .dl-main h1 { font-size: 32px; }
  .dl-visual { padding: 20px; }
  .dl-card { padding: 24px; }
  .dl-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dl-steps li:nth-child(2)::after { display: none; }
}
@media (max-width: 767px) {
  .datalogger-page footer .contact-img { max-width: 100%; margin-left: 0; background-size: contain; }
  .dl-container { padding: 0 22px; }
  .dl-hero { padding: 48px 0; }
  .dl-hero-grid, .dl-grid, .dl-flow, .dl-steps { grid-template-columns: 1fr; }
  .dl-hero-grid { gap: 40px; }
  .dl-main h1 { font-size: 32px; }
  .dl-main h2 { font-size: 27px; }
  .dl-main h3 { font-size: 18px; }
  .dl-main .dl-eyebrow { font-size: 11px; }
  .dl-visual { width: 100%; max-width: 440px; margin: 0 auto; }
  .dl-section { padding: 56px 0; }
  .dl-heading { margin-bottom: 30px; }
  .dl-heading p, .dl-intro { font-size: 15px; }
  .dl-flow li:not(:last-child)::after { content: '↓'; top: auto; bottom: -35px; left: 0; right: 0; }
  .dl-pricing { padding: 15px; gap: 10px; }
  .dl-pricing strong { font-size: 15px; }
  .dl-flow-art { width: 116px; height: 116px; }
  .dl-steps li:not(:last-child)::after { display: none; }
  .dl-steps li { padding: 0 0 24px; border-bottom: 1px solid #eadbc8; }
  .dl-steps li:last-child { border-bottom: 0; }
  .dl-actions { gap: 16px; }
  .dl-contact { padding: 56px 0; }
}