/* ============================================================================
   Nodex Devices — shared styles for the /home product pages
   Used by: /home (hub), /home/pixels, /home/matrix, /home/pir

   The apex chooser (/) and /industrial stay self-contained on purpose: they are
   settled pages, and copying their CSS here would mean touching them to no end.
   The tokens below are the same ones they use, so the whole site still matches.
   ============================================================================ */

  :root {
    --ground: #080e15;
    --panel: #0f1a24;
    --panel-2: #152230;
    --panel-3: #1b2b39;
    --line: #22303c;
    --line-2: #2c3e4c;
    --ink: #eaf1f5;
    --muted: #93a6b3;
    --faint: #647889;
    --teal: #34cdbf;
    --teal-bright: #5fe3d6;
    --teal-deep: #0e4f4a;
    --amber: #f2a63c;
    --amber-bright: #ffc266;
    --amber-deep: #5a3d12;
    --good: #5fd08a;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --container: 1140px;
    --radius: 14px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    /* amber-forward on the domestic side; teal is the accent here, not the lead */
    background:
      radial-gradient(1100px 520px at 86% -8%, rgba(242,166,60,0.11), transparent 60%),
      radial-gradient(900px 480px at -6% 14%, rgba(52,205,191,0.07), transparent 58%),
      var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: rgba(242,166,60,0.28); color: #fff; }
  :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

  h1, h2, h3 { margin: 0; font-weight: 780; letter-spacing: -0.021em; text-wrap: balance; line-height: 1.08; }
  h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
  h3 { font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.3; }
  p { margin: 0; }

  .eyebrow {
    font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase;
    letter-spacing: 0.22em; color: var(--amber); font-weight: 600;
  }
  .eyebrow .cool { color: var(--teal); }
  .lead { color: var(--muted); font-size: 1.12rem; max-width: 60ch; }

  /* ---------- nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(12px);
    background: rgba(8,14,21,0.72);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; gap: 14px; height: 62px; }
  .up { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
        border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
        font-family: var(--mono); font-size: 0.9rem; transition: border-color .15s, color .15s; }
  .up:hover { border-color: var(--amber); color: var(--amber-bright); }
  .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; }
  .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); align-self: center; }
  .brand b { color: var(--ink); font-weight: 700; }
  .brand span.n { color: var(--amber); }
  .div-chip { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
              color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
  @media (max-width: 560px) { .div-chip { display: none; } }
  .nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
  .nav-links a { color: var(--muted); font-size: 0.92rem; transition: color .15s; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.cross { color: var(--teal); }
  .nav-links a.cross:hover { color: var(--teal-bright); }
  .nav-cta { margin-left: 8px; }
  /* `.nav-links a` outranks `.btn-primary` on specificity, so the button's own
     ink has to be restated here or the label goes muted grey on amber. */
  .nav-links a.btn-primary { color: #2a1a02; }
  .nav-links a.btn-primary:hover { color: #2a1a02; }
  @media (max-width: 780px) { .nav-links a:not(.nav-cta) { display: none; } }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 620; font-size: 0.95rem;
    padding: 12px 20px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
    transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--amber); color: #2a1a02; box-shadow: 0 0 0 1px rgba(242,166,60,0.3), 0 8px 30px -10px rgba(242,166,60,0.6); }
  .btn-primary:hover { background: var(--amber-bright); box-shadow: 0 0 0 1px rgba(255,194,102,0.4), 0 10px 34px -8px rgba(242,166,60,0.7); }
  .btn-ghost { background: rgba(255,255,255,0.02); color: var(--ink); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--amber); color: var(--amber-bright); }
  .btn .arrow { transition: transform .15s; }
  .btn:hover .arrow { transform: translateX(3px); }

  section { padding: clamp(64px, 9vw, 112px) 0; }
  .section-head { max-width: 62ch; margin-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }

  /* ---------- hero ---------- */
  .hero { padding-top: clamp(40px, 6vw, 68px); padding-bottom: clamp(30px, 5vw, 56px); }
  .hero-grid { display: grid; gap: 44px; align-items: center; }
  @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.08fr 0.92fr; } }
  .hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
  .hero h1 .warm { color: var(--amber); }
  .hero-copy { display: flex; flex-direction: column; gap: 22px; }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .hero-trust {
    font-family: var(--mono); font-size: 0.78rem; color: var(--faint);
    letter-spacing: 0.04em; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px;
  }
  .hero-trust span { color: var(--muted); }
  .hero-trust .sep { color: var(--line-2); }
  .badge {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 6px 12px; border: 1px solid var(--amber-deep); border-radius: 999px;
    background: rgba(242,166,60,0.06); color: var(--amber-bright);
  }
  .badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 2.4s ease-in-out infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  @media (prefers-reduced-motion: reduce) { .badge .pulse { animation: none; } }

  /* ---------- screen cards ---------- */
  .screens { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
  .card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .18s, transform .18s;
  }
  .card:hover { border-color: var(--line-2); transform: translateY(-3px); }
  @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
  .card .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(242,166,60,0.10); color: var(--amber); }
  .card.cool .ic { background: rgba(52,205,191,0.09); color: var(--teal); }
  .card svg { width: 19px; height: 19px; }
  .card h3 { font-size: 1.05rem; }
  .card p { color: var(--muted); font-size: 0.95rem; }
  .card .ex { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 11px; margin-top: auto; }

  /* ---------- setup steps ---------- */
  .steps { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
  .step { background: var(--panel); padding: 26px 24px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; transition: background .18s; }
  .step:hover { background: var(--panel-2); }
  .step-n { font-family: var(--mono); font-size: 0.85rem; color: var(--amber); border: 1px solid var(--amber-deep); border-radius: 8px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(242,166,60,0.05); }
  .step h3 { margin-bottom: 7px; }
  .step p { color: var(--muted); font-size: 0.97rem; }
  .step p + p { margin-top: 6px; }
  .step .note { color: var(--faint); font-size: 0.88rem; }
  @media (min-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
  .kbd, .chip-mono {
    font-family: var(--mono); font-size: 0.86em; color: var(--amber-bright);
    background: rgba(242,166,60,0.08); padding: 1px 6px; border-radius: 5px;
    overflow-wrap: anywhere;
  }
  .chip-mono.cool { color: var(--teal-bright); background: rgba(52,205,191,0.08); }
  .after-steps { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .after-steps .hint { color: var(--faint); font-size: 0.9rem; }

  /* ---------- day panels ---------- */
  .panels { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .panel-card {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px;
    background: linear-gradient(150deg, var(--panel-2), var(--panel));
    display: flex; flex-direction: column; gap: 13px;
  }
  .panel-card.warm { border-top: 2px solid var(--amber); }
  .panel-card.cool { border-top: 2px solid var(--teal); }
  .panel-card .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
  .panel-card.warm .k { color: var(--amber); }
  .panel-card.cool .k { color: var(--teal); }
  .panel-card p { color: var(--muted); font-size: 0.97rem; }
  .panel-card .body-strong { color: #cdd9e1; font-size: 1rem; line-height: 1.6; }
  .tl { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .tl li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: baseline; font-size: 0.93rem; color: var(--muted); }
  .tl li .t { font-family: var(--mono); font-size: 0.78rem; color: var(--amber); letter-spacing: 0.04em; }
  .tl li b { color: var(--ink); font-weight: 620; }

  /* ---------- specs ---------- */
  .specs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 17px 26px; border-bottom: 1px solid var(--line); align-items: baseline; }
  .spec-row:last-child { border-bottom: 0; }
  .spec-row:nth-child(odd) { background: rgba(255,255,255,0.012); }
  .spec-row .lab { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .spec-row .val { color: var(--ink); font-size: 0.97rem; min-width: 0; overflow-wrap: anywhere; }
  .spec-row .val .mono { font-family: var(--mono); color: var(--amber-bright); font-size: 0.9em; }
  @media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; gap: 5px; } }

  /* ---------- buy band ---------- */
  .buy {
    border: 1px solid var(--amber-deep); border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(242,166,60,0.09), rgba(15,26,36,0.6));
    padding: clamp(30px, 5vw, 52px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  }
  .buy h2 { max-width: 20ch; }
  .buy .lead { max-width: 56ch; }
  .buy-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .buy .fine { font-size: 0.86rem; color: var(--faint); }
  .buy .fine a { color: var(--amber-bright); border-bottom: 1px solid rgba(255,194,102,0.35); }

  /* ---------- help ---------- */
  .help { display: grid; gap: 12px; }
  .help li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; color: var(--muted); font-size: 0.96rem; }
  .help li .tick { color: var(--amber); margin-top: 2px; }
  .help li b { color: var(--ink); font-weight: 640; }
  ul.help { margin: 0; padding: 0; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 46px 0 58px; }
  .foot-grid { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: flex-start; }
  .foot-brand { display: flex; flex-direction: column; gap: 10px; max-width: 40ch; }
  .foot-brand p { color: var(--faint); font-size: 0.85rem; }
  .lineage {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    font-family: var(--mono); font-size: 0.76rem; color: var(--muted);
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,0.015); margin-top: 4px;
  }
  .lineage .tag { color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; }
  .lineage b { color: var(--amber-bright); font-weight: 600; }
  .foot-links { display: flex; gap: 40px; flex-wrap: wrap; font-size: 0.9rem; }
  .foot-col { display: flex; flex-direction: column; gap: 9px; }
  .foot-col .h { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 3px; }
  .foot-col a, .foot-col span { color: var(--muted); }
  .foot-col a:hover { color: var(--amber-bright); }
  .fineprint { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
  /* ---------- product grid (the /home hub) ---------- */
  .prods { display: grid; gap: 20px; }
  @media (min-width: 720px) { .prods { grid-template-columns: repeat(2, 1fr); } }
  .prod {
    display: flex; flex-direction: column; gap: 15px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    padding: 26px 24px 24px; position: relative; overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .prod::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
                 background: linear-gradient(90deg, var(--amber), transparent 70%); }
  .prod.cool::after { background: linear-gradient(90deg, var(--teal), transparent 70%); }
  .prod:hover { border-color: var(--amber-deep); transform: translateY(-4px);
                box-shadow: 0 26px 60px -34px rgba(242,166,60,0.5); }
  .prod.cool:hover { border-color: var(--teal-deep); box-shadow: 0 26px 60px -34px rgba(52,205,191,0.5); }
  @media (prefers-reduced-motion: reduce) { .prod:hover { transform: none; } }
  .prod .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
  .prod.cool .k { color: var(--teal); }
  .prod h3 { font-size: 1.42rem; letter-spacing: -0.02em; }
  .prod .sub { color: var(--muted); font-size: 0.97rem; }
  .prod .desc { color: #cdd9e1; font-size: 0.95rem; line-height: 1.6; }
  .prod .go { margin-top: auto; padding-top: 10px; }
  .prod .btn-teal { background: var(--teal); color: #052925;
                    box-shadow: 0 0 0 1px rgba(52,205,191,0.3), 0 8px 30px -10px rgba(52,205,191,0.6); }
  .prod:hover .btn-teal { background: var(--teal-bright); }
  .prod .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .prod .chips span {
    font-family: var(--mono); font-size: 0.7rem; color: var(--faint);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
    background: rgba(255,255,255,0.015);
  }

  /* the little screen mock that tops each product card */
  .mock { border: 1px solid var(--line); border-radius: 10px; background: #05080b;
          height: 132px; padding: 11px 13px; overflow: hidden; position: relative;
          font-family: var(--mono); line-height: 1.35; display: flex; flex-direction: column; }
  .mock::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.17) 0 1px, transparent 1px 6px),
                repeating-linear-gradient(90deg, rgba(0,0,0,0.17) 0 1px, transparent 1px 6px);
    mix-blend-mode: multiply;
  }
  .mock .mh { flex: none; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.1em; padding: 3px 7px;
              margin: -2px -4px 8px; border-radius: 3px; color: #0a0d10; background: var(--amber);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mock .mh.cool { background: var(--teal); }
  .mock .mr { flex: none; display: flex; justify-content: space-between; gap: 10px; font-size: 0.74rem;
              color: #d5e4ee; text-shadow: 0 0 7px currentColor; padding: 1.5px 0; }
  .mock .mr .r { font-variant-numeric: tabular-nums; flex: none; }
  .mock .mr.hot { color: var(--amber-bright); }
  .mock .mr.on { color: var(--teal-bright); }
  .mock .big { font-size: 1.45rem; font-weight: 700; color: var(--amber-bright);
               text-shadow: 0 0 12px currentColor; letter-spacing: 0.02em; }
  .mock .mid { margin: auto 0; display: flex; flex-direction: column; gap: 2px; }

  /* ---------- "works with Home Assistant" band ---------- */
  .ha-band {
    border: 1px solid var(--teal-deep); border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(52,205,191,0.08), rgba(15,26,36,0.6));
    padding: clamp(28px, 4.5vw, 44px); display: grid; gap: 26px;
  }
  @media (min-width: 860px) { .ha-band { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
  .ha-band h2 { max-width: 16ch; }
  .ha-points { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .ha-points div { display: flex; flex-direction: column; gap: 5px; }
  .ha-points b { color: var(--ink); font-weight: 640; font-size: 0.97rem; }
  .ha-points p { color: var(--muted); font-size: 0.92rem; }

  /* ---------- plain reference table (settings, actions, screens) ---------- */
  .tbl { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .tbl .tr { display: grid; grid-template-columns: 190px 1fr 108px; gap: 18px;
             padding: 15px 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
  .tbl.two .tr { grid-template-columns: 220px 1fr; }
  .tbl .tr:last-child { border-bottom: 0; }
  .tbl .tr:nth-child(even) { background: rgba(255,255,255,0.012); }
  .tbl .tr.head { background: rgba(255,255,255,0.03); }
  .tbl .tr.head span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
                       text-transform: uppercase; color: var(--faint); }
  .tbl .n { color: var(--ink); font-size: 0.95rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .tbl .n code, .tbl code { font-family: var(--mono); font-size: 0.86em; color: var(--amber-bright);
                            background: rgba(242,166,60,0.08); padding: 1px 6px; border-radius: 5px;
                            font-weight: 500; overflow-wrap: anywhere; }
  .tbl .d { color: var(--muted); font-size: 0.93rem; min-width: 0; overflow-wrap: anywhere; }
  .tbl .v { font-family: var(--mono); font-size: 0.82rem; color: var(--teal-bright); flex: none; }
  @media (max-width: 680px) {
    .tbl .tr, .tbl.two .tr { grid-template-columns: 1fr; gap: 4px; }
    .tbl .tr.head { display: none; }
    .tbl .v { color: var(--faint); }
  }

  /* a character-LCD variant of the card mock: backlit glass, not emissive LEDs */
  .mock.lcd { background: #0b0d10; padding: 13px; display: grid; place-items: stretch; }
  .mock.lcd::after { display: none; }
  .mock.lcd .glass {
    background: #10538f; border-radius: 4px; padding: 11px 10px;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.45), 0 0 26px -8px rgba(21,101,168,0.7);
    container-type: inline-size;
  }
  .mock.lcd .ll {
    font-family: var(--mono); font-size: min(6.6cqw, 0.74rem); letter-spacing: 0.1em; white-space: pre;
    color: #eaf4ff; text-shadow: 0 0 6px rgba(234,244,255,0.45);
  }

  /* ---------- capability badges ----------
     These state what the device genuinely does. They are deliberately NOT the
     official "Works with Home Assistant" or "Made for ESPHome" certification
     marks, which can only be shown once the programmes approve a product (see
     README). Swapping an approved logo in here later is a local change. */
  .cert-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
                padding: 26px 0; background: rgba(255,255,255,0.012); }
  .certs { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
  .cert {
    display: inline-flex; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 11px; padding: 11px 16px 11px 13px;
    background: linear-gradient(180deg, rgba(52,205,191,0.055), rgba(255,255,255,0.012));
    transition: border-color .18s;
  }
  .cert:hover { border-color: var(--teal-deep); }
  .cert svg { width: 22px; height: 22px; flex: none; color: var(--teal); }
  .cert .ct { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .cert .ct b { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em;
                text-transform: uppercase; color: var(--faint); font-weight: 650; }
  .cert .ct span { font-size: 0.94rem; color: var(--ink); font-weight: 640; letter-spacing: -0.01em; }
  .certs-note { margin-top: 16px; font-size: 0.85rem; color: var(--faint); max-width: 74ch; }
  .certs-note a { color: var(--teal-bright); border-bottom: 1px solid rgba(95,227,214,0.3); }
  @media (max-width: 520px) { .cert { width: 100%; } }