/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*=== Body ===*/

html {
    scroll-padding-top: 7.25rem; /* This creates space for your sticky nav */
}

/*.description {
  text-wrap: balance
}*/

ol, ul {
  font-weight: 400 !important;
  font-size: clamp(0.875rem, 0.616935rem + 0.537634vw, 1rem) !important;
}

h1.heading.badge.p {
    text-transform: uppercase !important;
    /* font-size: 1.2rem; */
    color: #CECFD2;
    letter-spacing: 1.2px;
}

b, strong {
    font-weight: 600;
}

/*=== Header ===*/
.header__container {
  z-index: 1000 !important;
}
.header__menu-announcement p {
  font-size: 14px;
}
/*=== Hero Sections ===*/
.hero-home {
 background: radial-gradient(91.6% 50% at 50% 50%, #0B1155 0%, #050324 66.98%);
}
/*=== Buttons ===*/
/* -----------------------------------------------------------
   Button hover effects (theme-safe)
   - Outline variants: left→right fill using currentColor
   - Solid variants: subtle "shine" sweep + gentle lift
   - Works with HubSpot CTAs, anchors, buttons, and inputs
   ----------------------------------------------------------- */

#hs_cos_wrapper_widget_1760068901125 .btn-custom-3256523 .cta-button {
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Shared timing + shape (adjust per wrapper if needed) */
.btn-wrapper {
  --btn-speed: 620ms;
  --btn-ease: cubic-bezier(.22,.61,.36,1);
  --btn-radius: 3px;
  /* Optional: text color after an outline fills; remove if theme handles it */
  --btn-on-fill: #fff;
}

/* Base prep for all buttons inside wrappers */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  position: relative;
  border-radius: var(--btn-radius);
  transition:
    color var(--btn-speed) var(--btn-ease),
    border-color var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    background-size var(--btn-speed) var(--btn-ease),
    filter var(--btn-speed) var(--btn-ease);
}

/* ===========================================================
   OUTLINE VARIANTS  (primary + secondary)
   - Uses currentColor for the sliding fill
   - Keeps your theme's initial border/text colors
   =========================================================== */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]),
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  /* The gradient is the sweep layer; we don't touch base bg/border */
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
}

/* Hover/focus: slide fill in (leave border-color to theme) */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  background-size: 100% 100%;
  /* If your theme already switches text to a contrasting color, remove this: */
  color: var(--btn-on-fill);
}


.btn-wrapper.btn-outline-white-wrapper :is(.cta_button, .cta-button, [data-hubspot-cta-id], input[type="submit"], input[type="button"], button[type='submit']):hover {
  color: #050324;
}
/* ===========================================================
   SOLID VARIANTS  (primary + secondary)
   - Keep theme bg/border/text exactly as-is
   - Add a shine overlay (for elements supporting ::after)
   - Inputs get a simple brightness lift fallback
   =========================================================== */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button),
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button) {
  overflow: hidden;
  isolation: isolate; /* contains the shine layer */
}

/* Shine layer (not rendered on inputs) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges under border radius */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed) var(--btn-ease);
  pointer-events: none;
}

/* Hover/focus: sweep + gentle lift (no color overrides) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible {
  filter: brightness(1.05);
}
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after {
  transform: translateX(120%);
}

/* Inputs (solid variants): simple lift only; ::after not supported */
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]),
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]) {
  /* keep theme’s bg/border/text */
}
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):focus-visible {
  filter: brightness(1.05);
}

/* ===========================================================
   Accessibility niceties
   =========================================================== */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  outline: 2px solid currentColor;  /* uses the variant’s color */
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
    transition: none;
  }
}

/* ===========================================================
   INFO VARIANT — Button + Icon + Underline
   =========================================================== */

/* Base button (target the actual anchor in your wrapper) */
.btn-wrapper.btn-info-wrapper > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;            /* space between text and icon */
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem !important;
  line-height: 1;
  text-decoration: none;
  position: relative;
  overflow: visible;
  border-radius: 0px;
}

/* Icon wrapper (HubSpot uses underscore class) */
.btn-wrapper.btn-info-wrapper .button_icon {
  display: inline-flex;
  line-height: 0;         /* kills stray baseline gaps */
}

/* SVG sizing + color inheritance */
.btn-wrapper.btn-info-wrapper .button_icon svg {
  width: 1.15em;           /* adjust size as needed */
  height: 1.15em;
  display: block;
  fill: currentColor;     /* match text color */
  transition: transform .28s ease; /* for the slide */
}

