:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.12);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --dim:rgba(234,240,255,.56);
  --accent:#7C5CFF;
  --accent2:#22D3EE;
  --good:#34D399;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --radius: 20px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ring: 0 0 0 6px rgba(124,92,255,.14);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif,
    "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-sans);
  background:
              radial-gradient(1200px 800px at 12% 8%, rgba(124,92,255,.20), transparent 60%),
              radial-gradient(900px 650px at 86% 22%, rgba(34,211,238,.16), transparent 62%),
              radial-gradient(900px 720px at 52% 86%, rgba(52,211,153,.10), transparent 62%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  overflow:hidden;
}

a{color:inherit}

/* Subtle noise for premium feel */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.08;
  mix-blend-mode: overlay;
}
.skip-link{
  position:absolute; left:10px; top:-60px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  z-index:1000;
  transition: transform .2s var(--ease);
}
.skip-link:focus{top:10px}

.bg-glow{
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(closest-side at 70% 40%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(closest-side at 60% 70%, rgba(52,211,153,.10), transparent 65%);
  filter: blur(40px);
  opacity:.9;
  pointer-events:none;
  transform: translateZ(0);
}

.ui-floating{
  position:fixed;
  left:18px;
  top:18px;
  z-index:50;
  display:flex;
  gap:10px;
}
.ui-icon-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(234,240,255,.9);
  cursor:pointer;
  backdrop-filter: blur(10px);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ui-icon-btn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.22);
}
.ui-icon-btn:active{transform: translateY(0)}
.ui-icon-btn:focus-visible{outline:none; box-shadow: var(--ring)}
.ui-icon{width:18px; height:18px}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.pager{
  position:fixed;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:60;
}
.pager-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pager-dot:hover{transform: scale(1.15)}
.pager-dot.is-active{
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(34,211,238,.9));
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 6px rgba(124,92,255,.12);
}

