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

    :root {
      --color-dark: #FFFFFF;
      --color-darker: #FAFAF8;
      --color-surface: #FFFFFF;
      --color-border: #E8E5E0;
      --color-text: #1A1A1A;
      --color-text-muted: #6B7280;
      --color-accent: #0064E0;
      --color-accent-hover: #0050B3;
      --color-baseball-red: #DC2626;
      --color-baseball-green: #368C50;
      --color-baseball-amber: #F59E0B;
      --color-bg-alt: #F8F6F3;
      --radius: 12px;
      --radius-lg: 16px;
      --max-width: 1100px;
      --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--color-dark);
      color: var(--color-text);
      line-height: 1.7;
      overflow-x: hidden;
    }

    body::before {
      content: ''; position: fixed; top:0; left:0; width:100%; height:100%;
      background-image:
        radial-gradient(circle at 20% 50%, rgba(0, 100, 224, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(220, 38, 38, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(245, 158, 11, 0.01) 0%, transparent 50%);
      pointer-events: none; z-index:0;
    }

    .container { max-width:var(--max-width); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 24px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
        url('//ueeshop.ly200-cdn.com/u_file/UPBH/UPBH592/2605/15/products/3.png') center/cover no-repeat;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 100, 224, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero-content { position:relative; z-index:2; max-width:820px; }

    .hero-ring1 { position:absolute; top:50%; left:50%; width:500px; height:500px; transform:translate(-50%,-50%); border:2px solid rgba(0,100,224,0.08); border-radius:50%; animation:ringPulse 4s ease-in-out infinite; pointer-events:none; z-index:0; }
    .hero-ring2 { position:absolute; top:50%; left:50%; width:380px; height:380px; transform:translate(-50%,-50%); border:2px solid rgba(0,100,224,0.06); border-radius:50%; animation:ringPulse 4s ease-in-out infinite 1s; pointer-events:none; z-index:0; }
    .hero-ring3 { position:absolute; top:50%; left:50%; width:260px; height:260px; transform:translate(-50%,-50%); border:2px solid rgba(0,100,224,0.04); border-radius:50%; animation:ringPulse 4s ease-in-out infinite 2s; pointer-events:none; z-index:0; }
    @keyframes ringPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.4} 50%{transform:translate(-50%,-50%) scale(1.05);opacity:0.8} }

    .hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:1px solid rgba(255,255,255,0.3); border-radius:100px; color:#FFFFFF; font-size:0.85rem; font-weight:600; letter-spacing:0.5px; margin-bottom:28px; text-transform:uppercase; }
    .hero h1 { font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em; margin-bottom:24px; color:#FFFFFF; }
    .hero h1 .highlight { color:var(--color-accent); }
    .hero p { font-size:clamp(1.05rem,1.6vw,1.25rem); color:rgba(255,255,255,0.9); max-width:640px; margin:0 auto 40px; }
    .hero-stats { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
    .hero-stat { text-align:center; }
    .hero-stat .number { font-size:2rem; font-weight:700; color:var(--color-accent); }
    .hero-stat .label { font-size:0.85rem; color:rgba(255,255,255,0.85); margin-top:4px; }

    section { padding:100px 0; }
    .section-header { text-align:center; margin-bottom:64px; }
    .section-header h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; letter-spacing:-0.01em; margin-bottom:16px; }
    .section-header h2 i { color:var(--color-accent); margin-right:10px; }
    .section-header p { color:var(--color-text-muted); font-size:1.05rem; max-width:600px; margin:0 auto; }
    .section-divider { width:72px; height:3px; display:flex; gap:4px; justify-content:center; margin:20px auto 0; }
    .section-divider span { display:block; height:3px; border-radius:2px; background:var(--color-accent); }
    .section-divider span:nth-child(1) { width:24px; }
    .section-divider span:nth-child(2) { width:8px; opacity:0.5; }
    .section-divider span:nth-child(3) { width:8px; opacity:0.3; }

    .intro-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
    .intro-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:36px 28px; transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .intro-card:hover { transform:translateY(-4px); border-color:var(--color-accent); box-shadow:0 12px 40px rgba(0,100,224,0.08); }
    .intro-card .icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; }
    .intro-card .icon.blue { background:rgba(0,100,224,0.15); color:var(--color-accent); }
    .intro-card .icon.red { background:rgba(220,38,38,0.15); color:var(--color-baseball-red); }
    .intro-card .icon.green { background:rgba(54,140,80,0.15); color:var(--color-baseball-green); }
    .intro-card .icon.amber { background:rgba(245,158,11,0.15); color:var(--color-baseball-amber); }
    .intro-card h3 { font-size:1.15rem; font-weight:600; margin-bottom:10px; }
    .intro-card p { color:var(--color-text-muted); font-size:0.92rem; line-height:1.65; }

    .bg-alt { background:var(--color-darker); position:relative; }
    .bg-alt::before, .bg-alt::after { content:''; position:absolute; left:0; width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--color-border), transparent); }
    .bg-alt::before { top:0; } .bg-alt::after { bottom:0; }

    .role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
    .role-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:40px 32px; transition:transform var(--transition), border-color var(--transition); position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .role-card::before { content:''; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 48px 48px 0; border-color:transparent var(--color-accent) transparent transparent; opacity:0; transition:opacity var(--transition); }
    .role-card:hover::before { opacity:0.15; }
    .role-card:hover { transform:translateY(-3px); border-color:rgba(0,100,224,0.3); }
    .role-card .num { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:0.85rem; font-weight:600; color:var(--color-accent); border:1px solid rgba(0,100,224,0.3); border-radius:8px; transform:rotate(45deg); margin-bottom:16px; transition:transform var(--transition), background var(--transition); }
    .role-card .num span { transform:rotate(-45deg); display:block; }
    .role-card:hover .num { transform:rotate(0deg); background:rgba(0,100,224,0.1); }
    .role-card h3 { font-size:1.2rem; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
    .role-card h3 i { color:var(--color-accent); font-size:1.1rem; }
    .role-card p { color:var(--color-text-muted); font-size:0.92rem; line-height:1.7; }
    .role-card ul { list-style:none; margin-top:14px; }
    .role-card ul li { color:var(--color-text-muted); font-size:0.9rem; padding:6px 0; padding-left:22px; position:relative; }
    .role-card ul li::before { content:'\25B8'; position:absolute; left:0; color:var(--color-accent); font-weight:700; }

    .quote-block { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:48px 40px; text-align:center; max-width:780px; margin:60px auto 0; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .quote-block i.fa-quote-left { font-size:2rem; color:var(--color-accent); opacity:0.3; margin-bottom:16px; }
    .quote-block blockquote { font-size:1.2rem; line-height:1.8; color:var(--color-text); font-weight:500; }
    .quote-block .attribution { margin-top:20px; color:var(--color-text-muted); font-size:0.9rem; }

    .modes-table { width:100%; border-collapse:collapse; background:var(--color-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .modes-table thead { background:rgba(0,100,224,0.1); }
    .modes-table th { padding:16px 20px; text-align:left; font-size:0.85rem; font-weight:600; color:var(--color-accent); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--color-border); }
    .modes-table td { padding:18px 20px; font-size:0.92rem; color:var(--color-text); border-bottom:1px solid var(--color-border); }
    .modes-table tr:last-child td { border-bottom:none; }
    .modes-table tr:hover td { background:rgba(0,100,224,0.03); }
    .mode-tag { display:inline-block; padding:3px 12px; border-radius:100px; font-size:0.78rem; font-weight:600; }
    .mode-tag.popular { background:rgba(0,100,224,0.15); color:var(--color-accent); }
    .mode-tag.social { background:rgba(220,38,38,0.15); color:var(--color-baseball-red); }
    .mode-tag.comp { background:rgba(245,158,11,0.15); color:var(--color-baseball-amber); }

    .benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
    .benefit-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:32px 24px; text-align:center; transition:border-color var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .benefit-item:hover { border-color:var(--color-accent); }
    .benefit-item .bicon { width:64px; height:64px; border-radius:50%; background:rgba(0,100,224,0.1); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--color-accent); margin:0 auto 18px; }
    .benefit-item h4 { font-size:1.05rem; font-weight:600; margin-bottom:10px; }
    .benefit-item p { color:var(--color-text-muted); font-size:0.88rem; line-height:1.6; }

    .tech-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
    .tech-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:24px 22px; display:flex; align-items:flex-start; gap:16px; transition:border-color var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .tech-item:hover { border-color:var(--color-accent); }
    .tech-item .ticon { flex-shrink:0; width:44px; height:44px; border-radius:10px; background:rgba(0,100,224,0.1); display:flex; align-items:center; justify-content:center; color:var(--color-accent); font-size:1.1rem; }
    .tech-item h4 { font-size:1rem; font-weight:600; margin-bottom:4px; }
    .tech-item p { font-size:0.88rem; color:var(--color-text-muted); line-height:1.5; }

    .cta-section { text-align:center; padding:80px 0; }
    .cta-section h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; margin-bottom:16px; }
    .cta-section p { color:var(--color-text-muted); max-width:520px; margin:0 auto 36px; }
    .btn-group { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
    .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:100px; font-weight:600; font-size:0.95rem; text-decoration:none; transition:all var(--transition); border:none; }
    .btn-primary { background:var(--color-accent); color:#FFFFFF; }
    .btn-primary:hover { background:var(--color-accent-hover); transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,100,224,0.25); }
    .btn-outline { background:transparent; color:var(--color-text); border:1px solid var(--color-border); }
    .btn-outline:hover { border-color:var(--color-accent); background:rgba(0,100,224,0.05); }

    footer { border-top:1px solid var(--color-border); padding:32px 0; text-align:center; color:var(--color-text-muted); font-size:0.82rem; background:#FAFAF8; }

    .product-grid { display:flex; justify-content:center; gap:20px; }
    .product-card { display:block; max-width:340px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .product-card:hover { transform:translateY(-4px); border-color:var(--color-accent); box-shadow:0 12px 40px rgba(0,100,224,0.08); }
    .product-image { position:relative; aspect-ratio:1/1; background:var(--color-darker); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
    .product-image img { max-width:100%; max-height:100%; object-fit:contain; transition:transform 0.4s ease; }
    .product-card:hover .product-image img { transform:scale(1.05); }
    .product-model { position:absolute; top:12px; right:12px; font-weight:600; font-size:0.8rem; padding:4px 12px; border-radius:6px; background:rgba(0,100,224,0.15); color:var(--color-accent); border:1px solid rgba(0,100,224,0.25); }
    .product-info { padding:20px 18px 22px; }
    .product-info h3 { font-size:1rem; font-weight:600; margin-bottom:6px; line-height:1.3; }
    .product-info p { font-size:0.85rem; color:var(--color-text-muted); line-height:1.5; margin-bottom:14px; }
    .product-cta { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:600; color:var(--color-accent); transition:gap var(--transition); }
    .product-card:hover .product-cta { gap:10px; }
    .product-cta i { font-size:0.75rem; transition:transform var(--transition); }
    .product-card:hover .product-cta i { transform:translateX(2px); }

    .reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    @media (max-width:768px) {
      section { padding:64px 0; }
      .hero { min-height:auto; padding:60px 24px; }
      .hero-stats { gap:28px; }
      .hero-stat .number { font-size:1.6rem; }
      .quote-block { padding:32px 20px; }
      .role-card { padding:28px 22px; }
      .modes-table th, .modes-table td { padding:12px 14px; font-size:0.82rem; }
      .cta-section { padding:56px 0; }
    }
    @media (max-width:480px) {
      .container { padding:0 16px; }
      .hero-stats { flex-direction:column; gap:16px; }
      .modes-table { font-size:0.78rem; }
      .modes-table th:nth-child(3), .modes-table td:nth-child(3) { display:none; }
    }