@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    .bw-wrapper {
      --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-amber: #D4A853;
      --color-dart-red: #C93838;
      --color-dart-green: #368C50;
      --color-dart-blue: #4A85C7;
      --color-bg-alt: #F8F6F3;
      --radius: 12px;
      --radius-lg: 16px;
      --max-width: 1100px;
      --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding:0 24px;
      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;
    }

    .bw-wrapper::before {
      content:''; position:fixed; top:0; left:0; width:100%; height:100%;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(212,168,83,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,100,224,0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0,100,224,0.015) 0%, transparent 60%);
      pointer-events:none; z-index:0;
    }

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

    /* ============================================
       HERO
       ============================================ */
    .bw-hero {
      display:flex; align-items:center; justify-content:center; text-align:center;
      padding:100px 24px; position:relative; overflow:hidden; min-height:100vh;
      background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)), url('//ueeshop.ly200-cdn.com/u_file/UPBH/UPBH592/2607/03/photo/82.jpg') center/cover no-repeat;
    }
    .bw-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(212,168,83,0.10) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(0,100,224,0.10) 0%, transparent 50%), radial-gradient(ellipse at 30% 100%, rgba(212,168,83,0.05) 0%, transparent 50%); pointer-events:none; }
    .bw-hero-content { position:relative; z-index:2; }

    /* Glow orbs */
    .bw-glow1 {
      position:absolute; top:50%; left:50%;
      width:480px; height:480px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,100,224,0.04) 0%, transparent 60%);
      pointer-events:none; z-index:0;
      animation:bwGlowPulse 4s ease-in-out infinite;
    }
    .bw-glow2 {
      position:absolute; top:50%; left:50%;
      width:340px; height:340px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:radial-gradient(circle, rgba(212,168,83,0.03) 0%, transparent 60%);
      pointer-events:none; z-index:0;
      animation:bwGlowPulse 5s ease-in-out infinite 0.5s;
    }
    .bw-glow3 {
      position:absolute; top:50%; left:50%;
      width:200px; height:200px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,100,224,0.02) 0%, transparent 60%);
      pointer-events:none; z-index:0;
      animation:bwGlowPulse 6s ease-in-out infinite 1s;
    }
    @keyframes bwGlowPulse {
      0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.4; }
      50% { transform:translate(-50%,-50%) scale(1.1); opacity:0.8; }
    }

    .bw-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid rgba(255,255,255,0.3); border-radius:100px; color:#fff; font-size:0.75rem; font-weight:600; letter-spacing:0.5px; margin-bottom:20px; text-transform:uppercase; }
    .bw-hero h1 { font-size:clamp(1.6rem,3.5vw,2.8rem); font-weight:800; line-height:1.15; letter-spacing:-0.02em; margin-bottom:16px; color:#fff; }
    .bw-hero h1 .highlight { color:#0064E0; font-weight:700; }
    .bw-hero p { font-size:clamp(0.9rem,1.2vw,1.05rem); color:rgba(255,255,255,0.85); margin:0 0 28px; max-width:860px; }
    .bw-stats { display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
    .bw-stat { text-align:center; }
    .bw-stat .num { font-size:1.5rem; font-weight:700; color:#0064E0; }
    .bw-stat .lbl { font-size:0.78rem; color:rgba(255,255,255,0.8); margin-top:2px; }

    /* ============================================
       PRODUCTS (bg-light)
       ============================================ */
    .bw-bg-light {
      background: #F8F6F3;
      padding: 80px 0;
    }
    .bw-bg-light .bw-header h2 { color: #1A1A1A; }
    .bw-bg-light .bw-header p { color: #6B7280; }
    .bw-bg-light .bw-divider span { background: var(--color-accent); }
    .bw-bg-light .bw-prod { background: #FFFFFF; border-color: #E8E5E0; }
    .bw-bg-light .bw-prod:hover { border-color: var(--color-accent); box-shadow: 0 12px 40px rgba(0,100,224,0.08); }
    .bw-bg-light .bw-prod-info h3 { color: #1A1A1A; }
    .bw-bg-light .bw-prod-info p { color: #6B7280; }
    .bw-bg-light .bw-prod-img { background: #F3F4F6; }

    /* ============================================
       SECTION STANDARD
       ============================================ */
    .bw-section { padding:100px 0; }
    .bw-section-alt { background:var(--color-darker); padding:100px 0; position:relative; }
    .bw-section-alt::before, .bw-section-alt::after { content:''; position:absolute; left:0; width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--color-border), transparent); }
    .bw-section-alt::before { top:0; } .bw-section-alt::after { bottom:0; }
    .bw-header { text-align:center; margin-bottom:64px; }
    .bw-header h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; letter-spacing:-0.01em; margin-bottom:16px; color:var(--color-text); }
    .bw-header h2 i { color:var(--color-accent); margin-right:10px; }
    .bw-header p { color:var(--color-text-muted); font-size:1.05rem; max-width:600px; margin:0 auto; }
    .bw-divider { width:72px; height:3px; display:flex; gap:4px; justify-content:center; margin:20px auto 0; }
    .bw-divider span { display:block; height:3px; border-radius:2px; background:var(--color-accent); }
    .bw-divider span:nth-child(1) { width:24px; }
    .bw-divider span:nth-child(2) { width:8px; opacity:0.5; }
    .bw-divider span:nth-child(3) { width:8px; opacity:0.3; }

    /* ============================================
       INTRO CARDS
       ============================================ */
    .bw-grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
    .bw-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); }
    .bw-card:hover { transform:translateY(-4px); border-color:var(--color-accent); box-shadow:0 12px 40px rgba(0,100,224,0.08); }
    .bw-card .icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; }
    .bw-card .icon.gold { background:rgba(0,100,224,0.15); color:var(--color-accent); }
    .bw-card .icon.red { background:rgba(201,56,56,0.15); color:var(--color-dart-red); }
    .bw-card .icon.blue { background:rgba(74,133,199,0.15); color:var(--color-dart-blue); }
    .bw-card .icon.green { background:rgba(54,140,80,0.15); color:var(--color-dart-green); }
    .bw-card h3 { font-size:1.15rem; font-weight:600; margin-bottom:10px; color:var(--color-text); }
    .bw-card p { color:var(--color-text-muted); font-size:0.92rem; line-height:1.65; }

    /* ============================================
       ROLE CARDS
       ============================================ */
    .bw-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
    .bw-role { 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); }
    .bw-role::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); }
    .bw-role:hover::before { opacity:0.15; }
    .bw-role:hover { transform:translateY(-3px); border-color:rgba(0,100,224,0.3); }
    .bw-role .bw-role-number { 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.25); border-radius:8px; transform:rotate(45deg); margin-bottom:16px; transition:transform var(--transition), background var(--transition); }
    .bw-role .bw-role-number span { transform:rotate(-45deg); display:block; }
    .bw-role:hover .bw-role-number { transform:rotate(0deg); background:rgba(0,100,224,0.08); }
    .bw-role h3 { font-size:1.2rem; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px; color:var(--color-text); }
    .bw-role h3 i { color:var(--color-accent); font-size:1.1rem; }
    .bw-role p { color:var(--color-text-muted); font-size:0.92rem; line-height:1.7; }
    .bw-role ul { list-style:none; margin-top:14px; }
    .bw-role ul li { color:var(--color-text-muted); font-size:0.9rem; padding:6px 0; padding-left:22px; position:relative; }
    .bw-role ul li::before { content:'\25B8'; position:absolute; left:0; color:var(--color-accent); font-weight:700; }

    /* ============================================
       QUOTE BLOCK
       ============================================ */
    .bw-quote { 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); }
    .bw-quote i.fa-quote-left { font-size:2rem; color:var(--color-accent); opacity:0.3; margin-bottom:16px; }
    .bw-quote blockquote { font-size:1.2rem; line-height:1.8; color:var(--color-text); font-weight:500; }
    .bw-quote .attribution { margin-top:20px; color:var(--color-text-muted); font-size:0.9rem; }

    /* ============================================
       TABLE
       ============================================ */
    .bw-table-wrap { overflow-x:auto; }
    .bw-table { width:100%; border-collapse:collapse; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .bw-table thead { background:rgba(0,100,224,0.1); }
    .bw-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); }
    .bw-table td { padding:18px 20px; font-size:0.92rem; color:var(--color-text); border-bottom:1px solid var(--color-border); }
    .bw-table tr:last-child td { border-bottom:none; }
    .bw-table tr:hover td { background:rgba(0,100,224,0.03); }

    /* ============================================
       BENEFITS
       ============================================ */
    .bw-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
    .bw-benefit { 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); }
    .bw-benefit:hover { border-color:var(--color-accent); }
    .bw-benefit .bw-benefit-icon { 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; }
    .bw-benefit .bw-benefit-icon.amber { background:rgba(212,168,83,0.15); color:var(--color-amber); }
    .bw-benefit h4 { font-size:1.05rem; font-weight:600; margin-bottom:10px; color:var(--color-text); }
    .bw-benefit p { color:var(--color-text-muted); font-size:0.88rem; line-height:1.6; }

    /* ============================================
       TECH
       ============================================ */
    .bw-tech { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
    .bw-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); }
    .bw-tech-item:hover { border-color:var(--color-accent); }
    .bw-tech-item .bw-tech-icon { 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; }
    .bw-tech-item h4 { font-size:1rem; font-weight:600; margin-bottom:4px; color:var(--color-text); }
    .bw-tech-item p { font-size:0.88rem; color:var(--color-text-muted); line-height:1.5; }

    /* ============================================
       PRODUCT CARDS
       ============================================ */
    .bw-grid-prod { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
    .bw-prod { display:flex; flex-direction:column; 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); }
    .bw-prod:hover { transform:translateY(-4px); border-color:var(--color-accent); box-shadow:0 12px 40px rgba(0,100,224,0.08); }
    .bw-prod-img { position:relative; width:100%; padding-top:100%; background:var(--color-darker); display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .bw-prod-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:20px; transition:transform 0.4s ease; }
    .bw-prod:hover .bw-prod-img img { transform:scale(1.05); }
    .bw-prod-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); }
    .bw-prod-info { padding:20px 18px 22px; flex:1; display:flex; flex-direction:column; }
    .bw-prod-info h3 { font-size:1rem; font-weight:600; margin-bottom:6px; color:var(--color-text); }
    .bw-prod-info p { font-size:0.85rem; color:var(--color-text-muted); line-height:1.5; margin-bottom:14px; flex:1; }
    .bw-prod-cta { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:600; color:var(--color-accent); transition:gap var(--transition); }
    .bw-prod:hover .bw-prod-cta { gap:10px; }
    .bw-prod-cta i { font-size:0.75rem; transition:transform var(--transition); }
    .bw-prod:hover .bw-prod-cta i { transform:translateX(2px); }

    /* ============================================
       CTA
       ============================================ */
    .bw-cta { text-align:center; padding:80px 0; }
    .bw-cta h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; margin-bottom:16px; color:var(--color-text); }
    .bw-cta p { color:var(--color-text-muted); max-width:520px; margin:0 auto 36px; }
    .bw-btn-group { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
    .bw-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); cursor:pointer; border:none; }
    .bw-btn-primary { background:var(--color-accent); color:#fff; }
    .bw-btn-primary:hover { background:var(--color-accent-hover); transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,100,224,0.25); }

    /* ============================================
       FOOTER
       ============================================ */
    .bw-footer { border-top:1px solid var(--color-border); padding:32px 0; text-align:center; color:var(--color-text-muted); font-size:0.85rem; background:#FAFAF8; }

    /* ============================================
       SCROLL REVEAL
       ============================================ */
    .bw-reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
    .bw-reveal.visible { opacity:1; transform:translateY(0); }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width:768px) {
      .bw-section, .bw-section-alt { padding:56px 0; }
      .bw-bg-light { padding:56px 0; }
      .bw-hero { min-height:auto; padding:60px 24px; }
      .bw-stats { gap:28px; }
      .bw-stat .num { font-size:1.6rem; }
      .bw-quote { padding:28px 20px; }
      .bw-role { padding:28px 22px; }
      .bw-cta { padding:56px 0; }
    }
    @media (max-width:480px) {
      .bw-wrapper { padding:0 16px; }
      .bw-stats { flex-direction:column; gap:16px; }
      .bw-table th:nth-child(3),
      .bw-table td:nth-child(3) { display:none; }
    }