.stage{
  position:relative;
  height: calc(var(--vh, 1vh) * 100);
  width:100%;
  overflow-y:auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.page{
  height: calc(var(--vh, 1vh) * 100);
  width:100%;
  padding: clamp(18px, 2.4vw, 28px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Prevent content bleeding across pages */
.page{overflow:hidden}

/* Page background tag cloud (all pages) */
.page{position:relative}
.page-cloud{
  position:absolute;
  inset: -180px -180px -180px -180px;
  pointer-events:none;
  user-select:none;
  filter: blur(.2px);
  z-index:0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-content: space-between;
  justify-content: center;
  padding: 78px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 66%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 66%);
}
.page-cloud .motto-tag{
  position:relative;
  padding: 8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.012);
  color: rgba(234,240,255,.26);
  font-size: 12px;
  letter-spacing:.18em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  opacity:.65;
  white-space: nowrap;
}
.page-cloud .motto-tag:nth-child(6n+1){transform: rotate(-8deg)}
.page-cloud .motto-tag:nth-child(6n+2){transform: rotate(7deg)}
.page-cloud .motto-tag:nth-child(6n+3){transform: rotate(-5deg)}
.page-cloud .motto-tag:nth-child(6n+4){transform: rotate(5deg); text-transform:none; letter-spacing:.10em}
.page-cloud .motto-tag:nth-child(6n+5){transform: rotate(-3deg)}
.page-cloud .motto-tag:nth-child(6n){transform: rotate(3deg)}

.page-inner, .hero, .motto-lines{
  position:relative;
  z-index:1;
}
.page-inner{
  width:min(1100px, 100%);
  margin:0 auto;
}
.page-motto .page-inner{position:relative}

.header{
  width:min(1200px, 100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 2px 24px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{width:26px; height:26px; border-radius:8px; object-fit:cover; box-shadow: 0 10px 30px rgba(0,0,0,.45)}
.brand-name{font-weight:700; letter-spacing:.2px}
.header-actions{display:flex; gap:14px}
.header-actions .link{font-weight:600; letter-spacing:.01em}

.avatar-top{
  width:112px;
  height:112px;
  border-radius:26px;
  box-shadow: 0 18px 65px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
}

.link{
  text-decoration:none;
  color:rgba(234,240,255,.86);
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.link:hover{color:rgba(255,255,255,.98)}
.link.subtle{color:rgba(234,240,255,.7)}
.link.subtle:hover{color:rgba(234,240,255,.95)}

.hero{
  width:min(1200px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 38px);
  align-items:center;
}
.hero-left{
  width:min(860px, 100%);
}

.hero.hero-center{
  width:min(920px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:50px;
  text-align:center;
}
.hero-center-text{width:100%}
.hero.hero-center .hero-badges{justify-content:center}

.avatar-center{
  display:block;
  margin:0 auto;
}

.kicker{
  color:rgba(34,211,238,.92);
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size:12px;
  margin:0 0 10px;
}
.hero-title{
  font-size: clamp(34px, 4.2vw, 60px);
  line-height:1.02;
  margin:0 0 12px;
  letter-spacing:-.03em;
  text-wrap: balance;
}
.hero-title{
  background: linear-gradient(135deg, rgba(234,240,255,1), rgba(234,240,255,.78) 45%, rgba(34,211,238,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  backdrop-filter: blur(10px);
}
.btn:hover{transform: translateY(-1px); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.09)}
.btn:active{transform: translateY(0)}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}
.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(34,211,238,.75));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 55px rgba(124,92,255,.22);
}
.btn.primary:hover{box-shadow: 0 20px 65px rgba(124,92,255,.28)}
.btn.ghost{background:rgba(255,255,255,.04)}

.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
.badge{
  font-size:12px;
  color:rgba(234,240,255,.76);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
}
#heroTags .badge{
  font-size:13px;
  padding:8px 12px;
  color:rgba(234,240,255,.86);
  border-color: rgba(255,255,255,.18);
}

/* Tag variants */
#heroTags .badge{
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
#heroTags .badge.badge-v0{
  border-color: rgba(124,92,255,.38);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v1{
  border-color: rgba(34,211,238,.38);
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v2{
  border-color: rgba(52,211,153,.36);
  background: linear-gradient(135deg, rgba(52,211,153,.16), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v3{
  border-color: rgba(251,191,36,.34);
  background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v4{
  border-color: rgba(244,114,182,.34);
  background: linear-gradient(135deg, rgba(244,114,182,.14), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v5{
  border-color: rgba(96,165,250,.34);
  background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(255,255,255,.03));
}
#heroTags .badge.badge-v6{
  border-color: rgba(168,85,247,.34);
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,255,255,.03));
}

.avatar-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  backdrop-filter: blur(12px);
  animation: floatIn .9s var(--ease) both;
}
.avatar{
  width:260px;
  height:260px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.avatar-name{font-weight:700}
.avatar-tagline{color:var(--dim); margin-top:2px; font-size:13px}

.qr-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.qr{
  margin:0;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.qr:hover{transform: translateY(-2px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06)}
.qr img{
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto;
  object-fit:contain;
  background: rgba(255,255,255,.03);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12)
}
.qr figcaption{margin-top:10px; color:var(--dim); font-size:12px}

.hint{
  width:min(1200px, 100%);
  margin: 26px auto 0;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:rgba(234,240,255,.62);
  font-size:12px;
}
.hint-mouse{
  width:18px;
  height:26px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.28);
  position:relative;
}
.hint-mouse::after{
  content:"";
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  position:absolute;
  left:50%;
  top:7px;
  transform: translateX(-50%);
  animation: wheel 1.2s ease-in-out infinite;
}

.section-title{
  font-size: clamp(28px, 3vw, 40px);
  margin:0 0 50px;
  letter-spacing:-.01em;
}
.section-title-center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section-desc{margin:0 0 20px; color:var(--muted); line-height:1.7}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.card:hover{transform: translateY(-4px); border-color:rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035))}
.card:focus-within{box-shadow: 0 16px 55px rgba(0,0,0,.35), var(--ring)}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.card-icon{width:28px; height:28px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.14)}
.card-icon.card-icon-lg{width:58px; height:58px; border-radius:12px}
.card-icon.placeholder{
  background: linear-gradient(135deg, rgba(124,92,255,.4), rgba(34,211,238,.25));
}
.card-icon.placeholder.alt{
  background: linear-gradient(135deg, rgba(52,211,153,.35), rgba(124,92,255,.25));
}
.card-title{margin:0; font-size:16px}
.card-desc{margin:0 0 12px; color:var(--dim); line-height:1.7}
.card-actions{display:flex; gap:10px}
.stack{margin:0; padding-left:18px; color:var(--dim); line-height:1.9}

