:root{
      --bg: #f5f7fa;
      --card: #ffffff;
      --muted: #6b7280;
      --brand-1: #4a90e2;
      --brand-2: #6ab0ff;
      --accent: #3b7dd8;
      --text: #111827;
      --note-bg: #fff7e6;
      --note-border: #f5d565;
      --glass: rgba(255,255,255,0.7);
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    /* Dark mode variables */
    :root.dark{
      --bg: #0b1220;
      --card: #0f1724;
      --muted: #9aa4b2;
      --brand-1: #2563eb;
      --brand-2: #1e40af;
      --accent: #3b82f6;
      --text: #e6eefc;
      --note-bg: #2a2f3a;
      --note-border: #37557a;
      --glass: rgba(255,255,255,0.03);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:"Roboto",sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.65;
      transition: background 300ms ease, color 300ms ease;
      scroll-behavior:smooth;
    }

    /* NAVBAR */
    nav{
      position:sticky; top:0; z-index:1200;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding:14px 26px;
      background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
      color:white;
      box-shadow:0 6px 22px rgba(0,0,0,0.12);
    }
    .nav-left{display:flex;align-items:center;gap:14px}
    .logo-wrap{display:flex;align-items:center;gap:10px}
    .logo-svg { width:44px;height:44px; flex:0 0 44px; }
    .site-title{font-weight:700;font-size:1.15rem}
    .nav-links{display:flex;gap:14px;align-items:center}
    .nav-links a{color:white;text-decoration:none;font-weight:500;padding:8px 10px;border-radius:8px;transition:0.18s}
    .nav-links a:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px)}
    /* action buttons */
    .actions{display:flex;gap:10px;align-items:center}
    .btn { background:rgba(255,255,255,0.14); color:white; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:600; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
    .btn:hover{transform:translateY(-2px)}
    .icon { width:18px;height:18px; opacity:0.95; }

    /* HERO */
    .hero{
      padding:72px 18px;
      text-align:center;
      background: linear-gradient(135deg,var(--brand-1),var(--brand-2));
      color:white;
      box-shadow:0 8px 40px rgba(0,0,0,0.12);
    }
    .hero h1{font-size:2.6rem;margin-bottom:10px; font-weight:700}
    .hero p{font-size:1.05rem; opacity:0.95; max-width:900px; margin:0 auto}

    /* MAIN */
    main{ max-width:1100px; margin:34px auto; padding:0 18px 80px; }
    section{ margin-bottom:26px; }

    h2{
      text-align:center;
      color:var(--accent);
      margin:28px 0 18px;
      font-size:1.6rem;
      font-weight:700;
    }
    .card{
      background:var(--card);
      padding:20px;
      border-radius:12px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.06);
      transition: transform 220ms ease, box-shadow 220ms ease, background 220ms;
      overflow:hidden;
      border:1px solid rgba(0,0,0,0.03);
    }
    :root.dark .card { box-shadow: 0 6px 20px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.03); }

    .card + .card{ margin-top:14px }
    p, li { color:var(--text) }
    code{ background: rgba(14,165,233,0.08); padding:3px 7px; border-radius:6px; font-family:monospace; }

    /* buttons for downloads inside content */
    .download-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px }
    .btn-download{
      background:var(--accent); color:white; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700;
    }
    .btn-download:hover{ filter:brightness(0.95); transform:translateY(-3px) }

    /* NOTES */
    .note{ background:var(--note-bg); border-left:6px solid var(--note-border); padding:12px 14px; border-radius:10px; margin-top:12px; }

    /* small */
    .small{ font-size:0.95rem; color:var(--muted) }

    /* WEBVIEW WARNING */
    #webview-warning{
      display:none;
      margin:18px;
      padding:14px;
      border-radius:12px;
      text-align:center;
      background: linear-gradient(90deg,#fff6f6,#fff0f0);
      border-left:8px solid #ff6b6b;
      box-shadow:0 10px 30px rgba(0,0,0,0.06);
      font-weight:600;
    }
    :root.dark #webview-warning { background:linear-gradient(90deg,#1b2531,#101522); border-left:8px solid #ff6b6b; color:var(--text) }

    /* FOOTER CONTACT */
    .contact-row{ display:flex; gap:18px; align-items:center; flex-wrap:wrap }

    /* ===== REVEAL ANIMATIONS ===== */
    .reveal { opacity:0; transform: translateY(18px) scale(0.995); transition: opacity 550ms cubic-bezier(.2,.9,.2,1), transform 550ms cubic-bezier(.2,.9,.2,1); will-change:transform,opacity }
    .reveal.revealed { opacity:1; transform: translateY(0) scale(1) }

    /* ===== MOBILE / HAMBURGER ===== */
    .hamburger {
      display:none;
      width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,0.08);
      border:0; cursor:pointer; align-items:center; justify-content:center;
    }
    .hamburger svg{ width:22px;height:22px; color:white }

    @media (max-width:900px){
      .nav-links{ display:none; position: absolute; top:64px; right:18px; background: linear-gradient(180deg,var(--brand-1),var(--brand-2)); padding:14px; border-radius:12px; flex-direction:column; gap:8px; min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
      .nav-links.open{ display:flex }
      .hamburger{ display:flex }
    }

    @media (max-width:700px){
      .hero{ padding:48px 16px }
      .hero h1{ font-size:1.9rem }
      nav{ padding:10px 14px }
      .site-title{ font-size:1rem }
      main{ margin-top:18px }
    }

    .download-label {
      margin-top: 15px;
      font-weight: 600;
    }

    .download-row {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 10px;
    }

    .btn-download {
      display: inline-block;
      background: #4a90e2;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 700;
      transition: transform 0.2s, filter 0.2s;
    }

    .btn-download:hover {
      transform: translateY(-2px);
      filter: brightness(0.95);
    }

    .footer-card {
  background: linear-gradient(135deg, #4a90e2, #6ab0ff);
  color: white;
  text-align: center;
  padding: 20px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  margin: 30px 0 10px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, opacity 0.2s;
}

.footer-links a:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* Dark mode */
:root.dark .footer-card {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}