/* ===== GLOBAL BASE STYLES ===== */
    html { scroll-behavior: smooth; }

    /* ===== BACKGROUND GRID PATTERN ===== */
    .bg-grid {
      background-image: radial-gradient(currentColor 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: .06;
      pointer-events: none;
    }

    /* ===== SECTION DIVIDER STYLE ===== */
    .section-divider {
      border-top: 2px solid;
      border-bottom: 2px solid;
      padding: 0.6rem 0;
      letter-spacing: 0.08em;
      font-variant: small-caps;
    }

    /* ===== COLLAPSIBLE EXAMPLES PANEL ===== */
    .examples-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease;
      opacity: 0;
    }
    .examples-body.open {
      max-height: 600px;
      opacity: 1;
    }

    /* ===== TEXTAREA STYLES ===== */
    textarea {
      resize: vertical;
      min-height: 90px;
    }

    /* ===== STICKY NAV SCROLLBAR ===== */
    .sticky-nav::-webkit-scrollbar { width: 4px; }
    .sticky-nav::-webkit-scrollbar-thumb { background: #36D6B5; border-radius: 9999px; }

    /* ===== PROGRESS BAR ANIMATION ===== */
    .progress-fill {
      transition: width 0.4s ease;
    }

    /* ===== SECTION HIGHLIGHT ON ACTIVE ===== */
    .nav-item.active {
      color: #36D6B5;
      font-weight: 600;
      background-color: rgba(54,214,181,0.08);
    }

    /* ===== FOCUS RING OVERRIDE ===== */
    input:focus, textarea:focus, select:focus, button:focus-visible {
      outline: 2px solid #36D6B5;
      outline-offset: 2px;
    }

    /* ===== DARK MODE TEXTAREA / SELECT ===== */
    .dark textarea,
    .dark select {
      background-color: rgb(15 23 42);
      color: rgb(226 232 240);
      border-color: rgb(51 65 85);
    }
    .dark textarea::placeholder { color: rgb(100 116 139); }

    /* ===== SELECT DROPDOWN ===== */
    select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      padding-right: 2.5rem;
    }

    /* ===== SUBMIT BUTTON PULSE ===== */
    @keyframes pulse-brand {
      0%, 100% { box-shadow: 0 0 0 0 rgba(54,214,181,0.4); }
      50% { box-shadow: 0 0 0 8px rgba(54,214,181,0); }
    }
    .btn-submit:hover { animation: pulse-brand 1.5s infinite; }

    /* ===== EXAMPLES ARROW ROTATION ===== */
    .examples-arrow.rotated {
      transform: rotate(90deg);
    }

    /* ===== WHERE AM I INDICATOR ===== */
    #where-am-i {
      transition: opacity 0.3s ease;
    }