:root { --ink:#0e4a57; --accent:#19a66c; --muted:#5a6c73; }
      *{box-sizing:border-box}
      body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
      header{position:sticky;top:0;background:#fff;border-bottom:1px solid rgba(14,74,87,.08);z-index:10}
      .container{max-width:1080px;margin:0 auto;padding:16px}
      .nav{display:flex;align-items:center;justify-content:space-between}
      .back{color:#fff;background:var(--ink);padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:800}
      main{padding:20px 0 60px}
      h1{font-size:clamp(26px,4.8vw,42px);margin:10px 0 6px}
      .sub{color:var(--muted);margin:0 0 18px}
      .hero{
        display:grid;gap:18px;grid-template-columns:1fr;align-items:center;
        background:linear-gradient(180deg,#f7fbff,#ffffff);
        border:1px solid #e7eef2;border-radius:16px;padding:16px;
      }
      .hero img,.hero svg{width:100%;height:auto;display:block}
      @media(min-width:900px){ .hero{ grid-template-columns: 1.1fr 0.9fr; } }
      section{margin-top:36px}
      h2{font-size:22px;margin:0 0 10px}
      .cards{display:grid;gap:16px;grid-template-columns:1fr}
      @media(min-width:900px){ .cards{grid-template-columns: repeat(3,1fr);} }
      .card{background:#f9f9f9;border:1px solid #ecf1f3;border-radius:14px;padding:16px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
      .card h3{margin:0 0 8px;font-size:18px}
      ul{margin:0;padding-left:18px;line-height:1.6;color:var(--muted)}
      ol{margin:0;padding-left:18px;line-height:1.6;color:var(--muted)}
      footer{border-top:1px solid rgba(14,74,87,.08);margin-top:40px}
      .foot{display:flex;align-items:center;gap:12px;padding:16px 0;color:var(--muted)}
      .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
      .btn{padding:10px 14px;border-radius:10px;border:2px solid var(--ink);text-decoration:none;font-weight:800;color:#fff;background:var(--ink)}
      .btn.secondary{background:#fff;color:var(--ink)}



    :root { --ink:#0e4a57; --accent:#19a66c; --muted:#5a6c73; }
    * { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
    html,body { font-family:'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    .container { max-width:1180px; margin:0 auto; padding:14px 16px; }
    header { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid rgba(14,74,87,.08); }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap: wrap; }
    .brand img { width:180px; height:auto; object-fit:contain; }
    nav a { text-decoration:none; color:var(--ink); font-weight:800; margin-left:14px; border-bottom:2px solid transparent; }
    nav a:hover { color:var(--accent); border-color:var(--accent); }
    .login { margin-left:10px; padding:8px 12px; border-radius:10px; border:2px solid var(--ink); background:var(--ink); color:#fff; text-decoration:none; font-weight:900; }
    .login:hover { background:var(--accent); border-color:var(--accent); }

    /* Dropdown */
    .dropdown { position: relative; display: inline-block; }
    .dropbtn { text-decoration: none; color: var(--ink); font-weight: 800; margin-left: 14px; padding: 8px 0; }
    .dropdown-content {
      display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 260px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-radius: 8px; z-index: 20;
    }
    .dropdown-content a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid #eee; }
    .dropdown-content a:last-child { border-bottom: none; }
    .dropdown-content a:hover { background: var(--accent); color: #fff; }
    .dropdown:hover .dropdown-content { display: block; }

    /* Tablet Styles */
    @media (min-width: 640px) {
      .container { padding: 14px 24px; }
      .brand img { width: 160px; }
      .nav { gap: 20px; }
      nav a { margin-left: 20px; }
      .login { padding: 10px 16px; }
      main { padding: 30px 0 60px; }
      h1 { font-size: clamp(30px, 5vw, 42px); }
      .hero { padding: 20px; gap: 24px; }
      section { margin-top: 40px; }
      h2 { font-size: 24px; }
      .cards { gap: 20px; }
      .card { padding: 20px; }
      .card h3 { font-size: 20px; }
      .foot img { width: 160px; }
      .copy { font-size: 18px; }
    }

    /* Small screen nav adjustments */
    @media (max-width: 639px) {
      .nav { flex-direction: column; align-items: center; gap: 10px; }
      .brand img { display: block; margin: 0 auto; }
      nav { width: 100%; text-align: center; }
      nav a { margin-left: 0; margin-right: 14px; }
      .login { display: block; width: 92%; padding: 12px 16px; text-align: center; margin-top: 10px; }
      main { padding: 20px 0 40px; }
      h1 { font-size: clamp(24px, 6vw, 36px); }
      .hero { padding: 16px; gap: 16px; }
      section { margin-top: 24px; }
      h2 { font-size: 20px; }
      .cards { gap: 16px; }
      .card { padding: 16px; }
      .card h3 { font-size: 18px; }
      .foot { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    }

    /* Large Desktop Styles */
    @media (min-width: 1200px) {
      .container { padding: 14px 32px; }
      main { padding: 40px 0 80px; }
      h1 { font-size: clamp(36px, 4vw, 48px); }
      .hero { padding: 24px; gap: 32px; }
      section { margin-top: 50px; }
      h2 { font-size: 26px; }
      .cards { gap: 24px; }
      .card { padding: 24px; }
      .card h3 { font-size: 22px; }
    }

    /* Footer */
    footer { border-top:1px solid rgba(14,74,87,.08); margin-top:40px; }
    .foot { display:flex; align-items:center; gap:10px; padding:16px 0; }
    .foot img { width:180px; height:auto; }
    .copy { font-size:18px; color:var(--muted); font-weight:700; }