/* =========================================================
   QISHUI.LIFE
   Theme: Midnight Teal + Aqua + Amber
   Prefix: ql-
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --ql-width: 1320px;

  --ql-bg: #041010;
  --ql-bg-2: #071918;

  --ql-panel:
    rgba(8, 31, 30, 0.92);

  --ql-card:
    rgba(8, 36, 34, 0.86);

  --ql-card-hover:
    rgba(10, 46, 43, 0.96);


  --ql-teal:
    #14b8a6;

  --ql-teal-light:
    #2dd4bf;

  --ql-cyan:
    #22d3ee;

  --ql-cyan-light:
    #67e8f9;

  --ql-gold:
    #f5b942;


  --ql-text:
    #f4fffd;

  --ql-text-soft:
    #bfdbd8;

  --ql-text-muted:
    #7da7a3;


  --ql-border:
    rgba(143, 236, 224, 0.12);

  --ql-border-active:
    rgba(45, 212, 191, 0.32);


  --ql-radius-xl:
    30px;

  --ql-radius-lg:
    22px;

  --ql-radius-md:
    14px;


  --ql-shadow:
    0 28px 80px rgba(0, 0, 0, 0.32);

  --ql-transition:
    0.25s ease;
}



/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}


body {

  margin: 0;

  min-width: 0;

  overflow-x: hidden;


  font-family:

    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    Arial,
    sans-serif;


  color:
    var(--ql-text);


  line-height:
    1.7;


  background:

    radial-gradient(
      circle at 8% 12%,
      rgba(18, 179, 161, 0.12),
      transparent 30%
    ),

    radial-gradient(
      circle at 94% 35%,
      rgba(36, 211, 238, 0.08),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #041010 0%,
      #061716 42%,
      #020b0c 100%
    );

}


img,
svg {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


p {

  margin-top: 0;

}



/* =========================================================
   PAGE SHELL
   ========================================================= */

.ql-shell {

  position: relative;

  min-height: 100vh;

  isolation: isolate;

  overflow: hidden;

}


.ql-shell::before,
.ql-shell::after {

  content: "";

  position: fixed;

  z-index: -2;

  width: 520px;

  height: 520px;

  border-radius: 50%;

  filter: blur(135px);

  pointer-events: none;

}


.ql-shell::before {

  top: 120px;

  left: -240px;

  background:
    rgba(20, 184, 166, 0.11);

}


.ql-shell::after {

  right: -250px;

  bottom: 6%;

  background:
    rgba(34, 211, 238, 0.08);

}



/* =========================================================
   CONTAINER
   ========================================================= */

.ql-container {

  width:
    min(
      calc(100% - 48px),
      var(--ql-width)
    );

  margin-inline: auto;

}



/* =========================================================
   HEADER
   ========================================================= */