.inline-cta{margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  column-gap: clamp(10px, 2vw, 20px);
  row-gap: 12px;
  align-items:start;
  justify-content:center;
}
.contact-card{
  margin:0;
  padding:10px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  width:100%;
}
.contact-card img{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto;
  object-fit:cover;
  background: transparent;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
}
.contact-card figcaption{
  margin-top:10px;
  color:var(--dim);
  font-size:12px;
  text-align:center;
}

.motto{
  width:min(900px, 100%);
  margin:0 auto;
  padding: clamp(8px, 2vw, 12px);
  position:relative;
}
/* (deprecated) old motto-cloud styles removed; use .page-cloud for all pages */
.motto-lines{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(14px, 2.2vw, 22px);
  text-align:center;
}
.motto-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: clamp(16px, 3vw, 44px);
  flex-wrap:wrap;
}
.motto-line{
  position:relative;
  font-size: clamp(16px, 2vw, 24px);
  line-height:1.22;
  letter-spacing:.08em;
  color: rgba(234,240,255,.72);
  text-wrap: balance;
  padding: 10px 8px 14px;
  opacity:.92;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.motto-line::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width: 56px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(234,240,255,.42), transparent);
  opacity:.65;
}
.motto-line-title{
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 92px);
  line-height:1.08;
  letter-spacing:.16em;
  color: rgba(234,240,255,.96);
  padding-bottom: 18px;
}
.motto-line-title::after{display:none}
.motto-row .motto-line{transform:none}
#mottoLine3{transform:none}
.page-motto.is-active .motto-line{opacity:1}
.page-motto.is-active .motto-line:hover{transform: translateY(-10px)}

@media (max-width: 820px){
  .motto-lines{gap:12px}
  .motto-row{gap:12px}
  .motto-line{padding: 8px 8px 12px; letter-spacing:.06em}
  .motto-line:nth-child(1){letter-spacing:.12em}
  .page-motto.is-active .motto-line:hover{transform:none}
  .motto-tag{ /* keep class for generated tags */
    font-size:11px;
    padding:7px 10px;
    opacity:.7;
  }
  .page-cloud{
    inset:-140px;
    gap:9px 10px;
    padding:58px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 74%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 74%);
  }
}

.footer{
  width:100%;
  margin-top:auto;
  padding:18px clamp(18px, 2.4vw, 28px);
}
.footer-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer-left{display:flex; align-items:center; gap:10px; color:rgba(234,240,255,.7); flex-wrap:wrap}
.footer-title{color:rgba(234,240,255,.92); font-weight:700}
.footer-sep{opacity:.5}
.footer-right{display:flex; gap:14px; flex-wrap:wrap}

@keyframes wheel{
  0%{transform: translate(-50%, 0); opacity:.8}
  60%{transform: translate(-50%, 8px); opacity:.2}
  100%{transform: translate(-50%, 0); opacity:.8}
}
@keyframes floatIn{
  from{transform: translateY(10px); opacity:0}
  to{transform: translateY(0); opacity:1}
}

/* Page transition states */
.page.is-active .page-inner,
.page.is-active .hero{
  animation: pageEnter .65s var(--ease) both;
}
@keyframes pageEnter{
  from{transform: translateY(10px); opacity:.0}
  to{transform: translateY(0); opacity:1}
}

/* Responsive */
@media (max-width: 980px){
  body{overflow:hidden}
  .hero{grid-template-columns: 1fr; gap:14px}
  .header{padding-bottom:10px}
  .qr-row{grid-template-columns: 1fr 1fr}
  .grid{grid-template-columns: 1fr; gap:12px}
  .contact-grid{
    grid-template-columns: minmax(0, 220px);
    row-gap: 10px;
    column-gap: 0;
  }
  .pager{right:10px}
  /* Contact page: prevent height overflow on mobile */
  .page-contact .section-title{margin-bottom:16px}
  .page-contact .section-desc{margin-bottom:14px}
  .contact-card{padding:6px}
  .contact-card img{border-radius:12px}
  .contact-card figcaption{margin-top:8px}
}

@media (max-width: 420px){
  .ui-floating{left:12px; top:12px}
  .ui-icon-btn{width:38px; height:38px}
  .footer-inner{border-radius: 20px}
  .avatar-top{width:88px; height:88px; border-radius:22px}
}