/* Shared site styles for ordelleo.com.
   Extracted from index.html when hardware.html was added — two pages sharing one
   design system should not carry two copies of it. Linked from both pages. */

html { scroll-behavior: smooth; }
  body { margin: 0; background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; color: #14161a; -webkit-font-smoothing: antialiased; }
  a { color: #2563eb; text-decoration: none; }
  a:hover { color: #1e40af; }
  ::selection { background: #d9e4ff; }
  @keyframes om-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);}
  [data-reveal="left"]{transform:translateX(-34px);}
  [data-reveal="right"]{transform:translateX(34px);}
  [data-reveal].is-revealed{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1 !important;transform:none !important;transition:none;}}

  .ohv-0:hover{ background:#1e40af !important; }
  .ohv-1:hover{ background:#1e40af !important; }
  .ohv-2:hover{ background:#f3f4f6 !important; }
  .ohv-3:hover{ animation-play-state:paused !important; }
  .ohv-4:hover{ color:#1e40af !important; }
  .ohv-5:hover{ background:#000 !important; }
  .ohv-6:hover{ background:#1e40af !important; }
  .ohv-demo:hover{ background:#000 !important; }

  /* ---------- Mobile / responsive ---------- */
  @media (max-width: 768px) {
    /* Nav: keep logo + primary CTA, hide the section anchor links */
    [style*="padding:0 32px"] { padding: 0 18px !important; }
    header nav { gap: 12px !important; }
    header nav a[href^="#"]:not([style*="background:#2563eb"]) { display: none !important; }

    /* Logo mark scales down with its wordmark (which the 30px rule below shrinks) */
    .om-logo-mark { width: 34px !important; height: 34px !important; }

    /* Collapse every multi-column grid to a single column */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Scale display headings down for small screens */
    [style*="font-size:64px"] { font-size: 33px !important; letter-spacing: -0.02em !important; }
    [style*="font-size:48px"] { font-size: 29px !important; }
    [style*="font-size:46px"] { font-size: 28px !important; }
    [style*="font-size:44px"] { font-size: 27px !important; }
    [style*="font-size:40px"] { font-size: 26px !important; }
    [style*="font-size:34px"] { font-size: 24px !important; }
    [style*="font-size:30px"] { font-size: 22px !important; }
    [style*="font-size:22px"] { font-size: 19px !important; }
    [style*="font-size:21px"] { font-size: 18px !important; }
    [style*="font-size:19px"] { font-size: 17px !important; }

    /* Tighter section gutters + vertical rhythm */
    [style*="padding:96px 32px"] { padding: 56px 20px !important; }
    [style*="padding:88px 32px"] { padding: 52px 20px !important; }
    [style*="padding:80px 32px"] { padding: 52px 20px !important; }
    [style*="padding:64px 32px 40px"] { padding: 46px 20px 30px !important; }
    [style*="padding:22px 32px"] { padding: 16px 20px !important; }

    /* Full-width demo email input */
    [style*="width:320px"] { width: 100% !important; }

    /* Shrink hero decorative glow so it can never cause horizontal scroll */
    [style*="width:620px"] { width: 300px !important; height: 300px !important; right: -110px !important; top: -90px !important; }
  }