.ql-header {

  position: sticky;

  top: 0;

  z-index: 50;


  background:
    rgba(2, 14, 14, 0.82);


  border-bottom:
    1px solid
    rgba(123, 235, 220, 0.09);


  box-shadow:
    0 8px 35px
    rgba(0, 0, 0, 0.16);


  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


.ql-header-inner {

  min-height:
    82px;


  display:
    flex;


  align-items:
    center;


  justify-content:
    space-between;


  gap:
    28px;

}


.ql-brand {

  flex:
    0 0 auto;

}


.ql-logo {

  width:
    auto;

  height:
    46px;

  max-width:
    230px;

  object-fit:
    contain;

}



/* =========================================================
   NAVIGATION
   ========================================================= */

.ql-nav {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;

}


.ql-nav a {

  padding:
    9px 12px;


  border:
    1px solid transparent;


  border-radius:
    10px;


  font-size:
    14px;


  font-weight:
    650;


  color:
    var(--ql-text-soft);


  transition:
    var(--ql-transition);

}


.ql-nav a:hover {

  color:
    var(--ql-text);


  border-color:
    rgba(45, 212, 191, 0.16);


  background:
    rgba(20, 184, 166, 0.06);

}



/* =========================================================
   MAIN
   ========================================================= */

.ql-main {

  padding-top:
    34px;

}



/* =========================================================
   EYEBROW
   ========================================================= */

.ql-eyebrow {

  display:
    inline-flex;


  align-items:
    center;


  padding:
    7px 11px;


  border:
    1px solid
    rgba(45, 212, 191, 0.18);


  border-radius:
    999px;


  color:
    var(--ql-cyan-light);


  background:
    rgba(20, 184, 166, 0.07);


  font-size:
    12px;


  font-weight:
    800;


  letter-spacing:
    0.08em;

}



/* =========================================================
   GENERIC SECTION
   ========================================================= */

.ql-section {

  margin-top:
    78px;

  scroll-margin-top:
    110px;

}


.ql-section-panel {

  padding:
    42px;


  border:
    1px solid
    var(--ql-border);


  border-radius:
    var(--ql-radius-xl);


  background:

    linear-gradient(
      145deg,
      rgba(7, 29, 28, 0.78),
      rgba(3, 16, 17, 0.88)
    );


  box-shadow:
    var(--ql-shadow);

}


.ql-section-head {

  max-width:
    820px;


  margin:
    0 auto 30px;


  text-align:
    center;

}


.ql-section-head h2 {

  margin:
    14px 0 12px;


  font-size:
    clamp(
      29px,
      3.2vw,
      44px
    );


  line-height:
    1.2;


  letter-spacing:
    -0.02em;

}


.ql-section-head p {

  margin-bottom:
    0;


  color:
    var(--ql-text-soft);


  font-size:
    16px;

}



/* =========================================================
   HERO
   ========================================================= */

.ql-hero {

  position:
    relative;


  overflow:
    hidden;


  padding:
    58px;


  border:
    1px solid
    rgba(45, 212, 191, 0.16);


  border-radius:
    var(--ql-radius-xl);


  background:

    radial-gradient(
      circle at 4% 0%,
      rgba(20, 184, 166, 0.13),
      transparent 34%
    ),

    radial-gradient(
      circle at 100% 100%,
      rgba(34, 211, 238, 0.07),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      rgba(7, 29, 28, 0.98),
      rgba(3, 16, 17, 0.98)
    );


  box-shadow:
    var(--ql-shadow);

}


.ql-hero::after {

  content: "";

  position:
    absolute;


  inset:
    0;


  opacity:
    0.11;


  pointer-events:
    none;


  background-image:

    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );


  background-size:
    45px 45px;


  mask-image:

    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55),
      transparent 70%
    );

}


.ql-hero-grid {

  position:
    relative;


  z-index:
    2;


  display:
    grid;


  grid-template-columns:

    minmax(0, 1.35fr)

    minmax(320px, 0.65fr);


  gap:
    42px;


  align-items:
    center;

}



/* =========================================================
   HERO TITLE
   ========================================================= */

.ql-hero h1 {

  max-width:
    900px;


  margin:
    18px 0 20px;


  font-size:

    clamp(
      40px,
      5.2vw,
      70px
    );


  line-height:
    1.08;


  letter-spacing:
    -0.035em;

}


.ql-lead {

  max-width:
    820px;


  margin-bottom:
    0;


  color:
    var(--ql-text-soft);


  font-size:
    18px;


  line-height:
    1.9;

}


.ql-lead strong {

  color:
    var(--ql-text);

}



/* =========================================================
   HERO ACTIONS
   ========================================================= */

.ql-actions {

  display:
    flex;


  gap:
    12px;


  flex-wrap:
    wrap;


  margin-top:
    28px;

}



/* =========================================================
   BUTTONS
   ========================================================= */

.ql-btn {

  min-height:
    48px;


  padding:
    12px 18px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border-radius:
    13px;


  font-size:
    15px;


  font-weight:
    760;


  transition:
    var(--ql-transition);

}


