:root{
      --bg: #f3f4f6;
      --card: #ffffff;
      --border: #e5e7eb;
      --text: #111827;
      --muted: #6b7280;
      --accent: #16a34a;
    }

    *{ box-sizing:border-box; margin:0; padding:0; }

    body{
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #e5f3ff 0, #f9fafb 40%, #f3f4f6 100%);
      color: var(--text);
      min-height:100vh;
    }

    /* HEADER */
    .site-header{
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      z-index: 2000;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(15,23,42,.06);
    }
    .header-inner{
      max-width: 1200px;
      margin: 0 auto;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      position: relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:#111827;
    }
    .brand-logo{
      height:44px;
      width:auto;
      display:block;
      border-radius:10px;
    }
    .brand-name{
      font-weight:900;
      letter-spacing:.6px;
      font-size:14px;
      line-height:1.1;
      text-transform:uppercase;
    }
    .brand-slogan{
      font-size:12px;
      color:#4b5563;
      margin-top:2px;
      line-height:1.2;
      font-style:italic;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:18px;
    }
    .site-nav a{
      color:#111827;
      text-decoration:none;
      font-weight:700;
      font-size:14px;
      opacity:.9;
    }
    .site-nav a:hover{
      opacity:1;
      text-decoration:underline;
    }
    .nav-cta{
      background: linear-gradient(135deg, #4facfe, #38bdf8);
      color:#0b1120 !important;
      padding:10px 14px;
      border-radius:999px;
      font-weight:900;
      text-decoration:none !important;
      box-shadow:0 10px 20px rgba(59,130,246,0.25);
    }
    .nav-toggle{
      display:none;
      border:0;
      background:transparent;
      cursor:pointer;
      padding:8px;
    }
    .nav-toggle span{
      display:block;
      width:26px;
      height:3px;
      background:#111827;
      margin:5px 0;
      border-radius:2px;
    }
    @media(max-width:900px){
      .site-nav{
        display:none;
        position:absolute;
        right:16px;
        top:56px;
        background:#ffffff;
        border-radius:12px;
        padding:10px 12px;
        flex-direction:column;
        box-shadow:0 12px 30px rgba(15,23,42,0.18);
      }
      .site-nav.is-open{
        display:flex;
      }
      .site-nav a{
        padding:6px 4px;
        white-space:nowrap;
      }
      .nav-toggle{ display:inline-block; }
    }

    /* PAGE WRAP */
    .page-wrap{
      max-width:1100px;
      margin:110px auto 40px;
      padding:0 16px 32px;
    }

    .page-header{
      margin-bottom:18px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--accent);
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(22,163,74,.4);
      background:#ecfdf3;
    }
    h1{
      font-size:26px;
      margin:8px 0 4px;
      letter-spacing:-0.03em;
    }
    .subtitle{
      font-size:14px;
      color:var(--muted);
      max-width:620px;
    }

    .last-updated{
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
    }

    /* GRID */
    .time-grid{
      margin-top:18px;
      background:var(--card);
      border-radius:18px;
      border:1px solid var(--border);
      box-shadow:0 16px 40px rgba(15,23,42,0.08);
      padding:12px 10px;
    }

    .time-grid-header,
    .time-row{
      display:grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr);
      gap:8px;
      align-items:center;
      padding:6px 8px;
      font-size:13px;
    }

    .time-grid-header{
      font-size:12px;
      font-weight:600;
      color:#6b7280;
      text-transform:uppercase;
      letter-spacing:.08em;
      border-bottom:1px solid var(--border);
      margin-bottom:4px;
    }

    .time-row:nth-child(2n){
      background:#f9fafb;
    }

    .time-country{
      font-weight:600;
    }

    .time-clock{
      font-variant-numeric:tabular-nums;
      font-weight:500;
    }

    .time-day{
      color:var(--muted);
      font-size:12px;
    }

    .time-tz{
      color:var(--muted);
      font-size:12px;
    }
    .time-tz strong{
      font-weight:600;
      color:#4b5563;
    }

    @media(max-width:700px){
      .time-grid-header{
        display:none;
      }
      .time-row{
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
        grid-template-rows: auto auto;
      }
      .time-country{
        grid-column:1 / -1;
      }
      .time-tz{
        text-align:left;
      }
    }

    /* FOOTER */
    .site-footer{
      margin-top:16px;
      padding:16px 10px 22px;
      text-align:center;
      font-size:13px;
      color:#6b7280;
      border-top:1px solid #e5e7eb;
      background:#ffffffcc;
      backdrop-filter:blur(6px);
    }
    .site-footer a{
      color:#111827;
      text-decoration:none;
      font-weight:600;
    }
    .site-footer a:hover{
      color:#2563eb;
      text-decoration:underline;
    }

    .footer-note{
      margin-top:8px;
      font-size:12px;
      color:#9ca3af;
    }
    .footer-note strong{
      color:var(--accent);
    }
    .coffee-btn{
      display:inline-block;
      margin-top:8px;
      padding:8px 14px;
      border-radius:999px;
      background:#22c55e;
      color:#022c22;
      font-weight:800;
      text-decoration:none;
      border:1px solid rgba(34,197,94,.9);
    }