/* ===========================================================
   隐信 YINXIN — 暗黑科技酷炫 × 简洁大气
   =========================================================== */

:root{
  --bg:        #050509;
  --bg-1:      #0A0A14;
  --bg-2:      #0F0F1C;
  --border:    rgba(255,255,255,.07);
  --border-hi: rgba(255,255,255,.16);

  --text:      #ECECF4;
  --text-mid:  #8D8DA8;
  --text-dim:  #4F4F66;

  --violet:      #A78BFA;
  --violet-deep: #7C3AED;
  --violet-soft: #C4B5FD;
  --cyan:        #22D3EE;

  --max: 1180px;

  --f-body: "Sora","PingFang SC","Helvetica Neue",sans-serif;
  --f-mono: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-cjk:  "Noto Serif SC","PingFang SC",serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-weight:400;
  font-size:16px;line-height:1.6;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--violet);color:#000}

/* ============ ambient: 大尺度光晕 + 细网格 + 噪点 ============ */
body::before{
  content:"";
  position:fixed;inset:-20% -20% auto -20%;height:120vh;
  background:
    radial-gradient(closest-side at 30% 18%, rgba(124,58,237,.55) 0%, transparent 60%),
    radial-gradient(closest-side at 78% 8%, rgba(34,211,238,.22) 0%, transparent 55%),
    radial-gradient(closest-side at 50% 80%, rgba(124,58,237,.20) 0%, transparent 60%);
  filter:blur(60px);
  pointer-events:none;z-index:0;
  animation:bg-shift 18s ease-in-out infinite alternate;
}
@keyframes bg-shift{
  0%   {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(-2%,2%,0) scale(1.06)}
}

body::after{
  content:"";
  position:fixed;inset:0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  pointer-events:none;z-index:0;
}

main,.nav,.foot{position:relative;z-index:5}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  background:rgba(5,5,9,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--border);
}
.nav__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-cjk);font-weight:700;font-size:16px;letter-spacing:.06em}
.nav__mark{
  width:24px;height:24px;border-radius:6px;
  background:
    radial-gradient(circle at 30% 30%, var(--violet-soft), var(--violet-deep) 70%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 8px 24px -6px rgba(124,58,237,.7),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.nav__right{display:flex;align-items:center;gap:14px}

.lang{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:999px;
  padding:3px;background:rgba(255,255,255,.02);
}
.lang__btn{
  background:transparent;border:0;color:var(--text-mid);
  padding:5px 10px;border-radius:999px;
  font-size:12px;letter-spacing:.04em;font-family:var(--f-body);
  transition:color .2s,background .2s;
}
.lang__btn:hover{color:var(--text)}
.lang__btn.is-active{
  color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 4px 10px -4px rgba(124,58,237,.7),inset 0 1px 0 rgba(255,255,255,.2);
}

.nav__cta{
  font-size:13px;font-weight:500;letter-spacing:.02em;
  padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-deep) 100%);
  color:#fff;
  box-shadow:
    0 10px 24px -10px rgba(124,58,237,.8),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s,box-shadow .2s;
}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(124,58,237,.95),inset 0 1px 0 rgba(255,255,255,.3)}

/* ============ shared atoms ============ */
.kicker{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--violet);
  margin:0 0 28px;
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{
  content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--violet),transparent);
}
.kicker.center{display:flex;justify-content:center;margin-left:auto;margin-right:auto}
.kicker.center::before{display:none}
.kicker.center::after{
  content:"";display:inline-block;width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  margin-left:14px;
}
.kicker.center{position:relative}
.kicker.center::before{
  content:"";display:inline-block;width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  margin-right:14px;
}

.vio{color:var(--violet)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;
  font-size:14px;font-weight:500;letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s;
}
.btn--primary{
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-deep) 100%);
  color:#fff;
  box-shadow:
    0 16px 36px -10px rgba(124,58,237,.7),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -10px rgba(124,58,237,.9),inset 0 1px 0 rgba(255,255,255,.34)}
.btn--ghost{
  color:var(--text);
  border-color:var(--border-hi);
  background:rgba(255,255,255,.02);
}
.btn--ghost:hover{border-color:var(--violet);background:rgba(167,139,250,.08)}

