/* ==========================================================================
   MARK One – Hardware page. Builds on style.css (same layers, tokens, header, footer).
   Mobile-first; from 1100px up it is the 1920px design scaled with --u.
   ========================================================================== */
@layer components {

  /* ---------- header on the dark hero ---------- */
  body.on-dark .logo { color: #9e9e9e; }
  .nav a[aria-current="page"] { color: #000; }

  /* ---------- hero ---------- */
  .hw-hero { background: #000; color: #fff; }
  .hw-hero__img { position: absolute; inset: 0; overflow: hidden; }
  .hw-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--op, 60% 40%); }
  .hw-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 48%); }
  .hw-hero .hero__title { color: #fff; }
  /* clean glass button (same recipe as the Elementor site): no gradient, 1px light ring */
  .hw-order { --bw: clamp(1px, .0625em, 4px); position: relative; color: #fff; font-weight: 500; text-shadow: 0 .25em .05em rgba(0,0,0,.1);
    background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(clamp(1px, .125em, 4px)); backdrop-filter: blur(clamp(1px, .125em, 4px));
    box-shadow: inset 0 .125em .125em rgba(0,0,0,.05), inset 0 -.125em .125em rgba(255,255,255,.5), 0 .25em .125em -.125em rgba(0,0,0,.2), 0 0 .1em .25em inset rgba(255,255,255,.2);
    transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 500ms ease; -webkit-text-stroke: 0; }
  .hw-order::after { content: ""; position: absolute; inset: calc(var(--bw) / -2); padding: var(--bw); border-radius: inherit; pointer-events: none;
    background: rgba(255,255,255,.5); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 calc(var(--bw) / 2) rgba(255,255,255,.5); }
  .hw-order:hover { background: rgba(255,255,255,.12); transform: scale(.975); }

  /* ---------- text ---------- */
  .hw-label { font-size: clamp(14px, 3.8vw, 19px); color: var(--ink-2); margin: 0 0 14px; }
  .hband .hw-label { color: #000; margin: 0; }
  .hband__h, .hband__h2 { font-size: clamp(30px, 9vw, 52px); line-height: 1.1; letter-spacing: -.02em; margin: 10px 0 0; padding: 0 var(--pad); text-wrap: balance; }
  .hband__sub { font-size: clamp(16px, 4.4vw, 24px); line-height: 1.25; letter-spacing: -.01em; color: #0f0f0f; margin: 14px auto 0; max-width: 21em; padding: 0 var(--pad); text-wrap: balance; }
  .pt { position: absolute; z-index: 2; left: 16px; right: 16px; margin: 0; text-align: left; font-size: clamp(20px, 5.6vw, 30px); line-height: 1.2; letter-spacing: -.01em; }
  .pt--t { top: 16px; } .pt--b { bottom: 16px; }
  .teaser .hw-label { font-weight: 700; }

  /* ---------- gradient sections ---------- */
  .hband { position: relative; isolation: isolate; text-align: center; background: #fff; padding: clamp(84px, 24vw, 170px) 0 var(--gap); }
  .hband.sec--gray { background: var(--bg); }
  .hband__bg { position: absolute; inset: 0 0 auto 0; height: clamp(340px, 100vw, 620px); z-index: -1; overflow: hidden; }
  .hband--360 { padding-top: clamp(56px, 16vw, 110px); }
  .hband--360 .hband__bg { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 5 / 4; margin-top: 16px; }
  .hband--360 .hband__sub { margin-top: 6px; }
  .hp { margin: clamp(44px, 12vw, 110px) var(--gap) 0; background: #000; aspect-ratio: var(--ar, 4 / 5); --r: 16px; }
  .hband--360 .hp, .hband--body .hp, .hband--arms .hp { margin-top: clamp(36px, 10vw, 90px); }

  /* ---------- grids of panels ---------- */
  .hcards { background: #fff; padding-bottom: var(--gap); }
  .hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: var(--gap) var(--gap) 0; text-align: left; }
  .hc { position: relative; background: #000; aspect-ratio: var(--ar, 1 / 1); --r: 14px; }
  .hc.span2 { grid-column: 1 / -1; }
  .hc--cta { aspect-ratio: auto; display: grid; place-items: center; padding: clamp(56px, 16vw, 100px) 22px; text-align: center; }
  .hw-cta { font-size: clamp(24px, 6.6vw, 40px); line-height: 1.2; letter-spacing: -.02em; color: #000; text-wrap: balance; }
  .hend { background: var(--bg); padding-bottom: var(--gap); }
  .hgrid--end { padding-top: var(--gap); }
  .hband--360 .hband__bg .bgimg { inset: auto; left: 0; top: -10%; width: 100%; height: 150%; }   /* skip the card edges at the top and the black panel at the bottom of the render */
  .hc--cpu .pt { font-size: clamp(16px, 4.6vw, 24px); }
  .hc.hc--sr { background: #fff; }
  .hc--sr img { margin-top: 22%; height: 78%; }
  @media (max-width: 1099.98px) {
    .hc--sr .pt { color: #0a0a0a !important; }
    .hc--sr .pt span { color: #595959 !important; }
  }
  .panel img { object-position: var(--op, 50% 50%); }

  /* ---------- second half (page 2 of the artboard) ---------- */
  .hband--p2 .hgrid { padding-top: clamp(36px, 10vw, 90px); }
  .hband--p2 .hp + .hgrid { padding-top: var(--gap); }
  .hc--half .pt { font-size: clamp(16px, 4.6vw, 24px); }
  .hc--stat { display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px; }
  .hc--stat .t { position: relative; z-index: 2; margin: 0; }
  .hs-n { font-size: clamp(30px, 9vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
  .hs-n--big { font-size: clamp(34px, 10vw, 60px); }
  .hs-l { font-size: clamp(16px, 4.6vw, 24px); line-height: 1.2; letter-spacing: -.01em; }
  .hs-u { font-size: clamp(12px, 3.4vw, 17px); line-height: 1.25; }
  .hw-cta--s { font-size: clamp(15px, 4.2vw, 22px); margin-bottom: 14px; }
  .hw-cta--m { font-size: clamp(20px, 5.6vw, 30px); }
  .hc--sm { padding: clamp(28px, 8vw, 56px) 18px; }
  .hc--cta p + p { margin-top: 0; }
  .pt--s { font-size: clamp(14px, 4vw, 20px); }
  .pt.c { left: 12px; right: 12px; text-align: center; }
  .hc--safe .pt { right: 56%; }
  .hc--r .pt { right: 40%; }
  .hband__bg--crop .bgimg { inset: auto; left: 0; top: 0; width: 100%; height: 143%; object-position: 50% 0; }   /* the render also holds the tile tops further down */
}

@layer desktop {
  @media (min-width: 1100px) {
    /* header: dark glass while the dark hero is on screen */
    .nav { transition: background .3s, box-shadow .3s; }
    body.on-dark .nav { background: rgba(19,19,19,.77); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 26px rgba(0,0,0,.18); }
    body.on-dark .nav a { color: #3f3f3f; }
    body.on-dark .nav a[aria-current="page"] { color: #9a9a9a; }
    .nav a[aria-current="page"] { color: #000; }

    /* hero */
    .hw-hero__img img.ph { object-fit: fill; }
    .hw-hero__img::after { inset: 0 auto 0 0; width: calc(var(--u) * 190); background: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,0) 100%); }
    .hw-order { left: auto; right: calc(var(--u) * 34.1); top: calc(var(--u) * 992.3); width: calc(var(--u) * 99.9); height: calc(var(--u) * 52.2); border-radius: calc(var(--u) * 26.1); line-height: calc(var(--u) * 52.2); }

    /* text blocks */
    .hw-label { margin: 0; }
    .hband__h, .hband__h2, .hband__sub { margin: 0; padding: 0; max-width: none; }
    .pt { margin: 0; }
    .teaser .hw-label { font-weight: 700; }
    .hw-cta { text-wrap: nowrap; }

    /* sections */
    .hband, .hend, .hcards { padding: 0; text-align: initial; }
    .hband { background: transparent; }
    .hband.sec--gray { background: var(--bg); }
    .hband__bg, .hband--360 .hband__bg { position: absolute; z-index: -1; inset: auto; margin: 0; aspect-ratio: auto;
      left: 0; top: calc(var(--u) * var(--by)); width: 100%; height: calc(var(--u) * var(--bh)); }
    .hp, .hband--360 .hp, .hband--body .hp, .hband--arms .hp { margin: 0; }
    .hgrid, .hgrid--end { display: contents; padding: 0; }
    .hc { aspect-ratio: auto; }
    .hc--cta { display: block; padding: 0; }
    .hband--360 .hband__bg .bgimg { inset: 0; height: 100%; }
    .hband__bg--crop .bgimg { inset: 0; height: 100%; }
    .hc--sr img { margin-top: 0; }
    .hc.hc--sr { background: #000; }
    .hc--cpu .pt { font-size: calc(var(--u) * var(--s)); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .hc, .hp { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    }
  }
}