.ql-btn-primary {

  border:

    1px solid
    rgba(103, 232, 249, 0.34);


  color:
    #f5ffff;


  background:

    linear-gradient(
      110deg,
      #0f766e 0%,
      #0d9488 36%,
      #0891b2 76%,
      #0e7490 100%
    );


  box-shadow:

    0 12px 28px
    rgba(13, 148, 136, 0.2);

}


.ql-btn-primary:hover,
.ql-download-btn:hover {

  transform:
    translateY(-2px);


  filter:
    brightness(1.08);


  box-shadow:

    0 15px 35px
    rgba(13, 148, 136, 0.26);

}


.ql-btn-ghost {

  border:

    1px solid
    var(--ql-border-active);


  color:
    var(--ql-text-soft);


  background:
    rgba(255,255,255,0.025);

}


.ql-btn-ghost:hover {

  color:
    var(--ql-text);


  background:
    rgba(20, 184, 166, 0.07);

}



/* =========================================================
   HERO TAGS
   ========================================================= */

.ql-tags {

  display:
    flex;


  gap:
    8px;


  flex-wrap:
    wrap;


  margin-top:
    24px;

}


.ql-tags span {

  padding:
    6px 10px;


  border:
    1px solid
    var(--ql-border);


  border-radius:
    999px;


  color:
    var(--ql-text-muted);


  background:
    rgba(255,255,255,0.018);


  font-size:
    12.5px;

}



/* =========================================================
   HERO PANEL
   ========================================================= */

.ql-hero-panel {

  padding:
    25px;


  border:

    1px solid
    rgba(103, 232, 249, 0.13);


  border-radius:
    var(--ql-radius-lg);


  background:

    linear-gradient(
      155deg,
      rgba(9, 39, 37, 0.90),
      rgba(4, 20, 21, 0.97)
    );


  box-shadow:

    0 18px 50px
    rgba(0,0,0,0.26);

}


.ql-panel-kicker {

  display:
    block;


  margin-bottom:
    18px;


  color:
    var(--ql-gold);


  font-size:
    13px;


  font-weight:
    800;

}



/* =========================================================
   CHECK LIST
   ========================================================= */

.ql-check-list {

  display:
    grid;


  gap:
    14px;

}


.ql-check-item {

  display:
    grid;


  grid-template-columns:
    42px 1fr;


  gap:
    13px;


  align-items:
    start;

}


.ql-check-item > span {

  width:
    42px;


  height:
    42px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border:

    1px solid
    rgba(45,212,191,0.20);


  border-radius:
    12px;


  color:
    var(--ql-cyan-light);


  background:
    rgba(20,184,166,0.07);


  font-size:
    12px;


  font-weight:
    850;

}


.ql-check-item strong {

  display:
    block;


  margin-bottom:
    3px;

}


.ql-check-item p {

  margin-bottom:
    0;


  color:
    var(--ql-text-muted);


  font-size:
    13.5px;


  line-height:
    1.65;

}


.ql-text-link {

  display:
    inline-flex;


  margin-top:
    20px;


  color:
    var(--ql-cyan-light);


  font-size:
    13.5px;


  font-weight:
    700;

}



/* =========================================================
   OVERVIEW
   ========================================================= */

.ql-overview {

  display:
    grid;


  grid-template-columns:

    repeat(
      3,
      minmax(0, 1fr)
    );


  gap:
    16px;


  margin-top:
    18px;

}


.ql-overview article {

  padding:
    21px 22px;


  border:

    1px solid
    var(--ql-border);


  border-radius:
    18px;


  background:
    rgba(7, 27, 26, 0.72);

}


.ql-overview span {

  display:
    block;


  margin-bottom:
    5px;


  color:
    var(--ql-text-muted);


  font-size:
    12px;

}


