:root {
        /* ===== EASY TUNING VARIABLES ===== */
        --zone-card-width: 40vw;   /* try: 35vw, 45vw */
        --zone-card-height: 55vh;  /* try: 50vh, 60vh */
        --zone-card-gap: 40px;     /* space between cards */
        --zone-card-radius: 24px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
    }

    html { scroll-behavior: smooth; }
    body { color: #222;
        background-image: url("https://storage.googleapis.com/ymatek-staging-assets/body-background.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    header {
      height: 120px; /* matches your logo area height */
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 22px;
      color: #0077ff;
      background-image: url("https://storage.googleapis.com/ymatek-staging-assets/header-background.png");
      background-size: cover;
      background-position: center;
    }

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logo img {
  max-height: 60px;   /* control logo size here */
  width: auto;
  display: block;
}

    /* ===== HERO / ZONE SELECTOR ===== */
    .zone-selector {
        height: 100vh;
        padding-top: 80px; /* space for fixed nav */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zone-cards {
        display: flex;
        gap: var(--zone-card-gap);
    }

    .zone-card {
        width: var(--zone-card-width);
        height: var(--zone-card-height);
        border-radius: var(--zone-card-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 42px;
        font-weight: 600;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Placeholder backgrounds – replace with images */
    .page-index .zone-card.zone1 {
        background-image: url("https://storage.googleapis.com/ymatek-staging-assets/zone1-background.png");
        background-size: cover;
        background-position: center;
    }
   
    .page-index .zone-card.zone2 {
        background-image: url("https://storage.googleapis.com/ymatek-staging-assets/zone2-background.png");
        background-size: cover;
        background-position: center;
    }

    .zone-card:hover,
    .zone-card:focus-visible {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 30px 60px rgba(0,0,0,0.25);
        outline: none;
    }

    /* ===== CONTENT ZONES ===== */
    section.zone {
        min-height: 100vh;
        padding: 120px 40px 40px;
        display: flex;
        align-items: center;
    }

    h2 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .page-index p {
        font-size: 20px;
        max-width: 600px;
        line-height: 1.5;
    }
    /* ===== ERROR PAGE LAYOUT ===== */
    /* Header-style block to visually match logo zone */
    /*.page-error header {
      height: 120px; 
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 22px;
      color: #0077ff;
      background-image: url("https://storage.googleapis.com/ymatek-staging-assets/header-background.png");
      background-size: cover;
      background-position: center;
    } */

    .page-error main {
      height: calc(100vh - 240px); /* accounts for header + footer heights */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      /*background: linear-gradient(to bottom right, #d4f1ff, #f9fdff);*/
      background-image: url("https://storage.googleapis.com/ymatek-staging-assets/main-background.png");
      background-size: cover;
      background-position: center;
    }
    .page-error main {
      background-image: url("https://storage.googleapis.com/ymatek-staging-assets/main-background.png");
      background-size: cover;
      background-position: center;
    }
    h1 {
      font-size: 42px;
      margin-bottom: 10px;
    }

    a.button {
      display: inline-block;
      text-decoration: none;
      padding: 14px 22px;
      border-radius: 16px;
      background: #0077ff;
      color: white;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      transition: transform .25s, box-shadow .25s, background .25s;
    }

    a.button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.12);
      background: #005fd1;
    }

    a.button:focus {
      outline: 3px solid rgba(0, 119, 255, 0.4);
      outline-offset: 3px;
    }

    .page-error p {
      font-size: 18px;
      margin-bottom: 24px;
      max-width: 520px;
      line-height: 1.5;
    }

    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        height: 64px; /* similar visual size to logo zone */
        /* TODO footer height not hardcoded*/
        font-weight: 600;
        font-size: 18px;
        background-image: url("https://storage.googleapis.com/ymatek-staging-assets/footer-background.png");
        background-size: cover;
        background-position: center;
    }

    /* ===== ACCESSIBILITY ===== */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 20px;
        background: #000;
        color: white;
        padding: 10px;
        border-radius: 8px;
        text-decoration: none;
        z-index: 1000;
    }

    .skip-link:focus { top: 20px; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
        :root {
            --zone-card-width: 80vw;
            --zone-card-height: 35vh;
        }

        .zone-cards {
            flex-direction: column;
        }

        h2 { font-size: 36px; }
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .zone-card { transition: none; }
    }