/* ===== WHITE-LABEL PAGE STYLES ===== */

    /* Hero */
    .wl-hero{
      background:linear-gradient(135deg,#0a1628 0%,#0d2147 40%,#143a7a 100%);
      color:#fff;padding:120px 0 100px;position:relative;overflow:hidden;
    }
    .wl-hero::before{
      content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;
      border-radius:50%;background:radial-gradient(circle,rgba(0,112,186,.3),transparent 70%);
    }
    .wl-hero::after{
      content:'';position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;
      border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.15),transparent 70%);
    }
    .wl-hero .container{position:relative;z-index:1}
    .wl-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
    .wl-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;line-height:1.1;margin-bottom:20px}
    .wl-hero h1 .grad{background:linear-gradient(135deg,#ffd140,#f0a030);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .wl-hero p.sub{font-size:19px;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:32px;max-width:520px}
    .wl-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
    .wl-hero-btns .btn{font-size:15px;padding:14px 32px}

    /* Trust bar */
    .wl-trust{display:flex;gap:40px;flex-wrap:wrap}
    .wl-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.6)}
    .wl-trust-item .check{color:#ffd140;font-size:16px}

    /* Hero visual – brand builder mockup */
    .wl-mockup{
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
      border-radius:20px;padding:32px;backdrop-filter:blur(10px);
      box-shadow:0 30px 80px rgba(0,0,0,.3);
    }
    .wl-mockup-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
    .wl-mockup-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)}
    .wl-mockup-dot.r{background:#ff5f57}.wl-mockup-dot.y{background:#febc2e}.wl-mockup-dot.g{background:#28c840}
    .wl-mockup-brand{
      display:flex;align-items:center;gap:16px;
      background:rgba(255,255,255,.05);border-radius:12px;padding:16px;margin-bottom:16px;
      border:1px solid rgba(255,255,255,.08);
    }
    .wl-mockup-logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff}
    .wl-mockup-info h4{color:#fff;font-size:16px;margin-bottom:2px}
    .wl-mockup-info span{color:rgba(255,255,255,.5);font-size:12px}
    .wl-mockup-colors{display:flex;gap:8px;margin-bottom:16px}
    .wl-color-swatch{width:32px;height:32px;border-radius:8px;border:2px solid rgba(255,255,255,.1)}
    .wl-mockup-features{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .wl-mockup-feat{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
      border-radius:8px;padding:10px 12px;font-size:12px;color:rgba(255,255,255,.6);
      display:flex;align-items:center;gap:6px;
    }
    .wl-mockup-feat .ico{font-size:14px}

    /* Logos bar */
    .wl-logos{
      background:#f8f9fb;padding:48px 0;border-bottom:1px solid #eaeced;
    }
    .wl-logos-inner{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;opacity:.5}
    .wl-logos-inner span{font-size:18px;font-weight:700;color:#6c7378;letter-spacing:1px}

    /* Section headers */
    .wl-section{padding:100px 0}
    .wl-section-alt{background:#f8f9fb}
    .wl-section-dark{background:linear-gradient(135deg,#0a1628,#0d2147);color:#fff}
    .wl-header{text-align:center;margin-bottom:64px}
    .wl-header .kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:#0070ba;margin-bottom:10px}
    .wl-header h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:#0a1628;margin-bottom:14px}
    .wl-section-dark .wl-header h2{color:#fff}
    .wl-header p{font-size:17px;color:#6c7378;max-width:640px;margin:0 auto}
    .wl-section-dark .wl-header p{color:rgba(255,255,255,.6)}

    /* Feature grid */
    .wl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
    .wl-feat{
      background:#fff;border:1px solid #eaeced;border-radius:16px;padding:32px;
      transition:all .3s ease;position:relative;overflow:hidden;
    }
    .wl-feat:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,48,135,.1);border-color:#d4e5f7}
    .wl-feat-icon{
      width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
      font-size:24px;margin-bottom:18px;
    }
    .wl-feat-icon.blue{background:#e8f4fd;color:#0070ba}
    .wl-feat-icon.gold{background:#fef7e0;color:#d4a017}
    .wl-feat-icon.teal{background:#e6f7f3;color:#0c8a74}
    .wl-feat-icon.purple{background:#ede9fe;color:#6366f1}
    .wl-feat-icon.red{background:#fee2e2;color:#dc2626}
    .wl-feat-icon.indigo{background:#e0e7ff;color:#4338ca}
    .wl-feat h3{font-size:18px;font-weight:700;color:#0a1628;margin-bottom:8px}
    .wl-feat p{font-size:14px;color:#6c7378;line-height:1.6}
    .wl-feat-tag{
      position:absolute;top:16px;right:16px;background:#e8f4fd;color:#0070ba;
      font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;
    }

    /* How it works */
    .wl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
    .wl-step{text-align:center;position:relative;padding:0 20px}
    .wl-step-num{
      width:56px;height:56px;border-radius:50%;
      background:linear-gradient(135deg,#003087,#0070ba);
      color:#fff;font-size:20px;font-weight:800;
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 20px;position:relative;z-index:2;
    }
    .wl-step::before{
      content:'';position:absolute;top:28px;left:calc(50% + 28px);right:calc(-50% + 28px);
      height:2px;background:linear-gradient(90deg,#003087,#0070ba);z-index:1;
    }
    .wl-step:last-child::before{display:none}
    .wl-step h3{font-size:16px;font-weight:700;color:#0a1628;margin-bottom:6px}
    .wl-step p{font-size:13px;color:#6c7378;line-height:1.5}

    /* Architecture diagram */
    .wl-arch{
      background:linear-gradient(135deg,#0a1628,#0d2147);
      border-radius:20px;padding:48px;margin-top:48px;
      border:1px solid rgba(255,255,255,.08);
    }
    .wl-arch-layers{display:flex;flex-direction:column;gap:12px}
    .wl-arch-layer{
      display:flex;align-items:center;border-radius:12px;overflow:hidden;
    }
    .wl-arch-label{
      min-width:180px;padding:16px 20px;font-size:13px;font-weight:700;
      text-transform:uppercase;letter-spacing:1px;
    }
    .wl-arch-items{
      display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;flex:1;
    }
    .wl-arch-item{
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
      border-radius:8px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.7);
      white-space:nowrap;
    }
    .wl-layer-brand .wl-arch-label{background:rgba(99,102,241,.3);color:#a5b4fc}
    .wl-layer-app .wl-arch-label{background:rgba(0,112,186,.3);color:#93c5fd}
    .wl-layer-core .wl-arch-label{background:rgba(12,138,116,.3);color:#6ee7b7}
    .wl-layer-infra .wl-arch-label{background:rgba(212,160,23,.3);color:#fcd34d}

    /* Comparison table */
    .wl-compare{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06)}
    .wl-compare thead{background:linear-gradient(135deg,#003087,#0070ba)}
    .wl-compare th{color:#fff;padding:18px 24px;font-size:14px;font-weight:700;text-align:left}
    .wl-compare th:first-child{border-radius:16px 0 0 0}
    .wl-compare th:last-child{border-radius:0 16px 0 0}
    .wl-compare td{padding:16px 24px;font-size:14px;border-bottom:1px solid #f0f0f0}
    .wl-compare tr:last-child td{border-bottom:none}
    .wl-compare tr:nth-child(even){background:#f8f9fb}
    .wl-compare .yes{color:#0c8a74;font-weight:700}
    .wl-compare .no{color:#d1d5db}
    .wl-compare .feat-name{font-weight:600;color:#0a1628}
    .wl-compare .highlight-col{background:rgba(0,112,186,.04)}

    /* Stats band */
    .wl-stats{
      background:linear-gradient(135deg,#003087,#0070ba);
      padding:64px 0;color:#fff;
    }
    .wl-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
    .wl-stat-num{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:#ffd140}
    .wl-stat-label{font-size:14px;color:rgba(255,255,255,.7);margin-top:4px}

    /* Use cases */
    .wl-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .wl-usecase{
      border-radius:16px;padding:36px;position:relative;overflow:hidden;
      color:#fff;transition:transform .3s ease;
    }
    .wl-usecase:hover{transform:translateY(-4px)}
    .wl-usecase.uc1{background:linear-gradient(135deg,#6366f1,#4338ca)}
    .wl-usecase.uc2{background:linear-gradient(135deg,#0c8a74,#065f46)}
    .wl-usecase.uc3{background:linear-gradient(135deg,#d97706,#b45309)}
    .wl-usecase .uc-icon{font-size:36px;margin-bottom:16px}
    .wl-usecase h3{font-size:20px;font-weight:700;margin-bottom:8px}
    .wl-usecase p{font-size:14px;opacity:.8;line-height:1.6;margin-bottom:16px}
    .wl-usecase ul{list-style:none;padding:0}
    .wl-usecase li{font-size:13px;opacity:.8;padding:4px 0;padding-left:18px;position:relative}
    .wl-usecase li::before{content:'✓';position:absolute;left:0;color:rgba(255,255,255,.9)}

    /* Testimonial */
    .wl-testimonial{
      background:#fff;border:1px solid #eaeced;border-radius:20px;padding:48px;
      max-width:800px;margin:0 auto;text-align:center;
      box-shadow:0 8px 32px rgba(0,0,0,.04);
    }
    .wl-testimonial blockquote{font-size:20px;font-weight:500;color:#0a1628;line-height:1.6;margin-bottom:24px;font-style:italic}
    .wl-testimonial-author{display:flex;align-items:center;justify-content:center;gap:12px}
    .wl-testimonial-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
    .wl-testimonial-info{text-align:left}
    .wl-testimonial-info strong{color:#0a1628;font-size:15px}
    .wl-testimonial-info span{color:#6c7378;font-size:13px;display:block}

    /* Pricing cards */
    .wl-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .wl-price-card{
      background:#fff;border:1px solid #eaeced;border-radius:20px;padding:36px;
      transition:all .3s ease;position:relative;
    }
    .wl-price-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,48,135,.1)}
    .wl-price-card.popular{border:2px solid #003087;box-shadow:0 12px 40px rgba(0,48,135,.12)}
    .wl-price-card.popular::before{
      content:'MOST POPULAR';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
      background:linear-gradient(135deg,#003087,#0070ba);color:#fff;font-size:10px;font-weight:700;
      padding:5px 16px;border-radius:20px;letter-spacing:1px;
    }
    .wl-price-card h3{font-size:20px;font-weight:700;color:#0a1628;margin-bottom:4px}
    .wl-price-card .price{font-size:36px;font-weight:800;color:#003087;margin:16px 0 4px}
    .wl-price-card .price span{font-size:14px;color:#6c7378;font-weight:500}
    .wl-price-card .price-desc{font-size:13px;color:#6c7378;margin-bottom:24px}
    .wl-price-card ul{list-style:none;padding:0;margin-bottom:28px}
    .wl-price-card li{font-size:14px;color:#374151;padding:8px 0;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:8px}
    .wl-price-card li::before{content:'✓';color:#0c8a74;font-weight:700;font-size:14px}
    .wl-price-card .btn{width:100%;padding:14px;font-size:15px}

    /* FAQ */
    .wl-faq{max-width:720px;margin:0 auto}
    .wl-faq-item{border-bottom:1px solid #eaeced;padding:20px 0}
    .wl-faq-q{
      display:flex;justify-content:space-between;align-items:center;cursor:pointer;
      font-size:16px;font-weight:600;color:#0a1628;transition:color .2s;
    }
    .wl-faq-q:hover{color:#0070ba}
    .wl-faq-q .arrow{transition:transform .3s;font-size:20px;color:#9ca3af}
    .wl-faq-q.open .arrow{transform:rotate(180deg)}
    .wl-faq-a{
      max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
      font-size:14px;color:#6c7378;line-height:1.7;
    }
    .wl-faq-a.open{max-height:300px;padding-top:12px}

    /* CTA */
    .wl-cta{
      background:linear-gradient(135deg,#0a1628 0%,#0d2147 40%,#143a7a 100%);
      padding:100px 0;text-align:center;color:#fff;position:relative;overflow:hidden;
    }
    .wl-cta::before{
      content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;
      border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.2),transparent 70%);
    }
    .wl-cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:16px}
    .wl-cta p{font-size:18px;color:rgba(255,255,255,.65);max-width:600px;margin:0 auto 36px}
    .wl-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

    /* Responsive */
    @media(max-width:900px){
      .wl-hero-grid{grid-template-columns:1fr}
      .wl-features{grid-template-columns:1fr 1fr}
      .wl-steps{grid-template-columns:1fr 1fr;gap:32px}
      .wl-step::before{display:none}
      .wl-stats-grid{grid-template-columns:1fr 1fr}
      .wl-usecases{grid-template-columns:1fr}
      .wl-pricing{grid-template-columns:1fr}
      .wl-arch-layer{flex-direction:column}
      .wl-arch-label{min-width:unset;text-align:center}
      .wl-arch-items{justify-content:center}
      .wl-compare{font-size:12px}
      .wl-compare th,.wl-compare td{padding:10px 12px}
    }
    @media(max-width:600px){
      .wl-features{grid-template-columns:1fr}
      .wl-steps{grid-template-columns:1fr}
    }