:root{
    --primary:#00a658;
    --primary-tint:#124B3A;
    --secondary:#0E9F6E;
    --accent:#00A658;
    --bg:#F7FAF8;
    --card:#FFFFFF;
    --text:#1F2937;
    --text-mute:#5B6674;
    --border:#E3E9E6;
    --radius:14px;
    --shadow: 0 1px 2px rgba(11,59,46,.05), 0 8px 24px -12px rgba(11,59,46,.14);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  h1,h2,h3,h4{font-family:'Poppins',sans-serif;margin:0;color:var(--primary);}
  p{margin:0;line-height:1.6;}
  a{color:inherit;}
  img{-webkit-user-drag:none; user-drag:none; pointer-events:none;}
  ::selection{background:transparent;}

  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(248,250,252,.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .brand img{
      width: 50%;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{
    height:30px; width:auto;
    display:block;
  }
  .header-center{
    font-family:'Poppins'; font-weight:600; font-size:13px;
    color:var(--text-mute); letter-spacing:1.5px; text-transform:uppercase;
    position:absolute; left:50%; transform:translateX(-50%);
  }
  .header-right{display:flex;align-items:center;gap:14px;}
  .help-text{font-size:13px;color:var(--text-mute);}
  .help-link{
    font-size:13px; font-weight:600; color:var(--secondary);
    text-decoration:none; border:1px solid var(--border); padding:8px 14px;
    border-radius:8px; background:#fff; transition:.2s;
  }
  .help-link:hover{border-color:var(--secondary); box-shadow:var(--shadow);}

  /* ---------- HERO ---------- */
.hero {
    position: relative;
    overflow: hidden;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(bg-img.webp) no-repeat center top;
    background-size: cover;
    width: 100%;
    height: 900px;
}

  .hero-bg{
    position:absolute; inset:0; opacity:.5; pointer-events:none;
  }
  .hero-inner{position:relative; max-width:760px; margin:0 auto; text-align:center;padding: 300px 0;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--secondary); background:#E3F5EC; border:1px solid #C3E9D6;
    padding:6px 14px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .hero h1{font-size:44px; line-height:1.15; letter-spacing:-0.5px; font-weight:700; color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);}
  .hero p.sub{
    margin-top:18px; font-size:17px; color:var(--text-mute); line-height:1.7;
    max-width:600px; margin-left:auto; margin-right:auto;color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  .hero .note{
    margin-top:20px; display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--primary); font-weight:500;
    background:#fff; border:1px solid var(--border); padding:8px 16px; border-radius:999px;
  }
  .cta-row{margin-top:34px;}
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--primary) !important; color:#fff; border:none;
    font-family:'Poppins'; font-weight:600; font-size:15px;
    padding:15px 30px; border-radius:10px; cursor:pointer;
    box-shadow:0 10px 24px -8px rgba(0,51,102,.45);
    transition:.2s;
  }
  .btn-primary:hover{background:var(--primary-tint); transform:translateY(-1px);}

  /* blueprint lines */
  .blueprint{
    position:absolute; inset:0; opacity:.10;
    background-image:
      linear-gradient(var(--primary) 1px, transparent 1px),
      linear-gradient(90deg, var(--primary) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 68%);
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:76px 0;}
  .section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
  .section-head .tag{
    font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--accent); margin-bottom:10px; display:block;
  }
  .section-head h2{font-size:30px; letter-spacing:-.3px;}
  .section-head p{margin-top:12px; color:var(--text-mute); font-size:15.5px;}

  /* ---------- INFO CARDS ---------- */
  .info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .info-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:30px 26px; box-shadow:var(--shadow);
  }
  .info-icon{
    width:44px;height:44px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:#EEF3F8; color:var(--primary); margin-bottom:18px;
  }
  .info-card h3{font-size:17px; margin-bottom:8px;}
  .info-card p{color:var(--text-mute); font-size:14.5px;}

  /* ---------- DOCUMENTS ---------- */
  .documents{background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .doc-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-bottom:22px; flex-wrap:wrap;
  }
  .search-box{
    flex:1; min-width:240px; position:relative;
  }
  .search-box input{
    width:100%; padding:12px 16px 12px 40px; border-radius:10px;
    border:1px solid var(--border); background:var(--bg); font-size:14px;
    font-family:'Inter'; color:var(--text); user-select:text;
  }
  .search-box input:focus{outline:2px solid var(--secondary); outline-offset:1px; background:#fff;}
  .search-box svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-mute);}
  .sort-select{
    padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:#fff; font-family:'Inter'; font-size:14px; color:var(--text); cursor:pointer;
  }
  .doc-table-wrap{
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff;
  }
  table.doc-table{width:100%; border-collapse:collapse;}
  .doc-table thead th{
    text-align:left; font-family:'Poppins'; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
    color:var(--text-mute); background:#F8FAFC; padding:14px 20px; border-bottom:1px solid var(--border);
    cursor:pointer; user-select:none;
  }
  .doc-table thead th:hover{color:var(--primary);}
  .doc-table tbody td{
    padding:16px 20px; border-bottom:1px solid var(--border); font-size:14.5px; vertical-align:middle;
  }
  .doc-table tbody tr:last-child td{border-bottom:none;}
  .doc-table tbody tr:hover{background:#FAFBFD;}
  .doc-name{display:flex; align-items:center; gap:12px; font-weight:500; color:var(--text);}
  .doc-icon{
    width:34px;height:34px;border-radius:8px;flex-shrink:0;
    background:#FDEDEA; color:#C0392B; display:flex;align-items:center;justify-content:center;
  }
  .badge{
    display:inline-block; font-size:11.5px; font-weight:600; padding:4px 10px;
    border-radius:999px; background:#E3F5EC; color:var(--secondary);
  }
  .date-cell{color:var(--text-mute); font-variant-numeric:tabular-nums;}
  .btn-view{
    font-family:'Poppins'; font-weight:600; font-size:13px; color:var(--primary);
    background:#fff; border:1px solid var(--border); padding:8px 16px; border-radius:8px;
    cursor:pointer; transition:.15s; white-space:nowrap;
  }
  .btn-view:hover{border-color:var(--primary); background:#EEF3F8;}
  .doc-footer{display:flex; align-items:center; justify-content:space-between; margin-top:18px; flex-wrap:wrap; gap:12px;}
  .doc-count{font-size:13px; color:var(--text-mute);}
  .load-more{
    font-family:'Poppins'; font-weight:600; font-size:13.5px; color:var(--secondary);
    background:#fff; border:1px solid var(--border); padding:10px 22px; border-radius:8px; cursor:pointer;
  }
  .load-more:hover{border-color:var(--secondary);}
  .empty-state{padding:50px 20px; text-align:center; color:var(--text-mute); font-size:14px; display:none;}

  /* ---------- FEATURES ---------- */
  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .feat-card{
    display:flex; align-items:flex-start; gap:14px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px;
  }
  .feat-check{
    width:30px;height:30px;border-radius:8px;flex-shrink:0;
    background:#EAF6EF; color:var(--accent); display:flex;align-items:center;justify-content:center;
  }
  .feat-card h4{font-size:14.5px; margin-bottom:4px;}
  .feat-card p{font-size:13px; color:var(--text-mute);}

  /* ---------- SECURITY BANNER ---------- */
  .security-banner{
    background:linear-gradient(155deg,var(--primary),#04211A);
    border-radius:20px; padding:44px 40px; color:#fff;
    display:none !important; align-items:center; gap:32px; justify-content:space-between; flex-wrap:wrap;
  }
  .security-banner .lead{max-width:480px;}
  .security-banner h3{color:#fff; font-size:22px; margin-bottom:10px;}
  .security-banner p{color:#C9D7E5; font-size:14.5px; line-height:1.7;}
  .security-tags{display:flex; flex-wrap:wrap; gap:10px; max-width:420px;}
  .security-tags span{
    font-size:12.5px; font-weight:500; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18); padding:8px 14px; border-radius:999px;
  }
  .disclaimer{
    margin-top:20px; font-size:12.5px; color:var(--text-mute); line-height:1.7;
    background:#FFF9EC; border:1px solid #F4E3B2; padding:16px 20px; border-radius:10px;display:none !important;
  }

  /* ---------- FAQ ---------- */
  .faq{
          padding: 0 0 76px 0;
  }
  .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
  .faq-item{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 22px; cursor:pointer; font-family:'Poppins'; font-weight:600; font-size:14.5px;
  }
  .faq-q svg{transition:transform .2s; flex-shrink:0; color:var(--text-mute);}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding:0 22px 18px; color:var(--text-mute); font-size:14px; user-select:text;}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--border); padding:36px 0; background:#fff;}
  .footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  .footer-left{font-size:13px; color:var(--text-mute);}
  .footer-left b{color:var(--primary);}
  .footer-links{display:flex; gap:4px;}
  .footer-links a{font-size:13px; color:var(--text-mute); text-decoration:none;}
  .footer-links a:hover{color:var(--primary);}

  /* ---------- VIEWER MODAL ---------- */
  .viewer-overlay{
    position:fixed; inset:0; background:#0B1220; z-index:100;
    display:none; flex-direction:column;
  }
  .viewer-overlay.active{display:flex;}
  .viewer-topbar{
    height:56px; background:#12192B; display:flex; align-items:center; justify-content:space-between;
    padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
  }
  .viewer-doc-title{color:#fff; font-size:13.5px; font-weight:600; font-family:'Poppins'; display:flex; align-items:center; gap:10px;}
  .viewer-badge{
    font-size:10.5px; font-weight:700; letter-spacing:.6px; color:#0B1220;
    background:#F4B400; padding:3px 8px; border-radius:5px;
  }
  .viewer-controls{display:flex; align-items:center; gap:6px;}
  .vc-btn{
    width:34px;height:34px; border-radius:8px; border:none; background:transparent;
    color:#C9D2E0; cursor:pointer; display:flex;align-items:center;justify-content:center;
    transition:.15s;
  }
  .vc-btn:hover{background:rgba(255,255,255,.08); color:#fff;}
  .vc-divider{width:1px; height:22px; background:rgba(255,255,255,.12); margin:0 6px;}
  .vc-page-input{
    width:40px; text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:#fff; border-radius:6px; font-size:12.5px; padding:5px 0; font-family:'Inter'; user-select:text;
  }
  .vc-page-label{color:#8A96AC; font-size:12.5px;}
  .vc-close{
    width:34px;height:34px;border-radius:8px;border:none;background:rgba(255,255,255,.06);
    color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .vc-close:hover{background:#C0392B;}
  .viewer-body{flex:1; overflow:auto; display:flex; justify-content:center; padding:36px 20px; position:relative;}
  .doc-page{
    width:100%; max-width:680px; min-height:880px; background:#fff; border-radius:4px;
    box-shadow:0 20px 60px rgba(0,0,0,.5); position:relative; overflow:hidden;
    transition:transform .2s ease; flex-shrink:0;
  }
  .doc-page-inner{padding:56px 52px; color:#1F2937;}
  .doc-page-inner h4{font-family:'Poppins'; font-size:15px; color:var(--primary); margin-bottom:18px; text-transform:uppercase; letter-spacing:.6px;}
  .doc-page-inner .fake-line{height:9px; background:#EEF1F5; border-radius:4px; margin-bottom:12px;}
  .watermark-layer{
    position:absolute; inset:0; pointer-events:none;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr);
    place-items:center; opacity:.14;
  }
  .watermark-layer span{
    font-family:'Poppins'; font-weight:700; font-size:13px; color:var(--primary);
    transform:rotate(-32deg); white-space:nowrap; text-align:center; line-height:1.5;
  }
  .viewer-hint{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    font-size:11.5px; color:#8A96AC; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1); padding:6px 14px; border-radius:999px;
  }
  .blur-guard{
    position:fixed; inset:0; z-index:200; backdrop-filter:blur(18px);
    background:rgba(11,18,32,.85); display:none; align-items:center; justify-content:center;
    color:#fff; font-family:'Poppins'; font-size:14px; text-align:center; padding:20px;
  }
  .blur-guard.active{display:flex;}

  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#111827; color:#fff; font-size:13px; padding:12px 20px; border-radius:10px;
    opacity:0; pointer-events:none; transition:.25s; z-index:300; font-family:'Inter';
    box-shadow:0 12px 30px rgba(0,0,0,.3);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media(max-width:860px){
    .info-grid, .feat-grid{grid-template-columns:1fr;}
    .header-center{display:none;}
    .hero h1{font-size:24px;}
    .doc-table thead{display:none;}
    .doc-table, .doc-table tbody, .doc-table tr, .doc-table td{display:block; width:100%;}
    .doc-table tr{border-bottom:1px solid var(--border); padding:14px 0;}
    .doc-table td{border:none; padding:6px 20px;}
    .security-banner{flex-direction:column; align-items:flex-start;}
    .help-link {
    display: none;
}
.help-text {
    display: none;
}
.brand img {
    width: 100%;
}
.hero {
height: 500px;
}
.hero-inner {
    padding: 100px 0;
}
.hero p.sub {
    font-size: 12px;
}
.eyebrow {
    font-size: 8px;
}
.hero .note {
font-size: 11px;
}
.btn-primary {
    font-size: 12px;
    padding: 15px 20px;
}
.doc-table tbody td {
    text-align: left !important;
}
.section-head h2 {
    font-size: 24px !important;
}
.section-head .tag {
    font-size: 9px;
}
.section {
    padding: 35px 0;
}
  }