*,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }

   body {
       font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
       color: #1A1A2E;
       background: #FFFFFF;
       overflow-x: hidden;
   }

   /* ===== SCROLL REVEAL ANIMATION ===== */
   .reveal {
       opacity: 0;
       transform: translateY(40px);
       transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .reveal.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .reveal-delay-1 {
       transition-delay: 0.1s;
   }

   .reveal-delay-2 {
       transition-delay: 0.2s;
   }

   .reveal-delay-3 {
       transition-delay: 0.3s;
   }

   /* ===== HEADER ===== */
   .header {
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-bottom: 1px solid rgba(229, 231, 235, 0.6);
       padding: 0 80px;
       height: 72px;
       position: sticky;
       top: 0;
       z-index: 100;
   }

   .header-inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
       max-width: 1200px;
   }

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

   .nav {
       display: flex;
       align-items: center;
       gap: 40px;
   }

   .nav a {
       color: #4A5568;
       font-size: 15px;
       font-weight: 500;
       text-decoration: none;
       transition: color 0.25s;
       position: relative;
   }

   .nav a::after {
       content: '';
       position: absolute;
       bottom: -4px;
       left: 50%;
       transform: translateX(-50%) scaleX(0);
       width: 20px;
       height: 2px;
       background: #FF6A00;
       border-radius: 1px;
       transition: transform 0.25s;
   }

   .nav a:hover {
       color: #FF6A00;
   }

   .nav a:hover::after {
       transform: translateX(-50%) scaleX(1);
   }

   /* ===== HAMBURGER MENU ===== */
   .menu-toggle {
       display: none;
       flex-direction: column;
       justify-content: center;
       gap: 5px;
       width: 28px;
       height: 28px;
       cursor: pointer;
       background: none;
       border: none;
       padding: 0;
       z-index: 201;
   }

   .menu-toggle span {
       display: block;
       width: 100%;
       height: 2px;
       background: #1A1A2E;
       border-radius: 2px;
       transition: all 0.3s ease;
       transform-origin: center;
   }

   .menu-toggle.active span:nth-child(1) {
       transform: rotate(45deg) translate(5px, 5px);
   }

   .menu-toggle.active span:nth-child(2) {
       opacity: 0;
   }

   .menu-toggle.active span:nth-child(3) {
       transform: rotate(-45deg) translate(5px, -5px);
   }

   .nav-overlay {
       display: none;
   }

   /* ===== HERO ===== */
   .hero {
       position: relative;
       background: radial-gradient(ellipse 120% 120% at 50% 30%, #FFF5ED 0%, #FFFFFF 100%);
       overflow: hidden;
       min-height: calc(100vh - 72px);
       display: flex;
       flex-direction: column;
   }

   .hero-content {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 60px 120px 0;
       z-index: 2;
       flex: 1;
   }

   /* Hero decorative elements */
   .hero-decor {
       position: absolute;
       inset: 0;
       pointer-events: none;
       overflow: hidden;
   }

   .hero-decor .glow-orb {
       position: absolute;
       width: 700px;
       height: 700px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(255, 106, 0, 0.12) 0%, transparent 70%);
       top: -100px;
       left: 50%;
       transform: translateX(-50%);
   }

   .hero-decor .deco-circle {
       position: absolute;
       border-radius: 50%;
       border: 1px solid rgba(203, 213, 225, 0.3);
   }

   .hero-decor .deco-circle-1 {
       width: 140px;
       height: 140px;
       top: 80px;
       left: 80px;
       animation: float 8s ease-in-out infinite;
   }

   .hero-decor .deco-circle-2 {
       width: 90px;
       height: 90px;
       top: 320px;
       right: 100px;
       animation: float 6s ease-in-out infinite reverse;
   }

   .hero-decor .deco-circle-3 {
       width: 220px;
       height: 220px;
       top: 40px;
       right: 60px;
       border-width: 0.5px;
       animation: float 10s ease-in-out infinite;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-15px);
       }
   }

   .headline {
       font-size: 76px;
       font-weight: 800;
       letter-spacing: -2px;
       text-align: center;
       background: linear-gradient(180deg, #1A1A2E 0%, #4A5568 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 24px;
       line-height: 1.1;
   }

   .subheadline {
       font-size: 26px;
       font-weight: 600;
       color: #2D2D3F;
       letter-spacing: -0.3px;
       text-align: center;
       margin-bottom: 80px;
       opacity: 0.9;
   }

   /* Trust strip */
   .trust-strip {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 40px;
       width: 100%;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px 0;
   }

   .trust-label {
       font-size: 13px;
       font-weight: 500;
       color: #9CA3AF;
   }

   .stat {
       display: flex;
       align-items: center;
       gap: 6px;
   }

   .stat-num {
       font-size: 22px;
       font-weight: 800;
       color: #FF6A00;
   }

   .stat-label {
       font-size: 13px;
       color: #6B7280;
       font-weight: 400;
   }

   .stat-divider {
       width: 1px;
       height: 20px;
       background: #E5E5EA;
   }

   /* Logo scroll area */
   .logo-scroll-section {
       background: #FFFFFF;
       overflow: hidden;
       padding: 28px 0;
       margin-top: 20px;
       position: relative;
   }

   .logo-scroll-section::before,
   .logo-scroll-section::after {
       content: '';
       position: absolute;
       top: 0;
       bottom: 0;
       width: 200px;
       z-index: 2;
       pointer-events: none;
   }

   .logo-scroll-section::before {
       left: 0;
       background: linear-gradient(90deg, #FFFFFF 0%, transparent 100%);
   }

   .logo-scroll-section::after {
       right: 0;
       background: linear-gradient(270deg, #FFFFFF 0%, transparent 100%);
   }

   .logo-scroll-track {
       display: flex;
       animation: scrollLogos 40s linear infinite;
       width: max-content;
   }

   .logo-scroll-track:hover {
       animation-play-state: paused;
   }

   .logo-scroll-group {
       display: flex;
       align-items: center;
       gap: 56px;
       padding: 0 28px;
   }

   .logo-scroll-group img {
       height: 20px;
       width: auto;
       opacity: 0.45;
       transition: opacity 0.4s;
       filter: grayscale(20%);
   }

   .logo-scroll-group img:hover {
       opacity: 0.85;
       filter: grayscale(0%);
   }

   @keyframes scrollLogos {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   /* ===== SECTION SHARED ===== */
   .section-line {
       width: 60px;
       height: 3px;
       background: linear-gradient(90deg, #FF6A00, #FF8533);
       border-radius: 2px;
       margin: 0 auto 24px;
   }

   .section-title {
       font-size: 40px;
       font-weight: 800;
       letter-spacing: -1px;
       color: #1A1A2E;
       text-align: center;
       margin-bottom: 24px;
   }

   /* ===== PLATFORM INTRO ===== */
   .platform-intro {
       background: #F8F9FA;
       padding: 100px 120px;
       position: relative;
       overflow: hidden;
   }

   .platform-intro .decor-layer {
       position: absolute;
       inset: 0;
       pointer-events: none;
   }

   .platform-intro .angled-line {
       position: absolute;
       width: 200px;
       height: 1px;
       background: #FF6A00;
       opacity: 0.08;
       transform: rotate(-25deg);
       top: 200px;
       left: -30px;
   }

   .platform-intro .diamond {
       position: absolute;
       width: 16px;
       height: 16px;
       border: 0.8px solid #CBD5E1;
       opacity: 0.12;
       transform: rotate(45deg);
       top: 60px;
       right: 90px;
   }

   .intro-desc {
       font-size: 17px;
       color: #64748B;
       line-height: 1.9;
       text-align: center;
       max-width: 780px;
       margin: 0 auto 20px;
   }

   .intro-extra {
       font-size: 15px;
       color: #9CA3AF;
       line-height: 1.8;
       text-align: center;
       max-width: 700px;
       margin: 0 auto;
   }

   /* ===== CORE SERVICES ===== */
   .core-services {
       background: #FFFFFF;
       padding: 100px 120px;
       position: relative;
       overflow: hidden;
   }

   .core-services .section-title {
       margin-bottom: 56px;
   }

   .cards-row {
       display: flex;
       gap: 24px;
       width: 100%;
       max-width: 1200px;
       margin: 0 auto 24px;
   }

   .cards-row:last-child {
       margin-bottom: 0;
   }

   .service-card {
       flex: 1;
       background: #FFFFFF;
       border: 1px solid #EBEBEF;
       border-radius: 16px;
       padding: 32px;
       display: flex;
       flex-direction: column;
       gap: 16px;
       transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   }

   .service-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
       border-color: rgba(255, 106, 0, 0.15);
   }

   .card-icon {
       width: 52px;
       height: 52px;
       background: linear-gradient(135deg, #FFF2E0, #FFE8CC);
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .card-icon svg {
       width: 24px;
       height: 24px;
       color: #FF6A00;
       stroke: currentColor;
       fill: none;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
   }

   .card-title {
       font-size: 20px;
       font-weight: 700;
       color: #1A1A2E;
   }

   .card-desc {
       font-size: 14px;
       color: #6B7280;
       line-height: 1.7;
   }

   /* ===== ADVANTAGES ===== */
   .advantages {
       background: #F8F9FA;
       padding: 100px 120px;
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .advantages .section-title {
       margin-bottom: 20px;
   }

   .adv-subtitle {
       font-size: 16px;
       color: #6B7280;
       line-height: 1.7;
       text-align: center;
       max-width: 680px;
       margin: 0 auto 56px;
   }

   .adv-cards {
       display: flex;
       gap: 32px;
       width: 100%;
       max-width: 1200px;
   }

   .adv-card {
       flex: 1;
       background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
       border: 1px solid #EBEBEF;
       border-radius: 20px;
       padding: 44px 36px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 20px;
       transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
   }

   .adv-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
       border-color: rgba(255, 106, 0, 0.12);
   }

   .adv-num {
       font-size: 52px;
       font-weight: 900;
       letter-spacing: -2px;
       line-height: 1;
   }

   .adv-num.n1 {
       color: rgba(255, 106, 0, 0.18);
   }

   .adv-num.n2 {
       color: rgba(255, 133, 51, 0.18);
   }

   .adv-num.n3 {
       color: rgba(229, 93, 0, 0.18);
   }

   .adv-title {
       font-size: 22px;
       font-weight: 700;
       color: #1A1A2E;
       text-align: center;
   }

   .adv-desc {
       font-size: 14px;
       color: #6B7280;
       line-height: 1.7;
       text-align: center;
   }

   /* ===== CTA SECTION ===== */
   .cta-section {
       background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F2 30%, #F6F5F3 100%);
       padding: 120px 120px;
       position: relative;
       overflow: hidden;
   }

   .cta-section .decor-layer {
       position: absolute;
       inset: 0;
       pointer-events: none;
   }

   .cta-section .cta-glow {
       position: absolute;
       width: 600px;
       height: 500px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(255, 106, 0, 0.08) 0%, transparent 70%);
       top: -100px;
       left: 50%;
       transform: translateX(-50%);
   }

   .cta-section .deco-ring {
       position: absolute;
       border-radius: 50%;
       border: 0.8px solid rgba(203, 213, 225, 0.2);
   }

   .cta-section .deco-ring-1 {
       width: 40px;
       height: 40px;
       top: 60px;
       left: 100px;
   }

   .cta-section .deco-ring-2 {
       width: 20px;
       height: 20px;
       top: 80px;
       right: 120px;
   }

   .cta-content {
       position: relative;
       z-index: 2;
       text-align: center;
   }

   .cta-title {
       font-size: 44px;
       font-weight: 800;
       letter-spacing: -1px;
       color: #1A1A2E;
       text-align: center;
       margin-bottom: 28px;
   }

   .cta-desc {
       font-size: 17px;
       color: #64748B;
       line-height: 1.8;
       text-align: center;
       max-width: 620px;
       margin: 0 auto;
   }

   /* ===== FOOTER ===== */
   .footer {
       background: #F5F5F6;
       padding: 52px 120px;
       display: flex;
       flex-direction: column;
       gap: 36px;
   }

   .footer-top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       max-width: 1200px;
       width: 100%;
       margin: 0 auto;
   }

   .footer-brand {
       display: flex;
       flex-direction: column;
       gap: 12px;
       /* max-width: 300px; */
   }

   .footer-logo {
       display: flex;
       align-items: flex-end;
   }

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

   .footer-logo .footer-tagline {
       font-size: 13px;
       color: #6B7280;
       margin-left: 12px;
   }

   .plat-wrap {
       display: flex;
       align-items: center;
       margin-top: 50px;
       gap: 30px;
   }

   .plat-wrap .plat-hover-view {
       width: 45px;
       height: 45px;
       position: relative;
   }

   .plat-hover-view .plat-icon {
       width: 100%;
       height: 100%;
   }

   .plat-hover-view .plat-icon-hover {
       width: 150px;
       height: 160px;
       position: absolute;
       top: -170px;
       left: 50%;
       transform: translateX(-50%);
       display: none;
   }

   .plat-hover-view:hover .plat-icon-hover {
       display: block;
       transition: all 0.3s ease-in-out;
   }

   .footer-contact {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .footer-contact .contact-title {
       font-size: 14px;
       font-weight: 600;
       color: #1A1A2E;
       margin-bottom: 2px;
   }

   .footer-contact p {
       font-size: 13px;
       color: #6B7280;
       line-height: 1.5;
   }

   .footer-divider {
       width: 100%;
       height: 1px;
       background: #E5E7EB;
   }

   .footer-bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
       max-width: 1200px;
       width: 100%;
       margin: 0 auto;
   }

   .copyright {
       font-size: 12px;
       color: #9CA3AF;
   }

   .legal-links {
       display: flex;
       gap: 24px;
   }

   .legal-links a {
       font-size: 12px;
       color: #9CA3AF;
       text-decoration: none;
       transition: color 0.25s;
   }

   .legal-links a:hover {
       color: #4A5568;
   }

   /* ===== RESPONSIVE ===== */
   @media (max-width: 1024px) {
       .header {
           padding: 0 40px;
       }

       .hero-content {
           padding: 60px 40px 0;
       }

       .headline {
           font-size: 56px;
       }

       .subheadline {
           font-size: 22px;
           margin-bottom: 60px;
       }

       .platform-intro,
       .core-services,
       .advantages,
       .cta-section {
           padding-left: 40px;
           padding-right: 40px;
       }

       .footer {
           padding-left: 40px;
           padding-right: 40px;
       }

       .cards-row {
           flex-direction: column;
       }

       .adv-cards {
           flex-direction: column;
       }
   }

   @media (max-width: 768px) {
       .header {
           padding: 0 20px;
           height: 60px;
       }

       .hero {
           min-height: calc(100vh - 60px);
       }

       .menu-toggle {
           display: flex;
       }

       .nav {
           position: fixed;
           top: 0;
           right: 0;
           width: 280px;
           height: 100vh;
           background: #FFFFFF;
           flex-direction: column;
           align-items: flex-start;
           justify-content: flex-start;
           padding: 80px 32px 40px;
           gap: 0;
           box-shadow: -8px 0 30px rgba(0, 0, 0, 0.1);
           transform: translateX(100%);
           transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
           z-index: 200;
       }

       .nav.open {
           transform: translateX(0);
       }

       .nav a {
           font-size: 17px;
           font-weight: 600;
           color: #1A1A2E;
           padding: 16px 0;
           width: 100%;
           border-bottom: 1px solid #F0F0F0;
       }

       .nav a::after {
           display: none;
       }

       .nav a:hover {
           color: #FF6A00;
       }

       .nav-overlay {
           display: block;
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, 0.3);
           z-index: 199;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.35s, visibility 0.35s;
       }

       .nav-overlay.open {
           opacity: 1;
           visibility: visible;
       }

       .hero-content {
           padding: 40px 24px 0;
       }

       .headline {
           font-size: 42px;
           letter-spacing: -1px;
           margin-bottom: 16px;
       }

       .subheadline {
           font-size: 17px;
           margin-bottom: 36px;
           line-height: 1.5;
       }

       .trust-strip {
           flex-direction: row;
           gap: 4px;
           padding: 12px 0;
           opacity: 0.5;
       }

       .trust-label {
           display: none;
       }

       .stat {
           gap: 2px;
       }

       .stat-num {
           font-size: 12px;
           font-weight: 700;
       }

       .stat-label {
           font-size: 10px;
       }

       .stat-divider {
           height: 10px;
           opacity: 0.5;
       }

       .section-title {
           font-size: 28px;
       }

       .cta-title {
           font-size: 32px;
       }

       .platform-intro,
       .core-services,
       .advantages,
       .cta-section {
           padding: 60px 20px;
       }

       .footer {
           padding: 32px 20px;
       }

       .footer-top {
           flex-direction: column;
           gap: 32px;
       }

       .footer-bottom {
           flex-direction: column;
           gap: 12px;
           align-items: flex-start;
       }
   }

   @media (max-width: 420px) {
       .headline {
           font-size: 36px;
       }

       .subheadline {
           font-size: 16px;
           margin-bottom: 32px;
       }

       .logo-scroll-group {
           gap: 40px;
       }

       .logo-scroll-group img {
           height: 16px;
       }
   }