:root{
  --bg:#f6f3eb;
  --card:#fffdf8;
  --ink:#1f2530;
  --muted:#677286;
  --accent:#5a7fc7;
  --accent-soft:#dce7fb;
  --line:rgba(31,37,48,.12);
  --shadow:0 18px 42px rgba(31,37,48,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(118,161,255,.12), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(130,221,171,.10), transparent 30rem),
    var(--bg);
  line-height:1.65;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
p{margin:.3rem 0 1rem}
h1,h2,h3{line-height:1.12;margin:0 0 1rem}

.section-shell{
  width:min(1120px, calc(100% - 2rem));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(16px);
  background:rgba(246,243,235,.78);
  border-bottom:1px solid rgba(255,255,255,.35);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.85rem 1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-weight:700;
}

.brand-mark{
  display:inline-grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), #84d3af);
  color:white;
  font-size:.95rem;
  box-shadow:0 8px 18px rgba(90,127,199,.22);
}

.brand-text{font-size:.96rem;letter-spacing:.01em}

.site-nav{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.93rem;
  color:var(--muted);
}

.site-nav a:hover{color:var(--ink)}

.hero{
  position:relative;
  min-height:92vh;
  display:grid;
  align-items:end;
  overflow:hidden;
}

.hero-image,
.hero-shade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero-image{
  object-fit:cover;
}

.hero-shade{
  background:
    linear-gradient(180deg, rgba(10,16,22,.2) 0%, rgba(10,16,22,.38) 54%, rgba(10,16,22,.72) 100%);
}

.hero-copy{
  position:relative;
  z-index:2;
  color:white;
  padding:6rem 0 4rem;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:.7rem;
}

.hero .eyebrow{color:#d8edf9}
.hero h1{font-size:clamp(2.4rem, 4vw, 4.4rem); max-width:13ch}
.hero-cn{
  font-size:clamp(1.1rem, 2vw, 1.45rem);
  color:#ecf6ff;
}
.hero-lead{
  max-width:44rem;
  font-size:1.03rem;
  color:rgba(255,255,255,.92);
}

.hero-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.25rem;
  border-radius:999px;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.button-primary{
  background:white;
  color:var(--ink);
}

.button-secondary{
  border:1px solid rgba(255,255,255,.45);
  color:white;
  background:rgba(255,255,255,.08);
}

.section-intro{
  padding:4.8rem 0 1rem;
}

.intro-card{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:1.8rem;
  padding:2rem;
  text-align:center;
}

.quote{
  font-size:clamp(1.2rem, 2.1vw, 1.7rem);
  margin:0 0 .5rem;
}
.quote-cn{
  color:var(--muted);
  margin:0;
}

.section-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:2rem;
  align-items:center;
  padding:4rem 0;
}

.section-grid.reverse{
  grid-template-columns: .95fr 1.05fr;
}

.text-block{
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--shadow);
  border-radius:2rem;
  padding:2rem;
}

.text-block h2{
  font-size:clamp(1.85rem, 3vw, 2.8rem);
}
.cn{
  color:#36445a;
}

.image-frame{
  border-radius:2rem;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:white;
}

.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.story-band{
  padding:1rem 0 4rem;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:2rem;
  align-items:center;
}

.story-copy{
  padding:2rem;
}

.story-copy h2{
  font-size:clamp(1.85rem, 3vw, 2.8rem);
}

.story-art{
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.95));
  border:1px solid var(--line);
  border-radius:2rem;
  box-shadow:var(--shadow);
  padding:1.2rem;
}

.culture-section{
  padding:1rem 0 4rem;
}
.section-heading{
  margin-bottom:1.3rem;
}
.section-heading h2{
  font-size:clamp(1.85rem, 3vw, 2.8rem);
}
.culture-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2rem;
}
.culture-card{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:1.6rem;
  overflow:hidden;
}
.culture-card img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.culture-card h3{
  font-size:1.05rem;
  padding:1rem 1rem 0;
}
.culture-card p{
  padding:0 1rem 1.2rem;
  color:var(--muted);
}

.note-section{
  padding:2rem 0 4rem;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:2rem;
  align-items:center;
}
.note-image img{max-height:42rem}
.note-copy h2{font-size:clamp(1.85rem, 3vw, 2.8rem)}

.join-section{
  padding:1rem 0 5rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.5rem;
  align-items:center;
}
.join-card{
  background:linear-gradient(180deg, #fefefe, #faf8f1);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:2rem;
  padding:2rem;
}
.contact-list{
  display:grid;
  gap:.85rem;
  margin:1.3rem 0;
}
.contact-item{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 1rem;
  border-radius:1rem;
  background:rgba(90,127,199,.07);
}
.contact-label{font-weight:700}
.contact-value{color:var(--muted)}
.join-note{
  color:var(--muted);
  margin-top:1rem;
}
.join-side{
  display:grid;
  place-items:center;
}
.join-illustration{
  width:min(100%, 22rem);
  filter: drop-shadow(0 18px 24px rgba(31,37,48,.12));
}

.site-footer{
  padding:1.2rem 1rem 2.2rem;
  border-top:1px solid var(--line);
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
  color:var(--muted);
}
.footer-mark{
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), #84d3af);
  color:white;
  font-weight:700;
}
.footer-sub{margin:0}

.intro-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
.intro-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-backdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,14,18,.6), rgba(7,14,18,.82)),
    url("assets/hero-aurora.webp") center/cover no-repeat;
  transform:scale(1.04);
}
.intro-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:white;
  padding:2rem;
  width:min(720px, calc(100% - 2rem));
}
.intro-lines{
  min-height:13rem;
  display:grid;
  place-items:center;
}
.intro-lines p{
  position:absolute;
  font-size:clamp(1.7rem, 3.6vw, 3rem);
  line-height:1.3;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(.65rem);
  transition:opacity .9s ease, transform .9s ease;
  max-width:18ch;
}
.intro-lines p.active{
  opacity:1;
  transform:translateY(0);
}
.intro-skip{
  margin-top:1rem;
  border:none;
  background:rgba(255,255,255,.12);
  color:white;
  padding:.85rem 1.2rem;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .intro-overlay{display:none}
}

@media (max-width: 920px){
  .site-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .site-nav{
    overflow:auto;
    white-space:nowrap;
    width:100%;
    padding-bottom:.2rem;
  }
  .section-grid,
  .section-grid.reverse,
  .story-band,
  .note-section,
  .join-section{
    grid-template-columns:1fr;
  }
  .culture-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contact-item{
    flex-direction:column;
  }
}
@media (max-width: 560px){
  .hero{
    min-height:84vh;
  }
  .culture-grid{
    grid-template-columns:1fr;
  }
  .text-block,
  .join-card,
  .intro-card,
  .story-art{
    padding:1.25rem;
  }
  .site-footer{
    flex-direction:column;
    text-align:center;
  }
}