/* ============ HERO ============ */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(120px,16vw,200px) clamp(20px,4vw,56px) clamp(80px,12vw,160px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.hero__title{
  font-family:var(--f-cjk);font-weight:700;
  font-size:clamp(56px,9vw,128px);
  line-height:1.04;letter-spacing:-.01em;
  margin:0 0 36px;
  display:flex;flex-direction:column;gap:.04em;
}
.hero__title .line{
  display:inline-block;
  background:linear-gradient(180deg,#FFFFFF 0%,#D8D8E8 55%,#7A7A95 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 80px rgba(167,139,250,.18);
  position:relative;
}
.hero__title .line:nth-child(2){
  background:linear-gradient(180deg,#E9DCFF 0%,var(--violet) 55%,var(--violet-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 100px rgba(124,58,237,.45);
}

/* 品牌字 隐 / 信 — 突出, 一眼识别 */
.hero__title .bc{
  display:inline-block;
  font-size:1.18em;font-weight:900;
  margin-right:.04em;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F0FF 35%,var(--violet-soft) 75%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(167,139,250,.65)) drop-shadow(0 0 6px rgba(255,255,255,.18));
  position:relative;
  transform:translateY(.02em);
}
.hero__title .line:nth-child(2) .bc{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--violet-soft) 45%,var(--violet) 85%,var(--violet-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 32px rgba(124,58,237,.8)) drop-shadow(0 0 6px rgba(255,255,255,.22));
}

.hero__sub{
  font-size:clamp(15px,1.4vw,18px);
  color:var(--text-mid);
  margin:0 0 44px;letter-spacing:.02em;
  font-weight:300;
}

.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============ WHY ============ */
.why{
  max-width:800px;margin:0 auto;
  padding:clamp(80px,12vw,160px) clamp(20px,4vw,56px);
  text-align:center;
  border-top:1px solid var(--border);
  position:relative;
}
.why::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 24px var(--cyan);
}
.why__lead{
  margin:0;
  font-family:var(--f-cjk);font-weight:300;
  font-size:clamp(22px,2.8vw,38px);
  line-height:1.5;letter-spacing:-.005em;
  color:var(--text);
}

/* ============ PILLARS ============ */
.pillars{
  max-width:var(--max);margin:0 auto;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,56px) clamp(96px,14vw,180px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,40px);
}
@media (max-width:760px){.pillars{grid-template-columns:1fr;gap:36px}}

.pillar{
  position:relative;
  padding:36px 0 0;
  border-top:1px solid var(--border);
}
.pillar::before{
  content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;
  background:var(--violet);
  box-shadow:0 0 16px var(--violet);
}
.pillar__num{
  font-family:var(--f-mono);font-size:12px;
  color:var(--violet);letter-spacing:.18em;margin:0 0 16px;
}
.pillar__title{
  font-family:var(--f-cjk);font-weight:700;
  font-size:clamp(32px,3.8vw,48px);line-height:1.1;margin:0 0 14px;
  background:linear-gradient(180deg,#FFFFFF 0%,#B8B8CE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pillar__text{margin:0;color:var(--text-mid);font-size:15px;line-height:1.75;max-width:30ch}

/* ============ PLATFORMS ============ */
.platforms{
  max-width:var(--max);margin:0 auto;
  padding:clamp(80px,12vw,160px) clamp(20px,4vw,56px);
  text-align:center;
  border-top:1px solid var(--border);
  position:relative;
}
.platforms::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 24px var(--cyan);
}
.platforms__title{
  font-family:var(--f-cjk);font-weight:700;
  font-size:clamp(32px,4.6vw,60px);line-height:1.2;margin:0 0 60px;
  letter-spacing:-.005em;
}
.platforms__title .vio{
  background:linear-gradient(180deg,#E9DCFF 0%,var(--violet) 55%,var(--violet-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 80px rgba(124,58,237,.4);
  padding:0 .1em;
}
.platforms__list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:clamp(14px,2vw,28px);
}
.platforms__list li{
  font-family:var(--f-cjk);font-weight:500;
  font-size:clamp(22px,3vw,40px);
  letter-spacing:.02em;color:var(--text);
}
.platforms__list .sep{color:var(--violet);font-weight:300}

/* ============ DOWNLOAD ============ */
.download{
  max-width:var(--max);margin:0 auto;
  padding:clamp(96px,14vw,180px) clamp(20px,4vw,56px);
  text-align:center;
  border-top:1px solid var(--border);
  position:relative;
}
.download::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 24px var(--cyan);
}
.download__title{
  font-family:var(--f-cjk);font-weight:700;
  font-size:clamp(32px,4.6vw,60px);line-height:1.2;margin:0 0 48px;
}
.download__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;max-width:880px;margin:0 auto;
}
@media (max-width:720px){.download__grid{grid-template-columns:repeat(2,1fr)}}
.dlbtn{
  display:flex;align-items:center;justify-content:center;
  padding:28px 22px;
  border:1px solid var(--border-hi);border-radius:14px;
  background:
    linear-gradient(180deg,rgba(167,139,250,.06),transparent 60%),
    rgba(10,10,20,.5);
  backdrop-filter:blur(10px);
  transition:border-color .2s,transform .2s,background .2s;
}
.dlbtn:hover{
  border-color:var(--violet);transform:translateY(-3px);
  background:
    linear-gradient(180deg,rgba(167,139,250,.16),transparent 60%),
    rgba(10,10,20,.6);
  box-shadow:0 20px 40px -10px rgba(124,58,237,.4);
}
.dlbtn span{font-weight:600;font-size:15px;letter-spacing:.08em}
.dlbtn em{font-style:normal;color:var(--text-dim);font-size:12px;letter-spacing:.04em;font-family:var(--f-mono)}

