/* ========== Design Tokens ========== */
    :root {
      --color-primary:        #0faeff;
      --color-primary-light:  #5ed4ff;
      --color-primary-dark:   #0090d9;
      --color-primary-deeper: #0077be;
      --color-primary-bg:     #e8f7ff;

      --color-orange:         #ff7849;
      --color-orange-dark:    #ff5a2a;
      --color-purple:         #7c5cfc;
      --color-purple-dark:    #5b3cf6;
      --color-amber:          #ffa940;
      --color-amber-dark:     #ff8a00;
      --color-emerald:        #10b981;

      --color-text-primary:   #1a1a2e;
      --color-text-secondary: #444466;
      --color-text-muted:     #888899;
      --color-text-disabled:  #bbbbcc;

      --color-border:         rgba(15,174,255,0.08);
      --color-border-strong:  rgba(15,174,255,0.16);
      --color-bg-page:        #f8fbff;
      --color-bg-card:        #ffffff;
      --color-bg-surface:     #f2f8ff;

      --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
      --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;

      --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:999px;

      --shadow-card:    0 2px 12px rgba(0,60,120,0.05);
      --shadow-hover:   0 12px 32px rgba(0,100,180,0.10);
      --shadow-feature: 0 6px 20px rgba(15,174,255,0.22), inset 0 1px 0 rgba(255,255,255,0.2);

      --font-family: 'PingFang SC','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    }

    /* ========== Hero ========== */
    .hero {
      position:relative; overflow:hidden;
      padding:100px 0 80px;
      background:linear-gradient(170deg,#f8fbff 0%,#e8f7ff 30%,#f2f8ff 60%,#f8fbff 100%);
    }
    .hero::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(15,174,255,0.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,174,255,0.06) 1px,transparent 1px);
      background-size:56px 56px;
      mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%);
      -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%);
      pointer-events:none;
    }
    .hero-glow {
      position:absolute; top:-200px; right:-100px;
      width:700px; height:700px;
      background:radial-gradient(circle,rgba(15,174,255,0.22) 0%,rgba(94,212,255,0.10) 40%,transparent 65%);
      border-radius:50%; pointer-events:none;
      animation:heroGlow 8s ease-in-out infinite alternate;
    }
    .hero-glow-2 {
      position:absolute; bottom:-150px; left:-80px;
      width:500px; height:500px;
      background:radial-gradient(circle,rgba(124,92,252,0.14) 0%,rgba(200,160,255,0.06) 40%,transparent 60%);
      border-radius:50%; pointer-events:none;
      animation:heroGlow2 10s ease-in-out infinite alternate;
    }
    .hero-glow-3 {
      position:absolute; top:30%; left:20%;
      width:450px; height:450px;
      background:radial-gradient(circle,rgba(255,120,73,0.10) 0%,rgba(255,180,120,0.04) 40%,transparent 60%);
      border-radius:50%; pointer-events:none;
      animation:heroGlow3 12s ease-in-out infinite alternate;
    }
    @keyframes heroGlow {
      0%  { transform:translate(0,0) scale(1);   opacity:.9; }
      50% { transform:translate(-40px,30px) scale(1.1); opacity:.6; }
      100%{ transform:translate(20px,-20px) scale(1.05); opacity:.85; }
    }
    @keyframes heroGlow2 {
      0%  { transform:translate(0,0) scale(1);    opacity:.8; }
      50% { transform:translate(50px,-30px) scale(1.12); opacity:.5; }
      100%{ transform:translate(-20px,25px) scale(1.06); opacity:.75; }
    }
    @keyframes heroGlow3 {
      0%  { transform:translate(0,0) scale(1);    opacity:.7; }
      50% { transform:translate(30px,40px) scale(1.15); opacity:.4; }
      100%{ transform:translate(-25px,-15px) scale(1.08); opacity:.65; }
    }
    .hero .container { position:relative; z-index:2; text-align:center; }
    .hero-eyebrow {
      display:inline-flex; align-items:center; gap:var(--space-2);
      padding:6px 16px; border-radius:var(--radius-full);
      background:rgba(15,174,255,0.08); color:var(--color-primary);
      font-size:13px; font-weight:600; letter-spacing:0.5px;
      margin-bottom:var(--space-5);
    }
    .hero h1 {
      font-size:48px; font-weight:800; line-height:1.25;
      letter-spacing:-1px; margin-bottom:var(--space-5);
      background:linear-gradient(135deg,#0a3d6b 0%,#0a9ee8 35%,#0faeff 60%,#5ec8ff 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .hero-sub {
      font-size:18px; color:var(--color-text-secondary);
      max-width:680px; margin:0 auto; line-height:1.7;
    }

    /* ========== Company Intro ========== */
    .intro {
      padding:100px 0;
      background:var(--color-bg-card);
    }
    .intro-grid {
      display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-16);
      align-items:center;
    }
    .intro-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 14px; border-radius:var(--radius-full);
      background:rgba(15,174,255,0.08); color:var(--color-primary);
      font-size:12px; font-weight:600; letter-spacing:1px;
      margin-bottom:var(--space-5);
    }
    .intro h2 {
      font-size:36px; font-weight:800; line-height:1.25;
      margin-bottom:var(--space-5);
      background:linear-gradient(135deg,#0a3d6b,#0faeff);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .intro-desc {
      font-size:16px; color:var(--color-text-secondary);
      line-height:1.8; margin-bottom:var(--space-6);
    }
    .intro-tags {
      display:flex; flex-wrap:wrap; gap:var(--space-3);
    }
    .intro-tag {
      padding:8px 18px; border-radius:var(--radius-full);
      background:var(--color-bg-surface);
      font-size:13px; font-weight:500; color:var(--color-text-secondary);
      transition:all .25s;
    }
    .intro-tag:hover {
      background:var(--color-primary-bg);
      color:var(--color-primary);
    }
    .intro-visual {
      position:relative;
    }
    .intro-card-main {
      position:relative; padding:var(--space-8);
      border-radius:var(--radius-2xl);
      background:linear-gradient(160deg,#0faeff 0%,#38c9ff 50%,#7c5cfc 100%);
      color:#fff; overflow:hidden;
    }
    .intro-card-main::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);
      background-size:36px 36px; pointer-events:none;
    }
    .intro-card-main .year {
      position:relative; font-size:64px; font-weight:900;
      letter-spacing:-2px; line-height:1; opacity:.2;
    }
    .intro-card-main .label {
      position:relative; font-size:20px; font-weight:700; margin-top:-8px;
    }
    .intro-card-main .sub {
      position:relative; font-size:14px; opacity:.8; margin-top:8px;
    }
    .intro-float-card {
      position:absolute; bottom:-20px; right:-16px;
      padding:var(--space-5) var(--space-6);
      border-radius:var(--radius-xl);
      background:var(--color-bg-card);
      box-shadow:0 12px 40px rgba(0,60,120,0.12);
      display:flex; align-items:center; gap:var(--space-4);
    }
    .float-icon {
      width:48px; height:48px; border-radius:var(--radius-md);
      background:linear-gradient(135deg,#e8f7ff,#bce4ff);
      display:flex; align-items:center; justify-content:center;
    }
    .float-icon svg { width:24px; height:24px; stroke:#0077be; stroke-width:1.8; fill:none; }
    .float-label { font-size:12px; color:var(--color-text-muted); }
    .float-value { font-size:22px; font-weight:800; color:var(--color-text-primary); }

    /* ========== Products ========== */
    .products {
      padding:100px 0;
      background:var(--color-bg-page);
    }
    .section-head {
      text-align:center; margin-bottom:var(--space-12);
    }
    .section-eyebrow {
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 14px; border-radius:var(--radius-full);
      background:rgba(15,174,255,0.08); color:var(--color-primary);
      font-size:12px; font-weight:600; letter-spacing:1.5px;
      margin-bottom:var(--space-4);
    }
    .section-head h2 {
      font-size:36px; font-weight:800; line-height:1.25;
      margin-bottom:var(--space-3);
    }
    .section-head p {
      font-size:16px; color:var(--color-text-muted);
      max-width:560px; margin:0 auto;
    }
    .prod-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
    }
    .prod-card {
      position:relative; padding:var(--space-8);
      border-radius:var(--radius-2xl);
      background:var(--color-bg-card);
      overflow:hidden; transition:all .35s;
    }
    .prod-card:hover {
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
    }
    .prod-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
    }
    .prod-card.blue::before { background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light)); }
    .prod-card.orange::before { background:linear-gradient(90deg,var(--color-orange),var(--color-amber)); }
    .prod-card.purple::before { background:linear-gradient(90deg,var(--color-purple),var(--color-purple-dark)); }
    .prod-icon {
      width:56px; height:56px; border-radius:var(--radius-lg);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:var(--space-5);
    }
    .blue .prod-icon { background:rgba(15,174,255,0.08); }
    .blue .prod-icon svg { stroke:var(--color-primary); }
    .orange .prod-icon { background:rgba(255,120,73,0.08); }
    .orange .prod-icon svg { stroke:var(--color-orange); }
    .purple .prod-icon { background:rgba(124,92,252,0.08); }
    .purple .prod-icon svg { stroke:var(--color-purple); }
    .prod-icon svg { width:28px; height:28px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .prod-card h3 { font-size:20px; font-weight:700; margin-bottom:var(--space-2); }
    .prod-card p { font-size:14px; color:var(--color-text-muted); line-height:1.6; }
    .prod-card .prod-link {
      display:inline-flex; align-items:center; gap:4px;
      margin-top:var(--space-5); font-size:14px; font-weight:600;
      color:var(--color-primary); transition:gap .2s;
    }
    .prod-card:hover .prod-link { gap:8px; }

    /* ========== Philosophy ========== */
    .philosophy {
      padding:100px 0;
      background:var(--color-bg-card);
    }
    .philosophy-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
    }
    .phil-card {
      position:relative; padding:var(--space-10) var(--space-8);
      border-radius:var(--radius-2xl);
      text-align:center; overflow:hidden;
      transition:all .35s;
    }
    .phil-card:nth-child(1) {
      background:linear-gradient(160deg,#e8f7ff 0%,#f0faff 100%);
    }
    .phil-card:nth-child(2) {
      background:linear-gradient(160deg,#fff5eb 0%,#fffbf5 100%);
    }
    .phil-card:nth-child(3) {
      background:linear-gradient(160deg,#f3e8ff 0%,#faf5ff 100%);
    }
    .phil-card:hover { transform:translateY(-4px); }
    .phil-number {
      font-size:56px; font-weight:900; line-height:1;
      margin-bottom:var(--space-4); opacity:.12;
    }
    .phil-card:nth-child(1) .phil-number { color:var(--color-primary); }
    .phil-card:nth-child(2) .phil-number { color:var(--color-orange); }
    .phil-card:nth-child(3) .phil-number { color:var(--color-purple); }
    .phil-icon-wrap {
      width:64px; height:64px; border-radius:var(--radius-xl);
      display:flex; align-items:center; justify-content:center;
      margin:0 auto var(--space-5);
    }
    .phil-card:nth-child(1) .phil-icon-wrap { background:rgba(15,174,255,0.10); }
    .phil-card:nth-child(2) .phil-icon-wrap { background:rgba(255,120,73,0.10); }
    .phil-card:nth-child(3) .phil-icon-wrap { background:rgba(124,92,252,0.10); }
    .phil-icon-wrap svg { width:28px; height:28px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .phil-card:nth-child(1) .phil-icon-wrap svg { stroke:var(--color-primary); }
    .phil-card:nth-child(2) .phil-icon-wrap svg { stroke:var(--color-orange); }
    .phil-card:nth-child(3) .phil-icon-wrap svg { stroke:var(--color-purple); }
    .phil-card h3 { font-size:22px; font-weight:700; margin-bottom:var(--space-3); }
    .phil-card p { font-size:14px; color:var(--color-text-secondary); line-height:1.7; }

    /* ========== Contact ========== */
    .contact {
      padding:100px 0;
      background:var(--color-bg-page);
    }
    .contact-card {
      position:relative; padding:var(--space-16) var(--space-12);
      border-radius:var(--radius-2xl); text-align:center; overflow:hidden;
      background:linear-gradient(160deg,#0faeff 0%,#1ab8ff 20%,#3dc8ff 45%,#5ed4ff 70%,#a0e8ff 100%);
      color:#fff;
    }
    .contact-card::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);
      background-size:40px 40px; pointer-events:none;
    }
    .contact-card h2 {
      font-size:36px; font-weight:800; margin-bottom:var(--space-4); position:relative;
    }
    .contact-card p {
      font-size:17px; opacity:.9; margin-bottom:var(--space-8); position:relative;
    }
    .contact-info {
      position:relative; display:flex; align-items:center; justify-content:center;
      gap:var(--space-10); flex-wrap:wrap;
    }
    .contact-item {
      display:flex; align-items:center; gap:var(--space-3);
    }
    .contact-icon {
      width:48px; height:48px; border-radius:var(--radius-lg);
      background:rgba(255,255,255,0.15);
      backdrop-filter:blur(8px);
      display:flex; align-items:center; justify-content:center;
    }
    .contact-icon svg { width:22px; height:22px; stroke:#fff; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .contact-label { font-size:12px; opacity:.7; }
    .contact-value { font-size:18px; font-weight:700; }


    /* ========== Reveal Animation ========== */
    .reveal {
      opacity:0; transform:translateY(30px);
      transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal:nth-child(2) { transition-delay:.08s; }
    .reveal:nth-child(3) { transition-delay:.16s; }
    .reveal:nth-child(4) { transition-delay:.24s; }
    .reveal:nth-child(5) { transition-delay:.32s; }
    .reveal:nth-child(6) { transition-delay:.40s; }

    /* ========== Responsive ========== */
    @media(max-width:1024px) {
      .intro-grid { grid-template-columns:1fr; }
      .intro-visual { display:none; }
      .prod-grid { grid-template-columns:1fr 1fr; }
      .philosophy-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:900px) {
      .nav-links { display:none; }
    }
    @media(max-width:768px) {
      .hero h1 { font-size:32px; }
      .hero-sub { font-size:16px; }
      .section-head h2 { font-size:28px; }
      .intro h2 { font-size:28px; }
      .prod-grid { grid-template-columns:1fr; }
      .philosophy-grid { grid-template-columns:1fr; }
      .contact-card h2 { font-size:28px; }
      .contact-info { flex-direction:column; gap:var(--space-6); }
      .footer-grid { grid-template-columns:1fr; gap:32px; }
    }