/* Slide icon slightly right on hover/focus */
.btn-wrapper.btn-info-wrapper > a:is(:hover, :focus-visible) .button_icon svg {
  transform: translateX(3px);    /* tweak to 2–4px to taste */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper.btn-info-wrapper > a,
  .btn-wrapper.btn-info-wrapper .button_icon svg {
    transition: none;
  }
}

/*=== Sliders ===*/
.qd-slider .splide__track {
    position: relative; /* Make sure the pseudo-element is positioned relative to this element */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/*=== Bacgrounds ===
.sr-multicol-media.sr-three-col-02 {
  background: radial-gradient(65.6% 43.07% at 50% 50%, rgba(26, 18, 138, 0.36) 0%, rgba(5, 3, 36, 0.14) 89.46%);
  background-position: left center;
  background-size: 50% 100%; Adjust as needed 
  background-repeat: no-repeat;
}*/

/*=== Sr Two Col 02 ===*/
.sr-multicol-media.sr-bg-image .sr-col {
  border-right: none !important;
}

/*=== Margins & Padding ===*/
.qd-slider.margin-bottom .heading {
  margin-bottom: 5.375rem;
}
@media (max-width: 767px) {
  .sr-padding-full {
    padding: 3.25rem 0;
  }
  .title-section .sr-spacer-bottom-50 {
    padding-bottom: 1.25rem;
  }
  .sr-one-col-02-item.sr-card {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}
}

/*=== Forms ===*/
.legal-consent-container p {
    font-size: 0.8rem;
    text-align: left;
}
.legal-consent-container a:after {
    background: none !important;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
  margin-left: 0px !important;
  font-size: 0.8rem;
}
input:is([type="radio"], [type="checkbox"]):checked+span:before {
    background-color: transparent !important;
}
/* Robust shine sweep for HubSpot form submit (no width changes) */
.hs_submit .actions {
  position: relative;          /* anchor overlay */
  overflow: hidden;            /* clip the shine */
  /* no display/width here → HubSpot controls sizing */
}

/* Keep theme styles; no radius override */
.hs_submit .actions .hs-button[type="submit"] {
  position: relative;
  z-index: 1;
  transition: filter var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
}

/* Shine layer lives on the wrapper */
.hs_submit .actions::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges, play nice with button radius */
  /* if your wrapper lacks a radius, this still looks clean due to the fade */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
  pointer-events: none;
  z-index: 2;
}

/* Trigger the sweep when the INPUT is hovered/focused */
.hs_submit .actions:has(.hs-button[type="submit"]:hover)::after,
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible)::after {
  transform: translateX(120%);
}

.hs_submit .actions:has(.hs-button[type="submit"]:hover) .hs-button[type="submit"],
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible) .hs-button[type="submit"] {
  filter: brightness(1.05);
}

/* =========================
   HubSpot SELECT styling
   (closed state only)
   ========================= */

.hs-form select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #0b0f2a; /* your dark background */
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;

  padding: 14px 44px 14px 16px;
  line-height: 1.2;

  width: 100%;
}

/* Focus */
.hs-form select.hs-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Placeholder option color */
.hs-form select.hs-input.is-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Hint dark UI for browsers that support it */
.hs-form select.hs-input {
  color-scheme: dark;
}
/* Tell the browser the page supports dark UI for native controls */
:root {
  color-scheme: light dark;
}

/* Ensure HubSpot selects prefer dark native UI where supported */
.hs-form select.hs-input {
  color-scheme: dark;
}

textarea, select, .form-control, input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]), input[readonly]:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
  font-size: 0.875rem !important;
}
.hsfc-DataPrivacyField {
    font-size: 14px;
    opacity: 0.7;
}
.hsfc-DataPrivacyField a::after{
    background: none !important;
}

.hsfc-DataPrivacyField a {
  text-decoration: underline;
}
.hsfc-Button {
font-size: .875rem !important;
font-weight: 600 !important;
}