/* ============ NOTICE ============ */
.notice{
  max-width:var(--max);margin:0 auto;
  padding:48px clamp(20px,4vw,56px) 0;
}
.notice__inner{
  display:flex;align-items:center;gap:12px;
  justify-content:center;
  padding:14px 22px;
  border:1px solid rgba(244,63,94,.25);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(244,63,94,.06),rgba(244,63,94,.02));
  max-width:680px;margin:0 auto;
}
.notice__dot{
  width:8px;height:8px;border-radius:999px;
  background:#F43F5E;
  box-shadow:0 0 12px rgba(244,63,94,.7);
  flex-shrink:0;
}
.notice__text{
  margin:0;color:#FBA5B4;
  font-size:13px;letter-spacing:.02em;
}

/* ============ FOOT ============ */
.foot{
  border-top:1px solid var(--border);
  padding:32px clamp(20px,4vw,56px) 44px;
  text-align:center;
}
.foot__brand{font-family:var(--f-cjk);font-weight:700;font-size:14px;letter-spacing:.16em;margin:0 0 6px}
.foot__cap{margin:0 0 10px;color:var(--text-dim);font-size:12px;letter-spacing:.04em;font-family:var(--f-mono)}
.foot__links{margin:0;display:inline-flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.12em;color:var(--text-mid);text-transform:uppercase;flex-wrap:wrap;justify-content:center}
.foot__links a{color:var(--text-mid);transition:color .2s}
.foot__links a:hover{color:var(--violet)}
.foot__links span{color:var(--text-dim)}

/* ============ reveal ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============ 小屏断点 ============ */
@media (max-width:560px){
  .nav{padding:14px 18px}
  .nav__name{font-size:15px}

  .hero{padding:88px 18px 72px}
  .hero__title{font-size:54px;margin-bottom:24px}
  .hero__title .bc{font-size:1.14em}
  .hero__sub{font-size:14px;margin-bottom:30px}
  .btn{padding:12px 20px;font-size:13px}

  .why{padding:80px 18px}
  .why__lead{font-size:20px;line-height:1.55}

  .pillars{padding:32px 18px 88px;gap:32px}
  .pillar{padding-top:26px}
  .pillar__title{font-size:30px}
  .pillar__text{font-size:14px;max-width:100%}

  .platforms{padding:72px 18px}
  .platforms__title{font-size:28px;margin-bottom:36px;line-height:1.3}
  .platforms__list{gap:10px 14px;row-gap:10px}
  .platforms__list li{font-size:18px}
  .platforms__list .sep{font-size:16px}

  .download{padding:80px 18px}
  .download__title{font-size:28px;margin-bottom:32px}
  .download__grid{gap:10px}
  .dlbtn{padding:22px 16px}
  .dlbtn span{font-size:14px}

  .notice{padding:36px 18px 0}
  .notice__inner{padding:12px 16px;gap:10px}
  .notice__text{font-size:12px}
  .foot{padding:24px 18px 36px}
  .nav__right{gap:8px}
  .lang__btn{padding:4px 7px;font-size:11px}
  .nav__cta{padding:8px 14px;font-size:12px}

  /* 缩小光晕避免遮挡文字 */
  body::before{filter:blur(50px);opacity:.8}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}
