<style>
    /* ── Base ── */
    *,*::before,*::after{box-sizing:border-box}
    body{font-family:'Open Sans',sans-serif;color:#333;margin:0;background:#f7f9fb}
    a{color:inherit;text-decoration:none}
    a:hover{text-decoration:none}

    /* ══ NAVBAR ══ */
    .navbar{background:linear-gradient(135deg,#0d1f33 0%,#0a3d6b 100%);padding:0;box-shadow:0 2px 16px rgba(0,0,0,.28);position:sticky;top:0;z-index:1030}
    .nav-topbar{background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.08);padding:5px 0;font-size:12px;color:rgba(255,255,255,.6)}
    .nav-topbar a{color:rgba(255,255,255,.6);font-size:12px}.nav-topbar a:hover{color:#fff}
    .topbar-inner{display:flex;justify-content:space-between;align-items:center}
    .topbar-left{display:flex;gap:20px;align-items:center}.topbar-right{display:flex;gap:16px;align-items:center}
    .topbar-left i,.topbar-right i{font-size:11px;margin-right:4px;color:#4fc3f7}
    .nav-main{padding:14px 0}
    .navbar-brand{padding:0;margin-right:0}
    .navbar-brand img{height:54px;filter:brightness(0) invert(1);opacity:.95;transition:opacity .2s}
    .navbar-brand:hover img{opacity:1}
    .logo-text{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px}.logo-text span{color:#4fc3f7}
    .navbar-toggler{border:1px solid rgba(255,255,255,.35);padding:5px 10px}
    .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
    .navbar-nav{align-items:center;gap:2px}
    .navbar-nav .nav-link{color:rgba(255,255,255,.82)!important;font-size:13.5px;font-weight:600;padding:8px 14px!important;border-radius:4px;letter-spacing:.2px;transition:background .18s,color .18s;position:relative}
    .navbar-nav .nav-link::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:#4fc3f7;border-radius:2px;transform:scaleX(0);transition:transform .2s}
    .navbar-nav .nav-link:hover{color:#fff!important;background:rgba(255,255,255,.08)}
    .navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after{transform:scaleX(1)}
    .navbar-nav .nav-link.active{color:#fff!important}
    .nav-login{color:rgba(255,255,255,.85)!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:4px;padding:7px 16px!important;margin-left:4px}
    .nav-login:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.6)!important;color:#fff!important}
    .nav-login::after{display:none!important}
    .nav-cta{background:#4fc3f7!important;color:#0d1f33!important;font-weight:700!important;border-radius:4px;padding:8px 18px!important;margin-left:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(79,195,247,.3);transition:background .18s,box-shadow .18s!important}
    .nav-cta:hover{background:#29b6f6!important;color:#0d1f33!important;box-shadow:0 4px 14px rgba(79,195,247,.45)!important}
    .nav-cta::after{display:none!important}
    /* user dropdown */
    .nav-user-toggle{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.88)!important;font-size:13.5px;font-weight:600;padding:6px 12px!important;border-radius:50px!important;border:1.5px solid rgba(255,255,255,.25)!important;background:rgba(255,255,255,.07)!important;transition:background .18s,border-color .18s!important;cursor:pointer;margin-left:8px}
    .nav-user-toggle:hover,.nav-user-toggle.show{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
    .nav-user-toggle::after{display:none!important}
    .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#0a3d6b);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
    .user-chevron{font-size:11px;color:rgba(255,255,255,.6);transition:transform .2s}
    .nav-user-toggle.show .user-chevron{transform:rotate(180deg)}
    .user-dropdown-menu{min-width:220px;border:0!important;border-radius:12px!important;box-shadow:0 8px 32px rgba(0,0,0,.18)!important;padding:8px!important;margin-top:10px!important;background:#fff;animation:dropFade .18s ease}
    @keyframes dropFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    .dropdown-user-header{padding:12px 14px 10px;border-bottom:1px solid #f0f0f0;margin-bottom:6px}
    .dropdown-user-header .duh-name{font-size:14px;font-weight:700;color:#0d1f33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dropdown-user-header .duh-role{font-size:11.5px;color:#888;margin-top:1px}
    .duh-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#0a3d6b);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
    .user-dropdown-menu .dropdown-item{font-size:13.5px;font-weight:500;color:#333;border-radius:8px!important;padding:9px 14px!important;display:flex;align-items:center;gap:10px;transition:background .15s}
    .user-dropdown-menu .dropdown-item i{font-size:15px;width:18px;text-align:center;flex-shrink:0}
    .user-dropdown-menu .dropdown-item:hover{background:#f4f8fc;color:#0a3d6b}
    .user-dropdown-menu .dropdown-item.text-danger:hover{background:#fff5f5;color:#d32f2f!important}
    .user-dropdown-menu .dropdown-divider{margin:6px 0;border-color:#f0f0f0}

    /* ══ PAGE HERO ══ */
    .page-hero{background:linear-gradient(135deg,#0d1f33 0%,#0a3d6b 100%);padding:60px 0 56px;position:relative;overflow:hidden}
    .page-hero::before{content:'';position:absolute;inset:0;background:url('https://www.vesselstatement.com/public/assets/img/home.jpg') center/cover no-repeat;opacity:.08}
    .page-hero-inner{position:relative;z-index:1;text-align:center}
    .page-badge{display:inline-block;background:rgba(79,195,247,.18);border:1px solid rgba(79,195,247,.4);color:#4fc3f7;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 14px;border-radius:20px;margin-bottom:14px}
    .page-hero h1{font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:.75rem;line-height:1.25}
    .page-hero p{font-size:1.05rem;color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 0;line-height:1.7}
    .breadcrumb-wrap .breadcrumb{background:none;padding:0;margin:16px 0 0;justify-content:center;font-size:13px}
    .breadcrumb-wrap .breadcrumb-item{color:rgba(255,255,255,.6)}
    .breadcrumb-wrap .breadcrumb-item.active{color:rgba(255,255,255,.9)}
    .breadcrumb-wrap .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.4)}
    .breadcrumb-wrap .breadcrumb-item a{color:rgba(255,255,255,.7)}.breadcrumb-wrap .breadcrumb-item a:hover{color:#fff}

    /* ══ ACTIVE PLAN BANNER ══ */
    .active-plan-banner{background:linear-gradient(90deg,#e8f4fd,#d0eaf9);border:1px solid #a8d4ef;border-radius:10px;padding:14px 22px;display:flex;align-items:center;gap:12px;font-size:14px;color:#1a3a5c;margin-bottom:36px}
    .active-plan-banner i{color:#0a3d6b;font-size:18px;flex-shrink:0}
    .active-plan-banner strong{color:#0a3d6b}

    /* ══ PRICING SECTION ══ */
    .pricing-section{padding:64px 0 80px}
    .pricing-header{text-align:center;margin-bottom:48px}
    .pricing-header h2{font-size:1.9rem;font-weight:700;color:#0d1f33;margin-bottom:.6rem}
    .pricing-header p{font-size:1rem;color:#666;max-width:520px;margin:0 auto;line-height:1.7}

    /* ══ PLAN CARDS ══ */
    .plan-card{background:#fff;border:1.5px solid #e0e8f0;border-radius:14px;padding:32px 26px 26px;height:100%;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
    .plan-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(10,61,107,.12);border-color:#b0cce0}
    .plan-card.popular{border:2.5px solid #0a3d6b;box-shadow:0 8px 32px rgba(10,61,107,.14)}
    .plan-card.popular:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(10,61,107,.2)}

    /* Popular badge */
    .popular-badge{position:absolute;top:16px;right:16px;background:#0a3d6b;color:#fff;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 10px;border-radius:20px}

    /* Current plan badge */
    .current-badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#4fc3f7,#0a3d6b);color:#fff;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 10px;border-radius:20px}

    /* Plan icon */
    .plan-icon{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:#e8f0f8}
    .plan-icon i{font-size:26px;color:#0a3d6b}
    .plan-card.popular .plan-icon{background:#0a3d6b}
    .plan-card.popular .plan-icon i{color:#fff}

    /* Plan name */
    .plan-name{font-size:1.25rem;font-weight:700;color:#0d1f33;text-align:center;margin-bottom:4px}

    /* Price */
    .plan-price{text-align:center;margin:14px 0 6px}
    .plan-price .currency{font-size:22px;font-weight:700;color:#0d1f33;vertical-align:top;line-height:1.6}
    .plan-price .amount{font-size:48px;font-weight:700;color:#0d1f33;line-height:1;letter-spacing:-1px}
    .plan-price .period{font-size:14px;color:#888;font-weight:400;margin-left:2px}
    .plan-card.popular .plan-price .currency,
    .plan-card.popular .plan-price .amount{color:#0a3d6b}

    /* Divider */
    .plan-divider{border:none;border-top:1px solid #edf2f7;margin:18px 0}

    /* Features */
    .plan-features{list-style:none;padding:0;margin:0 0 24px;flex:1}
    .plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#555;padding:7px 0;border-bottom:1px solid #f5f7fa}
    .plan-features li:last-child{border-bottom:none}
    .plan-features li i{color:#2e7d32;font-size:14px;flex-shrink:0;margin-top:2px}
    .plan-features li strong{color:#0d1f33}

    /* CTA button */
    .btn-plan{display:block;width:100%;padding:13px 20px;border-radius:8px;font-size:14px;font-weight:700;text-align:center;border:none;cursor:pointer;transition:all .2s;letter-spacing:.3px}
    .btn-plan-primary{background:linear-gradient(135deg,#0a3d6b,#1565c0);color:#fff;box-shadow:0 3px 12px rgba(10,61,107,.25)}
    .btn-plan-primary:hover{background:linear-gradient(135deg,#072e52,#0d47a1);box-shadow:0 5px 18px rgba(10,61,107,.35);color:#fff;transform:translateY(-1px)}
    .btn-plan-outline{background:#fff;color:#0a3d6b;border:2px solid #0a3d6b}
    .btn-plan-outline:hover{background:#0a3d6b;color:#fff}
    .btn-plan-popular{background:linear-gradient(135deg,#4fc3f7,#0288d1);color:#fff;box-shadow:0 3px 12px rgba(79,195,247,.35)}
    .btn-plan-popular:hover{background:linear-gradient(135deg,#29b6f6,#0277bd);box-shadow:0 5px 18px rgba(79,195,247,.5);color:#fff;transform:translateY(-1px)}

    /* ══ COMPARISON TABLE ══ */
    .compare-section{padding:0 0 72px}
    .compare-section h2{font-size:1.6rem;font-weight:700;color:#0d1f33;margin-bottom:.5rem;text-align:center}
    .compare-section .sub{font-size:14px;color:#888;text-align:center;margin-bottom:32px}
    .compare-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07)}
    .compare-table thead th{background:#0a3d6b;color:#fff;padding:14px 18px;font-weight:600;text-align:center;font-size:13px}
    .compare-table thead th:first-child{text-align:left;background:#072e52}
    .compare-table tbody tr:nth-child(even){background:#f7f9fb}
    .compare-table tbody tr:hover{background:#edf3f9}
    .compare-table td{padding:13px 18px;border-bottom:1px solid #edf2f7;color:#444;text-align:center;vertical-align:middle}
    .compare-table td:first-child{text-align:left;font-weight:600;color:#0d1f33;font-size:13.5px}
    .compare-table .check{color:#2e7d32;font-size:16px}
    .compare-table .price-cell{font-weight:700;color:#0a3d6b;font-size:15px}
    .compare-table tfoot td{background:#f0f5fa;font-weight:700;font-size:13px;padding:14px 18px;border-top:2px solid #dde8f2}
    .compare-table tfoot td:first-child{color:#0d1f33;text-align:left}

    /* ══ FAQ ══ */
    .faq-section{padding:0 0 80px}
    .faq-section h2{font-size:1.6rem;font-weight:700;color:#0d1f33;margin-bottom:.5rem;text-align:center}
    .faq-section .sub{font-size:14px;color:#888;text-align:center;margin-bottom:32px}
    .faq-item{border-bottom:1px solid #e5eaf0;background:#fff}
    .faq-item:first-of-type{border-radius:10px 10px 0 0}
    .faq-item:last-of-type{border-radius:0 0 10px 10px;border-bottom:none}
    .faq-question{width:100%;background:none;border:none;text-align:left;padding:18px 22px;font-size:14.5px;font-weight:600;color:#0d1f33;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .15s}
    .faq-question:hover{background:#f7f9fb;color:#0a3d6b}
    .faq-answer{font-size:14px;color:#555;line-height:1.75;padding:0 22px 18px;display:none}
    .faq-answer.open{display:block}
    .faq-icon{color:#0a3d6b;font-size:13px;transition:transform .2s;flex-shrink:0}
    .faq-icon.rotated{transform:rotate(45deg)}
    .faq-wrap{border:1px solid #e0e8f0;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.05)}

    /* ══ CTA BAND ══ */
    .cta-band{background:#0d1f33;padding:64px 0;text-align:center}
    .cta-band h2{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:.75rem}
    .cta-band p{color:rgba(255,255,255,.75);font-size:1rem;margin-bottom:2rem;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
    .btn-cta-primary{background:#fff;color:#0a3d6b;font-weight:700;font-size:14px;padding:13px 30px;border-radius:6px;display:inline-block;margin:6px;transition:background .2s;box-shadow:0 2px 8px rgba(255,255,255,.2)}
    .btn-cta-primary:hover{background:#e6eef5;color:#0a3d6b}
    .btn-cta-accent{background:#4fc3f7;color:#0d1f33;font-weight:700;font-size:14px;padding:13px 30px;border-radius:6px;display:inline-block;margin:6px;transition:background .2s;box-shadow:0 2px 8px rgba(79,195,247,.3)}
    .btn-cta-accent:hover{background:#29b6f6;color:#0d1f33}

    /* ══ FOOTER ══ */
    .footer{background:#0d1f33;padding:32px 0 20px}
    .footer-links a{color:rgba(255,255,255,.65);font-size:13px;margin:0 10px}
    .footer-links a:hover{color:#fff}
    .footer-copy{color:rgba(255,255,255,.45);font-size:12px;margin-top:10px}
    .footer-tagline{color:rgba(255,255,255,.6);font-size:12px;margin-top:6px}

    /* ══ RESPONSIVE ══ */
    @media(max-width:991px){
      .nav-topbar{display:none}
      .navbar-collapse{background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.1);padding:10px 0 16px}
      .navbar-nav .nav-link::after{display:none}
      .navbar-nav{width:100%;flex-direction:column}
      .nav-cta,.nav-login{margin:6px 0 0!important;display:block;text-align:center}
      .nav-user-toggle{margin:8px 0 0!important;justify-content:center;border-radius:8px!important}
      .user-dropdown-menu{position:static!important;transform:none!important;box-shadow:none!important;border:1px solid rgba(0,0,0,.08)!important;margin-top:4px!important}
      .compare-section{overflow-x:auto}
      .plan-price .amount{font-size:38px}
    }
    @media(max-width:767px){
      .page-hero h1{font-size:1.6rem}
      .page-hero{padding:44px 0 40px}
      .pricing-section{padding:44px 0 56px}
      .plan-card{margin-bottom:8px}
    }
  </style>