<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <title>Elect Mick Vote — refined buttons</title>
  <!-- Font Awesome 6 (free) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    /* RESET & BASE */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      background: #f9f9fb;
      color: #1a1a2c;
      line-height: 1.5;
    }

    /* header / nav (example minimal) */
    .top-bar {
      background: #0a0f1e;
      color: white;
      padding: 0.9rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .logo {
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: -0.02em;
    }
    .logo span {
      color: #ffd966;
    }

    .nav-links {
      display: flex;
      gap: 1.5rem;
    }
    .nav-links a {
      color: white;
      text-decoration: none;
      font-weight: 500;
    }

    /* ----- HERO SECTION ----- */
    .hero {
      background: #1e2b4f;
      background-image: linear-gradient(145deg, #13203b, #1e334f);
      padding: 3rem 5% 3.5rem;
      text-align: center;
      color: white;
    }

    .hero-content {
      max-width: 800px;
      margin: 0 auto;
    }

    .hero h1 {
      font-size: clamp(2.2rem, 12vw, 4rem);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 0.5rem;
      word-break: break-word;
    }

    .hero-tagline {
      font-size: 1.5rem;
      font-weight: 400;
      margin-bottom: 1.75rem;
      color: #f0f4ff;
      text-shadow: 0 2px 3px rgba(0,0,0,0.3);
    }

    /* FIX 2: significantly smaller buttons */
    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      margin-top: 0.5rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.25rem;      /* reduced from 0.7rem 1.8rem */
      font-size: 1rem;               /* normal paragraph size */
      font-weight: 600;
      border-radius: 40px;
      text-decoration: none;
      transition: 0.2s;
      border: 2px solid transparent;
      white-space: nowrap;
      letter-spacing: 0.3px;
    }

    .btn i {
      font-size: 0.95rem;            /* slightly smaller icon to match */
    }

    .btn-primary {
      background: #ffb347;
      color: #0a1a2b;
      border-color: #ffa01c;
    }

    .btn-primary i {
      color: #0a1a2b;
    }

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid white;
    }

    .btn-outline i {
      color: white;
    }

    .btn:hover {
      transform: scale(1.02);
      filter: brightness(1.05);
    }

    /* Phone view adjustments */
    @media (max-width: 600px) {
      .hero {
        padding: 2.5rem 1.2rem 3rem;
      }

      .hero h1 {
        font-size: clamp(2.5rem, 13vw, 3.8rem);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .hero-tagline {
        font-size: 1.3rem;
        padding: 0 0.2rem;
        color: #f0f4ff;
        margin-bottom: 1.5rem;
      }

      /* buttons: stack vertically but remain compact */
      .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.85rem;
      }

      .btn {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;        /* kept compact even on mobile */
        font-size: 1rem;
        white-space: normal;
        word-break: keep-all;
      }
    }

    /* Extra small devices - keep buttons from growing */
    @media (max-width: 380px) {
      .btn {
        font-size: 0.95rem;
        padding: 0.45rem 0.9rem;
      }
      .hero-tagline {
        font-size: 1.2rem;
      }
    }

    /* demo extra section to show normal page flow */
    .section {
      padding: 3rem 5%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-top: 2rem;
    }
    .card {
      background: white;
      padding: 2rem;
      border-radius: 2rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.03);
      flex: 1 1 260px;
    }
    i { margin-right: 4px; }

    .text-muted { color: #4a4a5e; }
    hr { margin: 1rem 0; opacity: 0.2; }
  </style>
</head>
<body>

<!-- simple header -->
<header class="top-bar">
  <div class="logo"><span>✓</span> ELECTMICK</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">Manifesto</a>
    <a href="#">Join</a>
  </div>
</header>

<!-- HERO section – with properly sized buttons -->
<section class="hero">
  <div class="hero-content">
    <h1>electmick.vote</h1>
    <div class="hero-tagline">Your voice in the Scottish Parliament</div>

    <!-- BUTTONS: now appropriately sized (not too big) -->
    <div class="hero-buttons">
      <a href="#" class="btn btn-primary"><i class="fas fa-heart"></i> Become a Supporter</a>
      <a href="#" class="btn btn-outline"><i class="fas fa-comment-dollar"></i> Chip in 4 Change</a>
    </div>

    <div style="margin-top: 2rem; opacity:0.9; font-size:0.9rem; color:#ccd9ff">
      <i class="fas fa-map-marker-alt"></i> representing East Renfrewshire
    </div>
  </div>
</section>

<!-- rest of the page example -->
<section class="section">
  <h2>Priorities for Renfrewshire</h2>
  <div class="card-grid">
    <div class="card"><i class="fas fa-leaf" style="color:#2b6e3b;"></i> <strong>Green jobs</strong><br><span class="text-muted">local investment</span></div>
    <div class="card"><i class="fas fa-bus" style="color:#005e99;"></i> <strong>Public transport</strong><br><span class="text-muted">fair fares for all</span></div>
    <div class="card"><i class="fas fa-school" style="color:#a14a76;"></i> <strong>Education first</strong><br><span class="text-muted">smaller class sizes</span></div>
  </div>
  <hr>
  <p style="margin-top:2rem"><i class="fas fa-check-circle" style="color:#1d7e3b;"></i> ✅ Buttons now much smaller (padding: 0.5rem 1.25rem, font-size: 1rem)</p>
</section>

<!-- verification note -->
<div style="background:#ebebf0; text-align:center; padding:0.75rem; font-size:0.85rem; border-top:1px solid #ccc;">
  ⚡ electmick.vote — buttons reduced to normal size (like paragraph text)
</div>

</body>
</html>