:root{
      --bg: #f5f7fb;
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #0b75ef;
      --accent-2: #0b9c6e;
      --max: 1120px;
      --radius: 14px;
      --shadow: 0 8px 28px rgba(0,0,0,0.06);
      font-family: "Inter", system-ui, sans-serif;
    }

    *{ box-sizing: border-box; }
    body{ margin:0; background:var(--bg); color:#0f172a; line-height:1.55; }
    .container{ max-width:var(--max); margin:auto; padding:20px; }

    /* HEADER */
    .site-header{
      background:#fff;
      box-shadow:0 2px 8px rgba(0,0,0,0.04);
      position:sticky;top:0;
      z-index:999999;
      backdrop-filter: blur(12px);
    }
    .header-inner{
      display:flex;justify-content:space-between;align-items:center;
      padding:14px 20px;
    }
    .brand{ display:flex;align-items:center;gap:14px; }
    .brand h1{ margin:0;font-size:20px;font-weight:700; }
    .brand small{ display:block;color:var(--muted);font-size:12px; }

    .nav a{
      margin-left:16px;
      color:var(--muted);
      text-decoration:none;
      font-weight:600;
      transition:0.2s;
    }
    .nav a:hover{ color:#0b75ef; }
    .nav a.cta{
      padding:8px 14px;
      background:var(--accent);
      color:#fff;
      border-radius:10px;
      box-shadow:0 4px 12px rgba(11,117,239,0.22);
    }

    /* SECTIONS */
    .section{ padding:40px 0; }
    .section.alt{ background:#fff; }
    h3{ margin:0 0 10px 0; font-size:26px; font-weight:700; }

    /* CARDS */
    .card{
      background:var(--card);
      padding:18px;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition:0.2s;
    }
    .card:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 32px rgba(0,0,0,0.08);
    }

    .two-col{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      margin-top:20px;
    }

    /* MAP SECTION */
    .map-section .map-wrap{
      display:grid;
      grid-template-columns:1fr 360px;
      gap:24px;
      align-items:start;
    }
    #mapid{
      z-index: 1;
      height:600px;
      border-radius:var(--radius);
      border:1px solid #e4e7ec;
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .map-right{
      background:var(--card);
      padding:18px;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      position:sticky;top:90px;
    }

    select, textarea, input[type="file"]{
      width:100%;
      padding:10px;
      border-radius:10px;
      border:1px solid #dce3ee;
      background:#fafbff;
      font-size:14px;
      outline:none;
      transition:0.15s;
    }

    textarea{ resize:none; }

    select:focus, textarea:focus, input[type="file"]:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(11,117,239,0.15);
    }

    /* BUTTONS */
    .btn{
      padding:10px 14px;
      font-weight:600;
      border-radius:10px;
      cursor:pointer;
      border:1px solid transparent;
      transition:0.2s;
    }
    .btn.primary{
      background:var(--accent);
      color:#fff;
      box-shadow:0 4px 12px rgba(11,117,239,0.25);
    }
    .btn.primary:hover{ background:#0a67cf; }
    .btn:hover{ transform:translateY(-2px); }

    /* ISSUE LIST */
    .issues-list{
      height:320px;
      overflow-y:auto;
      margin-top:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-right:6px;
    }
    .issue-item{
      display:flex;
      gap:10px;
      padding:10px;
      background:#fff;
      border-radius:12px;
      border:1px solid #eef1f6;
      box-shadow:0 2px 6px rgba(0,0,0,0.04);
      transition:0.2s;
    }
    .issue-item:hover{
      transform:translateX(4px);
    }

    .issue-item .dot{
      width:14px; height:14px;
      border-radius:50%; flex-shrink:0;
      box-shadow:0 0 0 6px rgba(229,57,53,0.08);
    }

    /* FEATURES GRID */
    .features-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:20px;
    }

    .feature{
      background:#fff;
      padding:16px;
      border-radius:12px;
      border:1px solid #f0f4fb;
      transition:0.2s;
    }
    .feature:hover{
      transform:translateY(-4px);
      box-shadow:0 8px 20px rgba(0,0,0,0.06);
    }

    /* FOOTER */
    .site-footer{
      padding:20px 0;
      text-align:center;
      color:var(--muted);
    }

    /* RESPONSIVE */
    @media(max-width:980px){
      .map-section .map-wrap{ grid-template-columns:1fr; }
      #mapid{ height:340px; }
      .features-grid{ grid-template-columns:repeat(2,1fr); }
      .two-col{ grid-template-columns:1fr; }
    }