.ql-overview strong {

  display:
    block;


  margin-bottom:
    6px;


  font-size:
    19px;

}


.ql-overview p {

  margin-bottom:
    0;


  color:
    var(--ql-text-soft);


  font-size:
    13.5px;

}



/* =========================================================
   GENERIC GRIDS
   ========================================================= */

.ql-grid-2,
.ql-grid-3,
.ql-grid-4 {

  display:
    grid;


  gap:
    18px;

}


.ql-grid-2 {

  grid-template-columns:

    repeat(
      2,
      minmax(0, 1fr)
    );

}


.ql-grid-3 {

  grid-template-columns:

    repeat(
      3,
      minmax(0, 1fr)
    );

}


.ql-grid-4 {

  grid-template-columns:

    repeat(
      4,
      minmax(0, 1fr)
    );

}



/* =========================================================
   GENERIC CARDS
   ========================================================= */

.ql-card {

  padding:
    27px;


  border:

    1px solid
    var(--ql-border);


  border-radius:
    var(--ql-radius-lg);


  background:

    linear-gradient(
      155deg,
      rgba(9, 39, 37, 0.78),
      rgba(4, 20, 21, 0.90)
    );


  box-shadow:

    0 15px 40px
    rgba(0,0,0,0.18);

}


.ql-card h3 {

  margin:
    0 0 10px;


  font-size:
    20px;

}


.ql-card p {

  color:
    var(--ql-text-soft);

}


.ql-card p:last-child {

  margin-bottom:
    0;

}



/* =========================================================
   STEPS
   ========================================================= */

.ql-step {

  display:
    inline-flex;


  margin-bottom:
    18px;


  color:
    var(--ql-cyan-light);


  font-size:
    27px;


  font-weight:
    900;

}



/* =========================================================
   NOTICE
   ========================================================= */

.ql-notice {

  margin-top:
    18px;


  padding:
    16px 18px;


  border-left:

    3px solid
    var(--ql-gold);


  border-radius:
    10px;


  color:
    var(--ql-text-soft);


  background:
    rgba(245, 185, 66, 0.06);


  font-size:
    14px;

}


.ql-notice strong {

  color:
    var(--ql-gold);

}



/* =========================================================
   DOWNLOAD BOX
   ========================================================= */

.ql-download-box {

  position:
    relative;


  overflow:
    hidden;


  padding:
    42px 32px 32px;


  border:

    1px solid
    rgba(45, 212, 191, 0.16);


  border-radius:
    var(--ql-radius-xl);


  background:

    radial-gradient(
      circle at 5% 0%,
      rgba(20, 184, 166, 0.10),
      transparent 30%
    ),

    radial-gradient(
      circle at 96% 100%,
      rgba(34, 211, 238, 0.07),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(7, 29, 28, 0.97),
      rgba(3, 16, 17, 0.98)
    );


  box-shadow:
    var(--ql-shadow);

}


.ql-download-box::before {

  content: "";

  position:
    absolute;


  top:
    0;


  left:
    14%;


  right:
    14%;


  height:
    1px;


  background:

    linear-gradient(
      90deg,
      transparent,
      var(--ql-teal-light),
      var(--ql-cyan),
      transparent
    );

}



/* =========================================================
   DOWNLOAD HEADING
   ========================================================= */

.ql-download-head {

  max-width:
    760px;


  margin:
    0 auto 28px;


  text-align:
    center;

}


.ql-download-head h3 {

  margin:
    0 0 10px;


  font-size:

    clamp(
      26px,
      3vw,
      38px
    );

}


.ql-download-head p {

  margin-bottom:
    0;


  color:
    var(--ql-text-soft);

}



/* =========================================================
   PLATFORM GRID
   ========================================================= */

.ql-platform-grid {

  display:
    grid;


  grid-template-columns:

    repeat(
      4,
      minmax(0, 1fr)
    );


  gap:
    16px;

}



