:root{
    /* Light theme */
    --bg:#ffffff;
    --card:#ffffff;
    --card2:#f6f8ff;
    --text:#0b1026;
    --muted:#4b587a;
    --brand:#0b5cff;
    --brand2:#16a34a;

    --border:rgba(11,16,38,.12);
    --shadow: 0 14px 40px rgba(11,16,38,.12);
    --radius:18px;
    --max:1280px;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:
      radial-gradient(1200px 700px at 18% 8%, rgba(11,92,255,.14), transparent 60%),
      radial-gradient(900px 500px at 84% 10%, rgba(57,217,138,.12), transparent 55%),
      radial-gradient(800px 600px at 50% 95%, rgba(255,180,0,.10), transparent 55%),
      var(--bg);
    line-height:1.65;
  }

  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--max); margin:auto; padding:6px}

  .topbar{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.78);
    border-bottom:1px solid var(--border);
  }

  .nav{display:flex; align-items:center; justify-content:space-between; gap:10px}

  .logo{
    display:flex; align-items:center; gap:4px; font-weight:500; letter-spacing:.1px;
  }

  .badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:5px 7px;
    border:1px solid var(--border);
    background: rgba(11,16,38,.04);
    border-radius:999px;
    color:var(--muted);
    font-size:12px;
  }

  .menu{display:flex; gap:10px; flex-wrap:wrap}
  .menu a{
    padding:5px 5px;
    border-radius:12px;
    color:var(--muted);
    border:1px solid transparent;
  }
  .menu a:hover{
    border-color:var(--border);
    background:rgba(11,16,38,.03);
    color:var(--text);
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(11,16,38,.14);
    background: linear-gradient(135deg, rgba(11,92,255,.95), rgba(57,217,138,.60));
    color:#fff;
    font-weight:700;
    box-shadow: var(--shadow);
    transition: transform .15s ease;
    white-space:nowrap;
  }
  .btn:hover{transform: translateY(-1px)}
  .btn.ghost{
    background: rgba(11,16,38,.04);
    box-shadow:none;
    color: var(--text);
  }

  .hero{
    padding:38px 0 12px;
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:22px;
    align-items:stretch;
  }
  @media (max-width: 980px){ .hero{grid-template-columns:1fr} }

  .heroCard{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
    box-shadow: var(--shadow);
    overflow:hidden;
  }

  .heroMedia{
    background: rgba(11,16,38,.03);
    border-radius: var(--radius);
    border:1px solid var(--border);
    overflow:hidden;
    box-shadow: var(--shadow);
    min-height: 340px;
    position: relative;
  }
  .heroMedia img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
    filter: contrast(1.02) saturate(1.04);
  }

  .heroInner{padding:22px}

  h1{margin:6px 0 10px; font-size:27px; line-height:1.12}
  @media (max-width: 620px){ h1{font-size:27px} }

  .lead{color:var(--muted); font-size:16.5px; margin:0 0 16px}
  .ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 4px}

  .pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
  .pill{
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(11,16,38,.03);
    font-size:13px;
    color:var(--muted);
  }

  .grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
  }
  @media (max-width: 980px){ .grid3{grid-template-columns:1fr} }

  .card{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.85);
    padding:18px;
    box-shadow: 0 10px 24px rgba(11,16,38,.06);
  }
  .card h3{margin:0 0 8px; font-size:18px}
  .card p{margin:0; color:var(--muted)}

  .section{padding:22px 0}
  .section h2{margin:0 0 12px; font-size:20px}
  .section h3{margin:18px 0 8px; font-size:20px}
  .muted{color:var(--muted)}

  .split{
    display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
  }
  @media (max-width: 980px){ .split{grid-template-columns:1fr} }

  .tableWrap{
    border:1px solid var(--border);
    border-radius: var(--radius);
    overflow:auto;
    background: rgba(255,255,255,.80);
  }
  table{
    width:100%;
    border-collapse:collapse;
    min-width: 720px;
  }
  th, td{
    padding:12px 12px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
    color:var(--muted);
    font-size:14px;
  }
  th{
    color:var(--text);
    text-align:left;
    background: rgba(11,16,38,.03);
  }

  .note{
    border-left:4px solid var(--brand2);
    padding:12px 12px 12px 14px;
    background: rgba(22,163,74,.10);
    border-radius: 14px;
    color: var(--muted);
  }

  .formMock{
    display:grid; gap:10px;
    background: rgba(255,255,255,.80);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:16px;

}
.formMock, li, strong{
  margin:6px 0 10px; font-size:15px; line-height:1.02
  }

  .field{display:grid; gap:6px}
  label{font-size:13px; color:var(--muted)}

  input, select{
    padding:12px 12px;
    border-radius: 14px;
    border:1px solid rgba(11,16,38,.14);
    background: rgba(255,255,255,.95);
    color:var(--text);
    outline:none;
  }
  input::placeholder{color:rgba(11,16,38,.45)}

  .kgrid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  }
  @media (max-width: 980px){ .kgrid{grid-template-columns:1fr} }

  .kbox{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.85);
    padding:14px;
  }
  .kbox strong{display:block; margin-bottom:6px}

  .footer{
    margin-top: 24px;
    border-top:1px solid var(--border);
    background: rgba(11,16,38,.03);
  }

  .footerGrid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:16px;
    padding:22px 0;
  }
  @media (max-width: 980px){ .footerGrid{grid-template-columns:1fr} }

  .footerLinks{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
  }
  @media (max-width: 680px){ .footerLinks{grid-template-columns:1fr} }

  .footerLinks a{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.85);
    color:var(--muted);
  }
  .footerLinks a:hover{
    color:var(--text);
    background: rgba(11,16,38,.03);
  }

  .tiny{font-size:12px; color:rgba(11,16,38,.55)}

  .evisaBox{
    border:1px dashed rgba(11,16,38,.18);
    border-radius: var(--radius);
    padding:14px;
    background: rgba(255,255,255,.70);
    color: var(--muted);
    font-size:13.5px;
  }