/* ==========================================================================
   Gallerie — local replica
   Rebuilt from the original design tokens (Tailwind v4 based).
   Breakpoint: xl = 1280px
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/e4af272ccee01ff0-s.p.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/CrimsonText-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/CrimsonText-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/CrimsonText-Bold.ttf") format("truetype");
}

/* ---------- Tokens ---------- */
:root {
  --color-bg: #000;
  --color-text: #fff;
  --color-text-secondary: #999;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-crimson: "Crimson Text", Georgia, serif;
  --spacing: 0.25rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.page-main { flex: 1 1 auto; }

/* ==========================================================================
   Brand
   ========================================================================== */
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.brand__icon {
  border-radius: 0.5rem;
  box-sizing: content-box;
/*  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));*/
}
.brand__name {
  font-family: var(--font-crimson);
  font-weight: 600;
  line-height: 1;
}

html[data-theme="dark"] .brand--desktop .brand__icon{
     border-radius: 14px;
    border: 3px solid #2e3542 !important;
}

html[data-theme="dark"] .brand--mobile .brand__icon {
    border-radius: 22px;
    border: 3px solid #2e3542 !important;
    padding-bottom: 0rem;
}

html[data-theme="dark"] .brand__name{
      color: #ffffffc2 !important;
}
html[data-theme="dark"] .hero__title{
      color: #ffffff !important;
}
html[data-theme="dark"] .lj_2 a{
    background: linear-gradient(157.87deg, rgb(53 65 85 / 81%), #141c2cbf) !important;
    border: 1px solid #6b778a45 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 30px rgb(0 0 0 / 35%) !important;
}
html[data-theme="dark"] .lj_2 a:hover{
    background: linear-gradient(157.87deg, rgb(42 50 63 / 45%), #0e131b78) !important;
    color: #afafaf !important;
    border: 1px solid #3e4f6845 !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html[data-theme="dark"] .lj_1 a{
    background: linear-gradient(157.87deg, rgb(53 65 85 / 81%), #141c2cbf) !important;
    border: 1px solid #6b778a45 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 30px rgb(0 0 0 / 35%) !important;
}
html[data-theme="dark"] .lj_1 a:hover{
    background: linear-gradient(157.87deg, rgb(42 50 63 / 45%), #0e131b78) !important;
    color: #afafaf !important;
    border: 1px solid #3e4f6845 !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/*html[data-theme="dark"] .lj_2:hover .qr{
    background-image: url(../img/wx_qrcode_drak.svg);
    background-color: #828995cf;
    border: 1px solid #ffffff45 !important;
}*/
/* ==========================================================================
   Desktop hero
   ========================================================================== */
.hero--desktop { display: none; }
.hero--mobile  { display: block; }

.hero__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding-top: 10rem;
  padding-bottom: 2.5rem;
}
.hero__cols {
  display: flex;
  flex-direction: row;
  height: 100%;
  color: var(--color-text);
/*  padding-left: 6.5rem;*/
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 37.5%;
}
.brand--desktop {
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}
.brand--desktop .brand__icon { 
    border-radius: 14px;
/*    width: 50px;
    height: 50px;*/
    border: 3px solid #ffffffeb !important;

}
.brand__name { 
    font-size: 1.4rem;
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, 微软雅黑;
    color: #000000;


}

.copyrights_wz {
    width: 100% !important;
    text-align: center !important;
}

.hero__title {
  margin: 0 0 1.75rem;
  font-size: 3.75rem;
  line-height: 4rem;
  font-weight: 600;
   color: #000000;
}
.hero__subtitle {
    margin: 0 0 3.5rem;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #000000;
    font-weight: 200;
}

/* Badges */
.badges {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.badges__link { cursor: pointer; }
.badges--desktop { gap: 0.5rem;     margin-top: 20px;}
.badges--desktop .badges__link img { height: 56px; width: auto; }
.badges--mobile  { 

height: 44px;
    margin-top: 44px;
    margin-left: 0 !important;
    border-radius: 22px;
    background: linear-gradient(157.87deg, hsl(222.86deg 35.06% 98.07% / 61%), hsl(222.86deg 9.09% 94.02% / 74%));
    box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
    border: 1px solid #ffffffeb !important;
    width: 100%;

}


.lj_1 {
       width: 80%;
    display: inline-flex;
    margin: auto;

}
.lj_1 a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 53px;
    border-radius: 30px;
    background-color: rgb(0 0 0);
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
}
.lj_1 a:hover {
        background-color: rgb(60 62 67) !important;
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px);
    transition: all 0.5s;
}
/* 二维码浮层（默认隐藏，悬停显示） */
.lj_1 .qr {
    position: absolute;
    left: 50%;
    top: -220px;
    transform: translateX(-50%) translateY(5px);
    width: 200px;
    height: 200px;
    background-image: url(../img/wx_qrcode.png);
    background-size: 178px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgb(237 239 242);
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
}
.lj_1:hover .qr {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.lj_2 {
       width: 60%;
    display: inline-flex;

}
.lj_2 a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76%;
    height: 53px;
    border-radius: 30px;
    background-color: rgb(0 0 0);
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
}
.lj_2 a:hover {
        background-color: rgb(60 62 67) !important;
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px);
    transition: all 0.5s;
}
/* 二维码浮层（默认隐藏，悬停显示） */
.lj_2 .qr {
    position: absolute;
    left: 50%;
    top: -220px;
    transform: translateX(-50%) translateY(5px);
    width: 200px;
    height: 200px;
    background-image: url(../img/wx_qrcode.png);
    background-size: 178px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgb(237 239 242);
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
}
.lj_2:hover .qr {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.badges--mobile .badges__link img { height: 48px; width: auto; }

/* Showcase (rail + phone) */
.hero__showcase {
  position: relative;
  width: 62.5%;
  margin-left: 1.5rem;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   Wallpaper rail
   ========================================================================== */
.rail {
  position: relative;
  overflow: hidden;
}
.rail__fade {
  position: absolute;
  top: -1px;
  height: 101%;
  width: calc(5rem + 2px);
  z-index: 10;
  pointer-events: none;
}
.rail__fade--left {
  left: 0;
  background:linear-gradient(90deg, #e9ebf1, #e9ebf1bc 19%, #e9ebf18a 34%, #e9ebf161 47%, #e9ebf147 56.5%, #e9ebf131 65%, #e9ebf120 73%, #e9ebf113 80.2%, #e9ebf10b 86.1%, #e9ebf105 91%, #e9ebf102 95.2%, #e9ebf101 98.2%, #ffffff00);
}
.rail__fade--right {
  right: 0;
  background: linear-gradient(270deg, #e9ebf1, #e9ebf1bc 19%, #e9ebf18a 34%, #e9ebf161 47%, #e9ebf147 56.5%, #e9ebf131 65%, #e9ebf120 73%, #e9ebf113 80.2%, #e9ebf10b 86.1%, #e9ebf105 91%, #e9ebf102 95.2%, #e9ebf101 98.2%, #ffffff00);}

html[data-theme="dark"] .rail__fade--left{
  left: 0;
  background: linear-gradient(90deg,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000);
}
html[data-theme="dark"] .rail__fade--right{
  right: 0;
  background: linear-gradient(270deg,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000);
}
.rail__track {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: max-content;
  padding: 0 1.5rem;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}
.rail__card {
  width: 144px;
  height: 312px;
  border-radius: 1rem;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ==========================================================================
   Phone mockup
   ========================================================================== */
.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*  z-index: 20;*/
  pointer-events: none;
  aspect-ratio: 823 / 1677;
}
.phone--desktop { height: 40rem; }
.phone__screen {
  position: absolute;
  top: 1.61%;
  left: 3.77%;
  width: 91.74%;
  height: 97.85%;
  border-radius: 12.58% / 5.79%;
  object-fit: cover;
}
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Mobile hero
   ========================================================================== */
.hero__inner-m {
  margin-top: 1.5rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.brand--mobile {
  gap: 0.5rem;
  margin-bottom: 6rem;
      display: block;
}
.brand--mobile .brand__icon { 
    padding-bottom: 0.125rem;
    margin: auto;
    width: 70px;
    height: 70px;
    border-radius: 20px;


 }
.brand__name--m { 

    font-size: 1.8rem;
    line-height: 4.5rem;
 }

.showcase-m {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 6rem;
}
.rail-pad { position: relative; padding: 0 1px; }
.rail__track--mobile { gap: 0.5rem; }
.rail__card--m {
  width: 72px;
  height: 156px;
  border-radius: 0.75rem;
}
.phone--mobile { height: 18rem; }

.hero__title--m {
  margin: 0 2.5rem 1.5rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 2rem;
      color: #000000;
}
.hero__subtitle--m {
  margin: 0 0.75rem 3rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  height: auto;
  padding-top: 1.5rem;
  padding-bottom: 6rem;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.site-footer__row {
  font-size: 0.75rem;
  line-height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.site-footer__row a:hover,
.site-footer__row a:active { text-decoration: underline; }

/* ==========================================================================
   Desktop breakpoint
   ========================================================================== */

@media screen and (max-width: 1300px) {
.hero__inner {
    max-width: 65rem;
}
}


@media (min-width: 950px) {
  .hero--desktop { display: block; }
  .hero--mobile  { display: none; }
  .site-footer { padding-bottom: 2rem; }
}