/* =========================================================
   PLATFORM CARD
   ========================================================= */

.ql-platform-card {

  min-width:
    0;


  min-height:
    345px;


  padding:
    28px 20px 21px;


  display:
    flex;


  flex-direction:
    column;


  text-align:
    center;


  border:

    1px solid
    rgba(126, 211, 202, 0.11);


  border-radius:
    var(--ql-radius-lg);


  background:

    linear-gradient(
      155deg,
      rgba(9, 39, 37, 0.92),
      rgba(4, 20, 21, 0.98)
    );


  box-shadow:

    0 16px 42px
    rgba(0, 0, 0, 0.24);


  transition:
    var(--ql-transition);

}


.ql-platform-card:hover {

  transform:
    translateY(-6px);


  border-color:
    var(--ql-border-active);


  background:

    linear-gradient(
      155deg,
      rgba(11, 48, 45, 0.97),
      rgba(5, 24, 25, 0.99)
    );

}



/* =========================================================
   PLATFORM ICON
   ========================================================= */

.ql-platform-icon {

  width:
    86px;


  height:
    86px;


  margin:
    0 auto 18px;


  display:
    flex;


  align-items:
    center;


  justify-content:
    center;


  border:

    1px solid
    rgba(103, 232, 249, 0.15);


  border-radius:
    24px;


  background:

    linear-gradient(
      145deg,
      rgba(20, 184, 166, 0.11),
      rgba(34, 211, 238, 0.025)
    );

}


.ql-platform-icon img {

  width:
    52px;


  height:
    52px;


  object-fit:
    contain;


  filter:
    brightness(0)
    invert(1);


  opacity:
    0.95;

}



/* =========================================================
   PLATFORM TEXT
   ========================================================= */

.ql-platform-card h3 {

  margin:
    0 0 8px;


  font-size:
    20px;

}


.ql-platform-card p {

  min-height:
    48px;


  margin:
    0 0 22px;


  color:
    var(--ql-text-muted);


  font-size:
    13.5px;

}



/* =========================================================
   DOWNLOAD BUTTON GRID
   ========================================================= */

.ql-button-grid {

  display:
    grid;


  grid-template-columns:

    repeat(
      2,
      minmax(0, 1fr)
    );


  gap:
    8px;


  margin-top:
    auto;

}



/* =========================================================
   DOWNLOAD BUTTON
   ========================================================= */

.ql-download-btn {

  min-height:
    50px;


  padding:
    10px 12px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  gap:
    8px;


  border:

    1px solid
    rgba(103, 232, 249, 0.34);


  border-radius:
    var(--ql-radius-md);


  color:
    #efffff;


  background:

    linear-gradient(
      110deg,
      #0f766e 0%,
      #0d9488 34%,
      #0891b2 72%,
      #0e7490 100%
    );


  box-shadow:

    0 10px 25px
    rgba(13, 148, 136, 0.18);


  font-size:
    14px;


  font-weight:
    760;


  transition:
    var(--ql-transition);

}


.ql-download-btn span {

  width:
    23px;


  height:
    23px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border:

    1px solid
    rgba(255,255,255,0.72);


  border-radius:
    50%;


  font-size:
    11px;

}


.ql-download-btn-wide {

  width:
    100%;


  margin-top:
    auto;

}



/* =========================================================
   FEATURE CARDS
   ========================================================= */

.ql-feature-card {

  text-align:
    left;

}


.ql-feature-icon {

  width:
    48px;


  height:
    48px;


  margin-bottom:
    18px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border:

    1px solid
    rgba(45,212,191,0.18);


  border-radius:
    14px;


  color:
    var(--ql-cyan-light);


  background:
    rgba(20,184,166,0.07);


  font-size:
    19px;


  font-weight:
    900;

}



/* =========================================================
   PROCESS
   ========================================================= */

.ql-process {

  display:
    grid;


  gap:
    14px;

}


