@charset "UTF-8";
/* CSS Document */
  #videoDialog::backdrop, #downloadDialog::backdrop { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

  /* Download popup (posts to MAdownload.php) */
  #downloadDialog {
    border: 0; padding: 0; background: #fff; color: var(--ink);
    width: min(460px, 94vw); border-radius: var(--radius-lg);
    box-shadow: 0 40px 100px rgba(0,0,0,.45);
  }
:root {
    --bg: #fbfbfd;
    --bg-alt: #f5f5f7;
    --ink: #1d1d1f;
    --ink-soft: #6e6e73;
    --ink-on-dark: #f5f5f7;
    --ink-soft-on-dark: #a1a1a6;
    /* piQtility red: change --red here to retheme the whole page */
    --red: #e0262c;
    --red-hover: #f23b41;
    --red-rgb: 224, 38, 44;
    --blue: var(--red);
    --blue-hover: var(--red-hover);
    --link: #c8202a;
    --link-on-dark: #ff5c61;
    --black: #000;
    --font: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --radius-btn: 8px;
    --radius-lg: 28px;
    --ease: cubic-bezier(.28, .11, .32, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.47;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

  /* ───────── Global nav ───────── */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    height: 48px;
    background: rgba(22, 22, 23, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .nav-inner {
    max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-logo img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
  .nav ul a { font-size: 12px; color: rgba(245,245,247,.8); transition: color .25s var(--ease); }
  .nav ul a:hover { color: #fff; }
  .nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
  .nav-toggle span { display: block; width: 18px; height: 1px; background: #f5f5f7; margin: 5px 0; transition: transform .3s var(--ease), opacity .3s; }

  /* ───────── Type & buttons ───────── */
  .headline {
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.08;
    margin: 0;
  }
  .eyebrow-xl { font-size: clamp(56px, 11vw, 112px); }
  .h-xl { font-size: clamp(34px, 6vw, 64px); }
  .h-lg { font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.03em; line-height: 1.1; }
  .sub { font-size: clamp(19px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.015em; font-weight: 500; margin: 0; }
  .lead { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; letter-spacing: -.01em; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue); color: #fff;
    font-size: 17px; font-weight: 500; line-height: 1; padding: 14px 26px;
    border-radius: var(--radius-btn); border: 0; cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .btn:hover { background: var(--blue-hover); }
  .btn:active { transform: scale(.97); }
  .btn.ghost { background: transparent; color: var(--link); padding-inline: 0; }
  .btn.ghost:hover { text-decoration: underline; background: transparent; }
  .on-dark .btn.ghost { color: var(--link-on-dark); }
  .chev::after { content: " \203A"; }
  .cta-row { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 28px; }

  .section { padding: clamp(80px, 12vw, 140px) 22px; text-align: center; }
  .wrap { max-width: 980px; margin: 0 auto; }
  .wrap-wide { max-width: 1280px; margin: 0 auto; }
  .on-dark { background: var(--black); color: var(--ink-on-dark); }
  .on-alt { background: var(--bg-alt); }

  /* ───────── Hero ───────── */
  .hero {
    background: var(--black); color: var(--ink-on-dark);
    padding: 120px 22px 0; text-align: center; overflow: hidden; position: relative;
  }
  .hero::before {
    content: ""; position: absolute; left: 50%; top: -10%;
    width: 1100px; height: 700px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(var(--red-rgb),.42), rgba(120,20,40,.2) 55%, transparent 75%);
    filter: blur(30px); pointer-events: none;
  }
  .hero > * { position: relative; }
  .hero h1 {
    background: linear-gradient(180deg, #fff 30%, #a1a1a6 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero .sub { color: var(--ink-soft-on-dark); margin-top: 14px; max-width: 700px; margin-inline: auto; }
  .hero-media {
    max-width: 1280px; margin: 64px auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden; position: relative;
    transform-origin: center bottom;
    will-change: transform;
  }
  .hero-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .hero-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 22px 28px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    font-size: clamp(20px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #fff;
  }

  /* load-in sequence (the one orchestrated moment) */
  .hero h1, .hero .sub, .hero .cta-row { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease) forwards; }
  .hero .sub { animation-delay: .15s; }
  .hero .cta-row { animation-delay: .3s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* scroll reveal */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }

  /* ───────── piQtility ───────── */
  .copy { max-width: 760px; margin: 36px auto 0; color: var(--ink-soft); text-align: left; }
  .copy p { margin: 0 0 1.1em; }
  .copy strong, .copy b { color: var(--ink); }

  .video-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg); overflow: hidden; background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
  }
  .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video-wrap { max-width: 1080px; margin: 72px auto 0; }

  /* upscaling band */
  .band { background: var(--black); color: var(--ink-on-dark); }
  .band .sub { color: var(--ink-soft-on-dark); margin-top: 18px; }
  .band .video-wrap { margin-top: 56px; }

  /* ───────── maGalleryCreator ───────── */
  .gallery-media {
    max-width: 1280px; margin: 64px auto 0; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.18);
    will-change: transform;
  }
  .gallery-media img { width: 100%; height: auto; }
  .product-name { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink-soft); }

  /* ───────── Suite ───────── */
  .suite {
    background: radial-gradient(120% 90% at 50% 0%, #1c1c24 0%, #000 60%);
    color: var(--ink-on-dark);
  }
  .suite-pill {
    display: inline-block; font-size: 14px; font-weight: 700;
    padding: 8px 16px; border-radius: var(--radius-btn);
    background: rgba(255,255,255,.1); color: #f5f5f7; margin-bottom: 28px;
  }
  .suite h2 { font-size: clamp(34px, 6vw, 72px); }
  .suite .tools {
    margin: 44px auto 0; max-width: 900px;
    font-size: clamp(20px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
    color: #f5f5f7;
  }
  .suite .tools span { color: var(--ink-soft-on-dark); font-weight: 500; }
  .suite .perk { color: var(--ink-soft-on-dark); font-size: clamp(17px, 2vw, 21px); margin-top: 18px; }
  .suite .big-number {
    font-size: clamp(110px, 24vw, 280px); font-weight: 700; letter-spacing: -.06em; line-height: .9;
    background: linear-gradient(180deg, #ff5c61, #e0262c 55%, #8f0f1a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin: 0 0 8px;
  }

  /* ───────── Product tiles ───────── */
  .tiles { background: var(--bg-alt); padding: 12px 12px 12px; }
  .tiles-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile {
    position: relative; min-height: 440px; padding: 48px 28px 36px;
    background: #fff; border-radius: 22px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    overflow: hidden;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .tile:hover { transform: scale(1.012); box-shadow: 0 20px 50px rgba(0,0,0,.12); }
  .tile.dark { background: #670203; color: var(--ink-on-dark); }
  .tile.dark p { color: var(--ink-soft-on-dark); }
  .tile.wide { grid-column: 1 / -1; min-height: 360px; }
  .tile h3 { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .tile p { margin: 10px 0 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.25; color: var(--ink-soft); max-width: 420px; }
  .tile .links { margin-top: 18px; display: flex; gap: 22px; }
  .tile .glyph {
    margin-top: auto; padding-top: 36px;
    font-size: clamp(90px, 13vw, 150px); font-weight: 700; letter-spacing: -.06em; line-height: .9;
    opacity: .95; user-select: none;
  }
  .g1, .g2, .g3, .g4, .g5, .g6, .g7 { -webkit-background-clip: text; background-clip: text; color: transparent; }
  .g1 { background-image: linear-gradient(135deg, #ff5c61, #e0262c); }
  .g2 { background-image: linear-gradient(135deg, #e0262c, #8f0f1a); }
  .g3 { background-image: linear-gradient(135deg, #ff7a59, #e0262c); }
  .g4 { background-image: linear-gradient(135deg, #e0262c, #b3122a); }
  .g5 { background-image: linear-gradient(135deg, #ff5c61, #b3122a); }
  .g6 { background-image: linear-gradient(135deg, #ff8a70, #e0262c); }
  .g7 { background-image: linear-gradient(135deg, #ff5c61, #c8202a); }

  /* ───────── Newsletter ───────── */
  .newsletter { background: var(--bg-alt); }
  .newsletter .kicker { font-size: clamp(17px, 2vw, 21px); font-weight: 700; color: var(--ink-soft); margin: 0 0 14px; }
  .newsletter .sub { color: var(--ink-soft); margin-top: 16px; }
  .newsletter form { margin: 40px auto 0; display: flex; gap: 10px; max-width: 520px; flex-wrap: wrap; justify-content: center; }
  .newsletter input[type=email] {
    flex: 1 1 260px; font: inherit; font-size: 17px; padding: 14px 18px;
    border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
  }
  .newsletter input[type=email]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--red-rgb),.22); }
  .newsletter .nl-check {
    flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; color: var(--ink-soft); cursor: pointer; text-align: left;
  }
  .newsletter .nl-check input { width: 18px; height: 18px; accent-color: var(--red); flex: none; cursor: pointer; }
  .newsletter .nl-captcha { flex: 1 1 100%; display: flex; justify-content: center; min-height: 78px; }
  .newsletter input.btn[type=submit] { font-family: inherit; flex: 0 0 auto; }

  /* ───────── Footer ───────── */
  footer { background: var(--bg-alt); color: var(--ink-soft); font-size: 12px; padding: 0 22px 28px; }
  .foot-inner { max-width: 1024px; margin: 0 auto; border-top: 1px solid #d2d2d7; padding-top: 20px; }
  .foot-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-bottom: 18px; border-bottom: 1px solid #d2d2d7; margin-bottom: 18px; }
  .foot-follow strong { color: var(--ink); font-size: 14px; font-weight: 700; }
  .foot-follow a, .foot-legal a { color: var(--link); }
  .foot-follow a:hover, .foot-legal a:hover { text-decoration: underline; }
  .foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
  .cookie-note { margin: 0 0 14px; }

  /* ───────── Responsive ───────── */
  @media (max-width: 800px) {
    .tiles-grid { grid-template-columns: 1fr; }
    .tile { min-height: 380px; }
    .nav ul {
      position: absolute; top: 48px; left: 0; right: 0; flex-direction: column; gap: 0;
      background: rgba(22,22,23,.96); padding: 8px 22px 20px;
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
      max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s;
    }
    .nav.open ul { max-height: 360px; opacity: 1; }
    .nav ul a { display: block; font-size: 17px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .nav-toggle { display: block; }
    .nav.open .nav-toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
    .nav.open .nav-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
    .hero { padding-top: 96px; }
    .hero-media { margin-top: 44px; border-radius: 18px 18px 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero h1, .hero .sub, .hero .cta-row { animation: none; opacity: 1; transform: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-media, .gallery-media { transform: none !important; }
  }