*, *::before, *::after { box-sizing: border-box; }
    body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#ffffff; color:#111; min-height:100vh; }
    .site-header { background:#f5f5f7; border-bottom:1px solid #ddd; }
    .hero { text-align:center; padding:3rem 1rem 2rem; }
    .hero h1 { font-size:1.8rem; margin:0 0 .5rem; }
    .hero p { color:#777; font-size:1rem; margin:0; max-width:600px; margin-inline:auto; }
    .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.2rem; max-width:1100px; margin:0 auto; padding:0 1.5rem 2rem; }
    .card { background:#f8f8fa; border:1px solid #ddd; border-radius:.8rem; padding:1.5rem; text-decoration:none; color:#111; transition:border-color .2s, transform .15s; display:flex; flex-direction:column; gap:.6rem; }
    .card:hover { border-color:#999; transform:translateY(-2px); }
    .card h2 { margin:0; font-size:1.15rem; display:flex; align-items:center; gap:.6rem; }
    .card .icon { width:36px; height:36px; border-radius:.5rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
    .card p { margin:0; color:#777; font-size:.9rem; line-height:1.5; }
    .card .arrow { margin-top:auto; color:#888; font-size:.85rem; }
    .card:hover .arrow { color:#888; }
    .icon-ipv6 { background:#dbeafe; color:#60a5fa; }
    .icon-rpki { background:#dcfce7; color:#4ade80; }
    .icon-spof { background:#fee2e2; color:#f87171; }
    .icon-sec { background:#fef3c7; color:#fbbf24; }
    .icon-dnssec { background:#ede9fe; color:#a78bfa; }
    .stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:.8rem; max-width:1100px; margin:0 auto 2rem; padding:0 1.5rem; }
    .stat { background:#f8f8fa; border:1px solid #ddd; border-radius:.6rem; padding:1rem; text-align:center; }
    .stat .num { font-size:1.6rem; font-weight:600; }
    .stat .label { color:#888; font-size:.8rem; margin-top:.2rem; }
    .footer { background:#f5f5f7; color:#888; padding:.8rem; border-top:1px solid #ddd; text-align:center; font-size:.85rem; margin-top:auto; }
    .lang-toggle { position:fixed; top:.6rem; right:.8rem; background:#f0f0f2; border:1px solid #ccc; color:#111; padding:.3rem .5rem; border-radius:.4rem; cursor:pointer; font-size:.8rem; z-index:100; }
      .map-spinner{position:absolute;top:50%;left:50%;z-index:1000;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.map-spinner .dot{width:40px;height:40px;border:4px solid #ddd;border-top:4px solid #2563eb;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.map-spinner span{font-size:.85rem;color:#888}