.ql-process article {

  display:
    grid;


  grid-template-columns:
    52px 1fr;


  gap:
    16px;


  align-items:
    start;


  padding:
    19px 20px;


  border:

    1px solid
    var(--ql-border);


  border-radius:
    16px;


  background:
    rgba(7, 27, 26, 0.64);

}


.ql-process article > span {

  width:
    52px;


  height:
    52px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border-radius:
    15px;


  color:
    var(--ql-text);


  background:

    linear-gradient(
      135deg,
      rgba(20,184,166,0.20),
      rgba(34,211,238,0.12)
    );


  font-size:
    19px;


  font-weight:
    900;

}


.ql-process h3 {

  margin:
    0 0 4px;


  font-size:
    18px;

}


.ql-process p {

  margin-bottom:
    0;


  color:
    var(--ql-text-soft);


  font-size:
    14px;

}



/* =========================================================
   SOURCE VERIFICATION
   ========================================================= */

.ql-verification {

  display:
    grid;


  grid-template-columns:

    minmax(0, 1.15fr)

    minmax(300px, 0.85fr);


  gap:
    28px;


  align-items:
    center;


  padding:
    42px;


  border:

    1px solid
    rgba(245,185,66,0.18);


  border-radius:
    var(--ql-radius-xl);


  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(245,185,66,0.08),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(7,29,28,0.96),
      rgba(3,16,17,0.98)
    );


  box-shadow:
    var(--ql-shadow);

}


.ql-verification h2 {

  margin:
    14px 0 12px;


  font-size:

    clamp(
      29px,
      3.2vw,
      44px
    );


  line-height:
    1.2;

}


.ql-verification > div > p {

  color:
    var(--ql-text-soft);

}



/* =========================================================
   SOURCE CARD
   ========================================================= */

.ql-source-card {

  padding:
    26px;


  border:

    1px solid
    rgba(245,185,66,0.18);


  border-radius:
    20px;


  background:
    rgba(245,185,66,0.045);

}


.ql-source-card > span {

  display:
    block;


  color:
    var(--ql-text-muted);


  font-size:
    12px;

}


.ql-source-card strong {

  display:
    block;


  margin:
    6px 0 10px;


  color:
    var(--ql-gold);


  font-size:
    30px;

}


.ql-source-card p {

  color:
    var(--ql-text-soft);


  font-size:
    14px;

}



/* =========================================================
   FAQ
   ========================================================= */

.ql-faq {

  max-width:
    940px;


  margin:
    0 auto;


  display:
    grid;


  gap:
    12px;

}


.ql-faq details {

  border:

    1px solid
    var(--ql-border);


  border-radius:
    16px;


  background:
    rgba(7, 27, 26, 0.72);


  overflow:
    hidden;

}


.ql-faq summary {

  padding:
    18px 20px;


  cursor:
    pointer;


  font-size:
    15px;


  font-weight:
    760;


  list-style:
    none;

}


.ql-faq summary::-webkit-details-marker {

  display:
    none;

}


.ql-faq summary::after {

  content:
    "+";


  float:
    right;


  color:
    var(--ql-cyan-light);


  font-size:
    20px;

}


.ql-faq details[open] summary::after {

  content:
    "−";

}


.ql-faq details p {

  margin:
    0;


  padding:
    0 20px 20px;


  color:
    var(--ql-text-soft);


  font-size:
    14px;

}



/* =========================================================
   DISCLAIMER
   ========================================================= */

.ql-disclaimer {

  margin:
    72px 0 0;


  padding:
    22px 24px;


  border:

    1px dashed
    rgba(143,236,224,0.14);


  border-radius:
    16px;


  background:
    rgba(255,255,255,0.018);

}


.ql-disclaimer strong {

  display:
    block;


  margin-bottom:
    5px;


  color:
    var(--ql-text-soft);

}


.ql-disclaimer p {

  margin-bottom:
    0;


  color:
    var(--ql-text-muted);


  font-size:
    13.5px;

}



