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

 /*MAIN STYLING*/
 :root {
     --brand-light: #ffe2bd;
     --brand-dark: #ff860d;
     --brand: #E63946;
     --brand-dark: #C1121F;
     --dark: #1A1A2E;
     --dark-soft: #16213E;
     --accent: #0F3460;
     --light: #F8F9FA;
     --muted: #6C757D;
     --card-bg: #FFFFFF;
     --border: #E9ECEF;
     --gradient-brand: linear-gradient(135deg, #E63946 0%, #3b3d3f 100%);
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
     --brand-light: #ffe2bd;
     --brand: #E63946;
     --brand-dark: #C1121F;
     --brand-orange: #ff860d;
 }

 .gradient-bg {
     background: linear-gradient(135deg, #ffe2bd 0%, #ff860d 100%);
 }

 .nav-pills .nav-link.active {
     background-color: #3b6c3e !important;
 }

 /* ========== FOOTER ========== */
 .footer-logo {
     font-family: "Inter", sans-serif;
     font-weight: 900;
     font-size: 1.5rem;
     color: #fff;
     margin-bottom: 1rem;
 }

 .footer-tagline {
     font-size: 1rem;
     text-align: center;
     color: white;
     margin-bottom: 1.25rem;
 }

 .footer-social {
     display: flex;
     justify-content: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
 }

 .footer-social a {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1rem;
     transition: all 0.25s;
     text-decoration: none;
 }

 .footer-social a:hover {
     background: var(--brand);
     color: #fff;
     transform: translateY(-2px);
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
     color: white;
 }

 .footer-links a {
     color: white;
     font-size: 0.82rem;
     font-weight: 500;
     text-decoration: none;
     transition: color 0.2s;
 }

 .footer-links a:hover {
     color: var(--brand-light);
 }

 .footer-bottom a {
     color: white;
     text-decoration: none;
 }

 .footer-bottom a:hover {
     color: var(--brand-light);
 }

 /* ========== CATEGORY BANNER ========== */
 .category-banner {
     background: #fff;
     border-bottom: 1px solid var(--border);
     padding: 0.75rem 0;
     position: sticky;
     top: 0;
     z-index: 1020;
 }

 .category-scroll {
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
     padding-bottom: 0.25rem;
     scrollbar-width: none;
 }

 .category-scroll::-webkit-scrollbar {
     display: none;
 }

 .category-pill {
     flex-shrink: 0;
     padding: 0.4rem 1rem;
     border-radius: 50px;
     font-size: 0.8rem;
     font-weight: 600;
     background: var(--light);
     color: var(--muted);
     border: 1px solid var(--border);
     cursor: pointer;
     transition: all 0.25s;
     text-decoration: none;
     white-space: nowrap;
 }

 .category-pill:hover {
     background: var(--dark);
     color: #fff;
     border-color: var(--dark);
 }

 .category-pill.active {
     background: var(--brand);
     color: #fff;
     border-color: var(--brand);
 }

 /*SURVEY TOKEN DISPLAY*/

 .survey-token-card {
     max-width: 720px;
     margin: 24px auto;
     padding: 28px;
     border-radius: 18px;
     background: rgb(245, 253, 237);
     color: black;
     font-family: Inter, Arial, sans-serif;
     box-shadow:
         0 20px 40px rgba(0, 0, 0, .25),
         inset 0 1px 0 rgba(255, 255, 255, .08);
 }

 .survey-token-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 18px;
     font-size: 1.5rem;
     font-weight: 700;
     color: #fbbf24;
 }

 .survey-token-description {
     color: black;
     line-height: 1.7;
     margin-bottom: 20px;
     font-size: 0.95rem;
 }

 .survey-token-box {
     background: white;
     border: 2px dashed #38bdf8;
     border-radius: 14px;
     padding: 22px;
     text-align: center;
     margin: 22px 0;
 }

 .survey-token-label {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: black;
     font-weight: bold;
     margin-bottom: 10px;
 }

 .survey-token-value {
     color: black;
     font-size: 1.15rem;
     font-weight: 700;
     word-break: break-word;
     letter-spacing: 1px;
 }

 .survey-token-warning {
     margin-top: 20px;
 }

 /*STYLING HTML ELEMENTS*/
 .form-control,
 .form-select {
     width: 200px;
     margin: 0 auto;
 }

 /*Styling Scroll to top Button*/
 .scroll-top-btn {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;

     width: 48px;
     height: 48px;

     display: flex;
     align-items: center;
     justify-content: center;

     border: 2px solid rgba(255, 255, 255, 0.35);
     border-radius: 14px;

     background: linear-gradient(135deg,
             var(--brand),
             var(--brand-dark));

     color: #fff;
     font-size: 1.15rem;
     font-weight: 600;

     box-shadow:
         0 8px 20px rgba(198, 18, 31, 0.25),
         0 3px 8px rgba(0, 0, 0, 0.12);

     cursor: pointer;

     opacity: 0;
     visibility: hidden;
     transform: translateY(12px) scale(0.9);

     transition:
         opacity 0.3s ease,
         visibility 0.3s ease,
         transform 0.3s ease,
         box-shadow 0.3s ease,
         background 0.3s ease;

     z-index: 1050;
 }

 /* Show button */
 .scroll-top-btn.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
 }

 /* Hover */
 .scroll-top-btn:hover {
     background: linear-gradient(135deg,
             var(--brand-orange),
             var(--brand));

     transform: translateY(-4px) scale(1.05);

     box-shadow:
         0 12px 25px rgba(230, 57, 70, 0.35),
         0 5px 10px rgba(0, 0, 0, 0.15);
 }

 /* Click */
 .scroll-top-btn:active {
     transform: translateY(-1px) scale(0.97);
 }

 /* Keyboard accessibility */
 .scroll-top-btn:focus-visible {
     outline: 3px solid var(--brand-light);
     outline-offset: 3px;
 }

 /* Arrow animation */
 .scroll-top-btn i,
 .scroll-top-btn svg {
     transition: transform 0.3s ease;
 }

 .scroll-top-btn:hover i,
 .scroll-top-btn:hover svg {
     transform: translateY(-2px);
 }