/* ============ HERO (parallax) ============ */
  .hero{
    position:relative; height:64vh; min-height:420px; overflow:hidden;
    display:flex; align-items:center;
  }
  .hero-bg{
    position:absolute; inset:-10% 0 0 0; height:120%;
    background-size:cover; background-position:center;
    background-color:#1a1c20;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 46px),
      linear-gradient(160deg,#2b2f36,#111318 70%);
    will-change:transform;
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.15) 100%);
  }
  .hero-copy{ position:relative; z-index:2; padding:0 6vw; }
  .hero-copy h1{
    font-size:clamp(34px,5.5vw,64px); line-height:1; color:#fff; font-weight:700; letter-spacing:-1px;
    opacity:0; transform:translateY(24px);
    animation:heroIn .8s ease .15s forwards;
  }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }

  /* ============ SCROLL-REVEAL base ============ */
  .reveal{ opacity:0; transition:opacity .7s ease, transform .7s ease; }
  .reveal.from-left{ transform:translateX(-60px); }
  .reveal.from-right{ transform:translateX(60px); }
  .reveal.from-bottom{ transform:translateY(40px); }
  .reveal.in-view{ opacity:1; transform:translate(0,0); }

  /* ============ ABOUT ZXMOTO ============ */
  .about-intro{
    max-width:1240px; margin:0 auto;
    padding:100px 5vw;
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  }
  .about-intro figure{ overflow:hidden; }
  .about-intro img{ width:100%; height:340px; object-fit:cover; transition:transform .5s ease; }
  .about-intro figure:hover img{ transform:scale(1.05); }
  .about-intro-text h2{
    font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:.02em; margin-bottom:22px;
  }
  .about-intro-text p{
    color:#5a5a5f; font-size:14.5px; line-height:1.9; margin-bottom:16px; max-width:520px;
  }
  .about-intro-text p:last-child{ margin-bottom:0; }

  /* ============ CORPORATE CULTURE ============ */
  .culture{ background:#f6f6f7; padding:90px 5vw 100px; }
  .culture h2{
    text-align:center; font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:.06em;
    margin-bottom:56px;
  }
  .culture-grid{
    max-width:1240px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  }
  .culture-card{
    position:relative; height:280px; overflow:hidden; cursor:default;
    background-size:cover; background-position:center; background-color:#22242a;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 46px),
      linear-gradient(160deg,#2b2f36,#111318 70%);
  }
  .culture-card::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 60%);
  }
  .culture-card .cc-icon{
    position:absolute; left:24px; bottom:70px; z-index:2;
    width:34px; height:34px; stroke:#fff; fill:none; stroke-width:1.6;
    transform:translateY(10px); opacity:.9; transition:transform .35s ease;
  }
  .culture-card:hover .cc-icon{ transform:translateY(0) scale(1.08); }
  .culture-card span{
    position:absolute; left:24px; bottom:26px; z-index:2;
    color:#fff; font-size:19px; font-weight:700; letter-spacing:.02em;
  }
  .culture-card{ transition:transform .4s ease, box-shadow .4s ease; }
  .culture-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,.2); }

  /* ============ ABOUT ZHANG XUE (parallax image) ============ */
  .founder{
    max-width:1240px; margin:0 auto;
    padding:100px 5vw 110px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start;
  }
  .founder h2{ font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:30px; }
  .founder-timeline{ list-style:none; }
  .founder-timeline li{
    position:relative; padding:0 0 26px 26px; border-left:1.5px solid #e3e3e6;
  }
  .founder-timeline li:last-child{ padding-bottom:0; }
  .founder-timeline li::before{
    content:""; position:absolute; left:-5px; top:2px;
    width:9px; height:9px; border-radius:50%; background:var(--accent);
  }
  .founder-timeline .yr{ display:block; font-weight:700; font-size:14px; color:var(--accent); margin-bottom:6px; }
  .founder-timeline p{ color:#5a5a5f; font-size:14px; line-height:1.8; }

  .founder-media{ position:sticky; top:100px; overflow:hidden; }
  .founder-media img{
    width:100%; height:560px; object-fit:cover;
    transform:scale(1.12) translateY(var(--py, 0));
    transition:transform .1s linear;
    will-change:transform;
  }

  /* ============ FOOTER (reused) ============ */
  .site-footer{ background:#0e0f11; padding:44px 5vw 30px; text-align:center; }
  .footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-bottom:26px; }
  .footer-nav a{ color:rgba(255,255,255,.65); text-decoration:none; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; transition:color .25s ease; }
  .footer-nav a:hover{ color:#fff; }
  .footer-social{ display:flex; justify-content:center; gap:14px; margin-bottom:30px; }
  .footer-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; transition:background .25s ease; }
  .footer-social a:hover{ background:rgba(255,255,255,.16); }
  .footer-social svg{ width:14px; height:14px; fill:rgba(255,255,255,.7); }
  .footer-legal{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
  .footer-legal p{ margin:0; color:rgba(255,255,255,.4); font-size:11.5px; line-height:1.7; }
  .back-to-top{
    margin:20px auto 0; display:flex; width:38px; height:21px; border:1px solid rgba(255,255,255,.25);
    border-radius:30px; background:transparent; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .25s ease, transform .25s ease;
  }
  .back-to-top:hover{ border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
  .back-to-top svg{ width:12px; height:12px; stroke:rgba(255,255,255,.75); fill:none; stroke-width:2; }

  /* ============ responsive ============ */
  @media (max-width:900px){
    .menu{ display:none; }
    .about-intro, .founder{ grid-template-columns:1fr; }
    .founder-media{ position:relative; top:0; order:-1; }
    .founder-media img{ height:320px; }
    .culture-grid{ grid-template-columns:1fr; }
  }