/* =========================================================
   FOOTER
   ========================================================= */

.ql-footer {

  margin-top:
    54px;


  border-top:

    1px solid
    rgba(92, 207, 194, 0.08);


  background:
    rgba(2, 12, 13, 0.94);

}


.ql-footer-inner {

  padding:
    34px 0 38px;


  display:
    grid;


  grid-template-columns:
    1fr auto;


  gap:
    18px 30px;


  align-items:
    start;

}


.ql-footer strong {

  font-size:
    18px;

}


.ql-footer p {

  margin:
    5px 0 0;


  color:
    var(--ql-text-muted);


  font-size:
    13px;

}



/* =========================================================
   FOOTER LINKS
   ========================================================= */

.ql-footer-links {

  display:
    flex;


  gap:
    12px 16px;


  flex-wrap:
    wrap;


  justify-content:
    flex-end;

}


.ql-footer-links a {

  color:
    var(--ql-text-soft);


  font-size:
    13px;

}


.ql-footer-links a:hover {

  color:
    var(--ql-cyan-light);

}


.ql-copyright {

  grid-column:
    1 / -1;


  padding-top:
    15px;


  border-top:

    1px solid
    rgba(143,236,224,0.07);

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {


  .ql-hero-grid,
  .ql-verification {

    grid-template-columns:
      1fr;

  }


  .ql-platform-grid,
  .ql-grid-4 {

    grid-template-columns:

      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .ql-grid-3 {

    grid-template-columns:
      1fr;

  }


  .ql-hero-panel {

    max-width:
      none;

  }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {


  .ql-header-inner {

    min-height:
      72px;

  }


  .ql-nav {

    display:
      none;

  }


  .ql-grid-2,
  .ql-overview {

    grid-template-columns:
      1fr;

  }


  .ql-hero,
  .ql-section-panel,
  .ql-verification {

    padding:
      34px 24px;

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {


  :root {

    --ql-radius-xl:
      22px;

    --ql-radius-lg:
      17px;

    --ql-radius-md:
      12px;

  }


  .ql-container {

    width:
      calc(100% - 24px);

  }


  .ql-header-inner {

    min-height:
      68px;

  }


  .ql-logo {

    height:
      38px;


    max-width:
      190px;

  }


  .ql-main {

    padding-top:
      20px;

  }


  .ql-hero {

    padding:
      34px 20px;

  }


  .ql-hero-grid {

    gap:
      26px;

  }


  .ql-hero h1 {

    font-size:

      clamp(
        35px,
        11vw,
        48px
      );

  }


  .ql-lead {

    font-size:
      15px;


    line-height:
      1.8;

  }


  .ql-actions {

    display:
      grid;

  }


  .ql-btn {

    width:
      100%;

  }


  .ql-section {

    margin-top:
      58px;

  }


  .ql-section-panel {

    padding:
      30px 18px;

  }


  .ql-section-head h2,
  .ql-verification h2 {

    font-size:
      30px;

  }


  .ql-platform-grid,
  .ql-grid-4 {

    grid-template-columns:
      1fr;

  }


  .ql-download-box {

    padding:
      30px 16px 18px;

  }


  .ql-platform-card {

    min-height:
      auto;

  }


  .ql-platform-card p {

    min-height:
      auto;

  }


  .ql-verification {

    padding:
      30px 20px;

  }


  .ql-footer-inner {

    grid-template-columns:
      1fr;

  }


  .ql-footer-links {

    justify-content:
      flex-start;

  }

}



/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {


  .ql-button-grid {

    grid-template-columns:
      1fr;

  }


  .ql-process article {

    grid-template-columns:
      44px 1fr;

  }


  .ql-process article > span {

    width:
      44px;


    height:
      44px;

  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;


    transition-duration:
      0.01ms !important;


    animation-duration:
      0.01ms !important;

  }

}