@media (forced-colors: active) {
  .hs-form select.hs-input {
    forced-color-adjust: auto;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hs_submit .actions::after {
    transition: none;
    transform: translateX(0);
    opacity: .12;
  }
}

/*=== Badge ===*/
.sr-badge {
    display: inline-block;
    padding: .95rem 1.2rem;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .05em;
    border-radius: 999px;
    margin-bottom: .8rem;
    color: inherit;
    background: 
 color-mix(in srgb, currentColor 12%, transparent);
    border: 1px none
 color-mix(in srgb, currentColor 22%, transparent);
    align-self: flex-start;
    white-space: nowrap;
}

/*=== Two Column Media ===*/
.sr-two-col-gallery-01 .columns .image-inner img {
  border-radius: 10px !important;
}

/*=== Blog ===*/
.blog-steps {
  padding-left: 1.25em;
  margin: 2rem 0;
}

.blog-steps li {
  font-size: clamp(1.25rem, 1.075268817204301vw + 0.7338709677419355rem, 1.5rem); /* h5 size */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.blog-steps li::marker {
  font-size: clamp(1.25rem, 1.075268817204301vw + 0.7338709677419355rem, 1.5rem); /* same as headline */
  font-weight: 600;
  color: #fff;
}

.blog-steps li strong {
  display: inline;
  font-weight: 600;
}

.blog-steps li p {
  margin: 0.25rem 0 1.25rem 0;
  font-size: clamp(0.875rem, 0.5376344086021505vw + 0.6169354838709677rem, 1.0rem);
  font-weight: normal;
  line-height: 1.6;
}

ol.blog-steps ul li {
    font-size: clamp(0.875rem, 0.5376344086021505vw + 0.6169354838709677rem, 1.0rem);
    font-weight: 400;
}

/*=== Animations ===*/
/* ==========================================================================
   QD Bios chat graphic (animated) -- qd-bios-chat.css
   Markup: qd-bios-chat.html   |   Preview: qd-bios-chat-preview.html

   Usage
   - Wrap the markup in any column; it fills 100% of the parent width and keeps a 4:3 ratio.
   - Theme: add ONE modifier on the root -> .qd-bios--dark  or  .qd-bios--light
   - Needs the Poppins font (400 / 600) already loaded by the theme.
   - Pure CSS animation (no JS). Loop is 8.95s. prefers-reduced-motion shows the finished state.
   - All sizes are in --u (1/800 of the graphic width), so it scales with its container.
   ========================================================================== */

.qd-bios {
  --u: .775px; /* fallback for browsers without container units */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--qd-text);
  --qd-accent: #5e6ad2;
  --qd-orange: #f2702f;
}
@supports (width: 1cqw) {
  .qd-bios { --u: calc(100cqw / 800); }
}
.qd-bios *, .qd-bios *::before, .qd-bios *::after { box-sizing: border-box; margin: 0; }

/* ---- themes ---- */
.qd-bios--dark {
  --qd-win: #10101f; --qd-card: #121226; --qd-text: #f4f3fa; --qd-muted: rgba(255,255,255,.62);
  --qd-line: rgba(255,255,255,.07); --qd-frame: rgba(255,255,255,.10); --qd-chip-b: rgba(255,255,255,.12);
  --qd-track: rgba(255,255,255,.10); --qd-active: rgba(255,255,255,.04);
  --qd-btn: #f4f3fa; --qd-btn-t: #0a0a1c;
  --qd-bubble: #1f2455; --qd-bubble-t: #f4f3fa; --qd-green: #4cb782;
  --qd-card-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6), 0 0 calc(60 * var(--u)) rgba(94,106,210,.25);
}
.qd-bios--light {
  --qd-win: #ffffff; --qd-card: #ffffff; --qd-text: #050324; --qd-muted: #5d6172;
  --qd-line: rgba(5,3,36,.07); --qd-frame: rgba(5,3,36,.10); --qd-chip-b: rgba(5,3,36,.12);
  --qd-track: rgba(5,3,36,.10); --qd-active: rgba(5,3,36,.03);
  --qd-btn: #050324; --qd-btn-t: #ffffff;
  --qd-bubble: #050324; --qd-bubble-t: #ffffff; --qd-green: #23895a;
  --qd-card-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(5,3,36,.14), 0 0 calc(60 * var(--u)) rgba(94,106,210,.12);
}

/* ---- layout ---- */
.qd-bios__stage { position: absolute; inset: 0; }
.qd-bios__window {
  position: absolute; left: calc(28 * var(--u)); top: calc(36 * var(--u)); width: calc(744 * var(--u)); height: calc(528 * var(--u));
  background: var(--qd-win); border: calc(1 * var(--u)) solid var(--qd-frame); border-radius: calc(14 * var(--u)); overflow: hidden;
}
.qd-bios__head {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(62 * var(--u)); padding: 0 calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--qd-line);
}
.qd-bios__title { font-size: calc(20 * var(--u)); font-weight: 600; }

