:root {
            --blue-primary: #076fab;
            --blue-dark: #09122C;
            --blue-mid: #0093c0;
            --blue-light: #4cc9f0;
            --green: #4CAF50;
            --white: #ececec;
            --puti: #ffffff;
            --black: #1b1b1b;
            --content: #505050;
            --shadow: 0 5px 15px rgba(0,0,0,0.1);
            --grad: linear-gradient(280deg, rgba(7,111,171,0.95) 30%, rgba(0,147,192,0.9) 100%);
        }
        * { margin:0; padding:0; box-sizing:border-box; font-family:'Karla',sans-serif; }
        html,body { scroll-behavior:smooth; background:#f4f8fc; color:var(--black); }
        a { text-decoration:none; color:inherit; }

        /* ── NAVBAR ───────────────────────────── */
        .icon-spacer { margin-right: 6px; }
        .icon-spacer-lg { margin-right: 8px; }

        .inline-link {
            color: var(--blue-primary);
            font-weight: 600;
        }

        .footer-link {
            color: var(--blue-light);
            font-weight: 600;
            margin-left: 8px;
        }

        /* ── HERO ─────────────────────────────── */
        .hero {
            margin-top:70px;
            background: linear-gradient(135deg, #0a1628 0%, #076fab 40%, #0093c0 70%, #4cc9f0 100%);
            min-height:380px; display:flex; align-items:center; justify-content:center;
            position:relative; overflow:hidden; padding:60px 5%;
        }
        .hero::before {
            content:''; position:absolute; inset:0;
            background: radial-gradient(ellipse at 70% 50%, rgba(76,201,240,0.25) 0%, transparent 65%),
                        radial-gradient(ellipse at 20% 80%, rgba(7,111,171,0.35) 0%, transparent 55%);
        }
        .hero::after {
            content:''; position:absolute; bottom:0; left:0; right:0;
            height:100px; background:linear-gradient(to top, #f4f8fc, transparent);
        }
        .hero-grid { position:relative; z-index:1; display:grid;
            grid-template-columns:1fr auto; gap:40px; align-items:center; max-width:1100px; width:100%; }
        .hero-tag { display:inline-flex; align-items:center; gap:8px;
            background:rgba(76,201,240,0.18); border:1px solid rgba(76,201,240,0.4);
            color:#4cc9f0; font-size:11px; font-weight:700; letter-spacing:2px;
            text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:18px; width:fit-content; }
        .hero-tag i { font-size:11px; }
        .hero-title { font-size:clamp(28px,4.5vw,46px); font-weight:900; color:#fff;
            letter-spacing:-0.5px; line-height:1.1; margin-bottom:14px; }
        .hero-title span { color:#4cc9f0; }
        .hero-sub { color:rgba(255,255,255,0.72); font-size:15px; font-weight:400;
            line-height:1.65; max-width:500px; }
        .hero-badge {
            background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
            border-radius:20px; padding:28px 32px; text-align:center; min-width:180px;
        }
        .hero-badge .hb-num { font-size:42px; font-weight:900; color:#4cc9f0; line-height:1; }
        .hero-badge .hb-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
            color:rgba(255,255,255,0.6); margin-top:6px; }

        /* ── AUTH STRIP ───────────────────────── */
        .auth-strip {
            background:#fff; border-bottom:1px solid #e2ecf5;
            padding:18px 5%; display:flex; align-items:center; justify-content:space-between;
            flex-wrap:wrap; gap:14px; position:sticky; top:70px; z-index:900;
            box-shadow:0 2px 10px rgba(7,111,171,0.08);
        }
        .auth-strip .as-info { display:flex; align-items:center; gap:12px; }
        .as-icon { width:38px; height:38px; border-radius:10px;
            background:linear-gradient(135deg,#076fab,#0093c0);
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
        .as-text { font-size:13px; }
        .as-text strong { display:block; font-size:14px; font-weight:700; color:#076fab; }
        .as-text span { color:#777; font-size:12px; }
        .auth-strip .access-btn {
            background:linear-gradient(135deg,#076fab,#0093c0); color:#fff; border:none;
            border-radius:8px; padding:10px 24px; font-size:13px; font-weight:700;
            letter-spacing:1px; cursor:pointer; display:flex; align-items:center; gap:8px;
            transition:opacity 0.2s, transform 0.2s;
        }
        .auth-strip .access-btn:hover { opacity:0.9; transform:translateY(-1px); }
        .auth-strip .access-btn.unlocked { background:linear-gradient(135deg,#2e7d32,#43a047); }
        .access-btn i { font-size:13px; }

        /* ── MAIN CONTENT ─────────────────────── */
        .main { max-width:1100px; margin:0 auto; padding:48px 5% 80px; }

        /* section heading */
        .section-header { margin-bottom:32px; }
        .section-header h2 { font-size:26px; font-weight:800; color:#09122C; margin-bottom:6px; }
        .section-header p { color:var(--content); font-size:14px; line-height:1.6; }
        .sh-line { width:50px; height:3px; background:linear-gradient(90deg,#076fab,#4cc9f0);
            border-radius:2px; margin-bottom:12px; }

        /* ── LOCKED OVERLAY STATE ─────────────── */
        .docs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
            gap:24px; }
        .doc-card {
            background:#fff; border-radius:16px; border:1px solid #e2ecf5;
            overflow:hidden; transition:all 0.35s ease; position:relative;
            box-shadow:0 2px 12px rgba(7,111,171,0.06);
        }
        .doc-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(7,111,171,0.14); }
        .doc-card.locked .card-body { filter:blur(1.5px); pointer-events:none; user-select:none; }
        .doc-card.locked::after {
            content:''; position:absolute; inset:0; background:rgba(255,255,255,0.6);
            backdrop-filter:blur(2px); z-index:2; border-radius:16px;
        }

        .lock-badge {
            position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
            justify-content:center; z-index:3; gap:10px;
        }
        .lock-badge i { font-size:28px; color:#076fab; }
        .lock-badge span { font-size:12px; font-weight:700; letter-spacing:1.5px;
            text-transform:uppercase; color:#076fab; }

        /* card accent bar */
        .card-accent { height:6px;
            background:linear-gradient(90deg,#076fab 0%,#4cc9f0 100%); }
        .card-accent.green { background:linear-gradient(90deg,#2e7d32,#66bb6a); }
        .card-accent.teal  { background:linear-gradient(90deg,#00838f,#4dd0e1); }

        .card-body { padding:28px; background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%); }
        .card-type { display:inline-flex; align-items:center; gap:6px; font-size:11px;
            font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
            color:#076fab; margin-bottom:16px; }
        .card-type i { font-size:12px; }
        .card-title { font-size:18px; font-weight:800; color:#09122C; margin-bottom:10px; line-height:1.3; }
        .card-desc { font-size:14px; color:var(--content); line-height:1.65; margin-bottom:24px; }

        .card-meta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
        .meta-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px;
            font-weight:600; background:linear-gradient(135deg,#f0f7ff,#e6f2ff); color:#076fab; padding:6px 12px;
            border-radius:100px; border:1px solid #cde0f5; }
        .meta-pill i { font-size:10px; }

        .card-actions { display:flex; gap:12px; }
        .btn-view {
            flex:1; background:linear-gradient(135deg,#076fab,#0093c0); color:#fff; border:none;
            border-radius:10px; padding:12px 18px; font-size:13px; font-weight:700; cursor:pointer;
            display:flex; align-items:center; justify-content:center; gap:8px;
            transition:all 0.3s ease; box-shadow:0 4px 15px rgba(7,111,171,0.3);
        }
        .btn-view:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(7,111,171,0.4); }
        .btn-dl {
            background:linear-gradient(135deg,#f0f7ff,#e6f2ff); color:#076fab; border:1px solid #cde0f5; border-radius:10px;
            padding:12px 16px; font-size:13px; font-weight:700; cursor:pointer;
            display:flex; align-items:center; gap:8px; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(7,111,171,0.1);
        }
        .btn-dl:hover { background:linear-gradient(135deg,#dff0fb,#d0e8ff); transform:translateY(-2px); box-shadow:0 4px 12px rgba(7,111,171,0.2); }
        .btn-view i, .btn-dl i { font-size:12px; }

        /* ── INFO STRIP ───────────────────────── */
        .info-strip {
            margin-top:48px; border-radius:20px; background:#fff;
            border:1px solid #e2ecf5; overflow:hidden; box-shadow:0 4px 20px rgba(7,111,171,0.08);
        }
        .info-strip-header {
            background:linear-gradient(135deg,#09122C 0%,#076fab 50%,#0093c0 100%);
            padding:24px 32px; color:#fff;
        }
        .info-strip-header h3 { font-size:17px; font-weight:800; margin-bottom:4px; }
        .info-strip-header p { font-size:13px; opacity:0.85; }
        .info-strip-body { padding:28px 32px; display:grid;
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
        .info-item { display:flex; gap:16px; align-items:flex-start; }
        .info-icon { width:44px; height:44px; flex-shrink:0; border-radius:12px;
            background:linear-gradient(135deg,#076fab,#4cc9f0);
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
            box-shadow:0 4px 12px rgba(7,111,171,0.2); }
        .info-text strong { display:block; font-size:14px; font-weight:700; color:#09122C; margin-bottom:4px; }
        .info-text span { font-size:13px; color:var(--content); line-height:1.6; }

        /* ── PASSWORD MODAL ───────────────────── */
        .modal-overlay {
            display:none; position:fixed; inset:0; background:rgba(9,18,44,0.75);
            z-index:9999; align-items:center; justify-content:center;
            backdrop-filter:blur(8px);
        }
        .modal-overlay.open { display:flex; }
        .modal-box {
            background:#fff; border-radius:24px; width:100%; max-width:460px;
            margin:20px; overflow:hidden; animation:slideUp 0.35s ease;
            box-shadow:0 20px 60px rgba(0,0,0,0.3);
        }
        @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
        .modal-top {
            background:linear-gradient(135deg,#09122C 0%,#076fab 50%,#0093c0 100%);
            padding:32px 36px 28px; text-align:center;
        }
        .modal-lock-icon { width:64px; height:64px; border-radius:50%;
            background:rgba(76,201,240,0.25); border:2px solid rgba(76,201,240,0.5);
            display:flex; align-items:center; justify-content:center;
            margin:0 auto 18px; font-size:28px; color:#4cc9f0;
            box-shadow:0 4px 20px rgba(76,201,240,0.3); }
        .modal-top h2 { color:#fff; font-size:21px; font-weight:800; margin-bottom:8px; }
        .modal-top p { color:rgba(255,255,255,0.7); font-size:14px; line-height:1.6; }
        .modal-body { padding:32px 36px 36px; }
        .modal-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px;
            text-transform:uppercase; color:var(--content); margin-bottom:10px; }
        .pw-wrapper { position:relative; }
        .modal-input {
            width:100%; padding:14px 48px 14px 18px; border:2px solid #d0ddf0;
            border-radius:12px; font-size:15px; font-family:'Karla',sans-serif;
            outline:none; transition:border 0.2s, box-shadow 0.2s;
        }
        .modal-input:focus { border-color:#076fab; box-shadow:0 0 0 4px rgba(7,111,171,0.15); }
        .pw-toggle { position:absolute; right:16px; top:50%; transform:translateY(-50%);
            background:none; border:none; cursor:pointer; color:#9ab; font-size:16px; }
        .modal-error { display:none; color:#c0392b; font-size:12px; margin-top:10px;
            font-weight:600; align-items:center; gap:8px; }
        .modal-error.show { display:flex; }
        .modal-submit {
            width:100%; margin-top:24px; padding:15px;
            background:linear-gradient(135deg,#076fab,#0093c0);
            color:#fff; border:none; border-radius:12px; font-size:15px;
            font-weight:800; cursor:pointer; letter-spacing:0.5px;
            transition:all 0.3s ease; box-shadow:0 4px 15px rgba(7,111,171,0.3);
        }
        .modal-submit:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(7,111,171,0.4); }
        .modal-submit:active { transform:scale(0.98); }
        .modal-hint { text-align:center; margin-top:16px; font-size:12px; color:#999; }
        .modal-hint a { color:#076fab; font-weight:700; }

        /* ── PDF VIEWER MODAL ─────────────────── */
        .viewer-overlay {
            display:none; position:fixed; inset:0; background:rgba(9,18,44,0.88);
            z-index:9999; flex-direction:column;
        }
        .viewer-overlay.open { display:flex; }
        .viewer-topbar {
            background:#09122C; height:56px; display:flex; align-items:center;
            justify-content:space-between; padding:0 24px; flex-shrink:0;
        }
        .vt-left { display:flex; align-items:center; gap:14px; }
        .vt-icon { width:34px; height:34px; border-radius:8px;
            background:linear-gradient(135deg,#076fab,#4cc9f0);
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
        .vt-title { color:#fff; font-size:14px; font-weight:700; }
        .vt-sub { color:rgba(255,255,255,0.5); font-size:11px; }
        .vt-actions { display:flex; gap:10px; align-items:center; }
        .vt-btn { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.15);
            border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer;
            display:flex; align-items:center; gap:6px; transition:background 0.2s; }
        .vt-btn:hover { background:rgba(255,255,255,0.2); }
        .vt-close { background:rgba(192,57,43,0.2); border-color:rgba(192,57,43,0.4); color:#e74c3c; }
        .vt-close:hover { background:rgba(192,57,43,0.4); }
        .viewer-frame { flex:1; }
        .viewer-frame iframe { width:100%; height:100%; border:none; display:block; }

        /* ── FOOTER ───────────────────────────── */
        .footer { background:linear-gradient(135deg,#1376b8 0%,#09122C 100%); color:#fff; padding:50px 5% 25px; margin-top:70px; }
        .footer-inner { max-width:1100px; margin:0 auto; display:flex;
            flex-wrap:wrap; gap:40px; justify-content:space-between; }
        .footer-brand img { height:44px; margin-bottom:14px; }
        .footer-brand p { font-size:13px; opacity:0.8; max-width:280px; line-height:1.7; }
        .footer-links h4 { font-size:14px; font-weight:700; margin-bottom:16px; }
        .footer-links ul { list-style:none; }
        .footer-links li { margin-bottom:10px; font-size:13px; opacity:0.75; cursor:pointer; transition:all 0.2s ease; }
        .footer-links li:hover { opacity:1; color:#4cc9f0; transform:translateX(3px); }
        .footer-bottom { border-top:1px solid rgba(255,255,255,0.12);
            text-align:center; margin-top:40px; padding-top:22px;
            font-size:12px; opacity:0.6; max-width:1100px; margin:40px auto 0; }

        /* ── SCROLL TO TOP ────────────────────── */
        #scrollToTopBtn {
            display: none;
            position: fixed;
            bottom: 100px;
            right: 30px;
            background: rgba(7,111,171,0.85);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 18px;
            cursor: pointer;
            z-index: 99;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        #scrollToTopBtn:hover { background: rgba(7,111,171,1); }

        /* ── RESPONSIVE ───────────────────────── */
        @media(max-width:768px){
            .hero-grid { grid-template-columns:1fr; }
            .hero-badge { display:none; }
            .docs-grid { grid-template-columns:1fr; }
            .auth-strip { flex-direction:column; align-items:flex-start; }
            .info-strip-body { grid-template-columns:1fr; }
            .modal-box { margin:12px; }
            .vt-sub { display:none; }
            .hero { margin-top:70px; }
            .auth-strip { top:70px; }
        }