/* ==== Part 1: Hero ==== */
.hero-section {
    min-height: 92vh;
    display: grid;
    place-items: center;
    padding: 6rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
  }
  
  .hero-canvas {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(600px 400px at 20% 30%, rgba(53,39,107,0.08), transparent 70%),
      radial-gradient(700px 500px at 80% 70%, rgba(199,125,255,0.06), transparent 70%);
    filter: blur(60px);
    transition: transform 0.2s ease-out;
    will-change: transform;
    pointer-events: none; /* 不会遮挡鼠标 */
  }
  
  /* Big Title Section - Full Viewport Hero */
  .big-title-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    position: relative;
    padding: 2rem;
  }
  
  /* Background overlay removed to show gradient */
  
  .big-title-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .big-main-title {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1e1b4b;
    margin: 0 0 1rem 0;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    background: linear-gradient(135deg, #1e1b4b 0%, #6b46c1 50%, #1e1b4b 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .big-subtitle {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #b8860b; /* Dark yellow */
    margin: 0 0 3rem 0;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out 1s forwards;
  }
  
  .hero-description {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.5s forwards;
  }
  
  .description-text {
    font-size: clamp(1.4rem, 2.5vw, 1.6rem);
    color: #000000; /* Black color */
    line-height: 1.8;
    margin: 0 0 4rem 0;
  }
  
  .hero-cta {
    margin-top: 2rem;
  }
  
  /* Full Screen Video Section */
  .fullscreen-video-section {
    height: 75vh;
    max-height: 800px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 6rem 0;
  }
  
  .fullscreen-video-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .video-container {
    width: 95%;
    max-width: 1400px;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  }
  
  .video-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .video-placeholder:hover img {
    transform: scale(1.05);
  }
  
  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }
  
  .video-placeholder:hover .video-overlay {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .play-button {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
  }
  
  .play-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
  }
  
  .play-button:hover {
    transform: scale(1.15);
    background: white;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  
  .play-button:hover::before {
    width: 200px;
    height: 200px;
  }
  
  /* Advanced Animation Keyframes */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  @keyframes gradientShift1 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift2 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift3 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift4 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift5 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift6 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 0%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift7 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 0%, 100% 50%;
    }
  }
  
  @keyframes gradientShift8 {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%, 100% 50%;
    }
  }


  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    width: min(1200px, 100%);
    position: relative;
    z-index: 1;
  }
  
  .hero-copy .hero-title {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
  }
  
  .hero-copy .hero-subtitle {
    margin-top: .5rem;
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    color: #334155;
  }
  
  .hero-copy .hero-lead {
    margin-top: 1.25rem;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    color: #475569;
    max-width: 56ch;
  }
  
  .hero-cta-row { margin-top: 1.75rem; display: flex; gap: 12px; flex-wrap: wrap; }
  
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .9rem 1.35rem; border-radius: 9999px; text-decoration: none;
    font-weight: 600; border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: clamp(1.4rem, 2.5vw, 1.6rem);
    position: relative;
    overflow: hidden;
  }
  
  .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }
  
  .btn:hover::before {
    left: 100%;
  }
  
  .btn-primary { 
    background: linear-gradient(135deg, #111827 0%, #374151 100%); 
    color:#fff; 
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.2);
  }
  .btn-primary:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 15px 35px rgba(17, 24, 39, 0.3);
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  }
  
  .btn-secondary { 
    background: linear-gradient(135deg, #111827 0%, #374151 100%); 
    color:#fff; 
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.2);
  }
  .btn-secondary:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 15px 35px rgba(17, 24, 39, 0.3);
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  }
  
  .hero-screen {
    background: #0b0f1a;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 30px 80px rgba(2,6,23,.25);
    display:flex; align-items:center; justify-content:center;
    overflow: hidden;
  }
  .kb-video img, .beta-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  .beta-img video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  
  /* ==== Part 2: Extension (left visual, right copy) ==== */
  .extension2-section { 
    padding: 12rem 2rem; 
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    background: transparent;
  }
  
  .extension2-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .ext2-grid {
    width: min(1200px, 100%); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  }
  .ext2-video { width: 100%; border-radius: 16px; box-shadow: 0 20px 70px rgba(2,6,23,.2); display:block; object-fit: cover; }

  /* ==== Carousel Styles ==== */
  .carousel-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(2,6,23,.2);
    background: transparent;
  }

  .carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background: transparent;
    border: none;
    outline: none;
  }

  .carousel-slide.active {
    opacity: 1;
  }

  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .indicator.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
  }

  .indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
  }
  .section-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing:-.01em; color:#0f172a; }
  .section-lead { margin-top: .75rem; color:#000000; font-size: clamp(1.4rem, 2.5vw, 1.6rem); line-height: 2.0; text-align: left; }
  
  /* Equal spacing for buttons */
  .btn-spacing {
    margin-top: 2rem;
  }
  .center { text-align:center; }
  .nowrap { white-space: nowrap; }
  
  /* ==== Part 3: Key Features Pipeline ==== */
  .features-section { 
    padding: 12rem 2rem; 
    background: transparent; 
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
  }
  
  .features-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .section-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
  }
  
  .pipeline-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  
  .pipeline-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
  }
  
  .pipeline-step.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  .pipeline-step:nth-child(even) {
    flex-direction: row-reverse;
    transform: translateX(30px);
  }
  
  .pipeline-step:nth-child(even).visible {
    transform: translateX(0);
  }
  
  .step-number {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    margin-top: 1rem;
    animation: float 3s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  .step-number:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  }
  
  .step-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex: 1;
    margin-left: 2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
  }
  
  .step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.6s ease;
  }
  
  .pipeline-step:nth-child(even) .step-content {
    margin-left: 0;
    margin-right: 2rem;
    flex-direction: row-reverse;
  }
  
  .step-content:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  }
  
  .step-content:hover::before {
    left: 100%;
  }
  
  .step-image {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .step-text {
    flex: 1;
  }
  
  .step-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
  }
  
  .step-text h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.75rem 0;
  }
  
  .step-text p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.8;
    margin: 0;
  }
  
  /* Pipeline connectors removed for cleaner look */
  
  /* ==== Part 4: Beta ==== */
  .beta-section { 
    padding: 12rem 2rem; 
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    background: transparent;
  }
  
  .beta-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .beta-grid {
    width: min(1200px, 100%); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  }
  .beta-img { border-radius: 16px; box-shadow: 0 24px 80px rgba(2,6,23,.2); }
  .beta-img video { border-radius: 16px; box-shadow: 0 24px 80px rgba(2,6,23,.2); }
  
  /* Contact */
  .contact-section { 
    padding: 8rem 1.5rem 10rem; 
    display:grid; 
    place-items:center; 
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
  }
  
  .contact-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .contact-container { text-align:center; }

  /* ==== Navbar Styles ==== */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
  }

  .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    height: 32px;
    width: auto;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .nav-link {
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
  }

  .nav-link:hover {
    color: #4B264F;
    text-decoration: none;
  }

  .auth-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .auth-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
  }

  .auth-btn-primary {
    background: #111827;
    color: white;
  }

  .auth-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    text-decoration: none;
  }

  .auth-btn-secondary {
    background: transparent;
    color: #111827;
    border: 1px solid #e5e7eb;
  }

  .auth-btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    text-decoration: none;
  }

  /* ==== Footer Styles ==== */
  .footer {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 3rem 0 1.5rem;
  }

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand h3 {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .footer-logo-img {
    height: 32px;
    width: auto;
  }

  .footer-description {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .footer-links-section h4,
  .footer-contact-section h4 {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
  }

  .footer-links a:hover {
    color: #0f172a;
    text-decoration: none;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .contact-item {
    color: #64748b;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .contact-item a {
    color: #64748b;
    text-decoration: none;
  }

  .contact-item a:hover {
    color: #0f172a;
    text-decoration: none;
  }

  .footer-bottom {
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .copyright {
    color: #64748b;
    font-size: 0.875rem;
    text-align: center;
  }

  /* ==== Responsive Design ==== */
  @media (max-width: 768px) {
    .big-title-section {
      padding: 2rem 1rem;
      min-height: 100vh;
    }
    
    .extension2-section {
      padding: 8rem 1rem;
    }
    
    .features-section {
      padding: 8rem 1rem;
    }
    
    .beta-section {
      padding: 8rem 1rem;
    }
    
    .contact-section {
      padding: 6rem 1rem 8rem;
    }
    
    .description-text {
      font-size: clamp(1.2rem, 4vw, 1.4rem);
    }
    
    .play-button {
      width: 80px;
      height: 80px;
    }
    
    .fullscreen-video-section {
      height: 50vh;
      max-height: 400px;
      padding: 4rem 0;
    }
    
    .video-container {
      width: 95%;
      border-radius: 16px;
    }
    
    .big-main-title {
      font-size: clamp(1.8rem, 5vw, 2.8rem);
    }
    
    .big-subtitle {
      font-size: clamp(1.2rem, 4vw, 1.5rem);
    }
    
    
    /* Pipeline mobile styles */
    .pipeline-step {
      flex-direction: column !important;
      text-align: center;
      margin-bottom: 4rem;
      align-items: center;
    }
    
    .pipeline-step:nth-child(even) {
      flex-direction: column !important;
    }
    
    .step-number {
      margin: 0 0 1.5rem 0 !important;
      width: 70px;
      height: 70px;
      font-size: 1.5rem;
    }
    
    .step-content {
      margin: 0 !important;
      flex-direction: column !important;
      text-align: center;
      gap: 1.5rem;
      padding: 2rem;
      width: 100%;
    }
    
    .pipeline-step:nth-child(even) .step-content {
      flex-direction: column !important;
    }
    
    .step-image {
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }
    
    .step-text h3 {
      font-size: 1.25rem;
    }
    
    .step-text h4 {
      font-size: 1rem;
    }
    
    .pipeline-connector {
      display: none;
    }

    .hero-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .ext2-grid,
    .beta-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .feature-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .nav-links {
      display: none;
    }

    .footer-content {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }

  /* ==== Main Content Padding ==== */
  .main-content {
    margin-top: 80px; /* Account for fixed navbar */
  }

  /* ===== Part 3: Roadmap (connected line) ===== */

  :root{
    /* Match existing brand feel (from login): purple + warm accent */
    --rm-bg-dark: #0b0f1a;
    --rm-text: #e5e7eb;
    --rm-muted: #94a3b8;
    --rm-card-bg: #0f172a;
    --rm-card-border: #1f2937;
    --rm-line: linear-gradient(90deg, #54497D 0%, #7C3AED 35%, #6287E4 70%, #D76E13 100%);
    --rm-node: #0b0f1a;
    --rm-node-ring: #7C3AED;
  }

  .roadmap-section{
    background: radial-gradient(1200px 600px at 10% 0%, rgba(124, 58, 237, .08), transparent 70%),
                radial-gradient(900px 500px at 90% 60%, rgba(215, 110, 19, .10), transparent 70%),
                var(--rm-bg-dark);
    padding: 5rem 1.25rem;
    color: var(--rm-text);
  }

  .roadmap-section .section-title{ color: #f8fafc; }
  .roadmap-section .section-kicker{ color: var(--rm-muted); }

  .roadmap-section .container{
    width: min(1200px, 100%);
    margin: 0 auto;
  }

  /* The track line across the steps */
  .roadmap{
    position: relative;
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
    list-style: none;
    padding: 64px 8px 0; /* room for the line + nodes */
    counter-reset: rm;
  }

  /* horizontal line */
  .roadmap::before{
    content:"";
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rm-line);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  }

  /* arrowhead at the end of the line */
  .roadmap::after{
    content:"";
    position: absolute;
    top: 19px;
    right: -6px;
    border: 7px solid transparent;
    border-left-color: #D76E13;
    filter: drop-shadow(0 0 6px rgba(215,110,19,.5));
  }

  /* each step */
  .rm-step{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;              /* 让每个step填满grid cell的高度 */
  }

  /* node on the track */
  .rm-node{
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 34px;
    border-radius: 9999px;
    background: var(--rm-node);
    border: 3px solid var(--rm-node-ring);
    box-shadow: 0 0 0 5px rgba(124,58,237,.15), 0 8px 20px rgba(0,0,0,.35);
    display: grid; place-items: center;
  }

  /* step number */
  .rm-index{
    font: 700 0.95rem/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #fff;
    opacity: .95;
  }

  /* small connector from node down to card */
  .rm-node::after{
    content:"";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 2px; height: 20px;
    background: #384152;
    border-radius: 999px;
  }

  /* cards under nodes */
  .rm-card{
    margin-top: 40px;
    background: linear-gradient(0deg, rgba(124,58,237,.06), rgba(124,58,237,.06)) border-box,
                var(--rm-card-bg) padding-box;
    border: 1px solid var(--rm-card-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    min-height: 230px;
    display: grid;
    grid-template-rows: auto auto 1fr;
  }

  /* "tab" cap for top edge, like your reference image */
  .rm-card::before{
    content:"";
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%);
    width: 82%; height: 14px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #ff8a5b, #ff6bd6);
    filter: drop-shadow(0 8px 14px rgba(255,107,214,.28));
  }

  .rm-fig{
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #0b1220;
    border: 1px solid #263247;
    margin: 0 0 10px 0;
  }
  .rm-fig img{ width:100%; height:100%; object-fit: cover; display:block; }

  .rm-card h3{
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 2px 0 6px;
  }
  .rm-card p{
    color: #a5b4fc; /* cool-muted for readability on dark */
    font-size: .95rem;
    line-height: 1.6;
  }

  /* Hover lift without color shifts */
  .rm-card:hover{
    transform: translateY(-4px);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 28px 70px rgba(0,0,0,.45);
  }

  /* Mobile: stack vertically; replace track with vertical guide */
  @media (max-width: 980px){
    .roadmap{
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 0 0 0 44px;
    }
    .roadmap::before{
      top: 0; bottom: 0; left: 21px; right: auto; width: 3px; height: auto;
      background: var(--rm-line);
    }
    .roadmap::after{
      top: auto;
      bottom: -8px;
      right: auto; left: 15px;
      border: 7px solid transparent;
      border-top-color: #D76E13;
    }
    .rm-node{
      top: 0; left: 22px; transform: translate(-50%, -50%);
    }
    .rm-node::after{ display: none; }
    .rm-card{ margin-left: 22px; margin-top: 8px; }
  }

  /* === Part 3 Roadmap 透明铺在全局紫色画布上 === */
  .roadmap-section { 
    background: transparent !important;     /* 关键：让全局 .site-bg 透出 */
    color: inherit;
  }

  /* 调整标题文字为深色，保证在浅色渐变上可读 */
  .roadmap-section .section-title { color: #0f172a; }   /* 深灰黑 */
  .roadmap-section .section-kicker { color: #475569; }  /* 次级说明 */

   /* 若你的 Part 3 旧版本类名仍包含 .features-section / .flow-section，也一起透明 */
  .features-section.flow-section,
  .flow-section {
    background: transparent !important;
  }

  /* 可选：让卡片更"浮"，增强阴影效果 */
  .rm-card { 
    box-shadow: 0 28px 70px rgba(0,0,0,.18); 
  }

  /* ===== Global Purple Gradient Canvas ===== */
  :root{
    --bg-purple-1: rgba(124, 58, 237, 0.18); /* #7C3AED */
    --bg-purple-2: rgba(99, 102, 241, 0.16); /* #6366F1 */
    --bg-rose-1:   rgba(236, 72, 153, 0.12); /* #EC4899 */
    --bg-base:     #ffffff;
  }

  html, body{
    background: 
      radial-gradient(circle at 20% 30%, rgba(255, 248, 255, 0.9) 0%, transparent 70%),
      radial-gradient(circle at 80% 70%, rgba(250, 245, 255, 0.8) 0%, transparent 75%),
      radial-gradient(circle at 60% 20%, rgba(255, 252, 255, 0.7) 0%, transparent 65%),
      radial-gradient(circle at 40% 80%, rgba(248, 242, 255, 0.9) 0%, transparent 70%),
      radial-gradient(circle at 90% 40%, rgba(255, 250, 255, 0.6) 0%, transparent 60%),
      radial-gradient(circle at 10% 90%, rgba(245, 238, 255, 0.8) 0%, transparent 65%),
      radial-gradient(circle at 70% 10%, rgba(252, 248, 255, 0.7) 0%, transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(255, 249, 255, 0.5) 0%, transparent 80%),
      linear-gradient(135deg, 
        #fefcff 0%,
        #fdfaff 12%,
        #fcf8ff 24%,
        #fbf6ff 36%,
        #faf4ff 48%,
        #f9f2ff 60%,
        #f8f0ff 72%,
        #f7eeff 84%,
        #f6ecff 96%,
        #f5eaff 100%
      );
    background-size: 1000% 1000%, 900% 900%, 1100% 1100%, 950% 950%, 1050% 1050%, 800% 800%, 900% 900%, 600% 600%, 500% 500%;
    background-attachment: fixed;
    animation: 
      gradientShift1 10s ease infinite,
      gradientShift2 16s ease infinite reverse,
      gradientShift3 12s ease infinite,
      gradientShift4 18s ease infinite reverse,
      gradientShift5 11s ease infinite,
      gradientShift6 14s ease infinite,
      gradientShift7 13s ease infinite reverse,
      gradientShift8 9s ease infinite,
      gradientShift 8s ease infinite;
    min-height: 100vh;
  }

  .site-bg{
    position: fixed;
    inset: 0;
    z-index: -1;                    /* 在所有内容后面，但不影响主要内容 */
    pointer-events: none;
    opacity: 0.3;                   /* 降低透明度，避免干扰内容 */
  }

  /* 你已把 Part 3 设为透明了，这里保留： */
  .roadmap-section { 
    background: transparent !important;
  }

  /* =======================
     Part 3 – Two-Row Roadmap
     (no HTML changes needed)
     ======================= */

  /* —— 主题微调：更统一的紫系 —— */
  :root{
    --rm-line-1: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 40%, #6d28d9 85%);
    --rm-line-2: linear-gradient(90deg, #6d28d9 0%, #7c3aed 60%, #8b5cf6 100%);
    --rm-node-ring: #a78bfa;  /* 节点描边紫 */
    --rm-node-glow: rgba(167,139,250,.35);
    --rm-card-bg: #0f1324;    /* 卡片底更干净偏蓝紫 */
    --rm-card-border: #19203a;
    --rm-card-text: #e8edff;  /* 主文案提亮 */
    --rm-card-muted: #b6c1ff; /* 次级文案冷紫 */
  }

  /* —— 栅格从 1×6 -> 3×2，卡片更大 —— */
  .roadmap{
    grid-template-columns: repeat(3, 1fr);
    row-gap: 68px;             /* 两行间距 */
    padding-top: 84px;         /* 给上轨道留空 */
    padding-bottom: 84px;      /* 给下轨道留空 */
    align-items: stretch;      /* 让所有卡片拉伸到相同高度 */
  }

  /* 上轨道线（左->右） */
  .roadmap::before{
    top: 36px;                 /* 轨道到容器的距离 */
    background: var(--rm-line-1);
  }

  /* 下轨道线（右->左）：放在容器底部 */
  .roadmap::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom: 36px;
    height:3px;
    background: var(--rm-line-2);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  }
  /* 上轨道箭头（向右）仍使用你现有的样式，无需变更；
     下轨道加一个向左箭头： */
  @media (min-width: 901px){
    .roadmap::after{
      mask: linear-gradient(90deg, black 0 98%, transparent 98% 100%);
    }
    .roadmap > .rm-step:nth-child(4)::before{
      content:"";
      position:absolute;
      left:-6px; bottom: 26px;
      border: 7px solid transparent;
      border-right-color: #8b5cf6; /* 左侧箭头尖 */
      filter: drop-shadow(0 0 6px rgba(139,92,246,.5));
    }
  }

  /* —— 节点：上行贴上轨道，下行贴下轨道 —— */
  .rm-node{
    width: 36px; height: 36px;
    border: 3px solid var(--rm-node-ring);
    box-shadow: 0 0 0 6px var(--rm-node-glow), 0 10px 24px rgba(0,0,0,.35);
  }
  .rm-index{ color:#fff; font-weight:800; }

  /* 1~3 在第一行，固定到上轨道；4~6 在第二行，固定到下轨道 */
  .roadmap > .rm-step:nth-child(-n+3) .rm-node{ top: 14px; bottom:auto; }
  .roadmap > .rm-step:nth-child(n+4)  .rm-node{ bottom: 14px; top:auto; }

  /* 节点的小"连杆"方向相反 */
  .rm-node::after{ background:#3b4260; }
  .roadmap > .rm-step:nth-child(-n+3) .rm-node::after{
    bottom: -22px; top:auto; width:2px; height:24px;
    left:50%; transform:translateX(-50%);
    content:""; position:absolute; border-radius:999px;
  }
  .roadmap > .rm-step:nth-child(n+4) .rm-node::after{
    top: -22px; bottom:auto; width:2px; height:24px;
    left:50%; transform:translateX(-50%);
    content:""; position:absolute; border-radius:999px;
  }

  /* —— 卡片更大、更亮、更易读 —— */
  .rm-card{
    background:
      linear-gradient(0deg, rgba(139,92,246,.07), rgba(139,92,246,.07)) border-box,
      var(--rm-card-bg) padding-box;
    border: 1px solid var(--rm-card-border);
    color: var(--rm-card-text);
    min-height: 300px;         /* 提升高度给图片 */
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;              /* 让卡片填满可用空间 */
    height: 100%;              /* 确保卡片填满step的高度 */
  }
  .rm-card h3{ color:#f3f4ff; font-weight:800; }
  .rm-card p { 
    color: var(--rm-card-muted); 
    flex-grow: 1;              /* 让段落文本填满剩余空间 */
  }

  .rm-fig{
    aspect-ratio: 4/3;         /* 图片面积更大（从 16:9 -> 4:3） */
    border: 1px solid #223056;
    background: #0c1020;
  }

  /* —— 行内"tab"彩条更细腻、颜色统一 —— */
  .rm-card::before{
    width: 86%;
    background: linear-gradient(90deg, #ec4899, #a78bfa 40%, #8b5cf6 80%);
    filter: drop-shadow(0 8px 14px rgba(139,92,246,.25));
  }

  /* —— 行间"蛇形"衔接：3 -> 4 加一条下引线 —— */
  @media (min-width: 901px){
    .roadmap > .rm-step:nth-child(3)::after{
      content:"";
      position:absolute;
      left: 50%;
      bottom: calc(36px + 18px);  /* 对齐上轨道到下轨道 */
      transform: translateX(-50%);
      width: 2px; height: 56px;
      background: linear-gradient(#8b5cf6, #7c3aed);
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(124,58,237,.35);
    }
  }

  /* —— Hover 提升但颜色不变 —— */
  .rm-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  /* —— Mobile：仍为纵向时间线 —— */
  @media (max-width: 900px){
    .roadmap{
      grid-template-columns: 1fr;
      row-gap: 28px;
      padding: 0 0 0 44px;
    }
    .roadmap::before{ top: 0; left: 21px; right:auto; width:3px; height:100%; background: var(--rm-line-1); }
    .roadmap::after{ display:none; }
    .rm-node{ top: 0; bottom:auto; left: 22px; transform: translate(-50%, -50%); }
    .rm-node::after{ display:none; }
    .rm-card{ margin-left: 22px; margin-top: 8px; min-height: 260px; }
  }

  /* === Global type colors – unify titles to #322563 and adjust text theme === */
  :root{
    /* brand titles */
    --brand-purple: #322563;

    /* on-dark readable tint derived from #191332 (for dark cards etc.) */
    --brand-purple-on-dark: #C6BEE6;

    /* body text scale (on light) */
    --text-900: #1A1830;  /* main body */
    --text-700: #3E3B59;  /* secondary */
    --text-600: #5C5976;  /* muted */
  }

  /* 1) Titles (light sections) */
  h1,h2,h3,h4,h5,h6,
  .hero-title,
  .section-title,
  .footer-brand h3,
  .footer-links-section h4,
  .footer-contact-section h4 {
    color: var(--brand-purple) !important;
  }

  /* 2) Titles on dark surfaces (e.g., roadmap cards) */
  .rm-card h3 { 
    color: var(--brand-purple-on-dark) !important; 
  }

  /* 3) General body text colors (light sections) */
  body,
  .hero-copy .hero-subtitle,
  .hero-copy .hero-lead,
  .section-lead,
  .feature-card p,
  .footer-description,
  .footer-links a,
  .contact-item,
  .nav-link { 
    color: var(--text-700);
  }
  .feature-card h3 { color: var(--brand-purple) !important; }

  /* 4) Roadmap (dark cards) – keep body text readable */
  .rm-card p { color: #C9D1FF; }    /* cool tinted body on dark */
  .rm-card { color: #E9EDFF; }      /* fallback */

  /* 5) Section headings inside dark gradient sections */
  .roadmap-section .section-title { color: var(--brand-purple) !important; }
  .beta-section .section-title     { color: var(--brand-purple) !important; }

  /* 6) Optional: make hero title match instantly */
  .hero-copy .hero-title { color: var(--brand-purple) !important; }

  /* === Translation Button Styles === */
  .translation-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(75, 38, 79, 0.05);
    border: 1px solid rgba(75, 38, 79, 0.2);
    border-radius: 8px;
    color: var(--brand-purple);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .translation-btn:hover {
    background: rgba(75, 38, 79, 0.08);
    border-color: var(--quest-purple);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .translation-flag {
    font-size: 1rem;
  }

  .translation-text {
    font-size: 0.875rem;
  }