/* header status: three layers stacked, one visible at a time */
.qd-bios__status { display: grid; justify-items: end; align-items: center; font-size: calc(13 * var(--u)); color: var(--qd-muted); }
.qd-bios__status-item { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.qd-bios__status-item--idle { opacity: 0; }
.qd-bios__status-item--search { opacity: 0; }
.qd-bios__status-item--done { opacity: 1; }
.qd-bios__spinner {
  width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--qd-track); border-top-color: var(--qd-orange);
}
.qd-bios__tick { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; }

.qd-bios__body { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)) 0; }
.qd-bios__prompt {
  align-self: flex-start; max-width: calc(590 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u));
  background: var(--qd-bubble); color: var(--qd-bubble-t); border-radius: calc(4 * var(--u));
  font-size: calc(15 * var(--u)); line-height: 1.5;
}
.qd-bios__reason {
  align-self: flex-start; display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(13 * var(--u));
  background: var(--qd-active); border-left: calc(3 * var(--u)) solid var(--qd-green); border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
}
.qd-bios__reason-plus { color: var(--qd-green); font-weight: 600; }

.qd-bios__list { margin-top: calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid var(--qd-line); }
.qd-bios__row {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--qd-line);
}
.qd-bios__check {
  flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(4 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--qd-chip-b); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.qd-bios__check--on { background: var(--qd-accent); border-color: var(--qd-accent); }
.qd-bios__mark { width: calc(12 * var(--u)); height: calc(12 * var(--u)); display: block; opacity: 0; }
.qd-bios__check--on .qd-bios__mark { opacity: 1; }
.qd-bios__avatar { flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; display: block; }
.qd-bios__main { flex: 1; min-width: 0; }
.qd-bios__name-line { display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.qd-bios__name { font-size: calc(16 * var(--u)); font-weight: 600; }
.qd-bios__pill { font-size: calc(12 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)); border: calc(1 * var(--u)) solid var(--qd-chip-b); border-radius: 999px; }
.qd-bios__sum { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: var(--qd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* floating result card (gradient border) */
.qd-bios__card {
  position: absolute; right: calc(36 * var(--u)); bottom: calc(64 * var(--u)); z-index: 2; padding: calc(1 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(135deg, rgba(242,112,47,.7), rgba(94,106,210,.5) 55%, rgba(255,255,255,.08));
  box-shadow: var(--qd-card-shadow);
}
.qd-bios__card-inner {
  display: flex; align-items: center; gap: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)); background: var(--qd-card); border-radius: calc(13 * var(--u));
}
.qd-bios__card-title { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; }
.qd-bios__spark { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; fill: var(--qd-orange); }
.qd-bios__count { display: grid; }
.qd-bios__count > span { grid-area: 1 / 1; opacity: 0; }
.qd-bios__count > .qd-bios__n3 { opacity: 1; }
.qd-bios__card-btn {
  font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap;
  color: var(--qd-btn-t); background: var(--qd-btn); padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: calc(6 * var(--u));
}

/* ---- animation (8.95s loop) ---- */
@media (prefers-reduced-motion: no-preference) {
  .qd-bios__prompt   { animation: qd-bios-prompt 8.95s infinite; }
  .qd-bios__reason   { animation: qd-bios-reason 8.95s infinite; }
  .qd-bios__row:nth-child(1) { animation: qd-bios-row1 8.95s infinite; }
  .qd-bios__row:nth-child(2) { animation: qd-bios-row2 8.95s infinite; }
  .qd-bios__row:nth-child(3) { animation: qd-bios-row3 8.95s infinite; }
  .qd-bios__row:nth-child(4) { animation: qd-bios-row4 8.95s infinite; }
  .qd-bios__row:nth-child(1) .qd-bios__check { animation: qd-bios-ck1 8.95s infinite; }
  .qd-bios__row:nth-child(2) .qd-bios__check { animation: qd-bios-ck2 8.95s infinite; }
  .qd-bios__row:nth-child(3) .qd-bios__check { animation: qd-bios-ck3 8.95s infinite; }
  .qd-bios__row:nth-child(1) .qd-bios__mark { animation: qd-bios-mk1 8.95s infinite; }
  .qd-bios__row:nth-child(2) .qd-bios__mark { animation: qd-bios-mk2 8.95s infinite; }
  .qd-bios__row:nth-child(3) .qd-bios__mark { animation: qd-bios-mk3 8.95s infinite; }
  .qd-bios__card     { animation: qd-bios-card 8.95s infinite; }
  .qd-bios__n1 { animation: qd-bios-n1 8.95s infinite; }
  .qd-bios__n2 { animation: qd-bios-n2 8.95s infinite; }
  .qd-bios__count > .qd-bios__n3 { animation: qd-bios-n3 8.95s infinite; }
  .qd-bios__status-item--idle   { animation: qd-bios-st-idle 8.95s infinite; }
  .qd-bios__status-item--search { animation: qd-bios-st-search 8.95s infinite; }
  .qd-bios__status-item--done   { animation: qd-bios-st-done 8.95s infinite; }
  .qd-bios__spinner  { animation: qd-bios-spin .75s linear infinite; }
}
@keyframes qd-bios-spin { to { transform: rotate(360deg); } }

@keyframes qd-bios-prompt {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  4.469% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  8.939% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-reason {
  0% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
  21.229% { opacity:0;transform:translateY(calc(8 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  25.698% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
}
@keyframes qd-bios-row1 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  27.374% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  31.844% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row2 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  32.402% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  36.872% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row3 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  37.43% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  41.899% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row4 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  42.458% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  46.927% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-card {
  0% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
  49.721% { opacity:0;transform:translateY(calc(14 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  54.19% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
}
@keyframes qd-bios-st-idle {
  0% { opacity:.6;  }
  12.291% { opacity:.6;  }
  14.525% { opacity:0;  }
  93.296% { opacity:0;  }
  96.648% { opacity:.6;  }
  100% { opacity:.6;  }
}
@keyframes qd-bios-st-search {
  0% { opacity:0;  }
  12.279% { opacity:0;  }
  14.525% { opacity:1;  }
  21.229% { opacity:1;  }
  23.464% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-st-done {
  0% { opacity:0;  }
  21.229% { opacity:0;  }
  23.464% { opacity:1;  }
  93.296% { opacity:1;  }
  95.531% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-ck1 {
  0% { background:transparent;border-color:var(--qd-chip-b);  }
  49.721% { background:transparent;border-color:var(--qd-chip-b);  }
  52.514% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  93.296% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  96.648% { background:transparent;border-color:var(--qd-chip-b);  }
  100% { background:transparent;border-color:var(--qd-chip-b);  }
}
@keyframes qd-bios-mk1 {
  0% { opacity:0;transform:scale(.6);  }
  49.721% { opacity:0;transform:scale(.6);  }
  50.838% { opacity:1;transform:scale(.6);  }
  52.067% { transform:scale(1.12);  }
  53.631% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-ck2 {
  0% { background:transparent;border-color:var(--qd-chip-b);  }
  56.983% { background:transparent;border-color:var(--qd-chip-b);  }
  59.777% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  93.296% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  96.648% { background:transparent;border-color:var(--qd-chip-b);  }
  100% { background:transparent;border-color:var(--qd-chip-b);  }
}
@keyframes qd-bios-mk2 {
  0% { opacity:0;transform:scale(.6);  }
  56.983% { opacity:0;transform:scale(.6);  }
  58.101% { opacity:1;transform:scale(.6);  }
  59.33% { transform:scale(1.12);  }
  60.894% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-ck3 {
  0% { background:transparent;border-color:var(--qd-chip-b);  }
  64.246% { background:transparent;border-color:var(--qd-chip-b);  }
  67.039% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  93.296% { background:var(--qd-accent);border-color:var(--qd-accent);  }
  96.648% { background:transparent;border-color:var(--qd-chip-b);  }
  100% { background:transparent;border-color:var(--qd-chip-b);  }
}
@keyframes qd-bios-mk3 {
  0% { opacity:0;transform:scale(.6);  }
  64.246% { opacity:0;transform:scale(.6);  }
  65.363% { opacity:1;transform:scale(.6);  }
  66.592% { transform:scale(1.12);  }
  68.156% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-n1 {
  0% { opacity:0;  }
  49.721% { opacity:0;  }
  51.955% { opacity:1;  }
  56.983% { opacity:1;  }
  58.659% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-n2 {
  0% { opacity:0;  }
  56.983% { opacity:0;  }
  59.218% { opacity:1;  }
  64.246% { opacity:1;  }
  65.922% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-n3 {
  0% { opacity:0;  }
  64.246% { opacity:0;  }
  66.48% { opacity:1;  }
  93.296% { opacity:1;  }
  95.531% { opacity:0;  }
  100% { opacity:0;  }
}